viteboard 0.1.1 → 0.1.2

package/src/elements/renderElement.ts

@@ -1,598 +0,0 @@
-import type { BoardElement } from "./types";
-import type { ImageCache } from "../canvas/ImageCache";
-
-export type RenderContext = {
-  ctx: CanvasRenderingContext2D;
-  scale: number;
-  /** level of detail: 2 = full, 1 = simplified (<25%), 0 = blocks (<10%) */
-  lod: 0 | 1 | 2;
-  theme: "light" | "dark";
-  imageCache: ImageCache;
-};
-
-const textMeasureCache = new Map<string, string[]>();
-const TEXT_CACHE_LIMIT = 2000;
-
-export function invalidateTextCache(elementId: string): void {
-  for (const key of textMeasureCache.keys()) {
-    if (key.startsWith(elementId + "|")) textMeasureCache.delete(key);
-  }
-}
-
-export function getRenderedTextFontSize(el: BoardElement): number {
-  if (el.data.shapeKind === "chevron") {
-    const byHeight = Math.abs(el.height) * 0.34;
-    const byWidth = Math.abs(el.width) * 0.18;
-    return Math.round(Math.max(13, Math.min(48, byHeight, byWidth)));
-  }
-  return el.style.fontSize ?? 14;
-}
-
-function wrapText(
-  ctx: CanvasRenderingContext2D,
-  cacheKey: string,
-  text: string,
-  maxWidth: number
-): string[] {
-  const cached = textMeasureCache.get(cacheKey);
-  if (cached) return cached;
-
-  const lines: string[] = [];
-  for (const paragraph of text.split("\n")) {
-    if (paragraph === "") {
-      lines.push("");
-      continue;
-    }
-    const words = paragraph.split(" ");
-    let line = "";
-    for (const word of words) {
-      const test = line === "" ? word : line + " " + word;
-      if (ctx.measureText(test).width > maxWidth && line !== "") {
-        lines.push(line);
-        line = word;
-      } else {
-        line = test;
-      }
-    }
-    lines.push(line);
-  }
-
-  if (textMeasureCache.size > TEXT_CACHE_LIMIT) textMeasureCache.clear();
-  textMeasureCache.set(cacheKey, lines);
-  return lines;
-}
-
-function roundRectPath(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number
-): void {
-  const radius = Math.min(r, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + radius, y);
-  ctx.arcTo(x + w, y, x + w, y + h, radius);
-  ctx.arcTo(x + w, y + h, x, y + h, radius);
-  ctx.arcTo(x, y + h, x, y, radius);
-  ctx.arcTo(x, y, x + w, y, radius);
-  ctx.closePath();
-}
-
-export function renderElement(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  ctx.save();
-  ctx.globalAlpha = el.style.opacity ?? 1;
-
-  if (lod === 0) {
-    renderAsBlock(el, rc);
-    ctx.restore();
-    return;
-  }
-
-  switch (el.type) {
-    case "sticky":
-      renderSticky(el, rc);
-      break;
-    case "task":
-      renderTask(el, rc);
-      break;
-    case "rectangle":
-    case "frame":
-      renderRectangle(el, rc);
-      break;
-    case "ellipse":
-      renderEllipse(el, rc);
-      break;
-    case "text":
-      renderText(el, rc);
-      break;
-    case "line":
-    case "arrow":
-    case "connector":
-      renderLineArrow(el, rc);
-      break;
-    case "image":
-    case "screenshot":
-      renderImage(el, rc);
-      break;
-    default:
-      renderRectangle(el, rc);
-  }
-  ctx.restore();
-}
-
-function renderAsBlock(el: BoardElement, rc: RenderContext): void {
-  const { ctx } = rc;
-  if (el.type === "line" || el.type === "arrow" || el.type === "connector") {
-    ctx.strokeStyle = el.style.stroke ?? (rc.theme === "dark" ? "#888" : "#999");
-    ctx.lineWidth = Math.max(1 / rc.scale, el.style.strokeWidth ?? 2);
-    ctx.beginPath();
-    ctx.moveTo(el.x, el.y);
-    ctx.lineTo(el.x + el.width, el.y + el.height);
-    ctx.stroke();
-    return;
-  }
-  ctx.fillStyle =
-    el.style.fill ?? (rc.theme === "dark" ? "#3a3d42" : "#d8d8d4");
-  ctx.fillRect(el.x, el.y, el.width, el.height);
-}
-
-function applyShadow(el: BoardElement, rc: RenderContext): void {
-  if (el.style.shadow && rc.lod === 2) {
-    rc.ctx.shadowColor =
-      rc.theme === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.14)";
-    rc.ctx.shadowBlur = 8 * rc.scale;
-    rc.ctx.shadowOffsetY = 2 * rc.scale;
-  }
-}
-
-function clearShadow(rc: RenderContext): void {
-  rc.ctx.shadowColor = "transparent";
-  rc.ctx.shadowBlur = 0;
-  rc.ctx.shadowOffsetY = 0;
-}
-
-function renderSticky(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  const fill = el.style.fill ?? "#fef08a";
-  applyShadow(el, rc);
-  roundRectPath(ctx, el.x, el.y, el.width, el.height, el.style.borderRadius ?? 12);
-  ctx.fillStyle = fill;
-  ctx.fill();
-  clearShadow(rc);
-
-  if (lod === 2) {
-    const text = (el.data.text as string) ?? "";
-    if (text) {
-      drawWrappedText(el, rc, text, 14);
-    }
-  }
-}
-
-function renderTask(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  const checked = el.data.checked === true;
-  const isDark = rc.theme === "dark";
-  const radius = el.style.borderRadius ?? 14;
-  applyShadow(el, rc);
-  roundRectPath(ctx, el.x, el.y, el.width, el.height, radius);
-  ctx.fillStyle = el.style.fill ?? (isDark ? "#17191b" : "#ffffff");
-  ctx.fill();
-  clearShadow(rc);
-
-  ctx.strokeStyle = el.style.stroke ?? (isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.09)");
-  ctx.lineWidth = el.style.strokeWidth ?? 1;
-  ctx.stroke();
-
-  if (lod < 2) return;
-
-  const boxSize = Math.min(22, Math.max(16, el.height * 0.38));
-  const boxX = el.x + 16;
-  const boxY = el.y + el.height / 2 - boxSize / 2;
-  roundRectPath(ctx, boxX, boxY, boxSize, boxSize, 6);
-  ctx.fillStyle = checked ? "#0078d4" : isDark ? "#111314" : "#f3f2f1";
-  ctx.fill();
-  ctx.strokeStyle = checked ? "#0078d4" : isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.13)";
-  ctx.lineWidth = 1.4;
-  ctx.stroke();
-
-  if (checked) {
-    ctx.strokeStyle = "#ffffff";
-    ctx.lineWidth = 2.1;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.beginPath();
-    ctx.moveTo(boxX + boxSize * 0.26, boxY + boxSize * 0.52);
-    ctx.lineTo(boxX + boxSize * 0.43, boxY + boxSize * 0.68);
-    ctx.lineTo(boxX + boxSize * 0.75, boxY + boxSize * 0.32);
-    ctx.stroke();
-  }
-
-  const text = (el.data.text as string) ?? "";
-  if (!text) return;
-  const leftPad = 50;
-  const rightPad = 16;
-  const fontSize = el.style.fontSize ?? 15;
-  const fontFamily =
-    el.style.fontFamily ??
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
-  ctx.font = `${el.style.fontWeight ?? "650"} ${fontSize}px ${fontFamily}`;
-  ctx.fillStyle = checked ? (isDark ? "#a7aaa8" : "#777777") : el.style.textColor ?? (isDark ? "#f6f6f3" : "#252829");
-  ctx.textAlign = "left";
-  ctx.textBaseline = "middle";
-
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(el.x + leftPad, el.y, Math.max(10, el.width - leftPad - rightPad), el.height);
-  ctx.clip();
-  ctx.fillText(text, el.x + leftPad, el.y + el.height / 2);
-  if (checked) {
-    const metrics = ctx.measureText(text);
-    const lineY = el.y + el.height / 2 + 1;
-    ctx.strokeStyle = isDark ? "rgba(167,170,168,0.58)" : "rgba(119,119,119,0.48)";
-    ctx.lineWidth = 1.3;
-    ctx.beginPath();
-    ctx.moveTo(el.x + leftPad, lineY);
-    ctx.lineTo(el.x + leftPad + Math.min(metrics.width, el.width - leftPad - rightPad), lineY);
-    ctx.stroke();
-  }
-  ctx.restore();
-}
-
-function drawText(
-  ctx: CanvasRenderingContext2D,
-  value: string,
-  x: number,
-  y: number,
-  fontSize: number,
-  color: string,
-  fontWeight: string,
-  fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-): void {
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  ctx.fillStyle = color;
-  ctx.textAlign = "left";
-  ctx.textBaseline = "alphabetic";
-  ctx.fillText(value, x, y);
-}
-
-function renderRectangle(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  const shapeKind = (el.data.shapeKind as string | undefined) ?? "rectangle";
-  const r = el.style.borderRadius ?? 0;
-  applyShadow(el, rc);
-  if (shapeKind === "diamond") {
-    pathDiamond(ctx, el);
-  } else if (shapeKind === "triangle") {
-    pathTriangle(ctx, el);
-  } else if (shapeKind === "chevron") {
-    pathChevron(ctx, el);
-  } else if (shapeKind === "parallelogram") {
-    pathParallelogram(ctx, el);
-  } else if (shapeKind === "hexagon") {
-    pathHexagon(ctx, el);
-  } else if (shapeKind === "cylinder") {
-    pathCylinder(ctx, el);
-  } else if (shapeKind === "pill") {
-    roundRectPath(ctx, el.x, el.y, el.width, el.height, Math.min(Math.abs(el.height) / 2, Math.abs(el.width) / 2));
-  } else if (r > 0) {
-    roundRectPath(ctx, el.x, el.y, el.width, el.height, r);
-  } else {
-    ctx.beginPath();
-    ctx.rect(el.x, el.y, el.width, el.height);
-  }
-  if (el.style.fill && el.style.fill !== "transparent") {
-    ctx.fillStyle = el.style.fill;
-    ctx.fill();
-  }
-  clearShadow(rc);
-  if (el.style.stroke && (el.style.strokeWidth ?? 0) > 0) {
-    ctx.strokeStyle = el.style.stroke;
-    ctx.lineWidth = el.style.strokeWidth ?? 1;
-    ctx.stroke();
-    if (shapeKind === "cylinder") {
-      const rx = Math.abs(el.width) / 2;
-      const ry = Math.min(Math.abs(el.height) * 0.18, 18);
-      ctx.beginPath();
-      ctx.ellipse(el.x + el.width / 2, el.y + ry, rx, ry, 0, 0, Math.PI * 2);
-      ctx.stroke();
-    }
-  }
-  if (lod === 2) {
-    const text = (el.data.text as string) ?? "";
-    if (text) {
-      const textPadding =
-        shapeKind === "chevron" ? Math.min(Math.abs(el.width) * 0.18, Math.abs(el.height) * 0.55) + 8 : 10;
-      drawWrappedText(el, rc, text, textPadding);
-    }
-  }
-}
-
-function pathDiamond(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const x = el.x;
-  const y = el.y;
-  const w = el.width;
-  const h = el.height;
-  ctx.beginPath();
-  ctx.moveTo(x + w / 2, y);
-  ctx.lineTo(x + w, y + h / 2);
-  ctx.lineTo(x + w / 2, y + h);
-  ctx.lineTo(x, y + h / 2);
-  ctx.closePath();
-}
-
-function pathTriangle(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const x = el.x;
-  const y = el.y;
-  const w = el.width;
-  const h = el.height;
-  ctx.beginPath();
-  ctx.moveTo(x + w / 2, y);
-  ctx.lineTo(x + w, y + h);
-  ctx.lineTo(x, y + h);
-  ctx.closePath();
-}
-
-function pathChevron(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const x = el.x;
-  const y = el.y;
-  const w = el.width;
-  const h = el.height;
-  const notch = Math.min(Math.abs(w) * 0.22, Math.abs(h) * 0.62);
-  ctx.beginPath();
-  ctx.moveTo(x, y);
-  ctx.lineTo(x + w - notch, y);
-  ctx.lineTo(x + w, y + h / 2);
-  ctx.lineTo(x + w - notch, y + h);
-  ctx.lineTo(x, y + h);
-  ctx.lineTo(x + notch, y + h / 2);
-  ctx.closePath();
-}
-
-function pathParallelogram(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const skew = Math.min(Math.abs(el.width) * 0.2, Math.abs(el.height) * 0.55);
-  ctx.beginPath();
-  ctx.moveTo(el.x + skew, el.y);
-  ctx.lineTo(el.x + el.width, el.y);
-  ctx.lineTo(el.x + el.width - skew, el.y + el.height);
-  ctx.lineTo(el.x, el.y + el.height);
-  ctx.closePath();
-}
-
-function pathHexagon(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const inset = Math.min(Math.abs(el.width) * 0.22, Math.abs(el.height) * 0.5);
-  ctx.beginPath();
-  ctx.moveTo(el.x + inset, el.y);
-  ctx.lineTo(el.x + el.width - inset, el.y);
-  ctx.lineTo(el.x + el.width, el.y + el.height / 2);
-  ctx.lineTo(el.x + el.width - inset, el.y + el.height);
-  ctx.lineTo(el.x + inset, el.y + el.height);
-  ctx.lineTo(el.x, el.y + el.height / 2);
-  ctx.closePath();
-}
-
-function pathCylinder(ctx: CanvasRenderingContext2D, el: BoardElement): void {
-  const rx = Math.abs(el.width) / 2;
-  const ry = Math.min(Math.abs(el.height) * 0.18, 18);
-  const cx = el.x + el.width / 2;
-  ctx.beginPath();
-  ctx.ellipse(cx, el.y + ry, rx, ry, 0, Math.PI, Math.PI * 2);
-  ctx.lineTo(el.x + el.width, el.y + el.height - ry);
-  ctx.ellipse(cx, el.y + el.height - ry, rx, ry, 0, 0, Math.PI);
-  ctx.lineTo(el.x, el.y + ry);
-  ctx.closePath();
-}
-
-function renderEllipse(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  applyShadow(el, rc);
-  ctx.beginPath();
-  ctx.ellipse(
-    el.x + el.width / 2,
-    el.y + el.height / 2,
-    Math.abs(el.width / 2),
-    Math.abs(el.height / 2),
-    0,
-    0,
-    Math.PI * 2
-  );
-  if (el.style.fill && el.style.fill !== "transparent") {
-    ctx.fillStyle = el.style.fill;
-    ctx.fill();
-  }
-  clearShadow(rc);
-  if (el.style.stroke && (el.style.strokeWidth ?? 0) > 0) {
-    ctx.strokeStyle = el.style.stroke;
-    ctx.lineWidth = el.style.strokeWidth ?? 1;
-    ctx.stroke();
-  }
-  if (lod === 2) {
-    const text = (el.data.text as string) ?? "";
-    if (text) drawWrappedText(el, rc, text, 10);
-  }
-}
-
-function renderText(el: BoardElement, rc: RenderContext): void {
-  if (rc.lod < 2) {
-    // tiny placeholder bar when far out
-    rc.ctx.fillStyle = rc.theme === "dark" ? "#55585e" : "#c5c5c0";
-    rc.ctx.fillRect(el.x, el.y, el.width, Math.min(el.height, 6 / rc.scale));
-    return;
-  }
-  const text = (el.data.text as string) ?? "";
-  drawWrappedText(el, rc, text, 0, "left", "top");
-}
-
-function drawWrappedText(
-  el: BoardElement,
-  rc: RenderContext,
-  text: string,
-  padding: number,
-  align: "center" | "left" = "center",
-  vAlign: "middle" | "top" = "middle"
-): void {
-  const { ctx } = rc;
-  const isChevron = el.data.shapeKind === "chevron";
-  const fontSize = getRenderedTextFontSize(el);
-  const fontFamily =
-    el.style.fontFamily ??
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
-  const fontWeight = isChevron ? "750" : el.style.fontWeight ?? "400";
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  ctx.fillStyle =
-    el.style.textColor ?? (rc.theme === "dark" && el.type === "text" ? "#f2f2f2" : "#1f2933");
-
-  const maxWidth = Math.max(10, el.width - padding * 2);
-  const cacheKey = `${el.id}|${el.updatedAt}|${fontSize}|${maxWidth.toFixed(0)}`;
-  const lines = wrapText(ctx, cacheKey, text, maxWidth);
-  const lineHeight = fontSize * 1.35;
-  const totalHeight = lines.length * lineHeight;
-
-  let startY: number;
-  if (vAlign === "middle") {
-    startY = el.y + el.height / 2 - totalHeight / 2 + lineHeight / 2;
-  } else {
-    startY = el.y + padding + lineHeight / 2;
-  }
-
-  ctx.textBaseline = "middle";
-  ctx.textAlign = align;
-  const tx = align === "center" ? el.x + el.width / 2 : el.x + padding;
-
-  // clip to element bounds
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(el.x, el.y, el.width, el.height);
-  ctx.clip();
-  for (let i = 0; i < lines.length; i++) {
-    ctx.fillText(lines[i], tx, startY + i * lineHeight);
-  }
-  ctx.restore();
-}
-
-function renderLineArrow(el: BoardElement, rc: RenderContext): void {
-  const { ctx, lod } = rc;
-  const x1 = el.x;
-  const y1 = el.y;
-  const x2 = el.x + el.width;
-  const y2 = el.y + el.height;
-  const stroke = el.style.stroke ?? (rc.theme === "dark" ? "#d1d5db" : "#374151");
-  const strokeWidth = el.style.strokeWidth ?? 2;
-
-  ctx.strokeStyle = stroke;
-  ctx.fillStyle = stroke;
-  ctx.lineWidth = strokeWidth;
-  ctx.setLineDash(el.style.strokeDash ?? []);
-  ctx.beginPath();
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y2);
-  ctx.stroke();
-  ctx.setLineDash([]);
-
-  if (lod >= 1) {
-    const angle = Math.atan2(y2 - y1, x2 - x1);
-    const headLen = Math.max(11, strokeWidth * 5.5);
-    if (el.style.arrowEnd ?? el.type === "arrow") {
-      drawArrowhead(ctx, x2, y2, angle, headLen);
-    }
-    if (el.style.arrowStart) {
-      drawArrowhead(ctx, x1, y1, angle + Math.PI, headLen);
-    }
-    const label = typeof el.data.text === "string" ? el.data.text.trim() : "";
-    if (label) {
-      if (el.data.labelPosition === "sides") {
-        const [left, right] = label.split("|").map((part) => part.trim());
-        if (left) drawArrowLabel(ctx, left, x1, y1, x2, y2, rc, 0.24);
-        if (right) drawArrowLabel(ctx, right, x1, y1, x2, y2, rc, 0.76);
-      } else {
-        drawArrowLabel(ctx, label, x1, y1, x2, y2, rc);
-      }
-    }
-  }
-}
-
-function drawArrowLabel(
-  ctx: CanvasRenderingContext2D,
-  label: string,
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  rc: RenderContext,
-  position = 0.5
-): void {
-  const fontSize = 13;
-  ctx.font = `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
-  const metrics = ctx.measureText(label);
-  const padX = 7;
-  const width = metrics.width + padX * 2;
-  const height = fontSize + 8;
-  const x = x1 + (x2 - x1) * position - width / 2;
-  const y = y1 + (y2 - y1) * position - height / 2;
-  ctx.fillStyle = rc.theme === "dark" ? "#202328" : "#ffffff";
-  roundRectPath(ctx, x, y, width, height, 4);
-  ctx.fill();
-  ctx.strokeStyle = rc.theme === "dark" ? "#4a4d52" : "#d8dade";
-  ctx.lineWidth = 1;
-  ctx.stroke();
-  ctx.fillStyle = rc.theme === "dark" ? "#f2f2f2" : "#1f2933";
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  ctx.fillText(label, x + width / 2, y + height / 2);
-}
-
-function drawArrowhead(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  angle: number,
-  len: number
-): void {
-  ctx.beginPath();
-  ctx.moveTo(x, y);
-  ctx.lineTo(
-    x - len * Math.cos(angle - Math.PI / 6),
-    y - len * Math.sin(angle - Math.PI / 6)
-  );
-  ctx.lineTo(
-    x - len * Math.cos(angle + Math.PI / 6),
-    y - len * Math.sin(angle + Math.PI / 6)
-  );
-  ctx.closePath();
-  ctx.fill();
-}
-
-function renderImage(el: BoardElement, rc: RenderContext): void {
-  const { ctx, imageCache } = rc;
-  const src = el.data.src as string | undefined;
-  const assetId = el.data.assetId as string | undefined;
-  // File-backed boards reference images by `src` path; legacy boards by assetId.
-  const img = src ? imageCache.getBySrc(src) : assetId ? imageCache.get(assetId) : null;
-
-  if (img) {
-    if (rc.lod === 1 && rc.scale < 0.15) {
-      ctx.fillStyle = rc.theme === "dark" ? "#3a3d42" : "#d8d8d4";
-      ctx.fillRect(el.x, el.y, el.width, el.height);
-      return;
-    }
-    ctx.drawImage(img, el.x, el.y, el.width, el.height);
-  } else {
-    // placeholder / broken state
-    ctx.fillStyle = rc.theme === "dark" ? "#2a2d31" : "#ececea";
-    ctx.fillRect(el.x, el.y, el.width, el.height);
-    ctx.strokeStyle = rc.theme === "dark" ? "#4a4d52" : "#c9c9c5";
-    ctx.lineWidth = 1 / rc.scale;
-    ctx.strokeRect(el.x, el.y, el.width, el.height);
-    if (rc.lod === 2) {
-      const isMissing = src ? imageCache.isMissingSrc(src) : assetId ? imageCache.isMissing(assetId) : false;
-      const status = isMissing ? "Missing image" : "Loading…";
-      ctx.font = `12px -apple-system, sans-serif`;
-      ctx.fillStyle = rc.theme === "dark" ? "#9ca3af" : "#6b7280";
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(status, el.x + el.width / 2, el.y + el.height / 2);
-    }
-  }
-}

package/src/elements/types.ts

@@ -1,119 +0,0 @@
-export type ElementType =
-  | "sticky"
-  | "task"
-  | "rectangle"
-  | "ellipse"
-  | "text"
-  | "line"
-  | "arrow"
-  | "connector"
-  | "image"
-  | "screenshot"
-  | "frame"
-  | "templateGroup";
-
-export type ElementStyle = {
-  fill?: string;
-  stroke?: string;
-  strokeWidth?: number;
-  opacity?: number;
-  borderRadius?: number;
-  shadow?: boolean;
-  fontSize?: number;
-  fontFamily?: string;
-  fontWeight?: string;
-  textColor?: string;
-  arrowStart?: boolean;
-  arrowEnd?: boolean;
-  strokeDash?: number[];
-};
-
-export type BoardElement = {
-  id: string;
-  type: ElementType;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  rotation: number;
-  zIndex: number;
-  locked: boolean;
-  hidden: boolean;
-  createdAt: number;
-  updatedAt: number;
-  style: ElementStyle;
-  data: Record<string, unknown>;
-};
-
-export type ImageElementData = {
-  assetId: string;
-  originalWidth: number;
-  originalHeight: number;
-  alt?: string;
-};
-
-export type LocalAsset = {
-  id: string;
-  type: "image";
-  mimeType: string;
-  blob: Blob;
-  width: number;
-  height: number;
-  sizeBytes: number;
-  createdAt: number;
-  updatedAt: number;
-  name?: string;
-};
-
-export type BoardDocument = {
-  version: 1;
-  id: string;
-  title: string;
-  createdAt: number;
-  updatedAt: number;
-  viewport: {
-    offsetX: number;
-    offsetY: number;
-    scale: number;
-  };
-  theme: "light" | "dark";
-  elements: BoardElement[];
-  assetIds: string[];
-};
-
-let idCounter = 0;
-
-export function generateId(): string {
-  idCounter = (idCounter + 1) % 0xffff;
-  return (
-    Date.now().toString(36) +
-    "-" +
-    idCounter.toString(36) +
-    "-" +
-    Math.random().toString(36).slice(2, 8)
-  );
-}
-
-export function createElement(
-  type: ElementType,
-  partial: Partial<BoardElement> = {}
-): BoardElement {
-  const now = Date.now();
-  return {
-    id: generateId(),
-    type,
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-    rotation: 0,
-    zIndex: 0,
-    locked: false,
-    hidden: false,
-    createdAt: now,
-    updatedAt: now,
-    style: {},
-    data: {},
-    ...partial,
-  };
-}