@k2b/ui 0.27.0 → 0.29.0

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/SidebarSwitcher.tsx"],"sourcesContent":["import { documentNavigate } from \"@k2b/ssr/nav\";\nimport { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, Show } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One container a person can switch to, such as a notebook, a space, or a mailbox. */\nexport type AppWorkspaceSwitcherOption = {\n  id: string;\n  label: string;\n  /** One secondary fact, such as a mailbox's address. */\n  description?: string;\n  /** Tabler icon class; without it the row takes the switcher's icon. */\n  icon?: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  href: string;\n};\n\n/** A row below the containers, such as \"New notebook\" or \"All notebooks\". */\nexport type AppWorkspaceSwitcherAction = {\n  id: string;\n  label: string;\n  icon: string;\n  disabled?: boolean;\n} & ({ href: string; action?: never } | { action: () => void; href?: never });\n\nexport type AppWorkspaceSidebarSwitcherProps = {\n  /** The current container's ID among `options`. */\n  currentId: string;\n  /** The current container's name. */\n  label: string;\n  /** One secondary fact under the name, such as a mailbox's address. */\n  description?: string;\n  icon: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  /** Names the button's purpose and its panel, such as \"Switch notebook\". */\n  switchLabel: string;\n  /** Every container the person can switch to, the current one included; `undefined` until they are loaded. */\n  options?: readonly AppWorkspaceSwitcherOption[];\n  /** Shown in place of the options when loading them failed; the panel offers to try again through `onLoad`. */\n  error?: string;\n  /**\n   * Asks for `options` while they are `undefined`: when a pointer or the focus first reaches the button, so the list\n   * is usually there when the panel opens, on every opening, and from the panel's retry. Ignore repeated calls while a\n   * request runs.\n   */\n  onLoad?: () => void;\n  actions?: readonly AppWorkspaceSwitcherAction[];\n  /**\n   * A host menu around the switcher, such as the phone menu, finishes dismissing itself before a chosen container\n   * opens or an action runs; `false` cancels the choice. Navigation passes its own.\n   */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n  /** Sizes the switcher in its place, such as `flex-1` beside a button in one row. */\n  class?: string;\n};\n\n/** From this many containers the panel scrolls, so it offers a search field. */\nexport const APP_WORKSPACE_SWITCHER_SEARCH_FROM = 8;\n\n/** The space between trigger and panel, and the panel's distance from the viewport edges, as for every dropdown. */\nconst SWITCHER_GAP = 4;\nconst SWITCHER_INSET = 8;\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\nconst tint = (color: string | undefined) => (color ? { \"--k2b-sidebar-switcher-color\": color } : undefined);\nconst plainClick = (event: MouseEvent) => event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n\n/**\n * The current container at the top of a sidebar: its icon, name, and an optional fact, with a chevron that opens the\n * other containers, a search field when there are many, and actions such as \"New …\" and \"All …\". The rows are links,\n * so a container also opens in a new tab. In a collapsed rail it shows only the icon and opens beside the rail.\n */\nexport function AppWorkspaceSidebarSwitcher(props: AppWorkspaceSidebarSwitcherProps): JSX.Element {\n  const messages = useUiMessages();\n  const id = `k2b-sidebar-switcher-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n  const [open, setOpen] = createSignal(false);\n  const [query, setQuery] = createSignal(\"\");\n  let trigger: HTMLButtonElement | undefined;\n  let panel: HTMLDivElement | undefined;\n  let search: HTMLInputElement | undefined;\n  let keyboardOpened = true;\n  /** Whether the panel was open when a press on the button began; the press itself light-dismisses it first. */\n  let openAtPress: boolean | undefined;\n\n  const searchable = () => (props.options?.length ?? 0) >= APP_WORKSPACE_SWITCHER_SEARCH_FROM;\n  const visible = createMemo(() => {\n    const needle = query().trim().toLocaleLowerCase();\n    const options = props.options ?? [];\n    if (!needle) return options;\n    return options.filter((option) => [option.label, option.description].some((part) => part?.toLocaleLowerCase().includes(needle)));\n  });\n  const load = () => {\n    if (props.options === undefined) props.onLoad?.();\n  };\n\n  // The collapsed rail is a narrow column from 64 rem, so the panel opens beside it instead of below.\n  const inRail = () =>\n    Boolean(\n      trigger?.closest('[data-sidebar-collapsed=\"true\"] .k2b-app-workspace__sidebar[data-workspace-collapsible=\"true\"]') &&\n        window.matchMedia(\"(min-width: 64rem)\").matches,\n    );\n  /** Whether the panel opens above its trigger; chosen on opening and on a viewport resize only. */\n  let above = false;\n  /**\n   * Places the panel beside its trigger. `choose` picks its side again; otherwise it keeps the side, so arriving\n   * options, an error, or a narrowed search never flip it to the other side while it is open.\n   */\n  const place = (choose = false) => {\n    if (!trigger || !panel) return;\n    const rect = trigger.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const rail = inRail();\n    // As wide as the sidebar row and never narrower than a menu, so long names keep their words; fixed while open,\n    // so filtering never changes the panel's width.\n    panel.style.setProperty(\"--k2b-sidebar-switcher-width\", `${rail ? 0 : Math.round(rect.width)}px`);\n    if (rail) {\n      panel.style.removeProperty(\"--k2b-sidebar-switcher-room\");\n      panel.style.removeProperty(\"min-height\");\n      panel.style.bottom = \"auto\";\n      const position = dropdownPosition(rect, panel.getBoundingClientRect(), \"right-start\", viewport);\n      panel.style.left = `${position.left}px`;\n      panel.style.top = `${position.top}px`;\n      return;\n    }\n    // Below the trigger, or above it when the panel at its tallest does not fit below and there is more room above,\n    // as in the lower half of the phone menu. Its tallest is its CSS max-height, min(28rem, 80dvh), so the side does\n    // not depend on what the panel shows at the moment. It never covers its trigger: it takes at most the room on its\n    // side, and its list scrolls.\n    const roomBelow = viewport.height - rect.bottom - SWITCHER_GAP - SWITCHER_INSET;\n    const roomAbove = rect.top - SWITCHER_GAP - SWITCHER_INSET;\n    if (choose) {\n      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      above = Math.min(28 * rem, 0.8 * viewport.height) > roomBelow && roomAbove > roomBelow;\n      panel.style.removeProperty(\"min-height\");\n    }\n    const room = Math.max(0, above ? roomAbove : roomBelow);\n    panel.style.setProperty(\"--k2b-sidebar-switcher-room\", `${room}px`);\n    panel.style.left = `${dropdownPosition(rect, panel.getBoundingClientRect(), \"bottom-right\", viewport).left}px`;\n    if (above) {\n      // Its bottom edge stays beside the trigger, and it does not shrink while open, so a narrowed search keeps the\n      // search field where the person is typing.\n      const height = Math.min(room, Math.max(panel.getBoundingClientRect().height, Number.parseFloat(panel.style.minHeight) || 0));\n      panel.style.minHeight = `${height}px`;\n      panel.style.top = \"auto\";\n      panel.style.bottom = `${document.documentElement.clientHeight - rect.top + SWITCHER_GAP}px`;\n    } else {\n      panel.style.top = `${rect.bottom + SWITCHER_GAP}px`;\n      panel.style.bottom = \"auto\";\n    }\n  };\n  const reposition = () => open() && place();\n  const resize = () => open() && place(true);\n  // Arriving options, an error, or the search field grow the panel after it opened, so its size places it too.\n  let resizing: ResizeObserver | undefined;\n  const listen = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", resize);\n    window[method](\"scroll\", reposition, true);\n    if (on && panel) {\n      resizing ??= new ResizeObserver(reposition);\n      resizing.observe(panel);\n    } else resizing?.disconnect();\n  };\n  // Server rendering cleans up too, where no window exists.\n  onCleanup(() => isServer || listen(false));\n  /** Lets the host dismiss its menu first, then opens the link or runs the action unless the host cancels. */\n  const choose = (run: () => void) => {\n    hide(false);\n    if (!props.beforeSelect) return run();\n    void Promise.resolve(props.beforeSelect()).then((allowed) => {\n      if (allowed !== false) run();\n    });\n  };\n  const follow = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {\n    if (!plainClick(event)) return;\n    if (!props.beforeSelect) return hide(false);\n    event.preventDefault();\n    const href = event.currentTarget.href;\n    choose(() => documentNavigate(href));\n  };\n\n  const rows = () => (panel ? Array.from(panel.querySelectorAll<HTMLElement>(\"[data-switcher-row]:not([aria-disabled='true'])\")) : []);\n  const focusRow = (index: number) => {\n    const all = rows();\n    if (all.length) all[(index + all.length) % all.length]?.focus();\n  };\n  const show = (focus: \"start\" | \"end\" = \"start\") => {\n    if (!panel || panel.matches(\":popover-open\")) return;\n    load();\n    keyboardOpened = ringOnReturn(trigger);\n    setQuery(\"\");\n    panel.showPopover();\n    setOpen(true);\n    listen(true);\n    place(true);\n    queueMicrotask(() => {\n      // On touch the search field waits for a tap, so the keyboard does not cover the list on opening.\n      if (searchable() && focus === \"start\" && !window.matchMedia(\"(pointer: coarse)\").matches) search?.focus();\n      else if (focus === \"end\") focusRow(-1);\n      // While the list loads, the panel holds focus, so arriving rows do not move it.\n      else (panel?.querySelector<HTMLElement>('[aria-current=\"true\"]') ?? (props.options ? rows()[0] : panel))?.focus();\n    });\n  };\n  const hide = (restoreFocus: boolean) => {\n    if (restoreFocus) returnFocus(trigger, keyboardOpened);\n    if (panel?.matches(\":popover-open\")) panel.hidePopover();\n  };\n\n  const onPanelKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const all = rows();\n    const index = all.indexOf(target);\n    if (event.key === \"Escape\") {\n      // The panel closes alone; an overlay sidebar around it stays open.\n      event.preventDefault();\n      event.stopPropagation();\n      hide(true);\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusRow(index + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if ((event.key === \"Home\" || event.key === \"End\") && target !== search) {\n      event.preventDefault();\n      focusRow(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Enter\" && target === search) {\n      event.preventDefault();\n      panel?.querySelector<HTMLElement>(\"[data-switcher-option]\")?.click();\n    } else if (\n      search &&\n      target !== search &&\n      event.key.length === 1 &&\n      event.key !== \" \" &&\n      !(event.metaKey || event.ctrlKey || event.altKey)\n    ) {\n      // Typing anywhere in a long list searches it.\n      event.preventDefault();\n      setQuery(query() + event.key);\n      search.focus();\n    }\n  };\n\n  return (\n    <div class={`k2b-sidebar-switcher ${props.class ?? \"\"}`} data-description={props.description ? \"\" : undefined}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-sidebar-switcher__trigger\"\n        aria-label={props.label}\n        aria-describedby={`${id}-purpose`}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={id}\n        // The full name for a truncated title and for the icon in a collapsed rail.\n        title={props.label}\n        onPointerEnter={load}\n        onFocus={load}\n        onPointerDown={() => (openAtPress = panel?.matches(\":popover-open\"))}\n        onClick={() => {\n          const wasOpen = openAtPress ?? panel?.matches(\":popover-open\");\n          openAtPress = undefined;\n          if (wasOpen) hide(false);\n          else show();\n        }}\n        onKeyDown={(event) => {\n          if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n          event.preventDefault();\n          if (open()) focusRow(event.key === \"ArrowDown\" ? 0 : -1);\n          else show(event.key === \"ArrowDown\" ? \"start\" : \"end\");\n        }}\n      >\n        <span class=\"k2b-sidebar-switcher__icon\" style={tint(props.color)} aria-hidden=\"true\">\n          <i class={iconClass(props.icon)} />\n        </span>\n        <span class=\"k2b-sidebar-switcher__copy\" aria-hidden=\"true\">\n          <span>{props.label}</span>\n          <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n        </span>\n        <i class=\"ti ti-selector k2b-sidebar-switcher__chevron\" aria-hidden=\"true\" />\n        <span id={`${id}-purpose`} class=\"k2b-sr-only\">\n          {[props.description, props.switchLabel].filter(Boolean).join(\", \")}\n        </span>\n      </button>\n      <div\n        ref={panel}\n        id={id}\n        popover=\"auto\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-label={props.switchLabel}\n        class=\"k2b-sidebar-switcher__panel\"\n        onKeyDown={onPanelKeyDown}\n        onFocusOut={(event) => {\n          const next = event.relatedTarget as Node | null;\n          // Tabbing out closes the panel; focus that leaves the window keeps it.\n          if (next && !panel?.contains(next) && next !== trigger) hide(false);\n        }}\n        onToggle={(event) => {\n          if ((event as ToggleEvent).newState === \"open\") return;\n          setOpen(false);\n          listen(false);\n        }}\n      >\n        <Show when={searchable()}>\n          <div class=\"k2b-choice-search k2b-sidebar-switcher__search\">\n            <i class=\"ti ti-search\" aria-hidden=\"true\" />\n            <input\n              ref={search}\n              type=\"search\"\n              data-switcher-row\n              value={query()}\n              placeholder={messages().search}\n              aria-label={messages().searchLabel}\n              aria-controls={`${id}-options`}\n              onInput={(event) => setQuery(event.currentTarget.value)}\n            />\n          </div>\n        </Show>\n        <ul id={`${id}-options`} class=\"k2b-sidebar-switcher__options\">\n          <Show\n            when={props.options}\n            fallback={\n              <li class=\"k2b-choice-status\" role=\"status\" data-tone={props.error ? \"danger\" : undefined}>\n                <Show\n                  when={props.error}\n                  fallback={\n                    <>\n                      <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                      <span>{messages().loading}</span>\n                    </>\n                  }\n                >\n                  {(error) => (\n                    <>\n                      <span>{error()}</span>\n                      <button type=\"button\" data-switcher-row onClick={() => props.onLoad?.()}>\n                        {messages().retry}\n                      </button>\n                    </>\n                  )}\n                </Show>\n              </li>\n            }\n          >\n            <For\n              each={visible()}\n              fallback={\n                <li class=\"k2b-choice-status\" role=\"status\">\n                  {messages().noResults}\n                </li>\n              }\n            >\n              {(option) => {\n                const current = () => option.id === props.currentId;\n                return (\n                  <li>\n                    <a\n                      href={option.href}\n                      class=\"k2b-dropdown__item k2b-sidebar-switcher__option\"\n                      data-switcher-row\n                      data-switcher-option\n                      aria-current={current() ? \"true\" : undefined}\n                      onClick={(event) => {\n                        // The open container is already here: choosing it only closes the panel.\n                        if (current() && plainClick(event)) {\n                          event.preventDefault();\n                          hide(true);\n                        } else follow(event);\n                      }}\n                    >\n                      <span class=\"k2b-sidebar-switcher__option-icon\" style={tint(option.color ?? props.color)} aria-hidden=\"true\">\n                        <i class={iconClass(option.icon ?? props.icon)} />\n                      </span>\n                      <span class=\"k2b-dropdown__copy\">\n                        <span>{option.label}</span>\n                        <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                      </span>\n                      <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={current() ? undefined : \"true\"} aria-hidden=\"true\" />\n                    </a>\n                  </li>\n                );\n              }}\n            </For>\n          </Show>\n        </ul>\n        <Show when={props.actions?.length}>\n          <ul class=\"k2b-sidebar-switcher__actions\">\n            <For each={props.actions}>\n              {(item) => (\n                <li>\n                  <Show\n                    when={item.href}\n                    fallback={\n                      <button\n                        type=\"button\"\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        disabled={item.disabled}\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={() => choose(() => item.action?.())}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </button>\n                    }\n                  >\n                    {(href) => (\n                      <a\n                        href={item.disabled ? undefined : href()}\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={(event) => item.disabled || follow(event)}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </a>\n                    )}\n                  </Show>\n                </li>\n              )}\n            </For>\n          </ul>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAS,gBAAgB,QAAQ,cAAc;AAC/C,SAAS,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,EAAY,SAAS,EAAE,IAAI,QAAQ,UAAU;AACnG,SAAS,QAAQ,QAAQ,cAAc;AACvC,SAAS,gBAAgB,QAAQ,qBAAqB;AACtD,SAAS,WAAW,EAAE,YAAY,QAAQ,0BAA0B;AACpE,SAAS,aAAa,QAAQ,kBAAkB;;AAEhD;;AAaA;;AAwCA;AACA,OAAO,MAAM,kCAAkC,GAAG,CAAC;;AAEnD;AACA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,cAAc,GAAG,CAAC;AAExB,MAAM,SAAS,GAAI,IAAY,IAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,IAAI,EAAG;AAC5F,MAAM,IAAI,GAAI,KAAyB,IAAM,KAAK,GAAG;EAAE,8BAA8B,EAAE;AAAM,CAAC,GAAG,SAAU;AAC3G,MAAM,UAAU,GAAI,KAAiB,IAAK,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC;;AAEnI;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,2BAA2B,CAAC,KAAuC,EAAe;EAChG,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,EAAE,GAAG,wBAAwB,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE;EACrF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,EAAE,CAAC;EAC1C,IAAI,OAAsC;EAC1C,IAAI,KAAiC;EACrC,IAAI,MAAoC;EACxC,IAAI,cAAc,GAAG,IAAI;EACzB;EACA,IAAI,WAAgC;EAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,kCAAkC;EAC3F,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM;IAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE;IACnC,IAAI,CAAC,MAAM,EAAE,OAAO,OAAO;IAC3B,OAAO,OAAO,CAAC,MAAM,CAAE,MAAM,IAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAE,IAAI,IAAK,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;EAClI,CAAC,CAAC;EACF,MAAM,IAAI,GAAG,MAAM;IACjB,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC;EACnD,CAAC;;EAED;EACA,MAAM,MAAM,GAAG,MACb,OAAO,CACL,OAAO,EAAE,OAAO,CAAC,gGAAgG,CAAC,IAChH,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAC5C,CAAC;EACH;EACA,IAAI,KAAK,GAAG,KAAK;EACjB;AACF;AACA;AACA;EACE,MAAM,KAAK,GAAG,CAAC,MAAM,GAAG,KAAK,KAAK;IAChC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE;IACxB,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG;MAAE,KAAK,EAAE,MAAM,CAAC,UAAU;MAAE,MAAM,EAAE,MAAM,CAAC;IAAY,CAAC;IACzE,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC;IACrB;IACA;IACA,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IACjG,IAAI,IAAI,EAAE;MACR,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,6BAA6B,CAAC;MACzD,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC;MACxC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;MAC3B,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC;MAC/F,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,QAAQ,CAAC,IAAI,IAAI;MACvC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,GAAG,IAAI;MACrC;IACF;IACA;IACA;IACA;IACA;IACA,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,cAAc;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,GAAG,YAAY,GAAG,cAAc;IAC1D,IAAI,MAAM,EAAE;MACV,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE;MACxF,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,EAAE,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,IAAI,SAAS,GAAG,SAAS;MACtF,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC;IAC1C;IACA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACvD,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,IAAI,IAAI,CAAC;IACnE,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,IAAI,IAAI;IAC9G,IAAI,KAAK,EAAE;MACT;MACA;MACA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;MAC5H,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,MAAM,IAAI;MACrC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM;MACxB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,YAAY,IAAI;IAC7F,CAAC,MAAM;MACL,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,IAAI;MACnD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;IAC7B;EACF,CAAC;EACD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC;EAC1C,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;EAC1C;EACA,IAAI,QAAoC;EACxC,MAAM,MAAM,GAAI,EAAW,IAAK;IAC9B,MAAM,MAAM,GAAG,EAAE,GAAG,kBAAkB,GAAG,qBAAqB;IAC9D,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC;IAChC,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC;IAC1C,IAAI,EAAE,IAAI,KAAK,EAAE;MACf,QAAQ,KAAK,IAAI,cAAc,CAAC,UAAU,CAAC;MAC3C,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC;IACzB,CAAC,MAAM,QAAQ,EAAE,UAAU,CAAC,CAAC;EAC/B,CAAC;EACD;EACA,SAAS,CAAC,MAAM,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;EAC1C;EACA,MAAM,MAAM,GAAI,GAAe,IAAK;IAClC,IAAI,CAAC,KAAK,CAAC;IACX,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,GAAG,CAAC,CAAC;IACrC,KAAK,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAE,OAAO,IAAK;MAC3D,IAAI,OAAO,KAAK,KAAK,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC,CAAC;EACJ,CAAC;EACD,MAAM,MAAM,GAAI,KAAwD,IAAK;IAC3E,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;IACxB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC;IAC3C,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI;IACrC,MAAM,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC;EACtC,CAAC;EAED,MAAM,IAAI,GAAG,MAAO,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAc,iDAAiD,CAAC,CAAC,GAAG,EAAG;EACpI,MAAM,QAAQ,GAAI,KAAa,IAAK;IAClC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC;IAClB,IAAI,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC;EACjE,CAAC;EACD,MAAM,IAAI,GAAG,CAAC,KAAsB,GAAG,OAAO,KAAK;IACjD,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;IAC9C,IAAI,CAAC,CAAC;IACN,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC;IACZ,KAAK,CAAC,WAAW,CAAC,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC;IACb,MAAM,CAAC,IAAI,CAAC;IACZ,KAAK,CAAC,IAAI,CAAC;IACX,cAAc,CAAC,MAAM;MACnB;MACA,IAAI,UAAU,CAAC,CAAC,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,KACrG,IAAI,KAAK,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;MACtC;MAAA,KACK,CAAC,KAAK,EAAE,aAAa,CAAc,uBAAuB,CAAC,KAAK,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;IACnH,CAAC,CAAC;EACJ,CAAC;EACD,MAAM,IAAI,GAAI,YAAqB,IAAK;IACtC,IAAI,YAAY,EAAE,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC;IACtD,IAAI,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;EAC1D,CAAC;EAED,MAAM,cAAc,GAAI,KAAoB,IAAK;IAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC;IAClB,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC;IACjC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;MAC1B;MACA,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,KAAK,CAAC,eAAe,CAAC,CAAC;MACvB,IAAI,CAAC,IAAI,CAAC;IACZ,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;MAC/D,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,KAAK,MAAM,KAAK,MAAM,EAAE;MAC7E,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IACzC,CAAC,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,MAAM,KAAK,MAAM,EAAE;MACrD,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,KAAK,EAAE,aAAa,CAAc,wBAAwB,CAAC,EAAE,KAAK,CAAC,CAAC;IACtE,CAAC,MAAM,IACL,MAAM,IACN,MAAM,KAAK,MAAM,IACjB,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,IACtB,KAAK,CAAC,GAAG,KAAK,GAAG,IACjB,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,EACjD;MACA;MACA,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC;MAC7B,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB;EACF,CAAC;EAED,sBACc,iCAAwB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,qCAAoB,KAAK,CAAC,WAAW,GAAG,EAAE,YAAG,SAAS,uDAK7F,KAAK,CAAC,KAAK,iBACL,YAAG,EAAE,iBAAU,2CAElB,IAAI,CAAC,CAAC,2DACN,EAAE,mDAEV,KAAK,CAAC,KAAK,4BAiB8B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,oCACrD,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,0BAGxB,KAAK,CAAC,KAAK,8BACjB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,UAAI,WAAW,4BAAa,WAAW,CAAC,CAAC;EAAS,KAGvE,YAAG,EAAE,iBAAU,WACtB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,iCAKhE,EAAE,uDAIM,KAAK,CAAC,WAAW,4CAc5B,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,UAAU,CAAC,CAAC;IAAA;IAAA;MAAA,sDAOX,KAAK,CAAC,CAAC,yDACD,QAAQ,CAAC,CAAC,CAAC,MAAM,wDAClB,QAAQ,CAAC,CAAC,CAAC,WAAW,iBACnB,YAAG,EAAE,iBAAU;IAAA;EAAA,KAK5B,YAAG,EAAE,iBAAU,6BACpB,IAAI;IAAA,IACH,IAAI;MAAA,OAAE,KAAK,CAAC,OAAO;IAAA;IAAA,IACnB,QAAQ;MAAA,kDACiD,KAAK,CAAC,KAAK,GAAG,QAAQ,YAAG,SAAS,4CACtF,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,KAAK,CAAC,KAAK;QAAA;QAAA,IACjB,QAAQ;UAAA,gDAGG,QAAQ,CAAC,CAAC,CAAC,OAAO;QAAA;QAAA,UAI3B,KAAK,6BAEI,KAAK,CAAC,CAAC,4BAEX,QAAQ,CAAC,CAAC,CAAC,KAAK;MAGtB;IAAA;IAAA;MAAA,yBAKN,GAAG;QAAA,IACF,IAAI;UAAA,OAAE,OAAO,CAAC,CAAC;QAAA;QAAA,IACf,QAAQ;UAAA,+BAEH,QAAQ,CAAC,CAAC,CAAC,SAAS;QAAA;QAAA,UAIvB,MAAM,IAAK;UACX,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS;UACnD,sDAGY,MAAM,CAAC,IAAI,gDAIH,OAAO,CAAC,CAAC,GAAG,MAAM,YAAG,SAAS,4BASW,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,oCAC5E,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,0BAGvC,MAAM,CAAC,KAAK,8BAClB,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,MAAM,CAAC,WAAW;YAAA;YAAA,UAAI,WAAW,4BAAa,WAAW,CAAC,CAAC;UAAS,mCAE1B,OAAO,CAAC,CAAC,YAAG,SAAS,UAAG,MAAM;QAI9F;MAAC;IAAA;EAAA,gCAIN,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,OAAO,EAAE,MAAM;IAAA;IAAA;MAAA,iDAE5B,GAAG;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,OAAO;QAAA;QAAA,UACpB,IAAI,8CAED,IAAI;UAAA,IACH,IAAI;YAAA,OAAE,IAAI,CAAC,IAAI;UAAA;UAAA,IACf,QAAQ;YAAA,kDAKM,IAAI,CAAC,QAAQ,0CACR,IAAI,CAAC,QAAQ,GAAG,MAAM,YAAG,SAAS,kDAGvC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,0BAErB,IAAI,CAAC,KAAK;UAAA;UAAA,UAKrB,IAAI,2CAEI,IAAI,CAAC,QAAQ,YAAG,SAAS,mBAAG,IAAI,CAAC,CAAC,iDAGzB,IAAI,CAAC,QAAQ,GAAG,MAAM,YAAG,SAAS,kDAGvC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,0BAErB,IAAI,CAAC,KAAK;QAGtB;MAGN;IAAA;EAAA;AAOf","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/SidebarSwitcher.tsx"],"sourcesContent":["import { documentNavigate } from \"@k2b/ssr/nav\";\nimport { createMemo, createSignal, createUniqueId, For, type JSX, onCleanup, Show } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { dropdownPosition } from \"../actions/Dropdown\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\n\n/** One container a person can switch to, such as a notebook, a space, or a mailbox. */\nexport type AppWorkspaceSwitcherOption = {\n  id: string;\n  label: string;\n  /** One secondary fact, such as a mailbox's address. */\n  description?: string;\n  /** Tabler icon class; without it the row takes the switcher's icon. */\n  icon?: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  href: string;\n};\n\n/** A row below the containers, such as \"New notebook\" or \"All notebooks\". */\nexport type AppWorkspaceSwitcherAction = {\n  id: string;\n  label: string;\n  icon: string;\n  disabled?: boolean;\n} & ({ href: string; action?: never } | { action: () => void; href?: never });\n\nexport type AppWorkspaceSidebarSwitcherProps = {\n  /** The current container's ID among `options`. */\n  currentId: string;\n  /** The current container's name. */\n  label: string;\n  /** One secondary fact under the name, such as a mailbox's address. */\n  description?: string;\n  icon: string;\n  /** Tints the icon; without it the app accent does. */\n  color?: string;\n  /** Names the button's purpose and its panel, such as \"Switch notebook\". */\n  switchLabel: string;\n  /** Every container the person can switch to, the current one included; `undefined` until they are loaded. */\n  options?: readonly AppWorkspaceSwitcherOption[];\n  /** Shown in place of the options when loading them failed; the panel offers to try again through `onLoad`. */\n  error?: string;\n  /**\n   * Asks for `options` while they are `undefined`: when a pointer or the focus first reaches the button, so the list\n   * is usually there when the panel opens, on every opening, and from the panel's retry. Ignore repeated calls while a\n   * request runs.\n   */\n  onLoad?: () => void;\n  actions?: readonly AppWorkspaceSwitcherAction[];\n  /**\n   * A host menu around the switcher, such as the phone menu, finishes dismissing itself before a chosen container\n   * opens or an action runs; `false` cancels the choice. Navigation passes its own.\n   */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n  /** Sizes the switcher in its place, such as `flex-1` beside a button in one row. */\n  class?: string;\n};\n\n/** From this many containers the panel scrolls, so it offers a search field. */\nexport const APP_WORKSPACE_SWITCHER_SEARCH_FROM = 8;\n\n/** The space between trigger and panel, and the panel's distance from the viewport edges, as for every dropdown. */\nconst SWITCHER_GAP = 4;\nconst SWITCHER_INSET = 8;\n\nconst iconClass = (icon: string) => (icon.split(/\\s+/).includes(\"ti\") ? icon : `ti ${icon}`);\nconst tint = (color: string | undefined) => (color ? { \"--k2b-sidebar-switcher-color\": color } : undefined);\nconst plainClick = (event: MouseEvent) => event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);\n\n/**\n * The current container at the top of a sidebar: its icon, name, and an optional fact, with a chevron that opens the\n * other containers, a search field when there are many, and actions such as \"New …\" and \"All …\". The rows are links,\n * so a container also opens in a new tab. In a collapsed rail it shows only the icon and opens beside the rail.\n */\nexport function AppWorkspaceSidebarSwitcher(props: AppWorkspaceSidebarSwitcherProps): JSX.Element {\n  const messages = useUiMessages();\n  const id = `k2b-sidebar-switcher-${createUniqueId().replace(/[^a-zA-Z0-9_-]/g, \"-\")}`;\n  const [open, setOpen] = createSignal(false);\n  const [query, setQuery] = createSignal(\"\");\n  let trigger: HTMLButtonElement | undefined;\n  let panel: HTMLDivElement | undefined;\n  let search: HTMLInputElement | undefined;\n  let keyboardOpened = true;\n  /** Whether the panel was open when a press on the button began; the press itself light-dismisses it first. */\n  let openAtPress: boolean | undefined;\n\n  const searchable = () => (props.options?.length ?? 0) >= APP_WORKSPACE_SWITCHER_SEARCH_FROM;\n  const visible = createMemo(() => {\n    const needle = query().trim().toLocaleLowerCase();\n    const options = props.options ?? [];\n    if (!needle) return options;\n    return options.filter((option) => [option.label, option.description].some((part) => part?.toLocaleLowerCase().includes(needle)));\n  });\n  const load = () => {\n    if (props.options === undefined) props.onLoad?.();\n  };\n\n  // The collapsed rail is a narrow column from a 64 rem host, so the panel opens beside it instead of below.\n  // The workspace's stylesheet states which form its sidebar has.\n  const inRail = () => {\n    const sidebar = trigger?.closest('[data-sidebar-collapsed=\"true\"] .k2b-app-workspace__sidebar[data-workspace-collapsible=\"true\"]');\n    const root = sidebar?.closest<HTMLElement>(\"[data-k2b-app-workspace]\");\n    return Boolean(root && getComputedStyle(root).getPropertyValue(\"--k2b-workspace-sidebar-form\").trim() === \"column\");\n  };\n  /** Whether the panel opens above its trigger; chosen on opening and on a viewport resize only. */\n  let above = false;\n  /**\n   * Places the panel beside its trigger. `choose` picks its side again; otherwise it keeps the side, so arriving\n   * options, an error, or a narrowed search never flip it to the other side while it is open.\n   */\n  const place = (choose = false) => {\n    if (!trigger || !panel) return;\n    const rect = trigger.getBoundingClientRect();\n    const viewport = { width: window.innerWidth, height: window.innerHeight };\n    const rail = inRail();\n    // As wide as the sidebar row and never narrower than a menu, so long names keep their words; fixed while open,\n    // so filtering never changes the panel's width.\n    panel.style.setProperty(\"--k2b-sidebar-switcher-width\", `${rail ? 0 : Math.round(rect.width)}px`);\n    if (rail) {\n      panel.style.removeProperty(\"--k2b-sidebar-switcher-room\");\n      panel.style.removeProperty(\"min-height\");\n      panel.style.bottom = \"auto\";\n      const position = dropdownPosition(rect, panel.getBoundingClientRect(), \"right-start\", viewport);\n      panel.style.left = `${position.left}px`;\n      panel.style.top = `${position.top}px`;\n      return;\n    }\n    // Below the trigger, or above it when the panel at its tallest does not fit below and there is more room above,\n    // as in the lower half of the phone menu. Its tallest is its CSS max-height, min(28rem, 80dvh), so the side does\n    // not depend on what the panel shows at the moment. It never covers its trigger: it takes at most the room on its\n    // side, and its list scrolls.\n    const roomBelow = viewport.height - rect.bottom - SWITCHER_GAP - SWITCHER_INSET;\n    const roomAbove = rect.top - SWITCHER_GAP - SWITCHER_INSET;\n    if (choose) {\n      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n      above = Math.min(28 * rem, 0.8 * viewport.height) > roomBelow && roomAbove > roomBelow;\n      panel.style.removeProperty(\"min-height\");\n    }\n    const room = Math.max(0, above ? roomAbove : roomBelow);\n    panel.style.setProperty(\"--k2b-sidebar-switcher-room\", `${room}px`);\n    panel.style.left = `${dropdownPosition(rect, panel.getBoundingClientRect(), \"bottom-right\", viewport).left}px`;\n    if (above) {\n      // Its bottom edge stays beside the trigger, and it does not shrink while open, so a narrowed search keeps the\n      // search field where the person is typing.\n      const height = Math.min(room, Math.max(panel.getBoundingClientRect().height, Number.parseFloat(panel.style.minHeight) || 0));\n      panel.style.minHeight = `${height}px`;\n      panel.style.top = \"auto\";\n      panel.style.bottom = `${document.documentElement.clientHeight - rect.top + SWITCHER_GAP}px`;\n    } else {\n      panel.style.top = `${rect.bottom + SWITCHER_GAP}px`;\n      panel.style.bottom = \"auto\";\n    }\n  };\n  const reposition = () => open() && place();\n  const resize = () => open() && place(true);\n  // Arriving options, an error, or the search field grow the panel after it opened, so its size places it too.\n  // The trigger changes size when a host turns the rail into the expanded overlay, without a window resize.\n  let resizing: ResizeObserver | undefined;\n  const listen = (on: boolean) => {\n    const method = on ? \"addEventListener\" : \"removeEventListener\";\n    window[method](\"resize\", resize);\n    window[method](\"scroll\", reposition, true);\n    if (on && panel) {\n      resizing ??= new ResizeObserver(reposition);\n      resizing.observe(panel);\n      if (trigger) resizing.observe(trigger);\n    } else resizing?.disconnect();\n  };\n  // Server rendering cleans up too, where no window exists.\n  onCleanup(() => isServer || listen(false));\n  /** Lets the host dismiss its menu first, then opens the link or runs the action unless the host cancels. */\n  const choose = (run: () => void) => {\n    hide(false);\n    if (!props.beforeSelect) return run();\n    void Promise.resolve(props.beforeSelect()).then((allowed) => {\n      if (allowed !== false) run();\n    });\n  };\n  const follow = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {\n    if (!plainClick(event)) return;\n    if (!props.beforeSelect) return hide(false);\n    event.preventDefault();\n    const href = event.currentTarget.href;\n    choose(() => documentNavigate(href));\n  };\n\n  const rows = () => (panel ? Array.from(panel.querySelectorAll<HTMLElement>(\"[data-switcher-row]:not([aria-disabled='true'])\")) : []);\n  const focusRow = (index: number) => {\n    const all = rows();\n    if (all.length) all[(index + all.length) % all.length]?.focus();\n  };\n  const show = (focus: \"start\" | \"end\" = \"start\") => {\n    if (!panel || panel.matches(\":popover-open\")) return;\n    load();\n    keyboardOpened = ringOnReturn(trigger);\n    setQuery(\"\");\n    panel.showPopover();\n    setOpen(true);\n    listen(true);\n    place(true);\n    queueMicrotask(() => {\n      // On touch the search field waits for a tap, so the keyboard does not cover the list on opening.\n      if (searchable() && focus === \"start\" && !window.matchMedia(\"(pointer: coarse)\").matches) search?.focus();\n      else if (focus === \"end\") focusRow(-1);\n      // While the list loads, the panel holds focus, so arriving rows do not move it.\n      else (panel?.querySelector<HTMLElement>('[aria-current=\"true\"]') ?? (props.options ? rows()[0] : panel))?.focus();\n    });\n  };\n  const hide = (restoreFocus: boolean) => {\n    if (restoreFocus) returnFocus(trigger, keyboardOpened);\n    if (panel?.matches(\":popover-open\")) panel.hidePopover();\n  };\n\n  const onPanelKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const all = rows();\n    const index = all.indexOf(target);\n    if (event.key === \"Escape\") {\n      // The panel closes alone; an overlay sidebar around it stays open.\n      event.preventDefault();\n      event.stopPropagation();\n      hide(true);\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusRow(index + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if ((event.key === \"Home\" || event.key === \"End\") && target !== search) {\n      event.preventDefault();\n      focusRow(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Enter\" && target === search) {\n      event.preventDefault();\n      panel?.querySelector<HTMLElement>(\"[data-switcher-option]\")?.click();\n    } else if (\n      search &&\n      target !== search &&\n      event.key.length === 1 &&\n      event.key !== \" \" &&\n      !(event.metaKey || event.ctrlKey || event.altKey)\n    ) {\n      // Typing anywhere in a long list searches it.\n      event.preventDefault();\n      setQuery(query() + event.key);\n      search.focus();\n    }\n  };\n\n  return (\n    <div class={`k2b-sidebar-switcher ${props.class ?? \"\"}`} data-description={props.description ? \"\" : undefined}>\n      <button\n        ref={trigger}\n        type=\"button\"\n        class=\"k2b-sidebar-switcher__trigger\"\n        aria-label={props.label}\n        aria-describedby={`${id}-purpose`}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open()}\n        aria-controls={id}\n        // The full name for a truncated title and for the icon in a collapsed rail.\n        title={props.label}\n        onPointerEnter={load}\n        onFocus={load}\n        onPointerDown={() => (openAtPress = panel?.matches(\":popover-open\"))}\n        onClick={() => {\n          const wasOpen = openAtPress ?? panel?.matches(\":popover-open\");\n          openAtPress = undefined;\n          if (wasOpen) hide(false);\n          else show();\n        }}\n        onKeyDown={(event) => {\n          if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n          event.preventDefault();\n          if (open()) focusRow(event.key === \"ArrowDown\" ? 0 : -1);\n          else show(event.key === \"ArrowDown\" ? \"start\" : \"end\");\n        }}\n      >\n        <span class=\"k2b-sidebar-switcher__icon\" style={tint(props.color)} aria-hidden=\"true\">\n          <i class={iconClass(props.icon)} />\n        </span>\n        <span class=\"k2b-sidebar-switcher__copy\" aria-hidden=\"true\">\n          <span>{props.label}</span>\n          <Show when={props.description}>{(description) => <small>{description()}</small>}</Show>\n        </span>\n        <i class=\"ti ti-selector k2b-sidebar-switcher__chevron\" aria-hidden=\"true\" />\n        <span id={`${id}-purpose`} class=\"k2b-sr-only\">\n          {[props.description, props.switchLabel].filter(Boolean).join(\", \")}\n        </span>\n      </button>\n      <div\n        ref={panel}\n        id={id}\n        popover=\"auto\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-label={props.switchLabel}\n        class=\"k2b-sidebar-switcher__panel\"\n        onKeyDown={onPanelKeyDown}\n        onFocusOut={(event) => {\n          const next = event.relatedTarget as Node | null;\n          // Tabbing out closes the panel; focus that leaves the window keeps it.\n          if (next && !panel?.contains(next) && next !== trigger) hide(false);\n        }}\n        onToggle={(event) => {\n          if ((event as ToggleEvent).newState === \"open\") return;\n          setOpen(false);\n          listen(false);\n        }}\n      >\n        <Show when={searchable()}>\n          <div class=\"k2b-choice-search k2b-sidebar-switcher__search\">\n            <i class=\"ti ti-search\" aria-hidden=\"true\" />\n            <input\n              ref={search}\n              type=\"search\"\n              data-switcher-row\n              value={query()}\n              placeholder={messages().search}\n              aria-label={messages().searchLabel}\n              aria-controls={`${id}-options`}\n              onInput={(event) => setQuery(event.currentTarget.value)}\n            />\n          </div>\n        </Show>\n        <ul id={`${id}-options`} class=\"k2b-sidebar-switcher__options\">\n          <Show\n            when={props.options}\n            fallback={\n              <li class=\"k2b-choice-status\" role=\"status\" data-tone={props.error ? \"danger\" : undefined}>\n                <Show\n                  when={props.error}\n                  fallback={\n                    <>\n                      <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n                      <span>{messages().loading}</span>\n                    </>\n                  }\n                >\n                  {(error) => (\n                    <>\n                      <span>{error()}</span>\n                      <button type=\"button\" data-switcher-row onClick={() => props.onLoad?.()}>\n                        {messages().retry}\n                      </button>\n                    </>\n                  )}\n                </Show>\n              </li>\n            }\n          >\n            <For\n              each={visible()}\n              fallback={\n                <li class=\"k2b-choice-status\" role=\"status\">\n                  {messages().noResults}\n                </li>\n              }\n            >\n              {(option) => {\n                const current = () => option.id === props.currentId;\n                return (\n                  <li>\n                    <a\n                      href={option.href}\n                      class=\"k2b-dropdown__item k2b-sidebar-switcher__option\"\n                      data-switcher-row\n                      data-switcher-option\n                      aria-current={current() ? \"true\" : undefined}\n                      onClick={(event) => {\n                        // The open container is already here: choosing it only closes the panel.\n                        if (current() && plainClick(event)) {\n                          event.preventDefault();\n                          hide(true);\n                        } else follow(event);\n                      }}\n                    >\n                      <span class=\"k2b-sidebar-switcher__option-icon\" style={tint(option.color ?? props.color)} aria-hidden=\"true\">\n                        <i class={iconClass(option.icon ?? props.icon)} />\n                      </span>\n                      <span class=\"k2b-dropdown__copy\">\n                        <span>{option.label}</span>\n                        <Show when={option.description}>{(description) => <small>{description()}</small>}</Show>\n                      </span>\n                      <i class=\"ti ti-check k2b-dropdown__check\" data-hidden={current() ? undefined : \"true\"} aria-hidden=\"true\" />\n                    </a>\n                  </li>\n                );\n              }}\n            </For>\n          </Show>\n        </ul>\n        <Show when={props.actions?.length}>\n          <ul class=\"k2b-sidebar-switcher__actions\">\n            <For each={props.actions}>\n              {(item) => (\n                <li>\n                  <Show\n                    when={item.href}\n                    fallback={\n                      <button\n                        type=\"button\"\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        disabled={item.disabled}\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={() => choose(() => item.action?.())}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </button>\n                    }\n                  >\n                    {(href) => (\n                      <a\n                        href={item.disabled ? undefined : href()}\n                        class=\"k2b-dropdown__item\"\n                        data-switcher-row\n                        aria-disabled={item.disabled ? \"true\" : undefined}\n                        onClick={(event) => item.disabled || follow(event)}\n                      >\n                        <i class={iconClass(item.icon)} aria-hidden=\"true\" />\n                        <span class=\"k2b-dropdown__copy\">\n                          <span>{item.label}</span>\n                        </span>\n                      </a>\n                    )}\n                  </Show>\n                </li>\n              )}\n            </For>\n          </ul>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/layout/TabBar.js

@@ -14,7 +14,7 @@ const TAB_BAR_MAX_ITEMS = 5;
  * tab switches at the first touch: the shell shows the item's `title` while its page loads.
  */
 export function TabBar(props) {
-  return _$ssr(_tmpl$, _$ssrAttribute("class", props.class ? `k2b-tab-bar ${_$escape(props.class, true)}` : "k2b-tab-bar", false) + _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$, _$ssrAttribute("class", props.class ? `k2b-tab-bar ${_$escape(props.class, true)}` : "k2b-tab-bar", false) + _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("data-variant", props.variant === "floating" ? "floating" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.items.slice(0, TAB_BAR_MAX_ITEMS);
     },

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/TabBar.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\n\nexport type TabBarItem = {\n  id: string;\n  label: string;\n  /** Icon class, for example `ti ti-home`. */\n  icon: string;\n  href: string;\n  /** The header title of the page this item opens, shown while that page loads. Defaults to `label`. */\n  title?: string;\n  /** The page this item leads to is open. */\n  current?: boolean;\n};\n\nexport type TabBarProps = {\n  /** Accessible name of the navigation landmark. */\n  label: string;\n  /** Up to five destinations; further items are not rendered. Put the rest behind a \"More\" destination. */\n  items: readonly TabBarItem[];\n  class?: string;\n};\n\n/** A phone app's bottom navigation holds at most five destinations. */\nconst TAB_BAR_MAX_ITEMS = 5;\n\n/**\n * Bottom navigation between a phone app's top-level pages: native links with equal widths, an icon above each label,\n * and `aria-current=\"page\"` on the open page. Place it in `MobileShell`'s footer; it pads the bottom safe area. There a\n * tab switches at the first touch: the shell shows the item's `title` while its page loads.\n */\nexport function TabBar(props: TabBarProps): JSX.Element {\n  return (\n    <nav class={props.class ? `k2b-tab-bar ${props.class}` : \"k2b-tab-bar\"} aria-label={props.label}>\n      <ul>\n        <For each={props.items.slice(0, TAB_BAR_MAX_ITEMS)}>\n          {(item) => (\n            <li>\n              <a\n                href={item.href}\n                aria-current={item.current ? \"page\" : undefined}\n                data-tab={item.id}\n                data-k2b-title={item.title ?? item.label}\n              >\n                <i class={item.icon} aria-hidden=\"true\" />\n                <span>{item.label}</span>\n              </a>\n            </li>\n          )}\n        </For>\n      </ul>\n    </nav>\n  );\n}\n\nexport default TabBar;\n"],"mappings":";;;;;;AAAA,SAAS,GAAG,QAAkB,UAAU;AAsBxC;AACA,MAAM,iBAAiB,GAAG,CAAC;;AAE3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,6CACc,KAAK,CAAC,KAAK,GAAG,wBAAe,KAAK,CAAC,KAAK,SAAE,GAAG,aAAa,iDAAc,KAAK,CAAC,KAAK,4CAE1F,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAAA;IAAA,UAC9C,IAAI,mDAGM,IAAI,CAAC,IAAI,iDACD,IAAI,CAAC,OAAO,GAAG,MAAM,YAAG,SAAS,sDACrC,IAAI,CAAC,EAAE,4DACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,kDAE9B,IAAI,CAAC,IAAI,0BACZ,IAAI,CAAC,KAAK;EAGtB;AAKX;AAEA,eAAe,MAAM","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/TabBar.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\n\nexport type TabBarItem = {\n  id: string;\n  label: string;\n  /** Icon class, for example `ti ti-home`. */\n  icon: string;\n  href: string;\n  /** The header title of the page this item opens, shown while that page loads. Defaults to `label`. */\n  title?: string;\n  /** The page this item leads to is open. */\n  current?: boolean;\n};\n\nexport type TabBarProps = {\n  /** Accessible name of the navigation landmark. */\n  label: string;\n  /** Up to five destinations; further items are not rendered. Put the rest behind a \"More\" destination. */\n  items: readonly TabBarItem[];\n  /**\n   * `bar` (the default) is flat on the page canvas and pads the bottom safe area. `floating` is a rounded bar that the\n   * host places above the content, away from the safe areas; its open item is a raised chip. The host may paint it\n   * with `--k2b-tab-bar-background`, color its items with `--k2b-tab-bar-color`, and color the open item with\n   * `--k2b-tab-bar-selected-background` and `--k2b-tab-bar-selected-color`.\n   */\n  variant?: \"bar\" | \"floating\";\n  class?: string;\n};\n\n/** A phone app's bottom navigation holds at most five destinations. */\nconst TAB_BAR_MAX_ITEMS = 5;\n\n/**\n * Bottom navigation between a phone app's top-level pages: native links with equal widths, an icon above each label,\n * and `aria-current=\"page\"` on the open page. Place it in `MobileShell`'s footer; it pads the bottom safe area. There a\n * tab switches at the first touch: the shell shows the item's `title` while its page loads.\n */\nexport function TabBar(props: TabBarProps): JSX.Element {\n  return (\n    <nav\n      class={props.class ? `k2b-tab-bar ${props.class}` : \"k2b-tab-bar\"}\n      aria-label={props.label}\n      data-variant={props.variant === \"floating\" ? \"floating\" : undefined}\n    >\n      <ul>\n        <For each={props.items.slice(0, TAB_BAR_MAX_ITEMS)}>\n          {(item) => (\n            <li>\n              <a\n                href={item.href}\n                aria-current={item.current ? \"page\" : undefined}\n                data-tab={item.id}\n                data-k2b-title={item.title ?? item.label}\n              >\n                <i class={item.icon} aria-hidden=\"true\" />\n                <span>{item.label}</span>\n              </a>\n            </li>\n          )}\n        </For>\n      </ul>\n    </nav>\n  );\n}\n\nexport default TabBar;\n"],"mappings":";;;;;;AAAA,SAAS,GAAG,QAAkB,UAAU;AA6BxC;AACA,MAAM,iBAAiB,GAAG,CAAC;;AAE3B;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,6CAEW,KAAK,CAAC,KAAK,GAAG,wBAAe,KAAK,CAAC,KAAK,SAAE,GAAG,aAAa,iDACrD,KAAK,CAAC,KAAK,iDACT,KAAK,CAAC,OAAO,KAAK,UAAU,GAAG,UAAU,YAAG,SAAS,4CAGhE,GAAG;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;IAAA;IAAA,UAC9C,IAAI,mDAGM,IAAI,CAAC,IAAI,iDACD,IAAI,CAAC,OAAO,GAAG,MAAM,YAAG,SAAS,sDACrC,IAAI,CAAC,EAAE,4DACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,kDAE9B,IAAI,CAAC,IAAI,0BACZ,IAAI,CAAC,KAAK;EAGtB;AAKX;AAEA,eAAe,MAAM","ignoreList":[]}

package/dist/ssr/layout/TableOfContents.js

@@ -20,6 +20,14 @@ export function TableOfContents(props) {
     // 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 content = resolveMaybeAccessor(props.contentRoot);
+    const heading = id => {
+      const element = document.getElementById(id);
+      if (!content || element && content.contains(element)) return element;
+      // The same id elsewhere on the page, or a root outside the document tree, needs a lookup within the root.
+      for (const candidate of content.querySelectorAll("[id]")) if (candidate.id === id) return candidate;
+      return null;
+    };
     const target = root ?? window;
     let frame;
     const update = () => {
@@ -30,7 +38,7 @@ export function TableOfContents(props) {
       const line = top + height / 4;
       const headings = ids.map(id => ({
         id,
-        box: document.getElementById(id)?.getBoundingClientRect()
+        box: heading(id)?.getBoundingClientRect()
       }));
       let next = ids[0];
       for (const heading of headings) if (heading.box && heading.box.top <= line) next = heading.id;
@@ -51,7 +59,7 @@ export function TableOfContents(props) {
     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)]);
+    const observed = new Set([root ?? document.documentElement, ...(root?.children ?? [document.body]), ...ids.map(id => heading(id)?.parentElement)]);
     for (const element of observed) if (element) observer?.observe(element);
     untrack(update);
     onCleanup(() => {

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

@@ -1 +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":"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","ignoreList":[]}
+{"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  /** Element that contains the section headings. Defaults to the document. */\n  contentRoot?: 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 content = resolveMaybeAccessor(props.contentRoot);\n    const heading = (id: string): Element | null => {\n      const element = document.getElementById(id);\n      if (!content || (element && content.contains(element))) return element;\n      // The same id elsewhere on the page, or a root outside the document tree, needs a lookup within the root.\n      for (const candidate of content.querySelectorAll(\"[id]\")) if (candidate.id === id) return candidate;\n      return null;\n    };\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: heading(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) => heading(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":"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","ignoreList":[]}

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

@@ -6,8 +6,36 @@ const HANDLE_SELECTOR = "[data-app-workspace-resize]";
 const ROOT_SELECTOR = "[data-k2b-app-workspace]";
 const LAYOUT_REGION_SELECTOR = [ROOT_SELECTOR, ".k2b-app-workspace__sidebar", ".k2b-app-workspace__main-pane", ".k2b-app-workspace__detail", ".k2b-app-workspace__drawer", HANDLE_SELECTOR].join(",");
 const TOGGLE_SELECTOR = "[data-app-workspace-sidebar-toggle]";
-/** The width range in which the sidebar is an overlay; it matches the compact media query in the stylesheet. */
-const COMPACT_QUERY = "(min-width: 48rem) and (max-width: 63.999rem)";
+/** Touch-tablet gestures remain viewport decisions. */
+const TOUCH_DRAWER_QUERY = "(min-width: 48rem) and (max-width: 63.999rem) and (pointer: coarse)";
+const DETAIL_TOGGLE_SELECTOR = "[data-app-workspace-detail-toggle]";
+const DETAIL_DRAWER_SELECTOR = '.k2b-app-workspace__detail[data-workspace-detail-drawer="open"]';
+const cssState = (element, name) => getComputedStyle(element).getPropertyValue(name).trim();
+const detailWaiting = aside => cssState(aside, "--k2b-workspace-detail-waiting") === "1";
+const detailDrawer = aside => aside.dataset.workspaceDetailDrawer === "open";
+const detailToggle = aside => {
+  const root = workspaceRoot(aside);
+  return rootElements(root ?? aside, DETAIL_TOGGLE_SELECTOR).find(toggle => toggle.getAttribute("aria-controls") === aside.id);
+};
+// The trail's registered property accepts a length, not the drawer's percentage
+// cap. Only a user-opened drawer needs this measurement; the first frame stays CSS-owned.
+const detailDrawerContent = aside => aside.closest(".k2b-app-workspace__content");
+const syncDetailDrawerSpace = aside => detailDrawerContent(aside)?.style.setProperty("--k2b-detail-space", `${aside.getBoundingClientRect().width}px`);
+const parkDetailDrawer = (aside, focus = false) => {
+  if (!detailDrawer(aside)) return;
+  delete aside.dataset.workspaceDetailDrawer;
+  detailDrawerContent(aside)?.style.removeProperty("--k2b-detail-space");
+  const toggle = detailToggle(aside);
+  toggle?.setAttribute("aria-expanded", "false");
+  if (focus) toggle?.focus({
+    preventScroll: true
+  });
+};
+
+/** Parks open waiting-detail drawers; focus follows only when it was inside one. */
+export const parkWorkspaceDetailDrawers = (root = document) => {
+  for (const aside of root.querySelectorAll(DETAIL_DRAWER_SELECTOR)) parkDetailDrawer(aside, aside.contains(aside.ownerDocument.activeElement));
+};
 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']";
@@ -59,8 +87,9 @@ const controlledPanel = (root, handle) => {
 };
 const flexibleLevel = pane => {
   if (!pane.hasAttribute("data-workspace-level")) return false;
-  const widthClass = window.matchMedia("(min-width: 80rem)").matches ? "3" : window.matchMedia("(min-width: 48rem)").matches ? "2" : "1";
-  return pane.dataset.workspaceLevelLast?.split(" ").includes(widthClass) ?? false;
+  const root = workspaceRoot(pane);
+  const widthClass = root ? cssState(root, "--k2b-workspace-level-class") : "";
+  return Boolean(widthClass && pane.dataset.workspaceLevelLast?.split(" ").includes(widthClass));
 };
 const levelsMain = handle => handle.closest(".k2b-app-workspace__main")?.hasAttribute("data-workspace-levels") ?? false;
 const controlsResizableRegion = (root, handle, kind) => {
@@ -228,7 +257,6 @@ export const installAppWorkspaceController = (options = {}) => {
   const ownerDocument = eventRoot.ownerDocument ?? document;
   const ownerWindow = ownerDocument.defaultView ?? window;
   let overlay = null;
-  const compact = typeof window.matchMedia === "function" ? window.matchMedia(COMPACT_QUERY) : null;
   // A server-rendered head names the sidebar before the sidebar renders; the button learns its real id now.
   for (const toggle of eventRoot.querySelectorAll(TOGGLE_SELECTOR)) overlayTarget(toggle);
   const openOverlay = target => {
@@ -269,12 +297,28 @@ export const installAppWorkspaceController = (options = {}) => {
   };
   const onClick = event => {
     const target = eventElement(event);
+    const detailButton = target?.closest(DETAIL_TOGGLE_SELECTOR);
+    if (detailButton) {
+      const root = workspaceRoot(detailButton);
+      const aside = root ? controlledPanel(root, detailButton) : null;
+      if (!aside || aside.hidden || !detailWaiting(aside) || claimedToggleClicks.has(event)) return;
+      claimedToggleClicks.add(event);
+      if (detailDrawer(aside)) parkDetailDrawer(aside);else {
+        aside.dataset.workspaceDetailDrawer = "open";
+        detailButton.setAttribute("aria-expanded", "true");
+        syncDetailDrawerSpace(aside);
+        if (event.detail === 0) requestTitle(aside);else detailButton.focus({
+          preventScroll: true
+        });
+      }
+      return;
+    }
     const toggle = target?.closest(TOGGLE_SELECTOR);
     if (toggle) {
       const next = overlayTarget(toggle);
       if (!next || claimedToggleClicks.has(event)) return;
       claimedToggleClicks.add(event);
-      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (compact?.matches) openOverlay(next);
+      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (cssState(next.root, "--k2b-workspace-sidebar-form") === "overlay") openOverlay(next);
       return;
     }
     if (!overlay || !target) return;
@@ -310,6 +354,11 @@ export const installAppWorkspaceController = (options = {}) => {
       // Dialogs and popovers keep their own Tab order.
       const page = phone?.matches ? allRoots().flatMap(openDetails).find(phonePage) : undefined;
       if (!page || ownerDocument.querySelector("dialog[open], [aria-modal='true']") || target.closest("[popover]")) return;
+      if (target !== ownerDocument.body) {
+        const rect = target.getBoundingClientRect();
+        const hit = ownerDocument.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+        if (hit && target.contains(hit)) return;
+      }
       const stops = tabStopsIn(page);
       event.preventDefault();
       (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
@@ -334,12 +383,37 @@ export const installAppWorkspaceController = (options = {}) => {
       first.focus();
     }
   };
-  const onCompactChange = () => {
-    if (!compact?.matches) closeOverlay("none");
+  // Whether each open detail waited at the last check, so a column that starts
+  // waiting under focus hands that focus to its Details button.
+  const detailWasWaiting = new WeakMap();
+  const syncHostState = () => {
+    if (overlay && cssState(overlay.root, "--k2b-workspace-sidebar-form") !== "overlay") closeOverlay("none");
+    for (const root of allRoots()) {
+      // A drawer removed with its panel leaves no space behind in Content.
+      for (const content of rootElements(root, ".k2b-app-workspace__content")) if (content.style.getPropertyValue("--k2b-detail-space") && !content.querySelector(DETAIL_DRAWER_SELECTOR)) content.style.removeProperty("--k2b-detail-space");
+      for (const aside of rootElements(root, detailSelector)) {
+        if (aside.hidden) {
+          detailWasWaiting.delete(aside);
+          parkDetailDrawer(aside);
+          continue;
+        }
+        const waiting = detailWaiting(aside);
+        const before = detailWasWaiting.get(aside);
+        detailWasWaiting.set(aside, waiting);
+        if (!waiting) {
+          // The Details button hides with the waiting; its focus moves to the returning column's title.
+          const toggleFocused = detailToggle(aside)?.contains(ownerDocument.activeElement) ?? false;
+          parkDetailDrawer(aside);
+          if (toggleFocused) focusTitle(aside);
+        } else if (detailDrawer(aside)) syncDetailDrawerSpace(aside);else if (before !== true && aside.contains(ownerDocument.activeElement)) detailToggle(aside)?.focus({
+          preventScroll: true
+        });
+      }
+    }
   };
   const phone = typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 47.999rem)") : null;
   const wide = typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 48rem)") : null;
-  const touchDrawer = typeof window.matchMedia === "function" ? window.matchMedia(`${COMPACT_QUERY} and (pointer: coarse)`) : null;
+  const touchDrawer = typeof window.matchMedia === "function" ? window.matchMedia(TOUCH_DRAWER_QUERY) : null;
   const detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
   const detailHidden = new WeakMap();
@@ -499,7 +573,7 @@ export const installAppWorkspaceController = (options = {}) => {
     delete aside.dataset.workspaceDetailDragging;
   };
   const anchorItem = (root, aside, snapshot) => {
-    if (!wide?.matches || touchDrawer?.matches && closable(aside) || !snapshot?.item.isConnected) return;
+    if (!wide?.matches || touchDrawer?.matches && closable(aside) || detailDrawer(aside) || !snapshot?.item.isConnected) return;
     if (!mainElement(root)?.contains(snapshot.item) || snapshot.item.closest(ROOT_SELECTOR) !== root) return;
     const scroller = snapshot.scroller;
     if (scroller?.isConnected && scroller.scrollTop === snapshot.scrollTop) scroller.scrollTop += snapshot.item.getBoundingClientRect().top - snapshot.top;
@@ -605,6 +679,7 @@ export const installAppWorkspaceController = (options = {}) => {
     const followedInteraction = snapshot?.fresh ?? false;
     if (snapshot) snapshot.fresh = false;
     if (aside.hidden) {
+      parkDetailDrawer(aside);
       if (pendingTitle?.aside === aside) cancelTitle();
       if (panelStep === aside) panelStep = null;
       if (root.hasAttribute("data-workspace-motion") && !prefersReducedMotion() && wide?.matches) {
@@ -633,6 +708,7 @@ export const installAppWorkspaceController = (options = {}) => {
       if (detailDrag?.aside === aside) finishDetailDrag(true);
       return;
     }
+    if (detailWaiting(aside) && !detailDrawer(aside)) return;
     anchorItem(root, aside, snapshot);
     if (phone?.matches) setDetent(aside, false);
     if (followedInteraction && snapshot) {
@@ -653,13 +729,18 @@ export const installAppWorkspaceController = (options = {}) => {
     const root = target.closest(ROOT_SELECTOR);
     let aside = target.closest(detailSelector);
     if (aside?.hidden || aside && (!eventRoot.contains(aside) || aside.closest(ROOT_SELECTOR) !== root)) aside = null;
-    if (!aside && root && observedRoots.has(root) && mainElement(root)?.contains(target)) aside = openDetails(root)[0] ?? null;
+    if (!aside && root && observedRoots.has(root) && (mainElement(root)?.contains(target) || target.closest(DETAIL_TOGGLE_SELECTOR))) aside = openDetails(root).find(isVisible) ?? null;
     if (!aside && target === ownerDocument.body) {
-      const open = allRoots().flatMap(openDetails);
+      const open = allRoots().flatMap(openDetails).filter(isVisible);
       if (open.length === 1) aside = open[0];
     }
     const owningRoot = aside?.closest(ROOT_SELECTOR);
-    if (!aside || !owningRoot) return;
+    if (!aside || !owningRoot || !isVisible(aside)) return;
+    if (event.key === "Escape" && detailDrawer(aside)) {
+      parkDetailDrawer(aside, true);
+      event.preventDefault();
+      return;
+    }
     if (event.key === "Escape" && closable(aside)) requestClose(aside);else if ((event.key.toLowerCase() === "j" || event.key.toLowerCase() === "k") && aside.hasAttribute("data-workspace-detail-steppable")) {
       const main = mainElement(owningRoot);
       const inMain = remembered.get(owningRoot)?.item.contains(target) || main?.contains(target);
@@ -1196,14 +1277,43 @@ export const installAppWorkspaceController = (options = {}) => {
     reconcileFrame = requestAnimationFrame(() => {
       reconcileFrame = null;
       reconcile();
+      // Reconciling can restore a drawer's persisted width; its trail space follows.
+      for (const root of allRoots()) for (const aside of rootElements(root, DETAIL_DRAWER_SELECTOR)) syncDetailDrawerSpace(aside);
     });
   };
-  const onResize = () => scheduleReconcile();
+  const onResize = () => {
+    syncHostState();
+    scheduleReconcile();
+  };
   const observedRoots = new Set();
   const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+    syncHostState();
     scheduleReconcile();
   });
+  // A host can change its width while a workspace with a fixed width keeps
+  // its own, so the controller also watches each root's nearest named host.
+  const observedHosts = new Set();
+  // Found once per root: reading styles on every mutation would cost a style pass.
+  const rootHosts = new WeakMap();
+  const hostOf = root => {
+    if (rootHosts.has(root)) return rootHosts.get(root);
+    let host = null;
+    for (let element = root.parentElement; element && !host; element = element.parentElement) if (getComputedStyle(element).containerName.split(/\s+/).includes("k2b-app-area")) host = element;
+    rootHosts.set(root, host);
+    return host;
+  };
   const syncObservedRoots = () => {
+    const hosts = new Set(allRoots().map(hostOf).filter(host => host !== null));
+    observedHosts.forEach(host => {
+      if (hosts.has(host)) return;
+      resizeObserver?.unobserve(host);
+      observedHosts.delete(host);
+    });
+    hosts.forEach(host => {
+      if (observedHosts.has(host)) return;
+      observedHosts.add(host);
+      resizeObserver?.observe(host);
+    });
     for (const elements of [touchedDetails, titleTabIndices, motionRoots]) {
       elements.forEach(element => {
         if (!element.isConnected) elements.delete(element);
@@ -1265,6 +1375,8 @@ export const installAppWorkspaceController = (options = {}) => {
     const changed = records.some(record => record.type === "attributes" ? record.target instanceof Element && record.target.matches(LAYOUT_REGION_SELECTOR) : [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(layoutNode));
     if (!changed) return;
     syncObservedRoots();
+    // A new width token or a removed panel can end waiting without any box resizing.
+    if (records.some(record => record.type === "childList" || record.attributeName === "data-width")) syncHostState();
     scheduleReconcile();
   });
   eventRoot.addEventListener("pointerdown", onPointerDown);
@@ -1289,7 +1401,7 @@ export const installAppWorkspaceController = (options = {}) => {
   });
   eventRoot.addEventListener("touchend", onDetailTouchEnd);
   eventRoot.addEventListener("touchcancel", onDetailTouchEnd);
-  compact?.addEventListener("change", onCompactChange);
+  phone?.addEventListener("change", syncHostState);
   phone?.addEventListener("change", syncPhonePages);
   eventRoot.addEventListener("keydown", onKeyDown);
   eventRoot.addEventListener("focusin", onFocusIn);
@@ -1299,7 +1411,7 @@ export const installAppWorkspaceController = (options = {}) => {
   mutationObserver?.observe(eventRoot, {
     attributes: true,
     attributeOldValue: true,
-    attributeFilter: ["hidden", "data-workspace-level-shown"],
+    attributeFilter: ["hidden", "data-workspace-level-shown", "data-width"],
     childList: true,
     subtree: true
   });
@@ -1348,11 +1460,12 @@ export const installAppWorkspaceController = (options = {}) => {
     mutationObserver?.disconnect();
     resizeObserver?.disconnect();
     observedRoots.clear();
+    observedHosts.clear();
     closeOverlay("none");
     eventRoot.removeEventListener("pointerdown", onPointerDown);
     eventRoot.removeEventListener("click", onClick);
     ownerDocument.removeEventListener("keydown", onOverlayKeyDown);
-    compact?.removeEventListener("change", onCompactChange);
+    phone?.removeEventListener("change", syncHostState);
     eventRoot.removeEventListener("keydown", onKeyDown);
     eventRoot.removeEventListener("focusin", onFocusIn);
     window.removeEventListener("resize", onResize);