@bitbaum/sitekit 0.6.1 → 0.7.0

package/README.md

@@ -183,3 +183,14 @@ can configure `--sk-header-height`, `--sk-mobile-header-height`,
 `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.
+
+Use `SiteIcon` for the icons — `{ icon: <SiteIcon name="write" /> }` — not a
+unicode glyph: the set is drawn on `currentColor`, so icon and label take one
+colour and the current tab is one rule. Names: `SITE_ICON_NAMES`. Pass
+`tabBar` to `SiteMasthead` on the same page so the masthead drops its menu
+button on phones instead of repeating the tab bar's destinations:
+
+```tsx
+<SiteMasthead appearance="application" tabBar navItems={nav} … />
+<SiteTabBar items={nav.map((n) => ({ ...n, icon: <SiteIcon name={n.icon} /> }))} … />
+```

package/dist/react/SiteChrome.d.ts

@@ -18,8 +18,15 @@ interface Props {
     skipLabel?: string;
     navLabel?: string;
     menuLabel?: string;
+    /**
+     * The page also renders a `SiteTabBar` with these destinations. On phones
+     * the tab bar is then the navigation, and the masthead's menu button is
+     * dropped below the tab bar breakpoint instead of repeating it — one way to
+     * each place, not two. The account actions stay in the masthead.
+     */
+    tabBar?: boolean;
 }
-export declare function SiteMasthead({ chrome, navItems, navGroups, 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, tabBar, }: 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, navGroups, 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', tabBar = false, }) {
     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, groups: navGroups, currentPath: currentPath, Link: Link, appearance: "application", label: navLabel, menuLabel: menuLabel, menuActions: actions }), 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: tabBar ? 'sk-masthead sk-masthead--tabbar' : '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/icons.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One small icon set for the shell: the tab bar and the account actions.
+ *
+ * Products used to pass unicode glyphs (◎ ✎ ⌕ ⇄ ★) as tab icons, which
+ * render differently on every phone and never look like an interface. These
+ * are 24-unit stroke outlines on `currentColor`, so a tab's icon and label
+ * take the same colour and the active state is one rule. Decorative only:
+ * every one is `aria-hidden`, the label beside it is what is read out.
+ */
+import type { SVGProps } from 'react';
+export type SiteIconName = 'home' | 'write' | 'search' | 'compass' | 'star' | 'user' | 'chat' | 'bell' | 'settings' | 'list' | 'globe' | 'book' | 'heart' | 'plus' | 'menu' | 'calendar' | 'wallet' | 'chart';
+export interface SiteIconProps extends Omit<SVGProps<SVGSVGElement>, 'name'> {
+    name: SiteIconName;
+    /** Rendered size in CSS pixels; the tab bar sets its own. */
+    size?: number | string;
+}
+/** A shell icon on `currentColor`. Decorative: hidden from assistive tech. */
+export declare function SiteIcon({ name, size, className, ...rest }: SiteIconProps): import("react").JSX.Element;
+export declare const SITE_ICON_NAMES: SiteIconName[];

package/dist/react/icons.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const PATHS = {
+    home: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 11.5 12 4l9 7.5" }), _jsx("path", { d: "M5.5 10.5V20h13v-9.5" }), _jsx("path", { d: "M10 20v-5h4v5" })] })),
+    write: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17z" }), _jsx("path", { d: "M13.5 8.5 16.5 11.5" })] })),
+    search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "M20 20l-4.5-4.5" })] })),
+    compass: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m15.5 8.5-2 5-5 2 2-5z" })] })),
+    star: _jsx("path", { d: "m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1.1 5.9L12 16.9l-5.3 2.8 1.1-5.9-4.3-4.1 5.9-.8z" }),
+    user: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "8.5", r: "4" }), _jsx("path", { d: "M4.5 20.5c.8-4 4-6 7.5-6s6.7 2 7.5 6" })] })),
+    chat: _jsx("path", { d: "M4 5.5h16v10H9.5L5.5 19v-3.5H4z" }),
+    bell: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z" }), _jsx("path", { d: "M10 20.5a2 2 0 0 0 4 0" })] })),
+    settings: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8" })] })),
+    list: _jsx("path", { d: "M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" }),
+    globe: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18" })] })),
+    book: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z" }), _jsx("path", { d: "M4 18A2.5 2.5 0 0 1 6.5 15.5H20" })] })),
+    heart: (_jsx("path", { d: "M12 20s-7.5-4.6-7.5-10A4.2 4.2 0 0 1 12 7.7 4.2 4.2 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z" })),
+    plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
+    menu: _jsx("path", { d: "M4 7h16M4 12h16M4 17h16" }),
+    calendar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }), _jsx("path", { d: "M4 10h16M8 3v4M16 3v4" })] })),
+    wallet: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 7.5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("path", { d: "M3 7.5V6a2 2 0 0 1 2-2h11" }), _jsx("circle", { cx: "16.5", cy: "14", r: "1.2" })] })),
+    chart: _jsx("path", { d: "M4 20V4M4 20h16M8 16v-5M12 16V8M16 16v-3M20 16V6" }),
+};
+/** A shell icon on `currentColor`. Decorative: hidden from assistive tech. */
+export function SiteIcon({ name, size, className, ...rest }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", className: className ? `sk-icon ${className}` : 'sk-icon', "data-icon": name, ...rest, children: PATHS[name] }));
+}
+export const SITE_ICON_NAMES = Object.keys(PATHS);

package/dist/react/index.d.ts

@@ -10,6 +10,7 @@ export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav, type SiteNavGroup } from './SiteNav.js';
 export { SiteTabBar, type SiteTabItem } from './SiteTabBar.js';
+export { SiteIcon, SITE_ICON_NAMES, type SiteIconName, type SiteIconProps } from './icons.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

@@ -10,6 +10,7 @@ export { SiteSections } from './SiteSections.js';
 export { SiteMasthead, SiteFooter } from './SiteChrome.js';
 export { SiteNav } from './SiteNav.js';
 export { SiteTabBar } from './SiteTabBar.js';
+export { SiteIcon, SITE_ICON_NAMES } from './icons.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.6.1",
+  "version": "0.7.0",
   "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

@@ -339,37 +339,51 @@
     gap: 1.5rem;
   }
 }
-/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up. */
+/* Mobile bottom tab bar (SiteTabBar). Hidden from --sk-tabbar-breakpoint up.
+   One row of equal cells; the current one carries a short rule above its icon
+   and the full text colour, so the active state reads without a fill. */
 .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));
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  padding: 0 4px calc(0px + 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;
+  position: relative;
   min-width: 0;
+  min-height: 56px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 6px 2px;
-  border-radius: 10px;
+  justify-content: center;
+  gap: 3px;
+  padding: 8px 4px 6px;
   color: var(--sk-muted, #555);
   font-size: 11px;
   font-weight: 600;
+  letter-spacing: 0.01em;
   text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .sk-tab-icon {
-  font-size: 20px;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
   line-height: 1;
 }
+.sk-tab-icon > svg {
+  width: 24px;
+  height: 24px;
+}
 .sk-tab-label {
   white-space: nowrap;
   overflow: hidden;
@@ -378,14 +392,36 @@
 }
 .sk-tab[aria-current='page'] {
   color: var(--sk-fg, CanvasText);
-  background: var(--sk-tab-active, color-mix(in srgb, currentColor 8%, transparent));
+}
+.sk-tab[aria-current='page']::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 50%;
+  width: 28px;
+  height: 3px;
+  transform: translateX(-50%);
+  border-radius: 0 0 3px 3px;
+  background: var(--sk-tab-active, currentColor);
 }
 .sk-tab:focus-visible {
   outline: 2px solid var(--sk-focus, Highlight);
-  outline-offset: 2px;
+  outline-offset: -4px;
+  border-radius: 10px;
 }
 .sk-tabbar-spacer {
-  height: var(--sk-tabbar-height, 68px);
+  height: calc(var(--sk-tabbar-height, 56px) + env(safe-area-inset-bottom));
+}
+/* Below the tab bar breakpoint the tab bar IS the navigation: a masthead that
+   says so (`tabBar`) drops its menu button rather than offering the same five
+   places twice. */
+@media (max-width: 47.999rem) {
+  .sk-masthead--tabbar .sk-mobile-menu {
+    display: none;
+  }
+  .sk-masthead--tabbar .sk-masthead-row:has(.sk-mobile-menu) > .sk-account-actions {
+    display: flex;
+  }
 }
 @media (min-width: 48rem) {
   .sk-tabbar,
@@ -393,8 +429,15 @@
     display: none;
   }
 }
-
+.sk-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
 /* One native disclosure and one link tree for grouped application navigation. */
+.sk-masthead-row:has(.sk-grouped-menu) {
+  position: relative;
+}
 .sk-grouped-menu {
   margin-inline-start: auto;
 }
@@ -442,7 +485,7 @@
   font-size: 0.875rem;
   color: var(--sk-muted, #555);
 }
-.sk-grouped-actions a,
+.sk-grouped-actions > a,
 .sk-nav-group a {
   display: flex;
   flex-direction: column;
@@ -477,6 +520,11 @@
   }
 }
 @media (max-width: 380px) {
+  /* Give host account popovers the full narrow viewport, including padding. */
+  .sk-grouped-panel {
+    inset-inline: 0;
+    width: 100%;
+  }
   .sk-masthead-row:has(.sk-grouped-menu) > .sk-account-actions {
     display: none;
   }