react-marketing-ui 0.0.2 → 0.0.4

package/dist/feature-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/feature-card.tsx"],"names":["twMerge","clsx","jsxs","jsx"],"mappings":";;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACkBO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,IAAA,EAAM,SAAA,EAAW,WAAU,EAAqB;AACzF,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sHAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,wDAAA,EAA0D,SAAA,IAAa,+BAA+B,CAAA;AAAA,YAEnH,QAAA,EAAA;AAAA;AAAA,SACH,EACF,CAAA;AAAA,wBACAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wDAAA,EAA0D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BAC9EA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,IAAA,EAAK;AAAA,SAAA,EAC5F;AAAA;AAAA;AAAA,GACF;AAEJ","file":"feature-card.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\nexport type FeatureCardProps = {\n  /** Icon rendered in the elevated top-left box. Pass any ReactNode (e.g. an\n   *  inlined SVG or an iconify <Icon icon={...} />). */\n  icon: ReactNode;\n  title: string;\n  body: string;\n  /** Icon colour class, e.g. `text-violet-500`. Defaults to the secondary foreground tone. */\n  iconColor?: string;\n  /** Extra classes merged onto the card root. */\n  className?: string;\n};\n\n/**\n * Shared marketing feature card: a soft-filled panel with an elevated icon box\n * above a title + body. Used across the /security, /syncing, /web-access pages\n * and future copy pages.\n *\n * Geometry mirrors the design-system reference (p-6 → lg:p-8 → xl:p-10, icon box\n * size-10 → lg:size-12); the design tokens are mapped onto this library's own\n * variables so both themes stay in sync.\n */\nexport function FeatureCard({ icon, title, body, iconColor, className }: FeatureCardProps) {\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col justify-between gap-6 rounded-[20px] bg-(--muted) p-6 lg:gap-8 lg:rounded-3xl lg:p-8 xl:gap-10 xl:p-10',\n        className,\n      )}\n    >\n      <div className=\"flex size-10 items-center justify-center rounded-[10px] bg-(--surface) shadow-(--shadow-sm) lg:size-12 lg:rounded-md\">\n        <span\n          className={cn('flex h-5 w-5 items-center justify-center lg:h-6 lg:w-6', iconColor ?? 'text-(--foreground-secondary)')}\n        >\n          {icon}\n        </span>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <h3 className=\"font-semibold text-[15px] text-foreground lg:text-base\">{title}</h3>\n        <p className=\"text-(--foreground-secondary) text-[13px] leading-relaxed lg:text-sm\">{body}</p>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/feature-card.tsx"],"names":["twMerge","clsx","jsxs","jsx"],"mappings":";;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACkBO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,IAAA,EAAM,SAAA,EAAW,WAAU,EAAqB;AACzF,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sHAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,wDAAA,EAA0D,SAAA,IAAa,+BAA+B,CAAA;AAAA,YAEnH,QAAA,EAAA;AAAA;AAAA,SACH,EACF,CAAA;AAAA,wBACAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wDAAA,EAA0D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BAC9EA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,IAAA,EAAK;AAAA,SAAA,EAC5F;AAAA;AAAA;AAAA,GACF;AAEJ","file":"feature-card.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\nexport type FeatureCardProps = {\n  /** Icon rendered in the elevated top-left box. Pass any ReactNode (e.g. an\n   *  inlined SVG or an iconify <Icon icon={...} />). */\n  icon: ReactNode;\n  title: string;\n  body: string;\n  /** Icon colour class, e.g. `text-violet-500`. Defaults to the secondary foreground tone. */\n  iconColor?: string;\n  /** Extra classes merged onto the card root. */\n  className?: string;\n};\n\n/**\n * Shared marketing feature card: a soft-filled panel with an elevated icon box\n * above a title + body. Used across the /security, /syncing, /web-access pages\n * and future copy pages.\n *\n * Geometry mirrors the design-system reference (p-6 → lg:p-8 → xl:p-10, icon box\n * size-10 → lg:size-12); the design tokens are mapped onto this library's own\n * variables so both themes stay in sync.\n */\nexport function FeatureCard({ icon, title, body, iconColor, className }: FeatureCardProps) {\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col justify-between gap-6 rounded-[20px] bg-(--muted) p-6 lg:gap-8 lg:rounded-3xl lg:p-8 xl:gap-10 xl:p-10',\n        className,\n      )}\n    >\n      <div className=\"flex size-10 items-center justify-center rounded-[10px] bg-(--surface) shadow-(--shadow-sm) lg:size-12 lg:rounded-md\">\n        <span\n          className={cn('flex h-5 w-5 items-center justify-center lg:h-6 lg:w-6', iconColor ?? 'text-(--foreground-secondary)')}\n        >\n          {icon}\n        </span>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <h3 className=\"font-semibold text-[15px] text-foreground lg:text-base\">{title}</h3>\n        <p className=\"text-(--foreground-secondary) text-[13px] leading-relaxed lg:text-sm\">{body}</p>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/feature-card.mjs

@@ -1,4 +1,36 @@
-export { FeatureCard } from './chunk-3SB6HUBA.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function FeatureCard({ icon, title, body, iconColor, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col justify-between gap-6 rounded-[20px] bg-(--muted) p-6 lg:gap-8 lg:rounded-3xl lg:p-8 xl:gap-10 xl:p-10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-[10px] bg-(--surface) shadow-(--shadow-sm) lg:size-12 lg:rounded-md", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("flex h-5 w-5 items-center justify-center lg:h-6 lg:w-6", iconColor ?? "text-(--foreground-secondary)"),
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[15px] text-foreground lg:text-base", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-(--foreground-secondary) text-[13px] leading-relaxed lg:text-sm", children: body })
+        ] })
+      ]
+    }
+  );
+}
+
+export { FeatureCard };
 //# sourceMappingURL=feature-card.mjs.map
 //# sourceMappingURL=feature-card.mjs.map

package/dist/feature-card.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"feature-card.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/feature-card.tsx"],"names":[],"mappings":";;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACkBO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,IAAA,EAAM,SAAA,EAAW,WAAU,EAAqB;AACzF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,6HAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sHAAA,EACb,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,wDAAA,EAA0D,SAAA,IAAa,+BAA+B,CAAA;AAAA,YAEnH,QAAA,EAAA;AAAA;AAAA,SACH,EACF,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wDAAA,EAA0D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BAC9E,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sEAAA,EAAwE,QAAA,EAAA,IAAA,EAAK;AAAA,SAAA,EAC5F;AAAA;AAAA;AAAA,GACF;AAEJ","file":"feature-card.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\nexport type FeatureCardProps = {\n  /** Icon rendered in the elevated top-left box. Pass any ReactNode (e.g. an\n   *  inlined SVG or an iconify <Icon icon={...} />). */\n  icon: ReactNode;\n  title: string;\n  body: string;\n  /** Icon colour class, e.g. `text-violet-500`. Defaults to the secondary foreground tone. */\n  iconColor?: string;\n  /** Extra classes merged onto the card root. */\n  className?: string;\n};\n\n/**\n * Shared marketing feature card: a soft-filled panel with an elevated icon box\n * above a title + body. Used across the /security, /syncing, /web-access pages\n * and future copy pages.\n *\n * Geometry mirrors the design-system reference (p-6 → lg:p-8 → xl:p-10, icon box\n * size-10 → lg:size-12); the design tokens are mapped onto this library's own\n * variables so both themes stay in sync.\n */\nexport function FeatureCard({ icon, title, body, iconColor, className }: FeatureCardProps) {\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col justify-between gap-6 rounded-[20px] bg-(--muted) p-6 lg:gap-8 lg:rounded-3xl lg:p-8 xl:gap-10 xl:p-10',\n        className,\n      )}\n    >\n      <div className=\"flex size-10 items-center justify-center rounded-[10px] bg-(--surface) shadow-(--shadow-sm) lg:size-12 lg:rounded-md\">\n        <span\n          className={cn('flex h-5 w-5 items-center justify-center lg:h-6 lg:w-6', iconColor ?? 'text-(--foreground-secondary)')}\n        >\n          {icon}\n        </span>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <h3 className=\"font-semibold text-[15px] text-foreground lg:text-base\">{title}</h3>\n        <p className=\"text-(--foreground-secondary) text-[13px] leading-relaxed lg:text-sm\">{body}</p>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/flowchart-parts.js

@@ -1,10 +1,10 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/lib/utils.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }

package/dist/flowchart-parts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/flowchart-parts.tsx"],"names":["twMerge","clsx","jsx","jsxs"],"mappings":"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","file":"flowchart-parts.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../lib/utils.js';\n\n// ── Non-exported helpers ──────────────────────────────────────────────────────\n\n/** Downward chevron (rotated square, two borders) placed at the end of a line. */\nconst downChevronClass =\n  'absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)';\n\nconst rightChevronClass =\n  'absolute right-0 top-1/2 size-2 translate-x-1/2 -translate-y-1/2 rotate-45 border-t border-r border-(--foreground-muted)';\n\nconst leftChevronClass =\n  'absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 -rotate-45 border-t border-l border-(--foreground-muted)';\n\n/** Micro label chip that masks the line it sits on. */\nconst microLabelClass =\n  'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-(--border) bg-(--muted) px-1.5 py-px font-mono text-[8.5px] leading-tight text-(--foreground-secondary)';\n\n// ── Exports ───────────────────────────────────────────────────────────────────\n\ntype ArrowRightProps = { label?: string; className?: string };\n\n/** Horizontal connector (left → right) between two snake cells. */\nexport function ArrowRight({ label, className }: ArrowRightProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={rightChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype ArrowLeftProps = { label?: string; className?: string };\n\n/** Horizontal connector (right → left) between two snake cells. */\nexport function ArrowLeft({ label, className }: ArrowLeftProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={leftChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype TurnDownProps = { className?: string };\n\n/** Short vertical connector used when the snake drops to the next row. */\nexport function TurnDown({ className }: TurnDownProps) {\n  return (\n    <div className={cn('relative h-4', className)}>\n      <span className=\"absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className={downChevronClass} />\n    </div>\n  );\n}\n\ntype SplitArrowProps = { leftLabel?: string; rightLabel?: string; className?: string };\n\n/** One-to-two branch connector: spine down, horizontal arm, drops at 25% / 75%. */\nexport function SplitArrow({ leftLabel, rightLabel, className }: SplitArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      {leftLabel ? (\n        <span className=\"absolute left-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {leftLabel}\n        </span>\n      ) : null}\n      {rightLabel ? (\n        <span className=\"absolute right-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {rightLabel}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\ntype JoinArrowProps = { className?: string };\n\n/** Two-to-one join connector: risers at 25% / 75%, horizontal arm, spine down. */\nexport function JoinArrow({ className }: JoinArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-[25%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n    </div>\n  );\n}\n\ntype FlowNodeProps = {\n  icon?: ReactNode;\n  /**\n   * Accepted for API compatibility with the site's icon-based version; the icon is now a\n   * caller-supplied ReactNode that carries its own sizing/color classes, so this is unused.\n   */\n  iconClass?: string;\n  chipClass?: string;\n  title: string;\n  body?: string;\n  tag?: string;\n  children?: ReactNode;\n  className?: string;\n};\n\n/** A compact rounded node: icon chip, one-line title, one-line sub, optional children. */\nexport function FlowNode({ icon, chipClass, title, body, tag, children, className }: FlowNodeProps) {\n  return (\n    <div className={cn('flex h-full flex-col rounded-[12px] border border-(--border) bg-(--surface) p-2.5', className)}>\n      <div className=\"flex items-start gap-2\">\n        {icon ? (\n          <div className={cn('flex size-7 shrink-0 items-center justify-center rounded-[8px]', chipClass ?? 'bg-(--muted)')}>\n            {icon}\n          </div>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center gap-x-1.5 gap-y-0.5\">\n            <p className=\"font-semibold text-[11px] leading-snug text-foreground sm:text-[12px]\">{title}</p>\n            {tag ? (\n              <span className=\"rounded-full border border-(--border) px-1.5 py-px font-mono text-[8.5px] text-(--foreground-muted)\">\n                {tag}\n              </span>\n            ) : null}\n          </div>\n          {body ? <p className=\"mt-0.5 text-[9.5px] leading-snug text-(--foreground-secondary) sm:text-[10px]\">{body}</p> : null}\n        </div>\n      </div>\n      {children ? <div className=\"mt-2\">{children}</div> : null}\n    </div>\n  );\n}\n\ntype FlowPillProps = { title: string; className?: string };\n\n/** A start/end pill: centered, fits content, sits on the flowchart spine. */\nexport function FlowPill({ title, className }: FlowPillProps) {\n  return (\n    <div\n      className={cn(\n        'mx-auto flex w-fit max-w-full items-center justify-center rounded-full border border-(--border) bg-(--surface) px-4 py-2 text-center',\n        className,\n      )}\n    >\n      <p className=\"text-[12px] font-semibold leading-snug text-foreground\">{title}</p>\n    </div>\n  );\n}\n\ntype FlowDiamondProps = { label: string; sub?: string; className?: string };\n\n/** A compact decision diamond (clip-path, straight text inside). */\nexport function FlowDiamond({ label, sub, className }: FlowDiamondProps) {\n  return (\n    <div className={cn('relative h-14 w-36 justify-self-center sm:h-16 sm:w-44', className)}>\n      <div className=\"absolute inset-0 bg-(--border-hi) [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\" />\n      <div className=\"absolute inset-[1px] flex flex-col items-center justify-center gap-0.5 bg-(--surface) px-6 text-center [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\">\n        <p className=\"text-[11px] font-semibold leading-tight text-foreground sm:text-[12px]\">{label}</p>\n        {sub ? <p className=\"text-[8.5px] leading-tight text-(--foreground-muted)\">{sub}</p> : null}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/flowchart-parts.tsx"],"names":["twMerge","clsx","jsx","jsxs"],"mappings":"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","file":"flowchart-parts.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../lib/utils.js';\n\n// ── Non-exported helpers ──────────────────────────────────────────────────────\n\n/** Downward chevron (rotated square, two borders) placed at the end of a line. */\nconst downChevronClass =\n  'absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)';\n\nconst rightChevronClass =\n  'absolute right-0 top-1/2 size-2 translate-x-1/2 -translate-y-1/2 rotate-45 border-t border-r border-(--foreground-muted)';\n\nconst leftChevronClass =\n  'absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 -rotate-45 border-t border-l border-(--foreground-muted)';\n\n/** Micro label chip that masks the line it sits on. */\nconst microLabelClass =\n  'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-(--border) bg-(--muted) px-1.5 py-px font-mono text-[8.5px] leading-tight text-(--foreground-secondary)';\n\n// ── Exports ───────────────────────────────────────────────────────────────────\n\ntype ArrowRightProps = { label?: string; className?: string };\n\n/** Horizontal connector (left → right) between two snake cells. */\nexport function ArrowRight({ label, className }: ArrowRightProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={rightChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype ArrowLeftProps = { label?: string; className?: string };\n\n/** Horizontal connector (right → left) between two snake cells. */\nexport function ArrowLeft({ label, className }: ArrowLeftProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={leftChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype TurnDownProps = { className?: string };\n\n/** Short vertical connector used when the snake drops to the next row. */\nexport function TurnDown({ className }: TurnDownProps) {\n  return (\n    <div className={cn('relative h-4', className)}>\n      <span className=\"absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className={downChevronClass} />\n    </div>\n  );\n}\n\ntype SplitArrowProps = { leftLabel?: string; rightLabel?: string; className?: string };\n\n/** One-to-two branch connector: spine down, horizontal arm, drops at 25% / 75%. */\nexport function SplitArrow({ leftLabel, rightLabel, className }: SplitArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      {leftLabel ? (\n        <span className=\"absolute left-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {leftLabel}\n        </span>\n      ) : null}\n      {rightLabel ? (\n        <span className=\"absolute right-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {rightLabel}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\ntype JoinArrowProps = { className?: string };\n\n/** Two-to-one join connector: risers at 25% / 75%, horizontal arm, spine down. */\nexport function JoinArrow({ className }: JoinArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-[25%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n    </div>\n  );\n}\n\ntype FlowNodeProps = {\n  icon?: ReactNode;\n  /**\n   * Accepted for API compatibility with the site's icon-based version; the icon is now a\n   * caller-supplied ReactNode that carries its own sizing/color classes, so this is unused.\n   */\n  iconClass?: string;\n  chipClass?: string;\n  title: string;\n  body?: string;\n  tag?: string;\n  children?: ReactNode;\n  className?: string;\n};\n\n/** A compact rounded node: icon chip, one-line title, one-line sub, optional children. */\nexport function FlowNode({ icon, chipClass, title, body, tag, children, className }: FlowNodeProps) {\n  return (\n    <div className={cn('flex h-full flex-col rounded-[12px] border border-(--border) bg-(--surface) p-2.5', className)}>\n      <div className=\"flex items-start gap-2\">\n        {icon ? (\n          <div className={cn('flex size-7 shrink-0 items-center justify-center rounded-[8px]', chipClass ?? 'bg-(--muted)')}>\n            {icon}\n          </div>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center gap-x-1.5 gap-y-0.5\">\n            <p className=\"font-semibold text-[11px] leading-snug text-foreground sm:text-[12px]\">{title}</p>\n            {tag ? (\n              <span className=\"rounded-full border border-(--border) px-1.5 py-px font-mono text-[8.5px] text-(--foreground-muted)\">\n                {tag}\n              </span>\n            ) : null}\n          </div>\n          {body ? <p className=\"mt-0.5 text-[9.5px] leading-snug text-(--foreground-secondary) sm:text-[10px]\">{body}</p> : null}\n        </div>\n      </div>\n      {children ? <div className=\"mt-2\">{children}</div> : null}\n    </div>\n  );\n}\n\ntype FlowPillProps = { title: string; className?: string };\n\n/** A start/end pill: centered, fits content, sits on the flowchart spine. */\nexport function FlowPill({ title, className }: FlowPillProps) {\n  return (\n    <div\n      className={cn(\n        'mx-auto flex w-fit max-w-full items-center justify-center rounded-full border border-(--border) bg-(--surface) px-4 py-2 text-center',\n        className,\n      )}\n    >\n      <p className=\"text-[12px] font-semibold leading-snug text-foreground\">{title}</p>\n    </div>\n  );\n}\n\ntype FlowDiamondProps = { label: string; sub?: string; className?: string };\n\n/** A compact decision diamond (clip-path, straight text inside). */\nexport function FlowDiamond({ label, sub, className }: FlowDiamondProps) {\n  return (\n    <div className={cn('relative h-14 w-36 justify-self-center sm:h-16 sm:w-44', className)}>\n      <div className=\"absolute inset-0 bg-(--border-hi) [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\" />\n      <div className=\"absolute inset-[1px] flex flex-col items-center justify-center gap-0.5 bg-(--surface) px-6 text-center [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\">\n        <p className=\"text-[11px] font-semibold leading-tight text-foreground sm:text-[12px]\">{label}</p>\n        {sub ? <p className=\"text-[8.5px] leading-tight text-(--foreground-muted)\">{sub}</p> : null}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/flowchart-parts.mjs

@@ -1,4 +1,93 @@
-export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown } from './chunk-KNPOZ34H.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var downChevronClass = "absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)";
+var rightChevronClass = "absolute right-0 top-1/2 size-2 translate-x-1/2 -translate-y-1/2 rotate-45 border-t border-r border-(--foreground-muted)";
+var leftChevronClass = "absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 -rotate-45 border-t border-l border-(--foreground-muted)";
+var microLabelClass = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-(--border) bg-(--muted) px-1.5 py-px font-mono text-[8.5px] leading-tight text-(--foreground-secondary)";
+function ArrowRight({ label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: rightChevronClass }),
+    label ? /* @__PURE__ */ jsx("span", { className: microLabelClass, children: label }) : null
+  ] });
+}
+function ArrowLeft({ label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: leftChevronClass }),
+    label ? /* @__PURE__ */ jsx("span", { className: microLabelClass, children: label }) : null
+  ] });
+}
+function TurnDown({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-4", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: downChevronClass })
+  ] });
+}
+function SplitArrow({ leftLabel, rightLabel, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" }),
+    leftLabel ? /* @__PURE__ */ jsx("span", { className: "absolute left-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)", children: leftLabel }) : null,
+    rightLabel ? /* @__PURE__ */ jsx("span", { className: "absolute right-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)", children: rightLabel }) : null
+  ] });
+}
+function JoinArrow({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" })
+  ] });
+}
+function FlowNode({ icon, chipClass, title, body, tag, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col rounded-[12px] border border-(--border) bg-(--surface) p-2.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      icon ? /* @__PURE__ */ jsx("div", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-[8px]", chipClass ?? "bg-(--muted)"), children: icon }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[11px] leading-snug text-foreground sm:text-[12px]", children: title }),
+          tag ? /* @__PURE__ */ jsx("span", { className: "rounded-full border border-(--border) px-1.5 py-px font-mono text-[8.5px] text-(--foreground-muted)", children: tag }) : null
+        ] }),
+        body ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[9.5px] leading-snug text-(--foreground-secondary) sm:text-[10px]", children: body }) : null
+      ] })
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "mt-2", children }) : null
+  ] });
+}
+function FlowPill({ title, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-fit max-w-full items-center justify-center rounded-full border border-(--border) bg-(--surface) px-4 py-2 text-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("p", { className: "text-[12px] font-semibold leading-snug text-foreground", children: title })
+    }
+  );
+}
+function FlowDiamond({ label, sub, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-14 w-36 justify-self-center sm:h-16 sm:w-44", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-(--border-hi) [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute inset-[1px] flex flex-col items-center justify-center gap-0.5 bg-(--surface) px-6 text-center [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold leading-tight text-foreground sm:text-[12px]", children: label }),
+      sub ? /* @__PURE__ */ jsx("p", { className: "text-[8.5px] leading-tight text-(--foreground-muted)", children: sub }) : null
+    ] })
+  ] });
+}
+
+export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown };
 //# sourceMappingURL=flowchart-parts.mjs.map
 //# sourceMappingURL=flowchart-parts.mjs.map

package/dist/flowchart-parts.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"flowchart-parts.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/flowchart-parts.tsx"],"names":[],"mappings":"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","file":"flowchart-parts.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../lib/utils.js';\n\n// ── Non-exported helpers ──────────────────────────────────────────────────────\n\n/** Downward chevron (rotated square, two borders) placed at the end of a line. */\nconst downChevronClass =\n  'absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)';\n\nconst rightChevronClass =\n  'absolute right-0 top-1/2 size-2 translate-x-1/2 -translate-y-1/2 rotate-45 border-t border-r border-(--foreground-muted)';\n\nconst leftChevronClass =\n  'absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 -rotate-45 border-t border-l border-(--foreground-muted)';\n\n/** Micro label chip that masks the line it sits on. */\nconst microLabelClass =\n  'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-(--border) bg-(--muted) px-1.5 py-px font-mono text-[8.5px] leading-tight text-(--foreground-secondary)';\n\n// ── Exports ───────────────────────────────────────────────────────────────────\n\ntype ArrowRightProps = { label?: string; className?: string };\n\n/** Horizontal connector (left → right) between two snake cells. */\nexport function ArrowRight({ label, className }: ArrowRightProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={rightChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype ArrowLeftProps = { label?: string; className?: string };\n\n/** Horizontal connector (right → left) between two snake cells. */\nexport function ArrowLeft({ label, className }: ArrowLeftProps) {\n  return (\n    <div className={cn('relative flex items-center', className)}>\n      <span className=\"h-px w-full bg-(--foreground-muted)\" />\n      <span className={leftChevronClass} />\n      {label ? <span className={microLabelClass}>{label}</span> : null}\n    </div>\n  );\n}\n\ntype TurnDownProps = { className?: string };\n\n/** Short vertical connector used when the snake drops to the next row. */\nexport function TurnDown({ className }: TurnDownProps) {\n  return (\n    <div className={cn('relative h-4', className)}>\n      <span className=\"absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className={downChevronClass} />\n    </div>\n  );\n}\n\ntype SplitArrowProps = { leftLabel?: string; rightLabel?: string; className?: string };\n\n/** One-to-two branch connector: spine down, horizontal arm, drops at 25% / 75%. */\nexport function SplitArrow({ leftLabel, rightLabel, className }: SplitArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n      {leftLabel ? (\n        <span className=\"absolute left-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {leftLabel}\n        </span>\n      ) : null}\n      {rightLabel ? (\n        <span className=\"absolute right-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)\">\n          {rightLabel}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\ntype JoinArrowProps = { className?: string };\n\n/** Two-to-one join connector: risers at 25% / 75%, horizontal arm, spine down. */\nexport function JoinArrow({ className }: JoinArrowProps) {\n  return (\n    <div className={cn('relative h-12', className)}>\n      <span className=\"absolute left-[25%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[75%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)\" />\n      <span className=\"absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)\" />\n    </div>\n  );\n}\n\ntype FlowNodeProps = {\n  icon?: ReactNode;\n  /**\n   * Accepted for API compatibility with the site's icon-based version; the icon is now a\n   * caller-supplied ReactNode that carries its own sizing/color classes, so this is unused.\n   */\n  iconClass?: string;\n  chipClass?: string;\n  title: string;\n  body?: string;\n  tag?: string;\n  children?: ReactNode;\n  className?: string;\n};\n\n/** A compact rounded node: icon chip, one-line title, one-line sub, optional children. */\nexport function FlowNode({ icon, chipClass, title, body, tag, children, className }: FlowNodeProps) {\n  return (\n    <div className={cn('flex h-full flex-col rounded-[12px] border border-(--border) bg-(--surface) p-2.5', className)}>\n      <div className=\"flex items-start gap-2\">\n        {icon ? (\n          <div className={cn('flex size-7 shrink-0 items-center justify-center rounded-[8px]', chipClass ?? 'bg-(--muted)')}>\n            {icon}\n          </div>\n        ) : null}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center gap-x-1.5 gap-y-0.5\">\n            <p className=\"font-semibold text-[11px] leading-snug text-foreground sm:text-[12px]\">{title}</p>\n            {tag ? (\n              <span className=\"rounded-full border border-(--border) px-1.5 py-px font-mono text-[8.5px] text-(--foreground-muted)\">\n                {tag}\n              </span>\n            ) : null}\n          </div>\n          {body ? <p className=\"mt-0.5 text-[9.5px] leading-snug text-(--foreground-secondary) sm:text-[10px]\">{body}</p> : null}\n        </div>\n      </div>\n      {children ? <div className=\"mt-2\">{children}</div> : null}\n    </div>\n  );\n}\n\ntype FlowPillProps = { title: string; className?: string };\n\n/** A start/end pill: centered, fits content, sits on the flowchart spine. */\nexport function FlowPill({ title, className }: FlowPillProps) {\n  return (\n    <div\n      className={cn(\n        'mx-auto flex w-fit max-w-full items-center justify-center rounded-full border border-(--border) bg-(--surface) px-4 py-2 text-center',\n        className,\n      )}\n    >\n      <p className=\"text-[12px] font-semibold leading-snug text-foreground\">{title}</p>\n    </div>\n  );\n}\n\ntype FlowDiamondProps = { label: string; sub?: string; className?: string };\n\n/** A compact decision diamond (clip-path, straight text inside). */\nexport function FlowDiamond({ label, sub, className }: FlowDiamondProps) {\n  return (\n    <div className={cn('relative h-14 w-36 justify-self-center sm:h-16 sm:w-44', className)}>\n      <div className=\"absolute inset-0 bg-(--border-hi) [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\" />\n      <div className=\"absolute inset-[1px] flex flex-col items-center justify-center gap-0.5 bg-(--surface) px-6 text-center [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]\">\n        <p className=\"text-[11px] font-semibold leading-tight text-foreground sm:text-[12px]\">{label}</p>\n        {sub ? <p className=\"text-[8.5px] leading-tight text-(--foreground-muted)\">{sub}</p> : null}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/glossy-button.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var classVarianceAuthority = require('class-variance-authority');
@@ -5,7 +6,6 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/glossy-button.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }

package/dist/glossy-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/lib/utils.ts","../src/components/glossy-button.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":";;;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AC6BA,IAAM,UAAA,GAAa,EAAA;AAAA,EACjB,+DAAA;AAAA,EACA,sEAAA;AAAA,EACA,gCAAA;AAAA;AAAA,EAEA,+DAAA;AAAA,EACA,iEAAA;AAAA;AAAA,EAEA,8HAAA;AAAA;AAAA;AAAA,EAGA,yFAAA;AAAA,EACA,wHAAA;AAAA,EACA,sCAAA;AAAA,EACA,qEAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,oBAAA,GAAuBC,0BAAA;AAAA,EAC3B,EAAA;AAAA,IACE,0JAAA;AAAA;AAAA;AAAA,IAGA,uBAAA;AAAA,IACA,6CAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,MAAA,EAAQ,eAAA;AAAA,QACR,WAAA,EAAa,oBAAA;AAAA,QACb,OAAA,EAAS,gBAAA;AAAA,QACT,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,kBAAA;AAAA,QACX,SAAA,EAAW,kBAAA;AAAA,QACX,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,SAAA;AAAU;AAEtD;AAeO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc;AAChB,CAAA,EAAsB;AACpB,EAAA,MAAM,0BACJC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,eAAA,EAAc,OAAA,EAAQ,aAAA,EAAa,IAAA,EAAM,WAAW,UAAA,EAAY,CAAA;AAAA,oBACtEA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACrC,CAAA;AAGF,EAAA,MAAM,eAAA,GAAkB,GAAG,oBAAA,CAAqB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAE7E,EAAA,IAAI,OAAO,YAAA,KAAiB,QAAA;AAC1B,IAAA,uBACEA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,YAAA,EAAc,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,cAAc,CAAA,EAAG,YAAA,EAAY,SAAA,EAChF,QAAA,EAAA,OAAA,EACH,CAAA;AAGJ,EAAA,uBACEA,cAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,eAAA,EAAiB,OAAA,EAAS,YAAA,EAAc,QAAA,EAAoB,YAAA,EAAY,SAAA,EACtG,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ","file":"glossy-button.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-lit button: a domed, back-lit key built from one effect layer.\n *\n * The geometry lives in a single `box-shadow` list that gets swapped wholesale on\n * press, so the bevel and cast can drop out while the rim survives without any\n * of them being separate elements:\n *\n *   • the gloss span  — face fill + the shadow list (bevel, rim, cast).\n *   • its `before:`   — the dome gradient, painted over the face.\n *   • its `after:`    — the hover/press tint, the only thing that cross-fades.\n *\n * The recipe lives in `global.css`. Every colour is a `--btn-*` primitive, and\n * the two shadow composites are declared on `.glossy` — on the key itself, not\n * on `:root` — because a var() inside a custom property is substituted where the\n * property is *declared*. That's what lets one `.glossy-<variant>` class restyle\n * the whole recipe by setting primitives, and it's why there are no `dark:`\n * variants here: `.dark` overrides the same primitives.\n *\n * The span is a sibling of the label rather than its parent so the label never\n * inherits the effect layers' stacking or transitions; `isolate` on the root\n * contains the span's negative z-index.\n *\n * Server-renderable: every state is pure CSS. Passing a function as\n * `actionOrLink` requires a client-component parent, as with any onClick prop.\n */\n\n/**\n * The whole visual treatment. Absolutely positioned behind the label, with the\n * dome (`before:`) and the interaction tint (`after:`) stacked over the face.\n * Only the tint animates opacity; the shadow list animates by being replaced.\n */\nconst glossLayer = cn(\n  'pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]',\n  '[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]',\n  'transition-shadow duration-150',\n  // Pressed (and disabled): bevel + cast go transparent, the rim stays.\n  'group-active/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  'group-disabled/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  // Dome — fixed direction, per-variant stops. Above the face, below the tint.\n  \"before:absolute before:inset-0 before:rounded-[inherit] before:content-[''] before:[background-image:var(--gradient-button)]\",\n  // Interaction tint. Hidden outright when disabled, and on touch (no hover\n  // state to speak of) so the root's active:opacity can carry the press instead.\n  \"after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:opacity-0\",\n  'after:[background-color:var(--btn-tint-hover)] after:transition-opacity after:duration-150 after:[will-change:opacity]',\n  'group-hover/glossy:after:opacity-100',\n  'group-active/glossy:after:[background-color:var(--btn-tint-active)]',\n  'group-disabled/glossy:after:hidden [@media(hover:none)]:after:hidden',\n);\n\nconst glossyButtonVariants = cva(\n  cn(\n    'glossy group/glossy relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap rounded-full font-normal',\n    // Label colour rides the variant. Kept as a utility rather than a plain\n    // declaration on `.glossy` so a caller's own text-* class still wins.\n    '[color:var(--btn-fg)]',\n    'disabled:cursor-default disabled:opacity-50',\n    // Touch devices get no hover layer, so the whole key dims on press instead.\n    '[@media(hover:none)]:active:opacity-80',\n  ),\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 text-sm',\n        md: 'h-9 px-5 text-[17px]',\n        lg: 'h-11 px-6 text-[17px]',\n      },\n      /**\n       * Written out as literal class names — Tailwind's scanner is static, so a\n       * `glossy-${variant}` template would never make it into the stylesheet.\n       * `neutral` is the bare recipe, so it needs no class of its own.\n       */\n      variant: {\n        neutral: '',\n        accent: 'glossy-accent',\n        destructive: 'glossy-destructive',\n        special: 'glossy-special',\n        positive: 'glossy-positive',\n        attention: 'glossy-attention',\n        highlight: 'glossy-highlight',\n        inverse: 'glossy-inverse',\n      },\n    },\n    defaultVariants: { size: 'md', variant: 'neutral' },\n  },\n);\n\nexport type GlossyButtonProps = VariantProps<typeof glossyButtonVariants> & {\n  /**\n   * String  → renders as a plain <a href={...}>.\n   * Function → renders as a <button type=\"button\" onClick={...}>.\n   */\n  actionOrLink: string | (() => void);\n  children: ReactNode;\n  /** Button-only — an anchor can't be disabled. */\n  disabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n};\n\nexport function GlossyButton({\n  size,\n  variant,\n  actionOrLink,\n  children,\n  disabled,\n  className,\n  'aria-label': ariaLabel,\n}: GlossyButtonProps) {\n  const content = (\n    <>\n      <span data-fx-layer=\"gloss\" aria-hidden={true} className={glossLayer} />\n      <span className=\"px-0.5\">{children}</span>\n    </>\n  );\n\n  const buttonClassName = cn(glossyButtonVariants({ size, variant }), className);\n\n  if (typeof actionOrLink === 'string')\n    return (\n      <a href={actionOrLink} className={cn(buttonClassName, 'no-underline')} aria-label={ariaLabel}>\n        {content}\n      </a>\n    );\n\n  return (\n    <button type=\"button\" className={buttonClassName} onClick={actionOrLink} disabled={disabled} aria-label={ariaLabel}>\n      {content}\n    </button>\n  );\n}\n\nexport { glossyButtonVariants };\n"]}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/glossy-button.tsx"],"names":["twMerge","clsx","cva","jsxs","Fragment","jsx"],"mappings":";;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AC6BA,IAAM,UAAA,GAAa,EAAA;AAAA,EACjB,+DAAA;AAAA,EACA,sEAAA;AAAA,EACA,gCAAA;AAAA;AAAA,EAEA,+DAAA;AAAA,EACA,iEAAA;AAAA;AAAA,EAEA,8HAAA;AAAA;AAAA;AAAA,EAGA,yFAAA;AAAA,EACA,wHAAA;AAAA,EACA,sCAAA;AAAA,EACA,qEAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,oBAAA,GAAuBC,0BAAA;AAAA,EAC3B,EAAA;AAAA,IACE,0JAAA;AAAA;AAAA;AAAA,IAGA,uBAAA;AAAA,IACA,6CAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,MAAA,EAAQ,eAAA;AAAA,QACR,WAAA,EAAa,oBAAA;AAAA,QACb,OAAA,EAAS,gBAAA;AAAA,QACT,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,kBAAA;AAAA,QACX,SAAA,EAAW,kBAAA;AAAA,QACX,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,SAAA;AAAU;AAEtD;AAeO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc;AAChB,CAAA,EAAsB;AACpB,EAAA,MAAM,0BACJC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,UAAK,eAAA,EAAc,OAAA,EAAQ,aAAA,EAAa,IAAA,EAAM,WAAW,UAAA,EAAY,CAAA;AAAA,oBACtEA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACrC,CAAA;AAGF,EAAA,MAAM,eAAA,GAAkB,GAAG,oBAAA,CAAqB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAE7E,EAAA,IAAI,OAAO,YAAA,KAAiB,QAAA;AAC1B,IAAA,uBACEA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,YAAA,EAAc,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,cAAc,CAAA,EAAG,YAAA,EAAY,SAAA,EAChF,QAAA,EAAA,OAAA,EACH,CAAA;AAGJ,EAAA,uBACEA,cAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,eAAA,EAAiB,OAAA,EAAS,YAAA,EAAc,QAAA,EAAoB,YAAA,EAAY,SAAA,EACtG,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ","file":"glossy-button.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-lit button: a domed, back-lit key built from one effect layer.\n *\n * The geometry lives in a single `box-shadow` list that gets swapped wholesale on\n * press, so the bevel and cast can drop out while the rim survives without any\n * of them being separate elements:\n *\n *   • the gloss span  — face fill + the shadow list (bevel, rim, cast).\n *   • its `before:`   — the dome gradient, painted over the face.\n *   • its `after:`    — the hover/press tint, the only thing that cross-fades.\n *\n * The recipe lives in `global.css`. Every colour is a `--btn-*` primitive, and\n * the two shadow composites are declared on `.glossy` — on the key itself, not\n * on `:root` — because a var() inside a custom property is substituted where the\n * property is *declared*. That's what lets one `.glossy-<variant>` class restyle\n * the whole recipe by setting primitives, and it's why there are no `dark:`\n * variants here: `.dark` overrides the same primitives.\n *\n * The span is a sibling of the label rather than its parent so the label never\n * inherits the effect layers' stacking or transitions; `isolate` on the root\n * contains the span's negative z-index.\n *\n * Server-renderable: every state is pure CSS. Passing a function as\n * `actionOrLink` requires a client-component parent, as with any onClick prop.\n */\n\n/**\n * The whole visual treatment. Absolutely positioned behind the label, with the\n * dome (`before:`) and the interaction tint (`after:`) stacked over the face.\n * Only the tint animates opacity; the shadow list animates by being replaced.\n */\nconst glossLayer = cn(\n  'pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]',\n  '[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]',\n  'transition-shadow duration-150',\n  // Pressed (and disabled): bevel + cast go transparent, the rim stays.\n  'group-active/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  'group-disabled/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  // Dome — fixed direction, per-variant stops. Above the face, below the tint.\n  \"before:absolute before:inset-0 before:rounded-[inherit] before:content-[''] before:[background-image:var(--gradient-button)]\",\n  // Interaction tint. Hidden outright when disabled, and on touch (no hover\n  // state to speak of) so the root's active:opacity can carry the press instead.\n  \"after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:opacity-0\",\n  'after:[background-color:var(--btn-tint-hover)] after:transition-opacity after:duration-150 after:[will-change:opacity]',\n  'group-hover/glossy:after:opacity-100',\n  'group-active/glossy:after:[background-color:var(--btn-tint-active)]',\n  'group-disabled/glossy:after:hidden [@media(hover:none)]:after:hidden',\n);\n\nconst glossyButtonVariants = cva(\n  cn(\n    'glossy group/glossy relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap rounded-full font-normal',\n    // Label colour rides the variant. Kept as a utility rather than a plain\n    // declaration on `.glossy` so a caller's own text-* class still wins.\n    '[color:var(--btn-fg)]',\n    'disabled:cursor-default disabled:opacity-50',\n    // Touch devices get no hover layer, so the whole key dims on press instead.\n    '[@media(hover:none)]:active:opacity-80',\n  ),\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 text-sm',\n        md: 'h-9 px-5 text-[17px]',\n        lg: 'h-11 px-6 text-[17px]',\n      },\n      /**\n       * Written out as literal class names — Tailwind's scanner is static, so a\n       * `glossy-${variant}` template would never make it into the stylesheet.\n       * `neutral` is the bare recipe, so it needs no class of its own.\n       */\n      variant: {\n        neutral: '',\n        accent: 'glossy-accent',\n        destructive: 'glossy-destructive',\n        special: 'glossy-special',\n        positive: 'glossy-positive',\n        attention: 'glossy-attention',\n        highlight: 'glossy-highlight',\n        inverse: 'glossy-inverse',\n      },\n    },\n    defaultVariants: { size: 'md', variant: 'neutral' },\n  },\n);\n\nexport type GlossyButtonProps = VariantProps<typeof glossyButtonVariants> & {\n  /**\n   * String  → renders as a plain <a href={...}>.\n   * Function → renders as a <button type=\"button\" onClick={...}>.\n   */\n  actionOrLink: string | (() => void);\n  children: ReactNode;\n  /** Button-only — an anchor can't be disabled. */\n  disabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n};\n\nexport function GlossyButton({\n  size,\n  variant,\n  actionOrLink,\n  children,\n  disabled,\n  className,\n  'aria-label': ariaLabel,\n}: GlossyButtonProps) {\n  const content = (\n    <>\n      <span data-fx-layer=\"gloss\" aria-hidden={true} className={glossLayer} />\n      <span className=\"px-0.5\">{children}</span>\n    </>\n  );\n\n  const buttonClassName = cn(glossyButtonVariants({ size, variant }), className);\n\n  if (typeof actionOrLink === 'string')\n    return (\n      <a href={actionOrLink} className={cn(buttonClassName, 'no-underline')} aria-label={ariaLabel}>\n        {content}\n      </a>\n    );\n\n  return (\n    <button type=\"button\" className={buttonClassName} onClick={actionOrLink} disabled={disabled} aria-label={ariaLabel}>\n      {content}\n    </button>\n  );\n}\n\nexport { glossyButtonVariants };\n"]}

package/dist/glossy-button.mjs

@@ -1,4 +1,84 @@
-export { GlossyButton, glossyButtonVariants } from './chunk-WDR5VPZJ.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var glossLayer = cn(
+  "pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]",
+  "[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]",
+  "transition-shadow duration-150",
+  // Pressed (and disabled): bevel + cast go transparent, the rim stays.
+  "group-active/glossy:[box-shadow:var(--shadow-button-pressed)]",
+  "group-disabled/glossy:[box-shadow:var(--shadow-button-pressed)]",
+  // Dome — fixed direction, per-variant stops. Above the face, below the tint.
+  "before:absolute before:inset-0 before:rounded-[inherit] before:content-[''] before:[background-image:var(--gradient-button)]",
+  // Interaction tint. Hidden outright when disabled, and on touch (no hover
+  // state to speak of) so the root's active:opacity can carry the press instead.
+  "after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:opacity-0",
+  "after:[background-color:var(--btn-tint-hover)] after:transition-opacity after:duration-150 after:[will-change:opacity]",
+  "group-hover/glossy:after:opacity-100",
+  "group-active/glossy:after:[background-color:var(--btn-tint-active)]",
+  "group-disabled/glossy:after:hidden [@media(hover:none)]:after:hidden"
+);
+var glossyButtonVariants = cva(
+  cn(
+    "glossy group/glossy relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap rounded-full font-normal",
+    // Label colour rides the variant. Kept as a utility rather than a plain
+    // declaration on `.glossy` so a caller's own text-* class still wins.
+    "[color:var(--btn-fg)]",
+    "disabled:cursor-default disabled:opacity-50",
+    // Touch devices get no hover layer, so the whole key dims on press instead.
+    "[@media(hover:none)]:active:opacity-80"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-sm",
+        md: "h-9 px-5 text-[17px]",
+        lg: "h-11 px-6 text-[17px]"
+      },
+      /**
+       * Written out as literal class names — Tailwind's scanner is static, so a
+       * `glossy-${variant}` template would never make it into the stylesheet.
+       * `neutral` is the bare recipe, so it needs no class of its own.
+       */
+      variant: {
+        neutral: "",
+        accent: "glossy-accent",
+        destructive: "glossy-destructive",
+        special: "glossy-special",
+        positive: "glossy-positive",
+        attention: "glossy-attention",
+        highlight: "glossy-highlight",
+        inverse: "glossy-inverse"
+      }
+    },
+    defaultVariants: { size: "md", variant: "neutral" }
+  }
+);
+function GlossyButton({
+  size,
+  variant,
+  actionOrLink,
+  children,
+  disabled,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "data-fx-layer": "gloss", "aria-hidden": true, className: glossLayer }),
+    /* @__PURE__ */ jsx("span", { className: "px-0.5", children })
+  ] });
+  const buttonClassName = cn(glossyButtonVariants({ size, variant }), className);
+  if (typeof actionOrLink === "string")
+    return /* @__PURE__ */ jsx("a", { href: actionOrLink, className: cn(buttonClassName, "no-underline"), "aria-label": ariaLabel, children: content });
+  return /* @__PURE__ */ jsx("button", { type: "button", className: buttonClassName, onClick: actionOrLink, disabled, "aria-label": ariaLabel, children: content });
+}
+
+export { GlossyButton, glossyButtonVariants };
 //# sourceMappingURL=glossy-button.mjs.map
 //# sourceMappingURL=glossy-button.mjs.map

package/dist/glossy-button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"glossy-button.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/glossy-button.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AC6BA,IAAM,UAAA,GAAa,EAAA;AAAA,EACjB,+DAAA;AAAA,EACA,sEAAA;AAAA,EACA,gCAAA;AAAA;AAAA,EAEA,+DAAA;AAAA,EACA,iEAAA;AAAA;AAAA,EAEA,8HAAA;AAAA;AAAA;AAAA,EAGA,yFAAA;AAAA,EACA,wHAAA;AAAA,EACA,sCAAA;AAAA,EACA,qEAAA;AAAA,EACA;AACF,CAAA;AAEA,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAC3B,EAAA;AAAA,IACE,0JAAA;AAAA;AAAA;AAAA,IAGA,uBAAA;AAAA,IACA,6CAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,oBAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,MAAA,EAAQ,eAAA;AAAA,QACR,WAAA,EAAa,oBAAA;AAAA,QACb,OAAA,EAAS,gBAAA;AAAA,QACT,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,kBAAA;AAAA,QACX,SAAA,EAAW,kBAAA;AAAA,QACX,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,SAAA;AAAU;AAEtD;AAeO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc;AAChB,CAAA,EAAsB;AACpB,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAK,eAAA,EAAc,OAAA,EAAQ,aAAA,EAAa,IAAA,EAAM,WAAW,UAAA,EAAY,CAAA;AAAA,oBACtE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACrC,CAAA;AAGF,EAAA,MAAM,eAAA,GAAkB,GAAG,oBAAA,CAAqB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAE7E,EAAA,IAAI,OAAO,YAAA,KAAiB,QAAA;AAC1B,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAM,YAAA,EAAc,SAAA,EAAW,EAAA,CAAG,eAAA,EAAiB,cAAc,CAAA,EAAG,YAAA,EAAY,SAAA,EAChF,QAAA,EAAA,OAAA,EACH,CAAA;AAGJ,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,eAAA,EAAiB,OAAA,EAAS,YAAA,EAAc,QAAA,EAAoB,YAAA,EAAY,SAAA,EACtG,QAAA,EAAA,OAAA,EACH,CAAA;AAEJ","file":"glossy-button.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/**\n * Physically-lit button: a domed, back-lit key built from one effect layer.\n *\n * The geometry lives in a single `box-shadow` list that gets swapped wholesale on\n * press, so the bevel and cast can drop out while the rim survives without any\n * of them being separate elements:\n *\n *   • the gloss span  — face fill + the shadow list (bevel, rim, cast).\n *   • its `before:`   — the dome gradient, painted over the face.\n *   • its `after:`    — the hover/press tint, the only thing that cross-fades.\n *\n * The recipe lives in `global.css`. Every colour is a `--btn-*` primitive, and\n * the two shadow composites are declared on `.glossy` — on the key itself, not\n * on `:root` — because a var() inside a custom property is substituted where the\n * property is *declared*. That's what lets one `.glossy-<variant>` class restyle\n * the whole recipe by setting primitives, and it's why there are no `dark:`\n * variants here: `.dark` overrides the same primitives.\n *\n * The span is a sibling of the label rather than its parent so the label never\n * inherits the effect layers' stacking or transitions; `isolate` on the root\n * contains the span's negative z-index.\n *\n * Server-renderable: every state is pure CSS. Passing a function as\n * `actionOrLink` requires a client-component parent, as with any onClick prop.\n */\n\n/**\n * The whole visual treatment. Absolutely positioned behind the label, with the\n * dome (`before:`) and the interaction tint (`after:`) stacked over the face.\n * Only the tint animates opacity; the shadow list animates by being replaced.\n */\nconst glossLayer = cn(\n  'pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]',\n  '[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]',\n  'transition-shadow duration-150',\n  // Pressed (and disabled): bevel + cast go transparent, the rim stays.\n  'group-active/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  'group-disabled/glossy:[box-shadow:var(--shadow-button-pressed)]',\n  // Dome — fixed direction, per-variant stops. Above the face, below the tint.\n  \"before:absolute before:inset-0 before:rounded-[inherit] before:content-[''] before:[background-image:var(--gradient-button)]\",\n  // Interaction tint. Hidden outright when disabled, and on touch (no hover\n  // state to speak of) so the root's active:opacity can carry the press instead.\n  \"after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:opacity-0\",\n  'after:[background-color:var(--btn-tint-hover)] after:transition-opacity after:duration-150 after:[will-change:opacity]',\n  'group-hover/glossy:after:opacity-100',\n  'group-active/glossy:after:[background-color:var(--btn-tint-active)]',\n  'group-disabled/glossy:after:hidden [@media(hover:none)]:after:hidden',\n);\n\nconst glossyButtonVariants = cva(\n  cn(\n    'glossy group/glossy relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap rounded-full font-normal',\n    // Label colour rides the variant. Kept as a utility rather than a plain\n    // declaration on `.glossy` so a caller's own text-* class still wins.\n    '[color:var(--btn-fg)]',\n    'disabled:cursor-default disabled:opacity-50',\n    // Touch devices get no hover layer, so the whole key dims on press instead.\n    '[@media(hover:none)]:active:opacity-80',\n  ),\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 text-sm',\n        md: 'h-9 px-5 text-[17px]',\n        lg: 'h-11 px-6 text-[17px]',\n      },\n      /**\n       * Written out as literal class names — Tailwind's scanner is static, so a\n       * `glossy-${variant}` template would never make it into the stylesheet.\n       * `neutral` is the bare recipe, so it needs no class of its own.\n       */\n      variant: {\n        neutral: '',\n        accent: 'glossy-accent',\n        destructive: 'glossy-destructive',\n        special: 'glossy-special',\n        positive: 'glossy-positive',\n        attention: 'glossy-attention',\n        highlight: 'glossy-highlight',\n        inverse: 'glossy-inverse',\n      },\n    },\n    defaultVariants: { size: 'md', variant: 'neutral' },\n  },\n);\n\nexport type GlossyButtonProps = VariantProps<typeof glossyButtonVariants> & {\n  /**\n   * String  → renders as a plain <a href={...}>.\n   * Function → renders as a <button type=\"button\" onClick={...}>.\n   */\n  actionOrLink: string | (() => void);\n  children: ReactNode;\n  /** Button-only — an anchor can't be disabled. */\n  disabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n};\n\nexport function GlossyButton({\n  size,\n  variant,\n  actionOrLink,\n  children,\n  disabled,\n  className,\n  'aria-label': ariaLabel,\n}: GlossyButtonProps) {\n  const content = (\n    <>\n      <span data-fx-layer=\"gloss\" aria-hidden={true} className={glossLayer} />\n      <span className=\"px-0.5\">{children}</span>\n    </>\n  );\n\n  const buttonClassName = cn(glossyButtonVariants({ size, variant }), className);\n\n  if (typeof actionOrLink === 'string')\n    return (\n      <a href={actionOrLink} className={cn(buttonClassName, 'no-underline')} aria-label={ariaLabel}>\n        {content}\n      </a>\n    );\n\n  return (\n    <button type=\"button\" className={buttonClassName} onClick={actionOrLink} disabled={disabled} aria-label={ariaLabel}>\n      {content}\n    </button>\n  );\n}\n\nexport { glossyButtonVariants };\n"]}

package/dist/grainient.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var ogl = require('ogl');