@stacksjs/stx 0.2.94 → 0.2.96

package/dist/story/controls/index.js

@@ -1,2 +1,320 @@
-// @bun
-import{db as a,eb as b,fb as c,gb as d,hb as e,ib as f,jb as g,kb as h,lb as i,mb as j,nb as k,ob as l,pb as m}from"../../chunk-vcr5pzpx.js";import"../../chunk-3jm3snz8.js";export{h as renderTextareaControl,b as renderTextControl,i as renderSliderControl,e as renderSelectControl,f as renderRadioControl,c as renderNumberControl,j as renderJsonControl,k as renderDateControl,a as renderControl,g as renderColorControl,d as renderCheckboxControl,m as renderButtonGroupControl,l as getControlStyles};
+function normalizeOptions(options) {
+  if (!options)
+    return [];
+  if (Array.isArray(options))
+    return options;
+  return Object.entries(options).map(([value, label]) => ({ value, label }));
+}
+export function renderControl(config, value, onChange) {
+  const { type, title } = config;
+  switch (type) {
+    case "text":
+      return renderTextControl(title || "", value, onChange);
+    case "number":
+      return renderNumberControl(title || "", value, onChange, config);
+    case "boolean":
+      return renderCheckboxControl(title || "", value, onChange);
+    case "select":
+      return renderSelectControl(title || "", value, onChange, config);
+    case "radio":
+      return renderRadioControl(title || "", value, onChange, config);
+    case "color":
+      return renderColorControl(title || "", value, onChange);
+    case "textarea":
+      return renderTextareaControl(title || "", value, onChange);
+    case "slider":
+      return renderSliderControl(title || "", value, onChange, config);
+    case "json":
+      return renderJsonControl(title || "", value, onChange);
+    case "date":
+      return renderDateControl(title || "", value, onChange);
+    case "buttongroup":
+      return renderButtonGroupControl(title || "", value, onChange, config);
+    default:
+      return renderTextControl(title || "", value, onChange);
+  }
+}
+export function renderTextControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-text">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="text"
+        class="stx-control-input"
+        value="${escapeHtml(String(value || ""))}"
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function renderNumberControl(title, value, onChange, config) {
+  const min = config.min !== void 0 ? `min="${config.min}"` : "", max = config.max !== void 0 ? `max="${config.max}"` : "", step = config.step !== void 0 ? `step="${config.step}"` : "";
+  return `
+    <div class="stx-control stx-control-number">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="number"
+        class="stx-control-input"
+        value="${value ?? 0}"
+        ${min} ${max} ${step}
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function renderCheckboxControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-checkbox">
+      <label class="stx-control-label">
+        <input
+          type="checkbox"
+          class="stx-control-checkbox-input"
+          ${value ? "checked" : ""}
+          onchange="${onChange}"
+        />
+        <span>${escapeHtml(title)}</span>
+      </label>
+    </div>
+  `;
+}
+export function renderSelectControl(title, value, onChange, config) {
+  const optionsHtml = normalizeOptions(config.options).map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt, selected = optValue === value ? "selected" : "";
+    return `<option value="${escapeHtml(String(optValue))}" ${selected}>${escapeHtml(String(optLabel))}</option>`;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-select">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <select class="stx-control-input" onchange="${onChange}">
+        ${optionsHtml}
+      </select>
+    </div>
+  `;
+}
+export function renderRadioControl(title, value, onChange, config) {
+  const options = normalizeOptions(config.options), name = `radio-${title.toLowerCase().replace(/\s+/g, "-")}`, optionsHtml = options.map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt, checked = optValue === value ? "checked" : "";
+    return `
+        <label class="stx-control-radio-option">
+          <input
+            type="radio"
+            name="${name}"
+            value="${escapeHtml(String(optValue))}"
+            ${checked}
+            onchange="${onChange}"
+          />
+          <span>${escapeHtml(String(optLabel))}</span>
+        </label>
+      `;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-radio">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-radio-group">
+        ${optionsHtml}
+      </div>
+    </div>
+  `;
+}
+export function renderColorControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-color">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-color-wrapper">
+        <input
+          type="color"
+          class="stx-control-color-input"
+          value="${escapeHtml(value || "#000000")}"
+          onchange="${onChange}"
+        />
+        <input
+          type="text"
+          class="stx-control-input stx-control-color-text"
+          value="${escapeHtml(value || "#000000")}"
+          onchange="${onChange}"
+        />
+      </div>
+    </div>
+  `;
+}
+export function renderTextareaControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-textarea">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <textarea
+        class="stx-control-textarea-input"
+        onchange="${onChange}"
+      >${escapeHtml(String(value || ""))}</textarea>
+    </div>
+  `;
+}
+export function renderSliderControl(title, value, onChange, config) {
+  const min = config.min ?? 0, max = config.max ?? 100, step = config.step ?? 1;
+  return `
+    <div class="stx-control stx-control-slider">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-slider-wrapper">
+        <input
+          type="range"
+          class="stx-control-slider-input"
+          value="${value ?? min}"
+          min="${min}"
+          max="${max}"
+          step="${step}"
+          onchange="${onChange}"
+          oninput="this.nextElementSibling.textContent = this.value"
+        />
+        <span class="stx-control-slider-value">${value ?? min}</span>
+      </div>
+    </div>
+  `;
+}
+export function renderJsonControl(title, value, onChange) {
+  const jsonStr = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+  return `
+    <div class="stx-control stx-control-json">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <textarea
+        class="stx-control-json-input"
+        onchange="${onChange}"
+      >${escapeHtml(jsonStr)}</textarea>
+    </div>
+  `;
+}
+export function renderDateControl(title, value, onChange) {
+  return `
+    <div class="stx-control stx-control-date">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <input
+        type="date"
+        class="stx-control-input"
+        value="${escapeHtml(value || "")}"
+        onchange="${onChange}"
+      />
+    </div>
+  `;
+}
+export function getControlStyles() {
+  return `
+    .stx-control {
+      margin-bottom: 12px;
+    }
+    .stx-control-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #666);
+      margin-bottom: 4px;
+    }
+    .stx-control-input {
+      width: 100%;
+      padding: 6px 8px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      font-size: 13px;
+      background: var(--bg, #fff);
+      color: var(--text, #333);
+    }
+    .stx-control-input:focus {
+      outline: none;
+      border-color: var(--primary, #3b82f6);
+      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    }
+    .stx-control-checkbox {
+      display: flex;
+      align-items: center;
+    }
+    .stx-control-checkbox label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+    .stx-control-checkbox-input {
+      width: 16px;
+      height: 16px;
+    }
+    .stx-control-radio-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .stx-control-radio-option {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .stx-control-color-wrapper {
+      display: flex;
+      gap: 8px;
+    }
+    .stx-control-color-input {
+      width: 40px;
+      height: 32px;
+      padding: 2px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .stx-control-color-text {
+      flex: 1;
+    }
+    .stx-control-textarea-input,
+    .stx-control-json-input {
+      width: 100%;
+      min-height: 80px;
+      padding: 8px;
+      border: 1px solid var(--border, #ddd);
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: inherit;
+      resize: vertical;
+      background: var(--bg, #fff);
+      color: var(--text, #333);
+    }
+    .stx-control-json-input {
+      font-family: monospace;
+      font-size: 12px;
+    }
+    .stx-control-slider-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .stx-control-slider-input {
+      flex: 1;
+    }
+    .stx-control-slider-value {
+      min-width: 40px;
+      text-align: right;
+      font-size: 13px;
+      color: var(--text-secondary, #666);
+    }
+  `;
+}
+export function renderButtonGroupControl(title, value, onChange, config) {
+  const buttonsHtml = normalizeOptions(config.options).map((opt) => {
+    const optValue = typeof opt === "object" ? opt.value : opt, optLabel = typeof opt === "object" ? opt.label : opt;
+    return `
+        <button
+          type="button"
+          class="stx-control-btn-group-btn ${optValue === value ? "active" : ""}"
+          data-value="${escapeHtml(String(optValue))}"
+          onclick="${onChange}"
+        >${escapeHtml(String(optLabel))}</button>
+      `;
+  }).join("");
+  return `
+    <div class="stx-control stx-control-btn-group">
+      <label class="stx-control-label">${escapeHtml(title)}</label>
+      <div class="stx-control-btn-group-wrapper">
+        ${buttonsHtml}
+      </div>
+    </div>
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}

package/dist/story/crosswind.js

@@ -1,2 +1,189 @@
-// @bun
-import{qa as a,ra as b,sa as c,ta as d,ua as e}from"../chunk-rkffm9sy.js";import"../chunk-3jm3snz8.js";export{b as loadCrosswindCSS,a as isCrosswindAvailable,e as generateOptimizedCSS,c as generateCrosswindStyleTag,d as extractUsedClasses};
+import fs from "node:fs";
+import path from "node:path";
+const DEFAULT_HEADWIND_PATH = "node_modules/@stacksjs/crosswind/dist/crosswind.css";
+export async function isCrosswindAvailable(root) {
+  const crosswindPath = path.join(root, DEFAULT_HEADWIND_PATH);
+  try {
+    await fs.promises.access(crosswindPath);
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+export async function loadCrosswindCSS(ctx, options = {}) {
+  const cssPath = options.cssPath || path.join(ctx.root, DEFAULT_HEADWIND_PATH);
+  try {
+    return await fs.promises.readFile(cssPath, "utf-8");
+  } catch {
+    return getMinimalUtilityCSS();
+  }
+}
+function getMinimalUtilityCSS() {
+  return `
+/* Minimal utility classes (Crosswind fallback) */
+
+/* Display */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.inline { display: inline; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.hidden { display: none; }
+
+/* Flexbox */
+.flex-row { flex-direction: row; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+
+/* Spacing */
+.p-0 { padding: 0; }
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.m-0 { margin: 0; }
+.m-1 { margin: 0.25rem; }
+.m-2 { margin: 0.5rem; }
+.m-3 { margin: 0.75rem; }
+.m-4 { margin: 1rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Typography */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+/* Colors */
+.text-white { color: #ffffff; }
+.text-black { color: #000000; }
+.text-gray-500 { color: #6b7280; }
+.text-gray-700 { color: #374151; }
+.bg-white { background-color: #ffffff; }
+.bg-black { background-color: #000000; }
+.bg-gray-100 { background-color: #f3f4f6; }
+.bg-gray-200 { background-color: #e5e7eb; }
+.bg-blue-500 { background-color: #3b82f6; }
+.bg-green-500 { background-color: #22c55e; }
+.bg-red-500 { background-color: #ef4444; }
+
+/* Borders */
+.border { border-width: 1px; }
+.border-0 { border-width: 0; }
+.border-2 { border-width: 2px; }
+.border-gray-200 { border-color: #e5e7eb; }
+.border-gray-300 { border-color: #d1d5db; }
+.rounded { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-full { border-radius: 9999px; }
+
+/* Sizing */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.w-auto { width: auto; }
+.h-auto { height: auto; }
+.min-w-0 { min-width: 0; }
+.max-w-full { max-width: 100%; }
+
+/* Position */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+
+/* Overflow */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+
+/* Cursor */
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+
+/* Opacity */
+.opacity-0 { opacity: 0; }
+.opacity-50 { opacity: 0.5; }
+.opacity-100 { opacity: 1; }
+
+/* Transitions */
+.transition { transition-property: all; transition-duration: 150ms; }
+.duration-150 { transition-duration: 150ms; }
+.duration-300 { transition-duration: 300ms; }
+`;
+}
+export async function generateCrosswindStyleTag(ctx, options = {}) {
+  return `<style id="crosswind-css">
+${await loadCrosswindCSS(ctx, options)}
+</style>`;
+}
+export function extractUsedClasses(html) {
+  const classRegex = /class=["']([^"']+)["']/g, classes = new Set;
+  let match = classRegex.exec(html);
+  while (match !== null) {
+    const classList = match[1].split(/\s+/);
+    for (const cls of classList)
+      if (cls.trim())
+        classes.add(cls.trim());
+    match = classRegex.exec(html);
+  }
+  return Array.from(classes);
+}
+export function generateOptimizedCSS(fullCSS, usedClasses) {
+  const lines = fullCSS.split(`
+`), result = [];
+  let inRule = !1, currentRule = "", includeRule = !1;
+  for (const line of lines)
+    if (line.includes("{")) {
+      inRule = !0;
+      currentRule = line;
+      for (const cls of usedClasses)
+        if (line.includes(`.${cls}`) || line.includes(`.${cls} `) || line.includes(`.${cls},`) || line.includes(`.${cls}:`)) {
+          includeRule = !0;
+          break;
+        }
+    } else if (line.includes("}")) {
+      if (includeRule) {
+        result.push(currentRule);
+        result.push(line);
+      }
+      inRule = !1;
+      currentRule = "";
+      includeRule = !1;
+    } else if (inRule)
+      currentRule += `
+${line}`;
+    else
+      result.push(line);
+  return result.join(`
+`);
+}

package/dist/story/desktop-preview.js

@@ -1,2 +1,105 @@
-// @bun
-import{va as a,wa as b,xa as c,ya as d}from"../chunk-z4djtgt0.js";import"../chunk-3jm3snz8.js";export{b as openDesktopPreview,a as isDesktopPreviewAvailable,d as getDesktopPreviewStyles,c as getDesktopPreviewButton};
+export async function isDesktopPreviewAvailable() {
+  try {
+    return typeof (await import("@stacksjs/desktop")).createWindowWithHTML === "function";
+  } catch {
+    return !1;
+  }
+}
+export async function openDesktopPreview(ctx, story, variantId, options = {}) {
+  try {
+    const desktop = await import("@stacksjs/desktop"), variant = story.story?.variants.find((v) => v.id === variantId);
+    if (!variant)
+      return null;
+    const title = options.title || `${story.fileName} - ${variant.title}`, html = generatePreviewHTML(ctx, story, variant), _window = await desktop.createWindowWithHTML(html, {
+      title,
+      width: options.width || 800,
+      height: options.height || 600
+    });
+    return {
+      close: () => {},
+      reload: () => {},
+      update: (_html) => {}
+    };
+  } catch (error) {
+    console.warn("Desktop preview not available:", error);
+    return null;
+  }
+}
+function generatePreviewHTML(ctx, story, variant) {
+  const { theme } = ctx.config;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${story.fileName} - ${variant.title}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      padding: 24px;
+      background: ${theme.defaultColorScheme === "dark" ? "#1a1a1a" : "#ffffff"};
+      color: ${theme.defaultColorScheme === "dark" ? "#ffffff" : "#333333"};
+    }
+    .preview-header {
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid ${theme.defaultColorScheme === "dark" ? "#404040" : "#e0e0e0"};
+    }
+    .preview-title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .preview-subtitle {
+      font-size: 12px;
+      color: ${theme.defaultColorScheme === "dark" ? "#a0a0a0" : "#666666"};
+    }
+    .preview-content {
+      padding: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="preview-header">
+    <div class="preview-title">${story.fileName}</div>
+    <div class="preview-subtitle">${variant.title}</div>
+  </div>
+  <div class="preview-content">
+    ${variant.source || "<!-- No source -->"}
+  </div>
+  <script>
+    window.__stxProps = ${JSON.stringify(variant.state || {})};
+  </script>
+</body>
+</html>`;
+}
+export function getDesktopPreviewButton(storyId, variantId) {
+  return `
+    <button
+      class="stx-desktop-preview-btn"
+      onclick="window.__stxStory.openDesktopPreview('${storyId}', '${variantId}')"
+      title="Open in native window"
+    >
+      \uD83D\uDDA5\uFE0F Desktop
+    </button>
+  `;
+}
+export function getDesktopPreviewStyles() {
+  return `
+    .stx-desktop-preview-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .stx-desktop-preview-btn:hover {
+      background: var(--bg-secondary);
+    }
+  `;
+}