@kitn.ai/ui 0.27.0 → 0.28.0

package/src/types.ts

@@ -37,10 +37,29 @@ export interface ConversationSummary {
   /** Fallback for the auto relative time when updatedAt is absent. */
   lastMessageAt?: string;
   updatedAt: string;
-  /** Right-aligned trailing text on the row — a count, status, or "days ago".
-   *  When omitted, a short relative time is auto-derived from `updatedAt`
-   *  (fallback `lastMessageAt`). */
+  /** Trailing text describing the row's content, read differently by the two
+   *  built-in list surfaces (both optional, same field — no widened shape):
+   *  the desktop `ConversationList`/`ConversationItem` renders it right-aligned
+   *  as a count/status/"days ago" and auto-derives a short relative time from
+   *  `updatedAt` (fallback `lastMessageAt`) when it's absent; the widget-box
+   *  `ConversationPanel` list view (owner rework, 2026-08-26) renders it as the
+   *  one-line last-message preview under the title instead — that view always
+   *  computes its own right-aligned relative time from `updatedAt` separately,
+   *  since a box that size has no room for a third line. `localStorageStore`
+   *  writes it as the ~80-char truncated last-message preview on every save
+   *  (`primitives/conversation-store.ts`). */
   trailing?: string;
+  /** ISO timestamp of when this conversation was last SEEN by the visitor
+   *  (widened additively, 2026-08-26 — unread indicators; no existing field
+   *  fit, since `trailing`/`lastMessageAt`/`updatedAt` are all content-timing
+   *  facts, not viewing-state). Unread = `updatedAt` is later than this.
+   *  Written by `ConversationStore.markRead` (see that doc for exactly when
+   *  and for the decide-loudly default when a store never implements it —
+   *  an absent `lastReadAt` reads as "not unread," never as "definitely
+   *  unread," so a store that doesn't support the concept at all simply
+   *  never shows an indicator rather than guessing). Round-tripped through
+   *  `list()`/`save()`; never author this by hand. */
+  lastReadAt?: string;
 }
 
 export interface ConversationGroup {
@@ -51,3 +70,26 @@ export interface ConversationGroup {
   sortOrder: number;
   createdAt: string;
 }
+
+/** One row in a `HomeConfig.links` list — a "docs" / "talk to sales" style
+ *  entry. `href` is optional: with it, the row renders as a link (subject to
+ *  `isSafeUrl`); without it, the row is a button that emits itself via
+ *  `HomePanelProps.onLink`. `icon` is either a `renderIcon` name or a safe
+ *  URL, same resolution `renderIcon` already does for every other icon prop
+ *  in the kit. */
+export interface HomeLinkEntry {
+  label: string;
+  href?: string;
+  description?: string;
+  icon?: string;
+}
+
+/** The widget home screen's JSON-shaped config (Intercom-pattern home tab).
+ *  Consumed by `ChatThread`'s `home` prop, which wires it into `HomePanel`/
+ *  `WidgetTabBar` and, from there, into `<kai-chat>`'s own `home` property. */
+export interface HomeConfig {
+  greeting?: { title?: string; subtitle?: string };
+  recentConversation?: boolean;
+  newConversation?: { label?: string };
+  links?: HomeLinkEntry[];
+}

package/src/ui/dock.tsx

@@ -92,6 +92,52 @@ export function DockCloseGlyph(): JSX.Element {
   return <X size={24} />;
 }
 
+export interface DockLauncherImageProps {
+  /** The icon URL. */
+  src: string;
+  /** Alt text — usually left empty: the launcher BUTTON already carries the
+   *  accessible name (Dock derives it from `label`/`openLabel`/`closeLabel`),
+   *  so a second name on the icon inside it would be redundant, not missing. */
+  alt?: string;
+}
+
+/**
+ * A branded launcher icon with a built-in fallback to {@link DockLauncherGlyph}
+ * on load failure — a dead link, or a placeholder URL nobody swapped for a
+ * real asset yet (exactly what shipped in `kai dev`'s own `owner-widget`
+ * fixture: `launcherIcon: "https://example.com/logo.png"`, which never
+ * resolves, so the FAB rendered a permanently broken image). Decides loudly
+ * with one `console.warn` naming the failing URL, then swaps — never a
+ * silent broken-image icon sitting in the corner of someone's page.
+ *
+ * Lives here, not on {@link Dock} itself: `Dock`'s `launcher` prop is
+ * deliberately ANY content (an emoji, a "Support" text pill, this image,
+ * whatever a consumer slots in) and the dock never inspects what it's
+ * holding — teaching it to specifically understand "this might be an
+ * `<img>` that can 404" would be the one prop where that boundary breaks.
+ * This is a plain sibling component a `launcher` value can be built FROM,
+ * same relationship `DockLauncherGlyph`/`DockCloseGlyph` already have to
+ * `Dock`. The construct engine's `emitDockLauncher` (codegen.ts) renders
+ * `<DockLauncherImage src={...} />` for a construct-authored `launcherIcon`
+ * rather than hand-rolling the same onError dance in emitted output.
+ */
+export function DockLauncherImage(props: DockLauncherImageProps) {
+  const [failed, setFailed] = createSignal(false);
+  return (
+    <Show when={!failed()} fallback={<DockLauncherGlyph />}>
+      <img
+        src={props.src}
+        alt={props.alt ?? ''}
+        style={{ width: '24px', height: '24px', 'border-radius': '9999px' }}
+        onError={() => {
+          console.warn(`[kai] Dock launcher icon failed to load (${props.src}); falling back to the default glyph.`);
+          setFailed(true);
+        }}
+      />
+    </Show>
+  );
+}
+
 /**
  * The dock's own stylesheet, scoped to its shadow root.
  *
@@ -245,7 +291,7 @@ const DOCK_CSS = `
   inline-size: 0.75rem;
   block-size: 0.75rem;
   border-radius: 9999px;
-  background: var(--color-destructive);
+  background: var(--color-unread);
   box-shadow: 0 0 0 2px var(--color-primary);
 }
 

package/theme.css

@@ -74,6 +74,29 @@
      added at the bottom. */
   --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));
   --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));
+  /* UNREAD indicator — a dedicated token (owner ruling, 2026-08-26), not a
+     reuse of --color-destructive: unread is notification semantics, not
+     error, so a consumer re-theming "danger" red must not also move every
+     unread dot. Used identically by all three places an unread conversation
+     surfaces: the list-row trailing dot (ConversationPanel), the header
+     toggle's badge (ChatThread), and Dock's own closed-launcher badge.
+     A vivid "messenger red" (Tailwind red-500 territory, the Intercom/iOS
+     badge convention) rather than the darker --color-destructive hue: the
+     first pass at this token picked a color that read as legible-on-paper
+     but visually flat/dark next to the launcher's near-black ring. This one
+     value is used in BOTH light and dark (no .dark override below) because
+     it independently clears 3:1 (WCAG 1.4.11, non-text) against every real
+     surface an unread dot sits on in EITHER mode: light row/card background
+     (white) 3.78:1, light Dock-launcher ring (--color-primary, near-black)
+     4.68:1, dark row/card background (near-black) 4.73–4.35:1, dark
+     Dock-launcher ring (--color-primary, near-white) 3.62:1. (Measured via
+     the WCAG relative-luminance formula against this file's own light/dark
+     --color-background/-card/-primary values — see
+     .superpowers/sdd/2026-08-26-conversations/rework-report.md Round 4 for
+     the worked numbers.) Override via --kai-color-unread; a construct author
+     can also set it per-widget through `theme.unreadColor` (construct
+     vocabulary — see agent-tooling/construct/schema.ts). */
+  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));
   /* MARKED text — the fill behind a keyword the app has flagged (the composer's
      `highlights` rules, decorated through the CSS Custom Highlight API). This is
      `<mark>`, not a selection and not a status: a warm yellow, the convention
@@ -241,6 +264,11 @@
   --color-destructive-soft: var(--kai-color-destructive-soft, color-mix(in oklab, var(--color-destructive) 14%, var(--color-background)));
   --color-hover: var(--kai-color-hover, color-mix(in oklab, var(--color-muted) 60%, var(--color-background)));
   --color-selected: var(--kai-color-selected, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)));
+  /* Unread indicator — dark. Same value as light (see the light block for the
+     full contrast note): one vivid red independently clears 3:1 against both
+     modes' real surfaces, so there is nothing to flip here. Still redeclared
+     for override symmetry with every other semantic color in this file. */
+  --color-unread: var(--kai-color-unread, hsl(0 84% 60%));
   /* Marked text — dark. A deep warm amber rather than the light yellow: a pale
      highlighter on a near-black field would blow out and force the text to flip
      colour. See the light block for the full note. */

package/dist/arrow-down-Br0qtpsz.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-BnFKqqtY.js";import{c as r,q as e}from"./define-CGGX-7Vg.js";var m=[["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"m19 12-7 7-7-7",key:"1idqje"}]],p=a=>r(o,e(a,{name:"ArrowDown",iconNode:m})),t=p;export{t as a};

package/dist/arrow-left-Dj7xgE12.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-BnFKqqtY.js";import{c as r,q as e}from"./define-CGGX-7Vg.js";var m=[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]],t=a=>r(o,e(a,{name:"ArrowLeft",iconNode:m})),p=t;export{p as a};

package/dist/check-DPeeMUYx.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-BnFKqqtY.js";import{c as m,q as r}from"./define-CGGX-7Vg.js";var c=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],e=a=>m(o,r(a,{name:"Check",iconNode:c})),f=e;export{f as c};

package/dist/chevron-down-CHSWk7ZT.js

@@ -1 +0,0 @@
-import{I as r}from"./Icon-BnFKqqtY.js";import{c as a,q as m}from"./define-CGGX-7Vg.js";var e=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],n=o=>a(r,m(o,{name:"ChevronDown",iconNode:e})),p=n;export{p as c};

package/dist/chevron-right-B7l_fMgx.js

@@ -1 +0,0 @@
-import{I as a}from"./Icon-BnFKqqtY.js";import{c as m,q as r}from"./define-CGGX-7Vg.js";var t=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],e=o=>m(a,r(o,{name:"ChevronRight",iconNode:t})),h=e;export{h as c};

package/dist/circle-Bb0yOpqM.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-BnFKqqtY.js";import{c as o,q as a}from"./define-CGGX-7Vg.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],m=r=>o(c,a(r,{name:"Circle",iconNode:e})),i=m;export{i as c};

package/dist/circle-check-BGZpCiz7.js

@@ -1 +0,0 @@
-import{I as m}from"./Icon-BnFKqqtY.js";import{c as r,q as a}from"./define-CGGX-7Vg.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]],o=c=>r(m,a(c,{name:"CircleCheck",iconNode:e})),i=o;export{i as c};

package/dist/code-block-CUQ5mtv0.js

@@ -1 +0,0 @@
-import{s as f,p as d,q as p,i as u,c as s,S as b,A as $,J,t as g,g as L,h as P,a as q,d as A,b as E,e as M}from"./define-CGGX-7Vg.js";import{c as m}from"./cn-DN5AWfiS.js";import{c as R}from"./check-DPeeMUYx.js";import{c as B}from"./copy-B6DO4PqB.js";const D={bash:()=>import("./bash-InADTalH.js"),javascript:()=>import("./javascript-C25yR2R2.js"),typescript:()=>import("./typescript-RycA9KXf.js"),tsx:()=>import("./tsx-B8rCNbgL.js"),html:()=>import("./html-CPZ3oZQ7.js"),css:()=>import("./css-M7EaDHN_.js"),json:()=>import("./json-DxJze_jm.js"),vue:()=>import("./vue-BmIZj4XD.js"),svelte:()=>import("./svelte--5p79yCD.js")},F={"github-dark-dimmed":()=>import("./github-dark-dimmed-DUshB20C.js"),"github-light":()=>import("./github-light-JYsPkUQd.js")},G={js:"javascript",ts:"typescript",jsx:"tsx",sh:"bash",shell:"bash"},w="github-dark-dimmed";let I={...D},K={...F},N={...G},v=null;const y=new Set,T=new Set;function O(){return v||(v=(async()=>{const[{createHighlighterCore:e},{createJavaScriptRegexEngine:t}]=await Promise.all([import("./core-AYMC6_lb.js"),import("./engine-javascript-vq0WuIJl.js")]);return e({themes:[],langs:[],engine:t()})})()),v}function j(e){return N[e]??e}async function Q(e,t){const n=j(t);if(y.has(n))return!0;const r=I[n];return r?(await e.loadLanguage(r()),y.add(n),!0):!1}async function k(e,t){if(T.has(t))return!0;const n=K[t];return n?(await e.loadTheme(n()),T.add(t),!0):!1}function U(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function h(e){return`<pre><code>${U(e)}</code></pre>`}async function V(e,t,n){if(!e)return h(e);try{const r=await O();if(!await Q(r,t))return h(e);const a=await k(r,n)?n:await k(r,w)?w:null;return a?r.codeToHtml(e,{lang:j(t),theme:a}):h(e)}catch{return h(e)}}var W=g("<button type=button part=copy>"),C=g("<div>"),X=g("<div tabindex=0>"),Y=g("<div tabindex=0><pre><code>");const Z=2e3;function _(e){const[t,n]=L(!1);let r;return P(()=>clearTimeout(r)),(()=>{var a=W();return a.$$click=()=>{var i;Promise.resolve((i=navigator.clipboard)==null?void 0:i.writeText(e.text)).catch(()=>{}),n(!0),clearTimeout(r),r=setTimeout(()=>n(!1),Z)},u(a,s(b,{get when(){return t()},get fallback(){return s(B,{size:14,"aria-hidden":"true"})},get children(){return s(R,{size:14,"aria-hidden":"true",class:"text-emerald-500"})}})),q(i=>{var l=t()?"Copied":"Copy code",c=m("inline-flex items-center justify-center rounded-md p-1.5","text-muted-foreground transition-colors hover:bg-muted hover:text-foreground","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring");return l!==i.e&&A(a,"aria-label",i.e=l),c!==i.t&&E(a,i.t=c),i},{e:void 0,t:void 0}),a})()}function ee(e){const[t,n]=f(e,["children","class","copy","copyText"]);return(()=>{var r=C();return d(r,p({get class(){return m("not-prose flex w-full flex-col overflow-clip border","border-border bg-card text-card-foreground","rounded-[var(--kai-code-radius,0.75rem)]",t.class)}},n),!1,!0),u(r,s(b,{get when(){return t.copy},get children(){return s(re,{class:"justify-end border-b border-border px-2 py-1",get children(){return s(_,{get text(){return t.copyText??""}})}})}}),null),u(r,()=>t.children,null),r})()}function te(e){const[t,n]=f(e,["code","language","theme","class"]),r=$(),a=()=>t.language??"tsx",i=()=>t.theme??r.codeTheme(),l=()=>r.codeHighlight(),[c]=J(()=>l()?{code:t.code,lang:a(),theme:i()}:null,o=>V(o.code,o.lang,o.theme)),S=()=>{switch(r.proseSize()){case"xs":return"text-caption";case"sm":return"text-compact";case"base":return"text-sm";case"lg":return"text-base"}},x=()=>m("w-full overflow-x-auto kai-focus-inset [&>pre]:px-4 [&>pre]:py-4",S(),t.class);return s(b,{get when(){return c()},get fallback(){return(()=>{var o=Y(),H=o.firstChild,z=H.firstChild;return d(o,p({get class(){return x()}},n),!1,!0),u(z,()=>t.code),o})()},get children(){var o=X();return d(o,p({get class(){return x()},get innerHTML(){return c()}},n),!1,!1),o}})}function re(e){const[t,n]=f(e,["children","class"]);return(()=>{var r=C();return d(r,p({get class(){return m("flex items-center justify-between",t.class)}},n),!1,!0),u(r,()=>t.children),r})()}M(["click"]);export{ee as C,te as a};

package/dist/controllable-D43BKmtX.js

@@ -1 +0,0 @@
-import{g as c}from"./define-CGGX-7Vg.js";function i(t,o){const[r,n]=c(o);return[()=>t()??r(),a=>n(a)]}export{i as c};

package/dist/conversation-list-D4lLU_yS.js

@@ -1 +0,0 @@
-import{c as i,q as K,s as I,i as u,S as p,a as y,d as b,b as k,t as h,k as C,e as D,g as B,o as L,u as P,F as $,m as R}from"./define-CGGX-7Vg.js";import{c as w}from"./cn-DN5AWfiS.js";import{a as T,b as U,C as F}from"./collapsible-CPJbf6FM.js";import{B as M}from"./button-BH6rN0U-.js";import{B as H}from"./badge-BpUbq8c0.js";import{S as E}from"./scroll-area-emVmWP4K.js";import{m as G}from"./message-square-Cxnwgkns.js";import{I as J}from"./Icon-BnFKqqtY.js";var Q=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m14 9 3 3-3 3",key:"8010ee"}]],V=s=>i(J,K(s,{name:"PanelLeftOpen",iconNode:Q})),W=V,X=h('<span part=leading class="flex shrink-0 items-center text-muted-foreground">'),Y=h('<div part=meta class="mt-0.5 truncate text-xs text-muted-foreground">'),Z=h('<span part=menu data-kai-item-menu class="ml-auto flex shrink-0 items-center">'),_=h('<div part=row><div part=body role=button data-kai-item-body class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><div class="min-w-0 flex-1"><div part=title>'),z=h('<span part=trailing class="ml-auto shrink-0 text-xs text-muted-foreground">'),ee=h('<div class="flex items-center gap-2.5"><span>'),te=h("<button>"),re=h('<div class="flex items-center gap-2"><div>'),ne=h("<div> messages");function oe(s,e=Date.now()){if(!s)return"";const g=Date.parse(s);if(Number.isNaN(g))return"";const l=Math.max(0,Math.round((e-g)/1e3));if(l<60)return"just now";const o=Math.floor(l/60);if(o<60)return`${o}m ago`;const v=Math.floor(o/60);return v<24?`${v}h ago`:`${Math.floor(v/24)}d ago`}function ae(s){const[e]=I(s,["conversationId","active","compact","leading","meta","menu","children","hostSemantics","onActivate","class"]);return(()=>{var g=_(),l=g.firstChild,o=l.firstChild,v=o.firstChild;return l.$$keydown=t=>{e.onActivate&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),e.onActivate())},l.$$click=()=>{var t;return(t=e.onActivate)==null?void 0:t.call(e)},u(l,i(p,{get when(){return e.leading},get children(){var t=X();return u(t,()=>e.leading),t}}),o),u(v,()=>e.children),u(o,i(p,{get when(){return e.meta},get children(){var t=Y();return u(t,()=>e.meta),t}}),null),u(g,i(p,{get when(){return e.menu},get children(){var t=Z();return u(t,()=>e.menu),t}}),null),y(t=>{var a=e.hostSemantics?"presentation":"listitem",n=e.active?"":void 0,f=e.conversationId,m=w("flex w-full items-center gap-2.5 rounded-lg text-left transition-colors",e.compact?"px-2.5 py-1.5":"px-2.5 py-2",e.active?"bg-muted":"hover:bg-muted/50",e.class),c=e.active?"true":"false",r=e.onActivate?0:void 0,d=w("truncate text-sm",e.active?"font-medium text-foreground":"text-foreground/80");return a!==t.e&&b(g,"role",t.e=a),n!==t.t&&b(g,"data-active",t.t=n),f!==t.a&&b(g,"data-conversation-id",t.a=f),m!==t.o&&k(g,t.o=m),c!==t.i&&b(l,"aria-current",t.i=c),r!==t.n&&b(l,"tabindex",t.n=r),d!==t.s&&k(v,t.s=d),t},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0}),g})()}function j(s){const[e]=I(s,["conversation","isActive","onSelect","compact","class"]),g=C(()=>e.conversation.trailing??oe(e.conversation.updatedAt??e.conversation.lastMessageAt));return(()=>{var l=te();return l.$$click=()=>e.onSelect(e.conversation.id),u(l,i(p,{get when(){return e.compact},get fallback(){return[(()=>{var o=re(),v=o.firstChild;return u(v,()=>e.conversation.title),u(o,i(p,{get when(){return g()},get children(){var t=z();return u(t,g),t}}),null),y(()=>k(v,w("min-w-0 flex-1 truncate text-sm",e.isActive?"font-medium text-foreground":"text-foreground/80"))),o})(),(()=>{var o=ne(),v=o.firstChild;return u(o,()=>e.conversation.messageCount,v),y(()=>k(o,w("mt-0.5 truncate text-xs",e.isActive?"text-foreground/70":"text-muted-foreground"))),o})()]},get children(){var o=ee(),v=o.firstChild;return u(o,i(G,{get class(){return w("size-3.5 shrink-0",e.isActive?"text-foreground":"text-muted-foreground")}}),v),u(v,()=>e.conversation.title),u(o,i(p,{get when(){return g()},get children(){var t=z();return u(t,g),t}}),null),y(()=>k(v,w("min-w-0 flex-1 truncate text-sm",e.isActive?"font-medium text-foreground":"text-foreground/80"))),o}})),y(o=>{var v=e.conversation.id,t=e.isActive?"true":void 0,a=w("w-full rounded-lg text-left transition-colors",e.compact?"px-2.5 py-1.5":"px-2.5 py-2",e.isActive?"bg-muted":"hover:bg-muted/50",e.class);return v!==o.e&&b(l,"data-conversation-id",o.e=v),t!==o.t&&b(l,"aria-current",o.t=t),a!==o.a&&k(l,o.a=a),o},{e:void 0,t:void 0,a:void 0}),l})()}D(["click","keydown"]);var ie=h('<div class="px-3 pb-2"><div class="flex items-center gap-2 rounded-md bg-surface-strong px-2.5 py-1.5"><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></circle><line x1=21 y1=21 x2=16.65 y2=16.65></line></svg><input type=text placeholder="Search chats..."aria-label="Search chats"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">'),se=h('<div role=list aria-label=Conversations part=items class="space-y-0.5 py-1">'),ce=h('<div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center text-sm text-muted-foreground">No conversations match your search'),le=h('<div class="space-y-0.5 py-1">'),ue=h('<div class="shrink-0 border-t border-border">'),de=h("<div>"),ge=h('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=3 y1=12 x2=21 y2=12></line><line x1=3 y1=6 x2=21 y2=6></line><line x1=3 y1=18 x2=21 y2=18>'),ve=h('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=12 y1=5 x2=12 y2=19></line><line x1=5 y1=12 x2=19 y2=12>'),fe=h('<div class="flex items-center justify-between p-3 pb-2"><div class="flex items-center gap-2"><span class="text-sm font-semibold text-foreground">Chats'),me=h('<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'),he=h('<svg width=10 height=10 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><polyline points="6 9 12 15 18 9">'),pe=h("<span>"),xe=h('<div class="pl-2 mt-0.5 space-y-0.5">');function we(s){return i(M,{variant:"ghost",size:"icon-sm","aria-label":"Open sidebar",get class(){return w("rounded-full bg-card/80 shadow-sm backdrop-blur",s.class)},get onClick(){return s.onExpand},get children(){return i(W,{class:"size-4"})}})}function A(s){const e=s.conversationId;return typeof e=="string"&&e?e:s.getAttribute("conversation-id")??s.id}function ye(s){var e;return((e=s.parentElement)==null?void 0:e.localName)!=="kai-conversations"}function be(s){const e=a=>{const n=s.getItems();return a.composedPath().find(f=>n.includes(f))},g=a=>{var n;return((n=a.shadowRoot)==null?void 0:n.querySelector("[data-kai-item-body]"))??a},l=a=>a.composedPath().some(n=>n instanceof Element&&(n.hasAttribute("data-kai-item-menu")||n.getAttribute("slot")==="menu")),o=(a,n,f)=>{a.getAttribute(n)!==f&&a.setAttribute(n,f)},v=a=>{const n=new Map;for(const f of a){const m=g(f);m===f&&f.localName.includes("-")||n.set(f,m)}return n},t=(a,n)=>{for(const[f,m]of v(a))o(m,"tabindex",f===n?"0":"-1")};return{sync:()=>{const a=s.getItems(),n=s.getActiveId(),f=v(a);let m;for(const[c,r]of f){const d=n!==void 0&&A(c)===n;r.hasAttribute("role")||r.setAttribute("role","button"),o(r,"aria-current",d?"true":"false");const x=c;x.active!==d&&(x.active=d),d&&(m=c)}t(a,m??f.keys().next().value)},handleClick(a){const n=e(a);!n||l(a)||s.onSelect(A(n))},handleKeyDown(a){const n=s.getItems();if(n.length===0)return;const f=e(a);if(a.key==="Enter"||a.key===" "){if(!f||l(a))return;a.preventDefault(),s.onSelect(A(f));return}let m;const c=f?n.indexOf(f):n.findIndex(r=>g(r).getAttribute("tabindex")==="0");a.key==="ArrowDown"?m=n[Math.min(c+1,n.length-1)]:a.key==="ArrowUp"?m=n[Math.max(c-1,0)]:a.key==="Home"?m=n[0]:a.key==="End"&&(m=n[n.length-1]),m&&(a.preventDefault(),t(n,m),g(m).focus())}}}function ke(s){const[e]=I(s,["groups","conversations","activeId","onSelect","onNewChat","onToggleSidebar","header","footer","empty","compact","onSearchChange","controllerRef","items","itemsKeyDown","itemsClick","class"]),[g,l]=B(""),o=C(()=>e.items!=null),v=C(()=>e.conversations.length===0);let t;const a=c=>{var r;l(c),(r=e.onSearchChange)==null||r.call(e,c)};L(()=>{var c;(c=e.controllerRef)==null||c.call(e,{focus:r=>t?.focus(r),clearSearch:()=>a("")})});const n=C(()=>{const c=g().toLowerCase();return c?e.conversations.filter(r=>r.title.toLowerCase().includes(c)):e.conversations}),f=C(()=>{const c=new Map;for(const r of n()){const d=r.groupId;c.has(d)||c.set(d,[]),c.get(d).push(r)}return c}),m=C(()=>{const c=new Set((e.groups??[]).map(r=>r.id));return n().filter(r=>r.groupId==null||!c.has(r.groupId))});return(()=>{var c=de();return u(c,i(p,{get when(){return e.header},get fallback(){return(()=>{var r=fe(),d=r.firstChild,x=d.firstChild;return u(d,i(M,{variant:"ghost",size:"icon-sm","aria-label":"Toggle sidebar",get onClick(){return e.onToggleSidebar},get children(){return ge()}}),x),u(r,i(M,{variant:"ghost",size:"icon-sm","aria-label":"New chat",get onClick(){return e.onNewChat},get children(){return ve()}}),null),r})()},get children(){return e.header}}),null),u(c,i(p,{get when(){return o()||!v()},get children(){var r=ie(),d=r.firstChild,x=d.firstChild,S=x.nextSibling;S.$$input=q=>a(q.currentTarget.value);var N=t;return typeof N=="function"?P(N,S):t=S,y(()=>S.value=g()),r}}),null),u(c,i(p,{get when(){return o()},get children(){return i(E,{class:"flex-1 px-2",get children(){var r=se();return r.$$click=d=>{var x;return(x=e.itemsClick)==null?void 0:x.call(e,d)},r.$$keydown=d=>{var x;return(x=e.itemsKeyDown)==null?void 0:x.call(e,d)},u(r,()=>e.items),r}})}}),null),u(c,i(p,{get when(){return R(()=>!o())()&&!v()},get fallback(){return i(p,{get when(){return!o()},get children(){return i(p,{get when(){return e.empty},get fallback(){return me()},get children(){return e.empty}})}})},get children(){return[i(p,{get when(){return n().length===0},get children(){return ce()}}),i(p,{get when(){return n().length>0},get children(){return i(E,{class:"flex-1 px-2",get children(){return[i($,{get each(){return e.groups},children:r=>{const d=C(()=>f().get(r.id)??[]);return i(p,{get when(){return d().length>0},get children(){return i(O,{get name(){return r.name},get count(){return d().length},get conversations(){return d()},get activeId(){return e.activeId},get onSelect(){return e.onSelect},get compact(){return e.compact}})}})}}),i(p,{get when(){return m().length>0},get children(){return i(p,{get when(){return e.compact},get fallback(){return i(O,{name:"Ungrouped",get count(){return m().length},get conversations(){return m()},get activeId(){return e.activeId},get onSelect(){return e.onSelect}})},get children(){var r=le();return u(r,i($,{get each(){return m()},children:d=>i(j,{conversation:d,get isActive(){return d.id===e.activeId},get onSelect(){return e.onSelect},compact:!0})})),r}})}})]}})}})]}}),null),u(c,i(p,{get when(){return e.footer},get children(){var r=ue();return u(r,()=>e.footer),r}}),null),y(()=>k(c,w("flex flex-col h-full bg-sidebar",e.class))),c})()}function O(s){const[e,g]=B(!0);return i(F,{get open(){return e()},onOpenChange:g,get children(){return[i(T,{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",get children(){return[(()=>{var l=he();return y(()=>b(l,"class",w("transition-transform",!e()&&"-rotate-90"))),l})(),(()=>{var l=pe();return u(l,()=>s.name),l})(),i(H,{variant:"count",class:"ml-auto text-caption",get children(){return s.count}})]}}),i(U,{get children(){var l=xe();return u(l,i($,{get each(){return s.conversations},children:o=>i(j,{conversation:o,get isActive(){return o.id===s.activeId},get onSelect(){return s.onSelect},get compact(){return s.compact}})})),l}})]}})}D(["input","keydown","click"]);export{ke as C,ae as S,we as a,be as c,ye as i,A as r};