@k2b/ui 0.16.0 → 0.18.0

package/dist/browser/layout/navigation-model.js

@@ -1,10 +1,12 @@
+/** A status icon at a row's end, such as "running". `label` names it for screen readers and as its tooltip. */
+
 /** Serializable presentation. Functions stay with the controller's owning island. */
 
 export function findNavigationItem(items, id) {
   for (const item of items) {
     if (item.disabled) continue;
     if (item.id === id) return item;
-    const found = findNavigationItem(item.children ?? [], id) ?? findNavigationItem(item.actions ?? [], id);
+    const found = findNavigationItem(item.children ?? [], id) ?? findNavigationItem(item.inlineActions ?? [], id) ?? findNavigationItem(item.actions ?? [], id);
     if (found) return found;
   }
 }

package/dist/browser/layout/navigation-model.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/navigation-model.ts"],"sourcesContent":["import type { LinkNavigateEvent, NavigationScrollMode } from \"@k2b/ssr/nav\";\nimport type { Accessor } from \"solid-js\";\n\ntype NavigationEntry = {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string | number;\n  description?: string;\n  active?: boolean;\n  disabled?: boolean;\n  color?: string;\n  children?: readonly NavigationItem[];\n  /** Initial disclosure state; subsequent toggles remain local to the renderer. */\n  defaultExpanded?: boolean;\n  /** Owner-held disclosure state. The renderer shows it and reports toggles through `onExpandedChange`. */\n  expanded?: boolean;\n  actions?: readonly NavigationItem[];\n};\n\n/** Serializable presentation. Functions stay with the controller's owning island. */\nexport type NavigationItem = NavigationEntry &\n  (\n    | { href: string; action?: string; navigation?: \"document\" | \"enhanced\"; scroll?: NavigationScrollMode }\n    | { action: string; href?: never; navigation?: never; scroll?: never }\n    | { href?: never; action?: never; navigation?: never; scroll?: never; children: readonly NavigationItem[] }\n  );\n\nexport type NavigationOptions = {\n  items: Accessor<readonly NavigationItem[]>;\n  onAction?: (action: string) => void | Promise<void>;\n  onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;\n  /** Receives disclosure toggles of items that carry `expanded`; the owner decides the next state. */\n  onExpandedChange?: (id: string, expanded: boolean) => void;\n};\n\nexport function findNavigationItem(items: readonly NavigationItem[], id: string): NavigationItem | undefined {\n  for (const item of items) {\n    if (item.disabled) continue;\n    if (item.id === id) return item;\n    const found = findNavigationItem(item.children ?? [], id) ?? findNavigationItem(item.actions ?? [], id);\n    if (found) return found;\n  }\n}\n\n/** One live source for renderers; no router, registry, fetching or persisted state. */\nexport function createNavigation(options: NavigationOptions) {\n  return {\n    items: options.items,\n    onNavigate: options.onNavigate,\n    onExpandedChange: options.onExpandedChange,\n    async activate(id: string) {\n      const item = findNavigationItem(options.items(), id);\n      if (item?.action) await options.onAction?.(item.action);\n    },\n  };\n}\n\nexport type NavigationController = ReturnType<typeof createNavigation>;\n"],"mappings":"AAoBA;;AAgBA,OAAO,SAAS,kBAAkB,CAAC,KAAgC,EAAE,EAAU,EAA8B;EAC3G,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;IACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;IACnB,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,IAAI;IAC/B,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,EAAE,CAAC;IACvG,IAAI,KAAK,EAAE,OAAO,KAAK;EACzB;AACF;;AAEA;AACA,OAAO,SAAS,gBAAgB,CAAC,OAA0B,EAAE;EAC3D,OAAO;IACL,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,UAAU,EAAE,OAAO,CAAC,UAAU;IAC9B,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;IAC1C,MAAM,QAAQ,CAAC,EAAU,EAAE;MACzB,MAAM,IAAI,GAAG,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;MACpD,IAAI,IAAI,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;IACzD;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/navigation-model.ts"],"sourcesContent":["import type { LinkNavigateEvent, NavigationScrollMode } from \"@k2b/ssr/nav\";\nimport type { Accessor } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\n/** A status icon at a row's end, such as \"running\". `label` names it for screen readers and as its tooltip. */\nexport type NavigationStatus = { icon: string; label: string; tone?: IntentTone };\n\ntype NavigationEntry = {\n  id: string;\n  label: string;\n  icon?: string;\n  /** Names a meaningful icon for screen readers, such as \"Homepage\"; without it the icon is decorative. */\n  iconLabel?: string;\n  badge?: string | number;\n  description?: string;\n  /**\n   * Status icon in a fixed-size slot at the row's end. Set `null` on a row whose status comes and goes: the empty slot\n   * keeps its place, so a status change never rewraps the label or moves the rows below.\n   */\n  status?: NavigationStatus | null;\n  active?: boolean;\n  disabled?: boolean;\n  color?: string;\n  children?: readonly NavigationItem[];\n  /** Initial disclosure state; subsequent toggles remain local to the renderer. */\n  defaultExpanded?: boolean;\n  /** Owner-held disclosure state. The renderer shows it and reports toggles through `onExpandedChange`. */\n  expanded?: boolean;\n  actions?: readonly NavigationItem[];\n  /**\n   * Square icon buttons in the row, before the `actions` menu. They run an `action`; a destination belongs in a row,\n   * where its link keeps modified clicks and new tabs.\n   */\n  inlineActions?: readonly { id: string; label: string; icon: string; action: string; disabled?: boolean }[];\n};\n\n/** Serializable presentation. Functions stay with the controller's owning island. */\nexport type NavigationItem = NavigationEntry &\n  (\n    | { href: string; action?: string; navigation?: \"document\" | \"enhanced\"; scroll?: NavigationScrollMode; section?: never }\n    | { action: string; href?: never; navigation?: never; scroll?: never; section?: never }\n    | {\n        href?: never;\n        action?: never;\n        navigation?: never;\n        scroll?: never;\n        children: readonly NavigationItem[];\n        /** Shows the group as a plain heading over its rows, always open and not indented, instead of a disclosure. */\n        section?: boolean;\n      }\n  );\n\nexport type NavigationOptions = {\n  items: Accessor<readonly NavigationItem[]>;\n  onAction?: (action: string) => void | Promise<void>;\n  onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;\n  /** Receives disclosure toggles of items that carry `expanded`; the owner decides the next state. */\n  onExpandedChange?: (id: string, expanded: boolean) => void;\n};\n\nexport function findNavigationItem(items: readonly NavigationItem[], id: string): NavigationItem | undefined {\n  for (const item of items) {\n    if (item.disabled) continue;\n    if (item.id === id) return item;\n    const found =\n      findNavigationItem(item.children ?? [], id) ??\n      findNavigationItem(item.inlineActions ?? [], id) ??\n      findNavigationItem(item.actions ?? [], id);\n    if (found) return found;\n  }\n}\n\n/** One live source for renderers; no router, registry, fetching or persisted state. */\nexport function createNavigation(options: NavigationOptions) {\n  return {\n    items: options.items,\n    onNavigate: options.onNavigate,\n    onExpandedChange: options.onExpandedChange,\n    async activate(id: string) {\n      const item = findNavigationItem(options.items(), id);\n      if (item?.action) await options.onAction?.(item.action);\n    },\n  };\n}\n\nexport type NavigationController = ReturnType<typeof createNavigation>;\n"],"mappings":"AAIA;;AAgCA;;AAwBA,OAAO,SAAS,kBAAkB,CAAC,KAAgC,EAAE,EAAU,EAA8B;EAC3G,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;IACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;IACnB,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,IAAI;IAC/B,MAAM,KAAK,GACT,kBAAkB,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC,IAC3C,kBAAkB,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,EAAE,EAAE,CAAC,IAChD,kBAAkB,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,EAAE,CAAC;IAC5C,IAAI,KAAK,EAAE,OAAO,KAAK;EACzB;AACF;;AAEA;AACA,OAAO,SAAS,gBAAgB,CAAC,OAA0B,EAAE;EAC3D,OAAO;IACL,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,UAAU,EAAE,OAAO,CAAC,UAAU;IAC9B,gBAAgB,EAAE,OAAO,CAAC,gBAAgB;IAC1C,MAAM,QAAQ,CAAC,EAAU,EAAE;MACzB,MAAM,IAAI,GAAG,kBAAkB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;MACpD,IAAI,IAAI,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;IACzD;EACF,CAAC;AACH","ignoreList":[]}

package/dist/browser/surfaces/NoticeCard.js

@@ -1,21 +1,21 @@
 import { template as _$template } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<article><div><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div><p></p><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<p>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div>`);
-import { For, Show, splitProps } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<article><div><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div><p></p><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<p>`);
+import { children, For, Show, splitProps } from "solid-js";
 export const NOTICE_CARD_CLASSES = {
   root: "k2b-notice-card",
   content: "k2b-notice-card__content",
@@ -27,15 +27,18 @@ export const NOTICE_CARD_CLASSES = {
 };
 function NoticeCardComponent(props) {
   const [local, articleProps] = splitProps(props, ["tone", "title", "detail", "meta", "children", "class", "bodyClass"]);
+  // Children that render nothing, such as a Show whose condition is false, add no body and no gap.
+  const body = children(() => local.children);
+  const hasBody = () => body.toArray().some(node => node != null && node !== false && node !== "");
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$),
+    var _el$ = _$getNextElement(_tmpl$2),
       _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
-      _el$5 = _el$4.nextSibling,
-      [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling),
-      _el$7 = _el$6.nextSibling,
-      [_el$8, _co$3] = _$getNextMarker(_el$7.nextSibling);
+      _el$4 = _el$2.firstChild,
+      [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
+      _el$6 = _el$5.nextSibling,
+      [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling),
+      _el$8 = _el$7.nextSibling,
+      [_el$9, _co$3] = _$getNextMarker(_el$8.nextSibling);
     _$spread(_el$, _$mergeProps(articleProps, {
       get ["class"]() {
         return `${NOTICE_CARD_CLASSES.root} ${local.class ?? ""}`;
@@ -49,57 +52,57 @@ function NoticeCardComponent(props) {
         return local.title;
       },
       children: title => (() => {
-        var _el$9 = _$getNextElement(_tmpl$2),
-          _el$0 = _el$9.firstChild,
-          _el$1 = _el$0.nextSibling,
-          [_el$10, _co$4] = _$getNextMarker(_el$1.nextSibling);
-        _$insert(_el$0, title);
-        _$insert(_el$9, _$createComponent(Show, {
+        var _el$0 = _$getNextElement(_tmpl$3),
+          _el$1 = _el$0.firstChild,
+          _el$10 = _el$1.nextSibling,
+          [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling);
+        _$insert(_el$1, title);
+        _$insert(_el$0, _$createComponent(Show, {
           get when() {
             return local.meta;
           },
           children: meta => (() => {
-            var _el$11 = _$getNextElement(_tmpl$3);
-            _$insert(_el$11, meta);
-            _$effect(() => _$className(_el$11, NOTICE_CARD_CLASSES.meta));
-            return _el$11;
+            var _el$12 = _$getNextElement(_tmpl$4);
+            _$insert(_el$12, meta);
+            _$effect(() => _$className(_el$12, NOTICE_CARD_CLASSES.meta));
+            return _el$12;
           })()
-        }), _el$10, _co$4);
+        }), _el$11, _co$4);
         _$effect(_p$ => {
           var _v$ = NOTICE_CARD_CLASSES.head,
             _v$2 = NOTICE_CARD_CLASSES.title;
-          _v$ !== _p$.e && _$className(_el$9, _p$.e = _v$);
-          _v$2 !== _p$.t && _$className(_el$0, _p$.t = _v$2);
+          _v$ !== _p$.e && _$className(_el$0, _p$.e = _v$);
+          _v$2 !== _p$.t && _$className(_el$1, _p$.t = _v$2);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$9;
+        return _el$0;
       })()
-    }), _el$4, _co$);
+    }), _el$5, _co$);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return local.detail;
       },
       children: detail => (() => {
-        var _el$12 = _$getNextElement(_tmpl$4);
-        _$insert(_el$12, detail);
-        _$effect(() => _$className(_el$12, NOTICE_CARD_CLASSES.description));
-        return _el$12;
+        var _el$13 = _$getNextElement(_tmpl$5);
+        _$insert(_el$13, detail);
+        _$effect(() => _$className(_el$13, NOTICE_CARD_CLASSES.description));
+        return _el$13;
       })()
-    }), _el$6, _co$2);
+    }), _el$7, _co$2);
     _$insert(_el$2, _$createComponent(Show, {
       get when() {
-        return local.children;
+        return hasBody();
       },
-      children: body => (() => {
-        var _el$13 = _$getNextElement(_tmpl$5);
-        _$insert(_el$13, body);
-        _$effect(() => _$className(_el$13, `${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? ""}`));
-        return _el$13;
-      })()
-    }), _el$8, _co$3);
+      get children() {
+        var _el$3 = _$getNextElement(_tmpl$);
+        _$insert(_el$3, body);
+        _$effect(() => _$className(_el$3, `${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? ""}`));
+        return _el$3;
+      }
+    }), _el$9, _co$3);
     _$effect(() => _$className(_el$2, NOTICE_CARD_CLASSES.content));
     _$runHydrationEvents();
     return _el$;
@@ -112,7 +115,7 @@ function NoticeGrid(props) {
       return props.items.length > 0;
     },
     get children() {
-      var _el$14 = _$getNextElement(_tmpl$5);
+      var _el$14 = _$getNextElement(_tmpl$);
       _$insert(_el$14, _$createComponent(For, {
         get each() {
           return props.items;

package/dist/browser/surfaces/NoticeCard.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/NoticeCard.tsx"],"sourcesContent":["import { For, type JSX, Show, splitProps } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type NoticeTone = Extract<IntentTone, \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\">;\n\ntype NoticeCardContentProps =\n  | { title: JSX.Element; detail?: JSX.Element; meta?: JSX.Element; children?: JSX.Element }\n  | { title?: never; detail?: never; meta?: never; children: JSX.Element };\n\nexport type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"class\" | \"title\"> &\n  NoticeCardContentProps & {\n    tone?: NoticeTone;\n    class?: string;\n    bodyClass?: string;\n  };\n\nexport const NOTICE_CARD_CLASSES = {\n  root: \"k2b-notice-card\",\n  content: \"k2b-notice-card__content\",\n  head: \"k2b-notice-card__head\",\n  title: \"k2b-notice-card__title\",\n  meta: \"k2b-notice-card__meta\",\n  description: \"k2b-notice-card__description\",\n  body: \"k2b-notice-card__body\",\n} as const;\n\nfunction NoticeCardComponent(props: NoticeCardProps): JSX.Element {\n  const [local, articleProps] = splitProps(props, [\"tone\", \"title\", \"detail\", \"meta\", \"children\", \"class\", \"bodyClass\"]);\n  return (\n    <article {...articleProps} class={`${NOTICE_CARD_CLASSES.root} ${local.class ?? \"\"}`} data-tone={local.tone ?? \"neutral\"}>\n      <div class={NOTICE_CARD_CLASSES.content}>\n        <Show when={local.title}>\n          {(title) => (\n            <div class={NOTICE_CARD_CLASSES.head}>\n              <p class={NOTICE_CARD_CLASSES.title}>{title()}</p>\n              <Show when={local.meta}>{(meta) => <span class={NOTICE_CARD_CLASSES.meta}>{meta()}</span>}</Show>\n            </div>\n          )}\n        </Show>\n        <Show when={local.detail}>{(detail) => <p class={NOTICE_CARD_CLASSES.description}>{detail()}</p>}</Show>\n        <Show when={local.children}>{(body) => <div class={`${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? \"\"}`}>{body()}</div>}</Show>\n      </div>\n    </article>\n  );\n}\n\nexport type NoticeGridProps<T> = {\n  items: readonly T[];\n  children: (item: T) => JSX.Element;\n  class?: string;\n};\n\nfunction NoticeGrid<T>(props: NoticeGridProps<T>): JSX.Element {\n  const columns = () => (props.items.length <= 1 ? \"one\" : props.items.length === 2 ? \"two\" : \"three\");\n  return (\n    <Show when={props.items.length > 0}>\n      <div class={`k2b-notice-grid ${props.class ?? \"\"}`} data-columns={columns()}>\n        <For each={props.items}>{(item) => props.children(item)}</For>\n      </div>\n    </Show>\n  );\n}\n\nexport const NoticeCard = Object.assign(NoticeCardComponent, { Grid: NoticeGrid });\nexport default NoticeCard;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAS,GAAG,EAAY,IAAI,EAAE,UAAU,QAAQ,UAAU;AAgB1D,OAAO,MAAM,mBAAmB,GAAG;EACjC,IAAI,EAAE,iBAAiB;EACvB,OAAO,EAAE,0BAA0B;EACnC,IAAI,EAAE,uBAAuB;EAC7B,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,uBAAuB;EAC7B,WAAW,EAAE,8BAA8B;EAC3C,IAAI,EAAE;AACR,CAAU;AAEV,SAAS,mBAAmB,CAAC,KAAsB,EAAe;EAChE,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC;EACtH;IAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;IAAA,4BACe,YAAY;MAAA;QAAA,OAAS,GAAG,mBAAmB,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;MAAA;MAAA;QAAA,OAAa,KAAK,CAAC,IAAI,IAAI,SAAS;MAAA;IAAA;IAAA,kCAEnH,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK;MAAA;MAAA,UACnB,KAAK;QAAA;UAAA;UAAA;UAAA;QAAA,gBAEmC,KAAK;QAAA,kCAC1C,IAAI;UAAA,IAAC,IAAI;YAAA,OAAE,KAAK,CAAC,IAAI;UAAA;UAAA,UAAI,IAAI;YAAA;YAAA,iBAA6C,IAAI;YAAA,mCAA/B,mBAAmB,CAAC,IAAI;YAAA;UAAA;QAAiB;QAAA;UAAA,UAF/E,mBAAmB,CAAC,IAAI;YAAA,OACxB,mBAAmB,CAAC,KAAK;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAGtC;IAAA,kCAEF,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,MAAM;MAAA;MAAA,UAAI,MAAM;QAAA;QAAA,iBAAiD,MAAM;QAAA,mCAAxC,mBAAmB,CAAC,WAAW;QAAA;MAAA;IAAgB;IAAA,kCAC/F,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,QAAQ;MAAA;MAAA,UAAI,IAAI;QAAA;QAAA,iBAA0E,IAAI;QAAA,mCAA7D,GAAG,mBAAmB,CAAC,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE;QAAA;MAAA;IAAgB;IAAA,kCAV/G,mBAAmB,CAAC,OAAO;IAAA;IAAA;EAAA;AAc7C;AAQA,SAAS,UAAU,CAAI,KAAyB,EAAe;EAC7D,MAAM,OAAO,GAAG,MAAO,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,GAAG,KAAK,GAAG,OAAQ;EACpG,yBACG,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;IAAA;IAAA;MAAA;MAAA,mCAE7B,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA,UAAI,IAAI,IAAK,KAAK,CAAC,QAAQ,CAAC,IAAI;MAAC;MAAA;QAAA,WAD7C,mBAAmB,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;UAAA,OAAgB,OAAO,CAAC,CAAC;QAAA;QAAA;QAAA;MAAA;QAAA;QAAA;MAAA;MAAA;IAAA;EAAA;AAKjF;AAEA,OAAO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;EAAE,IAAI,EAAE;AAAW,CAAC,CAAC;AAClF,eAAe,UAAU","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/NoticeCard.tsx"],"sourcesContent":["import { children, For, type JSX, Show, splitProps } from \"solid-js\";\nimport type { IntentTone } from \"../semantics\";\n\nexport type NoticeTone = Extract<IntentTone, \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\">;\n\ntype NoticeCardContentProps =\n  | { title: JSX.Element; detail?: JSX.Element; meta?: JSX.Element; children?: JSX.Element }\n  | { title?: never; detail?: never; meta?: never; children: JSX.Element };\n\nexport type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, \"children\" | \"class\" | \"title\"> &\n  NoticeCardContentProps & {\n    tone?: NoticeTone;\n    class?: string;\n    bodyClass?: string;\n  };\n\nexport const NOTICE_CARD_CLASSES = {\n  root: \"k2b-notice-card\",\n  content: \"k2b-notice-card__content\",\n  head: \"k2b-notice-card__head\",\n  title: \"k2b-notice-card__title\",\n  meta: \"k2b-notice-card__meta\",\n  description: \"k2b-notice-card__description\",\n  body: \"k2b-notice-card__body\",\n} as const;\n\nfunction NoticeCardComponent(props: NoticeCardProps): JSX.Element {\n  const [local, articleProps] = splitProps(props, [\"tone\", \"title\", \"detail\", \"meta\", \"children\", \"class\", \"bodyClass\"]);\n  // Children that render nothing, such as a Show whose condition is false, add no body and no gap.\n  const body = children(() => local.children);\n  const hasBody = () => body.toArray().some((node) => node != null && node !== false && node !== \"\");\n  return (\n    <article {...articleProps} class={`${NOTICE_CARD_CLASSES.root} ${local.class ?? \"\"}`} data-tone={local.tone ?? \"neutral\"}>\n      <div class={NOTICE_CARD_CLASSES.content}>\n        <Show when={local.title}>\n          {(title) => (\n            <div class={NOTICE_CARD_CLASSES.head}>\n              <p class={NOTICE_CARD_CLASSES.title}>{title()}</p>\n              <Show when={local.meta}>{(meta) => <span class={NOTICE_CARD_CLASSES.meta}>{meta()}</span>}</Show>\n            </div>\n          )}\n        </Show>\n        <Show when={local.detail}>{(detail) => <p class={NOTICE_CARD_CLASSES.description}>{detail()}</p>}</Show>\n        <Show when={hasBody()}>\n          <div class={`${NOTICE_CARD_CLASSES.body} ${local.bodyClass ?? \"\"}`}>{body()}</div>\n        </Show>\n      </div>\n    </article>\n  );\n}\n\nexport type NoticeGridProps<T> = {\n  items: readonly T[];\n  children: (item: T) => JSX.Element;\n  class?: string;\n};\n\nfunction NoticeGrid<T>(props: NoticeGridProps<T>): JSX.Element {\n  const columns = () => (props.items.length <= 1 ? \"one\" : props.items.length === 2 ? \"two\" : \"three\");\n  return (\n    <Show when={props.items.length > 0}>\n      <div class={`k2b-notice-grid ${props.class ?? \"\"}`} data-columns={columns()}>\n        <For each={props.items}>{(item) => props.children(item)}</For>\n      </div>\n    </Show>\n  );\n}\n\nexport const NoticeCard = Object.assign(NoticeCardComponent, { Grid: NoticeGrid });\nexport default NoticeCard;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/chat/ChatComposer.js

@@ -12,26 +12,26 @@ var _tmpl$ = ["<span><strong", ">", "</strong></span>"],
   _tmpl$5 = ["<div class=\"k2b-chat-composer-accessory\"><div", " class=\"k2b-chat-composer__commands\" role=\"listbox\"", ">", "", "", "", "</div></div>"],
   _tmpl$6 = ["<div class=\"k2b-chat-composer-slot\"><div style=\"", "\"", ">", "</div>", "</div>"],
   _tmpl$7 = ["<div class=\"k2b-chat-composer__attachments\" role=\"list\"", " tabindex=\"0\">", "</div>"],
-  _tmpl$8 = ["<div class=\"k2b-chat-composer__drop\" aria-hidden=\"true\">", "</div>"],
-  _tmpl$9 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
-  _tmpl$0 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
-  _tmpl$1 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea></div>", "<footer class=\"k2b-chat-composer__footer\">", "</footer></section></div>"],
-  _tmpl$10 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
-  _tmpl$11 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$12 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
-  _tmpl$13 = ["<img", ">"],
-  _tmpl$14 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
-  _tmpl$15 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$16 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
-  _tmpl$17 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
-  _tmpl$18 = ["<span class=\"", "\">", "</span>"],
-  _tmpl$19 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$20 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
-  _tmpl$21 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "</div>"];
+  _tmpl$8 = ["<div class=\"k2b-chat-composer__highlight\" aria-hidden=\"true\">", "\n</div>"],
+  _tmpl$9 = ["<div class=\"k2b-chat-composer__error\" role=\"alert\"><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i>", "</div>"],
+  _tmpl$0 = ["<div class=\"k2b-chat-composer-shell\">", "<section class=\"", "\"", " role=\"group\"", ">", "<div class=\"k2b-chat-composer__input\" role=\"group\"", ">", "<textarea class=\"", "\" rows=\"1\"", "", "></textarea></div>", "<footer class=\"k2b-chat-composer__footer\">", "</footer>", "</section></div>"],
+  _tmpl$1 = ["<button id=\"", "\" type=\"button\" role=\"option\" tabindex=\"-1\"", "><i", " aria-hidden=\"true\"></i><strong>", "</strong><small>", "</small></button>"],
+  _tmpl$10 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-remove\"", "", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$11 = ["<div class=\"k2b-chat-composer__attachment\" role=\"listitem\"><div class=\"", "\">", "", "</div>", "</div>"],
+  _tmpl$12 = ["<img", ">"],
+  _tmpl$13 = ["<div class=\"k2b-chat-composer__attachment-identity\">", "", "</div>"],
+  _tmpl$14 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$15 = ["<a class=\"k2b-chat-composer__attachment-link\"", " target=\"_blank\" rel=\"noopener noreferrer\"", ">", "", "</a>"],
+  _tmpl$16 = ["<button type=\"button\" class=\"k2b-chat-composer__attachment-action\"", ">", "", "</button>"],
+  _tmpl$17 = ["<span class=\"", "\">", "</span>"],
+  _tmpl$18 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$19 = ["<input class=\"k2b-sr-only\" type=\"file\" tabindex=\"-1\" aria-hidden=\"true\"", "", ">"],
+  _tmpl$20 = ["<div class=\"k2b-chat-composer__tools\">", "", "", "", "", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-chat-composer__submit\">", "", "", "", "</div>"];
 import { children, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Dropdown } from "../actions/Dropdown";
 import { Tooltip } from "../feedback/Tooltip";
+import { FileDropTarget } from "../inputs/FileDropTarget";
 import { SelectChip } from "../inputs/SelectChip";
 import { useUiMessages } from "../intl/messages";
 import { ChatContextUsage as ContextUsage } from "./ChatPrimitives";
@@ -47,7 +47,6 @@ export function ChatComposer(props) {
   const messages = useUiMessages();
   const commandListId = `k2b-chat-commands-${createUniqueId().replace(/[^A-Za-z0-9_-]/g, "-")}`;
   const [selectedCommandIndex, setSelectedCommandIndex] = createSignal(0);
-  const [dragActive, setDragActive] = createSignal(false);
   const [addingFiles, setAddingFiles] = createSignal(false);
   const [submitting, setSubmitting] = createSignal(false);
   let composerRef;
@@ -381,7 +380,7 @@ export function ChatComposer(props) {
       void submit();
     }
   };
-  return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
     get when() {
       return commandsOpen() || hasAccessory();
     },
@@ -395,7 +394,7 @@ export function ChatComposer(props) {
             get each() {
               return commandMatches();
             },
-            children: (command, index) => _$ssr(_tmpl$10, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
+            children: (command, index) => _$ssr(_tmpl$1, `${_$escape(commandListId, true)}-${_$escape(index(), true)}`, _$ssrAttribute("aria-selected", _$escape(index(), true) === _$escape(selectedCommandIndex(), true), false) + _$ssrAttribute("aria-disabled", _$escape(command.disabled, true), false) + _$ssrAttribute("data-active", index() === selectedCommandIndex() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(command.icon ?? "ti ti-slash", true), false), _$escape(command.label ?? `/${command.name}`), _$escape(command.description))
           })), _$escape(_$createComponent(Show, {
             get when() {
               return searching();
@@ -421,7 +420,7 @@ export function ChatComposer(props) {
         }
       })));
     }
-  })), `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drag-active", dragActive() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
+  })), `k2b-chat-composer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-running", running() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().messageComposer, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return attachments().length > 0;
     },
@@ -430,52 +429,52 @@ export function ChatComposer(props) {
         get each() {
           return attachments();
         },
-        children: attachment => _$ssr(_tmpl$12, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
+        children: attachment => _$ssr(_tmpl$11, `k2b-chat-composer__attachment-content ${Boolean(attachment.action) ? "k2b-chat-composer__attachment-content--action" : ""}`, _$escape(_$createComponent(Show, {
           get when() {
             return attachment.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$14, _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$13, _$escape(_$createComponent(Show, {
               get when() {
                 return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
               },
               get fallback() {
-                return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+                return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
               },
               get children() {
-                return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+                return _$ssr(_tmpl$12, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
               }
             })), _$escape(renderAttachmentCopy(attachment)));
           },
-          children: href => _$ssr(_tmpl$16, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
+          children: href => _$ssr(_tmpl$15, _$ssrAttribute("href", _$escape(href(), true), false), _$ssrAttribute("aria-label", _$escape(messages().openInNewTab({
             name: attachment.name
           }), true), false), _$escape(_$createComponent(Show, {
             get when() {
               return _$memo(() => attachment.kind === "image")() && attachment.previewUrl;
             },
             get fallback() {
-              return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
+              return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(attachmentIcon(attachment), true), false));
             },
             get children() {
-              return _$ssr(_tmpl$13, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
+              return _$ssr(_tmpl$12, _$ssrAttribute("src", _$escape(attachment.previewUrl, true), false) + _$ssrAttribute("alt", _$escape(attachment.alt ?? "", true), false));
             }
           })), _$escape(renderAttachmentCopy(attachment)))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return attachment.action;
           },
-          children: action => _$ssr(_tmpl$17, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
+          children: action => _$ssr(_tmpl$16, _$ssrAttribute("disabled", blocked() || action().disabled, true), _$escape(_$createComponent(Show, {
             get when() {
               return action().icon;
             },
-            children: icon => _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(icon(), true), false))
+            children: icon => _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(icon(), true), false))
           })), _$escape(action().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return props.onAttachmentsChange;
           },
           get children() {
-            return _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
+            return _$ssr(_tmpl$10, _$ssrAttribute("aria-label", _$escape(messages().removeNamed({
               name: attachment.name
             }), true), false), _$ssrAttribute("disabled", blocked(), true));
           }
@@ -483,22 +482,15 @@ export function ChatComposer(props) {
       })));
     }
   })), _$ssrAttribute("aria-label", _$escape(messages().messageInput, true), false), _$escape(_$createComponent(Show, {
-    get when() {
-      return dragActive();
-    },
-    get children() {
-      return _$ssr(_tmpl$8, _$escape(messages().dropFilesToAttach));
-    }
-  })), _$escape(_$createComponent(Show, {
     get when() {
       return mentions().length > 0;
     },
     get children() {
-      return _$ssr(_tmpl$9, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$8, _$escape(_$createComponent(For, {
         get each() {
           return chatMentionSegments(props.value, mentions());
         },
-        children: part => _$ssr(_tmpl$18, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
+        children: part => _$ssr(_tmpl$17, Boolean(part.mention) ? "k2b-chat-composer__mention" : "", _$escape(part.text))
       })));
     }
   })), mentions().length > 0 ? "k2b-chat-composer__textarea--highlighted" : "", _$ssrAttribute("value", _$escape(props.value, true), false), _$ssrAttribute("disabled", blocked(), true) + _$ssrAttribute("placeholder", _$escape(props.placeholder ?? (running() ? messages().addGuidance : messages().writeMessage), true), false) + _$ssrAttribute("aria-label", _$escape(props.inputLabel ?? messages().message, true), false) + _$ssrAttribute("role", commandsOpen() ? "combobox" : _$escape(undefined, true), false) + _$ssrAttribute("aria-autocomplete", commandsOpen() ? "list" : _$escape(undefined, true), false) + _$ssrAttribute("aria-controls", commandsOpen() ? _$escape(commandListId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-expanded", commandsOpen() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-activedescendant", selectedCommand() ? `${_$escape(commandListId, true)}-${_$escape(selectedCommandIndex(), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
@@ -506,14 +498,14 @@ export function ChatComposer(props) {
       return props.error;
     },
     get children() {
-      return _$ssr(_tmpl$0, _$escape(props.error));
+      return _$ssr(_tmpl$9, _$escape(props.error));
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.footerContent;
     },
     get fallback() {
-      return [_$ssr(_tmpl$21, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
+      return [_$ssr(_tmpl$20, _$escape(props.footerTools), _$escape(_$createComponent(Show, {
         get when() {
           return hasAddMenu();
         },
@@ -540,7 +532,7 @@ export function ChatComposer(props) {
                   return messages().addToChat;
                 },
                 get children() {
-                  return _$ssr(_tmpl$19);
+                  return _$ssr(_tmpl$18);
                 }
               });
             }
@@ -551,7 +543,7 @@ export function ChatComposer(props) {
           return props.fileSelection;
         },
         get children() {
-          return _$ssr(_tmpl$20, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
+          return _$ssr(_tmpl$19, _$ssrAttribute("accept", _$escape(props.fileSelection?.accept, true), false), _$ssrAttribute("multiple", props.fileSelection?.multiple ?? true, true));
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
@@ -587,7 +579,7 @@ export function ChatComposer(props) {
             }
           });
         }
-      })), _$escape(props.modelDetails)), _$ssr(_tmpl$22, _$escape(_$createComponent(For, {
+      })), _$escape(props.modelDetails)), _$ssr(_tmpl$21, _$escape(_$createComponent(For, {
         get each() {
           return props.contextActions;
         },
@@ -611,7 +603,7 @@ export function ChatComposer(props) {
           },
           onClick: () => reportChatFailure(() => executeChatAction(action), props.onError),
           get children() {
-            return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false));
+            return _$ssr(_tmpl$14, _$ssrAttribute("class", _$escape(action.icon ?? "ti ti-dots", true), false));
           }
         })
       })), _$escape(_$createComponent(Show, {
@@ -645,7 +637,7 @@ export function ChatComposer(props) {
             },
             onClick: () => void submit(),
             get children() {
-              return _$ssr(_tmpl$15, _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up", false));
+              return _$ssr(_tmpl$14, _$ssrAttribute("class", submitting() ? "ti ti-loader-2 k2b-spin" : "ti ti-arrow-up", false));
             }
           });
         },
@@ -664,13 +656,32 @@ export function ChatComposer(props) {
             },
             onClick: () => reportChatFailure(() => props.onStop?.(), props.onError),
             get children() {
-              return _$ssr(_tmpl$15, _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
+              return _$ssr(_tmpl$14, _$ssrAttribute("class", stopping() ? "ti ti-loader-2 k2b-spin" : "ti ti-player-stop", false));
             }
           });
         }
       })))];
     },
     children: content => content()
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.fileSelection;
+    },
+    children: selection => _$createComponent(FileDropTarget, {
+      get label() {
+        return messages().dropFilesToAttach;
+      },
+      get accept() {
+        return selection().accept;
+      },
+      get multiple() {
+        return selection().multiple;
+      },
+      get disabled() {
+        return !canSelectFiles();
+      },
+      onDrop: files => void runFiles(files)
+    })
   })));
 }
 //# sourceMappingURL=ChatComposer.js.map