@gxp-dev/mod-ui 2.0.0 → 2.0.1

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@gxp-dev/mod-ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "JSON-driven Vue 3 module UI component library for the GxP platform. Provides shadcn-vue primitives, a templating engine (IndexPage / ShowPage), card/element renderers, and a FormBuilder.",
   "type": "module",
-  "packageManager": "pnpm@9.15.0",
   "files": [
     "dist",
     "src",
@@ -18,25 +17,57 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./action": {
+      "import": "./dist/action.js",
+      "types": "./dist/action.d.ts"
+    },
+    "./boolean": {
+      "import": "./dist/boolean.js",
+      "types": "./dist/boolean.d.ts"
+    },
+    "./builder": {
+      "import": "./dist/builder.js",
+      "types": "./dist/builder.d.ts"
+    },
+    "./cards": {
+      "import": "./dist/cards.js",
+      "types": "./dist/cards.d.ts"
+    },
+    "./code": {
+      "import": "./dist/code.js",
+      "types": "./dist/code.d.ts"
+    },
+    "./configuration-block": {
+      "import": "./dist/configuration-block.js",
+      "types": "./dist/configuration-block.d.ts"
+    },
+    "./display": {
+      "import": "./dist/display.js",
+      "types": "./dist/display.d.ts"
+    },
+    "./editor": {
+      "import": "./dist/editor.js",
+      "types": "./dist/editor.d.ts"
+    },
+    "./file": {
+      "import": "./dist/file.js",
+      "types": "./dist/file.d.ts"
+    },
+    "./input": {
+      "import": "./dist/input.js",
+      "types": "./dist/input.d.ts"
+    },
+    "./option-select": {
+      "import": "./dist/option-select.js",
+      "types": "./dist/option-select.d.ts"
+    },
+    "./picker": {
+      "import": "./dist/picker.js",
+      "types": "./dist/picker.d.ts"
+    },
     "./styles": "./dist/styles/index.css",
     "./styles/themes/*": "./dist/styles/themes/*"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint src --ext .ts,.vue",
-    "typecheck": "vue-tsc --noEmit",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:ui": "vitest --ui",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build -o storybook-static && pnpm manifest",
-    "manifest": "node scripts/build-library-manifest.mjs",
-    "manifest:pretty": "node scripts/build-library-manifest.mjs --pretty",
-    "prepublishOnly": "npm run build"
-  },
   "peerDependencies": {
     "pinia": "^2.2.0 || ^3.0.0",
     "reka-ui": "^2.8.0",
@@ -48,9 +79,27 @@
     }
   },
   "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.0",
     "@ericblade/quagga2": "^1.12.1",
     "@fix-webm-duration/fix": "^1.0.1",
     "@internationalized/date": "^3.12.1",
+    "@tiptap/extension-color": "^3.23.2",
+    "@tiptap/extension-font-family": "^3.23.2",
+    "@tiptap/extension-image": "^3.23.2",
+    "@tiptap/extension-link": "^3.23.2",
+    "@tiptap/extension-table": "^3.23.2",
+    "@tiptap/extension-text-align": "^3.23.2",
+    "@tiptap/extension-text-style": "^3.23.2",
+    "@tiptap/extension-underline": "^3.23.2",
     "@tiptap/starter-kit": "3.23.2",
     "@tiptap/vue-3": "3.23.2",
     "@types/leaflet": "1.9.21",
@@ -60,6 +109,7 @@
     "chart.js": "4.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "codemirror": "^6.0.2",
     "embla-carousel-vue": "8.6.0",
     "jsbarcode": "^3.12.1",
     "leaflet": "1.9.4",
@@ -117,7 +167,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/GramercyTech/gx-adminkit.git"
+    "url": "git+ssh://git@github.com/GramercyTech/gx-modui.git"
   },
   "bugs": {
     "url": "https://github.com/gxp-dev/uikit/issues"
@@ -126,5 +176,20 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.vue",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static && pnpm manifest",
+    "manifest": "node scripts/build-library-manifest.mjs",
+    "manifest:pretty": "node scripts/build-library-manifest.mjs --pretty"
   }
-}
+}

package/src/action.ts

@@ -0,0 +1,3 @@
+export { default as ButtonAction } from "./components/compositions/elements/action/ButtonAction.vue"
+export { default as ButtonGroupAction } from "./components/compositions/elements/action/ButtonGroupAction.vue"
+export { default as LinkAction } from "./components/compositions/elements/action/LinkAction.vue"

package/src/adapters/fieldTypeMap.ts

@@ -61,6 +61,7 @@ export const V1_TO_V2_FIELD_TYPE: Record<string, V2Discriminator> = {
   colorPicker: { type: "picker.color-picker" },
   color_picker: { type: "picker.color-picker" },
   icon_picker: { type: "picker.icon-picker" },
+  icon_picker_inline: { type: "picker.icon-picker-inline" },
   map_picker: { type: "picker.map-picker" },
   map_coordinates: { type: "picker.map-picker" },
   data_model: { type: "picker.data-model" },
@@ -133,10 +134,6 @@ export const V1_TO_V2_FIELD_TYPE: Record<string, V2Discriminator> = {
   dependency_list_builder: { type: "builder.dependency-list-builder" },
   grid_builder: { type: "builder.grid-builder" },
 
-  // --- Components (icon badges, inline pickers) ---
-  icon_badge: { type: "components.icon-badge" },
-  icon_picker_inline: { type: "components.icon-picker" },
-
   // --- Configuration blocks (nested element groups) ---
   elements_block: { type: "configuration-block.elements-block" },
   repeatable: { type: "configuration-block.repeatable" },
@@ -186,6 +183,7 @@ const V2_TO_V1_FIELD_TYPE: Record<string, string> = {
   "picker.timezone-picker": "timezone_picker",
   "picker.color-picker": "colorPicker",
   "picker.icon-picker": "icon_picker",
+  "picker.icon-picker-inline": "icon_picker_inline",
   "picker.map-picker": "map_picker",
   "picker.data-model": "data_model",
   // file
@@ -226,10 +224,7 @@ const V2_TO_V1_FIELD_TYPE: Record<string, string> = {
   "builder.element-list-builder": "element_list_builder",
   "builder.quiz-builder": "quiz_builder",
   "builder.dependency-list-builder": "dependency_list_builder",
-  "builder.grid-builder": "grid_builder",
-  // components
-  "components.icon-badge": "icon_badge",
-  "components.icon-picker": "icon_picker_inline",
+  "builder.grid-builder": "grid_builder",  
   // configuration-block
   "configuration-block.elements-block": "elements_block",
   "configuration-block.repeatable": "repeatable",

package/src/adapters/index.ts

@@ -7,7 +7,7 @@
  *
  * Typical usage:
  *
- *   import { v1ToV2 } from "@gxp-dev/adminkit"
+ *   import { v1ToV2 } from "@gxp-dev/mod-ui"
  *   const config = v1ToV2(legacyJson)
  *   // pass `config` to <ShowPage :config="config" :item="item" />
  *

package/src/boolean.ts

@@ -0,0 +1,4 @@
+export { default as CheckboxBoolean } from "./components/compositions/elements/boolean/CheckboxBoolean.vue"
+export { default as IconToggleBoolean } from "./components/compositions/elements/boolean/IconToggleBoolean.vue"
+export { default as RadioBoolean } from "./components/compositions/elements/boolean/RadioBoolean.vue"
+export { default as SwitchBoolean } from "./components/compositions/elements/boolean/SwitchBoolean.vue"

package/src/builder.ts

@@ -0,0 +1,8 @@
+export { default as DependencyListBuilder } from "./components/compositions/elements/builder/DependencyListBuilder.vue"
+export { default as ElementListBuilder } from "./components/compositions/elements/builder/ElementListBuilder.vue"
+export { default as FormBuilder } from "./components/compositions/elements/builder/FormBuilder.vue"
+export { default as GridBuilder } from "./components/compositions/elements/builder/GridBuilder.vue"
+export { default as ObjectBuilder } from "./components/compositions/elements/builder/ObjectBuilder.vue"
+export { default as PresetBuilder } from "./components/compositions/elements/builder/PresetBuilder.vue"
+export { default as QuizBuilder } from "./components/compositions/elements/builder/QuizBuilder.vue"
+export { default as ReactiveCanvasBuilder } from "./components/compositions/elements/builder/ReactiveCanvasBuilder.vue"

package/src/cards.ts

@@ -0,0 +1,7 @@
+export { default as CardListCard } from "./components/compositions/cards/CardListCard.vue"
+export { default as DataTableCard } from "./components/compositions/cards/DataTableCard.vue"
+export { default as ElementDisplayCard } from "./components/compositions/cards/ElementDisplayCard.vue"
+export { default as ElementListCard } from "./components/compositions/cards/ElementListCard.vue"
+export { default as GridViewCard } from "./components/compositions/cards/GridViewCard.vue"
+export { default as InfoCard } from "./components/compositions/cards/InfoCard.vue"
+export { default as TabListCard } from "./components/compositions/cards/TabListCard.vue"

package/src/code.ts

@@ -0,0 +1,5 @@
+export { default as BuildStatus } from "./components/compositions/elements/code/BuildStatus.vue"
+export { default as ChatMessage } from "./components/compositions/elements/code/ChatMessage.vue"
+export { default as FileTree } from "./components/compositions/elements/code/FileTree.vue"
+export { default as GitCodeEditor } from "./components/compositions/elements/code/GitCodeEditor.vue"
+export { default as PullRequestsList } from "./components/compositions/elements/code/PullRequestsList.vue"

package/src/components/compositions/cards/CardListCard.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { DisplayCard } from "@/definitions/cards"
 import CardListCard from "./CardListCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 function child(id: string, title: string): DisplayCard {
   return {
@@ -15,6 +16,7 @@ const meta = {
   title: "Cards/CardListCard",
   component: CardListCard,
   tags: ["autodocs"],
+  parameters: componentDoc("CardListCard", { barrel: "cards" }),
   args: {
     title: "My Card List",
     subtitle: "Renders nested DisplayCards",

package/src/components/compositions/cards/DataTableCard.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import DataTableCard from "./DataTableCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
   title: "Cards/DataTableCard",
   component: DataTableCard,
   tags: ["autodocs"],
+  parameters: componentDoc("DataTableCard", { barrel: "cards" }),
   argTypes: {
     headers: { control: "object" },
     item: { control: "object" },

package/src/components/compositions/cards/ElementDisplayCard.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { InputElement } from "@/definitions/elements/InputElement"
 import ElementDisplayCard from "./ElementDisplayCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const widget: InputElement = {
   id: "widget",
@@ -14,6 +15,7 @@ const meta = {
   title: "Cards/ElementDisplayCard",
   component: ElementDisplayCard,
   tags: ["autodocs"],
+  parameters: componentDoc("ElementDisplayCard", { barrel: "cards" }),
   args: {
     element: widget,
     item: {},

package/src/components/compositions/cards/ElementListCard.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import type { CardElement } from "@/definitions/elements"
 import type { InputElement } from "@/definitions/elements/InputElement"
 import ElementListCard from "./ElementListCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const firstName: InputElement = {
   id: "first-name",
@@ -25,6 +26,7 @@ const meta = {
   title: "Cards/ElementListCard",
   component: ElementListCard,
   tags: ["autodocs"],
+  parameters: componentDoc("ElementListCard", { barrel: "cards" }),
   args: {
     elements: sampleElements,
     item: {},

package/src/components/compositions/cards/GridViewCard.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { DisplayCard } from "@/definitions/cards"
 import GridViewCard from "./GridViewCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 function child(id: string, title: string): DisplayCard {
   return {
@@ -15,6 +16,7 @@ const meta = {
   title: "Cards/GridViewCard",
   component: GridViewCard,
   tags: ["autodocs"],
+  parameters: componentDoc("GridViewCard", { barrel: "cards" }),
   args: {
     rowHeight: 120,
     cols: { lg: 12 },

package/src/components/compositions/cards/InfoCard.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import InfoCard from "./InfoCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const sampleItem = {
   user: {
@@ -13,6 +14,7 @@ const meta = {
   title: "Cards/InfoCard",
   component: InfoCard,
   tags: ["autodocs"],
+  parameters: componentDoc("InfoCard", { barrel: "cards" }),
   args: {
     fields: [
       { label: "Name", value: "user.name" },

package/src/components/compositions/cards/TabListCard.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { DisplayCard } from "@/definitions/cards"
 import TabListCard from "./TabListCard.vue"
+import { componentDoc } from "@/lib/storybook"
 
 function child(id: string, title: string): DisplayCard {
   return {
@@ -15,6 +16,7 @@ const meta = {
   title: "Cards/TabListCard",
   component: TabListCard,
   tags: ["autodocs"],
+  parameters: componentDoc("TabListCard", { barrel: "cards" }),
   args: {
     tabs: [child("t1", "General"), child("t2", "Advanced")],
     item: {},

package/src/components/compositions/elements/action/ButtonAction.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ButtonAction from "./ButtonAction.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Action/ButtonAction",
+  title: "Elements/Action/ButtonAction",
   component: ButtonAction,
   tags: ["autodocs"],
+  parameters: componentDoc("ButtonAction", { barrel: "action" }),
   args: { label: "Action" },
 } satisfies Meta<typeof ButtonAction>
 

package/src/components/compositions/elements/action/ButtonGroupAction.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import ButtonGroupAction from "./ButtonGroupAction.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Action/ButtonGroupAction",
+  title: "Elements/Action/ButtonGroupAction",
   component: ButtonGroupAction,
   tags: ["autodocs"],
+  parameters: componentDoc("ButtonGroupAction", { barrel: "action" }),
   args: {
     items: [
       { label: "Edit", emit: "edit" },

package/src/components/compositions/elements/action/LinkAction.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import LinkAction from "./LinkAction.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Action/LinkAction",
+  title: "Elements/Action/LinkAction",
   component: LinkAction,
   tags: ["autodocs"],
+  parameters: componentDoc("LinkAction", { barrel: "action" }),
   args: { label: "More info" },
 } satisfies Meta<typeof LinkAction>
 

package/src/components/compositions/elements/boolean/CheckboxBoolean.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import CheckboxBoolean from "./CheckboxBoolean.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Boolean/CheckboxBoolean",
+  title: "Elements/Boolean/CheckboxBoolean",
   component: CheckboxBoolean,
   tags: ["autodocs"],
+  parameters: componentDoc("CheckboxBoolean", { barrel: "boolean" }),
   args: { label: "I agree to the terms" },
 } satisfies Meta<typeof CheckboxBoolean>
 

package/src/components/compositions/elements/boolean/IconToggleBoolean.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import IconToggleBoolean from "./IconToggleBoolean.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Boolean/IconToggleBoolean",
+  title: "Elements/Boolean/IconToggleBoolean",
   component: IconToggleBoolean,
   tags: ["autodocs"],
+  parameters: componentDoc("IconToggleBoolean", { barrel: "boolean" }),
   args: { label: "Toggle" },
 } satisfies Meta<typeof IconToggleBoolean>
 

package/src/components/compositions/elements/boolean/RadioBoolean.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import RadioBoolean from "./RadioBoolean.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Boolean/RadioBoolean",
+  title: "Elements/Boolean/RadioBoolean",
   component: RadioBoolean,
   tags: ["autodocs"],
+  parameters: componentDoc("RadioBoolean", { barrel: "boolean" }),
   args: { label: "Do you agree?" },
 } satisfies Meta<typeof RadioBoolean>
 

package/src/components/compositions/elements/boolean/SwitchBoolean.stories.ts

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import SwitchBoolean from "./SwitchBoolean.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Boolean/SwitchBoolean",
+  title: "Elements/Boolean/SwitchBoolean",
   component: SwitchBoolean,
   tags: ["autodocs"],
+  parameters: componentDoc("SwitchBoolean", { barrel: "boolean" }),
   args: { label: "Notifications" },
 } satisfies Meta<typeof SwitchBoolean>
 

package/src/components/compositions/elements/builder/DependencyListBuilder.stories.ts

@@ -47,7 +47,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Visual editor for a list of conditional rules ('when X happens then Y') used to drive dynamic form behavior.",
+          "```ts\nimport { DependencyListBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisual editor for a list of conditional rules ('when X happens then Y') used to drive dynamic form behavior.",
       },
     },
   },

package/src/components/compositions/elements/builder/ElementListBuilder.stories.ts

@@ -40,7 +40,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "A simplified FormBuilder that produces a flat list of CardElements (no cards, no tabs, no nested cards). Useful for forms-as-arrays and list-of-fields configs.",
+          "```ts\nimport { ElementListBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nA simplified FormBuilder that produces a flat list of CardElements (no cards, no tabs, no nested cards). Useful for forms-as-arrays and list-of-fields configs.",
       },
     },
   },

package/src/components/compositions/elements/builder/ElementListBuilder.test.ts

@@ -54,7 +54,6 @@ describe("ElementListBuilder", () => {
       "boolean",
       "builder",
       "code",
-      "components",
       "configuration-block",
       "display",
       "editor",

package/src/components/compositions/elements/builder/FormBuilder.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { BuilderSchema } from "@/stores/formBuilderStore"
 import FormBuilder from "./FormBuilder.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const seededSchema = {
   rootCardId: "root",
@@ -45,6 +46,7 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
+    ...componentDoc("FormBuilder", { barrel: "builder" }),
   },
 } satisfies Meta<typeof FormBuilder>
 

package/src/components/compositions/elements/builder/FormBuilder.test.ts

@@ -43,7 +43,6 @@ describe("FormBuilder", () => {
       "boolean",
       "builder",
       "code",
-      "components",
       "configuration-block",
       "display",
       "editor",

package/src/components/compositions/elements/builder/GridBuilder.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { GridBuilderSchema } from "@/stores/gridBuilderStore"
 import GridBuilder from "./GridBuilder.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const seededSchema: GridBuilderSchema = {
   cols: 12,
@@ -22,6 +23,7 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
+    ...componentDoc("GridBuilder", { barrel: "builder" }),
   },
 } satisfies Meta<typeof GridBuilder>
 

package/src/components/compositions/elements/builder/ObjectBuilder.stories.ts

@@ -55,7 +55,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Visually compose a JSON object as a list of typed key / value entries. Each row carries a `key`, a `type` (string / number / boolean / array / object / null), and a `value`. The output is bindable via v-model.",
+          "```ts\nimport { ObjectBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisually compose a JSON object as a list of typed key / value entries. Each row carries a `key`, a `type` (string / number / boolean / array / object / null), and a `value`. The output is bindable via v-model.",
       },
     },
   },

package/src/components/compositions/elements/builder/PresetBuilder.stories.ts

@@ -49,7 +49,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Bundles a named, described preset around an embedded FormBuilder schema.",
+          "```ts\nimport { PresetBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nBundles a named, described preset around an embedded FormBuilder schema.",
       },
     },
   },

package/src/components/compositions/elements/builder/QuizBuilder.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import type { QuizBuilderSchema } from "@/stores/quizBuilderStore"
 import QuizBuilder from "./QuizBuilder.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const seededSchema: QuizBuilderSchema = {
   title: "Onboarding quiz",
@@ -47,6 +48,7 @@ const meta = {
   },
   parameters: {
     layout: "fullscreen",
+    ...componentDoc("QuizBuilder", { barrel: "builder" }),
   },
 } satisfies Meta<typeof QuizBuilder>
 

package/src/components/compositions/elements/builder/ReactiveCanvasBuilder.stories.ts

@@ -48,7 +48,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Visual canvas where component-like blocks can be placed and configured. Blocks support pointer-driven drag (free positioning, no snap) and four-corner resize, with the inspector available for numeric edits.",
+          "```ts\nimport { ReactiveCanvasBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisual canvas where component-like blocks can be placed and configured. Blocks support pointer-driven drag (free positioning, no snap) and four-corner resize, with the inspector available for numeric edits.",
       },
     },
   },

package/src/components/compositions/elements/code/BuildStatus.stories.ts

@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import { onBeforeUnmount, ref, type Ref } from "vue"
 import BuildStatus from "./BuildStatus.vue"
 import type { BuildStatusEvent } from "./BuildStatus.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const meta = {
-  title: "Compositions/Elements/Code/BuildStatus",
+  title: "Elements/Code/BuildStatus",
   component: BuildStatus,
   tags: ["autodocs"],
   args: {
@@ -12,6 +13,7 @@ const meta = {
     initial: { status: "pending" },
     showLogs: true,
   },
+  parameters: componentDoc("BuildStatus", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-[640px] p-4"><story /></div>',

package/src/components/compositions/elements/code/ChatMessage.stories.ts

@@ -14,7 +14,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "Generic chat-message bubble — Slack / Discord / iMessage style. Display-only, no platform integration.",
+          "```ts\nimport { ChatMessage } from \"@gxp-dev/mod-ui/code\"\n```\n\nGeneric chat-message bubble — Slack / Discord / iMessage style. Display-only, no platform integration.",
       },
     },
   },

package/src/components/compositions/elements/code/FileTree.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import FileTree from "./FileTree.vue"
 import type { TreeNode } from "./FileTree.vue"
+import { componentDoc } from "@/lib/storybook"
 
 const ROOT: TreeNode[] = [
   { path: "src", name: "src", kind: "directory" },
@@ -53,13 +54,14 @@ function alwaysFail(): (path: string) => Promise<TreeNode[]> {
 }
 
 const meta = {
-  title: "Compositions/Elements/Code/FileTree",
+  title: "Elements/Code/FileTree",
   component: FileTree,
   tags: ["autodocs"],
   args: {
     label: "File Tree",
     onLoadTree: mockLoad(),
   },
+  parameters: componentDoc("FileTree", { barrel: "code" }),
   decorators: [
     () => ({
       template: '<div class="w-96 p-4"><story /></div>',