@cube-dev/ui-kit 0.99.3 → 0.101.0

package/es/tasty/hooks/useStyles.js

@@ -1,16 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
 import { useInsertionEffect, useMemo, useRef } from 'react';
 import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesForChunk, } from '../chunks/index.js';
 import { getGlobalKeyframes, hasGlobalKeyframes } from '../config.js';
-import { allocateClassName, inject, keyframes } from '../injector/index.js';
+import { allocateClassName, inject, keyframes, property } from '../injector/index.js';
 import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames, } from '../keyframes/index.js';
 import { renderStyles } from '../pipeline/index.js';
+import { extractLocalProperties, hasLocalProperties } from '../properties/index.js';
 import { stringifyStyles } from '../utils/styles.js';
 /**
  * Check if styles contain @starting-style rules.
@@ -173,6 +174,19 @@ export function useStyles(styles) {
                 nameMap = null;
             }
         }
+        // Register local @properties if defined (no dispose needed - properties are permanent)
+        // Token formats: $name → --name, #name → --name-color (with auto syntax: '<color>')
+        // The injector.property() handles token parsing and auto-settings internally
+        // Note: Global properties are injected once when styles are first generated (see markStylesGenerated)
+        if (currentStyles && hasLocalProperties(currentStyles)) {
+            const localProperties = extractLocalProperties(currentStyles);
+            if (localProperties) {
+                for (const [token, definition] of Object.entries(localProperties)) {
+                    // Pass the token directly - injector handles parsing
+                    property(token, definition);
+                }
+            }
+        }
         // Inject each chunk
         for (const chunk of processedChunks) {
             if (chunk.renderResult.rules.length > 0) {

package/es/tasty/index.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
-// Register built-in plugins at module load time
 import { configure } from './config.js';
 import { okhslPlugin } from './plugins/index.js';
 export { tasty, Element } from './tasty.js';
-export { useStyles, useGlobalStyles, useRawCSS } from './hooks/index.js';
+export { useStyles, useGlobalStyles, useRawCSS, useProperty, useKeyframes, } from './hooks/index.js';
 // Configuration API
 export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } from './config.js';
 // Plugins
@@ -25,6 +24,7 @@ export * from './utils/filterBaseProps.js';
 export * from './utils/colors.js';
 export * from './utils/styles.js';
 export * from './utils/modAttrs.js';
+export { styleHandlers } from './styles/index.js';
 export { renderStyles, isSelector } from './pipeline/index.js';
 export * from './utils/dotize.js';
 export * from './styles/list.js';

package/es/tasty/injector/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -59,6 +59,44 @@ export function getRawCSSText(options) {
 export function keyframes(steps, nameOrOptions) {
     return getGlobalInjector().keyframes(steps, nameOrOptions);
 }
+/**
+ * Define a CSS @property custom property.
+ * This enables advanced features like animating custom properties.
+ *
+ * Note: @property rules are global and persistent once defined.
+ * Re-registering the same property name is a no-op.
+ *
+ * @param name - The custom property name (must start with --)
+ * @param options - Property configuration
+ *
+ * @example
+ * ```ts
+ * // Define a color property that can be animated
+ * property('--my-color', {
+ *   syntax: '<color>',
+ *   initialValue: 'red',
+ * });
+ *
+ * // Define an angle property
+ * property('--rotation', {
+ *   syntax: '<angle>',
+ *   inherits: false,
+ *   initialValue: '0deg',
+ * });
+ * ```
+ */
+export function property(name, options) {
+    return getGlobalInjector().property(name, options);
+}
+/**
+ * Check if a CSS @property has already been defined
+ *
+ * @param name - The custom property name to check
+ * @param options - Options including root
+ */
+export function isPropertyDefined(name, options) {
+    return getGlobalInjector().isPropertyDefined(name, options);
+}
 /**
  * Get CSS text from all sheets (for SSR)
  */

package/es/tasty/injector/injector.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -9,6 +9,8 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
+import { getEffectiveDefinition, normalizePropertyDefinition, } from '../properties/index.js';
+import { isDevEnv } from '../utils/isDevEnv.js';
 import { parseStyle } from '../utils/styles.js';
 import { SheetManager } from './sheet-manager.js';
 /**
@@ -315,56 +317,105 @@ export class StyleInjector {
         this.sheetManager.resetMetrics(registry);
     }
     /**
-     * Define a CSS @property custom property
+     * Define a CSS @property custom property.
+     *
+     * Accepts tasty token syntax for the property name:
+     * - `$name` → defines `--name`
+     * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
+     * - `--name` → defines `--name` (legacy format)
+     *
      * Example:
      * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
+     *
      * Note: No caching or dispose — this defines a global property.
+     *
+     * If the same property is registered with different options, a warning is emitted
+     * but the original definition is preserved (CSS @property cannot be redefined).
      */
     property(name, options) {
         const root = options?.root || document;
         const registry = this.sheetManager.getRegistry(root);
-        // Check if already defined to avoid duplicates
-        if (registry.injectedProperties.has(name)) {
+        // Parse the token and get effective definition
+        // This handles $name, #name, --name formats and auto-sets syntax for colors
+        const userDefinition = {
+            syntax: options?.syntax,
+            inherits: options?.inherits,
+            initialValue: options?.initialValue,
+        };
+        const effectiveResult = getEffectiveDefinition(name, userDefinition);
+        if (!effectiveResult.isValid) {
+            if (isDevEnv()) {
+                console.warn(`[Tasty] property(): ${effectiveResult.error}. Got: "${name}"`);
+            }
+            return;
+        }
+        const cssName = effectiveResult.cssName;
+        const definition = effectiveResult.definition;
+        // Normalize the definition for comparison
+        const normalizedDef = normalizePropertyDefinition(definition);
+        // Check if already defined
+        const existingDef = registry.injectedProperties.get(cssName);
+        if (existingDef !== undefined) {
+            // Property already exists - check if definitions match
+            if (existingDef !== normalizedDef) {
+                // Different definition - warn but don't replace (CSS @property can't be redefined)
+                if (isDevEnv()) {
+                    console.warn(`[Tasty] @property ${cssName} was already defined with a different declaration. ` +
+                        `The new declaration will be ignored. ` +
+                        `Original: ${existingDef}, New: ${normalizedDef}`);
+                }
+            }
+            // Either exact match or warned - skip injection
             return;
         }
         const parts = [];
-        if (options?.syntax != null) {
-            let syntax = String(options.syntax).trim();
+        if (definition.syntax != null) {
+            let syntax = String(definition.syntax).trim();
             if (!/^['"]/u.test(syntax))
                 syntax = `"${syntax}"`;
             parts.push(`syntax: ${syntax};`);
         }
         // inherits is required by the CSS @property spec - default to true
-        const inherits = options?.inherits ?? true;
+        const inherits = definition.inherits ?? true;
         parts.push(`inherits: ${inherits ? 'true' : 'false'};`);
-        if (options?.initialValue != null) {
+        if (definition.initialValue != null) {
             let initialValueStr;
-            if (typeof options.initialValue === 'number') {
-                initialValueStr = String(options.initialValue);
+            if (typeof definition.initialValue === 'number') {
+                initialValueStr = String(definition.initialValue);
             }
             else {
                 // Process via tasty parser to resolve custom units/functions
-                initialValueStr = parseStyle(options.initialValue).output;
+                initialValueStr = parseStyle(definition.initialValue).output;
             }
             parts.push(`initial-value: ${initialValueStr};`);
         }
         const declarations = parts.join(' ').trim();
         const rule = {
-            selector: `@property ${name}`,
+            selector: `@property ${cssName}`,
             declarations,
         };
         // Insert as a global rule; ignore returned info (no tracking/dispose)
         this.sheetManager.insertGlobalRule(registry, [rule], `property:${name}`, root);
-        // Track that this property was injected
-        registry.injectedProperties.add(name);
+        // Track that this property was injected with its normalized definition
+        registry.injectedProperties.set(cssName, normalizedDef);
     }
     /**
-     * Check whether a given @property name was already injected by this injector
+     * Check whether a given @property name was already injected by this injector.
+     *
+     * Accepts tasty token syntax:
+     * - `$name` → checks `--name`
+     * - `#name` → checks `--name-color`
+     * - `--name` → checks `--name` (legacy format)
      */
     isPropertyDefined(name, options) {
         const root = options?.root || document;
         const registry = this.sheetManager.getRegistry(root);
-        return registry.injectedProperties.has(name);
+        // Parse the token to get the CSS property name
+        const effectiveResult = getEffectiveDefinition(name, {});
+        if (!effectiveResult.isValid) {
+            return false;
+        }
+        return registry.injectedProperties.has(effectiveResult.cssName);
     }
     /**
      * Inject keyframes and return object with toString() and dispose()

package/es/tasty/injector/sheet-manager.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -49,7 +49,7 @@ export class SheetManager {
                 keyframesCache: new Map(),
                 keyframesNameToContent: new Map(),
                 keyframesCounter: 0,
-                injectedProperties: new Set(),
+                injectedProperties: new Map(),
                 globalRules: new Map(),
             };
             this.rootRegistries.set(root, registry);

package/es/tasty/injector/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 

package/es/tasty/keyframes/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/classify.js

@@ -1,13 +1,38 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
-import { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_UNIT_NUM, VALUE_KEYWORDS, } from './const.js';
+import { getGlobalPredefinedTokens } from '../utils/styles.js';
+import { COLOR_FUNCS, RE_HEX, RE_NUMBER, RE_RAW_UNIT, RE_UNIT_NUM, VALUE_KEYWORDS, } from './const.js';
 import { StyleParser } from './parser.js';
 import { Bucket } from './types.js';
+/**
+ * Re-parses a value through the parser until it stabilizes (no changes)
+ * or max iterations reached. This allows units to reference other units.
+ * Example: { x: '8px', y: '2x' } -> '1y' resolves to '16px'
+ */
+function resolveUntilStable(value, opts, recurse, maxIterations = 10) {
+    let current = value;
+    for (let i = 0; i < maxIterations; i++) {
+        // Check if the current value contains a custom unit that needs resolution
+        const unitMatch = current.match(RE_UNIT_NUM);
+        if (!unitMatch)
+            break; // Not a unit number, no resolution needed
+        const unitName = unitMatch[1];
+        // Only recurse if the unit is a custom unit we know about
+        // Any unit not in opts.units is assumed to be a native CSS unit
+        if (!opts.units || !(unitName in opts.units))
+            break;
+        const result = recurse(current);
+        if (result.output === current)
+            break; // Stable
+        current = result.output;
+    }
+    return current;
+}
 export function classify(raw, opts, recurse) {
     const token = raw.trim();
     if (!token)
@@ -47,6 +72,140 @@ export function classify(raw, opts, recurse) {
         (token.startsWith("'") && token.endsWith("'"))) {
         return { bucket: Bucket.Value, processed: token };
     }
+    // 0. Double prefix for literal CSS property names ($$name -> --name, ##name -> --name-color)
+    // Used in transitions and animations to reference the property name itself, not its value
+    if (token.startsWith('$$')) {
+        const name = token.slice(2);
+        if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {
+            return { bucket: Bucket.Value, processed: `--${name}` };
+        }
+    }
+    if (token.startsWith('##')) {
+        const name = token.slice(2);
+        if (/^[a-z_][a-z0-9-_]*$/i.test(name)) {
+            return { bucket: Bucket.Value, processed: `--${name}-color` };
+        }
+    }
+    // 0a. Check for predefined tokens (configured via configure({ tokens: {...} }))
+    // Must happen before default $ and # handling to allow overriding
+    if (token[0] === '$' || token[0] === '#') {
+        const predefinedTokens = getGlobalPredefinedTokens();
+        if (predefinedTokens) {
+            // Exact match
+            if (token in predefinedTokens) {
+                const tokenValue = predefinedTokens[token];
+                // Lowercase the token value to match parser behavior (parser lowercases input)
+                return classify(tokenValue.toLowerCase(), opts, recurse);
+            }
+            // Check for color token with alpha suffix: #token.alpha
+            if (token[0] === '#') {
+                const alphaMatch = token.match(/^(#[a-z0-9-]+)\.([0-9]+)$/i);
+                if (alphaMatch) {
+                    const [, baseToken, rawAlpha] = alphaMatch;
+                    if (baseToken in predefinedTokens) {
+                        const resolvedValue = predefinedTokens[baseToken];
+                        // If resolved value starts with # (color token), use standard alpha syntax
+                        if (resolvedValue.startsWith('#')) {
+                            // Lowercase to match parser behavior
+                            return classify(`${resolvedValue.toLowerCase()}.${rawAlpha}`, opts, recurse);
+                        }
+                        // For color functions like rgb(), rgba(), hsl(), hwb(), etc., inject alpha
+                        // Includes all standard CSS color functions plus okhsl (plugin)
+                        const funcMatch = resolvedValue.match(/^(rgba?|hsla?|hwb|oklab|oklch|lab|lch|color|okhsl|device-cmyk|gray|color-mix|color-contrast)\((.+)\)$/i);
+                        if (funcMatch) {
+                            const [, funcName, args] = funcMatch;
+                            const alpha = rawAlpha === '0' ? '0' : `.${rawAlpha}`;
+                            // Normalize function name: rgba->rgb, hsla->hsl (modern syntax doesn't need 'a' suffix)
+                            const normalizedFunc = funcName.replace(/a$/i, '').toLowerCase();
+                            // Normalize to modern syntax: replace top-level commas with spaces
+                            // Preserves commas inside nested functions like min(), max(), clamp()
+                            const normalizeArgs = (a) => {
+                                let result = '';
+                                let depth = 0;
+                                for (let i = 0; i < a.length; i++) {
+                                    const c = a[i];
+                                    if (c === '(') {
+                                        depth++;
+                                        result += c;
+                                    }
+                                    else if (c === ')') {
+                                        depth = Math.max(0, depth - 1);
+                                        result += c;
+                                    }
+                                    else if (c === ',' && depth === 0) {
+                                        // Skip comma and any following whitespace at top level
+                                        while (i + 1 < a.length && /\s/.test(a[i + 1]))
+                                            i++;
+                                        result += ' ';
+                                    }
+                                    else {
+                                        result += c;
+                                    }
+                                }
+                                return result;
+                            };
+                            // Helper: find last top-level occurrence of a character (ignores parentheses)
+                            const findLastTopLevel = (str, ch) => {
+                                let depth = 0;
+                                for (let i = str.length - 1; i >= 0; i--) {
+                                    const c = str[i];
+                                    if (c === ')')
+                                        depth++;
+                                    else if (c === '(')
+                                        depth = Math.max(0, depth - 1);
+                                    else if (c === ch && depth === 0)
+                                        return i;
+                                }
+                                return -1;
+                            };
+                            // Check if already has alpha:
+                            // - Modern syntax: has `/` separator at top level (works with dynamic alpha like var()/calc())
+                            // - Legacy syntax: function ends with 'a' (rgba, hsla) and has exactly 4 top-level comma-separated values
+                            const slashIdx = findLastTopLevel(args, '/');
+                            const hasModernAlpha = slashIdx !== -1;
+                            // Count top-level commas to avoid commas inside nested functions
+                            let topLevelCommaCount = 0;
+                            let lastTopLevelComma = -1;
+                            {
+                                let depth = 0;
+                                for (let i = 0; i < args.length; i++) {
+                                    const c = args[i];
+                                    if (c === '(')
+                                        depth++;
+                                    else if (c === ')')
+                                        depth = Math.max(0, depth - 1);
+                                    else if (c === ',' && depth === 0) {
+                                        topLevelCommaCount++;
+                                        lastTopLevelComma = i;
+                                    }
+                                }
+                            }
+                            const hasLegacyAlpha = !hasModernAlpha &&
+                                /a$/i.test(funcName) &&
+                                topLevelCommaCount === 3;
+                            if (hasModernAlpha || hasLegacyAlpha) {
+                                // Strip existing alpha (numeric or dynamic) before applying suffix
+                                const withoutAlpha = hasModernAlpha
+                                    ? args.slice(0, slashIdx).trim()
+                                    : args.slice(0, lastTopLevelComma).trim();
+                                return {
+                                    bucket: Bucket.Color,
+                                    processed: `${normalizedFunc}(${normalizeArgs(withoutAlpha)} / ${alpha})`,
+                                };
+                            }
+                            // Add alpha using modern syntax
+                            return {
+                                bucket: Bucket.Color,
+                                processed: `${normalizedFunc}(${normalizeArgs(args)} / ${alpha})`,
+                            };
+                        }
+                        // Fallback: try appending .alpha (may not work for all cases)
+                        return classify(`${resolvedValue}.${rawAlpha}`, opts, recurse);
+                    }
+                }
+            }
+        }
+    }
     // 0. Direct var(--*-color) token
     const varColorMatch = token.match(/^var\(--([a-z0-9-]+)-color\)$/);
     if (varColorMatch) {
@@ -162,8 +321,19 @@ export function classify(raw, opts, recurse) {
         const handler = opts.units && opts.units[unit];
         if (handler) {
             if (typeof handler === 'string') {
-                // Special-case the common `x` → gap mapping used by tests.
-                const base = unit === 'x' ? 'var(--gap)' : handler;
+                // Check if this is a raw CSS unit (e.g., "8px", "1rem")
+                const rawMatch = handler.match(RE_RAW_UNIT);
+                if (rawMatch) {
+                    // Raw unit: calculate directly instead of using calc()
+                    const [, baseNum, cssUnit] = rawMatch;
+                    const result = numericPart * parseFloat(baseNum);
+                    const processed = `${result}${cssUnit}`;
+                    // Re-parse to resolve any nested units (e.g., units referencing other units)
+                    const resolved = resolveUntilStable(processed, opts, recurse);
+                    return { bucket: Bucket.Value, processed: resolved };
+                }
+                // Non-raw handler (e.g., "var(--gap)", "calc(...)"): use calc() wrapping
+                const base = handler;
                 if (numericPart === 1) {
                     return { bucket: Bucket.Value, processed: base };
                 }

package/es/tasty/parser/const.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
@@ -32,5 +32,7 @@ export const COLOR_FUNCS = new Set([
 export const RE_UNIT_NUM = /^[+-]?(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)$/;
 export const RE_NUMBER = /^[+-]?(?:\d*\.\d+|\d+)$/;
 export const RE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}(?:[0-9a-f]{2})?)$/;
+// Matches raw CSS unit values like "8px", "1rem", "0.5em" - captures number and unit separately
+export const RE_RAW_UNIT = /^([+-]?(?:\d*\.\d+|\d+))([a-z%]+)$/;
 
         

package/es/tasty/parser/lru.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 

package/es/tasty/parser/parser.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.3
+ * @cube-dev/ui-kit v0.101.0
  * Released under the MIT license.
  */
 
 import { classify } from './classify.js';
 import { Lru } from './lru.js';
 import { scan } from './tokenizer.js';
-import { Bucket, finalizeGroup, makeEmptyDetails, } from './types.js';
+import { Bucket, finalizeGroup, finalizePart, makeEmptyDetails, makeEmptyPart, } from './types.js';
 export class StyleParser {
     opts;
     cache;
@@ -27,7 +27,9 @@ export class StyleParser {
             .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//g, '')
             .toLowerCase();
         const groups = [];
-        let current = makeEmptyDetails();
+        let currentGroup = makeEmptyDetails();
+        let currentPart = makeEmptyPart();
+        let parts = [];
         const pushToken = (bucket, processed) => {
             if (!processed)
                 return;
@@ -35,13 +37,13 @@ export class StyleParser {
             // background layer segments like "url(img) no-repeat center/cover" are kept
             // as a single value entry.
             const mergeIntoPrevUrl = () => {
-                const lastIdx = current.values.length - 1;
-                current.values[lastIdx] += ` ${processed}`;
-                const lastAllIdx = current.all.length - 1;
-                current.all[lastAllIdx] += ` ${processed}`;
+                const lastIdx = currentPart.values.length - 1;
+                currentPart.values[lastIdx] += ` ${processed}`;
+                const lastAllIdx = currentPart.all.length - 1;
+                currentPart.all[lastAllIdx] += ` ${processed}`;
             };
-            const prevIsUrlValue = current.values.length > 0 &&
-                current.values[current.values.length - 1].startsWith('url(');
+            const prevIsUrlValue = currentPart.values.length > 0 &&
+                currentPart.values[currentPart.values.length - 1].startsWith('url(');
             if (prevIsUrlValue) {
                 // Extend the existing url(...) value regardless of current bucket.
                 mergeIntoPrevUrl();
@@ -51,39 +53,58 @@ export class StyleParser {
             }
             switch (bucket) {
                 case Bucket.Color:
-                    current.colors.push(processed);
+                    currentPart.colors.push(processed);
                     break;
                 case Bucket.Value:
-                    current.values.push(processed);
+                    currentPart.values.push(processed);
                     break;
                 case Bucket.Mod:
-                    current.mods.push(processed);
+                    currentPart.mods.push(processed);
                     break;
             }
-            current.all.push(processed);
+            currentPart.all.push(processed);
+        };
+        const endPart = () => {
+            // Only add non-empty parts
+            if (currentPart.all.length > 0) {
+                finalizePart(currentPart);
+                parts.push(currentPart);
+            }
+            currentPart = makeEmptyPart();
         };
         const endGroup = () => {
-            finalizeGroup(current);
-            groups.push(current);
-            current = makeEmptyDetails();
+            endPart(); // finalize last part
+            // Ensure at least one part exists (even if empty) for backward compat
+            if (parts.length === 0) {
+                parts.push(makeEmptyPart());
+                finalizePart(parts[0]);
+            }
+            finalizeGroup(currentGroup, parts);
+            groups.push(currentGroup);
+            // Reset for next group
+            currentGroup = makeEmptyDetails();
+            parts = [];
+            currentPart = makeEmptyPart();
         };
-        scan(stripped, (tok, isComma, prevChar) => {
+        scan(stripped, (tok, isComma, isSlash, prevChar) => {
             if (tok) {
-                // Accumulate raw token into current.input
-                if (current.input) {
-                    current.input += ` ${tok}`;
+                // Accumulate raw token into currentGroup.input
+                if (currentGroup.input) {
+                    currentGroup.input += ` ${tok}`;
                 }
                 else {
-                    current.input = tok;
+                    currentGroup.input = tok;
                 }
                 const { bucket, processed } = classify(tok, this.opts, (sub) => this.process(sub));
                 pushToken(bucket, processed);
             }
+            if (isSlash)
+                endPart();
             if (isComma)
                 endGroup();
         });
         // push final group if not already
-        if (current.all.length || !groups.length)
+        if (currentPart.all.length || parts.length || !groups.length)
             endGroup();
         const output = groups.map((g) => g.output).join(', ');
         const result = { output, groups };
@@ -106,6 +127,14 @@ export class StyleParser {
         else
             this.cache.clear();
     }
+    /**
+     * Clear the parser cache.
+     * Call this when external state that affects parsing results has changed
+     * (e.g., predefined tokens).
+     */
+    clearCache() {
+        this.cache.clear();
+    }
     /**
      * Get the current units configuration.
      */