@kitn.ai/ui 0.15.0 → 0.16.0

package/src/elements/tasks.stories.tsx

@@ -1,237 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { createSignal, onMount, type JSX } from 'solid-js';
-import './tasks';
-import { argTypesFor, specDescription } from '../stories/docs/element-controls';
-import type { TasksCardData } from '../components/tasks-card';
-import type { CardEvent } from '../primitives/card-contract';
-
-declare module 'solid-js' {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'kai-tasks': JSX.HTMLAttributes<HTMLElement> & {
-        heading?: string;
-        'card-id'?: string;
-        ref?: (el: HTMLElement) => void;
-      };
-    }
-  }
-}
-
-type TasksEl = HTMLElement & { data?: TasksCardData; resolution?: Record<string, unknown> };
-
-function Frame(props: { children: JSX.Element }) {
-  return <div style={{ 'max-width': '460px' }}>{props.children}</div>;
-}
-
-/** Mounts a <kai-tasks>, sets `.data`, logs the emitted CardEvent under the render. */
-function TasksDemo(props: { def: TasksCardData; cardId: string; heading?: string }) {
-  const [log, setLog] = createSignal<CardEvent[]>([]);
-  let el: TasksEl | undefined;
-  onMount(() => {
-    if (!el) return;
-    el.data = props.def;
-    el.addEventListener('kai-card', (e) => {
-      const detail = (e as CustomEvent<CardEvent>).detail;
-      setLog((prev) => [...prev, detail]);
-    });
-  });
-  return (
-    <Frame>
-      <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
-        <kai-tasks ref={(e) => (el = e as TasksEl)} card-id={props.cardId} heading={props.heading} />
-        <pre
-          style={{
-            margin: 0,
-            'max-height': '180px',
-            overflow: 'auto',
-            background: 'var(--color-muted, #f4f4f5)',
-            'border-radius': '8px',
-            padding: '8px',
-            'font-size': '12px',
-          }}
-        >
-          {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
-        </pre>
-      </div>
-    </Frame>
-  );
-}
-
-const PLAN: TasksCardData = {
-  mode: 'select',
-  selectAll: true,
-  confirmLabel: 'Run selected',
-  tasks: [
-    { id: 'lint', label: 'Run linter', checked: true },
-    { id: 'test', label: 'Run unit tests', checked: true },
-    { id: 'build', label: 'Build production bundle' },
-    { id: 'deploy', label: 'Deploy to staging', description: 'Reversible; staging only' },
-  ],
-};
-
-const REQUIRE_ONE: TasksCardData = {
-  confirmLabel: 'Apply',
-  allowEmpty: false,
-  tasks: [
-    { id: 'cache', label: 'Clear the CDN cache' },
-    { id: 'reindex', label: 'Rebuild the search index' },
-    { id: 'restart', label: 'Restart the workers' },
-  ],
-};
-
-const BOUNDED: TasksCardData = {
-  heading: 'Pick up to 2 reviewers',
-  confirmLabel: 'Request review',
-  min: 1,
-  max: 2,
-  tasks: [
-    { id: 'ana', label: 'Ana' },
-    { id: 'ben', label: 'Ben' },
-    { id: 'cat', label: 'Cat' },
-    { id: 'dan', label: 'Dan' },
-  ],
-};
-
-const WITH_DESCRIPTIONS: TasksCardData = {
-  selectAll: true,
-  confirmLabel: 'Run cleanup',
-  tasks: [
-    { id: 'tmp', label: 'Delete temp files', description: 'Frees ~2.1 GB; safe to remove' },
-    { id: 'logs', label: 'Rotate logs', description: 'Archives logs older than 30 days' },
-    { id: 'orphans', label: 'Prune orphaned blobs', description: 'Unreferenced uploads only' },
-  ],
-};
-
-const HEADING_MAP: Record<string, string | undefined> = {
-  'card-plan': 'Approve the plan steps',
-  'card-require': 'Choose maintenance steps',
-  'card-bounded': undefined,
-  'card-desc': 'Storage cleanup',
-};
-
-const HTML_SNIPPET = (def: TasksCardData, cardId: string) => {
-  const heading = HEADING_MAP[cardId];
-  return `<kai-tasks${heading ? ` heading="${heading}"` : ''}></kai-tasks>
-<script type="module">
-  import '@kitn.ai/ui/elements'; // registers the custom elements
-
-  const el = document.querySelector('kai-tasks');
-  // \`data\` is the CardEnvelope.data (set as a property).
-  el.data = ${JSON.stringify(def, null, 2)};
-
-  // Toggling rows is local; only CONFIRM emits — a single bubbling \`kai-card\` event.
-  el.addEventListener('kai-card', (e) => {
-    const ev = e.detail; // { kind:'submit', cardId, data:{ selected } } | ...
-    if (ev.kind === 'submit') console.log('selected', ev.data.selected);
-  });
-</script>`;
-};
-
-const meta = {
-  title: 'Generative UI/Cards/kai-tasks',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-tasks'),
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: specDescription('kai-tasks', [
-        "`<kai-tasks>` is a **selectable** task/plan list (set via the `data` **property**): checkbox rows + an optional select-all + a confirm button. The user picks a subset, confirms, and the card emits the Card contract's **`submit`** verb up a bubbling **`kai-card`** CustomEvent of `{ kind: 'submit', cardId, data: { selected } }` — the checked ids in **input order**. Toggling rows is local UI state; **only the final confirm emits** (the wire stays quiet, the result atomic).",
-        '**Anatomy:** `<kai-card>` chrome (optional heading) → **select-all row** (shown when `selectAll:true` and ≥2 toggleable tasks; indeterminate state when partially checked) → **task rows** (one per `tasks[]` item: checkbox + label + optional description; disabled when `max` reached or `task.disabled`) → **card footer** (selected-count label + confirm `<Button>`, disabled until gating passes; replaced by a read-only resolved summary after submission).',
-        '**Gating:** confirm is enabled when `selectedCount >= (min ?? (allowEmpty ? 0 : 1))` and `<= (max ?? ∞)`. Select-all checks every toggleable (non-`disabled`) row and shows an **indeterminate** (`aria-checked="mixed"`) state when only some are checked. When `max` is reached, unchecked rows become non-toggleable. v1 is **select/approve only** (a future `mode:\'progress\'` is reserved in the schema).',
-        '**Events** (all frozen Card-contract verbs): `ready` on mount, `submit` on confirm, `error` for a malformed definition (renders the inline `kai-card` error). It **never invents events**. The same shapes flow over the remote iframe transport unchanged.',
-      ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Select a plan (select-all on, a few pre-checked). */
-export const SelectAPlan: Story = {
-  render: () => <TasksDemo def={PLAN} cardId="card-plan" heading="Approve the plan steps" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(PLAN, 'card-plan'), language: 'html' } } },
-};
-
-/** Require at least one (`allowEmpty:false`, the default) — confirm stays disabled until a row is checked. */
-export const RequireAtLeastOne: Story = {
-  render: () => <TasksDemo def={REQUIRE_ONE} cardId="card-require" heading="Choose maintenance steps" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(REQUIRE_ONE, 'card-require'), language: 'html' } } },
-};
-
-/** Bounded (`min`/`max`) — confirm gating + max-reached row disabling. */
-export const Bounded: Story = {
-  render: () => <TasksDemo def={BOUNDED} cardId="card-bounded" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(BOUNDED, 'card-bounded'), language: 'html' } } },
-};
-
-/** Rows with secondary descriptions (linked via aria-describedby). */
-export const WithDescriptions: Story = {
-  render: () => <TasksDemo def={WITH_DESCRIPTIONS} cardId="card-desc" heading="Storage cleanup" />,
-  parameters: { docs: { source: { code: HTML_SNIPPET(WITH_DESCRIPTIONS, 'card-desc'), language: 'html' } } },
-};
-
-const RESOLVED_TASKS: TasksCardData = {
-  confirmLabel: 'Export',
-  tasks: [
-    { id: 'sum', label: 'Executive summary' },
-    { id: 'data', label: 'Raw data' },
-    { id: 'charts', label: 'Charts' },
-  ],
-};
-
-/** The card after the user confirmed their selection — shows "Selected 2 of 3", no checkboxes or button. */
-export const Resolved: Story = {
-  name: 'Resolved (read-only)',
-  render: () => {
-    let el: TasksEl | undefined;
-    onMount(() => {
-      if (!el) return;
-      el.data = RESOLVED_TASKS;
-      el.resolution = { kind: 'submit', data: { selected: ['sum', 'charts'] } };
-    });
-    return (
-      <Frame>
-        <kai-tasks ref={(e) => (el = e as TasksEl)} card-id="card-resolved-tasks" heading="Export report" />
-      </Frame>
-    );
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-tasks heading="Export report"></kai-tasks>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const el = document.querySelector('kai-tasks');
-  el.data = ${JSON.stringify(RESOLVED_TASKS, null, 2)};
-  // Setting .resolution renders the chromed read-only view — no checkboxes or confirm button.
-  el.resolution = { kind: 'submit', data: { selected: ['sum', 'charts'] } };
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};
-
-/** A malformed `data` (empty `tasks`) → the inline error state + an `error` event. */
-export const ErrorState: Story = {
-  render: () => <TasksDemo def={{ tasks: [] } as unknown as TasksCardData} cardId="card-bad" />,
-  parameters: {
-    docs: {
-      source: {
-        code: `<kai-tasks></kai-tasks>
-<script type="module">
-  import '@kitn.ai/ui/elements';
-  const el = document.querySelector('kai-tasks');
-  // No tasks → inline error state + an \`error\` event.
-  el.data = { tasks: [] };
-  el.addEventListener('kai-card', (e) => {
-    if (e.detail.kind === 'error') console.warn('tasks error:', e.detail.message);
-  });
-</script>`,
-        language: 'html',
-      },
-    },
-  },
-};

package/src/elements/text-shimmer.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-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 {
-      'kai-text-shimmer': JSX.HTMLAttributes<HTMLElement> & {
-        text?: string;
-        duration?: number;
-        spread?: number;
-      };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-text-shimmer text="Thinking…" duration="3" spread="20"></kai-text-shimmer>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-</script>`;
-
-const meta = {
-  title: 'Components/TextShimmer',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-text-shimmer'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-text-shimmer', [
-          '`<kai-text-shimmer>` is the framework-agnostic **web component** for animated shimmering text — a gradient sweep across a label, isolated in **Shadow DOM**.',
-          '**When to use:** signalling a quiet, in-progress state ("Thinking…", "Generating…") inline. In SolidJS, use the `TextShimmer` primitive.',
-          '**Placement:** inline within a status row, toolbar label, or above a streaming content area — it renders as an inline `span` so it flows naturally alongside other text or icons.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the `text` attribute, and tune `duration` (seconds) and `spread` (gradient width, 5–45).",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** Default shimmer. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'font-size': '18px' }}>
-      <kai-text-shimmer text="Thinking…" />
-    </div>
-  ),
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Faster sweep with a wider gradient spread. */
-export const Tuned: Story = {
-  render: () => (
-    <div style={{ padding: '24px', 'font-size': '18px' }}>
-      <kai-text-shimmer text="Generating response…" duration={2} spread={35} />
-    </div>
-  ),
-};

package/src/elements/thinking-bar.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-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 {
-      'kai-thinking-bar': JSX.HTMLAttributes<HTMLElement> & {
-        text?: string;
-        stoppable?: boolean | string;
-        'stop-label'?: string;
-        'on:kai-stop'?: (e: CustomEvent) => void;
-      };
-    }
-  }
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-thinking-bar text="Thinking" stoppable stop-label="Answer now"></kai-thinking-bar>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  document.querySelector('kai-thinking-bar')
-    .addEventListener('kai-stop', () => console.log('user asked to stop'));
-</script>`;
-
-const meta = {
-  title: 'Components/ThinkingBar',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-thinking-bar'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-thinking-bar', [
-          '`<kai-thinking-bar>` is the framework-agnostic **web component** for an animated "thinking" indicator with an optional stop affordance — a pure leaf element isolated in **Shadow DOM**. (`<kai-chat>` does not surface this; compose it yourself.)',
-          '**When to use:** showing that the assistant is reasoning, optionally letting the user interrupt with "Answer now". In SolidJS, use the `ThinkingBar` primitive.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the `text`/`stop-label` attributes, add the `stoppable` flag to show the stop button, and listen for the `kai-stop` **CustomEvent**.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A plain thinking indicator. */
-export const Default: Story = {
-  render: () => (
-    <div style={{ padding: '24px' }}>
-      <kai-thinking-bar text="Thinking" />
-    </div>
-  ),
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** Stoppable — shows an "Answer now" affordance that fires a `stop` event. */
-export const Stoppable: Story = {
-  render: () => (
-    <div style={{ padding: '24px' }}>
-      <kai-thinking-bar
-        text="Reasoning"
-        stoppable
-        stop-label="Answer now"
-        on:kai-stop={() => console.log('stop')}
-      />
-    </div>
-  ),
-};

package/src/elements/tool.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { onMount } from 'solid-js';
-import './register'; // side effect: registers the custom elements
-import type { ToolPart } from '../components/tool';
-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 {
-      'kai-tool': JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-const completedTool: ToolPart = {
-  type: 'database_query',
-  state: 'output-available',
-  input: { table: 'users', limit: 10 },
-  output: { rows: 10, ms: 42 },
-};
-
-const runningTool: ToolPart = {
-  type: 'search',
-  state: 'input-available',
-  input: { query: 'kitn docs' },
-};
-
-/** Render the actual `<kai-tool>` custom element with a `tool` property. */
-function ToolElement(props: { tool: ToolPart; open?: boolean }) {
-  let el: (HTMLElement & { tool?: ToolPart; open?: boolean }) | undefined;
-  onMount(() => {
-    if (el) {
-      el.tool = props.tool;
-      if (props.open) el.open = true;
-    }
-  });
-  return (
-    <kai-tool ref={(e) => (el = e as HTMLElement)} style={{ display: 'block', padding: '16px', 'max-width': '720px' }} />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-tool id="tool" open></kai-tool>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const tool = document.getElementById('tool');
-  tool.tool = {
-    type: 'database_query',
-    state: 'output-available',
-    input: { table: 'users', limit: 10 },
-    output: { rows: 10, ms: 42 },
-  };
-</script>`;
-
-const meta = {
-  title: 'Components/Tool',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-tool'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-tool', [
-          '`<kai-tool>` is the framework-agnostic **web component** for a single tool-call panel — a collapsible input/output inspector with a state badge — isolated in **Shadow DOM**.',
-          '**When to use:** rendering an agent/tool-call trace in a non-Solid app. In SolidJS, use the `Tool` primitive directly.',
-          '**Placement:** inline inside an assistant message row, one element per tool call, below the text content; renders as a block sized to its content.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the call via the `tool` **property** (`el.tool = {...}`), and add the `open` flag to start it expanded.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A completed call with input and output, started expanded. */
-export const Completed: Story = {
-  render: () => <ToolElement tool={completedTool} open />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** A call still awaiting output (collapsed). */
-export const Running: Story = {
-  render: () => <ToolElement tool={runningTool} />,
-};

package/src/elements/voice-input.stories.tsx

@@ -1,88 +0,0 @@
-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 {
-      'kai-voice-input': JSX.HTMLAttributes<HTMLElement> & {
-        disabled?: boolean | string;
-      };
-    }
-  }
-}
-
-/** Render `<kai-voice-input>` with a stub `transcribe` function-property. */
-function VoiceElement(props: { disabled?: boolean }) {
-  let el: (HTMLElement & { transcribe?: (audio: Blob) => Promise<string> }) | undefined;
-  onMount(() => {
-    if (!el) return;
-    // transcribe MUST be set as a JS property — a value-returning callback
-    // can't be modelled as an attribute.
-    el.transcribe = async () => {
-      await new Promise((r) => setTimeout(r, 400));
-      return 'transcribed text';
-    };
-    el.addEventListener('kai-transcription', (e) => {
-      const ev = e as CustomEvent<{ text: string }>;
-      console.log('kai-transcription', ev.detail.text);
-    });
-  });
-  return (
-    <kai-voice-input
-      ref={(e) => (el = e as HTMLElement)}
-      disabled={props.disabled ? true : undefined}
-      style={{ display: 'inline-block', padding: '40px' }}
-    />
-  );
-}
-
-const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
-<kai-voice-input id="voice"></kai-voice-input>
-
-<script type="module">
-  import '@kitn.ai/ui/elements';   // registers the custom elements
-
-  const voice = document.getElementById('voice');
-  // transcribe is a FUNCTION property — your async transcriber
-  voice.transcribe = async (blob) => {
-    const text = await myTranscriptionApi(blob);
-    return text;
-  };
-  voice.addEventListener('kai-transcription', (e) => console.log(e.detail.text));
-</script>`;
-
-const meta = {
-  title: 'Components/VoiceInput',
-  tags: ['autodocs'],
-  argTypes: argTypesFor('kai-voice-input'),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: specDescription('kai-voice-input', [
-          '`<kai-voice-input>` is the framework-agnostic **web component** for a mic button that records and transcribes audio — isolated in **Shadow DOM**. It is the canonical **function-property** element.',
-          '**When to use:** adding voice dictation to an input in a non-Solid app. In SolidJS, use the `VoiceInput` primitive.',
-          '**Placement:** inline beside the prompt input field or as an icon button in the composer toolbar; renders as an inline-block sized to the mic button.',
-          "**How to use:** register once with `import '@kitn.ai/ui/elements'`, then set the `transcribe` **function property** (`el.transcribe = async blob => '...'`) — a value-returning callback can't be modelled as an event. It also emits `kai-audio-captured` (raw blob) and `kai-transcription` (text) **CustomEvents**.",
-          'See the **Code** tab for HTML usage.',
-        ]),
-    },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-/** A working mic button wired to a stub transcriber. */
-export const Default: Story = {
-  render: () => <VoiceElement />,
-  parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
-};
-
-/** A disabled mic button (non-interactive). */
-export const Disabled: Story = {
-  render: () => <VoiceElement disabled />,
-};

package/src/primitives/controllable.test.ts

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { createRoot, createSignal } from 'solid-js';
-import { createControllableSignal } from './controllable';
-
-describe('createControllableSignal', () => {
-  it('uses the initial value when uncontrolled (controlled accessor is undefined)', () => {
-    createRoot((dispose) => {
-      const [value] = createControllableSignal(() => undefined, true);
-      expect(value()).toBe(true);
-      dispose();
-    });
-  });
-
-  it('updates via the setter when uncontrolled', () => {
-    createRoot((dispose) => {
-      const [value, setValue] = createControllableSignal(() => undefined, false);
-      setValue(true);
-      expect(value()).toBe(true);
-      dispose();
-    });
-  });
-
-  it('reflects the controlled value and ignores the internal setter while controlled', () => {
-    createRoot((dispose) => {
-      const [controlled, setControlled] = createSignal<boolean | undefined>(false);
-      const [value, setValue] = createControllableSignal(controlled, false);
-      expect(value()).toBe(false);
-      setValue(true); // masked while controlled
-      expect(value()).toBe(false);
-      setControlled(true); // the controlling value wins
-      expect(value()).toBe(true);
-      dispose();
-    });
-  });
-
-  it('falls back to the internal value when control is released (becomes undefined)', () => {
-    createRoot((dispose) => {
-      const [controlled, setControlled] = createSignal<boolean | undefined>(true);
-      const [value, setValue] = createControllableSignal(controlled, false);
-      expect(value()).toBe(true);
-      setValue(true); // sets internal (masked now)
-      setControlled(undefined); // uncontrolled → internal shows
-      expect(value()).toBe(true);
-      dispose();
-    });
-  });
-});