@k2b/ui 0.28.0 → 0.29.0

package/dist/browser/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":"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","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/browser/layout/TabBar.js

@@ -31,16 +31,16 @@ export function TabBar(props) {
           _el$6 = _el$5.nextSibling;
         _$insert(_el$6, () => item.label);
         _$effect(_p$ => {
-          var _v$3 = item.href,
-            _v$4 = item.current ? "page" : undefined,
-            _v$5 = item.id,
-            _v$6 = item.title ?? item.label,
-            _v$7 = item.icon;
-          _v$3 !== _p$.e && _$setAttribute(_el$4, "href", _p$.e = _v$3);
-          _v$4 !== _p$.t && _$setAttribute(_el$4, "aria-current", _p$.t = _v$4);
-          _v$5 !== _p$.a && _$setAttribute(_el$4, "data-tab", _p$.a = _v$5);
-          _v$6 !== _p$.o && _$setAttribute(_el$4, "data-k2b-title", _p$.o = _v$6);
-          _v$7 !== _p$.i && _$className(_el$5, _p$.i = _v$7);
+          var _v$4 = item.href,
+            _v$5 = item.current ? "page" : undefined,
+            _v$6 = item.id,
+            _v$7 = item.title ?? item.label,
+            _v$8 = item.icon;
+          _v$4 !== _p$.e && _$setAttribute(_el$4, "href", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setAttribute(_el$4, "aria-current", _p$.t = _v$5);
+          _v$6 !== _p$.a && _$setAttribute(_el$4, "data-tab", _p$.a = _v$6);
+          _v$7 !== _p$.o && _$setAttribute(_el$4, "data-k2b-title", _p$.o = _v$7);
+          _v$8 !== _p$.i && _$className(_el$5, _p$.i = _v$8);
           return _p$;
         }, {
           e: undefined,
@@ -54,13 +54,16 @@ export function TabBar(props) {
     }));
     _$effect(_p$ => {
       var _v$ = props.class ? `k2b-tab-bar ${props.class}` : "k2b-tab-bar",
-        _v$2 = props.label;
+        _v$2 = props.label,
+        _v$3 = props.variant === "floating" ? "floating" : undefined;
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "data-variant", _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     return _el$;
   })();

package/dist/browser/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;IAAA;MAAA;IAAA,kCAGO,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;MAAA;MAAA,UAC9C,IAAI;QAAA;UAAA;UAAA;UAAA;QAAA,sBASO,IAAI,CAAC,KAAK;QAAA;UAAA,WANX,IAAI,CAAC,IAAI;YAAA,OACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS;YAAA,OACrC,IAAI,CAAC,EAAE;YAAA,OACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAA,OAE9B,IAAI,CAAC,IAAI;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAIxB;IAAA;MAAA,UAfK,KAAK,CAAC,KAAK,GAAG,eAAe,KAAK,CAAC,KAAK,EAAE,GAAG,aAAa;QAAA,OAAc,KAAK,CAAC,KAAK;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAoBnG;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;IAAA;MAAA;IAAA,kCAOO,GAAG;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC;MAAA;MAAA,UAC9C,IAAI;QAAA;UAAA;UAAA;UAAA;QAAA,sBASO,IAAI,CAAC,KAAK;QAAA;UAAA,WANX,IAAI,CAAC,IAAI;YAAA,OACD,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS;YAAA,OACrC,IAAI,CAAC,EAAE;YAAA,OACD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAAA,OAE9B,IAAI,CAAC,IAAI;UAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;UAAA;UAAA;UAAA;UAAA;UAAA;QAAA;QAAA;MAAA;IAIxB;IAAA;MAAA,UAlBE,KAAK,CAAC,KAAK,GAAG,eAAe,KAAK,CAAC,KAAK,EAAE,GAAG,aAAa;QAAA,OACrD,KAAK,CAAC,KAAK;QAAA,OACT,KAAK,CAAC,OAAO,KAAK,UAAU,GAAG,UAAU,GAAG,SAAS;MAAA;MAAA;MAAA;MAAA;IAAA;MAAA;MAAA;MAAA;IAAA;IAAA;EAAA;AAqBzE;AAEA,eAAe,MAAM","ignoreList":[]}

package/dist/browser/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);