@cube-dev/ui-kit 0.0.0-canary-a6187c8 → 0.0.0-canary-521eedd

package/es/stories/Tasty.stories.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton.js';
+import { GlobalStyledHeading, StyledButton as StyledButtonComponent, } from './components/StyledButton';
 export default {
     title: 'Styling/Global Styles',
 };

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DialogForm, Field, Input, Paragraph, Text, } from '../../index.js';
+import { DialogForm, Field, Input, Paragraph, Text, } from '../../index';
 export function ConfirmDeletionDialogForm(props) {
     let { name, onSubmit, onDismiss } = props;
     return (_jsxs(DialogForm, { title: "Delete Deployment", submitProps: {

package/es/stories/components/DialogFormApp.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogTrigger } from '../../index.js';
-import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm.js';
+import { Button, DialogTrigger } from '../../index';
+import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
 export function DialogFormApp() {
     return (_jsxs(DialogTrigger, { children: [_jsx(Button, { children: "Delete the instance" }), _jsx(ConfirmDeletionDialogForm, { name: "instanceName" })] }));
 }

package/es/stories/components/StyledButton.js

@@ -1,35 +1,31 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../components/actions/index.js';
-import { tasty, useGlobalStyles } from '../../tasty/index.js';
+import { Button } from '../../components/actions';
+import { tasty } from '../../tasty';
 export const StyledButton = tasty(Button, {
     styles: {
         padding: '3x 6x',
         preset: 't1',
-        fill: 'okhsl(200 40% 80%)',
     },
 });
-export function GlobalStyledHeading() {
-    useGlobalStyles('.myButton', {
-        display: 'inline-block',
-        padding: '1x 2x',
-        preset: 't2',
-        border: true,
-        radius: true,
-        fill: {
-            '': '#white',
-            ':hover': '#purple.20',
-        },
-        color: '#dark',
-    });
-    return null;
-}
+export const GlobalStyledHeading = tasty('.myButton', {
+    display: 'inline-block',
+    padding: '1x 2x',
+    preset: 't2',
+    border: true,
+    radius: true,
+    fill: {
+        '': '#white',
+        ':hover': '#purple.20',
+    },
+    color: '#dark',
+});
 export function Block() {
     return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { children: "123" }), _jsx(GlobalStyledHeading, {})] }));
 }

package/es/stories/lists/baseProps.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty/index.js';
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty';
 const allStyles = Array.from(new Set([
     ...BASE_STYLES,
     ...POSITION_STYLES,

package/es/tasty/debug.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 /**
  * Debug utilities for inspecting tasty-generated CSS at runtime
  */
-import { CHUNK_NAMES } from './chunks/definitions.js';
-import { getCssTextForNode, injector } from './injector/index.js';
-import { isDevEnv } from './utils/isDevEnv.js';
+import { getCssTextForNode, injector } from './injector';
+import { isDevEnv } from './utils/isDevEnv';
 /**
  * Pretty-print CSS with proper indentation and formatting
  */
@@ -247,95 +246,6 @@ function getPageStats(options) {
     }
     return { cssSize, ruleCount, stylesheetCount, skippedStylesheets };
 }
-// ============================================================================
-// Chunk-aware helpers (for style chunking optimization)
-// ============================================================================
-/**
- * Extract chunk name from a cache key.
- *
- * Cache keys have the format: "chunkName\0key:value\0key:value..."
- * or "[states:...]\0chunkName\0..." for predefined states.
- *
- * @param cacheKey - The cache key to parse
- * @returns The chunk name, or null if not found
- */
-function extractChunkNameFromCacheKey(cacheKey) {
-    // Cache keys are separated by \0 (null character)
-    const parts = cacheKey.split('\0');
-    for (const part of parts) {
-        // Skip predefined states prefix
-        if (part.startsWith('[states:'))
-            continue;
-        // First non-states part that doesn't contain : is the chunk name
-        if (!part.includes(':') && part.length > 0) {
-            return part;
-        }
-    }
-    return null;
-}
-/**
- * Get chunk info for a className by reverse-looking up its cache key.
- *
- * @param className - The tasty class name (e.g., "t0", "t123")
- * @param root - The document or shadow root to search in
- * @returns Object with chunk name and cache key, or nulls if not found
- */
-function getChunkForClassName(className, root = document) {
-    const registry = injector.instance['sheetManager']?.getRegistry(root);
-    if (!registry) {
-        return { chunkName: null, cacheKey: null };
-    }
-    // Reverse lookup: find the cache key for this className
-    for (const [cacheKey, cn] of registry.cacheKeyToClassName) {
-        if (cn === className) {
-            return {
-                chunkName: extractChunkNameFromCacheKey(cacheKey),
-                cacheKey,
-            };
-        }
-    }
-    return { chunkName: null, cacheKey: null };
-}
-/**
- * Get chunk breakdown statistics for all styles.
- *
- * @param root - The document or shadow root to search in
- * @returns Object with breakdown by chunk type and totals
- */
-function getChunkBreakdown(root = document) {
-    const registry = injector.instance['sheetManager']?.getRegistry(root);
-    if (!registry) {
-        return {
-            byChunk: {},
-            totalChunkTypes: 0,
-        };
-    }
-    const byChunk = {};
-    // Group classes by chunk
-    for (const [cacheKey, className] of registry.cacheKeyToClassName) {
-        const chunkName = extractChunkNameFromCacheKey(cacheKey) || 'unknown';
-        if (!byChunk[chunkName]) {
-            byChunk[chunkName] = { classes: [], cssSize: 0, ruleCount: 0 };
-        }
-        byChunk[chunkName].classes.push(className);
-        // Get CSS for this class
-        const css = injector.instance.getCssTextForClasses([className], { root });
-        byChunk[chunkName].cssSize += css.length;
-        byChunk[chunkName].ruleCount += (css.match(/\{[^}]*\}/g) || []).length;
-    }
-    // Sort classes within each chunk for consistency
-    for (const entry of Object.values(byChunk)) {
-        entry.classes.sort((a, b) => {
-            const aNum = parseInt(a.slice(1));
-            const bNum = parseInt(b.slice(1));
-            return aNum - bNum;
-        });
-    }
-    return {
-        byChunk,
-        totalChunkTypes: Object.keys(byChunk).length,
-    };
-}
 /**
  * Concise tastyDebug API for inspecting styles at runtime
  */
@@ -406,7 +316,6 @@ export const tastyDebug = {
             return {
                 element: null,
                 classes: [],
-                chunks: [],
                 css: '',
                 size: 0,
                 rules: 0,
@@ -416,18 +325,12 @@ export const tastyDebug = {
         const tastyClasses = classList
             .split(/\s+/)
             .filter((cls) => /^t\d+$/.test(cls));
-        // Get chunk info for each tasty class
-        const chunks = tastyClasses.map((className) => ({
-            className,
-            chunkName: getChunkForClassName(className, root).chunkName,
-        }));
         const css = getCssTextForNode(element, { root });
         const prettifiedCSS = prettifyCSS(css);
         const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
         return {
             element,
             classes: tastyClasses,
-            chunks,
             css: prettifiedCSS,
             size: css.length,
             rules: ruleCount,
@@ -467,63 +370,7 @@ export const tastyDebug = {
         const { root } = opts || {};
         injector.instance.resetMetrics({ root });
     },
-    // 5) Chunk breakdown (style chunking optimization)
-    /**
-     * Get breakdown of styles by chunk type.
-     *
-     * With style chunking enabled, styles are split into logical chunks
-     * (appearance, font, dimension, container, etc.) for better caching
-     * and CSS reuse.
-     *
-     * @param opts - Options including root document/shadow root
-     * @returns Breakdown by chunk type with class counts and CSS sizes
-     */
-    chunks(opts) {
-        const { root = document, log = false } = opts || {};
-        const breakdown = getChunkBreakdown(root);
-        const totalClasses = Object.values(breakdown.byChunk).reduce((sum, entry) => sum + entry.classes.length, 0);
-        if (log) {
-            console.group('🧩 Style Chunk Breakdown');
-            // Define display order matching CHUNK_NAMES
-            const displayOrder = [
-                CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
-                CHUNK_NAMES.APPEARANCE,
-                CHUNK_NAMES.FONT,
-                CHUNK_NAMES.DIMENSION,
-                CHUNK_NAMES.CONTAINER,
-                CHUNK_NAMES.SCROLLBAR,
-                CHUNK_NAMES.POSITION,
-                CHUNK_NAMES.MISC,
-                CHUNK_NAMES.SUBCOMPONENTS,
-            ];
-            // Show chunks in order
-            for (const chunkName of displayOrder) {
-                const data = breakdown.byChunk[chunkName];
-                if (data) {
-                    const sizeStr = data.cssSize > 1024
-                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                        : `${data.cssSize}B`;
-                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                }
-            }
-            // Show any unknown chunks
-            for (const [chunkName, data] of Object.entries(breakdown.byChunk)) {
-                if (!displayOrder.includes(chunkName)) {
-                    const sizeStr = data.cssSize > 1024
-                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                        : `${data.cssSize}B`;
-                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                }
-            }
-            console.log(`📊 Total: ${totalClasses} classes across ${breakdown.totalChunkTypes} chunk types`);
-            console.groupEnd();
-        }
-        return {
-            ...breakdown,
-            totalClasses,
-        };
-    },
-    // 6) Get CSS for specific global types
+    // 5) Get CSS for specific global types
     getGlobalTypeCSS(type, opts) {
         const { root = document } = opts || {};
         const registry = injector.instance['sheetManager']?.getRegistry(root);
@@ -718,8 +565,6 @@ export const tastyDebug = {
                 propertyCSSSize: Math.round(propertyData.size * scaleFactor),
             };
         }
-        // Get chunk breakdown
-        const chunkBreakdown = getChunkBreakdown(root);
         const summary = {
             activeClasses: cacheStatus.classes.active,
             unusedClasses: cacheStatus.classes.unused,
@@ -746,7 +591,6 @@ export const tastyDebug = {
             propertyCount: definitions.properties.length,
             keyframeCount: definitions.keyframes.length,
             cleanupSummary,
-            chunkBreakdown,
         };
         if (log) {
             console.group('🎨 Comprehensive Tasty Debug Summary');
@@ -758,7 +602,7 @@ export const tastyDebug = {
             console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
             console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
             console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-            console.log(`  • Raw CSS (injectRawCSS/useRawCSS): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
+            console.log(`  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
             console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
             console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
             // Show breakdown calculation
@@ -808,30 +652,6 @@ export const tastyDebug = {
                     : '0';
                 console.log(`  • Overall cache hit rate: ${hitRate}%`);
             }
-            // Show chunk breakdown
-            if (summary.chunkBreakdown.totalChunkTypes > 0) {
-                console.log('🧩 Style Chunk Breakdown:');
-                const displayOrder = [
-                    CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
-                    CHUNK_NAMES.APPEARANCE,
-                    CHUNK_NAMES.FONT,
-                    CHUNK_NAMES.DIMENSION,
-                    CHUNK_NAMES.CONTAINER,
-                    CHUNK_NAMES.SCROLLBAR,
-                    CHUNK_NAMES.POSITION,
-                    CHUNK_NAMES.MISC,
-                    CHUNK_NAMES.SUBCOMPONENTS,
-                ];
-                for (const chunkName of displayOrder) {
-                    const data = summary.chunkBreakdown.byChunk[chunkName];
-                    if (data) {
-                        const sizeStr = data.cssSize > 1024
-                            ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                            : `${data.cssSize}B`;
-                        console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                    }
-                }
-            }
             console.log('🔍 Details:');
             console.log('  • Active classes:', summary.activeClasses);
             console.log('  • Unused classes:', summary.unusedClasses);
@@ -915,15 +735,15 @@ export const tastyDebug = {
         console.groupEnd();
         console.groupEnd();
     },
-    // 12) Show help and usage examples
+    // 11) Show help and usage examples
     help() {
         console.group('🎨 tastyDebug - Quick Start Guide');
         console.log('💡 Essential commands:');
         console.log('  • tastyDebug.summary({ log: true }) - comprehensive overview');
-        console.log('  • tastyDebug.chunks({ log: true }) - style chunk breakdown');
         console.log('  • tastyDebug.log("active") - beautiful CSS display');
         console.log('  • tastyDebug.css("active") - get active CSS');
-        console.log('  • tastyDebug.inspect(".my-element") - element inspection with chunk info');
+        console.log('  • tastyDebug.inspect(".my-element") - detailed element inspection');
+        console.log('  • tastyDebug.global({ log: true }) - global CSS analysis');
         console.log('  • tastyDebug.cache() - cache status');
         console.log('  • tastyDebug.defs() - defined properties & keyframes');
         console.log('  • tastyDebug.pageCSS({ log: true }) - all page CSS');
@@ -932,7 +752,7 @@ export const tastyDebug = {
         console.log('  • "all" - all tasty CSS + global CSS');
         console.log('  • "active" - CSS for classes in DOM');
         console.log('  • "unused" - CSS for classes with refCount = 0');
-        console.log('  • "global" - only global CSS (injectGlobal)');
+        console.log('  • "global" - only global CSS (createGlobalStyle)');
         console.log('  • "page" - ALL page CSS (including non-tasty)');
         console.log('  • "t123" - specific tasty class');
         console.log('  • [".my-selector"] - CSS selector');
@@ -942,12 +762,6 @@ export const tastyDebug = {
         console.log('  • { title: "Custom" } - custom title for log()');
         console.log('  • { root: shadowRoot } - target Shadow DOM');
         console.log('  • { prettify: false } - skip CSS formatting');
-        console.log('');
-        console.log('🧩 Style Chunking:');
-        console.log('  Elements have multiple classes (one per chunk: appearance, font, dimension, etc.)');
-        console.log('  • tastyDebug.chunks({ log: true }) - breakdown by chunk type');
-        console.log('  • tastyDebug.inspect() - shows which chunk each class belongs to');
-        console.log('  Chunk types: combined (non-chunked), appearance, font, dimension, container, scrollbar, position, misc, subcomponents');
         console.groupEnd();
     },
 };

package/es/tasty/index.js

@@ -1,39 +1,25 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * 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';
-// Configuration API
-export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } from './config.js';
-// Plugins
-export { okhslPlugin, okhslFunc } from './plugins/index.js';
-configure({
-    plugins: [okhslPlugin()],
-});
-// Chunk utilities for advanced use cases
-export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from './chunks/index.js';
-// Advanced state mapping utilities
-export { getGlobalPredefinedStates, setGlobalPredefinedStates } from './states/index.js';
-export * from './utils/filterBaseProps.js';
-export * from './utils/colors.js';
-export * from './utils/styles.js';
-export * from './utils/modAttrs.js';
-export { renderStyles, isSelector } from './pipeline/index.js';
-export * from './utils/dotize.js';
-export * from './styles/list.js';
-export * from './utils/mergeStyles.js';
-export * from './utils/warnings.js';
-export * from './utils/getDisplayName.js';
-export * from './utils/processTokens.js';
-export * from './utils/typography.js';
-export * from './injector/index.js';
-export * from './debug.js';
+export { tasty, Element } from './tasty';
+export * from './utils/filterBaseProps';
+export * from './utils/colors';
+export * from './utils/styles';
+export * from './utils/modAttrs';
+export * from './utils/responsive';
+export * from './utils/renderStyles';
+export * from './utils/dotize';
+export * from './styles/list';
+export * from './providers/BreakpointsProvider';
+export * from './utils/mergeStyles';
+export * from './utils/warnings';
+export * from './utils/getDisplayName';
+export * from './utils/processTokens';
+export * from './injector';
+export * from './debug';
 
         

package/es/tasty/injector/index.js

@@ -1,12 +1,85 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { getConfig, getGlobalInjector, isTestEnvironment, markStylesGenerated, } from '../config.js';
-import { StyleInjector } from './injector.js';
+import { isDevEnv } from '../utils/isDevEnv';
+import { StyleInjector } from './injector';
+// Use a more robust global singleton that survives React Strict Mode
+const GLOBAL_INJECTOR_KEY = '__TASTY_GLOBAL_INJECTOR__';
+/**
+ * Detect if we're running in a test environment
+ */
+function isTestEnvironment() {
+    // Check Node.js environment
+    if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+        return true;
+    }
+    // Check for Jest globals (safely)
+    if (typeof global !== 'undefined') {
+        const g = global;
+        if (g.jest || g.expect || g.describe || g.it) {
+            return true;
+        }
+    }
+    // Check for jsdom environment (common in tests)
+    if (typeof window !== 'undefined' &&
+        window.navigator?.userAgent?.includes('jsdom')) {
+        return true;
+    }
+    // Check for other test runners
+    if (typeof globalThis !== 'undefined') {
+        const gt = globalThis;
+        if (gt.vitest || gt.mocha) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Create default configuration with optional test environment detection
+ */
+function createDefaultConfig(isTest) {
+    return {
+        maxRulesPerSheet: 8192, // safer default cap per sheet
+        unusedStylesThreshold: 500, // default threshold for bulk cleanup of unused styles
+        bulkCleanupDelay: 5000, // default delay before bulk cleanup (ignored if idleCleanup is true)
+        idleCleanup: true, // default to using requestIdleCallback instead of setTimeout
+        forceTextInjection: isTest ?? false, // auto-enable for test environments
+        devMode: isDevEnv(), // enable dev features: performance tracking and debug info
+        bulkCleanupBatchRatio: 0.5,
+        unusedStylesMinAgeMs: 10000,
+    };
+}
+/**
+ * Configure the global style injector
+ */
+export function configure(config = {}) {
+    const fullConfig = {
+        ...createDefaultConfig(),
+        ...config,
+    };
+    // Store on window to survive React Strict Mode resets
+    if (typeof window !== 'undefined') {
+        window[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+    else {
+        // Fallback for SSR
+        globalThis[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
+    }
+}
+/**
+ * Get or create the global injector instance
+ */
+function getGlobalInjector() {
+    const storage = typeof window !== 'undefined' ? window : globalThis;
+    if (!storage[GLOBAL_INJECTOR_KEY]) {
+        configure();
+    }
+    return storage[GLOBAL_INJECTOR_KEY];
+}
 /**
  * Allocate a className for a cacheKey without injecting styles yet
  */
@@ -17,8 +90,6 @@ export function allocateClassName(cacheKey, options) {
  * Inject styles and return className with dispose function
  */
 export function inject(rules, options) {
-    // Mark that styles have been generated (prevents configuration changes)
-    markStylesGenerated();
     return getGlobalInjector().inject(rules, options);
 }
 /**
@@ -28,30 +99,10 @@ export function injectGlobal(rules, options) {
     return getGlobalInjector().injectGlobal(rules, options);
 }
 /**
- * Inject raw CSS text directly without parsing
- * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
- * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
- *
- * @example
- * ```tsx
- * // Inject raw CSS
- * const { dispose } = injectRawCSS(`
- *   body { margin: 0; padding: 0; }
- *   .my-class { color: red; }
- * `);
- *
- * // Later, remove the injected CSS
- * dispose();
- * ```
- */
-export function injectRawCSS(css, options) {
-    return getGlobalInjector().injectRawCSS(css, options);
-}
-/**
- * Get raw CSS text for SSR
+ * Internal method for createGlobalStyle - not exported publicly
  */
-export function getRawCSSText(options) {
-    return getGlobalInjector().getRawCSSText(options);
+function injectCreateGlobalStyle(rules, options) {
+    return getGlobalInjector().injectCreateGlobalStyle(rules, options);
 }
 /**
  * Inject keyframes and return object with toString() and dispose()
@@ -122,16 +173,21 @@ export function destroy(root) {
  * Create a new isolated injector instance
  */
 export function createInjector(config = {}) {
-    const defaultConfig = getConfig();
+    const isTest = isTestEnvironment();
     const fullConfig = {
-        ...defaultConfig,
-        // Auto-enable forceTextInjection in test environments
-        forceTextInjection: config.forceTextInjection ?? isTestEnvironment(),
+        ...createDefaultConfig(isTest),
         ...config,
     };
     return new StyleInjector(fullConfig);
 }
-export { StyleInjector } from './injector.js';
-export { SheetManager } from './sheet-manager.js';
+/**
+ * Create a global style component like styled-components createGlobalStyle
+ * Returns a React component that injects global styles when mounted and cleans up when unmounted
+ */
+export function createGlobalStyle(strings, ...interpolations) {
+    return getGlobalInjector().createGlobalStyle(strings, ...interpolations);
+}
+export { StyleInjector } from './injector';
+export { SheetManager } from './sheet-manager';