@kitnai/chat 0.6.0 → 0.8.0

package/src/components/prompt-suggestion.tsx

@@ -92,7 +92,7 @@ function renderHighlighted(text: string, highlight: string) {
   const index = textLower.indexOf(highlightLower);
 
   if (index === -1) {
-    return <span class="text-muted-foreground whitespace-pre-wrap">{text}</span>;
+    return <span class="text-foreground/70 whitespace-pre-wrap">{text}</span>;
   }
 
   const before = text.substring(0, index);
@@ -102,11 +102,11 @@ function renderHighlighted(text: string, highlight: string) {
   return (
     <>
       <Show when={before}>
-        <span class="text-muted-foreground whitespace-pre-wrap">{before}</span>
+        <span class="text-foreground/70 whitespace-pre-wrap">{before}</span>
       </Show>
       <span class="text-primary font-medium whitespace-pre-wrap">{matched}</span>
       <Show when={after}>
-        <span class="text-muted-foreground whitespace-pre-wrap">{after}</span>
+        <span class="text-foreground/70 whitespace-pre-wrap">{after}</span>
       </Show>
     </>
   );

package/src/components/reasoning.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { fn } from 'storybook/test';
 import { createSignal } from 'solid-js';
 import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'Components/Reasoning',
@@ -10,14 +11,12 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'A collapsible disclosure for a model\'s thinking/reasoning. Compose `Reasoning` (root) with `ReasoningTrigger` (the toggle) and `ReasoningContent` (the body, with optional markdown).',
-          '**When to use:** to surface an assistant\'s chain-of-thought or scratch reasoning that should be available but collapsed by default. It can auto-open while streaming and auto-close when streaming ends.',
-          '**How to use:** wrap a trigger and content in `Reasoning`. Leave it uncontrolled, or drive it with `open` + `onOpenChange`. Set `isStreaming` to auto-open during generation. Pass `markdown` on `ReasoningContent` to render a markdown string.',
-          '**Placement:** inside or above an assistant message, before the final answer.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A collapsible disclosure for a model\'s thinking/reasoning. Compose `Reasoning` (root) with `ReasoningTrigger` (the toggle) and `ReasoningContent` (the body, with optional markdown).',
+        '**When to use:** to surface an assistant\'s chain-of-thought or scratch reasoning that should be available but collapsed by default. It can auto-open while streaming and auto-close when streaming ends.',
+        '**How to use:** wrap a trigger and content in `Reasoning`. Leave it uncontrolled, or drive it with `open` + `onOpenChange`. Set `isStreaming` to auto-open during generation. Pass `markdown` on `ReasoningContent` to render a markdown string.',
+        '**Placement:** inside or above an assistant message, before the final answer.',
+      ]),
       controls: { exclude: ['use:eventListener'] },
     },
   },

package/src/components/scroll-button.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { For } from 'solid-js';
 import { ScrollButton } from './scroll-button';
 import { ChatContainerRoot, ChatContainerContent } from './chat-container';
+import { componentDescription } from '../stories/docs/element-controls';
 
 /**
  * `ScrollButton` reads scroll state from the surrounding `ChatContainerRoot`
@@ -37,14 +38,12 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'A floating "scroll to bottom" button wired to the enclosing `ChatContainerRoot`. It calls `scrollToBottom()` on click and animates in/out based on `isAtBottom`.',
-          '**When to use:** in a scrollable message log, to let the user jump back to the latest message after scrolling up. It hides itself automatically while pinned to the bottom.',
-          '**How to use:** render it inside a `ChatContainerRoot` (it consumes that context). Position it with absolute layout and optionally restyle via `variant`, `size`, and `class`.',
-          '**Placement:** overlaid near the bottom-center of the chat message area.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'A floating "scroll to bottom" button wired to the enclosing `ChatContainerRoot`. It calls `scrollToBottom()` on click and animates in/out based on `isAtBottom`.',
+        '**When to use:** in a scrollable message log, to let the user jump back to the latest message after scrolling up. It hides itself automatically while pinned to the bottom.',
+        '**How to use:** render it inside a `ChatContainerRoot` (it consumes that context). Position it with absolute layout and optionally restyle via `variant`, `size`, and `class`.',
+        '**Placement:** overlaid near the bottom-center of the chat message area.',
+      ]),
       controls: { exclude: ['use:eventListener'] },
     },
   },

package/src/components/slash-command.stories.tsx

@@ -4,6 +4,7 @@ import { createSignal } from "solid-js";
 import { SlashCommand, type SlashCommandItem } from "./slash-command";
 import { PromptInput, PromptInputTextarea } from "./prompt-input";
 import { ChatConfig } from "../primitives/chat-config";
+import { componentDescription } from '../stories/docs/element-controls';
 
 const skillCommands: SlashCommandItem[] = [
   { id: "caveman", label: "Caveman", description: "Ultra-compressed terse responses", category: "Skills" },
@@ -43,7 +44,7 @@ function SlashDemo(props: { commands: SlashCommandItem[]; activeIds?: string[];
             />
           </PromptInput>
         </div>
-        <p class="text-xs text-muted-foreground/40 mt-2 text-center">
+        <p class="text-xs text-muted-foreground mt-2 text-center">
           Type <code class="bg-muted px-1 rounded">/</code> to see commands. Arrow keys + Tab/Enter to select.
         </p>
       </div>
@@ -58,14 +59,12 @@ const meta = {
   parameters: {
     layout: "centered",
     docs: {
-      description: {
-        component: [
-          "A keyboard-navigable command palette that pops above a `PromptInput` when the user types `/`. Filters and groups commands by category, with arrow-key navigation and Tab/Enter to select.",
-          "**When to use:** to offer slash commands or toggleable skills/modes directly from the prompt input as the user types `/name`.",
-          "**How to use:** render it as a child of `PromptInput` (it consumes that context). Pass `commands`, handle `onSelect`, and optionally pass `activeIds` to mark active toggles. Set `compact={false}` for two-line rows.",
-          "**Placement:** inside the relative-positioned `PromptInput`, absolutely anchored to the top of the textarea.",
-        ].join("\n\n"),
-      },
+      description: componentDescription([
+        "A keyboard-navigable command palette that pops above a `PromptInput` when the user types `/`. Filters and groups commands by category, with arrow-key navigation and Tab/Enter to select.",
+        "**When to use:** to offer slash commands or toggleable skills/modes directly from the prompt input as the user types `/name`.",
+        "**How to use:** render it as a child of `PromptInput` (it consumes that context). Pass `commands`, handle `onSelect`, and optionally pass `activeIds` to mark active toggles. Set `compact={false}` for two-line rows.",
+        "**Placement:** inside the relative-positioned `PromptInput`, absolutely anchored to the top of the textarea.",
+      ]),
       controls: { exclude: ["use:eventListener"] },
     },
   },

package/src/components/slash-command.tsx

@@ -187,8 +187,8 @@ function SlashCommand(props: SlashCommandProps) {
                           "w-full flex items-center gap-2 px-3 text-left transition-colors",
                           isCompact ? "py-1" : "py-1.5",
                           selectedIndex() === idx
-                            ? "bg-muted/50 text-foreground"
-                            : "text-foreground/80 hover:bg-muted/30",
+                            ? "bg-muted text-foreground"
+                            : "text-foreground hover:bg-muted",
                         )}
                         onMouseEnter={() => setSelectedIndex(idx)}
                         onClick={() => selectItem(item)}

package/src/components/source.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from 'storybook-solidjs-vite';
 import { Source, SourceTrigger, SourceContent, SourceList } from './source';
+import { componentDescription } from '../stories/docs/element-controls';
 
 const meta = {
   title: 'Components/Source',
@@ -8,14 +9,12 @@ const meta = {
   parameters: {
     layout: 'padded',
     docs: {
-      description: {
-        component: [
-          'An inline citation chip with a hover-card preview. Compose `Source` (root, holds the `href`) with `SourceTrigger` (the clickable pill) and `SourceContent` (the hover preview). `SourceList` lays out several side by side.',
-          '**When to use:** to cite a referenced web source inline in an assistant message — show a compact domain/number pill that previews the title and description on hover.',
-          '**How to use:** wrap `SourceTrigger` and `SourceContent` in `Source` with the target `href`. Use `label` for custom text or a citation number, `showFavicon` for the site icon, and pass `title`/`description` to `SourceContent`.',
-          '**Placement:** within message body text as citations, or grouped under a message in a `SourceList`.',
-        ].join('\n\n'),
-      },
+      description: componentDescription([
+        'An inline citation chip with a hover-card preview. Compose `Source` (root, holds the `href`) with `SourceTrigger` (the clickable pill) and `SourceContent` (the hover preview). `SourceList` lays out several side by side.',
+        '**When to use:** to cite a referenced web source inline in an assistant message — show a compact domain/number pill that previews the title and description on hover.',
+        '**How to use:** wrap `SourceTrigger` and `SourceContent` in `Source` with the target `href`. Use `label` for custom text or a citation number, `showFavicon` for the site icon, and pass `title`/`description` to `SourceContent`.',
+        '**Placement:** within message body text as citations, or grouped under a message in a `SourceList`.',
+      ]),
       controls: { exclude: ['use:eventListener'] },
     },
   },

package/src/components/source.tsx

@@ -61,7 +61,7 @@ function SourceTrigger(props: SourceTriggerProps) {
         target="_blank"
         rel="noopener noreferrer"
         class={cn(
-          'bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
+          'bg-muted text-foreground/80 hover:bg-muted-foreground/30 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150',
           props.showFavicon ? 'pr-2 pl-1' : 'px-2',
           props.class
         )}

package/src/components/task-list-card.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal } from 'solid-js';
+import { TaskListCard, type TaskListCardData } from './task-list-card';
+import { componentDescription } from '../stories/docs/element-controls';
+import type { CardEvent, CardHost, CardContext } from '../primitives/card-contract';
+
+const ctx: CardContext = { theme: { mode: 'light' }, locale: 'en' };
+
+/** Renders the Solid <TaskListCard> with a capturing `host`, logging emitted events. */
+function Demo(props: { def: TaskListCardData; heading?: string; cardId: string }) {
+  const [log, setLog] = createSignal<CardEvent[]>([]);
+  const host: CardHost = { context: () => ctx, emit: (e) => setLog((p) => [...p, e]) };
+  return (
+    <div style={{ 'max-width': '460px', display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
+      <TaskListCard host={host} data={props.def} heading={props.heading} cardId={props.cardId} />
+      <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>
+  );
+}
+
+const PLAN: TaskListCardData = {
+  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 BOUNDED: TaskListCardData = {
+  confirmLabel: 'Request review',
+  min: 1,
+  max: 2,
+  tasks: [
+    { id: 'ana', label: 'Ana' },
+    { id: 'ben', label: 'Ben' },
+    { id: 'cat', label: 'Cat' },
+  ],
+};
+
+const meta = {
+  title: 'Components/TaskListCard',
+  component: TaskListCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'The SolidJS layer behind `<kc-task-list>`. Pass a `host` (a `CardHost`) to receive the emitted `CardEvent`s directly (the native-host path), or wrap in a `CardProvider`. Toggling rows is local; only confirm emits `submit-data` with `{ selected }` in input order.',
+      ]),
+    },
+  },
+} satisfies Meta<typeof TaskListCard>;
+
+export default meta;
+type Story = StoryObj<typeof TaskListCard>;
+
+export const SelectAPlan: Story = {
+  render: () => <Demo def={PLAN} heading="Approve the plan steps" cardId="card-plan" />,
+};
+
+export const Bounded: Story = {
+  render: () => <Demo def={BOUNDED} heading="Pick up to 2 reviewers" cardId="card-bounded" />,
+};

package/src/components/task-list-card.tsx

@@ -0,0 +1,388 @@
+import {
+  type JSX,
+  For,
+  Show,
+  splitProps,
+  mergeProps,
+  createSignal,
+  createMemo,
+  createEffect,
+  on,
+  ErrorBoundary,
+  createUniqueId,
+} from 'solid-js';
+import { cn } from '../utils/cn';
+import { Button } from '../ui/button';
+import { Card } from './card';
+import type { CardEnvelope, CardEvent, CardHost } from '../primitives/card-contract';
+import { emitCardEvent } from '../primitives/card-routing';
+import { useCardHost } from '../primitives/card-host';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types (task-list.schema.json) — see src/primitives/card-schemas/task-list.schema.json
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TaskListTask {
+  id: string;
+  label: string;
+  description?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+export interface TaskListCardData {
+  mode?: 'select'; // future: 'select' | 'progress'
+  heading?: string;
+  tasks: TaskListTask[]; // >=1
+  selectAll?: boolean;
+  confirmLabel?: string;
+  allowEmpty?: boolean;
+  min?: number;
+  max?: number;
+}
+
+export interface TaskListCardResult {
+  selected: string[];
+}
+
+export type TaskListCardEnvelope = CardEnvelope<'task-list', TaskListCardData>;
+
+export const TASK_LIST_CARD_TYPE = 'task-list' as const;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure helpers (unit-tested in isolation).
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** De-dupe tasks by id (first wins). Returns the usable list + an optional error. */
+export function normalizeTasks(tasks: unknown): { tasks: TaskListTask[]; error?: string } {
+  if (!Array.isArray(tasks) || tasks.length === 0) {
+    return { tasks: [], error: "This card couldn't be displayed." };
+  }
+  const seen = new Set<string>();
+  const out: TaskListTask[] = [];
+  for (const t of tasks) {
+    if (!t || typeof t !== 'object') continue;
+    const task = t as Partial<TaskListTask>;
+    if (typeof task.id !== 'string' || task.id.length === 0) continue;
+    if (typeof task.label !== 'string' || task.label.length === 0) continue;
+    if (seen.has(task.id)) {
+      // eslint-disable-next-line no-console
+      console.warn(`[kc-task-list] duplicate task id "${task.id}" ignored`);
+      continue;
+    }
+    seen.add(task.id);
+    out.push({
+      id: task.id,
+      label: task.label,
+      description: typeof task.description === 'string' ? task.description : undefined,
+      checked: task.checked === true,
+      disabled: task.disabled === true,
+    });
+  }
+  if (out.length === 0) return { tasks: [], error: "This card couldn't be displayed." };
+  return { tasks: out };
+}
+
+/** The ids of the initially-checked tasks (in input order). */
+export function initialSelected(tasks: TaskListTask[]): string[] {
+  return tasks.filter((t) => t.checked).map((t) => t.id);
+}
+
+/** The selected ids in input order (selection set ∩ tasks, preserving task order). */
+export function selectedInOrder(tasks: TaskListTask[], selected: Set<string>): string[] {
+  return tasks.filter((t) => selected.has(t.id)).map((t) => t.id);
+}
+
+/** The toggleable (non-disabled) task ids. */
+export function toggleableIds(tasks: TaskListTask[]): string[] {
+  return tasks.filter((t) => !t.disabled).map((t) => t.id);
+}
+
+export type SelectAllState = 'checked' | 'unchecked' | 'indeterminate';
+
+/** Select-all tri-state over the toggleable rows. */
+export function selectAllState(tasks: TaskListTask[], selected: Set<string>): SelectAllState {
+  const ids = toggleableIds(tasks);
+  if (ids.length === 0) return 'unchecked';
+  const n = ids.filter((id) => selected.has(id)).length;
+  if (n === 0) return 'unchecked';
+  if (n === ids.length) return 'checked';
+  return 'indeterminate';
+}
+
+/** Whether select-all should be shown: requested AND not blocked by `max` (since
+ *  "all" would violate max). */
+export function showSelectAll(data: TaskListCardData, tasks: TaskListTask[]): boolean {
+  if (data.selectAll !== true) return false;
+  const count = toggleableIds(tasks).length;
+  if (data.max !== undefined && count > data.max) return false;
+  return true;
+}
+
+/** Whether confirm is enabled for the current selection count. */
+export function canConfirm(data: TaskListCardData, count: number): boolean {
+  const min = data.min ?? (data.allowEmpty ? 0 : 1);
+  if (count < min) return false;
+  if (data.max !== undefined && count > data.max) return false;
+  return true;
+}
+
+/** Whether an unchecked row is blocked because `max` is reached. */
+export function isMaxReached(data: TaskListCardData, count: number): boolean {
+  return data.max !== undefined && count >= data.max;
+}
+
+/** The disabled-reason text for confirm (for aria-describedby), or undefined. */
+export function confirmReason(data: TaskListCardData, count: number): string | undefined {
+  if (canConfirm(data, count)) return undefined;
+  const min = data.min ?? (data.allowEmpty ? 0 : 1);
+  if (count < min) return `Select at least ${min}.`;
+  if (data.max !== undefined && count > data.max) return `Select at most ${data.max}.`;
+  return undefined;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// The <TaskListCard> component.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TaskListCardProps {
+  /** The task-list definition (CardEnvelope.data). */
+  data?: TaskListCardData;
+  /** The card id used to correlate every emitted CardEvent. */
+  cardId?: string;
+  /** The envelope title rendered in the card chrome. */
+  heading?: string;
+  /** Optional explicit CardHost (otherwise read from a CardProvider, otherwise the
+   *  bubbling `kc-card` CustomEvent off `hostElement`). */
+  host?: CardHost;
+  /** The custom-element host node, for the bubbling `kc-card` fallback emit. */
+  hostElement?: HTMLElement;
+  class?: string;
+}
+
+const DEFAULT_DATA: TaskListCardData = { tasks: [] };
+
+/**
+ * `TaskListCard` — a selectable task/plan list (checkbox rows + optional select-all
+ * + a confirm button) inside `Card` chrome. Row toggling and select-all are local
+ * UI state; only the final confirm emits the Card contract's `submit-data` verb
+ * (`{ kind:'submit-data', cardId, data:{ selected } }`) with the checked ids in
+ * input order. Emits `ready` on mount and `error` for an unusable definition.
+ */
+export function TaskListCard(props: TaskListCardProps): JSX.Element {
+  const merged = mergeProps({ cardId: 'kc-task-list' }, props);
+  const [local] = splitProps(merged, ['data', 'cardId', 'heading', 'host', 'hostElement', 'class']);
+
+  const ctxHost = useCardHost();
+  const uid = createUniqueId();
+
+  const emit = (event: CardEvent): void => {
+    const h = local.host ?? ctxHost;
+    if (h) h.emit(event);
+    else if (local.hostElement) emitCardEvent(local.hostElement, event);
+  };
+
+  const normalized = createMemo(() => normalizeTasks(local.data?.tasks));
+  const valid = createMemo(() => normalized().error === undefined);
+  const errorMessage = createMemo(() => normalized().error ?? '');
+  const tasks = createMemo(() => normalized().tasks);
+  const data = createMemo<TaskListCardData>(() => local.data ?? DEFAULT_DATA);
+
+  const [selected, setSelected] = createSignal<Set<string>>(new Set());
+  const [submitted, setSubmitted] = createSignal(false);
+
+  // Seed selection from the tasks' initial checked state when a NEW definition arrives.
+  createEffect(
+    on(
+      () => local.data,
+      () => {
+        setSelected(new Set(initialSelected(tasks())));
+        setSubmitted(false);
+      },
+    ),
+  );
+
+  // ready / error lifecycle emits.
+  createEffect(
+    on(valid, (ok) => {
+      if (ok) emit({ kind: 'ready', cardId: local.cardId });
+      else emit({ kind: 'error', cardId: local.cardId, message: errorMessage() });
+    }),
+  );
+
+  const count = createMemo(() => selected().size);
+  const confirmLabel = () => data().confirmLabel ?? 'Confirm';
+  const masterState = createMemo(() => selectAllState(tasks(), selected()));
+  const showMaster = createMemo(() => showSelectAll(data(), tasks()));
+  const reason = createMemo(() => confirmReason(data(), count()));
+  const confirmEnabled = createMemo(() => canConfirm(data(), count()) && !submitted());
+
+  const toggle = (id: string, on: boolean): void => {
+    if (submitted()) return;
+    const next = new Set(selected());
+    if (on) {
+      // Respect max: block adding past max.
+      if (isMaxReached(data(), next.size) && !next.has(id)) return;
+      next.add(id);
+    } else {
+      next.delete(id);
+    }
+    setSelected(next);
+  };
+
+  const toggleAll = (on: boolean): void => {
+    if (submitted()) return;
+    const next = new Set(selected());
+    for (const id of toggleableIds(tasks())) {
+      if (on) next.add(id);
+      else next.delete(id);
+    }
+    setSelected(next);
+  };
+
+  const onConfirm = (): void => {
+    if (!confirmEnabled()) return;
+    const result: TaskListCardResult = { selected: selectedInOrder(tasks(), selected()) };
+    emit({ kind: 'submit-data', cardId: local.cardId, data: result });
+    setSubmitted(true);
+  };
+
+  const reasonId = `kc-tl-reason-${uid}`;
+  const countId = `kc-tl-count-${uid}`;
+
+  return (
+    <Show when={valid()} fallback={<Card heading={local.heading} errorMessage={errorMessage()} />}>
+      <ErrorBoundary
+        fallback={() => {
+          emit({ kind: 'error', cardId: local.cardId, message: 'The card failed to render.' });
+          return <Card heading={local.heading} errorMessage="The card failed to render." />;
+        }}
+      >
+        <Card
+          heading={local.heading ?? local.data?.heading}
+          actions={
+            <div class="flex w-full flex-wrap items-center justify-between gap-2">
+              <span id={countId} aria-live="polite" class="text-xs text-muted-foreground">
+                {count()} selected
+              </span>
+              <div class="ml-auto flex items-center gap-2">
+                <Show when={reason()}>
+                  <span id={reasonId} class="sr-only">
+                    {reason()}
+                  </span>
+                </Show>
+                <Button
+                  type="button"
+                  disabled={!confirmEnabled()}
+                  aria-describedby={reason() ? reasonId : undefined}
+                  onClick={onConfirm}
+                >
+                  {confirmLabel()}
+                </Button>
+              </div>
+            </div>
+          }
+        >
+          <div
+            role="group"
+            aria-label={local.heading ?? local.data?.heading ?? 'Tasks'}
+            class={cn('flex flex-col', local.class)}
+            onKeyDown={(e) => {
+              // Enter anywhere in the card (off a checkbox) confirms when enabled.
+              if (e.key !== 'Enter') return;
+              const target = e.target as HTMLElement;
+              if (target.tagName === 'INPUT') return;
+              if (confirmEnabled()) onConfirm();
+            }}
+          >
+            <div class="divide-y divide-border overflow-hidden rounded-lg border border-input">
+              <Show when={showMaster()}>
+                {(() => {
+                  const indeterminate = () => masterState() === 'indeterminate';
+                  return (
+                    <label
+                      class={cn(
+                        'flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm font-medium transition-colors',
+                        masterState() === 'checked'
+                          ? 'bg-accent text-accent-foreground'
+                          : 'text-foreground hover:bg-muted/50',
+                      )}
+                    >
+                      <input
+                        type="checkbox"
+                        class="kc-checkbox"
+                        checked={masterState() === 'checked'}
+                        aria-checked={indeterminate() ? 'mixed' : masterState() === 'checked'}
+                        disabled={submitted()}
+                        ref={(el) => {
+                          createEffect(() => {
+                            el.indeterminate = indeterminate();
+                          });
+                        }}
+                        onChange={(e) => toggleAll(e.currentTarget.checked)}
+                      />
+                      <span>Select all</span>
+                    </label>
+                  );
+                })()}
+              </Show>
+
+              <For each={tasks()}>
+                {(task) => {
+                  const checked = () => selected().has(task.id);
+                  const blocked = () =>
+                    task.disabled ||
+                    submitted() ||
+                    (!checked() && isMaxReached(data(), count()));
+                  const descId = `kc-tl-desc-${uid}-${task.id}`;
+                  return (
+                    <label
+                      class={cn(
+                        'flex items-start gap-3 px-3 py-2.5 text-sm transition-colors',
+                        blocked()
+                          ? 'cursor-not-allowed opacity-60'
+                          : 'cursor-pointer hover:bg-muted/50',
+                        checked() && !blocked()
+                          ? 'bg-accent font-medium text-accent-foreground'
+                          : 'text-foreground',
+                      )}
+                      data-task-id={task.id}
+                    >
+                      <input
+                        type="checkbox"
+                        class="kc-checkbox mt-0.5"
+                        checked={checked()}
+                        disabled={blocked()}
+                        aria-disabled={blocked() ? 'true' : undefined}
+                        aria-describedby={task.description ? descId : undefined}
+                        onChange={(e) => toggle(task.id, e.currentTarget.checked)}
+                      />
+                      <span class="flex flex-col gap-0.5">
+                        <span>{task.label}</span>
+                        <Show when={task.description}>
+                          <span id={descId} class="text-xs font-normal text-muted-foreground">
+                            {task.description}
+                          </span>
+                        </Show>
+                      </span>
+                    </label>
+                  );
+                }}
+              </For>
+            </div>
+
+            <Show when={data().max !== undefined}>
+              <p class="pt-1 text-xs text-muted-foreground">Up to {data().max} selected.</p>
+            </Show>
+
+            <Show when={submitted()}>
+              <p role="status" class="pt-1 text-sm text-muted-foreground">
+                Submitted.
+              </p>
+            </Show>
+          </div>
+        </Card>
+      </ErrorBoundary>
+    </Show>
+  );
+}