Initial WFreeCAD static space

README.md

@@ -1,10 +1,57 @@
 ---
 title: WFreeCAD
-emoji: 🐠
-colorFrom: indigo
-colorTo: pink
+emoji: ⚙️
+colorFrom: yellow
+colorTo: red
 sdk: static
 pinned: false
+short_description: A tiny in-browser FreeCAD Part studio
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# WFreeCAD
+
+A tiny, static, in-browser FreeCAD Python playground. Pick a Part macro, orbit the result, edit the code, and run it again.
+
+- Four instant examples: a spur gear, a desktop computer, a rocket, and a mug.
+- Upload any `.py` macro that uses the supported `FreeCAD` / `Part` subset.
+- Live execution happens locally in a Pyodide Web Worker; nothing is sent to a server.
+- Results are rendered with Three.js and `three-bvh-csg`, with soft shadows and an optional edge overlay.
+
+## How it works
+
+Example scenes are precomputed with `cadshim.py` under CPython and stored as `scenes/*.json`, so the examples render immediately without downloading Python. Uploaded macros are executed by Pyodide in `worker.js`, serialized into the same scene JSON format, and displayed by `viewer.js`.
+
+The shim supports a practical subset of FreeCAD's Part API:
+
+- `FreeCAD.Vector`, `Rotation`, `Placement`, and `ActiveDocument`
+- `Part.makeBox`, `makeCylinder`, `makeSphere`, `makeCone`, `makeTorus`, `makePolygon`
+- `Part.Face`, `Shape.extrude`, `Shape.cut`, `Shape.fuse`, `Shape.common`
+- `Part.show`, `ViewObject.ShapeColor`, and `ViewObject.Transparency`
+
+It is intentionally not a full FreeCAD distribution. Unsupported API calls return a clear error in the preview panel.
+
+## Local development
+
+```bash
+cd wfreecad
+python3 -m http.server 8123
+```
+
+Open <http://127.0.0.1:8123/>.
+
+Examples are generated by:
+
+```bash
+python3 tools/build_scenes.py
+```
+
+Thumbnails are rendered from `tools/thumb.html` through the same Three.js viewer, so their materials and lighting match the main preview.
+
+## Stack
+
+- [Three.js](https://threejs.org/) + [three-bvh-csg](https://github.com/gkjohnson/three-bvh-csg)
+- [Pyodide](https://pyodide.org/)
+- [CodeMirror 5](https://codemirror.net/5/)
+- Custom FreeCAD Part shim and static scene format
+
+No backend, database, or build step is required at runtime.

app.js

@@ -0,0 +1,765 @@
+import { createViewer } from './viewer.js';
+
+const DEFAULT_VIEW = [0.86, -1.35, 0.98];
+const MAX_FILE_BYTES = 512 * 1024;
+
+const byId = (id) => document.getElementById(id);
+const els = {
+  runtime: byId('runtime'),
+  runtimeText: byId('runtimeText'),
+  loadBtn: byId('loadBtn'),
+  fileInput: byId('fileInput'),
+  exampleList: byId('exampleList'),
+  exampleCount: byId('exampleCount'),
+  fileName: byId('fileName'),
+  fileState: byId('fileState'),
+  revertBtn: byId('revertBtn'),
+  runBtn: byId('runBtn'),
+  editorWrap: byId('editorWrap'),
+  cursorInfo: byId('cursorInfo'),
+  objectCount: byId('objectCount'),
+  autoBtn: byId('autoBtn'),
+  resetBtn: byId('resetBtn'),
+  canvasWrap: byId('canvasWrap'),
+  view: byId('view'),
+  canvasHint: byId('canvasHint'),
+  loadingState: byId('loadingState'),
+  loadingText: byId('loadingText'),
+  emptyState: byId('emptyState'),
+  emptyHint: byId('emptyHint'),
+  errorState: byId('errorState'),
+  errorText: byId('errorText'),
+  dismissError: byId('dismissError'),
+  toast: byId('toast'),
+  dropOverlay: byId('dropOverlay'),
+};
+
+const state = {
+  examples: [],
+  current: null,
+  mode: 'example',
+  source: '',
+  fileName: '未命名.py',
+  dirty: false,
+  scene: null,
+  sceneSource: '',
+  busy: false,
+  pendingRun: null,
+  uiSeq: 0,
+  cm: null,
+  viewer: null,
+  toastTimer: null,
+  hintTimer: null,
+};
+
+const RUNTIME_LABELS = {
+  idle: 'Python 待命',
+  loading: 'Python 載入中',
+  ready: 'Python 就緒',
+  busy: 'Python 執行中',
+  error: 'Python 離線',
+};
+
+class PythonRuntime {
+  constructor() {
+    this.worker = null;
+    this.ready = false;
+    this.failed = false;
+    this.shim = null;
+    this.initPromise = null;
+    this.seq = 0;
+    this.pending = new Map();
+    this.onState = () => {};
+    this.lastError = '';
+    this._readyResolve = null;
+    this._readyReject = null;
+    this._initTimer = null;
+  }
+
+  setState(name, detail = '') {
+    this.state = name;
+    this.onState(name, detail);
+  }
+
+  async loadShim() {
+    if (this.shim) return this.shim;
+    const response = await fetch('cadshim.py', { cache: 'no-cache' });
+    if (!response.ok) {
+      throw new Error(`無法載入 Python shim（HTTP ${response.status}）`);
+    }
+    const text = await response.text();
+    if (!text.includes('__wfcad_runtime')) {
+      throw new Error('Python shim 內容不正確');
+    }
+    this.shim = text;
+    return text;
+  }
+
+  preload() {
+    this.ensure().catch(() => {});
+  }
+
+  async ensure() {
+    if (this.ready && this.worker) return;
+    if (this.initPromise) return this.initPromise;
+    this.initPromise = this.boot();
+    try {
+      await this.initPromise;
+    } catch (error) {
+      if (this.initPromise === null) throw error;
+      this.initPromise = null;
+      throw error;
+    }
+  }
+
+  async boot() {
+    this.setState('loading');
+    let shim;
+    try {
+      shim = await this.loadShim();
+    } catch (error) {
+      this.fail(error);
+      throw error;
+    }
+
+    let worker;
+    try {
+      worker = new Worker('worker.js');
+    } catch (error) {
+      this.fail(error);
+      throw error;
+    }
+    this.worker = worker;
+    worker.onmessage = (event) => this.handleMessage(event.data);
+    worker.onerror = (event) => {
+      this.fail(event.message || 'Python worker 發生錯誤');
+    };
+
+    const ready = new Promise((resolve, reject) => {
+      this._readyResolve = resolve;
+      this._readyReject = reject;
+    });
+
+    this._initTimer = setTimeout(() => {
+      this.fail('Python 執行環境載入逾時，請檢查網路後重試。');
+    }, 90000);
+
+    worker.postMessage({ type: 'init', shim });
+    await ready;
+  }
+
+  handleMessage(message) {
+    if (!message) return;
+    if (message.type === 'ready') {
+      if (this._initTimer) {
+        clearTimeout(this._initTimer);
+        this._initTimer = null;
+      }
+      this.ready = true;
+      this.failed = false;
+      this.setState('ready');
+      const resolve = this._readyResolve;
+      this._readyResolve = null;
+      this._readyReject = null;
+      if (resolve) resolve();
+      return;
+    }
+    if (message.type === 'fatal') {
+      this.fail(message.error || 'Python 執行環境發生錯誤');
+      return;
+    }
+    if (message.type === 'result' || message.type === 'error') {
+      const pending = this.pending.get(message.id);
+      if (!pending) return;
+      this.pending.delete(message.id);
+      if (message.type === 'result') {
+        pending.resolve(message.result);
+      } else {
+        pending.reject(new Error(message.error || 'Python 執行失敗'));
+      }
+    }
+  }
+
+  fail(error) {
+    const reason = error instanceof Error ? error.message : String(error || 'Python 執行環境發生錯誤');
+    this.lastError = reason;
+    this.ready = false;
+    this.failed = true;
+    if (this._initTimer) {
+      clearTimeout(this._initTimer);
+      this._initTimer = null;
+    }
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+    }
+    this.initPromise = null;
+    const rejectReady = this._readyReject;
+    this._readyResolve = null;
+    this._readyReject = null;
+    if (rejectReady) rejectReady(new Error(reason));
+    for (const pending of [...this.pending.values()]) {
+      pending.reject(new Error(reason));
+    }
+    this.pending.clear();
+    this.setState('error', reason);
+  }
+
+  async run(code) {
+    await this.ensure();
+    if (!this.worker) throw new Error('Python 執行環境不在線');
+    this.setState('busy');
+    const id = ++this.seq;
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.pending.delete(id);
+        this.restart();
+        reject(new Error('執行逾時。程式可能進入了無窮迴圈，已停止執行。'));
+      }, 20000);
+      this.pending.set(id, {
+        resolve: (value) => {
+          clearTimeout(timer);
+          this.finishRun();
+          resolve(value);
+        },
+        reject: (error) => {
+          clearTimeout(timer);
+          this.finishRun();
+          reject(error);
+        },
+      });
+      this.worker.postMessage({ type: 'run', id, code });
+    });
+  }
+
+  finishRun() {
+    if (this.ready) {
+      this.setState('ready');
+    } else if (this.failed) {
+      this.setState('error', this.lastError);
+    }
+  }
+
+  restart() {
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+    }
+    this.ready = false;
+    this.failed = false;
+    this.initPromise = null;
+    this.pending.clear();
+    this.setState('idle');
+  }
+}
+
+const runtime = new PythonRuntime();
+runtime.onState = (name, detail) => {
+  els.runtime.dataset.state = name;
+  els.runtimeText.textContent = RUNTIME_LABELS[name] || 'Python';
+  if (name === 'error') {
+    els.runtime.title = detail || 'Python 執行環境無法載入';
+  } else {
+    els.runtime.title = 'Python 執行環境';
+  }
+};
+
+// --------------------------------------------------------------------------
+// small helpers
+// --------------------------------------------------------------------------
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, (char) => {
+    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return map[char];
+  });
+}
+
+function cleanError(value) {
+  let text = value instanceof Error ? value.stack || value.message : String(value || '未知錯誤');
+  text = text.replace(/\u001b\[[0-9;]*m/g, '').trim();
+  if (text.length > 7000) text = `${text.slice(0, 7000)}\n…`;
+  return text || '未知錯誤';
+}
+
+function toast(message, tone = 'info') {
+  els.toast.textContent = message;
+  els.toast.dataset.tone = tone;
+  els.toast.hidden = false;
+  if (state.toastTimer) clearTimeout(state.toastTimer);
+  state.toastTimer = setTimeout(() => {
+    els.toast.hidden = true;
+    state.toastTimer = null;
+  }, tone === 'error' ? 4200 : 2800);
+}
+
+function showLoading(text) {
+  if (text) els.loadingText.textContent = text;
+  els.loadingState.hidden = false;
+  els.emptyState.hidden = true;
+  els.errorState.hidden = true;
+}
+
+function showError(message) {
+  els.errorText.textContent = cleanError(message);
+  els.errorState.hidden = false;
+  els.loadingState.hidden = true;
+  els.emptyState.hidden = true;
+  els.canvasHint.classList.add('is-hidden');
+  els.fileState.textContent = '錯誤';
+  els.fileState.dataset.state = 'error';
+}
+
+function hideError() {
+  if (!els.errorState.hidden) {
+    els.errorState.hidden = true;
+    updateFileUI();
+  }
+}
+
+function updateCursor() {
+  if (!state.cm) return;
+  const cursor = state.cm.getCursor();
+  els.cursorInfo.textContent = `Ln ${cursor.line + 1}, Col ${cursor.ch + 1}`;
+}
+
+function updateRunButton() {
+  els.runBtn.disabled = state.busy;
+  els.runBtn.setAttribute('aria-busy', String(state.busy));
+  els.runBtn.classList.toggle('is-busy', state.busy);
+}
+
+function updateFileUI() {
+  els.fileName.textContent = state.fileName || '未命名.py';
+  document.title = `${state.fileName || 'WFreeCAD'} · WFreeCAD`;
+  els.revertBtn.disabled = !(state.mode === 'example' && state.current);
+  els.revertBtn.title = els.revertBtn.disabled ? '只有範例可以還原' : '回到範例程式';
+
+  let label = '範例';
+  let kind = 'example';
+  if (state.mode === 'upload') {
+    label = state.dirty ? '已修改' : '已載入';
+    kind = state.dirty ? 'modified' : 'upload';
+  } else if (state.dirty) {
+    label = '已修改';
+    kind = 'modified';
+  }
+  els.fileState.textContent = label;
+  els.fileState.dataset.state = kind;
+}
+
+function updateActive(id) {
+  const cards = els.exampleList.querySelectorAll('.example-card');
+  for (const card of cards) {
+    const active = card.dataset.id === id;
+    card.classList.toggle('is-active', active);
+    if (active) {
+      card.setAttribute('aria-current', 'true');
+    } else {
+      card.removeAttribute('aria-current');
+    }
+  }
+}
+
+// --------------------------------------------------------------------------
+// editor
+// --------------------------------------------------------------------------
+
+function initEditor() {
+  state.cm = CodeMirror.fromTextArea(byId('editor'), {
+    mode: 'python',
+    lineNumbers: true,
+    indentUnit: 4,
+    tabSize: 4,
+    indentWithTabs: false,
+    lineWrapping: true,
+    matchBrackets: true,
+    autoCloseBrackets: true,
+    styleActiveLine: true,
+    viewportMargin: 40,
+    extraKeys: {
+      Tab: (editor) => {
+        if (editor.somethingSelected()) {
+          editor.indentSelection('add');
+        } else {
+          editor.replaceSelection('    ', 'end');
+        }
+      },
+    },
+  });
+  state.cm.setSize('100%', '100%');
+  state.cm.on('change', () => {
+    const value = state.cm.getValue();
+    state.dirty = value !== state.source;
+    updateFileUI();
+    updateCursor();
+    if (!els.errorState.hidden) hideError();
+  });
+  state.cm.on('cursorActivity', updateCursor);
+  state.cm.on('focus', () => runtime.preload());
+  requestAnimationFrame(() => state.cm.refresh());
+  updateCursor();
+}
+
+function setEditor(text, { mode, name } = {}) {
+  state.source = text;
+  if (mode) state.mode = mode;
+  if (name) state.fileName = name;
+  state.dirty = false;
+  state.cm.setValue(text || '');
+  state.cm.clearHistory();
+  state.cm.setCursor({ line: 0, ch: 0 });
+  updateFileUI();
+  updateCursor();
+  requestAnimationFrame(() => state.cm.refresh());
+}
+
+// --------------------------------------------------------------------------
+// preview
+// --------------------------------------------------------------------------
+
+function showScene(scene, view) {
+  if (!scene) {
+    showError('沒有可顯示的場景');
+    return { objects: 0, skipped: 0 };
+  }
+  const stats = state.viewer.setScene(scene, view || DEFAULT_VIEW);
+  els.objectCount.textContent = `${stats.objects} 個物件`;
+  els.loadingState.hidden = true;
+  els.errorState.hidden = true;
+  if (stats.objects === 0) {
+    els.emptyState.hidden = false;
+    if (stats.skipped > 0) {
+      els.emptyHint.textContent = '場景中的幾何使用了尚未支援的 FreeCAD API';
+    } else {
+      els.emptyHint.innerHTML = '在程式裡呼叫 <code>Part.show(shape)</code>';
+    }
+  } else {
+    els.emptyState.hidden = true;
+  }
+  return stats;
+}
+
+function presentScene(scene, view, { notify = false } = {}) {
+  const stats = showScene(scene, view);
+  const errors = (scene && scene.errors) || [];
+  if (stats.objects === 0 && errors.length) {
+    showError(errors.join('\n'));
+  } else if (errors.length) {
+    toast(`有 ${errors.length} 個物件計算失敗`, 'error');
+  } else if (stats.objects === 0) {
+    // Empty state already visible.
+  } else if (stats.skipped > 0) {
+    toast(`已顯示 ${stats.objects} 個物件，${stats.skipped} 個未支援`, 'error');
+  } else if (notify) {
+    toast('執行完成');
+  }
+  return stats;
+}
+
+// --------------------------------------------------------------------------
+// examples
+// --------------------------------------------------------------------------
+
+async function loadExamples() {
+  const indexResponse = await fetch('examples/index.json', { cache: 'no-cache' });
+  if (!indexResponse.ok) {
+    throw new Error(`無法載入範例索引（HTTP ${indexResponse.status}）`);
+  }
+  const index = await indexResponse.json();
+  const examples = await Promise.all(
+    index.map(async (item) => {
+      const [codeResponse, sceneResponse] = await Promise.all([
+        fetch(`examples/${item.code}`, { cache: 'no-cache' }),
+        fetch(`scenes/${item.scene}`, { cache: 'no-cache' }),
+      ]);
+      if (!codeResponse.ok || !sceneResponse.ok) {
+        throw new Error(`無法載入 ${item.id} 的範例檔`);
+      }
+      return {
+        ...item,
+        codeText: await codeResponse.text(),
+        sceneData: await sceneResponse.json(),
+      };
+    }),
+  );
+  state.examples = examples;
+  els.exampleCount.textContent = String(examples.length).padStart(2, '0');
+  renderExamples();
+  return examples;
+}
+
+function renderExamples() {
+  els.exampleList.innerHTML = '';
+  const fragment = document.createDocumentFragment();
+  state.examples.forEach((item, index) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'example-card';
+    button.dataset.id = item.id;
+    button.innerHTML = `
+      <span class="example-thumb">
+        <img src="thumbs/${encodeURIComponent(item.thumb)}" alt="" loading="lazy" draggable="false">
+      </span>
+      <span class="example-meta">
+        <span class="example-title">${escapeHtml(item.title || item.id)}</span>
+        <span class="example-sub">${escapeHtml(item.subtitle || item.code)}</span>
+      </span>
+      <span class="example-index">${String(index + 1).padStart(2, '0')}</span>
+      <span class="example-chev" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m9 6 6 6-6 6"/>
+        </svg>
+      </span>
+    `;
+    button.addEventListener('click', () => loadExample(item));
+    fragment.appendChild(button);
+  });
+  els.exampleList.appendChild(fragment);
+}
+
+function loadExample(item, { initial = false } = {}) {
+  if (!item) return;
+  state.uiSeq += 1;
+  state.pendingRun = null;
+  state.current = item;
+  state.mode = 'example';
+  state.fileName = item.code;
+  state.source = item.codeText;
+  state.dirty = false;
+  state.scene = item.sceneData;
+  state.sceneSource = item.codeText;
+  setEditor(item.codeText, { mode: 'example', name: item.code });
+  updateActive(item.id);
+  hideError();
+  presentScene(item.sceneData, item.view);
+  if (initial) {
+    els.canvasHint.classList.remove('is-hidden');
+    if (state.hintTimer) clearTimeout(state.hintTimer);
+    state.hintTimer = setTimeout(() => els.canvasHint.classList.add('is-hidden'), 9000);
+  }
+}
+
+// --------------------------------------------------------------------------
+// running
+// --------------------------------------------------------------------------
+
+async function runCode(code) {
+  if (state.busy) {
+    state.pendingRun = { code };
+    toast('正在執行，完成後會接著執行');
+    return;
+  }
+  state.busy = true;
+  updateRunButton();
+  const uiSeq = state.uiSeq;
+  showLoading(runtime.ready ? '正在解析 Part 指令…' : 'Python 執行環境載入中…（首次約 10 MB）');
+  runtime.preload();
+  try {
+    const result = await runtime.run(code);
+    if (uiSeq !== state.uiSeq) return;
+    if (!result || !result.ok) {
+      showError((result && result.error) || '執行失敗');
+      return;
+    }
+    state.scene = result.scene;
+    state.sceneSource = code;
+    presentScene(result.scene, state.current ? state.current.view : DEFAULT_VIEW, { notify: true });
+  } catch (error) {
+    if (uiSeq !== state.uiSeq) return;
+    showError(error && error.message ? error.message : error);
+  } finally {
+    state.busy = false;
+    updateRunButton();
+    if (state.pendingRun) {
+      const pending = state.pendingRun;
+      state.pendingRun = null;
+      runCode(pending.code);
+    }
+  }
+}
+
+function requestRun(code) {
+  runtime.preload();
+  if (state.busy) {
+    state.pendingRun = { code };
+    toast('正在執行，完成後會接著執行');
+    return;
+  }
+  runCode(code);
+}
+
+function runCurrent() {
+  const code = state.cm.getValue();
+  if (state.mode === 'example' && state.current && !state.dirty && state.current.sceneData) {
+    state.uiSeq += 1;
+    presentScene(state.current.sceneData, state.current.view);
+    if (els.errorState.hidden) toast('已重新載入範例預覽');
+    return;
+  }
+  requestRun(code);
+}
+
+// --------------------------------------------------------------------------
+// files
+// --------------------------------------------------------------------------
+
+async function loadFile(file) {
+  if (!file) return;
+  if (!/\.(py|txt)$/i.test(file.name)) {
+    toast('請選擇 .py 檔', 'error');
+    return;
+  }
+  if (file.size > MAX_FILE_BYTES) {
+    toast('檔案太大（上限 512 KB）', 'error');
+    return;
+  }
+  try {
+    const text = await file.text();
+    state.uiSeq += 1;
+    state.pendingRun = null;
+    state.current = null;
+    state.mode = 'upload';
+    state.fileName = file.name;
+    state.source = text;
+    state.dirty = false;
+    state.scene = null;
+    state.sceneSource = '';
+    setEditor(text, { mode: 'upload', name: file.name });
+    updateActive(null);
+    hideError();
+    requestRun(text);
+  } catch (error) {
+    showError(error && error.message ? error.message : error);
+  }
+}
+
+// --------------------------------------------------------------------------
+// ui events
+// --------------------------------------------------------------------------
+
+function bindUI() {
+  els.loadBtn.addEventListener('click', () => {
+    runtime.preload();
+    els.fileInput.click();
+  });
+
+  els.fileInput.addEventListener('change', () => {
+    const file = els.fileInput.files && els.fileInput.files[0];
+    if (file) loadFile(file);
+    els.fileInput.value = '';
+  });
+
+  els.runBtn.addEventListener('click', runCurrent);
+
+  els.revertBtn.addEventListener('click', () => {
+    if (!state.current) return;
+    state.uiSeq += 1;
+    state.pendingRun = null;
+    loadExample(state.current);
+    toast('已回到範例程式');
+  });
+
+  els.dismissError.addEventListener('click', hideError);
+
+  els.autoBtn.addEventListener('click', () => {
+    const enabled = !state.viewer.isAutoRotate();
+    state.viewer.setAutoRotate(enabled);
+    els.autoBtn.classList.toggle('is-on', enabled);
+    els.autoBtn.setAttribute('aria-pressed', String(enabled));
+    els.autoBtn.title = enabled ? '自動旋轉' : '自動旋轉（已暫停）';
+  });
+
+  els.resetBtn.addEventListener('click', () => {
+    state.viewer.resetView();
+    els.canvasHint.classList.add('is-hidden');
+  });
+
+  els.view.addEventListener(
+    'pointerdown',
+    () => {
+      els.canvasHint.classList.add('is-hidden');
+    },
+    { once: true },
+  );
+
+  window.addEventListener('keydown', (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault();
+      runCurrent();
+    } else if (event.key === 'Escape') {
+      hideError();
+      els.dropOverlay.hidden = true;
+    }
+  });
+
+  let dragDepth = 0;
+  const hasFiles = (event) => {
+    const types = event.dataTransfer && event.dataTransfer.types;
+    return Boolean(types && Array.from(types).includes('Files'));
+  };
+  window.addEventListener('dragenter', (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    dragDepth += 1;
+    els.dropOverlay.hidden = false;
+  });
+  window.addEventListener('dragover', (event) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+  });
+  window.addEventListener('dragleave', (event) => {
+    if (!hasFiles(event)) return;
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) els.dropOverlay.hidden = true;
+  });
+  window.addEventListener('drop', (event) => {
+    event.preventDefault();
+    dragDepth = 0;
+    els.dropOverlay.hidden = true;
+    const file = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0];
+    if (file) loadFile(file);
+  });
+
+  let resizeTimer = null;
+  window.addEventListener('resize', () => {
+    if (resizeTimer) clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      if (state.cm) state.cm.refresh();
+    }, 120);
+  });
+}
+
+function schedulePreload() {
+  const connection =
+    navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+  if (connection && (connection.saveData || /2g/.test(connection.effectiveType || ''))) {
+    return;
+  }
+  setTimeout(() => runtime.preload(), 5000);
+}
+
+async function init() {
+  state.viewer = createViewer(els.view, { autoRotate: true });
+  initEditor();
+  bindUI();
+  updateFileUI();
+  showLoading('正在載入範例…');
+  try {
+    const examples = await loadExamples();
+    if (examples.length > 0) {
+      loadExample(examples[0], { initial: true });
+    } else {
+      showError('找不到任何範例。');
+    }
+  } catch (error) {
+    showError(error && error.message ? error.message : error);
+  }
+  schedulePreload();
+}
+
+init().catch((error) => {
+  console.error(error);
+  showError(error && error.message ? error.message : error);
+});

cadshim.py

@@ -0,0 +1,903 @@
+"""A tiny, browser-friendly subset of the FreeCAD Python API.
+
+The shim does not perform real boundary-representation modelling.  It records
+the operations that a macro asks for and emits a small JSON scene graph which
+the Three.js front-end can build and display.  It is intentionally forgiving
+so that simple Part-based macros run without a FreeCAD installation.
+"""
+
+import copy
+import json
+import math
+import sys
+import traceback
+import types
+
+PALETTE = [
+    (0.94, 0.68, 0.32),
+    (0.40, 0.64, 0.56),
+    (0.94, 0.49, 0.37),
+    (0.40, 0.50, 0.66),
+    (0.83, 0.78, 0.66),
+    (0.60, 0.47, 0.70),
+]
+
+
+# --------------------------------------------------------------------------
+# small vector / quaternion helpers
+# --------------------------------------------------------------------------
+
+def _num(value, default=0.0):
+    try:
+        return float(value)
+    except Exception:
+        return default
+
+
+class Vector:
+    __slots__ = ("x", "y", "z")
+
+    def __init__(self, x=0.0, y=0.0, z=0.0):
+        if isinstance(x, Vector):
+            self.x, self.y, self.z = x.x, x.y, x.z
+        elif isinstance(x, (tuple, list)):
+            values = list(x) + [0.0, 0.0, 0.0]
+            self.x, self.y, self.z = _num(values[0]), _num(values[1]), _num(values[2])
+        else:
+            self.x, self.y, self.z = _num(x), _num(y), _num(z)
+
+    def __iter__(self):
+        yield self.x
+        yield self.y
+        yield self.z
+
+    def __getitem__(self, index):
+        return (self.x, self.y, self.z)[index]
+
+    def __len__(self):
+        return 3
+
+    def __add__(self, other):
+        other = Vector(other)
+        return Vector(self.x + other.x, self.y + other.y, self.z + other.z)
+
+    def __sub__(self, other):
+        other = Vector(other)
+        return Vector(self.x - other.x, self.y - other.y, self.z - other.z)
+
+    def __mul__(self, other):
+        if isinstance(other, (Vector, tuple, list)):
+            return self.dot(Vector(other))
+        return Vector(self.x * other, self.y * other, self.z * other)
+
+    __rmul__ = __mul__
+
+    def __truediv__(self, other):
+        return Vector(self.x / other, self.y / other, self.z / other)
+
+    def __neg__(self):
+        return Vector(-self.x, -self.y, -self.z)
+
+    def __repr__(self):
+        return "Vector (%g, %g, %g)" % (self.x, self.y, self.z)
+
+    def clone(self):
+        return Vector(self)
+
+    copy = clone
+
+    def Length(self):
+        return math.sqrt(self.x * self.x + self.y * self.y + self.z * self.z)
+
+    def normalize(self):
+        length = self.Length()
+        if length > 1e-12:
+            self.x /= length
+            self.y /= length
+            self.z /= length
+        return self
+
+    normalized = normalize
+
+    def dot(self, other):
+        other = Vector(other)
+        return self.x * other.x + self.y * other.y + self.z * other.z
+
+    def cross(self, other):
+        other = Vector(other)
+        return Vector(
+            self.y * other.z - self.z * other.y,
+            self.z * other.x - self.x * other.z,
+            self.x * other.y - self.y * other.x,
+        )
+
+    def to_list(self):
+        return [self.x, self.y, self.z]
+
+
+def _qmul(a, b):
+    x1, y1, z1, w1 = a
+    x2, y2, z2, w2 = b
+    return (
+        w1 * x2 + x1 * w2 + y1 * z2 - z1 * y2,
+        w1 * y2 - x1 * z2 + y1 * w2 + z1 * x2,
+        w1 * z2 + x1 * y2 - y1 * x2 + z1 * w2,
+        w1 * w2 - x1 * x2 - y1 * y2 - z1 * z2,
+    )
+
+
+def _qaxis(axis, angle_deg):
+    axis = Vector(axis)
+    length = axis.Length()
+    if length < 1e-12:
+        return (0.0, 0.0, 0.0, 1.0)
+    axis = axis / length
+    half = math.radians(_num(angle_deg)) * 0.5
+    sine = math.sin(half)
+    return (axis.x * sine, axis.y * sine, axis.z * sine, math.cos(half))
+
+
+def _qnorm(q):
+    length = math.sqrt(sum(v * v for v in q))
+    if length < 1e-12:
+        return (0.0, 0.0, 0.0, 1.0)
+    return tuple(v / length for v in q)
+
+
+def _qconj(q):
+    return (-q[0], -q[1], -q[2], q[3])
+
+
+def _qrotate(q, v):
+    v = Vector(v)
+    r = _qmul(_qmul(q, (v.x, v.y, v.z, 0.0)), _qconj(q))
+    return Vector(r[0], r[1], r[2])
+
+
+def _qmatrix(q):
+    x, y, z, w = _qnorm(q)
+    xx, yy, zz = x * x, y * y, z * z
+    xy, xz, yz = x * y, x * z, y * z
+    wx, wy, wz = w * x, w * y, w * z
+    return [
+        [1 - 2 * (yy + zz), 2 * (xy - wz), 2 * (xz + wy)],
+        [2 * (xy + wz), 1 - 2 * (xx + zz), 2 * (yz - wx)],
+        [2 * (xz - wy), 2 * (yz + wx), 1 - 2 * (xx + yy)],
+    ]
+
+
+def _matmul(a, b):
+    return [[sum(a[r][k] * b[k][c] for k in range(4)) for c in range(4)] for r in range(4)]
+
+
+def _mat_identity():
+    return [
+        [1.0, 0.0, 0.0, 0.0],
+        [0.0, 1.0, 0.0, 0.0],
+        [0.0, 0.0, 1.0, 0.0],
+        [0.0, 0.0, 0.0, 1.0],
+    ]
+
+
+def _mat_translate(v):
+    m = _mat_identity()
+    m[0][3], m[1][3], m[2][3] = v.x, v.y, v.z
+    return m
+
+
+def _mat_rotate(q):
+    r = _qmatrix(q)
+    return [
+        [r[0][0], r[0][1], r[0][2], 0.0],
+        [r[1][0], r[1][1], r[1][2], 0.0],
+        [r[2][0], r[2][1], r[2][2], 0.0],
+        [0.0, 0.0, 0.0, 1.0],
+    ]
+
+
+def _mat_to_column_major(m):
+    return [m[r][c] for c in range(4) for r in range(4)]
+
+
+def _mat_is_identity(m):
+    for r in range(4):
+        for c in range(4):
+            expected = 1.0 if r == c else 0.0
+            if abs(m[r][c] - expected) > 1e-9:
+                return False
+    return True
+
+
+class Rotation:
+    def __init__(self, *args):
+        if not args:
+            self.q = (0.0, 0.0, 0.0, 1.0)
+        elif len(args) == 1 and isinstance(args[0], Rotation):
+            self.q = tuple(args[0].q)
+        elif len(args) == 1 and isinstance(args[0], (tuple, list)) and len(args[0]) == 4:
+            self.q = _qnorm(tuple(_num(v) for v in args[0]))
+        elif len(args) == 2:
+            self.q = _qaxis(Vector(args[0]), args[1])
+        elif len(args) == 3:
+            yaw = _qaxis((0.0, 0.0, 1.0), args[0])
+            pitch = _qaxis((0.0, 1.0, 0.0), args[1])
+            roll = _qaxis((1.0, 0.0, 0.0), args[2])
+            self.q = _qnorm(_qmul(_qmul(yaw, pitch), roll))
+        elif len(args) == 4:
+            self.q = _qnorm(tuple(_num(v) for v in args))
+        else:
+            self.q = (0.0, 0.0, 0.0, 1.0)
+
+    def __repr__(self):
+        return "Rotation (%g, %g, %g, %g)" % self.q
+
+    def multiply(self, other):
+        return Rotation(_qmul(self.q, Rotation(other).q))
+
+    def __mul__(self, other):
+        if isinstance(other, Placement):
+            return Placement(other.Base, self).multiply(other.Rotation)
+        return self.multiply(other)
+
+    def toMatrix(self):
+        return _qmatrix(self.q)
+
+    @property
+    def Q(self):
+        return self.q
+
+    @property
+    def Angle(self):
+        w = max(-1.0, min(1.0, self.q[3]))
+        return math.degrees(2.0 * math.acos(w))
+
+    @property
+    def Axis(self):
+        x, y, z, w = self.q
+        s = math.sqrt(max(0.0, 1.0 - w * w))
+        if s < 1e-9:
+            return Vector(0.0, 0.0, 1.0)
+        return Vector(x / s, y / s, z / s)
+
+    def copy(self):
+        return Rotation(self)
+
+
+class Placement:
+    def __init__(self, *args):
+        self.Base = Vector()
+        self.Rotation = Rotation()
+        if not args:
+            return
+        if len(args) == 1 and isinstance(args[0], Placement):
+            self.Base = Vector(args[0].Base)
+            self.Rotation = Rotation(args[0].Rotation)
+        elif len(args) == 1 and isinstance(args[0], (Vector, tuple, list)):
+            self.Base = Vector(args[0])
+        elif len(args) >= 2:
+            self.Base = Vector(args[0])
+            self.Rotation = Rotation(args[1])
+
+    def __repr__(self):
+        return "Placement [Pos=%s, Rot=%s]" % (self.Base, self.Rotation)
+
+    def copy(self):
+        return Placement(self)
+
+    def multiply(self, other):
+        other = Placement(other)
+        q = _qmul(self.Rotation.q, other.Rotation.q)
+        base = self.Base + _qrotate(self.Rotation.q, other.Base)
+        return Placement(base, Rotation(q))
+
+    def __mul__(self, other):
+        if isinstance(other, Vector):
+            return self.Base + _qrotate(self.Rotation.q, other)
+        if isinstance(other, Placement):
+            return self.multiply(other)
+        if isinstance(other, Shape):
+            shape = other.copy()
+            shape.Placement = self * shape.Placement
+            return shape
+        raise TypeError("unsupported Placement multiplication")
+
+    def __rmul__(self, other):
+        if isinstance(other, Vector):
+            return self.Base + _qrotate(self.Rotation.q, other)
+        return NotImplemented
+
+    def toMatrix(self):
+        return _mat_to_column_major(_matmul(_mat_translate(self.Base), _mat_rotate(self.Rotation.q)))
+
+
+class Matrix:
+    def __init__(self, *args):
+        self._m = _mat_identity()
+        if len(args) == 16:
+            values = [_num(v) for v in args]
+            self._m = [[values[c * 4 + r] for c in range(4)] for r in range(4)]
+        elif len(args) == 1 and isinstance(args[0], Matrix):
+            self._m = copy.deepcopy(args[0]._m)
+
+    def move(self, vector):
+        self._m = _matmul(_mat_translate(Vector(vector)), self._m)
+
+    def multiply(self, other):
+        self._m = _matmul(self._m, other._m)
+
+    def A11(self):
+        return self._m[0][0]
+
+    def to_list(self):
+        return _mat_to_column_major(self._m)
+
+
+# --------------------------------------------------------------------------
+# shape tree
+# --------------------------------------------------------------------------
+
+class Shape:
+    def __init__(self, node=None, profile=None, placed=False):
+        self._node = node
+        self._profile = profile
+        self._placement = Placement()
+
+    def __repr__(self):
+        return "<Shape>"
+
+    @property
+    def Placement(self):
+        return self._placement
+
+    @Placement.setter
+    def Placement(self, value):
+        self._placement = Placement(value)
+
+    @property
+    def ShapeType(self):
+        return "Solid"
+
+    def copy(self):
+        shape = Shape(copy.deepcopy(self._node), copy.deepcopy(self._profile))
+        shape._placement = Placement(self._placement)
+        return shape
+
+    def render_node(self):
+        node = copy.deepcopy(self._node)
+        matrix = self._placement.toMatrix()
+        if not _mat_is_identity(_matmul(_mat_translate(self._placement.Base), _mat_rotate(self._placement.Rotation.q))):
+            node = {"op": "transform", "m": matrix, "child": node}
+        return node
+
+    def translate(self, vector, *args):
+        self._placement = Placement(Vector(vector)) * self._placement
+        return self
+
+    def rotate(self, center, axis, angle, *args):
+        center = Vector(center)
+        rot = Placement(Vector(0, 0, 0), Rotation(axis, angle))
+        self._placement = (
+            Placement(center) * rot * Placement(-center) * self._placement
+        )
+        return self
+
+    def scale(self, *args):
+        return self
+
+    def cut(self, tool):
+        return _boolean("cut", self, tool)
+
+    def fuse(self, tool):
+        return _boolean("fuse", self, tool)
+
+    def common(self, tool):
+        return _boolean("common", self, tool)
+
+    def multiFuse(self, tools):
+        return _multi_boolean("fuse", [self] + list(tools))
+
+    def multiCommon(self, tools):
+        return _multi_boolean("common", [self] + list(tools))
+
+    def extrude(self, vector):
+        if self._profile is None:
+            raise ValueError("extrude() needs a Face or closed wire")
+        node = {"op": "extrude", "profile": self._profile, "vector": Vector(vector).to_list()}
+        matrix = self._placement.toMatrix()
+        if not _mat_is_identity(
+            _matmul(_mat_translate(self._placement.Base), _mat_rotate(self._placement.Rotation.q))
+        ):
+            node = {"op": "transform", "m": matrix, "child": node}
+        return Shape(node)
+
+    def removeSplitter(self):
+        return self
+
+    def isClosed(self):
+        return self._profile is not None
+
+
+def _boolean(kind, a, b):
+    if not isinstance(a, Shape) or not isinstance(b, Shape):
+        raise TypeError("boolean operations need Shape arguments")
+    node = {"op": "boolean", "kind": kind, "a": a.render_node(), "b": b.render_node()}
+    return Shape(node)
+
+
+def _multi_boolean(kind, shapes):
+    shapes = [s for s in shapes if isinstance(s, Shape)]
+    if not shapes:
+        raise ValueError("no shapes supplied")
+    if len(shapes) == 1:
+        return shapes[0].copy()
+    node = {"op": "group", "children": [s.render_node() for s in shapes]}
+    return Shape(node)
+
+
+def _points2d(points):
+    result = []
+    for point in points:
+        p = Vector(point)
+        result.append([p.x, p.y])
+    return result
+
+
+def _make_face(profile, placement=None):
+    face = Shape({"op": "face", "profile": profile}, profile=profile)
+    if placement is not None:
+        face._placement = Placement(placement)
+    return face
+
+
+# --------------------------------------------------------------------------
+# Part module
+# --------------------------------------------------------------------------
+
+def _make_box(length, width, height, pnt=None, dir=None):
+    return Shape(
+        {
+            "op": "box",
+            "l": _num(length),
+            "w": _num(width),
+            "h": _num(height),
+            "pnt": Vector(pnt).to_list() if pnt is not None else [0, 0, 0],
+            "dir": Vector(dir).to_list() if dir is not None else [0, 0, 1],
+        }
+    )
+
+
+def _make_cylinder(radius, height, pnt=None, dir=None, angle=360):
+    return Shape(
+        {
+            "op": "cylinder",
+            "r": _num(radius),
+            "h": _num(height),
+            "pnt": Vector(pnt).to_list() if pnt is not None else [0, 0, 0],
+            "dir": Vector(dir).to_list() if dir is not None else [0, 0, 1],
+            "angle": _num(angle, 360),
+        }
+    )
+
+
+def _make_sphere(radius, pnt=None, *args):
+    return Shape(
+        {
+            "op": "sphere",
+            "r": _num(radius),
+            "pnt": Vector(pnt).to_list() if pnt is not None else [0, 0, 0],
+        }
+    )
+
+
+def _make_cone(radius1, radius2, height, pnt=None, dir=None, angle=360):
+    return Shape(
+        {
+            "op": "cone",
+            "r1": _num(radius1),
+            "r2": _num(radius2),
+            "h": _num(height),
+            "pnt": Vector(pnt).to_list() if pnt is not None else [0, 0, 0],
+            "dir": Vector(dir).to_list() if dir is not None else [0, 0, 1],
+            "angle": _num(angle, 360),
+        }
+    )
+
+
+def _make_torus(radius1, radius2, pnt=None, dir=None, *args):
+    return Shape(
+        {
+            "op": "torus",
+            "r1": _num(radius1),
+            "r2": _num(radius2),
+            "pnt": Vector(pnt).to_list() if pnt is not None else [0, 0, 0],
+            "dir": Vector(dir).to_list() if dir is not None else [0, 0, 1],
+        }
+    )
+
+
+def _make_polygon(points, closed=False):
+    profile = _points2d(points)
+    return Shape({"op": "wire", "profile": profile, "closed": bool(closed)}, profile=profile)
+
+
+def _make_line(point1, point2):
+    return _make_polygon([point1, point2], False)
+
+
+def _make_face_from(value):
+    if isinstance(value, Shape):
+        if value._profile is None:
+            raise ValueError("Part.Face() needs a closed wire")
+        return _make_face(copy.deepcopy(value._profile), value._placement)
+    profile = _points2d(value)
+    if len(profile) > 2 and profile[0] != profile[-1]:
+        profile.append(profile[0])
+    return _make_face(profile)
+
+
+def _make_compound(shapes):
+    shapes = [s for s in shapes if isinstance(s, Shape)]
+    return _multi_boolean("fuse", shapes)
+
+
+def _show(shape, name=None):
+    document = _active_document()
+    if document is None:
+        document = newDocument("Unnamed")
+    return document._show(shape, name)
+
+
+# --------------------------------------------------------------------------
+# document
+# --------------------------------------------------------------------------
+
+class ViewObject:
+    def __init__(self, obj):
+        self.obj = obj
+        self.ShapeColor = None
+        self.LineColor = None
+        self.Visibility = True
+        self.Transparency = 0
+        self.DisplayMode = "Flat Lines"
+
+    def update(self):
+        pass
+
+
+class DocObject:
+    def __init__(self, document, type_id, name):
+        object.__setattr__(self, "Document", document)
+        object.__setattr__(self, "Name", name)
+        object.__setattr__(self, "Label", name)
+        object.__setattr__(self, "TypeId", type_id)
+        object.__setattr__(self, "_shape", None)
+        object.__setattr__(self, "_feature_shape", None)
+        object.__setattr__(self, "_dirty", True)
+        object.__setattr__(self, "ViewObject", ViewObject(self))
+        object.__setattr__(self, "_props", self._defaults(type_id))
+        if "Placement" not in self._props:
+            self._props["Placement"] = Placement()
+
+    @staticmethod
+    def _defaults(type_id):
+        if type_id == "Part::Box":
+            return {"Length": 10.0, "Width": 10.0, "Height": 10.0, "Placement": Placement()}
+        if type_id == "Part::Cylinder":
+            return {"Radius": 2.0, "Height": 10.0, "Angle": 360.0, "Placement": Placement()}
+        if type_id == "Part::Sphere":
+            return {"Radius": 5.0, "Placement": Placement()}
+        if type_id == "Part::Cone":
+            return {
+                "Radius1": 2.0,
+                "Radius2": 4.0,
+                "Height": 10.0,
+                "Angle": 360.0,
+                "Placement": Placement(),
+            }
+        if type_id == "Part::Torus":
+            return {"Radius1": 10.0, "Radius2": 2.0, "Placement": Placement()}
+        if type_id in ("Part::Cut", "Part::Fuse"):
+            return {"Base": None, "Tool": None, "Placement": Placement()}
+        if type_id in ("Part::MultiFuse", "Part::MultiCommon"):
+            return {"Shapes": [], "Placement": Placement()}
+        return {"Placement": Placement()}
+
+    def __getattr__(self, name):
+        props = object.__getattribute__(self, "_props")
+        if name in props:
+            return props[name]
+        raise AttributeError("'%s' object has no attribute '%s'" % (self.TypeId, name))
+
+    def __setattr__(self, name, value):
+        if name in ("Document", "Name", "Label", "TypeId", "ViewObject"):
+            object.__setattr__(self, name, value)
+        elif name == "Shape":
+            object.__setattr__(self, "_feature_shape", value)
+            object.__setattr__(self, "_shape", value)
+            object.__setattr__(self, "_dirty", False)
+        elif name.startswith("_"):
+            object.__setattr__(self, name, value)
+        else:
+            self._props[name] = value
+            object.__setattr__(self, "_dirty", True)
+
+    @property
+    def Shape(self):
+        if self._dirty or self._shape is None:
+            self._shape = self._compute()
+            object.__setattr__(self, "_dirty", False)
+        return self._shape
+
+    @Shape.setter
+    def Shape(self, value):
+        object.__setattr__(self, "_feature_shape", value)
+        object.__setattr__(self, "_shape", value)
+        object.__setattr__(self, "_dirty", False)
+
+    def _compute(self):
+        type_id = self.TypeId
+        placement = self._props.get("Placement", Placement())
+        if type_id == "Part::Feature":
+            return self._feature_shape
+        if type_id == "Part::Box":
+            shape = _make_box(self.Length, self.Width, self.Height)
+        elif type_id == "Part::Cylinder":
+            shape = _make_cylinder(self.Radius, self.Height, angle=self.Angle)
+        elif type_id == "Part::Sphere":
+            shape = _make_sphere(self.Radius)
+        elif type_id == "Part::Cone":
+            shape = _make_cone(self.Radius1, self.Radius2, self.Height, angle=self.Angle)
+        elif type_id == "Part::Torus":
+            shape = _make_torus(self.Radius1, self.Radius2)
+        elif type_id == "Part::Cut":
+            if self.Base is None or self.Tool is None:
+                raise ValueError("%s needs Base and Tool" % self.Name)
+            shape = self.Base.Shape.copy().cut(self.Tool.Shape)
+        elif type_id == "Part::Fuse":
+            if self.Base is None or self.Tool is None:
+                raise ValueError("%s needs Base and Tool" % self.Name)
+            shape = self.Base.Shape.copy().fuse(self.Tool.Shape)
+        elif type_id == "Part::MultiFuse":
+            shape = _multi_boolean("fuse", [s.Shape for s in self.Shapes])
+        elif type_id == "Part::MultiCommon":
+            shape = _multi_boolean("common", [s.Shape for s in self.Shapes])
+        else:
+            return self._feature_shape
+        if type_id != "Part::Feature":
+            shape.Placement = placement
+        return shape
+
+
+class Document:
+    def __init__(self, name="Unnamed"):
+        self.Name = name
+        self.Label = name
+        self._objects = []
+        self._counter = 0
+        self._errors = []
+
+    @property
+    def Objects(self):
+        return list(self._objects)
+
+    def addObject(self, type_id, name=None):
+        return self._add(type_id, name)
+
+    def _add(self, type_id, name=None):
+        if name is None:
+            name = type_id.split("::")[-1] + "%03d" % self._counter
+        base_name = name
+        while self.getObject(name) is not None:
+            self._counter += 1
+            name = base_name + "%03d" % self._counter
+        obj = DocObject(self, type_id, name)
+        self._objects.append(obj)
+        self._counter += 1
+        return obj
+
+    def _show(self, shape, name=None):
+        if not isinstance(shape, Shape):
+            raise TypeError("Part.show() needs a Shape")
+        obj = self._add("Part::Feature", name or "Shape")
+        obj.Shape = shape.copy()
+        return obj
+
+    def recompute(self):
+        self._errors = []
+        for obj in list(self._objects):
+            try:
+                _ = obj.Shape
+            except Exception as error:
+                self._errors.append("%s: %s" % (obj.Name, error))
+        return self
+
+    def getObject(self, name):
+        for obj in self._objects:
+            if obj.Name == name:
+                return obj
+        return None
+
+    def removeObject(self, name):
+        obj = self.getObject(name)
+        if obj is not None:
+            self._objects.remove(obj)
+
+    def __repr__(self):
+        return "<Document %s>" % self.Name
+
+
+# --------------------------------------------------------------------------
+# module installation
+# --------------------------------------------------------------------------
+
+_freecad = None
+_part = None
+_documents = {}
+_active = None
+_log = []
+
+
+def _log_message(kind):
+    def inner(*args, **kwargs):
+        text = " ".join(str(a) for a in args)
+        _log.append("%s: %s" % (kind, text))
+
+    return inner
+
+
+def newDocument(name="Unnamed", *args, **kwargs):
+    global _active
+    document = Document(name)
+    if name in _documents:
+        index = 1
+        while "%s%03d" % (name, index) in _documents:
+            index += 1
+        document.Name = "%s%03d" % (name, index)
+        document.Label = document.Name
+    _documents[document.Name] = document
+    _active = document
+    if _freecad is not None:
+        _freecad.ActiveDocument = document
+    return document
+
+
+def activeDocument():
+    return _active
+
+
+def _active_document():
+    return _active
+
+
+def closeDocument(name):
+    global _active
+    document = _documents.pop(name, None)
+    if _active is document:
+        _active = None
+        if _freecad is not None:
+            _freecad.ActiveDocument = None
+    return document
+
+
+def listDocuments():
+    return dict(_documents)
+
+
+def _get_color(obj, index):
+    color = getattr(obj.ViewObject, "ShapeColor", None)
+    opacity = 1.0 - (max(0.0, min(100.0, _num(getattr(obj.ViewObject, "Transparency", 0)))) / 100.0)
+    if color is None:
+        rgb = PALETTE[index % len(PALETTE)]
+    elif isinstance(color, str):
+        value = color.strip()
+        if value.startswith("#") and len(value) >= 7:
+            rgb = (
+                int(value[1:3], 16) / 255.0,
+                int(value[3:5], 16) / 255.0,
+                int(value[5:7], 16) / 255.0,
+            )
+        else:
+            rgb = PALETTE[index % len(PALETTE)]
+    else:
+        values = list(color)
+        values += [0.0, 0.0, 0.0]
+        rgb = (_num(values[0], 0.8), _num(values[1], 0.8), _num(values[2], 0.8))
+    return [max(0.0, min(1.0, float(c))) for c in rgb], opacity
+
+
+def build_scene():
+    document = _active
+    if document is None:
+        return {"objects": [], "errors": [], "log": list(_log)}
+    document.recompute()
+    objects = []
+    for obj in document.Objects:
+        if getattr(obj.ViewObject, "Visibility", True) is False:
+            continue
+        try:
+            shape = obj.Shape
+        except Exception:
+            continue
+        if shape is None:
+            continue
+        color, opacity = _get_color(obj, len(objects))
+        objects.append(
+            {
+                "name": obj.Name,
+                "color": color,
+                "opacity": opacity,
+                "node": shape.render_node(),
+            }
+        )
+    return {"objects": objects, "errors": list(document._errors), "log": list(_log)}
+
+
+class Runtime:
+    def reset(self):
+        global _active, _log
+        _documents.clear()
+        _active = None
+        _log = []
+        if _freecad is not None:
+            _freecad.ActiveDocument = None
+
+    def run(self, code):
+        self.reset()
+        try:
+            namespace = {"__name__": "__main__", "__file__": "<wfreecad>"}
+            exec(compile(code, "<wfreecad>", "exec"), namespace, namespace)
+            scene = build_scene()
+            return {"ok": True, "scene": scene}
+        except Exception:
+            return {"ok": False, "error": traceback.format_exc(limit=8), "log": list(_log)}
+
+
+_runtime = Runtime()
+
+
+def install():
+    global _freecad, _part
+    if _freecad is not None:
+        return
+
+    _freecad = types.ModuleType("FreeCAD")
+    _freecad.Vector = Vector
+    _freecad.Rotation = Rotation
+    _freecad.Placement = Placement
+    _freecad.Matrix = Matrix
+    _freecad.newDocument = newDocument
+    _freecad.activeDocument = activeDocument
+    _freecad.closeDocument = closeDocument
+    _freecad.listDocuments = listDocuments
+    _freecad.ActiveDocument = None
+    _freecad.Console = types.SimpleNamespace(
+        PrintMessage=_log_message("Message"),
+        PrintWarning=_log_message("Warning"),
+        PrintError=_log_message("Error"),
+    )
+    sys.modules["FreeCAD"] = _freecad
+
+    _part = types.ModuleType("Part")
+    _part.makeBox = _make_box
+    _part.makeCylinder = _make_cylinder
+    _part.makeSphere = _make_sphere
+    _part.makeCone = _make_cone
+    _part.makeTorus = _make_torus
+    _part.makePolygon = _make_polygon
+    _part.makeLine = _make_line
+    _part.makeCompound = _make_compound
+    _part.Face = _make_face_from
+    _part.Wire = lambda *args, **kwargs: _make_polygon(args[0] if args else [], True)
+    _part.show = _show
+    _part.Shape = Shape
+    sys.modules["Part"] = _part
+
+    try:
+        sys.modules["FreeCADGui"] = types.ModuleType("FreeCADGui")
+    except Exception:
+        pass
+
+
+install()
+
+__wfcad_runtime = _runtime

examples/computer.py

@@ -0,0 +1,68 @@
+import FreeCAD as App
+import Part
+
+cream = (0.89, 0.85, 0.74)
+sand = (0.78, 0.73, 0.62)
+screen = (0.08, 0.11, 0.15)
+slate = (0.24, 0.29, 0.32)
+mint = (0.37, 0.63, 0.54)
+coral = (0.93, 0.47, 0.34)
+
+# Monitor shell.
+monitor = Part.makeBox(26, 4, 17, App.Vector(-13, -2, 8))
+monitor_obj = Part.show(monitor, "Monitor")
+monitor_obj.ViewObject.ShapeColor = cream
+
+# Screen panel and a tiny status line.
+glass = Part.makeBox(23, 0.6, 14, App.Vector(-11.5, -2.4, 9.5))
+glass_obj = Part.show(glass, "Screen")
+glass_obj.ViewObject.ShapeColor = screen
+
+status = Part.makeBox(20, 0.12, 0.42, App.Vector(-10, -2.52, 9.0))
+status_obj = Part.show(status, "StatusLine")
+status_obj.ViewObject.ShapeColor = mint
+
+power = Part.makeCylinder(0.28, 0.35, App.Vector(9.9, -2.5, 8.6), App.Vector(0, 1, 0))
+power_obj = Part.show(power, "PowerDot")
+power_obj.ViewObject.ShapeColor = coral
+
+# Tapered stand and round foot.
+neck = Part.makeCone(2.6, 1.3, 6.5, App.Vector(0, 0, 1.5))
+neck_obj = Part.show(neck, "Stand")
+neck_obj.ViewObject.ShapeColor = sand
+
+foot = Part.makeCylinder(6.2, 1.5, App.Vector(0, 0, 0))
+foot_obj = Part.show(foot, "Foot")
+foot_obj.ViewObject.ShapeColor = sand
+
+# Keyboard slab.
+keyboard = Part.makeBox(24, 8, 1, App.Vector(-12, -11.5, 0))
+keyboard_obj = Part.show(keyboard, "Keyboard")
+keyboard_obj.ViewObject.ShapeColor = cream
+
+keywell = Part.makeBox(21.5, 6.6, 0.32, App.Vector(-10.75, -10.8, 1.0))
+keywell_obj = Part.show(keywell, "KeyWell")
+keywell_obj.ViewObject.ShapeColor = slate
+
+for row in range(5):
+    keys = Part.makeBox(
+        19,
+        0.9,
+        0.36,
+        App.Vector(-9.5, -10.1 + row * 1.35, 1.32),
+    )
+    keys_obj = Part.show(keys, "KeyRow")
+    keys_obj.ViewObject.ShapeColor = (0.42, 0.48, 0.48)
+
+# A small tower on the right.
+tower = Part.makeBox(6, 9, 16, App.Vector(14, -2, 0))
+tower_obj = Part.show(tower, "Tower")
+tower_obj.ViewObject.ShapeColor = cream
+
+vent = Part.makeBox(1.2, 0.22, 8.5, App.Vector(15.4, -2.12, 3.2))
+vent_obj = Part.show(vent, "Vent")
+vent_obj.ViewObject.ShapeColor = slate
+
+button = Part.makeCylinder(0.55, 0.3, App.Vector(18.1, -2.3, 12.6), App.Vector(0, 1, 0))
+button_obj = Part.show(button, "TowerButton")
+button_obj.ViewObject.ShapeColor = mint

examples/gear.py

@@ -0,0 +1,60 @@
+import math
+import FreeCAD as App
+import Part
+
+# A chunky spur gear, built from a closed 2D profile and extruded.
+teeth = 18
+module = 2.2
+thickness = 6.0
+
+pitch_r = module * teeth / 2.0
+tip_r = pitch_r + module * 0.9
+root_r = pitch_r - module * 1.1
+step = 2.0 * math.pi / teeth
+
+points = []
+for i in range(teeth):
+    a = i * step
+    for frac, radius in (
+        (-0.46, root_r),
+        (-0.40, root_r),
+        (-0.35, root_r + (tip_r - root_r) * 0.30),
+        (-0.28, root_r + (tip_r - root_r) * 0.82),
+        (-0.20, tip_r),
+        (0.20, tip_r),
+        (0.28, root_r + (tip_r - root_r) * 0.82),
+        (0.35, root_r + (tip_r - root_r) * 0.30),
+        (0.40, root_r),
+        (0.46, root_r),
+    ):
+        angle = a + frac * step
+        points.append(
+            App.Vector(math.cos(angle) * radius, math.sin(angle) * radius, 0)
+        )
+points.append(points[0])
+
+profile = Part.Face(Part.makePolygon(points, True))
+gear = profile.extrude(App.Vector(0, 0, thickness))
+
+# Centre bore.
+gear = gear.cut(
+    Part.makeCylinder(4.2, thickness + 2.0, App.Vector(0, 0, -1.0))
+)
+
+# Five lightening holes.
+for i in range(5):
+    angle = 2.0 * math.pi * i / 5.0 + math.pi / 10.0
+    centre = App.Vector(
+        math.cos(angle) * pitch_r * 0.62,
+        math.sin(angle) * pitch_r * 0.62,
+        -1.0,
+    )
+    gear = gear.cut(Part.makeCylinder(2.8, thickness + 2.0, centre))
+
+plate = Part.show(gear, "GearPlate")
+plate.ViewObject.ShapeColor = (0.94, 0.68, 0.32)
+
+hub = Part.makeCylinder(6.8, thickness + 3.0, App.Vector(0, 0, -1.5))
+hub = hub.cut(Part.makeCylinder(4.2, thickness + 5.0, App.Vector(0, 0, -2.5)))
+hub_obj = Part.show(hub, "Hub")
+hub_obj.ViewObject.ShapeColor = (0.27, 0.38, 0.35)

examples/index.json

@@ -0,0 +1,42 @@
+[
+  {
+    "id": "gear",
+    "title": "齒輪",
+    "subtitle": "Profile · boolean",
+    "tag": "Part",
+    "code": "gear.py",
+    "scene": "gear.json",
+    "thumb": "gear.png",
+    "view": [0.85, -1.25, 1.22]
+  },
+  {
+    "id": "computer",
+    "title": "桌上電腦",
+    "subtitle": "Boxes · cone",
+    "tag": "Part",
+    "code": "computer.py",
+    "scene": "computer.json",
+    "thumb": "computer.png",
+    "view": [0.86, -1.35, 0.98]
+  },
+  {
+    "id": "rocket",
+    "title": "火箭",
+    "subtitle": "Cones · torus",
+    "tag": "Part",
+    "code": "rocket.py",
+    "scene": "rocket.json",
+    "thumb": "rocket.png",
+    "view": [0.9, -1.25, 0.52]
+  },
+  {
+    "id": "mug",
+    "title": "馬克杯",
+    "subtitle": "Hollow · handle",
+    "tag": "Part",
+    "code": "mug.py",
+    "scene": "mug.json",
+    "thumb": "mug.png",
+    "view": [0.82, -1.25, 1.12]
+  }
+]

examples/mug.py

@@ -0,0 +1,32 @@
+import FreeCAD as App
+import Part
+
+mint = (0.42, 0.66, 0.58)
+cream = (0.91, 0.87, 0.77)
+coffee = (0.34, 0.21, 0.13)
+
+# Outer mug body.
+body = Part.makeCylinder(5.0, 9.0, App.Vector(0, 0, 0))
+
+# Hollow it out from the top.
+body = body.cut(
+    Part.makeCylinder(4.15, 8.5, App.Vector(0, 0, 0.9))
+)
+
+body_obj = Part.show(body, "MugBody")
+body_obj.ViewObject.ShapeColor = mint
+
+# Rounded rim.
+rim = Part.makeTorus(4.6, 0.45, App.Vector(0, 0, 9.0))
+rim_obj = Part.show(rim, "Rim")
+rim_obj.ViewObject.ShapeColor = cream
+
+# Coffee surface.
+coffee_shape = Part.makeCylinder(4.02, 0.22, App.Vector(0, 0, 8.3))
+coffee_obj = Part.show(coffee_shape, "Coffee")
+coffee_obj.ViewObject.ShapeColor = coffee
+
+# Handle: a torus turned to sit in the XZ plane.
+handle = Part.makeTorus(3.4, 0.9, App.Vector(4.6, 0, 4.6), App.Vector(0, 1, 0))
+handle_obj = Part.show(handle, "Handle")
+handle_obj.ViewObject.ShapeColor = mint

examples/rocket.py

@@ -0,0 +1,63 @@
+import FreeCAD as App
+import Part
+
+cream = (0.90, 0.86, 0.76)
+coral = (0.94, 0.47, 0.34)
+mint = (0.37, 0.63, 0.54)
+screen = (0.09, 0.12, 0.17)
+flame = (1.00, 0.80, 0.32)
+
+# Main body.
+body = Part.makeCylinder(4.5, 16, App.Vector(0, 0, 3))
+body_obj = Part.show(body, "Body")
+body_obj.ViewObject.ShapeColor = cream
+
+# Nose cone.
+nose = Part.makeCone(4.5, 0.2, 7, App.Vector(0, 0, 19))
+nose_obj = Part.show(nose, "Nose")
+nose_obj.ViewObject.ShapeColor = coral
+
+# Coral band around the body.
+band = Part.makeCylinder(4.58, 0.7, App.Vector(0, 0, 6.2))
+band_obj = Part.show(band, "Band")
+band_obj.ViewObject.ShapeColor = coral
+
+# Porthole and rim.
+window = Part.makeCylinder(2.0, 0.9, App.Vector(0, -4.8, 12.4), App.Vector(0, 1, 0))
+window_obj = Part.show(window, "Window")
+window_obj.ViewObject.ShapeColor = screen
+
+rim = Part.makeTorus(2.2, 0.32, App.Vector(0, -4.75, 12.4), App.Vector(0, 1, 0))
+rim_obj = Part.show(rim, "WindowRim")
+rim_obj.ViewObject.ShapeColor = cream
+
+# Three swept fins.  The profile is drawn in XY, extruded along Z and then
+# tipped upright so it becomes a vertical triangle.
+fin_profile = Part.Face(
+    Part.makePolygon(
+        [
+            App.Vector(4.0, 0, 0),
+            App.Vector(9.5, 0, 0),
+            App.Vector(4.0, 6.5, 0),
+        ],
+        True,
+    )
+)
+fin = fin_profile.extrude(App.Vector(0, 0, 0.8))
+fin.rotate(App.Vector(0, 0, 0), App.Vector(1, 0, 0), 90)
+fin.translate(App.Vector(0, -0.4, 3.0))
+
+for i in range(3):
+    blade = fin.copy()
+    blade.rotate(App.Vector(0, 0, 0), App.Vector(0, 0, 1), i * 120)
+    blade_obj = Part.show(blade, "Fin")
+    blade_obj.ViewObject.ShapeColor = mint
+
+# Exhaust flame.
+outer = Part.makeCone(0.7, 3.6, 6.0, App.Vector(0, 0, -3.0))
+outer_obj = Part.show(outer, "OuterFlame")
+outer_obj.ViewObject.ShapeColor = coral
+
+inner = Part.makeCone(0.0, 1.8, 5.2, App.Vector(0, 0, -4.2))
+inner_obj = Part.show(inner, "InnerFlame")
+inner_obj.ViewObject.ShapeColor = flame

index.html

@@ -1,19 +1,166 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="zh-Hant">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>WFreeCAD · tiny part studio</title>
+  <meta name="description" content="A tiny in-browser FreeCAD Python playground. Load a Part macro and orbit the result.">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="vendor/codemirror/codemirror.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header class="topbar">
+    <a class="brand" href="./" aria-label="WFreeCAD 首頁">
+      <span class="brand-mark" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
+          <circle cx="12" cy="12" r="3.1"/>
+          <path d="M12 3v2.6M12 18.4V21M3 12h2.6M18.4 12H21M5.6 5.6l1.9 1.9M16.5 16.5l1.9 1.9M18.4 5.6l-1.9 1.9M7.5 16.5l-1.9 1.9"/>
+        </svg>
+      </span>
+      <span class="brand-name">WFreeCAD</span>
+      <span class="brand-sub">part studio</span>
+    </a>
+
+    <div class="topbar-actions">
+      <div class="runtime" id="runtime" data-state="idle" title="Python 執行環境">
+        <span class="runtime-dot" aria-hidden="true"></span>
+        <span class="runtime-text" id="runtimeText">Python 待命</span>
+      </div>
+      <button class="btn ghost" id="loadBtn" type="button">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 15.5v3A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-3"/>
+        </svg>
+        載入 .py
+      </button>
+      <input type="file" id="fileInput" accept=".py,.txt,text/x-python" hidden>
+    </div>
+  </header>
+
+  <main class="workspace">
+    <aside class="panel examples" aria-label="範例">
+      <div class="panel-head">
+        <h2>範例</h2>
+        <span class="panel-count" id="exampleCount">04</span>
+      </div>
+      <div class="example-list" id="exampleList">
+        <div class="example-skeleton"></div>
+        <div class="example-skeleton"></div>
+        <div class="example-skeleton"></div>
+      </div>
+      <div class="examples-foot">
+        <span class="drop-dot"></span>
+        拖放 .py 到畫布也可以載入
+      </div>
+    </aside>
+
+    <section class="panel editor-panel" aria-label="Python 編輯器">
+      <div class="panel-head">
+        <div class="file-meta">
+          <span class="file-dot" aria-hidden="true"></span>
+          <span class="file-name" id="fileName">未命名.py</span>
+          <span class="state-pill" id="fileState" data-state="example">範例</span>
+        </div>
+        <div class="editor-actions">
+          <button class="icon-btn" id="revertBtn" type="button" title="回到範例程式" aria-label="回到範例程式" disabled>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M4.5 10.5a7.5 7.5 0 1 1 2.1 5.3M4.5 10.5V5.5m0 5h5"/>
+            </svg>
+          </button>
+          <button class="btn run" id="runBtn" type="button" title="執行 (Ctrl / ⌘ + Enter)">
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M8.5 5.4v13.2L19 12 8.5 5.4Z"/>
+            </svg>
+            執行
+            <kbd>⌘↵</kbd>
+          </button>
+        </div>
+      </div>
+      <div class="editor-wrap" id="editorWrap">
+        <textarea id="editor" spellcheck="false" aria-label="Python 程式碼"></textarea>
+      </div>
+      <div class="editor-status">
+        <span class="status-left"><span class="lang-dot"></span>Python · FreeCAD Part API</span>
+        <span class="status-right" id="cursorInfo">Ln 1, Col 1</span>
+      </div>
+    </section>
+
+    <section class="panel preview-panel" aria-label="3D 預覽畫布">
+      <div class="panel-head">
+        <div class="preview-meta">
+          <span class="live-dot" aria-hidden="true"></span>
+          <h2>預覽</h2>
+          <span class="object-count" id="objectCount">0 個物件</span>
+        </div>
+        <div class="view-actions">
+          <button class="icon-btn is-on" id="autoBtn" type="button" title="自動旋轉" aria-label="自動旋轉" aria-pressed="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M20 10.5a8 8 0 0 0-14.6-3M4 13.5a8 8 0 0 0 14.6 3M4 4.5v4h4M20 19.5v-4h-4"/>
+            </svg>
+          </button>
+          <button class="icon-btn" id="resetBtn" type="button" title="重設視角" aria-label="重設視角">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z"/>
+              <path d="m4 7.5 8 4.5 8-4.5M12 12v9"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="canvas-wrap" id="canvasWrap">
+        <canvas id="view" aria-label="3D 模型預覽"></canvas>
+        <div class="canvas-hint" id="canvasHint">
+          <span class="mouse-icon" aria-hidden="true"></span>
+          拖曳旋轉 · 滾輪縮放
+        </div>
+
+        <div class="canvas-loading" id="loadingState" hidden>
+          <span class="spinner" aria-hidden="true"></span>
+          <div>
+            <strong>正在執行 Python</strong>
+            <span id="loadingText">首次執行會下載執行環境…</span>
+          </div>
+        </div>
+
+        <div class="canvas-empty" id="emptyState" hidden>
+          <span class="empty-mark" aria-hidden="true">∅</span>
+          <strong>沒有可顯示的物件</strong>
+          <span id="emptyHint">在程式裡呼叫 <code>Part.show(shape)</code></span>
+        </div>
+
+        <div class="canvas-error" id="errorState" hidden>
+          <div class="error-head">
+            <span>無法執行這段程式</span>
+            <button class="icon-btn tiny" id="dismissError" type="button" aria-label="關閉錯誤">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
+                <path d="m6 6 12 12M18 6 6 18"/>
+              </svg>
+            </button>
+          </div>
+          <pre id="errorText"></pre>
+          <p>支援 FreeCAD / Part 的基本 Part API。</p>
+        </div>
+
+        <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
+      </div>
+    </section>
+  </main>
+
+  <div class="drop-overlay" id="dropOverlay" hidden>
+    <div class="drop-card">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 15.5v3A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5v-3"/>
+      </svg>
+      <strong>放開以載入 .py</strong>
+      <span>檔案會直接開啟在編輯器</span>
+    </div>
+  </div>
+
+  <script src="vendor/codemirror/codemirror.js"></script>
+  <script src="vendor/codemirror/python.js"></script>
+  <script src="vendor/codemirror/closebrackets.js"></script>
+  <script src="vendor/codemirror/matchbrackets.js"></script>
+  <script src="vendor/codemirror/active-line.js"></script>
+  <script type="module" src="app.js"></script>
+</body>
 </html>

scenes/computer.json

@@ -0,0 +1 @@
+{"objects":[{"name":"Monitor","color":[0.89,0.85,0.74],"opacity":1.0,"node":{"op":"box","l":26.0,"w":4.0,"h":17.0,"pnt":[-13.0,-2.0,8.0],"dir":[0,0,1]}},{"name":"Screen","color":[0.08,0.11,0.15],"opacity":1.0,"node":{"op":"box","l":23.0,"w":0.6,"h":14.0,"pnt":[-11.5,-2.4,9.5],"dir":[0,0,1]}},{"name":"StatusLine","color":[0.37,0.63,0.54],"opacity":1.0,"node":{"op":"box","l":20.0,"w":0.12,"h":0.42,"pnt":[-10.0,-2.52,9.0],"dir":[0,0,1]}},{"name":"PowerDot","color":[0.93,0.47,0.34],"opacity":1.0,"node":{"op":"cylinder","r":0.28,"h":0.35,"pnt":[9.9,-2.5,8.6],"dir":[0.0,1.0,0.0],"angle":360.0}},{"name":"Stand","color":[0.78,0.73,0.62],"opacity":1.0,"node":{"op":"cone","r1":2.6,"r2":1.3,"h":6.5,"pnt":[0.0,0.0,1.5],"dir":[0,0,1],"angle":360.0}},{"name":"Foot","color":[0.78,0.73,0.62],"opacity":1.0,"node":{"op":"cylinder","r":6.2,"h":1.5,"pnt":[0.0,0.0,0.0],"dir":[0,0,1],"angle":360.0}},{"name":"Keyboard","color":[0.89,0.85,0.74],"opacity":1.0,"node":{"op":"box","l":24.0,"w":8.0,"h":1.0,"pnt":[-12.0,-11.5,0.0],"dir":[0,0,1]}},{"name":"KeyWell","color":[0.24,0.29,0.32],"opacity":1.0,"node":{"op":"box","l":21.5,"w":6.6,"h":0.32,"pnt":[-10.75,-10.8,1.0],"dir":[0,0,1]}},{"name":"KeyRow","color":[0.42,0.48,0.48],"opacity":1.0,"node":{"op":"box","l":19.0,"w":0.9,"h":0.36,"pnt":[-9.5,-10.1,1.32],"dir":[0,0,1]}},{"name":"KeyRow010","color":[0.42,0.48,0.48],"opacity":1.0,"node":{"op":"box","l":19.0,"w":0.9,"h":0.36,"pnt":[-9.5,-8.75,1.32],"dir":[0,0,1]}},{"name":"KeyRow012","color":[0.42,0.48,0.48],"opacity":1.0,"node":{"op":"box","l":19.0,"w":0.9,"h":0.36,"pnt":[-9.5,-7.3999999999999995,1.32],"dir":[0,0,1]}},{"name":"KeyRow014","color":[0.42,0.48,0.48],"opacity":1.0,"node":{"op":"box","l":19.0,"w":0.9,"h":0.36,"pnt":[-9.5,-6.049999999999999,1.32],"dir":[0,0,1]}},{"name":"KeyRow016","color":[0.42,0.48,0.48],"opacity":1.0,"node":{"op":"box","l":19.0,"w":0.9,"h":0.36,"pnt":[-9.5,-4.699999999999999,1.32],"dir":[0,0,1]}},{"name":"Tower","color":[0.89,0.85,0.74],"opacity":1.0,"node":{"op":"box","l":6.0,"w":9.0,"h":16.0,"pnt":[14.0,-2.0,0.0],"dir":[0,0,1]}},{"name":"Vent","color":[0.24,0.29,0.32],"opacity":1.0,"node":{"op":"box","l":1.2,"w":0.22,"h":8.5,"pnt":[15.4,-2.12,3.2],"dir":[0,0,1]}},{"name":"TowerButton","color":[0.37,0.63,0.54],"opacity":1.0,"node":{"op":"cylinder","r":0.55,"h":0.3,"pnt":[18.1,-2.3,12.6],"dir":[0.0,1.0,0.0],"angle":360.0}}],"errors":[],"log":[]}

scenes/gear.json

@@ -0,0 +1 @@
+{"objects":[{"name":"GearPlate","color":[0.94,0.68,0.32],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"extrude","profile":[[17.156428286968527,-2.7787350420840893],[17.210859034728493,-2.418828494685937],[18.56061303569272,-2.2789567216762574],[20.88783267081867,-2.048069900145029],[21.726945014658973,-1.519295998147049],[21.726945014658973,1.519295998147049],[20.88783267081867,2.048069900145029],[18.56061303569272,2.2789567216762574],[17.210859034728493,2.418828494685937],[17.156428286968527,2.7787350420840893],[17.072152417664608,3.2566872474998934],[17.000205300753542,3.613505186412657],[18.220720211483897,4.2065847162302745],[20.32862338576771,5.2195033518159715],[20.936279737536587,6.003381609694242],[19.89702006745585,8.858724086190929],[18.927661064190527,9.068615695856005],[16.66182200232248,8.489622345129524],[15.34562916388815,8.159415761218781],[15.17138570294929,8.479000875831174],[14.928723008654947,8.899304991450531],[14.739075911198682,9.2099968123731],[15.683139620579428,10.184749954781006],[17.317482101864858,11.857527467882596],[17.620390137486357,12.801962794930066],[15.667220851375824,15.129659308596962],[14.684534190694514,14.995352600133277],[12.753369333168724,13.676314220278487],[11.629489938516956,12.915857066797109],[11.356450097348032,13.156574067227526],[10.984669280315108,13.46853521367864],[10.70019644115994,13.695626897684827],[11.253940932943305,14.934484037884376],[12.217596897661192,17.065358772855014],[12.179221437592869,18.056438330248806],[9.547723577066108,19.57573432839586],[8.670235773157486,19.113428673000044],[7.306672102749422,17.213440759560633],[6.510662593568553,16.11445539237076],[6.171759006653423,16.24727025576273],[5.715702320316577,16.413261314727418],[5.370715362236586,16.52936225320977],[5.467350878315178,17.882898936508763],[5.644089195073197,20.21485595194925],[5.269058886160767,21.133040918291204],[2.2766299299694923,21.660686881120995],[1.6101789623256733,20.9261431637386],[0.9786823817430521,18.67437229991053],[0.6065532526894687,17.369412573591884],[0.2426626942943462,17.378305867281707],[-0.2426626942943441,17.378305867281707],[-0.6065532526894666,17.369412573591884],[-0.9786823817430498,18.67437229991053],[-1.6101789623256706,20.9261431637386],[-2.2766299299694897,21.660686881120995],[-5.269058886160765,21.133040918291204],[-5.644089195073194,20.21485595194925],[-5.467350878315175,17.882898936508763],[-5.370715362236584,16.52936225320977],[-5.715702320316575,16.41326131472742],[-6.171759006653418,16.247270255762732],[-6.510662593568547,16.114455392370765],[-7.306672102749416,17.213440759560633],[-8.67023577315748,19.113428673000044],[-9.547723577066101,19.57573432839586],[-12.179221437592863,18.05643833024881],[-12.217596897661188,17.065358772855017],[-11.253940932943298,14.93448403788438],[-10.70019644115994,13.695626897684829],[-10.984669280315108,13.468535213678642],[-11.356450097348032,13.156574067227526],[-11.629489938516949,12.915857066797114],[-12.753369333168719,13.676314220278488],[-14.684534190694508,14.995352600133282],[-15.667220851375818,15.129659308596965],[-17.620390137486353,12.801962794930068],[-17.317482101864858,11.857527467882598],[-15.683139620579427,10.18474995478101],[-14.739075911198682,9.2099968123731],[-14.928723008654943,8.89930499145054],[-15.171385702949289,8.47900087583118],[-15.345629163888146,8.159415761218787],[-16.661822002322477,8.489622345129526],[-18.927661064190527,9.06861569585601],[-19.897020067455845,8.858724086190934],[-20.936279737536587,6.003381609694244],[-20.32862338576771,5.219503351815973],[-18.220720211483897,4.206584716230279],[-17.000205300753542,3.613505186412657],[-17.072152417664608,3.256687247499893],[-17.156428286968527,2.778735042084088],[-17.21085903472849,2.4188284946859424],[-18.56061303569272,2.278956721676259],[-20.88783267081867,2.0480699001450344],[-21.726945014658973,1.519295998147054],[-21.726945014658973,-1.5192959981470486],[-20.88783267081867,-2.048069900145029],[-18.56061303569272,-2.2789567216762547],[-17.21085903472849,-2.4188284946859384],[-17.15642828696853,-2.7787350420840835],[-17.072152417664608,-3.2566872474998885],[-17.000205300753542,-3.6135051864126524],[-18.220720211483897,-4.2065847162302745],[-20.32862338576771,-5.219503351815968],[-20.936279737536587,-6.003381609694238],[-19.89702006745585,-8.858724086190929],[-18.927661064190527,-9.068615695856005],[-16.66182200232248,-8.489622345129522],[-15.345629163888148,-8.159415761218783],[-15.17138570294929,-8.479000875831176],[-14.928723008654945,-8.899304991450537],[-14.739075911198684,-9.209996812373099],[-15.683139620579428,-10.184749954781006],[-17.31748210186486,-11.857527467882594],[-17.62039013748636,-12.801962794930063],[-15.667220851375822,-15.129659308596963],[-14.68453419069451,-14.995352600133279],[-12.753369333168724,-13.676314220278487],[-11.629489938516954,-12.915857066797113],[-11.356450097348034,-13.156574067227524],[-10.98466928031511,-13.468535213678638],[-10.70019644115995,-13.69562689768482],[-11.253940932943314,-14.934484037884367],[-12.217596897661199,-17.06535877285501],[-12.179221437592876,-18.056438330248803],[-9.547723577066114,-19.575734328395853],[-8.670235773157488,-19.113428673000044],[-7.30667210274942,-17.213440759560633],[-6.510662593568555,-16.11445539237076],[-6.171759006653433,-16.247270255762725],[-5.715702320316573,-16.41326131472742],[-5.370715362236588,-16.52936225320977],[-5.467350878315184,-17.88289893650876],[-5.644089195073199,-20.214855951949247],[-5.269058886160765,-21.133040918291204],[-2.27662992996949,-21.660686881120995],[-1.6101789623256666,-20.9261431637386],[-0.978682381743042,-18.674372299910534],[-0.6065532526894631,-17.369412573591884],[-0.24266269429434834,-17.378305867281707],[0.24266269429434195,-17.378305867281707],[0.6065532526894568,-17.369412573591884],[0.9786823817430351,-18.674372299910534],[1.6101789623256586,-20.9261431637386],[2.276629929969482,-21.660686881120995],[5.2690588861607575,-21.133040918291208],[5.6440891950731915,-20.21485595194925],[5.467350878315177,-17.882898936508763],[5.370715362236583,-16.52936225320977],[5.715702320316566,-16.41326131472742],[6.171759006653426,-16.24727025576273],[6.51066259356855,-16.114455392370765],[7.306672102749414,-17.213440759560637],[8.670235773157481,-19.113428673000044],[9.547723577066106,-19.57573432839586],[12.17922143759287,-18.056438330248806],[12.217596897661195,-17.065358772855014],[11.25394093294331,-14.93448403788437],[10.700196441159944,-13.695626897684823],[10.984669280315106,-13.468535213678642],[11.35645009734803,-13.156574067227528],[11.629489938516947,-12.915857066797116],[12.753369333168713,-13.676314220278497],[14.684534190694507,-14.995352600133284],[15.667220851375816,-15.129659308596969],[17.620390137486353,-12.80196279493007],[17.317482101864858,-11.857527467882601],[15.683139620579428,-10.184749954781005],[14.739075911198682,-9.209996812373102],[14.928723008654941,-8.899304991450542],[15.171385702949287,-8.479000875831181],[15.345629163888143,-8.159415761218796],[16.66182200232247,-8.489622345129543],[18.92766106419052,-9.068615695856021],[19.89702006745584,-8.858724086190945],[20.93627973753658,-6.003381609694255],[20.328623385767706,-5.219503351815984],[18.220720211483897,-4.206584716230282],[17.00020530075354,-3.613505186412666],[17.072152417664604,-3.2566872474999102],[17.156428286968527,-2.7787350420840893]],"vector":[0.0,0.0,6.0]},"b":{"op":"cylinder","r":4.2,"h":8.0,"pnt":[0.0,0.0,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[11.675169794039304,3.7934926229468546,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.516882053166454e-16,12.276,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-11.675169794039304,3.7934926229468555,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-7.215651757142402,-9.931492622946854,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.215651757142398,-9.931492622946855,-1.0],"dir":[0,0,1],"angle":360.0}}},{"name":"Hub","color":[0.27,0.38,0.35],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"cylinder","r":6.8,"h":9.0,"pnt":[0.0,0.0,-1.5],"dir":[0,0,1],"angle":360.0},"b":{"op":"cylinder","r":4.2,"h":11.0,"pnt":[0.0,0.0,-2.5],"dir":[0,0,1],"angle":360.0}}}],"errors":[],"log":[]}

scenes/mug.json

@@ -0,0 +1 @@
+{"objects":[{"name":"MugBody","color":[0.42,0.66,0.58],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"cylinder","r":5.0,"h":9.0,"pnt":[0.0,0.0,0.0],"dir":[0,0,1],"angle":360.0},"b":{"op":"cylinder","r":4.15,"h":8.5,"pnt":[0.0,0.0,0.9],"dir":[0,0,1],"angle":360.0}}},{"name":"Rim","color":[0.91,0.87,0.77],"opacity":1.0,"node":{"op":"torus","r1":4.6,"r2":0.45,"pnt":[0.0,0.0,9.0],"dir":[0,0,1]}},{"name":"Coffee","color":[0.34,0.21,0.13],"opacity":1.0,"node":{"op":"cylinder","r":4.02,"h":0.22,"pnt":[0.0,0.0,8.3],"dir":[0,0,1],"angle":360.0}},{"name":"Handle","color":[0.42,0.66,0.58],"opacity":1.0,"node":{"op":"torus","r1":3.4,"r2":0.9,"pnt":[4.6,0.0,4.6],"dir":[0.0,1.0,0.0]}}],"errors":[],"log":[]}

scenes/rocket.json

@@ -0,0 +1 @@
+{"objects":[{"name":"Body","color":[0.9,0.86,0.76],"opacity":1.0,"node":{"op":"cylinder","r":4.5,"h":16.0,"pnt":[0.0,0.0,3.0],"dir":[0,0,1],"angle":360.0}},{"name":"Nose","color":[0.94,0.47,0.34],"opacity":1.0,"node":{"op":"cone","r1":4.5,"r2":0.2,"h":7.0,"pnt":[0.0,0.0,19.0],"dir":[0,0,1],"angle":360.0}},{"name":"Band","color":[0.94,0.47,0.34],"opacity":1.0,"node":{"op":"cylinder","r":4.58,"h":0.7,"pnt":[0.0,0.0,6.2],"dir":[0,0,1],"angle":360.0}},{"name":"Window","color":[0.09,0.12,0.17],"opacity":1.0,"node":{"op":"cylinder","r":2.0,"h":0.9,"pnt":[0.0,-4.8,12.4],"dir":[0.0,1.0,0.0],"angle":360.0}},{"name":"WindowRim","color":[0.9,0.86,0.76],"opacity":1.0,"node":{"op":"torus","r1":2.2,"r2":0.32,"pnt":[0.0,-4.75,12.4],"dir":[0.0,1.0,0.0]}},{"name":"Fin","color":[0.37,0.63,0.54],"opacity":1.0,"node":{"op":"transform","m":[1.0,0.0,0.0,0.0,0.0,2.220446049250313e-16,1.0,0.0,0.0,-1.0,2.220446049250313e-16,0.0,0.0,-0.4,3.0,1.0],"child":{"op":"extrude","profile":[[4.0,0.0],[9.5,0.0],[4.0,6.5]],"vector":[0.0,0.0,0.8]}}},{"name":"Fin007","color":[0.37,0.63,0.54],"opacity":1.0,"node":{"op":"transform","m":[-0.5,0.8660254037844388,0.0,0.0,-1.6653345369377348e-16,-2.220446049250313e-16,1.0,0.0,0.8660254037844388,0.49999999999999994,0.0,0.0,0.34641016151377557,0.19999999999999993,3.0000000000000004,1.0],"child":{"op":"extrude","profile":[[4.0,0.0],[9.5,0.0],[4.0,6.5]],"vector":[0.0,0.0,0.8]}}},{"name":"Fin009","color":[0.37,0.63,0.54],"opacity":1.0,"node":{"op":"transform","m":[-0.5000000000000004,-0.8660254037844386,0.0,0.0,1.6653345369377348e-16,-2.220446049250313e-16,1.0,0.0,-0.8660254037844385,0.5000000000000004,1.1102230246251565e-16,0.0,-0.34641016151377546,0.2000000000000002,3.0000000000000004,1.0],"child":{"op":"extrude","profile":[[4.0,0.0],[9.5,0.0],[4.0,6.5]],"vector":[0.0,0.0,0.8]}}},{"name":"OuterFlame","color":[0.94,0.47,0.34],"opacity":1.0,"node":{"op":"cone","r1":0.7,"r2":3.6,"h":6.0,"pnt":[0.0,0.0,-3.0],"dir":[0,0,1],"angle":360.0}},{"name":"InnerFlame","color":[1.0,0.8,0.32],"opacity":1.0,"node":{"op":"cone","r1":0.0,"r2":1.8,"h":5.2,"pnt":[0.0,0.0,-4.2],"dir":[0,0,1],"angle":360.0}}],"errors":[],"log":[]}

style.css

@@ -1,28 +1,1404 @@
+:root {
+  --bg: #f1ede4;
+  --bg-deep: #e9e3d6;
+  --panel: #fbf9f3;
+  --panel-2: #f6f2e9;
+  --code-bg: #f8f4eb;
+  --ink: #211e18;
+  --ink-2: #4d473c;
+  --muted: #8d8474;
+  --line: #ded7c8;
+  --line-strong: #cec4b2;
+  --accent: #e4663b;
+  --accent-deep: #c94f29;
+  --accent-ink: #fff8f2;
+  --accent-soft: #f8ddd1;
+  --sage: #3f6d5e;
+  --sage-soft: #e2ece6;
+  --danger: #b5442e;
+  --radius: 14px;
+  --radius-sm: 9px;
+  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: "Avenir Next", "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background: var(--bg);
+  font-family: var(--sans);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow: hidden;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: radial-gradient(rgba(60, 48, 30, 0.035) 0.6px, transparent 0.7px);
+  background-size: 5px 5px;
+  opacity: 0.55;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+svg {
+  display: block;
+}
+
+:focus-visible {
+  outline: 2px solid rgba(228, 102, 59, 0.58);
+  outline-offset: 2px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d0c7b7 transparent;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d0c7b7;
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ------------------------------------------------------------------ */
+/* top bar                                                             */
+/* ------------------------------------------------------------------ */
+
+.topbar {
+  position: relative;
+  z-index: 2;
+  height: 66px;
+  padding: 0 22px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid rgba(206, 196, 178, 0.55);
+  background: linear-gradient(180deg, rgba(251, 249, 243, 0.72), rgba(241, 237, 228, 0.42));
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.brand-mark {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  color: #fff7ef;
+  background: var(--accent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 14px -8px rgba(180, 70, 35, 0.7);
+}
+
+.brand-mark svg {
+  width: 20px;
+  height: 20px;
+}
+
+.brand-name {
+  font-size: 19px;
+  font-weight: 720;
+  letter-spacing: -0.045em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.brand-sub {
+  margin-left: 2px;
+  padding-left: 11px;
+  border-left: 1px solid var(--line-strong);
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.19em;
+  text-transform: uppercase;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+}
+
+.runtime {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.38);
+  color: var(--muted);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
+}
+
+.runtime-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: #b6ad9c;
+  box-shadow: 0 0 0 3px rgba(182, 173, 156, 0.14);
+  transition: background 0.2s, box-shadow 0.2s;
+}
+
+.runtime[data-state="loading"] {
+  color: #9b6b1f;
+  border-color: #e8d6ab;
+  background: #fbf2dd;
+}
+
+.runtime[data-state="loading"] .runtime-dot {
+  background: #d99a32;
+  box-shadow: 0 0 0 3px rgba(217, 154, 50, 0.16);
+  animation: pulse 1.1s ease-in-out infinite;
+}
+
+.runtime[data-state="ready"] {
+  color: var(--sage);
+  border-color: #c9ddd2;
+  background: #eef6f1;
+}
+
+.runtime[data-state="ready"] .runtime-dot {
+  background: #4f8a72;
+  box-shadow: 0 0 0 3px rgba(79, 138, 114, 0.15);
+}
+
+.runtime[data-state="busy"] {
+  color: var(--accent-deep);
+  border-color: #ecc7b6;
+  background: #fdf0e8;
+}
+
+.runtime[data-state="busy"] .runtime-dot {
+  background: var(--accent);
+  box-shadow: 0 0 0 3px rgba(228, 102, 59, 0.14);
+  animation: pulse 1s ease-in-out infinite;
+}
+
+.runtime[data-state="error"] {
+  color: var(--danger);
+  border-color: #e8c2b7;
+  background: #fbebe6;
+}
+
+.runtime[data-state="error"] .runtime-dot {
+  background: #c8553d;
+  box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.14);
+}
+
+/* ------------------------------------------------------------------ */
+/* generic controls                                                    */
+/* ------------------------------------------------------------------ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.005em;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
+}
+
+.btn svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn:disabled {
+  cursor: default;
+  opacity: 0.55;
+  transform: none;
+}
+
+.btn.ghost {
+  border-color: var(--line-strong);
+  background: rgba(255, 255, 255, 0.42);
+  color: var(--ink-2);
+}
+
+.btn.ghost:hover {
+  background: #fffdf8;
+  border-color: #c3b8a4;
+  color: var(--ink);
+}
+
+.btn.run {
+  height: 34px;
+  padding: 0 11px 0 13px;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-ink);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 6px 16px -10px rgba(180, 70, 35, 0.9);
+}
+
+.btn.run:hover {
+  background: var(--accent-deep);
+  border-color: var(--accent-deep);
+}
+
+.btn.run svg {
+  width: 13px;
+  height: 13px;
+}
+
+.btn.run.is-busy svg {
+  display: none;
+}
+
+.btn.run.is-busy::before {
+  content: "";
+  width: 11px;
+  height: 11px;
+  border: 1.5px solid rgba(255, 255, 255, 0.34);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.btn.run kbd {
+  margin-left: 1px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.18);
+  font-family: var(--sans);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  opacity: 0.82;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.icon-btn {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background 0.16s, color 0.16s, border-color 0.16s;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.icon-btn svg {
+  width: 17px;
+  height: 17px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.icon-btn:hover {
+  background: rgba(59, 48, 32, 0.05);
+  color: var(--ink-2);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.icon-btn.is-on {
+  color: var(--sage);
+  background: var(--sage-soft);
+}
+
+.icon-btn.tiny {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+}
+
+.icon-btn.tiny svg {
+  width: 14px;
+  height: 14px;
+}
+
+.icon-btn:disabled {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.icon-btn:disabled:hover {
+  background: transparent;
+  color: var(--muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* workspace panels                                                    */
+/* ------------------------------------------------------------------ */
+
+.workspace {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 1720px;
+  height: calc(100vh - 66px);
+  margin: 0 auto;
+  padding: 14px 18px 18px;
+  display: grid;
+  grid-template-columns: 248px minmax(330px, 0.92fr) minmax(380px, 1.08fr);
+  gap: 14px;
+  min-height: 0;
+}
+
+.panel {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 16px 34px -32px rgba(52, 42, 27, 0.4);
+}
+
+.panel-head {
+  height: 50px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 13px 0 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 680;
+  letter-spacing: 0.03em;
+  color: var(--ink-2);
+}
+
+.panel-count {
+  min-width: 27px;
+  padding: 2px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* examples                                                            */
+/* ------------------------------------------------------------------ */
+
+.examples {
+  background: var(--panel-2);
+}
+
+.example-list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.example-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
+}
+
+.example-card:hover {
+  background: rgba(255, 255, 255, 0.55);
+  border-color: var(--line);
+}
+
+.example-card.is-active {
+  background: #fffdf8;
+  border-color: var(--line-strong);
+  box-shadow: 0 8px 18px -18px rgba(52, 42, 27, 0.6);
+}
+
+.example-card.is-active::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: 17px;
+  bottom: 17px;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: var(--accent);
+}
+
+.example-thumb {
+  width: 58px;
+  height: 58px;
+  flex: none;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #f3eee4;
+}
+
+.example-thumb img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.example-meta {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.example-title {
+  font-size: 13px;
+  font-weight: 680;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+}
+
+.example-sub {
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 9.5px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.example-index {
+  align-self: flex-start;
+  margin-top: 1px;
+  color: #b8ae9d;
+  font-family: var(--mono);
+  font-size: 8.5px;
+  letter-spacing: 0.06em;
+}
+
+.example-chev {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  margin-right: 2px;
+  color: var(--line-strong);
+  opacity: 0;
+  transform: translateX(-3px);
+  transition: opacity 0.16s, transform 0.16s, color 0.16s;
+}
+
+.example-chev svg {
+  width: 14px;
+  height: 14px;
+}
+
+.example-card:hover .example-chev,
+.example-card.is-active .example-chev {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.example-card.is-active .example-chev {
+  color: var(--accent);
+}
+
+.example-skeleton {
+  height: 74px;
+  flex: none;
+  border-radius: 11px;
+  background: linear-gradient(100deg, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.65) 40%, rgba(255, 255, 255, 0.2) 65%);
+  background-size: 200% 100%;
+  border: 1px solid rgba(222, 215, 200, 0.55);
+  animation: shimmer 1.5s linear infinite;
+}
+
+.examples-foot {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 11px 16px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 9.5px;
+  letter-spacing: 0.01em;
+}
+
+.drop-dot {
+  width: 5px;
+  height: 5px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* editor                                                              */
+/* ------------------------------------------------------------------ */
+
+.file-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.file-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.file-name {
+  overflow: hidden;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.state-pill {
+  flex: none;
+  padding: 2px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel-2);
+  color: var(--muted);
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.state-pill[data-state="modified"] {
+  border-color: #eac6b7;
+  background: var(--accent-soft);
+  color: var(--accent-deep);
+}
+
+.state-pill[data-state="upload"] {
+  border-color: #c8ddd2;
+  background: var(--sage-soft);
+  color: var(--sage);
+}
+
+.state-pill[data-state="error"] {
+  border-color: #e8c2b7;
+  background: #fbebe6;
+  color: var(--danger);
+}
+
+.editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.editor-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--code-bg);
+}
+
+.editor-wrap .CodeMirror {
+  height: 100%;
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.68;
+}
+
+.CodeMirror-scroll {
+  padding-bottom: 26px;
+}
+
+.CodeMirror-gutters {
+  border-right: 1px solid rgba(222, 215, 200, 0.72);
+  background: transparent;
+}
+
+.CodeMirror-linenumber {
+  padding: 0 9px 0 12px;
+  color: #b4aa98;
+  font-size: 10px;
+}
+
+.CodeMirror-cursor {
+  border-left: 1.5px solid var(--accent);
+}
+
+.CodeMirror-selected {
+  background: rgba(228, 102, 59, 0.13) !important;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: rgba(228, 102, 59, 0.17) !important;
+}
+
+.CodeMirror-activeline-background {
+  background: rgba(228, 102, 59, 0.032);
+}
+
+.CodeMirror-matchingbracket {
+  color: var(--accent-deep) !important;
+  text-decoration: underline;
+}
+
+.cm-s-default .cm-keyword {
+  color: #b34e2d;
+  font-weight: 600;
+}
+
+.cm-s-default .cm-atom {
+  color: #8b5e2f;
+}
+
+.cm-s-default .cm-number {
+  color: #a34b2c;
+}
+
+.cm-s-default .cm-def {
+  color: var(--sage);
+}
+
+.cm-s-default .cm-variable {
+  color: var(--ink);
+}
+
+.cm-s-default .cm-variable-2 {
+  color: #47647b;
+}
+
+.cm-s-default .cm-property {
+  color: var(--sage);
+}
+
+.cm-s-default .cm-operator {
+  color: #6c6152;
+}
+
+.cm-s-default .cm-comment {
+  color: #9c9282;
+  font-style: italic;
+}
+
+.cm-s-default .cm-string,
+.cm-s-default .cm-string-2 {
+  color: #8a6a2a;
+}
+
+.cm-s-default .cm-builtin {
+  color: var(--sage);
+}
+
+.cm-s-default .cm-meta {
+  color: #8b5e2f;
+}
+
+.editor-status {
+  height: 31px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 13px;
+  border-top: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.34);
+  color: var(--muted);
+  font-size: 9.5px;
+  letter-spacing: 0.02em;
+}
+
+.status-left {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.lang-dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: var(--sage);
+}
+
+.status-right {
+  font-family: var(--mono);
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* preview                                                             */
+/* ------------------------------------------------------------------ */
+
+.preview-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.live-dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: #5b947b;
+  box-shadow: 0 0 0 3px rgba(91, 148, 123, 0.14);
+}
+
+.object-count {
+  padding: 2px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 9.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.view-actions {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.canvas-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: 0 0 var(--radius) var(--radius);
+  background:
+    radial-gradient(90% 90% at 64% 22%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 58%),
+    radial-gradient(100% 100% at 50% 110%, #e6dfd0 0%, #f3eee3 52%, #fbf8f0 100%);
+}
+
+.canvas-wrap::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+  box-shadow: inset 0 0 90px rgba(79, 63, 39, 0.07);
+}
+
+#view {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  outline: none;
+}
+
+.canvas-hint {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 11px;
+  border: 1px solid rgba(206, 196, 178, 0.7);
+  border-radius: 999px;
+  background: rgba(251, 249, 243, 0.64);
+  backdrop-filter: blur(7px);
+  color: #8c8272;
+  font-size: 9.5px;
+  letter-spacing: 0.02em;
+  pointer-events: none;
+  transform: translateX(-50%);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  white-space: nowrap;
+}
+
+.canvas-hint.is-hidden {
+  opacity: 0;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.mouse-icon {
+  position: relative;
+  width: 9px;
+  height: 13px;
+  border: 1.2px solid currentColor;
+  border-radius: 5px;
+}
+
+.mouse-icon::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  width: 1px;
+  height: 3px;
+  border-radius: 1px;
+  background: currentColor;
+  transform: translateX(-50%);
+}
+
+.canvas-loading,
+.canvas-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: rgba(243, 238, 227, 0.68);
+  backdrop-filter: blur(9px);
+  text-align: left;
+}
+
+.canvas-loading[hidden],
+.canvas-empty[hidden],
+.canvas-error[hidden] {
+  display: none;
+}
+
+.canvas-loading > div,
+.canvas-empty {
+  flex-direction: column;
+}
+
+.canvas-loading > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.canvas-loading strong,
+.canvas-empty strong {
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 680;
+  letter-spacing: 0.01em;
+}
+
+.canvas-loading span:not(.spinner),
+.canvas-empty span:not(.empty-mark) {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.canvas-empty code {
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.62);
+  font-family: var(--mono);
+  font-size: 9.5px;
+  color: var(--ink-2);
+}
+
+.empty-mark {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  margin-bottom: 2px;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--line-strong);
+  font-family: var(--mono);
+  font-size: 17px;
+}
+
+.spinner {
+  width: 27px;
+  height: 27px;
+  flex: none;
+  border: 2px solid rgba(228, 102, 59, 0.18);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+.canvas-error {
+  position: absolute;
+  inset: 14px;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 11px 13px 10px;
+  border: 1px solid #e6c7ba;
+  border-radius: 12px;
+  background: rgba(251, 249, 243, 0.975);
+  box-shadow: 0 26px 60px -36px rgba(74, 45, 26, 0.55);
+  backdrop-filter: blur(8px);
+}
+
+.error-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: #a33f2a;
+  font-size: 11.5px;
+  font-weight: 680;
+  letter-spacing: 0.01em;
+}
+
+.canvas-error pre {
+  flex: 1;
+  min-height: 0;
+  margin: 9px 0;
+  padding: 10px;
+  overflow: auto;
+  border: 1px solid #e8dccb;
+  border-radius: 8px;
+  background: #f6efe4;
+  color: #6e3a2c;
+  font-family: var(--mono);
+  font-size: 10px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.canvas-error p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 9.5px;
+}
+
+.toast {
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  z-index: 6;
+  max-width: calc(100% - 32px);
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: #2c2821;
+  color: #fbf8f1;
+  font-size: 10.5px;
+  letter-spacing: 0.01em;
+  text-align: center;
+  box-shadow: 0 12px 30px -18px rgba(24, 19, 12, 0.8);
+  transform: translateX(-50%);
+  animation: toast-in 0.22s ease both;
+}
+
+.toast[data-tone="error"] {
+  background: #8e3a27;
+}
+
+/* ------------------------------------------------------------------ */
+/* drop overlay                                                        */
+/* ------------------------------------------------------------------ */
+
+.drop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: grid;
+  place-items: center;
+  background: rgba(241, 237, 228, 0.76);
+  backdrop-filter: blur(7px);
+}
+
+.drop-overlay[hidden] {
+  display: none;
+}
+
+.drop-card {
+  width: min(420px, 80vw);
+  padding: 36px 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 7px;
+  border: 1.5px dashed var(--accent);
+  border-radius: 18px;
+  background: #fbf8f0;
+  box-shadow: 0 30px 60px -40px rgba(74, 45, 26, 0.5);
+  text-align: center;
+}
+
+.drop-card svg {
+  width: 33px;
+  height: 33px;
+  margin-bottom: 4px;
+  color: var(--accent);
+}
+
+.drop-card strong {
+  font-size: 14px;
+  font-weight: 680;
+}
+
+.drop-card span {
+  color: var(--muted);
+  font-size: 10.5px;
+}
+
+/* ------------------------------------------------------------------ */
+/* motion                                                              */
+/* ------------------------------------------------------------------ */
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.55;
+    transform: scale(0.82);
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 150% 0;
+  }
+  to {
+    background-position: -50% 0;
+  }
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* responsive                                                          */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 1280px) {
+  .workspace {
+    grid-template-columns: 222px minmax(310px, 0.9fr) minmax(350px, 1.1fr);
+    gap: 11px;
+    padding: 12px 14px 14px;
+  }
+
+  .brand-sub {
+    display: none;
+  }
+}
+
+@media (max-width: 1020px) {
+  .workspace {
+    grid-template-columns: 206px minmax(0, 0.92fr) minmax(0, 1.08fr);
+    gap: 9px;
+    padding: 10px 12px 12px;
+  }
+
+  .example-thumb {
+    width: 50px;
+    height: 50px;
+  }
+
+  .example-card {
+    gap: 8px;
+    padding: 6px;
+  }
+
+  .example-sub {
+    display: none;
+  }
+
+  .runtime-text {
+    display: none;
+  }
+
+  .runtime {
+    width: 30px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .btn.run kbd {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  body {
+    overflow: auto;
+  }
+
+  .topbar {
+    height: 58px;
+    padding: 0 14px;
+  }
+
+  .workspace {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px 12px 16px;
+  }
+
+  .examples {
+    flex: none;
+    order: 1;
+  }
+
+  .preview-panel {
+    order: 2;
+    flex: none;
+    height: 52vh;
+    min-height: 320px;
+  }
+
+  .editor-panel {
+    order: 3;
+    flex: none;
+    height: 58vh;
+    min-height: 390px;
+  }
+
+  .examples .panel-head {
+    height: 42px;
+  }
+
+  .example-list {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 8px;
+    gap: 6px;
+  }
+
+  .example-card {
+    width: 196px;
+    flex: 0 0 196px;
+    padding: 6px;
+  }
+
+  .example-card.is-active::before {
+    top: auto;
+    left: 16px;
+    right: 16px;
+    bottom: -1px;
+    width: auto;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+  }
+
+  .example-thumb {
+    width: 44px;
+    height: 44px;
+  }
+
+  .example-chev {
+    display: none;
+  }
+
+  .examples-foot {
+    display: none;
+  }
+
+  .panel-head {
+    height: 46px;
+  }
+
+  .canvas-hint {
+    display: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .topbar {
+    gap: 8px;
+    padding: 0 10px;
+  }
+
+  .brand {
+    gap: 8px;
+  }
+
+  .brand-mark {
+    width: 29px;
+    height: 29px;
+    border-radius: 8px;
+  }
+
+  .brand-name {
+    font-size: 17px;
+  }
+
+  .topbar-actions {
+    gap: 6px;
+  }
+
+  .btn.ghost {
+    height: 32px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+
+  .runtime {
+    display: none;
+  }
+
+  .workspace {
+    padding: 8px 8px 14px;
+    gap: 8px;
+  }
+
+  .preview-panel {
+    height: 46vh;
+    min-height: 280px;
+  }
+
+  .editor-panel {
+    height: 60vh;
+    min-height: 380px;
+  }
+
+  .file-name {
+    max-width: 118px;
+  }
+
+  .state-pill {
+    display: none;
+  }
+
+  .editor-actions .icon-btn {
+    width: 29px;
+    height: 29px;
+  }
+
+  .btn.run {
+    padding: 0 10px;
+  }
+
+  .example-card {
+    width: 166px;
+    flex-basis: 166px;
+  }
+
+  .example-title {
+    font-size: 12px;
+  }
+
+  .example-thumb {
+    width: 40px;
+    height: 40px;
+  }
+
+  .object-count {
+    display: none;
+  }
+
+  .canvas-error {
+    inset: 9px;
+  }
 }

vendor/codemirror/active-line.js

@@ -0,0 +1,72 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/5/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+  var WRAP_CLASS = "CodeMirror-activeline";
+  var BACK_CLASS = "CodeMirror-activeline-background";
+  var GUTT_CLASS = "CodeMirror-activeline-gutter";
+
+  CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
+    var prev = old == CodeMirror.Init ? false : old;
+    if (val == prev) return
+    if (prev) {
+      cm.off("beforeSelectionChange", selectionChange);
+      clearActiveLines(cm);
+      delete cm.state.activeLines;
+    }
+    if (val) {
+      cm.state.activeLines = [];
+      updateActiveLines(cm, cm.listSelections());
+      cm.on("beforeSelectionChange", selectionChange);
+    }
+  });
+
+  function clearActiveLines(cm) {
+    for (var i = 0; i < cm.state.activeLines.length; i++) {
+      cm.removeLineClass(cm.state.activeLines[i], "wrap", WRAP_CLASS);
+      cm.removeLineClass(cm.state.activeLines[i], "background", BACK_CLASS);
+      cm.removeLineClass(cm.state.activeLines[i], "gutter", GUTT_CLASS);
+    }
+  }
+
+  function sameArray(a, b) {
+    if (a.length != b.length) return false;
+    for (var i = 0; i < a.length; i++)
+      if (a[i] != b[i]) return false;
+    return true;
+  }
+
+  function updateActiveLines(cm, ranges) {
+    var active = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i];
+      var option = cm.getOption("styleActiveLine");
+      if (typeof option == "object" && option.nonEmpty ? range.anchor.line != range.head.line : !range.empty())
+        continue
+      var line = cm.getLineHandleVisualStart(range.head.line);
+      if (active[active.length - 1] != line) active.push(line);
+    }
+    if (sameArray(cm.state.activeLines, active)) return;
+    cm.operation(function() {
+      clearActiveLines(cm);
+      for (var i = 0; i < active.length; i++) {
+        cm.addLineClass(active[i], "wrap", WRAP_CLASS);
+        cm.addLineClass(active[i], "background", BACK_CLASS);
+        cm.addLineClass(active[i], "gutter", GUTT_CLASS);
+      }
+      cm.state.activeLines = active;
+    });
+  }
+
+  function selectionChange(cm, sel) {
+    updateActiveLines(cm, sel.ranges);
+  }
+});

vendor/codemirror/closebrackets.js

@@ -0,0 +1,201 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/5/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  var defaults = {
+    pairs: "()[]{}''\"\"",
+    closeBefore: ")]}'\":;>",
+    triples: "",
+    explode: "[]{}"
+  };
+
+  var Pos = CodeMirror.Pos;
+
+  CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init) {
+      cm.removeKeyMap(keyMap);
+      cm.state.closeBrackets = null;
+    }
+    if (val) {
+      ensureBound(getOption(val, "pairs"))
+      cm.state.closeBrackets = val;
+      cm.addKeyMap(keyMap);
+    }
+  });
+
+  function getOption(conf, name) {
+    if (name == "pairs" && typeof conf == "string") return conf;
+    if (typeof conf == "object" && conf[name] != null) return conf[name];
+    return defaults[name];
+  }
+
+  var keyMap = {Backspace: handleBackspace, Enter: handleEnter};
+  function ensureBound(chars) {
+    for (var i = 0; i < chars.length; i++) {
+      var ch = chars.charAt(i), key = "'" + ch + "'"
+      if (!keyMap[key]) keyMap[key] = handler(ch)
+    }
+  }
+  ensureBound(defaults.pairs + "`")
+
+  function handler(ch) {
+    return function(cm) { return handleChar(cm, ch); };
+  }
+
+  function getConfig(cm) {
+    var deflt = cm.state.closeBrackets;
+    if (!deflt || deflt.override) return deflt;
+    var mode = cm.getModeAt(cm.getCursor());
+    return mode.closeBrackets || deflt;
+  }
+
+  function handleBackspace(cm) {
+    var conf = getConfig(cm);
+    if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var pairs = getOption(conf, "pairs");
+    var ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      if (!ranges[i].empty()) return CodeMirror.Pass;
+      var around = charsAround(cm, ranges[i].head);
+      if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
+    }
+    for (var i = ranges.length - 1; i >= 0; i--) {
+      var cur = ranges[i].head;
+      cm.replaceRange("", Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1), "+delete");
+    }
+  }
+
+  function handleEnter(cm) {
+    var conf = getConfig(cm);
+    var explode = conf && getOption(conf, "explode");
+    if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      if (!ranges[i].empty()) return CodeMirror.Pass;
+      var around = charsAround(cm, ranges[i].head);
+      if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass;
+    }
+    cm.operation(function() {
+      var linesep = cm.lineSeparator() || "\n";
+      cm.replaceSelection(linesep + linesep, null);
+      moveSel(cm, -1)
+      ranges = cm.listSelections();
+      for (var i = 0; i < ranges.length; i++) {
+        var line = ranges[i].head.line;
+        cm.indentLine(line, null, true);
+        cm.indentLine(line + 1, null, true);
+      }
+    });
+  }
+
+  function moveSel(cm, dir) {
+    var newRanges = [], ranges = cm.listSelections(), primary = 0
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i]
+      if (range.head == cm.getCursor()) primary = i
+      var pos = range.head.ch || dir > 0 ? {line: range.head.line, ch: range.head.ch + dir} : {line: range.head.line - 1}
+      newRanges.push({anchor: pos, head: pos})
+    }
+    cm.setSelections(newRanges, primary)
+  }
+
+  function contractSelection(sel) {
+    var inverted = CodeMirror.cmpPos(sel.anchor, sel.head) > 0;
+    return {anchor: new Pos(sel.anchor.line, sel.anchor.ch + (inverted ? -1 : 1)),
+            head: new Pos(sel.head.line, sel.head.ch + (inverted ? 1 : -1))};
+  }
+
+  function handleChar(cm, ch) {
+    var conf = getConfig(cm);
+    if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var pairs = getOption(conf, "pairs");
+    var pos = pairs.indexOf(ch);
+    if (pos == -1) return CodeMirror.Pass;
+
+    var closeBefore = getOption(conf,"closeBefore");
+
+    var triples = getOption(conf, "triples");
+
+    var identical = pairs.charAt(pos + 1) == ch;
+    var ranges = cm.listSelections();
+    var opening = pos % 2 == 0;
+
+    var type;
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i], cur = range.head, curType;
+      var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1));
+      if (opening && !range.empty()) {
+        curType = "surround";
+      } else if ((identical || !opening) && next == ch) {
+        if (identical && stringStartsAfter(cm, cur))
+          curType = "both";
+        else if (triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch)
+          curType = "skipThree";
+        else
+          curType = "skip";
+      } else if (identical && cur.ch > 1 && triples.indexOf(ch) >= 0 &&
+                 cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch) {
+        if (cur.ch > 2 && /\bstring/.test(cm.getTokenTypeAt(Pos(cur.line, cur.ch - 2)))) return CodeMirror.Pass;
+        curType = "addFour";
+      } else if (identical) {
+        var prev = cur.ch == 0 ? " " : cm.getRange(Pos(cur.line, cur.ch - 1), cur)
+        if (!CodeMirror.isWordChar(next) && prev != ch && !CodeMirror.isWordChar(prev)) curType = "both";
+        else return CodeMirror.Pass;
+      } else if (opening && (next.length === 0 || /\s/.test(next) || closeBefore.indexOf(next) > -1)) {
+        curType = "both";
+      } else {
+        return CodeMirror.Pass;
+      }
+      if (!type) type = curType;
+      else if (type != curType) return CodeMirror.Pass;
+    }
+
+    var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
+    var right = pos % 2 ? ch : pairs.charAt(pos + 1);
+    cm.operation(function() {
+      if (type == "skip") {
+        moveSel(cm, 1)
+      } else if (type == "skipThree") {
+        moveSel(cm, 3)
+      } else if (type == "surround") {
+        var sels = cm.getSelections();
+        for (var i = 0; i < sels.length; i++)
+          sels[i] = left + sels[i] + right;
+        cm.replaceSelections(sels, "around");
+        sels = cm.listSelections().slice();
+        for (var i = 0; i < sels.length; i++)
+          sels[i] = contractSelection(sels[i]);
+        cm.setSelections(sels);
+      } else if (type == "both") {
+        cm.replaceSelection(left + right, null);
+        cm.triggerElectric(left + right);
+        moveSel(cm, -1)
+      } else if (type == "addFour") {
+        cm.replaceSelection(left + left + left + left, "before");
+        moveSel(cm, 1)
+      }
+    });
+  }
+
+  function charsAround(cm, pos) {
+    var str = cm.getRange(Pos(pos.line, pos.ch - 1),
+                          Pos(pos.line, pos.ch + 1));
+    return str.length == 2 ? str : null;
+  }
+
+  function stringStartsAfter(cm, pos) {
+    var token = cm.getTokenAt(Pos(pos.line, pos.ch + 1))
+    return /\bstring/.test(token.type) && token.start == pos.ch &&
+      (pos.ch == 0 || !/\bstring/.test(cm.getTokenTypeAt(pos)))
+  }
+});

vendor/codemirror/codemirror.css

@@ -0,0 +1,344 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line > span::selection, 
+.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+.cm-fat-cursor { caret-color: transparent; }
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: 0;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 50px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -50px; margin-right: -50px;
+  padding-bottom: 50px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  z-index: 0;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 50px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+  outline: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -50px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

vendor/codemirror/matchbrackets.js

@@ -0,0 +1,160 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/5/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
+    (document.documentMode == null || document.documentMode < 8);
+
+  var Pos = CodeMirror.Pos;
+
+  var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<", "<": ">>", ">": "<<"};
+
+  function bracketRegex(config) {
+    return config && config.bracketRegex || /[(){}[\]]/
+  }
+
+  function findMatchingBracket(cm, where, config) {
+    var line = cm.getLineHandle(where.line), pos = where.ch - 1;
+    var afterCursor = config && config.afterCursor
+    if (afterCursor == null)
+      afterCursor = /(^| )cm-fat-cursor($| )/.test(cm.getWrapperElement().className)
+    var re = bracketRegex(config)
+
+    // A cursor is defined as between two characters, but in vim command mode
+    // (i.e. not insert mode), the cursor is visually represented as a
+    // highlighted box on top of the 2nd character. Otherwise, we allow matches
+    // from before or after the cursor.
+    var match = (!afterCursor && pos >= 0 && re.test(line.text.charAt(pos)) && matching[line.text.charAt(pos)]) ||
+        re.test(line.text.charAt(pos + 1)) && matching[line.text.charAt(++pos)];
+    if (!match) return null;
+    var dir = match.charAt(1) == ">" ? 1 : -1;
+    if (config && config.strict && (dir > 0) != (pos == where.ch)) return null;
+    var style = cm.getTokenTypeAt(Pos(where.line, pos + 1));
+
+    var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, style, config);
+    if (found == null) return null;
+    return {from: Pos(where.line, pos), to: found && found.pos,
+            match: found && found.ch == match.charAt(0), forward: dir > 0};
+  }
+
+  // bracketRegex is used to specify which type of bracket to scan
+  // should be a regexp, e.g. /[[\]]/
+  //
+  // Note: If "where" is on an open bracket, then this bracket is ignored.
+  //
+  // Returns false when no bracket was found, null when it reached
+  // maxScanLines and gave up
+  function scanForBracket(cm, where, dir, style, config) {
+    var maxScanLen = (config && config.maxScanLineLength) || 10000;
+    var maxScanLines = (config && config.maxScanLines) || 1000;
+
+    var stack = [];
+    var re = bracketRegex(config)
+    var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1)
+                          : Math.max(cm.firstLine() - 1, where.line - maxScanLines);
+    for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) {
+      var line = cm.getLine(lineNo);
+      if (!line) continue;
+      var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1;
+      if (line.length > maxScanLen) continue;
+      if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0);
+      for (; pos != end; pos += dir) {
+        var ch = line.charAt(pos);
+        if (re.test(ch) && (style === undefined ||
+                            (cm.getTokenTypeAt(Pos(lineNo, pos + 1)) || "") == (style || ""))) {
+          var match = matching[ch];
+          if (match && (match.charAt(1) == ">") == (dir > 0)) stack.push(ch);
+          else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch};
+          else stack.pop();
+        }
+      }
+    }
+    return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null;
+  }
+
+  function matchBrackets(cm, autoclear, config) {
+    // Disable brace matching in long lines, since it'll cause hugely slow updates
+    var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000,
+      highlightNonMatching = config && config.highlightNonMatching;
+    var marks = [], ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, config);
+      if (match && (match.match || highlightNonMatching !== false) && cm.getLine(match.from.line).length <= maxHighlightLen) {
+        var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+        marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style}));
+        if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen)
+          marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style}));
+      }
+    }
+
+    if (marks.length) {
+      // Kludge to work around the IE bug from issue #1193, where text
+      // input stops going to the textarea whenever this fires.
+      if (ie_lt8 && cm.state.focused) cm.focus();
+
+      var clear = function() {
+        cm.operation(function() {
+          for (var i = 0; i < marks.length; i++) marks[i].clear();
+        });
+      };
+      if (autoclear) setTimeout(clear, 800);
+      else return clear;
+    }
+  }
+
+  function doMatchBrackets(cm) {
+    cm.operation(function() {
+      if (cm.state.matchBrackets.currentlyHighlighted) {
+        cm.state.matchBrackets.currentlyHighlighted();
+        cm.state.matchBrackets.currentlyHighlighted = null;
+      }
+      cm.state.matchBrackets.currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets);
+    });
+  }
+
+  function clearHighlighted(cm) {
+    if (cm.state.matchBrackets && cm.state.matchBrackets.currentlyHighlighted) {
+      cm.state.matchBrackets.currentlyHighlighted();
+      cm.state.matchBrackets.currentlyHighlighted = null;
+    }
+  }
+
+  CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init) {
+      cm.off("cursorActivity", doMatchBrackets);
+      cm.off("focus", doMatchBrackets)
+      cm.off("blur", clearHighlighted)
+      clearHighlighted(cm);
+    }
+    if (val) {
+      cm.state.matchBrackets = typeof val == "object" ? val : {};
+      cm.on("cursorActivity", doMatchBrackets);
+      cm.on("focus", doMatchBrackets)
+      cm.on("blur", clearHighlighted)
+    }
+  });
+
+  CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
+  CodeMirror.defineExtension("findMatchingBracket", function(pos, config, oldConfig){
+    // Backwards-compatibility kludge
+    if (oldConfig || typeof config == "boolean") {
+      if (!oldConfig) {
+        config = config ? {strict: true} : null
+      } else {
+        oldConfig.strict = config
+        config = oldConfig
+      }
+    }
+    return findMatchingBracket(this, pos, config)
+  });
+  CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){
+    return scanForBracket(this, pos, dir, style, config);
+  });
+});

vendor/codemirror/python.js

@@ -0,0 +1,402 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/5/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
+  function wordRegexp(words) {
+    return new RegExp("^((" + words.join(")|(") + "))\\b");
+  }
+
+  var wordOperators = wordRegexp(["and", "or", "not", "is"]);
+  var commonKeywords = ["as", "assert", "break", "class", "continue",
+                        "def", "del", "elif", "else", "except", "finally",
+                        "for", "from", "global", "if", "import",
+                        "lambda", "pass", "raise", "return",
+                        "try", "while", "with", "yield", "in", "False", "True"];
+  var commonBuiltins = ["abs", "all", "any", "bin", "bool", "bytearray", "callable", "chr",
+                        "classmethod", "compile", "complex", "delattr", "dict", "dir", "divmod",
+                        "enumerate", "eval", "filter", "float", "format", "frozenset",
+                        "getattr", "globals", "hasattr", "hash", "help", "hex", "id",
+                        "input", "int", "isinstance", "issubclass", "iter", "len",
+                        "list", "locals", "map", "max", "memoryview", "min", "next",
+                        "object", "oct", "open", "ord", "pow", "property", "range",
+                        "repr", "reversed", "round", "set", "setattr", "slice",
+                        "sorted", "staticmethod", "str", "sum", "super", "tuple",
+                        "type", "vars", "zip", "__import__", "NotImplemented",
+                        "Ellipsis", "__debug__"];
+  CodeMirror.registerHelper("hintWords", "python", commonKeywords.concat(commonBuiltins).concat(["exec", "print"]));
+
+  function top(state) {
+    return state.scopes[state.scopes.length - 1];
+  }
+
+  CodeMirror.defineMode("python", function(conf, parserConf) {
+    var ERRORCLASS = "error";
+
+    var delimiters = parserConf.delimiters || parserConf.singleDelimiters || /^[\(\)\[\]\{\}@,:`=;\.\\]/;
+    //               (Backwards-compatibility with old, cumbersome config system)
+    var operators = [parserConf.singleOperators, parserConf.doubleOperators, parserConf.doubleDelimiters, parserConf.tripleDelimiters,
+                     parserConf.operators || /^([-+*/%\/&|^]=?|[<>=]+|\/\/=?|\*\*=?|!=|[~!@]|\.\.\.)/]
+    for (var i = 0; i < operators.length; i++) if (!operators[i]) operators.splice(i--, 1)
+
+    var hangingIndent = parserConf.hangingIndent || conf.indentUnit;
+
+    var myKeywords = commonKeywords, myBuiltins = commonBuiltins;
+    if (parserConf.extra_keywords != undefined)
+      myKeywords = myKeywords.concat(parserConf.extra_keywords);
+
+    if (parserConf.extra_builtins != undefined)
+      myBuiltins = myBuiltins.concat(parserConf.extra_builtins);
+
+    var py3 = !(parserConf.version && Number(parserConf.version) < 3)
+    if (py3) {
+      // since http://legacy.python.org/dev/peps/pep-0465/ @ is also an operator
+      var identifiers = parserConf.identifiers|| /^[_A-Za-z\u00A1-\uFFFF][_A-Za-z0-9\u00A1-\uFFFF]*/;
+      myKeywords = myKeywords.concat(["nonlocal", "None", "aiter", "anext", "async", "await", "breakpoint", "match", "case"]);
+      myBuiltins = myBuiltins.concat(["ascii", "bytes", "exec", "print"]);
+      var stringPrefixes = new RegExp("^(([rbuf]|(br)|(rb)|(fr)|(rf))?('{3}|\"{3}|['\"]))", "i");
+    } else {
+      var identifiers = parserConf.identifiers|| /^[_A-Za-z][_A-Za-z0-9]*/;
+      myKeywords = myKeywords.concat(["exec", "print"]);
+      myBuiltins = myBuiltins.concat(["apply", "basestring", "buffer", "cmp", "coerce", "execfile",
+                                      "file", "intern", "long", "raw_input", "reduce", "reload",
+                                      "unichr", "unicode", "xrange", "None"]);
+      var stringPrefixes = new RegExp("^(([rubf]|(ur)|(br))?('{3}|\"{3}|['\"]))", "i");
+    }
+    var keywords = wordRegexp(myKeywords);
+    var builtins = wordRegexp(myBuiltins);
+
+    // tokenizers
+    function tokenBase(stream, state) {
+      var sol = stream.sol() && state.lastToken != "\\"
+      if (sol) state.indent = stream.indentation()
+      // Handle scope changes
+      if (sol && top(state).type == "py") {
+        var scopeOffset = top(state).offset;
+        if (stream.eatSpace()) {
+          var lineOffset = stream.indentation();
+          if (lineOffset > scopeOffset)
+            pushPyScope(state);
+          else if (lineOffset < scopeOffset && dedent(stream, state) && stream.peek() != "#")
+            state.errorToken = true;
+          return null;
+        } else {
+          var style = tokenBaseInner(stream, state);
+          if (scopeOffset > 0 && dedent(stream, state))
+            style += " " + ERRORCLASS;
+          return style;
+        }
+      }
+      return tokenBaseInner(stream, state);
+    }
+
+    function tokenBaseInner(stream, state, inFormat) {
+      if (stream.eatSpace()) return null;
+
+      // Handle Comments
+      if (!inFormat && stream.match(/^#.*/)) return "comment";
+
+      // Handle Number Literals
+      if (stream.match(/^[0-9\.]/, false)) {
+        var floatLiteral = false;
+        // Floats
+        if (stream.match(/^[\d_]*\.\d+(e[\+\-]?\d+)?/i)) { floatLiteral = true; }
+        if (stream.match(/^[\d_]+\.\d*/)) { floatLiteral = true; }
+        if (stream.match(/^\.\d+/)) { floatLiteral = true; }
+        if (floatLiteral) {
+          // Float literals may be "imaginary"
+          stream.eat(/J/i);
+          return "number";
+        }
+        // Integers
+        var intLiteral = false;
+        // Hex
+        if (stream.match(/^0x[0-9a-f_]+/i)) intLiteral = true;
+        // Binary
+        if (stream.match(/^0b[01_]+/i)) intLiteral = true;
+        // Octal
+        if (stream.match(/^0o[0-7_]+/i)) intLiteral = true;
+        // Decimal
+        if (stream.match(/^[1-9][\d_]*(e[\+\-]?[\d_]+)?/)) {
+          // Decimal literals may be "imaginary"
+          stream.eat(/J/i);
+          // TODO - Can you have imaginary longs?
+          intLiteral = true;
+        }
+        // Zero by itself with no other piece of number.
+        if (stream.match(/^0(?![\dx])/i)) intLiteral = true;
+        if (intLiteral) {
+          // Integer literals may be "long"
+          stream.eat(/L/i);
+          return "number";
+        }
+      }
+
+      // Handle Strings
+      if (stream.match(stringPrefixes)) {
+        var isFmtString = stream.current().toLowerCase().indexOf('f') !== -1;
+        if (!isFmtString) {
+          state.tokenize = tokenStringFactory(stream.current(), state.tokenize);
+          return state.tokenize(stream, state);
+        } else {
+          state.tokenize = formatStringFactory(stream.current(), state.tokenize);
+          return state.tokenize(stream, state);
+        }
+      }
+
+      for (var i = 0; i < operators.length; i++)
+        if (stream.match(operators[i])) return "operator"
+
+      if (stream.match(delimiters)) return "punctuation";
+
+      if (state.lastToken == "." && stream.match(identifiers))
+        return "property";
+
+      if (stream.match(keywords) || stream.match(wordOperators))
+        return "keyword";
+
+      if (stream.match(builtins))
+        return "builtin";
+
+      if (stream.match(/^(self|cls)\b/))
+        return "variable-2";
+
+      if (stream.match(identifiers)) {
+        if (state.lastToken == "def" || state.lastToken == "class")
+          return "def";
+        return "variable";
+      }
+
+      // Handle non-detected items
+      stream.next();
+      return inFormat ? null :ERRORCLASS;
+    }
+
+    function formatStringFactory(delimiter, tokenOuter) {
+      while ("rubf".indexOf(delimiter.charAt(0).toLowerCase()) >= 0)
+        delimiter = delimiter.substr(1);
+
+      var singleline = delimiter.length == 1;
+      var OUTCLASS = "string";
+
+      function tokenNestedExpr(depth) {
+        return function(stream, state) {
+          var inner = tokenBaseInner(stream, state, true)
+          if (inner == "punctuation") {
+            if (stream.current() == "{") {
+              state.tokenize = tokenNestedExpr(depth + 1)
+            } else if (stream.current() == "}") {
+              if (depth > 1) state.tokenize = tokenNestedExpr(depth - 1)
+              else state.tokenize = tokenString
+            }
+          }
+          return inner
+        }
+      }
+
+      function tokenString(stream, state) {
+        while (!stream.eol()) {
+          stream.eatWhile(/[^'"\{\}\\]/);
+          if (stream.eat("\\")) {
+            stream.next();
+            if (singleline && stream.eol())
+              return OUTCLASS;
+          } else if (stream.match(delimiter)) {
+            state.tokenize = tokenOuter;
+            return OUTCLASS;
+          } else if (stream.match('{{')) {
+            // ignore {{ in f-str
+            return OUTCLASS;
+          } else if (stream.match('{', false)) {
+            // switch to nested mode
+            state.tokenize = tokenNestedExpr(0)
+            if (stream.current()) return OUTCLASS;
+            else return state.tokenize(stream, state)
+          } else if (stream.match('}}')) {
+            return OUTCLASS;
+          } else if (stream.match('}')) {
+            // single } in f-string is an error
+            return ERRORCLASS;
+          } else {
+            stream.eat(/['"]/);
+          }
+        }
+        if (singleline) {
+          if (parserConf.singleLineStringErrors)
+            return ERRORCLASS;
+          else
+            state.tokenize = tokenOuter;
+        }
+        return OUTCLASS;
+      }
+      tokenString.isString = true;
+      return tokenString;
+    }
+
+    function tokenStringFactory(delimiter, tokenOuter) {
+      while ("rubf".indexOf(delimiter.charAt(0).toLowerCase()) >= 0)
+        delimiter = delimiter.substr(1);
+
+      var singleline = delimiter.length == 1;
+      var OUTCLASS = "string";
+
+      function tokenString(stream, state) {
+        while (!stream.eol()) {
+          stream.eatWhile(/[^'"\\]/);
+          if (stream.eat("\\")) {
+            stream.next();
+            if (singleline && stream.eol())
+              return OUTCLASS;
+          } else if (stream.match(delimiter)) {
+            state.tokenize = tokenOuter;
+            return OUTCLASS;
+          } else {
+            stream.eat(/['"]/);
+          }
+        }
+        if (singleline) {
+          if (parserConf.singleLineStringErrors)
+            return ERRORCLASS;
+          else
+            state.tokenize = tokenOuter;
+        }
+        return OUTCLASS;
+      }
+      tokenString.isString = true;
+      return tokenString;
+    }
+
+    function pushPyScope(state) {
+      while (top(state).type != "py") state.scopes.pop()
+      state.scopes.push({offset: top(state).offset + conf.indentUnit,
+                         type: "py",
+                         align: null})
+    }
+
+    function pushBracketScope(stream, state, type) {
+      var align = stream.match(/^[\s\[\{\(]*(?:#|$)/, false) ? null : stream.column() + 1
+      state.scopes.push({offset: state.indent + hangingIndent,
+                         type: type,
+                         align: align})
+    }
+
+    function dedent(stream, state) {
+      var indented = stream.indentation();
+      while (state.scopes.length > 1 && top(state).offset > indented) {
+        if (top(state).type != "py") return true;
+        state.scopes.pop();
+      }
+      return top(state).offset != indented;
+    }
+
+    function tokenLexer(stream, state) {
+      if (stream.sol()) {
+        state.beginningOfLine = true;
+        state.dedent = false;
+      }
+
+      var style = state.tokenize(stream, state);
+      var current = stream.current();
+
+      // Handle decorators
+      if (state.beginningOfLine && current == "@")
+        return stream.match(identifiers, false) ? "meta" : py3 ? "operator" : ERRORCLASS;
+
+      if (/\S/.test(current)) state.beginningOfLine = false;
+
+      if ((style == "variable" || style == "builtin")
+          && state.lastToken == "meta")
+        style = "meta";
+
+      // Handle scope changes.
+      if (current == "pass" || current == "return")
+        state.dedent = true;
+
+      if (current == "lambda") state.lambda = true;
+      if (current == ":" && !state.lambda && top(state).type == "py" && stream.match(/^\s*(?:#|$)/, false))
+        pushPyScope(state);
+
+      if (current.length == 1 && !/string|comment/.test(style)) {
+        var delimiter_index = "[({".indexOf(current);
+        if (delimiter_index != -1)
+          pushBracketScope(stream, state, "])}".slice(delimiter_index, delimiter_index+1));
+
+        delimiter_index = "])}".indexOf(current);
+        if (delimiter_index != -1) {
+          if (top(state).type == current) state.indent = state.scopes.pop().offset - hangingIndent
+          else return ERRORCLASS;
+        }
+      }
+      if (state.dedent && stream.eol() && top(state).type == "py" && state.scopes.length > 1)
+        state.scopes.pop();
+
+      return style;
+    }
+
+    var external = {
+      startState: function(basecolumn) {
+        return {
+          tokenize: tokenBase,
+          scopes: [{offset: basecolumn || 0, type: "py", align: null}],
+          indent: basecolumn || 0,
+          lastToken: null,
+          lambda: false,
+          dedent: 0
+        };
+      },
+
+      token: function(stream, state) {
+        var addErr = state.errorToken;
+        if (addErr) state.errorToken = false;
+        var style = tokenLexer(stream, state);
+
+        if (style && style != "comment")
+          state.lastToken = (style == "keyword" || style == "punctuation") ? stream.current() : style;
+        if (style == "punctuation") style = null;
+
+        if (stream.eol() && state.lambda)
+          state.lambda = false;
+        return addErr ? style + " " + ERRORCLASS : style;
+      },
+
+      indent: function(state, textAfter) {
+        if (state.tokenize != tokenBase)
+          return state.tokenize.isString ? CodeMirror.Pass : 0;
+
+        var scope = top(state)
+        var closing = scope.type == textAfter.charAt(0) ||
+            scope.type == "py" && !state.dedent && /^(else:|elif |except |finally:)/.test(textAfter)
+        if (scope.align != null)
+          return scope.align - (closing ? 1 : 0)
+        else
+          return scope.offset - (closing ? hangingIndent : 0)
+      },
+
+      electricInput: /^\s*([\}\]\)]|else:|elif |except |finally:)$/,
+      closeBrackets: {triples: "'\""},
+      lineComment: "#",
+      fold: "indent"
+    };
+    return external;
+  });
+
+  CodeMirror.defineMIME("text/x-python", "python");
+
+  var words = function(str) { return str.split(" "); };
+
+  CodeMirror.defineMIME("text/x-cython", {
+    name: "python",
+    extra_keywords: words("by cdef cimport cpdef ctypedef enum except "+
+                          "extern gil include nogil property public "+
+                          "readonly struct union DEF IF ELIF ELSE")
+  });
+
+});

viewer.js

@@ -0,0 +1,559 @@
+import {
+  THREE,
+  OrbitControls,
+  mergeGeometries,
+  Brush,
+  Evaluator,
+  SUBTRACTION,
+  INTERSECTION,
+} from './vendor/engine.js';
+
+const Z = new THREE.Vector3(0, 0, 1);
+
+function disposeObject(object) {
+  object.traverse((child) => {
+    if (child.geometry) child.geometry.dispose();
+    if (child.material) {
+      const materials = Array.isArray(child.material) ? child.material : [child.material];
+      for (const material of materials) material.dispose();
+    }
+  });
+}
+
+function cleanPoints(raw) {
+  const points = [];
+  for (const p of raw || []) {
+    const v = new THREE.Vector2(Number(p[0]) || 0, Number(p[1]) || 0);
+    if (points.length === 0 || points[points.length - 1].distanceToSquared(v) > 1e-12) {
+      points.push(v);
+    }
+  }
+  if (points.length > 1 && points[0].distanceToSquared(points[points.length - 1]) < 1e-12) {
+    points.pop();
+  }
+  let area = 0;
+  for (let i = 0; i < points.length; i += 1) {
+    const a = points[i];
+    const b = points[(i + 1) % points.length];
+    area += a.x * b.y - b.x * a.y;
+  }
+  if (area < 0) points.reverse();
+  return points;
+}
+
+function cleanGeometry(geometry) {
+  let g = geometry.index ? geometry.toNonIndexed() : geometry;
+  for (const name of Object.keys(g.attributes)) {
+    if (name !== 'position' && name !== 'normal') g.deleteAttribute(name);
+  }
+  if (!g.attributes.normal) g.computeVertexNormals();
+  return g;
+}
+
+function orientAlong(geometry, dirArray, pointArray) {
+  const dir = new THREE.Vector3().fromArray(dirArray || [0, 0, 1]);
+  if (dir.lengthSq() < 1e-12) dir.set(0, 0, 1);
+  dir.normalize();
+  if (Math.abs(dir.z - 1) > 1e-8) {
+    const q = new THREE.Quaternion().setFromUnitVectors(Z, dir);
+    geometry.applyQuaternion(q);
+  }
+  const p = pointArray || [0, 0, 0];
+  geometry.translate(p[0] || 0, p[1] || 0, p[2] || 0);
+}
+
+function primitive(node) {
+  let geometry;
+  const segments = 48;
+  switch (node.op) {
+    case 'box': {
+      const l = Math.max(1e-4, Number(node.l) || 0);
+      const w = Math.max(1e-4, Number(node.w) || 0);
+      const h = Math.max(1e-4, Number(node.h) || 0);
+      geometry = new THREE.BoxGeometry(l, w, h, 1, 1, 1);
+      geometry.translate(l / 2, w / 2, h / 2);
+      orientAlong(geometry, node.dir, node.pnt);
+      return geometry;
+    }
+    case 'cylinder': {
+      const r = Math.max(1e-4, Number(node.r) || 0);
+      const h = Math.max(1e-4, Number(node.h) || 0);
+      const angle = Math.min(360, Math.max(1, Number(node.angle) || 360));
+      geometry = new THREE.CylinderGeometry(
+        r,
+        r,
+        h,
+        segments,
+        1,
+        false,
+        0,
+        (angle / 360) * Math.PI * 2,
+      );
+      geometry.rotateX(Math.PI / 2);
+      geometry.translate(0, 0, h / 2);
+      orientAlong(geometry, node.dir, node.pnt);
+      return geometry;
+    }
+    case 'cone': {
+      const r1 = Math.max(0, Number(node.r1) || 0);
+      const r2 = Math.max(0, Number(node.r2) || 0);
+      const h = Math.max(1e-4, Number(node.h) || 0);
+      const angle = Math.min(360, Math.max(1, Number(node.angle) || 360));
+      geometry = new THREE.CylinderGeometry(
+        r2,
+        r1,
+        h,
+        segments,
+        1,
+        false,
+        0,
+        (angle / 360) * Math.PI * 2,
+      );
+      geometry.rotateX(Math.PI / 2);
+      geometry.translate(0, 0, h / 2);
+      orientAlong(geometry, node.dir, node.pnt);
+      return geometry;
+    }
+    case 'sphere': {
+      const r = Math.max(1e-4, Number(node.r) || 0);
+      geometry = new THREE.SphereGeometry(r, segments, 32);
+      const p = node.pnt || [0, 0, 0];
+      geometry.translate(p[0] || 0, p[1] || 0, p[2] || 0);
+      return geometry;
+    }
+    case 'torus': {
+      const r1 = Math.max(1e-4, Number(node.r1) || 0);
+      const r2 = Math.max(1e-4, Number(node.r2) || 0);
+      geometry = new THREE.TorusGeometry(r1, Math.min(r2, r1 * 0.95), 20, 56);
+      orientAlong(geometry, node.dir, node.pnt);
+      return geometry;
+    }
+    case 'extrude': {
+      const points = cleanPoints(node.profile);
+      if (points.length < 3) return null;
+      const vec = new THREE.Vector3().fromArray(node.vector || [0, 0, 1]);
+      const depth = Math.max(1e-4, vec.length());
+      const shape = new THREE.Shape(points);
+      geometry = new THREE.ExtrudeGeometry(shape, {
+        depth,
+        bevelEnabled: false,
+        steps: 1,
+        curveSegments: 24,
+      });
+      if (depth > 1e-9) {
+        const q = new THREE.Quaternion().setFromUnitVectors(Z, vec.clone().normalize());
+        geometry.applyQuaternion(q);
+      }
+      return geometry;
+    }
+    case 'face': {
+      const points = cleanPoints(node.profile);
+      if (points.length < 3) return null;
+      geometry = new THREE.ShapeGeometry(new THREE.Shape(points), 24);
+      return geometry;
+    }
+    case 'wire': {
+      const points = cleanPoints(node.profile);
+      if (points.length < 2) return null;
+      const curve = new THREE.CatmullRomCurve3(
+        points.map((p) => new THREE.Vector3(p.x, p.y, 0)),
+        Boolean(node.closed),
+        'catmullrom',
+        0.08,
+      );
+      geometry = new THREE.TubeGeometry(
+        curve,
+        Math.max(12, points.length * 3),
+        0.16,
+        8,
+        Boolean(node.closed),
+      );
+      return geometry;
+    }
+    default:
+      return null;
+  }
+}
+
+function makeBytes(geometry) {
+  return cleanGeometry(geometry);
+}
+
+function unionGeometries(a, b) {
+  const merged = mergeGeometries([a, b], false);
+  return merged || a;
+}
+
+function csgGeometry(a, b, operation) {
+  try {
+    const evaluator = new Evaluator();
+    evaluator.attributes = ['position', 'normal'];
+    evaluator.useGroups = false;
+    const brushA = new Brush(a);
+    const brushB = new Brush(b);
+    brushA.updateMatrixWorld();
+    brushB.updateMatrixWorld();
+    const result = evaluator.evaluate(brushA, brushB, operation);
+    const out = result.geometry;
+    if (!out || !out.attributes.position || out.attributes.position.count === 0) return a;
+    return cleanGeometry(out.clone());
+  } catch (error) {
+    console.warn('CSG failed', error);
+    return a;
+  }
+}
+
+function nodeHasBoolean(node) {
+  if (!node) return false;
+  if (node.op === 'boolean') return true;
+  if (node.op === 'transform') return nodeHasBoolean(node.child);
+  if (node.op === 'group') return (node.children || []).some(nodeHasBoolean);
+  return false;
+}
+
+function buildNode(node) {
+  if (!node) return null;
+  switch (node.op) {
+    case 'boolean': {
+      const a = buildNode(node.a);
+      const b = buildNode(node.b);
+      if (!a) return b;
+      if (!b) return a;
+      if (node.kind === 'cut') return csgGeometry(a, b, SUBTRACTION);
+      if (node.kind === 'common') return csgGeometry(a, b, INTERSECTION);
+      return unionGeometries(a, b);
+    }
+    case 'group': {
+      const parts = (node.children || []).map(buildNode).filter(Boolean);
+      if (parts.length === 0) return null;
+      if (parts.length === 1) return parts[0];
+      return mergeGeometries(parts, false) || parts[0];
+    }
+    case 'transform': {
+      const child = buildNode(node.child);
+      if (!child) return null;
+      const matrix = new THREE.Matrix4().fromArray(node.m || []);
+      child.applyMatrix4(matrix);
+      return child;
+    }
+    default:
+      return primitive(node);
+  }
+}
+
+function makeMaterial(item) {
+  const [r, g, b] = item.color || [0.8, 0.8, 0.8];
+  const color = new THREE.Color().setRGB(r, g, b, THREE.SRGBColorSpace);
+  const luminance = r * 0.2126 + g * 0.7152 + b * 0.0722;
+  const dark = luminance < 0.2;
+  const opacity = typeof item.opacity === 'number' ? item.opacity : 1;
+  return new THREE.MeshStandardMaterial({
+    color,
+    roughness: dark ? 0.36 : 0.82,
+    metalness: dark ? 0.12 : 0.02,
+    transparent: opacity < 0.999,
+    opacity,
+    depthWrite: opacity > 0.999,
+    side: THREE.FrontSide,
+  });
+}
+
+export function createViewer(canvas, options = {}) {
+  const renderer = new THREE.WebGLRenderer({
+    canvas,
+    antialias: true,
+    alpha: true,
+    powerPreference: 'high-performance',
+  });
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.05;
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFShadowMap;
+  renderer.setClearColor(0x000000, 0);
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 10000);
+  camera.up.set(0, 0, 1);
+
+  let viewDirection = new THREE.Vector3().fromArray(options.direction || [0.86, -1.35, 0.98]).normalize();
+  const showEdges = options.edges !== false;
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.075;
+  controls.enablePan = false;
+  controls.rotateSpeed = 0.6;
+  controls.zoomSpeed = 0.8;
+  controls.autoRotate = options.autoRotate !== false;
+  controls.autoRotateSpeed = 0.75;
+
+  scene.add(new THREE.HemisphereLight(0xfff8ec, 0xb2a690, 1.35));
+
+  const key = new THREE.DirectionalLight(0xfff2df, 2.7);
+  key.castShadow = true;
+  key.shadow.mapSize.set(2048, 2048);
+  key.shadow.bias = -0.0004;
+  key.shadow.radius = 3;
+  scene.add(key);
+  scene.add(key.target);
+
+  const fill = new THREE.DirectionalLight(0xdfe9ff, 0.85);
+  fill.position.set(-30, 45, 30);
+  scene.add(fill);
+
+  const rim = new THREE.DirectionalLight(0xffffff, 0.7);
+  rim.position.set(20, 50, -35);
+  scene.add(rim);
+
+  const root = new THREE.Group();
+  scene.add(root);
+
+  const floor = new THREE.Mesh(
+    new THREE.PlaneGeometry(400, 400),
+    new THREE.ShadowMaterial({ color: 0x2a241c, opacity: 0.16 }),
+  );
+  floor.rotation.x = Math.PI / 2;
+  floor.receiveShadow = true;
+  floor.renderOrder = -2;
+  scene.add(floor);
+
+  let grid = null;
+  let size = 10;
+  let center = new THREE.Vector3();
+  let radius = 5;
+  let fitted = false;
+  let autoRotateEnabled = options.autoRotate !== false;
+  let resumeAt = 0;
+
+  function resize() {
+    const parent = canvas.parentElement;
+    if (!parent) return;
+    const width = parent.clientWidth;
+    const height = parent.clientHeight;
+    if (width < 2 || height < 2) return;
+    renderer.setSize(width, height, false);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    if (fitted) fit(false);
+  }
+
+  function fit(resetDirection) {
+    if (!fitted) return;
+    const aspect = camera.aspect || 1;
+    const dir = viewDirection.clone();
+    if (!resetDirection) {
+      const current = camera.position.clone().sub(controls.target).normalize();
+      if (current.lengthSq() > 0.5) dir.copy(current);
+    }
+    const forward = dir.clone().negate();
+    let up = camera.up.clone();
+    let right = new THREE.Vector3().crossVectors(forward, up);
+    if (right.lengthSq() < 1e-8) {
+      up.set(0, 1, 0);
+      right = new THREE.Vector3().crossVectors(forward, up);
+    }
+    right.normalize();
+    const camUp = new THREE.Vector3().crossVectors(right, forward).normalize();
+    const tanV = Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5));
+    const tanH = tanV * aspect;
+    const max = new THREE.Vector3();
+    const box = new THREE.Box3().setFromObject(root);
+    if (box.isEmpty()) {
+      box.setFromCenterAndSize(center, new THREE.Vector3(radius * 2, radius * 2, radius * 2));
+    }
+    box.getSize(max);
+    const half = max.multiplyScalar(0.5);
+    const corners = [];
+    for (const x of [-1, 1]) {
+      for (const y of [-1, 1]) {
+        for (const z of [-1, 1]) {
+          corners.push(
+            new THREE.Vector3(x * half.x, y * half.y, z * half.z),
+          );
+        }
+      }
+    }
+    let distance = 0;
+    for (const corner of corners) {
+      const x = corner.dot(right);
+      const y = corner.dot(camUp);
+      const z = corner.dot(forward);
+      distance = Math.max(distance, Math.abs(x) / tanH - z, Math.abs(y) / tanV - z);
+    }
+    distance = Math.max(distance * 1.08, radius * 0.5);
+    camera.position.copy(center).addScaledVector(dir, distance);
+    camera.near = Math.max(0.01, distance - radius * 4);
+    camera.far = distance + radius * 12;
+    camera.updateProjectionMatrix();
+    controls.target.copy(center);
+    controls.minDistance = radius * 0.25;
+    controls.maxDistance = radius * 8;
+    controls.update();
+
+    key.position.copy(center).add(new THREE.Vector3(0.7, -0.9, 1.5).normalize().multiplyScalar(radius * 3.6));
+    key.target.position.copy(center);
+    key.target.updateMatrixWorld();
+    const extent = radius * 1.55;
+    const shadow = key.shadow.camera;
+    shadow.left = -extent;
+    shadow.right = extent;
+    shadow.top = extent;
+    shadow.bottom = -extent;
+    shadow.near = 0.1;
+    shadow.far = radius * 12;
+    shadow.updateProjectionMatrix();
+  }
+
+  function setScene(sceneData, direction) {
+    if (direction && direction.length === 3) {
+      viewDirection = new THREE.Vector3().fromArray(direction).normalize();
+    }
+    for (const child of [...root.children]) {
+      root.remove(child);
+      disposeObject(child);
+    }
+    if (grid) {
+      scene.remove(grid);
+      grid.geometry.dispose();
+      grid.material.dispose();
+      grid = null;
+    }
+    const objects = (sceneData && sceneData.objects) || [];
+    let built = 0;
+    let skipped = 0;
+    for (const item of objects) {
+      const geometry = buildNode(item.node);
+      if (!geometry) {
+        skipped += 1;
+        continue;
+      }
+      const clean = makeBytes(geometry);
+      const material = makeMaterial(item);
+      const mesh = new THREE.Mesh(clean, material);
+      mesh.castShadow = true;
+      mesh.receiveShadow = true;
+      mesh.name = item.name || 'Part';
+      if (showEdges && !nodeHasBoolean(item.node) && clean.attributes.position && clean.attributes.position.count < 180000) {
+        const edges = new THREE.EdgesGeometry(clean, 48);
+        const line = new THREE.LineSegments(
+          edges,
+          new THREE.LineBasicMaterial({
+            color: 0x2f2a22,
+            transparent: true,
+            opacity: 0.1,
+            depthWrite: false,
+          }),
+        );
+        line.renderOrder = 3;
+        mesh.add(line);
+      }
+      root.add(mesh);
+      built += 1;
+    }
+
+    const box = new THREE.Box3().setFromObject(root);
+    if (box.isEmpty()) {
+      size = 10;
+      center.set(0, 0, 0);
+      radius = 5;
+      fitted = false;
+      floor.visible = false;
+      controls.target.set(0, 0, 0);
+      camera.position.set(18, -28, 22);
+      camera.near = 0.1;
+      camera.far = 1000;
+      camera.updateProjectionMatrix();
+      controls.update();
+      return { objects: 0, skipped, visible: [] };
+    }
+
+    box.getCenter(center);
+    const dims = box.getSize(new THREE.Vector3());
+    radius = Math.max(1, dims.length() * 0.5);
+    size = Math.max(20, Math.max(dims.x, dims.y, dims.z) * 3.2);
+    fitted = true;
+
+    floor.visible = true;
+    floor.position.set(center.x, center.y, box.min.z - 0.005);
+    floor.updateMatrixWorld();
+
+    grid = new THREE.GridHelper(size, 18, 0xb9ae9b, 0xd0c7b7);
+    grid.rotation.x = Math.PI / 2;
+    grid.position.set(center.x, center.y, box.min.z + 0.003);
+    grid.material.transparent = true;
+    grid.material.opacity = 0.24;
+    grid.material.depthWrite = false;
+    scene.add(grid);
+
+    fit(true);
+    return {
+      objects: built,
+      skipped,
+      visible: root.children.map((o) => o.name),
+      bounds: { min: box.min.toArray(), max: box.max.toArray() },
+    };
+  }
+
+  function resetView() {
+    if (!fitted) return;
+    const box = new THREE.Box3().setFromObject(root);
+    if (box.isEmpty()) return;
+    box.getCenter(center);
+    fit(true);
+    resumeAt = performance.now() + 3500;
+  }
+
+  function setAutoRotate(enabled) {
+    autoRotateEnabled = Boolean(enabled);
+    controls.autoRotate = autoRotateEnabled;
+    resumeAt = performance.now() + 3500;
+  }
+
+  function onPointerDown() {
+    controls.autoRotate = false;
+    resumeAt = performance.now() + 4500;
+  }
+
+  function onPointerUp() {
+    if (autoRotateEnabled) {
+      resumeAt = performance.now() + 900;
+    }
+  }
+
+  canvas.addEventListener('pointerdown', onPointerDown);
+  window.addEventListener('pointerup', onPointerUp);
+
+  const observer = new ResizeObserver(resize);
+  if (canvas.parentElement) observer.observe(canvas.parentElement);
+  resize();
+
+  renderer.setAnimationLoop(() => {
+    if (autoRotateEnabled && resumeAt && performance.now() > resumeAt) {
+      controls.autoRotate = true;
+      resumeAt = 0;
+    }
+    controls.update();
+    renderer.render(scene, camera);
+  });
+
+  return {
+    setScene,
+    resetView,
+    setAutoRotate,
+    resize,
+    isAutoRotate: () => autoRotateEnabled,
+    dispose() {
+      renderer.setAnimationLoop(null);
+      observer.disconnect();
+      window.removeEventListener('pointerup', onPointerUp);
+      for (const child of [...root.children]) {
+        root.remove(child);
+        disposeObject(child);
+      }
+      controls.dispose();
+      renderer.dispose();
+    },
+  };
+}

worker.js

@@ -0,0 +1,55 @@
+const PYODIDE_URL = 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/';
+
+let pyodide = null;
+let shimSource = '';
+let initPromise = null;
+
+function post(message) {
+  self.postMessage(message);
+}
+
+async function init() {
+  if (pyodide) return pyodide;
+  if (initPromise) return initPromise;
+  initPromise = (async () => {
+    if (!shimSource) throw new Error('No Python shim was supplied.');
+    importScripts(`${PYODIDE_URL}pyodide.js`);
+    if (typeof loadPyodide !== 'function') {
+      throw new Error('Pyodide did not initialise.');
+    }
+    pyodide = await loadPyodide({ indexURL: PYODIDE_URL });
+    pyodide.runPython(shimSource);
+    post({ type: 'ready' });
+    return pyodide;
+  })();
+  return initPromise;
+}
+
+self.onmessage = async (event) => {
+  const message = event.data || {};
+  if (message.type === 'init') {
+    shimSource = message.shim || '';
+    try {
+      await init();
+    } catch (error) {
+      post({ type: 'fatal', error: String((error && error.stack) || error) });
+    }
+    return;
+  }
+  if (message.type === 'run') {
+    try {
+      await init();
+      pyodide.globals.set('__wfcad_code', message.code || '');
+      const raw = pyodide.runPython(
+        'import json; json.dumps(__wfcad_runtime.run(__wfcad_code))',
+      );
+      post({ type: 'result', id: message.id, result: JSON.parse(raw) });
+    } catch (error) {
+      post({
+        type: 'error',
+        id: message.id,
+        error: String((error && error.message) || error),
+      });
+    }
+  }
+};