@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/chunk-3SKAEPPZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-header/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-3SKAEPPZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { HeadingLevel } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\nimport { Text } from '../../typography/text/text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-size',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n  'data-action',\n  'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-size'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  /** Visual label size, independent of the native heading level. Default `sm`. */\n  size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      /** A toggle's label is its button text, not a heading. */\n      headingLevel?: never;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      /**\n       * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n       * document outline; the visual treatment does not change.\n       */\n      headingLevel?: HeadingLevel;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | {\n      count?: never;\n      countLabel?: never;\n      badge?: SafeHtml | undefined;\n      status?: SafeHtml | undefined;\n    };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  size = 'sm',\n  headingLevel = 2,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge = normalizedCount === undefined ? badge : undefined;\n  const renderedStatus = normalizedCount === undefined ? status : undefined;\n  const hasBadge = Boolean(renderedBadge || renderedStatus);\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: SemanticTone =\n    indicatorTone === 'accent' ? 'info' : indicatorTone;\n  const indicator =\n    normalizedCount !== undefined ? (\n      <Badge size=\"compact\" tone={badgeTone} ariaHidden={!placeholder}>\n        {placeholder ? <Skeleton width={em(1.75)} /> : normalizedCount}\n      </Badge>\n    ) : (\n      <>\n        {renderedBadge && (\n          <Badge size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : renderedBadge}\n          </Badge>\n        )}\n        {renderedStatus && (\n          <Badge size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : renderedStatus}\n          </Badge>\n        )}\n      </>\n    );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(hasBadge)}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-size={size}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <Text variant=\"span\">{label}</Text>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(hasBadge)}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-size={size}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant={`h${headingLevel}`}\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n          data-kui-disabled={actionDisabled ? 'true' : undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}

package/dist/{chunk-56RJXPHG.js → chunk-3VXDSIBJ.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { ChevronRight } from 'lucide';
 import { jsx } from 'kerfjs/jsx-runtime';
 
@@ -20,7 +20,9 @@ function DisclosureArrow({
   openDirection = "down",
   closedDirection = "right",
   icon,
-  className = ""
+  size,
+  className = "",
+  slot
 }) {
   const direction = open ? openDirection : closedDirection;
   const rotation = rotationForState(open, openDirection, closedDirection);
@@ -28,11 +30,12 @@ function DisclosureArrow({
     "span",
     {
       class: `kui-disclosure-arrow ${className}`.trim(),
-      style: `--_kui-disclosure-arrow-rotation:${rotation}deg`,
+      style: `--_kui-disclosure-arrow-rotation:${rotation}deg${size ? `;--kui-disclosure-arrow-size:${size}` : ""}`,
       "data-component": "disclosure-arrow",
       "data-open": String(open),
       "data-direction": direction,
       "aria-hidden": "true",
+      slot,
       children: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronRight, name: "chevron-right" })
     }
   );
@@ -40,4 +43,4 @@ function DisclosureArrow({
 
 export { DisclosureArrow };
 
-//# sourceMappingURL=chunk-56RJXPHG.js.map
+//# sourceMappingURL=chunk-3VXDSIBJ.js.map

package/dist/chunk-3VXDSIBJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/disclosure-arrow/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,EAAM,OAAO,CAAA,6BAAA,EAAgC,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3G,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-3VXDSIBJ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  /** Typed box size for the square visual. Default: `remify(18px)`. */\n  size?: CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  size,\n  className = '',\n  slot,\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return (\n    <span\n      class={`kui-disclosure-arrow ${className}`.trim()}\n      style={`--_kui-disclosure-arrow-rotation:${rotation}deg${size ? `;--kui-disclosure-arrow-size:${size}` : ''}`}\n      data-component=\"disclosure-arrow\"\n      data-open={String(open)}\n      data-direction={direction}\n      aria-hidden=\"true\"\n      slot={slot}\n    >\n      {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n    </span>\n  );\n}\n"]}

package/dist/chunk-3WYREXW4.js

@@ -0,0 +1,120 @@
+import { popover } from 'kerfjs/overlay';
+
+// src/components/feedback/anchored-surface/anchored-surface.tsx
+function usedColorScheme(element) {
+  const keywords = window.getComputedStyle(element).colorScheme.split(/\s+/);
+  const light = keywords.includes("light");
+  const dark = keywords.includes("dark");
+  if (light && dark)
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return dark ? "dark" : "light";
+}
+function inverseScheme(element) {
+  return usedColorScheme(element) === "dark" ? "light" : "dark";
+}
+function composedParent(node) {
+  const root = node.getRootNode();
+  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+}
+function followScheme(surface, source, initial, closed) {
+  let current = initial;
+  const sync = () => {
+    if (!source.isConnected) return;
+    const next = inverseScheme(source);
+    if (next === current) return;
+    surface.classList.replace(
+      `kui-anchored-surface--scheme-${current}`,
+      `kui-anchored-surface--scheme-${next}`
+    );
+    current = next;
+  };
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener?.("change", sync);
+  const observer = new MutationObserver(sync);
+  for (let node = source; node; node = composedParent(node))
+    observer.observe(node, { attributes: true });
+  void closed.then(() => {
+    media.removeEventListener?.("change", sync);
+    observer.disconnect();
+  });
+}
+function modalScope(context) {
+  let child;
+  for (let node = context ?? null; node !== null; ) {
+    if (node.localName === "dialog") return node;
+    if (child?.assignedSlot?.closest("dialog")) return node;
+    child = node;
+    const root = node.getRootNode();
+    node = node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+  }
+  return document.body;
+}
+function openAnchoredSurface(anchor, content, options) {
+  return openWithSchemeSource(anchor, content, options, anchor);
+}
+function openWithSchemeSource(anchor, content, options, schemeSource) {
+  const {
+    label,
+    initialFocus = true,
+    dismiss = ["escape", "outside"],
+    viewportMargin = 8,
+    tone = "default",
+    ...rest
+  } = options;
+  if (!label.trim())
+    throw new TypeError("openAnchoredSurface() requires a nonempty label");
+  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();
+  const scheme = tone === "dark" ? inverseScheme(schemeSource) : void 0;
+  const handle = popover(anchor, content, {
+    ...rest,
+    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ""}`,
+    native: true,
+    initialFocus,
+    dismiss,
+    viewportMargin,
+    // The surface scrolls: fit it to the room beside the anchor, on the
+    // roomier side when neither fits, refreshed on every reposition.
+    fitHeight: true
+  });
+  handle.el.setAttribute("role", "dialog");
+  handle.el.setAttribute("aria-label", label);
+  handle.el.dataset.component = "anchored-surface";
+  if (scheme) {
+    handle.el.dataset.tone = "dark";
+    followScheme(handle.el, schemeSource, scheme, handle.result);
+  }
+  const dialog = anchor.closest("dialog");
+  if (dialog?.open) {
+    const onClose = () => handle.close();
+    dialog.addEventListener("close", onClose);
+    void handle.result.then(() => dialog.removeEventListener("close", onClose));
+  }
+  return handle;
+}
+function openAnchoredSurfaceAt(point, content, options) {
+  const { x, y, context } = point;
+  if (!Number.isFinite(x) || !Number.isFinite(y))
+    throw new TypeError("openAnchoredSurfaceAt() requires finite coordinates");
+  const anchor = document.createElement("span");
+  anchor.setAttribute("aria-hidden", "true");
+  anchor.style.cssText = "position:fixed;width:0;height:0;pointer-events:none;visibility:hidden";
+  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);
+  modalScope(context).append(anchor);
+  try {
+    const handle = openWithSchemeSource(
+      anchor,
+      content,
+      options,
+      context?.isConnected ? context : anchor
+    );
+    void handle.result.then(() => anchor.remove());
+    return handle;
+  } catch (error) {
+    anchor.remove();
+    throw error;
+  }
+}
+
+export { openAnchoredSurface, openAnchoredSurfaceAt };
+
+//# sourceMappingURL=chunk-3WYREXW4.js.map

package/dist/chunk-3WYREXW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/anchored-surface/anchored-surface.tsx"],"names":[],"mappings":"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","file":"chunk-3WYREXW4.js","sourcesContent":["import type { OverlayContent, OverlayHandle } from 'kerfjs/overlay';\nimport { popover, type PopoverOptions } from 'kerfjs/overlay';\n\n/** App-facing options for a non-modal, arbitrary-content help surface. */\nexport interface AnchoredSurfaceOptions extends Pick<\n  PopoverOptions,\n  | 'placement'\n  | 'align'\n  | 'gap'\n  | 'dismiss'\n  | 'initialFocus'\n  | 'onDismiss'\n  | 'outsideIgnore'\n  | 'container'\n> {\n  /** Accessible name for the non-modal dialog. */\n  label: string;\n  /**\n   * Gutter in px kept between the surface and the viewport edges when it is\n   * clamped horizontally and fitted vertically. Default `8`, the same gutter as\n   * the surface's maximum size.\n   */\n  viewportMargin?: number;\n  /**\n   * Where to append the surface. Default: inside the anchor's open modal\n   * dialog — a native `<dialog>`'s host slot, or a slot kerf creates in a\n   * `wa-dialog` / `wa-drawer` — so the surface stays interactive there;\n   * otherwise `document.body`. Pass an element only for a modal context kerf\n   * cannot resolve; an element inside an open modal closes the surface with it.\n   */\n  container?: Element;\n  /**\n   * Surface tone. `'default'` follows the anchor's color scheme. `'dark'` is\n   * the loud, inverse tone of a `ToolbarControlGroup` / `ToolbarText`\n   * `tone=\"dark\"`, for a popup anchored to dark media chrome (a volume popup\n   * over a video preview): dark beside a light page and light beside a dark\n   * one, so the popup matches the control group that opened it. The surface\n   * takes the opposite of the anchor's color scheme, so it and every Kerf UI\n   * or Web Awesome component inside it resolve the same semantic\n   * `light-dark()` tokens to the other side: no new colors, no child\n   * overrides. While open it follows a live switch of that scheme (the OS\n   * preference, or an app theme class or attribute on an ancestor). Default\n   * `'default'`.\n   */\n  tone?: AnchoredSurfaceTone;\n}\n\n/** {@link AnchoredSurfaceOptions.tone}: follow the anchor's scheme, or invert it. */\nexport type AnchoredSurfaceTone = 'default' | 'dark';\n\n// The color scheme `light-dark()` resolves to at `element`: an explicit single\n// scheme wins; `light dark` follows the user's preference, like the browser.\nfunction usedColorScheme(element: Element): 'light' | 'dark' {\n  const keywords = window.getComputedStyle(element).colorScheme.split(/\\s+/);\n  const light = keywords.includes('light');\n  const dark = keywords.includes('dark');\n  if (light && dark)\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  return dark ? 'dark' : 'light';\n}\n\n/** The dark tone's surface scheme: the opposite of `element`'s used scheme. */\nfunction inverseScheme(element: Element): 'light' | 'dark' {\n  return usedColorScheme(element) === 'dark' ? 'light' : 'dark';\n}\n\n/** The flat-tree parent: the parent element, or a shadow root's host. */\nfunction composedParent(node: Element): Element | null {\n  const root = node.getRootNode();\n  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n}\n\n/**\n * Keep an open dark-tone surface's scheme class the inverse of `source`'s\n * used scheme while the scheme switches live: the OS preference changes, or\n * an app theme class, attribute, or inline `color-scheme` changes on\n * `source` or one of its ancestors (the only places an inherited\n * `color-scheme` comes from). Stops when `closed` settles.\n */\nfunction followScheme(\n  surface: HTMLElement,\n  source: Element,\n  initial: 'light' | 'dark',\n  closed: Promise<unknown>,\n): void {\n  let current = initial;\n  const sync = () => {\n    if (!source.isConnected) return;\n    const next = inverseScheme(source);\n    if (next === current) return;\n    surface.classList.replace(\n      `kui-anchored-surface--scheme-${current}`,\n      `kui-anchored-surface--scheme-${next}`,\n    );\n    current = next;\n  };\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener?.('change', sync);\n  const observer = new MutationObserver(sync);\n  for (let node: Element | null = source; node; node = composedParent(node))\n    observer.observe(node, { attributes: true });\n  void closed.then(() => {\n    media.removeEventListener?.('change', sync);\n    observer.disconnect();\n  });\n}\n\n/** A viewport pointer location; `context` is the element under the pointer. */\nexport interface AnchoredSurfacePoint {\n  x: number;\n  y: number;\n  /**\n   * Pass the event target when opening from inside a modal dialog, native or\n   * Web Awesome (`wa-dialog`, `wa-drawer`). The dark tone also reads its\n   * color scheme from `context`, so a region with its own `color-scheme` is\n   * honored; without it the scheme is the modal scope's (or the page's).\n   */\n  context?: Element;\n}\n\n// The element a temporary pointer anchor joins so the overlay core resolves\n// the same modal context as `context`: the nearest `<dialog>`, or a shadow host\n// (`wa-dialog`, `wa-drawer`) whose slot renders `context` inside a `<dialog>`\n// in its shadow root. Light-DOM children of that host are slotted inside it.\nfunction modalScope(context: Element | undefined): Element {\n  let child: Element | undefined;\n  for (let node = context ?? null; node !== null;) {\n    if (node.localName === 'dialog') return node;\n    if (child?.assignedSlot?.closest('dialog')) return node;\n    child = node;\n    const root = node.getRootNode();\n    node =\n      node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n  }\n  return document.body;\n}\n\n/**\n * Open app-owned content beside an element. The surface owns its Kerf UI chrome;\n * kerfjs/overlay owns positioning, top-layer/modal hosting, focus, and dismissal.\n * The surface stays `viewportMargin` inside the viewport edges and fits its\n * height to the room beside the anchor (the roomier side when neither holds it),\n * scrolling its content; `--kui-anchored-surface-available-height` exposes that\n * room to the content, updated as the page scrolls or resizes.\n * The caller owns content, action policy, and calling `close()` when an action\n * completes. `initialFocus` defaults to the first focusable descendant; set it\n * to `false` for read-only help that should leave focus on its trigger.\n */\nexport function openAnchoredSurface(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  return openWithSchemeSource(anchor, content, options, anchor);\n}\n\n/** `openAnchoredSurface`, with the element the dark tone reads its scheme from. */\nfunction openWithSchemeSource(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n  schemeSource: Element,\n): OverlayHandle {\n  const {\n    label,\n    initialFocus = true,\n    dismiss = ['escape', 'outside'],\n    viewportMargin = 8,\n    tone = 'default',\n    ...rest\n  } = options;\n  if (!label.trim())\n    throw new TypeError('openAnchoredSurface() requires a nonempty label');\n  // Safari does not focus buttons on pointer press. Make a focusable trigger\n  // the overlay's restore target consistently, including that engine.\n  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();\n  // The dark tone's scheme is a class from creation, so the surface's first\n  // style resolution already has it: flipping it after the content mounts\n  // would run the content's own color transitions on open.\n  const scheme = tone === 'dark' ? inverseScheme(schemeSource) : undefined;\n  const handle = popover(anchor, content, {\n    ...rest,\n    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ''}`,\n    native: true,\n    initialFocus,\n    dismiss,\n    viewportMargin,\n    // The surface scrolls: fit it to the room beside the anchor, on the\n    // roomier side when neither fits, refreshed on every reposition.\n    fitHeight: true,\n  });\n  handle.el.setAttribute('role', 'dialog');\n  handle.el.setAttribute('aria-label', label);\n  handle.el.dataset.component = 'anchored-surface';\n  if (scheme) {\n    handle.el.dataset.tone = 'dark';\n    followScheme(handle.el, schemeSource, scheme, handle.result);\n  }\n  const dialog = anchor.closest('dialog');\n  if (dialog?.open) {\n    const onClose = () => handle.close();\n    dialog.addEventListener('close', onClose);\n    void handle.result.then(() => dialog.removeEventListener('close', onClose));\n  }\n  return handle;\n}\n\n/**\n * Open the same surface at pointer coordinates. The temporary anchor has no\n * layout or hit target. `context` keeps a surface opened inside a modal dialog\n * in that dialog's interactive host slot; it is removed on close or failure.\n */\nexport function openAnchoredSurfaceAt(\n  point: AnchoredSurfacePoint,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  const { x, y, context } = point;\n  if (!Number.isFinite(x) || !Number.isFinite(y))\n    throw new TypeError('openAnchoredSurfaceAt() requires finite coordinates');\n  const anchor = document.createElement('span');\n  anchor.setAttribute('aria-hidden', 'true');\n  anchor.style.cssText =\n    'position:fixed;width:0;height:0;pointer-events:none;visibility:hidden';\n  // The positioning core reads the anchor's viewport rect. A virtual rect\n  // avoids coordinate conversion when `context` sits in a transformed dialog.\n  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);\n  // Only modal membership matters for host selection. Keep the temporary node\n  // out of the event target itself (which may be an input or a custom element).\n  modalScope(context).append(anchor);\n  try {\n    const handle = openWithSchemeSource(\n      anchor,\n      content,\n      options,\n      context?.isConnected ? context : anchor,\n    );\n    void handle.result.then(() => anchor.remove());\n    return handle;\n  } catch (error) {\n    anchor.remove();\n    throw error;\n  }\n}\n"]}

package/dist/chunk-4UB5Z3ZZ.js

@@ -0,0 +1,68 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var summaryRowProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-presentation",
+  "data-list-edge",
+  "data-rail",
+  "data-selected",
+  "data-dimmed"
+]);
+function SummaryRow({
+  title,
+  leading,
+  trailingMeta,
+  metadata,
+  presentation = "row",
+  titleLines,
+  rail,
+  selected = false,
+  dimmed = false,
+  listEdge,
+  deferRendering = false,
+  ariaLabel,
+  id,
+  className = "",
+  rootAttributes = {}
+}) {
+  if (titleLines !== void 0 && (!Number.isInteger(titleLines) || titleLines < 1))
+    throw new RangeError("SummaryRow titleLines must be a positive integer");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, summaryRowProtected),
+      id,
+      class: `kui-summary-row ${className}`.trim(),
+      "data-component": "summary-row",
+      "data-presentation": presentation,
+      "data-list-edge": listEdge,
+      "data-rail": rail,
+      "data-selected": selected ? "true" : void 0,
+      "data-dimmed": dimmed ? "true" : void 0,
+      "data-defer": deferRendering ? "true" : void 0,
+      role: "option",
+      tabindex: "0",
+      "aria-selected": selected ? "true" : "false",
+      "aria-label": ariaLabel,
+      style: titleLines === void 0 ? void 0 : `--_kui-summary-row-title-lines:${titleLines}`,
+      children: [
+        rail && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__rail", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__body", children: [
+          leading && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__leading", children: leading }),
+          /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__content", children: [
+            /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__title", children: [
+              trailingMeta !== void 0 && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__trailing", children: trailingMeta }),
+              title
+            ] }),
+            metadata && /* @__PURE__ */ jsx("div", { class: "kui-summary-row__metadata", children: metadata })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SummaryRow };
+
+//# sourceMappingURL=chunk-4UB5Z3ZZ.js.map

package/dist/chunk-4UB5Z3ZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/summary-row/summary-row.tsx"],"names":[],"mappings":";;;AAWA,IAAM,mBAAA,uBAA0B,GAAA,CAAI;AAAA,EAClC,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AAmDM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,UAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB;AACnB,CAAA,EAAoB;AAClB,EAAA,IACE,eAAe,MAAA,KACd,CAAC,OAAO,SAAA,CAAU,UAAU,KAAK,UAAA,GAAa,CAAA,CAAA;AAE/C,IAAA,MAAM,IAAI,WAAW,kDAAkD,CAAA;AACzE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,mBAAA,EAAmB,YAAA;AAAA,MACnB,gBAAA,EAAgB,QAAA;AAAA,MAChB,WAAA,EAAW,IAAA;AAAA,MACX,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,aAAA,EAAa,SAAS,MAAA,GAAS,MAAA;AAAA,MAC/B,YAAA,EAAY,iBAAiB,MAAA,GAAS,MAAA;AAAA,MACtC,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAS,GAAA;AAAA,MACT,eAAA,EAAe,WAAW,MAAA,GAAS,OAAA;AAAA,MACnC,YAAA,EAAY,SAAA;AAAA,MACZ,KAAA,EACE,UAAA,KAAe,MAAA,GACX,MAAA,GACA,kCAAkC,UAAU,CAAA,CAAA;AAAA,MAGjD,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAwB,eAAY,MAAA,EAAO,CAAA;AAAA,wBAChE,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EACR,QAAA,EAAA;AAAA,UAAA,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EAA4B,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,0BAC5D,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACT,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACR,QAAA,EAAA;AAAA,cAAA,YAAA,KAAiB,MAAA,oBAChB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAA6B,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,cAEvD;AAAA,aAAA,EACH,CAAA;AAAA,YACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,6BAA6B,QAAA,EAAA,QAAA,EAAS;AAAA,WAAA,EAChE;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-4UB5Z3ZZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/** `row` for a list section; `card` for a board column. */\nexport type SummaryRowPresentation = 'row' | 'card';\n/** A row's place in a rounded list section, so its corners match. */\nexport type SummaryRowListEdge = 'start' | 'end' | 'only';\n\nconst summaryRowProtected = new Set([\n  'data-component',\n  'data-presentation',\n  'data-list-edge',\n  'data-rail',\n  'data-selected',\n  'data-dimmed',\n]);\n\ntype SummaryRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-presentation'?: never;\n    'data-list-edge'?: never;\n    'data-rail'?: never;\n    'data-selected'?: never;\n    'data-dimmed'?: never;\n  }\n>;\n\nexport interface SummaryRowProps {\n  /** The identity line: an identifier, inline status glyphs, and the title. */\n  title: KerfUiContent;\n  /** Optional leading glyph, such as a category icon. */\n  leading?: SafeHtml;\n  /** Quiet text at the end of the title line, such as a relative time. */\n  trailingMeta?: string | SafeHtml;\n  /** A wrapping line of badges, chips, and quiet text below the title. */\n  metadata?: KerfUiContent;\n  /** `row` (default) or `card`. */\n  presentation?: SummaryRowPresentation;\n  /** Title lines before clipping; default 2 for a row and 4 for a card. */\n  titleLines?: number;\n  /** A leading state rail in a semantic tone (Up Next, blocked, …). */\n  rail?: SemanticTone;\n  /** Selected state, exposed as `aria-selected`. */\n  selected?: boolean;\n  /** Dim a finished or cut item; hover and selection restore it. */\n  dimmed?: boolean;\n  /** Round the corners that meet a rounded list section's edge. */\n  listEdge?: SummaryRowListEdge;\n  /** Skip rendering while off screen in long lists (`content-visibility`). */\n  deferRendering?: boolean;\n  /** Accessible name when the visible content is not a good one. */\n  ariaLabel?: string;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` identity (an item id or delegated action) on the option. */\n  rootAttributes?: SummaryRowRootAttributes;\n}\n\n/**\n * A selectable, keyboard-focusable summary of one item, as a list row or a\n * board card: an optional leading glyph and state rail, a clamped identity line\n * with trailing quiet metadata, and a wrapping metadata line. It is a\n * `role=\"option\"`; place rows in a labeled `role=\"listbox\"` and own selection\n * and keyboard movement in the application.\n */\nexport function SummaryRow({\n  title,\n  leading,\n  trailingMeta,\n  metadata,\n  presentation = 'row',\n  titleLines,\n  rail,\n  selected = false,\n  dimmed = false,\n  listEdge,\n  deferRendering = false,\n  ariaLabel,\n  id,\n  className = '',\n  rootAttributes = {},\n}: SummaryRowProps) {\n  if (\n    titleLines !== undefined &&\n    (!Number.isInteger(titleLines) || titleLines < 1)\n  )\n    throw new RangeError('SummaryRow titleLines must be a positive integer');\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, summaryRowProtected)}\n      id={id}\n      class={`kui-summary-row ${className}`.trim()}\n      data-component=\"summary-row\"\n      data-presentation={presentation}\n      data-list-edge={listEdge}\n      data-rail={rail}\n      data-selected={selected ? 'true' : undefined}\n      data-dimmed={dimmed ? 'true' : undefined}\n      data-defer={deferRendering ? 'true' : undefined}\n      role=\"option\"\n      tabindex=\"0\"\n      aria-selected={selected ? 'true' : 'false'}\n      aria-label={ariaLabel}\n      style={\n        titleLines === undefined\n          ? undefined\n          : `--_kui-summary-row-title-lines:${titleLines}`\n      }\n    >\n      {rail && <span class=\"kui-summary-row__rail\" aria-hidden=\"true\" />}\n      <div class=\"kui-summary-row__body\">\n        {leading && <span class=\"kui-summary-row__leading\">{leading}</span>}\n        <div class=\"kui-summary-row__content\">\n          <div class=\"kui-summary-row__title\">\n            {trailingMeta !== undefined && (\n              <span class=\"kui-summary-row__trailing\">{trailingMeta}</span>\n            )}\n            {title}\n          </div>\n          {metadata && <div class=\"kui-summary-row__metadata\">{metadata}</div>}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-5NQF35VO.js

@@ -0,0 +1,67 @@
+import { createSheetHandle, wireSheetHandle } from './chunk-QTSMHH5J.js';
+
+// src/components/surfaces/surface-scaffold/wiring/wire-overlay-sheets.ts
+var OVERLAY_SHEET_RESIZABLE_CLASS = "kui-overlay-sheet-resizable";
+var OVERLAY_SHEET_HANDLE_CLASS = "kui-overlay-sheet-handle";
+var OVERLAY_SHEET_HEIGHT_PROPERTY = "--_kui-overlay-sheet-height";
+var SHEET_SELECTOR = `.kerf-overlay.${OVERLAY_SHEET_RESIZABLE_CLASS}[data-presentation="bottom-sheet"]`;
+function wireOverlaySheets(container = document.body) {
+  const wired = /* @__PURE__ */ new Map();
+  const sync = () => {
+    for (const child of container.children) {
+      if (child instanceof HTMLElement && child.matches(SHEET_SELECTOR) && !wired.has(child))
+        wired.set(child, wireSheet(child));
+    }
+    for (const [wrapper, dispose] of wired) {
+      if (wrapper.parentNode === container) continue;
+      dispose();
+      wired.delete(wrapper);
+    }
+  };
+  const observer = new MutationObserver(sync);
+  observer.observe(container, { childList: true });
+  sync();
+  return () => {
+    observer.disconnect();
+    for (const dispose of wired.values()) dispose();
+    wired.clear();
+  };
+}
+function sheetOf(wrapper) {
+  if (wrapper.localName === "dialog") return wrapper;
+  const sheet = wrapper.firstElementChild;
+  return sheet instanceof HTMLElement ? sheet : null;
+}
+function wireSheet(wrapper) {
+  const handle = createSheetHandle({
+    class: OVERLAY_SHEET_HANDLE_CLASS,
+    "data-morph-preserve": ""
+  });
+  const place = () => {
+    const sheet = sheetOf(wrapper);
+    if (sheet !== null && sheet.firstChild !== handle)
+      sheet.insertBefore(handle, sheet.firstChild);
+  };
+  place();
+  const observer = new MutationObserver(place);
+  observer.observe(wrapper, { childList: true, subtree: true });
+  const unwire = wireSheetHandle(handle, {
+    // Input only reaches a connected grabber, which sits in the sheet.
+    get panel() {
+      return sheetOf(wrapper);
+    },
+    host: wrapper,
+    property: OVERLAY_SHEET_HEIGHT_PROPERTY,
+    enabled: () => !wrapper.inert
+  });
+  return () => {
+    observer.disconnect();
+    unwire();
+    handle.remove();
+    wrapper.style.removeProperty(OVERLAY_SHEET_HEIGHT_PROPERTY);
+  };
+}
+
+export { wireOverlaySheets };
+
+//# sourceMappingURL=chunk-5NQF35VO.js.map

package/dist/chunk-5NQF35VO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/wiring/wire-overlay-sheets.ts"],"names":[],"mappings":"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","file":"chunk-5NQF35VO.js","sourcesContent":["import {\n  createSheetHandle,\n  wireSheetHandle,\n} from '../internal/sheet-handle.js';\n\n/**\n * The class that opts a core `kerfjs/overlay` bottom sheet into resizing:\n * pass it with the default wrapper class, as\n * `className: 'kerf-overlay kui-overlay-sheet-resizable'`.\n */\nexport const OVERLAY_SHEET_RESIZABLE_CLASS = 'kui-overlay-sheet-resizable';\n\n/** The grabber's class, styled by `@kerfjs/ui/overlay-sheet.css`. */\nexport const OVERLAY_SHEET_HANDLE_CLASS = 'kui-overlay-sheet-handle';\n\n/** The wrapper variable holding a resized sheet's visible height. */\nexport const OVERLAY_SHEET_HEIGHT_PROPERTY = '--_kui-overlay-sheet-height';\n\nconst SHEET_SELECTOR = `.kerf-overlay.${OVERLAY_SHEET_RESIZABLE_CLASS}[data-presentation=\"bottom-sheet\"]`;\n\n/**\n * Give every resizable core `kerfjs/overlay` bottom sheet opened in\n * `container` the resize grabber a `resizable` `DialogSurface` sheet has: a\n * `role=\"separator\"` at the sheet's top edge that resizes its visible height\n * by drag or keyboard (arrows, Page Up/Down, Home, End), between\n * `--kui-overlay-sheet-min-height` (160px) and the sheet's cap below the top\n * safe area. A sheet opts in with the `kui-overlay-sheet-resizable` class\n * (`overlay()` and the promise dialogs alike) and opens at its content\n * height each time.\n *\n * kerf appends each overlay to its `container` (`document.body` by\n * default), so call this once per container you open sheets in. The grabber\n * is `data-morph-preserve` and returns to the top of the sheet after each\n * re-render of the overlay's content. Requires\n * `@kerfjs/ui/overlay-sheet.css`. Returns a disposer that removes every\n * grabber and stops watching.\n */\nexport function wireOverlaySheets(\n  container: ParentNode = document.body,\n): () => void {\n  const wired = new Map<HTMLElement, () => void>();\n  const sync = (): void => {\n    for (const child of container.children) {\n      if (\n        child instanceof HTMLElement &&\n        child.matches(SHEET_SELECTOR) &&\n        !wired.has(child)\n      )\n        wired.set(child, wireSheet(child));\n    }\n    for (const [wrapper, dispose] of wired) {\n      if (wrapper.parentNode === container) continue;\n      dispose();\n      wired.delete(wrapper);\n    }\n  };\n  const observer = new MutationObserver(sync);\n  observer.observe(container, { childList: true });\n  sync();\n  return () => {\n    observer.disconnect();\n    for (const dispose of wired.values()) dispose();\n    wired.clear();\n  };\n}\n\n/**\n * The sheet is the native `<dialog>` itself, or the plain wrapper's content\n * root (the wrapper is the backdrop).\n */\nfunction sheetOf(wrapper: HTMLElement): HTMLElement | null {\n  if (wrapper.localName === 'dialog') return wrapper;\n  const sheet = wrapper.firstElementChild;\n  return sheet instanceof HTMLElement ? sheet : null;\n}\n\nfunction wireSheet(wrapper: HTMLElement): () => void {\n  const handle = createSheetHandle({\n    class: OVERLAY_SHEET_HANDLE_CLASS,\n    'data-morph-preserve': '',\n  });\n  // A re-render may move the preserved grabber behind the new content, or\n  // replace the content root that held it: keep it first in the sheet, so it\n  // is the sheet's first tab stop and sticks to its top edge.\n  const place = (): void => {\n    const sheet = sheetOf(wrapper);\n    if (sheet !== null && sheet.firstChild !== handle)\n      sheet.insertBefore(handle, sheet.firstChild);\n  };\n  place();\n  const observer = new MutationObserver(place);\n  observer.observe(wrapper, { childList: true, subtree: true });\n  const unwire = wireSheetHandle(handle, {\n    // Input only reaches a connected grabber, which sits in the sheet.\n    get panel() {\n      return sheetOf(wrapper)!;\n    },\n    host: wrapper,\n    property: OVERLAY_SHEET_HEIGHT_PROPERTY,\n    enabled: () => !wrapper.inert,\n  });\n  return () => {\n    observer.disconnect();\n    unwire();\n    handle.remove();\n    wrapper.style.removeProperty(OVERLAY_SHEET_HEIGHT_PROPERTY);\n  };\n}\n"]}

package/dist/chunk-6C6DLP3W.js

@@ -0,0 +1,31 @@
+// src/catalog/ux-review.ts
+var UX_REVIEW_PROJECT_PATH = "__ux-review/project.json";
+function uxReviewCaptureUrl({
+  projectDirectory,
+  title,
+  context
+}) {
+  const url = new URL("uxreview://capture");
+  url.searchParams.set("kind", "screenshot");
+  url.searchParams.set("target", "region");
+  url.searchParams.set("project", projectDirectory);
+  url.searchParams.set("title", title);
+  url.searchParams.set("context", context);
+  return url.href;
+}
+var ABSOLUTE_PATH = /^(?:\/|[A-Za-z]:[\\/])/;
+async function loadUxReviewProject(pageUrl, fetchImpl = globalThis.fetch) {
+  try {
+    const response = await fetchImpl(new URL(UX_REVIEW_PROJECT_PATH, pageUrl));
+    if (!response.ok) return null;
+    const data = await response.json();
+    const directory = typeof data === "object" && data !== null && "projectDirectory" in data ? data.projectDirectory : void 0;
+    return typeof directory === "string" && ABSOLUTE_PATH.test(directory) ? directory : null;
+  } catch {
+    return null;
+  }
+}
+
+export { UX_REVIEW_PROJECT_PATH, loadUxReviewProject, uxReviewCaptureUrl };
+
+//# sourceMappingURL=chunk-6C6DLP3W.js.map

package/dist/chunk-6C6DLP3W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalog/ux-review.ts"],"names":[],"mappings":";AAQO,IAAM,sBAAA,GAAyB;AAa/B,SAAS,kBAAA,CAAmB;AAAA,EACjC,gBAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,GAAA,GAAM,IAAI,GAAA,CAAI,oBAAoB,CAAA;AACxC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,MAAA,EAAQ,YAAY,CAAA;AACzC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,QAAA,EAAU,QAAQ,CAAA;AACvC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,SAAA,EAAW,gBAAgB,CAAA;AAChD,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,OAAA,EAAS,KAAK,CAAA;AACnC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,SAAA,EAAW,OAAO,CAAA;AACvC,EAAA,OAAO,GAAA,CAAI,IAAA;AACb;AAGA,IAAM,aAAA,GAAgB,wBAAA;AAOtB,eAAsB,mBAAA,CACpB,OAAA,EACA,SAAA,GAAqC,UAAA,CAAW,KAAA,EACxB;AACxB,EAAA,IAAI;AACF,IAAA,MAAM,WAAW,MAAM,SAAA,CAAU,IAAI,GAAA,CAAI,sBAAA,EAAwB,OAAO,CAAC,CAAA;AACzE,IAAA,IAAI,CAAC,QAAA,CAAS,EAAA,EAAI,OAAO,IAAA;AACzB,IAAA,MAAM,IAAA,GAAgB,MAAM,QAAA,CAAS,IAAA,EAAK;AAC1C,IAAA,MAAM,SAAA,GACJ,OAAO,IAAA,KAAS,QAAA,IAAY,SAAS,IAAA,IAAQ,kBAAA,IAAsB,IAAA,GAC/D,IAAA,CAAK,gBAAA,GACL,KAAA,CAAA;AACN,IAAA,OAAO,OAAO,SAAA,KAAc,QAAA,IAAY,cAAc,IAAA,CAAK,SAAS,IAChE,SAAA,GACA,IAAA;AAAA,EACN,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF","file":"chunk-6C6DLP3W.js","sourcesContent":["/**\n * Browser helpers for UX Review region captures from a catalog. The local\n * project directory comes from `uxReviewPlugin` (`@kerfjs/ui/vite-ux-review`),\n * which serves it to the catalog page on a Vite dev or preview server; static\n * hosting has no such endpoint, so a catalog there shows no capture link.\n */\n\n/** Where `uxReviewPlugin` serves `{ projectDirectory }`, relative to the catalog page. */\nexport const UX_REVIEW_PROJECT_PATH = '__ux-review/project.json';\n\n/** What a UX Review region capture is preset with. */\nexport interface UxReviewCapture {\n  /** The absolute project directory UX Review files the review under. */\n  projectDirectory: string;\n  /** The review title. */\n  title: string;\n  /** Review context: what was selected and where. */\n  context: string;\n}\n\n/** A `uxreview://capture` link that starts a region screenshot for a project. */\nexport function uxReviewCaptureUrl({\n  projectDirectory,\n  title,\n  context,\n}: UxReviewCapture): string {\n  const url = new URL('uxreview://capture');\n  url.searchParams.set('kind', 'screenshot');\n  url.searchParams.set('target', 'region');\n  url.searchParams.set('project', projectDirectory);\n  url.searchParams.set('title', title);\n  url.searchParams.set('context', context);\n  return url.href;\n}\n\n/** POSIX (`/…`) or Windows drive (`C:\\…`, `C:/…`) absolute path. */\nconst ABSOLUTE_PATH = /^(?:\\/|[A-Za-z]:[\\\\/])/;\n\n/**\n * Ask the server that served `pageUrl` for its UX Review project directory.\n * Resolves `null` when there is none (static hosting, a server without the\n * plugin, a malformed answer, or a network failure); never rejects.\n */\nexport async function loadUxReviewProject(\n  pageUrl: string | URL,\n  fetchImpl: typeof globalThis.fetch = globalThis.fetch,\n): Promise<string | null> {\n  try {\n    const response = await fetchImpl(new URL(UX_REVIEW_PROJECT_PATH, pageUrl));\n    if (!response.ok) return null;\n    const data: unknown = await response.json();\n    const directory =\n      typeof data === 'object' && data !== null && 'projectDirectory' in data\n        ? data.projectDirectory\n        : undefined;\n    return typeof directory === 'string' && ABSOLUTE_PATH.test(directory)\n      ? directory\n      : null;\n  } catch {\n    return null;\n  }\n}\n"]}

package/dist/chunk-6E2H2E5A.js

@@ -0,0 +1,196 @@
+import { ToolbarText } from './chunk-EKHDLBRP.js';
+import { paneConfigProps } from './chunk-LPHU44S3.js';
+import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+import { Toolbar } from './chunk-CMLPFIC5.js';
+import { List } from './chunk-HZPHCSCS.js';
+import { Pane } from './chunk-M5KZ26VV.js';
+import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { ChevronLeft } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_SAFE_AREA_EDGES = [
+  "block-start",
+  "inline-start",
+  "inline-end"
+];
+var DEFAULT_BOTTOM_SAFE_AREA_EDGES = [
+  "block-end",
+  "inline-start",
+  "inline-end"
+];
+function chromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function NavStack({
+  id,
+  label,
+  views,
+  backLabel = "Back",
+  backIcon,
+  backText,
+  toolbarConfig = {},
+  panelToggle,
+  hideToolbar = false,
+  bottomToolbar,
+  separator = "auto",
+  chromeDividers = "scroll",
+  chromePresentation = "docked",
+  bottomToolbarPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  background,
+  tint,
+  className = "",
+  slot
+}) {
+  const tinted = surfaceTintAttributes(tint);
+  const topIndex = views.length - 1;
+  const top = views[topIndex];
+  const topToolbar = top?.toolbar;
+  const bottom = top?.bottomToolbar ?? bottomToolbar;
+  const canPop = views.length > 1;
+  const topDensity = topToolbar?.density ?? toolbarConfig.density;
+  const centerTitle = canPop && topToolbar?.center === void 0;
+  const title = /* @__PURE__ */ jsx(
+    ToolbarText,
+    {
+      text: topToolbar?.title ?? "",
+      size: topToolbar?.titleSize ?? toolbarConfig.titleSize ?? (canPop ? "large" : "xlarge"),
+      headingLevel: topToolbar?.headingLevel ?? toolbarConfig.headingLevel,
+      fill: !centerTitle
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-nav-stack ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
+      id,
+      "data-component": "nav-stack",
+      "data-nav-stack-id": id,
+      "data-depth": String(views.length),
+      "data-separator": separator,
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "data-chrome-presentation": chromePresentation !== "docked" && !hideToolbar ? "overlay" : void 0,
+      "data-chrome-material": chromePresentation === "clear" && !hideToolbar ? "clear" : void 0,
+      "data-bottom-toolbar-presentation": bottomToolbarPresentation !== "docked" ? "overlay" : void 0,
+      "data-bottom-toolbar-material": bottomToolbarPresentation === "clear" ? "clear" : void 0,
+      ...scrollEdgeAttributes(
+        scrollEdge,
+        scrollEdgeDistance,
+        chromePresentation === "clear" && !hideToolbar || bottomToolbarPresentation === "clear"
+      ),
+      "data-background": background === void 0 ? void 0 : "",
+      "data-kui-tint": tinted["data-kui-tint"],
+      "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+      style: joinStyles(
+        background === void 0 ? void 0 : `--_kui-nav-stack-background:${background}`,
+        tinted.style
+      ),
+      "aria-label": label,
+      slot,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: topToolbar?.label ?? toolbarConfig.label,
+            density: topDensity,
+            dividerSides: topToolbar?.dividerSides ?? toolbarConfig.dividerSides,
+            centerAlign: centerTitle ? "balanced" : topToolbar?.centerAlign ?? toolbarConfig.centerAlign,
+            responsive: topToolbar?.responsive ?? toolbarConfig.responsive,
+            responsiveAt: topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt,
+            safeAreaEdges: topToolbar?.safeAreaEdges ?? toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES,
+            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+              canPop && /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  content: backText ? "mixed" : "icon",
+                  size: topDensity === "compact" ? "compact" : "default",
+                  material: chromePresentation === "clear" ? "glass" : void 0,
+                  single: true,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      class: "kui-nav-stack__back",
+                      "data-nav-back": true,
+                      "aria-label": backText ? void 0 : backLabel,
+                      children: [
+                        backIcon ?? /* @__PURE__ */ jsx(
+                          LucideIcon,
+                          {
+                            icon: ChevronLeft,
+                            name: "chevron-left",
+                            className: "kui-nav-stack__back-icon"
+                          }
+                        ),
+                        backText ? /* @__PURE__ */ jsx("span", { children: backText }) : null
+                      ]
+                    }
+                  )
+                }
+              ),
+              topToolbar?.leading,
+              centerTitle ? null : title
+            ] }),
+            center: centerTitle ? title : topToolbar?.center,
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              topToolbar?.trailing,
+              panelToggle
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
+          "article",
+          {
+            class: "kui-nav-stack__view",
+            "data-key": view.key,
+            "data-nav-key": view.key,
+            "data-nav-active": String(index === topIndex),
+            "aria-hidden": String(index !== topIndex),
+            children: view.pane || view.header !== void 0 || view.footer !== void 0 ? /* @__PURE__ */ jsx(
+              Pane,
+              {
+                ...paneConfigProps(view.pane),
+                header: view.header === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-header": true, children: chromeList(view.header, view.headerList) }),
+                footer: view.footer === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-footer": true, children: chromeList(view.footer, view.footerList) }),
+                children: view.content
+              }
+            ) : view.content
+          }
+        )) }),
+        bottom && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            position: "footer",
+            label: bottom.label,
+            density: bottom.density,
+            dividerSides: bottom.dividerSides,
+            centerAlign: bottom.centerAlign,
+            responsive: bottom.responsive,
+            responsiveAt: bottom.responsiveAt,
+            safeAreaEdges: bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES,
+            leading: bottom.leading,
+            center: bottom.center,
+            trailing: bottom.trailing
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { NavStack };
+
+//# sourceMappingURL=chunk-6E2H2E5A.js.map