@bitbaum/sitekit 0.3.1 → 0.4.0

package/README.md

@@ -58,6 +58,27 @@ import { SiteMasthead, SiteFooter, SiteSections } from '@bitbaum/sitekit/react';
 correct everywhere; a Next.js app passes `next/link` to get client-side
 navigation back.
 
+## Application shell
+
+Product apps use the same masthead, navigation and footer with the application
+appearance. Import `@bitbaum/sitekit/styles.css` once. No Tailwind setup is
+required for this appearance; `--sk-*` variables map it to the product's shared
+design tokens. Existing document sites keep their utility-class appearance.
+
+```tsx
+<SiteMasthead appearance="application" chrome={chrome} navItems={nav}
+  currentPath="analyze" mainId="main-content" Link={Link}
+  brand={<Brand />} actions={<AccountControl />} />
+<SiteFooter appearance="application" chrome={chrome} Link={Link}
+  links={[{ href: '/roadmap', label: 'Roadmap' }]} extra="Beta" />
+```
+
+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
+slots. Fix shared chrome here, then release and update consumers through their
+normal dependency checks and deployment pipeline.
+
 ## Provenance — the check behind "fabricate no facts"
 
 A closed schema invites completion: a model handed a `stats` section wants

package/dist/react/MenuDismiss.d.ts

@@ -0,0 +1,4 @@
+/** Native details works without JS; this adds Escape, outside click and route dismissal. */
+export declare function MenuDismiss({ currentPath }: {
+    currentPath: string;
+}): null;

package/dist/react/MenuDismiss.js

@@ -0,0 +1,40 @@
+'use client';
+import { useEffect } from 'react';
+/** Native details works without JS; this adds Escape, outside click and route dismissal. */
+export function MenuDismiss({ currentPath }) {
+    useEffect(() => {
+        const menus = Array.from(document.querySelectorAll('[data-sitekit-menu]'));
+        for (const menu of menus)
+            menu.open = false;
+        const key = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            for (const menu of menus)
+                if (menu.open) {
+                    menu.open = false;
+                    menu.querySelector('summary')?.focus();
+                }
+        };
+        const outside = (event) => {
+            for (const menu of menus)
+                if (!menu.contains(event.target))
+                    menu.open = false;
+        };
+        const follow = (event) => {
+            if (event.target.closest('a'))
+                for (const menu of menus)
+                    menu.open = false;
+        };
+        document.addEventListener('keydown', key);
+        document.addEventListener('pointerdown', outside);
+        for (const menu of menus)
+            menu.addEventListener('click', follow);
+        return () => {
+            document.removeEventListener('keydown', key);
+            document.removeEventListener('pointerdown', outside);
+            for (const menu of menus)
+                menu.removeEventListener('click', follow);
+        };
+    }, [currentPath]);
+    return null;
+}

package/dist/react/SiteChrome.d.ts

@@ -1,14 +1,4 @@
-/**
- * Masthead and footer.
- *
- * The masthead is a rule, not a bar. It sticks so the nav stays reachable on
- * a long page, but it carries no shadow, no fill beyond the page's own
- * surface, and no logo — a hairline and a wordmark are enough, and anything
- * heavier competes with the document.
- *
- * There is deliberately no "hosted on" or "built by" line. A generated site
- * belongs to its subject; its footer has no business advertising anyone else.
- */
+import type { ReactNode } from 'react';
 import type { SiteChrome as SiteChromeSpec, SiteNavItem } from '../schema.js';
 import { type LinkLike } from './link.js';
 interface Props {
@@ -17,9 +7,25 @@ interface Props {
     currentPath: string;
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
+    /** Opt-in application shell, styled by @bitbaum/sitekit/styles.css. */
+    appearance?: 'application';
+    brand?: ReactNode;
+    actions?: ReactNode;
+    mainId?: string;
+    skipLabel?: string;
+    navLabel?: string;
+    menuLabel?: string;
 }
-export declare function SiteMasthead({ chrome, navItems, currentPath, Link }: Props): import("react").JSX.Element;
-export declare function SiteFooter({ chrome }: {
+export declare function SiteMasthead({ chrome, navItems, currentPath, Link, appearance, brand, actions, mainId, skipLabel, navLabel, menuLabel, }: Props): import("react").JSX.Element;
+export declare function SiteFooter({ chrome, appearance, links, Link, label, extra, }: {
     chrome: SiteChromeSpec;
+    appearance?: 'application';
+    links?: Array<{
+        href: string;
+        label: string;
+    }>;
+    Link?: LinkLike;
+    label?: string;
+    extra?: ReactNode;
 }): import("react").JSX.Element;
 export {};

package/dist/react/SiteChrome.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Masthead and footer.
  *
@@ -13,9 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { href } from '../model.js';
 import { DefaultLink } from './link.js';
 import { SiteNav } from './SiteNav.js';
-export function SiteMasthead({ chrome, navItems, currentPath, Link = DefaultLink }) {
+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 (_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 }) {
+export function SiteFooter({ chrome, appearance, links = [], Link = DefaultLink, label = 'Footer navigation', extra, }) {
+    if (appearance === 'application')
+        return (_jsx("footer", { className: "sk-footer", children: _jsxs("div", { className: "sk-shell-frame", children: [_jsxs("div", { className: "sk-footer-top", children: [_jsxs("div", { children: [_jsx(Link, { href: "/", className: "sk-footer-brand", children: chrome.name }), _jsx("p", { children: chrome.footerNote })] }), _jsx("nav", { "aria-label": label, children: links.map((item) => (_jsx(Link, { href: item.href, children: item.label }, item.href))) })] }), _jsxs("div", { className: "sk-footer-bottom", children: [_jsxs("span", { children: ["\u00A9 ", new Date().getFullYear(), " ", chrome.name] }), extra] })] }) }));
     return (_jsx("footer", { className: "mt-24 border-t border-subtle", children: _jsxs("div", { className: "mx-auto max-w-shell px-4 py-12 sm:px-6 lg:px-8", children: [_jsx("p", { className: "max-w-prose text-sm leading-relaxed text-fg-secondary", children: chrome.footerNote }), _jsxs("div", { className: "mt-8 flex flex-col gap-2 border-t border-subtle pt-6 font-mono text-xs uppercase tracking-caps text-fg-muted sm:flex-row sm:items-center sm:justify-between", children: [chrome.host && _jsx("span", { children: chrome.host }), _jsxs("span", { className: "normal-case tracking-normal", children: ["\u00A9 ", chrome.name] })] })] }) }));
 }

package/dist/react/SiteNav.d.ts

@@ -17,6 +17,9 @@ interface Props {
     currentPath: string;
     /** Framework link component (e.g. next/link). Defaults to a plain anchor. */
     Link?: LinkLike;
+    appearance?: 'application';
+    label?: string;
+    menuLabel?: string;
 }
-export declare function SiteNav({ items, currentPath, Link }: Props): import("react").JSX.Element;
+export declare function SiteNav({ items, currentPath, Link, appearance, label, menuLabel, }: Props): import("react").JSX.Element | null;
 export {};

package/dist/react/SiteNav.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * The masthead's section nav.
  *
@@ -9,9 +9,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 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 }) {
-    return (_jsxs("nav", { "data-sitekit-nav": true, "aria-label": "Sections", className: "scrollbar-hide -mx-1 flex max-w-full flex-nowrap items-center gap-x-1 overflow-x-auto", children: [items.map((item) => {
+export function SiteNav({ items, currentPath, Link = DefaultLink, appearance, label = 'Sections', menuLabel = 'Menu', }) {
+    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("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;
                 return (_jsx(Link, { href: href(item.path), "aria-current": isCurrent ? 'page' : undefined, className: [
                         // min-h-11 is the 44px touch floor. `px-2 py-1` on text-xs came out

package/dist/react/sections/HeroSection.d.ts

@@ -6,8 +6,9 @@
  * illustration, no button. The claim is the design.
  */
 import type { SiteSection } from '../../schema.js';
-export declare function HeroSection({ section }: {
+export declare function HeroSection({ section, appearance, }: {
     section: Extract<SiteSection, {
         kind: 'hero';
     }>;
+    appearance?: 'application';
 }): import("react").JSX.Element;

package/dist/react/sections/HeroSection.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function HeroSection({ section }) {
+export function HeroSection({ section, appearance, }) {
+    if (appearance === 'application')
+        return (_jsxs("section", { className: "sk-hero", children: [section.eyebrow && _jsx("p", { className: "sk-eyebrow", children: section.eyebrow }), _jsx("h1", { className: "sk-hero-title", children: section.statement }), _jsx("div", { className: "sk-hero-lead", children: section.lead.map((text, i) => (_jsx("p", { children: text }, i))) }), !!section.actions?.length && (_jsx("div", { className: "sk-hero-actions", children: section.actions.map((action, i) => (_jsx("a", { className: i === 0 ? 'sk-primary-action' : 'sk-secondary-action', href: action.href, children: action.label }, action.href))) }))] }));
     return (_jsxs("section", { className: "border-b border-subtle pb-12", children: [section.eyebrow && (_jsx("p", { className: "font-mono text-xs uppercase tracking-caps text-fg-tertiary", children: section.eyebrow })), _jsx("h1", { className: "mt-5 max-w-4xl font-heading text-4xl font-semibold leading-tight tracking-display text-fg-primary sm:text-5xl lg:text-6xl", children: section.statement }), _jsx("div", { className: "mt-7 max-w-prose space-y-4", children: section.lead.map((paragraph, index) => (_jsx("p", { className: "text-lg leading-relaxed text-fg-secondary", children: paragraph }, index))) }), section.actions && section.actions.length > 0 && (_jsx("div", { className: "mt-8 flex flex-wrap gap-3", children: section.actions.map((action, i) => (_jsx("a", { href: action.href, className: [
                         'inline-flex min-h-11 items-center justify-center rounded-full px-6 py-2.5 text-sm font-medium transition-colors',
                         i === 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/sitekit",
-  "version": "0.3.1",
+  "version": "0.4.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",
@@ -21,7 +21,9 @@
     "headless-cms"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "packageManager": "pnpm@11.25.0",
   "engines": {
     "node": ">=20"
@@ -31,7 +33,8 @@
     "provenance": true
   },
   "files": [
-    "dist"
+    "dist",
+    "styles.css"
   ],
   "exports": {
     ".": {
@@ -41,7 +44,8 @@
     "./react": {
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
-    }
+    },
+    "./styles.css": "./styles.css"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -65,7 +69,7 @@
     "@types/react": "^19.0.0",
     "eslint": "^10.9.1",
     "globals": "^17.12.0",
-    "prettier": "3.9.6",
+    "prettier": "3.9.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^6.0.3",

package/styles.css

@@ -0,0 +1,289 @@
+/* Shared application chrome. Consumers supply semantic theme variables only. */
+:where(.sk-masthead, .sk-footer) {
+  color: var(--sk-fg, CanvasText);
+  font-family: var(--sk-font, system-ui, sans-serif);
+}
+.sk-shell-frame {
+  width: min(100%, var(--sk-width, 76rem));
+  margin-inline: auto;
+  padding-inline: var(--sk-gutter, clamp(1rem, 4vw, 2.5rem));
+}
+.sk-masthead {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--sk-bg, Canvas);
+  border-bottom: 1px solid var(--sk-line, #d6d6d6);
+}
+.sk-masthead-row {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  gap: clamp(1rem, 2vw, 2rem);
+}
+.sk-brand,
+.sk-footer-brand {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 650;
+  letter-spacing: -0.035em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 44px;
+  white-space: nowrap;
+  font-size: 1.2rem;
+}
+.sk-brand img,
+.sk-brand svg {
+  width: 38px;
+  height: 38px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.sk-desktop-nav {
+  margin-inline: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.sk-desktop-nav a,
+.sk-mobile-menu nav a,
+.sk-footer nav a {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  color: var(--sk-muted, #555);
+  text-decoration: none;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+.sk-desktop-nav a {
+  padding: 0.75rem 0.7rem;
+  border-radius: var(--sk-radius, 0.5rem);
+  white-space: nowrap;
+}
+.sk-desktop-nav a[aria-current='page'],
+.sk-mobile-menu a[aria-current='page'] {
+  background: var(--sk-raised, #f0f0f0);
+  color: var(--sk-fg, CanvasText);
+  font-weight: 600;
+}
+.sk-account-actions {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.sk-account-actions > a {
+  display: inline-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;
+}
+.sk-mobile-menu {
+  display: none;
+}
+.sk-mobile-menu summary {
+  cursor: pointer;
+  list-style: none;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid var(--sk-line, #d6d6d6);
+  border-radius: var(--sk-radius, 0.5rem);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.sk-mobile-menu summary::-webkit-details-marker {
+  display: none;
+}
+.sk-mobile-menu nav {
+  position: absolute;
+  top: 100%;
+  left: var(--sk-gutter, 1rem);
+  right: var(--sk-gutter, 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;
+  padding: 0.5rem;
+  max-height: 75dvh;
+  overflow-y: auto;
+}
+.sk-mobile-menu nav a {
+  padding: 0.8rem 1rem;
+  border-radius: var(--sk-radius, 0.5rem);
+}
+.sk-footer {
+  margin-top: clamp(4rem, 8vw, 7rem);
+  border-top: 1px solid var(--sk-line, #d6d6d6);
+  background: var(--sk-bg, Canvas);
+  padding-block: 3rem 1.5rem;
+}
+.sk-footer-top {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+}
+.sk-footer-top p {
+  margin-top: 0.5rem;
+  color: var(--sk-muted, #555);
+  max-width: 36ch;
+  line-height: 1.7;
+  font-size: 0.875rem;
+}
+.sk-footer nav {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 1.5rem;
+}
+.sk-footer nav a {
+  padding-block: 0.5rem;
+}
+.sk-footer-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--sk-line, #d6d6d6);
+  color: var(--sk-muted, #555);
+  font-size: 0.75rem;
+}
+.sk-footer-bottom a {
+  color: inherit;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+}
+.sk-skip {
+  position: fixed;
+  left: 1rem;
+  top: -10rem;
+  z-index: 100;
+  padding: 1rem;
+  color: var(--sk-bg, Canvas);
+  background: var(--sk-fg, CanvasText);
+  border-radius: 0.5rem;
+}
+.sk-skip:focus {
+  top: 1rem;
+}
+:where(.sk-masthead, .sk-footer) :is(a, summary, button):focus-visible,
+.sk-skip:focus-visible {
+  outline: 3px solid var(--sk-focus, Highlight);
+  outline-offset: 3px;
+}
+@media (max-width: 1100px) {
+  .sk-desktop-nav {
+    display: none;
+  }
+  .sk-mobile-menu {
+    display: block;
+    order: 3;
+  }
+  .sk-mobile-menu summary {
+    display: flex;
+  }
+  .sk-masthead-row {
+    gap: 0.5rem;
+    min-height: 72px;
+  }
+  .sk-brand {
+    margin-inline-end: auto;
+  }
+}
+@media (max-width: 600px) {
+  .sk-footer-top {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  .sk-brand {
+    font-size: 1.05rem;
+    gap: 0.5rem;
+  }
+  .sk-account-actions > a {
+    padding-inline: 0.75rem;
+  }
+}
+
+.sk-hero {
+  padding-block: var(--sk-hero-space, clamp(3rem, 7vw, 6rem));
+}
+.sk-eyebrow {
+  font: 600 0.7rem/1.5 var(--sk-mono, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  color: var(--sk-muted, #555);
+}
+.sk-hero-title {
+  margin-block: 1rem 1.5rem;
+  font-family: var(--sk-display, Georgia, serif);
+  font-size: var(--sk-title-size, clamp(3rem, 6vw, 5rem));
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -0.045em;
+  text-wrap: balance;
+  max-width: var(--sk-title-measure, 20ch);
+}
+.sk-hero-lead {
+  max-width: var(--sk-measure, 64ch);
+  display: grid;
+  gap: 1rem;
+  color: var(--sk-muted, #555);
+  font-size: clamp(1.05rem, 2vw, 1.2rem);
+  line-height: 1.75;
+}
+.sk-hero-actions {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 0.75rem;
+  margin-top: 2rem;
+  max-width: 36rem;
+}
+.sk-hero-actions a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0.8rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  border-radius: var(--sk-radius, 0.5rem);
+  text-decoration: none;
+  text-align: center;
+}
+.sk-primary-action {
+  background: var(--sk-fg, CanvasText);
+  color: var(--sk-bg, Canvas);
+  border: 1px solid var(--sk-fg, CanvasText);
+}
+.sk-secondary-action {
+  background: transparent;
+  color: var(--sk-fg, CanvasText);
+  border: 1px solid var(--sk-line, #d6d6d6);
+}
+.sk-hero-actions a:focus-visible {
+  outline: 3px solid var(--sk-focus, Highlight);
+  outline-offset: 3px;
+}
+@media (max-width: 420px) {
+  .sk-hero-actions {
+    grid-auto-flow: row;
+  }
+}