@k2b/ui 0.23.0 → 0.25.0

package/dist/ssr/layout/TableOfContents.js

@@ -0,0 +1,79 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<nav class=\"", "\"", "><p class=\"k2b-toc__title\"", ">", "</p><ol class=\"k2b-toc__list\">", "</ol></nav>"],
+  _tmpl$2 = ["<li><a class=\"k2b-toc__link\" href=\"", "\"", ">", "</a></li>"];
+import { createEffect, createSignal, createUniqueId, For, onCleanup, Show, untrack } from "solid-js";
+import { resolveMaybeAccessor } from "../inputs/field-contract";
+import { assertStableUiId } from "./stable-id";
+import { useTableOfContentsMessages } from "./table-of-contents-messages";
+/**
+ * Native section links with a scroll spy on the window or a content container.
+ * @example <TableOfContents items={[{ id: "sharing", label: "Sharing" }]} sticky />
+ */
+export function TableOfContents(props) {
+  const t = useTableOfContentsMessages();
+  const headingId = assertStableUiId(`k2b-toc-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-")}`, "TableOfContents heading id");
+  const [active, setActive] = createSignal(props.items[0]?.id);
+  createEffect(() => {
+    // Reading every id here makes a changed id or a store update recompute the active section.
+    const ids = props.items.map(item => item.id);
+    const root = resolveMaybeAccessor(props.scrollRoot);
+    const target = root ?? window;
+    let frame;
+    const update = () => {
+      frame = undefined;
+      const box = root?.getBoundingClientRect();
+      const top = box ? box.top + (root?.clientTop ?? 0) : 0;
+      const height = root?.clientHeight ?? window.innerHeight;
+      const line = top + height / 4;
+      const headings = ids.map(id => ({
+        id,
+        box: document.getElementById(id)?.getBoundingClientRect()
+      }));
+      let next = ids[0];
+      for (const heading of headings) if (heading.box && heading.box.top <= line) next = heading.id;
+      const last = headings.at(-1);
+      const atEnd = root ? root.scrollHeight - root.clientHeight - root.scrollTop <= 4 : document.documentElement.scrollHeight - window.innerHeight - window.scrollY <= 4;
+      if (atEnd && last?.box && last.box.top < top + height && last.box.bottom > top) next = last.id;
+      if (next !== active()) {
+        setActive(next);
+        props.onActiveChange?.(next);
+      }
+    };
+    const schedule = () => {
+      if (frame === undefined) frame = requestAnimationFrame(update);
+    };
+    target.addEventListener("scroll", schedule, {
+      passive: true
+    });
+    window.addEventListener("resize", schedule);
+    const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(schedule);
+    // No scroll or window resize happens when the root, a block above a heading, or a heading's own section changes size.
+    const observed = new Set([root ?? document.documentElement, ...(root?.children ?? [document.body]), ...ids.map(id => document.getElementById(id)?.parentElement)]);
+    for (const element of observed) if (element) observer?.observe(element);
+    untrack(update);
+    onCleanup(() => {
+      target.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      observer?.disconnect();
+      if (frame !== undefined) cancelAnimationFrame(frame);
+    });
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return props.items.length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$, `k2b-toc${props.class ? ` ${_$escape(props.class, true)}` : ""}`, _$ssrAttribute("data-sticky", props.sticky ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(props.title ?? t().title), _$escape(_$createComponent(For, {
+        get each() {
+          return props.items;
+        },
+        children: item => _$ssr(_tmpl$2, `#${_$escape(item.id, true)}`, _$ssrAttribute("aria-current", active() === item.id ? "location" : _$escape(undefined, true), false), _$escape(item.label))
+      })));
+    }
+  });
+}
+export default TableOfContents;
+//# sourceMappingURL=TableOfContents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/TableOfContents.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, type JSX, onCleanup, Show, untrack } from \"solid-js\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { resolveMaybeAccessor } from \"../inputs/field-contract\";\nimport { assertStableUiId } from \"./stable-id\";\nimport { useTableOfContentsMessages } from \"./table-of-contents-messages\";\n\nexport type TableOfContentsItem = { id: string; label: string };\nexport type TableOfContentsProps = {\n  items: readonly TableOfContentsItem[];\n  /** Visible heading and navigation name. Defaults to the localized \"On this page\". */\n  title?: string;\n  /** Element whose scrolling decides the active section. Defaults to the window. */\n  scrollRoot?: MaybeAccessor<HTMLElement | undefined>;\n  /** Stay in view inside the caller's layout. */\n  sticky?: boolean;\n  /** Called when another section becomes active. */\n  onActiveChange?: (id: string | undefined) => void;\n  class?: string;\n};\n\n/**\n * Native section links with a scroll spy on the window or a content container.\n * @example <TableOfContents items={[{ id: \"sharing\", label: \"Sharing\" }]} sticky />\n */\nexport function TableOfContents(props: TableOfContentsProps): JSX.Element {\n  const t = useTableOfContentsMessages();\n  const headingId = assertStableUiId(`k2b-toc-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\")}`, \"TableOfContents heading id\");\n  const [active, setActive] = createSignal(props.items[0]?.id);\n  createEffect(() => {\n    // Reading every id here makes a changed id or a store update recompute the active section.\n    const ids = props.items.map((item) => item.id);\n    const root = resolveMaybeAccessor(props.scrollRoot);\n    const target = root ?? window;\n    let frame: number | undefined;\n    const update = () => {\n      frame = undefined;\n      const box = root?.getBoundingClientRect();\n      const top = box ? box.top + (root?.clientTop ?? 0) : 0;\n      const height = root?.clientHeight ?? window.innerHeight;\n      const line = top + height / 4;\n      const headings = ids.map((id) => ({ id, box: document.getElementById(id)?.getBoundingClientRect() }));\n      let next = ids[0];\n      for (const heading of headings) if (heading.box && heading.box.top <= line) next = heading.id;\n      const last = headings.at(-1);\n      const atEnd = root\n        ? root.scrollHeight - root.clientHeight - root.scrollTop <= 4\n        : document.documentElement.scrollHeight - window.innerHeight - window.scrollY <= 4;\n      if (atEnd && last?.box && last.box.top < top + height && last.box.bottom > top) next = last.id;\n      if (next !== active()) {\n        setActive(next);\n        props.onActiveChange?.(next);\n      }\n    };\n    const schedule = () => {\n      if (frame === undefined) frame = requestAnimationFrame(update);\n    };\n    target.addEventListener(\"scroll\", schedule, { passive: true });\n    window.addEventListener(\"resize\", schedule);\n    const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(schedule);\n    // No scroll or window resize happens when the root, a block above a heading, or a heading's own section changes size.\n    const observed = new Set<Element | null | undefined>([\n      root ?? document.documentElement,\n      ...(root?.children ?? [document.body]),\n      ...ids.map((id) => document.getElementById(id)?.parentElement),\n    ]);\n    for (const element of observed) if (element) observer?.observe(element);\n    untrack(update);\n    onCleanup(() => {\n      target.removeEventListener(\"scroll\", schedule);\n      window.removeEventListener(\"resize\", schedule);\n      observer?.disconnect();\n      if (frame !== undefined) cancelAnimationFrame(frame);\n    });\n  });\n  return (\n    <Show when={props.items.length > 0}>\n      <nav\n        class={`k2b-toc${props.class ? ` ${props.class}` : \"\"}`}\n        data-sticky={props.sticky ? \"true\" : undefined}\n        aria-labelledby={headingId}\n      >\n        <p class=\"k2b-toc__title\" id={headingId}>\n          {props.title ?? t().title}\n        </p>\n        <ol class=\"k2b-toc__list\">\n          <For each={props.items}>\n            {(item) => (\n              <li>\n                <a class=\"k2b-toc__link\" href={`#${item.id}`} aria-current={active() === item.id ? \"location\" : undefined}>\n                  {item.label}\n                </a>\n              </li>\n            )}\n          </For>\n        </ol>\n      </nav>\n    </Show>\n  );\n}\nexport default TableOfContents;\n"],"mappings":";;;;;;AAAA,SAAS,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,EAAY,SAAS,EAAE,IAAI,EAAE,OAAO,QAAQ,UAAU;AAE9G,SAAS,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAS,gBAAgB,QAAQ,aAAa;AAC9C,SAAS,0BAA0B,QAAQ,8BAA8B;AAgBzE;AACA;AACA;AACA;AACA,OAAO,SAAS,eAAe,CAAC,KAA2B,EAAe;EACxE,MAAM,CAAC,GAAG,0BAA0B,CAAC,CAAC;EACtC,MAAM,SAAS,GAAG,gBAAgB,CAAC,WAAW,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,EAAE,4BAA4B,CAAC;EAC/H,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAC5D,YAAY,CAAC,MAAM;IACjB;IACA,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAE,IAAI,IAAK,IAAI,CAAC,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC;IACnD,MAAM,MAAM,GAAG,IAAI,IAAI,MAAM;IAC7B,IAAI,KAAyB;IAC7B,MAAM,MAAM,GAAG,MAAM;MACnB,KAAK,GAAG,SAAS;MACjB,MAAM,GAAG,GAAG,IAAI,EAAE,qBAAqB,CAAC,CAAC;MACzC,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC;MACtD,MAAM,MAAM,GAAG,IAAI,EAAE,YAAY,IAAI,MAAM,CAAC,WAAW;MACvD,MAAM,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC;MAC7B,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAE,EAAE,KAAM;QAAE,EAAE;QAAE,GAAG,EAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,qBAAqB,CAAC;MAAE,CAAC,CAAC,CAAC;MACrG,IAAI,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC;MACjB,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,IAAI,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,EAAE;MAC7F,MAAM,IAAI,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;MAC5B,MAAM,KAAK,GAAG,IAAI,GACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,GAC3D,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,IAAI,CAAC;MACpF,IAAI,KAAK,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC,EAAE;MAC9F,IAAI,IAAI,KAAK,MAAM,CAAC,CAAC,EAAE;QACrB,SAAS,CAAC,IAAI,CAAC;QACf,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;MAC9B;IACF,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM;MACrB,IAAI,KAAK,KAAK,SAAS,EAAE,KAAK,GAAG,qBAAqB,CAAC,MAAM,CAAC;IAChE,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE;MAAE,OAAO,EAAE;IAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC3C,MAAM,QAAQ,GAAG,OAAO,cAAc,KAAK,WAAW,GAAG,SAAS,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC;IACjG;IACA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAA6B,CACnD,IAAI,IAAI,QAAQ,CAAC,eAAe,EAChC,IAAI,IAAI,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EACtC,GAAG,GAAG,CAAC,GAAG,CAAE,EAAE,IAAK,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,CAC/D,CAAC;IACF,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,IAAI,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC;IACvE,OAAO,CAAC,MAAM,CAAC;IACf,SAAS,CAAC,MAAM;MACd,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC9C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC9C,QAAQ,EAAE,UAAU,CAAC,CAAC;MACtB,IAAI,KAAK,KAAK,SAAS,EAAE,oBAAoB,CAAC,KAAK,CAAC;IACtD,CAAC,CAAC;EACJ,CAAC,CAAC;EACF,yBACG,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;IAAA;IAAA;MAAA,qBAEvB,UAAU,KAAK,CAAC,KAAK,GAAG,aAAI,KAAK,CAAC,KAAK,SAAE,GAAG,EAAE,EAAE,gCAC1C,KAAK,CAAC,MAAM,GAAG,MAAM,YAAG,SAAS,6DAC7B,SAAS,+CAEI,SAAS,0BACpC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,8BAGxB,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA,UAClB,IAAI,mBAE6B,aAAI,IAAI,CAAC,EAAE,SAAE,iCAAgB,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,GAAG,UAAU,YAAG,SAAS,0BACtG,IAAI,CAAC,KAAK;MAGhB;IAAA;EAAA;AAMb;AACA,eAAe,eAAe","ignoreList":[]}

package/dist/ssr/layout/app-workspace-controller.js

@@ -10,8 +10,6 @@ const COMPACT_QUERY = "(min-width: 48rem) and (max-width: 63.999rem)";
 const FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "input:not([disabled]):not([type='hidden'])", "select:not([disabled])", "textarea:not([disabled])", "[tabindex]:not([tabindex='-1'])"].join(",");
 /** Text entry, menus, dialogs, and open popups keep their own keys. */
 const KEY_OWNER_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox'], [role='combobox'], [role='searchbox'], [role='spinbutton'], [role='menu'], [role='listbox'], [role='dialog'], dialog, [aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true']";
-const LABEL_SELECTOR = ".k2b-app-workspace__sidebar-item-label[data-marquee='true']";
-const LABEL_TEXT_SELECTOR = ".k2b-app-workspace__sidebar-item-label-text";
 const ITEM_SELECTOR = ".k2b-app-workspace__sidebar-item";
 const clamp = (value, min, max) => Math.round(Math.min(max, Math.max(min, value)));
 const eventElement = event => event.target instanceof Element ? event.target : null;
@@ -164,25 +162,6 @@ const reconcilePanes = (root, layoutState, active = null) => {
   fits.forEach((fit, index) => updateHandleValue(root, fit.handle, "pane", sizes[index]));
 };
 
-/**
- * Marquee support for a truncated sidebar label.
- *
- * The animation needs to know how far to travel, and that is only knowable
- * once the label has been laid out — so it is measured lazily, on the same
- * hover/focus that triggers it, and published as a custom property. Labels
- * that fit get no `data-overflow`, so they never animate. A revealed row action
- * pads the label's fading end, so the text is measured against the content box.
- */
-const measureLabel = label => {
-  const text = label.querySelector(LABEL_TEXT_SELECTOR);
-  if (!text) return;
-  const style = getComputedStyle(label);
-  const width = label.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
-  const overflow = Math.max(0, text.scrollWidth - width);
-  label.style.setProperty("--k2b-sidebar-label-overflow", `${overflow}px`);
-  if (overflow > 2) label.dataset.overflow = "true";else delete label.dataset.overflow;
-};
-
 /** An open overlay remembers the regions it made inert, so it leaves the application's own `inert` alone. */
 
 /**
@@ -521,11 +500,21 @@ export const installAppWorkspaceController = (options = {}) => {
         const target = cell?.isConnected && main?.contains(cell) ? cell : snapshot.item;
         if (phone?.matches && main) {
           // The sheet covers Main's lower part, so the item ends 8px above it;
-          // a step can also land above Main's top or beside it, as in a board.
+          // the other edges include the scroller's scroll padding, like scrollIntoView.
           const page = ownerDocument.scrollingElement;
           const vertical = verticalScroller(target, main) ?? page;
           const horizontal = scrollerOn("x", target, main) ?? page;
-          const bounds = scroller => scroller && scroller !== page ? scroller.getBoundingClientRect() : null;
+          const bounds = scroller => {
+            if (!scroller || scroller === page) return null;
+            const rect = scroller.getBoundingClientRect();
+            const style = ownerWindow.getComputedStyle(scroller);
+            const padding = value => Number.parseFloat(value) || 0;
+            return {
+              top: rect.top + padding(style.scrollPaddingTop),
+              left: rect.left + padding(style.scrollPaddingLeft),
+              right: rect.right - padding(style.scrollPaddingRight)
+            };
+          };
           const box = target.getBoundingClientRect();
           const top = Math.max(0, bounds(vertical)?.top ?? 0);
           const left = Math.max(0, bounds(horizontal)?.left ?? 0);
@@ -1070,43 +1059,23 @@ export const installAppWorkspaceController = (options = {}) => {
     if (handle && kind && root && controlsResizableRegion(root, handle, kind)) {
       updateHandleValue(root, handle, kind, currentSize(root, handle, kind));
     }
-    const label = eventElement(event)?.closest(ITEM_SELECTOR)?.querySelector(LABEL_SELECTOR);
-    if (label) requestAnimationFrame(() => measureLabel(label));
-  };
-
-  // Measured on entry rather than on every render: `scrollWidth` forces layout,
-  // and a sidebar can hold hundreds of rows.
-  const onPointerOver = event => {
-    const label = eventElement(event)?.closest(LABEL_SELECTOR);
-    if (!label || event.relatedTarget instanceof Node && label.contains(event.relatedTarget)) return;
-    requestAnimationFrame(() => measureLabel(label));
-  };
-
-  // A resize changes every label's available width, so the cached measurement
-  // is dropped and taken again on the next hover or focus.
-  const clearMeasuredLabels = () => {
-    eventRoot.querySelectorAll(LABEL_SELECTOR).forEach(label => {
-      delete label.dataset.overflow;
-      label.style.removeProperty("--k2b-sidebar-label-overflow");
-    });
   };
 
   // Geometry can change without a window resize: a parent can resize the
   // workspace, or a detail/pane can open. All sources share one frame so a
   // transition performs at most one layout reconciliation.
   let reconcileFrame = null;
-  const scheduleReconcile = (clearLabels = false) => {
-    if (clearLabels) clearMeasuredLabels();
+  const scheduleReconcile = () => {
     if (reconcileFrame !== null) return;
     reconcileFrame = requestAnimationFrame(() => {
       reconcileFrame = null;
       reconcile();
     });
   };
-  const onResize = () => scheduleReconcile(true);
+  const onResize = () => scheduleReconcile();
   const observedRoots = new Set();
   const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
-    scheduleReconcile(true);
+    scheduleReconcile();
   });
   const syncObservedRoots = () => {
     for (const elements of [touchedDetails, titleTabIndices, motionRoots]) {
@@ -1196,7 +1165,6 @@ export const installAppWorkspaceController = (options = {}) => {
   compact?.addEventListener("change", onCompactChange);
   eventRoot.addEventListener("keydown", onKeyDown);
   eventRoot.addEventListener("focusin", onFocusIn);
-  eventRoot.addEventListener("pointerover", onPointerOver);
   window.addEventListener("resize", onResize);
   syncObservedRoots();
   mutationObserver?.observe(eventRoot, {
@@ -1255,7 +1223,6 @@ export const installAppWorkspaceController = (options = {}) => {
     compact?.removeEventListener("change", onCompactChange);
     eventRoot.removeEventListener("keydown", onKeyDown);
     eventRoot.removeEventListener("focusin", onFocusIn);
-    eventRoot.removeEventListener("pointerover", onPointerOver);
     window.removeEventListener("resize", onResize);
   };
 };