@stacksjs/stx 0.2.95 → 0.2.97

package/dist/story/compiled-output.js

@@ -1,2 +1,151 @@
-// @bun
-import{Ua as a,Va as b,Wa as c,Xa as d}from"../chunk-a3hyn4we.js";import"../chunk-xv34zbp4.js";export{c as getCompiledOutputStyles,d as getCompiledOutputScript,a as getCompiledOutput,b as generateCompiledOutputPanel};
+export async function getCompiledOutput(ctx, story, variantId, options = {}) {
+  const variant = story.story?.variants.find((v) => v.id === variantId);
+  if (!variant)
+    return "<!-- Variant not found -->";
+  let html = variant.source || "";
+  html = processDirectives(html);
+  html = processInterpolation(html, variant.state || {});
+  if (options.format)
+    html = formatHTML(html);
+  if (options.minify)
+    html = minifyHTML(html);
+  return html;
+}
+function processDirectives(html) {
+  let result = html;
+  result = result.replace(/@if\s*\([^)]+\)/g, "<!-- @if -->");
+  result = result.replace(/@endif/g, "<!-- @endif -->");
+  result = result.replace(/@foreach\s*\([^)]+\)/g, "<!-- @foreach -->");
+  result = result.replace(/@endforeach/g, "<!-- @endforeach -->");
+  result = result.replace(/@unless\s*\([^)]+\)/g, "<!-- @unless -->");
+  result = result.replace(/@endunless/g, "<!-- @endunless -->");
+  result = result.replace(/@component\s*\([^)]+\)/g, "<!-- @component -->");
+  result = result.replace(/@endcomponent/g, "<!-- @endcomponent -->");
+  return result;
+}
+function processInterpolation(html, state) {
+  return html.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
+    if (key in state) {
+      const value = state[key];
+      if (typeof value === "string")
+        return escapeHtml(value);
+      if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+      return JSON.stringify(value);
+    }
+    return `{{ ${key} }}`;
+  });
+}
+function formatHTML(html) {
+  let result = "", indent = 0;
+  const lines = html.split(/>\s*</).map((line, i, arr) => {
+    let result = line;
+    if (i > 0)
+      result = `<${result}`;
+    if (i < arr.length - 1)
+      result = `${result}>`;
+    return result;
+  });
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed)
+      continue;
+    if (trimmed.startsWith("</") || trimmed.startsWith("-->"))
+      indent = Math.max(0, indent - 1);
+    result += `${"  ".repeat(indent)}${trimmed}
+`;
+    if (trimmed.startsWith("<") && !trimmed.startsWith("</") && !trimmed.startsWith("<!") && !trimmed.endsWith("/>") && !trimmed.includes("</"))
+      indent++;
+  }
+  return result.trim();
+}
+function minifyHTML(html) {
+  return html.replace(/\s+/g, " ").replace(/>\s+</g, "><").replace(/\s+>/g, ">").replace(/<\s+/g, "<").trim();
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+export function generateCompiledOutputPanel(compiledHtml) {
+  return `
+    <div class="stx-compiled-output">
+      <div class="stx-compiled-header">
+        <span>Compiled HTML</span>
+        <div class="stx-compiled-actions">
+          <button onclick="window.__stxStory.copyCompiledOutput()" title="Copy">\uD83D\uDCCB</button>
+          <button onclick="window.__stxStory.toggleMinify()" title="Toggle minify">\uD83D\uDDDC\uFE0F</button>
+        </div>
+      </div>
+      <pre class="stx-compiled-code"><code>${escapeHtml(compiledHtml)}</code></pre>
+    </div>
+  `;
+}
+export function getCompiledOutputStyles() {
+  return `
+    .stx-compiled-output {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .stx-compiled-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+      font-weight: 500;
+    }
+    .stx-compiled-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .stx-compiled-actions button {
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      cursor: pointer;
+    }
+    .stx-compiled-actions button:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-compiled-code {
+      flex: 1;
+      margin: 0;
+      padding: 12px;
+      overflow: auto;
+      font-family: var(--code-font-family);
+      font-size: 12px;
+      line-height: 1.5;
+      background: var(--bg);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .stx-compiled-code code {
+      font-family: inherit;
+    }
+  `;
+}
+export function getCompiledOutputScript() {
+  return `
+    window.__stxStory = window.__stxStory || {};
+
+    window.__stxStory.showCompiledOutput = false;
+
+    window.__stxStory.toggleCompiledOutput = function() {
+      this.showCompiledOutput = !this.showCompiledOutput;
+      const panel = document.querySelector('.stx-compiled-output');
+      if (panel) {
+        panel.style.display = this.showCompiledOutput ? 'flex' : 'none';
+      }
+    };
+
+    window.__stxStory.copyCompiledOutput = function() {
+      const code = document.querySelector('.stx-compiled-code code');
+      if (code) {
+        navigator.clipboard.writeText(code.textContent || '');
+      }
+    };
+  `;
+}

package/dist/story/composition.js

@@ -1,2 +1,261 @@
-// @bun
-import{$a as d,Ya as a,Za as b,_a as c,ab as e,bb as f,cb as g}from"../chunk-y5xz0jc4.js";import"../chunk-xv34zbp4.js";export{f as getDependencyGraphStyles,c as getAllDependents,b as getAllDependencies,e as generateDependencyGraphHTML,g as generateComponentDetailHTML,d as detectCircularDependencies,a as buildDependencyGraph};
+export function buildDependencyGraph(components) {
+  const nodes = new Map;
+  for (const component of components)
+    nodes.set(component.name, {
+      name: component.name,
+      path: component.path,
+      dependencies: component.dependencies,
+      dependents: [],
+      depth: 0
+    });
+  for (const component of components)
+    for (const dep of component.dependencies) {
+      const depNode = nodes.get(dep);
+      if (depNode)
+        depNode.dependents.push(component.name);
+    }
+  const visited = new Set;
+  function calculateDepth(name, depth) {
+    const node = nodes.get(name);
+    if (!node || visited.has(name))
+      return;
+    node.depth = Math.max(node.depth, depth);
+    visited.add(name);
+    for (const dep of node.dependencies)
+      calculateDepth(dep, depth + 1);
+    visited.delete(name);
+  }
+  const roots = [], leaves = [];
+  for (const [name, node] of nodes) {
+    if (node.dependents.length === 0) {
+      roots.push(name);
+      calculateDepth(name, 0);
+    }
+    if (node.dependencies.length === 0)
+      leaves.push(name);
+  }
+  return { nodes, roots, leaves };
+}
+export function getAllDependencies(graph, componentName) {
+  const result = new Set, visited = new Set;
+  function collect(name) {
+    if (visited.has(name))
+      return;
+    visited.add(name);
+    const node = graph.nodes.get(name);
+    if (!node)
+      return;
+    for (const dep of node.dependencies) {
+      result.add(dep);
+      collect(dep);
+    }
+  }
+  collect(componentName);
+  return Array.from(result);
+}
+export function getAllDependents(graph, componentName) {
+  const result = new Set, visited = new Set;
+  function collect(name) {
+    if (visited.has(name))
+      return;
+    visited.add(name);
+    const node = graph.nodes.get(name);
+    if (!node)
+      return;
+    for (const dep of node.dependents) {
+      result.add(dep);
+      collect(dep);
+    }
+  }
+  collect(componentName);
+  return Array.from(result);
+}
+export function detectCircularDependencies(graph) {
+  const cycles = [], visited = new Set, path = [];
+  function dfs(name) {
+    if (path.includes(name)) {
+      const cycleStart = path.indexOf(name);
+      cycles.push([...path.slice(cycleStart), name]);
+      return;
+    }
+    if (visited.has(name))
+      return;
+    visited.add(name);
+    path.push(name);
+    const node = graph.nodes.get(name);
+    if (node)
+      for (const dep of node.dependencies)
+        dfs(dep);
+    path.pop();
+  }
+  for (const name of graph.nodes.keys())
+    dfs(name);
+  return cycles;
+}
+export function generateDependencyGraphHTML(graph, selectedComponent) {
+  const nodes = Array.from(graph.nodes.values()), maxDepth = Math.max(...nodes.map((n) => n.depth), 0), levels = [];
+  for (let i = 0;i <= maxDepth; i++)
+    levels.push(nodes.filter((n) => n.depth === i));
+  const levelsHtml = levels.map((level, depth) => {
+    const nodesHtml = level.map((node) => {
+      const isSelected = node.name === selectedComponent, classes = ["dep-node"];
+      if (isSelected)
+        classes.push("selected");
+      if (graph.roots.includes(node.name))
+        classes.push("root");
+      if (graph.leaves.includes(node.name))
+        classes.push("leaf");
+      return `
+            <div
+              class="${classes.join(" ")}"
+              onclick="window.__stxStory.selectComponent('${node.name}')"
+              title="${node.path}"
+            >
+              <span class="dep-node-name">${node.name}</span>
+              <span class="dep-node-count">
+                ${node.dependencies.length > 0 ? `\u2193${node.dependencies.length}` : ""}
+                ${node.dependents.length > 0 ? `\u2191${node.dependents.length}` : ""}
+              </span>
+            </div>
+          `;
+    }).join("");
+    return `
+        <div class="dep-level" data-depth="${depth}">
+          <div class="dep-level-label">Level ${depth}</div>
+          <div class="dep-level-nodes">${nodesHtml}</div>
+        </div>
+      `;
+  }).join("");
+  return `
+    <div class="stx-dependency-graph">
+      <div class="dep-graph-header">
+        <span>Component Dependencies</span>
+        <span class="dep-graph-stats">
+          ${graph.nodes.size} components,
+          ${graph.roots.length} roots,
+          ${graph.leaves.length} leaves
+        </span>
+      </div>
+      <div class="dep-graph-body">
+        ${levelsHtml}
+      </div>
+    </div>
+  `;
+}
+export function getDependencyGraphStyles() {
+  return `
+    .stx-dependency-graph {
+      padding: 16px;
+    }
+    .dep-graph-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      font-weight: 600;
+    }
+    .dep-graph-stats {
+      font-size: 12px;
+      color: var(--text-secondary);
+      font-weight: normal;
+    }
+    .dep-graph-body {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .dep-level {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    .dep-level-label {
+      width: 60px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      padding-top: 8px;
+    }
+    .dep-level-nodes {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      flex: 1;
+    }
+    .dep-node {
+      padding: 8px 12px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .dep-node:hover {
+      border-color: var(--primary);
+    }
+    .dep-node.selected {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+    .dep-node.root {
+      border-left: 3px solid #22c55e;
+    }
+    .dep-node.leaf {
+      border-left: 3px solid #f59e0b;
+    }
+    .dep-node-name {
+      font-size: 13px;
+    }
+    .dep-node-count {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .dep-node.selected .dep-node-count {
+      color: rgba(255,255,255,0.7);
+    }
+  `;
+}
+export function generateComponentDetailHTML(graph, componentName) {
+  const node = graph.nodes.get(componentName);
+  if (!node)
+    return '<div class="dep-detail-empty">Component not found</div>';
+  const depsHtml = node.dependencies.length > 0 ? node.dependencies.map((d) => `
+        <div class="dep-link" onclick="window.__stxStory.selectComponent('${d}')">
+          \u2193 ${d}
+        </div>
+      `).join("") : '<div class="dep-none">No dependencies</div>', dependentsHtml = node.dependents.length > 0 ? node.dependents.map((d) => `
+        <div class="dep-link" onclick="window.__stxStory.selectComponent('${d}')">
+          \u2191 ${d}
+        </div>
+      `).join("") : '<div class="dep-none">No dependents</div>';
+  return `
+    <div class="stx-component-detail">
+      <div class="dep-detail-header">
+        <span class="dep-detail-name">${componentName}</span>
+        <span class="dep-detail-path">${node.path}</span>
+      </div>
+
+      <div class="dep-detail-section">
+        <div class="dep-detail-title">Dependencies (${node.dependencies.length})</div>
+        ${depsHtml}
+      </div>
+
+      <div class="dep-detail-section">
+        <div class="dep-detail-title">Used by (${node.dependents.length})</div>
+        ${dependentsHtml}
+      </div>
+
+      <div class="dep-detail-actions">
+        <button onclick="window.__stxStory.openStory('${componentName}')">
+          Open Story
+        </button>
+        <button onclick="window.__stxStory.openSource('${node.path}')">
+          View Source
+        </button>
+      </div>
+    </div>
+  `;
+}

package/dist/story/config-watcher.js

@@ -1,2 +1,67 @@
-// @bun
-import{Bc as a,Cc as b,Dc as c}from"../chunk-6e4c6g46.js";import"../chunk-yn38c15w.js";import"../chunk-xv34zbp4.js";export{a as watchConfigFile,c as getConfigModifiedTime,b as findConfigFile};
+import fs from "node:fs";
+import path from "node:path";
+import { printInfo, printWarning } from "./output.js";
+export function watchConfigFile(ctx, options) {
+  const configPaths = [
+    path.join(ctx.root, "stx.config.ts"),
+    path.join(ctx.root, "stx.config.js"),
+    path.join(ctx.root, "stx.config.mjs")
+  ], debounceMs = options.debounceMs ?? 300;
+  let debounceTimer = null;
+  const watchers = [];
+  for (const configPath of configPaths)
+    try {
+      if (!fs.existsSync(configPath))
+        continue;
+      const watcher = fs.watch(configPath, (eventType) => {
+        if (eventType === "change") {
+          if (debounceTimer)
+            clearTimeout(debounceTimer);
+          debounceTimer = setTimeout(async () => {
+            printInfo("Config file changed, restarting...");
+            try {
+              await options.onChange();
+            } catch (error) {
+              printWarning(`Failed to restart: ${error}`);
+            }
+          }, debounceMs);
+        }
+      });
+      watchers.push(watcher);
+    } catch {}
+  return {
+    stop() {
+      if (debounceTimer)
+        clearTimeout(debounceTimer);
+      for (const watcher of watchers)
+        watcher.close();
+    }
+  };
+}
+export function findConfigFile(root) {
+  const configPaths = [
+    path.join(root, "stx.config.ts"),
+    path.join(root, "stx.config.js"),
+    path.join(root, "stx.config.mjs"),
+    path.join(root, "config", "stx.ts"),
+    path.join(root, "config", "stx.js"),
+    path.join(root, "config", "stx.mjs"),
+    path.join(root, ".config", "stx.ts"),
+    path.join(root, ".config", "stx.js"),
+    path.join(root, ".config", "stx.mjs")
+  ];
+  for (const configPath of configPaths)
+    if (fs.existsSync(configPath))
+      return configPath;
+  return null;
+}
+export async function getConfigModifiedTime(root) {
+  const configPath = findConfigFile(root);
+  if (!configPath)
+    return null;
+  try {
+    return (await fs.promises.stat(configPath)).mtimeMs;
+  } catch {
+    return null;
+  }
+}

package/dist/story/config.js

@@ -1,2 +1,64 @@
-// @bun
-import{ie as a,je as b,ke as c,le as d,me as e,ne as f}from"../chunk-ngxfwzq3.js";import"../chunk-xv34zbp4.js";export{e as resolveStoryConfig,f as getDefaultStoryConfig,c as defaultTreeConfig,d as defaultStoryConfig,a as defaultResponsivePresets,b as defaultBackgroundPresets};
+export const defaultResponsivePresets = [
+  { label: "Mobile (Small)", width: 320, height: 568 },
+  { label: "Mobile (Medium)", width: 375, height: 667 },
+  { label: "Mobile (Large)", width: 414, height: 896 },
+  { label: "Tablet", width: 768, height: 1024 },
+  { label: "Laptop", width: 1024 },
+  { label: "Desktop", width: 1280 },
+  { label: "Desktop (Large)", width: 1920 }
+], defaultBackgroundPresets = [
+  { label: "Transparent", color: "transparent", contrastColor: "#333" },
+  { label: "White", color: "#ffffff", contrastColor: "#333" },
+  { label: "Light Gray", color: "#f5f5f5", contrastColor: "#333" },
+  { label: "Dark Gray", color: "#333333", contrastColor: "#fff" },
+  { label: "Black", color: "#000000", contrastColor: "#fff" }
+], defaultTreeConfig = {
+  file: "title",
+  order: "asc",
+  groups: []
+}, defaultStoryConfig = {
+  enabled: !0,
+  outDir: ".stx/dist/story",
+  storyMatch: ["**/*.story.stx"],
+  storyIgnored: ["**/node_modules/**", "**/dist/**", "**/.stx/**"],
+  tree: defaultTreeConfig,
+  theme: {
+    title: "STX Components",
+    defaultColorScheme: "auto",
+    darkClass: "dark"
+  },
+  responsivePresets: defaultResponsivePresets,
+  backgroundPresets: defaultBackgroundPresets,
+  autoApplyContrastColor: !1,
+  port: 6006
+};
+export function resolveStoryConfig(config) {
+  const merged = {
+    ...defaultStoryConfig,
+    ...config
+  };
+  return {
+    enabled: merged.enabled ?? !0,
+    outDir: merged.outDir ?? ".stx/dist/story",
+    storyMatch: merged.storyMatch ?? ["**/*.story.stx"],
+    storyIgnored: merged.storyIgnored ?? ["**/node_modules/**", "**/dist/**", "**/.stx/**"],
+    tree: {
+      ...defaultTreeConfig,
+      ...merged.tree
+    },
+    theme: {
+      title: "STX Components",
+      defaultColorScheme: "auto",
+      darkClass: "dark",
+      ...merged.theme
+    },
+    responsivePresets: merged.responsivePresets ?? defaultResponsivePresets,
+    backgroundPresets: merged.backgroundPresets ?? defaultBackgroundPresets,
+    autoApplyContrastColor: merged.autoApplyContrastColor ?? !1,
+    setupFile: merged.setupFile,
+    port: merged.port ?? 6006
+  };
+}
+export function getDefaultStoryConfig() {
+  return { ...defaultStoryConfig };
+}

package/dist/story/context.js

@@ -1,2 +1,27 @@
-// @bun
-import{fe as a,ge as b,he as c}from"../chunk-0qnz93q2.js";import"../chunk-ngxfwzq3.js";import"../chunk-xv34zbp4.js";export{c as updateContextTree,b as updateContextStoryFiles,a as createContext};
+import path from "node:path";
+import { resolveStoryConfig } from "./config.js";
+export async function createContext(options) {
+  const root = options.root ?? process.cwd();
+  let storyConfig;
+  try {
+    const configModule = await import(path.join(root, "stx.config.ts"));
+    storyConfig = (configModule.default || configModule).story;
+  } catch {}
+  const mergedConfig = {
+    ...storyConfig,
+    ...options.config
+  }, resolvedConfig = resolveStoryConfig(mergedConfig);
+  return {
+    root,
+    config: resolvedConfig,
+    storyFiles: [],
+    tree: void 0,
+    mode: options.mode
+  };
+}
+export function updateContextStoryFiles(ctx, storyFiles) {
+  ctx.storyFiles = storyFiles;
+}
+export function updateContextTree(ctx, tree) {
+  ctx.tree = tree;
+}