@k2b/ui 0.46.0 → 0.48.0

package/dist/ssr/layout/AppWorkspaceSidebarItemStatus.js

@@ -0,0 +1,76 @@
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
+  _tmpl$2 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
+  _tmpl$3 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
+  _tmpl$4 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
+  _tmpl$7 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>";
+import { Show } from "solid-js";
+import { useWorkspaceMessages } from "./workspace-messages";
+
+/**
+ * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
+ * so the row keeps its height and the label its start in every state.
+ */
+
+export const AppWorkspaceSidebarItemStatus = props => {
+  const workspaceMessages = useWorkspaceMessages();
+  const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
+  const count = () => waiting() ?? (typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0);
+  const dot = () => waiting() === null && props.unread === true;
+  // The marks are decorative; the row's accessible name gets one phrase instead,
+  // which says no more than the "99+" a capped count shows.
+  const description = () => [waiting() !== null ? props.waiting?.label ?? "" : count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
+    count: count()
+  }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
+  // The unread slot stays reserved at the end, and the marks that change most
+  // often sit outermost, so new activity or a mention never moves another mark.
+  // The element itself stays when there is nothing to show: empty, it takes no
+  // space, and it still keeps the row's label on one line, so the first count
+  // never re-wraps the label and moves the rows below.
+  return _$ssr(_tmpl$6, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false) + _$ssrAttribute("data-muted", props.muted ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return description();
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return props.mention;
+        },
+        get children() {
+          return _$ssr(_tmpl$);
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return props.muted;
+        },
+        get children() {
+          return _$ssr(_tmpl$2);
+        }
+      }), _$ssr(_tmpl$4, _$escape(_$createComponent(Show, {
+        get when() {
+          return count() || waiting() === 0;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return dot();
+            },
+            get children() {
+              return _$ssr(_tmpl$7);
+            }
+          });
+        },
+        get children() {
+          return _$ssr(_tmpl$3, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
+        }
+      }))), _$ssr(_tmpl$5, _$escape(description()))];
+    }
+  })));
+};
+//# sourceMappingURL=AppWorkspaceSidebarItemStatus.js.map

package/dist/ssr/layout/AppWorkspaceSidebarItemStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/AppWorkspaceSidebarItemStatus.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { useWorkspaceMessages } from \"./workspace-messages\";\n\n/**\n * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,\n * so the row keeps its height and the label its start in every state.\n */\nexport type AppWorkspaceSidebarItemStatusProps = {\n  /**\n   * A positive number shows a count (above 99 as \"99+\") and sets the label in\n   * a stronger weight; `true` shows a quiet dot for new activity that should\n   * not draw attention, such as in a muted conversation.\n   */\n  unread?: number | boolean;\n  /** Marks unread items that mention the person with \"@\". */\n  mention?: boolean;\n  /**\n   * Shows a muted bell, and the item reads as set aside: its label in the muted ink without unread weight, and a\n   * mention count without its fill.\n   */\n  muted?: boolean;\n  /**\n   * Items that wait for the person, such as requests to approve, in the unread slot instead of `unread`. `label` is\n   * the phrase a screen reader hears, for example \"3 waiting\". `0` stays as a muted count, for a count that dropped\n   * to zero while the row is still shown; leave the prop out when nothing waits.\n   */\n  waiting?: { count: number; label: string };\n};\nexport const AppWorkspaceSidebarItemStatus = (props: AppWorkspaceSidebarItemStatusProps): JSX.Element => {\n  const workspaceMessages = useWorkspaceMessages();\n  const waiting = () => (props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null);\n  const count = () => waiting() ?? (typeof props.unread === \"number\" && props.unread >= 1 ? Math.floor(props.unread) : 0);\n  const dot = () => waiting() === null && props.unread === true;\n  // The marks are decorative; the row's accessible name gets one phrase instead,\n  // which says no more than the \"99+\" a capped count shows.\n  const description = () =>\n    [\n      waiting() !== null\n        ? (props.waiting?.label ?? \"\")\n        : count() > 99\n          ? workspaceMessages().sidebarUnreadMany\n          : count()\n            ? workspaceMessages().sidebarUnread({ count: count() })\n            : dot()\n              ? workspaceMessages().sidebarNewActivity\n              : \"\",\n      props.mention ? workspaceMessages().sidebarMentioned : \"\",\n      props.muted ? workspaceMessages().sidebarMuted : \"\",\n    ]\n      .filter(Boolean)\n      .join(\", \");\n  // The unread slot stays reserved at the end, and the marks that change most\n  // often sit outermost, so new activity or a mention never moves another mark.\n  // The element itself stays when there is nothing to show: empty, it takes no\n  // space, and it still keeps the row's label on one line, so the first count\n  // never re-wraps the label and moves the rows below.\n  return (\n    <span\n      class=\"k2b-app-workspace__sidebar-status\"\n      data-unread={waiting() !== null ? undefined : count() ? \"count\" : dot() ? \"dot\" : undefined}\n      data-waiting={waiting() === null ? undefined : waiting() ? \"count\" : \"zero\"}\n      data-muted={props.muted ? \"true\" : undefined}\n    >\n      <Show when={description()}>\n        <Show when={props.mention}>\n          <span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">\n            @\n          </span>\n        </Show>\n        <Show when={props.muted}>\n          <span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\">\n            <i class=\"ti ti-bell-off\" />\n          </span>\n        </Show>\n        <span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">\n          <Show\n            when={count() || waiting() === 0}\n            fallback={\n              <Show when={dot()}>\n                <span class=\"k2b-app-workspace__sidebar-status-dot\" />\n              </Show>\n            }\n          >\n            <span class=\"k2b-app-workspace__sidebar-status-count\" data-mention={props.mention ? \"true\" : undefined}>\n              {count() > 99 ? \"99+\" : count()}\n            </span>\n          </Show>\n        </span>\n        <span class=\"k2b-sr-only\">, {description()}</span>\n      </Show>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,SAAS,oBAAoB,QAAQ,sBAAsB;;AAE3D;AACA;AACA;AACA;;AAsBA,OAAO,MAAM,6BAA6B,GAAI,KAAyC,IAAkB;EACvG,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,MAAO,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,IAAK;EACnI,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,CAAC,KAAK,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;EACvH,MAAM,GAAG,GAAG,MAAM,OAAO,CAAC,CAAC,KAAK,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI;EAC7D;EACA;EACA,MAAM,WAAW,GAAG,MAClB,CACE,OAAO,CAAC,CAAC,KAAK,IAAI,GACb,KAAK,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,GAC3B,KAAK,CAAC,CAAC,GAAG,EAAE,GACV,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,GACrC,KAAK,CAAC,CAAC,GACL,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;EAAE,CAAC,CAAC,GACrD,GAAG,CAAC,CAAC,GACH,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,GACtC,EAAE,EACZ,KAAK,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,GAAG,EAAE,EACzD,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,YAAY,GAAG,EAAE,CACpD,CACE,MAAM,CAAC,OAAO,CAAC,CACf,IAAI,CAAC,IAAI,CAAC;EACf;EACA;EACA;EACA;EACA;EACA,oDAGiB,OAAO,CAAC,CAAC,KAAK,IAAI,YAAG,SAAS,UAAG,KAAK,CAAC,CAAC,GAAG,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,KAAK,YAAG,SAAS,iDAC7E,OAAO,CAAC,CAAC,KAAK,IAAI,YAAG,SAAS,UAAG,OAAO,CAAC,CAAC,GAAG,OAAO,GAAG,MAAM,wCAC/D,KAAK,CAAC,KAAK,GAAG,MAAM,YAAG,SAAS,4CAE3C,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,WAAW,CAAC,CAAC;IAAA;IAAA;MAAA,0BACtB,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,OAAO;QAAA;QAAA;UAAA;QAAA;MAAA,sBAKxB,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA;UAAA;QAAA;MAAA,8CAMpB,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,KAAK,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,KAAK,CAAC;QAAA;QAAA,IAChC,QAAQ;UAAA,yBACL,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,GAAG,CAAC,CAAC;YAAA;YAAA;cAAA;YAAA;UAAA;QAAA;QAAA;UAAA,qDAKiD,KAAK,CAAC,OAAO,GAAG,MAAM,YAAG,SAAS,iBACnG,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,YAAG,KAAK,CAAC,CAAC;QAAA;MAAA,8BAIR,WAAW,CAAC,CAAC;IAAA;EAAA;AAIlD,CAAC","ignoreList":[]}

package/dist/ssr/layout/DetailPanel.js

@@ -523,7 +523,7 @@ const DetailPanelSection = props => {
         get children() {
           return _$ssr(_tmpl$29);
         }
-      })), _$ssrAttribute("id", _$escape(bodyId, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children));
+      })), _$ssrAttribute("id", _$escape(bodyId, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(resolved()));
     }
   });
 };

package/dist/ssr/layout/DetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { useDetailPanelMessages } from \"./detail-panel-messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n  /** Plain sections share their host surface, as in AppWorkspace.Detail. */\n  surface?: \"default\" | \"plain\";\n  children: JSX.Element;\n  class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n  /** A short line above the title that names what is shown, such as \"Conversation\", followed by its state. */\n  kind?: JSX.Element;\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  meta?: JSX.Element;\n  /**\n   * The resource's \"…\" menu, shown before `actions`. Pass every less frequent command on the shown resource here,\n   * so each panel opens its menu from the same place; an empty list shows no button.\n   */\n  menu?: readonly DropdownItem[];\n  /** Accessible name of the \"…\" button. Defaults to \"More actions\". */\n  menuLabel?: string;\n  actions?: JSX.Element;\n  primaryActions?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n  (\n    | {\n        leading?: JSX.Element;\n        icon?: never;\n      }\n    | {\n        leading?: never;\n        icon?: string;\n      }\n  );\n\nexport type DetailPanelBodyProps = {\n  scrollFade?: boolean;\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n  class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n  title: JSX.Element;\n  children: JSX.Element;\n  actions?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n  children: JSX.Element;\n  label?: string;\n  /**\n   * A visible quiet title, such as \"More about this conversation\". Its sections then stand flush as rows below\n   * it, which suits collapsed secondary sections with a `summary`.\n   */\n  title?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n  title: JSX.Element;\n  icon?: string;\n  tone?: DetailPanelTone;\n  description?: JSX.Element;\n  /** How many things the section lists, as a chip after the title; `0` reads \"None yet\". */\n  count?: number;\n  /** Short state after the title, such as \"2 of 4 done\". */\n  meta?: JSX.Element;\n  class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n  /** Icon class, for example `ti ti-trash`. */\n  icon: string;\n  /** Accessible name and tooltip of the icon button. */\n  label: string;\n  onClick: () => void;\n  variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  leading?: JSX.Element;\n  trailing?: JSX.Element;\n  secondaryAction?: DetailPanelActionSecondary;\n  /** Marks the row of the current place, such as the section in view, in the panel's accent. */\n  current?: boolean;\n  /** Lets the title wrap to two lines instead of ending with an ellipsis. */\n  wrap?: boolean;\n  class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n  | {\n      menuItems?: never;\n      menuLabel?: never;\n    }\n  | {\n      menuItems: readonly DropdownItem[];\n      menuLabel: string;\n    };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n  DetailPanelActionMenuProps &\n  Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n    href: string;\n  };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n  DetailPanelActionMenuProps &\n  Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n    href?: never;\n  };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\n/** A row that only shows something, such as a person and their role: the columns of an action, without a command. */\nexport type DetailPanelRowProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  leading?: JSX.Element;\n  trailing?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n  (\n    | {\n        children?: JSX.Element;\n        actions?: JSX.Element;\n        collapsible?: false;\n        summary?: never;\n        defaultOpen?: never;\n        open?: never;\n        onOpenChange?: never;\n        disabled?: never;\n      }\n    | {\n        children: JSX.Element;\n        actions?: never;\n        collapsible: true;\n        /** One line that says what the closed section holds, such as its newest entry; hidden while open. */\n        summary?: JSX.Element;\n        defaultOpen?: boolean;\n        open?: boolean;\n        onOpenChange?: (open: boolean) => void;\n        disabled?: boolean;\n      }\n  );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n  Header: (props: DetailPanelHeaderProps) => JSX.Element;\n  Body: (props: DetailPanelBodyProps) => JSX.Element;\n  Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n  Group: (props: DetailPanelGroupProps) => JSX.Element;\n  Section: (props: DetailPanelSectionProps) => JSX.Element;\n  Action: (props: DetailPanelActionProps) => JSX.Element;\n  Row: (props: DetailPanelRowProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst showTruncatedTitle = (event: PointerEvent & { currentTarget: HTMLHeadingElement }) => {\n  const heading = event.currentTarget;\n  if (heading.scrollHeight > heading.clientHeight + 1) heading.title = heading.textContent ?? \"\";\n  else heading.removeAttribute(\"title\");\n};\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => {\n  const t = useDetailPanelMessages();\n  const menuLabel = () => props.menuLabel ?? t().moreActions;\n  const menuTrigger = () => (\n    <Dropdown.Root items={props.menu ?? []} align=\"end\" label={menuLabel()} phone=\"sheet\">\n      <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={menuLabel()} tooltip={menuLabel()}>\n        <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n      </Dropdown.Trigger>\n    </Dropdown.Root>\n  );\n  // With primary actions, \"…\" ends their row, next to the commands it extends; otherwise it sits beside close.\n  const menuInActions = () => Boolean(props.menu?.length) && !props.primaryActions;\n  return (\n    <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n      <div class=\"k2b-detail-panel__header-main\" data-identity={props.icon || props.leading ? \"true\" : undefined}>\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <Show when={props.leading}>\n          <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n        </Show>\n        <div class=\"k2b-detail-panel__heading\">\n          <Show when={props.kind}>\n            <div class=\"k2b-detail-panel__kind\">{props.kind}</div>\n          </Show>\n          {/* A long title wraps to two lines and ends with an ellipsis; then the native hint shows all of it. */}\n          <h2 onPointerEnter={showTruncatedTitle}>{props.title}</h2>\n          <Show when={props.subtitle || props.meta}>\n            <div class=\"k2b-detail-panel__supporting\">\n              <Show when={props.subtitle}>\n                <p>{props.subtitle}</p>\n              </Show>\n              <Show when={props.meta}>\n                <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n              </Show>\n            </div>\n          </Show>\n        </div>\n        <Show when={menuInActions() || props.actions}>\n          <div class=\"k2b-detail-panel__actions\">\n            <Show when={menuInActions()}>{menuTrigger()}</Show>\n            {props.actions}\n          </div>\n        </Show>\n      </div>\n      <Show when={props.primaryActions}>\n        <div class=\"k2b-detail-panel__primary-actions\">\n          {props.primaryActions}\n          <Show when={props.menu?.length}>{menuTrigger()}</Show>\n        </div>\n      </Show>\n    </header>\n  );\n};\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n  let body!: HTMLDivElement;\n  createScrollFade(\n    () => body,\n    () => props.scrollFade !== false,\n  );\n  return (\n    <div\n      ref={body}\n      class={classNames(\"k2b-detail-panel__body\", props.class)}\n      data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n      data-scroll-preserve={props.scrollPreserveKey}\n    >\n      {props.children}\n    </div>\n  );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n  const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n  return (\n    <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n      <header class=\"k2b-detail-panel__summary-header\">\n        <h3 id={headingId}>{props.title}</h3>\n        <Show when={props.actions}>\n          <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n    </section>\n  );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => {\n  const titleId = `k2b-detail-panel-group-${createUniqueId()}`;\n  return (\n    <div\n      class={classNames(\"k2b-detail-panel__group\", props.class)}\n      role=\"group\"\n      aria-label={props.title ? undefined : props.label}\n      aria-labelledby={props.title ? titleId : undefined}\n      data-titled={props.title ? \"true\" : undefined}\n    >\n      <Show when={props.title}>\n        <div class=\"k2b-detail-panel__group-title\" id={titleId}>\n          {props.title}\n        </div>\n      </Show>\n      {props.children}\n    </div>\n  );\n};\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n  <Show when={props.icon}>\n    {(icon) => (\n      <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n        <i class={icon()} />\n      </span>\n    )}\n  </Show>\n);\n\n/** A count chip, or \"None yet\" for zero; shared by sections and discussions. */\nexport const DetailPanelCount = (props: { count: number }): JSX.Element => {\n  const messages = useDetailPanelMessages();\n  return (\n    <Show when={props.count > 0} fallback={<span class=\"k2b-detail-panel__none\">{messages().noneYet}</span>}>\n      <span class=\"k2b-count-chip\">{props.count}</span>\n    </Show>\n  );\n};\n\n/** Title, then its count and state right after it, so every section reads the same way. */\nconst SectionTitleMeta = (props: Pick<DetailPanelSectionBaseProps, \"count\" | \"meta\">): JSX.Element => (\n  <>\n    <Show when={props.count !== undefined}>\n      <DetailPanelCount count={props.count ?? 0} />\n    </Show>\n    <Show when={props.meta}>\n      <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n    </Show>\n  </>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n  <>\n    {/* Hidden while empty: a row's icon, or its text when it has none, starts on the section's text edge. */}\n    <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n    <span class=\"k2b-detail-panel__action-copy\">\n      <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n      <Show when={props.description}>\n        <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n      </Show>\n    </span>\n    <Show when={props.trailing}>\n      <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n    </Show>\n  </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"current\",\n    \"description\",\n    \"href\",\n    \"leading\",\n    \"menuItems\",\n    \"menuLabel\",\n    \"secondaryAction\",\n    \"title\",\n    \"trailing\",\n    \"wrap\",\n  ]);\n  const className = classNames(\"k2b-detail-panel__action\", local.class);\n  const content = () => (\n    <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n  );\n\n  const action = () => (\n    <Show\n      when={local.href !== undefined}\n      fallback={\n        <Button\n          {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n          class={className}\n          aria-current={local.current ? \"true\" : undefined}\n          data-current={local.current ? \"true\" : undefined}\n          data-wrap={local.wrap ? \"true\" : undefined}\n          variant=\"ghost\"\n          size=\"sm\"\n        >\n          {content()}\n        </Button>\n      }\n    >\n      <ButtonLink\n        {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n        href={local.href as string}\n        class={className}\n        aria-current={local.current ? \"location\" : undefined}\n        data-current={local.current ? \"true\" : undefined}\n        data-wrap={local.wrap ? \"true\" : undefined}\n        variant=\"ghost\"\n        size=\"sm\"\n      >\n        {content()}\n      </ButtonLink>\n    </Show>\n  );\n\n  return (\n    <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n      <div class=\"k2b-detail-panel__action-row\">\n        {action()}\n        <Show when={local.secondaryAction}>\n          {(secondary) => (\n            <IconButton\n              size=\"sm\"\n              variant=\"ghost\"\n              label={secondary().label}\n              class=\"k2b-detail-panel__action-secondary\"\n              data-tone={secondary().variant}\n              onClick={() => secondary().onClick()}\n            >\n              <i class={secondary().icon} aria-hidden=\"true\" />\n            </IconButton>\n          )}\n        </Show>\n        <Show when={local.menuItems?.length}>\n          <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n            <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n              <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n            </Dropdown.Trigger>\n          </Dropdown.Root>\n        </Show>\n      </div>\n    </Show>\n  );\n};\n\nconst DetailPanelRow = (props: DetailPanelRowProps): JSX.Element => (\n  <div class={classNames(\"k2b-detail-panel__row\", props.class)}>\n    <DetailPanelActionContent title={props.title} description={props.description} leading={props.leading} trailing={props.trailing} />\n  </div>\n);\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n  const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n  const bodyId = `${headingId}-body`;\n  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n  const open = () => props.open ?? internalOpen();\n  let expand: HTMLButtonElement | undefined;\n  let collapse: HTMLButtonElement | undefined;\n  let body: HTMLDivElement | undefined;\n  const toggle = (next: boolean) => {\n    if (props.disabled) return;\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n  createEffect(() => {\n    const expanded = open();\n    // Restore focus only when its current control becomes hidden, including\n    // a parent-controlled collapse while focus is inside an editor.\n    queueMicrotask(() => {\n      if (expanded !== open()) return;\n      const active = expand?.ownerDocument.activeElement;\n      if (expanded && active === expand) collapse?.focus();\n      if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n    });\n  });\n  const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n  // Resolve once: reading `props.children` twice would instantiate the section body twice.\n  const resolved = children(() => props.children);\n\n  return (\n    <Show\n      when={props.collapsible}\n      fallback={\n        <section class={className()} aria-labelledby={headingId} data-icon={props.icon ? \"true\" : undefined}>\n          <header class=\"k2b-detail-panel__section-header\">\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <div class=\"k2b-detail-panel__section-copy\">\n              <div class=\"k2b-detail-panel__section-heading\">\n                <h3 id={headingId}>{props.title}</h3>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n              </div>\n              <Show when={props.description}>\n                <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n              </Show>\n            </div>\n            <Show when={props.actions}>\n              <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n            </Show>\n          </header>\n          <Show when={resolved()}>\n            <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n          </Show>\n        </section>\n      }\n    >\n      <section\n        class={className()}\n        aria-labelledby={open() ? headingId : `${headingId}-closed`}\n        data-open={open()}\n        data-icon={props.icon ? \"true\" : undefined}\n        data-summary={props.summary ? \"true\" : undefined}\n      >\n        <div hidden={open()}>\n          <Button\n            ref={expand}\n            variant=\"ghost\"\n            class=\"k2b-detail-panel__section-summary\"\n            disabled={props.disabled}\n            aria-expanded={false}\n            aria-controls={bodyId}\n            onClick={() => toggle(true)}\n          >\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <span class=\"k2b-detail-panel__section-copy\">\n              <span class=\"k2b-detail-panel__section-heading\">\n                <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n                  {props.title}\n                </span>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n                <Show when={props.summary}>\n                  <span class=\"k2b-detail-panel__section-preview k2b-truncate-fade\">{props.summary}</span>\n                </Show>\n              </span>\n              <Show when={props.description}>\n                <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n              </Show>\n            </span>\n            {/* Same column as the open header's collapse button, so nothing moves between the states. */}\n            <span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\">\n              <i class=\"ti ti-chevron-down\" />\n            </span>\n          </Button>\n        </div>\n        <div hidden={!open()}>\n          <header class=\"k2b-detail-panel__section-header\">\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <div class=\"k2b-detail-panel__section-copy\">\n              <div class=\"k2b-detail-panel__section-heading\">\n                <h3 id={headingId}>{props.title}</h3>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n              </div>\n              <Show when={props.description}>\n                <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n              </Show>\n            </div>\n            <Button\n              ref={collapse}\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"k2b-detail-panel__section-toggle\"\n              disabled={props.disabled}\n              aria-labelledby={headingId}\n              aria-expanded={true}\n              aria-controls={bodyId}\n              onClick={() => toggle(false)}\n            >\n              <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n            </Button>\n          </header>\n        </div>\n        <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n          {props.children}\n        </div>\n      </section>\n    </Show>\n  );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n  <div class={classNames(\"k2b-detail-panel\", props.class)} data-surface={props.surface}>\n    {props.children}\n  </div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\nDetailPanel.Row = DetailPanelRow;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { useDetailPanelMessages } from \"./detail-panel-messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n  /** Plain sections share their host surface, as in AppWorkspace.Detail. */\n  surface?: \"default\" | \"plain\";\n  children: JSX.Element;\n  class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n  /** A short line above the title that names what is shown, such as \"Conversation\", followed by its state. */\n  kind?: JSX.Element;\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  meta?: JSX.Element;\n  /**\n   * The resource's \"…\" menu, shown before `actions`. Pass every less frequent command on the shown resource here,\n   * so each panel opens its menu from the same place; an empty list shows no button.\n   */\n  menu?: readonly DropdownItem[];\n  /** Accessible name of the \"…\" button. Defaults to \"More actions\". */\n  menuLabel?: string;\n  actions?: JSX.Element;\n  primaryActions?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n  (\n    | {\n        leading?: JSX.Element;\n        icon?: never;\n      }\n    | {\n        leading?: never;\n        icon?: string;\n      }\n  );\n\nexport type DetailPanelBodyProps = {\n  scrollFade?: boolean;\n  children: JSX.Element;\n  scrollPreserveKey?: string;\n  class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n  title: JSX.Element;\n  children: JSX.Element;\n  actions?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n  children: JSX.Element;\n  label?: string;\n  /**\n   * A visible quiet title, such as \"More about this conversation\". Its sections then stand flush as rows below\n   * it, which suits collapsed secondary sections with a `summary`.\n   */\n  title?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n  title: JSX.Element;\n  icon?: string;\n  tone?: DetailPanelTone;\n  description?: JSX.Element;\n  /** How many things the section lists, as a chip after the title; `0` reads \"None yet\". */\n  count?: number;\n  /** Short state after the title, such as \"2 of 4 done\". */\n  meta?: JSX.Element;\n  class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n  /** Icon class, for example `ti ti-trash`. */\n  icon: string;\n  /** Accessible name and tooltip of the icon button. */\n  label: string;\n  onClick: () => void;\n  variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  leading?: JSX.Element;\n  trailing?: JSX.Element;\n  secondaryAction?: DetailPanelActionSecondary;\n  /** Marks the row of the current place, such as the section in view, in the panel's accent. */\n  current?: boolean;\n  /** Lets the title wrap to two lines instead of ending with an ellipsis. */\n  wrap?: boolean;\n  class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n  | {\n      menuItems?: never;\n      menuLabel?: never;\n    }\n  | {\n      menuItems: readonly DropdownItem[];\n      menuLabel: string;\n    };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n  DetailPanelActionMenuProps &\n  Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n    href: string;\n  };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n  DetailPanelActionMenuProps &\n  Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n    href?: never;\n  };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\n/** A row that only shows something, such as a person and their role: the columns of an action, without a command. */\nexport type DetailPanelRowProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  leading?: JSX.Element;\n  trailing?: JSX.Element;\n  class?: string;\n};\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n  (\n    | {\n        children?: JSX.Element;\n        actions?: JSX.Element;\n        collapsible?: false;\n        summary?: never;\n        defaultOpen?: never;\n        open?: never;\n        onOpenChange?: never;\n        disabled?: never;\n      }\n    | {\n        children: JSX.Element;\n        actions?: never;\n        collapsible: true;\n        /** One line that says what the closed section holds, such as its newest entry; hidden while open. */\n        summary?: JSX.Element;\n        defaultOpen?: boolean;\n        open?: boolean;\n        onOpenChange?: (open: boolean) => void;\n        disabled?: boolean;\n      }\n  );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n  Header: (props: DetailPanelHeaderProps) => JSX.Element;\n  Body: (props: DetailPanelBodyProps) => JSX.Element;\n  Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n  Group: (props: DetailPanelGroupProps) => JSX.Element;\n  Section: (props: DetailPanelSectionProps) => JSX.Element;\n  Action: (props: DetailPanelActionProps) => JSX.Element;\n  Row: (props: DetailPanelRowProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst showTruncatedTitle = (event: PointerEvent & { currentTarget: HTMLHeadingElement }) => {\n  const heading = event.currentTarget;\n  if (heading.scrollHeight > heading.clientHeight + 1) heading.title = heading.textContent ?? \"\";\n  else heading.removeAttribute(\"title\");\n};\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => {\n  const t = useDetailPanelMessages();\n  const menuLabel = () => props.menuLabel ?? t().moreActions;\n  const menuTrigger = () => (\n    <Dropdown.Root items={props.menu ?? []} align=\"end\" label={menuLabel()} phone=\"sheet\">\n      <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={menuLabel()} tooltip={menuLabel()}>\n        <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n      </Dropdown.Trigger>\n    </Dropdown.Root>\n  );\n  // With primary actions, \"…\" ends their row, next to the commands it extends; otherwise it sits beside close.\n  const menuInActions = () => Boolean(props.menu?.length) && !props.primaryActions;\n  return (\n    <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n      <div class=\"k2b-detail-panel__header-main\" data-identity={props.icon || props.leading ? \"true\" : undefined}>\n        <Show when={props.icon}>\n          {(icon) => (\n            <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n              <i class={icon()} />\n            </span>\n          )}\n        </Show>\n        <Show when={props.leading}>\n          <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n        </Show>\n        <div class=\"k2b-detail-panel__heading\">\n          <Show when={props.kind}>\n            <div class=\"k2b-detail-panel__kind\">{props.kind}</div>\n          </Show>\n          {/* A long title wraps to two lines and ends with an ellipsis; then the native hint shows all of it. */}\n          <h2 onPointerEnter={showTruncatedTitle}>{props.title}</h2>\n          <Show when={props.subtitle || props.meta}>\n            <div class=\"k2b-detail-panel__supporting\">\n              <Show when={props.subtitle}>\n                <p>{props.subtitle}</p>\n              </Show>\n              <Show when={props.meta}>\n                <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n              </Show>\n            </div>\n          </Show>\n        </div>\n        <Show when={menuInActions() || props.actions}>\n          <div class=\"k2b-detail-panel__actions\">\n            <Show when={menuInActions()}>{menuTrigger()}</Show>\n            {props.actions}\n          </div>\n        </Show>\n      </div>\n      <Show when={props.primaryActions}>\n        <div class=\"k2b-detail-panel__primary-actions\">\n          {props.primaryActions}\n          <Show when={props.menu?.length}>{menuTrigger()}</Show>\n        </div>\n      </Show>\n    </header>\n  );\n};\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n  let body!: HTMLDivElement;\n  createScrollFade(\n    () => body,\n    () => props.scrollFade !== false,\n  );\n  return (\n    <div\n      ref={body}\n      class={classNames(\"k2b-detail-panel__body\", props.class)}\n      data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n      data-scroll-preserve={props.scrollPreserveKey}\n    >\n      {props.children}\n    </div>\n  );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n  const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n  return (\n    <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n      <header class=\"k2b-detail-panel__summary-header\">\n        <h3 id={headingId}>{props.title}</h3>\n        <Show when={props.actions}>\n          <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n    </section>\n  );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => {\n  const titleId = `k2b-detail-panel-group-${createUniqueId()}`;\n  return (\n    <div\n      class={classNames(\"k2b-detail-panel__group\", props.class)}\n      role=\"group\"\n      aria-label={props.title ? undefined : props.label}\n      aria-labelledby={props.title ? titleId : undefined}\n      data-titled={props.title ? \"true\" : undefined}\n    >\n      <Show when={props.title}>\n        <div class=\"k2b-detail-panel__group-title\" id={titleId}>\n          {props.title}\n        </div>\n      </Show>\n      {props.children}\n    </div>\n  );\n};\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n  <Show when={props.icon}>\n    {(icon) => (\n      <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n        <i class={icon()} />\n      </span>\n    )}\n  </Show>\n);\n\n/** A count chip, or \"None yet\" for zero; shared by sections and discussions. */\nexport const DetailPanelCount = (props: { count: number }): JSX.Element => {\n  const messages = useDetailPanelMessages();\n  return (\n    <Show when={props.count > 0} fallback={<span class=\"k2b-detail-panel__none\">{messages().noneYet}</span>}>\n      <span class=\"k2b-count-chip\">{props.count}</span>\n    </Show>\n  );\n};\n\n/** Title, then its count and state right after it, so every section reads the same way. */\nconst SectionTitleMeta = (props: Pick<DetailPanelSectionBaseProps, \"count\" | \"meta\">): JSX.Element => (\n  <>\n    <Show when={props.count !== undefined}>\n      <DetailPanelCount count={props.count ?? 0} />\n    </Show>\n    <Show when={props.meta}>\n      <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n    </Show>\n  </>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n  <>\n    {/* Hidden while empty: a row's icon, or its text when it has none, starts on the section's text edge. */}\n    <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n    <span class=\"k2b-detail-panel__action-copy\">\n      <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n      <Show when={props.description}>\n        <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n      </Show>\n    </span>\n    <Show when={props.trailing}>\n      <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n    </Show>\n  </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"current\",\n    \"description\",\n    \"href\",\n    \"leading\",\n    \"menuItems\",\n    \"menuLabel\",\n    \"secondaryAction\",\n    \"title\",\n    \"trailing\",\n    \"wrap\",\n  ]);\n  const className = classNames(\"k2b-detail-panel__action\", local.class);\n  const content = () => (\n    <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n  );\n\n  const action = () => (\n    <Show\n      when={local.href !== undefined}\n      fallback={\n        <Button\n          {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n          class={className}\n          aria-current={local.current ? \"true\" : undefined}\n          data-current={local.current ? \"true\" : undefined}\n          data-wrap={local.wrap ? \"true\" : undefined}\n          variant=\"ghost\"\n          size=\"sm\"\n        >\n          {content()}\n        </Button>\n      }\n    >\n      <ButtonLink\n        {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n        href={local.href as string}\n        class={className}\n        aria-current={local.current ? \"location\" : undefined}\n        data-current={local.current ? \"true\" : undefined}\n        data-wrap={local.wrap ? \"true\" : undefined}\n        variant=\"ghost\"\n        size=\"sm\"\n      >\n        {content()}\n      </ButtonLink>\n    </Show>\n  );\n\n  return (\n    <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n      <div class=\"k2b-detail-panel__action-row\">\n        {action()}\n        <Show when={local.secondaryAction}>\n          {(secondary) => (\n            <IconButton\n              size=\"sm\"\n              variant=\"ghost\"\n              label={secondary().label}\n              class=\"k2b-detail-panel__action-secondary\"\n              data-tone={secondary().variant}\n              onClick={() => secondary().onClick()}\n            >\n              <i class={secondary().icon} aria-hidden=\"true\" />\n            </IconButton>\n          )}\n        </Show>\n        <Show when={local.menuItems?.length}>\n          <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n            <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n              <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n            </Dropdown.Trigger>\n          </Dropdown.Root>\n        </Show>\n      </div>\n    </Show>\n  );\n};\n\nconst DetailPanelRow = (props: DetailPanelRowProps): JSX.Element => (\n  <div class={classNames(\"k2b-detail-panel__row\", props.class)}>\n    <DetailPanelActionContent title={props.title} description={props.description} leading={props.leading} trailing={props.trailing} />\n  </div>\n);\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n  const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n  const bodyId = `${headingId}-body`;\n  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n  const open = () => props.open ?? internalOpen();\n  let expand: HTMLButtonElement | undefined;\n  let collapse: HTMLButtonElement | undefined;\n  let body: HTMLDivElement | undefined;\n  const toggle = (next: boolean) => {\n    if (props.disabled) return;\n    if (props.open === undefined) setInternalOpen(next);\n    props.onOpenChange?.(next);\n  };\n  createEffect(() => {\n    const expanded = open();\n    // Restore focus only when its current control becomes hidden, including\n    // a parent-controlled collapse while focus is inside an editor.\n    queueMicrotask(() => {\n      if (expanded !== open()) return;\n      const active = expand?.ownerDocument.activeElement;\n      if (expanded && active === expand) collapse?.focus();\n      if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n    });\n  });\n  const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n  // Resolve once: reading `props.children` twice would instantiate the section body twice.\n  const resolved = children(() => props.children);\n\n  return (\n    <Show\n      when={props.collapsible}\n      fallback={\n        <section class={className()} aria-labelledby={headingId} data-icon={props.icon ? \"true\" : undefined}>\n          <header class=\"k2b-detail-panel__section-header\">\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <div class=\"k2b-detail-panel__section-copy\">\n              <div class=\"k2b-detail-panel__section-heading\">\n                <h3 id={headingId}>{props.title}</h3>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n              </div>\n              <Show when={props.description}>\n                <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n              </Show>\n            </div>\n            <Show when={props.actions}>\n              <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n            </Show>\n          </header>\n          <Show when={resolved()}>\n            <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n          </Show>\n        </section>\n      }\n    >\n      <section\n        class={className()}\n        aria-labelledby={open() ? headingId : `${headingId}-closed`}\n        data-open={open()}\n        data-icon={props.icon ? \"true\" : undefined}\n        data-summary={props.summary ? \"true\" : undefined}\n      >\n        <div hidden={open()}>\n          <Button\n            ref={expand}\n            variant=\"ghost\"\n            class=\"k2b-detail-panel__section-summary\"\n            disabled={props.disabled}\n            aria-expanded={false}\n            aria-controls={bodyId}\n            onClick={() => toggle(true)}\n          >\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <span class=\"k2b-detail-panel__section-copy\">\n              <span class=\"k2b-detail-panel__section-heading\">\n                <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n                  {props.title}\n                </span>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n                <Show when={props.summary}>\n                  <span class=\"k2b-detail-panel__section-preview k2b-truncate-fade\">{props.summary}</span>\n                </Show>\n              </span>\n              <Show when={props.description}>\n                <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n              </Show>\n            </span>\n            {/* Same column as the open header's collapse button, so nothing moves between the states. */}\n            <span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\">\n              <i class=\"ti ti-chevron-down\" />\n            </span>\n          </Button>\n        </div>\n        <div hidden={!open()}>\n          <header class=\"k2b-detail-panel__section-header\">\n            <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n            <div class=\"k2b-detail-panel__section-copy\">\n              <div class=\"k2b-detail-panel__section-heading\">\n                <h3 id={headingId}>{props.title}</h3>\n                <SectionTitleMeta count={props.count} meta={props.meta} />\n              </div>\n              <Show when={props.description}>\n                <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n              </Show>\n            </div>\n            <Button\n              ref={collapse}\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"k2b-detail-panel__section-toggle\"\n              disabled={props.disabled}\n              aria-labelledby={headingId}\n              aria-expanded={true}\n              aria-controls={bodyId}\n              onClick={() => toggle(false)}\n            >\n              <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n            </Button>\n          </header>\n        </div>\n        <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n          {resolved()}\n        </div>\n      </section>\n    </Show>\n  );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n  <div class={classNames(\"k2b-detail-panel\", props.class)} data-surface={props.surface}>\n    {props.children}\n  </div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\nDetailPanel.Row = DetailPanelRow;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/DetailSections.js

@@ -30,17 +30,19 @@ var _tmpl$ = ["<span class=\"k2b-detail-presence__face\"", ">", "<span class=\"k
   _tmpl$21 = "<span class=\"k2b-detail-row-skeleton\"></span>",
   _tmpl$22 = "<i class=\"ti ti-settings\" aria-hidden=\"true\"></i>",
   _tmpl$23 = ["<div class=\"k2b-detail-section-group\"><div class=\"k2b-detail-section-label\">", "</div>", "", "</div>"],
-  _tmpl$24 = ["<div class=\"k2b-detail-section-rows\">", "", "</div>"],
-  _tmpl$25 = ["<dl class=\"k2b-detail-properties\">", "</dl>"],
-  _tmpl$26 = ["<span class=\"k2b-detail-properties__leading\">", "</span>"],
-  _tmpl$27 = ["<div class=\"k2b-detail-properties__item\"><dt>", "</dt><dd>", "", "</dd></div>"],
-  _tmpl$28 = ["<span class=\"k2b-detail-properties__value\">", "</span>"],
-  _tmpl$29 = ["<a class=\"k2b-detail-properties__value k2b-detail-properties__link\"", ">", "</a>"],
-  _tmpl$30 = ["<ul class=\"k2b-detail-tags\">", "</ul>"],
-  _tmpl$31 = ["<li>", "</li>"],
-  _tmpl$32 = ["<span class=\"k2b-detail-tag\">#", "</span>"],
-  _tmpl$33 = ["<a class=\"k2b-detail-tag\"", ">#", "</a>"];
-import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+  _tmpl$24 = ["<div class=\"k2b-detail-section-rows\" aria-busy=\"true\">", "<span class=\"k2b-sr-only\" role=\"status\">", "</span></div>"],
+  _tmpl$25 = ["<div class=\"k2b-detail-section-rows\">", "", "", "", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-detail-section-rows\">", "", "</div>"],
+  _tmpl$27 = ["<dl class=\"k2b-detail-properties\">", "</dl>"],
+  _tmpl$28 = ["<span class=\"k2b-detail-properties__leading\">", "</span>"],
+  _tmpl$29 = ["<div class=\"k2b-detail-properties__item\"><dt>", "</dt><dd>", "", "</dd></div>"],
+  _tmpl$30 = ["<span class=\"k2b-detail-properties__value\">", "</span>"],
+  _tmpl$31 = ["<a class=\"k2b-detail-properties__value k2b-detail-properties__link\"", ">", "</a>"],
+  _tmpl$32 = ["<ul class=\"k2b-detail-tags\">", "</ul>"],
+  _tmpl$33 = ["<li>", "</li>"],
+  _tmpl$34 = ["<span class=\"k2b-detail-tag\">#", "</span>"],
+  _tmpl$35 = ["<a class=\"k2b-detail-tag\"", ">#", "</a>"];
+import { children, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { Avatar } from "../surfaces/Avatar";
 import { AvatarStack } from "../surfaces/AvatarStack";
@@ -518,6 +520,46 @@ export function DetailAccess(props) {
 
 // ── Links ───────────────────────────────────────────────────────────────
 
+const LinkRow = props => {
+  const item = props.item;
+  const menu = item.menuItems ? {
+    menuItems: item.menuItems,
+    menuLabel: item.menuLabel
+  } : {};
+  const shared = {
+    leading: item.leading ?? _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(item.icon ?? "ti ti-file-text", true), false)),
+    title: item.title,
+    description: item.description,
+    trailing: item.trailing,
+    ...menu
+  };
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!!item.disabled)() && item.href;
+    },
+    get fallback() {
+      return _$createComponent(DetailPanel.Action, _$mergeProps({
+        type: "button",
+        get disabled() {
+          return item.disabled;
+        },
+        onClick: event => item.onClick?.(event)
+      }, shared));
+    },
+    children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
+      get href() {
+        return href();
+      },
+      get target() {
+        return item.target;
+      },
+      get rel() {
+        return item.rel;
+      },
+      onClick: event => item.onClick?.(event)
+    }, shared))
+  });
+};
 const LinkGroup = props => {
   const panel = useDetailPanelMessages();
   const [all, setAll] = createSignal(false);
@@ -526,30 +568,9 @@ const LinkGroup = props => {
     get each() {
       return _$memo(() => !!all())() ? props.items : props.items.slice(0, props.limit);
     },
-    children: item => {
-      const shared = {
-        leading: _$ssr(_tmpl$4, _$ssrAttribute("class", _$escape(item.icon ?? "ti ti-file-text", true), false)),
-        title: item.title,
-        trailing: item.trailing
-      };
-      return _$createComponent(Show, {
-        get when() {
-          return item.href;
-        },
-        get fallback() {
-          return _$createComponent(DetailPanel.Action, _$mergeProps({
-            type: "button",
-            onClick: event => item.onClick?.(event)
-          }, shared));
-        },
-        children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
-          get href() {
-            return href();
-          },
-          onClick: event => item.onClick?.(event)
-        }, shared))
-      });
-    }
+    children: item => _$createComponent(LinkRow, {
+      item: item
+    })
   })), _$escape(_$createComponent(Show, {
     get when() {
       return hiddenCount() > 0;
@@ -574,18 +595,61 @@ const LinkGroup = props => {
   })));
 };
 
-/** "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet". */
+/**
+ * "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet", followed by the
+ * `footer` when there is one.
+ */
 export function DetailLinks(props) {
   const t = useDetailSectionMessages();
   const limit = () => Math.max(1, props.limit ?? 5);
+  const state = () => props.state ?? "ready";
   const total = () => props.incoming.length + props.outgoing.length;
+  // Resolve once: the empty state reads it as a condition and as content.
+  const footer = children(() => props.footer);
   const summary = () => {
+    if (state() === "loading") return t().linksLoading;
+    if (state() === "error") return t().linksFailed;
     const names = items => ({
       names: listNames(items.slice(0, 2).map(item => item.title), t().and),
       more: Math.max(0, items.length - 2)
     });
     return props.incoming.length ? t().linkedBySummary(names(props.incoming)) : t().linksToSummary(names(props.outgoing));
   };
+  // Loading and failure take the row the next links would take, so the loaded rows above never move.
+  const pending = () => [_$createComponent(Show, {
+    get when() {
+      return state() === "loading";
+    },
+    get children() {
+      return _$ssr(_tmpl$24, _$escape(_$createComponent(DetailPanel.Row, {
+        get leading() {
+          return _$ssr(_tmpl$20);
+        },
+        get title() {
+          return _$ssr(_tmpl$21);
+        }
+      })), _$escape(t().linksLoading));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return state() === "error";
+    },
+    get children() {
+      return _$ssr(_tmpl$17, _$escape(t().linksFailed), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.onRetry;
+        },
+        children: retry => _$createComponent(Button, {
+          variant: "text",
+          size: "xs",
+          onClick: () => retry()(),
+          get children() {
+            return t().retry;
+          }
+        })
+      })));
+    }
+  })];
   return _$createComponent(Show, {
     get when() {
       return total() > 0;
@@ -596,9 +660,21 @@ export function DetailLinks(props) {
           return props.title ?? t().links;
         },
         icon: "ti ti-arrows-exchange",
-        count: 0,
+        get count() {
+          return state() === "ready" ? 0 : undefined;
+        },
         get ["class"]() {
           return props.class;
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return state() !== "ready" || footer();
+            },
+            get children() {
+              return _$ssr(_tmpl$26, _$escape(pending()), _$escape(footer()));
+            }
+          });
         }
       });
     },
@@ -609,7 +685,7 @@ export function DetailLinks(props) {
         },
         icon: "ti ti-arrows-exchange",
         get count() {
-          return total();
+          return _$memo(() => state() === "ready")() ? total() : undefined;
         },
         collapsible: true,
         get defaultOpen() {
@@ -622,7 +698,7 @@ export function DetailLinks(props) {
           return props.class;
         },
         get children() {
-          return _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
             get when() {
               return props.incoming.length > 0;
             },
@@ -660,7 +736,7 @@ export function DetailLinks(props) {
                 }
               });
             }
-          })));
+          })), _$escape(pending()), _$escape(footer()));
         }
       });
     }
@@ -690,27 +766,27 @@ export function DetailProperties(props) {
       return props.class;
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(_$createComponent(For, {
+      return [_$ssr(_tmpl$27, _$escape(_$createComponent(For, {
         get each() {
           return props.items;
         },
-        children: item => _$ssr(_tmpl$27, _$escape(item.label), _$escape(_$createComponent(Show, {
+        children: item => _$ssr(_tmpl$29, _$escape(item.label), _$escape(_$createComponent(Show, {
           get when() {
             return item.leading;
           },
           get children() {
-            return _$ssr(_tmpl$26, _$escape(item.leading));
+            return _$ssr(_tmpl$28, _$escape(item.leading));
           }
         })), _$escape(_$createComponent(Show, {
           get when() {
             return item.href;
           },
           get fallback() {
-            return _$ssr(_tmpl$28, _$escape(item.value));
+            return _$ssr(_tmpl$30, _$escape(item.value));
           },
-          children: href => _$ssr(_tmpl$29, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(item.value))
+          children: href => _$ssr(_tmpl$31, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(item.value))
         })))
-      })));
+      }))), props.children];
     }
   });
 }
@@ -740,18 +816,18 @@ export function DetailTags(props) {
           return _$memo(() => !!props.emptyHint)() ? _$ssr(_tmpl$18, _$escape(props.emptyHint)) : undefined;
         },
         get children() {
-          return _$ssr(_tmpl$30, _$escape(_$createComponent(For, {
+          return _$ssr(_tmpl$32, _$escape(_$createComponent(For, {
             get each() {
               return props.tags;
             },
-            children: tag => _$ssr(_tmpl$31, _$escape(_$createComponent(Show, {
+            children: tag => _$ssr(_tmpl$33, _$escape(_$createComponent(Show, {
               get when() {
                 return tag.href;
               },
               get fallback() {
-                return _$ssr(_tmpl$32, _$escape(tag.label));
+                return _$ssr(_tmpl$34, _$escape(tag.label));
               },
-              children: href => _$ssr(_tmpl$33, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(tag.label))
+              children: href => _$ssr(_tmpl$35, _$ssrAttribute("href", _$escape(href(), true), false), _$escape(tag.label))
             })))
           })));
         }