@kitnai/chat 0.5.0 → 0.7.0

package/src/elements/kitn-attachments.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
 import type { AttachmentData } from '../components/attachments';
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -125,6 +127,7 @@ const HOVER_SNIPPET = `<!-- inline/list chips with a hover-card image preview --
 const meta = {
   title: 'Web Components/kitn-attachments',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-attachments'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -143,6 +146,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-attachments" />,
+  parameters: { layout: 'padded' },
+};
+
 /** Visual tiles (the default `grid` variant) — image attachments render as real
  *  `<img>` thumbnails; non-image files fall back to a media-type icon. */
 export const Grid: Story = {

package/src/elements/kitn-chain-of-thought.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 interface Step {
   label: string;
@@ -50,6 +52,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-chain-of-thought',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-chain-of-thought'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -68,6 +71,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-chain-of-thought" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A three-step reasoning trace; the last step has no detail. */
 export const Default: Story = {
   render: () => <CotElement steps={steps} />,

package/src/elements/kitn-chat-scope-picker.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -47,6 +49,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-chat-scope-picker',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-chat-scope-picker'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -65,6 +68,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-chat-scope-picker" />,
+  parameters: { layout: 'padded' },
+};
+
 /** Authors and tags available as scope filters. */
 export const Default: Story = {
   render: () => <ScopePickerElement authors={['Rob', 'Alex']} tags={['design', 'api']} />,

package/src/elements/kitn-chat-workspace.stories.tsx

@@ -3,6 +3,8 @@ import { onMount } from 'solid-js';
 import './register'; // side effect: registers all kitn custom elements including <kitn-chat-workspace>
 import type { ConversationGroup, ConversationSummary, ModelOption } from '../types';
 import type { ChatMessage } from './chat-types';
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -55,21 +57,37 @@ const sampleMessages: ChatMessage[] = [
   },
 ];
 
+type WorkspaceEl = HTMLElement & {
+  groups?: ConversationGroup[];
+  conversations?: ConversationSummary[];
+  activeId?: string;
+  messages?: ChatMessage[];
+  models?: ModelOption[];
+  currentModel?: string;
+  chatTitle?: string;
+  placeholder?: string;
+  loading?: boolean;
+  suggestionMode?: string;
+  proseSize?: string;
+  codeTheme?: string;
+  codeHighlight?: boolean;
+  scrollButton?: boolean;
+  search?: boolean;
+  voice?: boolean;
+  slashCompact?: boolean;
+  sidebarWidth?: number;
+  sidebarMinWidth?: number;
+  sidebarMaxWidth?: number;
+  sidebarCollapsed?: boolean;
+  value?: string;
+};
+
 /** Live demo of the actual `<kitn-chat-workspace>` custom element (Shadow DOM and all). */
-function WorkspaceElement() {
-  let el:
-    | (HTMLElement & {
-        groups?: ConversationGroup[];
-        conversations?: ConversationSummary[];
-        activeId?: string;
-        messages?: ChatMessage[];
-        models?: ModelOption[];
-        currentModel?: string;
-        chatTitle?: string;
-      })
-    | undefined;
+function WorkspaceElement(props: { args?: Record<string, unknown> }) {
+  let el: WorkspaceEl | undefined;
   onMount(() => {
     if (el) {
+      // Fixed array/object data
       el.groups = sampleGroups;
       el.conversations = sampleConversations;
       el.activeId = '1';
@@ -77,6 +95,18 @@ function WorkspaceElement() {
       el.models = sampleModels;
       el.currentModel = 'claude-4';
       el.chatTitle = 'Web component architecture';
+      // Scalar args from Controls (override defaults above for scalar props)
+      const args = props.args;
+      if (args) {
+        const scalarNames = [
+          'placeholder', 'loading', 'suggestionMode', 'proseSize', 'codeTheme',
+          'codeHighlight', 'scrollButton', 'search', 'voice', 'slashCompact',
+          'sidebarWidth', 'sidebarMinWidth', 'sidebarMaxWidth', 'sidebarCollapsed', 'value',
+        ];
+        for (const name of scalarNames) {
+          if (name in args) (el as unknown as Record<string, unknown>)[name] = args[name];
+        }
+      }
       el.addEventListener('conversationselect', (e) => console.log('select', (e as CustomEvent).detail));
       el.addEventListener('submit', (e) => console.log('submit', (e as unknown as CustomEvent).detail));
       el.addEventListener('sidebartoggle', (e) => console.log('sidebartoggle', (e as CustomEvent).detail));
@@ -85,7 +115,7 @@ function WorkspaceElement() {
   return (
     <div style={{ height: '720px', width: '100%' }}>
       <kitn-chat-workspace
-        ref={(e) => (el = e as HTMLElement)}
+        ref={(e) => (el = e as WorkspaceEl)}
         style={{ display: 'block', height: '100%' }}
       />
     </div>
@@ -162,6 +192,7 @@ function Workspace() {
 const meta = {
   title: 'Web Components/kitn-chat-workspace',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-chat-workspace'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -183,7 +214,20 @@ type Story = StoryObj;
 
 /** The element used the plain-HTML / any-framework way. */
 export const Default: Story = {
-  render: () => <WorkspaceElement />,
+  args: {
+    placeholder: 'Send a message...',
+    loading: false,
+    suggestionMode: 'submit',
+    proseSize: 'sm',
+    codeTheme: 'github-dark-dimmed',
+    codeHighlight: true,
+    scrollButton: true,
+    search: false,
+    voice: false,
+    slashCompact: false,
+    sidebarCollapsed: false,
+  },
+  render: (args: Record<string, unknown>) => <WorkspaceElement args={args} />,
   parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
 };
 
@@ -193,3 +237,9 @@ export const InSolidJS: Story = {
   render: () => <WorkspaceElement />,
   parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
 };
+
+/** Full generated API reference — properties, events, tokens, and the SolidJS components this element is composed from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-chat-workspace" />,
+  parameters: { layout: 'padded' },
+};

package/src/elements/kitn-chat.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers <kitn-chat>, <kitn-conversation-list>, <kitn-prompt-input>
 import type { ChatMessage } from './chat-types';
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -24,13 +26,45 @@ const sampleMessages: ChatMessage[] = [
   },
 ];
 
+type ChatEl = HTMLElement & {
+  messages?: ChatMessage[];
+  value?: string;
+  placeholder?: string;
+  loading?: boolean;
+  suggestionMode?: string;
+  proseSize?: string;
+  codeTheme?: string;
+  codeHighlight?: boolean;
+  chatTitle?: string;
+  currentModel?: string;
+  scrollButton?: boolean;
+  search?: boolean;
+  voice?: boolean;
+  slashCompact?: boolean;
+};
+
 /** Live demo of the actual `<kitn-chat>` custom element (Shadow DOM and all). */
-function ChatElement() {
-  let el: (HTMLElement & { messages?: ChatMessage[] }) | undefined;
+function ChatElement(props: { args?: Record<string, unknown> }) {
+  let el: ChatEl | undefined;
   onMount(() => {
-    if (el) el.messages = sampleMessages;
+    if (el) {
+      // Fixed array data
+      el.messages = sampleMessages;
+      // Scalar args from Controls
+      const args = props.args;
+      if (args) {
+        const scalarNames = [
+          'value', 'placeholder', 'loading', 'suggestionMode', 'proseSize',
+          'codeTheme', 'codeHighlight', 'chatTitle', 'currentModel',
+          'scrollButton', 'search', 'voice', 'slashCompact',
+        ];
+        for (const name of scalarNames) {
+          if (name in args) (el as unknown as Record<string, unknown>)[name] = args[name];
+        }
+      }
+    }
   });
-  return <kitn-chat ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', height: '560px' }} />;
+  return <kitn-chat ref={(e) => (el = e as ChatEl)} style={{ display: 'block', height: '560px' }} />;
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
@@ -72,6 +106,7 @@ function Chat() {
 const meta = {
   title: 'Web Components/kitn-chat',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-chat'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -93,7 +128,19 @@ type Story = StoryObj;
 
 /** The element used the plain-HTML / any-framework way. */
 export const Default: Story = {
-  render: () => <ChatElement />,
+  args: {
+    placeholder: 'Send a message...',
+    loading: false,
+    suggestionMode: 'submit',
+    proseSize: 'sm',
+    codeTheme: 'github-dark-dimmed',
+    codeHighlight: true,
+    scrollButton: true,
+    search: false,
+    voice: false,
+    slashCompact: false,
+  },
+  render: (args: Record<string, unknown>) => <ChatElement args={args} />,
   parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
 };
 
@@ -103,3 +150,9 @@ export const InSolidJS: Story = {
   render: () => <ChatElement />,
   parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
 };
+
+/** Full generated API reference — properties, events, tokens, and the SolidJS components this element is composed from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-chat" />,
+  parameters: { layout: 'padded' },
+};

package/src/elements/kitn-checkpoint.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -40,6 +42,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-checkpoint',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-checkpoint'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -58,6 +61,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-checkpoint" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A labeled checkpoint button. (Add a `tooltip` attribute for a hover hint — see the Code tab.) */
 export const Labeled: Story = {
   render: () => <CheckpointElement label="Restore" variant="outline" />,

package/src/elements/kitn-code-block.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -52,6 +54,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-code-block',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-code-block'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -70,6 +73,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-code-block" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A TypeScript snippet (the default `tsx` grammar). */
 export const TypeScript: Story = {
   render: () => <CodeBlockElement code={sampleCode} language="ts" />,

package/src/elements/kitn-context-meter.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 interface ContextUsage {
   usedTokens: number;
@@ -60,6 +62,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-context-meter',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-context-meter'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -78,6 +81,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-context-meter" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A meter at ~24% usage; hover to reveal the full breakdown. */
 export const Default: Story = {
   render: () => <MeterElement context={usage} />,

package/src/elements/kitn-conversation-list.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers <kitn-chat>, <kitn-conversation-list>, <kitn-prompt-input>
 import type { ConversationGroup, ConversationSummary } from '../types';
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -56,25 +58,34 @@ const sampleConversations: ConversationSummary[] = [
   },
 ];
 
+type ConversationListEl = HTMLElement & {
+  groups?: ConversationGroup[];
+  conversations?: ConversationSummary[];
+  activeId?: string;
+};
+
 /** Live demo of the actual `<kitn-conversation-list>` custom element (Shadow DOM and all). */
-function ConversationListElement() {
-  let el:
-    | (HTMLElement & {
-        groups?: ConversationGroup[];
-        conversations?: ConversationSummary[];
-        activeId?: string;
-      })
-    | undefined;
+function ConversationListElement(props: { args?: Record<string, unknown> }) {
+  let el: ConversationListEl | undefined;
   onMount(() => {
     if (el) {
+      // Fixed array data
       el.groups = sampleGroups;
       el.conversations = sampleConversations;
       el.activeId = 'c-1';
+      // Scalar args from Controls
+      const args = props.args;
+      if (args) {
+        const scalarNames = ['activeId'];
+        for (const name of scalarNames) {
+          if (name in args) (el as unknown as Record<string, unknown>)[name] = args[name];
+        }
+      }
     }
   });
   return (
     <kitn-conversation-list
-      ref={(e) => (el = e as HTMLElement)}
+      ref={(e) => (el = e as ConversationListEl)}
       style={{ display: 'block', width: '300px', height: '560px' }}
     />
   );
@@ -144,6 +155,7 @@ function Sidebar() {
 const meta = {
   title: 'Web Components/kitn-conversation-list',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-conversation-list'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -165,7 +177,10 @@ type Story = StoryObj;
 
 /** The element used the plain-HTML / any-framework way. */
 export const Default: Story = {
-  render: () => <ConversationListElement />,
+  args: {
+    activeId: 'c-1',
+  },
+  render: (args: Record<string, unknown>) => <ConversationListElement args={args} />,
   parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
 };
 
@@ -175,3 +190,9 @@ export const InSolidJS: Story = {
   render: () => <ConversationListElement />,
   parameters: { docs: { source: { code: SOLID_SNIPPET, language: 'tsx' } } },
 };
+
+/** Full generated API reference — properties, events, tokens, and the SolidJS components this element is composed from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-conversation-list" />,
+  parameters: { layout: 'padded' },
+};

package/src/elements/kitn-empty.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -46,6 +48,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-empty',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-empty'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -64,6 +67,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-empty" />,
+  parameters: { layout: 'padded' },
+};
+
 /** Render the actual `<kitn-empty>` custom element with slotted children. */
 function EmptyElement() {
   let el: HTMLElement | undefined;

package/src/elements/kitn-feedback-bar.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -31,6 +33,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-feedback-bar',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-feedback-bar'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -49,6 +52,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-feedback-bar" />,
+  parameters: { layout: 'padded' },
+};
+
 /** The default feedback prompt. */
 export const Default: Story = {
   render: () => (

package/src/elements/kitn-file-upload.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -31,6 +33,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-file-upload',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-file-upload'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -49,6 +52,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-file-upload" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A dropzone accepting any files. */
 export const Default: Story = {
   render: () => (

package/src/elements/kitn-image.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -45,6 +47,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-image',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-image'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -63,6 +66,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-image" />,
+  parameters: { layout: 'padded' },
+};
+
 /** A base64-encoded SVG with a media type and alt text. */
 export const Default: Story = {
   render: () => <ImageElement />,

package/src/elements/kitn-loader.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -25,6 +27,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-loader',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-loader'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -43,6 +46,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-loader" />,
+  parameters: { layout: 'padded' },
+};
+
 const VARIANTS = [
   'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
   'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',

package/src/elements/kitn-markdown.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { ElementSpec } from '../stories/docs/element-spec';
+import { argTypesFor } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
@@ -50,6 +52,7 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 const meta = {
   title: 'Web Components/kitn-markdown',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kitn-markdown'),
   parameters: {
     layout: 'fullscreen',
     docs: {
@@ -68,6 +71,12 @@ const meta = {
 export default meta;
 type Story = StoryObj;
 
+/** Full generated API reference — properties, events, tokens, and composed-from. */
+export const API: Story = {
+  render: () => <ElementSpec tag="kitn-markdown" />,
+  parameters: { layout: 'padded' },
+};
+
 /** Headings, emphasis, lists, a blockquote, and a highlighted code fence. */
 export const Default: Story = {
   render: () => <MarkdownElement content={sampleMarkdown} />,