self-evolve-framework 1.5.0 → 1.6.1

package/template/skills/impeccable/scripts/live/sveltekit-adapter.mjs

@@ -1,274 +0,0 @@
-/**
- * SvelteKit live-mode adapter.
- *
- * SvelteKit must not be patched through src/app.html. That file is a document
- * template, not framework-owned component chrome. The adapter keeps SvelteKit
- * work limited to mounting a dev-only shadow host from +layout.svelte; the
- * actual live UI remains the shared plain-DOM browser chrome.
- */
-
-import fs from 'node:fs';
-import path from 'node:path';
-
-export const SVELTE_LIVE_ROOT_COMPONENT = 'src/lib/impeccable/ImpeccableLiveRoot.svelte';
-export const SVELTE_LAYOUT_MARKER_OPEN = '<!-- impeccable-live-svelte-start -->';
-export const SVELTE_LAYOUT_MARKER_CLOSE = '<!-- impeccable-live-svelte-end -->';
-export const SVELTE_ROOT_IMPORT = "import ImpeccableLiveRoot from '$lib/impeccable/ImpeccableLiveRoot.svelte';";
-
-export function detectSvelteKitProject(cwd = process.cwd(), config = null) {
-  const appHtml = findSvelteKitAppHtml(cwd, config);
-  if (!appHtml) return null;
-  const hasTemplateMarkers = fileIncludes(path.join(cwd, appHtml), '%sveltekit.body%')
-    && fileIncludes(path.join(cwd, appHtml), '%sveltekit.head%');
-  if (!hasTemplateMarkers) return null;
-
-  const hasSvelteConfig = fs.existsSync(path.join(cwd, 'svelte.config.js'))
-    || fs.existsSync(path.join(cwd, 'svelte.config.mjs'))
-    || fs.existsSync(path.join(cwd, 'svelte.config.cjs'))
-    || fs.existsSync(path.join(cwd, 'svelte.config.ts'));
-  const hasKitPackage = packageHasSvelteKit(cwd);
-  if (!hasSvelteConfig && !hasKitPackage) return null;
-
-  return {
-    appHtml,
-    layoutFile: findSvelteKitLayout(cwd),
-    rootComponent: SVELTE_LIVE_ROOT_COMPONENT,
-  };
-}
-
-export function applySvelteKitLiveAdapter({ cwd = process.cwd(), port, config = null } = {}) {
-  if (!Number.isFinite(Number(port))) {
-    throw new Error('SvelteKit live adapter requires a numeric port');
-  }
-  const detected = detectSvelteKitProject(cwd, config);
-  if (!detected) return null;
-
-  ensureSvelteLiveRootComponent(cwd, Number(port));
-
-  const layoutRel = detected.layoutFile;
-  const layoutAbs = path.join(cwd, layoutRel);
-  fs.mkdirSync(path.dirname(layoutAbs), { recursive: true });
-  const layoutExisted = fs.existsSync(layoutAbs);
-  const before = layoutExisted ? fs.readFileSync(layoutAbs, 'utf-8') : defaultSvelteLayout();
-  const after = patchSvelteLayout(before);
-  fs.writeFileSync(layoutAbs, after, 'utf-8');
-
-  return {
-    file: layoutRel,
-    adapter: 'sveltekit',
-    inserted: after !== before || !layoutExisted,
-    appHtmlUntouched: true,
-    rootComponent: SVELTE_LIVE_ROOT_COMPONENT,
-  };
-}
-
-export function removeSvelteKitLiveAdapter({ cwd = process.cwd(), config = null } = {}) {
-  const detected = detectSvelteKitProject(cwd, config);
-  if (!detected) return null;
-
-  const layoutAbs = path.join(cwd, detected.layoutFile);
-  let removed = false;
-  if (fs.existsSync(layoutAbs)) {
-    const before = fs.readFileSync(layoutAbs, 'utf-8');
-    const after = unpatchSvelteLayout(before);
-    if (after !== before) {
-      fs.writeFileSync(layoutAbs, after, 'utf-8');
-      removed = true;
-    }
-  }
-
-  const rootAbs = path.join(cwd, SVELTE_LIVE_ROOT_COMPONENT);
-  if (fs.existsSync(rootAbs)) {
-    fs.rmSync(rootAbs, { force: true });
-    removed = true;
-  }
-
-  pruneEmptyDir(path.dirname(rootAbs), path.join(cwd, 'src'));
-
-  return {
-    file: detected.layoutFile,
-    adapter: 'sveltekit',
-    removed,
-    appHtmlUntouched: true,
-    rootComponent: SVELTE_LIVE_ROOT_COMPONENT,
-  };
-}
-
-export function patchSvelteLayout(content) {
-  let out = String(content || '');
-  if (!out.includes(SVELTE_ROOT_IMPORT)) {
-    const scriptMatch = out.match(/<script(?:\s[^>]*)?>/i);
-    if (scriptMatch) {
-      const insertAt = scriptMatch.index + scriptMatch[0].length;
-      out = out.slice(0, insertAt) + '\n  ' + SVELTE_ROOT_IMPORT + out.slice(insertAt);
-    } else {
-      out = `<script>\n  ${SVELTE_ROOT_IMPORT}\n</script>\n\n` + out;
-    }
-  }
-
-  if (!out.includes(SVELTE_LAYOUT_MARKER_OPEN)) {
-    const block = `${SVELTE_LAYOUT_MARKER_OPEN}\n<ImpeccableLiveRoot />\n${SVELTE_LAYOUT_MARKER_CLOSE}\n`;
-    const renderMatch = out.match(/\{@render\s+children(?:\?\.)?\(\)\s*\}/);
-    const slotMatch = out.match(/<slot\s*\/?>/);
-    const match = renderMatch || slotMatch;
-    if (match) {
-      out = out.slice(0, match.index) + block + out.slice(match.index);
-    } else {
-      out = out.replace(/\s*$/, '\n\n' + block);
-    }
-  }
-
-  return out;
-}
-
-export function unpatchSvelteLayout(content) {
-  let out = String(content || '');
-  const blockRe = new RegExp(
-    '([ \\t]*)' + escapeRegExp(SVELTE_LAYOUT_MARKER_OPEN)
-    + '\\n<ImpeccableLiveRoot\\s*/>\\n'
-    + escapeRegExp(SVELTE_LAYOUT_MARKER_CLOSE)
-    + '\\n?',
-    'g',
-  );
-  out = out.replace(blockRe, '$1');
-  out = out.replace(new RegExp('^\\s*' + escapeRegExp(SVELTE_ROOT_IMPORT) + '\\s*\\n?', 'gm'), '');
-  out = out.replace(/<script>\s*<\/script>\s*\n?/g, '');
-  return out.replace(/\n{3,}/g, '\n\n');
-}
-
-export function ensureSvelteLiveRootComponent(cwd, port) {
-  const file = path.join(cwd, SVELTE_LIVE_ROOT_COMPONENT);
-  fs.mkdirSync(path.dirname(file), { recursive: true });
-  fs.writeFileSync(file, buildSvelteLiveRootComponent(port), 'utf-8');
-  return file;
-}
-
-export function buildSvelteLiveRootComponent(port) {
-  return `<script>
-  import { onMount } from 'svelte';
-
-  const LIVE_URL = 'http://localhost:${Number(port)}/live.js';
-  const HOST_ID = 'impeccable-live-root';
-
-  onMount(() => {
-    let host = document.querySelector('impeccable-live-root#' + HOST_ID) || document.getElementById(HOST_ID);
-    if (!host) {
-      host = document.createElement('impeccable-live-root');
-      host.id = HOST_ID;
-      document.body.appendChild(host);
-    }
-
-    host.dataset.impeccableLiveAdapter = 'sveltekit';
-    host.style.setProperty('all', 'initial', 'important');
-    host.style.setProperty('display', 'block', 'important');
-    host.style.setProperty('position', 'fixed', 'important');
-    host.style.setProperty('top', '0', 'important');
-    host.style.setProperty('left', '0', 'important');
-    host.style.setProperty('width', '0', 'important');
-    host.style.setProperty('height', '0', 'important');
-    host.style.setProperty('overflow', 'visible', 'important');
-    host.style.setProperty('z-index', '2147483000', 'important');
-    host.style.setProperty('pointer-events', 'none', 'important');
-
-    const root = host.shadowRoot || host.attachShadow({ mode: 'open' });
-    if (!root.querySelector('style[data-impeccable-live-reset]')) {
-      const reset = document.createElement('style');
-      reset.dataset.impeccableLiveReset = 'true';
-      reset.textContent = ':host, :host *, * { box-sizing: border-box; }';
-      root.appendChild(reset);
-    }
-
-    window.__IMPECCABLE_LIVE_ADAPTER__ = 'sveltekit';
-    window.__IMPECCABLE_LIVE_UI_ROOT__ = root;
-    window.__IMPECCABLE_LIVE_CHROME_MOUNT__ = {
-      adapter: 'sveltekit',
-      version: 1,
-      host,
-      root,
-    };
-
-    const script = document.createElement('script');
-    script.src = LIVE_URL;
-    script.async = true;
-    script.dataset.impeccableLiveScript = 'true';
-    document.head.appendChild(script);
-
-    return () => {
-      script.remove();
-      if (window.__IMPECCABLE_LIVE_UI_ROOT__ === root) delete window.__IMPECCABLE_LIVE_UI_ROOT__;
-      if (window.__IMPECCABLE_LIVE_CHROME_MOUNT__?.root === root) delete window.__IMPECCABLE_LIVE_CHROME_MOUNT__;
-      if (window.__IMPECCABLE_LIVE_ADAPTER__ === 'sveltekit') delete window.__IMPECCABLE_LIVE_ADAPTER__;
-    };
-  });
-</script>
-`;
-}
-
-function findSvelteKitAppHtml(cwd, config) {
-  const files = Array.isArray(config?.files) ? config.files : ['src/app.html'];
-  for (const rel of files) {
-    if (rel.includes('*')) continue;
-    const normalized = rel.split(path.sep).join('/');
-    if (!normalized.endsWith('app.html')) continue;
-    const abs = path.join(cwd, normalized);
-    if (fs.existsSync(abs)) return normalized;
-  }
-  const fallback = 'src/app.html';
-  return fs.existsSync(path.join(cwd, fallback)) ? fallback : null;
-}
-
-function findSvelteKitLayout(cwd) {
-  const candidates = [
-    'src/routes/+layout.svelte',
-    'src/routes/(app)/+layout.svelte',
-  ];
-  for (const rel of candidates) {
-    if (fs.existsSync(path.join(cwd, rel))) return rel;
-  }
-  return 'src/routes/+layout.svelte';
-}
-
-function defaultSvelteLayout() {
-  return `<script>\n  let { children } = $props();\n</script>\n\n{@render children?.()}\n`;
-}
-
-function packageHasSvelteKit(cwd) {
-  const file = path.join(cwd, 'package.json');
-  if (!fs.existsSync(file)) return false;
-  try {
-    const pkg = JSON.parse(fs.readFileSync(file, 'utf-8'));
-    const deps = {
-      ...(pkg.dependencies || {}),
-      ...(pkg.devDependencies || {}),
-      ...(pkg.peerDependencies || {}),
-    };
-    return Boolean(deps['@sveltejs/kit'] || deps['@sveltejs/vite-plugin-svelte'] || deps.svelte);
-  } catch {
-    return false;
-  }
-}
-
-function fileIncludes(file, text) {
-  try {
-    return fs.readFileSync(file, 'utf-8').includes(text);
-  } catch {
-    return false;
-  }
-}
-
-function pruneEmptyDir(dir, stopDir) {
-  let current = dir;
-  while (current.startsWith(stopDir) && current !== stopDir) {
-    try {
-      if (fs.readdirSync(current).length > 0) return;
-      fs.rmdirSync(current);
-      current = path.dirname(current);
-    } catch {
-      return;
-    }
-  }
-}
-
-function escapeRegExp(value) {
-  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}

package/template/skills/impeccable/scripts/live/ui-core.mjs

@@ -1,180 +0,0 @@
-/**
- * Framework-neutral Impeccable live chrome contract.
- *
- * The production browser bundle is intentionally plain DOM so Svelte, React,
- * Vue, and static adapters can all mount the same chrome. This module is the
- * testable contract/inventory for that bundle; live-browser.js mirrors these
- * values at runtime because it is served as a standalone script.
- */
-
-export const LIVE_CHROME_MOUNT_CONTRACT = Object.freeze([
-  'root',
-  'transport',
-  'state',
-  'actions',
-]);
-
-export const LIVE_UI_SURFACES = Object.freeze([
-  {
-    key: 'global-bottom-bar',
-    ids: [
-      'impeccable-live-global-bar',
-      'impeccable-live-global-bar-brand',
-      'impeccable-live-pick-toggle',
-      'impeccable-live-insert-toggle',
-      'impeccable-live-detect-toggle',
-      'impeccable-live-detect-badge',
-      'impeccable-live-design-toggle',
-      'impeccable-live-page-chat',
-      'impeccable-live-page-chat-input',
-      'impeccable-live-page-chat-voice',
-    ],
-    states: ['rest', 'hover', 'focus-visible', 'pressed', 'active', 'tooltip'],
-  },
-  {
-    key: 'pending-copy-edit-dock',
-    ids: ['impeccable-live-pending-dock'],
-    states: ['closed', 'open', 'hover', 'pressed', 'loading', 'rollback', 'keep-fixing'],
-  },
-  {
-    key: 'element-selection-chrome',
-    ids: [
-      'impeccable-live-highlight',
-      'impeccable-live-tooltip',
-      'impeccable-live-bar',
-      'impeccable-live-selection-pill',
-      'impeccable-live-input',
-      'impeccable-live-configure-voice',
-      'impeccable-live-configure-bar-tooltip',
-    ],
-    states: ['rest', 'hover', 'focus-visible', 'pressed', 'disabled'],
-  },
-  {
-    key: 'action-picker',
-    ids: ['impeccable-live-picker'],
-    states: ['closed', 'open', 'option-hover', 'option-focus'],
-  },
-  {
-    key: 'edit-chrome',
-    ids: ['impeccable-live-edit-badge'],
-    states: ['enabled', 'disabled', 'editing', 'cancel', 'save', 'edited-content'],
-  },
-  {
-    key: 'generating-row',
-    ids: ['impeccable-live-bar', 'impeccable-live-shader'],
-    states: ['action-label', 'animated-dots', 'generating', 'done'],
-  },
-  {
-    key: 'variant-cycling-row',
-    ids: ['impeccable-live-bar', 'impeccable-live-params-panel'],
-    states: ['variant-1', 'variant-2', 'variant-3', 'left-disabled', 'right-disabled', 'dot-click', 'accept', 'discard'],
-  },
-  {
-    key: 'variant-params-panel',
-    ids: ['impeccable-live-params-panel'],
-    states: ['closed', 'open-above', 'open-below', 'range', 'steps', 'toggle'],
-  },
-  {
-    key: 'saving-confirmed-rows',
-    ids: ['impeccable-live-bar'],
-    states: ['saving', 'applying-variant', 'confirmed'],
-  },
-  {
-    key: 'insert-mode-chrome',
-    ids: [
-      'impeccable-live-insert-line',
-      'impeccable-live-insert-placeholder',
-      'impeccable-live-placeholder-resize',
-      'impeccable-live-insert-input',
-      'impeccable-live-insert-voice',
-      'impeccable-live-insert-create',
-      'impeccable-live-insert-create-tooltip',
-    ],
-    states: ['toggle-active', 'line', 'placeholder', 'resize', 'enabled', 'disabled', 'tooltip'],
-  },
-  {
-    key: 'annotation-chrome',
-    ids: [
-      'impeccable-live-annot',
-      'impeccable-live-annot-svg',
-      'impeccable-live-annot-pins',
-      'impeccable-live-annot-clear',
-    ],
-    states: ['overlay', 'drawing', 'pin', 'pin-edit', 'clear'],
-  },
-  {
-    key: 'design-system-panel',
-    ids: ['impeccable-live-design-host'],
-    states: ['closed', 'open', 'tabs', 'token-tiles', 'copy'],
-  },
-  {
-    key: 'toasts-and-errors',
-    ids: ['impeccable-live-toast'],
-    states: ['normal', 'error', 'no-variants-mounted'],
-  },
-  {
-    key: 'css-isolation-boundary',
-    ids: ['impeccable-live-root'],
-    states: ['shadow-root', 'style-tags', 'hostile-css'],
-  },
-]);
-
-export const LIVE_UI_COMPONENT_IDS = Object.freeze([
-  ...new Set(LIVE_UI_SURFACES.flatMap((surface) => surface.ids)),
-]);
-
-export function resolveLiveUiRoot(env = globalThis) {
-  const doc = env?.document;
-  const explicit = env?.__IMPECCABLE_LIVE_UI_ROOT__
-    || env?.window?.__IMPECCABLE_LIVE_UI_ROOT__;
-  if (explicit && typeof explicit.appendChild === 'function') return explicit;
-  return doc?.body || null;
-}
-
-export function getLiveUiElementById(id, env = globalThis) {
-  const doc = env?.document;
-  const root = resolveLiveUiRoot(env);
-  if (!id) return null;
-  if (root?.getElementById) {
-    const found = root.getElementById(id);
-    if (found) return found;
-  }
-  if (root?.querySelector) {
-    const found = root.querySelector('#' + escapeCssIdent(id));
-    if (found) return found;
-  }
-  return doc?.getElementById?.(id) || null;
-}
-
-export function appendToLiveUiRoot(el, env = globalThis) {
-  const root = resolveLiveUiRoot(env);
-  if (!root) throw new Error('Impeccable live UI root is not available');
-  root.appendChild(el);
-  return el;
-}
-
-export function appendStyleToLiveUiRoot(styleEl, env = globalThis) {
-  const doc = env?.document;
-  const root = resolveLiveUiRoot(env);
-  if (root && root !== doc?.body) {
-    root.appendChild(styleEl);
-  } else {
-    (doc?.head || doc?.body || root).appendChild(styleEl);
-  }
-  return styleEl;
-}
-
-export function activeElementDeep(doc = globalThis.document) {
-  let active = doc?.activeElement || null;
-  while (active?.shadowRoot?.activeElement) {
-    active = active.shadowRoot.activeElement;
-  }
-  return active;
-}
-
-function escapeCssIdent(value) {
-  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
-    return CSS.escape(String(value));
-  }
-  return String(value).replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
-}

package/template/skills/impeccable/scripts/live/vocabulary.mjs

@@ -1,36 +0,0 @@
-/**
- * Canonical design-command vocabulary for Live Mode: each command's value, human
- * label, and SVG icon. Icons stack above the chip label; strokes use currentColor
- * so the icon recolors when its chip is selected.
- *
- * Single source of truth, consumed by:
- *   - skill/scripts/live/event-validation.mjs — re-exports VISUAL_ACTIONS.
- *   - skill/scripts/live-browser.js — the real picker. It is served raw and
- *     injected as an IIFE, so it cannot import this at runtime; live-server.mjs
- *     serializes LIVE_COMMANDS into window.__IMPECCABLE_VOCAB__ alongside the
- *     token/port, and live-browser.js builds its ICONS + ACTIONS from that.
- *   - site/components/LiveDemoPalette.astro — the marketing demo palette (imported
- *     at build time).
- *
- * Add, rename, or reorder a verb here and all three follow.
- */
-
-const ICON_ATTRS = 'width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="display:block"';
-
-export const LIVE_COMMANDS = [
-  { value: 'impeccable', label: 'Freeform',  icon: `<svg ${ICON_ATTRS}><path d="M4 20l4-1L18 9l-3-3L5 16z"/><path d="M14 7l3 3"/></svg>` },
-  { value: 'bolder',     label: 'Bolder',    icon: `<svg ${ICON_ATTRS}><rect x="6" y="12" width="4" height="7" rx="0.5"/><rect x="14" y="5" width="4" height="14" rx="0.5"/></svg>` },
-  { value: 'quieter',    label: 'Quieter',   icon: `<svg ${ICON_ATTRS}><rect x="6" y="5" width="4" height="14" rx="0.5"/><rect x="14" y="12" width="4" height="7" rx="0.5"/></svg>` },
-  { value: 'distill',    label: 'Distill',   icon: `<svg ${ICON_ATTRS}><path d="M4 5h16l-6 8v7l-4-2v-5z"/></svg>` },
-  { value: 'polish',     label: 'Polish',    icon: `<svg ${ICON_ATTRS}><path d="M15 3l1 3 3 1-3 1-1 3-1-3-3-1 3-1z"/><path d="M7 13l0.6 1.8 1.8 0.6-1.8 0.6-0.6 1.8-0.6-1.8-1.8-0.6 1.8-0.6z"/></svg>` },
-  { value: 'typeset',    label: 'Typeset',   icon: `<svg ${ICON_ATTRS}><path d="M5 6h14" stroke-width="2.6"/><path d="M5 12h9" stroke-width="1.9"/><path d="M5 18h5" stroke-width="1.3"/></svg>` },
-  { value: 'colorize',   label: 'Colorize',  icon: `<svg ${ICON_ATTRS}><circle cx="9" cy="10" r="5"/><circle cx="15" cy="10" r="5"/><circle cx="12" cy="15" r="5"/></svg>` },
-  { value: 'layout',     label: 'Layout',    icon: `<svg ${ICON_ATTRS}><rect x="3" y="4" width="8" height="16" rx="0.5"/><rect x="13" y="4" width="8" height="7" rx="0.5"/><rect x="13" y="13" width="8" height="7" rx="0.5"/></svg>` },
-  { value: 'adapt',      label: 'Adapt',     icon: `<svg ${ICON_ATTRS}><rect x="2.5" y="5" width="12" height="11" rx="1"/><line x1="2.5" y1="19" x2="14.5" y2="19"/><rect x="16.5" y="8" width="5" height="11" rx="1"/></svg>` },
-  { value: 'animate',    label: 'Animate',   icon: `<svg ${ICON_ATTRS}><path d="M3 18c4-4 6-10 10-10"/><path d="M13 8c3 0 5 5 8 10"/><circle cx="13" cy="8" r="1.6" fill="currentColor" stroke="none"/></svg>` },
-  { value: 'delight',    label: 'Delight',   icon: `<svg ${ICON_ATTRS}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>` },
-  { value: 'overdrive',  label: 'Overdrive', icon: `<svg ${ICON_ATTRS}><path d="M13 3L5 13h5l-1 8 9-12h-6z"/></svg>` },
-];
-
-// Action values accepted by the live event protocol, in palette order.
-export const VISUAL_ACTIONS = LIVE_COMMANDS.map((c) => c.value);