viteboard 0.1.1 → 0.1.2

package/src/ui/TextEditorOverlay.ts

@@ -1,262 +0,0 @@
-import type { BoardState } from "../app/BoardState";
-import type { CommandManager } from "../app/CommandManager";
-import type { BoardElement } from "../elements/types";
-import { worldToScreen } from "../canvas/Viewport";
-import { getRenderedTextFontSize, invalidateTextCache } from "../elements/renderElement";
-
-/**
- * Temporary HTML textarea positioned over a canvas element for editing.
- * Canvas renders the final text; the textarea exists only during editing.
- */
-export class TextEditorOverlay {
-  private state: BoardState;
-  private commands: CommandManager;
-  private textareas: HTMLTextAreaElement[] = [];
-  private editingId: string | null = null;
-
-  constructor(state: BoardState, commands: CommandManager) {
-    this.state = state;
-    this.commands = commands;
-  }
-
-  get isEditing(): boolean {
-    return this.editingId !== null;
-  }
-
-  open(el: BoardElement): void {
-    this.close();
-    this.editingId = el.id;
-    if (el.data.labelPosition === "sides") {
-      this.openSideEditors(el);
-      return;
-    }
-
-    const ta = document.createElement("textarea");
-    ta.className = "text-editor";
-    ta.value = (el.data.text as string) ?? "";
-    if (el.data.labelPosition === "sides") ta.placeholder = "left label | right label";
-    this.position(ta, el);
-
-    document.body.appendChild(ta);
-    this.textareas = [ta];
-    ta.focus();
-    ta.select();
-
-    // hide canvas text while editing by temporarily blanking it
-    const originalText = (el.data.text as string) ?? "";
-    el.data.text = "";
-    el.updatedAt = Date.now();
-    invalidateTextCache(el.id);
-    this.state.requestRender();
-
-    const commit = () => {
-      const newText = ta.value;
-      el.data.text = newText;
-      el.updatedAt = Date.now();
-      invalidateTextCache(el.id);
-
-      if (newText !== originalText) {
-        const id = el.id;
-        const state = this.state;
-        this.commands.push(
-          "edit-text",
-          () => {
-            const target = state.elementsById.get(id);
-            if (target) {
-              target.data.text = newText;
-              target.updatedAt = Date.now();
-              invalidateTextCache(id);
-              state.emitChange();
-            }
-          },
-          () => {
-            const target = state.elementsById.get(id);
-            if (target) {
-              target.data.text = originalText;
-              target.updatedAt = Date.now();
-              invalidateTextCache(id);
-              state.emitChange();
-            }
-          }
-        );
-      }
-      this.state.emitChange();
-      this.close();
-    };
-
-    ta.addEventListener("blur", commit);
-    ta.addEventListener("keydown", (e) => {
-      e.stopPropagation();
-      if (e.key === "Escape") {
-        el.data.text = originalText;
-        invalidateTextCache(el.id);
-        this.close();
-        this.state.requestRender();
-      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-        ta.blur();
-      }
-    });
-  }
-
-  private openSideEditors(el: BoardElement): void {
-    const originalText = String(el.data.text ?? "");
-    const [leftValue = "", rightValue = ""] = originalText.split("|", 2).map((part) => part.trim());
-    const left = this.makeSideEditor("Left label", leftValue);
-    const right = this.makeSideEditor("Right label", rightValue);
-    this.positionSideEditors(left, right, el);
-    document.body.append(left, right);
-    this.textareas = [left, right];
-    left.focus();
-    left.select();
-
-    el.data.text = "";
-    el.updatedAt = Date.now();
-    invalidateTextCache(el.id);
-    this.state.requestRender();
-
-    let settled = false;
-    const commit = () => {
-      if (settled) return;
-      settled = true;
-      const next = `${left.value.trim()} | ${right.value.trim()}`;
-      el.data.text = next;
-      el.updatedAt = Date.now();
-      invalidateTextCache(el.id);
-      if (next !== originalText) this.pushTextCommand(el.id, originalText, next);
-      this.state.emitChange();
-      this.close();
-    };
-    const cancel = () => {
-      if (settled) return;
-      settled = true;
-      el.data.text = originalText;
-      invalidateTextCache(el.id);
-      this.close();
-      this.state.requestRender();
-    };
-    for (const editor of [left, right]) {
-      editor.addEventListener("keydown", (e) => {
-        e.stopPropagation();
-        if (e.key === "Escape") cancel();
-        else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) commit();
-      });
-      editor.addEventListener("blur", () => {
-        window.setTimeout(() => {
-          if (!this.textareas.includes(document.activeElement as HTMLTextAreaElement)) commit();
-        }, 0);
-      });
-    }
-  }
-
-  private makeSideEditor(placeholder: string, value: string): HTMLTextAreaElement {
-    const ta = document.createElement("textarea");
-    ta.className = "text-editor text-editor-side";
-    ta.placeholder = placeholder;
-    ta.value = value;
-    ta.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
-    ta.style.fontWeight = "600";
-    ta.style.textAlign = "center";
-    ta.style.lineHeight = "1.35";
-    ta.style.color = this.state.theme === "dark" ? "#f2f2f2" : "#1f2933";
-    return ta;
-  }
-
-  private positionSideEditors(left: HTMLTextAreaElement, right: HTMLTextAreaElement, el: BoardElement): void {
-    const vp = this.state.viewport;
-    const start = worldToScreen(el.x, el.y, vp);
-    const end = worldToScreen(el.x + el.width, el.y + el.height, vp);
-    const fontSize = 13 * vp.scale;
-    const width = Math.max(82, Math.min(150, Math.hypot(end.x - start.x, end.y - start.y) * 0.34));
-    const height = Math.max(24, fontSize * 1.35 + 4);
-    for (const [editor, position] of [[left, 0.24], [right, 0.76]] as const) {
-      editor.style.left = (start.x + (end.x - start.x) * position - width / 2) + "px";
-      editor.style.top = (start.y + (end.y - start.y) * position - height / 2) + "px";
-      editor.style.width = width + "px";
-      editor.style.height = height + "px";
-      editor.style.fontSize = fontSize + "px";
-    }
-  }
-
-  private pushTextCommand(id: string, originalText: string, newText: string): void {
-    const state = this.state;
-    this.commands.push(
-      "edit-text",
-      () => {
-        const target = state.elementsById.get(id);
-        if (target) { target.data.text = newText; target.updatedAt = Date.now(); invalidateTextCache(id); state.emitChange(); }
-      },
-      () => {
-        const target = state.elementsById.get(id);
-        if (target) { target.data.text = originalText; target.updatedAt = Date.now(); invalidateTextCache(id); state.emitChange(); }
-      }
-    );
-  }
-
-  /** Reposition while viewport changes (e.g. window resize). */
-  private position(ta: HTMLTextAreaElement, el: BoardElement): void {
-    const vp = this.state.viewport;
-    if (el.type === "arrow" || el.type === "line" || el.type === "connector") {
-      const start = worldToScreen(el.x, el.y, vp);
-      const end = worldToScreen(el.x + el.width, el.y + el.height, vp);
-      const fontSize = 13 * vp.scale;
-      const width = Math.max(100, Math.min(240, Math.hypot(end.x - start.x, end.y - start.y) - 16));
-      const height = Math.max(24, fontSize * 1.35 + 4);
-      ta.style.left = (start.x + end.x) / 2 - width / 2 + "px";
-      ta.style.top = (start.y + end.y) / 2 - height / 2 + "px";
-      ta.style.width = width + "px";
-      ta.style.height = height + "px";
-      ta.style.fontSize = fontSize + "px";
-      ta.style.lineHeight = "1.35";
-      ta.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
-      ta.style.fontWeight = "600";
-      ta.style.color = this.state.theme === "dark" ? "#f2f2f2" : "#1f2933";
-      ta.style.textAlign = "center";
-      return;
-    }
-    const tl = worldToScreen(el.x, el.y, vp);
-    const isChevron = el.data.shapeKind === "chevron";
-    const fontSize = getRenderedTextFontSize(el) * vp.scale;
-    const chevronPad =
-      isChevron
-        ? Math.min(Math.abs(el.width) * 0.18, Math.abs(el.height) * 0.55) + 8
-        : 10;
-    const xPad = (el.type === "sticky" ? 14 : el.type === "task" ? 50 : el.type === "text" ? 0 : chevronPad) * vp.scale;
-    const isCentered = el.type !== "text" && el.type !== "task";
-    const availableHeight = isChevron
-      ? el.height * vp.scale
-      : el.height * vp.scale - (el.type === "sticky" ? 28 : isCentered ? chevronPad * 2 : 0) * vp.scale;
-    // A textarea fills from its top edge. Give centered diagram nodes a
-    // content-height editor and position that editor on the canvas baseline.
-    const lineCount = Math.max(1, String(el.data.text ?? "").split(/\r?\n/).length);
-    const contentHeight = Math.max(24, fontSize * (isChevron ? 1.18 : 1.35) * lineCount + 4);
-    const editorHeight = isCentered
-      ? Math.min(Math.max(24, availableHeight), contentHeight)
-      : Math.max(24, availableHeight);
-    const yPad = isCentered
-      ? Math.max(0, (el.height * vp.scale - editorHeight) / 2)
-      : el.type === "sticky" ? 14 * vp.scale : 0;
-    const rightPad = (el.type === "task" ? 16 : el.type === "sticky" ? 14 : el.type === "text" ? 0 : chevronPad) * vp.scale;
-
-    ta.style.left = tl.x + xPad + "px";
-    ta.style.top = tl.y + yPad + "px";
-    ta.style.width = Math.max(40, el.width * vp.scale - xPad - rightPad) + "px";
-    ta.style.height = editorHeight + "px";
-    ta.style.fontSize = fontSize + "px";
-    ta.style.lineHeight = isChevron ? "1.18" : "1.35";
-    ta.style.fontFamily =
-      el.style.fontFamily ?? '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
-    ta.style.fontWeight = isChevron ? "750" : el.style.fontWeight ?? "400";
-    ta.style.color =
-      el.style.textColor ?? (this.state.theme === "dark" ? "#f2f2f2" : "#1f2933");
-    ta.style.textAlign = el.type === "text" || el.type === "task" ? "left" : "center";
-  }
-
-  close(): void {
-    if (this.textareas.length) {
-      const editors = this.textareas;
-      this.textareas = [];
-      this.editingId = null;
-      for (const editor of editors) editor.remove();
-    }
-  }
-}

package/src/ui/Toolbar.ts

@@ -1,189 +0,0 @@
-import { ICONS } from "./icons";
-import type { ToolName } from "../tools/ToolContext";
-
-export type ToolbarActions = {
-  setTool: (tool: ToolName) => void;
-  openTemplates: () => void;
-  toggleTheme: () => void;
-  openExportMenu: () => void;
-  toggleStressPanel: () => void;
-  /** Optional: start the drag-to-select embed flow (file-backed boards only). */
-  copyEmbed?: () => void;
-};
-
-const TOOL_BUTTONS: { tool: ToolName; icon: string; label: string; key: string }[] = [
-  { tool: "select", icon: "select", label: "Select", key: "V" },
-  { tool: "hand", icon: "hand", label: "Hand", key: "H" },
-  { tool: "sticky", icon: "sticky", label: "Sticky note", key: "S" },
-  { tool: "task", icon: "task", label: "Task", key: "" },
-  { tool: "text", icon: "text", label: "Text", key: "T" },
-  { tool: "image", icon: "image", label: "Image", key: "I" },
-];
-
-const SHAPE_BUTTONS: { tool: ToolName; icon: string; label: string; key: string }[] = [
-  { tool: "rectangle", icon: "rectangle", label: "Rectangle", key: "R" },
-  { tool: "ellipse", icon: "ellipse", label: "Ellipse", key: "O" },
-  { tool: "diamond", icon: "diamond", label: "Diamond", key: "" },
-  { tool: "triangle", icon: "triangle", label: "Triangle", key: "" },
-  { tool: "pill", icon: "pill", label: "Pill", key: "" },
-  { tool: "chevron", icon: "chevron", label: "Chevron", key: "" },
-  { tool: "parallelogram", icon: "parallelogram", label: "Parallelogram", key: "" },
-  { tool: "hexagon", icon: "hexagon", label: "Hexagon", key: "" },
-  { tool: "cylinder", icon: "cylinder", label: "Cylinder", key: "" },
-];
-
-const ARROW_BUTTONS: { tool: ToolName; icon: string; label: string; key: string }[] = [
-  { tool: "arrow", icon: "arrow", label: "Arrow (hold Shift to snap)", key: "A" },
-  { tool: "dashedArrow", icon: "arrowDashed", label: "Dashed arrow", key: "" },
-  { tool: "twoWayArrow", icon: "arrowBoth", label: "Two-way arrow", key: "" },
-  { tool: "labeledArrow", icon: "arrowLabel", label: "Centered label arrow", key: "" },
-  { tool: "sidedLabelArrow", icon: "arrowLabel", label: "Left and right labels", key: "" },
-];
-
-const SHAPE_TOOLS = new Set<ToolName>(SHAPE_BUTTONS.map((item) => item.tool));
-
-export class Toolbar {
-  element: HTMLDivElement;
-  private toolButtons = new Map<ToolName, HTMLButtonElement>();
-  private shapeButtons = new Map<ToolName, HTMLButtonElement>();
-  private shapeBtn!: HTMLButtonElement;
-  private shapeGroup!: HTMLDivElement;
-  private arrowGroup!: HTMLDivElement;
-  private themeBtn!: HTMLButtonElement;
-
-  constructor(parent: HTMLElement, actions: ToolbarActions) {
-    this.element = document.createElement("div");
-    this.element.className = "toolbar";
-
-    for (const def of TOOL_BUTTONS) {
-      const btn = this.makeButton(def.icon, def.label, def.key);
-      btn.addEventListener("click", () => actions.setTool(def.tool));
-      this.toolButtons.set(def.tool, btn);
-      this.element.appendChild(btn);
-      if (def.tool === "sticky") this.element.appendChild(this.makeShapePicker(actions));
-      if (def.tool === "text") this.element.appendChild(this.makeArrowPicker(actions));
-    }
-
-    this.element.appendChild(this.divider());
-
-    const templatesBtn = this.makeButton("templates", "Templates", "");
-    templatesBtn.addEventListener("click", actions.openTemplates);
-    this.element.appendChild(templatesBtn);
-
-    this.element.appendChild(this.divider());
-
-    this.themeBtn = this.makeButton("moon", "Toggle theme", "");
-    this.themeBtn.addEventListener("click", actions.toggleTheme);
-    this.element.appendChild(this.themeBtn);
-
-    const exportBtn = this.makeButton("export", "Export / Import", "");
-    exportBtn.addEventListener("click", actions.openExportMenu);
-    this.element.appendChild(exportBtn);
-
-    const stressBtn = this.makeButton("flask", "Stress test", "");
-    stressBtn.addEventListener("click", actions.toggleStressPanel);
-    this.element.appendChild(stressBtn);
-
-    if (actions.copyEmbed) {
-      this.element.appendChild(this.divider());
-      const embedBtn = this.makeButton("embed", "Copy embed of a region", "");
-      embedBtn.addEventListener("click", actions.copyEmbed);
-      this.element.appendChild(embedBtn);
-    }
-
-    parent.appendChild(this.element);
-  }
-
-  private makeButton(icon: string, label: string, key: string): HTMLButtonElement {
-    const btn = document.createElement("button");
-    btn.className = "tool-btn";
-    btn.setAttribute("aria-label", label);
-    btn.innerHTML = ICONS[icon] ?? "";
-    const tip = document.createElement("span");
-    tip.className = "tooltip";
-    tip.textContent = label;
-    if (key) {
-      const kbd = document.createElement("kbd");
-      kbd.textContent = key;
-      tip.appendChild(kbd);
-    }
-    btn.appendChild(tip);
-    return btn;
-  }
-
-  private makeShapePicker(actions: ToolbarActions): HTMLDivElement {
-    this.shapeGroup = document.createElement("div");
-    this.shapeGroup.className = "shape-tool-group";
-    this.shapeBtn = this.makeButton("shapes", "Shapes", "");
-    this.shapeBtn.classList.add("shape-tool-trigger");
-    this.shapeBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      this.shapeGroup.classList.toggle("open");
-    });
-
-    const menu = document.createElement("div");
-    menu.className = "shape-tool-popover";
-    for (const def of SHAPE_BUTTONS) {
-      const btn = this.makeButton(def.icon, def.label, def.key);
-      btn.classList.add("shape-option-btn");
-      btn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        actions.setTool(def.tool);
-        this.shapeGroup.classList.remove("open");
-      });
-      this.shapeButtons.set(def.tool, btn);
-      menu.appendChild(btn);
-    }
-
-    this.shapeGroup.append(this.shapeBtn, menu);
-    return this.shapeGroup;
-  }
-
-  private makeArrowPicker(actions: ToolbarActions): HTMLDivElement {
-    this.arrowGroup = document.createElement("div");
-    this.arrowGroup.className = "shape-tool-group";
-    const trigger = this.makeButton("arrow", "Arrow types", "");
-    trigger.classList.add("shape-tool-trigger");
-    trigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      this.arrowGroup.classList.toggle("open");
-    });
-    const menu = document.createElement("div");
-    menu.className = "shape-tool-popover";
-    for (const def of ARROW_BUTTONS) {
-      const btn = this.makeButton(def.icon, def.label, def.key);
-      btn.classList.add("shape-option-btn");
-      btn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        actions.setTool(def.tool);
-        this.arrowGroup.classList.remove("open");
-      });
-      this.toolButtons.set(def.tool, btn);
-      menu.appendChild(btn);
-    }
-    this.arrowGroup.append(trigger, menu);
-    return this.arrowGroup;
-  }
-
-  private divider(): HTMLDivElement {
-    const d = document.createElement("div");
-    d.className = "toolbar-divider";
-    return d;
-  }
-
-  setActiveTool(tool: ToolName): void {
-    for (const [name, btn] of this.toolButtons) {
-      btn.classList.toggle("active", name === tool);
-    }
-    for (const [name, btn] of this.shapeButtons) {
-      btn.classList.toggle("active", name === tool);
-    }
-    this.shapeBtn?.classList.toggle("active", SHAPE_TOOLS.has(tool));
-  }
-
-  setTheme(theme: "light" | "dark"): void {
-    const tip = this.themeBtn.querySelector(".tooltip");
-    this.themeBtn.innerHTML = ICONS[theme === "dark" ? "sun" : "moon"];
-    if (tip) this.themeBtn.appendChild(tip);
-  }
-}

package/src/ui/TopControls.ts

@@ -1,137 +0,0 @@
-import { ICONS } from "./icons";
-
-export type TopControlActions = {
-  resetView: () => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  openStorageManager: () => void;
-  togglePerfOverlay: () => void;
-  onTitleChange: (title: string) => void;
-  deleteBoard?: () => void;
-  /** Optional: shown as a "← ViteBoard" button to the left of the title. */
-  onExit?: () => void;
-};
-
-export class TopControls {
-  private zoomLabel!: HTMLButtonElement;
-  private titleInput!: HTMLInputElement;
-  private titleMeasure!: HTMLSpanElement;
-
-  constructor(parent: HTMLElement, actions: TopControlActions, initialTitle: string) {
-    // top-left: optional back button + board title
-    const topLeft = document.createElement("div");
-    topLeft.className = "top-left";
-
-    if (actions.onExit) {
-      const back = document.createElement("button");
-      back.className = "control-btn back-btn";
-      back.innerHTML = `${ICONS.arrowLeft ?? ""}<span>ViteBoard</span>`;
-      back.title = "Save and back to ViteBoard";
-      back.setAttribute("aria-label", "Back to ViteBoard");
-      back.addEventListener("click", actions.onExit);
-      topLeft.appendChild(back);
-    }
-
-    this.titleInput = document.createElement("input");
-    this.titleInput.className = "board-title";
-    this.titleInput.value = initialTitle;
-    this.titleInput.maxLength = 120;
-    this.titleInput.setAttribute("aria-label", "Board title");
-    this.titleInput.addEventListener("change", () =>
-      actions.onTitleChange(this.titleInput.value.trim() || "Untitled Board")
-    );
-    this.titleInput.addEventListener("input", () => this.resizeTitleInput());
-    this.titleInput.addEventListener("keydown", (e) => {
-      e.stopPropagation();
-      if (e.key === "Enter") this.titleInput.blur();
-    });
-    this.titleMeasure = document.createElement("span");
-    this.titleMeasure.className = "board-title-measure";
-    topLeft.appendChild(this.titleInput);
-    topLeft.appendChild(this.titleMeasure);
-    parent.appendChild(topLeft);
-    this.resizeTitleInput();
-
-    // top-right controls
-    const topRight = document.createElement("div");
-    topRight.className = "top-right";
-
-    const zoomGroup = document.createElement("div");
-    zoomGroup.className = "control-group";
-
-    const zoomOut = this.btn("−", "Zoom out (Ctrl/Cmd + wheel or Ctrl/Cmd + -)");
-    zoomOut.addEventListener("click", actions.zoomOut);
-    zoomGroup.appendChild(zoomOut);
-
-    this.zoomLabel = this.btn("100%", "Reset zoom to 100% (Ctrl/Cmd + 0)");
-    this.zoomLabel.classList.add("zoom-label");
-    this.zoomLabel.addEventListener("click", actions.resetView);
-    zoomGroup.appendChild(this.zoomLabel);
-
-    const zoomIn = this.btn("+", "Zoom in (Ctrl/Cmd + wheel or Ctrl/Cmd + +)");
-    zoomIn.addEventListener("click", actions.zoomIn);
-    zoomGroup.appendChild(zoomIn);
-
-    topRight.appendChild(zoomGroup);
-
-    const utilGroup = document.createElement("div");
-    utilGroup.className = "control-group";
-
-    const resetBtn = this.iconBtn("reset", "Reset view");
-    resetBtn.addEventListener("click", actions.resetView);
-    utilGroup.appendChild(resetBtn);
-
-    const storageBtn = this.iconBtn("storage", "Storage manager");
-    storageBtn.addEventListener("click", actions.openStorageManager);
-    utilGroup.appendChild(storageBtn);
-
-    const perfBtn = this.iconBtn("gauge", "Performance overlay");
-    perfBtn.addEventListener("click", actions.togglePerfOverlay);
-    utilGroup.appendChild(perfBtn);
-
-    if (actions.deleteBoard) {
-      const deleteBtn = this.iconBtn("trash", "Delete board");
-      deleteBtn.classList.add("danger-control");
-      deleteBtn.addEventListener("click", actions.deleteBoard);
-      utilGroup.appendChild(deleteBtn);
-    }
-
-    topRight.appendChild(utilGroup);
-    parent.appendChild(topRight);
-  }
-
-  private btn(text: string, label: string): HTMLButtonElement {
-    const b = document.createElement("button");
-    b.className = "control-btn";
-    b.textContent = text;
-    b.title = label;
-    b.setAttribute("aria-label", label);
-    return b;
-  }
-
-  private iconBtn(icon: string, label: string): HTMLButtonElement {
-    const b = document.createElement("button");
-    b.className = "control-btn";
-    b.innerHTML = ICONS[icon] ?? "";
-    b.title = label;
-    b.setAttribute("aria-label", label);
-    return b;
-  }
-
-  setZoom(scale: number): void {
-    this.zoomLabel.textContent = Math.round(scale * 100) + "%";
-  }
-
-  setTitle(title: string): void {
-    this.titleInput.value = title;
-    this.resizeTitleInput();
-  }
-
-  private resizeTitleInput(): void {
-    if (!this.titleMeasure || !this.titleInput) return;
-    this.titleMeasure.textContent = this.titleInput.value || "Untitled Board";
-    const desired = Math.ceil(this.titleMeasure.getBoundingClientRect().width + 22);
-    const max = Math.max(180, window.innerWidth - 460);
-    this.titleInput.style.width = Math.min(Math.max(90, desired), max) + "px";
-  }
-}

package/src/ui/icons.ts

@@ -1,56 +0,0 @@
-/**
- * Inline SVG icons (stroke-based, Lucide-style geometry, hand-written).
- * Returned as innerHTML-safe static strings (no user content).
- */
-export const ICONS: Record<string, string> = {
-  select: `<svg viewBox="0 0 24 24"><path d="M4 3l7 18 2.5-7.5L21 11z"/></svg>`,
-  hand: `<svg viewBox="0 0 24 24"><path d="M18 11V6.5a1.5 1.5 0 0 0-3 0V11m0-1V4.5a1.5 1.5 0 0 0-3 0V10m0 .5v-5a1.5 1.5 0 0 0-3 0V12m9-1v1.5a1.5 1.5 0 0 1 3 0V14c0 4-2.5 7-6.5 7S8 18.5 6 15l-1.8-3.2a1.4 1.4 0 0 1 2.3-1.5L8 12V7"/></svg>`,
-  sticky: `<svg viewBox="0 0 24 24"><path d="M5 4h14a1 1 0 0 1 1 1v9l-6 6H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><path d="M14 20v-5a1 1 0 0 1 1-1h5"/></svg>`,
-  task: `<svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="3"/><path d="M8 12l2.3 2.3L16 8.8"/></svg>`,
-  rectangle: `<svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/></svg>`,
-  ellipse: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="12" rx="8.5" ry="7"/></svg>`,
-  diamond: `<svg viewBox="0 0 24 24"><path d="M12 3l8 9-8 9-8-9z"/></svg>`,
-  triangle: `<svg viewBox="0 0 24 24"><path d="M12 4l9 16H3z"/></svg>`,
-  pill: `<svg viewBox="0 0 24 24"><rect x="3.5" y="7" width="17" height="10" rx="5"/></svg>`,
-  chevron: `<svg viewBox="0 0 24 24"><path d="M4 6h12l5 6-5 6H4l5-6z"/></svg>`,
-  parallelogram: `<svg viewBox="0 0 24 24"><path d="M7 5h13l-3 14H4z"/></svg>`,
-  hexagon: `<svg viewBox="0 0 24 24"><path d="M8 4h8l5 8-5 8H8l-5-8z"/></svg>`,
-  cylinder: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v11c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/></svg>`,
-  arrowDashed: `<svg viewBox="0 0 24 24"><path stroke-dasharray="4 3" d="M4 12h14m0 0l-5-5m5 5l-5 5"/></svg>`,
-  arrowBoth: `<svg viewBox="0 0 24 24"><path d="M4 12h16m-16 0l5-5m-5 5l5 5m11-5l-5-5m5 5l-5 5"/></svg>`,
-  arrowLabel: `<svg viewBox="0 0 24 24"><path d="M3 17L17 7m0 0h-6m6 0v6"/><rect x="7" y="9" width="10" height="6" rx="1"/></svg>`,
-  text: `<svg viewBox="0 0 24 24"><path d="M5 6V4h14v2M12 4v16m-3 0h6"/></svg>`,
-  arrow: `<svg viewBox="0 0 24 24"><path d="M5 19L19 5m0 0h-7m7 0v7"/></svg>`,
-  image: `<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M21 16l-5-5-9 9"/></svg>`,
-  templates: `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg>`,
-  shapes: `<svg viewBox="0 0 24 24"><rect x="4" y="5" width="7" height="7" rx="1.5"/><circle cx="16.5" cy="8.5" r="3.5"/><path d="M7.5 14l3.8 6H3.7z"/><path d="M15 14h4l2 3-2 3h-4l2-3z"/></svg>`,
-  sun: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4l1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4m11.4-11.4l1.4-1.4"/></svg>`,
-  moon: `<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>`,
-  export: `<svg viewBox="0 0 24 24"><path d="M12 15V3m0 0L7 8m5-5l5 5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`,
-  import: `<svg viewBox="0 0 24 24"><path d="M12 3v12m0 0l-5-5m5 5l5-5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`,
-  gauge: `<svg viewBox="0 0 24 24"><path d="M12 14l4-4M3.3 14a9 9 0 1 1 17.4 0"/></svg>`,
-  storage: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5.5" rx="8" ry="2.5"/><path d="M4 5.5V12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V5.5M4 12v6.5C4 19.9 7.6 21 12 21s8-1.1 8-2.5V12"/></svg>`,
-  flask: `<svg viewBox="0 0 24 24"><path d="M9 3h6M10 3v6L4.5 18a2 2 0 0 0 1.8 3h11.4a2 2 0 0 0 1.8-3L14 9V3"/><path d="M7 15h10"/></svg>`,
-  reset: `<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 2.6-6.3M3 4v5h5"/></svg>`,
-  camera: `<svg viewBox="0 0 24 24"><path d="M3 8a2 2 0 0 1 2-2h2l2-2h6l2 2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><circle cx="12" cy="13" r="3.5"/></svg>`,
-  trash: `<svg viewBox="0 0 24 24"><path d="M4 7h16M10 11v6m4-6v6M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>`,
-  embed: `<svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" stroke-dasharray="3 3"/><path d="M9 10l-2 2 2 2m6-4l2 2-2 2"/></svg>`,
-  arrowLeft: `<svg viewBox="0 0 24 24"><path d="M19 12H5m0 0l6-6m-6 6l6 6"/></svg>`,
-  search: `<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>`,
-  panelLeft: `<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M10 4v16"/></svg>`,
-  edit: `<svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>`,
-  copy: `<svg viewBox="0 0 24 24"><rect x="8" y="8" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/></svg>`,
-  folder: `<svg viewBox="0 0 24 24"><path d="M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg>`,
-  folderOpen: `<svg viewBox="0 0 24 24"><path d="M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v1M4 8l1.5 9c.1.6.6 1 1.2 1h10.6c.6 0 1.1-.4 1.2-1L20 8z"/></svg>`,
-  file: `<svg viewBox="0 0 24 24"><path d="M13 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10z"/><path d="M13 3v7h7"/></svg>`,
-  fileText: `<svg viewBox="0 0 24 24"><path d="M13 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10z"/><path d="M13 3v7h7M10 13h4m-4 4h4"/></svg>`,
-  board: `<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="12" y="3" width="9" height="7" rx="1"/><rect x="3" y="12" width="9" height="9" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/></svg>`,
-  doc: `<svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M10 13h4m-4 4h4m-4-8h1"/></svg>`,
-  skill: `<svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3-6.2 3.3 1.2-6.8-5-4.9 6.9-1z"/></svg>`,
-  plus: `<svg viewBox="0 0 24 24"><path d="M12 5v14m-7-7h14"/></svg>`,
-  moreVertical: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>`,
-  chevronRight: `<svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></svg>`,
-  chevronDown: `<svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>`,
-  wiki: `<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h2m-2 4h6m-6-8h1"/></svg>`,
-  list: `<svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>`,
-};

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}