@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/code-block-editor.js

@@ -1,250 +0,0 @@
-"use client";
-import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
-import { cn } from "./lib/cn.js";
-import { Button } from "./ui/button.js";
-import { ScrollArea } from "./ui/scroll-area.js";
-import { highlightCodeToTokens } from "./lib/code-block-shiki.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip.js";
-import { Children, Fragment, createContext, isValidElement, use, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "lucide-react";
-//#region src/code-block-editor.tsx
-const CodeBlockEditorContext = createContext(null);
-function useCodeBlockEditorContext() {
-	const context = use(CodeBlockEditorContext);
-	if (!context) throw new Error("CodeBlockEditor compound parts must be rendered inside <CodeBlockEditor>.");
-	return context;
-}
-function resolveCodeBlockEditorClasses({ overflow, density, variant }) {
-	const isCommand = variant === "command";
-	const isCompact = density === "compact" || isCommand;
-	return {
-		codeClassName: cn(overflow === "scroll" ? isCommand ? "w-full max-w-full overflow-x-auto whitespace-pre" : "w-max min-w-full whitespace-pre" : "w-full whitespace-pre-wrap break-words"),
-		editorClassName: cn("w-full max-w-full overflow-auto", overflow === "scroll" ? "whitespace-pre" : "whitespace-pre-wrap break-words"),
-		scrollable: !isCommand,
-		maxHeight: isCompact ? "320px" : "520px"
-	};
-}
-function hasCodeBlockEditorHeader(children) {
-	return Children.toArray(children).some((child) => isValidElement(child) && child.type === CodeBlockEditorHeader);
-}
-function createKeyedTokenLines(lines) {
-	return lines.reduce((state, line) => {
-		const tokenState = line.reduce((tokenAccumulator, token) => ({
-			offset: tokenAccumulator.offset + token.content.length,
-			tokens: [...tokenAccumulator.tokens, {
-				key: tokenAccumulator.offset,
-				content: token.content,
-				style: token.style
-			}]
-		}), {
-			offset: state.offset,
-			tokens: []
-		});
-		return {
-			offset: tokenState.offset + 1,
-			lines: [...state.lines, {
-				key: state.offset,
-				tokens: tokenState.tokens
-			}]
-		};
-	}, {
-		offset: 0,
-		lines: []
-	}).lines;
-}
-function useHighlightedTokens({ code, lang, tokens, highlight }) {
-	const tokenKey = `${lang ?? ""}\n${code}`;
-	const [clientTokens, setClientTokens] = useState(null);
-	useEffect(() => {
-		if (highlight === "none" || tokens !== void 0 || !lang) return;
-		let cancelled = false;
-		const requestKey = `${lang}\n${code}`;
-		highlightCodeToTokens(code, lang).then((result) => {
-			if (!cancelled) setClientTokens({
-				key: requestKey,
-				tokens: result
-			});
-		}).catch(() => {
-			if (!cancelled) setClientTokens({
-				key: requestKey,
-				tokens: null
-			});
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [
-		code,
-		lang,
-		tokens,
-		highlight
-	]);
-	if (highlight === "none") return null;
-	return tokens ?? (clientTokens?.key === tokenKey ? clientTokens.tokens : null);
-}
-function CodeBlockEditorCode({ code, lang, tokens, highlight, maxHeight, scrollAreaClassName, scrollable, className, ...props }) {
-	const highlightedTokens = useHighlightedTokens({
-		code,
-		lang,
-		tokens,
-		highlight
-	});
-	const codeNode = highlightedTokens === null || highlightedTokens.length === 0 ? /* @__PURE__ */ jsx("code", { children: code }) : /* @__PURE__ */ jsx("code", { children: createKeyedTokenLines(highlightedTokens).map((line, lineIndex, keyedLines) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: line.tokens.map((token) => /* @__PURE__ */ jsx("span", {
-		style: token.style,
-		children: token.content
-	}, token.key)) }), lineIndex !== keyedLines.length - 1 ? "\n" : null] }, line.key)) });
-	const block = /* @__PURE__ */ jsx("pre", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "content",
-		className,
-		...props,
-		children: codeNode
-	});
-	if (!scrollable) return block;
-	return /* @__PURE__ */ jsx(ScrollArea, {
-		className: scrollAreaClassName,
-		maxHeight,
-		children: block
-	});
-}
-function CodeBlockEditor({ overflow, chrome = "standalone", density = "default", variant = "default", className, children, ...props }) {
-	const resolvedOverflow = overflow ?? (variant === "command" ? "wrap" : "scroll");
-	const hasHeader = hasCodeBlockEditorHeader(children);
-	return /* @__PURE__ */ jsx(CodeBlockEditorContext.Provider, {
-		value: {
-			overflow: resolvedOverflow,
-			chrome,
-			density,
-			variant,
-			hasHeader
-		},
-		children: /* @__PURE__ */ jsx("figure", {
-			"data-control-ui": "code-block-editor",
-			"data-control-family": "code-block-editor",
-			"data-slot": "root",
-			"data-surface": "panel",
-			"data-variant": variant,
-			"data-chrome": chrome,
-			"data-density": density,
-			"data-header": hasHeader ? "true" : void 0,
-			className: cn("min-w-0 overflow-hidden", !hasHeader && "relative", className),
-			...props,
-			children
-		})
-	});
-}
-function CodeBlockEditorHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("figcaption", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "header",
-		className: cn("flex items-center justify-between", className),
-		...props
-	});
-}
-function CodeBlockEditorTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "title",
-		className: cn("block min-w-0 truncate", className),
-		...props
-	});
-}
-function CodeBlockEditorActions({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "actions",
-		className: cn("flex shrink-0 items-center", className),
-		...props
-	});
-}
-function CodeBlockEditorCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, className, "aria-label": ariaLabel, ...props }) {
-	const { isCopied, handleCopy } = useCopyToClipboard({ text: value });
-	const isIconOnly = children === void 0;
-	const label = ariaLabel ?? (isIconOnly ? "Copy code" : void 0);
-	const copied = copiedLabel ?? (isIconOnly ? /* @__PURE__ */ jsx(CheckIcon, {
-		"aria-hidden": "true",
-		className: "size-3.5"
-	}) : "Copied");
-	const button = /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		variant: "quiet",
-		size: "xs",
-		"aria-live": "polite",
-		"aria-label": label && isCopied ? copiedAriaLabel : label,
-		"data-code-block-editor-copy": isIconOnly ? "true" : void 0,
-		className,
-		...props,
-		onClick: handleCopy,
-		children: isCopied ? copied : children ?? /* @__PURE__ */ jsx(CopyIcon, {
-			"aria-hidden": "true",
-			className: "size-3.5"
-		})
-	});
-	if (!isIconOnly) return button;
-	return /* @__PURE__ */ jsx(TooltipProvider, {
-		delay: 0,
-		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipContent, {
-			side: "left",
-			children: label
-		})] })
-	});
-}
-function CodeBlockEditorFloatingCopy({ className, ...props }) {
-	return /* @__PURE__ */ jsx(CodeBlockEditorCopy, {
-		"data-code-block-editor-floating-copy": "true",
-		className: cn("absolute top-2 right-2 z-10", className),
-		...props
-	});
-}
-function CodeBlockEditorContent({ code, lang, tokens, highlight = "auto", maxHeight, scrollAreaClassName, className, ...props }) {
-	const context = useCodeBlockEditorContext();
-	const classes = resolveCodeBlockEditorClasses(context);
-	const content = /* @__PURE__ */ jsx(CodeBlockEditorCode, {
-		code,
-		lang,
-		tokens,
-		highlight,
-		maxHeight: maxHeight ?? classes.maxHeight,
-		scrollAreaClassName,
-		scrollable: classes.scrollable,
-		className: cn(classes.codeClassName, className),
-		...props
-	});
-	if (context.hasHeader) return content;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "floating-frame",
-		className: "relative",
-		children: [/* @__PURE__ */ jsx(CodeBlockEditorFloatingCopy, { value: code }), content]
-	});
-}
-function CodeBlockEditorTextarea({ value, defaultValue = "", onValueChange, onChange, fileName, className, "aria-label": ariaLabel, ...props }) {
-	const { editorClassName } = resolveCodeBlockEditorClasses(useCodeBlockEditorContext());
-	const [internalValue, setInternalValue] = useState(defaultValue);
-	const currentValue = value ?? internalValue;
-	function handleChange(event) {
-		const nextValue = event.target.value;
-		if (value === void 0) setInternalValue(nextValue);
-		onValueChange?.(nextValue);
-		onChange?.(event);
-	}
-	return /* @__PURE__ */ jsx("textarea", {
-		"data-control-ui": "code-block-editor",
-		"data-control-family": "code-block-editor",
-		"data-slot": "editor",
-		value: currentValue,
-		onChange: handleChange,
-		"aria-label": ariaLabel ?? (fileName ? `${fileName} code` : "Code editor"),
-		spellCheck: false,
-		className: cn(editorClassName, "block resize-y", className),
-		...props
-	});
-}
-//#endregion
-export { CodeBlockEditor, CodeBlockEditorActions, CodeBlockEditorContent, CodeBlockEditorCopy, CodeBlockEditorFloatingCopy, CodeBlockEditorHeader, CodeBlockEditorTextarea, CodeBlockEditorTitle };

package/dist/knob-contracts/code-block-editor-knobs.d.ts

@@ -1,5 +0,0 @@
-//#region src/knob-contracts/code-block-editor-knobs.d.ts
-declare const codeBlockEditorKnobs: readonly ["--cui-code-block-editor-radius", "--cui-code-block-editor-background", "--cui-code-block-editor-border-color", "--cui-code-block-editor-shadow", "--cui-code-block-editor-title-foreground", "--cui-code-block-editor-code-background"];
-type CodeBlockEditorKnobStyle = Partial<Record<(typeof codeBlockEditorKnobs)[number], string>>;
-//#endregion
-export { CodeBlockEditorKnobStyle, codeBlockEditorKnobs };

package/dist/knob-contracts/code-block-editor-knobs.js

@@ -1,11 +0,0 @@
-//#region src/knob-contracts/code-block-editor-knobs.ts
-const codeBlockEditorKnobs = [
-	"--cui-code-block-editor-radius",
-	"--cui-code-block-editor-background",
-	"--cui-code-block-editor-border-color",
-	"--cui-code-block-editor-shadow",
-	"--cui-code-block-editor-title-foreground",
-	"--cui-code-block-editor-code-background"
-];
-//#endregion
-export { codeBlockEditorKnobs };

package/dist/lib/code-block-shiki.d.ts

@@ -1,9 +0,0 @@
-import { CodeToken, CodeTokenLines, CodeTokenStyle, highlightToTokens, normalizeLanguage as normalizeLanguage$1 } from "./code-tokens.js";
-//#region src/lib/code-block-shiki.d.ts
-type CodeBlockEditorToken = CodeToken;
-type CodeBlockEditorTokenLines = CodeTokenLines;
-type CodeBlockEditorTokenStyle = CodeTokenStyle;
-declare const highlightCodeToTokens: typeof highlightToTokens;
-declare const normalizeLanguage: typeof normalizeLanguage$1;
-//#endregion
-export { CodeBlockEditorToken, CodeBlockEditorTokenLines, CodeBlockEditorTokenStyle, highlightCodeToTokens, normalizeLanguage };

package/dist/lib/code-block-shiki.js

@@ -1,6 +0,0 @@
-import { highlightToTokens, normalizeLanguage as normalizeLanguage$1 } from "./code-tokens.js";
-//#region src/lib/code-block-shiki.ts
-const highlightCodeToTokens = highlightToTokens;
-const normalizeLanguage = normalizeLanguage$1;
-//#endregion
-export { highlightCodeToTokens, normalizeLanguage };

package/dist/skin.config.d.ts

@@ -1,5 +0,0 @@
-import { ControlUiSkin } from "./skin.js";
-//#region src/skin.config.d.ts
-declare const skin: ControlUiSkin;
-//#endregion
-export { skin };

package/dist/skin.config.js

@@ -1,12 +0,0 @@
-//#region src/skin.config.tsx
-const skin = {
-	id: "refined",
-	indicators: {
-		sidebar: "hover",
-		"button-group": "hover",
-		"toggle-group": "hover",
-		"checkbox-group": "hover"
-	}
-};
-//#endregion
-export { skin };

package/dist/styles/recipes/code-block-editor.css

@@ -1,136 +0,0 @@
-@layer components {
-  :where([data-control-family="code-block-editor"][data-slot="root"]) {
-    --cui-code-block-editor-background: var(--background);
-    --cui-code-block-editor-border-color: var(--border);
-    --cui-code-block-editor-radius: min(var(--radius-panel), calc(0.5rem * var(--nest-corner-ratio)));
-    --cui-code-block-editor-shadow: var(--shadow-sm);
-    --cui-code-block-editor-code-background: var(--background);
-    --cui-code-block-editor-title-foreground: var(--muted-foreground);
-    margin-block: calc(var(--spacing) * 4);
-    border: 1px solid var(--cui-code-block-editor-border-color);
-    border-radius: var(--cui-code-block-editor-radius);
-    background: var(--cui-code-block-editor-background);
-    box-shadow: var(--cui-code-block-editor-shadow);
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="root"][data-chrome="embedded"]) {
-    margin-block: 0;
-    border-width: 0px;
-    border-radius: 0px;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="header"]) {
-    min-block-size: calc(var(--spacing) * 11);
-    gap: calc(var(--spacing) * 3);
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-    border-bottom: 1px solid var(--border);
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="actions"]) {
-    gap: calc(var(--spacing) * 1);
-  }
-
-  :where([data-control-family="button"][data-code-block-editor-copy="true"]) {
-    inline-size: calc(var(--spacing) * 7);
-    block-size: calc(var(--spacing) * 7);
-    padding: 0;
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="title"]) {
-    color: var(--cui-code-block-editor-title-foreground);
-    font-size: var(--text-label);
-    font-family: var(--font-mono);
-  }
-
-  :where([data-control-family="code-block-editor"]:is([data-slot="content"], [data-slot="editor"])) {
-    min-block-size: 160px;
-    padding: calc(var(--spacing) * 4);
-    background: var(--cui-code-block-editor-code-background);
-    color: var(--code-foreground);
-    font-size: var(--text-label);
-  }
-
-  :where(
-    [data-control-family="code-block-editor"][data-slot="root"][data-chrome="embedded"] :is([data-slot="content"], [data-slot="editor"])
-  ) {
-    background: transparent;
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="editor"]) {
-    max-block-size: 520px;
-    border-width: 0px;
-    outline: none;
-  }
-
-  :where(
-    [data-control-family="code-block-editor"][data-slot="root"]:is([data-density="compact"], [data-variant="command"])
-      :is([data-slot="content"], [data-slot="editor"])
-  ) {
-    min-block-size: 0;
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-  }
-
-  :where(
-    [data-control-family="code-block-editor"][data-slot="root"]:is([data-density="compact"], [data-variant="command"]) [data-slot="editor"]
-  ) {
-    max-block-size: 320px;
-  }
-
-  :where([data-control-family="code-block-editor"][data-slot="floating-frame"]) {
-    padding-block-start: calc(var(--spacing) * 5);
-  }
-
-  :where(
-    [data-control-family="code-block-editor"][data-slot="root"]:is([data-density="compact"], [data-variant="command"])
-      [data-slot="floating-frame"]
-  ) {
-    padding-block-start: calc(var(--spacing) * 7);
-  }
-
-  :where([data-control-family="button"][data-code-block-editor-floating-copy="true"]) {
-    background: oklch(from var(--background) l c h / 0.85);
-    box-shadow:
-      inset 0 0 0 1px var(--border),
-      var(--shadow-sm);
-    backdrop-filter: blur(var(--backdrop-blur-popover));
-  }
-}
-
-@property --cui-code-block-editor-radius {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 0px;
-}
-
-@property --cui-code-block-editor-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-code-block-editor-border-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-code-block-editor-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
-@property --cui-code-block-editor-title-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-code-block-editor-code-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}

package/dist/styles/skin-theme.css

@@ -1,137 +0,0 @@
-[data-skin="refined"][data-skin] {
-  /* Geist via next/font (--font-geist-sans); host without it falls to system stack. */
-  --font-sans: var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Liberation Mono", monospace;
-
-  --text-label: 0.75rem; /* 12px — form labels + small chrome (nav item, tooltip, shortcut) */
-
-  /* Headings run medium, not bold, and pull tight — Geist at -0.03em is the whole voice. */
-  --text-heading-4--font-weight: 500;
-  --text-heading-3--font-weight: 500;
-  --text-heading-2--font-weight: 500;
-  --text-heading-1--font-weight: 500;
-  --text-heading-1--letter-spacing: -0.03em;
-  --text-display--font-weight: 500;
-  --text-display--letter-spacing: -0.03em;
-
-  /* shadcn base names, full colors, authored in oklch (wider gamut, matches Tailwind/shadcn v4); any format still works.
-     Refined brand = four warm-paper neutrals (#FFF / #F5F4F3 / #F4F2F0 / #EEECEA) under a cool ink (#060612), so the
-     page reads as pressed paper and every edge comes from light, not from a line. */
-  --background: oklch(0.984 0.0018 68);
-  --foreground: oklch(0.1304 0.0277 282);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.1304 0.0277 282);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.1304 0.0277 282);
-  --primary: oklch(0.1304 0.0277 282);
-  --primary-foreground: oklch(1 0 0);
-  --muted: oklch(0.9441 0.0034 68);
-  --muted-foreground: oklch(0.5202 0.0094 294);
-  --secondary: oklch(0.9621 0.0034 68);
-  --secondary-foreground: oklch(0.1304 0.0277 282);
-  --accent: oklch(0.9441 0.0034 68);
-  --accent-foreground: oklch(0.1304 0.0277 282);
-  --destructive: oklch(0.568 0.1961 32);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.915 0.004 68 / var(--ring-opacity));
-  --input: oklch(0.915 0.004 68);
-  /* The brand orange only ever lands on the focus ring: white-on-#FF6321 is 2.98:1, so it can never be a fill
-     that carries text. --focus-ring darkens to their button rim (#CF4E17) to clear 3:1 against the paper. */
-  --ring: oklch(0.6931 0.2032 40);
-  --focus-ring: oklch(0.5911 0.1746 40);
-  --primary-text: oklch(0.48 0.16 40); /* links and primary-tone text: the orange darkened until it clears 4.5:1 on paper */
-
-  /* Page canvas, a level below --background/--card/--popover (all elevated surfaces); GitHub Primer calls this `canvas`.
-     Keep it clear of --muted (0.9441): when the two match, every muted surface dropped straight onto the page — a
-     standalone Code block, say — reads as nothing but its ring. Light ladder: muted < secondary < canvas < background < card. */
-  --canvas: oklch(0.9676 0.0017 68);
-
-  /* popover/dropdown/select/dialog all read bg-popover, so this pair frosts them together. 1 = solid; <1 + blur = glass. */
-  --popover-opacity: 1;
-  --backdrop-blur-popover: 0px;
-
-  /* modal overlay (dialog backdrop) — dim and blur are theme-driven; color derives from foreground/background. */
-  --overlay-opacity: 0.2;
-  --backdrop-blur-overlay: 1px;
-
-  /* Edge-fade depth shared by scroll-surface masks. 0 = hard edges. */
-  --scroll-fade-size: 2rem;
-
-  /* elevation controls */
-  --shadow-color: oklch(0.1304 0.0277 282); /* hue every shadow tints with — the ink itself, cool near-black */
-  /* Top-light stays at the alpha their raised chrome uses (white 0.08): invisible on a white card, a bare catch on ink.
-     Recipes scale it by opacity/size knobs too, so --shadow-size:0 extinguishes it with everything else. */
-  --shadow-highlight: oklch(1 0 0 / 0.08);
-  --shadow-size: 1; /* global geometry multiplier: 1 = default depth, 0 = flat */
-  --shadow-opacity: 1; /* global alpha multiplier: 1 = default density, 0 = invisible */
-
-  /* THE radius knob; @theme surface scale + --radius-control both derive from it — squares (0) or rounds whole UI. */
-  --radius: 0.5rem;
-  /* Controls sit at THE radius, not a multiple of it: an 8px corner on a 36px button is the rounded rect they use everywhere. */
-  --radius-control: var(--radius);
-
-  /* Progressive enhancement over border-radius; `round` = current look, squircle/superellipse(2)/scoop reshape Control UI surfaces. */
-  /* Squircle reads ~half as round as a circular arc at same radius; browsers w/o corner-shape support fall back to
-     plain round and look over-rounded. This ratio shrinks the fallback radius (squircle only, see @supports not
-     below) to keep cross-browser look close. 1 = no change, 0.5 = halve. */
-
-  /* Floating-list (select/dropdown) concentric corners: container radius = row radius + padding, so hovered row nests exactly. */
-  --popover-padding: 0.25rem; /* gap between container edge and rows (also = p-* on the popup) */
-  --radius-popup-item: calc(var(--radius-control) * 0.6); /* select/menu row corner */
-  /* Container corner = fitted row radius + padding - 1px: ring-clip nests concentric rows with slack,
-     1px tighter hugs snugly (~1.6px clearance); clamp collapses offset to 0 when --radius is 0. */
-
-  /* content density for the rounded surfaces (bubble / composer field) */
-  --padding-x: 1rem;
-  --padding-y: 0.625rem;
-
-  /* One base height; xs/sm/md/lg are computed (proportional ramp), shared by button/select/menu/input.
-     --padding-y stays for content-sized surfaces (bubble/composer). */
-  --control-h: 2.25rem; /* md — THE base height; ramp derives from it */
-  /* round() snaps to whole px: unrounded step ceils scrollHeight past clientHeight, Base UI reads as phantom 1px overflow. */
-
-  /* motion — curves are raw vars so they can be swapped live */
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
-  --duration-fast: 150ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-}
-
-/* Semantic rungs re-declared on the skin root so portal-scoped radius changes resolve locally;
-   the sm–2xl scale is a derived-tier default in core theme.css. */
-[data-skin="refined"][data-skin] {
-  --radius-field: var(--radius); /* user bubble, composer shell */
-  /* Kraftbase rounds every content surface the same 8px; only the scene-scale frames go bigger. */
-  --radius-panel: var(--radius);
-  --radius-scene: calc(var(--radius) * 2); /* scene frame, large media */
-}
-
-:where(.dark) [data-skin="refined"][data-skin],
-.dark[data-skin="refined"][data-skin] {
-  --background: oklch(0.1852 0.0113 250);
-  --foreground: oklch(0.9645 0.0033 250);
-  --card: oklch(0.2153 0.0121 250);
-  --card-foreground: oklch(0.9645 0.0033 250);
-  --popover: oklch(0.2153 0.0121 250);
-  --popover-foreground: oklch(0.9645 0.0033 250);
-  --primary: oklch(0.9645 0.0033 250);
-  --primary-foreground: oklch(0.1852 0.0113 250);
-  --muted: oklch(0.2668 0.0128 250);
-  --muted-foreground: oklch(0.7405 0.0104 260);
-  --secondary: oklch(0.2412 0.0124 250);
-  --secondary-foreground: oklch(0.9645 0.0033 250);
-  --accent: oklch(0.2864 0.0132 250);
-  --accent-foreground: oklch(0.9645 0.0033 250);
-  --destructive: oklch(0.551 0.1799 32);
-  --destructive-foreground: oklch(0.9645 0.0033 250);
-  --border: oklch(0.3082 0.0139 250 / var(--ring-opacity));
-  --input: oklch(0.3082 0.0139 250);
-  --ring: oklch(0.6931 0.2032 40);
-  --focus-ring: oklch(0.72 0.19 42);
-  --primary-text: oklch(0.78 0.16 42);
-  --canvas: oklch(0.1322 0.0113 250);
-  --shadow-color: oklch(0 0 0);
-  /* In dark the inner top light is a faint edge catch, not a glow. */
-  --shadow-highlight: oklch(1 0 0 / 0.055);
-}