@bitbaum/sitekit 0.4.2 → 0.5.1

package/README.md

@@ -160,3 +160,9 @@ semantic navigation groups. Existing flat `links` remain supported. Consumers
 can configure `--sk-header-height`, `--sk-mobile-header-height`,
 `--sk-display-weight`, `--sk-display-leading`, `--sk-display-tracking` and
 `--sk-footer-gap` through their theme adapter, without replacing shared markup.
+
+## Mobile tab bar
+
+`SiteTabBar` renders a fixed bottom navigation for small screens (hidden from
+48rem up, where the masthead nav takes over). Pass 3–5 `{ path, label, icon }`
+items and the current path; it renders its own spacer so content is not hidden.

package/dist/react/SiteChrome.js

@@ -15,7 +15,7 @@ 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', }) {
     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, 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,6 +6,7 @@
  * 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';
 interface Props {
@@ -20,6 +21,12 @@ interface Props {
     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, currentPath, Link, appearance, label, menuLabel, menuActions, }: Props): import("react").JSX.Element | null;
 export {};

package/dist/react/SiteNav.js

@@ -1,22 +1,14 @@
 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, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', menuActions, }) {
     if (appearance === 'application') {
         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/SiteTabBar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The mobile bottom tab bar: three to five destinations within thumb reach.
+ *
+ * A server component like SiteNav (the injected Link is a function). It is
+ * hidden from the desktop breakpoint up by styles.css (`--sk-tabbar-hide`,
+ * default 48rem) so the masthead nav stays the one desktop navigation.
+ * Consumers add `padding-bottom: var(--sk-tabbar-height)` to their page body
+ * on small screens, or use the `.sk-tabbar-spacer` the component renders.
+ */
+import type { ReactNode } from 'react';
+import { type LinkLike } from './link.js';
+export interface SiteTabItem {
+    path: string;
+    label: string;
+    /** Decorative glyph or SVG; hidden from assistive tech. */
+    icon: ReactNode;
+}
+interface Props {
+    items: SiteTabItem[];
+    currentPath: string;
+    Link?: LinkLike;
+    label?: string;
+}
+export declare function SiteTabBar({ items, currentPath, Link, label }: Props): import("react").JSX.Element | null;
+export {};

package/dist/react/SiteTabBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { href } from '../model.js';
+import { DefaultLink } from './link.js';
+const isCurrent = (path, current) => {
+    const a = href(path);
+    const b = href(current);
+    return a === '/' ? b === '/' : b === a || b.startsWith(a + '/');
+};
+export function SiteTabBar({ items, currentPath, Link = DefaultLink, label = 'Main' }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "sk-tabbar-spacer", "aria-hidden": "true" }), _jsx("nav", { className: "sk-tabbar", "aria-label": label, children: items.slice(0, 5).map((item) => {
+                    const current = isCurrent(item.path, currentPath);
+                    return (_jsxs(Link, { href: href(item.path), "aria-current": current ? 'page' : undefined, className: "sk-tab", children: [_jsx("span", { className: "sk-tab-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { className: "sk-tab-label", children: item.label })] }, item.path));
+                }) })] }));
+}

package/dist/react/index.d.ts

@@ -9,6 +9,7 @@
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
+export { SiteTabBar, type SiteTabItem } from './SiteTabBar.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink, type LinkLike, type LinkProps } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/dist/react/index.js

@@ -9,6 +9,7 @@
 export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
+export { SiteTabBar } from './SiteTabBar.js';
 export { NavAutoScroll } from './NavAutoScroll.js';
 export { DefaultLink } from './link.js';
 export { SectionHeading, Blurb, SectionBody } from './sections/Primitives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/sitekit",
-  "version": "0.4.2",
+  "version": "0.5.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",

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;
@@ -306,3 +339,57 @@
     gap: 1.5rem;
   }
 }
+/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up. */
+.sk-tabbar {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 45;
+  display: flex;
+  justify-content: space-around;
+  gap: 2px;
+  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
+  background: var(--sk-bg, Canvas);
+  border-top: 1px solid var(--sk-line, #d6d6d6);
+  font-family: var(--sk-font, system-ui, sans-serif);
+}
+.sk-tab {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 2px;
+  border-radius: 10px;
+  color: var(--sk-muted, #555);
+  font-size: 11px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.sk-tab-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+.sk-tab-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.sk-tab[aria-current='page'] {
+  color: var(--sk-fg, CanvasText);
+  background: var(--sk-tab-active, color-mix(in srgb, currentColor 8%, transparent));
+}
+.sk-tab:focus-visible {
+  outline: 2px solid var(--sk-focus, Highlight);
+  outline-offset: 2px;
+}
+.sk-tabbar-spacer {
+  height: var(--sk-tabbar-height, 68px);
+}
+@media (min-width: 48rem) {
+  .sk-tabbar,
+  .sk-tabbar-spacer {
+    display: none;
+  }
+}