@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/eslint.js

@@ -0,0 +1,53 @@
+/**
+ * ESLint rules that keep an app on Silicon UI: build with its components, never re-create or restyle them.
+ *
+ *   // eslint.config.mjs
+ *   import siliconUi from "@teamofsilicons/silicon-ui/eslint";
+ *   export default [...yourConfig, ...siliconUi()];
+ *
+ * Options:
+ *   files     globs the rules apply to (default: every .tsx and .jsx file)
+ *   ignores   globs they skip (for example a vendored exception)
+ *   elements  override the element → component table below
+ *
+ * This config sets `no-restricted-syntax` and `no-restricted-imports`. ESLint replaces, not merges, a rule's options, so
+ * if your own config also sets either rule, put this one last and move your entries into `extraSyntax` / `extraImports`.
+ */
+
+/** Raw elements Silicon UI already has a component for. */
+export const ELEMENTS = {
+  button: "Use Button (actions) or ButtonLink (navigation) from @teamofsilicons/silicon-ui.",
+  input: "Use Input, Checkbox, Switch, RadioGroup, Slider or another field from @teamofsilicons/silicon-ui.",
+  select: "Use Select, Combobox or MorphSelect from @teamofsilicons/silicon-ui.",
+  textarea: "Use Textarea from @teamofsilicons/silicon-ui.",
+  dialog: "Use Dialog, Drawer or BottomSheet from @teamofsilicons/silicon-ui.",
+};
+
+const IMPORTS = [
+  {
+    regex: "^@teamofsilicons/silicon-ui/(?!styles\\.css$).*\\.css$",
+    message: "Do not borrow a Silicon UI component's CSS. Render the component; if it lacks a variant, add it to the library.",
+  },
+  {
+    regex: "(^|/)components/silicon-ui/(?!blocks/)",
+    message: "Import components from @teamofsilicons/silicon-ui, not from a local copy. Never copy library code into the app.",
+  },
+];
+
+export default function siliconUi({ files = ["**/*.{tsx,jsx}"], ignores = [], elements = ELEMENTS, extraSyntax = [], extraImports = [] } = {}) {
+  const syntax = Object.entries(elements).map(([name, message]) => ({
+    selector: `JSXOpeningElement[name.type="JSXIdentifier"][name.name="${name}"]`,
+    message: `<${name}> is not allowed here. ${message}`,
+  }));
+  return [
+    {
+      name: "silicon-ui/components",
+      files,
+      ignores,
+      rules: {
+        "no-restricted-syntax": ["error", ...syntax, ...extraSyntax],
+        "no-restricted-imports": ["error", { patterns: [...IMPORTS, ...extraImports] }],
+      },
+    },
+  ];
+}

package/lib/escape.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Escape inside a layer (Dialog, Drawer, BottomSheet, Popover) belongs to the control that has focus when that control
+ * has something of its own to close: an open Combobox list, an open DatePicker calendar, an InlineEdit being edited, a
+ * ConfirmMorph asking its question. Only the next Escape closes the layer.
+ *
+ * Radix closes its layers from a capture listener on the document, before the control's own key handler runs, so every
+ * Silicon UI layer passes its `onEscapeKeyDown` through `layerEscape` (and marks its own panel with `data-escape-layer`, where
+ * the search for an inner popup stops). Pages need nothing for this; their own `onEscapeKeyDown` still runs first and
+ * can keep the layer open for reasons of its own with `event.preventDefault()`.
+ */
+/** Marks a layer's own panel (so it is never mistaken for a popup of a control inside it). */
+export declare const ESCAPE_LAYER_ATTRIBUTE = "data-escape-layer";
+/** True when Escape at `target` is handled by a control inside the layer, which closes its own part first. */
+export declare function escapeBelongsInside(target: EventTarget | null): boolean;
+/**
+ * The `onEscapeKeyDown` a Silicon UI layer gives Radix: the page's own handler first, then the layer stays open when the
+ * Escape belongs to a control inside it.
+ */
+export declare function layerEscape<E extends KeyboardEvent>(own?: (event: E) => void): (event: E) => void;

package/lib/escape.js

@@ -0,0 +1,50 @@
+/**
+ * Escape inside a layer (Dialog, Drawer, BottomSheet, Popover) belongs to the control that has focus when that control
+ * has something of its own to close: an open Combobox list, an open DatePicker calendar, an InlineEdit being edited, a
+ * ConfirmMorph asking its question. Only the next Escape closes the layer.
+ *
+ * Radix closes its layers from a capture listener on the document, before the control's own key handler runs, so every
+ * Silicon UI layer passes its `onEscapeKeyDown` through `layerEscape` (and marks its own panel with `data-escape-layer`, where
+ * the search for an inner popup stops). Pages need nothing for this; their own `onEscapeKeyDown` still runs first and
+ * can keep the layer open for reasons of its own with `event.preventDefault()`.
+ */
+/** Marks a layer's own panel (so it is never mistaken for a popup of a control inside it). */
+export const ESCAPE_LAYER_ATTRIBUTE = "data-escape-layer";
+/** Controls that close something of their own on Escape while focus is in them. */
+const OWN_ESCAPE = [
+    // Combobox with its list open (focus stays in its input).
+    '[role="combobox"][aria-expanded="true"]',
+    // DatePicker's trigger (or any popup button) while its panel is open.
+    '[aria-haspopup="dialog"][aria-expanded="true"]',
+    '[aria-haspopup="listbox"][aria-expanded="true"]',
+    // InlineEdit while editing: Escape puts the saved text back.
+    "[data-editing]",
+].join(", ");
+/** ConfirmMorph asking its question or showing a result (Escape returns it to rest). */
+const MORPH_STATES = '[data-state="confirming"], [data-state="done"], [data-state="error"]';
+/** True when Escape at `target` is handled by a control inside the layer, which closes its own part first. */
+export function escapeBelongsInside(target) {
+    if (!(target instanceof Element))
+        return false;
+    if (target.closest(OWN_ESCAPE))
+        return true;
+    // A ConfirmMorph's root (focused while it works or shows a result) or one of its faces. A HoldToConfirm button also
+    // says data-state="done", but it has no faces and no Escape of its own.
+    const morph = target.closest(MORPH_STATES);
+    if (morph?.querySelector("[data-face]"))
+        return true;
+    // A popup of a control (DatePicker's calendar is a dialog inside the layer); the layer's own panel is not one.
+    const dialog = target.closest('[role="dialog"]');
+    return !!dialog && !dialog.hasAttribute(ESCAPE_LAYER_ATTRIBUTE);
+}
+/**
+ * The `onEscapeKeyDown` a Silicon UI layer gives Radix: the page's own handler first, then the layer stays open when the
+ * Escape belongs to a control inside it.
+ */
+export function layerEscape(own) {
+    return event => {
+        own?.(event);
+        if (!event.defaultPrevented && escapeBelongsInside(event.target))
+            event.preventDefault();
+    };
+}

package/lib/media.d.ts

@@ -0,0 +1,353 @@
+/**
+ * Shared demo media. Files live in `public/media/`, credits in `public/media/CREDITS.md`.
+ * Portraits are 400 px squares; photos are 1600 px on the long side.
+ */
+export interface MediaPerson {
+    id: string;
+    name: string;
+    role?: string;
+    src: string;
+}
+export interface MediaPhoto {
+    id: string;
+    alt: string;
+    src: string;
+    width: number;
+    height: number;
+}
+export declare const people: readonly [{
+    readonly id: "emma-collins";
+    readonly name: "Emma Collins";
+    readonly role: "Product designer";
+    readonly src: "/media/people/emma-collins.jpg";
+}, {
+    readonly id: "marcus-johnson";
+    readonly name: "Marcus Johnson";
+    readonly role: "Frontend engineer";
+    readonly src: "/media/people/marcus-johnson.jpg";
+}, {
+    readonly id: "jasmine-brooks";
+    readonly name: "Jasmine Brooks";
+    readonly role: "Design lead";
+    readonly src: "/media/people/jasmine-brooks.jpg";
+}, {
+    readonly id: "olivia-bennett";
+    readonly name: "Olivia Bennett";
+    readonly role: "Platform engineer";
+    readonly src: "/media/people/olivia-bennett.jpg";
+}, {
+    readonly id: "sofia-ramirez";
+    readonly name: "Sofia Ramirez";
+    readonly role: "Operations lead";
+    readonly src: "/media/people/sofia-ramirez.jpg";
+}, {
+    readonly id: "ryan-sullivan";
+    readonly name: "Ryan Sullivan";
+    readonly role: "Account executive";
+    readonly src: "/media/people/ryan-sullivan.jpg";
+}, {
+    readonly id: "hannah-walsh";
+    readonly name: "Hannah Walsh";
+    readonly role: "Customer success";
+    readonly src: "/media/people/hannah-walsh.jpg";
+}, {
+    readonly id: "chloe-nguyen";
+    readonly name: "Chloe Nguyen";
+    readonly role: "Data analyst";
+    readonly src: "/media/people/chloe-nguyen.jpg";
+}, {
+    readonly id: "ava-mitchell";
+    readonly name: "Ava Mitchell";
+    readonly role: "Marketing manager";
+    readonly src: "/media/people/ava-mitchell.jpg";
+}, {
+    readonly id: "daniel-kim";
+    readonly name: "Daniel Kim";
+    readonly role: "Backend engineer";
+    readonly src: "/media/people/daniel-kim.jpg";
+}, {
+    readonly id: "jordan-reyes";
+    readonly name: "Jordan Reyes";
+    readonly role: "Support specialist";
+    readonly src: "/media/people/jordan-reyes.jpg";
+}, {
+    readonly id: "mateo-alvarez";
+    readonly name: "Mateo Alvarez";
+    readonly role: "Mobile engineer";
+    readonly src: "/media/people/mateo-alvarez.jpg";
+}, {
+    readonly id: "tyler-hayes";
+    readonly name: "Tyler Hayes";
+    readonly role: "Sales lead";
+    readonly src: "/media/people/tyler-hayes.jpg";
+}, {
+    readonly id: "andre-williams";
+    readonly name: "Andre Williams";
+    readonly role: "Finance partner";
+    readonly src: "/media/people/andre-williams.jpg";
+}, {
+    readonly id: "nathan-cole";
+    readonly name: "Nathan Cole";
+    readonly role: "Engineering manager";
+    readonly src: "/media/people/nathan-cole.jpg";
+}, {
+    readonly id: "diane-foster";
+    readonly name: "Diane Foster";
+    readonly role: "Chief operating officer";
+    readonly src: "/media/people/diane-foster.jpg";
+}];
+export declare const photos: readonly [{
+    readonly id: "lounge-chair";
+    readonly alt: "A woven oak lounge chair with a sheepskin and linen cushion on a concrete floor";
+    readonly src: "/media/photos/lounge-chair.jpg";
+    readonly width: 1280;
+    readonly height: 1600;
+}, {
+    readonly id: "table-lamp";
+    readonly alt: "A white mushroom table lamp glowing beside books and a small vase";
+    readonly src: "/media/photos/table-lamp.jpg";
+    readonly width: 1600;
+    readonly height: 900;
+}, {
+    readonly id: "linen-throw";
+    readonly alt: "Folded natural linen throws with fringed edges in soft window light";
+    readonly src: "/media/photos/linen-throw.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "glass-carafe";
+    readonly alt: "A hand pouring water from a ribbed glass carafe into tumblers";
+    readonly src: "/media/photos/glass-carafe.jpg";
+    readonly width: 1280;
+    readonly height: 1600;
+}, {
+    readonly id: "stoneware-cups";
+    readonly alt: "Two speckled stoneware cups with a lid on a pale table";
+    readonly src: "/media/photos/stoneware-cups.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "stacked-bowls";
+    readonly alt: "Two stacked speckled ceramic bowls against a dark wall";
+    readonly src: "/media/photos/stacked-bowls.jpg";
+    readonly width: 1600;
+    readonly height: 1067;
+}, {
+    readonly id: "ceramic-lamp";
+    readonly alt: "A sculptural ceramic lamp with a linen shade on a walnut sideboard";
+    readonly src: "/media/photos/ceramic-lamp.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "living-room";
+    readonly alt: "A bright living room with timber beams, arched windows, and cream sofas";
+    readonly src: "/media/photos/living-room.jpg";
+    readonly width: 1200;
+    readonly height: 1600;
+}, {
+    readonly id: "sunroom";
+    readonly alt: "A sunroom with a round dining table, plants, and windows on three sides";
+    readonly src: "/media/photos/sunroom.jpg";
+    readonly width: 1600;
+    readonly height: 1067;
+}, {
+    readonly id: "home-office";
+    readonly alt: "A home office with a wooden desk and deep green walls";
+    readonly src: "/media/photos/home-office.jpg";
+    readonly width: 1600;
+    readonly height: 1200;
+}, {
+    readonly id: "reading-chair";
+    readonly alt: "A grey armchair and ottoman with a knit throw in a dark green room";
+    readonly src: "/media/photos/reading-chair.jpg";
+    readonly width: 1600;
+    readonly height: 900;
+}, {
+    readonly id: "bedroom";
+    readonly alt: "A made bed with striped linen pillows against an oak headboard";
+    readonly src: "/media/photos/bedroom.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "restaurant";
+    readonly alt: "A warm restaurant dining room with woven pendant lights and a tree";
+    readonly src: "/media/photos/restaurant.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "wine-bar";
+    readonly alt: "A glass carafe of red wine on a bar table in low evening light";
+    readonly src: "/media/photos/wine-bar.jpg";
+    readonly width: 1600;
+    readonly height: 1067;
+}, {
+    readonly id: "concert-hall";
+    readonly alt: "Curved stainless steel panels of the Walt Disney Concert Hall against a blue sky";
+    readonly src: "/media/photos/concert-hall.jpg";
+    readonly width: 1600;
+    readonly height: 1143;
+}, {
+    readonly id: "curved-facade";
+    readonly alt: "A white tiled building facade with curved balconies";
+    readonly src: "/media/photos/curved-facade.jpg";
+    readonly width: 1600;
+    readonly height: 1067;
+}, {
+    readonly id: "pool-house";
+    readonly alt: "A modern glass house beside a long pool under a clear sky";
+    readonly src: "/media/photos/pool-house.jpg";
+    readonly width: 1600;
+    readonly height: 900;
+}, {
+    readonly id: "terracotta-waves";
+    readonly alt: "Wavy terracotta walls rising toward a blue sky";
+    readonly src: "/media/photos/terracotta-waves.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "mountain-ridges";
+    readonly alt: "Layered mountain ridges under a warm evening sky";
+    readonly src: "/media/photos/mountain-ridges.jpg";
+    readonly width: 1600;
+    readonly height: 1068;
+}, {
+    readonly id: "alpine-lake";
+    readonly alt: "A calm alpine lake reflecting a rocky peak at golden hour";
+    readonly src: "/media/photos/alpine-lake.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "coastline";
+    readonly alt: "A long coastline with waves rolling onto a beach below green cliffs";
+    readonly src: "/media/photos/coastline.jpg";
+    readonly width: 1200;
+    readonly height: 1600;
+}, {
+    readonly id: "sea-at-dusk";
+    readonly alt: "A calm sea at dusk with a low island on the horizon";
+    readonly src: "/media/photos/sea-at-dusk.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "lisbon-tram";
+    readonly alt: "A yellow tram on a street lined with historic buildings in Lisbon";
+    readonly src: "/media/photos/lisbon-tram.jpg";
+    readonly width: 1600;
+    readonly height: 1064;
+}, {
+    readonly id: "lisbon-bridge";
+    readonly alt: "The 25 de Abril Bridge crossing the Tagus in Lisbon";
+    readonly src: "/media/photos/lisbon-bridge.jpg";
+    readonly width: 1600;
+    readonly height: 1166;
+}, {
+    readonly id: "lisbon-rooftops";
+    readonly alt: "Terracotta rooftops of Lisbon running down to the river";
+    readonly src: "/media/photos/lisbon-rooftops.jpg";
+    readonly width: 1280;
+    readonly height: 1600;
+}, {
+    readonly id: "salmon-dinner";
+    readonly alt: "Seared salmon with a bright herb salsa and a glass of red wine";
+    readonly src: "/media/photos/salmon-dinner.jpg";
+    readonly width: 1067;
+    readonly height: 1600;
+}, {
+    readonly id: "chef-plating";
+    readonly alt: "A chef spooning sauce onto a plated dish in a dark kitchen";
+    readonly src: "/media/photos/chef-plating.jpg";
+    readonly width: 1600;
+    readonly height: 1600;
+}];
+export type PersonId = (typeof people)[number]["id"];
+export type PhotoId = (typeof photos)[number]["id"];
+/** Looks up a person by id. */
+export declare function person(id: PersonId): MediaPerson;
+/** Looks up a photo by id. */
+export declare function photo(id: PhotoId): MediaPhoto;
+/** Square 400 px avatar path for a person id, for `src` props. */
+export declare const avatar: (id: PersonId) => string;
+/** 800 × 1000 portrait crop of the same photo, for image-led layouts. */
+export declare const portrait: (id: PersonId) => string;
+/** The first `count` people, for avatar stacks and lists. */
+export declare const peopleSample: (count: number) => ({
+    readonly id: "emma-collins";
+    readonly name: "Emma Collins";
+    readonly role: "Product designer";
+    readonly src: "/media/people/emma-collins.jpg";
+} | {
+    readonly id: "marcus-johnson";
+    readonly name: "Marcus Johnson";
+    readonly role: "Frontend engineer";
+    readonly src: "/media/people/marcus-johnson.jpg";
+} | {
+    readonly id: "jasmine-brooks";
+    readonly name: "Jasmine Brooks";
+    readonly role: "Design lead";
+    readonly src: "/media/people/jasmine-brooks.jpg";
+} | {
+    readonly id: "olivia-bennett";
+    readonly name: "Olivia Bennett";
+    readonly role: "Platform engineer";
+    readonly src: "/media/people/olivia-bennett.jpg";
+} | {
+    readonly id: "sofia-ramirez";
+    readonly name: "Sofia Ramirez";
+    readonly role: "Operations lead";
+    readonly src: "/media/people/sofia-ramirez.jpg";
+} | {
+    readonly id: "ryan-sullivan";
+    readonly name: "Ryan Sullivan";
+    readonly role: "Account executive";
+    readonly src: "/media/people/ryan-sullivan.jpg";
+} | {
+    readonly id: "hannah-walsh";
+    readonly name: "Hannah Walsh";
+    readonly role: "Customer success";
+    readonly src: "/media/people/hannah-walsh.jpg";
+} | {
+    readonly id: "chloe-nguyen";
+    readonly name: "Chloe Nguyen";
+    readonly role: "Data analyst";
+    readonly src: "/media/people/chloe-nguyen.jpg";
+} | {
+    readonly id: "ava-mitchell";
+    readonly name: "Ava Mitchell";
+    readonly role: "Marketing manager";
+    readonly src: "/media/people/ava-mitchell.jpg";
+} | {
+    readonly id: "daniel-kim";
+    readonly name: "Daniel Kim";
+    readonly role: "Backend engineer";
+    readonly src: "/media/people/daniel-kim.jpg";
+} | {
+    readonly id: "jordan-reyes";
+    readonly name: "Jordan Reyes";
+    readonly role: "Support specialist";
+    readonly src: "/media/people/jordan-reyes.jpg";
+} | {
+    readonly id: "mateo-alvarez";
+    readonly name: "Mateo Alvarez";
+    readonly role: "Mobile engineer";
+    readonly src: "/media/people/mateo-alvarez.jpg";
+} | {
+    readonly id: "tyler-hayes";
+    readonly name: "Tyler Hayes";
+    readonly role: "Sales lead";
+    readonly src: "/media/people/tyler-hayes.jpg";
+} | {
+    readonly id: "andre-williams";
+    readonly name: "Andre Williams";
+    readonly role: "Finance partner";
+    readonly src: "/media/people/andre-williams.jpg";
+} | {
+    readonly id: "nathan-cole";
+    readonly name: "Nathan Cole";
+    readonly role: "Engineering manager";
+    readonly src: "/media/people/nathan-cole.jpg";
+} | {
+    readonly id: "diane-foster";
+    readonly name: "Diane Foster";
+    readonly role: "Chief operating officer";
+    readonly src: "/media/people/diane-foster.jpg";
+})[];

package/lib/media.js

@@ -0,0 +1,65 @@
+/**
+ * Shared demo media. Files live in `public/media/`, credits in `public/media/CREDITS.md`.
+ * Portraits are 400 px squares; photos are 1600 px on the long side.
+ */
+export const people = [
+    { id: "emma-collins", name: "Emma Collins", role: "Product designer", src: "/media/people/emma-collins.jpg" },
+    { id: "marcus-johnson", name: "Marcus Johnson", role: "Frontend engineer", src: "/media/people/marcus-johnson.jpg" },
+    { id: "jasmine-brooks", name: "Jasmine Brooks", role: "Design lead", src: "/media/people/jasmine-brooks.jpg" },
+    { id: "olivia-bennett", name: "Olivia Bennett", role: "Platform engineer", src: "/media/people/olivia-bennett.jpg" },
+    { id: "sofia-ramirez", name: "Sofia Ramirez", role: "Operations lead", src: "/media/people/sofia-ramirez.jpg" },
+    { id: "ryan-sullivan", name: "Ryan Sullivan", role: "Account executive", src: "/media/people/ryan-sullivan.jpg" },
+    { id: "hannah-walsh", name: "Hannah Walsh", role: "Customer success", src: "/media/people/hannah-walsh.jpg" },
+    { id: "chloe-nguyen", name: "Chloe Nguyen", role: "Data analyst", src: "/media/people/chloe-nguyen.jpg" },
+    { id: "ava-mitchell", name: "Ava Mitchell", role: "Marketing manager", src: "/media/people/ava-mitchell.jpg" },
+    { id: "daniel-kim", name: "Daniel Kim", role: "Backend engineer", src: "/media/people/daniel-kim.jpg" },
+    { id: "jordan-reyes", name: "Jordan Reyes", role: "Support specialist", src: "/media/people/jordan-reyes.jpg" },
+    { id: "mateo-alvarez", name: "Mateo Alvarez", role: "Mobile engineer", src: "/media/people/mateo-alvarez.jpg" },
+    { id: "tyler-hayes", name: "Tyler Hayes", role: "Sales lead", src: "/media/people/tyler-hayes.jpg" },
+    { id: "andre-williams", name: "Andre Williams", role: "Finance partner", src: "/media/people/andre-williams.jpg" },
+    { id: "nathan-cole", name: "Nathan Cole", role: "Engineering manager", src: "/media/people/nathan-cole.jpg" },
+    { id: "diane-foster", name: "Diane Foster", role: "Chief operating officer", src: "/media/people/diane-foster.jpg" },
+];
+export const photos = [
+    { id: "lounge-chair", alt: "A woven oak lounge chair with a sheepskin and linen cushion on a concrete floor", src: "/media/photos/lounge-chair.jpg", width: 1280, height: 1600 },
+    { id: "table-lamp", alt: "A white mushroom table lamp glowing beside books and a small vase", src: "/media/photos/table-lamp.jpg", width: 1600, height: 900 },
+    { id: "linen-throw", alt: "Folded natural linen throws with fringed edges in soft window light", src: "/media/photos/linen-throw.jpg", width: 1067, height: 1600 },
+    { id: "glass-carafe", alt: "A hand pouring water from a ribbed glass carafe into tumblers", src: "/media/photos/glass-carafe.jpg", width: 1280, height: 1600 },
+    { id: "stoneware-cups", alt: "Two speckled stoneware cups with a lid on a pale table", src: "/media/photos/stoneware-cups.jpg", width: 1067, height: 1600 },
+    { id: "stacked-bowls", alt: "Two stacked speckled ceramic bowls against a dark wall", src: "/media/photos/stacked-bowls.jpg", width: 1600, height: 1067 },
+    { id: "ceramic-lamp", alt: "A sculptural ceramic lamp with a linen shade on a walnut sideboard", src: "/media/photos/ceramic-lamp.jpg", width: 1067, height: 1600 },
+    { id: "living-room", alt: "A bright living room with timber beams, arched windows, and cream sofas", src: "/media/photos/living-room.jpg", width: 1200, height: 1600 },
+    { id: "sunroom", alt: "A sunroom with a round dining table, plants, and windows on three sides", src: "/media/photos/sunroom.jpg", width: 1600, height: 1067 },
+    { id: "home-office", alt: "A home office with a wooden desk and deep green walls", src: "/media/photos/home-office.jpg", width: 1600, height: 1200 },
+    { id: "reading-chair", alt: "A grey armchair and ottoman with a knit throw in a dark green room", src: "/media/photos/reading-chair.jpg", width: 1600, height: 900 },
+    { id: "bedroom", alt: "A made bed with striped linen pillows against an oak headboard", src: "/media/photos/bedroom.jpg", width: 1067, height: 1600 },
+    { id: "restaurant", alt: "A warm restaurant dining room with woven pendant lights and a tree", src: "/media/photos/restaurant.jpg", width: 1067, height: 1600 },
+    { id: "wine-bar", alt: "A glass carafe of red wine on a bar table in low evening light", src: "/media/photos/wine-bar.jpg", width: 1600, height: 1067 },
+    { id: "concert-hall", alt: "Curved stainless steel panels of the Walt Disney Concert Hall against a blue sky", src: "/media/photos/concert-hall.jpg", width: 1600, height: 1143 },
+    { id: "curved-facade", alt: "A white tiled building facade with curved balconies", src: "/media/photos/curved-facade.jpg", width: 1600, height: 1067 },
+    { id: "pool-house", alt: "A modern glass house beside a long pool under a clear sky", src: "/media/photos/pool-house.jpg", width: 1600, height: 900 },
+    { id: "terracotta-waves", alt: "Wavy terracotta walls rising toward a blue sky", src: "/media/photos/terracotta-waves.jpg", width: 1067, height: 1600 },
+    { id: "mountain-ridges", alt: "Layered mountain ridges under a warm evening sky", src: "/media/photos/mountain-ridges.jpg", width: 1600, height: 1068 },
+    { id: "alpine-lake", alt: "A calm alpine lake reflecting a rocky peak at golden hour", src: "/media/photos/alpine-lake.jpg", width: 1067, height: 1600 },
+    { id: "coastline", alt: "A long coastline with waves rolling onto a beach below green cliffs", src: "/media/photos/coastline.jpg", width: 1200, height: 1600 },
+    { id: "sea-at-dusk", alt: "A calm sea at dusk with a low island on the horizon", src: "/media/photos/sea-at-dusk.jpg", width: 1067, height: 1600 },
+    { id: "lisbon-tram", alt: "A yellow tram on a street lined with historic buildings in Lisbon", src: "/media/photos/lisbon-tram.jpg", width: 1600, height: 1064 },
+    { id: "lisbon-bridge", alt: "The 25 de Abril Bridge crossing the Tagus in Lisbon", src: "/media/photos/lisbon-bridge.jpg", width: 1600, height: 1166 },
+    { id: "lisbon-rooftops", alt: "Terracotta rooftops of Lisbon running down to the river", src: "/media/photos/lisbon-rooftops.jpg", width: 1280, height: 1600 },
+    { id: "salmon-dinner", alt: "Seared salmon with a bright herb salsa and a glass of red wine", src: "/media/photos/salmon-dinner.jpg", width: 1067, height: 1600 },
+    { id: "chef-plating", alt: "A chef spooning sauce onto a plated dish in a dark kitchen", src: "/media/photos/chef-plating.jpg", width: 1600, height: 1600 },
+];
+/** Looks up a person by id. */
+export function person(id) {
+    return people.find(entry => entry.id === id);
+}
+/** Looks up a photo by id. */
+export function photo(id) {
+    return photos.find(entry => entry.id === id);
+}
+/** Square 400 px avatar path for a person id, for `src` props. */
+export const avatar = (id) => person(id).src;
+/** 800 × 1000 portrait crop of the same photo, for image-led layouts. */
+export const portrait = (id) => `/media/people/portrait/${id}.jpg`;
+/** The first `count` people, for avatar stacks and lists. */
+export const peopleSample = (count) => people.slice(0, count);

package/lib/menu-highlight.d.ts

@@ -0,0 +1,28 @@
+import type { FocusEvent } from "react";
+type Highlight = {
+    top: number;
+    height: number;
+    danger: boolean;
+    glide: boolean;
+};
+/**
+ * One highlight that glides between the items of a Radix menu or listbox for the pointer, and jumps instantly for the keyboard.
+ * Radix focuses the highlighted item, so the highlight follows focus inside the content. Spread `contentProps` on the content,
+ * call `reset` when it opens, and render `<MenuHighlight state={highlight} className={styles.highlight} />` as its first child.
+ * Items mark a destructive tone with `data-tone="danger"`.
+ */
+export declare function useMenuHighlight(itemSelector?: string): {
+    highlight: Highlight | null;
+    reset: () => void;
+    contentProps: {
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+        onPointerMoveCapture: () => void;
+        onKeyDownCapture: () => void;
+    };
+};
+/** The gliding highlight itself. Position it absolutely inside the content, under the items. */
+export declare function MenuHighlight({ state, className }: {
+    state: Highlight | null;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/lib/menu-highlight.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "./motion-tokens.js";
+/**
+ * One highlight that glides between the items of a Radix menu or listbox for the pointer, and jumps instantly for the keyboard.
+ * Radix focuses the highlighted item, so the highlight follows focus inside the content. Spread `contentProps` on the content,
+ * call `reset` when it opens, and render `<MenuHighlight state={highlight} className={styles.highlight} />` as its first child.
+ * Items mark a destructive tone with `data-tone="danger"`.
+ */
+export function useMenuHighlight(itemSelector = '[role="menuitem"], [role="option"]') {
+    const [highlight, setHighlight] = useState(null);
+    const pointer = useRef(false);
+    const clearTimer = useRef(0);
+    useEffect(() => () => window.clearTimeout(clearTimer.current), []);
+    function onFocus(event) {
+        const item = event.target instanceof HTMLElement ? event.target.closest(itemSelector) : null;
+        window.clearTimeout(clearTimer.current);
+        if (!item) {
+            // A short grace period keeps the highlight gliding across separators and item gaps.
+            clearTimer.current = window.setTimeout(() => setHighlight(null), pointer.current ? 70 : 0);
+            return;
+        }
+        const next = { top: item.offsetTop, height: item.offsetHeight, danger: item.dataset.tone === "danger" };
+        const glide = pointer.current;
+        setHighlight(current => ({ ...next, glide: glide && current !== null }));
+    }
+    return {
+        highlight,
+        reset: () => { window.clearTimeout(clearTimer.current); setHighlight(null); },
+        contentProps: {
+            onFocus,
+            onPointerMoveCapture: () => { pointer.current = true; },
+            onKeyDownCapture: () => { pointer.current = false; },
+        },
+    };
+}
+/** The gliding highlight itself. Position it absolutely inside the content, under the items. */
+export function MenuHighlight({ state, className }) {
+    const reduced = useReducedMotion();
+    return _jsx(motion.span, { className: className, "data-tone": state?.danger ? "danger" : undefined, "aria-hidden": "true", initial: false, animate: state ? { y: state.top, height: state.height, opacity: 1 } : { opacity: 0 }, transition: { default: state?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 }, opacity: { duration: reduced ? 0 : .08 } } });
+}