@publish.os/nextjs 0.0.1-alpha.81 → 0.0.1-alpha.91

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

@@ -1,744 +0,0 @@
-"use client";
-
-// src/modules/design-system/link-playground.tsx
-import { InlineCode } from "@publish.os/nextjs/kernel/components/mdx/components/inline-code";
-import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
-import { Link } from "@publish.os/nextjs/kernel/components/ui/link";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "@publish.os/nextjs/kernel/components/ui/tabs";
-import { cn } from "@publish.os/nextjs/utils/cn";
-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
-}, toneOrder = ["default", "accent"], variantOrder = ["link.standalone", "link.inline"];
-function adjustedColor(color, settings) {
-  return settings.lightnessDelta === 0 && settings.chromaScale === 1 && settings.hueShift === 0 ? color : `oklch(from ${color} calc(l + ${settings.lightnessDelta / 100}) calc(c * ${settings.chromaScale}) calc(h + ${settings.hueShift}))`;
-}
-function linkStyle({
-  tone,
-  variant,
-  settings
-}) {
-  let baseColor = tone === "accent" ? settings.accentColor : settings.defaultColor, isStandalone = variant === "link.standalone", textOpacity = isStandalone ? settings.standaloneTextOpacity : settings.textOpacity, hoverTextOpacity = isStandalone ? settings.standaloneTextOpacity : settings.hoverTextOpacity, underlineOpacity = isStandalone ? 0 : settings.underlineOpacity, hoverUnderlineOpacity = isStandalone ? settings.standaloneHoverUnderlineOpacity : settings.hoverUnderlineOpacity, underlineColor = settings.underlineColor, resolvedUnderlineColor = underlineColor === "currentColor" ? baseColor : underlineColor, resolvedHoverUnderlineColor = settings.hoverUnderlineColor === "currentColor" ? baseColor : settings.hoverUnderlineColor, 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
-}) {
-  let 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-1-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
-}) {
-  let 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: !1,
-            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-surface-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "px-5 pt-5 text-sm font-medium text-foreground-3", 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: !0,
-        settings,
-        tone: "accent",
-        variant: "link.standalone",
-        children: "Disabled link"
-      }
-    ),
-    /* @__PURE__ */ jsx(Link, { href: "#", size: "lg", variant: "button.solid", 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 }) {
-  let 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() {
-  let [settings, setSettings] = useState(defaultSettings), [tone, setTone] = useState("accent"), [variant, setVariant] = useState("link.standalone"), [copyState, setCopyState] = useState("idle"), output = useMemo(() => buildOutput(settings), [settings]), previewStyle = linkStyle({ settings, tone, variant }), updateNumber = (key, value) => {
-    setSettings((current) => ({ ...current, [key]: value }));
-  }, updateText = (key, value) => {
-    setSettings((current) => ({ ...current, [key]: value }));
-  }, reset = () => setSettings(defaultSettings), copyOutput = async () => {
-    await navigator.clipboard.writeText(output), setCopyState("copied"), window.setTimeout(() => setCopyState("idle"), 1200);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-surface-page 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: "soft", 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: !0,
-                value: output
-              }
-            ),
-            /* @__PURE__ */ jsx(Button, { onClick: copyOutput, size: "sm", variant: "soft", children: copyState === "copied" ? "Copied output" : "Copy output" })
-          ] }) })
-        ] })
-      ] })
-    ] })
-  ] }) });
-}
-export {
-  LinkPlayground
-};