@stacksjs/stx 0.2.95 → 0.2.97

package/dist/story/output.js

@@ -1,2 +1,153 @@
-// @bun
-import{$c as x,Ec as a,Fc as b,Gc as c,Hc as d,Ic as e,Jc as f,Kc as g,Lc as h,Mc as i,Nc as j,Oc as k,Pc as l,Qc as m,Rc as n,Sc as o,Tc as p,Uc as q,Vc as r,Wc as s,Xc as t,Yc as u,Zc as v,_c as w,ad as y,bd as z,cd as A,dd as B,ed as C}from"../chunk-yn38c15w.js";import"../chunk-xv34zbp4.js";export{e as yellow,i as white,n as underline,b as style,c as red,t as printWarning,x as printTestSummary,u as printSuccess,q as printStoryCount,p as printServerUrls,v as printInfo,y as printHelp,r as printFileChange,s as printError,w as printBuildSummary,o as printBanner,g as magenta,m as italic,d as green,j as gray,C as formatSize,B as formatDuration,l as dim,h as cyan,A as createSpinner,a as color,z as clearConsole,k as bold,f as blue};
+const ESC = "\x1B[", RESET = `${ESC}0m`, colors = {
+  black: `${ESC}30m`,
+  red: `${ESC}31m`,
+  green: `${ESC}32m`,
+  yellow: `${ESC}33m`,
+  blue: `${ESC}34m`,
+  magenta: `${ESC}35m`,
+  cyan: `${ESC}36m`,
+  white: `${ESC}37m`,
+  gray: `${ESC}90m`,
+  brightRed: `${ESC}91m`,
+  brightGreen: `${ESC}92m`,
+  brightYellow: `${ESC}93m`,
+  brightBlue: `${ESC}94m`,
+  brightMagenta: `${ESC}95m`,
+  brightCyan: `${ESC}96m`,
+  brightWhite: `${ESC}97m`
+}, styles = {
+  bold: `${ESC}1m`,
+  dim: `${ESC}2m`,
+  italic: `${ESC}3m`,
+  underline: `${ESC}4m`,
+  inverse: `${ESC}7m`,
+  strikethrough: `${ESC}9m`
+};
+export function color(text, colorName) {
+  return `${colors[colorName]}${text}${RESET}`;
+}
+export function style(text, styleName) {
+  return `${styles[styleName]}${text}${RESET}`;
+}
+export const red = (text) => color(text, "red"), green = (text) => color(text, "green"), yellow = (text) => color(text, "yellow"), blue = (text) => color(text, "blue"), magenta = (text) => color(text, "magenta"), cyan = (text) => color(text, "cyan"), white = (text) => color(text, "white"), gray = (text) => color(text, "gray"), bold = (text) => style(text, "bold"), dim = (text) => style(text, "dim"), italic = (text) => style(text, "italic"), underline = (text) => style(text, "underline");
+export function printBanner() {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("         \uD83D\uDCD6 STX Story                  ") + cyan("\u2551"));
+  console.log(cyan("  \u2551") + dim("    Component Showcase & Testing       ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+}
+export function printServerUrls(url, networkUrl) {
+  console.log(bold("  Server running at:"));
+  console.log("");
+  console.log(`  ${dim("\u279C")}  ${bold("Local:")}   ${cyan(url)}`);
+  if (networkUrl)
+    console.log(`  ${dim("\u279C")}  ${bold("Network:")} ${cyan(networkUrl)}`);
+  console.log("");
+}
+export function printStoryCount(count) {
+  const icon = count > 0 ? "\u2713" : "\u25CB", countColor = count > 0 ? green : yellow;
+  console.log(`  ${countColor(icon)} Found ${bold(String(count))} story ${count === 1 ? "file" : "files"}`);
+}
+export function printFileChange(event, file) {
+  const icon = {
+    add: green("+"),
+    change: yellow("~"),
+    unlink: red("-")
+  }[event] || "\u2022";
+  console.log(`  ${icon} ${dim(`[${event}]`)} ${file}`);
+}
+export function printError(message, details) {
+  console.log("");
+  console.log(`  ${red("\u2717")} ${bold(red("Error:"))} ${message}`);
+  if (details)
+    console.log(`    ${dim(details)}`);
+  console.log("");
+}
+export function printWarning(message) {
+  console.log(`  ${yellow("\u26A0")} ${yellow("Warning:")} ${message}`);
+}
+export function printSuccess(message) {
+  console.log(`  ${green("\u2713")} ${message}`);
+}
+export function printInfo(message) {
+  console.log(`  ${blue("\u2139")} ${message}`);
+}
+export function printBuildSummary(storyCount, outDir, duration) {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("           Build Complete              ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+  console.log(`  ${green("\u2713")} Stories:  ${bold(String(storyCount))}`);
+  console.log(`  ${green("\u2713")} Output:   ${bold(outDir)}`);
+  console.log(`  ${green("\u2713")} Time:     ${bold(`${duration}ms`)}`);
+  console.log("");
+}
+export function printTestSummary(total, passed, failed, duration) {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("           Test Results                ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+  console.log(`  Total:   ${bold(String(total))}`);
+  console.log(`  Passed:  ${green(String(passed))} ${green("\u2713")}`);
+  if (failed > 0)
+    console.log(`  Failed:  ${red(String(failed))} ${red("\u2717")}`);
+  console.log(`  Time:    ${bold(`${duration}ms`)}`);
+  console.log("");
+}
+export function printHelp() {
+  console.log("");
+  console.log(bold("  Keyboard Shortcuts:"));
+  console.log("");
+  console.log(`  ${cyan("h")}  Show this help`);
+  console.log(`  ${cyan("o")}  Open in browser`);
+  console.log(`  ${cyan("r")}  Restart server`);
+  console.log(`  ${cyan("c")}  Clear console`);
+  console.log(`  ${cyan("q")}  Quit`);
+  console.log("");
+}
+export function clearConsole() {
+  process.stdout.write("\x1Bc");
+}
+export function createSpinner(text) {
+  const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  let frameIndex = 0, interval = null, currentText = text;
+  return {
+    start() {
+      interval = setInterval(() => {
+        process.stdout.write(`\r  ${cyan(frames[frameIndex])} ${currentText}`);
+        frameIndex = (frameIndex + 1) % frames.length;
+      }, 80);
+    },
+    stop(success = !0) {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+      const icon = success ? green("\u2713") : red("\u2717");
+      process.stdout.write(`\r  ${icon} ${currentText}
+`);
+    },
+    update(newText) {
+      currentText = newText;
+    }
+  };
+}
+export function formatDuration(ms) {
+  if (ms < 1000)
+    return `${ms}ms`;
+  if (ms < 60000)
+    return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000), seconds = (ms % 60000 / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+}
+export function formatSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1048576)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}

package/dist/story/performance.js

@@ -1,2 +1,252 @@
-// @bun
-import{$b as c,Zb as a,_b as b,ac as d,bc as e,cc as f}from"../chunk-jjamhxpm.js";import"../chunk-xv34zbp4.js";export{c as profiler,f as getPerformanceScript,e as getPerformancePanelStyles,d as getPerformancePanelHtml,b as RenderTimer,a as PerformanceProfiler};
+export class PerformanceProfiler {
+  metrics = new Map;
+  maxHistorySize = 100;
+  enabled = !0;
+  setEnabled(enabled) {
+    this.enabled = enabled;
+  }
+  recordRender(componentId, componentName, duration, props) {
+    if (!this.enabled)
+      return;
+    let metrics = this.metrics.get(componentId);
+    if (!metrics) {
+      metrics = {
+        componentId,
+        componentName,
+        renderCount: 0,
+        totalRenderTime: 0,
+        avgRenderTime: 0,
+        minRenderTime: 1 / 0,
+        maxRenderTime: 0,
+        lastRenderTime: 0,
+        history: []
+      };
+      this.metrics.set(componentId, metrics);
+    }
+    metrics.renderCount++;
+    metrics.totalRenderTime += duration;
+    metrics.avgRenderTime = metrics.totalRenderTime / metrics.renderCount;
+    metrics.minRenderTime = Math.min(metrics.minRenderTime, duration);
+    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, duration);
+    metrics.lastRenderTime = duration;
+    const memory = this.getMemoryUsage();
+    if (memory !== void 0)
+      metrics.memoryUsage = memory;
+    metrics.history.push({
+      timestamp: Date.now(),
+      duration,
+      props,
+      memory
+    });
+    if (metrics.history.length > this.maxHistorySize)
+      metrics.history = metrics.history.slice(-this.maxHistorySize);
+  }
+  getMetrics(componentId) {
+    return this.metrics.get(componentId);
+  }
+  getAllMetrics() {
+    return Array.from(this.metrics.values());
+  }
+  getSlowestComponents(limit = 10) {
+    return this.getAllMetrics().sort((a, b) => b.avgRenderTime - a.avgRenderTime).slice(0, limit);
+  }
+  getMostRenderedComponents(limit = 10) {
+    return this.getAllMetrics().sort((a, b) => b.renderCount - a.renderCount).slice(0, limit);
+  }
+  clear() {
+    this.metrics.clear();
+  }
+  clearComponent(componentId) {
+    this.metrics.delete(componentId);
+  }
+  getMemoryUsage() {
+    if (typeof performance < "u" && "memory" in performance)
+      return performance.memory?.usedJSHeapSize;
+    return;
+  }
+  exportMetrics() {
+    return JSON.stringify({
+      timestamp: Date.now(),
+      metrics: this.getAllMetrics()
+    }, null, 2);
+  }
+  createTimer(componentId, componentName) {
+    return new RenderTimer(this, componentId, componentName);
+  }
+}
+
+export class RenderTimer {
+  profiler;
+  componentId;
+  componentName;
+  startTime;
+  props;
+  constructor(profiler, componentId, componentName) {
+    this.profiler = profiler;
+    this.componentId = componentId;
+    this.componentName = componentName;
+    this.startTime = performance.now();
+  }
+  setProps(props) {
+    this.props = props;
+    return this;
+  }
+  end() {
+    const duration = performance.now() - this.startTime;
+    this.profiler.recordRender(this.componentId, this.componentName, duration, this.props);
+    return duration;
+  }
+}
+export const profiler = new PerformanceProfiler;
+export function getPerformancePanelHtml(metrics) {
+  return `
+    <div class="performance-panel">
+      <div class="performance-header">
+        <h3>Performance</h3>
+        <button onclick="clearPerformanceMetrics()">Clear</button>
+      </div>
+      <table class="performance-table">
+        <thead>
+          <tr>
+            <th>Component</th>
+            <th>Renders</th>
+            <th>Avg</th>
+            <th>Min</th>
+            <th>Max</th>
+            <th>Memory</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${metrics.map((m) => `
+    <tr>
+      <td>${m.componentName}</td>
+      <td>${m.renderCount}</td>
+      <td>${m.avgRenderTime.toFixed(2)}ms</td>
+      <td>${m.minRenderTime.toFixed(2)}ms</td>
+      <td>${m.maxRenderTime.toFixed(2)}ms</td>
+      <td>${m.memoryUsage ? formatBytes(m.memoryUsage) : "-"}</td>
+    </tr>
+  `).join("") || '<tr><td colspan="6" class="empty">No data</td></tr>'}
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+export function getPerformancePanelStyles() {
+  return `
+    .performance-panel {
+      padding: 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .performance-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .performance-header h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .performance-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .performance-table th,
+    .performance-table td {
+      padding: 6px 8px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .performance-table th {
+      font-weight: 600;
+      color: var(--text-secondary);
+    }
+    .performance-table .empty {
+      text-align: center;
+      color: var(--text-secondary);
+      padding: 20px;
+    }
+  `;
+}
+export function getPerformanceScript() {
+  return `
+<script>
+window.__stxPerformance = {
+  metrics: new Map(),
+
+  recordRender(componentId, componentName, duration, props) {
+    let m = this.metrics.get(componentId);
+    if (!m) {
+      m = {
+        componentId,
+        componentName,
+        renderCount: 0,
+        totalRenderTime: 0,
+        avgRenderTime: 0,
+        minRenderTime: Infinity,
+        maxRenderTime: 0,
+        lastRenderTime: 0,
+        history: []
+      };
+      this.metrics.set(componentId, m);
+    }
+
+    m.renderCount++;
+    m.totalRenderTime += duration;
+    m.avgRenderTime = m.totalRenderTime / m.renderCount;
+    m.minRenderTime = Math.min(m.minRenderTime, duration);
+    m.maxRenderTime = Math.max(m.maxRenderTime, duration);
+    m.lastRenderTime = duration;
+
+    m.history.push({ timestamp: Date.now(), duration, props });
+    if (m.history.length > 100) m.history.shift();
+
+    this.updatePanel();
+  },
+
+  getMetrics() {
+    return Array.from(this.metrics.values());
+  },
+
+  clear() {
+    this.metrics.clear();
+    this.updatePanel();
+  },
+
+  updatePanel() {
+    const panel = document.getElementById('performance-panel');
+    if (panel) {
+      // Update panel content
+      window.dispatchEvent(new CustomEvent('stx:performance-update', {
+        detail: { metrics: this.getMetrics() }
+      }));
+    }
+  },
+
+  // Timer helper
+  startTimer(componentId, componentName) {
+    const start = performance.now();
+    return {
+      end: (props) => {
+        const duration = performance.now() - start;
+        this.recordRender(componentId, componentName, duration, props);
+        return duration;
+      }
+    };
+  }
+};
+
+window.clearPerformanceMetrics = () => window.__stxPerformance.clear();
+</script>
+`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024)
+    return `${bytes}B`;
+  if (bytes < 1048576)
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / 1048576).toFixed(1)}MB`;
+}

package/dist/story/presets.js

@@ -1,2 +1,289 @@
-// @bun
-import{dc as a,ec as b,fc as c,gc as d}from"../chunk-h5wa62ek.js";import"../chunk-xv34zbp4.js";export{d as getPresetsScript,c as getPresetsPanelStyles,b as getPresetsPanelHtml,a as PresetsManager};
+import fs from "node:fs";
+import path from "node:path";
+const PRESETS_FILE = ".stx/story/presets.json", STORAGE_VERSION = 1, MAX_RECENT = 10;
+
+export class PresetsManager {
+  storage;
+  storagePath;
+  dirty = !1;
+  constructor(rootDir) {
+    this.storagePath = path.join(rootDir, PRESETS_FILE);
+    this.storage = this.loadStorage();
+  }
+  loadStorage() {
+    try {
+      const content = fs.readFileSync(this.storagePath, "utf-8"), data = JSON.parse(content);
+      if (data.version !== STORAGE_VERSION)
+        return this.migrateStorage(data);
+      return data;
+    } catch {
+      return {
+        version: STORAGE_VERSION,
+        presets: [],
+        recentIds: []
+      };
+    }
+  }
+  migrateStorage(data) {
+    return {
+      version: STORAGE_VERSION,
+      presets: data.presets || [],
+      recentIds: data.recentIds || []
+    };
+  }
+  async save() {
+    if (!this.dirty)
+      return;
+    const dir = path.dirname(this.storagePath);
+    await fs.promises.mkdir(dir, { recursive: !0 });
+    await fs.promises.writeFile(this.storagePath, JSON.stringify(this.storage, null, 2));
+    this.dirty = !1;
+  }
+  createPreset(name, props, options = {}) {
+    const preset = {
+      id: generateId(),
+      name,
+      description: options.description,
+      props,
+      componentId: options.componentId,
+      created: Date.now(),
+      usageCount: 0,
+      tags: options.tags
+    };
+    this.storage.presets.push(preset);
+    this.dirty = !0;
+    return preset;
+  }
+  getPreset(id) {
+    return this.storage.presets.find((p) => p.id === id);
+  }
+  getAllPresets() {
+    return [...this.storage.presets];
+  }
+  getPresetsForComponent(componentId) {
+    return this.storage.presets.filter((p) => !p.componentId || p.componentId === componentId);
+  }
+  getRecentPresets() {
+    return this.storage.recentIds.map((id) => this.getPreset(id)).filter((p) => p !== void 0);
+  }
+  usePreset(id) {
+    const preset = this.getPreset(id);
+    if (!preset)
+      return;
+    preset.lastUsed = Date.now();
+    preset.usageCount++;
+    this.storage.recentIds = [
+      id,
+      ...this.storage.recentIds.filter((i) => i !== id)
+    ].slice(0, MAX_RECENT);
+    this.dirty = !0;
+    return preset;
+  }
+  updatePreset(id, updates) {
+    const preset = this.getPreset(id);
+    if (!preset)
+      return;
+    Object.assign(preset, updates);
+    this.dirty = !0;
+    return preset;
+  }
+  deletePreset(id) {
+    const index = this.storage.presets.findIndex((p) => p.id === id);
+    if (index === -1)
+      return !1;
+    this.storage.presets.splice(index, 1);
+    this.storage.recentIds = this.storage.recentIds.filter((i) => i !== id);
+    this.dirty = !0;
+    return !0;
+  }
+  searchPresets(query) {
+    const lowerQuery = query.toLowerCase();
+    return this.storage.presets.filter((preset) => {
+      if (preset.name.toLowerCase().includes(lowerQuery))
+        return !0;
+      if (preset.description?.toLowerCase().includes(lowerQuery))
+        return !0;
+      if (preset.tags?.some((t) => t.toLowerCase().includes(lowerQuery)))
+        return !0;
+      return !1;
+    });
+  }
+  getMostUsedPresets(limit = 5) {
+    return [...this.storage.presets].sort((a, b) => b.usageCount - a.usageCount).slice(0, limit);
+  }
+  exportPresets(ids) {
+    const presets = ids ? this.storage.presets.filter((p) => ids.includes(p.id)) : this.storage.presets;
+    return JSON.stringify({ presets }, null, 2);
+  }
+  importPresets(json, overwrite = !1) {
+    const data = JSON.parse(json);
+    let imported = 0;
+    for (const preset of data.presets) {
+      const existing = this.storage.presets.find((p) => p.id === preset.id);
+      if (existing && !overwrite)
+        continue;
+      if (existing)
+        Object.assign(existing, preset);
+      else
+        this.storage.presets.push(preset);
+      imported++;
+    }
+    if (imported > 0)
+      this.dirty = !0;
+    return imported;
+  }
+}
+function generateId() {
+  return `preset-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+export function getPresetsPanelHtml(presets) {
+  return `
+    <div class="presets-panel">
+      <div class="presets-header">
+        <h3>Presets</h3>
+        <button class="preset-save-btn" onclick="saveCurrentAsPreset()">+ Save Current</button>
+      </div>
+      <div class="presets-list">
+        ${presets.map((p) => `
+    <div class="preset-item" data-preset-id="${p.id}">
+      <div class="preset-info">
+        <div class="preset-name">${p.name}</div>
+        ${p.description ? `<div class="preset-desc">${p.description}</div>` : ""}
+      </div>
+      <div class="preset-actions">
+        <button class="preset-apply" onclick="applyPreset('${p.id}')">Apply</button>
+        <button class="preset-delete" onclick="deletePreset('${p.id}')">\xD7</button>
+      </div>
+    </div>
+  `).join("") || '<div class="presets-empty">No presets saved</div>'}
+      </div>
+    </div>
+  `;
+}
+export function getPresetsPanelStyles() {
+  return `
+    .presets-panel {
+      padding: 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .presets-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .presets-header h3 {
+      margin: 0;
+      font-size: 14px;
+    }
+    .preset-save-btn {
+      padding: 4px 8px;
+      font-size: 12px;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .presets-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .preset-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      background: var(--bg);
+      border-radius: 4px;
+      border: 1px solid var(--border);
+    }
+    .preset-name {
+      font-weight: 500;
+      font-size: 13px;
+    }
+    .preset-desc {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .preset-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .preset-apply {
+      padding: 4px 8px;
+      font-size: 11px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .preset-delete {
+      padding: 4px 8px;
+      font-size: 11px;
+      background: transparent;
+      border: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+    }
+    .preset-delete:hover {
+      color: #ef4444;
+    }
+    .presets-empty {
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 13px;
+      padding: 20px;
+    }
+  `;
+}
+export function getPresetsScript() {
+  return `
+<script>
+window.__stxPresets = {
+  async saveCurrentAsPreset() {
+    const name = prompt('Preset name:');
+    if (!name) return;
+
+    const props = window.__stxProps || {};
+    const storyId = window.__stxStory?.currentStoryId;
+
+    const response = await fetch('/api/presets', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, props, componentId: storyId })
+    });
+
+    if (response.ok) {
+      window.__stxStory?.refreshPresets?.();
+    }
+  },
+
+  async applyPreset(id) {
+    const response = await fetch('/api/presets/' + id + '/use', { method: 'POST' });
+    const preset = await response.json();
+
+    if (preset.props) {
+      window.dispatchEvent(new CustomEvent('stx:props-change', {
+        detail: { props: preset.props }
+      }));
+    }
+  },
+
+  async deletePreset(id) {
+    if (!confirm('Delete this preset?')) return;
+
+    await fetch('/api/presets/' + id, { method: 'DELETE' });
+    window.__stxStory?.refreshPresets?.();
+  }
+};
+
+// Expose to global scope
+window.saveCurrentAsPreset = window.__stxPresets.saveCurrentAsPreset;
+window.applyPreset = window.__stxPresets.applyPreset;
+window.deletePreset = window.__stxPresets.deletePreset;
+</script>
+`;
+}