@cueplusplus/ui 0.13.0

package/dist/color/color-swatch.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { toAriaColor } from "./_value.js";
+import { checkerClasses } from "./_checker.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { ColorSwatch } from "react-aria-components";
+//#region src/color/color-swatch.tsx
+const SWATCH_SIZES = {
+	sm: "size-icon-sm",
+	md: "size-icon-md",
+	lg: "size-control-sm"
+};
+/**
+* A colour, shown as a chip.
+*
+* Two elements rather than one: the frame carries the rim, the radius and the
+* transparency checkerboard, and React Aria's `ColorSwatch` paints the colour
+* on top of it. One element cannot do both — the library writes the colour into
+* the inline `background-color`, which paints *behind* a background image, so a
+* checkerboard set on the same element would cover the colour instead of
+* backing it.
+*
+* Takes any notation this suite reads, `oklch()` included.
+*
+* `react-aria-components` is an **optional peer**: import this from
+* `@cueplusplus/ui/color`.
+*
+* @example
+* <ColorSwatch color="oklch(0.7 0.15 30)" />
+*/
+function ColorSwatch$1({ size = "md", className, color, ...swatchProps }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "color-swatch",
+		className: cn("relative inline-block shrink-0 overflow-hidden rounded-(--radius-control) border border-border", SWATCH_SIZES[size], checkerClasses, className),
+		children: /* @__PURE__ */ jsx(ColorSwatch, {
+			color: toAriaColor(color),
+			className: "block size-full",
+			...swatchProps
+		})
+	});
+}
+//#endregion
+export { ColorSwatch$1 as ColorSwatch };

package/dist/color/index.d.ts

@@ -0,0 +1,7 @@
+import { ColorFormat, detectColorFormat, formatColorString, toHexString } from "./_convert.js";
+import { ColorArea, ColorAreaProps } from "./color-area.js";
+import { ColorField, ColorFieldProps } from "./color-field.js";
+import { ColorPicker, ColorPickerProps } from "./color-picker.js";
+import { ColorSlider, ColorSliderProps } from "./color-slider.js";
+import { ColorSwatch, ColorSwatchProps, ColorSwatchSize } from "./color-swatch.js";
+export { ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, type ColorFormat, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, type ColorSwatchProps, type ColorSwatchSize, detectColorFormat, formatColorString, toHexString };

package/dist/color/index.js

@@ -0,0 +1,7 @@
+import { detectColorFormat, formatColorString, toHexString } from "./_convert.js";
+import { ColorArea } from "./color-area.js";
+import { ColorField } from "./color-field.js";
+import { ColorSlider } from "./color-slider.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { ColorPicker } from "./color-picker.js";
+export { ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, detectColorFormat, formatColorString, toHexString };

package/dist/configurator/_export.d.ts

@@ -0,0 +1,78 @@
+import { ThemeOverrides, ThemeScope } from "./_overrides.js";
+//#region src/configurator/_export.d.ts
+/**
+ * The four things a configured theme can leave the browser as.
+ *
+ * A panel that only changes the page in front of you is a demo. These are what
+ * make it a tool: the stylesheet you paste, the token file your build reads, the
+ * generator call you check in, and the registry item someone else installs. All
+ * four are derived from the same `ThemeOverrides` value the panel is applying —
+ * the CSS one is *literally* the applied stylesheet — so an export can never
+ * describe a theme the page is not already wearing.
+ *
+ * Two of the four are lossy in a way worth stating out loud:
+ *
+ * - `createTheme()` takes **anchors**, not tokens. Move the accent and the call
+ *   reproduces it exactly; move `--cue-border` and there is no anchor to put it
+ *   in, because borders are derived from the ground. Rather than drop those
+ *   quietly the snippet lists them in a trailing comment and points at the CSS
+ *   export, which is lossless by construction.
+ * - The DTCG file speaks the tokens package's vocabulary, which is not quite the
+ *   CSS one: `--cue-density` is authored as `density-factor`, and
+ *   `--cue-font-scale` has no source token at all (the provider publishes it
+ *   inline, per render). The first is renamed, the second is omitted.
+ *
+ * @internal Not part of the public API.
+ */
+/** Which export a format id refers to. */
+type ExportFormatId = "css" | "dtcg" | "create-theme" | "registry";
+/** One export: what it is, what to call the file, and the text itself. */
+interface ThemeExport {
+  /** Stable id, used as the tab value. */
+  id: ExportFormatId;
+  /** Tab label. */
+  label: string;
+  /** Suggested download filename. */
+  filename: string;
+  /** MIME type for the download. */
+  mediaType: string;
+  /** One line saying what a reader does with it. */
+  description: string;
+  /** The exported text. */
+  text: string;
+}
+interface BuildExportsOptions {
+  /** The overrides to export. */
+  overrides: ThemeOverrides;
+  /** The theme and mode the panel is editing. */
+  scope: ThemeScope;
+  /** Name for the generated theme. Falls back to `"<preset>-custom"` when unusable. */
+  name?: string;
+}
+/**
+ * The name to put on a generated theme.
+ *
+ * The name lands inside `[data-theme="…"]`, a filename and a registry id, so
+ * anything that is not a CSS identifier is refused outright rather than escaped
+ * — and refusal means falling back to a name that always works, not throwing at
+ * a user who is halfway through typing one.
+ *
+ * @param scope - The theme being edited, used for the fallback.
+ * @param name - What the user typed, if anything.
+ * @returns A usable CSS identifier.
+ * @example
+ * exportName({ theme: "terminal", mode: "dark", manifest: terminal }); // → "terminal-custom"
+ */
+declare function exportName(scope: ThemeScope, name?: string): string;
+/**
+ * The four exports for the current state of the panel.
+ *
+ * @param options - The overrides, the scope they were made in, and a name.
+ * @returns One entry per format, in the order the dialog shows them.
+ * @example
+ * const [css] = buildExports({ overrides, scope, name: "acme" });
+ * await navigator.clipboard.writeText(css.text);
+ */
+declare function buildExports(options: BuildExportsOptions): ThemeExport[];
+//#endregion
+export { BuildExportsOptions, ExportFormatId, ThemeExport, buildExports, exportName };

package/dist/configurator/_export.js

@@ -0,0 +1,302 @@
+import { THEME_NAME_PATTERN, tokenProperty } from "../theming/serialize.js";
+import { COLOR_TOKENS, FONT_TOKENS, configuratorCss, isOverridden, resolveValue, scopeKey, tokenKind } from "./_overrides.js";
+//#region src/configurator/_export.ts
+/** The anchors `ThemeAnchors` exposes at the top level, and the token each maps to. */
+const DIRECT_ANCHORS = [
+	["bg", "bg"],
+	["fg", "fg"],
+	["accent", "accent"]
+];
+/** The surface ladder, as `ThemeAnchors.surfaces` spells it. */
+const SURFACE_ANCHORS = [
+	"sunken",
+	"surface-1",
+	"surface-2",
+	"surface-3"
+];
+/** The status tones and the live hue, as `ThemeAnchors.status` spells them. */
+const STATUS_ANCHORS = [
+	"ok",
+	"busy",
+	"warn",
+	"danger",
+	"info",
+	"stream"
+];
+/** `--cue-font-mono` → the `fonts.mono` key `ThemeAnchors` uses. */
+const FONT_ANCHORS = {
+	"font-sans": "sans",
+	"font-mono": "mono",
+	"font-display": "display"
+};
+/** The DTCG source key a token is authored under, where it differs from the CSS name. */
+const DTCG_ALIASES = { density: "density-factor" };
+/**
+* The name to put on a generated theme.
+*
+* The name lands inside `[data-theme="…"]`, a filename and a registry id, so
+* anything that is not a CSS identifier is refused outright rather than escaped
+* — and refusal means falling back to a name that always works, not throwing at
+* a user who is halfway through typing one.
+*
+* @param scope - The theme being edited, used for the fallback.
+* @param name - What the user typed, if anything.
+* @returns A usable CSS identifier.
+* @example
+* exportName({ theme: "terminal", mode: "dark", manifest: terminal }); // → "terminal-custom"
+*/
+function exportName(scope, name) {
+	const proposed = name?.trim() ?? "";
+	return THEME_NAME_PATTERN.test(proposed) ? proposed : `${scope.theme}-custom`;
+}
+/** A JSON string, printed the way a hand-written source file would print it. */
+const json = (value) => `${JSON.stringify(value, null, 2)}\n`;
+/**
+* Both modes of a scope, so an export can carry the palette the user is not
+* looking at.
+*
+* Spread rather than rebuilt: a fresh literal would have to restate `manifest`,
+* and the shape of that mistake is a `null` that resolves the off-mode palette
+* to the blank base — so the `dtcg` and `registry` exports would carry the right
+* colours for the mode on screen and the neutral ramp for the other one, with
+* nothing to see until somebody installed the theme.
+*/
+function bothModes(scope) {
+	return [{
+		...scope,
+		mode: "dark"
+	}, {
+		...scope,
+		mode: "light"
+	}];
+}
+/** The `--cue-*` properties of one kind that the user has actually moved. */
+function movedTokens(overrides, scope, kind) {
+	const scoped = overrides.themes[scopeKey(scope)] ?? {};
+	const candidates = kind === "color" || kind === "font" ? scoped : overrides.global;
+	return Object.keys(candidates).filter((property) => tokenKind(property) === kind);
+}
+/**
+* ② The DTCG token file.
+*
+* A whole theme rather than a diff: the point of this format is that the result
+* can be dropped into a theme package's `src/` — `cue-theme init` scaffolds one,
+* and `packages/theme-<name>/src/<name>.dark.tokens.json` is the shape — or into
+* anyone else's DTCG pipeline, and built, which a patch file cannot. (It used to
+* say `packages/tokens/src/themes/`; that directory is gone, and a palette is a
+* package now.) Groups follow the sources —
+* `color` for the palette, `type` for the stacks, `density` for the multipliers
+* — and appear only when they carry something.
+*/
+function dtcgFile(overrides, scope, name) {
+	const color = { $type: "color" };
+	for (const token of COLOR_TOKENS) color[token] = { $value: resolveValue(overrides, scope, token) };
+	const file = {
+		$description: `Theme: ${name} — exported from the CUE++ theme configurator, based on ${scope.theme} (${scope.mode}).`,
+		color
+	};
+	const fonts = movedTokens(overrides, scope, "font");
+	const tracking = movedTokens(overrides, scope, "flat");
+	if (fonts.length > 0 || tracking.length > 0) {
+		const type = { $type: "fontFamily" };
+		for (const property of fonts) type[property.slice(6)] = { $value: resolveValue(overrides, scope, property) };
+		for (const property of tracking) type[property.slice(6)] = {
+			$type: "dimension",
+			$value: resolveValue(overrides, scope, property)
+		};
+		file["type"] = type;
+	}
+	const multipliers = movedTokens(overrides, scope, "scaled");
+	if (multipliers.length > 0) {
+		const density = {
+			$description: "Multipliers only. They belong to the density axis, so they cross with every level rather than replacing one.",
+			$type: "dimension"
+		};
+		for (const property of multipliers) {
+			const bare = property.slice(6);
+			density[DTCG_ALIASES[bare] ?? bare] = {
+				$type: "number",
+				$value: Number(resolveValue(overrides, scope, property))
+			};
+		}
+		file["density"] = density;
+	}
+	return json(file);
+}
+/**
+* A string literal a human would have typed.
+*
+* Single quotes when the value carries double ones — a font stack is
+* `"Berkeley Mono", monospace`, and `"\"Berkeley Mono\", monospace"` is a thing
+* nobody writes on purpose.
+*/
+function quote(value) {
+	return value.includes("\"") && !value.includes("'") && !value.includes("\\") ? `'${value}'` : JSON.stringify(value);
+}
+/** What a JavaScript binding may be called, and what a printed key may go unquoted as. */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+/** One `key: "value"` line of an object literal, quoting the key only when it must. */
+function property(key, value, indent) {
+	return `${indent}${IDENTIFIER.test(key) ? key : JSON.stringify(key)}: ${quote(value)},`;
+}
+/**
+* What to call the imported base manifest in the snippet.
+*
+* The theme's own name where that is a legal binding — `terminal` reads as what
+* it is — and `base` where it is not (a theme may be called `acme-dark`, which
+* is a fine `data-theme` value and not an identifier). The suffix exists for the
+* one collision this can produce: a user who names their export exactly what the
+* base theme is called would otherwise get `const terminal = createTheme({ base:
+* terminal })`, which is a snippet that does not run.
+*/
+function baseIdentifier(theme, exported) {
+	const proposed = IDENTIFIER.test(theme) ? theme : "base";
+	return proposed === exported ? `${proposed}Base` : proposed;
+}
+/**
+* ③ The `createTheme()` call.
+*
+* Anchors in, stylesheet out — the same two lines a human would have written,
+* with whatever the user moved filled in. Tokens the generator derives rather
+* than accepts are listed underneath instead of being silently dropped, because
+* a snippet that quietly loses half an edit is worse than no snippet.
+*/
+function createThemeSnippet(overrides, scope, name) {
+	const exported = IDENTIFIER.test(name) ? name : "theme";
+	const base = scope.manifest;
+	let baseImport = null;
+	let baseAnchor = null;
+	if (base !== null) {
+		const ident = baseIdentifier(scope.theme, exported);
+		baseImport = `import ${ident} from ${JSON.stringify(base.package)};`;
+		baseAnchor = `  base: ${ident},`;
+	}
+	const lines = [`  name: ${JSON.stringify(name)},`];
+	if (baseAnchor !== null) lines.push(baseAnchor);
+	const unrepresentable = [];
+	for (const [anchor, token] of DIRECT_ANCHORS) if (isOverridden(overrides, scope, token)) lines.push(property(anchor, resolveValue(overrides, scope, token), "  "));
+	const surfaces = SURFACE_ANCHORS.filter((token) => isOverridden(overrides, scope, token));
+	if (surfaces.length > 0) {
+		lines.push("  surfaces: {");
+		for (const token of surfaces) lines.push(property(token, resolveValue(overrides, scope, token), "    "));
+		lines.push("  },");
+	}
+	const statuses = STATUS_ANCHORS.filter((token) => isOverridden(overrides, scope, token));
+	if (statuses.length > 0) {
+		lines.push("  status: {");
+		for (const token of statuses) lines.push(property(token, resolveValue(overrides, scope, token), "    "));
+		lines.push("  },");
+	}
+	const fonts = FONT_TOKENS.filter((token) => isOverridden(overrides, scope, token));
+	if (fonts.length > 0) {
+		lines.push("  fonts: {");
+		for (const token of fonts) lines.push(property(FONT_ANCHORS[token], resolveValue(overrides, scope, token), "    "));
+		lines.push("  },");
+	}
+	if (isOverridden(overrides, scope, "radius-scale")) lines.push(`  radiusScale: ${Number(resolveValue(overrides, scope, "radius-scale"))},`);
+	const anchored = new Set([
+		...DIRECT_ANCHORS.map(([, token]) => token),
+		...SURFACE_ANCHORS,
+		...STATUS_ANCHORS,
+		...FONT_TOKENS,
+		"radius-scale"
+	].map(tokenProperty));
+	for (const moved of [...Object.keys(overrides.themes[scopeKey(scope)] ?? {}), ...Object.keys(overrides.global)]) {
+		if (anchored.has(moved)) continue;
+		unrepresentable.push(`${moved}: ${resolveValue(overrides, scope, moved)}`);
+	}
+	const notes = [];
+	if (base === null) notes.push(`// no manifest is registered for "${scope.theme}"; this call starts from the blank base.`);
+	if (unrepresentable.length > 0) notes.push("// createTheme() derives these rather than taking them as anchors, so they are not", "// in the call above. Ship the CSS export alongside it — that one is lossless.", ...unrepresentable.map((entry) => `// ${entry}`));
+	const footer = notes.length === 0 ? "" : [
+		"",
+		...notes,
+		""
+	].join("\n");
+	return [
+		"import { createTheme } from \"@cueplusplus/ui/theming\";",
+		...baseImport === null ? [] : [baseImport],
+		"",
+		`export const ${exported} = createTheme({`,
+		...lines,
+		"});",
+		footer
+	].join("\n");
+}
+/**
+* ④ The shadcn registry item.
+*
+* `cssVars` is keyed the way shadcn keys it — no leading dashes, and a `theme`
+* bucket for the variables that do not belong to a mode. Both palettes are
+* written in full, including the one the user was not looking at, because an
+* installer has no way to ask.
+*/
+function registryItem(overrides, scope, name) {
+	const strip = (property) => property.replace(/^--/, "");
+	const palette = (mode) => Object.fromEntries(COLOR_TOKENS.map((token) => [strip(tokenProperty(token)), resolveValue(overrides, mode, token)]));
+	const [dark, light] = bothModes(scope);
+	const shared = {};
+	for (const moved of [...FONT_TOKENS.map(tokenProperty), ...Object.keys(overrides.global)]) {
+		if (!isOverridden(overrides, scope, moved)) continue;
+		shared[strip(moved)] = resolveValue(overrides, scope, moved);
+	}
+	return json({
+		$schema: "https://ui.shadcn.com/schema/registry-item.json",
+		name,
+		type: "registry:theme",
+		cssVars: {
+			...Object.keys(shared).length === 0 ? null : { theme: shared },
+			light: palette(light),
+			dark: palette(dark)
+		}
+	});
+}
+/**
+* The four exports for the current state of the panel.
+*
+* @param options - The overrides, the scope they were made in, and a name.
+* @returns One entry per format, in the order the dialog shows them.
+* @example
+* const [css] = buildExports({ overrides, scope, name: "acme" });
+* await navigator.clipboard.writeText(css.text);
+*/
+function buildExports(options) {
+	const { overrides, scope } = options;
+	const name = exportName(scope, options.name);
+	return [
+		{
+			id: "css",
+			label: "CSS",
+			filename: `${name}.css`,
+			mediaType: "text/css",
+			description: "The override stylesheet, exactly as the panel is applying it.",
+			text: configuratorCss(overrides)
+		},
+		{
+			id: "dtcg",
+			label: "Tokens",
+			filename: `${name}.tokens.json`,
+			mediaType: "application/json",
+			description: "A DTCG token file, in the shape packages/tokens builds from.",
+			text: dtcgFile(overrides, scope, name)
+		},
+		{
+			id: "create-theme",
+			label: "createTheme()",
+			filename: `${name}.theme.ts`,
+			mediaType: "text/plain",
+			description: "The generator call that reproduces the anchors you moved.",
+			text: createThemeSnippet(overrides, scope, name)
+		},
+		{
+			id: "registry",
+			label: "Registry",
+			filename: `${name}.registry.json`,
+			mediaType: "application/json",
+			description: "A shadcn registry:theme item, both modes resolved.",
+			text: registryItem(overrides, scope, name)
+		}
+	];
+}
+//#endregion
+export { buildExports, exportName };

package/dist/configurator/_glyphs.js

@@ -0,0 +1,92 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/configurator/_glyphs.tsx
+/**
+* The configurator's own glyphs.
+*
+* Drawn inline, like every other group's, so a panel that edits the design
+* system does not put an icon package on its render path. `currentColor`
+* throughout — the tone comes from the button underneath.
+*
+* @internal Not part of the public API.
+*/
+/** A counter-clockwise arrow: put this one token back. */
+function ResetGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M3 8a5 5 0 1 0 1.6-3.7" }), /* @__PURE__ */ jsx("path", { d: "M3 3v3.2h3.2" })]
+	});
+}
+/** Two short rules: the grab surface of the title bar. */
+function GripGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M3 6h10" }), /* @__PURE__ */ jsx("path", { d: "M3 10h10" })]
+	});
+}
+/** A frame with a rail down its right edge: dock the panel. */
+function DockGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2",
+			y: "3",
+			width: "12",
+			height: "10",
+			rx: "1.5"
+		}), /* @__PURE__ */ jsx("path", { d: "M10 3v10" })]
+	});
+}
+/** A chevron, rotated by the caller to point at the state it will move to. */
+function ChevronGlyph(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M4 6.5 8 10.5l4-4" })
+	});
+}
+/** An arrow into a tray: save this export to a file. */
+function DownloadGlyph(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M8 2.5v7" }),
+			/* @__PURE__ */ jsx("path", { d: "M5 7l3 3 3-3" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 12.5h10" })
+		]
+	});
+}
+//#endregion
+export { ChevronGlyph, DockGlyph, DownloadGlyph, GripGlyph, ResetGlyph };