@stacksjs/stx 0.2.94 → 0.2.96

package/dist/stores-client.js

@@ -1,2 +1,132 @@
-// @bun
-import"./chunk-3jm3snz8.js";var Q=new Map;function U(A="local"){if(A==="memory"||typeof localStorage>"u")return{getItem:(D)=>Q.get(D)??null,setItem:(D,G)=>Q.set(D,G),removeItem:(D)=>Q.delete(D)};return A==="local"?localStorage:sessionStorage}function W(A,D){let{state:G,getters:J={},actions:K={},persist:I}=D,z=typeof G==="function"?G():{...G},L=new Set;if(I){let H=I===!0?{storage:"local",key:`stx:${A}`}:I,q=U(H.storage),B=H.key||`stx:${A}`;try{let M=q.getItem(B);if(M)z={...z,...JSON.parse(M)}}catch{}}let N=()=>{if(!I)return;let H=I===!0?{storage:"local",key:`stx:${A}`}:I,q=U(H.storage),B=H.key||`stx:${A}`;q.setItem(B,JSON.stringify(z))},O=(H)=>{for(let q of L)try{q(z,H)}catch(B){console.error(`[stx:${A}] Subscriber error:`,B)}},V=typeof G==="function"?G():{...G},P=new Proxy({},{get(H,q){if(q==="$state")return{...z};if(q==="$id")return A;if(q==="$subscribe")return(B)=>{return L.add(B),()=>L.delete(B)};if(q==="$reset")return()=>{let B=z;z={...V},N(),O(B)};if(q==="$patch")return(B)=>{let M=z;if(typeof B==="function"){let T={...z};B(T),z=T}else z={...z,...B};N(),O(M)};if(q in J)return J[q](z);if(q in K)return(...B)=>K[q].apply(P,B);if(q in z)return z[q];return},set(H,q,B){if(q.startsWith("$"))return!1;let M=z;return z={...z,[q]:B},N(),O(M),!0},has(H,q){return q.startsWith("$")||q in J||q in K||q in z}});if(typeof window<"u")window.__STX_STORES__=window.__STX_STORES__||{},window.__STX_STORES__[A]=P;return P}function X(A){if(typeof window>"u")return;let D=window;D.__STX_STORES__=D.__STX_STORES__||{};for(let[G,J]of Object.entries(A))D.__STX_STORES__[G]=J;window.dispatchEvent(new CustomEvent("stx:stores-ready",{detail:Object.keys(A)}))}function R(A){if(typeof window>"u")return;return window.__STX_STORES__?.[A]}function Y(A,D=5000){return new Promise((G,J)=>{let K=R(A);if(K){G(K);return}let I=Date.now(),z=()=>{let L=R(A);if(L)G(L);else if(Date.now()-I>D)J(Error(`Store "${A}" not found after ${D}ms`));else requestAnimationFrame(z)};z()})}if(typeof window<"u")window.STX={...window.STX,defineStore:W,registerStores:X,getStore:R,waitForStore:Y};export{Y as waitForStore,X as registerStores,R as getStore,W as defineStore};
+const memoryStorage = new Map;
+function getStorage(type = "local") {
+  if (type === "memory" || typeof localStorage > "u")
+    return {
+      getItem: (key) => memoryStorage.get(key) ?? null,
+      setItem: (key, value) => memoryStorage.set(key, value),
+      removeItem: (key) => memoryStorage.delete(key)
+    };
+  return type === "local" ? localStorage : sessionStorage;
+}
+export function defineStore(id, options) {
+  const { state: initialState, getters = {}, actions = {}, persist } = options;
+  let currentState = typeof initialState === "function" ? initialState() : { ...initialState };
+  const subscribers = new Set;
+  if (persist) {
+    const opts = persist === !0 ? { storage: "local", key: `stx:${id}` } : persist, storage = getStorage(opts.storage), key = opts.key || `stx:${id}`;
+    try {
+      const stored = storage.getItem(key);
+      if (stored)
+        currentState = { ...currentState, ...JSON.parse(stored) };
+    } catch {}
+  }
+  const persistState = () => {
+    if (!persist)
+      return;
+    const opts = persist === !0 ? { storage: "local", key: `stx:${id}` } : persist, storage = getStorage(opts.storage), key = opts.key || `stx:${id}`;
+    storage.setItem(key, JSON.stringify(currentState));
+  }, notify = (prev) => {
+    for (const sub of subscribers)
+      try {
+        sub(currentState, prev);
+      } catch (e) {
+        console.error(`[stx:${id}] Subscriber error:`, e);
+      }
+  }, initialStateCopy = typeof initialState === "function" ? initialState() : { ...initialState }, store = new Proxy({}, {
+    get(_, prop) {
+      if (prop === "$state")
+        return { ...currentState };
+      if (prop === "$id")
+        return id;
+      if (prop === "$subscribe")
+        return (callback) => {
+          subscribers.add(callback);
+          return () => subscribers.delete(callback);
+        };
+      if (prop === "$reset")
+        return () => {
+          const prev = currentState;
+          currentState = { ...initialStateCopy };
+          persistState();
+          notify(prev);
+        };
+      if (prop === "$patch")
+        return (partial) => {
+          const prev = currentState;
+          if (typeof partial === "function") {
+            const draft = { ...currentState };
+            partial(draft);
+            currentState = draft;
+          } else
+            currentState = { ...currentState, ...partial };
+          persistState();
+          notify(prev);
+        };
+      if (prop in getters)
+        return getters[prop](currentState);
+      if (prop in actions)
+        return (...args) => actions[prop].apply(store, args);
+      if (prop in currentState)
+        return currentState[prop];
+      return;
+    },
+    set(_, prop, value) {
+      if (prop.startsWith("$"))
+        return !1;
+      const prev = currentState;
+      currentState = { ...currentState, [prop]: value };
+      persistState();
+      notify(prev);
+      return !0;
+    },
+    has(_, prop) {
+      return prop.startsWith("$") || prop in getters || prop in actions || prop in currentState;
+    }
+  });
+  if (typeof window < "u") {
+    window.__STX_STORES__ = window.__STX_STORES__ || {};
+    window.__STX_STORES__[id] = store;
+  }
+  return store;
+}
+export function registerStores(stores) {
+  if (typeof window > "u")
+    return;
+  const w = window;
+  w.__STX_STORES__ = w.__STX_STORES__ || {};
+  for (const [name, store] of Object.entries(stores))
+    w.__STX_STORES__[name] = store;
+  window.dispatchEvent(new CustomEvent("stx:stores-ready", { detail: Object.keys(stores) }));
+}
+export function getStore(name) {
+  if (typeof window > "u")
+    return;
+  return window.__STX_STORES__?.[name];
+}
+export function waitForStore(name, timeout = 5000) {
+  return new Promise((resolve, reject) => {
+    const store = getStore(name);
+    if (store) {
+      resolve(store);
+      return;
+    }
+    const start = Date.now(), check = () => {
+      const store = getStore(name);
+      if (store)
+        resolve(store);
+      else if (Date.now() - start > timeout)
+        reject(Error(`Store "${name}" not found after ${timeout}ms`));
+      else
+        requestAnimationFrame(check);
+    };
+    check();
+  });
+}
+if (typeof window < "u")
+  window.STX = {
+    ...window.STX,
+    defineStore,
+    registerStores,
+    getStore,
+    waitForStore
+  };

package/dist/story/addons.js

@@ -1,2 +1,261 @@
-// @bun
-import{Ad as o,Bd as p,Cd as q,Dd as r,Ed as s,md as a,nd as b,od as c,pd as d,qd as e,rd as f,sd as g,td as h,ud as i,vd as j,wd as k,xd as l,yd as m,zd as n}from"../chunk-1z5nhbjt.js";import"../chunk-3jm3snz8.js";export{j as viewportAddon,b as unregisterAddon,q as stateAddon,s as registerBuiltinAddons,a as registerAddon,p as performanceAddon,n as outlineAddon,m as measureAddon,e as initializeAddons,o as i18nAddon,h as getToolbarItems,c as getAddons,g as getAddonPanels,d as getAddon,l as docsAddon,k as backgroundsAddon,f as applyDecorators,i as actionsAddon,r as a11yAddon};
+const addons = new Map;
+export function registerAddon(addon) {
+  if (addons.has(addon.id))
+    console.warn(`Addon "${addon.id}" is already registered, overwriting...`);
+  addons.set(addon.id, addon);
+}
+export function unregisterAddon(id) {
+  return addons.delete(id);
+}
+export function getAddons() {
+  return Array.from(addons.values());
+}
+export function getAddon(id) {
+  return addons.get(id);
+}
+export async function initializeAddons(ctx) {
+  for (const addon of addons.values())
+    if (addon.init)
+      await addon.init(ctx);
+}
+export function applyDecorators(story, ctx) {
+  let decorated = story;
+  for (const addon of addons.values())
+    if (addon.decorator)
+      decorated = addon.decorator(decorated, ctx);
+  return decorated;
+}
+export function getAddonPanels() {
+  const panels = [];
+  for (const addon of addons.values())
+    if (addon.panel)
+      panels.push(addon.panel);
+  return panels;
+}
+export function getToolbarItems() {
+  const items = [];
+  for (const addon of addons.values())
+    if (addon.toolbar)
+      items.push(...addon.toolbar);
+  return items;
+}
+export const actionsAddon = {
+  name: "Actions",
+  id: "actions",
+  panel: {
+    id: "actions-panel",
+    title: "Actions",
+    icon: "ph:lightning",
+    render: (_ctx) => {
+      return `
+        <div class="addon-actions">
+          <div class="addon-actions-header">
+            <span>Event Log</span>
+            <button onclick="window.__stxStory.clearActions()">Clear</button>
+          </div>
+          <div class="addon-actions-list" id="actions-list">
+            <div class="addon-actions-empty">No actions logged yet</div>
+          </div>
+        </div>
+      `;
+    }
+  }
+}, viewportAddon = {
+  name: "Viewport",
+  id: "viewport",
+  toolbar: [
+    {
+      id: "viewport-select",
+      title: "Viewport",
+      icon: "ph:device-mobile",
+      render: (ctx) => {
+        return `
+          <select id="viewport-select" onchange="window.__stxStory.setViewport(this.value)">
+            <option value="">Responsive</option>
+            ${ctx.storyContext.config.responsivePresets.map((p) => `<option value="${p.width}">${p.label}</option>`).join("")}
+          </select>
+        `;
+      }
+    }
+  ]
+}, backgroundsAddon = {
+  name: "Backgrounds",
+  id: "backgrounds",
+  toolbar: [
+    {
+      id: "background-select",
+      title: "Background",
+      icon: "ph:paint-bucket",
+      render: (ctx) => {
+        return `
+          <select id="background-select" onchange="window.__stxStory.setBackground(this.value)">
+            ${ctx.storyContext.config.backgroundPresets.map((p) => `<option value="${p.color}">${p.label}</option>`).join("")}
+          </select>
+        `;
+      }
+    }
+  ]
+}, docsAddon = {
+  name: "Docs",
+  id: "docs",
+  panel: {
+    id: "docs-panel",
+    title: "Docs",
+    icon: "ph:book-open",
+    render: (_ctx) => {
+      return `
+        <div class="addon-docs">
+          <div class="addon-docs-content" id="docs-content">
+            Select a story to view documentation
+          </div>
+        </div>
+      `;
+    }
+  }
+}, measureAddon = {
+  name: "Measure",
+  id: "measure",
+  toolbar: [
+    {
+      id: "measure-toggle",
+      title: "Measure",
+      icon: "ph:ruler",
+      render: () => {
+        return `
+          <button
+            class="toolbar-btn"
+            onclick="window.__stxStory.toggleMeasure()"
+            title="Toggle measure overlay"
+          >
+            \uD83D\uDCCF
+          </button>
+        `;
+      }
+    }
+  ]
+}, outlineAddon = {
+  name: "Outline",
+  id: "outline",
+  toolbar: [
+    {
+      id: "outline-toggle",
+      title: "Outline",
+      icon: "ph:bounding-box",
+      render: () => {
+        return `
+          <button
+            class="toolbar-btn"
+            onclick="window.__stxStory.toggleOutline()"
+            title="Toggle outline overlay"
+          >
+            \u2B1C
+          </button>
+        `;
+      }
+    }
+  ]
+}, i18nAddon = {
+  name: "i18n",
+  id: "i18n",
+  toolbar: [
+    {
+      id: "locale-select",
+      title: "Locale",
+      icon: "ph:globe",
+      render: () => {
+        return `
+          <select id="locale-select" onchange="window.__stxStory.setLocale(this.value)">
+            ${["en", "es", "fr", "de", "ja", "zh"].map((l) => `<option value="${l}">${l.toUpperCase()}</option>`).join("")}
+          </select>
+        `;
+      }
+    }
+  ]
+}, performanceAddon = {
+  name: "Performance",
+  id: "performance",
+  panel: {
+    id: "performance-panel",
+    title: "Performance",
+    icon: "ph:timer",
+    render: () => {
+      return `
+        <div class="addon-performance">
+          <div class="addon-performance-metrics" id="perf-metrics">
+            <div class="perf-metric">
+              <span class="perf-label">Render Time</span>
+              <span class="perf-value" id="perf-render">-</span>
+            </div>
+            <div class="perf-metric">
+              <span class="perf-label">DOM Nodes</span>
+              <span class="perf-value" id="perf-nodes">-</span>
+            </div>
+            <div class="perf-metric">
+              <span class="perf-label">Memory</span>
+              <span class="perf-value" id="perf-memory">-</span>
+            </div>
+            <div class="perf-metric">
+              <span class="perf-label">Re-renders</span>
+              <span class="perf-value" id="perf-rerenders">0</span>
+            </div>
+          </div>
+          <button onclick="window.__stxStory.measurePerformance()">Measure</button>
+        </div>
+      `;
+    }
+  }
+}, stateAddon = {
+  name: "State",
+  id: "state",
+  panel: {
+    id: "state-panel",
+    title: "State",
+    icon: "ph:database",
+    render: () => {
+      return `
+        <div class="addon-state">
+          <div class="addon-state-header">
+            <span>Component State</span>
+            <button onclick="window.__stxStory.refreshState()">Refresh</button>
+          </div>
+          <div class="addon-state-tree" id="state-tree">
+            <pre>// Select a story to inspect state</pre>
+          </div>
+        </div>
+      `;
+    }
+  }
+}, a11yAddon = {
+  name: "Accessibility",
+  id: "a11y",
+  panel: {
+    id: "a11y-panel",
+    title: "A11y",
+    icon: "ph:wheelchair",
+    render: () => {
+      return `
+        <div class="addon-a11y">
+          <div class="addon-a11y-header">
+            <span>Accessibility Audit</span>
+            <button onclick="window.__stxStory.runA11yAudit()">Run Audit</button>
+          </div>
+          <div class="addon-a11y-results" id="a11y-results">
+            <div class="a11y-empty">Click "Run Audit" to check accessibility</div>
+          </div>
+        </div>
+      `;
+    }
+  }
+};
+export function registerBuiltinAddons() {
+  registerAddon(actionsAddon);
+  registerAddon(viewportAddon);
+  registerAddon(backgroundsAddon);
+  registerAddon(docsAddon);
+  registerAddon(measureAddon);
+  registerAddon(outlineAddon);
+  registerAddon(i18nAddon);
+  registerAddon(performanceAddon);
+  registerAddon(stateAddon);
+  registerAddon(a11yAddon);
+}

package/dist/story/analytics.js

@@ -1,2 +1,235 @@
-// @bun
-import{Fd as a,Gd as b,Hd as c}from"../chunk-hxx3za24.js";import"../chunk-3jm3snz8.js";export{c as getAnalyticsStyles,b as getAnalyticsDashboardHtml,a as AnalyticsTracker};
+import fs from "node:fs";
+import path from "node:path";
+const ANALYTICS_FILE = ".stx/story/analytics.json", STORAGE_VERSION = 1, MAX_EVENTS = 1e4;
+
+export class AnalyticsTracker {
+  storage;
+  storagePath;
+  currentSession = null;
+  dirty = !1;
+  viewStartTimes = new Map;
+  constructor(rootDir) {
+    this.storagePath = path.join(rootDir, ANALYTICS_FILE);
+    this.storage = this.loadStorage();
+    this.startSession();
+  }
+  loadStorage() {
+    try {
+      const content = fs.readFileSync(this.storagePath, "utf-8");
+      return JSON.parse(content);
+    } catch {
+      return { version: STORAGE_VERSION, events: [], sessions: [] };
+    }
+  }
+  async save() {
+    if (!this.dirty)
+      return;
+    const dir = path.dirname(this.storagePath);
+    await fs.promises.mkdir(dir, { recursive: !0 });
+    if (this.storage.events.length > MAX_EVENTS)
+      this.storage.events = this.storage.events.slice(-MAX_EVENTS);
+    await fs.promises.writeFile(this.storagePath, JSON.stringify(this.storage, null, 2));
+    this.dirty = !1;
+  }
+  startSession() {
+    this.endSession();
+    this.currentSession = {
+      id: generateId(),
+      startTime: Date.now(),
+      componentViews: []
+    };
+    this.storage.sessions.push(this.currentSession);
+    this.dirty = !0;
+  }
+  endSession() {
+    if (this.currentSession) {
+      this.currentSession.endTime = Date.now();
+      this.currentSession = null;
+    }
+  }
+  track(event) {
+    this.storage.events.push({
+      ...event,
+      timestamp: Date.now()
+    });
+    this.dirty = !0;
+  }
+  trackView(componentId, variantId) {
+    this.endViewTiming(componentId);
+    this.viewStartTimes.set(componentId, Date.now());
+    this.track({
+      type: "view",
+      componentId,
+      variantId
+    });
+    if (this.currentSession && !this.currentSession.componentViews.includes(componentId))
+      this.currentSession.componentViews.push(componentId);
+  }
+  endViewTiming(componentId) {
+    const startTime = this.viewStartTimes.get(componentId);
+    if (startTime) {
+      const duration = Date.now() - startTime;
+      this.track({
+        type: "view",
+        componentId,
+        metadata: { duration, endView: !0 }
+      });
+      this.viewStartTimes.delete(componentId);
+    }
+  }
+  trackPropChange(componentId, propName, value) {
+    this.track({
+      type: "prop_change",
+      componentId,
+      propName,
+      metadata: { value }
+    });
+  }
+  trackVariantSwitch(componentId, variantId) {
+    this.track({
+      type: "variant_switch",
+      componentId,
+      variantId
+    });
+  }
+  trackSearch(query, resultCount) {
+    this.track({
+      type: "search",
+      query,
+      metadata: { resultCount }
+    });
+  }
+  getComponentAnalytics(componentId, componentName) {
+    const events = this.storage.events.filter((e) => e.componentId === componentId), viewEvents = events.filter((e) => e.type === "view" && !e.metadata?.endView), propChangeEvents = events.filter((e) => e.type === "prop_change"), variantEvents = events.filter((e) => e.type === "variant_switch"), propChanges = {};
+    for (const event of propChangeEvents)
+      if (event.propName)
+        propChanges[event.propName] = (propChanges[event.propName] || 0) + 1;
+    const variantViews = {};
+    for (const event of variantEvents)
+      if (event.variantId)
+        variantViews[event.variantId] = (variantViews[event.variantId] || 0) + 1;
+    const sessionsWithView = new Set(this.storage.sessions.filter((s) => s.componentViews.includes(componentId)).map((s) => s.id)), durations = events.filter((e) => e.metadata?.duration).map((e) => e.metadata.duration), avgTimeSpent = durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0, topChangedProps = Object.entries(propChanges).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([name]) => name);
+    return {
+      componentId,
+      componentName,
+      viewCount: viewEvents.length,
+      uniqueViews: sessionsWithView.size,
+      lastViewed: viewEvents[viewEvents.length - 1]?.timestamp,
+      propChanges,
+      topChangedProps,
+      variantViews,
+      avgTimeSpent
+    };
+  }
+  getMostViewedComponents(limit = 10) {
+    const viewCounts = new Map;
+    for (const event of this.storage.events)
+      if (event.type === "view" && event.componentId && !event.metadata?.endView)
+        viewCounts.set(event.componentId, (viewCounts.get(event.componentId) || 0) + 1);
+    return Array.from(viewCounts.entries()).map(([componentId, viewCount]) => ({ componentId, viewCount })).sort((a, b) => b.viewCount - a.viewCount).slice(0, limit);
+  }
+  getMostChangedProps(limit = 10) {
+    const propCounts = new Map;
+    for (const event of this.storage.events)
+      if (event.type === "prop_change" && event.propName)
+        propCounts.set(event.propName, (propCounts.get(event.propName) || 0) + 1);
+    return Array.from(propCounts.entries()).map(([propName, changeCount]) => ({ propName, changeCount })).sort((a, b) => b.changeCount - a.changeCount).slice(0, limit);
+  }
+  getSearchAnalytics() {
+    const searchEvents = this.storage.events.filter((e) => e.type === "search"), queryCounts = new Map;
+    let totalResults = 0;
+    for (const event of searchEvents) {
+      if (event.query)
+        queryCounts.set(event.query, (queryCounts.get(event.query) || 0) + 1);
+      if (event.metadata?.resultCount !== void 0)
+        totalResults += event.metadata.resultCount;
+    }
+    const topQueries = Array.from(queryCounts.entries()).map(([query, count]) => ({ query, count })).sort((a, b) => b.count - a.count).slice(0, 10);
+    return {
+      totalSearches: searchEvents.length,
+      topQueries,
+      avgResultCount: searchEvents.length > 0 ? totalResults / searchEvents.length : 0
+    };
+  }
+  clear() {
+    this.storage.events = [];
+    this.storage.sessions = [];
+    this.dirty = !0;
+    this.startSession();
+  }
+  exportAnalytics() {
+    return JSON.stringify({
+      exportedAt: Date.now(),
+      ...this.storage
+    }, null, 2);
+  }
+}
+function generateId() {
+  return `session-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+export function getAnalyticsDashboardHtml(mostViewed, mostChangedProps) {
+  const viewedRows = mostViewed.map((c) => `
+    <tr>
+      <td>${c.componentId}</td>
+      <td>${c.viewCount}</td>
+    </tr>
+  `).join(""), propsRows = mostChangedProps.map((p) => `
+    <tr>
+      <td>${p.propName}</td>
+      <td>${p.changeCount}</td>
+    </tr>
+  `).join("");
+  return `
+    <div class="analytics-dashboard">
+      <h3>\uD83D\uDCCA Usage Analytics</h3>
+
+      <div class="analytics-section">
+        <h4>Most Viewed Components</h4>
+        <table>
+          <thead><tr><th>Component</th><th>Views</th></tr></thead>
+          <tbody>${viewedRows || '<tr><td colspan="2">No data</td></tr>'}</tbody>
+        </table>
+      </div>
+
+      <div class="analytics-section">
+        <h4>Most Changed Props</h4>
+        <table>
+          <thead><tr><th>Prop</th><th>Changes</th></tr></thead>
+          <tbody>${propsRows || '<tr><td colspan="2">No data</td></tr>'}</tbody>
+        </table>
+      </div>
+    </div>
+  `;
+}
+export function getAnalyticsStyles() {
+  return `
+    .analytics-dashboard {
+      padding: 16px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+    }
+    .analytics-dashboard h3 {
+      margin: 0 0 16px;
+      font-size: 14px;
+    }
+    .analytics-section {
+      margin-bottom: 16px;
+    }
+    .analytics-section h4 {
+      margin: 0 0 8px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+    .analytics-dashboard table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    .analytics-dashboard th,
+    .analytics-dashboard td {
+      padding: 6px 8px;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+  `;
+}