@franco_roura/module-01 0.0.0-stage → 1.0.0

package/dist/components/hud.js

@@ -0,0 +1,108 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/hud.tsx
+/** 12px plus-mark used as a registration mark on corners and frames. Decorative. */
+function Crosshair({ tone, className, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		viewBox: "0 0 12 12",
+		className: cn("size-3 shrink-0", tone === "signal" ? "text-signal-ink" : "text-hud-mark", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M6 0v12M0 6h12",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			fill: "none"
+		}), /* @__PURE__ */ jsx("circle", {
+			cx: "6",
+			cy: "6",
+			r: "2.5",
+			stroke: "currentColor",
+			strokeWidth: "1.25",
+			fill: "none"
+		})]
+	});
+}
+/** Mono overline: signal code chip, label, a seam rule and an optional end marker. */
+function HudLabel({ code, end, rule = true, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("hud flex items-center gap-3 text-ink-soft", className),
+		...props,
+		children: [
+			code && /* @__PURE__ */ jsx("span", {
+				className: "rounded-xs bg-signal px-1.5 py-0.5 text-ink",
+				children: code
+			}),
+			/* @__PURE__ */ jsx("span", { children }),
+			rule && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "h-px min-w-6 flex-1 bg-seam"
+			}),
+			end !== void 0 && /* @__PURE__ */ jsx("span", { children: end })
+		]
+	});
+}
+/** Measurement-tape strip: major ticks every 40px, minor every 8px. Decorative. */
+function TickRuler({ labels, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: cn("text-hud-mark", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "h-3.5",
+			style: {
+				backgroundImage: "repeating-linear-gradient(90deg, var(--color-hud-mark) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--color-seam) 0 1px, transparent 1px 8px)",
+				backgroundSize: "100% 14px, 100% 7px",
+				backgroundRepeat: "no-repeat"
+			}
+		}), labels && labels.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "hud-sm mt-0.5 flex justify-between",
+			children: labels.map((l) => /* @__PURE__ */ jsx("span", { children: l }, l))
+		})]
+	});
+}
+/** LED dot with a word next to it. Color never carries the meaning alone. */
+function StatusLed({ tone = "on", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("hud inline-flex items-center gap-2 text-ink", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("size-2 shrink-0 rounded-full", tone === "on" && "bg-led-on shadow-[0_0_0_3px_rgba(31,164,90,0.18)]", tone === "signal" && "bg-signal shadow-[0_0_0_3px_var(--color-signal-tint)]", tone === "off" && "bg-seam")
+		}), children]
+	});
+}
+/** Pegboard slots: the product grill. Decorative. */
+function Grill({ count = 6, slotWidth, gap, tone, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("flex flex-wrap gap-2.5", className),
+		style: gap ? { gap } : void 0,
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("span", {
+			style: slotWidth ? { width: slotWidth } : void 0,
+			className: cn("h-2.5 w-9 rounded-full", tone === "on-signal" ? "bg-signal-shade shadow-[inset_0_2px_4px_rgba(0,0,0,0.18)]" : tone === "signal" ? "bg-signal shadow-[inset_0_2px_4px_rgba(0,0,0,0.14)]" : "bg-shell-recess shadow-press")
+		}, i))
+	});
+}
+/** Section heading: HUD label with code above a Michroma title and an optional aside. */
+function SectionHeader({ title, code, label, aside, ruler = false, as: Tag = "h1", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-3", className),
+		children: [
+			(code || label) && /* @__PURE__ */ jsx(HudLabel, {
+				code,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-end justify-between gap-4",
+				children: [/* @__PURE__ */ jsx(Tag, {
+					className: "font-display text-display-md text-ink sm:text-display-lg",
+					children: title
+				}), aside]
+			}),
+			ruler && /* @__PURE__ */ jsx(TickRuler, {})
+		]
+	});
+}
+export { Crosshair, Grill, HudLabel, SectionHeader, StatusLed, TickRuler };
+
+//# sourceMappingURL=hud.js.map

package/dist/components/hud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hud.js","names":[],"sources":["../../src/components/hud.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport type * as React from \"react\";\n\n/** 12px plus-mark used as a registration mark on corners and frames. Decorative. */\nexport function Crosshair({\n  tone,\n  className,\n  ...props\n}: React.ComponentProps<\"svg\"> & { tone?: \"signal\" }) {\n  return (\n    <svg\n      aria-hidden\n      viewBox=\"0 0 12 12\"\n      className={cn(\n        \"size-3 shrink-0\",\n        tone === \"signal\" ? \"text-signal-ink\" : \"text-hud-mark\",\n        className,\n      )}\n      {...props}\n    >\n      <path d=\"M6 0v12M0 6h12\" stroke=\"currentColor\" strokeWidth=\"1.25\" fill=\"none\" />\n      <circle cx=\"6\" cy=\"6\" r=\"2.5\" stroke=\"currentColor\" strokeWidth=\"1.25\" fill=\"none\" />\n    </svg>\n  );\n}\n\n/** Mono overline: signal code chip, label, a seam rule and an optional end marker. */\nexport function HudLabel({\n  code,\n  end,\n  rule = true,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { code?: string; end?: React.ReactNode; rule?: boolean }) {\n  return (\n    <div className={cn(\"hud flex items-center gap-3 text-ink-soft\", className)} {...props}>\n      {code && <span className=\"rounded-xs bg-signal px-1.5 py-0.5 text-ink\">{code}</span>}\n      <span>{children}</span>\n      {rule && <span aria-hidden className=\"h-px min-w-6 flex-1 bg-seam\" />}\n      {end !== undefined && <span>{end}</span>}\n    </div>\n  );\n}\n\n/** Measurement-tape strip: major ticks every 40px, minor every 8px. Decorative. */\nexport function TickRuler({ labels, className }: { labels?: string[]; className?: string }) {\n  return (\n    <div aria-hidden className={cn(\"text-hud-mark\", className)}>\n      <div\n        className=\"h-3.5\"\n        style={{\n          backgroundImage:\n            \"repeating-linear-gradient(90deg, var(--color-hud-mark) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--color-seam) 0 1px, transparent 1px 8px)\",\n          backgroundSize: \"100% 14px, 100% 7px\",\n          backgroundRepeat: \"no-repeat\",\n        }}\n      />\n      {labels && labels.length > 0 && (\n        <div className=\"hud-sm mt-0.5 flex justify-between\">\n          {labels.map((l) => (\n            <span key={l}>{l}</span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** LED dot with a word next to it. Color never carries the meaning alone. */\nexport function StatusLed({\n  tone = \"on\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & { tone?: \"on\" | \"signal\" | \"off\" }) {\n  return (\n    <span className={cn(\"hud inline-flex items-center gap-2 text-ink\", className)} {...props}>\n      <span\n        aria-hidden\n        className={cn(\n          \"size-2 shrink-0 rounded-full\",\n          tone === \"on\" && \"bg-led-on shadow-[0_0_0_3px_rgba(31,164,90,0.18)]\",\n          tone === \"signal\" && \"bg-signal shadow-[0_0_0_3px_var(--color-signal-tint)]\",\n          tone === \"off\" && \"bg-seam\",\n        )}\n      />\n      {children}\n    </span>\n  );\n}\n\n/** Pegboard slots: the product grill. Decorative. */\nexport function Grill({\n  count = 6,\n  slotWidth,\n  gap,\n  tone,\n  className,\n}: {\n  count?: number;\n  /** Slot width in px. Defaults to 36. */\n  slotWidth?: number;\n  /** Gap between slots as a CSS length. Defaults to 10px. */\n  gap?: string;\n  tone?: \"signal\" | \"on-signal\";\n  className?: string;\n}) {\n  return (\n    <div\n      aria-hidden\n      className={cn(\"flex flex-wrap gap-2.5\", className)}\n      style={gap ? { gap } : undefined}\n    >\n      {Array.from({ length: count }, (_, i) => (\n        <span\n          key={i}\n          style={slotWidth ? { width: slotWidth } : undefined}\n          className={cn(\n            \"h-2.5 w-9 rounded-full\",\n            tone === \"on-signal\"\n              ? \"bg-signal-shade shadow-[inset_0_2px_4px_rgba(0,0,0,0.18)]\"\n              : tone === \"signal\"\n                ? \"bg-signal shadow-[inset_0_2px_4px_rgba(0,0,0,0.14)]\"\n                : \"bg-shell-recess shadow-press\",\n          )}\n        />\n      ))}\n    </div>\n  );\n}\n\n/** Section heading: HUD label with code above a Michroma title and an optional aside. */\nexport function SectionHeader({\n  title,\n  code,\n  label,\n  aside,\n  ruler = false,\n  as: Tag = \"h1\",\n  className,\n}: {\n  title: React.ReactNode;\n  code?: string;\n  label?: React.ReactNode;\n  aside?: React.ReactNode;\n  ruler?: boolean;\n  as?: \"h1\" | \"h2\" | \"h3\";\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      {(code || label) && <HudLabel code={code}>{label}</HudLabel>}\n      <div className=\"flex flex-wrap items-end justify-between gap-4\">\n        <Tag className=\"font-display text-display-md text-ink sm:text-display-lg\">{title}</Tag>\n        {aside}\n      </div>\n      {ruler && <TickRuler />}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,UAAU,EACxB,MACA,WACA,GAAG,SACiD;CACpD,OACE,qBAAC,OAAD;EACE,eAAA;EACA,SAAQ;EACR,WAAW,GACT,mBACA,SAAS,WAAW,oBAAoB,iBACxC,SACF;EACA,GAAI;EARN,UAAA,CAUE,oBAAC,QAAD;GAAM,GAAE;GAAiB,QAAO;GAAe,aAAY;GAAO,MAAK;EAAQ,CAAA,GAC/E,oBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAI,GAAE;GAAM,QAAO;GAAe,aAAY;GAAO,MAAK;EAAQ,CAAA,CACjF;;AAET;;AAGA,SAAgB,SAAS,EACvB,MACA,KACA,OAAO,MACP,WACA,UACA,GAAG,SACsF;CACzF,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,6CAA6C,SAAS;EAAG,GAAI;EAAhF,UAAA;GACG,QAAQ,oBAAC,QAAD;IAAM,WAAU;IAA+C,UAAA;GAAW,CAAA;GACnF,oBAAC,QAAD,EAAO,SAAe,CAAA;GACrB,QAAQ,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;GAA+B,CAAA;GACnE,QAAQ,KAAA,KAAa,oBAAC,QAAD,EAAA,UAAO,IAAU,CAAA;EACpC;;AAET;;AAGA,SAAgB,UAAU,EAAE,QAAQ,aAAwD;CAC1F,OACE,qBAAC,OAAD;EAAK,eAAA;EAAY,WAAW,GAAG,iBAAiB,SAAS;EAAzD,UAAA,CACE,oBAAC,OAAD;GACE,WAAU;GACV,OAAO;IACL,iBACE;IACF,gBAAgB;IAChB,kBAAkB;GACpB;EACD,CAAA,GACA,UAAU,OAAO,SAAS,KACzB,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,OAAO,KAAK,MACX,oBAAC,QAAD,EAAA,UAAe,EAAQ,GAAZ,CAAY,CACxB;EACE,CAAA,CAEJ;;AAET;;AAGA,SAAgB,UAAU,EACxB,OAAO,MACP,WACA,UACA,GAAG,SACiE;CACpE,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,+CAA+C,SAAS;EAAG,GAAI;EAAnF,UAAA,CACE,oBAAC,QAAD;GACE,eAAA;GACA,WAAW,GACT,gCACA,SAAS,QAAQ,qDACjB,SAAS,YAAY,yDACrB,SAAS,SAAS,SACpB;EACD,CAAA,GACA,QACG;;AAEV;;AAGA,SAAgB,MAAM,EACpB,QAAQ,GACR,WACA,KACA,MACA,aASC;CACD,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,GAAG,0BAA0B,SAAS;EACjD,OAAO,MAAM,EAAE,IAAI,IAAI,KAAA;EAEtB,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MACjC,oBAAC,QAAD;GAEE,OAAO,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA;GAC1C,WAAW,GACT,0BACA,SAAS,cACL,8DACA,SAAS,WACP,wDACA,8BACR;EACD,GAVM,CAUN,CACF;CACE,CAAA;AAET;;AAGA,SAAgB,cAAc,EAC5B,OACA,MACA,OACA,OACA,QAAQ,OACR,IAAI,MAAM,MACV,aASC;CACD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAnD,UAAA;IACI,QAAQ,UAAU,oBAAC,UAAD;IAAgB;IAAO,UAAA;GAAgB,CAAA;GAC3D,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,KAAD;KAAK,WAAU;KAA4D,UAAA;IAAW,CAAA,GACrF,KACE;;GACJ,SAAS,oBAAC,WAAD,CAAY,CAAA;EACnB;;AAET"}

package/dist/components/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn("h-control-height w-full min-w-0 rounded-md border border-transparent bg-shell-recess px-4 text-body-md text-ink shadow-press transition-[box-shadow,border-color] outline-none placeholder:text-ink-soft disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label file:text-ink", "focus-visible:border-signal-ink focus-visible:ring-[3px] focus-visible:ring-ring/30", "aria-invalid:border-danger aria-invalid:bg-danger-tint aria-invalid:ring-danger/20", className),
+		...props
+	});
+}
+export { Input };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport type * as React from \"react\";\n\n// Inputs are sunken wells: shell-recess fill, pressed shadow, radius-md.\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-control-height w-full min-w-0 rounded-md border border-transparent bg-shell-recess px-4 text-body-md text-ink shadow-press transition-[box-shadow,border-color] outline-none placeholder:text-ink-soft disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        \"file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label file:text-ink\",\n        \"focus-visible:border-signal-ink focus-visible:ring-[3px] focus-visible:ring-ring/30\",\n        \"aria-invalid:border-danger aria-invalid:bg-danger-tint aria-invalid:ring-danger/20\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"],"mappings":";;;AAIA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,yRACA,6FACA,uFACA,sFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/label.d.ts

@@ -0,0 +1,5 @@
+import { Label } from "radix-ui";
+import * as React from "react";
+declare function Label$1({ className, ...props }: React.ComponentProps<typeof Label.Root>): React.JSX.Element;
+export { Label$1 as Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.js

@@ -0,0 +1,15 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Label } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+// src/components/label.tsx
+function Label$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label.Root, {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+}
+export { Label$1 as Label };
+
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":["Label","LabelPrimitive"],"sources":["../../src/components/label.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAMA,SAASA,QAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAACC,MAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,uNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/media-card.d.ts

@@ -0,0 +1,29 @@
+import { TagProps } from "./tag.js";
+import * as React from "react";
+export type MediaCardLink = {
+  label: string;
+  href: string;
+  target?: string;
+};
+export type MediaCardProps = {
+  title: React.ReactNode;
+  /** Entry code on the media frame, e.g. "C-01". */
+  code?: string;
+  image?: string;
+  imageAlt?: string;
+  /** What it is, in HUD type: "Product", "Case study". */
+  kind?: string;
+  /** "Live" gets a green LED; anything else is a tint tag unless `statusTone` says otherwise. */
+  status?: string;
+  statusTone?: TagProps["tone"];
+  description?: React.ReactNode;
+  tags?: string[];
+  links?: MediaCardLink[];
+  /** Left offset of the hinge tab. Vary it from card to card. */
+  hingeLeft?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+/** A product, project or story as a product shot: media on a studio backdrop, then kind, title, tags and links. */
+export declare function MediaCard({ title, code, image, imageAlt, kind, status, statusTone, description, tags, links, hingeLeft, className, style }: MediaCardProps): React.JSX.Element;
+//# sourceMappingURL=media-card.d.ts.map

package/dist/components/media-card.js

@@ -0,0 +1,80 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Crosshair } from "./hud.js";
+import { HingeTab } from "./panel.js";
+import { Tag } from "./tag.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/media-card.tsx
+/** A product, project or story as a product shot: media on a studio backdrop, then kind, title, tags and links. */
+function MediaCard({ title, code, image, imageAlt = "", kind, status, statusTone, description, tags, links, hingeLeft = "28px", className, style }) {
+	const live = status?.toLowerCase() === "live";
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("relative drop-float", className),
+		style,
+		children: [/* @__PURE__ */ jsx(HingeTab, { style: { left: hingeLeft } }), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex h-full flex-col gap-3 rounded-lg bg-shell notch-md px-3.5 pt-3.5 pb-6",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative aspect-[16/10] overflow-hidden rounded-md bg-studio",
+					children: [
+						image && /* @__PURE__ */ jsx("img", {
+							src: image,
+							alt: imageAlt,
+							className: "block size-full object-cover"
+						}),
+						/* @__PURE__ */ jsx(Crosshair, { className: "absolute top-3 left-3 text-ink/45" }),
+						/* @__PURE__ */ jsx(Crosshair, { className: "absolute right-3 bottom-3 text-ink/45" }),
+						code && /* @__PURE__ */ jsx("span", {
+							className: "hud-sm absolute top-3 right-[30px] text-ink",
+							children: code
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between px-2.5 pt-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "hud text-ink-soft",
+						children: kind
+					}), status && /* @__PURE__ */ jsx(Tag, {
+						tone: statusTone ?? (live ? void 0 : "tint"),
+						led: live,
+						children: status
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 px-2.5",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-display text-display-sm text-ink",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "text-body-sm text-ink-soft",
+						children: description
+					})]
+				}),
+				tags && tags.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1.5 px-2.5",
+					children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, {
+						tone: "outline",
+						children: tag
+					}, tag))
+				}),
+				links && links.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mt-auto flex gap-2 px-1",
+					children: links.map((link) => /* @__PURE__ */ jsx(Button, {
+						variant: "bracket",
+						asChild: true,
+						children: /* @__PURE__ */ jsx("a", {
+							href: link.href,
+							target: link.target,
+							rel: link.target === "_blank" ? "noopener noreferrer" : void 0,
+							children: link.label
+						})
+					}, link.label))
+				})
+			]
+		})]
+	});
+}
+export { MediaCard };
+
+//# sourceMappingURL=media-card.js.map

package/dist/components/media-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-card.js","names":[],"sources":["../../src/components/media-card.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { Crosshair } from \"./hud\";\nimport { HingeTab } from \"./panel\";\nimport { Tag, type TagProps } from \"./tag\";\n\nexport type MediaCardLink = {\n  label: string;\n  href: string;\n  target?: string;\n};\n\nexport type MediaCardProps = {\n  title: React.ReactNode;\n  /** Entry code on the media frame, e.g. \"C-01\". */\n  code?: string;\n  image?: string;\n  imageAlt?: string;\n  /** What it is, in HUD type: \"Product\", \"Case study\". */\n  kind?: string;\n  /** \"Live\" gets a green LED; anything else is a tint tag unless `statusTone` says otherwise. */\n  status?: string;\n  statusTone?: TagProps[\"tone\"];\n  description?: React.ReactNode;\n  tags?: string[];\n  links?: MediaCardLink[];\n  /** Left offset of the hinge tab. Vary it from card to card. */\n  hingeLeft?: string;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\n/** A product, project or story as a product shot: media on a studio backdrop, then kind, title, tags and links. */\nexport function MediaCard({\n  title,\n  code,\n  image,\n  imageAlt = \"\",\n  kind,\n  status,\n  statusTone,\n  description,\n  tags,\n  links,\n  hingeLeft = \"28px\",\n  className,\n  style,\n}: MediaCardProps) {\n  const live = status?.toLowerCase() === \"live\";\n  return (\n    <article className={cn(\"relative drop-float\", className)} style={style}>\n      <HingeTab style={{ left: hingeLeft }} />\n      <div className=\"relative flex h-full flex-col gap-3 rounded-lg bg-shell notch-md px-3.5 pt-3.5 pb-6\">\n        <div className=\"relative aspect-[16/10] overflow-hidden rounded-md bg-studio\">\n          {image && <img src={image} alt={imageAlt} className=\"block size-full object-cover\" />}\n          <Crosshair className=\"absolute top-3 left-3 text-ink/45\" />\n          <Crosshair className=\"absolute right-3 bottom-3 text-ink/45\" />\n          {code && <span className=\"hud-sm absolute top-3 right-[30px] text-ink\">{code}</span>}\n        </div>\n        <div className=\"flex items-center justify-between px-2.5 pt-2\">\n          <span className=\"hud text-ink-soft\">{kind}</span>\n          {status && (\n            <Tag tone={statusTone ?? (live ? undefined : \"tint\")} led={live}>\n              {status}\n            </Tag>\n          )}\n        </div>\n        <div className=\"flex flex-col gap-2 px-2.5\">\n          <h3 className=\"font-display text-display-sm text-ink\">{title}</h3>\n          {description && <p className=\"text-body-sm text-ink-soft\">{description}</p>}\n        </div>\n        {tags && tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1.5 px-2.5\">\n            {tags.map((tag) => (\n              <Tag key={tag} tone=\"outline\">\n                {tag}\n              </Tag>\n            ))}\n          </div>\n        )}\n        {links && links.length > 0 && (\n          <div className=\"mt-auto flex gap-2 px-1\">\n            {links.map((link) => (\n              <Button key={link.label} variant=\"bracket\" asChild>\n                <a\n                  href={link.href}\n                  target={link.target}\n                  rel={link.target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                >\n                  {link.label}\n                </a>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;AAkCA,SAAgB,UAAU,EACxB,OACA,MACA,OACA,WAAW,IACX,MACA,QACA,YACA,aACA,MACA,OACA,YAAY,QACZ,WACA,SACiB;CACjB,MAAM,OAAO,QAAQ,YAAY,MAAM;CACvC,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,uBAAuB,SAAS;EAAU;EAAjE,UAAA,CACE,oBAAC,UAAD,EAAU,OAAO,EAAE,MAAM,UAAU,EAAI,CAAA,GACvC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACG,SAAS,oBAAC,OAAD;OAAK,KAAK;OAAO,KAAK;OAAU,WAAU;MAAgC,CAAA;MACpF,oBAAC,WAAD,EAAW,WAAU,oCAAqC,CAAA;MAC1D,oBAAC,WAAD,EAAW,WAAU,wCAAyC,CAAA;MAC7D,QAAQ,oBAAC,QAAD;OAAM,WAAU;OAA+C,UAAA;MAAW,CAAA;KAChF;;IACL,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MAAqB,UAAA;KAAW,CAAA,GAC/C,UACC,oBAAC,KAAD;MAAK,MAAM,eAAe,OAAO,KAAA,IAAY;MAAS,KAAK;MACxD,UAAA;KACE,CAAA,CAEJ;;IACL,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAyC,UAAA;KAAU,CAAA,GAChE,eAAe,oBAAC,KAAD;MAAG,WAAU;MAA8B,UAAA;KAAe,CAAA,CACvE;;IACJ,QAAQ,KAAK,SAAS,KACrB,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,KAAK,KAAK,QACT,oBAAC,KAAD;MAAe,MAAK;MACjB,UAAA;KACE,GAFK,GAEL,CACN;IACE,CAAA;IAEN,SAAS,MAAM,SAAS,KACvB,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,MAAM,KAAK,SACV,oBAAC,QAAD;MAAyB,SAAQ;MAAU,SAAA;MACzC,UAAA,oBAAC,KAAD;OACE,MAAM,KAAK;OACX,QAAQ,KAAK;OACb,KAAK,KAAK,WAAW,WAAW,wBAAwB,KAAA;OAEvD,UAAA,KAAK;MACL,CAAA;KACG,GARK,KAAK,KAQV,CACT;IACE,CAAA;GAEJ;EACE,CAAA,CAAA;;AAEb"}

package/dist/components/money-input.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * Decimal amount input with the currency code as a suffix. The value is the raw string the user
+ * typed; parse it with `parseAmount` from lib/money. On phones the figure is amount-lg: inputs under
+ * 16px make mobile browsers zoom in on focus.
+ */
+export declare function MoneyInput({ currency, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
+  currency: string;
+}): React.JSX.Element;
+//# sourceMappingURL=money-input.d.ts.map

package/dist/components/money-input.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/money-input.tsx
+/**
+* Decimal amount input with the currency code as a suffix. The value is the raw string the user
+* typed; parse it with `parseAmount` from lib/money. On phones the figure is amount-lg: inputs under
+* 16px make mobile browsers zoom in on focus.
+*/
+function MoneyInput({ currency, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "money-input",
+		"data-fault-part": true,
+		className: cn("flex h-control-height w-full items-center rounded-md border border-transparent bg-shell-recess shadow-press transition-[box-shadow,border-color] focus-within:border-signal-ink focus-within:ring-[3px] focus-within:ring-ring/30 has-[[aria-invalid=true]]:border-danger has-[[aria-invalid=true]]:bg-danger-tint", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			inputMode: "decimal",
+			autoComplete: "off",
+			placeholder: "0.00",
+			className: "tabular h-full min-w-0 flex-1 bg-transparent pl-4 text-right text-amount-md text-ink outline-none max-sm:text-amount-lg placeholder:text-ink-soft disabled:opacity-50",
+			...props
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hud px-3 text-ink-soft",
+			children: currency
+		})]
+	});
+}
+export { MoneyInput };
+
+//# sourceMappingURL=money-input.js.map

package/dist/components/money-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"money-input.js","names":[],"sources":["../../src/components/money-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport type * as React from \"react\";\n\n/**\n * Decimal amount input with the currency code as a suffix. The value is the raw string the user\n * typed; parse it with `parseAmount` from lib/money. On phones the figure is amount-lg: inputs under\n * 16px make mobile browsers zoom in on focus.\n */\nexport function MoneyInput({\n  currency,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"type\"> & { currency: string }) {\n  return (\n    <div\n      data-slot=\"money-input\"\n      data-fault-part\n      className={cn(\n        \"flex h-control-height w-full items-center rounded-md border border-transparent bg-shell-recess shadow-press transition-[box-shadow,border-color] focus-within:border-signal-ink focus-within:ring-[3px] focus-within:ring-ring/30 has-[[aria-invalid=true]]:border-danger has-[[aria-invalid=true]]:bg-danger-tint\",\n        className,\n      )}\n    >\n      <input\n        type=\"text\"\n        inputMode=\"decimal\"\n        autoComplete=\"off\"\n        placeholder=\"0.00\"\n        className=\"tabular h-full min-w-0 flex-1 bg-transparent pl-4 text-right text-amount-md text-ink outline-none max-sm:text-amount-lg placeholder:text-ink-soft disabled:opacity-50\"\n        {...props}\n      />\n      <span className=\"hud px-3 text-ink-soft\">{currency}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,WAAW,EACzB,UACA,WACA,GAAG,SACkE;CACrE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,mBAAA;EACA,WAAW,GACT,sTACA,SACF;EANF,UAAA,CAQE,oBAAC,SAAD;GACE,MAAK;GACL,WAAU;GACV,cAAa;GACb,aAAY;GACZ,WAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAe,CAAA,CACtD;;AAET"}

package/dist/components/multi-combobox.d.ts

@@ -0,0 +1,27 @@
+import { ComboboxGroup } from "./combobox.js";
+/**
+ * Searchable multi-choice picker where nothing selected means "all". Stays open while you
+ * toggle options; Escape or a click outside closes it back onto the trigger, and Tab moves on.
+ * Typing on the focused trigger opens it with that text as the search, like Combobox.
+ */
+export declare function MultiCombobox<T>({ id, value, onChange, options, groups, getKey, getSearchText, renderOption, allLabel, noun, searchPlaceholder, emptyText, invalid, disabled, className, contentClassName }: {
+  id?: string;
+  value: string[];
+  onChange: (keys: string[]) => void;
+  options?: T[];
+  groups?: ComboboxGroup<T>[];
+  getKey: (option: T) => string;
+  getSearchText?: (option: T) => string;
+  renderOption: (option: T) => React.ReactNode;
+  /** Trigger text when nothing is selected, e.g. "All wallets". */
+  allLabel: string;
+  /** Plural noun for the count, e.g. "wallets" → "3 wallets". */
+  noun: string;
+  searchPlaceholder?: string;
+  emptyText?: React.ReactNode;
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+  contentClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=multi-combobox.d.ts.map

package/dist/components/multi-combobox.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+// src/components/multi-combobox.tsx
+/**
+* Searchable multi-choice picker where nothing selected means "all". Stays open while you
+* toggle options; Escape or a click outside closes it back onto the trigger, and Tab moves on.
+* Typing on the focused trigger opens it with that text as the search, like Combobox.
+*/
+function MultiCombobox({ id, value, onChange, options, groups, getKey, getSearchText, renderOption, allLabel, noun, searchPlaceholder = "Search…", emptyText = "Nothing found.", invalid, disabled, className, contentClassName }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const sections = groups ?? [{ options: options ?? [] }];
+	const all = sections.flatMap((g) => g.options);
+	const search = getSearchText ?? getKey;
+	const only = value.length === 1 ? all.find((o) => getKey(o) === value[0]) : void 0;
+	const toggle = (k) => onChange(value.includes(k) ? value.filter((v) => v !== k) : [...value, k]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => {
+			if (next) setQuery("");
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				id,
+				type: "button",
+				variant: "outline",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-invalid": invalid || void 0,
+				disabled,
+				className: cn("w-full justify-between px-3", className),
+				onKeyDown: (e) => {
+					if (!open && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key !== " ") {
+						e.preventDefault();
+						setQuery(e.key);
+						setOpen(true);
+					}
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-2",
+					children: value.length === 0 ? /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: allLabel
+					}) : only ? renderOption(only) : /* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: [
+							value.length,
+							" ",
+							noun
+						]
+					})
+				}), /* @__PURE__ */ jsx(ChevronsUpDown, {
+					className: "size-4 shrink-0 text-ink-soft",
+					strokeWidth: 1.25
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: cn("w-(--radix-popover-trigger-width) min-w-64 p-0", contentClassName),
+			children: [/* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+				placeholder: searchPlaceholder,
+				value: query,
+				onValueChange: setQuery
+			}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }), sections.map((g, i) => /* @__PURE__ */ jsx(CommandGroup, {
+				heading: g.heading,
+				children: g.options.map((o) => {
+					const k = getKey(o);
+					return /* @__PURE__ */ jsxs(CommandItem, {
+						value: `${search(o)} ${k}`,
+						onSelect: () => toggle(k),
+						"aria-selected": value.includes(k),
+						children: [renderOption(o), value.includes(k) && /* @__PURE__ */ jsx(Check, {
+							className: "ml-auto size-4",
+							strokeWidth: 1.25
+						})]
+					}, k);
+				})
+			}, g.heading ?? i))] })] }), value.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-seam p-2",
+				children: /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "xs",
+					onClick: () => onChange([]),
+					children: ["Use ", allLabel.toLowerCase()]
+				})
+			})]
+		})]
+	});
+}
+export { MultiCombobox };
+
+//# sourceMappingURL=multi-combobox.js.map

package/dist/components/multi-combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-combobox.js","names":[],"sources":["../../src/components/multi-combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"./button\";\nimport type { ComboboxGroup } from \"./combobox\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\n/**\n * Searchable multi-choice picker where nothing selected means \"all\". Stays open while you\n * toggle options; Escape or a click outside closes it back onto the trigger, and Tab moves on.\n * Typing on the focused trigger opens it with that text as the search, like Combobox.\n */\nexport function MultiCombobox<T>({\n  id,\n  value,\n  onChange,\n  options,\n  groups,\n  getKey,\n  getSearchText,\n  renderOption,\n  allLabel,\n  noun,\n  searchPlaceholder = \"Search…\",\n  emptyText = \"Nothing found.\",\n  invalid,\n  disabled,\n  className,\n  contentClassName,\n}: {\n  id?: string;\n  value: string[];\n  onChange: (keys: string[]) => void;\n  options?: T[];\n  groups?: ComboboxGroup<T>[];\n  getKey: (option: T) => string;\n  getSearchText?: (option: T) => string;\n  renderOption: (option: T) => React.ReactNode;\n  /** Trigger text when nothing is selected, e.g. \"All wallets\". */\n  allLabel: string;\n  /** Plural noun for the count, e.g. \"wallets\" → \"3 wallets\". */\n  noun: string;\n  searchPlaceholder?: string;\n  emptyText?: React.ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  className?: string;\n  contentClassName?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const sections: ComboboxGroup<T>[] = groups ?? [{ options: options ?? [] }];\n  const all = sections.flatMap((g) => g.options);\n  const search = getSearchText ?? getKey;\n  const only = value.length === 1 ? all.find((o) => getKey(o) === value[0]) : undefined;\n  const toggle = (k: string) =>\n    onChange(value.includes(k) ? value.filter((v) => v !== k) : [...value, k]);\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        if (next) setQuery(\"\");\n        setOpen(next);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          id={id}\n          type=\"button\"\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          className={cn(\"w-full justify-between px-3\", className)}\n          onKeyDown={(e) => {\n            if (\n              !open &&\n              e.key.length === 1 &&\n              !e.ctrlKey &&\n              !e.metaKey &&\n              !e.altKey &&\n              e.key !== \" \"\n            ) {\n              e.preventDefault();\n              setQuery(e.key);\n              setOpen(true);\n            }\n          }}\n        >\n          <span className=\"flex min-w-0 items-center gap-2\">\n            {value.length === 0 ? (\n              <span className=\"truncate\">{allLabel}</span>\n            ) : only ? (\n              renderOption(only)\n            ) : (\n              <span className=\"truncate\">\n                {value.length} {noun}\n              </span>\n            )}\n          </span>\n          <ChevronsUpDown className=\"size-4 shrink-0 text-ink-soft\" strokeWidth={1.25} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className={cn(\"w-(--radix-popover-trigger-width) min-w-64 p-0\", contentClassName)}\n      >\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} value={query} onValueChange={setQuery} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            {sections.map((g, i) => (\n              <CommandGroup key={g.heading ?? i} heading={g.heading}>\n                {g.options.map((o) => {\n                  const k = getKey(o);\n                  return (\n                    <CommandItem\n                      key={k}\n                      value={`${search(o)} ${k}`}\n                      onSelect={() => toggle(k)}\n                      aria-selected={value.includes(k)}\n                    >\n                      {renderOption(o)}\n                      {value.includes(k) && <Check className=\"ml-auto size-4\" strokeWidth={1.25} />}\n                    </CommandItem>\n                  );\n                })}\n              </CommandGroup>\n            ))}\n          </CommandList>\n        </Command>\n        {value.length > 0 && (\n          <div className=\"border-t border-seam p-2\">\n            <Button type=\"button\" variant=\"ghost\" size=\"xs\" onClick={() => onChange([])}>\n              Use {allLabel.toLowerCase()}\n            </Button>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/components/nav-bar.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type NavItem = {
+  label: string;
+  href: string;
+  active?: boolean;
+  /** Hidden on phones, e.g. a link the user menu also offers. */
+  desktopOnly?: boolean;
+};
+/**
+ * Floating frosted stadium bar: brand on the left, numbered links, an end slot (user menu).
+ * `renderLink` lets the app use its router's Link component.
+ */
+export declare function NavBar({ brand, serial, links, end, renderLink, className }: {
+  brand: React.ReactNode;
+  serial?: React.ReactNode;
+  links: NavItem[];
+  end?: React.ReactNode;
+  renderLink?: (item: NavItem, props: React.ComponentProps<"a">) => React.ReactNode;
+  className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=nav-bar.d.ts.map

package/dist/components/nav-bar.js

@@ -0,0 +1,44 @@
+import { cn } from "../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+// src/components/nav-bar.tsx
+/**
+* Floating frosted stadium bar: brand on the left, numbered links, an end slot (user menu).
+* `renderLink` lets the app use its router's Link component.
+*/
+function NavBar({ brand, serial, links, end, renderLink = (item, props) => /* @__PURE__ */ jsx("a", {
+	href: item.href,
+	...props
+}), className }) {
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": "Main",
+		className: cn("glass flex h-nav-height items-center gap-2 rounded-full pr-2.5 pl-4 sm:gap-6 sm:pl-6", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-display text-display-sm whitespace-nowrap text-ink",
+					children: brand
+				}), serial !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "hud-sm hidden text-ink-soft sm:block",
+					children: serial
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ml-auto flex min-w-0 items-center sm:gap-1",
+				children: links.map((item, i) => /* @__PURE__ */ jsx(Fragment$1, { children: renderLink(item, {
+					"aria-current": item.active ? "page" : void 0,
+					className: cn("inline-flex items-center gap-1.5 rounded-full px-2 py-2 text-label whitespace-nowrap text-ink hover:bg-shell-recess sm:px-3.5", item.active && "text-signal-ink", item.desktopOnly && "max-sm:hidden"),
+					children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "hud-sm hidden text-ink-soft md:inline",
+						children: String(i + 1).padStart(2, "0")
+					}), item.label] })
+				}) }, item.href))
+			}),
+			end
+		]
+	});
+}
+export { NavBar };
+
+//# sourceMappingURL=nav-bar.js.map

package/dist/components/nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar.js","names":["Fragment"],"sources":["../../src/components/nav-bar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport type * as React from \"react\";\nimport { Fragment } from \"react\";\n\nexport type NavItem = {\n  label: string;\n  href: string;\n  active?: boolean;\n  /** Hidden on phones, e.g. a link the user menu also offers. */\n  desktopOnly?: boolean;\n};\n\n/**\n * Floating frosted stadium bar: brand on the left, numbered links, an end slot (user menu).\n * `renderLink` lets the app use its router's Link component.\n */\nexport function NavBar({\n  brand,\n  serial,\n  links,\n  end,\n  renderLink = (item, props) => <a href={item.href} {...props} />,\n  className,\n}: {\n  brand: React.ReactNode;\n  serial?: React.ReactNode;\n  links: NavItem[];\n  end?: React.ReactNode;\n  renderLink?: (item: NavItem, props: React.ComponentProps<\"a\">) => React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <nav\n      aria-label=\"Main\"\n      className={cn(\n        \"glass flex h-nav-height items-center gap-2 rounded-full pr-2.5 pl-4 sm:gap-6 sm:pl-6\",\n        className,\n      )}\n    >\n      <div className=\"flex shrink-0 flex-col gap-0.5\">\n        <span className=\"font-display text-display-sm whitespace-nowrap text-ink\">{brand}</span>\n        {serial !== undefined && (\n          <span className=\"hud-sm hidden text-ink-soft sm:block\">{serial}</span>\n        )}\n      </div>\n      <div className=\"ml-auto flex min-w-0 items-center sm:gap-1\">\n        {links.map((item, i) => (\n          <Fragment key={item.href}>\n            {renderLink(item, {\n              \"aria-current\": item.active ? \"page\" : undefined,\n              className: cn(\n                \"inline-flex items-center gap-1.5 rounded-full px-2 py-2 text-label whitespace-nowrap text-ink hover:bg-shell-recess sm:px-3.5\",\n                item.active && \"text-signal-ink\",\n                item.desktopOnly && \"max-sm:hidden\",\n              ),\n              children: (\n                <>\n                  <span className=\"hud-sm hidden text-ink-soft md:inline\">\n                    {String(i + 1).padStart(2, \"0\")}\n                  </span>\n                  {item.label}\n                </>\n              ),\n            })}\n          </Fragment>\n        ))}\n      </div>\n      {end}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,OAAO,EACrB,OACA,QACA,OACA,KACA,cAAc,MAAM,UAAU,oBAAC,KAAD;CAAG,MAAM,KAAK;CAAM,GAAI;AAAQ,CAAA,GAC9D,aAQC;CACD,OACE,qBAAC,OAAD;EACE,cAAW;EACX,WAAW,GACT,wFACA,SACF;EALF,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAA2D,UAAA;IAAY,CAAA,GACtF,WAAW,KAAA,KACV,oBAAC,QAAD;KAAM,WAAU;KAAwC,UAAA;IAAa,CAAA,CAEpE;;GACL,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,MAAM,MAChB,oBAACA,YAAD,EAAA,UACG,WAAW,MAAM;KAChB,gBAAgB,KAAK,SAAS,SAAS,KAAA;KACvC,WAAW,GACT,iIACA,KAAK,UAAU,mBACf,KAAK,eAAe,eACtB;KACA,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,OAAO,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;KAC1B,CAAA,GACL,KAAK,KACN,EAAA,CAAA;IAEN,CAAC,EACO,GAjBK,KAAK,IAiBV,CACX;GACE,CAAA;GACJ;EACE;;AAET"}

package/dist/components/panel.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+type Notch = "sm" | "md" | "lg" | false;
+export type PanelProps = React.ComponentProps<"div"> & {
+  /** Microprint in the top-left corner, e.g. "W-01 · USD". */
+  serial?: React.ReactNode;
+  /** The one chamfered corner (top-right). */
+  notch?: Notch;
+  /** Sunken shell-recess fill instead of shell. */
+  recess?: boolean;
+  /** Registration crosshair in the bottom-right corner. */
+  cross?: boolean;
+  /** Left offset of a signal hinge tab on the top edge, e.g. "24px" or "60%". */
+  hinge?: string;
+  /** Classes for the inner body (padding, layout). */
+  bodyClassName?: string;
+};
+/**
+ * The molded white part: rounded shell, one notched corner, optional serial, crosshair and hinge.
+ * The float shadow is a drop-shadow filter on the wrapper so the notch keeps it.
+ */
+export declare function Panel({ serial, notch, recess, cross, hinge, className, bodyClassName, children, ...props }: PanelProps): React.JSX.Element;
+/** Small signal stadium sitting on a part's top edge, like a hinge. One per part. */
+export declare function HingeTab({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+/** Frosted clear plastic over color: nav bars and floating toolbars. */
+export declare function GlassPanel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export {};
+//# sourceMappingURL=panel.d.ts.map