@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/showcase/Roadmap.js

@@ -0,0 +1,111 @@
+import { StatusPill } from "./Status.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/Roadmap.tsx
+/** What is planned: a featured card for the next big thing, then quiet dashed cards that read like promises. */
+function Roadmap({ items, label, statusLabel }) {
+	const featured = items.filter((item) => item.featured);
+	const rest = items.filter((item) => !item.featured);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": label,
+		role: "group",
+		className: "flex flex-col gap-3",
+		children: [featured.map((item) => /* @__PURE__ */ jsx(FeaturedCard, {
+			item,
+			statusLabel
+		}, item.title)), /* @__PURE__ */ jsx("ul", {
+			className: "divide-base-300/70 border-base-400/80 bg-base-100/50 dark:bg-base-100/30 grid divide-y rounded-2xl border border-dashed sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent md:grid-cols-2 lg:grid-cols-3 sm:dark:bg-transparent",
+			children: rest.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: "sm:border-base-400/80 flex gap-3 p-4 sm:gap-4 sm:rounded-2xl sm:border sm:border-dashed sm:p-5",
+				children: [/* @__PURE__ */ jsx(RoadmapIcon, { children: item.icon }), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base-content text-[15px] font-semibold tracking-[-0.01em] text-balance",
+							children: item.title
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0",
+							children: /* @__PURE__ */ jsx(StatusPill, {
+								status: "planned",
+								children: statusLabel
+							})
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-base-700 text-sm leading-6",
+						children: item.body
+					})]
+				})]
+			}, item.title))
+		})]
+	});
+}
+function FeaturedCard({ item, statusLabel }) {
+	return /* @__PURE__ */ jsxs("article", {
+		style: { "--lar-kind-hue": item.featured?.hue },
+		className: "flex flex-col gap-4 rounded-2xl border border-[oklch(0.62_0.1_var(--lar-kind-hue)/0.45)] bg-[radial-gradient(60%_120%_at_85%_50%,oklch(0.62_0.12_var(--lar-kind-hue)/0.14),transparent_70%)] p-5 sm:flex-row sm:p-7",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center justify-between gap-3 sm:block",
+				children: [/* @__PURE__ */ jsx(RoadmapIcon, { children: item.icon }), /* @__PURE__ */ jsx("span", {
+					className: "sm:hidden",
+					children: /* @__PURE__ */ jsx(StatusPill, {
+						status: "planned",
+						children: statusLabel
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base-content text-lg font-semibold tracking-[-0.01em] text-balance sm:text-xl",
+							children: item.title
+						}), /* @__PURE__ */ jsx("span", {
+							className: "hidden shrink-0 sm:block",
+							children: /* @__PURE__ */ jsx(StatusPill, {
+								status: "planned",
+								children: statusLabel
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-base-700 max-w-[620px] text-[15px] leading-6",
+						children: item.body
+					}),
+					item.featured?.steps ? /* @__PURE__ */ jsx("ol", {
+						className: "text-base-800 mt-2 flex flex-col gap-2.5 text-sm",
+						children: item.featured.steps.map((step, index) => /* @__PURE__ */ jsxs("li", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "bg-base-200 text-base-800 dark:bg-base-300 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums",
+								children: index + 1
+							}), step]
+						}, step))
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "mt-2 hidden flex-wrap gap-2 sm:flex",
+						children: item.featured?.highlights.map((highlight) => /* @__PURE__ */ jsx("span", {
+							className: "kind-badge inline-flex h-7 items-center rounded-full px-3 text-xs font-medium",
+							children: highlight
+						}, highlight))
+					})
+				]
+			}),
+			item.featured?.visual ? /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 sm:w-[300px] lg:w-[340px]",
+				children: item.featured.visual
+			}) : null
+		]
+	});
+}
+function RoadmapIcon({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/40 inline-flex size-8 shrink-0 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5",
+		children
+	});
+}
+export { Roadmap };
+
+//# sourceMappingURL=Roadmap.js.map

package/dist/showcase/Roadmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Roadmap.js","names":[],"sources":["../../src/showcase/Roadmap.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\nimport { StatusPill } from './Status';\n\nexport interface RoadmapItem {\n    icon: ReactNode;\n    title: string;\n    body: string;\n    /** The next big thing: a card of its own above the list, in an app's hue, with its highlights and an\n     *  illustration of the idea. */\n    featured?: { hue: number; highlights: readonly string[]; visual?: ReactNode; steps?: readonly string[] };\n}\n\n/** What is planned: a featured card for the next big thing, then quiet dashed cards that read like promises. */\nexport function Roadmap({\n    items,\n    label,\n    statusLabel,\n}: {\n    items: readonly RoadmapItem[];\n    label: string;\n    statusLabel: string;\n}) {\n    const featured = items.filter((item) => item.featured);\n    const rest = items.filter((item) => !item.featured);\n\n    return (\n        <div aria-label={label} role=\"group\" className=\"flex flex-col gap-3\">\n            {featured.map((item) => (\n                <FeaturedCard key={item.title} item={item} statusLabel={statusLabel} />\n            ))}\n            <ul className=\"divide-base-300/70 border-base-400/80 bg-base-100/50 dark:bg-base-100/30 grid divide-y rounded-2xl border border-dashed sm:gap-3 sm:divide-y-0 sm:rounded-none sm:border-0 sm:bg-transparent md:grid-cols-2 lg:grid-cols-3 sm:dark:bg-transparent\">\n                {rest.map((item) => (\n                    <li\n                        key={item.title}\n                        className=\"sm:border-base-400/80 flex gap-3 p-4 sm:gap-4 sm:rounded-2xl sm:border sm:border-dashed sm:p-5\"\n                    >\n                        <RoadmapIcon>{item.icon}</RoadmapIcon>\n                        <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                            <span className=\"flex items-start justify-between gap-3\">\n                                <span className=\"text-base-content text-[15px] font-semibold tracking-[-0.01em] text-balance\">\n                                    {item.title}\n                                </span>\n                                <span className=\"shrink-0\">\n                                    <StatusPill status=\"planned\">{statusLabel}</StatusPill>\n                                </span>\n                            </span>\n                            <span className=\"text-base-700 text-sm leading-6\">{item.body}</span>\n                        </div>\n                    </li>\n                ))}\n            </ul>\n        </div>\n    );\n}\n\nfunction FeaturedCard({ item, statusLabel }: { item: RoadmapItem; statusLabel: string }) {\n    return (\n        <article\n            style={{ '--lar-kind-hue': item.featured?.hue } as CSSProperties}\n            className=\"flex flex-col gap-4 rounded-2xl border border-[oklch(0.62_0.1_var(--lar-kind-hue)/0.45)] bg-[radial-gradient(60%_120%_at_85%_50%,oklch(0.62_0.12_var(--lar-kind-hue)/0.14),transparent_70%)] p-5 sm:flex-row sm:p-7\"\n        >\n            <span className=\"flex items-center justify-between gap-3 sm:block\">\n                <RoadmapIcon>{item.icon}</RoadmapIcon>\n                <span className=\"sm:hidden\">\n                    <StatusPill status=\"planned\">{statusLabel}</StatusPill>\n                </span>\n            </span>\n            <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n                <span className=\"flex items-start justify-between gap-3\">\n                    <span className=\"text-base-content text-lg font-semibold tracking-[-0.01em] text-balance sm:text-xl\">\n                        {item.title}\n                    </span>\n                    <span className=\"hidden shrink-0 sm:block\">\n                        <StatusPill status=\"planned\">{statusLabel}</StatusPill>\n                    </span>\n                </span>\n                <span className=\"text-base-700 max-w-[620px] text-[15px] leading-6\">{item.body}</span>\n                {item.featured?.steps ? (\n                    <ol className=\"text-base-800 mt-2 flex flex-col gap-2.5 text-sm\">\n                        {item.featured.steps.map((step, index) => (\n                            <li key={step} className=\"flex items-center gap-2\">\n                                <span className=\"bg-base-200 text-base-800 dark:bg-base-300 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold tabular-nums\">\n                                    {index + 1}\n                                </span>\n                                {step}\n                            </li>\n                        ))}\n                    </ol>\n                ) : null}\n                <span className=\"mt-2 hidden flex-wrap gap-2 sm:flex\">\n                    {item.featured?.highlights.map((highlight) => (\n                        <span\n                            key={highlight}\n                            className=\"kind-badge inline-flex h-7 items-center rounded-full px-3 text-xs font-medium\"\n                        >\n                            {highlight}\n                        </span>\n                    ))}\n                </span>\n            </div>\n            {item.featured?.visual ? (\n                <div className=\"shrink-0 sm:w-[300px] lg:w-[340px]\">{item.featured.visual}</div>\n            ) : null}\n        </article>\n    );\n}\n\nfunction RoadmapIcon({ children }: { children: ReactNode }) {\n    return (\n        <span className=\"bg-base-200 text-base-800 ring-base-300/70 dark:bg-base-300/40 inline-flex size-8 shrink-0 items-center justify-center rounded-[0.6rem] ring-1 ring-inset sm:size-10 sm:rounded-[0.7rem] [&>svg]:size-4 sm:[&>svg]:size-5\">\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;AAcA,SAAgB,QAAQ,EACpB,OACA,OACA,eAKD;CACC,MAAM,WAAW,MAAM,QAAQ,SAAS,KAAK,QAAQ;CACrD,MAAM,OAAO,MAAM,QAAQ,SAAS,CAAC,KAAK,QAAQ;CAElD,OACI,qBAAC,OAAD;EAAK,cAAY;EAAO,MAAK;EAAQ,WAAU;EAA/C,UAAA,CACK,SAAS,KAAK,SACX,oBAAC,cAAD;GAAqC;GAAmB;EAAc,GAAnD,KAAK,KAA8C,CACzE,GACD,oBAAC,MAAD;GAAI,WAAU;GACT,UAAA,KAAK,KAAK,SACP,qBAAC,MAAD;IAEI,WAAU;IAFd,UAAA,CAII,oBAAC,aAAD,EAAA,UAAc,KAAK,KAAkB,CAAA,GACrC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACI,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACI,oBAAC,QAAD;OAAM,WAAU;OACX,UAAA,KAAK;MACJ,CAAA,GACN,oBAAC,QAAD;OAAM,WAAU;OACZ,UAAA,oBAAC,YAAD;QAAY,QAAO;QAAW,UAAA;OAAwB,CAAA;MACpD,CAAA,CACJ;KACN,CAAA,GAAA,oBAAC,QAAD;MAAM,WAAU;MAAmC,UAAA,KAAK;KAAW,CAAA,CAClE;IACL,CAAA,CAAA;GAfK,GAAA,KAAK,KAeV,CACP;EACD,CAAA,CACH;;AAEb;AAEA,SAAS,aAAa,EAAE,MAAM,eAA2D;CACrF,OACI,qBAAC,WAAD;EACI,OAAO,EAAE,kBAAkB,KAAK,UAAU,IAAI;EAC9C,WAAU;EAFd,UAAA;GAII,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,oBAAC,aAAD,EAAA,UAAc,KAAK,KAAkB,CAAA,GACrC,oBAAC,QAAD;KAAM,WAAU;KACZ,UAAA,oBAAC,YAAD;MAAY,QAAO;MAAW,UAAA;KAAwB,CAAA;IACpD,CAAA,CACJ;;GACN,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACI,oBAAC,QAAD;OAAM,WAAU;OACX,UAAA,KAAK;MACJ,CAAA,GACN,oBAAC,QAAD;OAAM,WAAU;OACZ,UAAA,oBAAC,YAAD;QAAY,QAAO;QAAW,UAAA;OAAwB,CAAA;MACpD,CAAA,CACJ;;KACN,oBAAC,QAAD;MAAM,WAAU;MAAqD,UAAA,KAAK;KAAW,CAAA;KACpF,KAAK,UAAU,QACZ,oBAAC,MAAD;MAAI,WAAU;MACT,UAAA,KAAK,SAAS,MAAM,KAAK,MAAM,UAC5B,qBAAC,MAAD;OAAe,WAAU;OAAzB,UAAA,CACI,oBAAC,QAAD;QAAM,WAAU;QACX,UAAA,QAAQ;OACP,CAAA,GACL,IACD;MALK,GAAA,IAKL,CACP;KACD,CAAA,IACJ;KACJ,oBAAC,QAAD;MAAM,WAAU;MACX,UAAA,KAAK,UAAU,WAAW,KAAK,cAC5B,oBAAC,QAAD;OAEI,WAAU;OAET,UAAA;MACC,GAJG,SAIH,CACT;KACC,CAAA;IACL;;GACJ,KAAK,UAAU,SACZ,oBAAC,OAAD;IAAK,WAAU;IAAsC,UAAA,KAAK,SAAS;GAAY,CAAA,IAC/E;EACC;;AAEjB;AAEA,SAAS,YAAY,EAAE,YAAqC;CACxD,OACI,oBAAC,QAAD;EAAM,WAAU;EACX;CACC,CAAA;AAEd"}

package/dist/showcase/RouteDiagram.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export interface RouteNode {
+  icon: ReactNode;
+  title: string;
+  detail: string;
+}
+/** One connection from end to end, drawn as a line of travelling light through every node it passes, with
+ *  what the connection is labelled once above it. */
+export declare function RouteDiagram({ nodes, label, caption }: {
+  nodes: readonly RouteNode[];
+  label: string;
+  caption: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=RouteDiagram.d.ts.map

package/dist/showcase/RouteDiagram.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/RouteDiagram.tsx
+/** One connection from end to end, drawn as a line of travelling light through every node it passes, with
+*  what the connection is labelled once above it. */
+function RouteDiagram({ nodes, label, caption }) {
+	return /* @__PURE__ */ jsxs("figure", {
+		className: "border-base-300 bg-base-100/70 dark:bg-base-100/50 relative isolate overflow-hidden rounded-[1.5rem] border px-6 py-8 sm:px-10 sm:py-12",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "absolute inset-0 -z-10 bg-[radial-gradient(60%_70%_at_50%_40%,var(--lar-glow-soft),transparent_70%)]"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-8 flex sm:justify-center",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "border-primary/30 bg-primary/8 text-primary dark:bg-primary/16 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-1.5 rounded-full bg-current"
+					}), label]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "lar-route-line absolute top-6 bottom-6 left-[23px] w-[1.5px] sm:top-8 sm:right-[calc(100%/6)] sm:bottom-auto sm:left-[calc(100%/6)] sm:h-[1.5px] sm:w-auto"
+				}), /* @__PURE__ */ jsx("ol", {
+					className: "relative flex flex-col gap-6 sm:grid sm:grid-cols-3 sm:gap-4",
+					children: nodes.map((node) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-4 sm:flex-col sm:gap-3 sm:text-center",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "border-base-300 bg-base-50 text-base-content inline-flex size-12 shrink-0 items-center justify-center rounded-[0.9rem] border shadow-[0_14px_30px_-16px_rgb(0_0_0/50%)] sm:size-16 sm:rounded-[1.1rem] [&>svg]:size-6 sm:[&>svg]:size-7",
+							children: node.icon
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex flex-col gap-0.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-base-content text-sm font-semibold",
+								children: node.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-base-700 text-xs",
+								children: node.detail
+							})]
+						})]
+					}, node.title))
+				})]
+			}),
+			/* @__PURE__ */ jsx("figcaption", {
+				className: "text-base-700 mt-8 text-sm leading-6 text-pretty sm:mt-10 sm:text-center",
+				children: caption
+			})
+		]
+	});
+}
+export { RouteDiagram };
+
+//# sourceMappingURL=RouteDiagram.js.map

package/dist/showcase/RouteDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteDiagram.js","names":[],"sources":["../../src/showcase/RouteDiagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface RouteNode {\n    icon: ReactNode;\n    title: string;\n    detail: string;\n}\n\n/** One connection from end to end, drawn as a line of travelling light through every node it passes, with\n *  what the connection is labelled once above it. */\nexport function RouteDiagram({\n    nodes,\n    label,\n    caption,\n}: {\n    nodes: readonly RouteNode[];\n    label: string;\n    caption: ReactNode;\n}) {\n    return (\n        <figure className=\"border-base-300 bg-base-100/70 dark:bg-base-100/50 relative isolate overflow-hidden rounded-[1.5rem] border px-6 py-8 sm:px-10 sm:py-12\">\n            <div\n                aria-hidden=\"true\"\n                className=\"absolute inset-0 -z-10 bg-[radial-gradient(60%_70%_at_50%_40%,var(--lar-glow-soft),transparent_70%)]\"\n            />\n            <div className=\"mb-8 flex sm:justify-center\">\n                <span className=\"border-primary/30 bg-primary/8 text-primary dark:bg-primary/16 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium dark:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]\">\n                    <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-current\" />\n                    {label}\n                </span>\n            </div>\n            <div className=\"relative\">\n                <span\n                    aria-hidden=\"true\"\n                    className=\"lar-route-line absolute top-6 bottom-6 left-[23px] w-[1.5px] sm:top-8 sm:right-[calc(100%/6)] sm:bottom-auto sm:left-[calc(100%/6)] sm:h-[1.5px] sm:w-auto\"\n                />\n                <ol className=\"relative flex flex-col gap-6 sm:grid sm:grid-cols-3 sm:gap-4\">\n                    {nodes.map((node) => (\n                        <li key={node.title} className=\"flex items-center gap-4 sm:flex-col sm:gap-3 sm:text-center\">\n                            <span className=\"border-base-300 bg-base-50 text-base-content inline-flex size-12 shrink-0 items-center justify-center rounded-[0.9rem] border shadow-[0_14px_30px_-16px_rgb(0_0_0/50%)] sm:size-16 sm:rounded-[1.1rem] [&>svg]:size-6 sm:[&>svg]:size-7\">\n                                {node.icon}\n                            </span>\n                            <span className=\"flex flex-col gap-0.5\">\n                                <span className=\"text-base-content text-sm font-semibold\">{node.title}</span>\n                                <span className=\"text-base-700 text-xs\">{node.detail}</span>\n                            </span>\n                        </li>\n                    ))}\n                </ol>\n            </div>\n            <figcaption className=\"text-base-700 mt-8 text-sm leading-6 text-pretty sm:mt-10 sm:text-center\">\n                {caption}\n            </figcaption>\n        </figure>\n    );\n}\n"],"mappings":";;;;AAUA,SAAgB,aAAa,EACzB,OACA,OACA,WAKD;CACC,OACI,qBAAC,UAAD;EAAQ,WAAU;EAAlB,UAAA;GACI,oBAAC,OAAD;IACI,eAAY;IACZ,WAAU;GACb,CAAA;GACD,oBAAC,OAAD;IAAK,WAAU;IACX,UAAA,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACI,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAoC,CAAA,GACtE,KACC;;GACL,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,oBAAC,QAAD;KACI,eAAY;KACZ,WAAU;IACb,CAAA,GACD,oBAAC,MAAD;KAAI,WAAU;KACT,UAAA,MAAM,KAAK,SACR,qBAAC,MAAD;MAAqB,WAAU;MAA/B,UAAA,CACI,oBAAC,QAAD;OAAM,WAAU;OACX,UAAA,KAAK;MACJ,CAAA,GACN,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACI,oBAAC,QAAD;QAAM,WAAU;QAA2C,UAAA,KAAK;OAAY,CAAA,GAC5E,oBAAC,QAAD;QAAM,WAAU;QAAyB,UAAA,KAAK;OAAa,CAAA,CACzD;MACN,CAAA,CAAA;KARK,GAAA,KAAK,KAQV,CACP;IACD,CAAA,CACH;;GACL,oBAAC,cAAD;IAAY,WAAU;IACjB,UAAA;GACO,CAAA;EACR;;AAEhB"}

package/dist/showcase/ServerUnit.d.ts

@@ -0,0 +1,50 @@
+import { Readiness } from "./Status.js";
+import { ReactNode } from "react";
+export type MediaApp = 'music' | 'video' | 'photos' | 'books';
+export interface ServerBay {
+  id: MediaApp;
+  name: string;
+  status: Readiness;
+  statusLabel: string;
+  panel: ReactNode;
+}
+interface ServerUnitProps {
+  label: string;
+  /** The key for the bays' lights, set under the unit. */
+  legend?: ReactNode;
+  display: {
+    name: string;
+    state: string;
+  };
+  bays: readonly ServerBay[];
+}
+/** The server as a four-bay box, one drive sled per media app. Choosing a sled pulls it forward and shows what
+ *  that app can do today and what is still to come. */
+export declare function ServerUnit({ label, display, bays, legend }: ServerUnitProps): import("react").JSX.Element;
+export interface ReadinessItem {
+  label: string;
+  status: Readiness;
+  statusLabel: string;
+}
+interface ReadinessPanelProps {
+  icon: ReactNode;
+  title: string;
+  status: ReactNode;
+  summary: string;
+  groups: readonly {
+    title: string;
+    items: readonly ReadinessItem[];
+    wideOnly?: boolean;
+  }[];
+}
+/** One app's status: what works, what is being built and what is planned, line by line. */
+export declare function ReadinessPanel({ icon, title, status, summary, groups }: ReadinessPanelProps): import("react").JSX.Element;
+/** The key for the readiness lights. */
+export declare function ReadinessLegend({ items }: {
+  items: readonly {
+    status: Readiness;
+    label: string;
+  }[];
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ServerUnit.d.ts.map

package/dist/showcase/ServerUnit.js

@@ -0,0 +1,175 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { StatusLight, StatusPill } from "./Status.js";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/ServerUnit.tsx
+const MARK_L = "M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z";
+const MARK_S = "M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z";
+/** The server as a four-bay box, one drive sled per media app. Choosing a sled pulls it forward and shows what
+*  that app can do today and what is still to come. */
+function ServerUnit({ label, display, bays, legend }) {
+	const [selected, setSelected] = useState(bays[0]?.id ?? "music");
+	const tabs = useRef([]);
+	const baseId = useId();
+	const current = bays.find((bay) => bay.id === selected) ?? bays[0];
+	function move(event, index) {
+		const step = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		}[event.key];
+		let next;
+		if (step !== void 0) next = (index + step + bays.length) % bays.length;
+		if (event.key === "Home") next = 0;
+		if (event.key === "End") next = bays.length - 1;
+		if (next === void 0) return;
+		event.preventDefault();
+		const bay = bays[next];
+		if (!bay) return;
+		setSelected(bay.id);
+		tabs.current[next]?.focus();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid items-start gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-center lg:gap-14",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-8 [perspective:1600px]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "lar-unit [transform:rotateX(2deg)_rotateY(5deg)] transition-transform duration-700 hover:[transform:rotateX(1deg)_rotateY(3deg)]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "lar-unit__top",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsxs("svg", {
+							viewBox: "0 0 100 100",
+							className: "lar-unit__mark",
+							children: [/* @__PURE__ */ jsx("path", {
+								d: MARK_L,
+								fill: "#f4f4f5"
+							}), /* @__PURE__ */ jsx("path", {
+								d: MARK_S,
+								fill: "#355292"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "lar-unit__lcd",
+							children: [/* @__PURE__ */ jsx("span", { children: display.name }), /* @__PURE__ */ jsx("b", { children: display.state })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "lar-unit__lights",
+							children: [/* @__PURE__ */ jsx("i", {}), /* @__PURE__ */ jsx("i", { className: "lar-led-pulse" })]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					role: "tablist",
+					"aria-label": label,
+					className: "lar-unit__bays",
+					children: bays.map((bay, index) => /* @__PURE__ */ jsxs("button", {
+						ref: (element) => {
+							tabs.current[index] = element;
+						},
+						type: "button",
+						role: "tab",
+						id: `${baseId}-${bay.id}-tab`,
+						"aria-controls": `${baseId}-panel`,
+						"aria-selected": bay.id === selected,
+						tabIndex: bay.id === selected ? 0 : -1,
+						"data-app": bay.id,
+						"data-status": bay.status,
+						onClick: () => setSelected(bay.id),
+						onKeyDown: (event) => move(event, index),
+						className: "lar-sled",
+						children: [
+							/* @__PURE__ */ jsx("i", {
+								className: "lar-sled__led lar-led-pulse",
+								style: { ["--lar-led-delay"]: `${index * 420}ms` }
+							}),
+							/* @__PURE__ */ jsx("i", { className: "lar-sled__vents" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "lar-sled__name",
+								children: bay.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "lar-sled__state",
+								children: bay.statusLabel
+							}),
+							/* @__PURE__ */ jsx("i", { className: "lar-sled__latch" })
+						]
+					}, bay.id))
+				})]
+			}), legend]
+		}), current ? /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			id: `${baseId}-panel`,
+			"aria-labelledby": `${baseId}-${current.id}-tab`,
+			className: "border-base-300 bg-base-100/70 dark:bg-base-100/50 rounded-[1.25rem] border p-5 sm:min-h-[420px] sm:p-7",
+			children: current.panel
+		}) : null]
+	});
+}
+/** One app's status: what works, what is being built and what is planned, line by line. */
+function ReadinessPanel({ icon, title, status, summary, groups }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					icon,
+					/* @__PURE__ */ jsx(Heading, {
+						as: "h3",
+						variant: "feature",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-auto",
+						children: status
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "prose",
+				tone: "muted",
+				children: summary
+			}),
+			groups.map((group) => /* @__PURE__ */ jsxs("div", {
+				className: `flex-col gap-2 ${group.wideOnly ? "hidden sm:flex" : "flex"}`,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "overline",
+					tone: "muted",
+					children: group.title
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "divide-base-300/70 flex flex-col divide-y",
+					children: group.items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: "text-base-800 flex items-center gap-3 py-1.5 text-sm sm:py-2",
+						children: [
+							/* @__PURE__ */ jsx(StatusLight, { status: item.status }),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1",
+								children: item.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-base-700 shrink-0 text-xs",
+								children: item.statusLabel
+							})
+						]
+					}, item.label))
+				})]
+			}, group.title))
+		]
+	});
+}
+/** The key for the readiness lights. */
+function ReadinessLegend({ items }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-center gap-2",
+		children: items.map((item) => /* @__PURE__ */ jsx(StatusPill, {
+			status: item.status,
+			children: item.label
+		}, item.status))
+	});
+}
+export { ReadinessLegend, ReadinessPanel, ServerUnit };
+
+//# sourceMappingURL=ServerUnit.js.map

package/dist/showcase/ServerUnit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerUnit.js","names":[],"sources":["../../src/showcase/ServerUnit.tsx"],"sourcesContent":["import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\nimport { type Readiness, StatusLight, StatusPill } from './Status';\n\nexport type MediaApp = 'music' | 'video' | 'photos' | 'books';\n\nexport interface ServerBay {\n    id: MediaApp;\n    name: string;\n    status: Readiness;\n    statusLabel: string;\n    panel: ReactNode;\n}\n\ninterface ServerUnitProps {\n    label: string;\n    /** The key for the bays' lights, set under the unit. */\n    legend?: ReactNode;\n    display: { name: string; state: string };\n    bays: readonly ServerBay[];\n}\n\nconst MARK_L = 'M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z';\nconst MARK_S =\n    'M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z';\n\n/** The server as a four-bay box, one drive sled per media app. Choosing a sled pulls it forward and shows what\n *  that app can do today and what is still to come. */\nexport function ServerUnit({ label, display, bays, legend }: ServerUnitProps) {\n    const [selected, setSelected] = useState<MediaApp>(bays[0]?.id ?? 'music');\n    const tabs = useRef<(HTMLButtonElement | null)[]>([]);\n    const baseId = useId();\n    const current = bays.find((bay) => bay.id === selected) ?? bays[0];\n\n    function move(event: KeyboardEvent<HTMLButtonElement>, index: number) {\n        const keys: Record<string, number> = {\n            ArrowRight: 1,\n            ArrowDown: 1,\n            ArrowLeft: -1,\n            ArrowUp: -1,\n        };\n        const step = keys[event.key];\n        let next: number | undefined;\n\n        if (step !== undefined) next = (index + step + bays.length) % bays.length;\n\n        if (event.key === 'Home') next = 0;\n\n        if (event.key === 'End') next = bays.length - 1;\n\n        if (next === undefined) return;\n\n        event.preventDefault();\n\n        const bay = bays[next];\n\n        if (!bay) return;\n\n        setSelected(bay.id);\n        tabs.current[next]?.focus();\n    }\n\n    return (\n        <div className=\"grid items-start gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:items-center lg:gap-14\">\n            <div className=\"flex flex-col gap-8 [perspective:1600px]\">\n                <div className=\"lar-unit [transform:rotateX(2deg)_rotateY(5deg)] transition-transform duration-700 hover:[transform:rotateX(1deg)_rotateY(3deg)]\">\n                    <div className=\"lar-unit__top\" aria-hidden=\"true\">\n                        <svg viewBox=\"0 0 100 100\" className=\"lar-unit__mark\">\n                            <path d={MARK_L} fill=\"#f4f4f5\" />\n                            <path d={MARK_S} fill=\"#355292\" />\n                        </svg>\n                        <div className=\"lar-unit__lcd\">\n                            <span>{display.name}</span>\n                            <b>{display.state}</b>\n                        </div>\n                        <div className=\"lar-unit__lights\">\n                            <i />\n                            <i className=\"lar-led-pulse\" />\n                        </div>\n                    </div>\n                    <div role=\"tablist\" aria-label={label} className=\"lar-unit__bays\">\n                        {bays.map((bay, index) => (\n                            <button\n                                key={bay.id}\n                                ref={(element) => {\n                                    tabs.current[index] = element;\n                                }}\n                                type=\"button\"\n                                role=\"tab\"\n                                id={`${baseId}-${bay.id}-tab`}\n                                aria-controls={`${baseId}-panel`}\n                                aria-selected={bay.id === selected}\n                                tabIndex={bay.id === selected ? 0 : -1}\n                                data-app={bay.id}\n                                data-status={bay.status}\n                                onClick={() => setSelected(bay.id)}\n                                onKeyDown={(event) => move(event, index)}\n                                className=\"lar-sled\"\n                            >\n                                <i\n                                    className=\"lar-sled__led lar-led-pulse\"\n                                    style={{ ['--lar-led-delay' as string]: `${index * 420}ms` }}\n                                />\n                                <i className=\"lar-sled__vents\" />\n                                <span className=\"lar-sled__name\">{bay.name}</span>\n                                <span className=\"lar-sled__state\">{bay.statusLabel}</span>\n                                <i className=\"lar-sled__latch\" />\n                            </button>\n                        ))}\n                    </div>\n                </div>\n                {legend}\n            </div>\n            {current ? (\n                <div\n                    role=\"tabpanel\"\n                    id={`${baseId}-panel`}\n                    aria-labelledby={`${baseId}-${current.id}-tab`}\n                    className=\"border-base-300 bg-base-100/70 dark:bg-base-100/50 rounded-[1.25rem] border p-5 sm:min-h-[420px] sm:p-7\"\n                >\n                    {current.panel}\n                </div>\n            ) : null}\n        </div>\n    );\n}\n\nexport interface ReadinessItem {\n    label: string;\n    status: Readiness;\n    statusLabel: string;\n}\n\ninterface ReadinessPanelProps {\n    icon: ReactNode;\n    title: string;\n    status: ReactNode;\n    summary: string;\n    groups: readonly { title: string; items: readonly ReadinessItem[]; wideOnly?: boolean }[];\n}\n\n/** One app's status: what works, what is being built and what is planned, line by line. */\nexport function ReadinessPanel({ icon, title, status, summary, groups }: ReadinessPanelProps) {\n    return (\n        <div className=\"flex flex-col gap-5\">\n            <div className=\"flex items-center gap-3\">\n                {icon}\n                <Heading as=\"h3\" variant=\"feature\">\n                    {title}\n                </Heading>\n                <span className=\"ml-auto\">{status}</span>\n            </div>\n            <Text variant=\"prose\" tone=\"muted\">\n                {summary}\n            </Text>\n            {groups.map((group) => (\n                <div key={group.title} className={`flex-col gap-2 ${group.wideOnly ? 'hidden sm:flex' : 'flex'}`}>\n                    <Text as=\"span\" variant=\"overline\" tone=\"muted\">\n                        {group.title}\n                    </Text>\n                    <ul className=\"divide-base-300/70 flex flex-col divide-y\">\n                        {group.items.map((item) => (\n                            <li\n                                key={item.label}\n                                className=\"text-base-800 flex items-center gap-3 py-1.5 text-sm sm:py-2\"\n                            >\n                                <StatusLight status={item.status} />\n                                <span className=\"min-w-0 flex-1\">{item.label}</span>\n                                <span className=\"text-base-700 shrink-0 text-xs\">{item.statusLabel}</span>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            ))}\n        </div>\n    );\n}\n\n/** The key for the readiness lights. */\nexport function ReadinessLegend({ items }: { items: readonly { status: Readiness; label: string }[] }) {\n    return (\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n            {items.map((item) => (\n                <StatusPill key={item.status} status={item.status}>\n                    {item.label}\n                </StatusPill>\n            ))}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/showcase/Stage.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+/** The navy glow and fading grid behind a hero. A hue tints the glow with a product's colour. */
+export declare function Backdrop({ hue }: {
+  hue?: number;
+}): import("react").JSX.Element;
+interface DeviceStageProps {
+  /** The large device in the middle. */
+  main: ReactNode;
+  /** A device in front, at the lower right. */
+  end?: ReactNode;
+  /** A device in front, at the lower left; hidden on narrow screens. */
+  start?: ReactNode;
+  /** How far the scene leans back, in degrees. */
+  pitch?: number;
+  /** The start device's width: a tablet or TV at 'wide', a phone at 'narrow'. */
+  startSize?: 'wide' | 'narrow';
+  /** A close-up that floats in front, across the lower left; hidden on narrow screens. */
+  callout?: ReactNode;
+  /** How big the end device is: 'small' beside a hero laptop, 'large' when the phone is the point. */
+  endSize?: 'small' | 'large';
+  /** What a phone-width screen shows, where a laptop's text would be too small to read: the end device or the
+   *  callout alone, or a readable close-up with the end device overlapping its corner. */
+  narrow?: 'stage' | 'end' | 'callout' | 'pair';
+  /** The close-up that 'pair' shows on phones. */
+  narrowMain?: ReactNode;
+  /** Which side a large end device stands on. */
+  endSide?: 'left' | 'right';
+}
+/** A group of devices in perspective that leans gently toward the pointer. */
+export declare function DeviceStage({ main, end, start, callout, pitch, startSize, endSize, narrow, narrowMain, endSide }: DeviceStageProps): import("react").JSX.Element;
+/** One device turned in space, for a feature row. */
+export declare function AngledDevice({ children, angle }: {
+  children: ReactNode;
+  angle?: 'left' | 'right' | 'flat' | 'lean' | 'tilt';
+}): import("react").JSX.Element;
+/** Fades and lifts its content into place as it scrolls into view. */
+export declare function Reveal({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Shows the full composition on wider screens and a readable close-up on phones. */
+export declare function ResponsiveMedia({ wide, narrow }: {
+  wide: ReactNode;
+  narrow: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Stage.d.ts.map

package/dist/showcase/Stage.js

@@ -0,0 +1,106 @@
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/showcase/Stage.tsx
+/** The navy glow and fading grid behind a hero. A hue tints the glow with a product's colour. */
+function Backdrop({ hue }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "lar-backdrop",
+		"data-hue": hue === void 0 ? void 0 : "",
+		style: hue === void 0 ? void 0 : { "--lar-backdrop-hue": hue }
+	});
+}
+const MAX_TILT = 2.5;
+/** A group of devices in perspective that leans gently toward the pointer. */
+function DeviceStage({ main, end, start, callout, pitch = 0, startSize = "wide", endSize = "small", narrow = "stage", narrowMain, endSide = "right" }) {
+	const scene = useRef(null);
+	function lean(event) {
+		const element = scene.current;
+		if (!element || event.pointerType !== "mouse" || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const bounds = event.currentTarget.getBoundingClientRect();
+		const x = (event.clientX - bounds.left) / bounds.width - .5;
+		const y = (event.clientY - bounds.top) / bounds.height - .5;
+		element.style.setProperty("--lar-tilt-x", `${(-y * MAX_TILT).toFixed(2)}deg`);
+		element.style.setProperty("--lar-tilt-y", `${(x * MAX_TILT * 1.6).toFixed(2)}deg`);
+	}
+	function settle() {
+		scene.current?.style.removeProperty("--lar-tilt-x");
+		scene.current?.style.removeProperty("--lar-tilt-y");
+	}
+	const alone = narrow === "end" ? end : narrow === "callout" ? callout : void 0;
+	const pair = narrow === "pair" && narrowMain;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		alone ? /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-[min(60%,220px)] sm:hidden",
+			children: alone
+		}) : null,
+		pair ? /* @__PURE__ */ jsxs("div", {
+			className: `relative sm:hidden ${end ? "mr-6 mb-10" : ""}`,
+			children: [narrowMain, end ? /* @__PURE__ */ jsx("div", {
+				className: "absolute -right-6 -bottom-10 w-[30%] max-w-[120px] rotate-[3deg]",
+				children: end
+			}) : null]
+		}) : null,
+		/* @__PURE__ */ jsx("div", {
+			className: `lar-stage ${alone || pair ? "hidden sm:block" : ""}`,
+			onPointerMove: lean,
+			onPointerLeave: settle,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: scene,
+				className: `lar-stage__scene ${endSize === "large" ? "grid grid-cols-1" : ""}`,
+				style: { "--lar-stage-pitch": `${pitch}deg` },
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: `lar-stage__slot relative ${endSize === "large" ? `col-start-1 row-start-1 w-[92%] self-start sm:mt-[8%] sm:w-[84%] ${endSide === "left" ? "justify-self-end" : ""}` : ""}`,
+						children: main
+					}),
+					start ? /* @__PURE__ */ jsx("div", {
+						className: `lar-stage__slot absolute bottom-[-7%] left-[-2%] hidden [transform:translateZ(60px)_rotateY(9deg)] sm:block ${startSize === "wide" ? "w-[34%]" : "w-[17%]"}`,
+						children: start
+					}) : null,
+					callout ? /* @__PURE__ */ jsx("div", {
+						className: "lar-stage__slot absolute bottom-[-5%] left-[1%] hidden w-[30%] [transform:translateZ(120px)_rotateY(6deg)_rotateZ(-1.5deg)] md:block",
+						children: callout
+					}) : null,
+					end ? /* @__PURE__ */ jsx("div", {
+						className: `lar-stage__slot ${endSize === "large" ? `relative col-start-1 row-start-1 mt-[24%] w-[36%] self-start sm:mt-0 sm:w-[30%] ${endSide === "left" ? "justify-self-start sm:[transform:translateZ(90px)_rotateY(9deg)_rotateZ(-1deg)]" : "justify-self-end sm:[transform:translateZ(90px)_rotateY(-9deg)_rotateZ(1deg)]"}` : "absolute right-[-1%] bottom-[2%] w-[30%] [transform:translateZ(90px)_rotateY(-11deg)_rotateZ(1deg)] sm:w-[18%]"}`,
+						children: end
+					}) : null
+				]
+			})
+		})
+	] });
+}
+/** One device turned in space, for a feature row. */
+function AngledDevice({ children, angle = "left" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `transition-transform duration-700 ${{
+			left: "sm:[transform:perspective(2400px)_rotateY(3deg)]",
+			right: "sm:[transform:perspective(2400px)_rotateY(-3deg)]",
+			lean: "sm:[transform:perspective(2600px)_rotateX(4deg)]",
+			tilt: "sm:[transform:perspective(1600px)_rotateY(-6deg)_rotateX(3deg)]",
+			flat: ""
+		}[angle]}`,
+		children
+	});
+}
+/** Fades and lifts its content into place as it scrolls into view. */
+function Reveal({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "lar-reveal",
+		children
+	});
+}
+/** Shows the full composition on wider screens and a readable close-up on phones. */
+function ResponsiveMedia({ wide, narrow }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "hidden sm:block",
+		children: wide
+	}), /* @__PURE__ */ jsx("div", {
+		className: "sm:hidden",
+		children: narrow
+	})] });
+}
+export { AngledDevice, Backdrop, DeviceStage, ResponsiveMedia, Reveal };
+
+//# sourceMappingURL=Stage.js.map

package/dist/showcase/Stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stage.js","names":[],"sources":["../../src/showcase/Stage.tsx"],"sourcesContent":["import { type CSSProperties, type PointerEvent, type ReactNode, useRef } from 'react';\n\n/** The navy glow and fading grid behind a hero. A hue tints the glow with a product's colour. */\nexport function Backdrop({ hue }: { hue?: number }) {\n    return (\n        <div\n            aria-hidden=\"true\"\n            className=\"lar-backdrop\"\n            data-hue={hue === undefined ? undefined : ''}\n            style={hue === undefined ? undefined : ({ '--lar-backdrop-hue': hue } as CSSProperties)}\n        />\n    );\n}\n\ninterface DeviceStageProps {\n    /** The large device in the middle. */\n    main: ReactNode;\n    /** A device in front, at the lower right. */\n    end?: ReactNode;\n    /** A device in front, at the lower left; hidden on narrow screens. */\n    start?: ReactNode;\n    /** How far the scene leans back, in degrees. */\n    pitch?: number;\n    /** The start device's width: a tablet or TV at 'wide', a phone at 'narrow'. */\n    startSize?: 'wide' | 'narrow';\n    /** A close-up that floats in front, across the lower left; hidden on narrow screens. */\n    callout?: ReactNode;\n    /** How big the end device is: 'small' beside a hero laptop, 'large' when the phone is the point. */\n    endSize?: 'small' | 'large';\n    /** What a phone-width screen shows, where a laptop's text would be too small to read: the end device or the\n     *  callout alone, or a readable close-up with the end device overlapping its corner. */\n    narrow?: 'stage' | 'end' | 'callout' | 'pair';\n    /** The close-up that 'pair' shows on phones. */\n    narrowMain?: ReactNode;\n    /** Which side a large end device stands on. */\n    endSide?: 'left' | 'right';\n}\n\nconst MAX_TILT = 2.5;\n\n/** A group of devices in perspective that leans gently toward the pointer. */\nexport function DeviceStage({\n    main,\n    end,\n    start,\n    callout,\n    pitch = 0,\n    startSize = 'wide',\n    endSize = 'small',\n    narrow = 'stage',\n    narrowMain,\n    endSide = 'right',\n}: DeviceStageProps) {\n    const scene = useRef<HTMLDivElement>(null);\n\n    function lean(event: PointerEvent<HTMLDivElement>) {\n        const element = scene.current;\n\n        if (!element || event.pointerType !== 'mouse' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n        const bounds = event.currentTarget.getBoundingClientRect();\n        const x = (event.clientX - bounds.left) / bounds.width - 0.5;\n        const y = (event.clientY - bounds.top) / bounds.height - 0.5;\n\n        element.style.setProperty('--lar-tilt-x', `${(-y * MAX_TILT).toFixed(2)}deg`);\n        element.style.setProperty('--lar-tilt-y', `${(x * MAX_TILT * 1.6).toFixed(2)}deg`);\n    }\n\n    function settle() {\n        scene.current?.style.removeProperty('--lar-tilt-x');\n        scene.current?.style.removeProperty('--lar-tilt-y');\n    }\n\n    const alone = narrow === 'end' ? end : narrow === 'callout' ? callout : undefined;\n    const pair = narrow === 'pair' && narrowMain;\n\n    return (\n        <>\n            {alone ? <div className=\"mx-auto w-[min(60%,220px)] sm:hidden\">{alone}</div> : null}\n            {pair ? (\n                <div className={`relative sm:hidden ${end ? 'mr-6 mb-10' : ''}`}>\n                    {narrowMain}\n                    {end ? (\n                        <div className=\"absolute -right-6 -bottom-10 w-[30%] max-w-[120px] rotate-[3deg]\">{end}</div>\n                    ) : null}\n                </div>\n            ) : null}\n            <div\n                className={`lar-stage ${alone || pair ? 'hidden sm:block' : ''}`}\n                onPointerMove={lean}\n                onPointerLeave={settle}\n            >\n                <div\n                    ref={scene}\n                    className={`lar-stage__scene ${endSize === 'large' ? 'grid grid-cols-1' : ''}`}\n                    style={{ '--lar-stage-pitch': `${pitch}deg` } as CSSProperties}\n                >\n                    <div\n                        className={`lar-stage__slot relative ${endSize === 'large' ? `col-start-1 row-start-1 w-[92%] self-start sm:mt-[8%] sm:w-[84%] ${endSide === 'left' ? 'justify-self-end' : ''}` : ''}`}\n                    >\n                        {main}\n                    </div>\n                    {start ? (\n                        <div\n                            className={`lar-stage__slot absolute bottom-[-7%] left-[-2%] hidden [transform:translateZ(60px)_rotateY(9deg)] sm:block ${startSize === 'wide' ? 'w-[34%]' : 'w-[17%]'}`}\n                        >\n                            {start}\n                        </div>\n                    ) : null}\n                    {callout ? (\n                        <div className=\"lar-stage__slot absolute bottom-[-5%] left-[1%] hidden w-[30%] [transform:translateZ(120px)_rotateY(6deg)_rotateZ(-1.5deg)] md:block\">\n                            {callout}\n                        </div>\n                    ) : null}\n                    {end ? (\n                        <div\n                            className={`lar-stage__slot ${endSize === 'large' ? `relative col-start-1 row-start-1 mt-[24%] w-[36%] self-start sm:mt-0 sm:w-[30%] ${endSide === 'left' ? 'justify-self-start sm:[transform:translateZ(90px)_rotateY(9deg)_rotateZ(-1deg)]' : 'justify-self-end sm:[transform:translateZ(90px)_rotateY(-9deg)_rotateZ(1deg)]'}` : 'absolute right-[-1%] bottom-[2%] w-[30%] [transform:translateZ(90px)_rotateY(-11deg)_rotateZ(1deg)] sm:w-[18%]'}`}\n                        >\n                            {end}\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        </>\n    );\n}\n\n/** One device turned in space, for a feature row. */\nexport function AngledDevice({\n    children,\n    angle = 'left',\n}: {\n    children: ReactNode;\n    angle?: 'left' | 'right' | 'flat' | 'lean' | 'tilt';\n}) {\n    const angles = {\n        left: 'sm:[transform:perspective(2400px)_rotateY(3deg)]',\n        right: 'sm:[transform:perspective(2400px)_rotateY(-3deg)]',\n        lean: 'sm:[transform:perspective(2600px)_rotateX(4deg)]',\n        tilt: 'sm:[transform:perspective(1600px)_rotateY(-6deg)_rotateX(3deg)]',\n        flat: '',\n    } as const;\n\n    return <div className={`transition-transform duration-700 ${angles[angle]}`}>{children}</div>;\n}\n\n/** Fades and lifts its content into place as it scrolls into view. */\nexport function Reveal({ children }: { children: ReactNode }) {\n    return <div className=\"lar-reveal\">{children}</div>;\n}\n\n/** Shows the full composition on wider screens and a readable close-up on phones. */\nexport function ResponsiveMedia({ wide, narrow }: { wide: ReactNode; narrow: ReactNode }) {\n    return (\n        <>\n            <div className=\"hidden sm:block\">{wide}</div>\n            <div className=\"sm:hidden\">{narrow}</div>\n        </>\n    );\n}\n"],"mappings":"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"}