@tenphi/tasty 0.13.1 → 0.14.0

package/docs/getting-started.md

@@ -1,6 +1,6 @@
 # Getting Started
 
-This guide walks you from zero to a working Tasty setup with tooling. For a feature overview, see the [README](../README.md). For the full style language reference, see the [Style DSL](dsl.md). For the React API, see the [Runtime API](runtime.md).
+This guide walks you from zero to a working Tasty component, then through the optional shared configuration and tooling layers. For a feature overview, see the [README](../README.md). For the full style language reference, see the [Style DSL](dsl.md). For the React API, see the [Runtime API](runtime.md). For the rest of the docs by role or task, see the [Docs Hub](README.md).
 
 ---
 
@@ -47,9 +47,9 @@ export default function App() {
 
 ---
 
-## Add configuration
+## Optional: add shared configuration
 
-Call `configure()` once, before your app renders, to define state aliases and other conventions your components share:
+Use `configure()` once, before your app renders, when your app or design system needs shared state aliases, tokens, recipes, or parser extensions:
 
 ```tsx
 // src/tasty-config.ts
@@ -63,6 +63,8 @@ configure({
 });
 ```
 
+These examples use `data-schema="dark"` as the root-state convention. If your app already uses a different attribute such as `data-theme="dark"`, keep the pattern and swap the attribute name consistently across your config and components.
+
 Import this file at the top of your app entry point so it runs before any component renders:
 
 ```tsx
@@ -74,9 +76,9 @@ import App from './App';
 createRoot(document.getElementById('root')!).render(<App />);
 ```
 
-### Define design tokens and unit values
+### Define shared tokens and override default unit values
 
-Color tokens like `#primary` resolve to CSS custom properties at runtime (e.g. `var(--primary-color)`). Built-in units like `x`, `r`, and `bw` also multiply CSS custom properties. Define them via `configure({ tokens })`:
+Color tokens like `#primary` resolve to CSS custom properties at runtime (e.g. `var(--primary-color)`). Built-in units like `x`, `r`, and `bw` already work without setup and multiply CSS custom properties by default. Use `configure({ tokens })` when you want to define shared token values or override the defaults your app uses:
 
 ```tsx
 // src/tasty-config.ts
@@ -108,7 +110,7 @@ configure({
 });
 ```
 
-Every component using `#primary`, `2x`, or `1r` adjusts automatically. Tokens are injected as `:root` CSS custom properties when the first style is rendered.
+Every component using `#primary`, `2x`, or `1r` adjusts automatically. Tokens are injected as `:root` CSS custom properties when the first style is rendered. You can also use standard CSS color values such as `rgb(...)`, `hsl(...)`, and named colors directly; `okhsl(...)` is the recommended choice when you want authored colors that stay aligned with Tasty's design-system-oriented workflow.
 
 > **Note:** `configure({ replaceTokens })` is a separate mechanism — it replaces tokens with literal values at parse time (baked into CSS). Use it for value aliases like `$card-padding: '4x'` that should be resolved during style generation, not for defining color or unit values. See [Configuration — Replace Tokens](configuration.md#replace-tokens-parse-time-substitution) for details.
 
@@ -142,7 +144,7 @@ export default [
 
 ### What `recommended` catches
 
-The recommended config enables 18 rules covering the most common issues:
+The `recommended` config enables 18 of the plugin's 27 total rules. It covers the most common issues without turning on the stricter governance rules:
 
 | Category | Rules | Examples |
 |----------|-------|---------|
@@ -193,9 +195,21 @@ All three share the same DSL, tokens, units, and state mappings.
 
 ## Next steps
 
+- **[Docs Hub](README.md)** — Pick the next guide by role, rendering mode, or task
 - **[Methodology](methodology.md)** — The recommended patterns for structuring Tasty components: sub-elements, styleProps, tokens, extension
 - **[Style DSL](dsl.md)** — State maps, tokens, units, extending semantics, keyframes, @property
 - **[Runtime API](runtime.md)** — `tasty()` factory, component props, variants, sub-elements, hooks
 - **[Building a Design System](design-system.md)** — Practical guide to building a DS layer with Tasty: tokens, recipes, primitives, compound components
+- **[Adoption Guide](adoption.md)** — Roll out Tasty inside an existing design system or platform team
+- **[Comparison](comparison.md)** — Evaluate Tasty against other styling systems
 - **[Configuration](configuration.md)** — Full `configure()` API: tokens, recipes, custom units, style handlers, TypeScript extensions
 - **[Style Properties](styles.md)** — Complete reference for all enhanced style properties
+- **[Debug Utilities](debug.md)** — Inspect generated CSS and debug runtime behavior when styles do not look right
+
+---
+
+## Common issues
+
+- Styles are missing on first render: make sure the file that calls `configure()` is imported before any `tasty()` component renders.
+- Token or unit values are not what you expect: check your `configure({ tokens, units })` setup, then inspect the generated CSS variables with [Debug Utilities](debug.md).
+- You need zero-runtime or SSR instead of the default runtime path: use [Zero Runtime (tastyStatic)](tasty-static.md) or [Server-Side Rendering](ssr.md) rather than trying to retrofit the runtime setup later.

package/docs/injector.md

@@ -199,7 +199,7 @@ slideIn.dispose();   // Immediate keyframes deletion from DOM
 
 ### `configure(config): void`
 
-Configures the Tasty style system. Must be called **before** any styles are generated (before first render).
+Configures the Tasty style system. `configure()` is optional, but if you use it, it must be called **before** any styles are generated (before first render).
 
 ```typescript
 import { configure } from '@tenphi/tasty';
@@ -216,7 +216,7 @@ configure({
   nonce: 'csp-nonce',                // CSP nonce for security
   states: {                          // Global predefined states for advanced state mapping
     '@mobile': '@media(w < 768px)',
-    '@dark': '@root(theme=dark)',
+    '@dark': '@root(schema=dark)',
   },
 });
 ```

package/docs/runtime.md

@@ -1,6 +1,6 @@
 # Runtime API
 
-The React-specific `tasty()` component factory, component props, and hooks. For the shared style language (state maps, tokens, units, extending semantics), see [Style DSL](dsl.md). For global configuration, see [Configuration](configuration.md).
+The React-specific `tasty()` component factory, component props, and hooks. For the shared style language (state maps, tokens, units, extending semantics), see [Style DSL](dsl.md). For global configuration, see [Configuration](configuration.md). For the broader docs map, see the [Docs Hub](README.md).
 
 ---
 
@@ -262,23 +262,72 @@ function GlobalReset() {
 }
 ```
 
-### useMergeStyles
+### useKeyframes
 
-Merge multiple style objects for compound component prop forwarding:
+Inject `@keyframes` rules and return the generated animation name:
 
 ```tsx
-import { useMergeStyles } from '@tenphi/tasty';
+import { useKeyframes } from '@tenphi/tasty';
 
-function MyTabs({ styles, tabListStyles, prefixStyles }) {
-  const mergedStyles = useMergeStyles(styles, {
-    TabList: tabListStyles,
-    Prefix: prefixStyles,
+function Spinner() {
+  const spin = useKeyframes(
+    {
+      from: { transform: 'rotate(0deg)' },
+      to: { transform: 'rotate(360deg)' },
+    },
+    { name: 'spin' }
+  );
+
+  return <div style={{ animation: `${spin} 1s linear infinite` }} />;
+}
+```
+
+`useKeyframes()` also supports a factory function with dependencies:
+
+```tsx
+function Pulse({ scale }: { scale: number }) {
+  const pulse = useKeyframes(
+    () => ({
+      '0%': { transform: 'scale(1)' },
+      '100%': { transform: `scale(${scale})` },
+    }),
+    [scale]
+  );
+
+  return <div style={{ animation: `${pulse} 500ms ease-in-out alternate infinite` }} />;
+}
+```
+
+### useProperty
+
+Register a CSS `@property` rule so a custom property can animate smoothly:
+
+```tsx
+import { useProperty } from '@tenphi/tasty';
+
+function Spinner() {
+  useProperty('$rotation', {
+    syntax: '<angle>',
+    inherits: false,
+    initialValue: '0deg',
   });
 
-  return <TabsElement styles={mergedStyles} />;
+  return <div style={{ transform: 'rotate(var(--rotation))' }} />;
 }
 ```
 
+`useProperty()` accepts Tasty token syntax for the property name:
+
+- `$name` defines `--name`
+- `#name` defines `--name-color` and auto-infers `<color>`
+- `--name` is also supported for existing CSS variables
+
+### Troubleshooting
+
+- Styles are not updating: make sure `configure()` runs before first render, and verify the generated class name or global rule with [Debug Utilities](debug.md).
+- SSR output looks wrong: check the [SSR guide](ssr.md) because the hooks integrate with SSR collectors differently than the client-only runtime path.
+- Animation/custom property issues: prefer `useKeyframes()` and `useProperty()` over raw CSS when you want Tasty to manage injection and SSR collection for you.
+
 ---
 
 ## Learn more
@@ -289,3 +338,4 @@ function MyTabs({ styles, tabListStyles, prefixStyles }) {
 - **[Style Properties](styles.md)** — Complete reference for all enhanced style properties
 - **[Zero Runtime (tastyStatic)](tasty-static.md)** — Build-time static styling with Babel plugin
 - **[Server-Side Rendering](ssr.md)** — SSR setup for Next.js, Astro, and generic frameworks
+- **[Debug Utilities](debug.md)** — Inspect injected CSS, cache state, and active styles at runtime

package/docs/ssr.md

@@ -1,6 +1,6 @@
 # Server-Side Rendering (SSR)
 
-Tasty supports server-side rendering with zero-cost client hydration. Your existing `tasty()` components work unchanged -- SSR is opt-in and requires no per-component modifications.
+Tasty supports server-side rendering with zero-cost client hydration. Your existing `tasty()` components work unchanged -- SSR is opt-in and requires no per-component modifications. For the broader docs map, see the [Docs Hub](README.md).
 
 ---
 
@@ -8,7 +8,7 @@ Tasty supports server-side rendering with zero-cost client hydration. Your exist
 
 | Dependency | Version | Required for |
 |---|---|---|
-| `react` | >= 18 | All SSR entry points (peer dependency of `@tenphi/tasty`) |
+| `react` | >= 18 | All SSR entry points (matches the current peer dependency of `@tenphi/tasty`) |
 | `next` | >= 13 | Next.js integration (`@tenphi/tasty/ssr/next`) — App Router with `useServerInsertedHTML` |
 | Node.js | >= 20 | Generic / streaming SSR (`@tenphi/tasty/ssr`) — uses `node:async_hooks` for `AsyncLocalStorage` |
 

package/docs/styles.md

@@ -252,7 +252,7 @@ Text color with design token support.
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
 | `true` | `currentColor` |
 
-When set to a named color token, also sets `$current-color` and `$current-color-rgb` custom properties for downstream use.
+When set to a named color token, also sets `$current-color` and `$current-color-{colorSpace}` custom properties for downstream use (suffix depends on the configured `colorSpace`, default `oklch`).
 
 ### `svgFill`
 

package/docs/tasty-static.md

@@ -1,6 +1,6 @@
 # Zero Runtime Mode (tastyStatic)
 
-`tastyStatic` is a build-time utility for generating CSS with zero runtime overhead. It's designed for static sites, no-JS websites, and performance-critical applications where you want to eliminate all runtime styling code.
+`tastyStatic` is a build-time utility for generating CSS with zero runtime overhead. It's designed for static sites, no-JS websites, and performance-critical applications where you want to eliminate all runtime styling code. For the broader docs map, see the [Docs Hub](README.md).
 
 ---
 
@@ -130,6 +130,8 @@ module.exports = {
 };
 ```
 
+These examples use `data-schema="dark"` as the root-state convention. If your app already uses a different root attribute such as `data-theme`, keep the same alias pattern and swap the attribute name consistently in your zero-runtime config.
+
 ### With Configuration
 
 ```javascript
@@ -141,7 +143,7 @@ module.exports = {
         states: {
           '@mobile': '@media(w < 768px)',
           '@tablet': '@media(w < 1024px)',
-          '@dark': '@root(theme=dark)',
+          '@dark': '@root(schema=dark)',
         },
         devMode: true,
       },
@@ -413,8 +415,17 @@ const card = tastyStatic({
 
 ---
 
+## Common Issues
+
+- No CSS file is generated: make sure the Babel plugin actually runs for files importing `@tenphi/tasty/static`, and verify the `output` path is writable.
+- Styles stay dynamic by mistake: `tastyStatic()` only supports build-time-known values. Move runtime values to CSS variables or switch that component to runtime `tasty()`.
+- Turbopack config behaves inconsistently: prefer `configFile` over inline functions so the setup stays JSON-serializable.
+
+---
+
 ## Related
 
+- [Docs Hub](README.md) — Choose the right guide by task or rendering mode
 - [Style DSL](dsl.md) — State maps, tokens, units, extending semantics (shared by runtime and static)
 - [Runtime API](runtime.md) — Runtime styling: `tasty()` factory, component props, variants, sub-elements, hooks
 - [Configuration](configuration.md) — Global configuration: tokens, recipes, custom units, and style handlers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -168,7 +168,7 @@
         "path",
         "crypto"
       ],
-      "limit": "27 kB"
+      "limit": "28 kB"
     },
     {
       "name": "babel-plugin",
@@ -179,7 +179,7 @@
         "path",
         "crypto"
       ],
-      "limit": "38 kB"
+      "limit": "39 kB"
     }
   ],
   "scripts": {
@@ -193,6 +193,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
     "size": "size-limit",
+    "bench": "vitest bench",
     "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset publish",

package/dist/utils/hsl-to-rgb.js

@@ -1,38 +0,0 @@
-import { hslToRgbValues } from "./process-tokens.js";
-
-//#region src/utils/hsl-to-rgb.ts
-/**
-* Convert HSL color string to RGB.
-* Supports:
-* - Modern: hsl(h s% l%), hsl(h s% l% / a)
-* - Legacy: hsl(h, s%, l%), hsla(h, s%, l%, a)
-*/
-function hslToRgb(hslStr) {
-	const match = hslStr.match(/hsla?\(([^)]+)\)/i);
-	if (!match) return null;
-	const [colorPart, slashAlpha] = match[1].trim().split("/");
-	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
-	if (parts.length < 3) return null;
-	const alphaPart = slashAlpha?.trim() || (parts.length >= 4 ? parts[3] : null);
-	let h = parseFloat(parts[0]);
-	const hueStr = parts[0].toLowerCase();
-	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
-	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
-	h = (h % 360 + 360) % 360;
-	const parsePercent = (val) => {
-		const num = parseFloat(val);
-		return val.includes("%") ? num / 100 : num;
-	};
-	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
-	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
-	const [r, g, b] = hslToRgbValues(h, s, l);
-	if (alphaPart) {
-		const alpha = parseFloat(alphaPart.trim());
-		return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;
-	}
-	return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;
-}
-
-//#endregion
-export { hslToRgb };
-//# sourceMappingURL=hsl-to-rgb.js.map

package/dist/utils/hsl-to-rgb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hsl-to-rgb.js","names":[],"sources":["../../src/utils/hsl-to-rgb.ts"],"sourcesContent":["import { hslToRgbValues } from './process-tokens';\n\n/**\n * Convert HSL color string to RGB.\n * Supports:\n * - Modern: hsl(h s% l%), hsl(h s% l% / a)\n * - Legacy: hsl(h, s%, l%), hsla(h, s%, l%, a)\n */\nexport function hslToRgb(hslStr: string): string | null {\n  const match = hslStr.match(/hsla?\\(([^)]+)\\)/i);\n  if (!match) return null;\n\n  const inner = match[1].trim();\n  const [colorPart, slashAlpha] = inner.split('/');\n  const parts = colorPart\n    .trim()\n    .split(/[,\\s]+/)\n    .filter(Boolean);\n\n  if (parts.length < 3) return null;\n\n  // Alpha can come from slash notation (modern) or 4th part (legacy comma syntax)\n  const alphaPart = slashAlpha?.trim() || (parts.length >= 4 ? parts[3] : null);\n\n  // Parse hue\n  let h = parseFloat(parts[0]);\n  const hueStr = parts[0].toLowerCase();\n  if (hueStr.endsWith('turn')) h = parseFloat(hueStr) * 360;\n  else if (hueStr.endsWith('rad')) h = (parseFloat(hueStr) * 180) / Math.PI;\n  h = ((h % 360) + 360) % 360;\n\n  // Parse saturation and lightness\n  const parsePercent = (val: string): number => {\n    const num = parseFloat(val);\n    return val.includes('%') ? num / 100 : num;\n  };\n  const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n  const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n  // Use shared HSL to RGB conversion\n  const [r, g, b] = hslToRgbValues(h, s, l);\n\n  if (alphaPart) {\n    const alpha = parseFloat(alphaPart.trim());\n    return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;\n  }\n\n  return `rgb(${Math.round(r)} ${Math.round(g)} ${Math.round(b)})`;\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,SAAS,QAA+B;CACtD,MAAM,QAAQ,OAAO,MAAM,oBAAoB;AAC/C,KAAI,CAAC,MAAO,QAAO;CAGnB,MAAM,CAAC,WAAW,cADJ,MAAM,GAAG,MAAM,CACS,MAAM,IAAI;CAChD,MAAM,QAAQ,UACX,MAAM,CACN,MAAM,SAAS,CACf,OAAO,QAAQ;AAElB,KAAI,MAAM,SAAS,EAAG,QAAO;CAG7B,MAAM,YAAY,YAAY,MAAM,KAAK,MAAM,UAAU,IAAI,MAAM,KAAK;CAGxE,IAAI,IAAI,WAAW,MAAM,GAAG;CAC5B,MAAM,SAAS,MAAM,GAAG,aAAa;AACrC,KAAI,OAAO,SAAS,OAAO,CAAE,KAAI,WAAW,OAAO,GAAG;UAC7C,OAAO,SAAS,MAAM,CAAE,KAAK,WAAW,OAAO,GAAG,MAAO,KAAK;AACvE,MAAM,IAAI,MAAO,OAAO;CAGxB,MAAM,gBAAgB,QAAwB;EAC5C,MAAM,MAAM,WAAW,IAAI;AAC3B,SAAO,IAAI,SAAS,IAAI,GAAG,MAAM,MAAM;;CAEzC,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAC1D,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,aAAa,MAAM,GAAG,CAAC,CAAC;CAG1D,MAAM,CAAC,GAAG,GAAG,KAAK,eAAe,GAAG,GAAG,EAAE;AAEzC,KAAI,WAAW;EACb,MAAM,QAAQ,WAAW,UAAU,MAAM,CAAC;AAC1C,SAAO,QAAQ,KAAK,MAAM,EAAE,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC,IAAI,MAAM;;AAG7E,QAAO,OAAO,KAAK,MAAM,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC"}

package/dist/utils/okhsl-to-rgb.js

@@ -1,296 +0,0 @@
-//#region src/utils/okhsl-to-rgb.ts
-const OKLab_to_LMS_M = [
-	[
-		1,
-		.3963377773761749,
-		.2158037573099136
-	],
-	[
-		1,
-		-.1055613458156586,
-		-.0638541728258133
-	],
-	[
-		1,
-		-.0894841775298119,
-		-1.2914855480194092
-	]
-];
-const LMS_to_linear_sRGB_M = [
-	[
-		4.076741636075959,
-		-3.307711539258062,
-		.2309699031821041
-	],
-	[
-		-1.2684379732850313,
-		2.6097573492876878,
-		-.3413193760026569
-	],
-	[
-		-.004196076138675526,
-		-.703418617935936,
-		1.7076146940746113
-	]
-];
-const OKLab_to_linear_sRGB_coefficients = [
-	[[-1.8817030993265873, -.8093650129914302], [
-		1.19086277,
-		1.76576728,
-		.59662641,
-		.75515197,
-		.56771245
-	]],
-	[[1.8144407988010998, -1.194452667805235], [
-		.73956515,
-		-.45954404,
-		.08285427,
-		.12541073,
-		-.14503204
-	]],
-	[[.13110757611180954, 1.813339709266608], [
-		1.35733652,
-		-.00915799,
-		-1.1513021,
-		-.50559606,
-		.00692167
-	]]
-];
-const TAU = 2 * Math.PI;
-const K1 = .206;
-const K2 = .03;
-const K3 = (1 + K1) / (1 + K2);
-const constrainAngle = (angle) => (angle % 360 + 360) % 360;
-const toeInv = (x) => (x ** 2 + K1 * x) / (K3 * (x + K2));
-const dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
-const dotXY = (a, b) => a[0] * b[0] + a[1] * b[1];
-const transform = (input, matrix) => [
-	dot3(input, matrix[0]),
-	dot3(input, matrix[1]),
-	dot3(input, matrix[2])
-];
-const cubed3 = (lms) => [
-	lms[0] ** 3,
-	lms[1] ** 3,
-	lms[2] ** 3
-];
-const OKLabToLinearSRGB = (lab) => {
-	return transform(cubed3(transform(lab, OKLab_to_LMS_M)), LMS_to_linear_sRGB_M);
-};
-const sRGBLinearToGamma = (val) => {
-	const sign = val < 0 ? -1 : 1;
-	const abs = Math.abs(val);
-	return abs > .0031308 ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - .055) : 12.92 * val;
-};
-const computeMaxSaturationOKLC = (a, b) => {
-	const okCoeff = OKLab_to_linear_sRGB_coefficients;
-	const lmsToRgb = LMS_to_linear_sRGB_M;
-	const tmp2 = [a, b];
-	const tmp3 = [
-		0,
-		a,
-		b
-	];
-	let chnlCoeff;
-	let chnlLMS;
-	if (dotXY(okCoeff[0][0], tmp2) > 1) {
-		chnlCoeff = okCoeff[0][1];
-		chnlLMS = lmsToRgb[0];
-	} else if (dotXY(okCoeff[1][0], tmp2) > 1) {
-		chnlCoeff = okCoeff[1][1];
-		chnlLMS = lmsToRgb[1];
-	} else {
-		chnlCoeff = okCoeff[2][1];
-		chnlLMS = lmsToRgb[2];
-	}
-	const [k0, k1, k2, k3, k4] = chnlCoeff;
-	const [wl, wm, ws] = chnlLMS;
-	let sat = k0 + k1 * a + k2 * b + k3 * (a * a) + k4 * a * b;
-	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
-	const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
-	const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
-	const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
-	const l_ = 1 + sat * kl;
-	const m_ = 1 + sat * km;
-	const s_ = 1 + sat * ks;
-	const l = l_ ** 3;
-	const m = m_ ** 3;
-	const s = s_ ** 3;
-	const lds = 3 * kl * l_ * l_;
-	const mds = 3 * km * m_ * m_;
-	const sds = 3 * ks * s_ * s_;
-	const lds2 = 6 * kl * kl * l_;
-	const mds2 = 6 * km * km * m_;
-	const sds2 = 6 * ks * ks * s_;
-	const f = wl * l + wm * m + ws * s;
-	const f1 = wl * lds + wm * mds + ws * sds;
-	const f2 = wl * lds2 + wm * mds2 + ws * sds2;
-	sat = sat - f * f1 / (f1 * f1 - .5 * f * f2);
-	return sat;
-};
-const findCuspOKLCH = (a, b) => {
-	const S_cusp = computeMaxSaturationOKLC(a, b);
-	const rgb_at_max = OKLabToLinearSRGB([
-		1,
-		S_cusp * a,
-		S_cusp * b
-	]);
-	const L_cusp = Math.cbrt(1 / Math.max(Math.max(rgb_at_max[0], rgb_at_max[1]), Math.max(rgb_at_max[2], 0)));
-	return [L_cusp, L_cusp * S_cusp];
-};
-const findGamutIntersectionOKLCH = (a, b, l1, c1, l0, cusp) => {
-	const lmsToRgb = LMS_to_linear_sRGB_M;
-	const tmp3 = [
-		0,
-		a,
-		b
-	];
-	const floatMax = Number.MAX_VALUE;
-	let t;
-	const dotYZ = (mat, vec) => mat[1] * vec[1] + mat[2] * vec[2];
-	const dotXYZ = (vec, x, y, z) => vec[0] * x + vec[1] * y + vec[2] * z;
-	if ((l1 - l0) * cusp[1] - (cusp[0] - l0) * c1 <= 0) {
-		const denom = c1 * cusp[0] + cusp[1] * (l0 - l1);
-		t = denom === 0 ? 0 : cusp[1] * l0 / denom;
-	} else {
-		const denom = c1 * (cusp[0] - 1) + cusp[1] * (l0 - l1);
-		t = denom === 0 ? 0 : cusp[1] * (l0 - 1) / denom;
-		const dl = l1 - l0;
-		const dc = c1;
-		const kl = dotYZ(OKLab_to_LMS_M[0], tmp3);
-		const km = dotYZ(OKLab_to_LMS_M[1], tmp3);
-		const ks = dotYZ(OKLab_to_LMS_M[2], tmp3);
-		const L = l0 * (1 - t) + t * l1;
-		const C = t * c1;
-		const l_ = L + C * kl;
-		const m_ = L + C * km;
-		const s_ = L + C * ks;
-		const l = l_ ** 3;
-		const m = m_ ** 3;
-		const s = s_ ** 3;
-		const ldt = 3 * (dl + dc * kl) * l_ * l_;
-		const mdt = 3 * (dl + dc * km) * m_ * m_;
-		const sdt = 3 * (dl + dc * ks) * s_ * s_;
-		const ldt2 = 6 * (dl + dc * kl) ** 2 * l_;
-		const mdt2 = 6 * (dl + dc * km) ** 2 * m_;
-		const sdt2 = 6 * (dl + dc * ks) ** 2 * s_;
-		const r_ = dotXYZ(lmsToRgb[0], l, m, s) - 1;
-		const r1 = dotXYZ(lmsToRgb[0], ldt, mdt, sdt);
-		const r2 = dotXYZ(lmsToRgb[0], ldt2, mdt2, sdt2);
-		const ur = r1 / (r1 * r1 - .5 * r_ * r2);
-		let tr = -r_ * ur;
-		const g_ = dotXYZ(lmsToRgb[1], l, m, s) - 1;
-		const g1 = dotXYZ(lmsToRgb[1], ldt, mdt, sdt);
-		const g2 = dotXYZ(lmsToRgb[1], ldt2, mdt2, sdt2);
-		const ug = g1 / (g1 * g1 - .5 * g_ * g2);
-		let tg = -g_ * ug;
-		const b_ = dotXYZ(lmsToRgb[2], l, m, s) - 1;
-		const b1 = dotXYZ(lmsToRgb[2], ldt, mdt, sdt);
-		const b2 = dotXYZ(lmsToRgb[2], ldt2, mdt2, sdt2);
-		const ub = b1 / (b1 * b1 - .5 * b_ * b2);
-		let tb = -b_ * ub;
-		tr = ur >= 0 ? tr : floatMax;
-		tg = ug >= 0 ? tg : floatMax;
-		tb = ub >= 0 ? tb : floatMax;
-		t += Math.min(tr, Math.min(tg, tb));
-	}
-	return t;
-};
-const computeSt = (cusp) => [cusp[1] / cusp[0], cusp[1] / (1 - cusp[0])];
-const computeStMid = (a, b) => [.11516993 + 1 / (7.4477897 + 4.1590124 * b + a * (-2.19557347 + 1.75198401 * b + a * (-2.13704948 - 10.02301043 * b + a * (-4.24894561 + 5.38770819 * b + 4.69891013 * a)))), .11239642 + 1 / (1.6132032 - .68124379 * b + a * (.40370612 + .90148123 * b + a * (-.27087943 + .6122399 * b + a * (.00299215 - .45399568 * b - .14661872 * a))))];
-const getCs = (L, a, b, cusp) => {
-	const cMax = findGamutIntersectionOKLCH(a, b, L, 1, L, cusp);
-	const stMax = computeSt(cusp);
-	const k = cMax / Math.min(L * stMax[0], (1 - L) * stMax[1]);
-	const stMid = computeStMid(a, b);
-	let ca = L * stMid[0];
-	let cb = (1 - L) * stMid[1];
-	const cMid = .9 * k * Math.sqrt(Math.sqrt(1 / (1 / ca ** 4 + 1 / cb ** 4)));
-	ca = L * .4;
-	cb = (1 - L) * .8;
-	return [
-		Math.sqrt(1 / (1 / ca ** 2 + 1 / cb ** 2)),
-		cMid,
-		cMax
-	];
-};
-const OKHSLToOKLab = (hsl) => {
-	let h = hsl[0];
-	const s = hsl[1];
-	const l = hsl[2];
-	const L = toeInv(l);
-	let a = 0;
-	let b = 0;
-	h = constrainAngle(h) / 360;
-	if (L !== 0 && L !== 1 && s !== 0) {
-		const a_ = Math.cos(TAU * h);
-		const b_ = Math.sin(TAU * h);
-		const [c0, cMid, cMax] = getCs(L, a_, b_, findCuspOKLCH(a_, b_));
-		const mid = .8;
-		const midInv = 1.25;
-		let t, k0, k1, k2;
-		if (s < mid) {
-			t = midInv * s;
-			k0 = 0;
-			k1 = mid * c0;
-			k2 = 1 - k1 / cMid;
-		} else {
-			t = 5 * (s - .8);
-			k0 = cMid;
-			k1 = .2 * cMid ** 2 * 1.25 ** 2 / c0;
-			k2 = 1 - k1 / (cMax - cMid);
-		}
-		const c = k0 + t * k1 / (1 - k2 * t);
-		a = c * a_;
-		b = c * b_;
-	}
-	return [
-		L,
-		a,
-		b
-	];
-};
-function okhslToSrgbInternal(h, s, l) {
-	const linearRGB = OKLabToLinearSRGB(OKHSLToOKLab([
-		h,
-		s,
-		l
-	]));
-	return [
-		sRGBLinearToGamma(linearRGB[0]),
-		sRGBLinearToGamma(linearRGB[1]),
-		sRGBLinearToGamma(linearRGB[2])
-	];
-}
-/**
-* Convert OKHSL color string to RGB.
-* Uses the same algorithm as the okhsl-plugin.
-*/
-function okhslToRgb(okhslStr) {
-	const match = okhslStr.match(/okhsl\(([^)]+)\)/i);
-	if (!match) return null;
-	const [colorPart, alphaPart] = match[1].trim().split("/");
-	const parts = colorPart.trim().split(/[,\s]+/).filter(Boolean);
-	if (parts.length < 3) return null;
-	let h = parseFloat(parts[0]);
-	const hueStr = parts[0].toLowerCase();
-	if (hueStr.endsWith("turn")) h = parseFloat(hueStr) * 360;
-	else if (hueStr.endsWith("rad")) h = parseFloat(hueStr) * 180 / Math.PI;
-	else if (hueStr.endsWith("deg")) h = parseFloat(hueStr);
-	const parsePercent = (val) => {
-		const num = parseFloat(val);
-		return val.includes("%") ? num / 100 : num;
-	};
-	const s = Math.max(0, Math.min(1, parsePercent(parts[1])));
-	const l = Math.max(0, Math.min(1, parsePercent(parts[2])));
-	const [r, g, b] = okhslToSrgbInternal(h, s, l);
-	const r255 = Math.round(Math.max(0, Math.min(1, r)) * 255);
-	const g255 = Math.round(Math.max(0, Math.min(1, g)) * 255);
-	const b255 = Math.round(Math.max(0, Math.min(1, b)) * 255);
-	if (alphaPart) return `rgba(${r255}, ${g255}, ${b255}, ${parseFloat(alphaPart.trim())})`;
-	return `rgb(${r255} ${g255} ${b255})`;
-}
-
-//#endregion
-export { okhslToRgb };
-//# sourceMappingURL=okhsl-to-rgb.js.map