novaui-cli 1.1.1 → 1.1.3

package/src/commands/add.js

@@ -0,0 +1,168 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import ora from 'ora'
+import { multiselect, isCancel, cancel } from '@clack/prompts'
+import pc from 'picocolors'
+
+import { DEFAULT_CONFIG, UTILS_CONTENT, BASE_URL, REGISTRY_URL } from '../constants.js'
+import { loadConfig } from '../utils/config.js'
+import { ensureDir } from '../utils/fs-helpers.js'
+import { getMissingDeps, installPackages, getInstallHint } from '../utils/deps.js'
+import { fetchWithTimeout } from '../utils/fetch.js'
+import { assertValidComponentConfig } from '../utils/validate.js'
+import { runAddPreflightChecks } from '../utils/preflight.js'
+import { formatComponentNotFoundError } from '../utils/fuzzy.js'
+
+/**
+ * Fetch the registry from GitHub.
+ * Always gets the latest registry from the main branch.
+ */
+async function fetchRegistry() {
+  const spinner = ora({ text: 'Loading component registry...', stream: process.stderr }).start()
+  
+  try {
+    const response = await fetchWithTimeout(REGISTRY_URL)
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch registry: ${response.status} ${response.statusText}`)
+    }
+    
+    const registry = await response.json()
+    spinner.stop()
+    return registry
+  } catch (error) {
+    spinner.fail('Failed to load registry')
+    throw new Error(`Could not fetch registry from GitHub: ${error.message}`)
+  }
+}
+
+/**
+ * Fetch the component registry and present an interactive multi-select for
+ * the user to choose one or more components. Returns the selected names.
+ * Only called in TTY mode.
+ */
+export async function pickComponentsInteractively() {
+  const registry = await fetchRegistry()
+
+  if (!registry || typeof registry !== 'object' || Array.isArray(registry)) {
+    throw new Error('Registry is not a valid object.')
+  }
+
+  const selected = await multiselect({
+    message: 'Select components to add',
+    options: Object.keys(registry).map(name => ({ value: name, label: name })),
+    required: true,
+  })
+
+  if (isCancel(selected)) {
+    cancel('Cancelled.')
+    process.exit(0)
+  }
+
+  return selected
+}
+
+/**
+ * Add a single component by name.
+ *
+ * @param {string} componentName
+ * @param {{ force?: boolean }} [options]
+ */
+export async function add(componentName, options = {}) {
+  const { force = false } = options
+
+  if (!componentName) {
+    throw new Error('Missing component name. Usage: novaui@latest add <component-name>')
+  }
+
+  const cwd = process.cwd()
+  runAddPreflightChecks(cwd)
+
+  console.log('')
+  console.log(`  ◆  NovaUI – Adding "${componentName}"...`)
+  console.log('')
+
+  // ─── 1. Fetch registry ────────────────────────────────────────────────────
+
+  const registry = await fetchRegistry()
+
+  if (!registry || typeof registry !== 'object' || Array.isArray(registry)) {
+    throw new Error('Registry is not a valid object.')
+  }
+
+  if (!registry[componentName]) {
+    throw new Error(formatComponentNotFoundError(componentName, Object.keys(registry)))
+  }
+
+  const componentConfig = registry[componentName]
+  assertValidComponentConfig(componentName, componentConfig)
+
+  const projectConfig = loadConfig(cwd) || DEFAULT_CONFIG
+  const targetBaseDir = path.join(cwd, projectConfig.componentsUi)
+  ensureDir(targetBaseDir)
+
+  // ─── 2. Ensure utils.ts exists ─────────────────────────────────────────────
+
+  const utilsDir = path.join(cwd, projectConfig.lib)
+  const utilsPath = path.join(utilsDir, 'utils.ts')
+
+  if (!fs.existsSync(utilsPath)) {
+    ensureDir(utilsDir)
+    fs.writeFileSync(utilsPath, UTILS_CONTENT)
+    console.log(`  ✓  Created ${projectConfig.lib}/utils.ts`)
+  }
+
+  if (!loadConfig(cwd)) {
+    console.log('')
+    console.log("  ℹ  No components.json found. Using default paths. Run 'npx novaui-cli@latest init' to customize.")
+    console.log('')
+  }
+
+  // ─── 3. Fetch and write component files ────────────────────────────────────
+
+  for (const file of componentConfig.files) {
+    const fileUrl = `${BASE_URL}/${file}`
+    const fileName = path.basename(file)
+    const destPath = path.join(targetBaseDir, fileName)
+
+    if (!force && fs.existsSync(destPath)) {
+      console.log(pc.dim(`  ℹ  ${fileName} already exists, skipping. (use --force to overwrite)`))
+      continue
+    }
+
+    const fileSpinner = ora({ text: `  Downloading ${fileName}...`, stream: process.stderr }).start()
+    const fileResponse = await fetchWithTimeout(fileUrl)
+
+    if (!fileResponse.ok) {
+      fileSpinner.fail(pc.red(`  Failed to download ${fileName}`))
+      continue
+    }
+
+    const content = await fileResponse.text()
+    fs.writeFileSync(destPath, content, 'utf8')
+    fileSpinner.succeed(pc.green(`  ✓  Added ${fileName}`))
+  }
+
+  // ─── 4. Install component dependencies ────────────────────────────────────
+
+  if (componentConfig.dependencies && componentConfig.dependencies.length > 0) {
+    const missingDeps = getMissingDeps(cwd, componentConfig.dependencies)
+    if (missingDeps.length === 0) {
+      console.log('')
+      console.log('  ✓  Component dependencies already in package.json, skipping install.')
+    } else {
+      console.log('')
+      console.log(`  Installing dependencies: ${missingDeps.join(', ')}...`)
+      try {
+        installPackages(missingDeps)
+      } catch {
+        console.error(`  ✗  Failed to install dependencies automatically.`)
+        console.error(pc.dim(`     Run manually: ${getInstallHint(missingDeps)}`))
+      }
+    }
+  }
+
+  console.log('')
+  console.log(pc.green(`  ✓  Successfully added "${componentName}"!`))
+  console.log('')
+}

package/src/commands/init.js

@@ -0,0 +1,330 @@
+import path from "node:path";
+import {
+  text,
+  select,
+  confirm,
+  isCancel,
+  cancel,
+  intro,
+  outro,
+} from "@clack/prompts";
+import pc from "picocolors";
+
+import { THEME_KEYS, getThemeCssContent } from "../themes/index.js";
+import { DEFAULT_CONFIG, UTILS_CONTENT, BABEL_CONFIG_CONTENT, METRO_CONFIG_CONTENT } from "../constants.js";
+import { loadConfig, writeConfig } from "../utils/config.js";
+import { ensureDir, writeIfNotExists } from "../utils/fs-helpers.js";
+import {
+  getMissingDeps,
+  installPackages,
+  getInstallHint,
+} from "../utils/deps.js";
+import { getTailwindConfigContent } from "../utils/tailwind.js";
+import { runInitPreflightChecks } from "../utils/preflight.js";
+
+// ─── ASCII Banner ────────────────────────────────────────────────────────────
+
+export const ASCII_BANNER = `
+${pc.cyan(" ███╗   ██╗ ██████╗ ██╗   ██╗ █████╗     ██╗   ██╗██╗")}
+${pc.cyan(" ████╗  ██║██╔═══██╗██║   ██║██╔══██╗    ██║   ██║██║")}
+${pc.cyan(" ██╔██╗ ██║██║   ██║██║   ██║███████║    ██║   ██║██║")}
+${pc.cyan(" ██║╚██╗██║██║   ██║╚██╗ ██╔╝██╔══██║    ██║   ██║██║")}
+${pc.cyan(" ██║ ╚████║╚██████╔╝ ╚████╔╝ ██║  ██║    ╚██████╔╝██║")}
+${pc.cyan(" ╚═╝  ╚═══╝ ╚═════╝   ╚═══╝  ╚═╝  ╚═╝     ╚═════╝ ╚═╝")}
+${pc.dim("           React Native + NativeWind UI")}
+`;
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function normalizeTheme(themeName) {
+  if (typeof themeName !== "string" || themeName.trim() === "")
+    return DEFAULT_CONFIG.theme;
+  const normalized = themeName.trim().toLowerCase();
+  if (!THEME_KEYS.includes(normalized)) return DEFAULT_CONFIG.theme;
+  return normalized;
+}
+
+/** Prompt for a theme selection; returns default immediately in non-TTY mode. */
+export async function askTheme(defaultTheme = DEFAULT_CONFIG.theme) {
+  const normalizedDefault = normalizeTheme(defaultTheme);
+  if (process.stdin.isTTY !== true) return normalizedDefault;
+
+  const theme = await select({
+    message: "Select a theme",
+    options: THEME_KEYS.map((k) => ({ value: k, label: k })),
+    initialValue: normalizedDefault,
+  });
+
+  if (isCancel(theme)) {
+    cancel("Setup cancelled.");
+    process.exit(0);
+  }
+
+  return theme;
+}
+
+// ─── init command ─────────────────────────────────────────────────────────────
+
+/**
+ * @param {object} [options]
+ * @param {boolean} [options.yes]  Skip all prompts and use defaults (--yes flag)
+ */
+export async function init(options = {}) {
+  const { yes = false } = options;
+  const cwd = process.cwd();
+  
+  runInitPreflightChecks(cwd);
+  
+  const existingConfig = loadConfig(cwd);
+  const isInteractive = process.stdin.isTTY === true && !yes;
+
+  console.log(ASCII_BANNER);
+
+  if (isInteractive) {
+    intro(pc.bold("Welcome to NovaUI"));
+    console.log(pc.dim("   Let's set up your project in a few steps."));
+    console.log("");
+  } else {
+    console.log(pc.bold("   Welcome to NovaUI"));
+    console.log(pc.dim("   Let's set up your project in a few steps."));
+    console.log("");
+  }
+
+  let config;
+
+  if (existingConfig) {
+    console.log(pc.blue("   ⚙  Config"));
+    console.log(pc.dim("   components.json found in this directory."));
+    console.log("");
+
+    let reconfigure = false;
+
+    if (isInteractive) {
+      const answer = await confirm({ message: "Re-configure paths?" });
+      if (isCancel(answer)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+      reconfigure = answer === true;
+    }
+
+    if (reconfigure) {
+      const globalCss = await text({
+        message: "Where should global.css be placed?",
+        placeholder: DEFAULT_CONFIG.globalCss,
+        defaultValue: existingConfig.globalCss || DEFAULT_CONFIG.globalCss,
+      });
+      if (isCancel(globalCss)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const componentsUi = await text({
+        message: "Where should UI components be placed?",
+        placeholder: DEFAULT_CONFIG.componentsUi,
+        defaultValue:
+          existingConfig.componentsUi || DEFAULT_CONFIG.componentsUi,
+      });
+      if (isCancel(componentsUi)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const lib = await text({
+        message: "Where should lib (e.g. utils) be placed?",
+        placeholder: DEFAULT_CONFIG.lib,
+        defaultValue: existingConfig.lib || DEFAULT_CONFIG.lib,
+      });
+      if (isCancel(lib)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const theme = await askTheme(existingConfig.theme);
+
+      config = {
+        globalCss: globalCss.replace(/\\/g, "/"),
+        componentsUi: componentsUi.replace(/\\/g, "/"),
+        lib: lib.replace(/\\/g, "/"),
+        theme,
+      };
+      writeConfig(cwd, config);
+      console.log("");
+      console.log(pc.green("   ✓  Updated components.json"));
+    } else {
+      config = existingConfig;
+    }
+  } else {
+    console.log(pc.blue("   ⚙  Configure paths"));
+    console.log(
+      pc.dim("   Where should NovaUI put its files? Press Enter for defaults."),
+    );
+    console.log("");
+
+    if (isInteractive) {
+      const globalCss = await text({
+        message: "Path for global.css?",
+        placeholder: DEFAULT_CONFIG.globalCss,
+        defaultValue: DEFAULT_CONFIG.globalCss,
+      });
+      if (isCancel(globalCss)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const componentsUi = await text({
+        message: "Path for UI components?",
+        placeholder: DEFAULT_CONFIG.componentsUi,
+        defaultValue: DEFAULT_CONFIG.componentsUi,
+      });
+      if (isCancel(componentsUi)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const lib = await text({
+        message: "Path for lib (utils)?",
+        placeholder: DEFAULT_CONFIG.lib,
+        defaultValue: DEFAULT_CONFIG.lib,
+      });
+      if (isCancel(lib)) {
+        cancel("Setup cancelled.");
+        process.exit(0);
+      }
+
+      const theme = await askTheme();
+
+      config = {
+        globalCss: globalCss.replace(/\\/g, "/"),
+        componentsUi: componentsUi.replace(/\\/g, "/"),
+        lib: lib.replace(/\\/g, "/"),
+        theme,
+      };
+    } else {
+      config = { ...DEFAULT_CONFIG };
+    }
+
+    writeConfig(cwd, config);
+    console.log(pc.green("   ✓  Created components.json"));
+  }
+
+  // ─── Setup files ────────────────────────────────────────────────────────────
+
+  console.log("");
+  console.log(pc.blue("   📁 Setting up project"));
+  console.log("");
+
+  const utilsDir = path.join(cwd, config.lib);
+  ensureDir(utilsDir);
+  const utilsPath = path.join(utilsDir, "utils.ts");
+  writeIfNotExists(utilsPath, UTILS_CONTENT, `${config.lib}/utils.ts`);
+
+  const globalCssDir = path.dirname(path.join(cwd, config.globalCss));
+  ensureDir(globalCssDir);
+  const themeCssContent = await getThemeCssContent(normalizeTheme(config.theme));
+  writeIfNotExists(
+    path.join(cwd, config.globalCss),
+    themeCssContent,
+    config.globalCss,
+  );
+
+  const tailwindContent = getTailwindConfigContent(config);
+  writeIfNotExists(
+    path.join(cwd, "tailwind.config.js"),
+    tailwindContent,
+    "tailwind.config.js",
+  );
+
+  writeIfNotExists(
+    path.join(cwd, "babel.config.js"),
+    BABEL_CONFIG_CONTENT,
+    "babel.config.js",
+  );
+
+  const metroContent = METRO_CONFIG_CONTENT(config.globalCss);
+  writeIfNotExists(
+    path.join(cwd, "metro.config.js"),
+    metroContent,
+    "metro.config.js",
+  );
+
+  // ─── Dependencies ──────────────────────────────────────────────────────────
+
+  const deps = [
+    "nativewind",
+    "react-native-reanimated",
+    "react-native-safe-area-context",
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority",
+  ];
+  const devDeps = [
+    "tailwindcss@^3.4.17",
+    "prettier-plugin-tailwindcss@^0.5.11",
+    "babel-preset-expo",
+  ];
+  const missingDeps = getMissingDeps(cwd, deps);
+  const missingDevDeps = getMissingDeps(cwd, devDeps.map(d => d.split('@')[0]));
+
+  console.log("");
+  console.log(pc.blue("   📦 Dependencies"));
+  console.log("");
+
+  if (missingDeps.length === 0 && missingDevDeps.length === 0) {
+    console.log(
+      pc.dim(
+        "   ✓  All required packages already in package.json, skipping install.",
+      ),
+    );
+  } else {
+    if (missingDeps.length > 0) {
+      console.log(pc.dim(`   Installing: ${missingDeps.join(", ")}`));
+      console.log("");
+      try {
+        installPackages(missingDeps);
+      } catch {
+        console.error("");
+        console.error(pc.yellow("   ✗  Install failed. Run manually:"));
+        console.error(pc.dim(`     ${getInstallHint(missingDeps)}`));
+      }
+    }
+
+    if (missingDevDeps.length > 0) {
+      const devDepsToInstall = devDeps.filter(d => 
+        missingDevDeps.includes(d.split('@')[0])
+      );
+      console.log(pc.dim(`   Installing dev dependencies: ${devDepsToInstall.join(", ")}`));
+      console.log("");
+      try {
+        installPackages(devDepsToInstall, { dev: true });
+      } catch {
+        console.error("");
+        console.error(pc.yellow("   ✗  Dev dependencies install failed. Run manually:"));
+        console.error(pc.dim(`     ${getInstallHint(devDepsToInstall, { dev: true })}`));
+      }
+    }
+  }
+
+  // ─── Success ────────────────────────────────────────────────────────────────
+
+  console.log("");
+  console.log(pc.green("   ┌─────────────────────────────────────────┐"));
+  console.log(pc.green("   │  ✓  NovaUI is ready!                     │"));
+  console.log(pc.green("   └─────────────────────────────────────────┘"));
+  console.log("");
+  console.log(pc.bold("   Next steps:"));
+  console.log("");
+  console.log(
+    pc.dim("   1. Import global CSS in your root entry (e.g. App.tsx):"),
+  );
+  console.log(pc.cyan(`      import "${config.globalCss}"`));
+  console.log("");
+  console.log(pc.dim("   2. Add components:"));
+  console.log(pc.cyan("      npx novaui-cli@latest add button"));
+  console.log(pc.cyan("      npx novaui-cli@latest add card"));
+  console.log("");
+
+  if (isInteractive) {
+    outro(pc.green("Setup complete!"));
+  }
+}

package/src/constants.js

@@ -0,0 +1,101 @@
+// Allow overriding branch via environment variable (useful for testing)
+const BRANCH = process.env.NOVAUI_BRANCH || 'main';
+
+export const BASE_URL = `https://raw.githubusercontent.com/KaloyanBehov/novaui/${BRANCH}`;
+
+export const REGISTRY_URL = `${BASE_URL}/packages/registry/registry.json`;
+
+export const THEMES_BASE_URL = `${BASE_URL}/packages/themes`;
+
+export const CONFIG_FILENAME = 'components.json';
+
+export const FETCH_TIMEOUT_MS = 15000;
+
+export const DEFAULT_CONFIG = {
+  globalCss: 'global.css',
+  componentsUi: 'components/ui',
+  lib: 'lib',
+  theme: 'default',
+};
+
+export const UTILS_CONTENT = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+
+// Default theme bundled as fallback (always available, no network required)
+export const DEFAULT_THEME_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+`;
+
+export const BABEL_CONFIG_CONTENT = `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+`;
+
+export const METRO_CONFIG_CONTENT = (
+  globalCssPath
+) => `const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname)
+
+module.exports = withNativeWind(config, { input: './${globalCssPath}' })
+`;

package/src/themes/default.js

@@ -0,0 +1,51 @@
+export const DEFAULT_THEME_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+`

package/src/themes/index.js

@@ -0,0 +1,48 @@
+import { THEMES_BASE_URL, DEFAULT_THEME_CSS } from '../constants.js'
+import { fetchWithTimeout } from '../utils/fetch.js'
+
+// Available theme names (fetched from GitHub)
+export const THEME_KEYS = ['default', 'ocean', 'sunset']
+
+/**
+ * Fetch theme CSS content from GitHub.
+ * Falls back to bundled default theme if fetch fails or theme is 'default'.
+ * 
+ * @param {string} themeName - The theme name (default, ocean, sunset)
+ * @returns {Promise<string>} The theme CSS content
+ */
+export async function getThemeCssContent(themeName) {
+  const normalized = (typeof themeName === 'string' ? themeName : 'default').trim().toLowerCase()
+  const theme = THEME_KEYS.includes(normalized) ? normalized : 'default'
+  
+  // Use bundled default theme (no network call needed)
+  if (theme === 'default') {
+    return DEFAULT_THEME_CSS
+  }
+  
+  // Fetch other themes from GitHub
+  const themeUrl = `${THEMES_BASE_URL}/${theme}.js`
+  
+  try {
+    const response = await fetchWithTimeout(themeUrl)
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch theme: ${response.status}`)
+    }
+    
+    const content = await response.text()
+    
+    // Extract the CSS content from the export statement
+    // Example: export const OCEAN_THEME_CSS = `...`
+    const match = content.match(/export const \w+_THEME_CSS = `([^`]*)`/s)
+    if (match && match[1]) {
+      return match[1]
+    }
+    
+    throw new Error('Invalid theme format')
+  } catch (error) {
+    // Fallback to default theme on error
+    console.warn(`Warning: Could not fetch "${theme}" theme, using default. ${error.message}`)
+    return DEFAULT_THEME_CSS
+  }
+}