@stacksjs/stx 0.2.94 → 0.2.96

package/dist/story/setup.js

@@ -1,2 +1,78 @@
-// @bun
-import{Mb as a,Nb as b,Ob as c,Pb as d,Qb as e,Rb as f,Sb as g,Tb as h}from"../chunk-jc0fc4ht.js";import"../chunk-3jm3snz8.js";export{g as resetSetup,a as loadSetupFile,f as getState,h as getSetupHTML,e as getGlobalState,d as getGlobalScripts,b as getGlobalComponents,c as getGlobalCSS};
+import fs from "node:fs";
+import path from "node:path";
+const globalComponents = new Map;
+let globalCSS = [], globalScripts = [];
+const globalState = new Map;
+export async function loadSetupFile(ctx) {
+  const setupFile = ctx.config.setupFile;
+  if (!setupFile)
+    return;
+  const setupPath = path.resolve(ctx.root, setupFile);
+  try {
+    await fs.promises.access(setupPath);
+  } catch {
+    return;
+  }
+  const setupCtx = {
+    storyContext: ctx,
+    registerComponent: (name, component) => {
+      globalComponents.set(name, component);
+    },
+    addCSS: (css) => {
+      globalCSS.push(css);
+    },
+    addScript: (script) => {
+      globalScripts.push(script);
+    },
+    setState: (key, value) => {
+      globalState.set(key, value);
+    }
+  };
+  try {
+    const setupModule = await import(setupPath);
+    if (typeof setupModule.default === "function")
+      await setupModule.default(setupCtx);
+    else if (typeof setupModule.setupStory === "function")
+      await setupModule.setupStory(setupCtx);
+  } catch (error) {
+    console.warn(`Warning: Failed to load setup file: ${error}`);
+  }
+}
+export function getGlobalComponents() {
+  return globalComponents;
+}
+export function getGlobalCSS() {
+  return globalCSS.join(`
+`);
+}
+export function getGlobalScripts() {
+  return globalScripts.join(`
+`);
+}
+export function getGlobalState() {
+  return globalState;
+}
+export function getState(key) {
+  return globalState.get(key);
+}
+export function resetSetup() {
+  globalComponents.clear();
+  globalCSS = [];
+  globalScripts = [];
+  globalState.clear();
+}
+export function getSetupHTML() {
+  const css = getGlobalCSS(), scripts = getGlobalScripts();
+  let html = "";
+  if (css)
+    html += `<style>
+${css}
+</style>
+`;
+  if (scripts)
+    html += `<script>
+${scripts}
+</script>
+`;
+  return html;
+}

package/dist/story/snapshots.js

@@ -1,2 +1,170 @@
-// @bun
-import{N as a,O as b,P as c,Q as d,R as e,S as f,T as g,U as h,V as i}from"../chunk-39gm08bn.js";import"../chunk-3jm3snz8.js";export{c as saveSnapshotVersion,d as restoreSnapshotVersion,i as pruneSnapshotVersions,b as loadSnapshotVersions,h as listSnapshotVersions,a as getSnapshotDir,g as getDiffStyles,e as generateTextDiff,f as generateDiffHTML};
+import fs from "node:fs";
+import path from "node:path";
+export function getSnapshotDir(ctx) {
+  return path.join(ctx.root, ".stx", "story", "snapshots");
+}
+function getVersionFilePath(snapshotDir, storyId) {
+  return path.join(snapshotDir, `${storyId}.versions.json`);
+}
+export async function loadSnapshotVersions(ctx, storyId) {
+  const snapshotDir = getSnapshotDir(ctx), versionFile = getVersionFilePath(snapshotDir, storyId);
+  try {
+    const content = await fs.promises.readFile(versionFile, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+export async function saveSnapshotVersion(ctx, storyId, description) {
+  const snapshotDir = getSnapshotDir(ctx), versionFile = getVersionFilePath(snapshotDir, storyId);
+  await fs.promises.mkdir(snapshotDir, { recursive: !0 });
+  let versioned = await loadSnapshotVersions(ctx, storyId);
+  if (!versioned)
+    versioned = {
+      current: { version: 0, timestamp: 0 },
+      history: [],
+      maxVersions: 10
+    };
+  const newVersion = {
+    version: versioned.current.version + 1,
+    timestamp: Date.now(),
+    commit: await getGitCommit(ctx.root),
+    description
+  };
+  if (versioned.current.version > 0) {
+    versioned.history.unshift(versioned.current);
+    if (versioned.history.length > versioned.maxVersions)
+      versioned.history = versioned.history.slice(0, versioned.maxVersions);
+  }
+  versioned.current = newVersion;
+  await fs.promises.writeFile(versionFile, JSON.stringify(versioned, null, 2));
+  return newVersion;
+}
+async function getGitCommit(root) {
+  try {
+    const gitHeadPath = path.join(root, ".git", "HEAD"), head = await fs.promises.readFile(gitHeadPath, "utf-8");
+    if (head.startsWith("ref:")) {
+      const refPath = path.join(root, ".git", head.slice(5).trim());
+      return (await fs.promises.readFile(refPath, "utf-8")).trim().slice(0, 8);
+    }
+    return head.trim().slice(0, 8);
+  } catch {
+    return;
+  }
+}
+export async function restoreSnapshotVersion(ctx, storyId, version) {
+  const versioned = await loadSnapshotVersions(ctx, storyId);
+  if (!versioned)
+    return !1;
+  const targetVersion = versioned.history.find((v) => v.version === version);
+  if (!targetVersion)
+    return !1;
+  const snapshotDir = getSnapshotDir(ctx), versionedPath = path.join(snapshotDir, `${storyId}.v${version}.html`), currentPath = path.join(snapshotDir, `${storyId}.html`);
+  try {
+    await fs.promises.copyFile(versionedPath, currentPath);
+    versioned.current = targetVersion;
+    const versionFile = getVersionFilePath(snapshotDir, storyId);
+    await fs.promises.writeFile(versionFile, JSON.stringify(versioned, null, 2));
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+export function generateTextDiff(oldHtml, newHtml) {
+  const oldLines = oldHtml.split(`
+`), newLines = newHtml.split(`
+`);
+  let changedLines = 0;
+  const maxLines = Math.max(oldLines.length, newLines.length);
+  for (let i = 0;i < maxLines; i++)
+    if (oldLines[i] !== newLines[i])
+      changedLines++;
+  const percentage = maxLines > 0 ? changedLines / maxLines * 100 : 0;
+  return {
+    hasDiff: changedLines > 0,
+    percentage,
+    changedPixels: changedLines,
+    totalPixels: maxLines
+  };
+}
+export function generateDiffHTML(oldHtml, newHtml) {
+  const oldLines = oldHtml.split(`
+`), newLines = newHtml.split(`
+`), diffLines = [], maxLines = Math.max(oldLines.length, newLines.length);
+  for (let i = 0;i < maxLines; i++) {
+    const oldLine = oldLines[i] || "", newLine = newLines[i] || "";
+    if (oldLine === newLine)
+      diffLines.push(`<div class="diff-line diff-same">${escapeHtml(oldLine)}</div>`);
+    else if (!oldLine)
+      diffLines.push(`<div class="diff-line diff-added">+ ${escapeHtml(newLine)}</div>`);
+    else if (!newLine)
+      diffLines.push(`<div class="diff-line diff-removed">- ${escapeHtml(oldLine)}</div>`);
+    else {
+      diffLines.push(`<div class="diff-line diff-removed">- ${escapeHtml(oldLine)}</div>`);
+      diffLines.push(`<div class="diff-line diff-added">+ ${escapeHtml(newLine)}</div>`);
+    }
+  }
+  return `
+    <div class="stx-diff-view">
+      <div class="diff-content">
+        ${diffLines.join(`
+`)}
+      </div>
+    </div>
+  `;
+}
+export function getDiffStyles() {
+  return `
+    .stx-diff-view {
+      font-family: var(--code-font-family);
+      font-size: 12px;
+      line-height: 1.5;
+      overflow: auto;
+    }
+    .diff-content {
+      padding: 12px;
+    }
+    .diff-line {
+      padding: 2px 8px;
+      white-space: pre;
+    }
+    .diff-same {
+      color: var(--text);
+    }
+    .diff-added {
+      background: rgba(34, 197, 94, 0.2);
+      color: #22c55e;
+    }
+    .diff-removed {
+      background: rgba(239, 68, 68, 0.2);
+      color: #ef4444;
+    }
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+export async function listSnapshotVersions(ctx, storyId) {
+  const versioned = await loadSnapshotVersions(ctx, storyId);
+  if (!versioned)
+    return [];
+  return [versioned.current, ...versioned.history];
+}
+export async function pruneSnapshotVersions(ctx, storyId, keepCount = 5) {
+  const versioned = await loadSnapshotVersions(ctx, storyId);
+  if (!versioned)
+    return 0;
+  const toDelete = versioned.history.slice(keepCount), snapshotDir = getSnapshotDir(ctx);
+  let deleted = 0;
+  for (const version of toDelete) {
+    const versionPath = path.join(snapshotDir, `${storyId}.v${version.version}.html`);
+    try {
+      await fs.promises.unlink(versionPath);
+      deleted++;
+    } catch {}
+  }
+  versioned.history = versioned.history.slice(0, keepCount);
+  const versionFile = getVersionFilePath(snapshotDir, storyId);
+  await fs.promises.writeFile(versionFile, JSON.stringify(versioned, null, 2));
+  return deleted;
+}

package/dist/story/testing.js

@@ -1,2 +1,163 @@
-// @bun
-import{be as a,ce as b,de as c,ee as d}from"../chunk-05hgyyqc.js";import"../chunk-x64kb787.js";import"../chunk-3jm3snz8.js";export{b as updateSnapshots,a as runVisualTests,d as runA11yTests,c as formatTestResults};
+import fs from "node:fs";
+import path from "node:path";
+import { checkA11y } from "../a11y.js";
+export async function runVisualTests(ctx, options = {}) {
+  const startTime = Date.now(), result = {
+    total: 0,
+    passed: 0,
+    failed: 0,
+    new: 0,
+    failures: [],
+    duration: 0
+  }, snapshotDir = options.snapshotDir || path.join(ctx.root, ".stx", "story", "snapshots");
+  await fs.promises.mkdir(snapshotDir, { recursive: !0 });
+  let storyFiles = ctx.storyFiles;
+  if (options.filter && options.filter.length > 0)
+    storyFiles = storyFiles.filter((f) => options.filter.some((filter) => f.fileName.toLowerCase().includes(filter.toLowerCase())));
+  for (const storyFile of storyFiles)
+    await testStoryFile(storyFile, snapshotDir, options, result);
+  result.duration = Date.now() - startTime;
+  return result;
+}
+async function testStoryFile(storyFile, snapshotDir, options, result) {
+  const story = storyFile.story;
+  if (!story)
+    return;
+  for (const variant of story.variants) {
+    result.total++;
+    const snapshotPath = path.join(snapshotDir, `${storyFile.id}-${variant.id}.snap`), currentHash = generateHash(variant.source || ""), snapshotExists = await fileExists(snapshotPath);
+    if (options.update || !snapshotExists) {
+      const meta = {
+        storyId: storyFile.id,
+        variantId: variant.id,
+        component: storyFile.fileName,
+        timestamp: Date.now(),
+        hash: currentHash
+      };
+      await fs.promises.writeFile(snapshotPath, JSON.stringify(meta, null, 2));
+      if (!snapshotExists)
+        result.new++;
+      result.passed++;
+    } else
+      try {
+        const snapshotContent = await fs.promises.readFile(snapshotPath, "utf-8"), snapshot = JSON.parse(snapshotContent);
+        if (snapshot.hash === currentHash)
+          result.passed++;
+        else {
+          result.failed++;
+          result.failures.push({
+            storyId: storyFile.id,
+            variantId: variant.id,
+            component: storyFile.fileName,
+            message: "Snapshot mismatch",
+            difference: calculateDifference(snapshot.hash, currentHash)
+          });
+        }
+      } catch (error) {
+        result.failed++;
+        result.failures.push({
+          storyId: storyFile.id,
+          variantId: variant.id,
+          component: storyFile.fileName,
+          message: `Error reading snapshot: ${error}`
+        });
+      }
+  }
+}
+export async function updateSnapshots(ctx, options = {}) {
+  return (await runVisualTests(ctx, { ...options, update: !0 })).total;
+}
+function generateHash(content) {
+  let hash = 0;
+  for (let i = 0;i < content.length; i++) {
+    const char = content.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash.toString(16);
+}
+function calculateDifference(hash1, hash2) {
+  if (hash1 === hash2)
+    return 0;
+  const diff = Math.abs(Number.parseInt(hash1, 16) - Number.parseInt(hash2, 16));
+  return Math.min(diff / 1e6, 1);
+}
+async function fileExists(filePath) {
+  try {
+    await fs.promises.access(filePath);
+    return !0;
+  } catch {
+    return !1;
+  }
+}
+export function formatTestResults(result) {
+  const lines = [];
+  lines.push("");
+  lines.push("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501");
+  lines.push("  STX Story Visual Regression Tests");
+  lines.push("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501");
+  lines.push("");
+  if (result.failures.length > 0) {
+    lines.push("  \u274C Failures:");
+    lines.push("");
+    for (const failure of result.failures) {
+      lines.push(`    \u2022 ${failure.component} / ${failure.variantId}`);
+      lines.push(`      ${failure.message}`);
+      if (failure.difference !== void 0)
+        lines.push(`      Difference: ${(failure.difference * 100).toFixed(2)}%`);
+      lines.push("");
+    }
+  }
+  lines.push("  Summary:");
+  lines.push(`    Total:  ${result.total}`);
+  lines.push(`    Passed: ${result.passed} \u2713`);
+  lines.push(`    Failed: ${result.failed} \u2717`);
+  if (result.new > 0)
+    lines.push(`    New:    ${result.new} \u26A1`);
+  lines.push(`    Time:   ${result.duration}ms`);
+  lines.push("");
+  lines.push("\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501");
+  lines.push("");
+  return lines.join(`
+`);
+}
+export async function runA11yTests(ctx, _options = {}) {
+  const startTime = performance.now(), failures = [];
+  let passed = 0, failed = 0;
+  for (const storyFile of ctx.storyFiles)
+    try {
+      const htmlContent = await Bun.file(storyFile.path).text(), violations = await checkA11y(htmlContent, storyFile.path);
+      if (violations.length > 0) {
+        for (const violation of violations)
+          failures.push({
+            storyId: storyFile.id,
+            variantId: "default",
+            component: storyFile.component,
+            message: `A11y: ${violation.message}`,
+            expected: "No accessibility violations",
+            actual: `${violation.type}: ${violation.message} (impact: ${violation.impact})`
+          });
+        failed++;
+      } else
+        passed++;
+    } catch (error) {
+      failures.push({
+        storyId: storyFile.id,
+        variantId: "default",
+        component: storyFile.component,
+        message: `Failed to check a11y: ${error instanceof Error ? error.message : String(error)}`,
+        expected: "File readable for a11y check",
+        actual: "File read error"
+      });
+      failed++;
+    }
+  const duration = performance.now() - startTime;
+  return {
+    total: ctx.storyFiles.length,
+    passed,
+    failed,
+    new: 0,
+    failures,
+    duration
+  };
+}

package/dist/story/theme.js

@@ -1,2 +1,170 @@
-// @bun
-import{$ as f,W as a,X as b,Y as c,Z as d,_ as e,aa as g,ba as h,ca as i,da as j,ea as k,fa as l,ga as m}from"../chunk-ygvyc6wv.js";import"../chunk-3jm3snz8.js";export{e as toggleDarkMode,f as setTheme,a as lightTheme,d as isDark,g as initializeTheme,j as getThemeToggleScript,m as getThemeStyles,c as getCurrentTheme,i as generateThemeToggle,h as generateThemeCSS,k as exportThemeTokensJSON,l as exportThemeTokensCSS,b as darkTheme};
+export const lightTheme = {
+  colorScheme: "light",
+  primaryColor: "#3b82f6",
+  backgroundColor: "#ffffff",
+  textColor: "#333333",
+  borderColor: "#e0e0e0",
+  secondaryBackground: "#f5f5f5",
+  secondaryText: "#666666",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  codeFontFamily: '"SF Mono", Monaco, Consolas, monospace',
+  borderRadius: "4px"
+}, darkTheme = {
+  colorScheme: "dark",
+  primaryColor: "#60a5fa",
+  backgroundColor: "#1a1a1a",
+  textColor: "#ffffff",
+  borderColor: "#404040",
+  secondaryBackground: "#2a2a2a",
+  secondaryText: "#a0a0a0",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  codeFontFamily: '"SF Mono", Monaco, Consolas, monospace',
+  borderRadius: "4px"
+};
+let currentTheme = lightTheme, isDarkMode = !1;
+export function getCurrentTheme() {
+  return currentTheme;
+}
+export function isDark() {
+  return isDarkMode;
+}
+export function toggleDarkMode() {
+  isDarkMode = !isDarkMode;
+  currentTheme = isDarkMode ? darkTheme : lightTheme;
+}
+export function setTheme(theme) {
+  currentTheme = { ...currentTheme, ...theme };
+}
+export function initializeTheme(ctx) {
+  const { theme } = ctx.config;
+  if (theme.defaultColorScheme === "dark") {
+    isDarkMode = !0;
+    currentTheme = darkTheme;
+  } else if (theme.defaultColorScheme === "auto") {
+    if (typeof window < "u" && window.matchMedia) {
+      isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      currentTheme = isDarkMode ? darkTheme : lightTheme;
+    }
+  }
+}
+export function generateThemeCSS(theme = currentTheme) {
+  return `
+    :root {
+      --primary: ${theme.primaryColor};
+      --bg: ${theme.backgroundColor};
+      --text: ${theme.textColor};
+      --border: ${theme.borderColor};
+      --bg-secondary: ${theme.secondaryBackground};
+      --text-secondary: ${theme.secondaryText};
+      --font-family: ${theme.fontFamily};
+      --code-font-family: ${theme.codeFontFamily};
+      --border-radius: ${theme.borderRadius};
+    }
+  `;
+}
+export function generateThemeToggle() {
+  return `
+    <button
+      class="stx-theme-toggle"
+      onclick="window.__stxStory.toggleTheme()"
+      title="Toggle dark mode"
+    >
+      ${isDarkMode ? "\u2600\uFE0F" : "\uD83C\uDF19"}
+    </button>
+  `;
+}
+export function getThemeToggleScript() {
+  return `
+    window.__stxStory.toggleTheme = function() {
+      document.documentElement.classList.toggle('dark');
+      const btn = document.querySelector('.stx-theme-toggle');
+      if (btn) {
+        const isDark = document.documentElement.classList.contains('dark');
+        btn.textContent = isDark ? '\u2600\uFE0F' : '\uD83C\uDF19';
+      }
+    };
+
+    // Initialize from system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.classList.add('dark');
+    }
+
+    // Listen for system preference changes
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+      if (e.matches) {
+        document.documentElement.classList.add('dark');
+      }
+else {
+        document.documentElement.classList.remove('dark');
+      }
+    });
+  `;
+}
+export function exportThemeTokensJSON(theme = currentTheme) {
+  return JSON.stringify({
+    colors: {
+      primary: theme.primaryColor,
+      background: theme.backgroundColor,
+      text: theme.textColor,
+      border: theme.borderColor,
+      secondaryBackground: theme.secondaryBackground,
+      secondaryText: theme.secondaryText
+    },
+    typography: {
+      fontFamily: theme.fontFamily,
+      codeFontFamily: theme.codeFontFamily
+    },
+    spacing: {
+      borderRadius: theme.borderRadius
+    }
+  }, null, 2);
+}
+export function exportThemeTokensCSS(theme = currentTheme) {
+  return `/* STX Story Theme Tokens */
+:root {
+  /* Colors */
+  --stx-color-primary: ${theme.primaryColor};
+  --stx-color-background: ${theme.backgroundColor};
+  --stx-color-text: ${theme.textColor};
+  --stx-color-border: ${theme.borderColor};
+  --stx-color-background-secondary: ${theme.secondaryBackground};
+  --stx-color-text-secondary: ${theme.secondaryText};
+
+  /* Typography */
+  --stx-font-family: ${theme.fontFamily};
+  --stx-font-family-code: ${theme.codeFontFamily};
+
+  /* Spacing */
+  --stx-border-radius: ${theme.borderRadius};
+}
+`;
+}
+export function getThemeStyles() {
+  return `
+    .stx-theme-toggle {
+      width: 32px;
+      height: 32px;
+      border: 1px solid var(--border);
+      border-radius: var(--border-radius);
+      background: var(--bg);
+      cursor: pointer;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .stx-theme-toggle:hover {
+      background: var(--bg-secondary);
+    }
+
+    /* Dark mode overrides */
+    .dark {
+      --bg: ${darkTheme.backgroundColor};
+      --bg-secondary: ${darkTheme.secondaryBackground};
+      --text: ${darkTheme.textColor};
+      --text-secondary: ${darkTheme.secondaryText};
+      --border: ${darkTheme.borderColor};
+      --primary: ${darkTheme.primaryColor};
+    }
+  `;
+}

package/dist/story/types.js

@@ -1,2 +0,0 @@
-// @bun
-import"../chunk-44hd3kab.js";