@kitn.ai/ui 0.14.1

package/src/elements/tasks.stories.tsx

@@ -0,0 +1,237 @@
+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/tasks.tsx

@@ -0,0 +1,46 @@
+import { defineWebComponent } from './define';
+import { TasksCard, type TasksCardData } from '../components/tasks-card';
+import type { CardResolution } from '../primitives/card-contract';
+
+interface Props extends Record<string, unknown> {
+  /** The tasks definition (the CardEnvelope.data). Set as a JS PROPERTY:
+   *  `el.data = { tasks:[…], selectAll, confirmLabel, … }`. Import
+   *  `TasksCardData` from `@kitn.ai/ui` for the full shape. */
+  data?: Record<string, unknown>;
+  /** Stable card id correlating every emitted CardEvent. Attribute: `card-id`. */
+  cardId?: string;
+  /** Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`. */
+  heading?: string;
+  /** Set when the user resolved this card; renders the read-only view. Property:
+   *  `el.resolution = { kind:'submit', data:{ selected:[…] } }`. */
+  resolution?: Record<string, unknown>;
+}
+
+/**
+ * `<kai-tasks>` — a **selectable** task/plan list (set via the `data` property):
+ * checkbox rows + an optional select-all + a confirm button. Toggling rows is local
+ * UI state; only the final confirm emits the Card contract's **`submit`** verb
+ * up a bubbling **`kai-card`** CustomEvent (`{ kind:'submit', cardId,
+ * data:{ selected } }`) with the checked ids in input order. Also emits `ready` on
+ * mount and `error` for a malformed definition (inline error). v1 = select/approve
+ * mode only. Routes through a `CardProvider` when present, else the bubbling
+ * `kai-card` event. Isolated in Shadow DOM; theme-aware via the shared kit tokens.
+ */
+defineWebComponent<Props>(
+  'kai-tasks',
+  {
+    data: undefined,
+    cardId: undefined,
+    heading: undefined,
+    resolution: undefined,
+  },
+  (props, { element }) => (
+    <TasksCard
+      data={props.data as TasksCardData | undefined}
+      cardId={props.cardId ?? (element.id || 'kai-tasks')}
+      heading={props.heading}
+      resolution={props.resolution as CardResolution | undefined}
+      hostElement={element}
+    />
+  ),
+);

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

@@ -0,0 +1,64 @@
+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/text-shimmer.tsx

@@ -0,0 +1,28 @@
+import { defineWebComponent } from './define';
+import { TextShimmer } from '../components/text-shimmer';
+
+interface Props extends Record<string, unknown> {
+  /** The text to shimmer. */
+  text?: string;
+  /** Element tag to render as (default `span`). */
+  as?: string;
+  /** Animation duration in seconds. */
+  duration?: number;
+  /** Gradient spread (5–45). */
+  spread?: number;
+}
+
+/**
+ * `<kai-text-shimmer>` — animated shimmering text. Text via the `text`
+ * attribute; `duration`/`spread` tune the effect.
+ */
+defineWebComponent<Props>('kai-text-shimmer', {
+  text: '',
+  as: 'span',
+  duration: 4,
+  spread: 20,
+}, (props) => (
+  <TextShimmer as={props.as} duration={props.duration} spread={props.spread} class="text-body">
+    {props.text}
+  </TextShimmer>
+));

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

@@ -0,0 +1,72 @@
+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/thinking-bar.tsx

@@ -0,0 +1,34 @@
+import { defineWebComponent } from './define';
+import { ThinkingBar } from '../components/thinking-bar';
+
+interface Props extends Record<string, unknown> {
+  /** The shimmering label, e.g. "Thinking…". */
+  text?: string;
+  /** When true, show a "stop" affordance that fires a `stop` event. */
+  stoppable?: boolean;
+  /** Label for the stop affordance. */
+  stopLabel?: string;
+}
+
+/** Events fired by `<kai-thinking-bar>`. */
+interface Events {
+  /** The "stop / answer now" affordance was clicked. */
+  'kai-stop': void;
+}
+
+/**
+ * `<kai-thinking-bar>` — a pure leaf element: an animated "thinking" indicator
+ * (one of the primitives the batteries-included `<kai-chat>` does NOT surface).
+ * Config via attributes, the only interaction (`stop`) comes back as an event.
+ */
+defineWebComponent<Props, Events>('kai-thinking-bar', {
+  text: 'Thinking',
+  stoppable: false,
+  stopLabel: 'Answer now',
+}, (props, { dispatch, flag }) => (
+  <ThinkingBar
+    text={props.text}
+    stopLabel={props.stopLabel}
+    onStop={flag('stoppable') ? () => dispatch('kai-stop') : undefined}
+  />
+));

package/src/elements/tool.stories.tsx

@@ -0,0 +1,89 @@
+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/tool.tsx

@@ -0,0 +1,23 @@
+import { Show } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Tool, type ToolPart } from '../components/tool';
+
+interface Props extends Record<string, unknown> {
+  /** The tool-call to display. Set as a JS property. */
+  tool?: ToolPart;
+  /** Start expanded. */
+  open?: boolean;
+}
+
+/**
+ * `<kai-tool>` — a collapsible tool-call panel (input/output inspection with a
+ * state badge). Data via the `tool` property; `open` flag starts it expanded.
+ */
+defineWebComponent<Props>('kai-tool', {
+  tool: undefined,
+  open: false,
+}, (props, { flag }) => (
+  <Show when={props.tool}>
+    <Tool toolPart={props.tool!} defaultOpen={flag('open')} />
+  </Show>
+));