@kitn.ai/ui 0.26.0 → 0.28.0

package/src/components/conversation-list.tsx

@@ -41,6 +41,21 @@ export function readConversationItemId(el: Element): string {
   return el.getAttribute('conversation-id') ?? el.id;
 }
 
+/** Whether a `<kai-conversation-item>` is STANDALONE — outside the management
+ *  of a `<kai-conversations>` container — and therefore activates ITSELF:
+ *  the facade makes its row body a
+ *  tabbable button and fires `kai-select` on click / Enter / Space. Derived
+ *  from the container's own membership rule, not from mere ancestry: item mode
+ *  queries `:scope > kai-conversation-item` (direct children only), so an item
+ *  wrapped in another element inside a container is standalone too — the
+ *  container's controller never stamps or activates it. Inside a container
+ *  (a direct child), the parent-item contract is the ONLY activation
+ *  path: the container dispatches `kai-conversation-select` and owns roving
+ *  tabindex, and the item fires nothing of its own. */
+export function isStandaloneConversationItem(el: Element): boolean {
+  return el.parentElement?.localName !== 'kai-conversations';
+}
+
 export interface ConversationItemsControllerOptions {
   /** The current slotted item hosts, in DOM order. */
   getItems: () => HTMLElement[];
@@ -63,7 +78,7 @@ export interface ConversationItemsController {
 }
 
 /**
- * The parent-item contract of item mode (spec 2026-08-20 § 2a), as a pure-DOM
+ * The parent-item contract of item mode, as a pure-DOM
  * controller so it is host-agnostic: the `kai-conversations` facade wires it over
  * its slotted `kai-conversation-item` children, and the jsdom contract tests
  * drive it over plain nodes. Solid context cannot cross the element boundary
@@ -78,8 +93,8 @@ export interface ConversationItemsController {
  *   left alone);
  * - roving tabindex — exactly one body node `tabindex="0"` (the active
  *   item's, else the first's), the rest `-1`, re-derived on every `sync()`;
- *   menu content keeps its natural tab order (it is the body's SIBLING, per
- *   the ratified 2026-08-20 sibling restructure);
+ *   menu content keeps its natural tab order (it is the body's SIBLING, not a
+ *   descendant);
  * - activation (click / Enter / Space) calls `onSelect` with the item's id, and
  *   is SUPPRESSED when the composed path crosses the item's `menu` region
  *   (light-DOM `slot="menu"` content or the shadow `data-kai-item-menu`
@@ -96,7 +111,7 @@ export function createConversationItemsController(
   };
   /** The item's ACTIVATION node — the target of role/aria-current/tabindex/
    *  focus. For a `kai-conversation-item` host that is its shadow body (the
-   *  sibling restructure, ratified 2026-08-20: the host is the row listitem
+   *  sibling restructure: the host is the row listitem
    *  wrapping the body AND the consumer's tabbable menu, so the control
    *  semantics must sit below it). A bare node with no such body is its own
    *  control. */
@@ -205,8 +220,8 @@ export interface ConversationListProps {
   /** Receive the imperative controller once mounted. The `kai-conversations`
    *  facade uses it to focus / clear the internal search input. */
   controllerRef?: (controller: ConversationListController) => void;
-  /** Item mode (spec 2026-08-20 § 2a): the consumer's OWN rows, rendered inside
-   *  a list region in place of the data rows. When set, the built-in search
+  /** Item mode: your OWN rows, rendered inside a list region in place of the
+   *  data rows. When set, the built-in search
    *  filter, grouping and empty/no-match states do not apply — the consumer's
    *  loop owns them — while the chrome (header, search box, new-chat, footer)
    *  still renders and `onSearchChange` still reports queries. The
@@ -309,13 +324,13 @@ export function ConversationList(props: ConversationListProps) {
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
             <input ref={searchInput} type="text" value={searchQuery()} onInput={(e) => setQuery(e.currentTarget.value)} placeholder="Search chats..."
               aria-label="Search chats"
-              class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full" />
+              class="bg-transparent text-compact text-foreground placeholder:text-muted-foreground rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full" />
           </div>
         </div>
       </Show>
       {/* Item mode: the consumer's own rows in a list region. The container's
           filter/grouping/empty states do not apply — the consumer's loop owns
-          them (spec § 2a batteries boundary). */}
+          them. */}
       <Show when={itemMode()}>
         <ScrollArea class="flex-1 px-2">
           <div
@@ -396,11 +411,11 @@ function GroupSection(props: { name: string; count: number; conversations: Conve
   const [open, setOpen] = createSignal(true);
   return (
     <Collapsible open={open()} onOpenChange={setOpen}>
-      <CollapsibleTrigger class="flex items-center gap-1.5 w-full px-1.5 py-1 rounded-md text-[13px] text-muted-foreground font-medium hover:bg-muted/30 transition-colors cursor-pointer mt-1.5">
+      <CollapsibleTrigger class="flex items-center gap-1.5 w-full px-1.5 py-1 rounded-md text-compact text-muted-foreground font-medium hover:bg-muted/30 transition-colors cursor-pointer mt-1.5">
         <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           class={cn('transition-transform', !open() && '-rotate-90')}><polyline points="6 9 12 15 18 9"/></svg>
         <span>{props.name}</span>
-        <Badge variant="count" class="ml-auto text-[11px]">{props.count}</Badge>
+        <Badge variant="count" class="ml-auto text-caption">{props.count}</Badge>
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div class="pl-2 mt-0.5 space-y-0.5">

package/src/components/conversation-panel.tsx

@@ -0,0 +1,118 @@
+import { For, Show, createMemo } from 'solid-js';
+import { cn } from '../utils/cn';
+import { ScrollArea } from '../ui/scroll-area';
+import { relativeTimeShort, isConversationUnread } from './conversation-item';
+import { byRecency } from '../primitives/conversation-store';
+import type { ConversationSummary } from '../types';
+
+export interface ConversationPanelProps {
+  conversations: ConversationSummary[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  /** Wording for the floating new-conversation pill. Defaults to "New conversation". */
+  newChatLabel?: string;
+  class?: string;
+}
+
+/**
+ * The widget-box list view (owner rework, 2026-08-26 — the earlier retrofit
+ * of the desktop `ConversationList` into this box was rejected at the live
+ * demo). NOT `ConversationList`, which stays the desktop-sidebar surface
+ * unchanged: no search box, no group headers, no per-row menu, no full-width
+ * footer bar, no second "+" beside the header toggle. A row is a
+ * conversation, full stop — bold title, right-aligned relative time, one
+ * truncated line of the last message. The ONE way to start a new
+ * conversation is the floating pill near the bottom.
+ *
+ * Modeled directly on Intercom's Messenger "Messages" tab (first-hand
+ * research: `.superpowers/sdd/2026-08-26-conversations/
+ * research-intercom-messages-view.md`) — a box this size gets one job at a
+ * time: browsing conversations OR having one, never both, and the list
+ * replaces the ENTIRE content area (`ChatThread` hides the thread,
+ * suggestions and composer while this renders — see its `view() === 'list'`
+ * branch).
+ */
+export function ConversationPanel(props: ConversationPanelProps) {
+  // Most-recently-updated first — the same defensive sort ChatThread's own
+  // auto-restore uses (an unparsable/missing date sorts last, never throws).
+  const ordered = createMemo(() =>
+    [...props.conversations].sort(byRecency),
+  );
+
+  return (
+    <div class={cn('relative flex h-full flex-col', props.class)}>
+      <Show
+        when={props.conversations.length > 0}
+        fallback={
+          <div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center text-sm text-muted-foreground">
+            No conversations yet
+          </div>
+        }
+      >
+        <ScrollArea class="flex-1 px-2 pt-2">
+          {/* Bottom padding clears the floating pill so the last row is never
+              hidden behind it. */}
+          <div role="list" aria-label="Conversations" class="space-y-0.5 pb-16">
+            <For each={ordered()}>
+              {(conv) => {
+                const isActive = () => conv.id === props.activeId;
+                const time = () => relativeTimeShort(conv.updatedAt ?? conv.lastMessageAt);
+                const unread = () => isConversationUnread(conv);
+                return (
+                  <button
+                    type="button"
+                    role="listitem"
+                    data-conversation-id={conv.id}
+                    data-active={isActive() ? '' : undefined}
+                    data-unread={unread() ? '' : undefined}
+                    aria-current={isActive() ? 'true' : undefined}
+                    onClick={() => props.onSelect(conv.id)}
+                    class={cn(
+                      'block w-full rounded-lg px-3 py-2.5 text-left transition-colors',
+                      isActive() ? 'bg-muted' : 'hover:bg-muted/50',
+                    )}
+                  >
+                    <div class="flex items-baseline gap-2">
+                      <span class={cn('min-w-0 flex-1 truncate text-sm font-semibold', isActive() ? 'text-foreground' : 'text-foreground/90')}>
+                        {conv.title}
+                      </span>
+                      <Show when={time()}>
+                        <span class="shrink-0 text-xs text-muted-foreground">{time()}</span>
+                      </Show>
+                    </div>
+                    {/* Trailing line: the last-message preview, plus — Intercom's own
+                        placement (research doc §2) — a small unread dot at its end. No
+                        preview text and no unread still renders nothing, same as before. */}
+                    <Show when={conv.trailing || unread()}>
+                      <div class="mt-0.5 flex items-center gap-1.5">
+                        <span class="min-w-0 flex-1 truncate text-xs text-muted-foreground">{conv.trailing}</span>
+                        <Show when={unread()}>
+                          <span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-unread" />
+                          <span class="sr-only">Unread</span>
+                        </Show>
+                      </div>
+                    </Show>
+                  </button>
+                );
+              }}
+            </For>
+          </div>
+        </ScrollArea>
+      </Show>
+      {/* The ONE new-conversation control: a compact centered floating pill,
+          never a header "+" AND a footer bar at once (the retrofit's
+          rejected shape). */}
+      <div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
+        <button
+          type="button"
+          data-kai-new-conversation
+          onClick={props.onNewChat}
+          class="pointer-events-auto rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground shadow-md transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {props.newChatLabel ?? 'New conversation'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/empty.tsx

@@ -26,9 +26,16 @@ function Empty(props: EmptyProps) {
   const [local, rest] = splitProps(props, ['class', 'children']);
   return (
     <div
+      // NO `text-center` / `text-balance` on the root. Both INHERIT, and
+      // `EmptyContent` is an arbitrary-content slot — a `PromptInput` dropped in
+      // it picked the centering up and rendered its placeholder and its typed
+      // text centred (owner report). Centering is a fact about the empty state's
+      // OWN title/description, so it lives on `EmptyTitle`/`EmptyDescription`
+      // (and `EmptyHeader`, which wraps only those). The root still centres its
+      // children as BOXES via `items-center`, which is what it actually wants.
       data-slot="empty"
       class={cn(
-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance',
+        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6',
         local.class,
       )}
       {...rest}
@@ -103,7 +110,9 @@ function EmptyTitle(props: EmptyTitleProps) {
   return (
     <div
       data-slot="empty-title"
-      class={cn('text-lg font-medium tracking-tight', local.class)}
+      // Carries its own centering + balance (the root no longer broadcasts them
+      // to every slotted child), so a title is centred wherever it is placed.
+      class={cn('text-title font-medium tracking-tight text-center text-balance', local.class)}
       {...rest}
     >
       {local.children}
@@ -123,7 +132,9 @@ function EmptyDescription(props: EmptyDescriptionProps) {
     <p
       data-slot="empty-description"
       class={cn(
-        'text-muted-foreground text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        // Same as EmptyTitle: own the centering + balance rather than inheriting
+        // it from a root that also reaches arbitrary slotted content.
+        'text-muted-foreground text-body text-center text-balance [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
         local.class,
       )}
       {...rest}

package/src/components/file-tree.tsx

@@ -492,7 +492,11 @@ function TreeNode(props: TreeNodeProps): JSX.Element {
           />
           {(() => {
             const Icon = open() ? FolderOpen : Folder;
-            return <Icon size={14} class="shrink-0 text-primary/80" aria-hidden="true" />;
+            // Decorative folder icon, not a control (the row is the click
+            // target) — was the BRAND token. `text-foreground/80` matches the
+            // row's own `text-foreground` and the chevron's neutral opacity
+            // treatment two lines above.
+            return <Icon size={14} class="shrink-0 text-foreground/80" aria-hidden="true" />;
           })()}
           <span class="truncate font-medium">{node().name}</span>
         </div>