@spark-line/web-framework 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Spark Line
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,171 @@
+# `@spark-line/web-framework`
+
+Structural UI contracts for Astro pages, optional React islands, and optional
+Sanity section data.
+
+This package adapts the durable parts of the Lumos method—tokens before
+components, explicit containment, fluid layout, registered variants, and
+reserved visual space—to the Spark Line web stack. It does not include a
+universal visual identity, generated site CSS, or a Webflow/global browser
+runtime. React JavaScript ships only when a consumer imports and hydrates an
+island.
+
+## Install
+
+Pin an exact version while the API is young:
+
+```sh
+npm install @spark-line/web-framework@0.1.0
+```
+
+Astro is required. React, React DOM, and Sanity are optional peer dependencies
+and are only needed when their respective exports are used.
+
+```astro
+---
+import "@spark-line/web-framework/styles/foundation.css";
+import {
+  Action,
+  Heading,
+  PageFlow,
+  Section,
+  Stack,
+  Text,
+  VisualFrame
+} from "@spark-line/web-framework/astro";
+---
+
+<PageFlow>
+  <Section theme="default" spaceTop="lg" spaceBottom="lg">
+    <Stack gap="md">
+      <Heading level={1} size="display">Project-owned design</Heading>
+      <Text size="lead">Framework-owned structure.</Text>
+      <Action href="/projects">View projects</Action>
+      <VisualFrame aspectRatio="16 / 9">
+        <slot name="visual" />
+      </VisualFrame>
+    </Stack>
+  </Section>
+</PageFlow>
+```
+
+Define project tokens after the foundation stylesheet. The package deliberately
+uses semantic slots rather than a palette:
+
+```css
+:root {
+  --project-surface-default: Canvas;
+  --project-text-default: CanvasText;
+  --project-action-background: CanvasText;
+  --project-action-foreground: Canvas;
+  --project-type-display: clamp(3rem, 8vw, 7rem);
+}
+```
+
+## Section contract
+
+- `PageFlow` introduces no implicit gap.
+- Every `Section` owns its background, theme, and both internal vertical edges.
+- `Container` owns maximum width and inline gutters.
+- Child layouts own only their internal grid or flex behavior.
+- Section roots do not use external margins or selectors that style siblings.
+- A changed section may move the following section in normal flow, but may not
+  change that section's spacing, theme, width, or layout.
+- Joined seams and deliberate overlaps use `SectionGroup`.
+- Floating or absolutely positioned artwork uses `VisualFrame` with a reserved
+  aspect ratio or block size.
+
+## Component sourcing order
+
+1. Inspect the real implementation and the component registry.
+2. Reuse an exact registered component.
+3. Add a typed variant when semantics and behavior are unchanged.
+4. Compose existing primitives.
+5. Create and register a component only for new structure or behavior.
+6. Add every meaningful state to the component gallery.
+
+The registry is available from `@spark-line/web-framework/registry`.
+
+## React islands
+
+The React export contains reference `Tabs`, `Carousel`, `Dialog`, and `Menu`
+islands. Props are serializable data. Astro still owns the outer section,
+surface, container, and spacing.
+
+```astro
+---
+import { Tabs } from "@spark-line/web-framework/react";
+---
+
+<Tabs
+  client:visible
+  label="Project sections"
+  items={[
+    { id: "context", label: "Context", content: "Approved source material." },
+    { id: "proof", label: "Proof", content: "Verified outcomes." }
+  ]}
+/>
+```
+
+Use `client:visible` or `client:idle` by default. Use `client:load` only when the
+interaction must be available immediately.
+
+## Sanity adapter
+
+The Sanity export has no runtime import from `sanity`. It provides typed
+registry, normalization, and schema-shape helpers while keeping the peer
+optional.
+
+```ts
+import {
+  defineSectionRegistry,
+  normalizePageSections
+} from "@spark-line/web-framework/sanity";
+
+const registry = defineSectionRegistry([
+  {
+    type: "heroSection",
+    componentId: "hero",
+    themes: ["default", "inverse"],
+    spaces: ["none", "sm", "md", "lg", "xl"],
+    layouts: ["split", "centered"]
+  }
+]);
+
+const sections = normalizePageSections(document.sections, registry);
+```
+
+`_type`, `_key`, Portable Text, references, asset data, and preview metadata
+remain on `props` and the original record remains available as `source`.
+Unknown section policy is explicitly `omit`, `preserve`, or `throw`.
+
+## Component gallery
+
+Copy `starter/astro/src/pages/style-guide.astro` into a project. The route is
+unlinked and includes `noindex, nofollow`. Register every new component and
+show every meaningful state before considering it reusable.
+
+## v14.23 guidance
+
+Executable code comes from npm. Reviewed workflow and project canon come from
+the existing v14.23 MCP endpoint through the `web_framework` module. UI work
+requests both `design_authoring` and `web_framework`; structural-only work may
+request `web_framework`. Version drift is advisory and must never edit
+dependencies automatically.
+
+## Development and release
+
+```sh
+npm ci
+npm run check
+npm test
+npm run pack:artifact
+npm run test:fixtures
+npm run test:browser
+npm run pack:inspect
+```
+
+`pack:artifact` creates the single release tarball. Fixture tests, inspection,
+and publication all use that same file rather than silently repacking it.
+Releases are immutable. Tag the exact verified commit as `v0.1.0`; the included
+workflow publishes the verified tarball with npm provenance.

package/dist/astro/index.js

@@ -0,0 +1,13 @@
+export { default as PageFlow } from "../../src/astro/PageFlow.astro";
+export { default as Section } from "../../src/astro/Section.astro";
+export { default as SectionGroup } from "../../src/astro/SectionGroup.astro";
+export { default as Container } from "../../src/astro/Container.astro";
+export { default as Stack } from "../../src/astro/Stack.astro";
+export { default as Cluster } from "../../src/astro/Cluster.astro";
+export { default as Grid } from "../../src/astro/Grid.astro";
+export { default as VisualFrame } from "../../src/astro/VisualFrame.astro";
+export { default as Heading } from "../../src/astro/Heading.astro";
+export { default as Text } from "../../src/astro/Text.astro";
+export { default as Action } from "../../src/astro/Action.astro";
+export { default as CardShell } from "../../src/astro/CardShell.astro";
+export { default as Disclosure } from "../../src/astro/Disclosure.astro";

package/dist/react/Carousel.d.ts

@@ -0,0 +1,13 @@
+export interface CarouselItem {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface CarouselProps {
+    label: string;
+    items: readonly CarouselItem[];
+    previousLabel?: string;
+    nextLabel?: string;
+}
+export declare function Carousel({ label, items, previousLabel, nextLabel }: CarouselProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/react/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/react/Carousel.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,aAA0B,EAC1B,SAAkB,EACnB,EAAE,aAAa,sCAqCf"}

package/dist/react/Carousel.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+export function Carousel({ label, items, previousLabel = "Previous", nextLabel = "Next" }) {
+    const id = useId();
+    const [index, setIndex] = useState(0);
+    const active = items[index];
+    if (!active)
+        return null;
+    const move = (offset) => {
+        setIndex((current) => (current + offset + items.length) % items.length);
+    };
+    return (_jsxs("section", { "data-slf-island": "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": label, children: [_jsxs("div", { id: `${id}-slide`, "aria-live": "polite", "aria-atomic": "true", children: [_jsxs("p", { children: [_jsxs("span", { className: "slf-visually-hidden", children: ["Item ", index + 1, " of ", items.length, ":", " "] }), active.label] }), active.description ? _jsx("p", { children: active.description }) : null] }), _jsxs("div", { children: [_jsx("button", { type: "button", onClick: () => move(-1), "aria-controls": `${id}-slide`, children: previousLabel }), _jsx("button", { type: "button", onClick: () => move(1), "aria-controls": `${id}-slide`, children: nextLabel })] })] }));
+}
+//# sourceMappingURL=Carousel.js.map

package/dist/react/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/react/Carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAexC,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,aAAa,GAAG,UAAU,EAC1B,SAAS,GAAG,MAAM,EACJ;IACd,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;IAE5B,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,IAAI,GAAG,CAAC,MAAc,EAAE,EAAE;QAC9B,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,sCACkB,UAAU,EAC1B,IAAI,EAAC,QAAQ,0BACQ,UAAU,gBACnB,KAAK,aAEjB,eAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,eAAY,QAAQ,iBAAa,MAAM,aAC3D,wBACE,gBAAM,SAAS,EAAC,qBAAqB,sBAC7B,KAAK,GAAG,CAAC,UAAM,KAAK,CAAC,MAAM,OAAG,GAAG,IAClC,EACN,MAAM,CAAC,KAAK,IACX,EACH,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,sBAAI,MAAM,CAAC,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,IACpD,EACN,0BACE,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mBAAiB,GAAG,EAAE,QAAQ,YACxE,aAAa,GACP,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAiB,GAAG,EAAE,QAAQ,YACvE,SAAS,GACH,IACL,IACE,CACX,CAAC;AACJ,CAAC"}

package/dist/react/Dialog.d.ts

@@ -0,0 +1,8 @@
+export interface DialogProps {
+    triggerLabel: string;
+    title: string;
+    description: string;
+    closeLabel?: string;
+}
+export declare function Dialog({ triggerLabel, title, description, closeLabel }: DialogProps): import("react").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/react/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/react/Dialog.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAoB,EACrB,EAAE,WAAW,+BAsCb"}

package/dist/react/Dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+export function Dialog({ triggerLabel, title, description, closeLabel = "Close" }) {
+    const [open, setOpen] = useState(false);
+    const dialog = useRef(null);
+    const trigger = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    useEffect(() => {
+        const element = dialog.current;
+        if (!element)
+            return;
+        if (open && !element.open)
+            element.showModal();
+        if (!open && element.open)
+            element.close();
+    }, [open]);
+    return (_jsxs("div", { "data-slf-island": "dialog", children: [_jsx("button", { ref: trigger, type: "button", onClick: () => setOpen(true), children: triggerLabel }), _jsxs("dialog", { ref: dialog, "aria-labelledby": titleId, "aria-describedby": descriptionId, onClose: () => {
+                    setOpen(false);
+                    trigger.current?.focus();
+                }, onCancel: () => setOpen(false), children: [_jsx("h2", { id: titleId, children: title }), _jsx("p", { id: descriptionId, children: description }), _jsx("button", { type: "button", onClick: () => setOpen(false), children: closeLabel })] })] }));
+}
+//# sourceMappingURL=Dialog.js.map

package/dist/react/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/react/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAS3D,MAAM,UAAU,MAAM,CAAC,EACrB,YAAY,EACZ,KAAK,EACL,WAAW,EACX,UAAU,GAAG,OAAO,EACR;IACZ,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI;YAAE,OAAO,CAAC,SAAS,EAAE,CAAC;QAC/C,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI;YAAE,OAAO,CAAC,KAAK,EAAE,CAAC;IAC7C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,kCAAqB,QAAQ,aAC3B,iBAAQ,GAAG,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YAC7D,YAAY,GACN,EACT,kBACE,GAAG,EAAE,MAAM,qBACM,OAAO,sBACN,aAAa,EAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACf,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC3B,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,aAE9B,aAAI,EAAE,EAAE,OAAO,YAAG,KAAK,GAAM,EAC7B,YAAG,EAAE,EAAE,aAAa,YAAG,WAAW,GAAK,EACvC,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAChD,UAAU,GACJ,IACF,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/react/Menu.d.ts

@@ -0,0 +1,11 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    href: string;
+}
+export interface MenuProps {
+    label: string;
+    items: readonly MenuItem[];
+}
+export declare function Menu({ label, items }: MenuProps): import("react").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/react/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/react/Menu.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;CAC5B;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,SAAS,+BA2E/C"}

package/dist/react/Menu.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+export function Menu({ label, items }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const trigger = useRef(null);
+    const links = useRef([]);
+    useEffect(() => {
+        if (open)
+            links.current[0]?.focus();
+    }, [open]);
+    function onTriggerKeyDown(event) {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+        }
+    }
+    function onMenuKeyDown(event) {
+        const current = links.current.indexOf(document.activeElement);
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            trigger.current?.focus();
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            links.current[(current + 1 + items.length) % items.length]?.focus();
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            links.current[(current - 1 + items.length) % items.length]?.focus();
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            links.current[0]?.focus();
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            links.current[items.length - 1]?.focus();
+        }
+    }
+    return (_jsxs("div", { "data-slf-island": "menu", children: [_jsx("button", { ref: trigger, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": `${id}-menu`, onClick: () => setOpen((value) => !value), onKeyDown: onTriggerKeyDown, children: label }), _jsx("ul", { id: `${id}-menu`, role: "menu", hidden: !open, onKeyDown: onMenuKeyDown, children: items.map((item, index) => (_jsx("li", { role: "none", children: _jsx("a", { ref: (node) => {
+                            links.current[index] = node;
+                        }, role: "menuitem", href: item.href, tabIndex: open ? 0 : -1, onClick: () => setOpen(false), children: item.label }) }, item.id))) })] }));
+}
+//# sourceMappingURL=Menu.js.map

package/dist/react/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/react/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/react/Tabs.d.ts

@@ -0,0 +1,12 @@
+export interface TabItem {
+    id: string;
+    label: string;
+    content: string;
+}
+export interface TabsProps {
+    label: string;
+    items: readonly TabItem[];
+    initialId?: string;
+}
+export declare function Tabs({ label, items, initialId }: TabsProps): import("react").JSX.Element | null;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/react/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/react/Tabs.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,sCA2E1D"}

package/dist/react/Tabs.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+export function Tabs({ label, items, initialId }) {
+    const generatedId = useId();
+    const initialIndex = Math.max(0, initialId ? items.findIndex((item) => item.id === initialId) : 0);
+    const [activeIndex, setActiveIndex] = useState(initialIndex);
+    const buttons = useRef([]);
+    const active = items[activeIndex];
+    if (!active)
+        return null;
+    function select(index) {
+        const next = (index + items.length) % items.length;
+        setActiveIndex(next);
+        buttons.current[next]?.focus();
+    }
+    function onKeyDown(event, index) {
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            select(index + 1);
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            select(index - 1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            select(0);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            select(items.length - 1);
+        }
+    }
+    return (_jsxs("div", { "data-slf-island": "tabs", children: [_jsx("div", { role: "tablist", "aria-label": label, children: items.map((item, index) => {
+                    const tabId = `${generatedId}-tab-${item.id}`;
+                    const panelId = `${generatedId}-panel-${item.id}`;
+                    const selected = activeIndex === index;
+                    return (_jsx("button", { ref: (node) => {
+                            buttons.current[index] = node;
+                        }, id: tabId, type: "button", role: "tab", "aria-selected": selected, "aria-controls": panelId, tabIndex: selected ? 0 : -1, onClick: () => setActiveIndex(index), onKeyDown: (event) => onKeyDown(event, index), children: item.label }, item.id));
+                }) }), items.map((item, index) => (_jsx("div", { id: `${generatedId}-panel-${item.id}`, role: "tabpanel", "aria-labelledby": `${generatedId}-tab-${item.id}`, hidden: activeIndex !== index, tabIndex: 0, children: item.content }, item.id)))] }));
+}
+//# sourceMappingURL=Tabs.js.map

package/dist/react/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/react/Tabs.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,9 @@
+export { Carousel } from "./Carousel.js";
+export type { CarouselItem, CarouselProps } from "./Carousel.js";
+export { Dialog } from "./Dialog.js";
+export type { DialogProps } from "./Dialog.js";
+export { Menu } from "./Menu.js";
+export type { MenuItem, MenuProps } from "./Menu.js";
+export { Tabs } from "./Tabs.js";
+export type { TabItem, TabsProps } from "./Tabs.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,5 @@
+export { Carousel } from "./Carousel.js";
+export { Dialog } from "./Dialog.js";
+export { Menu } from "./Menu.js";
+export { Tabs } from "./Tabs.js";
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}

package/dist/registry/index.d.ts

@@ -0,0 +1,197 @@
+export type ComponentKind = "primitive" | "section" | "island" | "pattern";
+export type ComponentStatus = "stable" | "experimental" | "deprecated";
+export interface CatalogScenario {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface ComponentDefinition<Variant extends string = string> {
+    id: string;
+    kind: ComponentKind;
+    variants: readonly Variant[];
+    status: ComponentStatus;
+    provenance: string;
+    scenarios: readonly CatalogScenario[];
+}
+export interface ComponentRegistry<Definition extends ComponentDefinition = ComponentDefinition> {
+    readonly components: readonly Definition[];
+    get(id: string): Definition | undefined;
+    has(id: string): boolean;
+    require(id: string): Definition;
+}
+export declare function defineComponentRegistry<const Definition extends ComponentDefinition>(components: readonly Definition[]): ComponentRegistry<Definition>;
+export declare const frameworkRegistry: ComponentRegistry<{
+    readonly id: "page-flow";
+    readonly kind: "primitive";
+    readonly variants: readonly ["main", "div"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "default";
+        readonly label: "Page flow";
+    }];
+} | {
+    readonly id: "section";
+    readonly kind: "primitive";
+    readonly variants: readonly ["default", "inverse", "accent", "quiet"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "themes";
+        readonly label: "Themes";
+    }, {
+        readonly id: "spacing";
+        readonly label: "Spacing edges";
+    }];
+} | {
+    readonly id: "section-group";
+    readonly kind: "primitive";
+    readonly variants: readonly ["joined", "overlap"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "modes";
+        readonly label: "Grouping modes";
+    }];
+} | {
+    readonly id: "container";
+    readonly kind: "primitive";
+    readonly variants: readonly ["narrow", "content", "wide", "full"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "widths";
+        readonly label: "Container widths";
+    }];
+} | {
+    readonly id: "stack";
+    readonly kind: "primitive";
+    readonly variants: readonly ["none", "xs", "sm", "md", "lg", "xl"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "gaps";
+        readonly label: "Vertical gaps";
+    }];
+} | {
+    readonly id: "cluster";
+    readonly kind: "primitive";
+    readonly variants: readonly ["start", "center", "end", "between"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "alignment";
+        readonly label: "Wrapped alignment";
+    }];
+} | {
+    readonly id: "grid";
+    readonly kind: "primitive";
+    readonly variants: readonly ["fixed", "auto-fit", "auto-fill"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "responsive";
+        readonly label: "Responsive columns";
+    }];
+} | {
+    readonly id: "visual-frame";
+    readonly kind: "primitive";
+    readonly variants: readonly ["aspect-ratio", "reserved-block-size"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "reserved-space";
+        readonly label: "Reserved visual space";
+    }];
+} | {
+    readonly id: "heading";
+    readonly kind: "primitive";
+    readonly variants: readonly ["display", "h1", "h2", "h3", "h4", "h5", "h6"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "scale";
+        readonly label: "Project type scale";
+    }];
+} | {
+    readonly id: "text";
+    readonly kind: "primitive";
+    readonly variants: readonly ["small", "body", "lead", "muted"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "scale";
+        readonly label: "Text roles";
+    }];
+} | {
+    readonly id: "action";
+    readonly kind: "primitive";
+    readonly variants: readonly ["primary", "secondary", "quiet"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "states";
+        readonly label: "Actions and focus states";
+    }];
+} | {
+    readonly id: "card-shell";
+    readonly kind: "primitive";
+    readonly variants: readonly ["default", "quiet", "accent"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "surfaces";
+        readonly label: "Project card surfaces";
+    }];
+} | {
+    readonly id: "disclosure";
+    readonly kind: "primitive";
+    readonly variants: readonly ["closed", "open"];
+    readonly status: "stable";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "native";
+        readonly label: "Native disclosure";
+    }];
+} | {
+    readonly id: "tabs";
+    readonly kind: "island";
+    readonly variants: readonly ["default"];
+    readonly status: "experimental";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "keyboard";
+        readonly label: "Keyboard tabs";
+    }];
+} | {
+    readonly id: "carousel";
+    readonly kind: "island";
+    readonly variants: readonly ["default"];
+    readonly status: "experimental";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "controls";
+        readonly label: "Previous and next controls";
+    }];
+} | {
+    readonly id: "dialog";
+    readonly kind: "island";
+    readonly variants: readonly ["modal"];
+    readonly status: "experimental";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "native";
+        readonly label: "Native modal dialog";
+    }];
+} | {
+    readonly id: "menu";
+    readonly kind: "island";
+    readonly variants: readonly ["links"];
+    readonly status: "experimental";
+    readonly provenance: "@spark-line/web-framework";
+    readonly scenarios: readonly [{
+        readonly id: "keyboard";
+        readonly label: "Keyboard menu";
+    }];
+}>;
+//# sourceMappingURL=index.d.ts.map