@stacksjs/stx 0.2.95 → 0.2.96

package/dist/story/ui/code-panel.js

@@ -1,2 +1,175 @@
-// @bun
-import{a,b,c,d,e,f,g,h,i}from"../../chunk-wvef3ngh.js";import"../../chunk-xv34zbp4.js";export{e as highlightCode,c as getStoryCode,d as getPropsJson,i as getOpenInVSCodeScript,f as getHighlightStyles,h as getCopyCodeScript,b as getComponentSource,g as getCodePanelStyles,a as generateCodePanel};
+import fs from "node:fs";
+export function generateCodePanel(story, component, activeTab = "source") {
+  return `
+    <div class="stx-code-panel">
+      <div class="stx-code-tabs">
+        <button class="${activeTab === "source" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('source')">Source</button>
+        <button class="${activeTab === "story" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('story')">Story</button>
+        <button class="${activeTab === "compiled" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('compiled')">Compiled</button>
+        <button class="${activeTab === "props" ? "active" : ""}" onclick="window.__stxStory.setCodeTab('props')">Props</button>
+      </div>
+      <div class="stx-code-toolbar">
+        <button onclick="window.__stxStory.copyCode()" title="Copy code">\uD83D\uDCCB Copy</button>
+        <button onclick="window.__stxStory.openInVSCode()" title="Open in VS Code">\uD83D\uDCDD VS Code</button>
+      </div>
+      <div class="stx-code-content" id="code-content">
+        <!-- Content loaded dynamically -->
+      </div>
+    </div>
+  `;
+}
+export async function getComponentSource(filePath) {
+  try {
+    return await fs.promises.readFile(filePath, "utf-8");
+  } catch {
+    return "// Unable to read source file";
+  }
+}
+export function getStoryCode(componentName, props) {
+  const propsStr = Object.entries(props).map(([key, value]) => {
+    if (typeof value === "string")
+      return `${key}="${value}"`;
+    if (typeof value === "boolean")
+      return value ? key : `:${key}="false"`;
+    if (typeof value === "number")
+      return `:${key}="${value}"`;
+    return `:${key}="${JSON.stringify(value).replace(/"/g, "'")}"`;
+  }).join(`
+  `);
+  return `<${componentName}
+  ${propsStr}
+/>`;
+}
+export function getPropsJson(props) {
+  return JSON.stringify(props, null, 2);
+}
+export function highlightCode(code, language) {
+  let highlighted = escapeHtml(code);
+  if (language === "html" || language === "stx")
+    highlighted = highlighted.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="hl-tag">$2</span>').replace(/([\w-]+)(=)/g, '<span class="hl-attr">$1</span>$2').replace(/(&quot;[^&]*&quot;)/g, '<span class="hl-string">$1</span>').replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="hl-comment">$1</span>').replace(/(@\w+)/g, '<span class="hl-directive">$1</span>').replace(/(\{\{[^}]*\}\})/g, '<span class="hl-interpolation">$1</span>');
+  else if (language === "json")
+    highlighted = highlighted.replace(/(&quot;\w+&quot;)(:)/g, '<span class="hl-key">$1</span>$2').replace(/(: )(&quot;[^&]*&quot;)/g, '$1<span class="hl-string">$2</span>').replace(/(: )(\d+)/g, '$1<span class="hl-number">$2</span>').replace(/(true|false|null)/g, '<span class="hl-boolean">$1</span>');
+  else if (language === "typescript" || language === "javascript")
+    highlighted = highlighted.replace(/\b(const|let|var|function|return|if|else|for|while|class|interface|type|export|import|from|async|await)\b/g, '<span class="hl-keyword">$1</span>').replace(/(&apos;[^&]*&apos;|&quot;[^&]*&quot;|`[^`]*`)/g, '<span class="hl-string">$1</span>').replace(/\b(\d+)\b/g, '<span class="hl-number">$1</span>').replace(/(\/\/.*$)/gm, '<span class="hl-comment">$1</span>').replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="hl-comment">$1</span>');
+  return `<pre class="hl-code"><code>${highlighted}</code></pre>`;
+}
+export function getHighlightStyles() {
+  return `
+    .hl-code {
+      margin: 0;
+      padding: 16px;
+      overflow: auto;
+      font-family: 'SF Mono', Monaco, Consolas, monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      background: var(--bg-secondary);
+      border-radius: 4px;
+    }
+    .hl-code code {
+      font-family: inherit;
+    }
+    .hl-tag { color: #22863a; }
+    .hl-attr { color: #6f42c1; }
+    .hl-string { color: #032f62; }
+    .hl-comment { color: #6a737d; font-style: italic; }
+    .hl-directive { color: #d73a49; font-weight: 500; }
+    .hl-interpolation { color: #e36209; }
+    .hl-key { color: #005cc5; }
+    .hl-number { color: #005cc5; }
+    .hl-boolean { color: #d73a49; }
+    .hl-keyword { color: #d73a49; }
+
+    .dark .hl-tag { color: #85e89d; }
+    .dark .hl-attr { color: #b392f0; }
+    .dark .hl-string { color: #9ecbff; }
+    .dark .hl-comment { color: #6a737d; }
+    .dark .hl-directive { color: #f97583; }
+    .dark .hl-interpolation { color: #ffab70; }
+    .dark .hl-key { color: #79b8ff; }
+    .dark .hl-number { color: #79b8ff; }
+    .dark .hl-boolean { color: #f97583; }
+    .dark .hl-keyword { color: #f97583; }
+  `;
+}
+export function getCodePanelStyles() {
+  return `
+    .stx-code-panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-left: 1px solid var(--border);
+    }
+    .stx-code-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-secondary);
+    }
+    .stx-code-tabs button {
+      padding: 8px 16px;
+      border: none;
+      background: none;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 12px;
+      border-bottom: 2px solid transparent;
+    }
+    .stx-code-tabs button:hover {
+      color: var(--text);
+    }
+    .stx-code-tabs button.active {
+      color: var(--primary);
+      border-bottom-color: var(--primary);
+    }
+    .stx-code-toolbar {
+      display: flex;
+      gap: 8px;
+      padding: 8px;
+      border-bottom: 1px solid var(--border);
+    }
+    .stx-code-toolbar button {
+      padding: 4px 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .stx-code-toolbar button:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-code-content {
+      flex: 1;
+      overflow: auto;
+      padding: 0;
+    }
+    ${getHighlightStyles()}
+  `;
+}
+export function getCopyCodeScript() {
+  return `
+    window.__stxStory.copyCode = function() {
+      const codeEl = document.querySelector('.hl-code code');
+      if (codeEl) {
+        navigator.clipboard.writeText(codeEl.textContent || '');
+        // Show toast
+        const toast = document.createElement('div');
+        toast.className = 'stx-toast';
+        toast.textContent = 'Copied to clipboard!';
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 2000);
+      }
+    };
+  `;
+}
+export function getOpenInVSCodeScript(filePath) {
+  return `
+    window.__stxStory.openInVSCode = function() {
+      // Use VS Code URL scheme
+      window.open('vscode://file/${filePath}', '_blank');
+    };
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}

package/dist/story/ui/controls-panel.js

@@ -1,2 +1,168 @@
-// @bun
-import{j as a,k as b,l as c,m as d}from"../../chunk-g4ps1dj8.js";import"../../chunk-7cgmq685.js";import"../../chunk-vcr5pzpx.js";import"../../chunk-xv34zbp4.js";export{d as getControlsPanelStyles,b as generateControlsPanel,c as generateAutoPropsDisabled,a as createControlsPanelState};
+import { renderControl } from "../controls/index.js";
+import { inferControl } from "../generator.js";
+export function createControlsPanelState(component) {
+  const values = {};
+  if (component)
+    for (const prop of component.props)
+      values[prop.name] = prop.default;
+  return {
+    collapsed: !1,
+    values,
+    filter: ""
+  };
+}
+export function generateControlsPanel(component, state) {
+  if (!component)
+    return `
+      <div class="stx-controls-panel">
+        <div class="stx-controls-empty">
+          Select a story to edit props
+        </div>
+      </div>
+    `;
+  const controlsHtml = (state.filter ? component.props.filter((p) => p.name.toLowerCase().includes(state.filter.toLowerCase())) : component.props).map((prop) => {
+    const control = inferControl(prop), value = state.values[prop.name], onChange = `window.__stxStory.setProp('${prop.name}', this.value)`;
+    return renderControl(control, value, onChange);
+  }).join("");
+  return `
+    <div class="stx-controls-panel ${state.collapsed ? "collapsed" : ""}">
+      <div class="stx-controls-header" onclick="window.__stxStory.toggleControlsPanel()">
+        <span class="stx-controls-title">Controls</span>
+        <span class="stx-controls-toggle">${state.collapsed ? "\u25C0" : "\u25B6"}</span>
+      </div>
+      <div class="stx-controls-body">
+        <div class="stx-controls-search">
+          <input
+            type="text"
+            placeholder="Filter props..."
+            value="${escapeHtml(state.filter)}"
+            oninput="window.__stxStory.filterProps(this.value)"
+          />
+        </div>
+        <div class="stx-controls-list">
+          ${controlsHtml}
+        </div>
+        <div class="stx-controls-actions">
+          <button onclick="window.__stxStory.resetProps()">Reset</button>
+          <button onclick="window.__stxStory.copyProps()">Copy JSON</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+export function generateAutoPropsDisabled() {
+  return `
+    <div class="stx-controls-panel">
+      <div class="stx-controls-header">
+        <span class="stx-controls-title">Controls</span>
+      </div>
+      <div class="stx-controls-body">
+        <div class="stx-controls-disabled">
+          Auto props are disabled for this story.
+          <br><br>
+          Use <code>&lt;template #controls&gt;</code> to define custom controls.
+        </div>
+      </div>
+    </div>
+  `;
+}
+export function getControlsPanelStyles() {
+  return `
+    .stx-controls-panel {
+      width: 280px;
+      border-left: 1px solid var(--border);
+      background: var(--bg);
+      display: flex;
+      flex-direction: column;
+      transition: width 0.2s;
+    }
+    .stx-controls-panel.collapsed {
+      width: 40px;
+    }
+    .stx-controls-panel.collapsed .stx-controls-body {
+      display: none;
+    }
+    .stx-controls-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+      user-select: none;
+    }
+    .stx-controls-header:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-controls-title {
+      font-weight: 600;
+      font-size: 13px;
+    }
+    .stx-controls-toggle {
+      font-size: 10px;
+      color: var(--text-secondary);
+    }
+    .stx-controls-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px;
+    }
+    .stx-controls-search {
+      margin-bottom: 12px;
+    }
+    .stx-controls-search input {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 13px;
+    }
+    .stx-controls-search input:focus {
+      outline: none;
+      border-color: var(--primary);
+    }
+    .stx-controls-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .stx-controls-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--border);
+    }
+    .stx-controls-actions button {
+      flex: 1;
+      padding: 8px;
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .stx-controls-actions button:hover {
+      background: var(--bg-secondary);
+    }
+    .stx-controls-empty,
+    .stx-controls-disabled {
+      padding: 24px;
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+    .stx-controls-disabled code {
+      background: var(--bg-secondary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}

package/dist/story/ui/index.js

@@ -1,2 +1,4 @@
-// @bun
-import"../../chunk-cn8az1b4.js";import{a,b,c,d,e,f,g,h,i}from"../../chunk-wvef3ngh.js";import{j,k,l,m}from"../../chunk-g4ps1dj8.js";import{n,o,p,q,r,s,t,u,v,w}from"../../chunk-4k7d8p8d.js";import{A,B,C,D,E,x,y,z}from"../../chunk-payfb24w.js";import"../../chunk-7cgmq685.js";import"../../chunk-vcr5pzpx.js";import"../../chunk-xv34zbp4.js";export{u as saveNavigationState,o as parseHash,v as loadNavigationState,e as highlightCode,c as getStoryCode,w as getStatePersistenceScript,d as getPropsJson,E as getPreviewStyles,i as getOpenInVSCodeScript,s as getNavigationStyles,r as getKeyboardNavigationScript,f as getHighlightStyles,h as getCopyCodeScript,m as getControlsPanelStyles,b as getComponentSource,g as getCodePanelStyles,A as generateZoomControls,z as generateViewportSelector,t as generateRecentList,y as generatePreviewIframe,C as generateOverlayButtons,p as generateHash,k as generateControlsPanel,D as generateComparisonView,a as generateCodePanel,B as generateBackgroundSelector,l as generateAutoPropsDisabled,x as createPreviewState,n as createNavigationState,j as createControlsPanelState,q as addToRecent};
+export * from "./code-panel.js";
+export * from "./controls-panel.js";
+export * from "./navigation.js";
+export * from "./preview.js";

package/dist/story/ui/navigation.js

@@ -1,2 +1,250 @@
-// @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,w as j}from"../../chunk-4k7d8p8d.js";import"../../chunk-xv34zbp4.js";export{h as saveNavigationState,b as parseHash,i as loadNavigationState,j as getStatePersistenceScript,f as getNavigationStyles,e as getKeyboardNavigationScript,g as generateRecentList,c as generateHash,a as createNavigationState,d as addToRecent};
+export function createNavigationState() {
+  return {
+    selectedStoryId: null,
+    selectedVariantId: null,
+    recentStories: [],
+    maxRecent: 10,
+    searchQuery: "",
+    focusedIndex: -1
+  };
+}
+export function parseHash(hash) {
+  if (!hash || hash === "#")
+    return { storyId: null, variantId: null };
+  const parts = (hash.startsWith("#") ? hash.slice(1) : hash).split("/").filter(Boolean);
+  return {
+    storyId: parts[0] || null,
+    variantId: parts[1] || null
+  };
+}
+export function generateHash(storyId, variantId) {
+  if (!storyId)
+    return "";
+  if (!variantId)
+    return `#/${storyId}`;
+  return `#/${storyId}/${variantId}`;
+}
+export function addToRecent(state, storyId) {
+  const index = state.recentStories.indexOf(storyId);
+  if (index !== -1)
+    state.recentStories.splice(index, 1);
+  state.recentStories.unshift(storyId);
+  if (state.recentStories.length > state.maxRecent)
+    state.recentStories.pop();
+}
+export function getKeyboardNavigationScript() {
+  return `
+    (function() {
+      const state = {
+        focusedIndex: -1,
+        items: [],
+      };
+
+      function updateItems() {
+        state.items = Array.from(document.querySelectorAll('.stx-tree-item, .stx-search-result'));
+      }
+
+      function focusItem(index) {
+        // Remove previous focus
+        state.items.forEach(item => item.classList.remove('focused'));
+
+        // Clamp index
+        if (index < 0) index = state.items.length - 1;
+        if (index >= state.items.length) index = 0;
+
+        state.focusedIndex = index;
+
+        // Add focus
+        if (state.items[index]) {
+          state.items[index].classList.add('focused');
+          state.items[index].scrollIntoView({ block: 'nearest' });
+        }
+      }
+
+      function selectFocused() {
+        if (state.items[state.focusedIndex]) {
+          state.items[state.focusedIndex].click();
+        }
+      }
+
+      document.addEventListener('keydown', function(e) {
+        // Ignore if typing in input
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+          if (e.key === 'Escape') {
+            e.target.blur();
+          }
+          return;
+        }
+
+        updateItems();
+
+        switch (e.key) {
+          case 'ArrowUp':
+            e.preventDefault();
+            focusItem(state.focusedIndex - 1);
+            break;
+
+          case 'ArrowDown':
+            e.preventDefault();
+            focusItem(state.focusedIndex + 1);
+            break;
+
+          case 'Enter':
+            e.preventDefault();
+            selectFocused();
+            break;
+
+          case '/':
+          case 'k':
+            if (e.metaKey || e.ctrlKey || e.key === '/') {
+              e.preventDefault();
+              const searchInput = document.querySelector('.stx-search-input');
+              if (searchInput) searchInput.focus();
+            }
+            break;
+
+          case 'Escape':
+            state.focusedIndex = -1;
+            state.items.forEach(item => item.classList.remove('focused'));
+            break;
+        }
+      });
+
+      // Hash change handling
+      window.addEventListener('hashchange', function() {
+        const hash = window.location.hash;
+        if (window.__stxStory && window.__stxStory.navigateToHash) {
+          window.__stxStory.navigateToHash(hash);
+        }
+      });
+
+      // Initialize from hash
+      if (window.location.hash) {
+        setTimeout(function() {
+          if (window.__stxStory && window.__stxStory.navigateToHash) {
+            window.__stxStory.navigateToHash(window.location.hash);
+          }
+        }, 100);
+      }
+    })();
+  `;
+}
+export function getNavigationStyles() {
+  return `
+    .stx-tree-item.focused,
+    .stx-search-result.focused {
+      outline: 2px solid var(--primary);
+      outline-offset: -2px;
+    }
+
+    .stx-recent-list {
+      padding: 8px 0;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 8px;
+    }
+
+    .stx-recent-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      color: var(--text-secondary);
+      padding: 4px 12px;
+      font-weight: 500;
+    }
+
+    .stx-recent-item {
+      padding: 6px 12px;
+      cursor: pointer;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .stx-recent-item:hover {
+      background: var(--bg-secondary);
+    }
+
+    .stx-recent-item .stx-recent-icon {
+      color: var(--text-secondary);
+    }
+  `;
+}
+export function generateRecentList(recentStories, storyMap) {
+  if (recentStories.length === 0)
+    return "";
+  return `
+    <div class="stx-recent-list">
+      <div class="stx-recent-title">Recent</div>
+      ${recentStories.filter((id) => storyMap.has(id)).map((id) => `
+      <div class="stx-recent-item" onclick="window.__stxStory.selectStory('${id}')">
+        <span class="stx-recent-icon">\uD83D\uDD50</span>
+        <span>${storyMap.get(id)}</span>
+      </div>
+    `).join("")}
+    </div>
+  `;
+}
+export function saveNavigationState(state) {
+  try {
+    localStorage.setItem("stx-story-nav", JSON.stringify({
+      selectedStoryId: state.selectedStoryId,
+      selectedVariantId: state.selectedVariantId,
+      recentStories: state.recentStories
+    }));
+  } catch {}
+}
+export function loadNavigationState() {
+  try {
+    const saved = localStorage.getItem("stx-story-nav");
+    if (saved)
+      return JSON.parse(saved);
+  } catch {}
+  return {};
+}
+export function getStatePersistenceScript() {
+  return `
+    (function() {
+      // Load saved state
+      try {
+        const saved = localStorage.getItem('stx-story-nav');
+        if (saved) {
+          const state = JSON.parse(saved);
+          window.__stxStoryState = state;
+
+          // Restore selection
+          if (state.selectedStoryId && window.__stxStory) {
+            window.__stxStory.selectStory(state.selectedStoryId, state.selectedVariantId);
+          }
+        }
+      }
+catch (e) {}
+
+      // Save state on changes
+      window.__stxStory = window.__stxStory || {};
+      const originalSelectStory = window.__stxStory.selectStory;
+
+      window.__stxStory.selectStory = function(storyId, variantId) {
+        if (originalSelectStory) {
+          originalSelectStory(storyId, variantId);
+        }
+
+        try {
+          const state = window.__stxStoryState || {};
+          state.selectedStoryId = storyId;
+          state.selectedVariantId = variantId;
+
+          // Add to recent
+          state.recentStories = state.recentStories || [];
+          const idx = state.recentStories.indexOf(storyId);
+          if (idx !== -1) state.recentStories.splice(idx, 1);
+          state.recentStories.unshift(storyId);
+          if (state.recentStories.length > 10) state.recentStories.pop();
+
+          localStorage.setItem('stx-story-nav', JSON.stringify(state));
+          window.__stxStoryState = state;
+        }
+catch (e) {}
+      };
+    })();
+  `;
+}