viteboard 0.1.0

package/src/ui/StorageManager.ts

@@ -0,0 +1,94 @@
+import { openModal, showToast } from "./Modal";
+import type { BoardState } from "../app/BoardState";
+import { assetStore } from "../storage/AssetStore";
+import { boardStore } from "../storage/LocalBoardStore";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+export function openStorageManager(
+  state: BoardState,
+  onClearBoard: () => void,
+  onResetAll: () => void
+): void {
+  openModal("Local storage", async (body, close) => {
+    const rows = document.createElement("div");
+    body.appendChild(rows);
+
+    const addRow = (name: string, value: string) => {
+      const row = document.createElement("div");
+      row.className = "storage-row";
+      const a = document.createElement("span");
+      a.textContent = name;
+      const b = document.createElement("span");
+      b.textContent = value;
+      row.appendChild(a);
+      row.appendChild(b);
+      rows.appendChild(row);
+    };
+
+    addRow("Elements on board", String(state.elements.length));
+
+    const boardJson = JSON.stringify(state.elements);
+    addRow("Board data size", formatBytes(boardJson.length));
+
+    const assetKeys = await assetStore.getAllKeys();
+    addRow("Image assets", String(assetKeys.length));
+
+    const assetBytes = await assetStore.totalSizeBytes();
+    addRow("Image asset size", formatBytes(assetBytes));
+
+    const est = await boardStore.estimateStorage();
+    if (est.quota > 0) {
+      addRow(
+        "Browser storage",
+        `${formatBytes(est.usage)} of ${formatBytes(est.quota)}`
+      );
+    }
+
+    const actions = document.createElement("div");
+    actions.className = "modal-actions";
+
+    const clearUnusedBtn = document.createElement("button");
+    clearUnusedBtn.className = "btn";
+    clearUnusedBtn.textContent = "Clear unused assets";
+    clearUnusedBtn.addEventListener("click", async () => {
+      const referenced = new Set<string>();
+      for (const el of state.elements) {
+        const id = el.data.assetId;
+        if (typeof id === "string") referenced.add(id);
+      }
+      const removed = await assetStore.clearUnused(referenced);
+      showToast(`Removed ${removed} unused asset${removed === 1 ? "" : "s"}`);
+      close();
+    });
+    actions.appendChild(clearUnusedBtn);
+
+    const clearBoardBtn = document.createElement("button");
+    clearBoardBtn.className = "btn danger";
+    clearBoardBtn.textContent = "Clear board";
+    clearBoardBtn.addEventListener("click", () => {
+      if (confirm("Remove all elements from this board?")) {
+        onClearBoard();
+        close();
+      }
+    });
+    actions.appendChild(clearBoardBtn);
+
+    const resetBtn = document.createElement("button");
+    resetBtn.className = "btn danger";
+    resetBtn.textContent = "Reset all local data";
+    resetBtn.addEventListener("click", () => {
+      if (confirm("Delete ALL local boards, assets and preferences? This cannot be undone.")) {
+        onResetAll();
+        close();
+      }
+    });
+    actions.appendChild(resetBtn);
+
+    body.appendChild(actions);
+  });
+}

package/src/ui/TemplatePicker.ts

@@ -0,0 +1,67 @@
+import { openModal } from "./Modal";
+import { TEMPLATES } from "../templates";
+import type { BoardState } from "../app/BoardState";
+import type { CommandManager } from "../app/CommandManager";
+import { screenToWorld } from "../canvas/Viewport";
+import type { BoardElement } from "../elements/types";
+
+export function openTemplatePicker(state: BoardState, commands: CommandManager): void {
+  openModal("Insert a template", (body, close) => {
+    const grid = document.createElement("div");
+    grid.className = "template-grid";
+
+    for (const def of TEMPLATES) {
+      const card = document.createElement("button");
+      card.className = "template-card";
+
+      const name = document.createElement("span");
+      name.className = "t-name";
+      name.textContent = def.name;
+
+      const desc = document.createElement("span");
+      desc.className = "t-desc";
+      desc.textContent = def.description;
+
+      card.appendChild(name);
+      card.appendChild(desc);
+      card.addEventListener("click", () => {
+        insertTemplate(state, commands, def.build);
+        close();
+      });
+      grid.appendChild(card);
+    }
+
+    body.appendChild(grid);
+  });
+}
+
+function insertTemplate(
+  state: BoardState,
+  commands: CommandManager,
+  build: (ox: number, oy: number, theme: "light" | "dark", baseZ: number) => BoardElement[]
+): void {
+  const center = screenToWorld(
+    window.innerWidth / 2,
+    window.innerHeight / 2,
+    state.viewport
+  );
+  const elements = build(center.x - 380, center.y - 280, state.theme, state.maxZIndex());
+
+  commands.execute(
+    "insert-template",
+    () => {
+      for (const el of elements) {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+      }
+      state.emitChange();
+    },
+    () => {
+      for (const el of elements) state.removeElement(el.id);
+      state.emitChange();
+    }
+  );
+
+  state.clearSelection();
+  for (const el of elements) state.selectedIds.add(el.id);
+  state.requestRender();
+}

package/src/ui/TextEditorOverlay.ts

@@ -0,0 +1,137 @@
+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 textarea: HTMLTextAreaElement | null = null;
+  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;
+
+    const ta = document.createElement("textarea");
+    ta.className = "text-editor";
+    ta.value = (el.data.text as string) ?? "";
+    this.position(ta, el);
+
+    document.body.appendChild(ta);
+    this.textarea = 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();
+      }
+    });
+  }
+
+  /** Reposition while viewport changes (e.g. window resize). */
+  private position(ta: HTMLTextAreaElement, el: BoardElement): void {
+    const vp = this.state.viewport;
+    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 editorHeight = isChevron
+      ? Math.max(28, fontSize * 1.28)
+      : Math.max(24, el.height * vp.scale - (el.type === "sticky" ? 28 : el.type === "task" ? 0 : el.type === "text" ? 0 : chevronPad * 2) * vp.scale);
+    const yPad = isChevron
+      ? Math.max(0, (el.height * vp.scale - editorHeight) / 2)
+      : (el.type === "sticky" ? 14 : el.type === "task" ? 0 : el.type === "text" ? 0 : chevronPad) * vp.scale;
+    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.textarea) {
+      const ta = this.textarea;
+      this.textarea = null;
+      this.editingId = null;
+      ta.remove();
+    }
+  }
+}

package/src/ui/Toolbar.ts

@@ -0,0 +1,151 @@
+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: "arrow", icon: "arrow", label: "Arrow", key: "A" },
+  { 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: "" },
+];
+
+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 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));
+    }
+
+    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 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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,50 @@
+/**
+ * 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>`,
+  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

@@ -0,0 +1,19 @@
+{
+  "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"]
+}