@svgrid/ui 0.3.1 → 0.3.3

package/README.md

@@ -30,9 +30,11 @@ npx @svgrid/ui add button --preview
 ```
 
 `try` needs no project - it caches a tiny Vite + Svelte sandbox under your temp
-dir (so repeat runs are instant) and opens the browser. `--preview` drops a
-`src/routes/preview/<id>` page (plus a `/preview` index) into an existing
-SvelteKit app so it renders in your running dev server.
+dir (so repeat runs are instant) and opens the browser, with a **theme picker
+(all 19 presets) and a light/dark toggle** so you can see the component in your
+target theme. `--preview` drops a `src/routes/preview/<id>` page (plus a
+`/preview` index) into an existing SvelteKit app so it renders in your running
+dev server.
 
 ## Usage
 

package/index.mjs

@@ -345,26 +345,30 @@ async function cmdAdd(registry, tokens, args) {
     return
   }
 
-  // Ensure deps + install (on by default; --no-install just prints the command).
-  const added = await ensureDeps(projectRoot, [...deps])
-  const pm = detectPm(projectRoot)
-  if (added.length) {
-    if (args.install && projectRoot) {
-      stdout.write(`\n${color('dim', `Installing with ${pm.id}...`)}\n`)
-      // Single shell string (not bin + args[]) so Node doesn't warn DEP0190
-      // under shell:true; the tokens here are fixed pm commands + npm package ids.
-      const res = spawnSync(`${pm.add} ${added.join(' ')}`, { cwd: projectRoot, stdio: 'inherit', shell: true })
-      if (res.status !== 0) {
-        stdout.write(`${color('yellow', '!')} Install failed - run it yourself: ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
+  // Install the dependency - only meaningful inside a project (on by default;
+  // --no-install just prints the command). `add` writes into an EXISTING app;
+  // a no-project run is handled in the next-steps block below.
+  if (projectRoot) {
+    const pm = detectPm(projectRoot)
+    const added = await ensureDeps(projectRoot, [...deps])
+    if (added.length) {
+      if (args.install) {
+        stdout.write(`\n${color('dim', `Installing with ${pm.id}...`)}\n`)
+        // Single shell string (not bin + args[]) so Node doesn't warn DEP0190
+        // under shell:true; the tokens here are fixed pm commands + npm package ids.
+        const res = spawnSync(`${pm.add} ${added.join(' ')}`, { cwd: projectRoot, stdio: 'inherit', shell: true })
+        if (res.status !== 0) {
+          stdout.write(`${color('yellow', '!')} Install failed - run it yourself: ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
+        }
+      } else {
+        stdout.write(`\n${color('bold', 'Install the dependency')}\n  ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
       }
-    } else {
-      stdout.write(`\n${color('bold', 'Install the dependency')}\n  ${color('cyan', `${pm.add} ${added.join(' ')}`)}\n`)
+    } else if ([...deps].length) {
+      stdout.write(`\n${color('dim', `${[...deps].join(', ')} already in package.json.`)}\n`)
     }
-  } else if ([...deps].length) {
-    stdout.write(`\n${color('dim', `${[...deps].join(', ')} already in package.json.`)}\n`)
   }
 
-  // Optional preview route(s).
+  // Optional preview route(s) - needs a SvelteKit project.
   if (args.preview) {
     if (isSvelteKit(projectRoot)) {
       const urls = await writePreviewRoutes(projectRoot, dest, items, args.force)
@@ -378,14 +382,22 @@ async function cmdAdd(registry, tokens, args) {
     }
   }
 
-  // Next steps: how to USE it (code) and how to SEE it (try / --preview).
+  // Next steps.
   const first = items[0]
+  const ids = items.map((it) => it.id).join(' ')
   stdout.write(`\n${color('green', '✔')} Added ${written.length} file(s). They're yours - edit away.\n`)
-  if (first) {
+  if (!projectRoot) {
+    // A lone component file with no app to run it - `add` targets an existing
+    // project. Point at the two real paths instead of leaving a stranded file.
+    stdout.write(
+      `  ${color('yellow', 'Heads up:')} no package.json here, so there's nothing to run this in yet.\n` +
+        `  ${color('dim', 'See it now:')}   ${color('cyan', `npx @svgrid/ui try ${ids}`)} ${color('dim', '(no project needed)')}\n` +
+        `  ${color('dim', 'Start an app:')} ${color('cyan', 'npm create @svgrid@latest')} ${color('dim', '(then run add inside it)')}\n`,
+    )
+  } else {
     stdout.write(`  ${color('dim', 'Use it:')}  import { ${exportName(first.id)} } from '@svgrid/grid'\n`)
     // "See it" - skip when we already wrote preview routes just above.
     if (!(args.preview && isSvelteKit(projectRoot))) {
-      const ids = items.map((it) => it.id).join(' ')
       stdout.write(`  ${color('dim', 'See it:')}  ${color('cyan', `npx @svgrid/ui try ${ids}`)} ${color('dim', '(opens in your browser)')}\n`)
       if (isSvelteKit(projectRoot)) {
         stdout.write(`  ${color('dim', 'In app:')}  re-run with ${color('cyan', '--preview')} to add a /preview/${first.id} route\n`)
@@ -459,23 +471,58 @@ async function cmdTry(registry, tokens) {
   await writeFile(
     join(src, 'App.svelte'),
     `<script lang="ts">
+  import { themePresets, resolveThemeTokens } from '@svgrid/grid/themes'
 ${imports.join('\n')}
+
+  let themeId = $state(themePresets[0].id)
+  let mode = $state<'light' | 'dark'>('light')
+  const preset = $derived(themePresets.find((p) => p.id === themeId) ?? themePresets[0])
+
+  // Apply the chosen preset + light/dark as --sg-* tokens on :root, the same way
+  // the shipped themes/<id>.css files do (light in :root, dark under data-theme),
+  // so both the components and this page follow the picker.
+  $effect(() => {
+    const tokens = resolveThemeTokens(preset, mode)
+    const root = document.documentElement
+    for (const [k, v] of Object.entries(tokens)) root.style.setProperty(k, v)
+    root.setAttribute('data-theme', mode)
+    root.style.colorScheme = mode
+  })
 </script>
 
+<header class="svui-try__bar">
+  <strong class="svui-try__brand">@svgrid/ui preview</strong>
+  <div class="svui-try__controls">
+    <label class="svui-try__field">
+      Theme
+      <select bind:value={themeId}>
+        {#each themePresets as p (p.id)}<option value={p.id}>{p.name}</option>{/each}
+      </select>
+    </label>
+    <button type="button" class="svui-try__toggle" onclick={() => (mode = mode === 'light' ? 'dark' : 'light')}>
+      {mode === 'light' ? 'Dark' : 'Light'} mode
+    </button>
+  </div>
+</header>
+
 <main class="svui-try">
-  <header class="svui-try__head">
-    <strong>@svgrid/ui preview</strong>
-    <span>${esc(items.map((i) => i.id).join(', '))}</span>
-  </header>
+  <p class="svui-try__sub">${esc(items.map((i) => i.id).join(', '))}</p>
 ${sections.join('\n')}
 </main>
 
 <style>
-  :global(body) { margin: 0; background: #f8fafc; }
-  .svui-try { max-width: 960px; margin: 0 auto; padding: 32px 24px; font-family: system-ui, sans-serif; }
-  .svui-try__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; color: #64748b; }
-  .svui-try__item { padding: 28px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; margin-bottom: 16px; }
-  .svui-try__item h2 { margin: 0 0 16px; font-size: 15px; color: #334155; }
+  :global(body) { margin: 0; background: var(--sg-bg, #f8fafc); color: var(--sg-fg, #0f172a); transition: background 0.15s, color 0.15s; }
+  .svui-try__bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 24px; background: var(--sg-header-bg, #fff); border-bottom: 1px solid var(--sg-border, #e2e8f0); }
+  .svui-try__brand { font-size: 13px; color: var(--sg-muted, #64748b); }
+  .svui-try__controls { display: flex; align-items: center; gap: 12px; }
+  .svui-try__field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .svui-try__field select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .svui-try__toggle { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a); }
+  .svui-try__toggle:hover { border-color: var(--sg-accent, #6366f1); }
+  .svui-try { max-width: 960px; margin: 0 auto; padding: 24px; font-family: system-ui, sans-serif; }
+  .svui-try__sub { margin: 0 0 20px; font-size: 12px; color: var(--sg-muted, #64748b); }
+  .svui-try__item { padding: 28px; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; background: var(--sg-bg, #fff); margin-bottom: 16px; }
+  .svui-try__item h2 { margin: 0 0 16px; font-size: 15px; color: var(--sg-muted, #334155); }
 </style>
 `,
   )

package/package.json

@@ -4,7 +4,7 @@
     "type": "commercial",
     "url": "https://svgrid.com/pricing"
   },
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Add and preview SvGrid UI components in one command: npx @svgrid/ui try calendar",
   "type": "module",
   "license": "MIT",