-
-
-
-
-
- {loading || !scene ? (
- {error ?? "Loading..."}
- ) : (
-
- {
- const nextScene = sceneFromEditor(elements, appState, files);
- latestSceneRef.current = nextScene;
- scheduleThemeTokenSync();
-
- if (ignoreChangeRef.current) {
- ignoreChangeRef.current = false;
- return;
- }
-
- scheduleSave();
- }}
- />
-
- )}
-
-
-
+
+
);
}
diff --git a/src/api.test.ts b/src/api.test.ts
deleted file mode 100644
index a1a1ccd..0000000
--- a/src/api.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { createApi } from "./api";
-import { createDrawingStore } from "./db";
-
-function withApi() {
- const dir = mkdtempSync(join(tmpdir(), "excali-api-"));
- const store = createDrawingStore(join(dir, "test.sqlite"));
- const api = createApi(store);
-
- return {
- api,
- cleanup() {
- store.close();
- rmSync(dir, { recursive: true, force: true });
- },
- };
-}
-
-describe("api", () => {
- test("creates a drawing with dark theme by default", async () => {
- const { api, cleanup } = withApi();
-
- const created = await api.createDrawing().json();
-
- expect(created.appState.theme).toBe("dark");
- cleanup();
- });
-
- test("returns 400 for invalid JSON", async () => {
- const { api, cleanup } = withApi();
- const drawing = await api.createDrawing().json();
-
- const response = await api.updateDrawing(
- Object.assign(
- new Request(`http://local/api/drawings/${drawing.id}`, {
- method: "PUT",
- body: "{",
- }),
- { params: { id: drawing.id } },
- ),
- );
-
- expect(response.status).toBe(400);
- cleanup();
- });
-
- test("returns 404 for missing drawing", () => {
- const { api, cleanup } = withApi();
-
- const response = api.getDrawing(
- Object.assign(new Request("http://local/api/drawings/missing"), { params: { id: "missing" } }),
- );
-
- expect(response.status).toBe(404);
- cleanup();
- });
-
- test("updates a drawing scene", async () => {
- const { api, cleanup } = withApi();
- const created = await api.createDrawing().json();
-
- const response = await api.updateDrawing(
- Object.assign(
- new Request(`http://local/api/drawings/${created.id}`, {
- method: "PUT",
- body: JSON.stringify({
- elements: [{ id: "shape" }],
- appState: {},
- files: {},
- }),
- }),
- { params: { id: created.id } },
- ),
- );
-
- expect(response.status).toBe(200);
- cleanup();
- });
-});
diff --git a/src/api.ts b/src/api.ts
deleted file mode 100644
index 521c204..0000000
--- a/src/api.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { type DrawingStore } from "./db";
-import { HttpError, normalizeTitle, parseJsonBody, parseSceneText } from "./scene";
-
-type RouteRequest = Request & {
- params?: Record
;
-};
-
-function json(data: unknown, init?: ResponseInit): Response {
- return Response.json(data, init);
-}
-
-function errorResponse(error: unknown): Response {
- if (error instanceof HttpError) {
- return json({ ok: false, error: error.message }, { status: error.status });
- }
-
- console.error(error);
- return json({ ok: false, error: "Internal server error" }, { status: 500 });
-}
-
-export function createApi(store: DrawingStore) {
- return {
- health() {
- return json({ ok: true });
- },
-
- listDrawings() {
- return json(store.listDrawings());
- },
-
- createDrawing() {
- const drawing = store.createDrawing();
- return json(
- {
- id: drawing.id,
- title: drawing.title,
- createdAt: drawing.createdAt,
- updatedAt: drawing.updatedAt,
- ...drawing.scene,
- },
- { status: 201 },
- );
- },
-
- getDrawing(request: RouteRequest) {
- const id = request.params?.id;
- const drawing = id ? store.getDrawing(id) : null;
-
- if (!drawing) {
- return json({ ok: false, error: "Drawing not found" }, { status: 404 });
- }
-
- return json({
- id: drawing.id,
- title: drawing.title,
- createdAt: drawing.createdAt,
- updatedAt: drawing.updatedAt,
- ...drawing.scene,
- });
- },
-
- async updateDrawing(request: RouteRequest) {
- try {
- const id = request.params?.id;
- if (!id) {
- throw new HttpError(400, "Missing drawing id");
- }
-
- const text = await request.text();
- const raw = parseJsonBody>(text);
- const hasTitle = Object.hasOwn(raw, "title");
- const hasScene =
- Object.hasOwn(raw, "elements") ||
- Object.hasOwn(raw, "appState") ||
- Object.hasOwn(raw, "files");
-
- if (!hasTitle && !hasScene) {
- throw new HttpError(400, "Nothing to update");
- }
-
- const scene = hasScene ? parseSceneText(text) : undefined;
- const updated = store.updateDrawing(id, {
- scene,
- title: hasTitle ? normalizeTitle(raw.title) : undefined,
- });
-
- if (!updated) {
- return json({ ok: false, error: "Drawing not found" }, { status: 404 });
- }
-
- return json({
- ok: true,
- drawing: {
- id: updated.id,
- title: updated.title,
- createdAt: updated.createdAt,
- updatedAt: updated.updatedAt,
- },
- });
- } catch (error) {
- return errorResponse(error);
- }
- },
-
- deleteDrawing(request: RouteRequest) {
- const id = request.params?.id;
- if (!id) {
- return json({ ok: false, error: "Missing drawing id" }, { status: 400 });
- }
-
- const { deleted, next } = store.deleteDrawing(id);
- if (!deleted) {
- return json({ ok: false, error: "Drawing not found" }, { status: 404 });
- }
-
- return json({ ok: true, nextId: next?.id ?? null });
- },
- };
-}
diff --git a/src/client.tsx b/src/client.tsx
index 07abc65..0594a61 100644
--- a/src/client.tsx
+++ b/src/client.tsx
@@ -1,7 +1,6 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
-import "./styles.css";
const root = document.getElementById("root");
diff --git a/src/db.test.ts b/src/db.test.ts
deleted file mode 100644
index 8c52d38..0000000
--- a/src/db.test.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { afterEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { createDrawingStore } from "./db";
-
-const cleanup: string[] = [];
-
-afterEach(() => {
- while (cleanup.length > 0) {
- const dir = cleanup.pop();
- if (dir) {
- rmSync(dir, { recursive: true, force: true });
- }
- }
-});
-
-function createTempStore() {
- const dir = mkdtempSync(join(tmpdir(), "excali-"));
- cleanup.push(dir);
- return createDrawingStore(join(dir, "test.sqlite"));
-}
-
-describe("drawing store", () => {
- test("creates, updates, lists, and deletes drawings", () => {
- const store = createTempStore();
- const created = store.createDrawing();
-
- expect(created.title).toBe("Untitled");
- expect(created.scene.appState.theme).toBe("dark");
- expect(store.listDrawings()).toHaveLength(1);
-
- const updated = store.updateDrawing(created.id, {
- title: "Flow",
- scene: {
- elements: [{ id: "one" }],
- appState: { gridSize: 20 },
- files: {},
- },
- });
-
- expect(updated?.title).toBe("Flow");
- expect(updated?.scene.elements).toHaveLength(1);
-
- const removed = store.deleteDrawing(created.id);
- expect(removed.deleted).toBe(true);
- expect(store.listDrawings()).toHaveLength(1);
- expect(removed.next?.id).not.toBe(created.id);
- });
-});
diff --git a/src/db.ts b/src/db.ts
deleted file mode 100644
index 987dd01..0000000
--- a/src/db.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-import { Database } from "bun:sqlite";
-import { randomUUID } from "node:crypto";
-import { mkdirSync } from "node:fs";
-import { dirname } from "node:path";
-import { DEFAULT_TITLE, type DrawingMeta, type DrawingRecord, type ScenePayload } from "./shared";
-import { coerceStoredScene, emptyScene, normalizeTitle } from "./scene";
-
-type DrawingRow = {
- id: string;
- title: string;
- data: string;
- createdAt: string;
- updatedAt: string;
-};
-
-type DrawingMetaRow = Omit;
-
-export type DrawingStore = ReturnType;
-
-function createId(): string {
- return randomUUID().replaceAll("-", "").slice(0, 12);
-}
-
-function resolveDatabasePath(): string {
- if (process.env.DATABASE_PATH) {
- return process.env.DATABASE_PATH;
- }
-
- try {
- mkdirSync("/data", { recursive: true });
- return "/data/excalidraw.sqlite";
- } catch {
- return `${process.cwd()}/data/excalidraw.sqlite`;
- }
-}
-
-function readMeta(row: DrawingMetaRow | null | undefined): DrawingMeta | null {
- if (!row) {
- return null;
- }
-
- return {
- id: row.id,
- title: row.title,
- createdAt: row.createdAt,
- updatedAt: row.updatedAt,
- };
-}
-
-function readRow(row: DrawingRow | null | undefined): DrawingRecord | null {
- if (!row) {
- return null;
- }
-
- return {
- ...readMeta(row)!,
- scene: coerceStoredScene(JSON.parse(row.data)),
- };
-}
-
-export function createDrawingStore(databasePath = resolveDatabasePath()) {
- mkdirSync(dirname(databasePath), { recursive: true });
-
- const db = new Database(databasePath, { create: true, strict: true });
- db.exec(`
- PRAGMA journal_mode = WAL;
-
- CREATE TABLE IF NOT EXISTS drawings (
- id TEXT PRIMARY KEY,
- title TEXT NOT NULL,
- data TEXT NOT NULL,
- created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
- updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
- );
-
- CREATE INDEX IF NOT EXISTS drawings_updated_at_idx
- ON drawings(updated_at DESC, created_at DESC);
- `);
-
- const listQuery = db.query(`
- SELECT
- id,
- title,
- created_at AS createdAt,
- updated_at AS updatedAt
- FROM drawings
- ORDER BY updated_at DESC, created_at DESC
- `);
-
- const getQuery = db.query(`
- SELECT
- id,
- title,
- data,
- created_at AS createdAt,
- updated_at AS updatedAt
- FROM drawings
- WHERE id = ?1
- `);
-
- const createQuery = db.query(`
- INSERT INTO drawings (id, title, data)
- VALUES (?1, ?2, ?3)
- `);
-
- const updateSceneQuery = db.query(`
- UPDATE drawings
- SET data = ?2, updated_at = CURRENT_TIMESTAMP
- WHERE id = ?1
- `);
-
- const updateTitleQuery = db.query(`
- UPDATE drawings
- SET title = ?2, updated_at = CURRENT_TIMESTAMP
- WHERE id = ?1
- `);
-
- const updateBothQuery = db.query(`
- UPDATE drawings
- SET title = ?2, data = ?3, updated_at = CURRENT_TIMESTAMP
- WHERE id = ?1
- `);
-
- const deleteQuery = db.query(`
- DELETE FROM drawings
- WHERE id = ?1
- `);
-
- function listDrawings(): DrawingMeta[] {
- return (listQuery.all() as DrawingMetaRow[]).map((row) => readMeta(row)!);
- }
-
- function getDrawing(id: string): DrawingRecord | null {
- return readRow(getQuery.get(id) as DrawingRow | null | undefined);
- }
-
- function createDrawing(title = DEFAULT_TITLE): DrawingRecord {
- const id = createId();
- createQuery.run(id, normalizeTitle(title), JSON.stringify(emptyScene()));
- return getDrawing(id)!;
- }
-
- function getLatestDrawing(): DrawingMeta | null {
- return listDrawings()[0] ?? null;
- }
-
- function ensureInitialDrawing(): DrawingMeta {
- return getLatestDrawing() ?? createDrawing();
- }
-
- function updateDrawing(id: string, update: { scene?: ScenePayload; title?: string }): DrawingRecord | null {
- const existing = getDrawing(id);
- if (!existing) {
- return null;
- }
-
- const hasScene = update.scene !== undefined;
- const hasTitle = update.title !== undefined;
-
- if (!hasScene && !hasTitle) {
- return existing;
- }
-
- if (hasScene && hasTitle) {
- updateBothQuery.run(id, normalizeTitle(update.title), JSON.stringify(update.scene));
- } else if (hasScene) {
- updateSceneQuery.run(id, JSON.stringify(update.scene));
- } else {
- updateTitleQuery.run(id, normalizeTitle(update.title));
- }
-
- return getDrawing(id);
- }
-
- function deleteDrawing(id: string): { deleted: boolean; next: DrawingMeta | null } {
- const changes = Number(deleteQuery.run(id).changes);
- if (changes === 0) {
- return { deleted: false, next: null };
- }
-
- return {
- deleted: true,
- next: ensureInitialDrawing(),
- };
- }
-
- function close() {
- db.close(false);
- }
-
- return {
- databasePath,
- close,
- listDrawings,
- getDrawing,
- createDrawing,
- getLatestDrawing,
- ensureInitialDrawing,
- updateDrawing,
- deleteDrawing,
- };
-}
-
-let defaultStore: DrawingStore | null = null;
-
-export function getDefaultDrawingStore(): DrawingStore {
- defaultStore ??= createDrawingStore();
- return defaultStore;
-}
diff --git a/src/dev-server.tsx b/src/dev-server.tsx
deleted file mode 100644
index 942a942..0000000
--- a/src/dev-server.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import index from "./index.html";
-import { createServer } from "./server";
-
-export function createDevServer() {
- const server = createServer();
-
- return {
- ...server,
- routes: {
- ...server.routes,
- "/d/:id": index,
- },
- } satisfies Parameters[0];
-}
-
-if (import.meta.main) {
- const server = Bun.serve(createDevServer());
- console.log(`Listening on http://${server.hostname}:${server.port}`);
-}
diff --git a/src/scene.test.ts b/src/scene.test.ts
deleted file mode 100644
index f8f1a91..0000000
--- a/src/scene.test.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { HttpError, MAX_SCENE_BYTES, emptyScene, normalizeScene, parseJsonBody } from "./scene";
-
-describe("scene helpers", () => {
- test("creates empty scenes with dark theme by default", () => {
- const scene = emptyScene();
-
- expect(scene.appState.theme).toBe("dark");
- });
-
- test("normalizes volatile app state fields", () => {
- const scene = normalizeScene({
- elements: [],
- appState: {
- selectedElementIds: { one: true },
- viewModeEnabled: false,
- },
- files: {},
- });
-
- expect(scene.appState.selectedElementIds).toBeUndefined();
- expect(scene.appState.viewModeEnabled).toBe(false);
- });
-
- test("rejects oversized payloads", () => {
- const text = "x".repeat(MAX_SCENE_BYTES + 1);
-
- expect(() => parseJsonBody(text)).toThrow(HttpError);
- expect(() => parseJsonBody(text)).toThrow("Payload too large");
- });
-});
diff --git a/src/scene.ts b/src/scene.ts
deleted file mode 100644
index 32435e9..0000000
--- a/src/scene.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DEFAULT_TITLE, type ScenePayload } from "./shared";
-
-export const MAX_SCENE_BYTES = 25 * 1024 * 1024;
-
-export class HttpError extends Error {
- constructor(
- readonly status: number,
- message: string,
- ) {
- super(message);
- }
-}
-
-const VOLATILE_APP_STATE_KEYS = new Set([
- "collaborators",
- "selectedElementIds",
- "selectedGroupIds",
- "editingElement",
- "editingLinearElement",
- "openMenu",
- "openSidebar",
- "contextMenu",
- "toast",
-]);
-
-export function emptyScene(): ScenePayload {
- return {
- elements: [],
- appState: { theme: "dark" },
- files: {},
- };
-}
-
-function isRecord(value: unknown): value is Record {
- return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-export function normalizeTitle(input: unknown): string {
- if (typeof input !== "string") {
- return DEFAULT_TITLE;
- }
-
- const trimmed = input.trim();
- return trimmed.length > 0 ? trimmed : DEFAULT_TITLE;
-}
-
-export function normalizeScene(input: unknown): ScenePayload {
- if (!isRecord(input)) {
- throw new HttpError(400, "Body must be an object");
- }
-
- if (!Array.isArray(input.elements)) {
- throw new HttpError(400, "elements must be an array");
- }
-
- if (!isRecord(input.appState)) {
- throw new HttpError(400, "appState must be an object");
- }
-
- if (!isRecord(input.files)) {
- throw new HttpError(400, "files must be an object");
- }
-
- const appState = Object.fromEntries(
- Object.entries(input.appState).filter(([key]) => !VOLATILE_APP_STATE_KEYS.has(key)),
- );
-
- return {
- elements: input.elements,
- appState,
- files: input.files,
- };
-}
-
-export function parseJsonBody(text: string): T {
- if (new TextEncoder().encode(text).byteLength > MAX_SCENE_BYTES) {
- throw new HttpError(413, "Payload too large");
- }
-
- try {
- return JSON.parse(text) as T;
- } catch {
- throw new HttpError(400, "Invalid JSON");
- }
-}
-
-export function parseSceneText(text: string): ScenePayload {
- return normalizeScene(parseJsonBody(text));
-}
-
-export function coerceStoredScene(input: unknown): ScenePayload {
- try {
- return normalizeScene(input);
- } catch {
- return emptyScene();
- }
-}
diff --git a/src/server.test.ts b/src/server.test.ts
deleted file mode 100644
index b00a27e..0000000
--- a/src/server.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { afterEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync } from "node:fs";
-import { tmpdir } from "node:os";
-import { join } from "node:path";
-import { createDrawingStore, type DrawingStore } from "./db";
-import { createServer } from "./server";
-
-const cleanup: string[] = [];
-const stores: DrawingStore[] = [];
-
-afterEach(() => {
- while (stores.length > 0) {
- stores.pop()?.close();
- }
-
- while (cleanup.length > 0) {
- const dir = cleanup.pop();
- if (dir) {
- rmSync(dir, { recursive: true, force: true });
- }
- }
-});
-
-function createServerFixture() {
- const dir = mkdtempSync(join(tmpdir(), "excali-server-"));
- cleanup.push(dir);
-
- const store = createDrawingStore(join(dir, "test.sqlite"));
- stores.push(store);
-
- return {
- store,
- server: createServer({ drawingStore: store }),
- };
-}
-
-describe("createServer", () => {
- test("redirects / to the latest drawing", () => {
- const { server, store } = createServerFixture();
-
- const response = server.routes["/"]?.(new Request("http://local/")) as Response;
- const created = store.listDrawings();
-
- expect(created).toHaveLength(1);
- expect(response.status).toBe(302);
- expect(response.headers.get("location")).toBe(`http://local/d/${created[0]?.id}`);
- });
-
- test("keeps Bun responsible for API routes", async () => {
- const { server } = createServerFixture();
- const response = await server.routes["/api/health"]?.GET?.();
-
- expect(response?.status).toBe(200);
- expect(await response?.json()).toEqual({ ok: true });
- });
-
- test("does not expose a Bun static route for drawings in production", () => {
- const { server } = createServerFixture();
-
- expect(Object.hasOwn(server.routes, "/d/:id")).toBe(false);
- });
-
- test("returns JSON 404 for unmatched requests", async () => {
- const { server } = createServerFixture();
- const response = await server.fetch(new Request("http://local/index-abc123.js"));
-
- expect(response.status).toBe(404);
- expect(await response.json()).toEqual({ ok: false, error: "Not found" });
- });
-});
diff --git a/src/server.tsx b/src/server.tsx
deleted file mode 100644
index e1d9479..0000000
--- a/src/server.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createApi } from "./api";
-import { type DrawingStore, getDefaultDrawingStore } from "./db";
-
-type CreateServerOptions = {
- drawingStore?: DrawingStore;
-};
-
-export function createServer(options: CreateServerOptions = {}) {
- const drawingStore = options.drawingStore ?? getDefaultDrawingStore();
- const api = createApi(drawingStore);
-
- return {
- port: Number(process.env.PORT ?? "3000"),
- hostname: process.env.HOST ?? "localhost",
- routes: {
- "/": (request: Request) => {
- const drawing = drawingStore.ensureInitialDrawing();
- return Response.redirect(new URL(`/d/${drawing.id}`, request.url), 302);
- },
- "/api/health": {
- GET: () => api.health(),
- },
- "/api/drawings": {
- GET: () => api.listDrawings(),
- POST: () => api.createDrawing(),
- },
- "/api/drawings/:id": {
- GET: (request: Request & { params: Record }) => api.getDrawing(request),
- PUT: (request: Request & { params: Record }) => api.updateDrawing(request),
- DELETE: (request: Request & { params: Record }) => api.deleteDrawing(request),
- },
- },
- fetch: (_request: Request) => Response.json({ ok: false, error: "Not found" }, { status: 404 }),
- } satisfies Parameters[0];
-}
-
-if (import.meta.main) {
- const server = Bun.serve(createServer());
- console.log(`Listening on http://${server.hostname}:${server.port}`);
-}
diff --git a/src/shared.ts b/src/shared.ts
deleted file mode 100644
index 5153b0d..0000000
--- a/src/shared.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type ScenePayload = {
- elements: unknown[];
- appState: Record;
- files: Record;
-};
-
-export type DrawingMeta = {
- id: string;
- title: string;
- createdAt: string;
- updatedAt: string;
-};
-
-export type DrawingRecord = DrawingMeta & {
- scene: ScenePayload;
-};
-
-export const DEFAULT_TITLE = "Untitled";
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index 82b1ea5..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,297 +0,0 @@
-:root {
- color-scheme: light;
- font-family:
- Inter,
- ui-sans-serif,
- system-ui,
- -apple-system,
- BlinkMacSystemFont,
- "Segoe UI",
- sans-serif;
-}
-
-* {
- box-sizing: border-box;
-}
-
-html,
-body,
-#root {
- margin: 0;
- height: 100%;
-}
-
-body {
- background: #f5f5f4;
- color: #18181b;
-}
-
-button,
-input {
- font: inherit;
-}
-
-.app-shell {
- height: 100%;
- color: var(--app-text-color, #18181b);
- --app-sidebar-font-size: 0.875rem;
- --app-island-bg: #ffffff;
- --app-sidebar-bg: #ffffff;
- --app-sidebar-border: #e4e4e7;
- --app-sidebar-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
- --app-surface-lowest: #ffffff;
- --app-surface-low: #f4f4f5;
- --app-selected-bg: #f4f4f5;
- --app-text-color: #18181b;
- --app-selected-text-color: #18181b;
- --app-disabled-color: #a1a1aa;
- --app-input-bg: #ffffff;
- --app-input-border: #d4d4d8;
- --app-input-color: #18181b;
- --app-button-border: #d4d4d8;
- --app-button-hover-bg: #f4f4f5;
- --app-button-active-bg: #e4e4e7;
- --app-button-active-border: #5b8def;
- --app-overlay-bg: rgba(255, 255, 255, 0.88);
-}
-
-.sidebar {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 40;
- display: flex;
- height: 100%;
- width: min(340px, calc(100vw - 32px));
- flex-direction: column;
- border-right: 1px solid var(--app-sidebar-border);
- background: var(--app-sidebar-bg);
- box-shadow: var(--app-sidebar-shadow);
- transform: translateX(calc(-100% - 24px));
- transition:
- transform 180ms ease,
- box-shadow 180ms ease;
-}
-
-.sidebar-open {
- transform: translateX(0);
-}
-
-.sidebar-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 12px;
- border-bottom: 1px solid var(--app-sidebar-border);
- padding: 16px;
-}
-
-.sidebar-header h1 {
- margin: 0;
- font-size: var(--app-sidebar-font-size);
- font-weight: 600;
- color: var(--app-text-color);
-}
-
-.sidebar-actions {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.sidebar-actions .primary-button,
-.sidebar-actions .icon-button {
- height: 32px;
-}
-
-.drawing-list {
- flex: 1;
- overflow: auto;
- padding: 8px;
-}
-
-.drawing-item {
- display: flex;
- align-items: center;
- gap: 4px;
- border-radius: 8px;
- padding: 4px 12px;
-}
-
-.drawing-item-active {
- background: var(--app-selected-bg);
- color: var(--app-selected-text-color);
-}
-
-.drawing-link {
- flex: 1 1 auto;
- min-width: 0;
- border: 0;
- background: transparent;
- color: inherit;
- padding: 8px 0;
- text-align: left;
- font-size: var(--app-sidebar-font-size);
-}
-
-.drawing-title,
-.title-input {
- display: block;
- width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.title-input {
- border: 1px solid var(--app-input-border);
- border-radius: 6px;
- background: var(--app-input-bg);
- color: var(--app-input-color);
- font-size: var(--app-sidebar-font-size);
- padding: 6px 8px;
-}
-
-.editor-shell {
- position: relative;
- height: 100%;
-}
-
-.app-actions {
- position: fixed;
- right: max(16px, calc(env(safe-area-inset-right) + 16px));
- bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px);
- z-index: 20;
- display: flex;
-}
-
-.app-actions-toggle {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: var(--lg-button-size, 2.25rem);
- height: var(--lg-button-size, 2.25rem);
- padding: 0;
- border: none;
- border-radius: var(--border-radius-lg, 12px);
- box-shadow: 0 0 0 1px var(--app-surface-lowest);
- background: var(--app-surface-low);
- color: var(--app-text-color);
-}
-
-.app-actions-toggle svg {
- width: 1rem;
- height: 1rem;
- overflow: visible;
- transform: translateY(0.5px) scale(1.08);
- transform-origin: center;
-}
-
-.primary-button,
-.secondary-button,
-.icon-button {
- border: 1px solid var(--app-button-border);
- border-radius: 8px;
- background: var(--app-island-bg);
- color: var(--app-text-color);
- transition:
- background-color 120ms ease,
- border-color 120ms ease,
- color 120ms ease,
- box-shadow 120ms ease;
-}
-
-.primary-button,
-.secondary-button {
- cursor: pointer;
- font-size: var(--app-sidebar-font-size);
- font-weight: 500;
- padding: 8px 12px;
-}
-
-.primary-button:hover,
-.secondary-button:hover,
-.icon-button:hover {
- background: var(--app-button-hover-bg);
-}
-
-.primary-button:active,
-.secondary-button:active,
-.icon-button:active {
- background: var(--app-button-active-bg);
- border-color: var(--app-button-active-border);
-}
-
-.secondary-button:disabled {
- cursor: not-allowed;
- opacity: 0.6;
- color: var(--app-disabled-color);
-}
-
-.icon-button {
- display: inline-flex;
- flex: 0 0 32px;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- cursor: pointer;
-}
-
-.sidebar-backdrop {
- position: fixed;
- inset: 0;
- z-index: 30;
- background: color-mix(in srgb, var(--app-overlay-bg) 72%, #000000);
- opacity: 0;
- pointer-events: none;
- transition: opacity 180ms ease;
-}
-
-.sidebar-backdrop-open {
- opacity: 1;
- pointer-events: auto;
-}
-
-.editor-frame,
-.editor-loading {
- height: 100%;
-}
-
-.editor-loading {
- display: grid;
- place-items: center;
- color: var(--app-text-color);
-}
-
-.app-actions-toggle:hover {
- background: var(--app-button-hover-bg);
-}
-
-.app-actions-toggle:active {
- box-shadow: 0 0 0 1px var(--app-button-active-border);
- background: var(--app-button-active-bg);
-}
-
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
-}
-
-@media (max-width: 900px) {
- .sidebar {
- width: min(300px, calc(100vw - 20px));
- }
-
- .app-actions {
- right: max(16px, calc(env(safe-area-inset-right) + 16px));
- bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px);
- }
-}