+
+ {as === "select" ? (
+
+ ) : as === "textarea" ? (
+
+ ) : (
+
+ )}
+ {hint && {hint}}
+ {error && {error}}
+
+
+
diff --git a/packages/ui/src/components/FilterGroup.astro b/packages/ui/src/components/FilterGroup.astro
new file mode 100644
index 0000000..1f017a0
--- /dev/null
+++ b/packages/ui/src/components/FilterGroup.astro
@@ -0,0 +1,51 @@
+---
+/**
+ * Rule III. Separate 36px pills; the active one gets the gold border, tint and
+ * a small gold star. Items with `href` are links (the current one is marked
+ * with aria-current); items without are toggle buttons a page script drives
+ * through aria-pressed.
+ */
+import Star from "./Star.astro";
+
+interface Item {
+ label: string;
+ href?: string;
+ value?: string;
+ active?: boolean;
+ count?: number;
+}
+interface Props {
+ label: string;
+ items: Item[];
+ class?: string;
+}
+const { label, items, class: className } = Astro.props;
+---
+-
+ {
+ items.map((item) => (
+
-
+ {item.href ? (
+
+
+ {item.label} + {item.count !== undefined && {item.count}} + + ) : ( + + )} +
+ ))
+ }
+
+
+
+
diff --git a/packages/ui/src/components/PageShell.astro b/packages/ui/src/components/PageShell.astro
new file mode 100644
index 0000000..84b0b0b
--- /dev/null
+++ b/packages/ui/src/components/PageShell.astro
@@ -0,0 +1,79 @@
+---
+/**
+ * Every page's frame: the document head, the page background (constellation
+ * dust and the family's edge seals), the site header with an optional hero,
+ * the page content, and the footer.
+ */
+import "../styles/tokens.css";
+import "../styles/fonts.css";
+import "../styles/base.css";
+import "../styles/elements.css";
+import ConstellationDust from "./ConstellationDust.astro";
+import EdgeSeals from "./EdgeSeals.astro";
+import SiteFooter from "./SiteFooter.astro";
+import SiteHeader from "./SiteHeader.astro";
+import type { NavKey } from "./nav.ts";
+import type { PageFamily, SealName } from "./seals.ts";
+
+interface Props {
+ title: string;
+ description?: string;
+ family?: PageFamily;
+ /** A craft page's own seal, overriding the family's. */
+ seal?: SealName;
+ current?: NavKey;
+ /** Leave the edge seals off, for a page led by a photo. */
+ noSeals?: boolean;
+}
+const { title, description, family = "landing", seal, current, noSeals } = Astro.props;
+const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/src/components/Seal.astro b/packages/ui/src/components/Seal.astro
new file mode 100644
index 0000000..45b4899
--- /dev/null
+++ b/packages/ui/src/components/Seal.astro
@@ -0,0 +1,12 @@
+---
+/** One seal as an image, for seal marks, medallions and placeholder art. */
+import { seals, type SealName } from "./seals.ts";
+
+interface Props {
+ name: SealName;
+ size?: number;
+ class?: string;
+}
+const { name, size = 40, class: className } = Astro.props;
+---
+
diff --git a/packages/ui/src/components/SearchField.astro b/packages/ui/src/components/SearchField.astro
new file mode 100644
index 0000000..68999a0
--- /dev/null
+++ b/packages/ui/src/components/SearchField.astro
@@ -0,0 +1,16 @@
+---
+/** Rule V. Search uses the same box as every other field. */
+interface Props {
+ label: string;
+ name?: string;
+ placeholder?: string;
+ value?: string;
+ class?: string;
+}
+const { label, name = "q", placeholder, value, class: className } = Astro.props;
+---
+
diff --git a/packages/ui/src/components/SectionHeading.astro b/packages/ui/src/components/SectionHeading.astro
new file mode 100644
index 0000000..3fc448f
--- /dev/null
+++ b/packages/ui/src/components/SectionHeading.astro
@@ -0,0 +1,41 @@
+---
+/**
+ * A section heading: optional gold eyebrow over a tick scale, the heading in
+ * Cinzel, and the filament underline beneath it.
+ */
+import Kicker from "./Kicker.astro";
+
+interface Props {
+ eyebrow?: string;
+ level?: 1 | 2 | 3;
+ id?: string;
+ class?: string;
+}
+const { eyebrow, level = 2, id, class: className } = Astro.props;
+const H = `h${level}` as "h1" | "h2" | "h3";
+---
+
+ {eyebrow && {eyebrow} }
+
+
+
diff --git a/packages/ui/src/components/SiteFooter.astro b/packages/ui/src/components/SiteFooter.astro
new file mode 100644
index 0000000..a1abca7
--- /dev/null
+++ b/packages/ui/src/components/SiteFooter.astro
@@ -0,0 +1,48 @@
+---
+/** The site footer: the header divider again, then the monogram line and links. */
+import monogram from "../assets/brand/gk-monogram.svg?url";
+import Divider from "./Divider.astro";
+const year = new Date().getFullYear();
+---
+
+
+
diff --git a/packages/ui/src/components/SiteHeader.astro b/packages/ui/src/components/SiteHeader.astro
new file mode 100644
index 0000000..2d53b4f
--- /dev/null
+++ b/packages/ui/src/components/SiteHeader.astro
@@ -0,0 +1,247 @@
+---
+/**
+ * The site header: nebula and filament banner behind the primary nav, an
+ * optional page hero (the `hero` slot), and the header divider. The filament
+ * banner and divider appear here only, never elsewhere on a page.
+ */
+import monogram from "../assets/brand/gk-monogram.svg?url";
+import Divider from "./Divider.astro";
+import Star from "./Star.astro";
+import { main, tail, world, type NavKey } from "./nav.ts";
+import { filamentBanner } from "./seals.ts";
+
+interface Props {
+ /** Which nav entry the page belongs to. */
+ current?: NavKey;
+}
+const { current } = Astro.props;
+const inWorld = world.some((w) => w.key === current);
+const aria = (key: NavKey) => (key === current ? "page" : undefined);
+---
+
+
+ )
+ }
+
+ {label}
+
+
+
+
diff --git a/packages/ui/src/components/Star.astro b/packages/ui/src/components/Star.astro
new file mode 100644
index 0000000..578b9c3
--- /dev/null
+++ b/packages/ui/src/components/Star.astro
@@ -0,0 +1,15 @@
+---
+/** The thin four-point star. Gold by default; violet only ever marks a star. */
+import { starPoints } from "../lib/ornaments.ts";
+
+interface Props {
+ size?: number;
+ tone?: "gold" | "violet" | "teal" | "starlight" | "outline";
+ class?: string;
+}
+const { size = 10, tone = "gold", class: className } = Astro.props;
+const fill = { gold: "var(--gk-gold)", violet: "var(--gk-violet)", teal: "var(--gk-teal-bright)", starlight: "var(--gk-starlight)", outline: "none" }[tone];
+---
+
diff --git a/packages/ui/src/components/StarChartArt.astro b/packages/ui/src/components/StarChartArt.astro
new file mode 100644
index 0000000..7df33ee
--- /dev/null
+++ b/packages/ui/src/components/StarChartArt.astro
@@ -0,0 +1,57 @@
+---
+/**
+ * Placeholder art and the fallback when an image is missing or fails: a
+ * star-chart grid on the sky, a gold mat, and the page family's seal.
+ */
+import Seal from "./Seal.astro";
+import type { SealName } from "./seals.ts";
+
+interface Props {
+ seal?: SealName;
+ ratio?: string;
+ /** An image to show over the art; the art stays as its fallback. */
+ src?: string;
+ alt?: string;
+ class?: string;
+}
+const { seal = "transmutation", ratio = "4 / 3", src, alt = "", class: className } = Astro.props;
+---
+
+
+ 
}
+
+
+
diff --git a/packages/ui/src/components/StarPath.astro b/packages/ui/src/components/StarPath.astro
new file mode 100644
index 0000000..444d336
--- /dev/null
+++ b/packages/ui/src/components/StarPath.astro
@@ -0,0 +1,38 @@
+---
+/**
+ * Greg's star path line: stars nudged off a straight line, joined by dotted
+ * teal links. Small stars violet, dots Starlight, at most one gold center
+ * star. Two per page at most.
+ */
+import { seedOf, starPath, starPoints, strengths } from "../lib/ornaments.ts";
+
+interface Props {
+ /** Same seed, same path. Defaults to the page path. */
+ seed?: string;
+ steps?: number;
+ strength?: keyof typeof strengths;
+ centerStar?: boolean;
+ /** Fixed height in px; by default the path's own height. */
+ height?: number;
+ class?: string;
+}
+const { seed = Astro.url.pathname, steps = 12, strength = "standard", centerStar = true, height, class: className } = Astro.props;
+const width = 900;
+const p = starPath({ x1: 0, x2: width, y: 0, steps, seed: seedOf(seed), strength, centerStar, star: 3.9 });
+// Fit the box to the marks, so a wild path is never clipped.
+const top = Math.min(...p.marks.map((m) => m.y - m.r)) - 2;
+const bottom = Math.max(...p.marks.map((m) => m.y + m.r)) + 2;
+const span = bottom - top;
+---
+
diff --git a/packages/ui/src/components/StatusPill.astro b/packages/ui/src/components/StatusPill.astro
new file mode 100644
index 0000000..bd8cdb6
--- /dev/null
+++ b/packages/ui/src/components/StatusPill.astro
@@ -0,0 +1,20 @@
+---
+/**
+ * Rule II. A round pill is a state. Live states (Reading, Playing, In the
+ * Store) are teal with a lit dot; a state that is not happening now (Want to
+ * try, Played) keeps the pill without the dot; Favorite and Current are gold
+ * with a star. Nothing else is gold.
+ */
+import Star from "./Star.astro";
+
+interface Props {
+ kind?: "live" | "state" | "favorite" | "current" | "neutral";
+ class?: string;
+}
+const { kind = "live", class: className } = Astro.props;
+const cls = { live: "live", state: "state", favorite: "cur", current: "cur", neutral: "" }[kind];
+---
+
+ {(kind === "favorite" || kind === "current") && The kit
+The approved element rules and ornament kit, built as Astro components. Everything here renders from the same code the pages will use.
+Teal pill primary, gold hairline secondary, and a text action with the filament underline on hover. One primary per section. 44px, or 36px compact.
+
+
+
+
+
+
+
+
+
+
+
+ A round pill is a state; a square chip is a label; a chip that links leads with a violet star.
+
+ Reading
+ In the Store
+ Want to try
+ Favorite
+ Current
+ Retired
+
+
+ TypeScript
+ Astro
+ Leatherwork
+ Fantasy
+ Workshop
+ The Shelf
+
+
+
+ Reading
+
+
+ Favorite
+
+
+ Label
+
+
+ A linked card
Hover turns the border gold and shows the tick scale along the top.
The featured card
Gold border and gilt corners, one per page.
A plain card
No link, so no hover state.
Body links are teal and always underlined, so they never rely on color alone.
+Star path strengths: calm, standard and wild. Same seed, same path.
+
+ 1
+
+ Each page family's edge seal, shown full strength here; on a page they sit at the edges at 5 to 8%.
+-
+ {
+ Object.entries(pageSeals).map(([family, seal]) => (
+
{family}{seal}
+ ))
+ }
+
+
+ All {sealNames.length} seals
+- {sealNames.map((s) =>
{s} )}
- {icons.map((n) =>
{n} )}