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

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

@@ -0,0 +1,168 @@
+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.d.ts

@@ -0,0 +1,8 @@
+/**
+ * STX Story - UI Components
+ * All UI-related exports
+ */
+export * from './code-panel';
+export * from './controls-panel';
+export * from './navigation';
+export * from './preview';

package/dist/story/ui/index.js

@@ -0,0 +1,4 @@
+export * from "./code-panel.js";
+export * from "./controls-panel.js";
+export * from "./navigation.js";
+export * from "./preview.js";

package/dist/story/ui/navigation.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Create initial navigation state
+ */
+export declare function createNavigationState(): NavigationState;
+/**
+ * Parse hash from URL for routing
+ */
+export declare function parseHash(hash: string): { storyId: string | null, variantId: string | null };
+/**
+ * Generate hash for URL
+ */
+export declare function generateHash(storyId: string | null, variantId: string | null): string;
+/**
+ * Add story to recent list
+ */
+export declare function addToRecent(state: NavigationState, storyId: string): void;
+/**
+ * Get keyboard navigation script
+ */
+export declare function getKeyboardNavigationScript(): string;
+/**
+ * Get navigation styles
+ */
+export declare function getNavigationStyles(): string;
+/**
+ * Generate recent stories list HTML
+ */
+export declare function generateRecentList(recentStories: string[], storyMap: Map<string, string>): string;
+/**
+ * State persistence helpers
+ */
+export declare function saveNavigationState(state: NavigationState): void;
+/**
+ * Load navigation state from storage
+ */
+export declare function loadNavigationState(): Partial<NavigationState>;
+/**
+ * Get state persistence script
+ */
+export declare function getStatePersistenceScript(): string;
+/**
+ * STX Story - Navigation
+ * Keyboard navigation, hash routing, and recent components
+ */
+/**
+ * Navigation state
+ */
+export declare interface NavigationState {
+  selectedStoryId: string | null
+  selectedVariantId: string | null
+  recentStories: string[]
+  maxRecent: number
+  searchQuery: string
+  focusedIndex: number
+}

package/dist/story/ui/navigation.js

@@ -0,0 +1,250 @@
+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) {}
+      };
+    })();
+  `;
+}

package/dist/story/ui/preview.d.ts

@@ -0,0 +1,46 @@
+import type { ResponsivePreset, ServerStoryFile, StoryContext } from '../types';
+/**
+ * Create initial preview state
+ */
+export declare function createPreviewState(): PreviewState;
+/**
+ * Generate iframe HTML for component preview
+ */
+export declare function generatePreviewIframe(story: ServerStoryFile, variantId: string, state: PreviewState, ctx: StoryContext): string;
+/**
+ * Generate viewport selector HTML
+ */
+export declare function generateViewportSelector(presets: ResponsivePreset[], currentWidth: number | null): string;
+/**
+ * Generate zoom controls HTML
+ */
+export declare function generateZoomControls(currentZoom: number): string;
+/**
+ * Generate background selector HTML
+ */
+export declare function generateBackgroundSelector(presets: { label: string, color: string }[], currentColor: string): string;
+/**
+ * Generate toolbar overlay buttons
+ */
+export declare function generateOverlayButtons(state: PreviewState): string;
+/**
+ * Generate side-by-side comparison view
+ */
+export declare function generateComparisonView(story: ServerStoryFile, variantId1: string, variantId2: string, ctx: StoryContext): string;
+/**
+ * Get preview styles
+ */
+export declare function getPreviewStyles(): string;
+/**
+ * Preview state
+ */
+export declare interface PreviewState {
+  viewportWidth: number | null
+  viewportHeight: number | null
+  zoom: number
+  background: string
+  showGrid: boolean
+  showRuler: boolean
+  showOutline: boolean
+  props: Record<string, any>
+}