@jjlmoya/utils-creative 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-creative",
-    "version": "1.18.0",
+    "version": "1.20.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/pages/[locale]/[slug].astro

@@ -34,18 +34,28 @@ export async function getStaticPaths() {
       ]),
     ) as Partial<Record<KnownLocale, string>>;
 
+    const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
+    const englishSlug = firstLoader ? (await firstLoader()).slug : entry.id;
+
     for (const { locale, content } of localeContents) {
-      const allToolsNav = await Promise.all(
-        ALL_TOOLS.map(async ({ entry: navEntry }) => ({
-          id: navEntry.id,
-          title: (await navEntry.i18n[locale]!()).title,
-          href: `/${locale}/${(await navEntry.i18n[locale]!()).slug}`,
-          isActive: navEntry.id === entry.id,
-        })),
-      );
+      const allToolsNav = (
+        await Promise.all(
+          ALL_TOOLS.map(async ({ entry: navEntry }) => {
+            const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
+            if (!loader) return null;
+            const navContent = await loader();
+            return {
+              id: navEntry.id,
+              title: navContent.title,
+              href: `/${locale}/${navContent.slug}`,
+              isActive: navEntry.id === entry.id,
+            };
+          }),
+        )
+      ).filter(Boolean) as NavItem[];
       paths.push({
         params: { locale, slug: content.slug },
-        props: { Component, locale, content, localeUrls, allToolsNav },
+        props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
       });
     }
   }
@@ -66,11 +76,16 @@ interface Props {
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
   allToolsNav: NavItem[];
+  englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav } = Astro.props;
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props;
+
+const cssFiles = import.meta.glob("../../tool/*/*.css", { query: "?raw", import: "default" });
+const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
+const toolCss = cssKey ? await cssFiles[cssKey]() as string : "";
 
-const seoContent: UtilitySEOContent = { locale, sections: content.seo };
+const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
 const words = content.title.split(" ");
 const titleHighlight = words[0] || "";
@@ -89,8 +104,9 @@ const titleBase = words.slice(1).join(" ") || "";
     tools={allToolsNav}
   />
   <Fragment slot="head">
+    {toolCss ? <Fragment set:html={`<style is:inline>${toolCss}</style>`} /> : null}
     {
-      content.schemas.map((schema: unknown) => (
+      ( content.schemas ?? []).map((schema: unknown) => (
         <script
           is:inline
           type="application/ld+json"

package/src/tests/shared-test-helpers.ts

@@ -0,0 +1,56 @@
+import type { ToolDefinition } from '../types';
+
+export interface ToolExportValidationResult {
+  passed: boolean;
+  failures: string[];
+}
+
+function validateComponentType(
+  toolId: string,
+  componentName: string,
+  component: unknown,
+  failures: string[],
+): void {
+  if (typeof component !== 'function') {
+    failures.push(`${toolId}: ${componentName} is not a function (${typeof component})`);
+  }
+}
+
+async function validateComponentExecution(
+  toolId: string,
+  componentName: string,
+  fn: () => Promise<unknown>,
+  failures: string[],
+): Promise<void> {
+  try {
+    const result = await fn();
+    if (!result || typeof result !== 'object') {
+      failures.push(`${toolId}: ${componentName} import returned invalid result`);
+    }
+  } catch (error) {
+    failures.push(`${toolId}: ${componentName} execution error - ${error instanceof Error ? error.message : 'unknown'}`);
+  }
+}
+
+export async function validateToolExports(tools: ToolDefinition[]): Promise<ToolExportValidationResult> {
+  const failures: string[] = [];
+
+  for (const tool of tools) {
+    validateComponentType(tool.entry.id, 'Component', tool.Component, failures);
+    validateComponentType(tool.entry.id, 'SEOComponent', tool.SEOComponent, failures);
+    validateComponentType(tool.entry.id, 'BibliographyComponent', tool.BibliographyComponent, failures);
+
+    const componentFn = tool.Component as () => Promise<unknown>;
+    const seoFn = tool.SEOComponent as () => Promise<unknown>;
+    const bibFn = tool.BibliographyComponent as () => Promise<unknown>;
+
+    await validateComponentExecution(tool.entry.id, 'Component', componentFn, failures);
+    await validateComponentExecution(tool.entry.id, 'SEOComponent', seoFn, failures);
+    await validateComponentExecution(tool.entry.id, 'BibliographyComponent', bibFn, failures);
+  }
+
+  return {
+    passed: failures.length === 0,
+    failures,
+  };
+}

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tool/bead-pattern-generator/bead-pattern-generator.css

@@ -18,7 +18,7 @@
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.2);
   }
-  :global(.theme-dark) .bead-card {
+  .theme-dark .bead-card {
     background: rgba(17,24,39,0.85);
     border-color: rgba(55,65,81,0.3);
   }
@@ -53,7 +53,7 @@
     margin: 0;
   }
 
-  :global(.theme-dark) .bead-header-title h2 {
+  .theme-dark .bead-header-title h2 {
     color: #fff;
   }
 
@@ -63,7 +63,7 @@
     margin: 0.25rem 0 0;
   }
 
-  :global(.theme-dark) .bead-header-title p {
+  .theme-dark .bead-header-title p {
     color: #9ca3af;
   }
 
@@ -98,7 +98,7 @@
     border: 1px solid #e5e7eb;
   }
 
-  :global(.theme-dark) .bead-slider-row {
+  .theme-dark .bead-slider-row {
     background: #1f2937;
     border-color: #374151;
   }
@@ -112,7 +112,7 @@
     background: #d1d5db;
   }
 
-  :global(.theme-dark) .bead-slider {
+  .theme-dark .bead-slider {
     background: #4b5563;
   }
 
@@ -149,7 +149,7 @@
     border: 1px solid #e5e7eb;
   }
 
-  :global(.theme-dark) .bead-options-row {
+  .theme-dark .bead-options-row {
     background: #1f2937;
     border-color: #374151;
   }
@@ -165,7 +165,7 @@
     white-space: nowrap;
   }
 
-  :global(.theme-dark) .bead-checkbox-label {
+  .theme-dark .bead-checkbox-label {
     color: #d1d5db;
   }
 
@@ -182,7 +182,7 @@
     background: #d1d5db;
   }
 
-  :global(.theme-dark) .bead-divider {
+  .theme-dark .bead-divider {
     background: #4b5563;
   }
 
@@ -234,7 +234,7 @@
     transition: border-color 0.2s, background 0.2s, transform 0.2s;
     cursor: pointer;
   }
-  :global(.theme-dark) .bead-drop-zone {
+  .theme-dark .bead-drop-zone {
     border-color: #374151;
     background: rgba(31,41,55,0.5);
   }
@@ -284,7 +284,7 @@
     margin: 0;
   }
 
-  :global(.theme-dark) .bead-drop-content h3 {
+  .theme-dark .bead-drop-content h3 {
     color: #e5e7eb;
   }
 
@@ -344,13 +344,13 @@
     gap: 0.5rem;
   }
 
-  :global(.bead-palette-item) {
+  .bead-palette-item {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  :global(.bead-color-swatch) {
+  .bead-color-swatch {
     width: 100%;
     aspect-ratio: 1;
     border-radius: 50%;
@@ -362,21 +362,21 @@
     justify-content: center;
   }
 
-  :global(.theme-dark .bead-color-swatch) {
+  .theme-dark .bead-color-swatch {
     border-color: #1f2937;
     outline-color: #374151;
   }
 
-  :global(.bead-symbol) {
+  .bead-symbol {
     font-size: 0.75rem;
     font-weight: 700;
     user-select: none;
   }
-  :global(.bead-symbol-dark) {
+  .bead-symbol-dark {
     color: #000;
   }
 
-  :global(.bead-symbol-light) {
+  .bead-symbol-light {
     color: #fff;
   }
 
@@ -414,7 +414,7 @@
     text-align: center;
   }
 
-  :global(.theme-dark) .bead-canvas-col {
+  .theme-dark .bead-canvas-col {
     background: #030712;
     border-color: #1f2937;
   }
@@ -439,7 +439,7 @@
     border-radius: 0.75rem;
   }
 
-  :global(.theme-dark) .bead-tunnel-bar {
+  .theme-dark .bead-tunnel-bar {
     background: rgba(79,70,229,0.1);
     border-color: rgba(99,102,241,0.3);
   }
@@ -450,7 +450,7 @@
     margin: 0;
   }
 
-  :global(.theme-dark) .bead-tunnel-title {
+  .theme-dark .bead-tunnel-title {
     color: #c7d2fe;
   }
 
@@ -460,7 +460,7 @@
     margin: 0.25rem 0 0;
   }
 
-  :global(.theme-dark) .bead-tunnel-sub {
+  .theme-dark .bead-tunnel-sub {
     color: #818cf8;
   }
 
@@ -484,7 +484,7 @@
     background: #e0e7ff;
   }
 
-  :global(.theme-dark) .bead-tunnel-btn {
+  .theme-dark .bead-tunnel-btn {
     background: #1f2937;
     color: #818cf8;
   }
@@ -500,7 +500,7 @@
     text-align: center;
   }
 
-  :global(.theme-dark) .bead-tunnel-display {
+  .theme-dark .bead-tunnel-display {
     background: #1f2937;
     color: #818cf8;
     border-color: rgba(99,102,241,0.3);

package/src/tool/bead-pattern-generator/seo.astro

@@ -1,14 +1,19 @@
 ---
-import { SEORenderer } from '@jjlmoya/utils-shared';
-import { beadPatternGenerator } from './index';
-import type { KnownLocale } from '../../types';
+import { SEORenderer } from "@jjlmoya/utils-shared";
+import { beadPatternGenerator } from "./index";
+import type { KnownLocale } from "../../types";
 
 interface Props {
   locale?: KnownLocale;
 }
 
-const { locale = 'es' } = Astro.props;
+const { locale = "es" } = Astro.props;
 const content = await beadPatternGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{
+  content.seo?.length > 0 && (
+    <SEORenderer content={{ locale, sections: content.seo }} />
+  )
+}

package/src/tool/dice-roller/dice-roller.css

@@ -25,7 +25,7 @@
   padding: 1rem;
 }
 
-:global(.theme-dark) .dr-root {
+.theme-dark .dr-root {
   --dr-bg: #0f172a;
   --dr-bg-muted: #1e293b;
   --dr-bg-card: #1e293b;
@@ -147,7 +147,7 @@
   font-style: italic;
 }
 
-:global(.dr-pool-chip) {
+.dr-pool-chip {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -157,13 +157,13 @@
   padding: 0.2rem 0.5rem 0.2rem 0.75rem;
 }
 
-:global(.dr-chip-label) {
+.dr-chip-label {
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--dr-primary);
 }
 
-:global(.dr-chip-remove) {
+.dr-chip-remove {
   width: 1.125rem;
   height: 1.125rem;
   border-radius: 50%;
@@ -180,7 +180,7 @@
   padding: 0;
 }
 
-:global(.dr-chip-remove:hover) {
+.dr-chip-remove:hover {
   background: var(--dr-primary-dark);
 }
 
@@ -350,7 +350,7 @@
   justify-content: center;
 }
 
-:global(.dr-result-pip) {
+.dr-result-pip {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -363,24 +363,24 @@
   transition: border-color 0.2s;
 }
 
-:global(.dr-pip-max) {
+.dr-pip-max {
   border-color: var(--dr-success);
   background: rgba(16, 185, 129, 0.1);
 }
 
-:global(.dr-pip-min) {
+.dr-pip-min {
   border-color: var(--dr-danger);
   background: rgba(239, 68, 68, 0.1);
 }
 
-:global(.dr-pip-val) {
+.dr-pip-val {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--dr-text);
   line-height: 1;
 }
 
-:global(.dr-pip-die) {
+.dr-pip-die {
   font-size: 0.65rem;
   color: var(--dr-text-muted);
   font-weight: 600;
@@ -431,7 +431,7 @@
   margin: 1rem 0;
 }
 
-:global(.dr-history-item) {
+.dr-history-item {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
@@ -455,7 +455,7 @@
   }
 }
 
-:global(.dr-hist-expr) {
+.dr-hist-expr {
   color: var(--dr-text-muted);
   font-size: 0.75rem;
   overflow: hidden;
@@ -463,13 +463,13 @@
   white-space: nowrap;
 }
 
-:global(.dr-hist-result) {
+.dr-hist-result {
   font-weight: 800;
   font-size: 1rem;
   color: var(--dr-primary);
 }
 
-:global(.dr-hist-time) {
+.dr-hist-time {
   font-size: 0.7rem;
   color: var(--dr-text-muted);
 }

package/src/tool/dice-roller/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await diceRoller.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/excuse-generator/excuse-generator.css

@@ -16,7 +16,7 @@
   --excuse-generator-ring: rgba(236, 72, 153, 0.2);
 }
 
-:global(.theme-dark) .excuse-generator {
+.theme-dark .excuse-generator {
   --excuse-generator-bg: #0f172a;
   --excuse-generator-bg-transparent: rgba(15, 23, 42, 0.8);
   --excuse-generator-bg-muted: #1e293b;
@@ -131,7 +131,7 @@
   transition-duration: 300ms;
 }
 
-:global(.theme-dark) .excuse-generator-slot {
+.theme-dark .excuse-generator-slot {
   background-color: rgba(15, 23, 42, 0.6);
 }
 
@@ -233,7 +233,7 @@
   transition-duration: 300ms;
 }
 
-:global(.theme-dark) .excuse-generator-btn {
+.theme-dark .excuse-generator-btn {
   background-color: #f8fafc;
   color: #0f172a;
 }

package/src/tool/excuse-generator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await excuseGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/fortune-cookie/fortune-cookie.css

@@ -14,7 +14,7 @@
   --fortune-cookie-error: #f43f5e;
 }
 
-:global(.theme-dark) .fortune-cookie {
+.theme-dark .fortune-cookie {
   --fortune-cookie-bg: #0f172a;
   --fortune-cookie-bg-muted: #1e293b;
   --fortune-cookie-text: #f8fafc;
@@ -80,7 +80,7 @@
   animation: fortune-cookie-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-:global(.theme-dark) .fortune-cookie-instruction {
+.theme-dark .fortune-cookie-instruction {
   color: #fbbf24;
 }
 
@@ -238,7 +238,7 @@
   transform: rotate(-1deg);
 }
 
-:global(.fortune-cookie-number) {
+.fortune-cookie-number {
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 700;
@@ -300,7 +300,7 @@
   transition-duration: 150ms;
 }
 
-:global(.theme-dark) .fortune-cookie-share-btn {
+.theme-dark .fortune-cookie-share-btn {
   background-color: #1e293b;
   color: #cbd5e1;
 }
@@ -309,7 +309,7 @@
   background-color: #e2e8f0;
 }
 
-:global(.theme-dark) .fortune-cookie-share-btn:hover {
+.theme-dark .fortune-cookie-share-btn:hover {
   background-color: #334155;
 }
 
@@ -332,7 +332,7 @@
   40%, 60% { transform: translate3d(4px, 0, 0) rotate(4deg); }
 }
 
-:global(.fortune-cookie-crumb) {
+.fortune-cookie-crumb {
   position: absolute;
   width: 20px;
   height: 20px;

package/src/tool/fortune-cookie/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await fortuneCookie.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/synesthesia-painter/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await synesthesiaPainter.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/synesthesia-painter/synesthesia-painter.css

@@ -11,7 +11,7 @@
   --sp-header-bg: rgba(255, 255, 255, 0.92);
 }
 
-:global(.theme-dark) .synesthesia-painter {
+.theme-dark .synesthesia-painter {
   --sp-bg: #0f172a;
   --sp-bg-muted: #1e293b;
   --sp-text: #f8fafc;
@@ -171,7 +171,7 @@
   color: #ef4444;
 }
 
-:global(.synesthesia-painter-char) {
+.synesthesia-painter-char {
   display: inline-block;
   color: var(--char-color);
   transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -190,7 +190,7 @@
   }
 }
 
-:global(.synesthesia-painter-viz-layer.dots .synesthesia-painter-char) {
+.synesthesia-painter-viz-layer.dots .synesthesia-painter-char {
   color: transparent;
   font-size: 0;
   width: 1rem;
@@ -201,17 +201,17 @@
   box-shadow: 0 0 8px var(--char-color);
 }
 
-:global(.synesthesia-painter-viz-layer.aura .synesthesia-painter-char) {
+.synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
   color: rgba(255, 255, 255, 0.15);
   text-shadow: 0 0 18px var(--char-color), 0 0 36px var(--char-color);
 }
 
-:global(.theme-dark .synesthesia-painter-viz-layer.aura .synesthesia-painter-char) {
+.theme-dark .synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
   color: rgba(255, 255, 255, 0.85);
   text-shadow: 0 0 14px var(--char-color), 0 0 28px var(--char-color), 0 0 56px var(--char-color);
 }
 
-:global(.synesthesia-painter-cursor) {
+.synesthesia-painter-cursor {
   display: inline-block;
   width: 2px;
   height: 2.5rem;

package/src/tool/zalgo-generator/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await zalgoGenerator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/zalgo-generator/zalgo-generator.css

@@ -35,7 +35,7 @@
     overflow: hidden;
   }
 
-  :global(.theme-dark) .zg-config-card {
+  .theme-dark .zg-config-card {
     background: rgba(24, 24, 27, 0.85);
     border-color: #27272a;
   }
@@ -63,7 +63,7 @@
     margin: 0 0 1.5rem;
   }
 
-  :global(.theme-dark) .zg-config-title {
+  .theme-dark .zg-config-title {
     color: #fff;
   }
 
@@ -93,7 +93,7 @@
     color: #64748b;
   }
 
-  :global(.theme-dark) .zg-field-label {
+  .theme-dark .zg-field-label {
     color: #71717a;
   }
 
@@ -113,7 +113,7 @@
     accent-color: #9333ea;
   }
 
-  :global(.theme-dark) .zg-slider {
+  .theme-dark .zg-slider {
     background: #27272a;
   }
 
@@ -140,11 +140,11 @@
     border-color: rgba(147, 51, 234, 0.15);
   }
 
-  :global(.theme-dark) .zg-toggle-row {
+  .theme-dark .zg-toggle-row {
     background: rgba(9, 9, 11, 0.5);
   }
 
-  :global(.theme-dark) .zg-toggle-row:hover {
+  .theme-dark .zg-toggle-row:hover {
     background: #27272a;
   }
 
@@ -154,7 +154,7 @@
     color: #374151;
   }
 
-  :global(.theme-dark) .zg-toggle-label {
+  .theme-dark .zg-toggle-label {
     color: #d4d4d8;
   }
 
@@ -200,7 +200,7 @@
     transform: translateX(1.25rem);
   }
 
-  :global(.theme-dark) .zg-switch-track {
+  .theme-dark .zg-switch-track {
     background: #3f3f46;
   }
 
@@ -226,11 +226,11 @@
     color: #9333ea;
   }
 
-  :global(.theme-dark) .zg-reset-btn {
+  .theme-dark .zg-reset-btn {
     color: #52525b;
   }
 
-  :global(.theme-dark) .zg-reset-btn:hover {
+  .theme-dark .zg-reset-btn:hover {
     color: #a855f7;
   }
 
@@ -249,7 +249,7 @@
     margin: 0;
   }
 
-  :global(.theme-dark) .zg-warning p {
+  .theme-dark .zg-warning p {
     color: rgba(165, 180, 252, 0.8);
   }
 
@@ -269,7 +269,7 @@
     flex-direction: column;
   }
 
-  :global(.theme-dark) .zg-editor-card {
+  .theme-dark .zg-editor-card {
     background: #09090b;
     border-color: #27272a;
   }
@@ -283,7 +283,7 @@
     background: rgba(248, 250, 252, 0.5);
   }
 
-  :global(.theme-dark) .zg-editor-bar {
+  .theme-dark .zg-editor-bar {
     border-color: #18181b;
     background: rgba(24, 24, 27, 0.3);
   }
@@ -301,7 +301,7 @@
     letter-spacing: 0.05em;
   }
 
-  :global(.theme-dark) .zg-editor-filename {
+  .theme-dark .zg-editor-filename {
     color: #52525b;
   }
 
@@ -318,7 +318,7 @@
     border: none;
   }
 
-  :global(.theme-dark) .zg-textarea {
+  .theme-dark .zg-textarea {
     color: #e4e4e7;
   }
 
@@ -326,7 +326,7 @@
     color: #cbd5e1;
   }
 
-  :global(.theme-dark) .zg-textarea::placeholder {
+  .theme-dark .zg-textarea::placeholder {
     color: #3f3f46;
   }
 
@@ -343,7 +343,7 @@
     color: #94a3b8;
   }
 
-  :global(.theme-dark) .zg-char-count {
+  .theme-dark .zg-char-count {
     color: #3f3f46;
   }
 
@@ -353,7 +353,7 @@
     background: #e2e8f0;
   }
 
-  :global(.theme-dark) .zg-footer-sep {
+  .theme-dark .zg-footer-sep {
     background: #27272a;
   }
 
@@ -394,12 +394,12 @@
     background: #e2e8f0;
   }
 
-  :global(.theme-dark) .zg-clear-btn {
+  .theme-dark .zg-clear-btn {
     background: #18181b;
     color: #71717a;
   }
 
-  :global(.theme-dark) .zg-clear-btn:hover {
+  .theme-dark .zg-clear-btn:hover {
     background: #27272a;
   }
 
@@ -438,7 +438,7 @@
     overflow: visible;
   }
 
-  :global(.theme-dark) .zg-preview-body {
+  .theme-dark .zg-preview-body {
     background: #18181b;
     border-color: #27272a;
   }
@@ -479,7 +479,7 @@
     transition: color 0.5s;
   }
 
-  :global(.theme-dark) .zg-output-empty {
+  .theme-dark .zg-output-empty {
     color: #27272a;
   }
 
@@ -529,7 +529,7 @@
     letter-spacing: 0.1em;
   }
 
-  :global(.theme-dark) .zg-preview-note {
+  .theme-dark .zg-preview-note {
     color: #52525b;
   }
 
@@ -545,6 +545,6 @@
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   }
 
-  :global(.theme-dark) .zg-slider::-webkit-slider-thumb {
+  .theme-dark .zg-slider::-webkit-slider-thumb {
     border-color: #18181b;
   }