From 6eb9aa78efce98f00109f4526a07e2790a689d53 Mon Sep 17 00:00:00 2001
From: Rohan <Alchez@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:55:43 +0530
Subject: [PATCH] [docbuilder] fix broken docbuilder stories (#231)

Co-authored-by: Rohan Bansal <rohan@agritheory.dev>
---
 ...x-docbuilder-issue-1_2025-01-02-09-06.json | 10 +++
 common/reviews/api/desktop.api.md             | 26 +++++++
 desktop/src/components/ActionSet.vue          | 23 ++----
 desktop/src/index.ts                          |  1 +
 desktop/src/plugins/index.ts                  |  3 +-
 desktop/src/types/index.ts                    | 41 +++++++++++
 docs/desktop/desktop.actionelements.md        | 15 ++++
 docs/desktop/desktop.baseelement.md           | 16 +++++
 docs/desktop/desktop.buttonelement.md         | 17 +++++
 docs/desktop/desktop.dropdownelement.md       | 18 +++++
 docs/desktop/desktop.elementaction.md         | 18 +++++
 docs/desktop/desktop.md                       | 72 ++++++++++++++++++-
 docs/desktop/desktop.stonecropdesktop.md      |  2 +-
 examples/desktop/App.vue                      |  6 +-
 .../docbuilder/assets/doctype_schema.json     | 10 +--
 examples/docbuilder/components/Builder.vue    | 22 +++---
 examples/docbuilder/components/Home.vue       |  9 ---
 examples/docbuilder/components/Listview.vue   | 24 +++----
 examples/docbuilder/index.ts                  | 27 +++----
 examples/docbuilder/server.ts                 | 27 +++----
 examples/docbuilder/vite.config.ts            |  2 +-
 21 files changed, 293 insertions(+), 96 deletions(-)
 create mode 100644 common/changes/@stonecrop/desktop/fix-docbuilder-issue-1_2025-01-02-09-06.json
 create mode 100644 desktop/src/types/index.ts
 create mode 100644 docs/desktop/desktop.actionelements.md
 create mode 100644 docs/desktop/desktop.baseelement.md
 create mode 100644 docs/desktop/desktop.buttonelement.md
 create mode 100644 docs/desktop/desktop.dropdownelement.md
 create mode 100644 docs/desktop/desktop.elementaction.md
 delete mode 100644 examples/docbuilder/components/Home.vue

diff --git a/common/changes/@stonecrop/desktop/fix-docbuilder-issue-1_2025-01-02-09-06.json b/common/changes/@stonecrop/desktop/fix-docbuilder-issue-1_2025-01-02-09-06.json
new file mode 100644
index 00000000..7aa8f704
--- /dev/null
+++ b/common/changes/@stonecrop/desktop/fix-docbuilder-issue-1_2025-01-02-09-06.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/desktop",
+      "comment": "fix broken docbuilder stories",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/desktop"
+}
\ No newline at end of file
diff --git a/common/reviews/api/desktop.api.md b/common/reviews/api/desktop.api.md
index 683a5765..d4c58310 100644
--- a/common/reviews/api/desktop.api.md
+++ b/common/reviews/api/desktop.api.md
@@ -11,12 +11,38 @@ import { Plugin as Plugin_2 } from 'vue';
 import Records from './components/Records.vue';
 import SheetNav from './components/SheetNav.vue';
 
+// @public
+export type ActionElements = ButtonElement | DropdownElement;
+
 export { ActionSet }
 
+// @public
+export type BaseElement = {
+    label: string;
+    show?: boolean;
+};
+
+// @public
+export type ButtonElement = BaseElement & ElementAction & {
+    type: 'button';
+};
+
 export { CommandPalette }
 
 export { Doctype }
 
+// @public
+export type DropdownElement = BaseElement & {
+    type: 'dropdown';
+    actions: ElementAction[];
+};
+
+// @public
+export type ElementAction = BaseElement & {
+    link?: string;
+    action?: () => void;
+};
+
 export { Records }
 
 export { SheetNav }
diff --git a/desktop/src/components/ActionSet.vue b/desktop/src/components/ActionSet.vue
index 2b6ebdf8..c38d793e 100644
--- a/desktop/src/components/ActionSet.vue
+++ b/desktop/src/components/ActionSet.vue
@@ -39,8 +39,8 @@
 		</div>
 		<div style="margin-right: 30px"></div>
 		<div class="action-element" v-for="(el, index) in _elements" :key="el.label">
-			<button v-if="el.elementType == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
-			<div v-if="el.elementType == 'dropdown'">
+			<button v-if="el.type == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
+			<div v-if="el.type == 'dropdown'">
 				<button class="button-default" @click="toggleDropdown(index)">{{ el.label }}</button>
 				<div class="dropdown-container" v-show="el.show">
 					<div class="dropdown">
@@ -60,22 +60,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-type SetAction = {
-	label: string
-	link?: string
-	action?: () => void
-}
-
-type SetElement = {
-	elementType: string
-	label: string
-	link?: string
-	show?: boolean
-	action?: () => void
-	actions?: SetAction[]
-}
+import type { ActionElements } from '../types'
 
-const { elements } = defineProps<{ elements?: SetElement[] }>()
+const { elements } = defineProps<{ elements?: ActionElements[] }>()
 
 const _elements = ref(elements)
 const isOpen = ref(false)
@@ -89,7 +76,7 @@ onMounted(() => {
 
 const closeDropdowns = () => {
 	for (const element of _elements.value) {
-		if (element.elementType === 'dropdown') {
+		if (element.type === 'dropdown') {
 			element.show = false
 		}
 	}
diff --git a/desktop/src/index.ts b/desktop/src/index.ts
index 1f983f9f..62a8d17d 100644
--- a/desktop/src/index.ts
+++ b/desktop/src/index.ts
@@ -4,5 +4,6 @@ import Doctype from './components/Doctype.vue'
 import Records from './components/Records.vue'
 import SheetNav from './components/SheetNav.vue'
 import StonecropDesktop from './plugins'
+export type { ActionElements, BaseElement, ButtonElement, DropdownElement, ElementAction } from './types'
 
 export { ActionSet, CommandPalette, Doctype, Records, SheetNav, StonecropDesktop }
diff --git a/desktop/src/plugins/index.ts b/desktop/src/plugins/index.ts
index a2bd04af..78b9508e 100644
--- a/desktop/src/plugins/index.ts
+++ b/desktop/src/plugins/index.ts
@@ -7,8 +7,7 @@ import Records from '../components/Records.vue'
 import SheetNav from '../components/SheetNav.vue'
 
 /**
- * This is the main plugin file that will be used to register all the components
- * that we want to use in our application.
+ * This is the main plugin that will be used to register all the desktop components.
  * @public
  */
 const plugin: Plugin = {
diff --git a/desktop/src/types/index.ts b/desktop/src/types/index.ts
new file mode 100644
index 00000000..d6f5b1db
--- /dev/null
+++ b/desktop/src/types/index.ts
@@ -0,0 +1,41 @@
+/**
+ * Base type for elements in the Action Set
+ * @public
+ */
+export type BaseElement = {
+	label: string
+	show?: boolean
+}
+
+/**
+ * Element actions
+ * @public
+ */
+export type ElementAction = BaseElement & {
+	link?: string
+	action?: () => void
+}
+
+/**
+ * Button elements
+ * @public
+ */
+export type ButtonElement = BaseElement &
+	ElementAction & {
+		type: 'button'
+	}
+
+/**
+ * Dropdown elements
+ * @public
+ */
+export type DropdownElement = BaseElement & {
+	type: 'dropdown'
+	actions: ElementAction[]
+}
+
+/**
+ * Superset of all element types in the Action Set
+ * @public
+ */
+export type ActionElements = ButtonElement | DropdownElement
diff --git a/docs/desktop/desktop.actionelements.md b/docs/desktop/desktop.actionelements.md
new file mode 100644
index 00000000..1ca7c9b4
--- /dev/null
+++ b/docs/desktop/desktop.actionelements.md
@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ActionElements](./desktop.actionelements.md)
+
+## ActionElements type
+
+Superset of all element types in the Action Set
+
+**Signature:**
+
+```typescript
+export type ActionElements = ButtonElement | DropdownElement;
+```
+**References:** [ButtonElement](./desktop.buttonelement.md)<!-- -->, [DropdownElement](./desktop.dropdownelement.md)
+
diff --git a/docs/desktop/desktop.baseelement.md b/docs/desktop/desktop.baseelement.md
new file mode 100644
index 00000000..7ae51aa7
--- /dev/null
+++ b/docs/desktop/desktop.baseelement.md
@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [BaseElement](./desktop.baseelement.md)
+
+## BaseElement type
+
+Base type for elements in the Action Set
+
+**Signature:**
+
+```typescript
+export type BaseElement = {
+    label: string;
+    show?: boolean;
+};
+```
diff --git a/docs/desktop/desktop.buttonelement.md b/docs/desktop/desktop.buttonelement.md
new file mode 100644
index 00000000..f65c73d9
--- /dev/null
+++ b/docs/desktop/desktop.buttonelement.md
@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ButtonElement](./desktop.buttonelement.md)
+
+## ButtonElement type
+
+Button elements
+
+**Signature:**
+
+```typescript
+export type ButtonElement = BaseElement & ElementAction & {
+    type: 'button';
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)<!-- -->, [ElementAction](./desktop.elementaction.md)
+
diff --git a/docs/desktop/desktop.dropdownelement.md b/docs/desktop/desktop.dropdownelement.md
new file mode 100644
index 00000000..33127c2f
--- /dev/null
+++ b/docs/desktop/desktop.dropdownelement.md
@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [DropdownElement](./desktop.dropdownelement.md)
+
+## DropdownElement type
+
+Dropdown elements
+
+**Signature:**
+
+```typescript
+export type DropdownElement = BaseElement & {
+    type: 'dropdown';
+    actions: ElementAction[];
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)<!-- -->, [ElementAction](./desktop.elementaction.md)
+
diff --git a/docs/desktop/desktop.elementaction.md b/docs/desktop/desktop.elementaction.md
new file mode 100644
index 00000000..653ad256
--- /dev/null
+++ b/docs/desktop/desktop.elementaction.md
@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/desktop](./desktop.md) &gt; [ElementAction](./desktop.elementaction.md)
+
+## ElementAction type
+
+Element actions
+
+**Signature:**
+
+```typescript
+export type ElementAction = BaseElement & {
+    link?: string;
+    action?: () => void;
+};
+```
+**References:** [BaseElement](./desktop.baseelement.md)
+
diff --git a/docs/desktop/desktop.md b/docs/desktop/desktop.md
index 49609348..8ad281e7 100644
--- a/docs/desktop/desktop.md
+++ b/docs/desktop/desktop.md
@@ -24,7 +24,77 @@ Description
 
 </td><td>
 
-This is the main plugin file that will be used to register all the components that we want to use in our application.
+This is the main plugin that will be used to register all the desktop components.
+
+
+</td></tr>
+</tbody></table>
+
+## Type Aliases
+
+<table><thead><tr><th>
+
+Type Alias
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[ActionElements](./desktop.actionelements.md)
+
+
+</td><td>
+
+Superset of all element types in the Action Set
+
+
+</td></tr>
+<tr><td>
+
+[BaseElement](./desktop.baseelement.md)
+
+
+</td><td>
+
+Base type for elements in the Action Set
+
+
+</td></tr>
+<tr><td>
+
+[ButtonElement](./desktop.buttonelement.md)
+
+
+</td><td>
+
+Button elements
+
+
+</td></tr>
+<tr><td>
+
+[DropdownElement](./desktop.dropdownelement.md)
+
+
+</td><td>
+
+Dropdown elements
+
+
+</td></tr>
+<tr><td>
+
+[ElementAction](./desktop.elementaction.md)
+
+
+</td><td>
+
+Element actions
 
 
 </td></tr>
diff --git a/docs/desktop/desktop.stonecropdesktop.md b/docs/desktop/desktop.stonecropdesktop.md
index 0638e8b8..b5f6477e 100644
--- a/docs/desktop/desktop.stonecropdesktop.md
+++ b/docs/desktop/desktop.stonecropdesktop.md
@@ -4,7 +4,7 @@
 
 ## StonecropDesktop variable
 
-This is the main plugin file that will be used to register all the components that we want to use in our application.
+This is the main plugin that will be used to register all the desktop components.
 
 **Signature:**
 
diff --git a/examples/desktop/App.vue b/examples/desktop/App.vue
index 5a385af7..3d4b13ff 100644
--- a/examples/desktop/App.vue
+++ b/examples/desktop/App.vue
@@ -11,12 +11,12 @@
 <script setup lang="ts">
 const elements = [
 	{
-		elementType: 'button',
+		type: 'button',
 		label: 'Show Alert',
 		action: buttonClicked,
 	},
 	{
-		elementType: 'dropdown',
+		type: 'dropdown',
 		label: 'Action Menu',
 		actions: [
 			{
@@ -38,7 +38,7 @@ const elements = [
 		],
 	},
 	{
-		elementType: 'dropdown',
+		type: 'dropdown',
 		label: 'Link Menu',
 		actions: [
 			{
diff --git a/examples/docbuilder/assets/doctype_schema.json b/examples/docbuilder/assets/doctype_schema.json
index 9d11bc7c..bd35adb9 100644
--- a/examples/docbuilder/assets/doctype_schema.json
+++ b/examples/docbuilder/assets/doctype_schema.json
@@ -23,14 +23,14 @@
 						"fieldtype": "Data",
 						"align": "left",
 						"edit": false,
-						"width": "35ch"
+						"width": "25ch"
 					},
 					{
 						"label": "Fieldtype",
 						"name": "fieldtype",
 						"fieldtype": "Select",
 						"align": "left",
-						"width": "20ch",
+						"width": "25ch",
 						"edit": true
 					},
 					{
@@ -47,7 +47,7 @@
 						"component": "<input type=\"radio\"/>",
 						"align": "left",
 						"edit": true,
-						"width": "5ch"
+						"width": "10ch"
 					},
 					{
 						"label": "Read Only",
@@ -55,7 +55,7 @@
 						"component": "<input type=\"radio\"/>",
 						"align": "left",
 						"edit": true,
-						"width": "5ch"
+						"width": "10ch"
 					}
 				],
 				"config": { "view": "list", "fullWidth": true },
@@ -87,7 +87,7 @@
 						"fieldtype": "Data",
 						"align": "left",
 						"edit": true,
-						"width": "40ch",
+						"width": "50ch",
 						"cellComponent": "textarea",
 						"cellComponentProps": {
 							"rows": 8,
diff --git a/examples/docbuilder/components/Builder.vue b/examples/docbuilder/components/Builder.vue
index 38f41686..d21ff726 100644
--- a/examples/docbuilder/components/Builder.vue
+++ b/examples/docbuilder/components/Builder.vue
@@ -9,12 +9,13 @@
 					:layout="layout" />
 			</div>
 		</AFieldset>
-		<AForm class="aform-main" :key="formKey" v-model="doctypeSchema" :data="data" />
+		<AForm class="aform-main" v-model="doctypeSchema" :data="data" :key="formKey" />
 		<ActionSet :elements="actionElements" />
 	</div>
 </template>
 
 <script setup lang="ts">
+import type { ActionElements } from '@stonecrop/desktop'
 import type { Layout } from '@stonecrop/node-editor'
 import { onBeforeMount, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -24,13 +25,13 @@ import doctypeSchema from '../assets/doctype_schema.json'
 import { makeServer } from '../server'
 
 const route = useRoute()
-let formKey = ref(0)
+const formKey = ref(0)
 
 // create mirage server
 makeServer()
 
 // fetch data
-let layout: Layout = {}
+const layout = ref<Layout>({})
 const data = ref({})
 const stateConfig = ref({})
 
@@ -49,10 +50,10 @@ onBeforeMount(async () => {
 	data.value['side_effects_fieldset']['side_effects'] = actions
 
 	const stateResponse = await fetch('/api/load_state_machine?' + searchParams.toString())
-	const stateResponseData: Record<string, any>[] = await stateResponse.json()
+	const stateResponseData: Record<string, any> = await stateResponse.json()
 	const stateMachine = createMachine(stateResponseData.machine)
 	stateConfig.value = stateMachine.config.states
-	layout = stateResponseData.layout
+	layout.value = stateResponseData.layout
 
 	// increment form key to force form re-render
 	formKey.value++
@@ -61,12 +62,12 @@ onBeforeMount(async () => {
 // setup page actions
 const actionElements = [
 	{
-		elementType: 'button',
-		action: function () {},
+		type: 'button',
 		label: 'Save',
+		action: function () {},
 	},
 	{
-		elementType: 'dropdown',
+		type: 'dropdown',
 		label: 'Actions',
 		actions: [
 			{
@@ -83,13 +84,10 @@ const actionElements = [
 			},
 		],
 	},
-]
+] as ActionElements[]
 </script>
 
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default.css');
-/* @import '../style.css'; */
 html,
 body {
 	height: 100%;
diff --git a/examples/docbuilder/components/Home.vue b/examples/docbuilder/components/Home.vue
deleted file mode 100644
index 793c0c4d..00000000
--- a/examples/docbuilder/components/Home.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-	<div>
-		<h1>Home</h1>
-		<li><router-link to="/doctype">Doctypes</router-link></li>
-		<li><router-link to="/issue">Issues</router-link></li>
-		<li><router-link to="/user">Users</router-link></li>
-	</div>
-</template>
-<script setup lang="ts"></script>
diff --git a/examples/docbuilder/components/Listview.vue b/examples/docbuilder/components/Listview.vue
index 4b5b3ab5..d7b95ce3 100644
--- a/examples/docbuilder/components/Listview.vue
+++ b/examples/docbuilder/components/Listview.vue
@@ -1,5 +1,5 @@
 <template>
-	<ATable id="list" :key="rows" :columns="columns" :rows="rows" :config="{ view: 'list', fullWidth: true }">
+	<ATable v-model="rows" :columns="columns" :config="{ view: 'list', fullWidth: true }" :key="componentKey">
 		<template #body="{ data }">
 			<ARow
 				v-for="(row, rowIndex) in data.rows"
@@ -30,14 +30,13 @@
 </template>
 
 <script lang="ts" setup>
-import { CSSProperties, onMounted, ref } from 'vue'
+import type { TableColumn, TableRow } from '@stonecrop/atable'
+import { type CSSProperties, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { createTableStore } from '@stonecrop/atable'
-import { TableColumn, TableRow } from '@stonecrop/atable/types'
-
 const router = useRouter()
 
+const componentKey = ref(0)
 const rows = ref<TableRow[]>([])
 const columns = [
 	{
@@ -52,15 +51,16 @@ const columns = [
 
 onMounted(async () => {
 	const response = await fetch('/api/doctypes')
-	const data: Record<string, Record<string, any>[]> = await response.json()
-	rows.value = data.doctypes
+	const data = await response.json()
+	rows.value = data.doctypes as Record<string, any>[]
+	componentKey.value++
 })
 
-function showBuilder(doctype: string) {
+const showBuilder = (doctype: string) => {
 	router.push({ name: 'builder', params: { id: doctype } })
 }
 
-function getRowCellStyle(column: TableColumn): CSSProperties {
+const getRowCellStyle = (column: TableColumn): CSSProperties => {
 	return {
 		minWidth: column?.width || '40ch',
 		textAlign: column?.align || 'center',
@@ -103,9 +103,3 @@ rowNav['keydown.alt.down'] = rowNav['keydown.down']
 rowNav['keydown.shift.enter'] = rowNav['keydown.up']
 rowNav['keydown.enter'] = rowNav['keydown.down']
 </script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-@import url('@stonecrop/themes/default.css');
-/* @import '../style.css'; */
-</style>
diff --git a/examples/docbuilder/index.ts b/examples/docbuilder/index.ts
index 9bfdbe3d..1cb46a06 100644
--- a/examples/docbuilder/index.ts
+++ b/examples/docbuilder/index.ts
@@ -1,30 +1,23 @@
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
-import '@stonecrop/aform/styles'
-import '@stonecrop/atable/styles'
 import '@stonecrop/desktop/styles'
 import '@stonecrop/node-editor/styles'
-import { AFieldset, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
-import { ACell, ARow, ATableHeader, ATableModal, ATable } from '@stonecrop/atable'
+import { install as ATablePlugin } from '@stonecrop/aform'
+import { install as AFormPlugin } from '@stonecrop/atable'
 import { ActionSet, SheetNav } from '@stonecrop/desktop'
-import { NodeEditor, StateEditor } from '@stonecrop/node-editor'
+import { install as NodeEditorPlugin } from '@stonecrop/node-editor'
 
 import App from './App.vue'
 import router from './router'
 
-let app = createApp(App)
+const app = createApp(App)
+const pinia = createPinia()
+app.use(pinia)
 app.use(router)
-app.component('ACell', ACell)
-app.component('AFieldset', AFieldset)
-app.component('AForm', AForm)
-app.component('ANumericInput', ANumericInput)
-app.component('ARow', ARow)
-app.component('ATable', ATable)
-app.component('ATableHeader', ATableHeader)
-app.component('ATableModal', ATableModal)
-app.component('ATextInput', ATextInput)
-app.component('NodeEditor', NodeEditor)
-app.component('StateEditor', StateEditor)
+app.use(AFormPlugin)
+app.use(ATablePlugin)
+app.use(NodeEditorPlugin)
 app.component('ActionSet', ActionSet)
 app.component('SheetNav', SheetNav)
 app.mount('#app')
diff --git a/examples/docbuilder/server.ts b/examples/docbuilder/server.ts
index c364d477..98fafe66 100644
--- a/examples/docbuilder/server.ts
+++ b/examples/docbuilder/server.ts
@@ -20,7 +20,7 @@ export function makeServer({ environment = 'development' } = {}) {
 				doctypes: [{ name: 'Issue' }, { name: 'Assignment' }, { name: 'User' }],
 				stateMachines: [
 					{
-						name: 'Issue',
+						name: 'issue',
 						machine: {
 							id: 'Issue',
 							initial: 'New',
@@ -88,7 +88,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						},
 					},
 					{
-						name: 'Assignment',
+						name: 'assignment',
 						machine: {
 							id: 'Assignment',
 							initial: 'New',
@@ -133,7 +133,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						},
 					},
 					{
-						name: 'User',
+						name: 'user',
 						machine: {
 							id: 'User',
 							invoke: {
@@ -174,7 +174,7 @@ export function makeServer({ environment = 'development' } = {}) {
 				],
 				meta: [
 					{
-						name: 'Issue',
+						name: 'issue',
 						fields: [
 							{
 								id: 'subject',
@@ -225,7 +225,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						],
 					},
 					{
-						name: 'Assignment',
+						name: 'assignment',
 						fields: [
 							{
 								id: 'user',
@@ -264,7 +264,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						],
 					},
 					{
-						name: 'User',
+						name: 'user',
 						fields: [
 							{
 								id: 'username',
@@ -294,7 +294,7 @@ export function makeServer({ environment = 'development' } = {}) {
 				],
 				actions: [
 					{
-						name: 'Issue',
+						name: 'issue',
 						side_effects: [
 							{
 								event_name: 'LOAD',
@@ -321,7 +321,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						],
 					},
 					{
-						name: 'Assignment',
+						name: 'assignment',
 						side_effects: [
 							{
 								event_name: 'LOAD',
@@ -348,7 +348,7 @@ export function makeServer({ environment = 'development' } = {}) {
 						],
 					},
 					{
-						name: 'User',
+						name: 'user',
 						side_effects: [
 							{
 								event_name: 'LOAD',
@@ -398,21 +398,24 @@ export function makeServer({ environment = 'development' } = {}) {
 			})
 
 			this.get('/load_state_machine', (schema, request) => {
-				let machine = schema.stateMachines.findBy({ name: request.queryParams.doctype })
+				const doctype = request.queryParams.doctype.toString().toLowerCase()
+				const machine = schema.stateMachines.findBy({ name: doctype })
 				return machine
 					? machine.attrs
 					: new Response(400, { some: 'Not Found' }, { errors: ['StateMachine for Doctype not found'] })
 			})
 
 			this.get('/load_meta', (schema, request) => {
-				let meta = schema.meta.findBy({ name: request.queryParams.doctype })
+				const doctype = request.queryParams.doctype.toString().toLowerCase()
+				const meta = schema.meta.findBy({ name: doctype })
 				return meta
 					? meta.attrs.fields
 					: new Response(400, { some: 'Not Found' }, { errors: ['Metadata for Doctype not found'] })
 			})
 
 			this.get('/load_side_effects', (schema, request) => {
-				let actions = schema.actions.findBy({ name: request.queryParams.doctype })
+				const doctype = request.queryParams.doctype.toString().toLowerCase()
+				const actions = schema.actions.findBy({ name: doctype })
 				return actions
 					? actions.attrs.side_effects
 					: new Response(400, { some: 'Not Found' }, { errors: ['Actions for Doctype not found'] })
diff --git a/examples/docbuilder/vite.config.ts b/examples/docbuilder/vite.config.ts
index 6a43aa7d..56d342f3 100644
--- a/examples/docbuilder/vite.config.ts
+++ b/examples/docbuilder/vite.config.ts
@@ -17,7 +17,7 @@ export default defineConfig({
 	build: {
 		sourcemap: true,
 		lib: {
-			entry: resolve(projectRootDir, 'docbuilder/index.ts'),
+			entry: resolve(projectRootDir, 'index.ts'),
 			name: '@stonecrop/examples',
 		},
 		rollupOptions: {