@bitbaum/sitekit 0.5.0 → 0.5.1

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/package.json

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