@yo-yo.art/ui 0.1.1 → 0.2.1

package/dist/components/Button/button-classes.cjs

@@ -1,6 +1,6 @@
 const require_cn = require("../../lib/cn.cjs");
 // src/components/Button/button-classes.ts
-const base = "inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
+const base = "inline-flex cursor-pointer items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
 const variants = {
 	primary: "bg-primary text-primary-content hover:bg-accent hover:text-accent-content",
 	ghost: "border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5",

package/dist/components/Button/button-classes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-classes.cjs","names":["cn"],"sources":["../../../src/components/Button/button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type ButtonVariant = \"primary\" | \"ghost\" | \"link\";\nexport type ButtonSize = \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<ButtonVariant, string> = {\n  primary: \"bg-primary text-primary-content hover:bg-accent hover:text-accent-content\",\n  ghost: \"border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5\",\n  link: \"text-base-content underline-offset-4 hover:underline\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2 text-sm\",\n  md: \"px-6 py-3.5 text-sm\",\n};\n\nexport const buttonClasses = ({\n  variant = \"primary\",\n  size = \"md\",\n  className,\n}: {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA0C;CAC9C,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB,EAC5B,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAcA,WAAAA,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}
+{"version":3,"file":"button-classes.cjs","names":["cn"],"sources":["../../../src/components/Button/button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type ButtonVariant = \"primary\" | \"ghost\" | \"link\";\nexport type ButtonSize = \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<ButtonVariant, string> = {\n  primary: \"bg-primary text-primary-content hover:bg-accent hover:text-accent-content\",\n  ghost: \"border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5\",\n  link: \"text-base-content underline-offset-4 hover:underline\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2 text-sm\",\n  md: \"px-6 py-3.5 text-sm\",\n};\n\nexport const buttonClasses = ({\n  variant = \"primary\",\n  size = \"md\",\n  className,\n}: {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA0C;CAC9C,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB,EAC5B,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAcA,WAAAA,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}

package/dist/components/Button/button-classes.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.mjs";
 // src/components/Button/button-classes.ts
-const base = "inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
+const base = "inline-flex cursor-pointer items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
 const variants = {
 	primary: "bg-primary text-primary-content hover:bg-accent hover:text-accent-content",
 	ghost: "border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5",

package/dist/components/Button/button-classes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-classes.mjs","names":[],"sources":["../../../src/components/Button/button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type ButtonVariant = \"primary\" | \"ghost\" | \"link\";\nexport type ButtonSize = \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<ButtonVariant, string> = {\n  primary: \"bg-primary text-primary-content hover:bg-accent hover:text-accent-content\",\n  ghost: \"border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5\",\n  link: \"text-base-content underline-offset-4 hover:underline\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2 text-sm\",\n  md: \"px-6 py-3.5 text-sm\",\n};\n\nexport const buttonClasses = ({\n  variant = \"primary\",\n  size = \"md\",\n  className,\n}: {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA0C;CAC9C,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB,EAC5B,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAc,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}
+{"version":3,"file":"button-classes.mjs","names":[],"sources":["../../../src/components/Button/button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type ButtonVariant = \"primary\" | \"ghost\" | \"link\";\nexport type ButtonSize = \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<ButtonVariant, string> = {\n  primary: \"bg-primary text-primary-content hover:bg-accent hover:text-accent-content\",\n  ghost: \"border border-base-content/12 bg-transparent text-base-content hover:bg-base-content/5\",\n  link: \"text-base-content underline-offset-4 hover:underline\",\n};\n\nconst sizes: Record<ButtonSize, string> = {\n  sm: \"px-4 py-2 text-sm\",\n  md: \"px-6 py-3.5 text-sm\",\n};\n\nexport const buttonClasses = ({\n  variant = \"primary\",\n  size = \"md\",\n  className,\n}: {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA0C;CAC9C,SAAS;CACT,OAAO;CACP,MAAM;AACR;AAEA,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB,EAC5B,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAc,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}

package/dist/components/IconButton/icon-button-classes.cjs

@@ -1,6 +1,6 @@
 const require_cn = require("../../lib/cn.cjs");
 // src/components/IconButton/icon-button-classes.ts
-const base = "inline-flex items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
+const base = "inline-flex cursor-pointer items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
 const variants = {
 	outline: "border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content",
 	ghost: "border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content"

package/dist/components/IconButton/icon-button-classes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-classes.cjs","names":["cn"],"sources":["../../../src/components/IconButton/icon-button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type IconButtonVariant = \"outline\" | \"ghost\";\nexport type IconButtonSize = \"xs\" | \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<IconButtonVariant, string> = {\n  outline:\n    \"border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content\",\n  ghost:\n    \"border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content\",\n};\n\nconst sizes: Record<IconButtonSize, string> = {\n  xs: \"size-6\",\n  sm: \"size-8\",\n  md: \"size-10\",\n};\n\nexport const iconButtonClasses = ({\n  variant = \"outline\",\n  size = \"sm\",\n  className,\n}: {\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA8C;CAClD,SACE;CACF,OACE;AACJ;AAEA,MAAM,QAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,qBAAqB,EAChC,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAcA,WAAAA,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}
+{"version":3,"file":"icon-button-classes.cjs","names":["cn"],"sources":["../../../src/components/IconButton/icon-button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type IconButtonVariant = \"outline\" | \"ghost\";\nexport type IconButtonSize = \"xs\" | \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<IconButtonVariant, string> = {\n  outline:\n    \"border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content\",\n  ghost:\n    \"border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content\",\n};\n\nconst sizes: Record<IconButtonSize, string> = {\n  xs: \"size-6\",\n  sm: \"size-8\",\n  md: \"size-10\",\n};\n\nexport const iconButtonClasses = ({\n  variant = \"outline\",\n  size = \"sm\",\n  className,\n}: {\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA8C;CAClD,SACE;CACF,OACE;AACJ;AAEA,MAAM,QAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,qBAAqB,EAChC,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAcA,WAAAA,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}

package/dist/components/IconButton/icon-button-classes.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.mjs";
 // src/components/IconButton/icon-button-classes.ts
-const base = "inline-flex items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
+const base = "inline-flex cursor-pointer items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50";
 const variants = {
 	outline: "border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content",
 	ghost: "border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content"

package/dist/components/IconButton/icon-button-classes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-classes.mjs","names":[],"sources":["../../../src/components/IconButton/icon-button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type IconButtonVariant = \"outline\" | \"ghost\";\nexport type IconButtonSize = \"xs\" | \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<IconButtonVariant, string> = {\n  outline:\n    \"border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content\",\n  ghost:\n    \"border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content\",\n};\n\nconst sizes: Record<IconButtonSize, string> = {\n  xs: \"size-6\",\n  sm: \"size-8\",\n  md: \"size-10\",\n};\n\nexport const iconButtonClasses = ({\n  variant = \"outline\",\n  size = \"sm\",\n  className,\n}: {\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA8C;CAClD,SACE;CACF,OACE;AACJ;AAEA,MAAM,QAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,qBAAqB,EAChC,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAc,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}
+{"version":3,"file":"icon-button-classes.mjs","names":[],"sources":["../../../src/components/IconButton/icon-button-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type IconButtonVariant = \"outline\" | \"ghost\";\nexport type IconButtonSize = \"xs\" | \"sm\" | \"md\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center justify-center border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50\";\n\nconst variants: Record<IconButtonVariant, string> = {\n  outline:\n    \"border-base-content/12 bg-base-100/85 text-base-content/60 backdrop-blur-md hover:text-base-content\",\n  ghost:\n    \"border-transparent bg-transparent text-base-content/60 hover:bg-base-content/5 hover:text-base-content\",\n};\n\nconst sizes: Record<IconButtonSize, string> = {\n  xs: \"size-6\",\n  sm: \"size-8\",\n  md: \"size-10\",\n};\n\nexport const iconButtonClasses = ({\n  variant = \"outline\",\n  size = \"sm\",\n  className,\n}: {\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  className?: string;\n} = {}): string => cn(base, variants[variant], sizes[size], className);\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA8C;CAClD,SACE;CACF,OACE;AACJ;AAEA,MAAM,QAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,qBAAqB,EAChC,UAAU,WACV,OAAO,MACP,cAKE,CAAC,MAAc,GAAG,MAAM,SAAS,UAAU,MAAM,OAAO,SAAS"}

package/dist/components/Link/link-classes.cjs

@@ -1,6 +1,6 @@
 const require_cn = require("../../lib/cn.cjs");
 // src/components/Link/link-classes.ts
-const base = "inline-flex items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+const base = "inline-flex cursor-pointer items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
 const tones = {
 	default: "text-base-content",
 	muted: "text-base-content/60 hover:text-base-content"

package/dist/components/Link/link-classes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link-classes.cjs","names":["cn"],"sources":["../../../src/components/Link/link-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type LinkTone = \"default\" | \"muted\";\n\nconst base =\n  \"inline-flex items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\";\n\nconst tones: Record<LinkTone, string> = {\n  default: \"text-base-content\",\n  muted: \"text-base-content/60 hover:text-base-content\",\n};\n\nexport const linkClasses = ({\n  tone = \"default\",\n  className,\n}: {\n  tone?: LinkTone;\n  className?: string;\n} = {}): string => cn(base, tones[tone], className);\n"],"mappings":";;AAIA,MAAM,OACJ;AAEF,MAAM,QAAkC;CACtC,SAAS;CACT,OAAO;AACT;AAEA,MAAa,eAAe,EAC1B,OAAO,WACP,cAIE,CAAC,MAAcA,WAAAA,GAAG,MAAM,MAAM,OAAO,SAAS"}
+{"version":3,"file":"link-classes.cjs","names":["cn"],"sources":["../../../src/components/Link/link-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type LinkTone = \"default\" | \"muted\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\";\n\nconst tones: Record<LinkTone, string> = {\n  default: \"text-base-content\",\n  muted: \"text-base-content/60 hover:text-base-content\",\n};\n\nexport const linkClasses = ({\n  tone = \"default\",\n  className,\n}: {\n  tone?: LinkTone;\n  className?: string;\n} = {}): string => cn(base, tones[tone], className);\n"],"mappings":";;AAIA,MAAM,OACJ;AAEF,MAAM,QAAkC;CACtC,SAAS;CACT,OAAO;AACT;AAEA,MAAa,eAAe,EAC1B,OAAO,WACP,cAIE,CAAC,MAAcA,WAAAA,GAAG,MAAM,MAAM,OAAO,SAAS"}

package/dist/components/Link/link-classes.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.mjs";
 // src/components/Link/link-classes.ts
-const base = "inline-flex items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
+const base = "inline-flex cursor-pointer items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
 const tones = {
 	default: "text-base-content",
 	muted: "text-base-content/60 hover:text-base-content"

package/dist/components/Link/link-classes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"link-classes.mjs","names":[],"sources":["../../../src/components/Link/link-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type LinkTone = \"default\" | \"muted\";\n\nconst base =\n  \"inline-flex items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\";\n\nconst tones: Record<LinkTone, string> = {\n  default: \"text-base-content\",\n  muted: \"text-base-content/60 hover:text-base-content\",\n};\n\nexport const linkClasses = ({\n  tone = \"default\",\n  className,\n}: {\n  tone?: LinkTone;\n  className?: string;\n} = {}): string => cn(base, tones[tone], className);\n"],"mappings":";;AAIA,MAAM,OACJ;AAEF,MAAM,QAAkC;CACtC,SAAS;CACT,OAAO;AACT;AAEA,MAAa,eAAe,EAC1B,OAAO,WACP,cAIE,CAAC,MAAc,GAAG,MAAM,MAAM,OAAO,SAAS"}
+{"version":3,"file":"link-classes.mjs","names":[],"sources":["../../../src/components/Link/link-classes.ts"],"sourcesContent":["import { cn } from \"../../lib/cn\";\n\nexport type LinkTone = \"default\" | \"muted\";\n\nconst base =\n  \"inline-flex cursor-pointer items-center gap-2 text-sm font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent\";\n\nconst tones: Record<LinkTone, string> = {\n  default: \"text-base-content\",\n  muted: \"text-base-content/60 hover:text-base-content\",\n};\n\nexport const linkClasses = ({\n  tone = \"default\",\n  className,\n}: {\n  tone?: LinkTone;\n  className?: string;\n} = {}): string => cn(base, tones[tone], className);\n"],"mappings":";;AAIA,MAAM,OACJ;AAEF,MAAM,QAAkC;CACtC,SAAS;CACT,OAAO;AACT;AAEA,MAAa,eAAe,EAC1B,OAAO,WACP,cAIE,CAAC,MAAc,GAAG,MAAM,MAAM,OAAO,SAAS"}

package/dist/components/Logo3D/Logo3D.cjs

@@ -0,0 +1,64 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+// src/components/Logo3D/Logo3D.tsx
+const LAYERS = 18;
+const DEPTH = 2.25;
+const MAX_TILT = 16;
+/**
+* The mark built in CSS 3D: the same silhouette stacked on the Z axis, with
+* the front face in ink and the extruded side in the accent green. The whole
+* block tilts towards the pointer.
+*/
+const Logo3D = ({ src = "/logo.svg", className = "" }) => {
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const element = ref.current;
+		if (!element) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let frame = 0;
+		const onMove = (event) => {
+			if (frame) return;
+			const clientX = event.clientX;
+			const clientY = event.clientY;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				const rect = element.getBoundingClientRect();
+				const x = clientX - (rect.left + rect.width / 2);
+				const y = clientY - (rect.top + rect.height / 2);
+				const nx = Math.max(-1, Math.min(1, x / 320));
+				const ny = Math.max(-1, Math.min(1, y / 320));
+				element.style.setProperty("--logo-rx", `${(-ny * MAX_TILT).toFixed(2)}deg`);
+				element.style.setProperty("--logo-ry", `${(nx * MAX_TILT).toFixed(2)}deg`);
+			});
+		};
+		const reset = () => {
+			if (frame) window.cancelAnimationFrame(frame);
+			frame = 0;
+			element.style.removeProperty("--logo-rx");
+			element.style.removeProperty("--logo-ry");
+		};
+		window.addEventListener("pointermove", onMove, { passive: true });
+		window.addEventListener("pointerleave", reset);
+		return () => {
+			if (frame) window.cancelAnimationFrame(frame);
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerleave", reset);
+		};
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: `logo3d ${className}`,
+		"aria-hidden": true,
+		style: { "--logo-src": `url("${src}")` },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "logo3d-inner",
+			children: Array.from({ length: LAYERS }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `logo3d-layer ${index === 0 ? "logo3d-front" : "logo3d-depth"}`,
+				style: { transform: `translateZ(${-index * DEPTH}px)` }
+			}, index))
+		})
+	});
+};
+exports.Logo3D = Logo3D;
+
+//# sourceMappingURL=Logo3D.cjs.map

package/dist/components/Logo3D/Logo3D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo3D.cjs","names":["useRef"],"sources":["../../../src/components/Logo3D/Logo3D.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { CSSProperties } from \"react\";\n\nconst LAYERS = 18;\nconst DEPTH = 2.25;\nconst MAX_TILT = 16;\n\nexport type Logo3DProps = {\n  /** Mark URL used as the mask for every layer. */\n  src?: string;\n  className?: string;\n};\n\n/**\n * The mark built in CSS 3D: the same silhouette stacked on the Z axis, with\n * the front face in ink and the extruded side in the accent green. The whole\n * block tilts towards the pointer.\n */\nexport const Logo3D = ({ src = \"/logo.svg\", className = \"\" }: Logo3DProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    let frame = 0;\n\n    const onMove = (event: PointerEvent) => {\n      if (frame) return;\n      const clientX = event.clientX;\n      const clientY = event.clientY;\n\n      frame = window.requestAnimationFrame(() => {\n        frame = 0;\n        const rect = element.getBoundingClientRect();\n        const x = clientX - (rect.left + rect.width / 2);\n        const y = clientY - (rect.top + rect.height / 2);\n        const nx = Math.max(-1, Math.min(1, x / 320));\n        const ny = Math.max(-1, Math.min(1, y / 320));\n\n        element.style.setProperty(\n          \"--logo-rx\",\n          `${(-ny * MAX_TILT).toFixed(2)}deg`,\n        );\n        element.style.setProperty(\n          \"--logo-ry\",\n          `${(nx * MAX_TILT).toFixed(2)}deg`,\n        );\n      });\n    };\n\n    const reset = () => {\n      if (frame) window.cancelAnimationFrame(frame);\n      frame = 0;\n      element.style.removeProperty(\"--logo-rx\");\n      element.style.removeProperty(\"--logo-ry\");\n    };\n\n    window.addEventListener(\"pointermove\", onMove, { passive: true });\n    window.addEventListener(\"pointerleave\", reset);\n    return () => {\n      if (frame) window.cancelAnimationFrame(frame);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerleave\", reset);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={`logo3d ${className}`}\n      aria-hidden\n      style={{ \"--logo-src\": `url(\"${src}\")` } as CSSProperties}\n    >\n      <div className=\"logo3d-inner\">\n        {Array.from({ length: LAYERS }, (_, index) => (\n          <div\n            key={index}\n            className={`logo3d-layer ${index === 0 ? \"logo3d-front\" : \"logo3d-depth\"}`}\n            style={{ transform: `translateZ(${-index * DEPTH}px)` }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,WAAW;;;;;;AAajB,MAAa,UAAU,EAAE,MAAM,aAAa,YAAY,SAAsB;CAC5E,MAAM,OAAA,GAAMA,MAAAA,OAAAA,CAAuB,IAAI;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,IAAI,OAAO,WAAW,kCAAkC,CAAC,CAAC,SAAS;EAEnE,IAAI,QAAQ;EAEZ,MAAM,UAAU,UAAwB;GACtC,IAAI,OAAO;GACX,MAAM,UAAU,MAAM;GACtB,MAAM,UAAU,MAAM;GAEtB,QAAQ,OAAO,4BAA4B;IACzC,QAAQ;IACR,MAAM,OAAO,QAAQ,sBAAsB;IAC3C,MAAM,IAAI,WAAW,KAAK,OAAO,KAAK,QAAQ;IAC9C,MAAM,IAAI,WAAW,KAAK,MAAM,KAAK,SAAS;IAC9C,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC;IAC5C,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC;IAE5C,QAAQ,MAAM,YACZ,aACA,IAAI,CAAC,KAAK,SAAA,CAAU,QAAQ,CAAC,EAAE,IACjC;IACA,QAAQ,MAAM,YACZ,aACA,IAAI,KAAK,SAAA,CAAU,QAAQ,CAAC,EAAE,IAChC;GACF,CAAC;EACH;EAEA,MAAM,cAAc;GAClB,IAAI,OAAO,OAAO,qBAAqB,KAAK;GAC5C,QAAQ;GACR,QAAQ,MAAM,eAAe,WAAW;GACxC,QAAQ,MAAM,eAAe,WAAW;EAC1C;EAEA,OAAO,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;EAChE,OAAO,iBAAiB,gBAAgB,KAAK;EAC7C,aAAa;GACX,IAAI,OAAO,OAAO,qBAAqB,KAAK;GAC5C,OAAO,oBAAoB,eAAe,MAAM;GAChD,OAAO,oBAAoB,gBAAgB,KAAK;EAClD;CACF,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACO;EACL,WAAW,UAAU;EACrB,eAAA;EACA,OAAO,EAAE,cAAc,QAAQ,IAAI,IAAI;EAEvC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,IAAI,GAAG,UAClC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAEE,WAAW,gBAAgB,UAAU,IAAI,iBAAiB;IAC1D,OAAO,EAAE,WAAW,cAAc,CAAC,QAAQ,MAAM,KAAK;GACvD,GAHM,KAGN,CACF;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/Logo3D/Logo3D.d.cts

@@ -0,0 +1,13 @@
+type Logo3DProps = {
+  /** Mark URL used as the mask for every layer. */
+  src?: string;
+  className?: string;
+};
+/**
+ * The mark built in CSS 3D: the same silhouette stacked on the Z axis, with
+ * the front face in ink and the extruded side in the accent green. The whole
+ * block tilts towards the pointer.
+ */
+declare const Logo3D: ({ src, className }: Logo3DProps) => import("react").JSX.Element;
+export { Logo3D, Logo3DProps };
+//# sourceMappingURL=Logo3D.d.cts.map

package/dist/components/Logo3D/Logo3D.d.mts

@@ -0,0 +1,13 @@
+type Logo3DProps = {
+  /** Mark URL used as the mask for every layer. */
+  src?: string;
+  className?: string;
+};
+/**
+ * The mark built in CSS 3D: the same silhouette stacked on the Z axis, with
+ * the front face in ink and the extruded side in the accent green. The whole
+ * block tilts towards the pointer.
+ */
+declare const Logo3D: ({ src, className }: Logo3DProps) => import("react").JSX.Element;
+export { Logo3D, Logo3DProps };
+//# sourceMappingURL=Logo3D.d.mts.map

package/dist/components/Logo3D/Logo3D.mjs

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+// src/components/Logo3D/Logo3D.tsx
+const LAYERS = 18;
+const DEPTH = 2.25;
+const MAX_TILT = 16;
+/**
+* The mark built in CSS 3D: the same silhouette stacked on the Z axis, with
+* the front face in ink and the extruded side in the accent green. The whole
+* block tilts towards the pointer.
+*/
+const Logo3D = ({ src = "/logo.svg", className = "" }) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let frame = 0;
+		const onMove = (event) => {
+			if (frame) return;
+			const clientX = event.clientX;
+			const clientY = event.clientY;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				const rect = element.getBoundingClientRect();
+				const x = clientX - (rect.left + rect.width / 2);
+				const y = clientY - (rect.top + rect.height / 2);
+				const nx = Math.max(-1, Math.min(1, x / 320));
+				const ny = Math.max(-1, Math.min(1, y / 320));
+				element.style.setProperty("--logo-rx", `${(-ny * MAX_TILT).toFixed(2)}deg`);
+				element.style.setProperty("--logo-ry", `${(nx * MAX_TILT).toFixed(2)}deg`);
+			});
+		};
+		const reset = () => {
+			if (frame) window.cancelAnimationFrame(frame);
+			frame = 0;
+			element.style.removeProperty("--logo-rx");
+			element.style.removeProperty("--logo-ry");
+		};
+		window.addEventListener("pointermove", onMove, { passive: true });
+		window.addEventListener("pointerleave", reset);
+		return () => {
+			if (frame) window.cancelAnimationFrame(frame);
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerleave", reset);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: `logo3d ${className}`,
+		"aria-hidden": true,
+		style: { "--logo-src": `url("${src}")` },
+		children: /* @__PURE__ */ jsx("div", {
+			className: "logo3d-inner",
+			children: Array.from({ length: LAYERS }, (_, index) => /* @__PURE__ */ jsx("div", {
+				className: `logo3d-layer ${index === 0 ? "logo3d-front" : "logo3d-depth"}`,
+				style: { transform: `translateZ(${-index * DEPTH}px)` }
+			}, index))
+		})
+	});
+};
+export { Logo3D };
+
+//# sourceMappingURL=Logo3D.mjs.map

package/dist/components/Logo3D/Logo3D.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo3D.mjs","names":[],"sources":["../../../src/components/Logo3D/Logo3D.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { CSSProperties } from \"react\";\n\nconst LAYERS = 18;\nconst DEPTH = 2.25;\nconst MAX_TILT = 16;\n\nexport type Logo3DProps = {\n  /** Mark URL used as the mask for every layer. */\n  src?: string;\n  className?: string;\n};\n\n/**\n * The mark built in CSS 3D: the same silhouette stacked on the Z axis, with\n * the front face in ink and the extruded side in the accent green. The whole\n * block tilts towards the pointer.\n */\nexport const Logo3D = ({ src = \"/logo.svg\", className = \"\" }: Logo3DProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    let frame = 0;\n\n    const onMove = (event: PointerEvent) => {\n      if (frame) return;\n      const clientX = event.clientX;\n      const clientY = event.clientY;\n\n      frame = window.requestAnimationFrame(() => {\n        frame = 0;\n        const rect = element.getBoundingClientRect();\n        const x = clientX - (rect.left + rect.width / 2);\n        const y = clientY - (rect.top + rect.height / 2);\n        const nx = Math.max(-1, Math.min(1, x / 320));\n        const ny = Math.max(-1, Math.min(1, y / 320));\n\n        element.style.setProperty(\n          \"--logo-rx\",\n          `${(-ny * MAX_TILT).toFixed(2)}deg`,\n        );\n        element.style.setProperty(\n          \"--logo-ry\",\n          `${(nx * MAX_TILT).toFixed(2)}deg`,\n        );\n      });\n    };\n\n    const reset = () => {\n      if (frame) window.cancelAnimationFrame(frame);\n      frame = 0;\n      element.style.removeProperty(\"--logo-rx\");\n      element.style.removeProperty(\"--logo-ry\");\n    };\n\n    window.addEventListener(\"pointermove\", onMove, { passive: true });\n    window.addEventListener(\"pointerleave\", reset);\n    return () => {\n      if (frame) window.cancelAnimationFrame(frame);\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerleave\", reset);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={`logo3d ${className}`}\n      aria-hidden\n      style={{ \"--logo-src\": `url(\"${src}\")` } as CSSProperties}\n    >\n      <div className=\"logo3d-inner\">\n        {Array.from({ length: LAYERS }, (_, index) => (\n          <div\n            key={index}\n            className={`logo3d-layer ${index === 0 ? \"logo3d-front\" : \"logo3d-depth\"}`}\n            style={{ transform: `translateZ(${-index * DEPTH}px)` }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAGA,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,WAAW;;;;;;AAajB,MAAa,UAAU,EAAE,MAAM,aAAa,YAAY,SAAsB;CAC5E,MAAM,MAAM,OAAuB,IAAI;CAEvC,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,IAAI,OAAO,WAAW,kCAAkC,CAAC,CAAC,SAAS;EAEnE,IAAI,QAAQ;EAEZ,MAAM,UAAU,UAAwB;GACtC,IAAI,OAAO;GACX,MAAM,UAAU,MAAM;GACtB,MAAM,UAAU,MAAM;GAEtB,QAAQ,OAAO,4BAA4B;IACzC,QAAQ;IACR,MAAM,OAAO,QAAQ,sBAAsB;IAC3C,MAAM,IAAI,WAAW,KAAK,OAAO,KAAK,QAAQ;IAC9C,MAAM,IAAI,WAAW,KAAK,MAAM,KAAK,SAAS;IAC9C,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC;IAC5C,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,CAAC;IAE5C,QAAQ,MAAM,YACZ,aACA,IAAI,CAAC,KAAK,SAAA,CAAU,QAAQ,CAAC,EAAE,IACjC;IACA,QAAQ,MAAM,YACZ,aACA,IAAI,KAAK,SAAA,CAAU,QAAQ,CAAC,EAAE,IAChC;GACF,CAAC;EACH;EAEA,MAAM,cAAc;GAClB,IAAI,OAAO,OAAO,qBAAqB,KAAK;GAC5C,QAAQ;GACR,QAAQ,MAAM,eAAe,WAAW;GACxC,QAAQ,MAAM,eAAe,WAAW;EAC1C;EAEA,OAAO,iBAAiB,eAAe,QAAQ,EAAE,SAAS,KAAK,CAAC;EAChE,OAAO,iBAAiB,gBAAgB,KAAK;EAC7C,aAAa;GACX,IAAI,OAAO,OAAO,qBAAqB,KAAK;GAC5C,OAAO,oBAAoB,eAAe,MAAM;GAChD,OAAO,oBAAoB,gBAAgB,KAAK;EAClD;CACF,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,OAAD;EACO;EACL,WAAW,UAAU;EACrB,eAAA;EACA,OAAO,EAAE,cAAc,QAAQ,IAAI,IAAI;EAEvC,UAAA,oBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,IAAI,GAAG,UAClC,oBAAC,OAAD;IAEE,WAAW,gBAAgB,UAAU,IAAI,iBAAiB;IAC1D,OAAO,EAAE,WAAW,cAAc,CAAC,QAAQ,MAAM,KAAK;GACvD,GAHM,KAGN,CACF;EACE,CAAA;CACF,CAAA;AAET"}

package/dist/components/Logo3D/index.cjs

@@ -0,0 +1,2 @@
+const require_Logo3D = require("./Logo3D.cjs");
+exports.Logo3D = require_Logo3D.Logo3D;

package/dist/components/Logo3D/index.mjs

@@ -0,0 +1 @@
+export { Logo3D } from "./Logo3D.mjs";

package/dist/components/Reveal/Reveal.cjs

@@ -0,0 +1,34 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+// src/components/Reveal/Reveal.tsx
+/** Fades its content up into place the first time it enters the viewport. */
+const Reveal = ({ children, className, delay = 0 }) => {
+	const ref = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const node = ref.current;
+		if (!node) return;
+		if (typeof IntersectionObserver === "undefined" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			node.dataset.shown = "";
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			node.dataset.shown = "";
+			observer.disconnect();
+		}, {
+			threshold: .1,
+			rootMargin: "0px 0px -10% 0px"
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: className ? `reveal ${className}` : "reveal",
+		style: { "--reveal-delay": `${delay}ms` },
+		children
+	});
+};
+exports.Reveal = Reveal;
+
+//# sourceMappingURL=Reveal.cjs.map

package/dist/components/Reveal/Reveal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.cjs","names":["useRef"],"sources":["../../../src/components/Reveal/Reveal.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nexport type RevealProps = {\n  children: ReactNode;\n  className?: string;\n  delay?: number;\n};\n\n/** Fades its content up into place the first time it enters the viewport. */\nexport const Reveal = ({ children, className, delay = 0 }: RevealProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const node = ref.current;\n    if (!node) return;\n\n    if (\n      typeof IntersectionObserver === \"undefined\" ||\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ) {\n      node.dataset.shown = \"\";\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        node.dataset.shown = \"\";\n        observer.disconnect();\n      },\n      { threshold: 0.1, rootMargin: \"0px 0px -10% 0px\" },\n    );\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={className ? `reveal ${className}` : \"reveal\"}\n      style={{ \"--reveal-delay\": `${delay}ms` } as CSSProperties}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAUA,MAAa,UAAU,EAAE,UAAU,WAAW,QAAQ,QAAqB;CACzE,MAAM,OAAA,GAAMA,MAAAA,OAAAA,CAAuB,IAAI;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,MAAM;EAEX,IACE,OAAO,yBAAyB,eAChC,OAAO,WAAW,kCAAkC,CAAC,CAAC,SACtD;GACA,KAAK,QAAQ,QAAQ;GACrB;EACF;EAEA,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAW;GACX,IAAI,CAAC,OAAO,gBAAgB;GAC5B,KAAK,QAAQ,QAAQ;GACrB,SAAS,WAAW;EACtB,GACA;GAAE,WAAW;GAAK,YAAY;EAAmB,CACnD;EAEA,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACO;EACL,WAAW,YAAY,UAAU,cAAc;EAC/C,OAAO,EAAE,kBAAkB,GAAG,MAAM,IAAI;EAEvC;CACE,CAAA;AAET"}

package/dist/components/Reveal/Reveal.d.cts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type RevealProps = {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+};
+/** Fades its content up into place the first time it enters the viewport. */
+declare const Reveal: ({ children, className, delay }: RevealProps) => import("react").JSX.Element;
+export { Reveal, RevealProps };
+//# sourceMappingURL=Reveal.d.cts.map

package/dist/components/Reveal/Reveal.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+type RevealProps = {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+};
+/** Fades its content up into place the first time it enters the viewport. */
+declare const Reveal: ({ children, className, delay }: RevealProps) => import("react").JSX.Element;
+export { Reveal, RevealProps };
+//# sourceMappingURL=Reveal.d.mts.map

package/dist/components/Reveal/Reveal.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+// src/components/Reveal/Reveal.tsx
+/** Fades its content up into place the first time it enters the viewport. */
+const Reveal = ({ children, className, delay = 0 }) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		if (typeof IntersectionObserver === "undefined" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			node.dataset.shown = "";
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			node.dataset.shown = "";
+			observer.disconnect();
+		}, {
+			threshold: .1,
+			rootMargin: "0px 0px -10% 0px"
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: className ? `reveal ${className}` : "reveal",
+		style: { "--reveal-delay": `${delay}ms` },
+		children
+	});
+};
+export { Reveal };
+
+//# sourceMappingURL=Reveal.mjs.map

package/dist/components/Reveal/Reveal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reveal.mjs","names":[],"sources":["../../../src/components/Reveal/Reveal.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nexport type RevealProps = {\n  children: ReactNode;\n  className?: string;\n  delay?: number;\n};\n\n/** Fades its content up into place the first time it enters the viewport. */\nexport const Reveal = ({ children, className, delay = 0 }: RevealProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const node = ref.current;\n    if (!node) return;\n\n    if (\n      typeof IntersectionObserver === \"undefined\" ||\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    ) {\n      node.dataset.shown = \"\";\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        node.dataset.shown = \"\";\n        observer.disconnect();\n      },\n      { threshold: 0.1, rootMargin: \"0px 0px -10% 0px\" },\n    );\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={className ? `reveal ${className}` : \"reveal\"}\n      style={{ \"--reveal-delay\": `${delay}ms` } as CSSProperties}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAUA,MAAa,UAAU,EAAE,UAAU,WAAW,QAAQ,QAAqB;CACzE,MAAM,MAAM,OAAuB,IAAI;CAEvC,gBAAgB;EACd,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,MAAM;EAEX,IACE,OAAO,yBAAyB,eAChC,OAAO,WAAW,kCAAkC,CAAC,CAAC,SACtD;GACA,KAAK,QAAQ,QAAQ;GACrB;EACF;EAEA,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAW;GACX,IAAI,CAAC,OAAO,gBAAgB;GAC5B,KAAK,QAAQ,QAAQ;GACrB,SAAS,WAAW;EACtB,GACA;GAAE,WAAW;GAAK,YAAY;EAAmB,CACnD;EAEA,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,OAAD;EACO;EACL,WAAW,YAAY,UAAU,cAAc;EAC/C,OAAO,EAAE,kBAAkB,GAAG,MAAM,IAAI;EAEvC;CACE,CAAA;AAET"}

package/dist/components/Reveal/index.cjs

@@ -0,0 +1,2 @@
+const require_Reveal = require("./Reveal.cjs");
+exports.Reveal = require_Reveal.Reveal;

package/dist/components/Reveal/index.d.cts

@@ -0,0 +1,2 @@
+import { Reveal, RevealProps } from "./Reveal.cjs";
+export { Reveal, type RevealProps };

package/dist/components/Reveal/index.d.mts

@@ -0,0 +1,2 @@
+import { Reveal, RevealProps } from "./Reveal.mjs";
+export { Reveal, type RevealProps };

package/dist/components/Reveal/index.mjs

@@ -0,0 +1 @@
+export { Reveal } from "./Reveal.mjs";

package/dist/gallery/HomeButton/HomeButton.cjs

@@ -8,7 +8,7 @@ const HomeButton = ({ href, label = "Grupo Yo-Yo" }) => {
 		onPointerDown: stop,
 		onTouchStart: stop,
 		"aria-label": `Volver a ${label}`,
-		className: "fixed left-4 top-4 z-[9999] flex items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content",
+		className: "fixed left-4 top-4 z-[9999] flex cursor-pointer items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, { className: "size-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "hidden sm:inline",
 			children: label

package/dist/gallery/HomeButton/HomeButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HomeButton.cjs","names":["ArrowLeft"],"sources":["../../../src/gallery/HomeButton/HomeButton.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\n\nexport type HomeButtonProps = {\n  href: string;\n  /** Group name shown next to the arrow. */\n  label?: string;\n};\n\nexport const HomeButton = ({ href, label = \"Grupo Yo-Yo\" }: HomeButtonProps) => {\n  const stop = (event: SyntheticEvent) => event.stopPropagation();\n\n  return (\n    <a\n      href={href}\n      onPointerDown={stop}\n      onTouchStart={stop}\n      aria-label={`Volver a ${label}`}\n      className=\"fixed left-4 top-4 z-[9999] flex items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content\"\n    >\n      <ArrowLeft className=\"size-3.5\" />\n      <span className=\"hidden sm:inline\">{label}</span>\n    </a>\n  );\n};\n"],"mappings":";;;AASA,MAAa,cAAc,EAAE,MAAM,QAAQ,oBAAqC;CAC9E,MAAM,QAAQ,UAA0B,MAAM,gBAAgB;CAE9D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;EACQ;EACN,eAAe;EACf,cAAc;EACd,cAAY,YAAY;EACxB,WAAU;EALZ,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,WAAD,EAAW,WAAU,WAAY,CAAA,GACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAoB,UAAA;EAAY,CAAA,CAC/C;;AAEP"}
+{"version":3,"file":"HomeButton.cjs","names":["ArrowLeft"],"sources":["../../../src/gallery/HomeButton/HomeButton.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\n\nexport type HomeButtonProps = {\n  href: string;\n  /** Group name shown next to the arrow. */\n  label?: string;\n};\n\nexport const HomeButton = ({ href, label = \"Grupo Yo-Yo\" }: HomeButtonProps) => {\n  const stop = (event: SyntheticEvent) => event.stopPropagation();\n\n  return (\n    <a\n      href={href}\n      onPointerDown={stop}\n      onTouchStart={stop}\n      aria-label={`Volver a ${label}`}\n      className=\"fixed left-4 top-4 z-[9999] flex cursor-pointer items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content\"\n    >\n      <ArrowLeft className=\"size-3.5\" />\n      <span className=\"hidden sm:inline\">{label}</span>\n    </a>\n  );\n};\n"],"mappings":";;;AASA,MAAa,cAAc,EAAE,MAAM,QAAQ,oBAAqC;CAC9E,MAAM,QAAQ,UAA0B,MAAM,gBAAgB;CAE9D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;EACQ;EACN,eAAe;EACf,cAAc;EACd,cAAY,YAAY;EACxB,WAAU;EALZ,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,WAAD,EAAW,WAAU,WAAY,CAAA,GACjC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAoB,UAAA;EAAY,CAAA,CAC/C;;AAEP"}

package/dist/gallery/HomeButton/HomeButton.mjs

@@ -8,7 +8,7 @@ const HomeButton = ({ href, label = "Grupo Yo-Yo" }) => {
 		onPointerDown: stop,
 		onTouchStart: stop,
 		"aria-label": `Volver a ${label}`,
-		className: "fixed left-4 top-4 z-[9999] flex items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content",
+		className: "fixed left-4 top-4 z-[9999] flex cursor-pointer items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content",
 		children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "size-3.5" }), /* @__PURE__ */ jsx("span", {
 			className: "hidden sm:inline",
 			children: label

package/dist/gallery/HomeButton/HomeButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HomeButton.mjs","names":[],"sources":["../../../src/gallery/HomeButton/HomeButton.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\n\nexport type HomeButtonProps = {\n  href: string;\n  /** Group name shown next to the arrow. */\n  label?: string;\n};\n\nexport const HomeButton = ({ href, label = \"Grupo Yo-Yo\" }: HomeButtonProps) => {\n  const stop = (event: SyntheticEvent) => event.stopPropagation();\n\n  return (\n    <a\n      href={href}\n      onPointerDown={stop}\n      onTouchStart={stop}\n      aria-label={`Volver a ${label}`}\n      className=\"fixed left-4 top-4 z-[9999] flex items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content\"\n    >\n      <ArrowLeft className=\"size-3.5\" />\n      <span className=\"hidden sm:inline\">{label}</span>\n    </a>\n  );\n};\n"],"mappings":";;;AASA,MAAa,cAAc,EAAE,MAAM,QAAQ,oBAAqC;CAC9E,MAAM,QAAQ,UAA0B,MAAM,gBAAgB;CAE9D,OACE,qBAAC,KAAD;EACQ;EACN,eAAe;EACf,cAAc;EACd,cAAY,YAAY;EACxB,WAAU;EALZ,UAAA,CAOE,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA,GACjC,oBAAC,QAAD;GAAM,WAAU;GAAoB,UAAA;EAAY,CAAA,CAC/C;;AAEP"}
+{"version":3,"file":"HomeButton.mjs","names":[],"sources":["../../../src/gallery/HomeButton/HomeButton.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\n\nexport type HomeButtonProps = {\n  href: string;\n  /** Group name shown next to the arrow. */\n  label?: string;\n};\n\nexport const HomeButton = ({ href, label = \"Grupo Yo-Yo\" }: HomeButtonProps) => {\n  const stop = (event: SyntheticEvent) => event.stopPropagation();\n\n  return (\n    <a\n      href={href}\n      onPointerDown={stop}\n      onTouchStart={stop}\n      aria-label={`Volver a ${label}`}\n      className=\"fixed left-4 top-4 z-[9999] flex cursor-pointer items-center gap-2 border border-base-content/12 bg-base-100/85 px-3 py-2 font-mono text-[0.65rem] uppercase tracking-[0.18em] text-base-content/60 backdrop-blur-md transition-colors [touch-action:manipulation] hover:text-base-content\"\n    >\n      <ArrowLeft className=\"size-3.5\" />\n      <span className=\"hidden sm:inline\">{label}</span>\n    </a>\n  );\n};\n"],"mappings":";;;AASA,MAAa,cAAc,EAAE,MAAM,QAAQ,oBAAqC;CAC9E,MAAM,QAAQ,UAA0B,MAAM,gBAAgB;CAE9D,OACE,qBAAC,KAAD;EACQ;EACN,eAAe;EACf,cAAc;EACd,cAAY,YAAY;EACxB,WAAU;EALZ,UAAA,CAOE,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA,GACjC,oBAAC,QAAD;GAAM,WAAU;GAAoB,UAAA;EAAY,CAAA,CAC/C;;AAEP"}

package/dist/index.cjs

@@ -16,9 +16,13 @@ const require_Link = require("./components/Link/Link.cjs");
 require("./components/Link/index.cjs");
 const require_Logo = require("./components/Logo/Logo.cjs");
 require("./components/Logo/index.cjs");
+const require_Logo3D = require("./components/Logo3D/Logo3D.cjs");
+require("./components/Logo3D/index.cjs");
 const require_panel_classes = require("./components/Panel/panel-classes.cjs");
 const require_Panel = require("./components/Panel/Panel.cjs");
 require("./components/Panel/index.cjs");
+const require_Reveal = require("./components/Reveal/Reveal.cjs");
+require("./components/Reveal/index.cjs");
 const require_ThemeToggle = require("./components/ThemeToggle/ThemeToggle.cjs");
 require("./components/ThemeToggle/index.cjs");
 exports.Badge = require_Badge.Badge;
@@ -28,7 +32,9 @@ exports.Eyebrow = require_Eyebrow.Eyebrow;
 exports.IconButton = require_IconButton.IconButton;
 exports.Link = require_Link.Link;
 exports.Logo = require_Logo.Logo;
+exports.Logo3D = require_Logo3D.Logo3D;
 exports.Panel = require_Panel.Panel;
+exports.Reveal = require_Reveal.Reveal;
 exports.ThemeToggle = require_ThemeToggle.ThemeToggle;
 exports.badgeClasses = require_badge_classes.badgeClasses;
 exports.buttonClasses = require_button_classes.buttonClasses;

package/dist/index.d.cts

@@ -14,8 +14,11 @@ import { LinkTone, linkClasses } from "./components/Link/link-classes.cjs";
 import { Link, LinkComponentProps, LinkProps } from "./components/Link/Link.cjs";
 import "./components/Link/index.cjs";
 import { Logo, LogoProps } from "./components/Logo/Logo.cjs";
+import { Logo3D, Logo3DProps } from "./components/Logo3D/Logo3D.cjs";
 import { PanelPadding, PanelTone, panelClasses } from "./components/Panel/panel-classes.cjs";
 import { Panel, PanelProps } from "./components/Panel/Panel.cjs";
 import "./components/Panel/index.cjs";
+import { Reveal, RevealProps } from "./components/Reveal/Reveal.cjs";
+import "./components/Reveal/index.cjs";
 import { ThemeToggle, ThemeToggleProps } from "./components/ThemeToggle/ThemeToggle.cjs";
-export { Badge, type BadgeProps, type BadgeTone, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Eyebrow, type EyebrowProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Link, type LinkComponentProps, type LinkProps, type LinkTone, Logo, type LogoProps, Panel, type PanelPadding, type PanelProps, type PanelTone, ThemeToggle, type ThemeToggleProps, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };
+export { Badge, type BadgeProps, type BadgeTone, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Eyebrow, type EyebrowProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Link, type LinkComponentProps, type LinkProps, type LinkTone, Logo, Logo3D, type Logo3DProps, type LogoProps, Panel, type PanelPadding, type PanelProps, type PanelTone, Reveal, type RevealProps, ThemeToggle, type ThemeToggleProps, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };

package/dist/index.d.mts

@@ -14,8 +14,11 @@ import { LinkTone, linkClasses } from "./components/Link/link-classes.mjs";
 import { Link, LinkComponentProps, LinkProps } from "./components/Link/Link.mjs";
 import "./components/Link/index.mjs";
 import { Logo, LogoProps } from "./components/Logo/Logo.mjs";
+import { Logo3D, Logo3DProps } from "./components/Logo3D/Logo3D.mjs";
 import { PanelPadding, PanelTone, panelClasses } from "./components/Panel/panel-classes.mjs";
 import { Panel, PanelProps } from "./components/Panel/Panel.mjs";
 import "./components/Panel/index.mjs";
+import { Reveal, RevealProps } from "./components/Reveal/Reveal.mjs";
+import "./components/Reveal/index.mjs";
 import { ThemeToggle, ThemeToggleProps } from "./components/ThemeToggle/ThemeToggle.mjs";
-export { Badge, type BadgeProps, type BadgeTone, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Eyebrow, type EyebrowProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Link, type LinkComponentProps, type LinkProps, type LinkTone, Logo, type LogoProps, Panel, type PanelPadding, type PanelProps, type PanelTone, ThemeToggle, type ThemeToggleProps, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };
+export { Badge, type BadgeProps, type BadgeTone, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Eyebrow, type EyebrowProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Link, type LinkComponentProps, type LinkProps, type LinkTone, Logo, Logo3D, type Logo3DProps, type LogoProps, Panel, type PanelPadding, type PanelProps, type PanelTone, Reveal, type RevealProps, ThemeToggle, type ThemeToggleProps, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };

package/dist/index.mjs

@@ -15,9 +15,13 @@ import { Link } from "./components/Link/Link.mjs";
 import "./components/Link/index.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import "./components/Logo/index.mjs";
+import { Logo3D } from "./components/Logo3D/Logo3D.mjs";
+import "./components/Logo3D/index.mjs";
 import { panelClasses } from "./components/Panel/panel-classes.mjs";
 import { Panel } from "./components/Panel/Panel.mjs";
 import "./components/Panel/index.mjs";
+import { Reveal } from "./components/Reveal/Reveal.mjs";
+import "./components/Reveal/index.mjs";
 import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.mjs";
 import "./components/ThemeToggle/index.mjs";
-export { Badge, Button, ButtonLink, Eyebrow, IconButton, Link, Logo, Panel, ThemeToggle, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };
+export { Badge, Button, ButtonLink, Eyebrow, IconButton, Link, Logo, Logo3D, Panel, Reveal, ThemeToggle, badgeClasses, buttonClasses, iconButtonClasses, linkClasses, panelClasses };

package/dist/scenography.css

@@ -215,6 +215,7 @@
 
   .select {
     width: 100%;
+    cursor: pointer;
     padding: 0.375rem 0.625rem;
     border: 1px solid color-mix(in oklab, var(--color-base-content) 15%, transparent);
     background-color: var(--color-base-100);
@@ -319,6 +320,7 @@
   }
 
   .link {
+    cursor: pointer;
     text-decoration-line: underline;
   }
 
@@ -329,4 +331,81 @@
   .link-hover:hover {
     text-decoration-line: underline;
   }
+
+  /*
+   * The artwork panel ships its own white-on-black controls. Restyle its
+   * navigation and close buttons with the design system's square chips.
+   */
+  .sg-artwork-panel .sg-artwork-panel__navbtn {
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid
+      color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    border-radius: 0;
+    background-color: color-mix(
+      in oklab,
+      var(--color-base-100) 80%,
+      transparent
+    );
+    color: var(--color-base-content);
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .sg-artwork-panel .sg-artwork-panel__navbtn:hover {
+    background-color: var(--color-base-200);
+  }
+
+  .sg-artwork-panel .sg-artwork-panel__navbtn:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .sg-artwork-panel .sg-artwork-panel__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 1px solid
+      color-mix(in oklab, var(--color-base-content) 12%, transparent);
+    border-radius: 0;
+    background-color: color-mix(
+      in oklab,
+      var(--color-base-100) 80%,
+      transparent
+    );
+    color: var(--color-base-content);
+    font-family: var(--font-sans);
+    font-size: 1rem;
+    line-height: 1;
+    opacity: 1;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .sg-artwork-panel .sg-artwork-panel__close:hover {
+    background-color: var(--color-base-200);
+  }
+
+  .sg-artwork-panel .sg-artwork-panel__close:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
 }

package/dist/styles.css

@@ -52,6 +52,26 @@
   color: var(--color-accent-content);
 }
 
+/* Every interactive control gets the same pointer, even when an app uses a
+   plain anchor or a native input instead of a package component. */
+a,
+button,
+[role="button"],
+summary,
+label[for],
+select,
+input[type="checkbox"],
+input[type="radio"],
+input[type="range"] {
+  cursor: pointer;
+}
+
+button:disabled,
+input:disabled,
+[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
 /* The acid green reads on black but disappears on paper, so the letter form
    uses a deeper green in light mode and the pure accent in dark mode. */
 .text-accent-ink {
@@ -74,3 +94,75 @@
 [data-theme="yo-yo-dark"] .logo-inverse {
   display: block;
 }
+
+/* CSS-only 3D mark: the SVG is stacked on Z to give it thickness, and the
+   whole stack tilts towards the pointer. */
+.logo3d {
+  perspective: 900px;
+}
+
+.logo3d-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateX(var(--logo-rx, -5deg)) rotateY(var(--logo-ry, 7deg));
+  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+.logo3d-layer {
+  position: absolute;
+  inset: 0;
+  -webkit-mask-image: var(--logo-src, url("/logo.svg"));
+  mask-image: var(--logo-src, url("/logo.svg"));
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-mode: alpha;
+}
+
+.logo3d-front {
+  background: #111111;
+}
+
+[data-theme="yo-yo-dark"] .logo3d-front {
+  background: #f2f0ea;
+}
+
+.logo3d-depth {
+  background: var(--color-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .logo3d-inner {
+    transition: none;
+    will-change: auto;
+  }
+}
+
+/* Content rises into place as it enters the viewport. The root attribute is
+   set before paint so nothing flashes; without JS the content stays visible. */
+html[data-reveal="on"] .reveal {
+  opacity: 0;
+  transform: translateY(1.25rem);
+  transition:
+    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
+    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
+}
+
+html[data-reveal="on"] .reveal[data-shown] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-reveal="on"] .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yo-yo.art/ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "The Grupo Yo-Yo design system: shared React components and tokens.",
   "keywords": [
     "design-system",