npm - @maccesar/aiskills - Versions diffs - 1.7.0 - Mend

@maccesar/aiskills 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/README.md +531 -0
package/bin/aiskills.js +76 -0
package/lib/cache.js +49 -0
package/lib/cleanup.js +77 -0
package/lib/commands/auto-update.js +131 -0
package/lib/commands/doctor.js +139 -0
package/lib/commands/list.js +77 -0
package/lib/commands/skills.js +263 -0
package/lib/commands/status.js +94 -0
package/lib/commands/uninstall.js +182 -0
package/lib/commands/update.js +149 -0
package/lib/config.js +90 -0
package/lib/downloader.js +110 -0
package/lib/hooks.js +74 -0
package/lib/installer.js +114 -0
package/lib/platform.js +112 -0
package/lib/prompts/checkboxCancel.js +264 -0
package/lib/prompts/selectCancel.js +204 -0
package/lib/symlink.js +154 -0
package/lib/utils.js +49 -0
package/package.json +61 -0
package/skills/humaniza/SKILL.md +51 -0
package/skills/humaniza/agents/openai.yaml +4 -0
package/skills/humaniza/references/ai-patterns-es.md +51 -0
package/skills/humaniza/references/checklist.md +9 -0
package/skills/humaniza/references/examples.md +17 -0
package/skills/humaniza/references/lexicon-es-mx.md +36 -0
package/skills/humaniza/references/modes-es-mx.md +41 -0
package/skills/humaniza/references/voice-es-mx.md +24 -0
package/skills/refactoring-ui/SKILL.md +59 -0
package/skills/refactoring-ui/references/01-design-process.md +72 -0
package/skills/refactoring-ui/references/02-visual-hierarchy.md +84 -0
package/skills/refactoring-ui/references/03-layout-spacing.md +69 -0
package/skills/refactoring-ui/references/04-typography.md +70 -0
package/skills/refactoring-ui/references/05-color.md +96 -0
package/skills/refactoring-ui/references/06-depth-shadows.md +74 -0
package/skills/refactoring-ui/references/07-images.md +75 -0
package/skills/refactoring-ui/references/08-finishing-touches.md +91 -0
package/skills/stitch-showcase/SKILL.md +411 -0
package/skills/stitch-showcase/references/01-navbar.md +52 -0
package/skills/stitch-showcase/references/02-hero.md +56 -0
package/skills/stitch-showcase/references/03-design-system.md +102 -0
package/skills/stitch-showcase/references/04-screen-gallery.md +102 -0
package/skills/stitch-showcase/references/05-viewer-web.md +105 -0
package/skills/stitch-showcase/references/06-viewer-mobile.md +104 -0
package/skills/stitch-showcase/references/07-theme-system.md +77 -0
package/skills/stitch-showcase/references/08-type-detection.md +81 -0
package/skills/stitch-showcase/references/09-quality-standards.md +126 -0
package/skills/stitch-showcase/references/10-component-standardization.md +40 -0
package/skills/stitch-showcase/references/11-component-catalog.md +70 -0
package/skills/stitch-showcase/references/catalog-template.html +841 -0
package/skills/stitch-showcase/references/index.html +299 -0
package/skills/stitch-showcase/references/viewer.html +412 -0
package/skills/stitch-showcase/scripts/__pycache__/build_showcase.cpython-314.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/component_utils.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/detect_components.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/extract_catalog.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/extract_text.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/extract_zips.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/__pycache__/parse_design_md.cpython-313.pyc +0 -0
package/skills/stitch-showcase/scripts/apply_canonical.py +238 -0
package/skills/stitch-showcase/scripts/build_showcase.py +2103 -0
package/skills/stitch-showcase/scripts/component_utils.py +398 -0
package/skills/stitch-showcase/scripts/detect_components.py +284 -0
package/skills/stitch-showcase/scripts/extract_catalog.py +913 -0
package/skills/stitch-showcase/scripts/extract_text.py +268 -0
package/skills/stitch-showcase/scripts/extract_zips.py +178 -0
package/skills/stitch-showcase/scripts/parse_design_md.py +397 -0
package/skills/vscode-extension-dev/SKILL.md +114 -0
package/skills/vscode-extension-dev/references/api-patterns.md +625 -0
package/skills/vscode-extension-dev/references/architecture.md +287 -0
package/skills/vscode-extension-dev/references/package-json-schema.md +345 -0
package/skills/vscode-extension-dev/references/publishing.md +251 -0

package/skills/stitch-showcase/references/viewer.html ADDED Viewed

@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Viewer — {{PROJECT_NAME}}</title>
+  {{FONT_LINK}}
+  <script>
+    (function () {
+      var s = localStorage.getItem('showcase-theme');
+      var d = '{{DEFAULT_THEME}}';
+      if ((s || d) === 'dark') document.documentElement.classList.add('dark');
+      // Apply view mode before render — URL param > localStorage > default
+      var params = new URLSearchParams(location.search);
+      var viewKey = 'showcase-view-mode-' + '{{PROJECT_SLUG}}';
+      var view = localStorage.getItem(viewKey) || params.get('view') || '{{DEFAULT_VIEW}}';
+      document.documentElement.classList.add('view-' + view);
+    })();
+  </script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['{{FONT_FAMILY}}', 'system-ui', 'sans-serif'] } } } }</script>
+  <style>
+    body { margin: 0; overflow: hidden; }
+    /* ── Phone frame (mobile view) ── */
+    #phone-wrap {
+      width: 390px;
+      height: 844px;
+      border: 8px solid #2a2a2a;
+      border-radius: 44px;
+      overflow: hidden;
+      box-shadow: 0 25px 60px rgba(0,0,0,0.4);
+      flex-shrink: 0;
+      position: relative;
+      background: #000;
+      box-sizing: content-box;
+    }
+    .dark #phone-wrap { border-color: #2a2a2a; box-shadow: 0 25px 60px rgba(0,0,0,0.4); }
+    html:not(.dark) #phone-wrap { border-color: #d1d5db; box-shadow: 0 25px 60px rgba(0,0,0,0.15); }
+    #phone-container { transform-origin: top center; }
+    /* ── Browser chrome (web view) ── */
+    #browser-chrome {
+      height: 36px;
+      border-radius: 12px 12px 0 0;
+      display: flex;
+      align-items: center;
+      padding: 0 14px;
+      gap: 8px;
+      background: #e8e8e8;
+    }
+    html.dark #browser-chrome { background: #1a1a1a; }
+    .traffic-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+    #url-pill {
+      flex: 1; max-width: 480px; margin: 0 auto; height: 22px;
+      border-radius: 11px; display: flex; align-items: center;
+      justify-content: center; padding: 0 12px;
+      background: rgba(0, 0, 0, 0.06); overflow: hidden;
+    }
+    html.dark #url-pill { background: rgba(255, 255, 255, 0.06); }
+    #url-pill span { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    html.dark #url-pill span { color: #666; }
+    #iframe-wrap-web {
+      border-left: 1px solid #d4d4d4;
+      border-right: 1px solid #d4d4d4;
+      border-bottom: 1px solid #d4d4d4;
+    }
+    html.dark #iframe-wrap-web { border-color: #2a2a2a; }
+    /* ── View mode visibility ── */
+    .view-mobile #mobile-frame { display: flex; }
+    .view-mobile #web-frame { display: none; }
+    .view-web #mobile-frame { display: none; }
+    .view-web #web-frame { display: flex; }
+    #viewer-frame {
+      display: block; width: 100%; height: 100%; border: none;
+      background: #fff;
+    }
+    html.dark #viewer-frame { background: #111; }
+  </style>
+</head>
+<body class="flex h-screen flex-col overflow-hidden text-gray-900 transition-colors duration-200 dark:text-gray-100 bg-[#f0f0f0] dark:bg-[#0a0a0a]">
+  <script>
+    var SCREENS = {{SCREENS_JSON}};
+  </script>
+  <!-- ── Header ──────────────────────────────────────────── -->
+  <header id="main-header" class="flex-shrink-0 border-b border-gray-200/60 backdrop-blur-xl bg-white/80 dark:border-white/10 dark:bg-[#0a0a0a]/80" style="height:56px">
+    <div class="mx-auto flex h-full max-w-[1440px] items-center gap-3 px-5">
+      <!-- Back button -->
+      <a id="btn-back" href="index.html" title="Back to gallery (Esc)" class="flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[13px] text-gray-500 no-underline transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100">
+        <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M10 13L5 8l5-5" />
+        </svg>
+        Back
+      </a>
+      <div class="h-4 w-px shrink-0 bg-gray-200 dark:bg-white/10"></div>
+      <!-- Screen title -->
+      <span id="screen-title" class="shrink-0 text-[13px] font-semibold leading-none">--</span>
+      <!-- Screen description (inline after title) -->
+      <span id="screen-desc" class="hidden text-[11px] text-gray-400 dark:text-gray-500 truncate sm:inline"></span>
+      <!-- Spacer -->
+      <div class="flex-1"></div>
+      <!-- Position counter -->
+      <span id="nav-pos" class="shrink-0 tabular-nums text-[11px] text-gray-400 dark:text-gray-500">-- / --</span>
+      <!-- Prev button -->
+      <button id="btn-prev" title="Previous screen (ArrowLeft)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
+        <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13L5 8l5-5"/></svg>
+      </button>
+      <!-- Next button -->
+      <button id="btn-next" title="Next screen (ArrowRight)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-30" disabled>
+        <svg class="h-3.5 w-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 3l5 5-5 5"/></svg>
+      </button>
+      <!-- Theme toggle -->
+      <button id="theme-toggle" title="Toggle light/dark" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+        <svg class="block h-3.5 w-3.5 dark:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+        <svg class="hidden h-3.5 w-3.5 dark:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      </button>
+      <!-- View mode toggle -->
+      <button id="view-mode-toggle" title="Toggle mobile/web view" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+        <svg id="icon-phone" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>
+        </svg>
+        <svg id="icon-monitor" class="hidden h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+        </svg>
+      </button>
+      <!-- Fullscreen button -->
+      <button id="btn-fullscreen" title="Fullscreen (F)" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10">
+        <svg id="icon-expand" class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+        </svg>
+        <svg id="icon-compress" class="hidden h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 14h6v6m10-10h-6V4M4 10h6V4m10 10h-6v6"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+  <!-- ── Fullscreen container ──────────────────────────────── -->
+  <div id="fs-container" class="flex flex-1 flex-col overflow-hidden">
+    <!-- ── Mobile frame (phone) ──────────────────────────── -->
+    <main id="mobile-frame" class="hidden flex-1 items-start justify-center overflow-hidden pt-6">
+      <div id="phone-container">
+        <div id="phone-wrap">
+          <iframe id="viewer-frame-mobile" class="viewer-frame" title="Screen preview" style="width:100%;height:100%;border:none;display:block;background:#000"></iframe>
+        </div>
+      </div>
+    </main>
+    <!-- ── Web frame (browser chrome) ────────────────────── -->
+    <div id="web-frame" class="hidden mx-auto w-full max-w-[1440px] flex-1 flex-col overflow-hidden px-5 py-4">
+      <div id="browser-chrome" class="flex-shrink-0">
+        <div class="traffic-dot" style="background:#FF5F57"></div>
+        <div class="traffic-dot" style="background:#FEBC2E"></div>
+        <div class="traffic-dot" style="background:#28C840"></div>
+        <div id="url-pill"><span id="url-display">localhost</span></div>
+        <div style="width:60px;flex-shrink:0"></div>
+      </div>
+      <div id="iframe-wrap-web" class="flex-1 overflow-hidden rounded-b-xl">
+        <iframe id="viewer-frame-web" class="viewer-frame" src="" title="Screen preview" style="width:100%;height:100%;border:none;display:block;background:#fff"></iframe>
+      </div>
+    </div>
+  </div>
+  <script>
+    (function () {
+      'use strict';
+      // ── Elements ──
+      var header = document.getElementById('main-header');
+      var titleEl = document.getElementById('screen-title');
+      var descEl = document.getElementById('screen-desc');
+      var navPos = document.getElementById('nav-pos');
+      var btnBack = document.getElementById('btn-back');
+      var btnPrev = document.getElementById('btn-prev');
+      var btnNext = document.getElementById('btn-next');
+      var btnFullscreen = document.getElementById('btn-fullscreen');
+      var iconExpand = document.getElementById('icon-expand');
+      var iconCompress = document.getElementById('icon-compress');
+      var iconPhone = document.getElementById('icon-phone');
+      var iconMonitor = document.getElementById('icon-monitor');
+      var phoneContainer = document.getElementById('phone-container');
+      var urlDisplay = document.getElementById('url-display');
+      var frameMobile = document.getElementById('viewer-frame-mobile');
+      var frameWeb = document.getElementById('viewer-frame-web');
+      var screens = SCREENS;
+      var currentIndex = 0;
+      var VIEW_KEY = 'showcase-view-mode-' + '{{PROJECT_SLUG}}';
+      var currentView = localStorage.getItem(VIEW_KEY) || '{{DEFAULT_VIEW}}';
+      // ── View mode ──
+      function applyViewMode() {
+        var root = document.documentElement;
+        root.classList.remove('view-mobile', 'view-web');
+        root.classList.add('view-' + currentView);
+        // Toggle icon shows what you'll switch TO
+        if (currentView === 'mobile') {
+          iconPhone.classList.add('hidden');
+          iconMonitor.classList.remove('hidden');
+        } else {
+          iconPhone.classList.remove('hidden');
+          iconMonitor.classList.add('hidden');
+        }
+        // Recalc phone scaling when switching to mobile
+        if (currentView === 'mobile') recalcScale();
+      }
+      applyViewMode();
+      document.getElementById('view-mode-toggle').addEventListener('click', function () {
+        currentView = currentView === 'mobile' ? 'web' : 'mobile';
+        localStorage.setItem(VIEW_KEY, currentView);
+        applyViewMode();
+        // Sync iframe src to the active frame
+        syncFrameSrc();
+      });
+      // ── Helpers ──
+      function activeFrame() {
+        return currentView === 'mobile' ? frameMobile : frameWeb;
+      }
+      function syncFrameSrc() {
+        // Ensure both frames have the same src
+        var src = frameMobile.src || frameWeb.src;
+        if (frameMobile.src !== src) frameMobile.src = src;
+        if (frameWeb.src !== src) frameWeb.src = src;
+      }
+      function getParam(name) {
+        return new URLSearchParams(window.location.search).get(name) || '';
+      }
+      function findScreenIndex(file) {
+        for (var i = 0; i < screens.length; i++) {
+          if (screens[i].html_file === file) return i;
+        }
+        return 0;
+      }
+      // ── Load screen ──
+      function loadScreen(index) {
+        if (screens.length === 0) return;
+        if (index < 0) index = screens.length - 1;
+        if (index >= screens.length) index = 0;
+        currentIndex = index;
+        var s = screens[currentIndex];
+        frameMobile.src = s.html_file;
+        frameWeb.src = s.html_file;
+        titleEl.textContent = s.title || '';
+        descEl.textContent = s.desc || '';
+        navPos.textContent = (currentIndex + 1) + ' / ' + screens.length;
+        // Update URL
+        var url = new URL(window.location);
+        url.searchParams.set('screen', s.html_file);
+        history.replaceState(null, '', url);
+        // Page title
+        document.title = (s.title || 'Screen') + ' — {{PROJECT_NAME}}';
+        // URL bar in browser chrome
+        var slug = s.html_file.replace('assets/', '').replace('.html', '').replace(/_/g, '-');
+        urlDisplay.textContent = 'app.{{PROJECT_NAME}} / ' + slug;
+        // Enable/disable nav buttons
+        btnPrev.disabled = currentIndex <= 0;
+        btnNext.disabled = currentIndex >= screens.length - 1;
+      }
+      // ── Phone scaling ──
+      function recalcScale() {
+        if (currentView !== 'mobile') return;
+        var vw = window.innerWidth;
+        var vh = window.innerHeight;
+        var headerH = header.offsetHeight;
+        var padX = 48;
+        var padY = 48;
+        var phoneW = 390 + 16;
+        var phoneH = 844 + 16;
+        var scaleX = (vw - padX) / phoneW;
+        var scaleY = (vh - headerH - padY) / phoneH;
+        var scale = Math.min(1, scaleX, scaleY);
+        phoneContainer.style.transform = 'scale(' + scale + ')';
+        phoneContainer.style.width = phoneW + 'px';
+        phoneContainer.style.height = phoneH + 'px';
+      }
+      // ── Fullscreen ──
+      function isFullscreen() {
+        return !!(document.fullscreenElement || document.webkitFullscreenElement);
+      }
+      function toggleFullscreen() {
+        var el = document.getElementById('fs-container');
+        if (isFullscreen()) {
+          (document.exitFullscreen || document.webkitExitFullscreen).call(document);
+        } else {
+          (el.requestFullscreen || el.webkitRequestFullscreen).call(el);
+        }
+      }
+      function updateFullscreenIcon() {
+        var fs = isFullscreen();
+        iconExpand.style.display = fs ? 'none' : 'block';
+        iconCompress.style.display = fs ? 'block' : 'none';
+      }
+      // Back button is now an <a href="index.html"> — no JS needed
+      // ── Navigation ──
+      btnPrev.addEventListener('click', function () { loadScreen(currentIndex - 1); });
+      btnNext.addEventListener('click', function () { loadScreen(currentIndex + 1); });
+      btnFullscreen.addEventListener('click', toggleFullscreen);
+      // ── Keyboard shortcuts ──
+      document.addEventListener('keydown', function (e) {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        switch (e.key) {
+          case 'ArrowLeft':
+            e.preventDefault();
+            loadScreen(currentIndex - 1);
+            break;
+          case 'ArrowRight':
+            e.preventDefault();
+            loadScreen(currentIndex + 1);
+            break;
+          case 'Escape':
+            if (isFullscreen()) {
+              document.exitFullscreen();
+            } else {
+              btnBack.click();
+            }
+            break;
+          case 'f':
+          case 'F':
+            if (!e.ctrlKey && !e.metaKey) {
+              e.preventDefault();
+              toggleFullscreen();
+            }
+            break;
+        }
+      });
+      // ── Fullscreen change ──
+      document.addEventListener('fullscreenchange', updateFullscreenIcon);
+      document.addEventListener('webkitfullscreenchange', updateFullscreenIcon);
+      // ── Theme toggle ──
+      document.getElementById('theme-toggle').addEventListener('click', function () {
+        document.documentElement.classList.toggle('dark');
+        localStorage.setItem('showcase-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+      });
+      // ── Resize ──
+      var resizeTimer;
+      window.addEventListener('resize', function () {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(recalcScale, 50);
+      });
+      // ── Init ──
+      var initialScreen = getParam('screen');
+      currentIndex = initialScreen ? findScreenIndex(initialScreen) : 0;
+      loadScreen(currentIndex);
+      recalcScale();
+    })();
+  </script>
+</body>
+</html>

package/skills/stitch-showcase/scripts/__pycache__/build_showcase.cpython-314.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/component_utils.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/detect_components.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/extract_catalog.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/extract_text.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/extract_zips.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/__pycache__/parse_design_md.cpython-313.pyc ADDED Viewed

Binary file

package/skills/stitch-showcase/scripts/apply_canonical.py ADDED Viewed

@@ -0,0 +1,238 @@
+"""
+apply_canonical.py — Replace component variants with a canonical version across screens.
+Reads the canonical component from a source screen HTML and replaces matching
+components in target screen HTMLs. Supports both structural (navbar, footer, etc.)
+and atomic (buttons, inputs, etc.) components.
+Uses only stdlib. No external dependencies.
+Usage:
+    # As a module (from AI agent):
+    from apply_canonical import apply_canonical
+    # Standalone:
+    python apply_canonical.py /path/to/assets/ navbar home_screen
+    python apply_canonical.py /path/to/assets/ button home_screen --targets screen1 screen2
+"""
+import re
+import sys
+import json
+from pathlib import Path
+# Sibling import
+sys.path.insert(0, str(Path(__file__).parent))
+import component_utils as cu
+# Structural component types handled by semantic block extraction
+STRUCTURAL_TYPES = {"navbar", "navbars", "header", "headers", "footer", "footers",
+                    "sidebar", "sidebars", "tabbar", "tabbars"}
+# Map plural type names to singular for semantic block lookup
+_TYPE_SINGULAR = {
+    "navbars": "navbar", "headers": "header", "footers": "footer",
+    "sidebars": "sidebar", "tabbars": "tabbar",
+}
+def apply_canonical(
+    assets_dir: Path,
+    component_type: str,
+    canonical_slug: str,
+    target_slugs: list = None,
+) -> dict:
+    """
+    Replace component variants in target HTMLs with the canonical version.
+    Args:
+        assets_dir: Directory containing screen .html files
+        component_type: Component type (e.g., "navbar", "footer", "button")
+        canonical_slug: Screen slug to use as the canonical source
+        target_slugs: List of screen slugs to update. If None, updates all
+                      screens that have this component (except the canonical).
+    Returns:
+        Dict mapping slug → status: "replaced", "skipped", "not_found", or "error"
+    """
+    assets_dir = Path(assets_dir).resolve()
+    canonical_path = assets_dir / f"{canonical_slug}.html"
+    if not canonical_path.exists():
+        return {"_error": f"Canonical screen '{canonical_slug}' not found"}
+    canonical_html = canonical_path.read_text(encoding="utf-8", errors="replace")
+    # Normalize type name
+    comp_type = _TYPE_SINGULAR.get(component_type.lower(), component_type.lower())
+    if comp_type in {v for v in _TYPE_SINGULAR.values()}:
+        return _apply_structural(assets_dir, comp_type, canonical_html,
+                                 canonical_slug, target_slugs)
+    else:
+        return _apply_atomic(assets_dir, comp_type, canonical_html,
+                             canonical_slug, target_slugs)
+def _apply_structural(
+    assets_dir: Path,
+    comp_type: str,
+    canonical_html: str,
+    canonical_slug: str,
+    target_slugs: list = None,
+) -> dict:
+    """Replace structural components (navbar, footer, etc.) in target screens."""
+    # Extract the canonical component block
+    canonical_blocks = cu.extract_semantic_blocks(canonical_html)
+    if comp_type not in canonical_blocks or not canonical_blocks[comp_type]:
+        return {"_error": f"No {comp_type} found in canonical screen '{canonical_slug}'"}
+    # Use the first (usually only) block as the canonical version
+    canon_block = canonical_blocks[comp_type][0]
+    # Determine target files
+    html_files = sorted(assets_dir.glob("*.html"))
+    results = {}
+    for html_path in html_files:
+        slug = html_path.stem
+        if slug == canonical_slug:
+            continue
+        if target_slugs and slug not in target_slugs:
+            continue
+        try:
+            html = html_path.read_text(encoding="utf-8", errors="replace")
+        except Exception as e:
+            results[slug] = f"error: {e}"
+            continue
+        # Find the matching component block in this screen
+        target_blocks = cu.extract_semantic_blocks(html)
+        if comp_type not in target_blocks or not target_blocks[comp_type]:
+            results[slug] = "not_found"
+            continue
+        # Replace each matching block with the canonical version
+        updated = html
+        replaced = False
+        for target_block in target_blocks[comp_type]:
+            if target_block in updated:
+                updated = updated.replace(target_block, canon_block, 1)
+                replaced = True
+        if replaced and updated != html:
+            html_path.write_text(updated, encoding="utf-8")
+            results[slug] = "replaced"
+        else:
+            results[slug] = "skipped"
+    return results
+def _apply_atomic(
+    assets_dir: Path,
+    comp_type: str,
+    canonical_html: str,
+    canonical_slug: str,
+    target_slugs: list = None,
+) -> dict:
+    """
+    Replace atomic components (buttons, inputs, etc.) in target screens.
+    Uses the component catalog JSON to find cluster members, then replaces
+    matching snippets in each target screen.
+    """
+    # Try to load catalog for cluster info
+    catalog_path = assets_dir.parent / "component_catalog.json"
+    catalog = {}
+    if catalog_path.exists():
+        try:
+            catalog = json.loads(catalog_path.read_text(encoding="utf-8"))
+        except Exception:
+            pass
+    # Find the canonical component snippet from catalog clusters
+    plural_type = f"{comp_type}s"
+    clusters = catalog.get("clusters", {}).get(plural_type, [])
+    # Find cluster where canonical_slug is in the canonical's found_in
+    target_cluster = None
+    canon_snippet = None
+    for cluster in clusters:
+        canonical = cluster.get("canonical", {})
+        if canonical_slug in canonical.get("found_in", []):
+            target_cluster = cluster
+            canon_snippet = canonical.get("html", "")
+            break
+    if not canon_snippet:
+        return {"_error": f"No {comp_type} cluster found with canonical from '{canonical_slug}'. "
+                f"Run build first to generate component_catalog.json."}
+    # Collect target slugs from cluster variants
+    variant_snippets = {}
+    for v in target_cluster.get("variants", []):
+        for slug in v.get("found_in", []):
+            if slug != canonical_slug:
+                variant_snippets[slug] = v.get("html", "")
+    html_files = sorted(assets_dir.glob("*.html"))
+    results = {}
+    for html_path in html_files:
+        slug = html_path.stem
+        if slug == canonical_slug:
+            continue
+        if target_slugs and slug not in target_slugs:
+            continue
+        if slug not in variant_snippets:
+            continue
+        try:
+            html = html_path.read_text(encoding="utf-8", errors="replace")
+        except Exception as e:
+            results[slug] = f"error: {e}"
+            continue
+        old_snippet = variant_snippets[slug]
+        if old_snippet and old_snippet in html:
+            updated = html.replace(old_snippet, canon_snippet, 1)
+            html_path.write_text(updated, encoding="utf-8")
+            results[slug] = "replaced"
+        else:
+            results[slug] = "not_found"
+    return results
+# ─── CLI ──────────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    import argparse
+    parser = argparse.ArgumentParser(
+        description="Replace component variants with a canonical version."
+    )
+    parser.add_argument("assets_dir", help="Directory containing screen .html files")
+    parser.add_argument("component_type", help="Component type (navbar, footer, button, etc.)")
+    parser.add_argument("canonical_slug", help="Screen slug to use as canonical source")
+    parser.add_argument("--targets", nargs="*", help="Specific screen slugs to update (default: all)")
+    args = parser.parse_args()
+    assets = Path(args.assets_dir).resolve()
+    if not assets.is_dir():
+        print(f"Error: '{assets}' is not a directory.", file=sys.stderr)
+        sys.exit(1)
+    result = apply_canonical(assets, args.component_type, args.canonical_slug, args.targets)
+    if "_error" in result:
+        print(f"Error: {result['_error']}", file=sys.stderr)
+        sys.exit(1)
+    print(json.dumps(result, ensure_ascii=False, indent=2))
+    replaced = sum(1 for v in result.values() if v == "replaced")
+    total = len(result)
+    print(f"\n--- {replaced}/{total} screens updated ---", file=sys.stderr)