@bitbaum/sitekit 0.3.0

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

@@ -0,0 +1,41 @@
+/**
+ * Sections a small business needs that a research publication does not:
+ * the founder story, where the shop actually is, and the questions every
+ * customer asks. Added for the Camille rebuild (the first real site the
+ * union was tested against), which is exactly how the union is meant to
+ * grow — a kind lands here with its schema and tests when a real site
+ * cannot be expressed without it.
+ */
+import type { SiteSection } from '../../schema.js';
+/**
+ * A figure beside a story. The one section on a small-business site that is
+ * allowed to be personal.
+ */
+export declare function FeatureSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'feature';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+/**
+ * Where the business actually is. Address, phone and hours are the fields
+ * the provenance rules exist to protect — this renderer shows exactly what
+ * the data says and nothing more, including simply omitting hours that were
+ * never found.
+ */
+export declare function ContactSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'contact';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+/**
+ * Native <details> disclosure — works with JavaScript disabled, which a
+ * generated site for a small business should.
+ */
+export declare function FaqSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'faq';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;

package/dist/react/sections/BusinessSections.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sections a small business needs that a research publication does not:
+ * the founder story, where the shop actually is, and the questions every
+ * customer asks. Added for the Camille rebuild (the first real site the
+ * union was tested against), which is exactly how the union is meant to
+ * grow — a kind lands here with its schema and tests when a real site
+ * cannot be expressed without it.
+ */
+import { Blurb, SectionBody, SectionHeading } from './Primitives.js';
+/**
+ * A figure beside a story. The one section on a small-business site that is
+ * allowed to be personal.
+ */
+export function FeatureSection({ section, index, }) {
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), _jsx(SectionBody, { children: _jsxs("div", { className: section.image ? 'grid items-center gap-10 lg:grid-cols-2' : 'max-w-prose', children: [section.image && (_jsx("img", { src: section.image.src, alt: section.image.alt, className: "w-full rounded-2xl border border-subtle object-cover" })), _jsxs("div", { children: [_jsx("div", { className: "max-w-prose space-y-4", children: section.paragraphs.map((paragraph, i) => (_jsx("p", { className: "text-base leading-relaxed text-fg-secondary", children: paragraph }, i))) }), section.quote && (_jsxs("blockquote", { className: "mt-6 border-l-4 border-accent pl-4 italic text-fg-secondary", children: ["\u00AB", section.quote, "\u00BB"] })), section.cta && (_jsxs("a", { href: section.cta.href, className: "mt-6 inline-block font-medium text-accent hover:underline", children: [section.cta.label, " \u2192"] }))] })] }) })] }));
+}
+/**
+ * Where the business actually is. Address, phone and hours are the fields
+ * the provenance rules exist to protect — this renderer shows exactly what
+ * the data says and nothing more, including simply omitting hours that were
+ * never found.
+ */
+export function ContactSection({ section, index, }) {
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), section.blurb && _jsx("div", { className: "sm:pl-10", children: _jsx(Blurb, { children: section.blurb }) }), _jsx(SectionBody, { children: _jsx("div", { className: "grid gap-6 md:grid-cols-2", children: section.locations.map((location) => (_jsxs("div", { className: "rounded-2xl border border-subtle bg-surface-raised p-6 sm:p-8", children: [location.note && (_jsx("p", { className: "mb-1 font-mono text-xs uppercase tracking-caps text-fg-tertiary", children: location.note })), _jsx("h3", { className: "font-heading text-2xl font-semibold text-fg-primary", children: location.name }), _jsx("address", { className: "mt-3 not-italic leading-relaxed text-fg-secondary", children: location.address }), location.phone && (_jsx("p", { className: "text-fg-secondary", children: _jsx("a", { href: `tel:${location.phone.replace(/\s+/g, '')}`, className: "hover:text-accent", children: location.phone }) })), location.hours && location.hours.length > 0 && (_jsx("ul", { className: "mt-4 space-y-1 text-sm text-fg-muted", children: location.hours.map((line) => (_jsx("li", { children: line }, line))) }))] }, location.name))) }) })] }));
+}
+/**
+ * Native <details> disclosure — works with JavaScript disabled, which a
+ * generated site for a small business should.
+ */
+export function FaqSection({ section, index, }) {
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), _jsx(SectionBody, { children: _jsx("div", { className: "max-w-prose space-y-4", children: section.items.map((item) => (_jsxs("details", { className: "group rounded-xl border border-subtle bg-surface-raised open:border-accent", children: [_jsxs("summary", { className: "flex min-h-11 cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-medium text-fg-primary", children: [item.question, _jsx("span", { "aria-hidden": true, className: "text-xl text-accent transition-transform group-open:rotate-45", children: "+" })] }), _jsx("p", { className: "px-5 pb-4 text-sm leading-relaxed text-fg-secondary", children: item.answer })] }, item.question))) }) })] }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Sections that present data itself: the jump index and the tables.
+ *
+ * Codes, counts and statuses are set in mono so a reader can scan a column;
+ * the status cell carries a dot because a status keyword is the one word on a
+ * page a reader must never skim past.
+ */
+import type { SiteSection } from '../../schema.js';
+export declare function IndexSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'index';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+export declare function TableSection({ section }: {
+    section: Extract<SiteSection, {
+        kind: 'table';
+    }>;
+}): import("react").JSX.Element;

package/dist/react/sections/DataSections.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sections that present data itself: the jump index and the tables.
+ *
+ * Codes, counts and statuses are set in mono so a reader can scan a column;
+ * the status cell carries a dot because a status keyword is the one word on a
+ * page a reader must never skim past.
+ */
+import { Blurb, SectionBody, SectionHeading } from './Primitives.js';
+/** Status keyword → dot colour. Anything unrecognised stays neutral. */
+const STATUS_DOT = {
+    sourced: 'bg-status-positive',
+    'unverified lead': 'bg-status-warning',
+    taken: 'bg-fg-muted',
+    done: 'bg-status-positive',
+    'in progress': 'bg-status-warning',
+    'not started': 'bg-fg-muted',
+    // Scarcity grades. Red reads as "constrained", green as "no constraint here".
+    chokepoint: 'bg-status-negative',
+    concentrated: 'bg-status-warning',
+    competitive: 'bg-status-positive',
+};
+export function IndexSection({ section, index, }) {
+    return (_jsxs("section", { children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), section.blurb && _jsx("div", { className: "sm:pl-10", children: _jsx(Blurb, { children: section.blurb }) }), _jsx(SectionBody, { children: _jsx("ol", { className: "divide-y divide-subtle border-y border-subtle", children: section.entries.map((entry, i) => (_jsx("li", { children: _jsxs("a", { href: `#${entry.anchor}`, className: "group flex items-baseline gap-4 py-2.5 transition-colors hover:text-fg-primary", children: [_jsx("span", { className: "font-mono text-xs tabular-nums text-fg-muted", children: String(i + 1).padStart(2, '0') }), _jsx("span", { className: "flex-1 text-sm text-fg-secondary group-hover:text-fg-primary", children: entry.label }), entry.meta && (_jsx("span", { className: "font-mono text-xs tabular-nums text-fg-muted", children: entry.meta }))] }) }, entry.anchor))) }) })] }));
+}
+export function TableSection({ section }) {
+    const mono = new Set(section.monoColumns ?? []);
+    // Fixed layout with declared widths, because a page can stack fifteen tables
+    // with the same columns. Auto layout sizes each to its own longest cell, so
+    // one long name shifts every column out of line with the table above it.
+    // Aligned columns are what make the set read as one instrument.
+    const restWidth = section.columns.length > 1 ? 66 / (section.columns.length - 1) : 100;
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && (_jsx("h3", { className: "font-heading text-lg font-semibold text-fg-primary", children: section.heading })), section.blurb && _jsx(Blurb, { children: section.blurb }), _jsx("div", { className: "mt-4 overflow-x-auto", children: _jsxs("table", { className: "w-full table-fixed border-collapse text-left", style: { minWidth: '560px' }, children: [_jsx("colgroup", { children: section.columns.map((_, i) => (_jsx("col", { style: { width: i === 0 ? '34%' : `${restWidth}%` } }, i))) }), _jsx("thead", { children: _jsx("tr", { className: "border-b border-strong", children: section.columns.map((column) => (_jsx("th", { scope: "col", className: "py-2.5 pr-4 font-mono text-xs font-medium uppercase tracking-caps text-fg-tertiary", children: column }, column))) }) }), _jsx("tbody", { className: "divide-y divide-subtle", children: section.rows.map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, cellIndex) => {
+                                    const isStatus = section.statusColumn === cellIndex;
+                                    const dot = isStatus ? STATUS_DOT[cell.trim().toLowerCase()] : undefined;
+                                    return (_jsx("td", { className: [
+                                            'py-2.5 pr-4 align-top text-sm leading-relaxed',
+                                            mono.has(cellIndex)
+                                                ? 'font-mono text-xs tabular-nums text-fg-secondary'
+                                                : cellIndex === 0
+                                                    ? 'text-fg-primary'
+                                                    : 'text-fg-secondary',
+                                        ].join(' '), children: isStatus ? (_jsxs("span", { className: "inline-flex items-baseline gap-2", children: [_jsx("span", { "aria-hidden": true, className: `inline-block h-1.5 w-1.5 shrink-0 self-center rounded-full ${dot ?? 'bg-fg-muted'}` }), cell] })) : (cell) }, cellIndex));
+                                }) }, rowIndex))) })] }) }), section.note && (_jsx("p", { className: "mt-3 max-w-prose text-xs leading-relaxed text-fg-muted", children: section.note }))] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Sections that render a number.
+ *
+ * Both use tabular mono figures so digits line up column to column — the
+ * difference between a page that looks measured and one that looks typed.
+ */
+import type { SiteSection } from '../../schema.js';
+export declare function StatsSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'stats';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+/**
+ * One number, drawn.
+ *
+ * The bar is intentionally literal: when nothing is sourced it renders empty,
+ * because an empty bar is the honest picture of an unfinished phase. Anything
+ * that dressed a 0% up as progress would be the page lying.
+ */
+export declare function MeterSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'meter';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;

package/dist/react/sections/FigureSections.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sections that render a number.
+ *
+ * Both use tabular mono figures so digits line up column to column — the
+ * difference between a page that looks measured and one that looks typed.
+ */
+import { SectionBody, SectionHeading } from './Primitives.js';
+export function StatsSection({ section, index, }) {
+    return (_jsxs("section", { children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), _jsx("dl", { className: "mt-6 grid grid-cols-1 divide-y divide-subtle border-y border-subtle sm:grid-cols-3 sm:divide-x sm:divide-y-0", children: section.stats.map((stat) => (_jsxs("div", { className: "px-0 py-6 sm:px-6 sm:first:pl-0", children: [_jsx("dt", { className: "font-mono text-xs uppercase tracking-caps text-fg-tertiary", children: stat.label }), _jsx("dd", { className: "mt-3 font-heading text-4xl font-medium tabular-nums text-fg-primary", children: stat.value }), stat.note && _jsx("p", { className: "mt-2 text-sm leading-relaxed text-fg-muted", children: stat.note })] }, stat.label))) })] }));
+}
+/**
+ * One number, drawn.
+ *
+ * The bar is intentionally literal: when nothing is sourced it renders empty,
+ * because an empty bar is the honest picture of an unfinished phase. Anything
+ * that dressed a 0% up as progress would be the page lying.
+ */
+export function MeterSection({ section, index, }) {
+    const percent = section.of > 0 ? Math.round((section.value / section.of) * 100) : 0;
+    return (_jsxs("section", { children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), _jsxs(SectionBody, { children: [_jsxs("div", { className: "flex items-baseline justify-between gap-6", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-caps text-fg-tertiary", children: section.label }), _jsxs("span", { className: "font-mono text-sm tabular-nums text-fg-secondary", children: [percent, "%"] })] }), _jsxs("p", { className: "mt-3 font-heading text-4xl font-medium tabular-nums text-fg-primary", children: [section.value, _jsxs("span", { className: "text-fg-muted", children: [" / ", section.of] })] }), _jsx("div", { className: "mt-4 h-1.5 w-full overflow-hidden rounded-full bg-surface-raised", role: "progressbar", "aria-valuenow": section.value, "aria-valuemin": 0, "aria-valuemax": section.of, "aria-label": section.label, children: _jsx("div", { className: "h-full rounded-full bg-accent", style: { width: `${percent}%` } }) }), section.caption && (_jsx("p", { className: "mt-3 max-w-prose text-sm leading-relaxed text-fg-muted", children: section.caption }))] })] }));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * The opening of a page that has one.
+ *
+ * An eyebrow, one display statement, and the lead — the shape a serious
+ * publication uses, and deliberately not a marketing hero: no gradient, no
+ * illustration, no button. The claim is the design.
+ */
+import type { SiteSection } from '../../schema.js';
+export declare function HeroSection({ section }: {
+    section: Extract<SiteSection, {
+        kind: 'hero';
+    }>;
+}): import("react").JSX.Element;

package/dist/react/sections/HeroSection.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HeroSection({ section }) {
+    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
+                            ? 'bg-accent text-surface-page hover:opacity-90'
+                            : 'border-2 border-strong text-fg-primary hover:border-accent hover:text-accent',
+                    ].join(' '), children: action.label }, action.href))) }))] }));
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Shared type primitives for site sections.
+ *
+ * The whole visual system of a generated site lives in these components plus
+ * the section files beside them. They emit SEMANTIC utility classes only —
+ * `text-fg-primary`, `bg-surface-page`, `font-heading` — and ship no colours,
+ * no faces, no radii. Each consumer defines those tokens in its own
+ * stylesheet, which is how fifty sites share one renderer without looking
+ * like one company. The full class contract is in the README.
+ */
+import type { ReactNode } from 'react';
+/**
+ * A numbered section heading. Numbering makes a long page navigable and
+ * signals that the document has a structure rather than being a stack of
+ * blocks.
+ */
+export declare function SectionHeading({ index, children }: {
+    index?: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Standfirst under a heading. Kept at measure — it is prose, not layout. */
+export declare function Blurb({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Indents a section's body to sit under the heading text rather than under its
+ * number. Small thing; it is what makes the numbering read as a margin note
+ * instead of a bullet.
+ */
+export declare function SectionBody({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/react/sections/Primitives.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A numbered section heading. Numbering makes a long page navigable and
+ * signals that the document has a structure rather than being a stack of
+ * blocks.
+ */
+export function SectionHeading({ index, children }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-4", children: [index !== undefined && (_jsx("span", { "aria-hidden": true, className: "font-mono text-xs tabular-nums text-fg-muted", children: String(index).padStart(2, '0') })), _jsx("h2", { className: "font-heading text-2xl font-semibold tracking-display text-fg-primary sm:text-3xl", children: children })] }));
+}
+/** Standfirst under a heading. Kept at measure — it is prose, not layout. */
+export function Blurb({ children }) {
+    return _jsx("p", { className: "mt-3 max-w-prose text-base leading-relaxed text-fg-secondary", children: children });
+}
+/**
+ * Indents a section's body to sit under the heading text rather than under its
+ * number. Small thing; it is what makes the numbering read as a margin note
+ * instead of a bullet.
+ */
+export function SectionBody({ children }) {
+    return _jsx("div", { className: "mt-6 sm:pl-10", children: children });
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Sections made of words: running prose, top-ruled cards, and definitions.
+ *
+ * Cards are ruled rather than boxed. A grid of bordered boxes reads as a
+ * product page; a grid of hairline-topped columns reads as a document.
+ */
+import type { SiteSection } from '../../schema.js';
+export declare function ProseSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'prose';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+export declare function CardsSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'cards';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;
+export declare function DefinitionsSection({ section, index, }: {
+    section: Extract<SiteSection, {
+        kind: 'definitions';
+    }>;
+    index?: number;
+}): import("react").JSX.Element;

package/dist/react/sections/ProseSections.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sections made of words: running prose, top-ruled cards, and definitions.
+ *
+ * Cards are ruled rather than boxed. A grid of bordered boxes reads as a
+ * product page; a grid of hairline-topped columns reads as a document.
+ */
+import { Blurb, SectionBody, SectionHeading } from './Primitives.js';
+export function ProseSection({ section, index, }) {
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), _jsx("div", { className: section.heading ? 'mt-6 sm:pl-10' : '', children: _jsx("div", { className: "max-w-prose space-y-4", children: section.paragraphs.map((paragraph, i) => (_jsx("p", { className: "text-base leading-relaxed text-fg-secondary", children: paragraph }, i))) }) })] }));
+}
+export function CardsSection({ section, index, }) {
+    const columns = section.columns === 4
+        ? 'lg:grid-cols-4'
+        : section.columns === 3
+            ? 'lg:grid-cols-3'
+            : 'lg:grid-cols-2';
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), section.blurb && _jsx("div", { className: "sm:pl-10", children: _jsx(Blurb, { children: section.blurb }) }), _jsx(SectionBody, { children: _jsx("div", { className: `grid grid-cols-1 gap-x-8 gap-y-9 sm:grid-cols-2 ${columns}`, children: section.cards.map((card) => (_jsxs("article", { className: "flex h-full flex-col border-t border-strong pt-4", children: [card.icon && (_jsx("span", { "aria-hidden": true, className: "mb-2 text-3xl", children: card.icon })), _jsx("h3", { className: "font-heading text-base font-semibold text-fg-primary", children: card.title }), _jsx("p", { className: "mt-2 flex-1 text-sm leading-relaxed text-fg-secondary", children: card.body }), card.meta && (_jsx("p", { className: "mt-4 font-mono text-xs leading-relaxed text-fg-muted", children: card.meta }))] }, card.title))) }) })] }));
+}
+export function DefinitionsSection({ section, index, }) {
+    return (_jsxs("section", { id: section.anchor, className: "scroll-mt-24", children: [section.heading && _jsx(SectionHeading, { index: index, children: section.heading }), section.blurb && _jsx("div", { className: "sm:pl-10", children: _jsx(Blurb, { children: section.blurb }) }), _jsx(SectionBody, { children: _jsx("dl", { className: "divide-y divide-subtle border-y border-subtle", children: section.items.map((item) => (_jsxs("div", { className: "grid grid-cols-1 gap-1 py-4 sm:grid-cols-3 sm:gap-6", children: [_jsx("dt", { className: "text-sm font-semibold text-fg-primary", children: item.term }), _jsx("dd", { className: "text-sm leading-relaxed text-fg-secondary sm:col-span-2", children: item.detail })] }, item.term))) }) })] }));
+}