@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/story/keyboard-shortcuts.js

@@ -0,0 +1,345 @@
+export const defaultShortcuts = [
+  { key: "k", modifiers: ["meta"], description: "Open search", category: "Navigation", action: "openSearch" },
+  { key: "ArrowUp", description: "Previous story", category: "Navigation", action: "prevStory" },
+  { key: "ArrowDown", description: "Next story", category: "Navigation", action: "nextStory" },
+  { key: "ArrowLeft", description: "Previous variant", category: "Navigation", action: "prevVariant" },
+  { key: "ArrowRight", description: "Next variant", category: "Navigation", action: "nextVariant" },
+  { key: "Enter", description: "Select story", category: "Navigation", action: "selectStory" },
+  { key: "Escape", description: "Close panel/modal", category: "Navigation", action: "closePanel" },
+  { key: "d", description: "Toggle dark mode", category: "View", action: "toggleDarkMode" },
+  { key: "f", description: "Toggle fullscreen", category: "View", action: "toggleFullscreen" },
+  { key: "s", description: "Toggle sidebar", category: "View", action: "toggleSidebar" },
+  { key: "a", description: "Toggle addons panel", category: "View", action: "toggleAddons" },
+  { key: "z", description: "Zoom in", category: "View", action: "zoomIn" },
+  { key: "x", description: "Zoom out", category: "View", action: "zoomOut" },
+  { key: "0", description: "Reset zoom", category: "View", action: "resetZoom" },
+  { key: "r", description: "Reload story", category: "Actions", action: "reloadStory" },
+  { key: "c", description: "Copy story code", category: "Actions", action: "copyCode" },
+  { key: "p", description: "Open props panel", category: "Actions", action: "openProps" },
+  { key: "b", description: "Toggle bookmark", category: "Actions", action: "toggleBookmark" },
+  { key: "t", description: "Run tests", category: "Actions", action: "runTests" },
+  { key: "?", description: "Show shortcuts", category: "Help", action: "showShortcuts" }
+];
+export function formatShortcutKey(shortcut) {
+  const parts = [];
+  if (shortcut.modifiers)
+    for (const mod of shortcut.modifiers)
+      switch (mod) {
+        case "meta":
+          parts.push("\u2318");
+          break;
+        case "ctrl":
+          parts.push("Ctrl");
+          break;
+        case "alt":
+          parts.push("Alt");
+          break;
+        case "shift":
+          parts.push("\u21E7");
+          break;
+      }
+  let key = shortcut.key;
+  switch (key) {
+    case "ArrowUp":
+      key = "\u2191";
+      break;
+    case "ArrowDown":
+      key = "\u2193";
+      break;
+    case "ArrowLeft":
+      key = "\u2190";
+      break;
+    case "ArrowRight":
+      key = "\u2192";
+      break;
+    case "Enter":
+      key = "\u21B5";
+      break;
+    case "Escape":
+      key = "Esc";
+      break;
+    default:
+      key = key.toUpperCase();
+  }
+  parts.push(key);
+  return parts.join(" + ");
+}
+export function getShortcutsModalHtml(shortcuts = defaultShortcuts) {
+  const categories = new Map;
+  for (const shortcut of shortcuts) {
+    const list = categories.get(shortcut.category) || [];
+    list.push(shortcut);
+    categories.set(shortcut.category, list);
+  }
+  return `
+    <div class="shortcuts-modal" id="shortcuts-modal" style="display: none;">
+      <div class="shortcuts-backdrop" onclick="closeShortcutsModal()"></div>
+      <div class="shortcuts-content">
+        <div class="shortcuts-header">
+          <h3>Keyboard Shortcuts</h3>
+          <button class="shortcuts-close" onclick="closeShortcutsModal()">\xD7</button>
+        </div>
+        <div class="shortcuts-body">
+          ${Array.from(categories.entries()).map(([category, items]) => `
+    <div class="shortcuts-category">
+      <h4>${category}</h4>
+      <div class="shortcuts-list">
+        ${items.map((s) => `
+          <div class="shortcut-item">
+            <span class="shortcut-desc">${s.description}</span>
+            <kbd class="shortcut-key">${formatShortcutKey(s)}</kbd>
+          </div>
+        `).join("")}
+      </div>
+    </div>
+  `).join("")}
+        </div>
+      </div>
+    </div>
+  `;
+}
+export function getShortcutsStyles() {
+  return `
+    .shortcuts-modal {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .shortcuts-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+    }
+    .shortcuts-content {
+      position: relative;
+      background: var(--bg);
+      border-radius: 12px;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      max-width: 600px;
+      max-height: 80vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .shortcuts-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+    }
+    .shortcuts-header h3 {
+      margin: 0;
+      font-size: 16px;
+    }
+    .shortcuts-close {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: var(--text-secondary);
+      padding: 0;
+      line-height: 1;
+    }
+    .shortcuts-body {
+      padding: 20px;
+      overflow-y: auto;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+    }
+    .shortcuts-category h4 {
+      margin: 0 0 12px;
+      font-size: 12px;
+      text-transform: uppercase;
+      color: var(--text-secondary);
+      letter-spacing: 0.5px;
+    }
+    .shortcuts-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .shortcut-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+    }
+    .shortcut-desc {
+      font-size: 13px;
+      color: var(--text);
+    }
+    .shortcut-key {
+      font-family: monospace;
+      font-size: 11px;
+      padding: 4px 8px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+    }
+  `;
+}
+export function getShortcutsScript() {
+  return `
+<script>
+window.__stxShortcuts = {
+  shortcuts: ${JSON.stringify(defaultShortcuts)},
+
+  init() {
+    document.addEventListener('keydown', this.handleKeydown.bind(this));
+  },
+
+  handleKeydown(event) {
+    // Don't handle if typing in input
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+      return;
+    }
+
+    const shortcut = this.findShortcut(event);
+    if (shortcut) {
+      event.preventDefault();
+      this.executeAction(shortcut.action);
+    }
+  },
+
+  findShortcut(event) {
+    return this.shortcuts.find(s => {
+      if (s.key.toLowerCase() !== event.key.toLowerCase()) return false;
+
+      const mods = s.modifiers || [];
+      if (mods.includes('meta') !== event.metaKey) return false;
+      if (mods.includes('ctrl') !== event.ctrlKey) return false;
+      if (mods.includes('alt') !== event.altKey) return false;
+      if (mods.includes('shift') !== event.shiftKey) return false;
+
+      return true;
+    });
+  },
+
+  executeAction(action) {
+    switch (action) {
+      case 'openSearch':
+        document.getElementById('search-input')?.focus();
+        break;
+      case 'prevStory':
+        this.navigateStory(-1);
+        break;
+      case 'nextStory':
+        this.navigateStory(1);
+        break;
+      case 'prevVariant':
+        this.navigateVariant(-1);
+        break;
+      case 'nextVariant':
+        this.navigateVariant(1);
+        break;
+      case 'selectStory':
+        document.querySelector('.story-item.focused')?.click();
+        break;
+      case 'closePanel':
+        this.closeActivePanel();
+        break;
+      case 'toggleDarkMode':
+        document.documentElement.classList.toggle('dark');
+        break;
+      case 'toggleFullscreen':
+        this.toggleFullscreen();
+        break;
+      case 'toggleSidebar':
+        document.querySelector('.sidebar')?.classList.toggle('hidden');
+        break;
+      case 'toggleAddons':
+        document.querySelector('.addons-panel')?.classList.toggle('hidden');
+        break;
+      case 'zoomIn':
+        window.__stxStory?.zoomIn?.();
+        break;
+      case 'zoomOut':
+        window.__stxStory?.zoomOut?.();
+        break;
+      case 'resetZoom':
+        window.__stxStory?.resetZoom?.();
+        break;
+      case 'reloadStory':
+        window.__stxStory?.reloadCurrentStory?.();
+        break;
+      case 'copyCode':
+        window.__stxStory?.copyCode?.();
+        break;
+      case 'openProps':
+        document.querySelector('[data-panel="props"]')?.click();
+        break;
+      case 'toggleBookmark':
+        window.__stxBookmarks?.toggleCurrent?.();
+        break;
+      case 'runTests':
+        window.__stxStory?.runTests?.();
+        break;
+      case 'showShortcuts':
+        this.showModal();
+        break;
+    }
+  },
+
+  navigateStory(direction) {
+    const items = Array.from(document.querySelectorAll('.story-item'));
+    const current = document.querySelector('.story-item.active');
+    const currentIndex = current ? items.indexOf(current) : -1;
+    const nextIndex = Math.max(0, Math.min(items.length - 1, currentIndex + direction));
+    items[nextIndex]?.click();
+  },
+
+  navigateVariant(direction) {
+    const buttons = Array.from(document.querySelectorAll('.variant-btn'));
+    const current = document.querySelector('.variant-btn.active');
+    const currentIndex = current ? buttons.indexOf(current) : -1;
+    const nextIndex = Math.max(0, Math.min(buttons.length - 1, currentIndex + direction));
+    buttons[nextIndex]?.click();
+  },
+
+  closeActivePanel() {
+    const modal = document.querySelector('.shortcuts-modal[style*="flex"]');
+    if (modal) {
+      closeShortcutsModal();
+      return;
+    }
+    // Close other panels
+    document.querySelector('.panel.open')?.classList.remove('open');
+  },
+
+  toggleFullscreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+else {
+      document.documentElement.requestFullscreen();
+    }
+  },
+
+  showModal() {
+    const modal = document.getElementById('shortcuts-modal');
+    if (modal) modal.style.display = 'flex';
+  }
+};
+
+function closeShortcutsModal() {
+  const modal = document.getElementById('shortcuts-modal');
+  if (modal) modal.style.display = 'none';
+}
+
+// Initialize on load
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => window.__stxShortcuts.init());
+}
+else {
+  window.__stxShortcuts.init();
+}
+</script>
+`;
+}

package/dist/story/output.d.ts

@@ -0,0 +1,115 @@
+/**
+ * STX Story - Pretty terminal output
+ * ANSI color codes for terminal styling without external dependencies
+ */
+declare const colors: {
+    black: string;
+    red: string;
+    green: string;
+    yellow: string;
+    blue: string;
+    magenta: string;
+    cyan: string;
+    white: string;
+    gray: string;
+    brightRed: string;
+    brightGreen: string;
+    brightYellow: string;
+    brightBlue: string;
+    brightMagenta: string;
+    brightCyan: string;
+    brightWhite: string;
+};
+declare const styles: {
+    bold: string;
+    dim: string;
+    italic: string;
+    underline: string;
+    inverse: string;
+    strikethrough: string;
+};
+/**
+ * Apply color to text
+ */
+export declare function color(text: string, colorName: keyof typeof colors): string;
+/**
+ * Apply style to text
+ */
+export declare function style(text: string, styleName: keyof typeof styles): string;
+export declare const red: (text: string) => string;
+export declare const green: (text: string) => string;
+export declare const yellow: (text: string) => string;
+export declare const blue: (text: string) => string;
+export declare const magenta: (text: string) => string;
+export declare const cyan: (text: string) => string;
+export declare const white: (text: string) => string;
+export declare const gray: (text: string) => string;
+export declare const bold: (text: string) => string;
+export declare const dim: (text: string) => string;
+export declare const italic: (text: string) => string;
+export declare const underline: (text: string) => string;
+/**
+ * Print the STX Story banner
+ */
+export declare function printBanner(): void;
+/**
+ * Print server URLs
+ */
+export declare function printServerUrls(url: string, networkUrl?: string): void;
+/**
+ * Print story count
+ */
+export declare function printStoryCount(count: number): void;
+/**
+ * Print file change event
+ */
+export declare function printFileChange(event: string, file: string): void;
+/**
+ * Print error message
+ */
+export declare function printError(message: string, details?: string): void;
+/**
+ * Print warning message
+ */
+export declare function printWarning(message: string): void;
+/**
+ * Print success message
+ */
+export declare function printSuccess(message: string): void;
+/**
+ * Print info message
+ */
+export declare function printInfo(message: string): void;
+/**
+ * Print build summary
+ */
+export declare function printBuildSummary(storyCount: number, outDir: string, duration: number): void;
+/**
+ * Print test summary
+ */
+export declare function printTestSummary(total: number, passed: number, failed: number, duration: number): void;
+/**
+ * Print keyboard shortcuts help
+ */
+export declare function printHelp(): void;
+/**
+ * Clear the console
+ */
+export declare function clearConsole(): void;
+/**
+ * Create a spinner
+ */
+export declare function createSpinner(text: string): {
+    start: () => void;
+    stop: (success?: boolean) => void;
+    update: (newText: string) => void;
+};
+/**
+ * Format duration in human-readable format
+ */
+export declare function formatDuration(ms: number): string;
+/**
+ * Format file size in human-readable format
+ */
+export declare function formatSize(bytes: number): string;
+export {};

package/dist/story/output.js

@@ -0,0 +1,153 @@
+const ESC = "\x1B[", RESET = `${ESC}0m`, colors = {
+  black: `${ESC}30m`,
+  red: `${ESC}31m`,
+  green: `${ESC}32m`,
+  yellow: `${ESC}33m`,
+  blue: `${ESC}34m`,
+  magenta: `${ESC}35m`,
+  cyan: `${ESC}36m`,
+  white: `${ESC}37m`,
+  gray: `${ESC}90m`,
+  brightRed: `${ESC}91m`,
+  brightGreen: `${ESC}92m`,
+  brightYellow: `${ESC}93m`,
+  brightBlue: `${ESC}94m`,
+  brightMagenta: `${ESC}95m`,
+  brightCyan: `${ESC}96m`,
+  brightWhite: `${ESC}97m`
+}, styles = {
+  bold: `${ESC}1m`,
+  dim: `${ESC}2m`,
+  italic: `${ESC}3m`,
+  underline: `${ESC}4m`,
+  inverse: `${ESC}7m`,
+  strikethrough: `${ESC}9m`
+};
+export function color(text, colorName) {
+  return `${colors[colorName]}${text}${RESET}`;
+}
+export function style(text, styleName) {
+  return `${styles[styleName]}${text}${RESET}`;
+}
+export const red = (text) => color(text, "red"), green = (text) => color(text, "green"), yellow = (text) => color(text, "yellow"), blue = (text) => color(text, "blue"), magenta = (text) => color(text, "magenta"), cyan = (text) => color(text, "cyan"), white = (text) => color(text, "white"), gray = (text) => color(text, "gray"), bold = (text) => style(text, "bold"), dim = (text) => style(text, "dim"), italic = (text) => style(text, "italic"), underline = (text) => style(text, "underline");
+export function printBanner() {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("         \uD83D\uDCD6 STX Story                  ") + cyan("\u2551"));
+  console.log(cyan("  \u2551") + dim("    Component Showcase & Testing       ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+}
+export function printServerUrls(url, networkUrl) {
+  console.log(bold("  Server running at:"));
+  console.log("");
+  console.log(`  ${dim("\u279C")}  ${bold("Local:")}   ${cyan(url)}`);
+  if (networkUrl)
+    console.log(`  ${dim("\u279C")}  ${bold("Network:")} ${cyan(networkUrl)}`);
+  console.log("");
+}
+export function printStoryCount(count) {
+  const icon = count > 0 ? "\u2713" : "\u25CB", countColor = count > 0 ? green : yellow;
+  console.log(`  ${countColor(icon)} Found ${bold(String(count))} story ${count === 1 ? "file" : "files"}`);
+}
+export function printFileChange(event, file) {
+  const icon = {
+    add: green("+"),
+    change: yellow("~"),
+    unlink: red("-")
+  }[event] || "\u2022";
+  console.log(`  ${icon} ${dim(`[${event}]`)} ${file}`);
+}
+export function printError(message, details) {
+  console.log("");
+  console.log(`  ${red("\u2717")} ${bold(red("Error:"))} ${message}`);
+  if (details)
+    console.log(`    ${dim(details)}`);
+  console.log("");
+}
+export function printWarning(message) {
+  console.log(`  ${yellow("\u26A0")} ${yellow("Warning:")} ${message}`);
+}
+export function printSuccess(message) {
+  console.log(`  ${green("\u2713")} ${message}`);
+}
+export function printInfo(message) {
+  console.log(`  ${blue("\u2139")} ${message}`);
+}
+export function printBuildSummary(storyCount, outDir, duration) {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("           Build Complete              ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+  console.log(`  ${green("\u2713")} Stories:  ${bold(String(storyCount))}`);
+  console.log(`  ${green("\u2713")} Output:   ${bold(outDir)}`);
+  console.log(`  ${green("\u2713")} Time:     ${bold(`${duration}ms`)}`);
+  console.log("");
+}
+export function printTestSummary(total, passed, failed, duration) {
+  console.log("");
+  console.log(cyan("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557"));
+  console.log(cyan("  \u2551") + bold("           Test Results                ") + cyan("\u2551"));
+  console.log(cyan("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D"));
+  console.log("");
+  console.log(`  Total:   ${bold(String(total))}`);
+  console.log(`  Passed:  ${green(String(passed))} ${green("\u2713")}`);
+  if (failed > 0)
+    console.log(`  Failed:  ${red(String(failed))} ${red("\u2717")}`);
+  console.log(`  Time:    ${bold(`${duration}ms`)}`);
+  console.log("");
+}
+export function printHelp() {
+  console.log("");
+  console.log(bold("  Keyboard Shortcuts:"));
+  console.log("");
+  console.log(`  ${cyan("h")}  Show this help`);
+  console.log(`  ${cyan("o")}  Open in browser`);
+  console.log(`  ${cyan("r")}  Restart server`);
+  console.log(`  ${cyan("c")}  Clear console`);
+  console.log(`  ${cyan("q")}  Quit`);
+  console.log("");
+}
+export function clearConsole() {
+  process.stdout.write("\x1Bc");
+}
+export function createSpinner(text) {
+  const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  let frameIndex = 0, interval = null, currentText = text;
+  return {
+    start() {
+      interval = setInterval(() => {
+        process.stdout.write(`\r  ${cyan(frames[frameIndex])} ${currentText}`);
+        frameIndex = (frameIndex + 1) % frames.length;
+      }, 80);
+    },
+    stop(success = !0) {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+      const icon = success ? green("\u2713") : red("\u2717");
+      process.stdout.write(`\r  ${icon} ${currentText}
+`);
+    },
+    update(newText) {
+      currentText = newText;
+    }
+  };
+}
+export function formatDuration(ms) {
+  if (ms < 1000)
+    return `${ms}ms`;
+  if (ms < 60000)
+    return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000), seconds = (ms % 60000 / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+}
+export function formatSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes} B`;
+  if (bytes < 1048576)
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}