Initial import: open-design source for helix-mind.ai distribution

This repository contains the open-design daemon CLI source code, built and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use by the HelixMind /design slash command. Licenses: Apache-2.0 (root) + MIT (skills/*)
2026-05-06 20:50:24 +02:00
commit 5dd70b5016
1336 changed files with 287186 additions and 0 deletions
--- a/apps/web/tests/edit-mode/bridge.test.ts
+++ b/apps/web/tests/edit-mode/bridge.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { JSDOM } from 'jsdom';
+import {
+  buildManualEditBridge,
+  isMeaningfulManualEditElement,
+  isManualEditHostNode,
+  isSourceMappableManualEditElement,
+  manualEditDomPathForElement,
+  manualEditStableIdForElement,
+} from '../../src/edit-mode/bridge';
+
+describe('manual edit bridge target normalization', () => {
+  it('prefers explicit data-od-id over generated ids', () => {
+    const dom = new JSDOM('<main><h1 data-od-id="hero">Title</h1></main>');
+    const target = dom.window.document.querySelector('h1')!;
+
+    expect(manualEditStableIdForElement(target)).toBe('hero');
+    expect(target.getAttribute('data-od-runtime-id')).toBeNull();
+  });
+
+  it('generates stable DOM path ids for unannotated elements', () => {
+    const dom = new JSDOM('<main><section><p>First</p><p>Second</p></section></main>');
+    const target = dom.window.document.querySelectorAll('p')[1]!;
+
+    expect(manualEditDomPathForElement(target)).toBe('path-0-0-1');
+    expect(manualEditStableIdForElement(target)).toBe('path-0-0-1');
+    expect(manualEditStableIdForElement(target)).toBe('path-0-0-1');
+    expect(target.getAttribute('data-od-runtime-id')).toBe('path-0-0-1');
+  });
+
+  it('generates DOM path ids against source-shaped children, ignoring host shim nodes', () => {
+    const dom = new JSDOM(
+      '<script data-od-sandbox-shim></script><main><section><p>First</p><p>Second</p></section></main><script data-od-edit-bridge></script>',
+    );
+    const target = dom.window.document.querySelectorAll('p')[1]!;
+
+    expect(isManualEditHostNode(dom.window.document.querySelector('[data-od-sandbox-shim]')!)).toBe(true);
+    expect(manualEditDomPathForElement(target)).toBe('path-0-0-1');
+  });
+
+  it('discovers meaningful elements and ignores tiny or irrelevant elements', () => {
+    const dom = new JSDOM('<main><h1 data-od-source-path="path-0-0">Title</h1><script>1</script></main>');
+    const title = dom.window.document.querySelector('h1')!;
+    const script = dom.window.document.querySelector('script')!;
+
+    expect(isMeaningfulManualEditElement(title, { width: 80, height: 24 })).toBe(true);
+    expect(isMeaningfulManualEditElement(title, { width: 3, height: 24 })).toBe(false);
+    expect(isMeaningfulManualEditElement(script, { width: 80, height: 24 })).toBe(false);
+  });
+
+  it('does not expose path targets unless they carry a source path marker', () => {
+    const dom = new JSDOM('<main><h1>Runtime title</h1><p data-od-source-path="path-0-1">Source text</p></main>');
+    const runtimeTitle = dom.window.document.querySelector('h1')!;
+    const sourceText = dom.window.document.querySelector('p')!;
+
+    expect(isSourceMappableManualEditElement(runtimeTitle)).toBe(false);
+    expect(isSourceMappableManualEditElement(sourceText)).toBe(true);
+    expect(isMeaningfulManualEditElement(runtimeTitle, { width: 80, height: 24 })).toBe(false);
+  });
+
+  it('omits selected outerHTML from bulk target posts but includes it for selected targets', () => {
+    const bridge = buildManualEditBridge(true);
+
+    expect(bridge).toContain('targets.push(targetFrom(nodes[i], false))');
+    expect(bridge).toContain("target: targetFrom(el, true)");
+    expect(bridge).toContain('if (!isSourceMappable(nodes[i])) continue;');
+    expect(bridge).toContain('if (isPrimaryTarget(el)) return el;');
+  });
+});
--- a/apps/web/tests/edit-mode/source-patches.test.ts
+++ b/apps/web/tests/edit-mode/source-patches.test.ts
@@ -0,0 +1,188 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { JSDOM } from 'jsdom';
+import {
+  applyManualEditPatch,
+  readManualEditAttributes,
+  readManualEditFields,
+  readManualEditOuterHtml,
+  readManualEditStyles,
+} from '../../src/edit-mode/source-patches';
+
+const baseSource = `<!doctype html>
+<html>
+  <head>
+    <style>:root { --brand: #111; }</style>
+  </head>
+  <body>
+    <main>
+      <h1 data-od-id="hero-title">Original title</h1>
+      <a data-od-id="cta" href="/start">Start</a>
+      <button data-od-id="button-cta">Start button</button>
+      <a data-od-id="nested-cta" href="/nested"><span>Buy now</span><svg viewBox="0 0 1 1"></svg></a>
+      <img data-od-id="hero-image" src="/old.png" alt="Old image">
+      <section data-od-id="card" class="hero" style="color: red; padding: 8px;" data-keep="yes">Card</section>
+      <p data-od-id="nested"><strong>Nested</strong> copy</p>
+      <p>Generated path text</p>
+    </main>
+  </body>
+</html>`;
+
+describe('manual edit source patches', () => {
+  beforeEach(() => {
+    const dom = new JSDOM('');
+    globalThis.DOMParser = dom.window.DOMParser;
+    globalThis.CSS = { escape: (value: string) => value.replace(/"/g, '\\"') } as typeof CSS;
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(globalThis, 'DOMParser');
+    Reflect.deleteProperty(globalThis, 'CSS');
+  });
+
+  it('updates only the selected text target', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-text', id: 'hero-title', value: 'Edited title' });
+
+    expect(result.ok).toBe(true);
+    expect(readManualEditFields(result.source, 'hero-title').text).toBe('Edited title');
+    expect(readManualEditFields(result.source, 'cta').text).toBe('Start');
+  });
+
+  it('updates link label and href', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-link', id: 'cta', text: 'Buy now', href: '/buy' });
+
+    expect(result.ok).toBe(true);
+    expect(readManualEditFields(result.source, 'cta')).toEqual({ text: 'Buy now', href: '/buy' });
+  });
+
+  it('treats buttons as label-only text targets instead of persisting href attributes', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-text', id: 'button-cta', value: 'Buy button' });
+
+    expect(result.ok).toBe(true);
+    const html = readManualEditOuterHtml(result.source, 'button-cta');
+    expect(html).toContain('Buy button');
+    expect(html).not.toContain('href=');
+    expect(readManualEditFields(result.source, 'button-cta')).toEqual({ text: 'Buy button' });
+  });
+
+  it('preserves nested link markup when only href changes', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-link', id: 'nested-cta', text: 'Buy now', href: '/buy' });
+
+    expect(result.ok).toBe(true);
+    const html = readManualEditOuterHtml(result.source, 'nested-cta');
+    expect(html).toContain('href="/buy"');
+    expect(html).toContain('<span>Buy now</span>');
+    expect(html).toContain('<svg');
+  });
+
+  it('rejects label edits for links with nested markup', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-link', id: 'nested-cta', text: 'Purchase', href: '/buy' });
+
+    expect(result.ok).toBe(false);
+    expect(result.error).toContain('nested markup');
+  });
+
+  it('updates image src and alt', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-image', id: 'hero-image', src: '/new.png', alt: 'New image' });
+
+    expect(result.ok).toBe(true);
+    expect(readManualEditFields(result.source, 'hero-image')).toEqual({ src: '/new.png', alt: 'New image' });
+  });
+
+  it('adds and removes inline style properties', () => {
+    const result = applyManualEditPatch(baseSource, {
+      kind: 'set-style',
+      id: 'card',
+      styles: { color: '', backgroundColor: 'blue', fontSize: '24px' },
+    });
+
+    expect(result.ok).toBe(true);
+    const styles = readManualEditStyles(result.source, 'card');
+    expect(styles.color).toBe('');
+    expect(styles.backgroundColor).toBe('blue');
+    expect(styles.fontSize).toBe('24px');
+    expect(styles.padding).toBe('8px');
+  });
+
+  it('applies attributes additively and preserves class/style unless explicitly updated', () => {
+    const result = applyManualEditPatch(baseSource, {
+      kind: 'set-attributes',
+      id: 'card',
+      attributes: { 'aria-label': 'Hero card', 'data-empty': '', 'data-od-id': 'blocked' },
+    });
+
+    expect(result.ok).toBe(true);
+    const attrs = readManualEditAttributes(result.source, 'card');
+    expect(attrs['aria-label']).toBe('Hero card');
+    expect(attrs.class).toBe('hero');
+    expect(attrs.style).toContain('color: red');
+    expect(attrs['data-od-id']).toBe('card');
+    expect(attrs['data-empty']).toBeUndefined();
+  });
+
+  it('preserves data-od-id when selected outerHTML omits it', () => {
+    const result = applyManualEditPatch(baseSource, {
+      kind: 'set-outer-html',
+      id: 'card',
+      html: '<section class="replacement">Replaced</section>',
+    });
+
+    expect(result.ok).toBe(true);
+    const html = readManualEditOuterHtml(result.source, 'card');
+    expect(html).toContain('data-od-id="card"');
+    expect(html).toContain('class="replacement"');
+  });
+
+  it('replaces full source for snapshot-based undo history', () => {
+    const source = '<!doctype html><html><body><h1 data-od-id="hero-title">Snapshot</h1></body></html>';
+    const result = applyManualEditPatch(baseSource, { kind: 'set-full-source', source });
+
+    expect(result).toEqual({ ok: true, source });
+  });
+
+  it('updates CSS tokens in style tags', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-token', token: '--brand', value: '#f00' });
+
+    expect(result.ok).toBe(true);
+    expect(result.source).toContain('--brand: #f00;');
+  });
+
+  it('preserves fragment-shaped HTML when saving patches', () => {
+    const source = '<main><h1 data-od-id="hero-title">Original title</h1></main>';
+    const result = applyManualEditPatch(source, { kind: 'set-text', id: 'hero-title', value: 'Edited title' });
+
+    expect(result.ok).toBe(true);
+    expect(result.source).toBe('<main><h1 data-od-id="hero-title">Edited title</h1></main>');
+    expect(result.source).not.toContain('<!doctype');
+    expect(result.source).not.toContain('<html');
+    expect(result.source).not.toContain('<body');
+  });
+
+  it('preserves full documents with leading comments when saving patches', () => {
+    const source = [
+      '<!-- generated by open design -->',
+      '<!doctype html><html><head><style>:root { --brand: #111; }</style></head>',
+      '<body><main><h1 data-od-id="hero-title">Original title</h1></main></body></html>',
+    ].join('\n');
+    const result = applyManualEditPatch(source, { kind: 'set-text', id: 'hero-title', value: 'Edited title' });
+
+    expect(result.ok).toBe(true);
+    expect(result.source).toContain('<!doctype html>');
+    expect(result.source).toContain('<html>');
+    expect(result.source).toContain('<head><style>:root { --brand: #111; }</style></head>');
+    expect(result.source).toContain('<h1 data-od-id="hero-title">Edited title</h1>');
+  });
+
+  it('addresses unannotated elements with generated DOM path ids', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-text', id: 'path-0-7', value: 'Path target' });
+
+    expect(result.ok).toBe(true);
+    expect(result.source).toContain('Path target');
+  });
+
+  it('rejects text patches for nested markup', () => {
+    const result = applyManualEditPatch(baseSource, { kind: 'set-text', id: 'nested', value: 'Flat text' });
+
+    expect(result.ok).toBe(false);
+    expect(result.error).toContain('nested markup');
+  });
+});