@bitbaum/sitekit 0.5.0 → 0.6.1

package/README.md

@@ -73,6 +73,23 @@ design tokens. Existing document sites keep their utility-class appearance.
   links={[{ href: '/roadmap', label: 'Roadmap' }]} extra="Beta" />
 ```
 
+For a grouped application menu, pass `navGroups` alongside `navItems`. Each
+group has a `label` and `items` containing `path`, `label` and an optional
+`description`. Import `SiteNavGroup` from `@bitbaum/sitekit/react` for typed
+configuration. Nonempty groups replace the flat application navigation with
+one native disclosure and a responsive panel; omitted or empty groups retain
+the flat API. Group labels, destinations and descriptions belong to the host.
+
+```tsx
+navGroups={[{ label: 'Create', items: [
+  { path: 'write', label: 'Write', description: 'Start an article.' }
+] }]}
+```
+
+Run `pnpm exec playwright install --with-deps chromium` before `pnpm run verify`.
+An existing Chromium can be selected with `PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH`.
+The browser regression uses the public renderer and stylesheet at four widths.
+
 The package owns the responsive menu, its native no-JavaScript fallback,
 Escape/outside/route dismissal, skip link, active states, touch targets and
 footer layout. Products supply labels, navigation data, identity and account

package/dist/react/SiteChrome.d.ts

@@ -1,9 +1,12 @@
 import type { ReactNode } from 'react';
 import type { SiteChrome as SiteChromeSpec, SiteNavItem } from '../schema.js';
 import { type LinkLike } from './link.js';
+import { type SiteNavGroup } from './SiteNav.js';
 interface Props {
     chrome: SiteChromeSpec;
     navItems: SiteNavItem[];
+    /** Descriptive application navigation; product-owned group configuration. */
+    navGroups?: SiteNavGroup[];
     currentPath: string;
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
@@ -16,7 +19,7 @@ interface Props {
     navLabel?: string;
     menuLabel?: string;
 }
-export declare function SiteMasthead({ chrome, navItems, currentPath, Link, appearance, brand, actions, mainId, skipLabel, navLabel, menuLabel, }: Props): import("react").JSX.Element;
+export declare function SiteMasthead({ chrome, navItems, navGroups, currentPath, Link, appearance, brand, actions, mainId, skipLabel, navLabel, menuLabel, }: Props): import("react").JSX.Element;
 export declare function SiteFooter({ chrome, appearance, links, groups, Link, label, extra, }: {
     chrome: SiteChromeSpec;
     appearance?: 'application';

package/dist/react/SiteChrome.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { href } from '../model.js';
 import { DefaultLink } from './link.js';
 import { SiteNav } from './SiteNav.js';
-export function SiteMasthead({ chrome, navItems, currentPath, Link = DefaultLink, appearance, brand, actions, mainId, skipLabel = 'Skip to content', navLabel = 'Main navigation', menuLabel = 'Menu', }) {
+export function SiteMasthead({ chrome, navItems, navGroups, currentPath, Link = DefaultLink, appearance, brand, actions, mainId, skipLabel = 'Skip to content', navLabel = 'Main navigation', menuLabel = 'Menu', }) {
     if (appearance === 'application')
-        return (_jsxs(_Fragment, { children: [mainId && (_jsx("a", { className: "sk-skip", href: '#' + mainId, children: skipLabel })), _jsx("header", { className: "sk-masthead", children: _jsxs("div", { className: "sk-shell-frame sk-masthead-row", children: [_jsx(Link, { href: "/", className: "sk-brand", children: brand ?? chrome.name }), _jsx(SiteNav, { items: navItems, currentPath: currentPath, Link: Link, appearance: "application", label: navLabel, menuLabel: menuLabel }), actions && _jsx("div", { className: "sk-account-actions", children: actions })] }) })] }));
+        return (_jsxs(_Fragment, { children: [mainId && (_jsx("a", { className: "sk-skip", href: '#' + mainId, children: skipLabel })), _jsx("header", { className: "sk-masthead", children: _jsxs("div", { className: "sk-shell-frame sk-masthead-row", children: [_jsx(Link, { href: "/", className: "sk-brand", children: brand ?? chrome.name }), _jsx(SiteNav, { items: navItems, groups: navGroups, currentPath: currentPath, Link: Link, appearance: "application", label: navLabel, menuLabel: menuLabel, menuActions: actions }), actions && _jsx("div", { className: "sk-account-actions", children: actions })] }) })] }));
     return (_jsx("header", { className: "sticky top-0 z-30 border-b border-subtle bg-surface-page/85 backdrop-blur", children: _jsx("div", { className: "mx-auto max-w-shell px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-6 py-2", children: [_jsx(Link, { href: href(), className: "inline-flex min-h-11 shrink-0 items-center rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: _jsx("span", { className: "font-heading text-lg font-semibold tracking-display text-fg-primary", children: chrome.name }) }), _jsx(SiteNav, { items: navItems, currentPath: currentPath, Link: Link })] }) }) }));
 }
 export function SiteFooter({ chrome, appearance, links = [], groups, Link = DefaultLink, label = 'Footer navigation', extra, }) {

package/dist/react/SiteNav.d.ts

@@ -6,8 +6,15 @@
  * client behaviour — scrolling the active item into view — lives in
  * `NavAutoScroll`, which takes only a string.
  */
+import type { ReactNode } from 'react';
 import type { SiteNavItem } from '../schema.js';
 import { type LinkLike } from './link.js';
+export interface SiteNavGroup {
+    label: string;
+    items: Array<SiteNavItem & {
+        description?: string;
+    }>;
+}
 interface Props {
     /**
      * Deliberately NOT `SitePage[]`. Everything the nav receives ends up in the
@@ -15,11 +22,19 @@ interface Props {
      */
     items: SiteNavItem[];
     currentPath: string;
+    /** Opt-in grouped application menu. Flat items remain unchanged when omitted. */
+    groups?: SiteNavGroup[];
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
     appearance?: 'application';
     label?: string;
     menuLabel?: string;
+    /**
+     * The masthead's account actions, repeated at the foot of the mobile menu.
+     * On the narrowest phones the row has no room for them beside the brand and
+     * the menu button, so styles.css shows them here instead (one tap away).
+     */
+    menuActions?: ReactNode;
 }
-export declare function SiteNav({ items, currentPath, Link, appearance, label, menuLabel, }: Props): import("react").JSX.Element | null;
+export declare function SiteNav({ items, groups, currentPath, Link, appearance, label, menuLabel, menuActions, }: Props): import("react").JSX.Element | null;
 export {};

package/dist/react/SiteNav.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * The masthead's section nav.
- *
- * A server component, deliberately: the injected `Link` is a component
- * function, and functions cannot cross into a 'use client' boundary. The one
- * client behaviour — scrolling the active item into view — lives in
- * `NavAutoScroll`, which takes only a string.
- */
 import { href } from '../model.js';
 import { DefaultLink } from './link.js';
 import { MenuDismiss } from './MenuDismiss.js';
 import { NavAutoScroll } from './NavAutoScroll.js';
-export function SiteNav({ items, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', }) {
+export function SiteNav({ items, groups, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', menuActions, }) {
     if (appearance === 'application') {
+        const populatedGroups = groups?.filter((group) => group.items.length > 0);
+        if (populatedGroups?.length) {
+            return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "sk-grouped-menu", "data-sitekit-menu": true, children: [_jsxs("summary", { children: [menuLabel, _jsx("span", { "aria-hidden": "true", children: "\u2630" })] }), _jsxs("nav", { className: "sk-grouped-panel", "aria-label": label, children: [_jsx("div", { className: "sk-nav-groups", children: populatedGroups.map((group) => (_jsxs("section", { className: "sk-nav-group", "aria-label": group.label, children: [_jsx("h2", { children: group.label }), group.items.map((item) => (_jsxs(Link, { href: href(item.path), "aria-current": item.path === currentPath ? 'page' : undefined, children: [_jsx("span", { className: "sk-nav-link-label", children: item.label }), item.description && (_jsx("span", { className: "sk-nav-description", children: item.description }))] }, item.path)))] }, group.label))) }), menuActions && _jsx("div", { className: "sk-grouped-actions", children: menuActions })] })] }), _jsx(MenuDismiss, { currentPath: currentPath })] }));
+        }
         if (items.length === 0)
             return null;
         const links = () => items.map((item) => (_jsx(Link, { href: href(item.path), "aria-current": item.path === currentPath ? 'page' : undefined, children: item.label }, item.path)));
-        return (_jsxs(_Fragment, { children: [_jsx("nav", { className: "sk-desktop-nav", "aria-label": label, "data-sitekit-nav": true, children: links() }), _jsxs("details", { className: "sk-mobile-menu", "data-sitekit-menu": true, children: [_jsxs("summary", { children: [menuLabel, _jsx("span", { "aria-hidden": "true", children: "\u2630" })] }), _jsx("nav", { "aria-label": label, children: links() })] }), _jsx(MenuDismiss, { currentPath: currentPath })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("nav", { className: "sk-desktop-nav", "aria-label": label, "data-sitekit-nav": true, children: links() }), _jsxs("details", { className: "sk-mobile-menu", "data-sitekit-menu": true, children: [_jsxs("summary", { children: [menuLabel, _jsx("span", { "aria-hidden": "true", children: "\u2630" })] }), _jsxs("nav", { "aria-label": label, children: [links(), menuActions && _jsx("div", { className: "sk-menu-actions", children: menuActions })] })] }), _jsx(MenuDismiss, { currentPath: currentPath })] }));
     }
     return (_jsxs("nav", { "data-sitekit-nav": true, "aria-label": label, className: "scrollbar-hide -mx-1 flex max-w-full flex-nowrap items-center gap-x-1 overflow-x-auto", children: [items.map((item) => {
                 const isCurrent = item.path === currentPath;

package/dist/react/index.d.ts

@@ -8,7 +8,7 @@
  */
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
-export { SiteNav } from './SiteNav.js';
+export { SiteNav, type SiteNavGroup } from './SiteNav.js';
 export { SiteTabBar, type SiteTabItem } from './SiteTabBar.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink, type LinkLike, type LinkProps } from './link.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/sitekit",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "A website as data: a closed union of section shapes validated at runtime, one set of React renderers, and per-field provenance so a generated site can prove it fabricated nothing.",
   "license": "MIT",
   "author": "Mao Nakamoto",
@@ -67,8 +67,10 @@
     "@eslint/js": "^10.0.1",
     "@types/node": "^26.4.1",
     "@types/react": "^19.0.0",
+    "esbuild": "^0.28.2",
     "eslint": "^10.9.1",
     "globals": "^17.12.0",
+    "playwright": "^1.64.1",
     "prettier": "3.9.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/styles.css

@@ -207,6 +207,39 @@
     margin-inline-end: auto;
   }
 }
+.sk-menu-actions {
+  display: none;
+}
+/* The narrowest phones (up to 380px, which takes in 360px Android): brand, an
+   account action and the menu button do not fit in one row (AOZ at 320px
+   needed 369px and scrolled sideways by 49px), so the action moves to the foot
+   of the menu, and only when there is a menu to hold it. */
+@media (max-width: 380px) {
+  .sk-masthead-row:has(.sk-mobile-menu) > .sk-account-actions {
+    display: none;
+  }
+  .sk-menu-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--sk-line, #d6d6d6);
+  }
+  .sk-menu-actions > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    padding: 0.65rem 1rem;
+    color: var(--sk-fg, CanvasText);
+    border: 1px solid var(--sk-line, #d6d6d6);
+    border-radius: var(--sk-radius, 0.5rem);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+}
 @media (max-width: 600px) {
   .sk-footer-top {
     grid-template-columns: 1fr;
@@ -360,3 +393,99 @@
     display: none;
   }
 }
+
+/* One native disclosure and one link tree for grouped application navigation. */
+.sk-grouped-menu {
+  margin-inline-start: auto;
+}
+.sk-grouped-menu summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 44px;
+  padding: 0.65rem 0.85rem;
+  list-style: none;
+  cursor: pointer;
+  border: 1px solid var(--sk-line, #d6d6d6);
+  border-radius: var(--sk-radius, 0.5rem);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.sk-grouped-menu summary::-webkit-details-marker {
+  display: none;
+}
+.sk-grouped-panel {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-end: var(--sk-gutter, 1rem);
+  width: min(54rem, calc(100% - 2 * var(--sk-gutter, 1rem)));
+  box-sizing: border-box;
+  max-height: 75dvh;
+  overflow-y: auto;
+  padding: 1rem;
+  background: var(--sk-bg, Canvas);
+  border: 1px solid var(--sk-line, #d6d6d6);
+  border-radius: var(--sk-radius, 0.5rem);
+  box-shadow: 0 18px 40px #00000014;
+}
+.sk-nav-groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: 1rem;
+}
+.sk-nav-group {
+  min-width: 0;
+}
+.sk-nav-group h2 {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: var(--sk-muted, #555);
+}
+.sk-grouped-actions a,
+.sk-nav-group a {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 44px;
+  padding: 0.75rem;
+  border-radius: var(--sk-radius, 0.5rem);
+  color: var(--sk-fg, CanvasText);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.sk-nav-group a:hover,
+.sk-nav-group a[aria-current='page'] {
+  background: var(--sk-raised, #f0f0f0);
+}
+.sk-nav-link-label {
+  font-weight: 600;
+}
+.sk-nav-description {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sk-muted, #555);
+}
+.sk-grouped-actions {
+  display: none;
+}
+@media (max-width: 600px) {
+  .sk-nav-groups {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 380px) {
+  .sk-masthead-row:has(.sk-grouped-menu) > .sk-account-actions {
+    display: none;
+  }
+  .sk-grouped-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-top: 1px solid var(--sk-line, #d6d6d6);
+    padding-top: 0.75rem;
+    margin-top: 0.75rem;
+  }
+}