@mcp-b/interactive-components 0.2.0

package/dist/interactive-editor-WfTWxJGF.js

@@ -0,0 +1,1454 @@
+import "./code-editor-B94tewLC.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { detectLanguage } from "./lib/transform.js";
+import "./code-preview-gKk0nBKP.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import "@mcp-b/web-components/components/splitter/splitter.js";
+import "@mcp-b/web-components/components/button/button.js";
+import "@mcp-b/web-components/components/button-group/button-group.js";
+import "@mcp-b/web-components/components/tooltip/tooltip.js";
+//#region src/components/interactive-editor/interactive-editor.styles.ts
+var interactive_editor_styles_default = css`
+  /* ── Host ── */
+  :host {
+    --sigvelo-interactive-editor-height: 30rem;
+
+    display: flex;
+    flex-direction: column;
+    font-family: var(
+      --sigvelo-font-mono,
+      "Fira Code",
+      "Cascadia Code",
+      "JetBrains Mono",
+      monospace
+    );
+    font-size: 13px;
+    overflow: hidden;
+    background: var(--sigvelo-color-neutral-bg-subtle);
+    height: var(--sigvelo-interactive-editor-height);
+  }
+
+  /* ═══════════════════════════════════════════
+     CONTENT WRAPPER
+     ═══════════════════════════════════════════ */
+
+  .content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  sigvelo-splitter {
+    flex: 1;
+    min-height: 0;
+    border-radius: 0;
+    border: none;
+  }
+
+  /* ═══════════════════════════════════════════
+     EDITOR PANE  — sidebar + code, side by side
+     ═══════════════════════════════════════════ */
+
+  .editor-pane {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+    background: var(--sigvelo-interactive-editor-bg, #f8f8f8);
+  }
+
+  .editor-pane__code {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  sigvelo-code-editor {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* ═══════════════════════════════════════════
+     SIDEBAR 
+     Uses --sigvelo-interactive-editor-* tokens for the
+     editor-adjacent surface, and --sigvelo-*
+     semantic tokens for text/strokes so it
+     adapts to light and dark mode.
+     ═══════════════════════════════════════════ */
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 160px;
+    min-width: 160px;
+    background: var(--sigvelo-interactive-editor-gutter-bg);
+    border-right: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    overflow: hidden;
+    flex-shrink: 0;
+    transition:
+      width var(--sigvelo-motion-duration-interaction) ease,
+      min-width var(--sigvelo-motion-duration-interaction) ease;
+  }
+
+  .sidebar--collapsed {
+    width: 36px;
+    min-width: 36px;
+  }
+
+  /* ── Sidebar header ── */
+  .sidebar__header {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0 6px;
+    height: 32px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle);
+  }
+
+  .sidebar__title {
+    flex: 1;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--sigvelo-color-neutral-text);
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .sidebar__icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-sm);
+    background: transparent;
+    color: var(--sigvelo-color-text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      background var(--sigvelo-motion-duration-interaction),
+      color var(--sigvelo-motion-duration-interaction);
+  }
+
+  .sidebar__icon-btn:hover {
+    background: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-text);
+  }
+
+  .sidebar__collapse-btn {
+    margin-left: 1px;
+  }
+
+  /* ── Collapsed expand button ── */
+  .sidebar__expand-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--sigvelo-color-text-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color var(--sigvelo-motion-duration-interaction);
+  }
+
+  .sidebar__expand-btn:hover {
+    color: var(--sigvelo-color-text);
+  }
+
+  /* ── File list ── */
+  .sidebar__list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    list-style: none;
+    margin: 0;
+    padding: 4px 0;
+    scrollbar-width: none;
+  }
+
+  .sidebar__list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sidebar__item-row {
+    position: relative;
+  }
+
+  .sidebar__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: 28px;
+    padding: 0 10px;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--sigvelo-color-neutral-text);
+    font-family: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    border-left: 2px solid transparent;
+    transition:
+      background var(--sigvelo-motion-duration-interaction),
+      color var(--sigvelo-motion-duration-interaction);
+  }
+
+  .sidebar__item:hover {
+    background: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-text);
+  }
+
+  .sidebar__item--active {
+    background: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-text);
+    border-left-color: var(--sigvelo-color-primary-bg);
+  }
+
+  .sidebar__item--removable {
+    padding-inline-end: 32px;
+  }
+
+  .sidebar__item-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sidebar__item-remove {
+    position: absolute;
+    inset-block-start: 2px;
+    inset-inline-end: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--sigvelo-radius-xs);
+    background: transparent;
+    font-size: 13px;
+    line-height: 1;
+    color: var(--sigvelo-color-text-muted);
+    opacity: 0;
+    flex-shrink: 0;
+    transition:
+      opacity var(--sigvelo-motion-duration-interaction),
+      background var(--sigvelo-motion-duration-interaction);
+  }
+
+  .sidebar__item-row:hover .sidebar__item-remove,
+  .sidebar__item-row:focus-within .sidebar__item-remove {
+    opacity: 1;
+  }
+
+  .sidebar__item-remove:hover {
+    background: var(--sigvelo-color-neutral-bg);
+    color: var(--sigvelo-color-text);
+  }
+
+  .sidebar__item:focus-visible,
+  .sidebar__item-remove:focus-visible,
+  .mobile-file:focus-visible,
+  .mobile-file__close:focus-visible {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-offset));
+  }
+
+  /* ── Add file inline form ── */
+  .sidebar__add-form {
+    padding: 6px 8px;
+    border-top: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    flex-shrink: 0;
+  }
+
+  .sidebar__add-input {
+    width: 100%;
+    height: 24px;
+    border: 1px solid var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-sm);
+    padding: 0 6px;
+    font-size: 11px;
+    font-family: inherit;
+    background: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-text);
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .sidebar__add-input:focus {
+    border-color: var(--sigvelo-color-primary-bg);
+  }
+
+  .sidebar__add-input--error,
+  .sidebar__add-input--error:focus {
+    border-color: var(--sigvelo-color-danger-bg);
+  }
+
+  .sidebar__add-error {
+    font-size: 10px;
+    color: var(--sigvelo-color-danger-text);
+    margin-top: 3px;
+    padding: 0 1px;
+    line-height: 1.3;
+  }
+
+  /* ── Folder tree ── */
+  .sidebar__subtree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidebar__item--folder {
+    font-weight: 500;
+  }
+
+  .sidebar__folder-chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    flex-shrink: 0;
+    color: var(--sigvelo-color-text-muted);
+    opacity: 0.6;
+  }
+
+  /* ═══════════════════════════════════════════
+     LANGUAGE BADGE COLORS
+     ═══════════════════════════════════════════ */
+
+  .file-icon {
+    font-size: 8px;
+    font-weight: 700;
+    padding: 1px 3px;
+    border-radius: var(--sigvelo-radius-xs);
+    line-height: 1.2;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .file-icon--js {
+    background: #f7df1e;
+    color: #000;
+  }
+  .file-icon--ts {
+    background: #3178c6;
+    color: #fff;
+  }
+  .file-icon--tsx {
+    background: #3178c6;
+    color: #fff;
+  }
+  .file-icon--jsx {
+    background: #61dafb;
+    color: #000;
+  }
+  .file-icon--html {
+    background: #c13b18;
+    color: #fff;
+  }
+  .file-icon--css {
+    background: #1e3eb8;
+    color: #fff;
+  }
+  .file-icon--py {
+    background: #3776ab;
+    /* Python's brand yellow (#ffd43b) is only 3.39:1 on its brand blue. The
+       badge keeps the blue and takes white, matching every other file icon. */
+    color: #fff;
+  }
+  .file-icon--r {
+    background: #2166b8;
+    color: #fff;
+  }
+
+  /* ═══════════════════════════════════════════
+     PREVIEW PANE (right side)
+     ═══════════════════════════════════════════ */
+
+  .preview-pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--sigvelo-color-surface);
+  }
+
+  .preview-pane__content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  sigvelo-code-preview {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* ── Right pane header ── */
+  .right-pane__header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    height: 32px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    background: var(--sigvelo-color-neutral-bg-subtle);
+  }
+
+  .right-pane__header sigvelo-button-group {
+    flex: 1;
+  }
+
+  .console-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--sigvelo-radius-full);
+    background: var(--sigvelo-color-danger-bg);
+    color: var(--sigvelo-color-danger-text-on-bg);
+    font-size: 10px;
+    font-weight: 700;
+    margin-left: 4px;
+    line-height: 1;
+  }
+
+  /* ═══════════════════════════════════════════
+     CONSOLE VIEW
+     ═══════════════════════════════════════════ */
+
+  .console-view {
+    flex: 1;
+    overflow-y: auto;
+    background: var(--sigvelo-color-surface);
+    font-family: var(
+      --sigvelo-font-mono,
+      "Fira Code",
+      "Cascadia Code",
+      "JetBrains Mono",
+      monospace
+    );
+    font-size: 12px;
+    scrollbar-width: thin;
+  }
+
+  .console-empty {
+    padding: 16px;
+    color: var(--sigvelo-color-text-muted);
+    font-style: italic;
+    text-align: center;
+  }
+
+  .console-entry {
+    display: flex;
+    gap: 6px;
+    padding: 3px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    align-items: baseline;
+  }
+
+  .console-entry--log {
+    color: var(--sigvelo-color-text);
+  }
+  .console-entry--info {
+    color: var(--sigvelo-color-primary-text);
+    background: var(--sigvelo-color-primary-bg-subtle);
+  }
+  .console-entry--warn {
+    color: var(--sigvelo-color-warning-text, #92400e);
+    background: var(--sigvelo-color-warning-bg-subtle);
+  }
+  .console-entry--error {
+    color: var(--sigvelo-color-danger-text);
+    background: var(--sigvelo-color-danger-bg-subtle);
+  }
+
+  .console-entry__level {
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    opacity: 0.7;
+    flex-shrink: 0;
+    width: 32px;
+  }
+
+  .console-entry__text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    flex: 1;
+  }
+
+  /* ═══════════════════════════════════════════
+     COMPACT / MOBILE LAYOUT
+     ═══════════════════════════════════════════ */
+
+  :host(.compact) {
+    flex-direction: column;
+  }
+
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 6px;
+    background: var(--sigvelo-color-neutral-bg-subtle);
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    flex-shrink: 0;
+  }
+
+  .mobile-nav sigvelo-button-group {
+    flex: 1;
+  }
+
+  .single-pane {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mobile-files {
+    flex: 1;
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    padding: 6px;
+    background: var(--sigvelo-color-neutral-bg-subtle);
+  }
+
+  .mobile-file-row {
+    position: relative;
+  }
+
+  .mobile-file {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px;
+    margin-bottom: 2px;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    border-left: 3px solid transparent;
+    background: transparent;
+    color: var(--sigvelo-color-text-muted);
+    font-family: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    text-align: left;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition: background var(--sigvelo-motion-duration-interaction);
+  }
+
+  .mobile-file--active {
+    background: var(--sigvelo-color-surface);
+    color: var(--sigvelo-color-text);
+    border-left-color: var(--sigvelo-color-primary-bg);
+  }
+
+  .mobile-file--removable {
+    padding-inline-end: 42px;
+  }
+
+  .mobile-file__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-file__close {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--sigvelo-radius-sm);
+    background: transparent;
+    font-size: 16px;
+    color: var(--sigvelo-color-text-muted);
+    flex-shrink: 0;
+    opacity: 0.5;
+  }
+
+  .mobile-file__close:hover {
+    opacity: 1;
+    background: var(--sigvelo-color-neutral-bg-muted);
+  }
+
+  .mobile-add-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    height: 40px;
+    margin-top: 4px;
+    border: 1px dashed var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-md);
+    background: transparent;
+    color: var(--sigvelo-color-text-muted);
+    font-family: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    opacity: 0.7;
+  }
+
+  .mobile-add-btn:hover {
+    opacity: 1;
+    border-color: var(--sigvelo-color-primary-bg);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  .add-file-form {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .add-file-row {
+    display: flex;
+    gap: 4px;
+  }
+
+  .add-file-input {
+    flex: 1;
+    min-width: 0;
+    height: 22px;
+    border: 1px solid var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-sm);
+    padding: 0 6px;
+    font-size: 11px;
+    font-family: inherit;
+    background: var(--sigvelo-color-surface);
+    color: var(--sigvelo-color-text);
+    outline: none;
+  }
+
+  .add-file-input:focus {
+    border-color: var(--sigvelo-color-primary-bg);
+  }
+
+  .add-file-input--error,
+  .add-file-input--error:focus {
+    border-color: var(--sigvelo-color-danger-bg);
+  }
+
+  .add-file-error {
+    font-size: 10px;
+    color: var(--sigvelo-color-danger-text);
+    padding: 0 2px;
+  }
+`;
+//#endregion
+//#region src/components/interactive-editor/interactive-editor.ts
+function langIcon(lang) {
+	return {
+		javascript: "JS",
+		typescript: "TS",
+		jsx: "JSX",
+		tsx: "TSX",
+		html: "HTML",
+		css: "CSS",
+		python: "PY",
+		r: "R",
+		sql: "SQL"
+	}[lang];
+}
+function langIconClass(lang) {
+	return {
+		javascript: "file-icon--js",
+		typescript: "file-icon--ts",
+		jsx: "file-icon--jsx",
+		tsx: "file-icon--tsx",
+		html: "file-icon--html",
+		css: "file-icon--css",
+		python: "file-icon--py",
+		r: "file-icon--r",
+		sql: "file-icon--sql"
+	}[lang];
+}
+const JS_EXTENSIONS = /* @__PURE__ */ new Set([
+	"js",
+	"mjs",
+	"ts",
+	"tsx",
+	"jsx",
+	"html",
+	"htm",
+	"css",
+	"json"
+]);
+const PY_EXTENSIONS = /* @__PURE__ */ new Set([
+	"py",
+	"html",
+	"htm",
+	"css",
+	"json"
+]);
+const R_EXTENSIONS = /* @__PURE__ */ new Set([
+	"r",
+	"html",
+	"htm",
+	"css",
+	"json"
+]);
+const VALID_EXTENSIONS = /* @__PURE__ */ new Set([
+	...JS_EXTENSIONS,
+	...PY_EXTENSIONS,
+	...R_EXTENSIONS
+]);
+const FILE_DEFAULTS = {
+	html: "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\">\n</head>\n<body>\n\n</body>\n</html>",
+	css: "/* styles */\n",
+	javascript: "// JavaScript\n",
+	typescript: "// TypeScript\n",
+	jsx: "export default function Component() {\n  return <div>Hello</div>;\n}\n",
+	tsx: "export default function Component() {\n  return <div>Hello</div>;\n}\n",
+	python: "# Python\n",
+	r: "# R Script\n",
+	sql: "-- SQL\n"
+};
+const COMPACT_BREAKPOINT = 560;
+const ICON_PLAY = html`
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: block">
+    <path d="M5 3l14 9-14 9V3z" />
+  </svg>
+`;
+const ICON_PLUS = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    style="display: block"
+  >
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+`;
+const ICON_TRASH = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path
+      d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+    />
+  </svg>
+`;
+const ICON_CHEVRON_LEFT = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+`;
+const ICON_CHEVRON_DOWN = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+`;
+const ICON_CHEVRON_RIGHT = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+const ICON_FOLDER = html`
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+  </svg>
+`;
+function sortTree(nodes) {
+	nodes.sort((a, b) => {
+		if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
+		return a.name.localeCompare(b.name);
+	});
+	for (const n of nodes) if (n.isFolder) sortTree(n.children);
+}
+function buildFileTree(files) {
+	const root = {
+		name: "",
+		fullPath: "",
+		isFolder: true,
+		children: []
+	};
+	for (const file of files) {
+		const parts = file.name.split("/");
+		let current = root;
+		for (let i = 0; i < parts.length; i++) {
+			const segment = parts[i];
+			const isLast = i === parts.length - 1;
+			const pathSoFar = parts.slice(0, i + 1).join("/");
+			if (isLast) current.children.push({
+				name: segment,
+				fullPath: file.name,
+				isFolder: false,
+				children: [],
+				file
+			});
+			else {
+				let folder = current.children.find((c) => c.isFolder && c.name === segment);
+				if (!folder) {
+					folder = {
+						name: segment,
+						fullPath: pathSoFar,
+						isFolder: true,
+						children: []
+					};
+					current.children.push(folder);
+				}
+				current = folder;
+			}
+		}
+	}
+	sortTree(root.children);
+	return root.children;
+}
+/**
+* `<sigvelo-interactive-editor>`
+*
+* @summary A multi-file code playground with a collapsible file explorer
+* sidebar, code editor, and live preview/console pane. The sidebar sits
+* beside the editor only and does not extend into the preview pane.
+*
+* @tag sigvelo-interactive-editor
+* @status experimental
+* @since 0.1
+* @cssproperty [--sigvelo-interactive-editor-height=30rem] - The editor's block size.
+*/
+var SigveloInteractiveEditor = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.files = [];
+		this.entryFile = "";
+		this.layout = "vertical";
+		this.hideEditor = false;
+		this.hidePreview = false;
+		this.autoRun = true;
+		this._activeFileName = "";
+		this._fileContents = /* @__PURE__ */ new Map();
+		this._showAddFile = false;
+		this._newFileName = "";
+		this._fileError = "";
+		this._compact = false;
+		this._compactView = "code";
+		this._rightPane = "preview";
+		this._consoleLogs = [];
+		this._unreadConsoleCount = 0;
+		this._sidebarOpen = true;
+		this._expandedFolders = /* @__PURE__ */ new Set();
+		this._runDebounce = null;
+		this._resizeObserver = null;
+	}
+	static {
+		this.styles = [hostStyles, interactive_editor_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const compact = entry.contentRect.width < COMPACT_BREAKPOINT;
+				if (compact !== this._compact) {
+					this._compact = compact;
+					if (compact) this.classList.add("compact");
+					else this.classList.remove("compact");
+				}
+			}
+		});
+		this._resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		if (this._runDebounce) clearTimeout(this._runDebounce);
+	}
+	willUpdate(changed) {
+		if (changed.has("files")) {
+			this._initFiles();
+			this._consoleLogs = [];
+			this._unreadConsoleCount = 0;
+		}
+	}
+	updated(changed) {
+		if (changed.has("files")) this._runCode(false);
+	}
+	_onConsoleMessage(e) {
+		const entry = e.detail;
+		this._consoleLogs = [...this._consoleLogs, entry];
+		if (this._rightPane !== "console" && !this._compact) this._unreadConsoleCount++;
+		if (this._compact && this._compactView !== "console") this._unreadConsoleCount++;
+	}
+	_clearConsole() {
+		this._consoleLogs = [];
+		this._unreadConsoleCount = 0;
+	}
+	_initFiles() {
+		const prev = this._fileContents;
+		this._fileContents = /* @__PURE__ */ new Map();
+		const folders = /* @__PURE__ */ new Set();
+		for (const f of this.files) {
+			this._fileContents.set(f.name, prev.get(f.name) ?? f.content);
+			const parts = f.name.split("/");
+			for (let i = 1; i < parts.length; i++) folders.add(parts.slice(0, i).join("/"));
+		}
+		if (this._expandedFolders.size === 0 && folders.size > 0) this._expandedFolders = folders;
+		if (!this._activeFileName || !this._fileContents.has(this._activeFileName)) this._activeFileName = this.files[0]?.name ?? "";
+	}
+	_activeContent() {
+		return this._fileContents.get(this._activeFileName) ?? "";
+	}
+	_activeLanguage() {
+		return this.files.find((f) => f.name === this._activeFileName)?.language ?? detectLanguage(this._activeFileName);
+	}
+	_onEditorChange(e) {
+		const value = e.target.value;
+		this._fileContents = new Map(this._fileContents);
+		this._fileContents.set(this._activeFileName, value);
+		this._scheduleRun();
+	}
+	_scheduleRun() {
+		if (!this.autoRun) return;
+		if (this._runDebounce) clearTimeout(this._runDebounce);
+		this._runDebounce = setTimeout(() => void this._runCode(), 800);
+	}
+	async _runCode(clearConsole = true) {
+		if (!this._preview) return;
+		if (clearConsole) {
+			this._consoleLogs = [];
+			this._unreadConsoleCount = 0;
+		}
+		const liveFiles = this.files.map((f) => ({
+			name: f.name,
+			content: this._fileContents.get(f.name) ?? f.content,
+			language: f.language ?? detectLanguage(f.name)
+		}));
+		this._preview.files = liveFiles;
+		this._preview.entryFile = this.entryFile;
+		this._preview.captureConsole = true;
+		await this._preview.run();
+	}
+	/** Returns the runtime language of the project ('python', 'r', or 'js'). */
+	_projectRuntime() {
+		for (const f of this.files) {
+			const lang = f.language ?? detectLanguage(f.name);
+			if (lang === "python") return "python";
+			if (lang === "r") return "r";
+		}
+		return "js";
+	}
+	_confirmAddFile() {
+		const name = this._newFileName.trim();
+		if (!name) return;
+		const ext = name.split(".").pop()?.toLowerCase() ?? "";
+		if (!ext || !VALID_EXTENSIONS.has(ext)) {
+			this._fileError = `Unsupported extension. Use: ${[...VALID_EXTENSIONS].join(", ")}`;
+			return;
+		}
+		const runtime = this._projectRuntime();
+		const isNewPy = ext === "py";
+		const isNewR = ext === "r";
+		if (!(ext === "html" || ext === "htm" || ext === "css" || ext === "json")) {
+			if (runtime === "python" && !isNewPy) {
+				this._fileError = "Cannot add JS/TS/R files to a Python project.";
+				return;
+			}
+			if (runtime === "r" && !isNewR) {
+				this._fileError = "Cannot add JS/TS/Python files to an R project.";
+				return;
+			}
+			if (runtime === "js" && (isNewPy || isNewR) && this.files.some((f) => {
+				const l = f.language ?? detectLanguage(f.name);
+				return l !== "html" && l !== "css";
+			})) {
+				this._fileError = `Cannot add ${isNewPy ? "Python" : "R"} files to a JS/TS project.`;
+				return;
+			}
+		}
+		if (this._fileContents.has(name)) {
+			this._fileError = `"${name}" already exists.`;
+			return;
+		}
+		const lang = detectLanguage(name);
+		const content = FILE_DEFAULTS[lang];
+		this.files = [...this.files, {
+			name,
+			content,
+			language: lang
+		}];
+		this._fileContents = new Map(this._fileContents);
+		this._fileContents.set(name, content);
+		this._dismissAddFile();
+		this._activeFileName = name;
+	}
+	_dismissAddFile() {
+		this._showAddFile = false;
+		this._newFileName = "";
+		this._fileError = "";
+	}
+	_removeFile(name) {
+		if (this.files.length <= 1) return;
+		this.files = this.files.filter((f) => f.name !== name);
+		this._fileContents = new Map(this._fileContents);
+		this._fileContents.delete(name);
+		if (this._activeFileName === name) this._activeFileName = this.files[0]?.name ?? "";
+		this.updateComplete.then(() => this._runCode());
+	}
+	_switchView(view) {
+		this._compactView = view;
+		if (view === "preview") this.updateComplete.then(() => this._runCode());
+		if (view === "console") this._unreadConsoleCount = 0;
+	}
+	_selectFileAndShowCode(name) {
+		this._activeFileName = name;
+		if (this._compact) this._compactView = "code";
+	}
+	_switchRightPane(pane) {
+		this._rightPane = pane;
+		if (pane === "console") this._unreadConsoleCount = 0;
+	}
+	_toggleFolder(path) {
+		const next = new Set(this._expandedFolders);
+		if (next.has(path)) next.delete(path);
+		else next.add(path);
+		this._expandedFolders = next;
+	}
+	_renderTreeNodes(nodes, depth) {
+		return nodes.map((node) => {
+			if (node.isFolder) {
+				const expanded = this._expandedFolders.has(node.fullPath);
+				return html` <li>
+          <button
+            class="sidebar__item sidebar__item--folder"
+            type="button"
+            aria-expanded=${expanded}
+            style="padding-left: ${8 + depth * 12}px"
+            @click=${() => this._toggleFolder(node.fullPath)}
+          >
+            <span class="sidebar__folder-chevron" aria-hidden="true">
+              ${expanded ? ICON_CHEVRON_DOWN : ICON_CHEVRON_RIGHT}
+            </span>
+            <span class="sidebar__item-name">${node.name}</span>
+          </button>
+          ${expanded ? html`
+                <ul class="sidebar__subtree">
+                  ${this._renderTreeNodes(node.children, depth + 1)}
+                </ul>
+              ` : ""}
+        </li>`;
+			}
+			const lang = node.file?.language ?? detectLanguage(node.fullPath);
+			const isActive = node.fullPath === this._activeFileName;
+			return html` <li class="sidebar__item-row">
+        <button
+          class=${classMap({
+				sidebar__item: true,
+				"sidebar__item--active": isActive,
+				"sidebar__item--removable": this.files.length > 1
+			})}
+          type="button"
+          aria-current=${ifDefined(isActive ? "page" : void 0)}
+          style="padding-left: ${8 + depth * 12}px"
+          @click=${() => {
+				this._activeFileName = node.fullPath;
+			}}
+        >
+          <span class="file-icon ${langIconClass(lang)}">${langIcon(lang)}</span>
+          <span class="sidebar__item-name">${node.name}</span>
+        </button>
+        ${this.files.length > 1 ? html`
+              <button
+                class="sidebar__item-remove"
+                type="button"
+                aria-label="Remove ${node.name}"
+                @click=${() => this._removeFile(node.fullPath)}
+              >
+                &times;
+              </button>
+            ` : ""}
+      </li>`;
+		});
+	}
+	_renderSidebar() {
+		const tree = buildFileTree(this.files);
+		return html`
+      <div
+        class=${classMap({
+			sidebar: true,
+			"sidebar--collapsed": !this._sidebarOpen
+		})}
+      >
+        ${this._sidebarOpen ? html`
+              <div class="sidebar__header">
+                <span class="sidebar__title">Files</span>
+                <button
+                  class="sidebar__icon-btn"
+                  aria-label="New file"
+                  @click=${() => {
+			this._showAddFile = !this._showAddFile;
+			this._fileError = "";
+		}}
+                >
+                  ${ICON_PLUS}
+                </button>
+                <button
+                  class="sidebar__icon-btn sidebar__collapse-btn"
+                  aria-label="Collapse sidebar"
+                  @click=${() => {
+			this._sidebarOpen = false;
+		}}
+                >
+                  ${ICON_CHEVRON_LEFT}
+                </button>
+              </div>
+
+              <ul class="sidebar__list">
+                ${this._renderTreeNodes(tree, 0)}
+              </ul>
+
+              ${this._showAddFile ? html`
+                    <div class="sidebar__add-form">
+                      <input
+                        class=${classMap({
+			"sidebar__add-input": true,
+			"sidebar__add-input--error": !!this._fileError
+		})}
+                        type="text"
+                        placeholder="src/App.tsx"
+                        autofocus
+                        .value=${this._newFileName}
+                        @input=${(e) => {
+			this._newFileName = e.target.value;
+			this._fileError = "";
+		}}
+                        @keydown=${(e) => {
+			if (e.key === "Enter") this._confirmAddFile();
+			if (e.key === "Escape") this._dismissAddFile();
+		}}
+                      />
+                      ${this._fileError ? html`<div class="sidebar__add-error">${this._fileError}</div>` : ""}
+                    </div>
+                  ` : ""}
+            ` : html`
+              <button
+                id="sidebar-expand-btn"
+                class="sidebar__expand-btn"
+                aria-label="Expand file explorer"
+                @click=${() => {
+			this._sidebarOpen = true;
+		}}
+              >
+                ${ICON_FOLDER}
+              </button>
+              <sigvelo-tooltip for="sidebar-expand-btn" placement="right"> Files </sigvelo-tooltip>
+            `}
+      </div>
+    `;
+	}
+	_renderEditorPane(slot) {
+		return html` <div class="editor-pane" slot=${ifDefined(slot)}>
+      ${this._renderSidebar()}
+      <div class="editor-pane__code">
+        <sigvelo-code-editor
+          .value=${this._activeContent()}
+          .language=${this._activeLanguage()}
+          editor-label="Code editor – ${this._activeFileName}"
+          @sigvelo-change=${this._onEditorChange}
+        >
+        </sigvelo-code-editor>
+      </div>
+    </div>`;
+	}
+	_renderRightPane(slot) {
+		const content = html`
+      <div class="right-pane__header">
+        <sigvelo-button-group label="Right pane toggle">
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "preview" ? "normal" : "ghost"}
+            color=${this._rightPane === "preview" ? "primary" : "neutral"}
+            @click=${() => this._switchRightPane("preview")}
+            >Preview</sigvelo-button
+          >
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "console" ? "normal" : "ghost"}
+            color=${this._rightPane === "console" ? "primary" : "neutral"}
+            @click=${() => this._switchRightPane("console")}
+            >Console${this._unreadConsoleCount > 0 ? html`<span class="console-badge">${this._unreadConsoleCount}</span>` : ""}</sigvelo-button
+          >
+        </sigvelo-button-group>
+        ${this._rightPane === "console" ? html` <sigvelo-button
+              size="xs"
+              variant="ghost"
+              icon-label="Clear console"
+              @click=${() => this._clearConsole()}
+            >
+              ${ICON_TRASH}
+            </sigvelo-button>` : ""}
+        ${!this.hidePreview ? html` <sigvelo-button size="xs" color="primary" @click=${() => void this._runCode()}>
+              ${ICON_PLAY} Run
+            </sigvelo-button>` : ""}
+      </div>
+      ${this._rightPane === "preview" ? html`
+            <div class="preview-pane__content">
+              <sigvelo-code-preview
+                capture-console
+                @sigvelo-console=${this._onConsoleMessage}
+              ></sigvelo-code-preview>
+            </div>
+          ` : this._renderConsoleView()}
+    `;
+		return slot ? html`<div class="preview-pane" slot=${slot}>${content}</div>` : html`<div class="preview-pane">${content}</div>`;
+	}
+	_renderConsoleView() {
+		return html`
+      <div class="console-view">
+        ${this._consoleLogs.length === 0 ? html` <div class="console-empty">No console output yet.</div> ` : this._consoleLogs.map((entry) => html`
+                <div class="console-entry console-entry--${entry.level}">
+                  <span class="console-entry__level">${entry.level}</span>
+                  <span class="console-entry__text">${entry.args.join(" ")}</span>
+                </div>
+              `)}
+      </div>
+    `;
+	}
+	_renderMobileNav() {
+		const btn = (view, label, badge) => html` <sigvelo-button
+        size="xs"
+        variant=${this._compactView === view ? "normal" : "ghost"}
+        color=${this._compactView === view ? "primary" : "neutral"}
+        @click=${() => this._switchView(view)}
+        >${label}${badge && badge > 0 ? html`<span class="console-badge">${badge}</span>` : ""}</sigvelo-button
+      >`;
+		return html`
+      <div class="mobile-nav">
+        <sigvelo-button-group label="View toggle">
+          ${btn("files", "Files")} ${btn("code", "Code")}
+          ${!this.hidePreview ? btn("preview", "Preview") : ""}
+          ${!this.hidePreview ? btn("console", "Console", this._unreadConsoleCount) : ""}
+        </sigvelo-button-group>
+        ${!this.hidePreview ? html` <sigvelo-button
+              size="xs"
+              color="primary"
+              icon-label="Run"
+              @click=${() => void this._runCode()}
+            >
+              ${ICON_PLAY}
+            </sigvelo-button>` : ""}
+      </div>
+    `;
+	}
+	_renderMobileFileList() {
+		return html`
+      <ul class="mobile-files">
+        ${repeat(this.files, (f) => f.name, (f) => {
+			const lang = f.language ?? detectLanguage(f.name);
+			const isActive = f.name === this._activeFileName;
+			return html` <li class="mobile-file-row">
+              <button
+                class=${classMap({
+				"mobile-file": true,
+				"mobile-file--active": isActive,
+				"mobile-file--removable": this.files.length > 1
+			})}
+                type="button"
+                aria-current=${ifDefined(isActive ? "page" : void 0)}
+                @click=${() => this._selectFileAndShowCode(f.name)}
+              >
+                <span
+                  class="file-icon file-icon--${lang === "javascript" ? "js" : lang === "typescript" ? "ts" : lang}"
+                  >${langIcon(lang)}</span
+                >
+                <span class="mobile-file__name">${f.name}</span>
+              </button>
+              ${this.files.length > 1 ? html`<button
+                    class="mobile-file__close"
+                    type="button"
+                    aria-label="Remove ${f.name}"
+                    @click=${() => this._removeFile(f.name)}
+                  >
+                    &times;
+                  </button>` : ""}
+            </li>`;
+		})}
+        <li>
+          ${this._showAddFile ? html`<div style="padding: 6px;">
+                <div class="add-file-form">
+                  <div class="add-file-row">
+                    <input
+                      class="add-file-input ${this._fileError ? "add-file-input--error" : ""}"
+                      type="text"
+                      placeholder="filename.ts"
+                      .value=${this._newFileName}
+                      @input=${(e) => {
+			this._newFileName = e.target.value;
+			this._fileError = "";
+		}}
+                      @keydown=${(e) => {
+			if (e.key === "Enter") this._confirmAddFile();
+			if (e.key === "Escape") this._dismissAddFile();
+		}}
+                    />
+                    <sigvelo-button size="xs" color="primary" @click=${() => this._confirmAddFile()}
+                      >Add</sigvelo-button
+                    >
+                  </div>
+                  ${this._fileError ? html`<div class="add-file-error">${this._fileError}</div>` : ""}
+                </div>
+              </div>` : html`<button
+                class="mobile-add-btn"
+                @click=${() => {
+			this._showAddFile = true;
+		}}
+              >
+                + New file
+              </button>`}
+        </li>
+      </ul>
+    `;
+	}
+	_renderContent() {
+		if (this.hidePreview) return this._renderEditorPane();
+		if (this.hideEditor) return this._renderRightPane();
+		return html` <sigvelo-splitter
+      orientation=${this.layout === "horizontal" ? "horizontal" : "vertical"}
+      position="0.5"
+      style="--divider-min-position: 20%; --divider-max-position: 80%;"
+    >
+      ${this._renderEditorPane("start")} ${this._renderRightPane("end")}
+    </sigvelo-splitter>`;
+	}
+	render() {
+		if (this._compact) return html`
+        ${this._renderMobileNav()}
+        <div class="single-pane">
+          ${this._compactView === "files" ? this._renderMobileFileList() : this._compactView === "code" ? this._renderEditorPane() : this._compactView === "console" ? this._renderConsoleView() : html`
+                    <div class="preview-pane">
+                      <div class="preview-pane__content">
+                        <sigvelo-code-preview
+                          capture-console
+                          @sigvelo-console=${this._onConsoleMessage}
+                        ></sigvelo-code-preview>
+                      </div>
+                    </div>
+                  `}
+        </div>
+      `;
+		return html` <div class="content">${this._renderContent()}</div> `;
+	}
+};
+__decorate([property({ type: Array })], SigveloInteractiveEditor.prototype, "files", void 0);
+__decorate([property({ attribute: "entry-file" })], SigveloInteractiveEditor.prototype, "entryFile", void 0);
+__decorate([property({ reflect: true })], SigveloInteractiveEditor.prototype, "layout", void 0);
+__decorate([property({
+	attribute: "hide-editor",
+	type: Boolean,
+	reflect: true
+})], SigveloInteractiveEditor.prototype, "hideEditor", void 0);
+__decorate([property({
+	attribute: "hide-preview",
+	type: Boolean,
+	reflect: true
+})], SigveloInteractiveEditor.prototype, "hidePreview", void 0);
+__decorate([property({
+	attribute: "auto-run",
+	type: Boolean
+})], SigveloInteractiveEditor.prototype, "autoRun", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_activeFileName", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_fileContents", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_showAddFile", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_newFileName", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_fileError", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_compact", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_compactView", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_rightPane", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_consoleLogs", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_unreadConsoleCount", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_sidebarOpen", void 0);
+__decorate([state()], SigveloInteractiveEditor.prototype, "_expandedFolders", void 0);
+__decorate([query("sigvelo-code-preview")], SigveloInteractiveEditor.prototype, "_preview", void 0);
+customElements.define("sigvelo-interactive-editor", SigveloInteractiveEditor);
+//#endregion
+export { SigveloInteractiveEditor as t };