@kitnai/chat 0.6.0 → 0.8.0

package/src/elements/{kitn-checkpoint.stories.tsx → checkpoint.stories.tsx}

@@ -1,18 +1,19 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-checkpoint': JSX.HTMLAttributes<HTMLElement>;
+      'kc-checkpoint': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
 
-/** Render the actual `<kitn-checkpoint>` custom element configured by attributes. */
+/** Render the actual `<kc-checkpoint>` custom element configured by attributes. */
 function CheckpointElement(props: { label?: string; tooltip?: string; variant?: string; size?: string }) {
   let el: HTMLElement | undefined;
   onMount(() => {
@@ -23,34 +24,33 @@ function CheckpointElement(props: { label?: string; tooltip?: string; variant?:
     if (props.size) el.setAttribute('size', props.size);
     el.addEventListener('select', () => console.log('checkpoint selected'));
   });
-  return <kitn-checkpoint ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '16px' }} />;
+  return <kc-checkpoint ref={(e) => (el = e as HTMLElement)} style={{ display: 'inline-block', padding: '16px' }} />;
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-checkpoint label="Restore" tooltip="Restore this checkpoint" variant="outline" size="sm"></kitn-checkpoint>
+<kc-checkpoint label="Restore" tooltip="Restore this checkpoint" variant="outline" size="sm"></kc-checkpoint>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
 
-  const cp = document.querySelector('kitn-checkpoint');
+  const cp = document.querySelector('kc-checkpoint');
   // events are CustomEvents on the element (they do not bubble)
   cp.addEventListener('select', () => console.log('restore checkpoint'));
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-checkpoint',
+  title: 'Web Components/kc-checkpoint',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kc-checkpoint'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-checkpoint>` is the framework-agnostic **web component** for a bookmark/checkpoint button (with an optional tooltip and label), isolated in **Shadow DOM**.',
+      description: specDescription('kc-checkpoint', [
+          '`<kc-checkpoint>` is the framework-agnostic **web component** for a bookmark/checkpoint button (with an optional tooltip and label), isolated in **Shadow DOM**.',
           '**When to use:** marking a restore point in a conversation in a non-Solid app. In SolidJS, compose the `Checkpoint` primitives.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, set `label`, `tooltip`, `variant` (`ghost` | `default` | `outline`), and `size` via attributes, and listen for the `select` **CustomEvent** on click.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;

package/src/elements/checkpoint.tsx

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js';
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '../components/checkpoint';
 
 interface Props extends Record<string, unknown> {
@@ -13,17 +13,17 @@ interface Props extends Record<string, unknown> {
   size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
 }
 
-/** Events fired by `<kitn-checkpoint>`. */
+/** Events fired by `<kc-checkpoint>`. */
 interface Events {
   /** The checkpoint was clicked. */
   select: void;
 }
 
 /**
- * `<kitn-checkpoint>` — a bookmark/checkpoint button (optional tooltip + label).
+ * `<kc-checkpoint>` — a bookmark/checkpoint button (optional tooltip + label).
  * Emits `select`.
  */
-defineKitnElement<Props, Events>('kitn-checkpoint', {
+defineWebComponent<Props, Events>('kc-checkpoint', {
   label: undefined,
   tooltip: undefined,
   variant: 'ghost',

package/src/elements/{kitn-code-block.stories.tsx → code-block.stories.tsx}

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { onMount } from 'solid-js';
 import './register'; // side effect: registers the custom elements
+import { argTypesFor, specDescription } from '../stories/docs/element-controls';
 
 // The web components are custom DOM elements, so declare the tags for JSX.
 declare module 'solid-js' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'kitn-code-block': JSX.HTMLAttributes<HTMLElement>;
+      'kc-code-block': JSX.HTMLAttributes<HTMLElement>;
     }
   }
 }
@@ -22,7 +23,7 @@ const pythonCode = `def fib(n):
         a, b = b, a + b
     return a`;
 
-/** Render the actual `<kitn-code-block>` custom element with a `code` property. */
+/** Render the actual `<kc-code-block>` custom element with a `code` property. */
 function CodeBlockElement(props: { code: string; language?: string }) {
   let el: (HTMLElement & { code?: string }) | undefined;
   onMount(() => {
@@ -32,7 +33,7 @@ function CodeBlockElement(props: { code: string; language?: string }) {
     }
   });
   return (
-    <kitn-code-block
+    <kc-code-block
       ref={(e) => (el = e as HTMLElement)}
       style={{ display: 'block', padding: '16px', 'max-width': '720px' }}
     />
@@ -40,7 +41,7 @@ function CodeBlockElement(props: { code: string; language?: string }) {
 }
 
 const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kitn-code-block id="code" language="ts" code-theme="github-dark-dimmed"></kitn-code-block>
+<kc-code-block id="code" language="ts" code-theme="github-dark-dimmed"></kc-code-block>
 
 <script type="module">
   import '@kitnai/chat/elements';   // registers the custom elements
@@ -50,19 +51,18 @@ const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
 </script>`;
 
 const meta = {
-  title: 'Web Components/kitn-code-block',
+  title: 'Web Components/kc-code-block',
   tags: ['autodocs'],
+  argTypes: argTypesFor('kc-code-block'),
   parameters: {
     layout: 'fullscreen',
     docs: {
-      description: {
-        component: [
-          '`<kitn-code-block>` is the framework-agnostic **web component** for a single syntax-highlighted code block, complete with a copy button, isolated in **Shadow DOM**.',
+      description: specDescription('kc-code-block', [
+          '`<kc-code-block>` is the framework-agnostic **web component** for a single syntax-highlighted code block, complete with a copy button, isolated in **Shadow DOM**.',
           '**When to use:** dropping a highlighted snippet into a non-Solid app. In SolidJS, compose `CodeBlock` + `CodeBlockCode` directly.',
           "**How to use:** register once with `import '@kitnai/chat/elements'`, set the source via the `code` **property** (`el.code = '...'`), and pick a grammar with the `language` attribute (defaults to `tsx`). Tune highlighting with `code-theme` / `code-highlight`.",
           'See the **Code** tab for HTML usage.',
-        ].join('\n\n'),
-      },
+        ]),
     },
   },
 } satisfies Meta;

package/src/elements/code-block.tsx

@@ -1,4 +1,4 @@
-import { defineKitnElement } from './define';
+import { defineWebComponent } from './define';
 import { CodeBlock, CodeBlockCode } from '../components/code-block';
 import { ChatConfig, useChatConfig, type ProseSize } from '../primitives/chat-config';
 
@@ -16,10 +16,10 @@ interface Props extends Record<string, unknown> {
 }
 
 /**
- * `<kitn-code-block>` — one syntax-highlighted code block (with a copy button).
+ * `<kc-code-block>` — one syntax-highlighted code block (with a copy button).
  * Code via the `code` property; `language`/`code-theme` via attributes.
  */
-defineKitnElement<Props>('kitn-code-block', {
+defineWebComponent<Props>('kc-code-block', {
   code: '',
   language: undefined,
   codeTheme: 'github-dark-dimmed',