@bitbaum/sitekit 0.4.0 → 0.4.2

package/README.md

@@ -154,3 +154,9 @@ Tests import the package by **name** (`@bitbaum/sitekit`, `@bitbaum/sitekit/reac
 Part of **[bitbaum](https://bitbaum.orangecat.ch)** — AI-native products on open
 infrastructure, built in Zürich. Every package here lists the apps that use it:
 **[which apps use sitekit](https://bitbaum.orangecat.ch/packages/#sitekit)**.
+
+Application footers can pass `groups: [{ label, links: [{ href, label }] }]` for
+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.

package/dist/react/SiteChrome.d.ts

@@ -17,13 +17,21 @@ interface Props {
     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 SiteFooter({ chrome, appearance, links, Link, label, extra, }: {
+export declare function SiteFooter({ chrome, appearance, links, groups, Link, label, extra, }: {
     chrome: SiteChromeSpec;
     appearance?: 'application';
     links?: Array<{
         href: string;
         label: string;
     }>;
+    /** Optional semantic link groups; flat links remain supported. */
+    groups?: Array<{
+        label: string;
+        links: Array<{
+            href: string;
+            label: string;
+        }>;
+    }>;
     Link?: LinkLike;
     label?: string;
     extra?: ReactNode;

package/dist/react/SiteChrome.js

@@ -18,8 +18,8 @@ export function SiteMasthead({ chrome, navItems, currentPath, Link = DefaultLink
         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, appearance, links = [], Link = DefaultLink, label = 'Footer navigation', extra, }) {
+export function SiteFooter({ chrome, appearance, links = [], groups, 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: "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 })] }), groups ? (_jsx("nav", { "aria-label": label, className: "sk-footer-groups", style: { '--sk-footer-columns': groups.length }, children: groups.map((group) => (_jsxs("div", { className: "sk-footer-group", children: [_jsx("h2", { children: group.label }), group.links.map((item) => (_jsx(Link, { href: item.href, children: item.label }, item.href)))] }, group.label))) })) : (_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/package.json

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

@@ -16,7 +16,7 @@
   border-bottom: 1px solid var(--sk-line, #d6d6d6);
 }
 .sk-masthead-row {
-  min-height: 80px;
+  min-height: var(--sk-header-height, 80px);
   display: flex;
   align-items: center;
   gap: clamp(1rem, 2vw, 2rem);
@@ -127,7 +127,7 @@
   border-radius: var(--sk-radius, 0.5rem);
 }
 .sk-footer {
-  margin-top: clamp(4rem, 8vw, 7rem);
+  margin-top: var(--sk-footer-gap, clamp(4rem, 8vw, 7rem));
   border-top: 1px solid var(--sk-line, #d6d6d6);
   background: var(--sk-bg, Canvas);
   padding-block: 3rem 1.5rem;
@@ -201,7 +201,7 @@
   }
   .sk-masthead-row {
     gap: 0.5rem;
-    min-height: 72px;
+    min-height: var(--sk-mobile-header-height, 72px);
   }
   .sk-brand {
     margin-inline-end: auto;
@@ -234,9 +234,9 @@
   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;
+  font-weight: var(--sk-display-weight, 400);
+  line-height: var(--sk-display-leading, 1.05);
+  letter-spacing: var(--sk-display-tracking, -0.045em);
   text-wrap: balance;
   max-width: var(--sk-title-measure, 20ch);
 }
@@ -245,8 +245,8 @@
   display: grid;
   gap: 1rem;
   color: var(--sk-muted, #555);
-  font-size: clamp(1.05rem, 2vw, 1.2rem);
-  line-height: 1.75;
+  font-size: var(--sk-lead-size, clamp(1.05rem, 2vw, 1.2rem));
+  line-height: var(--sk-lead-leading, 1.75);
 }
 .sk-hero-actions {
   display: grid;
@@ -287,3 +287,22 @@
     grid-auto-flow: row;
   }
 }
+
+.sk-footer nav.sk-footer-groups {
+  grid-template-columns: repeat(var(--sk-footer-columns, 3), minmax(0, 1fr));
+  gap: 1.5rem;
+}
+.sk-footer-group h2 {
+  margin: 0 0 0.75rem;
+  font: 600 0.75rem/1.5 var(--sk-font, system-ui, sans-serif);
+  color: var(--sk-fg, CanvasText);
+}
+.sk-footer-group a {
+  font-size: 0.8125rem;
+}
+@media (max-width: 600px) {
+  .sk-footer nav.sk-footer-groups {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.5rem;
+  }
+}