react-marketing-ui 0.0.3 → 0.0.5

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');

package/dist/grainient.mjs

@@ -1,4 +1,329 @@
-export { grainient_default as default } from './chunk-CTZEI2YS.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { Renderer, Triangle, Mesh, Program } from 'ogl';
+import { useRef, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var vertex = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+var fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+function createGrainientProgram(gl) {
+  return new Program(gl, {
+    vertex,
+    fragment,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: new Float32Array([1, 1]) },
+      uTimeSpeed: { value: 0.25 },
+      uColorBalance: { value: 0 },
+      uWarpStrength: { value: 1 },
+      uWarpFrequency: { value: 5 },
+      uWarpSpeed: { value: 2 },
+      uWarpAmplitude: { value: 50 },
+      uBlendAngle: { value: 0 },
+      uBlendSoftness: { value: 0.05 },
+      uRotationAmount: { value: 500 },
+      uNoiseScale: { value: 2 },
+      uGrainAmount: { value: 0.1 },
+      uGrainScale: { value: 2 },
+      uGrainAnimated: { value: 0 },
+      uContrast: { value: 1.5 },
+      uGamma: { value: 1 },
+      uSaturation: { value: 1 },
+      uCenterOffset: { value: new Float32Array([0, 0]) },
+      uZoom: { value: 0.9 },
+      uColor1: { value: new Float32Array([1, 1, 1]) },
+      uColor2: { value: new Float32Array([1, 1, 1]) },
+      uColor3: { value: new Float32Array([1, 1, 1]) }
+    }
+  });
+}
+var ctxMap = /* @__PURE__ */ new WeakMap();
+var HEX_COLOR_RE = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+var hexToRgb = (hex) => {
+  const result = HEX_COLOR_RE.exec(hex);
+  if (!result) return [1, 1, 1];
+  const [, r = "ff", g = "ff", b = "ff"] = result;
+  return [Number.parseInt(r, 16) / 255, Number.parseInt(g, 16) / 255, Number.parseInt(b, 16) / 255];
+};
+var prefersReducedMotion = () => typeof globalThis !== "undefined" && globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+var isLowPowerClient = () => {
+  if (typeof globalThis === "undefined") return false;
+  const narrow = globalThis.matchMedia?.("(max-width: 1023px)").matches === true;
+  const fewCores = typeof navigator !== "undefined" && typeof navigator.hardwareConcurrency === "number" && navigator.hardwareConcurrency <= 4;
+  return narrow || fewCores;
+};
+var GRAIN_LAYER = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")`;
+var fallbackGradient = (c1, c2, c3) => `${GRAIN_LAYER}, linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3} 100%)`;
+var applyStaticBg = (el, src) => {
+  el.style.backgroundImage = `url(${src})`;
+  el.style.backgroundSize = "cover";
+  el.style.backgroundPosition = "center";
+};
+function initGrainient(container) {
+  const renderer = new Renderer({
+    webgl: 2,
+    alpha: true,
+    antialias: false,
+    dpr: Math.min(globalThis.devicePixelRatio || 1, 2)
+  });
+  const gl = renderer.gl;
+  const canvas = gl.canvas;
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.display = "block";
+  container.appendChild(canvas);
+  const geometry = new Triangle(gl);
+  const program = createGrainientProgram(gl);
+  const mesh = new Mesh(gl, { geometry, program });
+  ctxMap.set(container, { renderer, program, mesh });
+  const setSize = () => {
+    const rect = container.getBoundingClientRect();
+    renderer.setSize(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));
+    const res = program.uniforms.iResolution.value;
+    res[0] = gl.drawingBufferWidth;
+    res[1] = gl.drawingBufferHeight;
+    renderer.render({ scene: mesh });
+  };
+  const ro = new ResizeObserver(setSize);
+  ro.observe(container);
+  setSize();
+  let raf = 0;
+  let isVisible = true;
+  let isPageVisible = !document.hidden;
+  const t0 = performance.now();
+  const loop = (t) => {
+    program.uniforms.iTime.value = (t - t0) * 1e-3;
+    renderer.render({ scene: mesh });
+    raf = requestAnimationFrame(loop);
+  };
+  const tryStart = () => {
+    if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);
+  };
+  const tryStop = () => {
+    if (raf !== 0) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  };
+  const reduce = prefersReducedMotion();
+  const io = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) return;
+      isVisible = entry.isIntersecting;
+      if (isVisible) tryStart();
+      else tryStop();
+    },
+    { threshold: 0 }
+  );
+  if (!reduce) io.observe(container);
+  const onVisibility = () => {
+    isPageVisible = !document.hidden;
+    if (isPageVisible) tryStart();
+    else tryStop();
+  };
+  if (!reduce) document.addEventListener("visibilitychange", onVisibility);
+  if (!reduce) tryStart();
+  return () => {
+    tryStop();
+    ro.disconnect();
+    io.disconnect();
+    document.removeEventListener("visibilitychange", onVisibility);
+    ctxMap.delete(container);
+    try {
+      container.removeChild(canvas);
+    } catch {
+    }
+  };
+}
+var Grainient = (props) => {
+  const {
+    timeSpeed = 0.25,
+    colorBalance = 0,
+    warpStrength = 1,
+    warpFrequency = 5,
+    warpSpeed = 2,
+    warpAmplitude = 50,
+    blendAngle = 0,
+    blendSoftness = 0.05,
+    rotationAmount = 500,
+    noiseScale = 2,
+    grainAmount = 0.1,
+    grainScale = 2,
+    grainAnimated = false,
+    contrast = 1.5,
+    gamma = 1,
+    saturation = 1,
+    centerX = 0,
+    centerY = 0,
+    zoom = 0.9,
+    color1 = "#FF9FFC",
+    color2 = "#5227FF",
+    color3 = "#B497CF",
+    staticSrc = "",
+    className = ""
+  } = props;
+  const containerRef = useRef(null);
+  const fallbackRef = useRef(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (isLowPowerClient() || prefersReducedMotion()) {
+      fallbackRef.current = true;
+      container.dataset.fallback = "true";
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    return initGrainient(container);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (fallbackRef.current) {
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    const ctx = ctxMap.get(container);
+    if (!ctx) return;
+    const { program, renderer, mesh } = ctx;
+    const u = program.uniforms;
+    u.uTimeSpeed.value = timeSpeed;
+    u.uColorBalance.value = colorBalance;
+    u.uWarpStrength.value = warpStrength;
+    u.uWarpFrequency.value = warpFrequency;
+    u.uWarpSpeed.value = warpSpeed;
+    u.uWarpAmplitude.value = warpAmplitude;
+    u.uBlendAngle.value = blendAngle;
+    u.uBlendSoftness.value = blendSoftness;
+    u.uRotationAmount.value = rotationAmount;
+    u.uNoiseScale.value = noiseScale;
+    u.uGrainAmount.value = grainAmount;
+    u.uGrainScale.value = grainScale;
+    u.uGrainAnimated.value = grainAnimated ? 1 : 0;
+    u.uContrast.value = contrast;
+    u.uGamma.value = gamma;
+    u.uSaturation.value = saturation;
+    u.uCenterOffset.value = new Float32Array([centerX, centerY]);
+    u.uZoom.value = zoom;
+    u.uColor1.value = new Float32Array(hexToRgb(color1));
+    u.uColor2.value = new Float32Array(hexToRgb(color2));
+    u.uColor3.value = new Float32Array(hexToRgb(color3));
+    if (prefersReducedMotion()) renderer.render({ scene: mesh });
+  }, [
+    timeSpeed,
+    colorBalance,
+    warpStrength,
+    warpFrequency,
+    warpSpeed,
+    warpAmplitude,
+    blendAngle,
+    blendSoftness,
+    rotationAmount,
+    noiseScale,
+    grainAmount,
+    grainScale,
+    grainAnimated,
+    contrast,
+    gamma,
+    saturation,
+    centerX,
+    centerY,
+    zoom,
+    color1,
+    color2,
+    color3,
+    staticSrc
+  ]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("grainient-container", className) });
+};
+var grainient_default = Grainient;
+
+export { grainient_default as default };
 //# sourceMappingURL=grainient.mjs.map
 //# sourceMappingURL=grainient.mjs.map

package/dist/grainient.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"grainient.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/grainient.shader.ts","../src/components/grainient.tsx"],"names":[],"mappings":"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","file":"grainient.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 Mesh, Program, type Renderer } from 'ogl';\n\n// Keep renderer/program alive across re-renders so the uniform-sync effect can\n// update uniforms without ever rebuilding the WebGL context.\nconst vertex = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst fragment = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport type GrainientContext = { renderer: Renderer; program: Program; mesh: Mesh };\n\nexport function createGrainientProgram(gl: Renderer['gl']): Program {\n  return new Program(gl, {\n    vertex,\n    fragment,\n    uniforms: {\n      iTime: { value: 0 },\n      iResolution: { value: new Float32Array([1, 1]) },\n      uTimeSpeed: { value: 0.25 },\n      uColorBalance: { value: 0.0 },\n      uWarpStrength: { value: 1.0 },\n      uWarpFrequency: { value: 5.0 },\n      uWarpSpeed: { value: 2.0 },\n      uWarpAmplitude: { value: 50.0 },\n      uBlendAngle: { value: 0.0 },\n      uBlendSoftness: { value: 0.05 },\n      uRotationAmount: { value: 500.0 },\n      uNoiseScale: { value: 2.0 },\n      uGrainAmount: { value: 0.1 },\n      uGrainScale: { value: 2.0 },\n      uGrainAnimated: { value: 0.0 },\n      uContrast: { value: 1.5 },\n      uGamma: { value: 1.0 },\n      uSaturation: { value: 1.0 },\n      uCenterOffset: { value: new Float32Array([0, 0]) },\n      uZoom: { value: 0.9 },\n      uColor1: { value: new Float32Array([1, 1, 1]) },\n      uColor2: { value: new Float32Array([1, 1, 1]) },\n      uColor3: { value: new Float32Array([1, 1, 1]) },\n    },\n  });\n}\n\nexport const ctxMap = new WeakMap<HTMLElement, GrainientContext>();\n","'use client';\n\nimport { Mesh, Renderer, Triangle } from 'ogl';\nimport { useEffect, useRef } from 'react';\nimport { cn } from '../lib/utils.js';\nimport { createGrainientProgram, ctxMap } from './grainient.shader.js';\nimport type { GrainientProps } from './grainient.types.js';\nimport './grainient.css';\n\nconst HEX_COLOR_RE = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const result = HEX_COLOR_RE.exec(hex);\n  if (!result) return [1, 1, 1];\n  // The regex guarantees all three capture groups when it matches; the defaults\n  // only silence noUncheckedIndexedAccess.\n  const [, r = 'ff', g = 'ff', b = 'ff'] = result;\n  return [Number.parseInt(r, 16) / 255, Number.parseInt(g, 16) / 255, Number.parseInt(b, 16) / 255];\n};\n\n// framer-motion's MotionConfig only governs declarative motion.* components, so\n// this raw-WebGL canvas carries its own prefers-reduced-motion check.\nconst prefersReducedMotion = () =>\n  typeof globalThis !== 'undefined' && globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n\n// The home page mounts four Grainient canvases at once; browsers cap live WebGL\n// contexts (~8-16) and each costs GPU/CPU. On low-power clients — narrow viewports\n// or few CPU cores — skip WebGL and let the static background stand in.\nconst isLowPowerClient = () => {\n  if (typeof globalThis === 'undefined') return false;\n  const narrow = globalThis.matchMedia?.('(max-width: 1023px)').matches === true;\n  const fewCores =\n    typeof navigator !== 'undefined' && typeof navigator.hardwareConcurrency === 'number' && navigator.hardwareConcurrency <= 4;\n  return narrow || fewCores;\n};\n\n// A tiling SVG feTurbulence tile that stands in for the shader's film grain,\n// inlined so it needs no network request.\nconst GRAIN_LAYER = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E\")`;\n\n// CSS gradient fallback when no pre-rendered image is available.\nconst fallbackGradient = (c1: string, c2: string, c3: string) =>\n  `${GRAIN_LAYER}, linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3} 100%)`;\n\n// Apply a pre-rendered static image as a cover background.\nconst applyStaticBg = (el: HTMLDivElement, src: string) => {\n  el.style.backgroundImage = `url(${src})`;\n  el.style.backgroundSize = 'cover';\n  el.style.backgroundPosition = 'center';\n};\n\n// Build the WebGL context, wire up resize/visibility observers, and run the\n// render loop. Returns a cleanup that tears everything back down.\nfunction initGrainient(container: HTMLDivElement): () => void {\n  const renderer = new Renderer({\n    webgl: 2,\n    alpha: true,\n    antialias: false,\n    dpr: Math.min(globalThis.devicePixelRatio || 1, 2),\n  });\n\n  const gl = renderer.gl;\n  const canvas = gl.canvas;\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n  canvas.style.display = 'block';\n  container.appendChild(canvas);\n\n  const geometry = new Triangle(gl);\n  const program = createGrainientProgram(gl);\n  const mesh = new Mesh(gl, { geometry, program });\n  ctxMap.set(container, { renderer, program, mesh });\n\n  const setSize = () => {\n    const rect = container.getBoundingClientRect();\n    renderer.setSize(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));\n    const res: Float32Array = program.uniforms.iResolution.value;\n    res[0] = gl.drawingBufferWidth;\n    res[1] = gl.drawingBufferHeight;\n    renderer.render({ scene: mesh });\n  };\n\n  const ro = new ResizeObserver(setSize);\n  ro.observe(container);\n  setSize();\n\n  let raf = 0;\n  let isVisible = true;\n  let isPageVisible = !document.hidden;\n  const t0 = performance.now();\n\n  const loop = (t: number) => {\n    program.uniforms.iTime.value = (t - t0) * 0.001;\n    renderer.render({ scene: mesh });\n    raf = requestAnimationFrame(loop);\n  };\n\n  const tryStart = () => {\n    if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);\n  };\n  const tryStop = () => {\n    if (raf !== 0) {\n      cancelAnimationFrame(raf);\n      raf = 0;\n    }\n  };\n\n  // Reduced motion: render a single static frame and never start the RAF loop.\n  const reduce = prefersReducedMotion();\n\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry) return;\n      isVisible = entry.isIntersecting;\n      if (isVisible) tryStart();\n      else tryStop();\n    },\n    { threshold: 0 },\n  );\n  if (!reduce) io.observe(container);\n\n  const onVisibility = () => {\n    isPageVisible = !document.hidden;\n    if (isPageVisible) tryStart();\n    else tryStop();\n  };\n  if (!reduce) document.addEventListener('visibilitychange', onVisibility);\n  if (!reduce) tryStart();\n\n  return () => {\n    tryStop();\n    ro.disconnect();\n    io.disconnect();\n    document.removeEventListener('visibilitychange', onVisibility);\n    ctxMap.delete(container);\n    try {\n      container.removeChild(canvas);\n    } catch {\n      /* ignore */\n    }\n  };\n}\n\nconst Grainient = (props: GrainientProps) => {\n  const {\n    timeSpeed = 0.25,\n    colorBalance = 0.0,\n    warpStrength = 1.0,\n    warpFrequency = 5.0,\n    warpSpeed = 2.0,\n    warpAmplitude = 50.0,\n    blendAngle = 0.0,\n    blendSoftness = 0.05,\n    rotationAmount = 500.0,\n    noiseScale = 2.0,\n    grainAmount = 0.1,\n    grainScale = 2.0,\n    grainAnimated = false,\n    contrast = 1.5,\n    gamma = 1.0,\n    saturation = 1.0,\n    centerX = 0.0,\n    centerY = 0.0,\n    zoom = 0.9,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    staticSrc = '',\n    className = '',\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Set once on mount: when true, WebGL is skipped and a static background stands in.\n  const fallbackRef = useRef(false);\n\n  // Effect 1: build WebGL context once, pause when offscreen / tab hidden.\n  // When a pre-rendered image is available, low-power clients and\n  // prefers-reduced-motion users get it as a zero-GPU-cost background.\n  // The renderer is created once on mount; color changes are handled in Effect 2.\n  // biome-ignore lint/plugin: creates the WebGL renderer once on mount and tears it down on unmount — imperative GPU setup with no derived-state form.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only WebGL setup; color/staticSrc changes are handled in Effect 2.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    if (isLowPowerClient() || prefersReducedMotion()) {\n      fallbackRef.current = true;\n      container.dataset.fallback = 'true';\n      if (staticSrc) applyStaticBg(container, staticSrc);\n      else container.style.background = fallbackGradient(color1, color2, color3);\n      return;\n    }\n    return initGrainient(container);\n  }, []); // renderer created once\n\n  // Effect 2: sync props to uniforms — zero GPU cost, no teardown.\n  // biome-ignore lint/plugin: imperatively writes props into mutable WebGL uniform objects (an external system); there is no render-time equivalent.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Fallback clients have no WebGL context; re-apply the background so a\n    // later color/src change still reaches the static background.\n    if (fallbackRef.current) {\n      if (staticSrc) applyStaticBg(container, staticSrc);\n      else container.style.background = fallbackGradient(color1, color2, color3);\n      return;\n    }\n\n    const ctx = ctxMap.get(container);\n    if (!ctx) return;\n\n    const { program, renderer, mesh } = ctx;\n    const u = program.uniforms;\n\n    u.uTimeSpeed.value = timeSpeed;\n    u.uColorBalance.value = colorBalance;\n    u.uWarpStrength.value = warpStrength;\n    u.uWarpFrequency.value = warpFrequency;\n    u.uWarpSpeed.value = warpSpeed;\n    u.uWarpAmplitude.value = warpAmplitude;\n    u.uBlendAngle.value = blendAngle;\n    u.uBlendSoftness.value = blendSoftness;\n    u.uRotationAmount.value = rotationAmount;\n    u.uNoiseScale.value = noiseScale;\n    u.uGrainAmount.value = grainAmount;\n    u.uGrainScale.value = grainScale;\n    u.uGrainAnimated.value = grainAnimated ? 1.0 : 0.0;\n    u.uContrast.value = contrast;\n    u.uGamma.value = gamma;\n    u.uSaturation.value = saturation;\n    u.uCenterOffset.value = new Float32Array([centerX, centerY]);\n    u.uZoom.value = zoom;\n    u.uColor1.value = new Float32Array(hexToRgb(color1));\n    u.uColor2.value = new Float32Array(hexToRgb(color2));\n    u.uColor3.value = new Float32Array(hexToRgb(color3));\n\n    // Under reduced motion the RAF loop never starts; draw one frame here so\n    // the real colors appear (the first frame from setSize() is all-white).\n    if (prefersReducedMotion()) renderer.render({ scene: mesh });\n  }, [\n    timeSpeed,\n    colorBalance,\n    warpStrength,\n    warpFrequency,\n    warpSpeed,\n    warpAmplitude,\n    blendAngle,\n    blendSoftness,\n    rotationAmount,\n    noiseScale,\n    grainAmount,\n    grainScale,\n    grainAnimated,\n    contrast,\n    gamma,\n    saturation,\n    centerX,\n    centerY,\n    zoom,\n    color1,\n    color2,\n    color3,\n    staticSrc,\n  ]);\n\n  return <div ref={containerRef} className={cn('grainient-container', className)} />;\n};\n\nexport default Grainient;\n"]}

package/dist/highlighter.js

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