@k2b/ui 0.22.0 → 0.24.0

package/dist/ssr/layout/AppWorkspace.js

@@ -49,15 +49,18 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$38 = ["<i", " aria-hidden=\"true\"></i>"],
   _tmpl$39 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
   _tmpl$40 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
-  _tmpl$41 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
-  _tmpl$42 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$41 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$42 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
+  _tmpl$43 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
 import { IconButton } from "../actions/Button";
 import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
+import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
 import { createScrollFade } from "./scroll-fade";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 import { useWorkspaceMessages } from "./workspace-messages";
@@ -286,20 +289,22 @@ function AppWorkspaceDetail(props) {
     "--k2b-workspace-panel-min": `${minWidth()}px`,
     "--k2b-workspace-panel-max": `${maxWidth()}px`
   });
-  // The panel floats over the content area, and `Main` beside it makes room
-  // in CSS alone, so a server-rendered page arrives in its final geometry. A
-  // sibling cannot read the panel's own variables, so this rule hands the
-  // open panel's size to the content area around it.
-  const contentRule = () => {
+  // An open panel takes a column at the workspace's end, sized in CSS alone,
+  // so a server-rendered page arrives in its final geometry. The workspace
+  // cannot read the panel's own variables, so this rule hands the open
+  // panel's size to its workspace.
+  const workspaceRule = () => {
     const open = `#${domId()}:not([hidden])`;
-    return `.k2b-app-workspace__content:has(> ${open}, > :is(solid-island, solid-client) > ${open}){--k2b-detail-size:${size()};--k2b-detail-min:${minWidth()}px;--k2b-detail-max:${maxWidth()}px}`;
+    return `.k2b-app-workspace:has(> .k2b-app-workspace__content > ${open}, > .k2b-app-workspace__content > :is(solid-island, solid-client) > ${open}){--k2b-detail-size:${size()};--k2b-detail-min:${minWidth()}px;--k2b-detail-max:${maxWidth()}px}`;
   };
   let aside;
   onMount(() => {
     const close = () => props.onClose?.();
+    const isStep = detail => typeof detail === "object" && detail !== null && "direction" in detail && (detail.direction === 1 || detail.direction === -1);
     const step = event => {
-      const direction = event instanceof CustomEvent ? event.detail?.direction : undefined;
-      if (direction === 1 || direction === -1) props.onStep?.(direction);
+      if (!(event instanceof CustomEvent) || !isStep(event.detail)) return;
+      const item = props.onStep?.(event.detail.direction);
+      if (item instanceof HTMLElement) event.detail.item = item;
     };
     aside?.addEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
     aside?.addEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
@@ -308,7 +313,7 @@ function AppWorkspaceDetail(props) {
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
   });
-  return [_$ssr(_tmpl$4, contentRule()), _$createComponent(Show, {
+  return [_$ssr(_tmpl$4, workspaceRule()), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -455,11 +460,12 @@ const AppWorkspaceSidebarDesktop = props => ({
 // hydrates. Islands load asynchronously and server-only sidebars never mount,
 // so `onMount` would be too late or never run. The memory is one
 // `sessionStorage` entry per path segment and sidebar position and ends with
-// the tab. A stored offset is applied first; the current item is then kept in
-// view, which is a no-op when the offset already shows it. The frame callback
+// the tab. A stored offset is applied first; the current item, or on a deeper
+// page the item that contains it, is then kept in view, which is a no-op when
+// the offset already shows it. The frame callback
 // repeats the restore once the whole document is parsed, because content that
 // follows the sidebar can still change its height before the first paint.
-const SIDEBAR_SCROLL_MEMORY_SCRIPT = ["(function(){", "var body=document.currentScript&&document.currentScript.previousElementSibling;if(!body)return;", "var storage;try{storage=window.sessionStorage}catch(_){return}", 'var key="k2b-sidebar-scroll:"+location.pathname.split("/")[1]+":"+document.querySelectorAll(".k2b-app-workspace__sidebar-body").length;', "var restore=function(){", "var stored=storage.getItem(key);if(stored!==null)body.scrollTop=Number(stored);", 'var current=body.querySelector(\'[aria-current="page"]\');if(current)current.scrollIntoView({block:"nearest"});', "};", "restore();requestAnimationFrame(restore);", "var frame=0;", 'body.addEventListener("scroll",function(){if(frame)return;frame=requestAnimationFrame(function(){frame=0;try{storage.setItem(key,String(body.scrollTop))}catch(_){}})},{passive:true});', "})();"].join("");
+const SIDEBAR_SCROLL_MEMORY_SCRIPT = ["(function(){", "var body=document.currentScript&&document.currentScript.previousElementSibling;if(!body)return;", "var storage;try{storage=window.sessionStorage}catch(_){return}", 'var key="k2b-sidebar-scroll:"+location.pathname.split("/")[1]+":"+document.querySelectorAll(".k2b-app-workspace__sidebar-body").length;', "var restore=function(){", "var stored=storage.getItem(key);if(stored!==null)body.scrollTop=Number(stored);", 'var current=body.querySelector(\'[aria-current="page"]\')||body.querySelector(\'[aria-current="true"]\');if(current)current.scrollIntoView({block:"nearest"});', "};", "restore();requestAnimationFrame(restore);", "var frame=0;", 'body.addEventListener("scroll",function(){if(frame)return;frame=requestAnimationFrame(function(){frame=0;try{storage.setItem(key,String(body.scrollTop))}catch(_){}})},{passive:true});', "})();"].join("");
 const AppWorkspaceSidebarBody = props => {
   let body;
   createScrollFade(() => body, () => props.scrollFade !== false);
@@ -551,11 +557,12 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
 const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$15, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
 const AppWorkspaceSidebarItemStatus = props => {
   const workspaceMessages = useWorkspaceMessages();
-  const count = () => typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0;
-  const dot = () => props.unread === true;
+  const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
+  const count = () => waiting() ?? (typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0);
+  const dot = () => waiting() === null && props.unread === true;
   // The marks are decorative; the row's accessible name gets one phrase instead,
   // which says no more than the "99+" a capped count shows.
-  const description = () => [count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
+  const description = () => [waiting() !== null ? props.waiting?.label ?? "" : count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
     count: count()
   }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
   // The unread slot stays reserved at the end, and the marks that change most
@@ -565,7 +572,7 @@ const AppWorkspaceSidebarItemStatus = props => {
       return description();
     },
     get children() {
-      return _$ssr(_tmpl$19, _$ssrAttribute("data-unread", count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$19, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
         get when() {
           return props.mention;
         },
@@ -581,7 +588,7 @@ const AppWorkspaceSidebarItemStatus = props => {
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
-          return count();
+          return count() || waiting() === 0;
         },
         get fallback() {
           return _$createComponent(Show, {
@@ -614,7 +621,7 @@ function AppWorkspaceSidebarRow(props) {
     },
     ...data()
   });
-  const current = () => props.active ? "page" : undefined;
+  const current = () => props.active === "ancestor" ? "true" : props.active ? "page" : undefined;
   const Control = control => {
     const attrs = () => control.grouped ? {
       class: "k2b-app-workspace__sidebar-item-main"
@@ -1318,11 +1325,14 @@ const AppWorkspaceSidebarIconAction = props => {
 };
 /**
  * The row above the work area. From 48 to 64 rem it holds the button that
- * opens the overlay sidebar. On a page with a page above it, at every width,
- * it shows the host's page title with the way up (see `PageTitle`); the
- * page's own `PageTitle` takes its place. It is one fixed height and draws no
- * line; CSS decides when it shows, so the server-rendered page already has
- * its final geometry.
+ * opens the overlay sidebar. On a page with a page above it, it shows the
+ * host's page title with the way up (see `PageTitle`); the page's own
+ * `PageTitle` takes its place. The visible title is no heading, because many
+ * pages render their own `h1`. From 64 rem a sidebar that marks the current
+ * page names it already: the row hides, and only on a page without its own
+ * `h1` its heading stays for assistive technology. It is one fixed height
+ * and draws no line; CSS decides when it shows, so the server-rendered page
+ * already has its final geometry.
  */
 function AppWorkspaceHead(props) {
   const messages = useWorkspaceMessages();
@@ -1345,13 +1355,13 @@ function AppWorkspaceHead(props) {
     get when() {
       return trail();
     },
-    children: current => _$createComponent(PageTitle, {
+    children: current => [_$createComponent(PageTitle, {
       get trail() {
         return current();
       },
       as: "p",
       fallback: true
-    })
+    }), _$ssr(_tmpl$41, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
   })));
 }
 const AppWorkspace = props => {
@@ -1386,7 +1396,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$41, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(_$createComponent(AppWorkspaceHead, {
+          return _$ssr(_tmpl$42, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(_$createComponent(AppWorkspaceHead, {
             sidebarId: sidebarId,
             nested: nested
           })), _$escape(props.children));
@@ -1403,13 +1413,14 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$42, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$43, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;
 AppWorkspace.BottomDrawer = AppWorkspaceBottomDrawer;
 AppWorkspace.Sidebar = AppWorkspaceSidebar;
 AppWorkspace.SidebarDesktop = AppWorkspaceSidebarDesktop;
+AppWorkspace.SidebarSwitcher = AppWorkspaceSidebarSwitcher;
 AppWorkspace.SidebarSection = AppWorkspaceSidebarSection;
 AppWorkspace.SidebarBody = AppWorkspaceSidebarBody;
 AppWorkspace.SidebarFooter = AppWorkspaceSidebarFooter;