@franco_roura/module-01 0.0.0-stage → 1.0.1

package/dist/components/dropdown-menu.js

@@ -0,0 +1,123 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DropdownMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+// src/components/dropdown-menu.tsx
+function DropdownMenu$1({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-float data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	}) });
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+	});
+}
+function DropdownMenuSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-float data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	});
+}
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../lib/utils\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-float data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-float data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n"],"mappings":"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"}

package/dist/components/field.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/** The fault LED: a small danger dot with a tint halo that blinks as it appears. */
+export declare function FaultLed({ className }: {
+  className?: string;
+}): React.JSX.Element;
+/**
+ * Announces an error to screen readers without showing a line under the control; the visible
+ * cue is the red label with its fault LED. Renders nothing without children.
+ */
+export declare function FieldError({ children }: {
+  children?: React.ReactNode;
+}): React.JSX.Element | null;
+/** Field label; when invalid it turns danger with a fault LED in front. */
+export declare function FieldLabel({ htmlFor, invalid, className, children }: {
+  htmlFor?: string;
+  invalid?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}): React.JSX.Element;
+/** Label + control + help text, stacked. Pass the control's id as `htmlFor`. */
+export declare function Field({ label, htmlFor, error, help, className, children }: {
+  label: React.ReactNode;
+  htmlFor?: string;
+  /** Turns the label red with a fault LED; the message is announced, not shown. */
+  error?: React.ReactNode;
+  help?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/field.tsx
+/** The fault LED: a small danger dot with a tint halo that blinks as it appears. */
+function FaultLed({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("led-blink inline-block size-1.5 shrink-0 rounded-full bg-danger shadow-[0_0_0_3px_var(--color-danger-tint)]", className)
+	});
+}
+/**
+* Announces an error to screen readers without showing a line under the control; the visible
+* cue is the red label with its fault LED. Renders nothing without children.
+*/
+function FieldError({ children }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("span", {
+		role: "alert",
+		className: "sr-only",
+		children
+	});
+}
+/** Field label; when invalid it turns danger with a fault LED in front. */
+function FieldLabel({ htmlFor, invalid, className, children }) {
+	return /* @__PURE__ */ jsxs(Label, {
+		htmlFor,
+		"data-invalid": invalid || void 0,
+		className: cn("text-body-sm", invalid ? "text-danger" : "text-ink-soft", className),
+		children: [invalid && /* @__PURE__ */ jsx(FaultLed, {}), children]
+	});
+}
+/** Label + control + help text, stacked. Pass the control's id as `htmlFor`. */
+function Field({ label, htmlFor, error, help, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor,
+				invalid: Boolean(error),
+				children: label
+			}),
+			children,
+			error ? /* @__PURE__ */ jsx(FieldError, { children: error }) : help ? /* @__PURE__ */ jsx("p", {
+				className: "text-body-sm text-ink-soft",
+				children: help
+			}) : null
+		]
+	});
+}
+export { FaultLed, Field, FieldError, FieldLabel };
+
+//# sourceMappingURL=field.js.map

package/dist/components/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport type * as React from \"react\";\nimport { Label } from \"./label\";\n\n/** The fault LED: a small danger dot with a tint halo that blinks as it appears. */\nexport function FaultLed({ className }: { className?: string }) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"led-blink inline-block size-1.5 shrink-0 rounded-full bg-danger shadow-[0_0_0_3px_var(--color-danger-tint)]\",\n        className,\n      )}\n    />\n  );\n}\n\n/**\n * Announces an error to screen readers without showing a line under the control; the visible\n * cue is the red label with its fault LED. Renders nothing without children.\n */\nexport function FieldError({ children }: { children?: React.ReactNode }) {\n  if (!children) return null;\n  return (\n    <span role=\"alert\" className=\"sr-only\">\n      {children}\n    </span>\n  );\n}\n\n/** Field label; when invalid it turns danger with a fault LED in front. */\nexport function FieldLabel({\n  htmlFor,\n  invalid,\n  className,\n  children,\n}: {\n  htmlFor?: string;\n  invalid?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <Label\n      htmlFor={htmlFor}\n      data-invalid={invalid || undefined}\n      className={cn(\"text-body-sm\", invalid ? \"text-danger\" : \"text-ink-soft\", className)}\n    >\n      {invalid && <FaultLed />}\n      {children}\n    </Label>\n  );\n}\n\n/** Label + control + help text, stacked. Pass the control's id as `htmlFor`. */\nexport function Field({\n  label,\n  htmlFor,\n  error,\n  help,\n  className,\n  children,\n}: {\n  label: React.ReactNode;\n  htmlFor?: string;\n  /** Turns the label red with a fault LED; the message is announced, not shown. */\n  error?: React.ReactNode;\n  help?: React.ReactNode;\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-1.5\", className)}>\n      <FieldLabel htmlFor={htmlFor} invalid={Boolean(error)}>\n        {label}\n      </FieldLabel>\n      {children}\n      {error ? (\n        <FieldError>{error}</FieldError>\n      ) : help ? (\n        <p className=\"text-body-sm text-ink-soft\">{help}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,SAAS,EAAE,aAAqC;CAC9D,OACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAW,GACT,+GACA,SACF;CACD,CAAA;AAEL;;;;;AAMA,SAAgB,WAAW,EAAE,YAA4C;CACvE,IAAI,CAAC,UAAU,OAAO;CACtB,OACE,oBAAC,QAAD;EAAM,MAAK;EAAQ,WAAU;EAC1B;CACG,CAAA;AAEV;;AAGA,SAAgB,WAAW,EACzB,SACA,SACA,WACA,YAMC;CACD,OACE,qBAAC,OAAD;EACW;EACT,gBAAc,WAAW,KAAA;EACzB,WAAW,GAAG,gBAAgB,UAAU,gBAAgB,iBAAiB,SAAS;EAHpF,UAAA,CAKG,WAAW,oBAAC,UAAD,CAAW,CAAA,GACtB,QACI;;AAEX;;AAGA,SAAgB,MAAM,EACpB,OACA,SACA,OACA,MACA,WACA,YASC;CACD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iCAAiC,SAAS;EAA7D,UAAA;GACE,oBAAC,YAAD;IAAqB;IAAS,SAAS,QAAQ,KAAK;IACjD,UAAA;GACS,CAAA;GACX;GACA,QACC,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,IAC7B,OACF,oBAAC,KAAD;IAAG,WAAU;IAA8B,UAAA;GAAQ,CAAA,IACjD;EACD;;AAET"}

package/dist/components/footer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export type FooterLink = {
+  label: string;
+  href: string;
+  target?: string;
+};
+export type FooterProps = {
+  links?: FooterLink[];
+  /** Microprint on the left, e.g. a build stamp. */
+  left?: React.ReactNode;
+  /** Microprint on the right, e.g. coordinates. */
+  right?: React.ReactNode;
+  rulerLabels?: string[];
+  className?: string;
+};
+/** Page footer: a tick ruler, then microprint either side of bracketed links. */
+export declare function Footer({ links, left, right, rulerLabels, className }: FooterProps): React.JSX.Element;
+//# sourceMappingURL=footer.d.ts.map

package/dist/components/footer.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { TickRuler } from "./hud.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/footer.tsx
+/** Page footer: a tick ruler, then microprint either side of bracketed links. */
+function Footer({ links, left, right, rulerLabels, className }) {
+	return /* @__PURE__ */ jsxs("footer", {
+		className: cn("flex flex-col gap-4 pt-8 pb-6", className),
+		children: [/* @__PURE__ */ jsx(TickRuler, { labels: rulerLabels }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-6",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "hud-sm text-ink-soft",
+					children: left
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-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))
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "hud-sm text-ink-soft",
+					children: right
+				})
+			]
+		})]
+	});
+}
+export { Footer };
+
+//# sourceMappingURL=footer.js.map

package/dist/components/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","names":[],"sources":["../../src/components/footer.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\nimport { TickRuler } from \"./hud\";\n\nexport type FooterLink = {\n  label: string;\n  href: string;\n  target?: string;\n};\n\nexport type FooterProps = {\n  links?: FooterLink[];\n  /** Microprint on the left, e.g. a build stamp. */\n  left?: React.ReactNode;\n  /** Microprint on the right, e.g. coordinates. */\n  right?: React.ReactNode;\n  rulerLabels?: string[];\n  className?: string;\n};\n\n/** Page footer: a tick ruler, then microprint either side of bracketed links. */\nexport function Footer({ links, left, right, rulerLabels, className }: FooterProps) {\n  return (\n    <footer className={cn(\"flex flex-col gap-4 pt-8 pb-6\", className)}>\n      <TickRuler labels={rulerLabels} />\n      <div className=\"flex flex-wrap items-center justify-between gap-6\">\n        <span className=\"hud-sm text-ink-soft\">{left}</span>\n        <div className=\"flex flex-wrap gap-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        <span className=\"hud-sm text-ink-soft\">{right}</span>\n      </div>\n    </footer>\n  );\n}\n"],"mappings":";;;;;;AAsBA,SAAgB,OAAO,EAAE,OAAO,MAAM,OAAO,aAAa,aAA0B;CAClF,OACE,qBAAC,UAAD;EAAQ,WAAW,GAAG,iCAAiC,SAAS;EAAhE,UAAA,CACE,oBAAC,WAAD,EAAW,QAAQ,YAAc,CAAA,GACjC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAW,CAAA;IACnD,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,OAAO,KAAK,SACX,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;IACL,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAY,CAAA;GACjD;EACC,CAAA,CAAA;;AAEZ"}

package/dist/components/fx-converter.d.ts

@@ -0,0 +1,22 @@
+import { FxState } from "../lib/fx.js";
+type Currency = {
+  code: string;
+  minorUnits: number;
+};
+/**
+ * Three linked inputs for a cross-currency transfer: amount sent, amount received and rate.
+ * Editing one recomputes the least recently edited of the other two (see lib/fx.ts).
+ * Controlled: keep the FxState in the parent (start from `initialFxState()`).
+ */
+export declare function FxConverter({ id: rootId, from, to, value, onChange, invalid, className }: {
+  /** Id of the root, e.g. to fault all three fields with `fault(id)`. */
+  id?: string;
+  from: Currency;
+  to: Currency;
+  value: FxState;
+  onChange: (next: FxState) => void;
+  invalid?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=fx-converter.d.ts.map

package/dist/components/fx-converter.js

@@ -0,0 +1,91 @@
+"use client";
+import { editFx } from "../lib/fx.js";
+import { cn } from "../lib/utils.js";
+import { FieldLabel } from "./field.js";
+import { MoneyInput } from "./money-input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/fx-converter.tsx
+/**
+* Three linked inputs for a cross-currency transfer: amount sent, amount received and rate.
+* Editing one recomputes the least recently edited of the other two (see lib/fx.ts).
+* Controlled: keep the FxState in the parent (start from `initialFxState()`).
+*/
+function FxConverter({ id: rootId, from, to, value, onChange, invalid, className }) {
+	const id = useId();
+	const c = {
+		fromMinorUnits: from.minorUnits,
+		toMinorUnits: to.minorUnits
+	};
+	const edit = (field) => (e) => onChange(editFx(value, field, e.target.value, c));
+	const next = value.order[0];
+	return /* @__PURE__ */ jsx("div", {
+		id: rootId,
+		"data-fault-group": true,
+		className: cn("@container", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "grid gap-3 @lg:grid-cols-3",
+			children: [
+				/* @__PURE__ */ jsx(FxRow, {
+					id: `${id}-from`,
+					label: `Sent (${from.code})`,
+					computed: next === "from",
+					invalid,
+					children: /* @__PURE__ */ jsx(MoneyInput, {
+						id: `${id}-from`,
+						currency: from.code,
+						value: value.from,
+						onChange: edit("from"),
+						"aria-invalid": invalid || void 0
+					})
+				}),
+				/* @__PURE__ */ jsx(FxRow, {
+					id: `${id}-to`,
+					label: `Received (${to.code})`,
+					computed: next === "to",
+					invalid,
+					children: /* @__PURE__ */ jsx(MoneyInput, {
+						id: `${id}-to`,
+						currency: to.code,
+						value: value.to,
+						onChange: edit("to"),
+						"aria-invalid": invalid || void 0
+					})
+				}),
+				/* @__PURE__ */ jsx(FxRow, {
+					id: `${id}-rate`,
+					label: `Rate (${to.code} per ${from.code})`,
+					computed: next === "rate",
+					invalid,
+					children: /* @__PURE__ */ jsx(MoneyInput, {
+						id: `${id}-rate`,
+						currency: "×",
+						placeholder: "0.000000",
+						value: value.rate,
+						onChange: edit("rate"),
+						"aria-invalid": invalid || void 0
+					})
+				})
+			]
+		})
+	});
+}
+function FxRow({ id, label, computed, invalid, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-2",
+			children: [/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: id,
+				invalid,
+				children: label
+			}), computed && /* @__PURE__ */ jsx("span", {
+				className: "hud-sm text-hud-mark",
+				children: "auto"
+			})]
+		}), children]
+	});
+}
+export { FxConverter };
+
+//# sourceMappingURL=fx-converter.js.map

package/dist/components/fx-converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-converter.js","names":[],"sources":["../../src/components/fx-converter.tsx"],"sourcesContent":["\"use client\";\n\nimport { editFx, type FxCurrencies, type FxField, type FxState } from \"../lib/fx\";\nimport { cn } from \"../lib/utils\";\nimport { useId } from \"react\";\nimport { FieldLabel } from \"./field\";\nimport { MoneyInput } from \"./money-input\";\n\ntype Currency = { code: string; minorUnits: number };\n\n/**\n * Three linked inputs for a cross-currency transfer: amount sent, amount received and rate.\n * Editing one recomputes the least recently edited of the other two (see lib/fx.ts).\n * Controlled: keep the FxState in the parent (start from `initialFxState()`).\n */\nexport function FxConverter({\n  id: rootId,\n  from,\n  to,\n  value,\n  onChange,\n  invalid,\n  className,\n}: {\n  /** Id of the root, e.g. to fault all three fields with `fault(id)`. */\n  id?: string;\n  from: Currency;\n  to: Currency;\n  value: FxState;\n  onChange: (next: FxState) => void;\n  invalid?: boolean;\n  className?: string;\n}) {\n  const id = useId();\n  const c: FxCurrencies = { fromMinorUnits: from.minorUnits, toMinorUnits: to.minorUnits };\n  const edit = (field: FxField) => (e: React.ChangeEvent<HTMLInputElement>) =>\n    onChange(editFx(value, field, e.target.value, c));\n  // The field that will be recomputed next is the oldest one; mark it so users can see it.\n  const next = value.order[0];\n\n  // Columns follow the converter's own width (it lives in sheets and narrow cards), not the viewport.\n  return (\n    <div id={rootId} data-fault-group className={cn(\"@container\", className)}>\n      <div className=\"grid gap-3 @lg:grid-cols-3\">\n        <FxRow\n          id={`${id}-from`}\n          label={`Sent (${from.code})`}\n          computed={next === \"from\"}\n          invalid={invalid}\n        >\n          <MoneyInput\n            id={`${id}-from`}\n            currency={from.code}\n            value={value.from}\n            onChange={edit(\"from\")}\n            aria-invalid={invalid || undefined}\n          />\n        </FxRow>\n        <FxRow\n          id={`${id}-to`}\n          label={`Received (${to.code})`}\n          computed={next === \"to\"}\n          invalid={invalid}\n        >\n          <MoneyInput\n            id={`${id}-to`}\n            currency={to.code}\n            value={value.to}\n            onChange={edit(\"to\")}\n            aria-invalid={invalid || undefined}\n          />\n        </FxRow>\n        <FxRow\n          id={`${id}-rate`}\n          label={`Rate (${to.code} per ${from.code})`}\n          computed={next === \"rate\"}\n          invalid={invalid}\n        >\n          <MoneyInput\n            id={`${id}-rate`}\n            currency=\"×\"\n            placeholder=\"0.000000\"\n            value={value.rate}\n            onChange={edit(\"rate\")}\n            aria-invalid={invalid || undefined}\n          />\n        </FxRow>\n      </div>\n    </div>\n  );\n}\n\nfunction FxRow({\n  id,\n  label,\n  computed,\n  invalid,\n  children,\n}: {\n  id: string;\n  label: string;\n  computed: boolean;\n  invalid?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex min-w-0 flex-col gap-1.5\">\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <FieldLabel htmlFor={id} invalid={invalid}>\n          {label}\n        </FieldLabel>\n        {computed && <span className=\"hud-sm text-hud-mark\">auto</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,YAAY,EAC1B,IAAI,QACJ,MACA,IACA,OACA,UACA,SACA,aAUC;CACD,MAAM,KAAK,MAAM;CACjB,MAAM,IAAkB;EAAE,gBAAgB,KAAK;EAAY,cAAc,GAAG;CAAW;CACvF,MAAM,QAAQ,WAAoB,MAChC,SAAS,OAAO,OAAO,OAAO,EAAE,OAAO,OAAO,CAAC,CAAC;CAElD,MAAM,OAAO,MAAM,MAAM;CAGzB,OACE,oBAAC,OAAD;EAAK,IAAI;EAAQ,oBAAA;EAAiB,WAAW,GAAG,cAAc,SAAS;EACrE,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,OAAD;KACE,IAAI,GAAG,GAAG;KACV,OAAO,SAAS,KAAK,KAAK;KAC1B,UAAU,SAAS;KACV;KAET,UAAA,oBAAC,YAAD;MACE,IAAI,GAAG,GAAG;MACV,UAAU,KAAK;MACf,OAAO,MAAM;MACb,UAAU,KAAK,MAAM;MACrB,gBAAc,WAAW,KAAA;KAC1B,CAAA;IACI,CAAA;IACP,oBAAC,OAAD;KACE,IAAI,GAAG,GAAG;KACV,OAAO,aAAa,GAAG,KAAK;KAC5B,UAAU,SAAS;KACV;KAET,UAAA,oBAAC,YAAD;MACE,IAAI,GAAG,GAAG;MACV,UAAU,GAAG;MACb,OAAO,MAAM;MACb,UAAU,KAAK,IAAI;MACnB,gBAAc,WAAW,KAAA;KAC1B,CAAA;IACI,CAAA;IACP,oBAAC,OAAD;KACE,IAAI,GAAG,GAAG;KACV,OAAO,SAAS,GAAG,KAAK,OAAO,KAAK,KAAK;KACzC,UAAU,SAAS;KACV;KAET,UAAA,oBAAC,YAAD;MACE,IAAI,GAAG,GAAG;MACV,UAAS;MACT,aAAY;MACZ,OAAO,MAAM;MACb,UAAU,KAAK,MAAM;MACrB,gBAAc,WAAW,KAAA;KAC1B,CAAA;IACI,CAAA;GACJ;;CACF,CAAA;AAET;AAEA,SAAS,MAAM,EACb,IACA,OACA,UACA,SACA,YAOC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,YAAD;IAAY,SAAS;IAAa;IAC/B,UAAA;GACS,CAAA,GACX,YAAY,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA;GAAU,CAAA,CAC3D;EACJ,CAAA,GAAA,QACE;;AAET"}

package/dist/components/hero.d.ts

@@ -0,0 +1,28 @@
+import { SpecItem } from "./spec-readout.js";
+import * as React from "react";
+export type HeroProps = {
+  /** The page title or product name, set in display-xl. One per page. */
+  title: React.ReactNode;
+  /** The line under the title, in HUD type: a tagline, a category, a role. */
+  subtitle?: React.ReactNode;
+  lead?: React.ReactNode;
+  /** Buttons under the lead. */
+  actions?: React.ReactNode;
+  specs?: SpecItem[];
+  /** An image for the studio frame: a product shot, a screenshot, a portrait. Without it the frame shows a crosshair. */
+  image?: React.ReactNode;
+  imageLabel?: string;
+  /** Replaces the studio frame and grill entirely. */
+  media?: React.ReactNode;
+  serial?: string;
+  coords?: string;
+  className?: string;
+};
+/** Studio-backdrop frame for the hero image, with an inner ring and a microprint tag. */
+export declare function HeroFrame({ image, label }: {
+  image?: React.ReactNode;
+  label?: string;
+}): React.JSX.Element;
+/** The opening part of a page: title, subtitle, lead, actions and specs beside an image. */
+export declare function Hero({ title, subtitle, lead, actions, specs, image, imageLabel, media, serial, coords, className }: HeroProps): React.JSX.Element;
+//# sourceMappingURL=hero.d.ts.map

package/dist/components/hero.js

@@ -0,0 +1,83 @@
+import { cn } from "../lib/utils.js";
+import { Crosshair, Grill } from "./hud.js";
+import { SpecReadout } from "./spec-readout.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/hero.tsx
+/** Studio-backdrop frame for the hero image, with an inner ring and a microprint tag. */
+function HeroFrame({ image, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-60 w-50 items-center justify-center overflow-hidden rounded-md bg-studio [&>img]:size-full [&>img]:object-cover",
+		children: [
+			image ?? /* @__PURE__ */ jsx(Crosshair, { className: "size-5 text-ink/45" }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-3.5 rounded-sm shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]"
+			}),
+			label && /* @__PURE__ */ jsx("span", {
+				className: "hud-sm absolute bottom-2.5 left-2.5 text-ink",
+				children: label
+			})
+		]
+	});
+}
+/** The opening part of a page: title, subtitle, lead, actions and specs beside an image. */
+function Hero({ title, subtitle, lead, actions, specs, image, imageLabel, media, serial, coords, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("relative drop-float", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute -top-1.5 left-6 z-10 h-3 w-18 rounded-full bg-signal md:left-16"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative grid gap-12 rounded-xl bg-shell notch-lg px-6 pt-12 pb-8 md:grid-cols-[1fr_auto] md:px-16 md:pt-16 md:pb-12",
+			children: [
+				serial && /* @__PURE__ */ jsx("span", {
+					className: "hud-sm absolute top-6 left-6 text-hud-mark md:left-16",
+					children: serial
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-6",
+					children: [
+						/* @__PURE__ */ jsx("h1", {
+							className: "font-display text-display-lg text-ink md:text-display-xl",
+							children: title
+						}),
+						subtitle && /* @__PURE__ */ jsx("p", {
+							className: "hud text-signal-ink",
+							children: subtitle
+						}),
+						lead && /* @__PURE__ */ jsx("p", {
+							className: "max-w-[36em] text-body-lg text-ink-soft",
+							children: lead
+						}),
+						actions && /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: actions
+						}),
+						specs && /* @__PURE__ */ jsx(SpecReadout, { items: specs })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-start gap-4 md:items-end",
+					children: [media ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeroFrame, {
+						image,
+						label: imageLabel
+					}), /* @__PURE__ */ jsx(Grill, {
+						count: 4,
+						slotWidth: 28,
+						gap: "8px"
+					})] }), coords && /* @__PURE__ */ jsx("span", {
+						className: "hud-sm text-hud-mark",
+						children: coords
+					})]
+				}),
+				/* @__PURE__ */ jsx(Crosshair, {
+					tone: "signal",
+					className: "absolute right-3.5 bottom-3.5"
+				})
+			]
+		})]
+	});
+}
+export { Hero, HeroFrame };
+
+//# sourceMappingURL=hero.js.map

package/dist/components/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","names":[],"sources":["../../src/components/hero.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Crosshair, Grill } from \"./hud\";\nimport { type SpecItem, SpecReadout } from \"./spec-readout\";\n\nexport type HeroProps = {\n  /** The page title or product name, set in display-xl. One per page. */\n  title: React.ReactNode;\n  /** The line under the title, in HUD type: a tagline, a category, a role. */\n  subtitle?: React.ReactNode;\n  lead?: React.ReactNode;\n  /** Buttons under the lead. */\n  actions?: React.ReactNode;\n  specs?: SpecItem[];\n  /** An image for the studio frame: a product shot, a screenshot, a portrait. Without it the frame shows a crosshair. */\n  image?: React.ReactNode;\n  imageLabel?: string;\n  /** Replaces the studio frame and grill entirely. */\n  media?: React.ReactNode;\n  serial?: string;\n  coords?: string;\n  className?: string;\n};\n\n/** Studio-backdrop frame for the hero image, with an inner ring and a microprint tag. */\nexport function HeroFrame({ image, label }: { image?: React.ReactNode; label?: string }) {\n  return (\n    <div className=\"relative flex h-60 w-50 items-center justify-center overflow-hidden rounded-md bg-studio [&>img]:size-full [&>img]:object-cover\">\n      {image ?? <Crosshair className=\"size-5 text-ink/45\" />}\n      <span\n        aria-hidden\n        className=\"pointer-events-none absolute inset-3.5 rounded-sm shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]\"\n      />\n      {label && <span className=\"hud-sm absolute bottom-2.5 left-2.5 text-ink\">{label}</span>}\n    </div>\n  );\n}\n\n/** The opening part of a page: title, subtitle, lead, actions and specs beside an image. */\nexport function Hero({\n  title,\n  subtitle,\n  lead,\n  actions,\n  specs,\n  image,\n  imageLabel,\n  media,\n  serial,\n  coords,\n  className,\n}: HeroProps) {\n  return (\n    <section className={cn(\"relative drop-float\", className)}>\n      <span\n        aria-hidden\n        className=\"absolute -top-1.5 left-6 z-10 h-3 w-18 rounded-full bg-signal md:left-16\"\n      />\n      <div className=\"relative grid gap-12 rounded-xl bg-shell notch-lg px-6 pt-12 pb-8 md:grid-cols-[1fr_auto] md:px-16 md:pt-16 md:pb-12\">\n        {serial && (\n          <span className=\"hud-sm absolute top-6 left-6 text-hud-mark md:left-16\">{serial}</span>\n        )}\n        <div className=\"flex min-w-0 flex-col gap-6\">\n          <h1 className=\"font-display text-display-lg text-ink md:text-display-xl\">{title}</h1>\n          {subtitle && <p className=\"hud text-signal-ink\">{subtitle}</p>}\n          {lead && <p className=\"max-w-[36em] text-body-lg text-ink-soft\">{lead}</p>}\n          {actions && <div className=\"flex flex-wrap items-center gap-3\">{actions}</div>}\n          {specs && <SpecReadout items={specs} />}\n        </div>\n        <div className=\"flex flex-col items-start gap-4 md:items-end\">\n          {media ?? (\n            <>\n              <HeroFrame image={image} label={imageLabel} />\n              <Grill count={4} slotWidth={28} gap=\"8px\" />\n            </>\n          )}\n          {coords && <span className=\"hud-sm text-hud-mark\">{coords}</span>}\n        </div>\n        <Crosshair tone=\"signal\" className=\"absolute right-3.5 bottom-3.5\" />\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;AAyBA,SAAgB,UAAU,EAAE,OAAO,SAAsD;CACvF,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACG,SAAS,oBAAC,WAAD,EAAW,WAAU,qBAAsB,CAAA;GACrD,oBAAC,QAAD;IACE,eAAA;IACA,WAAU;GACX,CAAA;GACA,SAAS,oBAAC,QAAD;IAAM,WAAU;IAAgD,UAAA;GAAY,CAAA;EACnF;;AAET;;AAGA,SAAgB,KAAK,EACnB,OACA,UACA,MACA,SACA,OACA,OACA,YACA,OACA,QACA,QACA,aACY;CACZ,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,uBAAuB,SAAS;EAAvD,UAAA,CACE,oBAAC,QAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,GACD,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,UACC,oBAAC,QAAD;KAAM,WAAU;KAAyD,UAAA;IAAa,CAAA;IAExF,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACE,oBAAC,MAAD;OAAI,WAAU;OAA4D,UAAA;MAAU,CAAA;MACnF,YAAY,oBAAC,KAAD;OAAG,WAAU;OAAuB,UAAA;MAAY,CAAA;MAC5D,QAAQ,oBAAC,KAAD;OAAG,WAAU;OAA2C,UAAA;MAAQ,CAAA;MACxE,WAAW,oBAAC,OAAD;OAAK,WAAU;OAAqC,UAAA;MAAa,CAAA;MAC5E,SAAS,oBAAC,aAAD,EAAa,OAAO,MAAQ,CAAA;KACnC;;IACL,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;MAAkB;MAAO,OAAO;KAAa,CAAA,GAC7C,oBAAC,OAAD;MAAO,OAAO;MAAG,WAAW;MAAI,KAAI;KAAO,CAAA,CAC3C,EAAA,CAAA,GAEH,UAAU,oBAAC,QAAD;MAAM,WAAU;MAAwB,UAAA;KAAa,CAAA,CAC7D;;IACL,oBAAC,WAAD;KAAW,MAAK;KAAS,WAAU;IAAiC,CAAA;GACjE;EACE,CAAA,CAAA;;AAEb"}

package/dist/components/hud.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+/** 12px plus-mark used as a registration mark on corners and frames. Decorative. */
+export declare function Crosshair({ tone, className, ...props }: React.ComponentProps<"svg"> & {
+  tone?: "signal";
+}): React.JSX.Element;
+/** Mono overline: signal code chip, label, a seam rule and an optional end marker. */
+export declare function HudLabel({ code, end, rule, className, children, ...props }: React.ComponentProps<"div"> & {
+  code?: string;
+  end?: React.ReactNode;
+  rule?: boolean;
+}): React.JSX.Element;
+/** Measurement-tape strip: major ticks every 40px, minor every 8px. Decorative. */
+export declare function TickRuler({ labels, className }: {
+  labels?: string[];
+  className?: string;
+}): React.JSX.Element;
+/** LED dot with a word next to it. Color never carries the meaning alone. */
+export declare function StatusLed({ tone, className, children, ...props }: React.ComponentProps<"span"> & {
+  tone?: "on" | "signal" | "off";
+}): React.JSX.Element;
+/** Pegboard slots: the product grill. Decorative. */
+export declare function Grill({ count, slotWidth, gap, tone, className }: {
+  count?: number;
+  /** Slot width in px. Defaults to 36. */
+  slotWidth?: number;
+  /** Gap between slots as a CSS length. Defaults to 10px. */
+  gap?: string;
+  tone?: "signal" | "on-signal";
+  className?: string;
+}): React.JSX.Element;
+/** Section heading: HUD label with code above a Michroma title and an optional aside. */
+export declare function SectionHeader({ title, code, label, aside, ruler, as: Tag, className }: {
+  title: React.ReactNode;
+  code?: string;
+  label?: React.ReactNode;
+  aside?: React.ReactNode;
+  ruler?: boolean;
+  as?: "h1" | "h2" | "h3";
+  className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=hud.d.ts.map