@cube-dev/ui-kit 0.98.9 → 0.99.0

package/es/stories/playground/PlaygroundOutput.js

@@ -0,0 +1,92 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import copy from 'clipboard-copy';
+import { useCallback, useMemo } from 'react';
+import { Button } from '../../components/actions/Button/index.js';
+import { Layout } from '../../components/content/Layout/index.js';
+import { PrismCode } from '../../components/content/PrismCode/PrismCode.js';
+import { useToastsApi } from '../../components/overlays/Toasts/index.js';
+import { CopyIcon } from '../../icons/index.js';
+import { tasty } from '../../tasty/index.js';
+import { renderStyles } from '../../tasty/pipeline/index.js';
+const OutputContent = tasty({
+    styles: {
+        display: 'block',
+        flex: 1,
+        overflow: 'auto',
+        padding: '2x',
+        margin: 0,
+        fill: '#dark-bg',
+    },
+});
+function formatStyleResults(results) {
+    if (results.length === 0) {
+        return '/* No styles generated */';
+    }
+    // Group rules by selector + atRules combination
+    const groupedRules = new Map();
+    for (const result of results) {
+        const { selector, declarations, atRules } = result;
+        // Create a unique key for grouping: selector + atRules
+        const atRulesKey = atRules?.join('|') ?? '';
+        const groupKey = `${selector}|||${atRulesKey}`;
+        const declList = declarations.split(';').filter(Boolean);
+        if (!groupedRules.has(groupKey)) {
+            groupedRules.set(groupKey, []);
+        }
+        groupedRules.get(groupKey).push(...declList);
+    }
+    const lines = [];
+    for (const [groupKey, declList] of groupedRules) {
+        const [selector, atRulesKey] = groupKey.split('|||');
+        const atRules = atRulesKey ? atRulesKey.split('|') : [];
+        // Build the rule with merged declarations
+        const rule = `${selector} {\n  ${declList.join(';\n  ')};\n}`;
+        if (atRules.length > 0) {
+            // Wrap in at-rules (nested)
+            let wrapped = rule;
+            for (let i = atRules.length - 1; i >= 0; i--) {
+                const indent = '  '.repeat(atRules.length - i);
+                const innerIndent = '  '.repeat(atRules.length - i + 1);
+                wrapped = `${atRules[i]} {\n${wrapped
+                    .split('\n')
+                    .map((line) => innerIndent + line)
+                    .join('\n')}\n${indent.slice(2)}}`;
+            }
+            lines.push(wrapped);
+        }
+        else {
+            lines.push(rule);
+        }
+    }
+    return lines.join('\n\n');
+}
+export function PlaygroundOutput({ styles }) {
+    const { toast } = useToastsApi();
+    const cssOutput = useMemo(() => {
+        if (!styles || Object.keys(styles).length === 0) {
+            return '/* Enter styles in the editor to see generated CSS */';
+        }
+        try {
+            // Use a demo selector for display purposes
+            const results = renderStyles(styles, '.demo');
+            return formatStyleResults(results);
+        }
+        catch (e) {
+            return `/* Error generating CSS: ${e.message} */`;
+        }
+    }, [styles]);
+    const handleCopy = useCallback(async () => {
+        await copy(cssOutput);
+        toast.success('CSS copied to clipboard');
+    }, [cssOutput, toast]);
+    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: [_jsx("span", { children: "Generated CSS" }), _jsx(Button, { size: "small", type: "clear", icon: _jsx(CopyIcon, {}), "aria-label": "Copy CSS", onPress: handleCopy })] }), _jsx(Layout.Content, { padding: 0, children: _jsx(OutputContent, { children: _jsx(PrismCode, { code: cssOutput, language: "css" }) }) })] }));
+}
+
+        

package/es/stories/playground/PlaygroundPreview.js

@@ -0,0 +1,91 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Layout } from '../../components/content/Layout/index.js';
+import { tasty } from '../../tasty/index.js';
+import { Button } from './components/Button.js';
+import { Card } from './components/Card.js';
+import { ScrollProgress } from './components/ScrollProgress.js';
+const PreviewContent = tasty({
+    styles: {
+        display: 'flex',
+        flex: 1,
+        placeContent: 'center',
+        placeItems: 'center',
+        overflow: 'auto',
+        padding: '4x',
+        fill: '#light',
+        // Checkered pattern to show transparency
+        backgroundImage: 'linear-gradient(45deg, #dark.05 25%, transparent 25%), linear-gradient(-45deg, #dark.05 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dark.05 75%), linear-gradient(-45deg, transparent 75%, #dark.05 75%)',
+        backgroundSize: '20px 20px',
+        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+    },
+});
+const StateRow = tasty({
+    styles: {
+        display: 'flex',
+        gap: '2x',
+        placeItems: 'center',
+    },
+});
+const StateLabel = tasty({
+    styles: {
+        display: 'inline-flex',
+        width: '80px',
+        preset: 't4',
+        color: '#dark-03',
+    },
+});
+const ButtonColumn = tasty({
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: '12px',
+        padding: '3x',
+        radius: '1r',
+    },
+    styleProps: ['fill'],
+});
+// Button state configurations for forced preview
+const BUTTON_STATES = [
+    {
+        label: 'Default',
+        mods: { hovered: false, focused: false, pressed: false, disabled: false },
+    },
+    {
+        label: 'Hovered',
+        mods: { hovered: true, focused: false, pressed: false, disabled: false },
+    },
+    {
+        label: 'Focused',
+        mods: { hovered: false, focused: true, pressed: false, disabled: false },
+    },
+    {
+        label: 'Pressed',
+        mods: { hovered: false, focused: false, pressed: true, disabled: false },
+    },
+    {
+        label: 'Disabled',
+        mods: { hovered: false, focused: false, pressed: false, disabled: true },
+        isDisabled: true,
+    },
+    {
+        label: 'Hover+Focus',
+        mods: { hovered: true, focused: true, pressed: false, disabled: false },
+    },
+];
+export function PlaygroundPreview({ component, styles, }) {
+    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: ["Preview: ", component] }), _jsx(Layout.Content, { padding: 0, children: _jsxs(PreviewContent, { children: [component === 'card' && _jsx(Card, { styles: styles }), component === 'scroll-progress' && (_jsx(ScrollProgress, { styles: styles })), component === 'button' && (_jsxs("div", { style: { display: 'flex', gap: '24px' }, children: [_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: '12px',
+                                        padding: '24px 0',
+                                    }, children: BUTTON_STATES.map((state) => (_jsx(StateLabel, { style: { height: '32px' }, children: state.label }, state.label))) }), _jsx(ButtonColumn, { children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) }), _jsx(ButtonColumn, { fill: "#white", children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) })] }))] }) })] }));
+}
+
+        

package/es/stories/playground/components/Button.js

@@ -0,0 +1,45 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useButton, useFocusRing, useHover } from 'react-aria';
+import { tasty } from '../../../tasty/index.js';
+const ButtonElement = tasty({
+    as: 'button',
+    qa: 'PlaygroundButton',
+    styles: {
+        display: 'inline-flex',
+        placeItems: 'center',
+        border: 0,
+        background: 'none',
+        font: 'inherit',
+    },
+});
+export function Button({ styles, children, isDisabled = false, onPress, mods: externalMods, }) {
+    const ref = useRef(null);
+    const { buttonProps, isPressed } = useButton({
+        isDisabled,
+        onPress,
+    }, ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    // Internal mods from react-aria hooks
+    const internalMods = {
+        pressed: isPressed,
+        hovered: isHovered,
+        focused: isFocusVisible,
+        disabled: isDisabled,
+    };
+    // External mods override internal ones
+    const mergedMods = externalMods
+        ? { ...internalMods, ...externalMods }
+        : internalMods;
+    return (_jsx(ButtonElement, { ...buttonProps, ...hoverProps, ...focusProps, ref: ref, styles: styles, mods: mergedMods, children: children || 'Click me' }));
+}
+
+        

package/es/stories/playground/components/Card.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasty } from '../../../tasty/index.js';
+const CardElement = tasty({
+    qa: 'PlaygroundCard',
+    styles: {
+        display: 'block',
+    },
+});
+export function Card({ styles, children }) {
+    return (_jsx(CardElement, { styles: styles, children: children || (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Card Title" }), _jsx("div", { style: { opacity: 0.7 }, children: "This is a simple card component for demonstrating tasty styles." })] })) }));
+}
+
+        

package/es/stories/playground/components/ScrollProgress.js

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasty } from '../../../tasty/index.js';
+const ScrollProgressElement = tasty({
+    qa: 'PlaygroundScrollProgress',
+});
+export function ScrollProgress({ styles }) {
+    return (_jsxs(ScrollProgressElement, { styles: styles, children: [_jsx("div", { "data-element": "ProgressBar" }), _jsxs("div", { "data-element": "Content", children: [_jsx("p", { style: { margin: 0, opacity: 0.7 }, children: "Scroll down to see the progress bar animate" }), _jsxs("p", { style: { margin: '16px 0 0', opacity: 0.5, fontSize: '12px' }, children: ["(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {})] })] })] }));
+}
+
+        

package/es/stories/playground/examples.js

@@ -0,0 +1,158 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, } from '../../data/item-themes.js';
+// Common button layout styles
+const BUTTON_BASE_STYLES = {
+    display: 'inline-flex',
+    placeItems: 'center',
+    gap: '1x',
+    padding: '(1.25x - 1bw) (2x - 1bw)',
+    radius: '1r',
+    preset: 't3',
+    cursor: {
+        '': 'pointer',
+        disabled: 'not-allowed',
+    },
+    transition: 'theme',
+};
+export const PLAYGROUND_EXAMPLES = [
+    {
+        name: 'Raw (No preview)',
+        component: 'raw',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '3x',
+            fill: '#white',
+            radius: '2r',
+            border: true,
+        },
+    },
+    {
+        name: 'Card - Basic',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '3x',
+            fill: '#white',
+            radius: '2r',
+            border: true,
+            shadow: '0 2px 8px #dark.10',
+        },
+    },
+    {
+        name: 'Card - Purple',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: '4x',
+            fill: '#purple',
+            color: '#white',
+            radius: '2r',
+        },
+    },
+    {
+        name: 'Card - Responsive',
+        component: 'card',
+        styles: {
+            display: 'flex',
+            flow: 'column',
+            gap: '2x',
+            padding: {
+                '': '4x',
+                '@(w < 768px)': '2x',
+            },
+            fill: '#white',
+            radius: '2r',
+            border: true,
+            width: {
+                '': '400px',
+                '@(w < 768px)': '100%',
+            },
+        },
+    },
+    {
+        name: 'Button - Primary',
+        component: 'button',
+        styles: {
+            ...BUTTON_BASE_STYLES,
+            ...DEFAULT_PRIMARY_STYLES,
+        },
+    },
+    {
+        name: 'Button - Outline',
+        component: 'button',
+        styles: {
+            ...BUTTON_BASE_STYLES,
+            ...DEFAULT_OUTLINE_STYLES,
+        },
+    },
+    {
+        name: 'Scroll Progress (@supports)',
+        component: 'scroll-progress',
+        styles: {
+            // Container styles
+            display: 'flex',
+            flow: 'column',
+            width: '300px',
+            height: '200px',
+            radius: '2r',
+            border: true,
+            overflow: 'auto',
+            fill: '#white',
+            // Predefined state for @supports(animation-timeline: scroll())
+            '@supports-timeline': '@supports(animation-timeline: scroll())',
+            // Define keyframes for the progress animation
+            '@keyframes': {
+                'grow-progress': {
+                    from: 'scale: 0 1',
+                    to: 'scale: 1 1',
+                },
+            },
+            // Progress bar element
+            ProgressBar: {
+                position: 'sticky',
+                top: 0,
+                left: 0,
+                zIndex: 1,
+                height: 'min .5x',
+                margin: '-.5x bottom',
+                fill: '#purple',
+                radius: 'round',
+                transformOrigin: 'left center',
+                // Fallback for browsers without animation-timeline
+                scale: {
+                    '': '1 1',
+                    // When animation-timeline is supported, use scale: 0 1 as starting point
+                    '@supports-timeline': '0 1',
+                },
+                // Animation properties only when supported
+                animation: {
+                    '': 'none',
+                    '@supports-timeline': 'grow-progress linear both',
+                },
+                animationTimeline: {
+                    '': 'auto',
+                    '@supports-timeline': 'scroll(nearest block)',
+                },
+            },
+            // Scrollable content area
+            Content: {
+                display: 'block',
+                padding: '2x',
+            },
+        },
+    },
+];
+
+        

package/es/tasty/chunks/cacheKey.js

@@ -0,0 +1,98 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Chunk-specific cache key generation.
+ *
+ * Generates cache keys that only include styles relevant to a specific chunk,
+ * enabling more granular caching and reuse.
+ *
+ * Enhanced to support predefined states:
+ * - Global predefined states don't affect cache keys (constant across app)
+ * - Local predefined states only affect cache keys if referenced in the chunk
+ */
+import { extractLocalPredefinedStates, extractPredefinedStateRefs, } from '../states/index.js';
+/**
+ * Recursively serialize a value with sorted keys for stable output.
+ * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
+ */
+function stableStringify(value) {
+    if (value === null) {
+        return 'null';
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    if (typeof value !== 'object') {
+        return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+        return '[' + value.map(stableStringify).join(',') + ']';
+    }
+    // Object: sort keys for stable order
+    const obj = value;
+    const sortedKeys = Object.keys(obj).sort();
+    const parts = [];
+    for (const key of sortedKeys) {
+        if (obj[key] !== undefined) {
+            parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
+        }
+    }
+    return '{' + parts.join(',') + '}';
+}
+/**
+ * Generate a cache key for a specific chunk.
+ *
+ * Only includes the styles that belong to this chunk, allowing
+ * chunks to be cached independently.
+ *
+ * Also includes relevant local predefined states that are referenced
+ * by this chunk's styles.
+ *
+ * @param styles - The full styles object
+ * @param chunkName - Name of the chunk
+ * @param styleKeys - Keys of styles belonging to this chunk
+ * @returns A stable cache key string
+ */
+export function generateChunkCacheKey(styles, chunkName, styleKeys) {
+    // Start with chunk name for namespace separation
+    const parts = [chunkName];
+    // Sort keys for stable ordering
+    const sortedKeys = styleKeys.slice().sort();
+    // Build the chunk-specific styles string for predefined state detection
+    let chunkStylesStr = '';
+    for (const key of sortedKeys) {
+        const value = styles[key];
+        if (value !== undefined) {
+            // Use stable stringify for consistent serialization regardless of key order
+            const serialized = stableStringify(value);
+            parts.push(`${key}:${serialized}`);
+            chunkStylesStr += serialized;
+        }
+    }
+    // Extract local predefined states from the full styles object
+    const localStates = extractLocalPredefinedStates(styles);
+    // Only include local predefined states that are actually referenced in this chunk
+    if (Object.keys(localStates).length > 0) {
+        const referencedStates = extractPredefinedStateRefs(chunkStylesStr);
+        const relevantLocalStates = [];
+        for (const stateName of referencedStates) {
+            if (localStates[stateName]) {
+                relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);
+            }
+        }
+        // Add relevant local states to the cache key (sorted for stability)
+        if (relevantLocalStates.length > 0) {
+            relevantLocalStates.sort();
+            parts.unshift(`[states:${relevantLocalStates.join('|')}]`);
+        }
+    }
+    // Use null character as separator (safe, not in JSON output)
+    return parts.join('\0');
+}
+
+