viteboard 0.1.0

package/src/storage/AssetStore.ts

@@ -0,0 +1,86 @@
+import type { LocalAsset } from "../elements/types";
+import { generateId } from "../elements/types";
+import { idb } from "./IndexedDbStore";
+
+/**
+ * Legacy local-only asset store backed by IndexedDB.
+ * The workspace-first docs flow prefers file-backed assets inside repo docs
+ * roots; this store remains as a fallback for standalone/local-only board mode.
+ */
+export class AssetStore {
+  async get(id: string): Promise<LocalAsset | undefined> {
+    try {
+      return await idb.get<LocalAsset>("assets", id);
+    } catch {
+      return undefined;
+    }
+  }
+
+  async createFromBlob(blob: Blob, name?: string): Promise<LocalAsset> {
+    const bitmap = await createImageBitmap(blob);
+    const now = Date.now();
+    const asset: LocalAsset = {
+      id: generateId(),
+      type: "image",
+      mimeType: blob.type || "image/png",
+      blob,
+      width: bitmap.width,
+      height: bitmap.height,
+      sizeBytes: blob.size,
+      createdAt: now,
+      updatedAt: now,
+      name,
+    };
+    bitmap.close();
+    await idb.put("assets", asset);
+    return asset;
+  }
+
+  async put(asset: LocalAsset): Promise<void> {
+    await idb.put("assets", asset);
+  }
+
+  async delete(id: string): Promise<void> {
+    await idb.delete("assets", id);
+  }
+
+  async getAllKeys(): Promise<string[]> {
+    try {
+      return await idb.getAllKeys("assets");
+    } catch {
+      return [];
+    }
+  }
+
+  async getAll(): Promise<LocalAsset[]> {
+    try {
+      return await idb.getAll<LocalAsset>("assets");
+    } catch {
+      return [];
+    }
+  }
+
+  async totalSizeBytes(): Promise<number> {
+    const all = await this.getAll();
+    return all.reduce((sum, a) => sum + a.sizeBytes, 0);
+  }
+
+  /** Remove assets not referenced by the given set of asset IDs. */
+  async clearUnused(referencedIds: Set<string>): Promise<number> {
+    const keys = await this.getAllKeys();
+    let removed = 0;
+    for (const key of keys) {
+      if (!referencedIds.has(key)) {
+        await idb.delete("assets", key);
+        removed++;
+      }
+    }
+    return removed;
+  }
+
+  async clearAll(): Promise<void> {
+    await idb.clearStore("assets");
+  }
+}
+
+export const assetStore = new AssetStore();

package/src/storage/BoardSerializer.ts

@@ -0,0 +1,114 @@
+import type { BoardDocument, BoardElement, ElementType } from "../elements/types";
+import type { BoardState } from "../app/BoardState";
+
+const VALID_TYPES: ElementType[] = [
+  "sticky",
+  "task",
+  "rectangle",
+  "ellipse",
+  "text",
+  "line",
+  "arrow",
+  "connector",
+  "image",
+  "screenshot",
+  "frame",
+  "templateGroup",
+];
+
+export function serializeBoard(state: BoardState): BoardDocument {
+  const assetIds = new Set<string>();
+  for (const el of state.elements) {
+    const assetId = el.data.assetId;
+    if (typeof assetId === "string") assetIds.add(assetId);
+  }
+  return {
+    version: 1,
+    id: state.boardId,
+    title: state.title,
+    createdAt: state.createdAt,
+    updatedAt: Date.now(),
+    viewport: { ...state.viewport },
+    theme: state.theme,
+    elements: state.elements,
+    assetIds: [...assetIds],
+  };
+}
+
+function isFiniteNumber(v: unknown): v is number {
+  return typeof v === "number" && Number.isFinite(v);
+}
+
+export function validateElement(raw: unknown): BoardElement | null {
+  if (typeof raw !== "object" || raw === null) return null;
+  const el = raw as Record<string, unknown>;
+  if (typeof el.id !== "string") return null;
+  if (typeof el.type !== "string" || !VALID_TYPES.includes(el.type as ElementType))
+    return null;
+  if (
+    !isFiniteNumber(el.x) ||
+    !isFiniteNumber(el.y) ||
+    !isFiniteNumber(el.width) ||
+    !isFiniteNumber(el.height)
+  )
+    return null;
+
+  return {
+    id: el.id,
+    type: el.type as ElementType,
+    x: el.x,
+    y: el.y,
+    width: el.width,
+    height: el.height,
+    rotation: isFiniteNumber(el.rotation) ? el.rotation : 0,
+    zIndex: isFiniteNumber(el.zIndex) ? el.zIndex : 0,
+    locked: el.locked === true,
+    hidden: el.hidden === true,
+    createdAt: isFiniteNumber(el.createdAt) ? el.createdAt : Date.now(),
+    updatedAt: isFiniteNumber(el.updatedAt) ? el.updatedAt : Date.now(),
+    style:
+      typeof el.style === "object" && el.style !== null
+        ? (el.style as BoardElement["style"])
+        : {},
+    data:
+      typeof el.data === "object" && el.data !== null
+        ? (el.data as Record<string, unknown>)
+        : {},
+  };
+}
+
+export function validateBoardDocument(raw: unknown): BoardDocument | null {
+  if (typeof raw !== "object" || raw === null) return null;
+  const doc = raw as Record<string, unknown>;
+  if (doc.version !== 1) return null;
+  if (typeof doc.id !== "string") return null;
+  if (!Array.isArray(doc.elements)) return null;
+
+  const elements: BoardElement[] = [];
+  for (const rawEl of doc.elements) {
+    const el = validateElement(rawEl);
+    if (el) elements.push(el);
+  }
+
+  const vp = (doc.viewport ?? {}) as Record<string, unknown>;
+  return {
+    version: 1,
+    id: doc.id,
+    title: typeof doc.title === "string" ? doc.title.slice(0, 200) : "Imported Board",
+    createdAt: isFiniteNumber(doc.createdAt) ? doc.createdAt : Date.now(),
+    updatedAt: isFiniteNumber(doc.updatedAt) ? doc.updatedAt : Date.now(),
+    viewport: {
+      offsetX: isFiniteNumber(vp.offsetX) ? vp.offsetX : 0,
+      offsetY: isFiniteNumber(vp.offsetY) ? vp.offsetY : 0,
+      scale:
+        isFiniteNumber(vp.scale) && vp.scale > 0.01 && vp.scale <= 40
+          ? vp.scale
+          : 1,
+    },
+    theme: doc.theme === "dark" ? "dark" : "light",
+    elements,
+    assetIds: Array.isArray(doc.assetIds)
+      ? doc.assetIds.filter((id): id is string => typeof id === "string")
+      : [],
+  };
+}

package/src/storage/ImportExportService.ts

@@ -0,0 +1,153 @@
+import type { BoardDocument, LocalAsset } from "../elements/types";
+import { generateId } from "../elements/types";
+import { validateBoardDocument } from "./BoardSerializer";
+import { assetStore } from "./AssetStore";
+
+type ExportedAsset = {
+  id: string;
+  mimeType: string;
+  width: number;
+  height: number;
+  name?: string;
+  base64: string;
+};
+
+type BoardBundle = {
+  bundleVersion: 1;
+  board: BoardDocument;
+  assets: ExportedAsset[];
+};
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      resolve(result.slice(result.indexOf(",") + 1));
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+
+function base64ToBlob(base64: string, mimeType: string): Blob {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return new Blob([bytes], { type: mimeType });
+}
+
+function downloadJson(filename: string, data: unknown): void {
+  const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function sanitizeFilename(name: string): string {
+  return name.replace(/[^a-z0-9-_ ]/gi, "").trim().slice(0, 60) || "board";
+}
+
+export class ImportExportService {
+  /** Option A: board JSON only (no image blobs). */
+  exportBoardJson(doc: BoardDocument): void {
+    downloadJson(`${sanitizeFilename(doc.title)}.json`, doc);
+  }
+
+  /** Option B: full bundle with base64 assets. */
+  async exportFullBundle(doc: BoardDocument): Promise<void> {
+    const assets: ExportedAsset[] = [];
+    for (const assetId of doc.assetIds) {
+      const asset = await assetStore.get(assetId);
+      if (!asset) continue;
+      assets.push({
+        id: asset.id,
+        mimeType: asset.mimeType,
+        width: asset.width,
+        height: asset.height,
+        name: asset.name,
+        base64: await blobToBase64(asset.blob),
+      });
+    }
+    const bundle: BoardBundle = { bundleVersion: 1, board: doc, assets };
+    downloadJson(`${sanitizeFilename(doc.title)}-bundle.json`, bundle);
+  }
+
+  /**
+   * Parses and validates an imported file. Imports any bundled assets into the
+   * legacy IndexedDB asset store. Returns the validated board document, or null
+   * if invalid.
+   * Never executes imported content.
+   */
+  async importFromFile(file: File): Promise<BoardDocument | null> {
+    let raw: unknown;
+    try {
+      raw = JSON.parse(await file.text());
+    } catch {
+      return null;
+    }
+    if (typeof raw !== "object" || raw === null) return null;
+
+    const maybeBundle = raw as Record<string, unknown>;
+    if (maybeBundle.bundleVersion === 1 && Array.isArray(maybeBundle.assets)) {
+      const board = validateBoardDocument(maybeBundle.board);
+      if (!board) return null;
+      const idRemap = new Map<string, string>();
+      for (const rawAsset of maybeBundle.assets) {
+        const imported = await this.importAsset(rawAsset);
+        if (imported) idRemap.set(imported.originalId, imported.asset.id);
+      }
+      // remap asset references in elements
+      for (const el of board.elements) {
+        const ref = el.data.assetId;
+        if (typeof ref === "string" && idRemap.has(ref)) {
+          el.data.assetId = idRemap.get(ref);
+        }
+      }
+      board.assetIds = [...idRemap.values()];
+      return board;
+    }
+
+    return validateBoardDocument(raw);
+  }
+
+  private async importAsset(
+    raw: unknown
+  ): Promise<{ originalId: string; asset: LocalAsset } | null> {
+    if (typeof raw !== "object" || raw === null) return null;
+    const a = raw as Record<string, unknown>;
+    if (
+      typeof a.id !== "string" ||
+      typeof a.base64 !== "string" ||
+      typeof a.mimeType !== "string"
+    )
+      return null;
+    if (!a.mimeType.startsWith("image/")) return null;
+
+    try {
+      const blob = base64ToBlob(a.base64, a.mimeType);
+      const now = Date.now();
+      const asset: LocalAsset = {
+        id: generateId(),
+        type: "image",
+        mimeType: a.mimeType,
+        blob,
+        width: typeof a.width === "number" ? a.width : 0,
+        height: typeof a.height === "number" ? a.height : 0,
+        sizeBytes: blob.size,
+        createdAt: now,
+        updatedAt: now,
+        name: typeof a.name === "string" ? a.name.slice(0, 100) : undefined,
+      };
+      await assetStore.put(asset);
+      return { originalId: a.id, asset };
+    } catch {
+      return null;
+    }
+  }
+}
+
+export const importExportService = new ImportExportService();

package/src/storage/IndexedDbStore.ts

@@ -0,0 +1,92 @@
+/**
+ * Minimal native IndexedDB wrapper.
+ * Stores: boards, assets
+ */
+const DB_NAME = "viteboard";
+const DB_VERSION = 1;
+
+export class IndexedDbStore {
+  private dbPromise: Promise<IDBDatabase> | null = null;
+
+  private open(): Promise<IDBDatabase> {
+    if (this.dbPromise) return this.dbPromise;
+    this.dbPromise = new Promise((resolve, reject) => {
+      const req = indexedDB.open(DB_NAME, DB_VERSION);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains("boards")) {
+          db.createObjectStore("boards", { keyPath: "id" });
+        }
+        if (!db.objectStoreNames.contains("assets")) {
+          db.createObjectStore("assets", { keyPath: "id" });
+        }
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error ?? new Error("IndexedDB open failed"));
+      req.onblocked = () => reject(new Error("IndexedDB blocked"));
+    });
+    return this.dbPromise;
+  }
+
+  async put(storeName: string, value: unknown): Promise<void> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readwrite");
+      tx.objectStore(storeName).put(value as any);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error ?? new Error("IndexedDB write failed"));
+    });
+  }
+
+  async get<T>(storeName: string, key: string): Promise<T | undefined> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readonly");
+      const req = tx.objectStore(storeName).get(key);
+      req.onsuccess = () => resolve(req.result as T | undefined);
+      req.onerror = () => reject(req.error ?? new Error("IndexedDB read failed"));
+    });
+  }
+
+  async delete(storeName: string, key: string): Promise<void> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readwrite");
+      tx.objectStore(storeName).delete(key);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error ?? new Error("IndexedDB delete failed"));
+    });
+  }
+
+  async getAllKeys(storeName: string): Promise<string[]> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readonly");
+      const req = tx.objectStore(storeName).getAllKeys();
+      req.onsuccess = () => resolve(req.result as string[]);
+      req.onerror = () => reject(req.error ?? new Error("IndexedDB keys failed"));
+    });
+  }
+
+  async getAll<T>(storeName: string): Promise<T[]> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readonly");
+      const req = tx.objectStore(storeName).getAll();
+      req.onsuccess = () => resolve(req.result as T[]);
+      req.onerror = () => reject(req.error ?? new Error("IndexedDB read failed"));
+    });
+  }
+
+  async clearStore(storeName: string): Promise<void> {
+    const db = await this.open();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(storeName, "readwrite");
+      tx.objectStore(storeName).clear();
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error ?? new Error("IndexedDB clear failed"));
+    });
+  }
+}
+
+export const idb = new IndexedDbStore();

package/src/storage/LocalBoardStore.ts

@@ -0,0 +1,104 @@
+import type { BoardDocument } from "../elements/types";
+import { idb } from "./IndexedDbStore";
+
+const LS_PREFIX = "psc:";
+
+/**
+ * Legacy standalone-board persistence: IndexedDB for the full document,
+ * localStorage for lightweight preferences and recovery metadata.
+ */
+export class LocalBoardStore {
+  lastSaveMs = 0;
+
+  async saveBoard(doc: BoardDocument): Promise<void> {
+    const start = performance.now();
+    try {
+      await idb.put("boards", doc);
+      this.lastSaveMs = performance.now() - start;
+      // emergency recovery metadata only (small)
+      this.setPref("lastBoardId", doc.id);
+      this.setPref(
+        "recovery",
+        JSON.stringify({
+          id: doc.id,
+          title: doc.title,
+          updatedAt: doc.updatedAt,
+          elementCount: doc.elements.length,
+        })
+      );
+    } catch (err) {
+      console.error("Board save failed", err);
+      throw err;
+    }
+  }
+
+  async loadBoard(id: string): Promise<BoardDocument | undefined> {
+    try {
+      return await idb.get<BoardDocument>("boards", id);
+    } catch (err) {
+      console.error("Board load failed", err);
+      return undefined;
+    }
+  }
+
+  async deleteBoard(id: string): Promise<void> {
+    await idb.delete("boards", id);
+  }
+
+  async clearAllBoards(): Promise<void> {
+    await idb.clearStore("boards");
+  }
+
+  // ---------- localStorage prefs ----------
+
+  setPref(key: string, value: string): void {
+    try {
+      localStorage.setItem(LS_PREFIX + key, value);
+    } catch {
+      // quota exceeded or unavailable; non-fatal
+    }
+  }
+
+  getPref(key: string): string | null {
+    try {
+      return localStorage.getItem(LS_PREFIX + key);
+    } catch {
+      return null;
+    }
+  }
+
+  removePref(key: string): void {
+    try {
+      localStorage.removeItem(LS_PREFIX + key);
+    } catch {
+      // ignore
+    }
+  }
+
+  clearPrefs(): void {
+    try {
+      const toRemove: string[] = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(LS_PREFIX)) toRemove.push(key);
+      }
+      for (const key of toRemove) localStorage.removeItem(key);
+    } catch {
+      // ignore
+    }
+  }
+
+  async estimateStorage(): Promise<{ usage: number; quota: number }> {
+    try {
+      if (navigator.storage && navigator.storage.estimate) {
+        const est = await navigator.storage.estimate();
+        return { usage: est.usage ?? 0, quota: est.quota ?? 0 };
+      }
+    } catch {
+      // ignore
+    }
+    return { usage: 0, quota: 0 };
+  }
+}
+
+export const boardStore = new LocalBoardStore();