@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/blocks/link-playground.js

@@ -0,0 +1,792 @@
+"use client";
+
+// src/kernel/components/blocks/link-playground.tsx
+import { InlineCode } from "../mdx/components/inline-code.js";
+import { Button } from "../ui/button.js";
+import { Link } from "../ui/link.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "../ui/tabs.js";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/kernel/components/blocks/link-playground.tsx
+import { useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultSettings = {
+  defaultColor: "var(--foreground-1)",
+  accentColor: "var(--accent-1)",
+  underlineColor: "currentColor",
+  hoverUnderlineColor: "currentColor",
+  activeUnderlineColor: "currentColor",
+  textOpacity: 90,
+  hoverTextOpacity: 100,
+  activeTextOpacity: 100,
+  standaloneTextOpacity: 90,
+  underlineOpacity: 18,
+  hoverUnderlineOpacity: 38,
+  standaloneHoverUnderlineOpacity: 38,
+  activeUnderlineOpacity: 38,
+  underlineThickness: 1,
+  underlineOffset: -0.08,
+  transitionDuration: 90,
+  transitionEase: "ease-out",
+  lightnessDelta: 0,
+  chromaScale: 1,
+  hueShift: 0
+};
+var toneOrder = ["default", "accent"];
+var variantOrder = ["link.standalone", "link.inline"];
+function adjustedColor(color, settings) {
+  if (settings.lightnessDelta === 0 && settings.chromaScale === 1 && settings.hueShift === 0) {
+    return color;
+  }
+  return `oklch(from ${color} calc(l + ${settings.lightnessDelta / 100}) calc(c * ${settings.chromaScale}) calc(h + ${settings.hueShift}))`;
+}
+function linkStyle({
+  tone,
+  variant,
+  settings
+}) {
+  const baseColor = tone === "accent" ? settings.accentColor : settings.defaultColor;
+  const isStandalone = variant === "link.standalone";
+  const textOpacity = isStandalone ? settings.standaloneTextOpacity : settings.textOpacity;
+  const hoverTextOpacity = isStandalone ? settings.standaloneTextOpacity : settings.hoverTextOpacity;
+  const underlineOpacity = isStandalone ? 0 : settings.underlineOpacity;
+  const hoverUnderlineOpacity = isStandalone ? settings.standaloneHoverUnderlineOpacity : settings.hoverUnderlineOpacity;
+  const underlineColor = settings.underlineColor;
+  const resolvedUnderlineColor = underlineColor === "currentColor" ? baseColor : underlineColor;
+  const resolvedHoverUnderlineColor = settings.hoverUnderlineColor === "currentColor" ? baseColor : settings.hoverUnderlineColor;
+  const resolvedActiveUnderlineColor = settings.activeUnderlineColor === "currentColor" ? baseColor : settings.activeUnderlineColor;
+  return {
+    "--link-active-text-opacity": `${settings.activeTextOpacity}%`,
+    "--link-active-underline-color": adjustedColor(
+      resolvedActiveUnderlineColor,
+      settings
+    ),
+    "--link-active-underline-opacity": `${settings.activeUnderlineOpacity}%`,
+    "--link-color": adjustedColor(baseColor, settings),
+    "--link-hover-text-opacity": `${hoverTextOpacity}%`,
+    "--link-hover-underline-color": adjustedColor(
+      resolvedHoverUnderlineColor,
+      settings
+    ),
+    "--link-hover-underline-opacity": `${hoverUnderlineOpacity}%`,
+    "--link-text-opacity": `${textOpacity}%`,
+    "--link-transition-duration": `${settings.transitionDuration}ms`,
+    "--link-underline-color": adjustedColor(resolvedUnderlineColor, settings),
+    "--link-underline-offset": `${settings.underlineOffset}em`,
+    "--link-underline-opacity": `${underlineOpacity}%`,
+    "--link-underline-thickness": `${settings.underlineThickness}px`,
+    transition: `color ${settings.transitionDuration}ms ${settings.transitionEase}`
+  };
+}
+function buildOutput(settings) {
+  return `/* Link candidate */
+const linkBase =
+  "group/link inline break-words rounded-button font-medium !no-underline hover:!no-underline active:!no-underline transition-colors duration-[${settings.transitionDuration}ms]";
+
+const linkLabel =
+  "relative inline !no-underline after:absolute after:bottom-[${settings.underlineOffset}em] after:left-0 after:h-[${settings.underlineThickness}px] after:w-full after:rounded-inline-code after:bg-current after:content-['']";
+
+const inline =
+  "[--link-text-opacity:${settings.textOpacity}%] [--link-hover-text-opacity:${settings.hoverTextOpacity}%] [--link-active-text-opacity:${settings.activeTextOpacity}%] [--link-underline-opacity:${settings.underlineOpacity}%] [--link-hover-underline-opacity:${settings.hoverUnderlineOpacity}%] [--link-active-underline-opacity:${settings.activeUnderlineOpacity}%]";
+
+const standalone =
+  "[--link-text-opacity:${settings.standaloneTextOpacity}%] [--link-hover-text-opacity:${settings.standaloneTextOpacity}%] [--link-active-text-opacity:${settings.activeTextOpacity}%] [--link-underline-opacity:0%] [--link-hover-underline-opacity:${settings.standaloneHoverUnderlineOpacity}%] [--link-active-underline-opacity:${settings.activeUnderlineOpacity}%]";
+
+/* CSS variables */
+--link-text-opacity: ${settings.textOpacity}%;
+--link-hover-text-opacity: ${settings.hoverTextOpacity}%;
+--link-active-text-opacity: ${settings.activeTextOpacity}%;
+--link-standalone-text-opacity: ${settings.standaloneTextOpacity}%;
+--link-underline-opacity: ${settings.underlineOpacity}%;
+--link-hover-underline-opacity: ${settings.hoverUnderlineOpacity}%;
+--link-standalone-hover-underline-opacity: ${settings.standaloneHoverUnderlineOpacity}%;
+--link-active-underline-opacity: ${settings.activeUnderlineOpacity}%;
+--link-underline-thickness: ${settings.underlineThickness}px;
+--link-underline-offset: ${settings.underlineOffset}em;
+--link-transition-duration: ${settings.transitionDuration}ms;
+--link-transition-ease: ${settings.transitionEase};
+--link-oklch-lightness-delta: ${settings.lightnessDelta / 100};
+--link-oklch-chroma-scale: ${settings.chromaScale};
+--link-oklch-hue-shift: ${settings.hueShift};`;
+}
+function NumberControl({
+  label,
+  max,
+  min,
+  onChange,
+  step = 1,
+  unit,
+  value
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-center justify-between gap-3 text-xs font-medium text-foreground-2",
+        htmlFor: id,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-[11px] text-foreground-3", children: [
+            value,
+            unit
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_4.75rem] items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "h-1 w-full accent-foreground-1",
+          id,
+          max,
+          min,
+          onChange: (event) => onChange(Number(event.target.value)),
+          step,
+          type: "range",
+          value
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "h-8 rounded-button border border-stroke-2 bg-surface-1 px-2 text-right font-mono text-xs text-foreground-1 outline-none focus:border-accent-1",
+          max,
+          min,
+          onChange: (event) => onChange(Number(event.target.value)),
+          step,
+          type: "number",
+          value
+        }
+      )
+    ] })
+  ] });
+}
+function TextControl({
+  label,
+  onChange,
+  value
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: "grid gap-2 text-xs font-medium text-foreground-2",
+      htmlFor: id,
+      children: [
+        label,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "h-8 rounded-button border border-stroke-2 bg-surface-1 px-2 font-mono text-xs text-foreground-1 outline-none focus:border-accent-1",
+            id,
+            onChange: (event) => onChange(event.target.value),
+            spellCheck: false,
+            value
+          }
+        )
+      ]
+    }
+  );
+}
+function SegmentedControl({
+  label,
+  onChange,
+  options,
+  value
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-foreground-2", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid rounded-button border border-stroke-2 bg-surface-2 p-1",
+        style: {
+          gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+        },
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "h-8 rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] px-2 text-xs font-medium capitalize text-foreground-3 transition-colors",
+              option === value && "bg-surface-1 text-foreground-1 shadow-sm"
+            ),
+            onClick: () => onChange(option),
+            type: "button",
+            children: option
+          },
+          option
+        ))
+      }
+    )
+  ] });
+}
+function ControlSection({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "grid gap-4 border-b border-stroke-3 px-4 py-5", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase text-foreground-3", children: title }),
+    children
+  ] });
+}
+function PreviewBlock({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "min-h-64 border-b border-r border-stroke-3 bg-white", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-5 pt-5 text-sm font-medium text-[#858585]", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-52 items-center justify-center px-8 py-8", children })
+  ] });
+}
+function PlaygroundLink({
+  children,
+  disabled,
+  leftIcon,
+  rightIcon,
+  settings,
+  tone,
+  variant
+}) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      color: tone,
+      disabled,
+      href: "#",
+      leftIcon,
+      rightIcon,
+      style: linkStyle({ settings, tone, variant }),
+      variant,
+      children
+    }
+  );
+}
+function LinkSet({ settings }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid justify-items-center gap-6 text-[1.65rem] leading-none", children: [
+    /* @__PURE__ */ jsx(
+      PlaygroundLink,
+      {
+        settings,
+        tone: "default",
+        variant: "link.standalone",
+        children: "Default standalone"
+      }
+    ),
+    /* @__PURE__ */ jsx(PlaygroundLink, { settings, tone: "accent", variant: "link.inline", children: "Accent inline" }),
+    /* @__PURE__ */ jsx(
+      PlaygroundLink,
+      {
+        leftIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2190" }),
+        settings,
+        tone: "default",
+        variant: "link.standalone",
+        children: "Back to overview"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundLink,
+      {
+        rightIcon: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2197" }),
+        settings,
+        tone: "accent",
+        variant: "link.standalone",
+        children: "External resource"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlaygroundLink,
+      {
+        disabled: true,
+        settings,
+        tone: "accent",
+        variant: "link.standalone",
+        children: "Disabled link"
+      }
+    ),
+    /* @__PURE__ */ jsx(Link, { href: "#", size: "lg", variant: "button.primary", children: "Link as button" })
+  ] });
+}
+function SizeScale({ settings }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid justify-items-start gap-3", children: ["xs", "sm", "md", "lg", "xl"].map((size) => /* @__PURE__ */ jsxs(
+    Link,
+    {
+      color: "accent",
+      href: "#",
+      size,
+      style: linkStyle({
+        settings,
+        tone: "accent",
+        variant: "link.standalone"
+      }),
+      variant: "link.standalone",
+      children: [
+        size.toUpperCase(),
+        " accent standalone"
+      ]
+    },
+    size
+  )) });
+}
+function MdxSample({ settings }) {
+  const inlineStyle = linkStyle({
+    settings,
+    tone: "accent",
+    variant: "link.inline"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-xl text-base leading-8 text-foreground-2", children: [
+    /* @__PURE__ */ jsxs("p", { children: [
+      "MDX prose with an",
+      " ",
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          color: "accent",
+          href: "/ds",
+          style: inlineStyle,
+          variant: "link.inline",
+          children: "internal relative link"
+        }
+      ),
+      ", an",
+      " ",
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          color: "accent",
+          href: "https://example.com",
+          style: inlineStyle,
+          variant: "link.inline",
+          children: "external link"
+        }
+      ),
+      ", a",
+      " ",
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", style: inlineStyle, variant: "link.inline", children: /* @__PURE__ */ jsx("strong", { children: "bold link" }) }),
+      ", an",
+      " ",
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", style: inlineStyle, variant: "link.inline", children: /* @__PURE__ */ jsx("em", { children: "italic link" }) }),
+      ", and",
+      " ",
+      /* @__PURE__ */ jsx(Link, { color: "accent", href: "#", style: inlineStyle, variant: "link.inline", children: /* @__PURE__ */ jsx(InlineCode, { children: "linked code" }) }),
+      "."
+    ] }),
+    /* @__PURE__ */ jsx("h2", { className: "mt-7 text-2xl font-semibold leading-9 text-foreground-1", children: /* @__PURE__ */ jsx(
+      Link,
+      {
+        color: "accent",
+        href: "#",
+        style: linkStyle({
+          settings,
+          tone: "accent",
+          variant: "link.standalone"
+        }),
+        variant: "link.standalone",
+        children: "Linked heading"
+      }
+    ) })
+  ] });
+}
+function BlockSamples({ settings }) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full max-w-2xl gap-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-y border-stroke-3 bg-surface-2 px-5 py-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground-1", children: "publishOS / Docs" }),
+      /* @__PURE__ */ jsxs("nav", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(
+          PlaygroundLink,
+          {
+            settings,
+            tone: "accent",
+            variant: "link.standalone",
+            children: "Docs"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PlaygroundLink,
+          {
+            settings,
+            tone: "default",
+            variant: "link.standalone",
+            children: "Blog"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-stroke-2 bg-surface-1 p-5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-foreground-3", children: "Start" }),
+      /* @__PURE__ */ jsxs("ol", { className: "mt-3 list-decimal space-y-2 pl-6 text-lg leading-8 text-foreground-2", children: [
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Connect a",
+          " ",
+          /* @__PURE__ */ jsx(
+            PlaygroundLink,
+            {
+              settings,
+              tone: "accent",
+              variant: "link.inline",
+              children: "custom domain"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Review the",
+          " ",
+          /* @__PURE__ */ jsx(
+            PlaygroundLink,
+            {
+              settings,
+              tone: "default",
+              variant: "link.inline",
+              children: "deployment checklist"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function LinkPlayground() {
+  const [settings, setSettings] = useState(defaultSettings);
+  const [tone, setTone] = useState("accent");
+  const [variant, setVariant] = useState("link.standalone");
+  const [copyState, setCopyState] = useState("idle");
+  const output = useMemo(() => buildOutput(settings), [settings]);
+  const previewStyle = linkStyle({ settings, tone, variant });
+  const updateNumber = (key, value) => {
+    setSettings((current) => ({ ...current, [key]: value }));
+  };
+  const updateText = (key, value) => {
+    setSettings((current) => ({ ...current, [key]: value }));
+  };
+  const reset = () => setSettings(defaultSettings);
+  const copyOutput = async () => {
+    await navigator.clipboard.writeText(output);
+    setCopyState("copied");
+    window.setTimeout(() => setCopyState("idle"), 1200);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-[#fafafa] text-foreground-1", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-screen lg:grid-cols-[1fr_24rem]", children: [
+    /* @__PURE__ */ jsx("main", { className: "min-h-screen overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "grid border-l border-t border-stroke-3", children: [
+      /* @__PURE__ */ jsx(PreviewBlock, { title: "Link", children: /* @__PURE__ */ jsx(LinkSet, { settings }) }),
+      /* @__PURE__ */ jsx(PreviewBlock, { title: "Focused sample", children: /* @__PURE__ */ jsxs("div", { className: "grid justify-items-center gap-5 text-[2rem] leading-none", children: [
+        /* @__PURE__ */ jsxs(
+          Link,
+          {
+            color: tone,
+            href: "#",
+            style: previewStyle,
+            variant,
+            children: [
+              tone,
+              " ",
+              variant
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "font-mono text-xs text-foreground-3", children: "Hover and press directly" })
+      ] }) }),
+      /* @__PURE__ */ jsx(PreviewBlock, { title: "Size scale", children: /* @__PURE__ */ jsx(SizeScale, { settings }) }),
+      /* @__PURE__ */ jsx(PreviewBlock, { title: "MDX", children: /* @__PURE__ */ jsx(MdxSample, { settings }) }),
+      /* @__PURE__ */ jsx(PreviewBlock, { title: "Blocks", children: /* @__PURE__ */ jsx(BlockSamples, { settings }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("aside", { className: "flex max-h-screen min-h-screen flex-col border-l border-stroke-3 bg-surface-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-stroke-3 px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold text-foreground-1", children: "Link Playground" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-foreground-3", children: "Tune states, decoration, OKLCH, copy." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { onClick: reset, size: "xs", variant: "outline", children: "Reset" }),
+          /* @__PURE__ */ jsx(Button, { onClick: copyOutput, size: "xs", variant: "secondary", children: copyState === "copied" ? "Copied" : "Copy" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 border-b border-stroke-3 px-4 py-5", children: [
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            label: "Tone",
+            onChange: setTone,
+            options: toneOrder,
+            value: tone
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            label: "Variant",
+            onChange: setVariant,
+            options: variantOrder,
+            value: variant
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Tabs, { className: "flex min-h-0 flex-1 flex-col", defaultValue: "color", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-stroke-3 px-4 py-3", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-4", children: [
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "color", children: "Color" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "line", children: "Line" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "motion", children: "Motion" }),
+          /* @__PURE__ */ jsx(TabsTab, { className: "px-2 text-xs", value: "output", children: "Output" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+          /* @__PURE__ */ jsxs(TabsPanel, { value: "color", children: [
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Text colors", children: [
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Default color",
+                  onChange: (value) => updateText("defaultColor", value),
+                  value: settings.defaultColor
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Accent color",
+                  onChange: (value) => updateText("accentColor", value),
+                  value: settings.accentColor
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Underline colors", children: [
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Base underline",
+                  onChange: (value) => updateText("underlineColor", value),
+                  value: settings.underlineColor
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Hover underline",
+                  onChange: (value) => updateText("hoverUnderlineColor", value),
+                  value: settings.hoverUnderlineColor
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextControl,
+                {
+                  label: "Active underline",
+                  onChange: (value) => updateText("activeUnderlineColor", value),
+                  value: settings.activeUnderlineColor
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "OKLCH adjustments", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Lightness",
+                  max: 20,
+                  min: -20,
+                  onChange: (value) => updateNumber("lightnessDelta", value),
+                  unit: "%",
+                  value: settings.lightnessDelta
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Chroma scale",
+                  max: 2,
+                  min: 0,
+                  onChange: (value) => updateNumber("chromaScale", value),
+                  step: 0.05,
+                  value: settings.chromaScale
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Hue shift",
+                  max: 180,
+                  min: -180,
+                  onChange: (value) => updateNumber("hueShift", value),
+                  unit: "deg",
+                  value: settings.hueShift
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(TabsPanel, { value: "line", children: [
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Text opacity", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Inline idle",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("textOpacity", value),
+                  unit: "%",
+                  value: settings.textOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Standalone idle",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("standaloneTextOpacity", value),
+                  unit: "%",
+                  value: settings.standaloneTextOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Inline hover",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("hoverTextOpacity", value),
+                  unit: "%",
+                  value: settings.hoverTextOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Active",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("activeTextOpacity", value),
+                  unit: "%",
+                  value: settings.activeTextOpacity
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Underline opacity", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Inline idle",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("underlineOpacity", value),
+                  unit: "%",
+                  value: settings.underlineOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Inline hover",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("hoverUnderlineOpacity", value),
+                  unit: "%",
+                  value: settings.hoverUnderlineOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Standalone hover",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("standaloneHoverUnderlineOpacity", value),
+                  unit: "%",
+                  value: settings.standaloneHoverUnderlineOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Active",
+                  max: 100,
+                  min: 0,
+                  onChange: (value) => updateNumber("activeUnderlineOpacity", value),
+                  unit: "%",
+                  value: settings.activeUnderlineOpacity
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(ControlSection, { title: "Decoration", children: [
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Thickness",
+                  max: 4,
+                  min: 0.5,
+                  onChange: (value) => updateNumber("underlineThickness", value),
+                  step: 0.25,
+                  unit: "px",
+                  value: settings.underlineThickness
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NumberControl,
+                {
+                  label: "Offset",
+                  max: 0.7,
+                  min: -0.7,
+                  onChange: (value) => updateNumber("underlineOffset", value),
+                  step: 0.01,
+                  unit: "em",
+                  value: settings.underlineOffset
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(TabsPanel, { value: "motion", children: /* @__PURE__ */ jsxs(ControlSection, { title: "Transition", children: [
+            /* @__PURE__ */ jsx(
+              NumberControl,
+              {
+                label: "Duration",
+                max: 500,
+                min: 0,
+                onChange: (value) => updateNumber("transitionDuration", value),
+                unit: "ms",
+                value: settings.transitionDuration
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextControl,
+              {
+                label: "Ease",
+                onChange: (value) => updateText("transitionEase", value),
+                value: settings.transitionEase
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(TabsPanel, { className: "h-full", value: "output", children: /* @__PURE__ */ jsxs("div", { className: "grid h-full grid-rows-[1fr_auto] gap-3 p-4", children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                className: "min-h-[26rem] resize-none rounded-panel border border-stroke-2 bg-surface-2 p-3 font-mono text-xs leading-5 text-foreground-1 outline-none focus:border-accent-1",
+                readOnly: true,
+                value: output
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { onClick: copyOutput, size: "sm", variant: "secondary", children: copyState === "copied" ? "Copied output" : "Copy output" })
+          ] }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  LinkPlayground
+};