@bendyline/docblocks-react 1.1.2 → 2.1.0

package/dist/chunk-5A4KEWKT.js

@@ -0,0 +1,97 @@
+// src/Git/GitContext.tsx
+import { createContext, useContext } from "react";
+var GitContext = createContext(null);
+function useGitContext() {
+  return useContext(GitContext);
+}
+
+// src/Git/git-status.ts
+var BADGE_GLYPHS = {
+  modified: "M",
+  added: "A",
+  untracked: "U",
+  renamed: "R",
+  deleted: "D",
+  conflicted: "!",
+  dir: "\u2022"
+};
+var BADGE_LABELS = {
+  modified: "modified",
+  added: "added",
+  untracked: "untracked",
+  renamed: "renamed",
+  deleted: "deleted",
+  conflicted: "has conflicts",
+  dir: "contains changes"
+};
+function normalise(path) {
+  return path.startsWith("/") ? path : `/${path}`;
+}
+function isDotPath(path) {
+  return normalise(path).split("/").some((segment) => segment.startsWith("."));
+}
+function badgeKindFor(change) {
+  if (change.conflicted) return "conflicted";
+  if (change.worktree === "untracked") return "untracked";
+  if (change.index === "deleted" || change.worktree === "deleted") return "deleted";
+  if (change.index === "renamed" || change.worktree === "renamed") return "renamed";
+  if (change.index === "added" || change.worktree === "added") return "added";
+  return "modified";
+}
+function buildBadgeMap(changes) {
+  const badges = /* @__PURE__ */ new Map();
+  const dirKinds = /* @__PURE__ */ new Map();
+  for (const change of changes) {
+    if (isDotPath(change.path)) continue;
+    const filePath = normalise(change.path);
+    const kind = badgeKindFor(change);
+    if (kind !== "deleted") {
+      badges.set(filePath, kind);
+    }
+    const segments = filePath.split("/").slice(1, -1);
+    let dir = "";
+    for (const segment of segments) {
+      dir += `/${segment}`;
+      const rollup = kind === "conflicted" ? "conflicted" : "dir";
+      if (dirKinds.get(dir) !== "conflicted") dirKinds.set(dir, rollup);
+    }
+  }
+  for (const [dir, kind] of dirKinds) {
+    if (!badges.has(dir)) badges.set(dir, kind);
+  }
+  return badges;
+}
+function formatAheadBehind(status) {
+  const parts = [];
+  if (status.ahead > 0) parts.push(`${status.ahead}\u2191`);
+  if (status.behind > 0) parts.push(`${status.behind}\u2193`);
+  return parts.join(" ");
+}
+function isFileDirty(status, path) {
+  if (!status || !path) return false;
+  const target = normalise(path);
+  return status.changes.some((c) => normalise(c.path) === target);
+}
+function conflictedPaths(status) {
+  if (!status) return [];
+  return status.changes.filter((c) => c.conflicted).map((c) => normalise(c.path));
+}
+function summarizeDirty(status) {
+  const count = status?.changes.length ?? 0;
+  if (count === 0) return "";
+  return count === 1 ? "1 change" : `${count} changes`;
+}
+
+export {
+  GitContext,
+  useGitContext,
+  BADGE_GLYPHS,
+  BADGE_LABELS,
+  badgeKindFor,
+  buildBadgeMap,
+  formatAheadBehind,
+  isFileDirty,
+  conflictedPaths,
+  summarizeDirty
+};
+//# sourceMappingURL=chunk-5A4KEWKT.js.map

package/dist/chunk-5A4KEWKT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Git/GitContext.tsx","../src/Git/git-status.ts"],"sourcesContent":["/**\n * GitContext — the seam between DocBlocksShell and every git UI surface.\n *\n * The shell calls useGit() once and provides the value here; the status\n * bar, file-tree badges, toolbar control, and dialogs all consume it.\n * Consumers must tolerate a null context (FileExplorer renders standalone\n * in tests and on surfaces with no git).\n */\n\nimport { createContext, useContext } from 'react';\nimport type {\n  DocBlocksHostGitAPI,\n  GitCapabilities,\n  GitRepoDetection,\n  GitStatus,\n} from '@bendyline/docblocks/host';\nimport type { FileSystemProvider } from '@bendyline/docblocks/filesystem';\nimport type { GitBadgeKind } from './git-status.js';\n\nexport type GitDialogState =\n  | { kind: 'none' }\n  | { kind: 'commit' }\n  | { kind: 'branches'; createFocus?: boolean }\n  | { kind: 'history'; path?: string }\n  /** `revision` absent → working tree vs HEAD; present → that commit vs its parent. */\n  | { kind: 'diff'; path: string; revision?: { sha: string } }\n  | { kind: 'clone' }\n  | {\n      kind: 'auth-guidance';\n      operation: 'push' | 'pull' | 'fetch' | 'clone' | 'pr';\n      detail?: string;\n    }\n  | { kind: 'conflicts'; paths: string[] };\n\nexport type GitBusyKind = 'push' | 'pull' | 'fetch' | 'commit' | 'branch' | 'pr' | null;\n\nexport interface GitInlineResult {\n  tone: 'info' | 'error';\n  message: string;\n}\n\nexport interface GitValue {\n  /** Tier 1 — Electron host with a working git. Gates the clone entry. */\n  available: boolean;\n  capabilities: GitCapabilities | null;\n  /** Tier 2 — the active workspace root is a repository. Gates everything else. */\n  repo: GitRepoDetection | null;\n  /** Main-owned repository capability; never a native path. */\n  repositoryId: string | null;\n  /** Parsed web location of the first remote, when one exists and parses. */\n  remoteWeb: { host: string; owner: string; repo: string; webUrl: string } | null;\n  /** Raw host API for read-heavy dialogs (log, branches, file-at-revision). */\n  gitApi: DocBlocksHostGitAPI | null;\n  provider: FileSystemProvider | null;\n  theme: 'light' | 'dark';\n\n  status: GitStatus | null;\n  badges: ReadonlyMap<string, GitBadgeKind>;\n  busy: GitBusyKind;\n  /** Latest operation outcome, surfaced in an aria-live region. */\n  lastResult: GitInlineResult | null;\n\n  refresh: () => void;\n  /** Debounced refresh — used after autosave writes. */\n  scheduleRefresh: () => void;\n\n  /** Actions route their typed errors to dialogs/lastResult internally. */\n  commit: (message: string, paths: string[]) => Promise<boolean>;\n  push: () => Promise<void>;\n  pull: () => Promise<void>;\n  fetchRemote: () => Promise<void>;\n  createBranch: (name: string) => Promise<boolean>;\n  switchBranch: (name: string) => Promise<boolean>;\n  /** Open the repo (or a file within it) on the remote's web host. */\n  openOnRemote: (filePath?: string) => void;\n  createPullRequest: () => Promise<void>;\n\n  dialog: GitDialogState;\n  openDialog: (dialog: GitDialogState) => void;\n  closeDialog: () => void;\n}\n\nexport const GitContext = createContext<GitValue | null>(null);\n\n/** Null when no provider is mounted — callers must degrade gracefully. */\nexport function useGitContext(): GitValue | null {\n  return useContext(GitContext);\n}\n","/**\n * Pure helpers mapping GitStatus onto UI concerns — file-tree badges,\n * ahead/behind chips, dirty summaries. No React, no host access.\n */\n\nimport type { GitFileChange, GitStatus } from '@bendyline/docblocks/host';\n\nexport type GitBadgeKind =\n  | 'modified'\n  | 'added'\n  | 'untracked'\n  | 'renamed'\n  | 'deleted'\n  | 'conflicted'\n  | 'dir';\n\nexport const BADGE_GLYPHS: Record<GitBadgeKind, string> = {\n  modified: 'M',\n  added: 'A',\n  untracked: 'U',\n  renamed: 'R',\n  deleted: 'D',\n  conflicted: '!',\n  dir: '•',\n};\n\nexport const BADGE_LABELS: Record<GitBadgeKind, string> = {\n  modified: 'modified',\n  added: 'added',\n  untracked: 'untracked',\n  renamed: 'renamed',\n  deleted: 'deleted',\n  conflicted: 'has conflicts',\n  dir: 'contains changes',\n};\n\nfunction normalise(path: string): string {\n  return path.startsWith('/') ? path : `/${path}`;\n}\n\n/** True when any path segment is a dot-entry (.git, .github, .gitignore…). */\nfunction isDotPath(path: string): boolean {\n  return normalise(path)\n    .split('/')\n    .some((segment) => segment.startsWith('.'));\n}\n\nexport function badgeKindFor(change: GitFileChange): GitBadgeKind {\n  if (change.conflicted) return 'conflicted';\n  if (change.worktree === 'untracked') return 'untracked';\n  if (change.index === 'deleted' || change.worktree === 'deleted') return 'deleted';\n  if (change.index === 'renamed' || change.worktree === 'renamed') return 'renamed';\n  if (change.index === 'added' || change.worktree === 'added') return 'added';\n  return 'modified';\n}\n\n/**\n * Slash-prefixed path → badge kind, including directory rollups: any\n * ancestor directory of a changed file gets a 'dir' dot (or 'conflicted'\n * when a conflicted descendant wins). Deleted files aren't in the tree, so\n * they contribute only their ancestor rollup. Dot-paths are excluded so a\n * `.gitignore` edit doesn't inexplicably dot the root.\n */\nexport function buildBadgeMap(changes: readonly GitFileChange[]): Map<string, GitBadgeKind> {\n  const badges = new Map<string, GitBadgeKind>();\n  const dirKinds = new Map<string, GitBadgeKind>();\n\n  for (const change of changes) {\n    if (isDotPath(change.path)) continue;\n    const filePath = normalise(change.path);\n    const kind = badgeKindFor(change);\n    if (kind !== 'deleted') {\n      badges.set(filePath, kind);\n    }\n    const segments = filePath.split('/').slice(1, -1);\n    let dir = '';\n    for (const segment of segments) {\n      dir += `/${segment}`;\n      const rollup = kind === 'conflicted' ? 'conflicted' : 'dir';\n      if (dirKinds.get(dir) !== 'conflicted') dirKinds.set(dir, rollup);\n    }\n  }\n  for (const [dir, kind] of dirKinds) {\n    if (!badges.has(dir)) badges.set(dir, kind);\n  }\n  return badges;\n}\n\n/** \"2↑ 1↓\" — empty string when neither applies. */\nexport function formatAheadBehind(status: Pick<GitStatus, 'ahead' | 'behind'>): string {\n  const parts: string[] = [];\n  if (status.ahead > 0) parts.push(`${status.ahead}↑`);\n  if (status.behind > 0) parts.push(`${status.behind}↓`);\n  return parts.join(' ');\n}\n\nexport function isFileDirty(status: GitStatus | null, path: string | null): boolean {\n  if (!status || !path) return false;\n  const target = normalise(path);\n  return status.changes.some((c) => normalise(c.path) === target);\n}\n\nexport function conflictedPaths(status: GitStatus | null): string[] {\n  if (!status) return [];\n  return status.changes.filter((c) => c.conflicted).map((c) => normalise(c.path));\n}\n\n/** \"3 changes\" / \"1 change\" / \"\" when clean. */\nexport function summarizeDirty(status: GitStatus | null): string {\n  const count = status?.changes.length ?? 0;\n  if (count === 0) return '';\n  return count === 1 ? '1 change' : `${count} changes`;\n}\n"],"mappings":";AASA,SAAS,eAAe,kBAAkB;AAyEnC,IAAM,aAAa,cAA+B,IAAI;AAGtD,SAAS,gBAAiC;AAC/C,SAAO,WAAW,UAAU;AAC9B;;;ACvEO,IAAM,eAA6C;AAAA,EACxD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AACP;AAEO,IAAM,eAA6C;AAAA,EACxD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AACP;AAEA,SAAS,UAAU,MAAsB;AACvC,SAAO,KAAK,WAAW,GAAG,IAAI,OAAO,IAAI,IAAI;AAC/C;AAGA,SAAS,UAAU,MAAuB;AACxC,SAAO,UAAU,IAAI,EAClB,MAAM,GAAG,EACT,KAAK,CAAC,YAAY,QAAQ,WAAW,GAAG,CAAC;AAC9C;AAEO,SAAS,aAAa,QAAqC;AAChE,MAAI,OAAO,WAAY,QAAO;AAC9B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,OAAO,UAAU,aAAa,OAAO,aAAa,UAAW,QAAO;AACxE,MAAI,OAAO,UAAU,aAAa,OAAO,aAAa,UAAW,QAAO;AACxE,MAAI,OAAO,UAAU,WAAW,OAAO,aAAa,QAAS,QAAO;AACpE,SAAO;AACT;AASO,SAAS,cAAc,SAA8D;AAC1F,QAAM,SAAS,oBAAI,IAA0B;AAC7C,QAAM,WAAW,oBAAI,IAA0B;AAE/C,aAAW,UAAU,SAAS;AAC5B,QAAI,UAAU,OAAO,IAAI,EAAG;AAC5B,UAAM,WAAW,UAAU,OAAO,IAAI;AACtC,UAAM,OAAO,aAAa,MAAM;AAChC,QAAI,SAAS,WAAW;AACtB,aAAO,IAAI,UAAU,IAAI;AAAA,IAC3B;AACA,UAAM,WAAW,SAAS,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE;AAChD,QAAI,MAAM;AACV,eAAW,WAAW,UAAU;AAC9B,aAAO,IAAI,OAAO;AAClB,YAAM,SAAS,SAAS,eAAe,eAAe;AACtD,UAAI,SAAS,IAAI,GAAG,MAAM,aAAc,UAAS,IAAI,KAAK,MAAM;AAAA,IAClE;AAAA,EACF;AACA,aAAW,CAAC,KAAK,IAAI,KAAK,UAAU;AAClC,QAAI,CAAC,OAAO,IAAI,GAAG,EAAG,QAAO,IAAI,KAAK,IAAI;AAAA,EAC5C;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,QAAqD;AACrF,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,QAAQ,EAAG,OAAM,KAAK,GAAG,OAAO,KAAK,QAAG;AACnD,MAAI,OAAO,SAAS,EAAG,OAAM,KAAK,GAAG,OAAO,MAAM,QAAG;AACrD,SAAO,MAAM,KAAK,GAAG;AACvB;AAEO,SAAS,YAAY,QAA0B,MAA8B;AAClF,MAAI,CAAC,UAAU,CAAC,KAAM,QAAO;AAC7B,QAAM,SAAS,UAAU,IAAI;AAC7B,SAAO,OAAO,QAAQ,KAAK,CAAC,MAAM,UAAU,EAAE,IAAI,MAAM,MAAM;AAChE;AAEO,SAAS,gBAAgB,QAAoC;AAClE,MAAI,CAAC,OAAQ,QAAO,CAAC;AACrB,SAAO,OAAO,QAAQ,OAAO,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,UAAU,EAAE,IAAI,CAAC;AAChF;AAGO,SAAS,eAAe,QAAkC;AAC/D,QAAM,QAAQ,QAAQ,QAAQ,UAAU;AACxC,MAAI,UAAU,EAAG,QAAO;AACxB,SAAO,UAAU,IAAI,aAAa,GAAG,KAAK;AAC5C;","names":[]}

package/dist/chunk-DD4VFJQI.js

@@ -0,0 +1,51 @@
+// src/Export/export-options.ts
+var FORMAT_LABELS = {
+  docx: "Word Document (.docx)",
+  pdf: "PDF (.pdf)",
+  pptx: "PowerPoint (.pptx)",
+  md: "Markdown (.md)",
+  html: "HTML (.html)"
+};
+var FORMAT_EXTENSIONS = {
+  docx: ".docx",
+  pdf: ".pdf",
+  pptx: ".pptx",
+  md: ".md",
+  html: ".html"
+};
+var STORAGE_KEY = "docblocks-export-options";
+var DEFAULT_OPTIONS = {
+  format: "pdf",
+  themeId: "standard",
+  transformStyle: "documentary",
+  pageSize: "letter",
+  htmlStyle: "plain",
+  htmlBundle: "single",
+  includeLinkedDocs: false,
+  entryAsIndex: false
+};
+function loadLastExportOptions() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULT_OPTIONS, ...parsed };
+  } catch {
+    return null;
+  }
+}
+function saveExportOptions(options) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
+  } catch {
+  }
+}
+
+export {
+  FORMAT_LABELS,
+  FORMAT_EXTENSIONS,
+  DEFAULT_OPTIONS,
+  loadLastExportOptions,
+  saveExportOptions
+};
+//# sourceMappingURL=chunk-DD4VFJQI.js.map

package/dist/chunk-DD4VFJQI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Export/export-options.ts"],"sourcesContent":["/**\n * Export option types and localStorage persistence for quick-export.\n */\n\nexport type ExportFormat = 'docx' | 'pdf' | 'pptx' | 'md' | 'html';\n\n/** Visual style for HTML export. */\nexport type HtmlStyle =\n  /** Render via SquisqPlayer (themed, embeds player bundle). */\n  | 'rendered'\n  /** Plain semantic HTML — small, no JS, no playback. */\n  | 'plain';\n\n/** Packaging for HTML export. */\nexport type HtmlBundle =\n  /** Single self-contained .html file (images base64-embedded). */\n  | 'single'\n  /** ZIP containing index.html + asset files. */\n  | 'zip';\n\nexport interface ExportOptions {\n  format: ExportFormat;\n  themeId: string;\n  /** Transform style for PPTX — controls how content is segmented and styled. */\n  transformStyle: string;\n  /** Only applies to PDF */\n  pageSize: 'letter' | 'a4';\n  /** HTML rendering style. Only applies to format=html. */\n  htmlStyle: HtmlStyle;\n  /** HTML bundle layout. Only applies to format=html. */\n  htmlBundle: HtmlBundle;\n  /**\n   * Recursive HTML bundle: walk relative `.md` links from the entry\n   * document, render every reachable sibling/child page, and rewrite\n   * cross-doc links from `.md` → `.html`. The output is a ZIP\n   * regardless of `htmlBundle` because multi-doc output needs a\n   * directory tree. Supported for both plain (`markdownDocsToPlainHtmlBundle`)\n   * and rendered (`markdownDocsToHtmlBundle`) HTML styles. Only\n   * meaningful when `format === 'html'`.\n   */\n  includeLinkedDocs: boolean;\n  /**\n   * Rename the entry page from `<basename>.html` to `index.html` so the\n   * export drops straight into a static-site host that expects an\n   * `index.html` landing page. For recursive bundles, cross-doc links\n   * targeting the entry also rewrite to `index.html` so siblings don't\n   * 404. For a single-doc HTML download, this just renames the file.\n   * Only meaningful when `format === 'html'`.\n   */\n  entryAsIndex: boolean;\n}\n\nexport const FORMAT_LABELS: Record<ExportFormat, string> = {\n  docx: 'Word Document (.docx)',\n  pdf: 'PDF (.pdf)',\n  pptx: 'PowerPoint (.pptx)',\n  md: 'Markdown (.md)',\n  html: 'HTML (.html)',\n};\n\nexport const FORMAT_EXTENSIONS: Record<ExportFormat, string> = {\n  docx: '.docx',\n  pdf: '.pdf',\n  pptx: '.pptx',\n  md: '.md',\n  html: '.html',\n};\n\nconst STORAGE_KEY = 'docblocks-export-options';\n\nexport const DEFAULT_OPTIONS: ExportOptions = {\n  format: 'pdf',\n  themeId: 'standard',\n  transformStyle: 'documentary',\n  pageSize: 'letter',\n  htmlStyle: 'plain',\n  htmlBundle: 'single',\n  includeLinkedDocs: false,\n  entryAsIndex: false,\n};\n\nexport function loadLastExportOptions(): ExportOptions | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY);\n    if (!raw) return null;\n    const parsed = JSON.parse(raw) as Partial<ExportOptions>;\n    return { ...DEFAULT_OPTIONS, ...parsed };\n  } catch {\n    return null;\n  }\n}\n\nexport function saveExportOptions(options: ExportOptions): void {\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(options));\n  } catch {\n    // Ignore storage errors\n  }\n}\n"],"mappings":";AAoDO,IAAM,gBAA8C;AAAA,EACzD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,oBAAkD;AAAA,EAC7D,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,IAAM,cAAc;AAEb,IAAM,kBAAiC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAChB;AAEO,SAAS,wBAA8C;AAC5D,MAAI;AACF,UAAM,MAAM,aAAa,QAAQ,WAAW;AAC5C,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,KAAK,MAAM,GAAG;AAC7B,WAAO,EAAE,GAAG,iBAAiB,GAAG,OAAO;AAAA,EACzC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEO,SAAS,kBAAkB,SAA8B;AAC9D,MAAI;AACF,iBAAa,QAAQ,aAAa,KAAK,UAAU,OAAO,CAAC;AAAA,EAC3D,QAAQ;AAAA,EAER;AACF;","names":[]}

package/dist/chunk-FEWQUQML.js

@@ -0,0 +1,256 @@
+import {
+  Dialog
+} from "./chunk-FMGTHSTX.js";
+
+// src/preferences/theme.ts
+var ACCENT_COLORS = [
+  "brown",
+  "green",
+  "blue",
+  "purple",
+  "maroon",
+  "orange",
+  "gray"
+];
+var DB_CHROME_COLORS = {
+  light: "#f3eede",
+  dark: "#262219"
+};
+var THEME_STORAGE_KEY = "docblocks:themePreference";
+var ACCENT_STORAGE_KEY = "docblocks:accentColor";
+function loadThemePreference() {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY);
+    if (raw === "light" || raw === "dark" || raw === "auto") return raw;
+  } catch {
+  }
+  return "auto";
+}
+function saveThemePreference(value) {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, value);
+  } catch {
+  }
+}
+function loadAccentColor() {
+  try {
+    const raw = localStorage.getItem(ACCENT_STORAGE_KEY);
+    if (ACCENT_COLORS.some((color) => color === raw)) return raw;
+  } catch {
+  }
+  return "brown";
+}
+function saveAccentColor(value) {
+  try {
+    localStorage.setItem(ACCENT_STORAGE_KEY, value);
+  } catch {
+  }
+}
+
+// src/preferences/write-canvas.ts
+var WRITE_CANVAS_TEXT_SIZE_MIN = 12;
+var WRITE_CANVAS_TEXT_SIZE_MAX = 32;
+var WRITE_CANVAS_LINE_SPACING_MIN = 1.2;
+var WRITE_CANVAS_LINE_SPACING_MAX = 2.4;
+var DEFAULT_WRITE_CANVAS_PREFERENCES = {
+  textSize: 16,
+  lineSpacing: 1.7
+};
+var WRITE_CANVAS_STORAGE_KEY = "docblocks:writeCanvasSettings";
+function loadWriteCanvasPreferences() {
+  try {
+    const raw = localStorage.getItem(WRITE_CANVAS_STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+    const stored = JSON.parse(raw);
+    if (!isRecord(stored)) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+    return {
+      textSize: numberInRange(
+        stored.textSize,
+        WRITE_CANVAS_TEXT_SIZE_MIN,
+        WRITE_CANVAS_TEXT_SIZE_MAX
+      ) ? stored.textSize : DEFAULT_WRITE_CANVAS_PREFERENCES.textSize,
+      lineSpacing: numberInRange(
+        stored.lineSpacing,
+        WRITE_CANVAS_LINE_SPACING_MIN,
+        WRITE_CANVAS_LINE_SPACING_MAX
+      ) ? stored.lineSpacing : DEFAULT_WRITE_CANVAS_PREFERENCES.lineSpacing
+    };
+  } catch {
+    return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+  }
+}
+function saveWriteCanvasPreferences(value) {
+  try {
+    localStorage.setItem(WRITE_CANVAS_STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+}
+function numberInRange(value, min, max) {
+  return typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/Settings/Settings.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACCENT_LABELS = {
+  brown: "Brown",
+  green: "Green",
+  blue: "Blue",
+  purple: "Purple",
+  maroon: "Maroon",
+  orange: "Orange",
+  gray: "Gray"
+};
+function SettingsDialog({ title = "Settings", onClose, children }) {
+  return /* @__PURE__ */ jsx(Dialog, { title, onClose, size: "wide", children });
+}
+function ThemeSettings({ value, onChange, name = "theme" }) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx("legend", { className: "db-settings-legend", children: "Theme" }),
+    /* @__PURE__ */ jsxs("label", { className: "db-settings-radio", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: "auto",
+          checked: value === "auto",
+          onChange: () => onChange("auto")
+        }
+      ),
+      "System default"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "db-settings-radio", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: "light",
+          checked: value === "light",
+          onChange: () => onChange("light")
+        }
+      ),
+      "Light"
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "db-settings-radio", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: "dark",
+          checked: value === "dark",
+          onChange: () => onChange("dark")
+        }
+      ),
+      "Dark"
+    ] })
+  ] });
+}
+function AccentColorSettings({
+  value,
+  onChange,
+  name = "accent-color"
+}) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx("legend", { className: "db-settings-legend", children: "Accent color" }),
+    /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: "Used in both light and dark appearances." }),
+    /* @__PURE__ */ jsx("div", { className: "db-settings-accent-grid", children: ACCENT_COLORS.map((color) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: `db-settings-accent${value === color ? " db-settings-accent--selected" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "db-settings-accent-input",
+              type: "radio",
+              name,
+              value: color,
+              checked: value === color,
+              onChange: () => onChange(color)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `db-settings-accent-swatch db-settings-accent-swatch--${color}`,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: ACCENT_LABELS[color] })
+        ]
+      },
+      color
+    )) })
+  ] });
+}
+function WriteCanvasSettingsControls({ value, onChange }) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx("legend", { className: "db-settings-legend", children: "Write canvas" }),
+    /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: "Adjust the writing view without changing the document or its exported text." }),
+    /* @__PURE__ */ jsxs("label", { className: "db-settings-slider", children: [
+      /* @__PURE__ */ jsxs("span", { className: "db-settings-slider-header", children: [
+        /* @__PURE__ */ jsx("span", { children: "Text size" }),
+        /* @__PURE__ */ jsxs("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: [
+          value.textSize,
+          "px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: WRITE_CANVAS_TEXT_SIZE_MIN,
+          max: WRITE_CANVAS_TEXT_SIZE_MAX,
+          step: 1,
+          value: value.textSize,
+          "aria-label": "Text size",
+          "aria-valuetext": `${value.textSize} pixels`,
+          onChange: (event) => onChange({ ...value, textSize: Number(event.currentTarget.value) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "db-settings-slider", children: [
+      /* @__PURE__ */ jsxs("span", { className: "db-settings-slider-header", children: [
+        /* @__PURE__ */ jsx("span", { children: "Line spacing" }),
+        /* @__PURE__ */ jsx("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: formatLineSpacing(value.lineSpacing) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: WRITE_CANVAS_LINE_SPACING_MIN,
+          max: WRITE_CANVAS_LINE_SPACING_MAX,
+          step: 0.1,
+          value: value.lineSpacing,
+          "aria-label": "Line spacing",
+          "aria-valuetext": `${value.lineSpacing} times`,
+          onChange: (event) => onChange({ ...value, lineSpacing: Number(event.currentTarget.value) })
+        }
+      )
+    ] })
+  ] });
+}
+function formatLineSpacing(value) {
+  return `${value.toFixed(1).replace(/\.0$/, "")}\xD7`;
+}
+
+export {
+  DEFAULT_WRITE_CANVAS_PREFERENCES,
+  loadWriteCanvasPreferences,
+  saveWriteCanvasPreferences,
+  DB_CHROME_COLORS,
+  loadThemePreference,
+  saveThemePreference,
+  loadAccentColor,
+  saveAccentColor,
+  SettingsDialog,
+  ThemeSettings,
+  AccentColorSettings,
+  WriteCanvasSettingsControls
+};
+//# sourceMappingURL=chunk-FEWQUQML.js.map

package/dist/chunk-FEWQUQML.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preferences/theme.ts","../src/preferences/write-canvas.ts","../src/Settings/Settings.tsx"],"sourcesContent":["/** Appearance preferences shared by the shell and settings UI. */\n\nexport type ThemePreference = 'auto' | 'light' | 'dark';\n\nexport const ACCENT_COLORS = [\n  'brown',\n  'green',\n  'blue',\n  'purple',\n  'maroon',\n  'orange',\n  'gray',\n] as const;\n\nexport type AccentColor = (typeof ACCENT_COLORS)[number];\n\n/**\n * Chrome (titlebar) background per resolved theme. Keep in sync with\n * `--db-bg-subtle` for the default accent in styles/docblocks.css and with\n * the static `<meta name=\"theme-color\">` values in the site's index.html.\n * The shell writes these into the theme-color metas so the installed web\n * app's titlebar (Window Controls Overlay caption area, Android status bar)\n * follows the resolved theme.\n */\nexport const DB_CHROME_COLORS: Record<'light' | 'dark', string> = {\n  light: '#f3eede',\n  dark: '#262219',\n};\n\nconst THEME_STORAGE_KEY = 'docblocks:themePreference';\nconst ACCENT_STORAGE_KEY = 'docblocks:accentColor';\n\nexport function loadThemePreference(): ThemePreference {\n  try {\n    const raw = localStorage.getItem(THEME_STORAGE_KEY);\n    if (raw === 'light' || raw === 'dark' || raw === 'auto') return raw;\n  } catch {\n    // ignore unavailable storage\n  }\n  return 'auto';\n}\n\nexport function saveThemePreference(value: ThemePreference): void {\n  try {\n    localStorage.setItem(THEME_STORAGE_KEY, value);\n  } catch {\n    // ignore quota errors\n  }\n}\n\nexport function loadAccentColor(): AccentColor {\n  try {\n    const raw = localStorage.getItem(ACCENT_STORAGE_KEY);\n    if (ACCENT_COLORS.some((color) => color === raw)) return raw as AccentColor;\n  } catch {\n    // ignore unavailable storage\n  }\n  return 'brown';\n}\n\nexport function saveAccentColor(value: AccentColor): void {\n  try {\n    localStorage.setItem(ACCENT_STORAGE_KEY, value);\n  } catch {\n    // ignore quota errors\n  }\n}\n","import type { WriteCanvasSettings } from '@bendyline/squisq-editor-react';\n\nexport type WriteCanvasPreferences = Required<WriteCanvasSettings>;\n\nexport const WRITE_CANVAS_TEXT_SIZE_MIN = 12;\nexport const WRITE_CANVAS_TEXT_SIZE_MAX = 32;\nexport const WRITE_CANVAS_LINE_SPACING_MIN = 1.2;\nexport const WRITE_CANVAS_LINE_SPACING_MAX = 2.4;\n\nexport const DEFAULT_WRITE_CANVAS_PREFERENCES: Readonly<WriteCanvasPreferences> = {\n  textSize: 16,\n  lineSpacing: 1.7,\n};\n\nconst WRITE_CANVAS_STORAGE_KEY = 'docblocks:writeCanvasSettings';\n\nexport function loadWriteCanvasPreferences(): WriteCanvasPreferences {\n  try {\n    const raw = localStorage.getItem(WRITE_CANVAS_STORAGE_KEY);\n    if (!raw) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };\n\n    const stored: unknown = JSON.parse(raw);\n    if (!isRecord(stored)) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };\n\n    return {\n      textSize: numberInRange(\n        stored.textSize,\n        WRITE_CANVAS_TEXT_SIZE_MIN,\n        WRITE_CANVAS_TEXT_SIZE_MAX,\n      )\n        ? stored.textSize\n        : DEFAULT_WRITE_CANVAS_PREFERENCES.textSize,\n      lineSpacing: numberInRange(\n        stored.lineSpacing,\n        WRITE_CANVAS_LINE_SPACING_MIN,\n        WRITE_CANVAS_LINE_SPACING_MAX,\n      )\n        ? stored.lineSpacing\n        : DEFAULT_WRITE_CANVAS_PREFERENCES.lineSpacing,\n    };\n  } catch {\n    return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };\n  }\n}\n\nexport function saveWriteCanvasPreferences(value: WriteCanvasPreferences): void {\n  try {\n    localStorage.setItem(WRITE_CANVAS_STORAGE_KEY, JSON.stringify(value));\n  } catch {\n    // Ignore unavailable storage and quota errors; the in-memory choice still works.\n  }\n}\n\nfunction numberInRange(value: unknown, min: number, max: number): value is number {\n  return typeof value === 'number' && Number.isFinite(value) && value >= min && value <= max;\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n","/** Shared controls used by the app and host-specific DocBlocks settings dialogs. */\n\nimport type { ReactNode } from 'react';\nimport { Dialog } from '../components/Dialog.js';\nimport { ACCENT_COLORS, type AccentColor, type ThemePreference } from '../preferences/theme.js';\nimport {\n  WRITE_CANVAS_LINE_SPACING_MAX,\n  WRITE_CANVAS_LINE_SPACING_MIN,\n  WRITE_CANVAS_TEXT_SIZE_MAX,\n  WRITE_CANVAS_TEXT_SIZE_MIN,\n  type WriteCanvasPreferences,\n} from '../preferences/write-canvas.js';\n\nexport type { AccentColor, ThemePreference } from '../preferences/theme.js';\n\nconst ACCENT_LABELS: Record<AccentColor, string> = {\n  brown: 'Brown',\n  green: 'Green',\n  blue: 'Blue',\n  purple: 'Purple',\n  maroon: 'Maroon',\n  orange: 'Orange',\n  gray: 'Gray',\n};\n\nexport interface SettingsDialogProps {\n  title?: string;\n  onClose: () => void;\n  children: ReactNode;\n}\n\nexport function SettingsDialog({ title = 'Settings', onClose, children }: SettingsDialogProps) {\n  return (\n    <Dialog title={title} onClose={onClose} size=\"wide\">\n      {children}\n    </Dialog>\n  );\n}\n\nexport interface ThemeSettingsProps {\n  value: ThemePreference;\n  onChange: (theme: ThemePreference) => void;\n  name?: string;\n}\n\nexport function ThemeSettings({ value, onChange, name = 'theme' }: ThemeSettingsProps) {\n  return (\n    <fieldset className=\"db-settings-fieldset\">\n      <legend className=\"db-settings-legend\">Theme</legend>\n      <label className=\"db-settings-radio\">\n        <input\n          type=\"radio\"\n          name={name}\n          value=\"auto\"\n          checked={value === 'auto'}\n          onChange={() => onChange('auto')}\n        />\n        System default\n      </label>\n      <label className=\"db-settings-radio\">\n        <input\n          type=\"radio\"\n          name={name}\n          value=\"light\"\n          checked={value === 'light'}\n          onChange={() => onChange('light')}\n        />\n        Light\n      </label>\n      <label className=\"db-settings-radio\">\n        <input\n          type=\"radio\"\n          name={name}\n          value=\"dark\"\n          checked={value === 'dark'}\n          onChange={() => onChange('dark')}\n        />\n        Dark\n      </label>\n    </fieldset>\n  );\n}\n\nexport interface AccentColorSettingsProps {\n  value: AccentColor;\n  onChange: (color: AccentColor) => void;\n  name?: string;\n}\n\nexport function AccentColorSettings({\n  value,\n  onChange,\n  name = 'accent-color',\n}: AccentColorSettingsProps) {\n  return (\n    <fieldset className=\"db-settings-fieldset\">\n      <legend className=\"db-settings-legend\">Accent color</legend>\n      <p className=\"db-settings-hint\">Used in both light and dark appearances.</p>\n      <div className=\"db-settings-accent-grid\">\n        {ACCENT_COLORS.map((color) => (\n          <label\n            className={`db-settings-accent${\n              value === color ? ' db-settings-accent--selected' : ''\n            }`}\n            key={color}\n          >\n            <input\n              className=\"db-settings-accent-input\"\n              type=\"radio\"\n              name={name}\n              value={color}\n              checked={value === color}\n              onChange={() => onChange(color)}\n            />\n            <span\n              className={`db-settings-accent-swatch db-settings-accent-swatch--${color}`}\n              aria-hidden=\"true\"\n            />\n            <span>{ACCENT_LABELS[color]}</span>\n          </label>\n        ))}\n      </div>\n    </fieldset>\n  );\n}\n\nexport interface WriteCanvasSettingsControlsProps {\n  value: WriteCanvasPreferences;\n  onChange: (settings: WriteCanvasPreferences) => void;\n}\n\nexport function WriteCanvasSettingsControls({ value, onChange }: WriteCanvasSettingsControlsProps) {\n  return (\n    <fieldset className=\"db-settings-fieldset\">\n      <legend className=\"db-settings-legend\">Write canvas</legend>\n      <p className=\"db-settings-hint\">\n        Adjust the writing view without changing the document or its exported text.\n      </p>\n      <label className=\"db-settings-slider\">\n        <span className=\"db-settings-slider-header\">\n          <span>Text size</span>\n          <output className=\"db-settings-slider-value\" aria-hidden=\"true\">\n            {value.textSize}px\n          </output>\n        </span>\n        <input\n          type=\"range\"\n          min={WRITE_CANVAS_TEXT_SIZE_MIN}\n          max={WRITE_CANVAS_TEXT_SIZE_MAX}\n          step={1}\n          value={value.textSize}\n          aria-label=\"Text size\"\n          aria-valuetext={`${value.textSize} pixels`}\n          onChange={(event) => onChange({ ...value, textSize: Number(event.currentTarget.value) })}\n        />\n      </label>\n      <label className=\"db-settings-slider\">\n        <span className=\"db-settings-slider-header\">\n          <span>Line spacing</span>\n          <output className=\"db-settings-slider-value\" aria-hidden=\"true\">\n            {formatLineSpacing(value.lineSpacing)}\n          </output>\n        </span>\n        <input\n          type=\"range\"\n          min={WRITE_CANVAS_LINE_SPACING_MIN}\n          max={WRITE_CANVAS_LINE_SPACING_MAX}\n          step={0.1}\n          value={value.lineSpacing}\n          aria-label=\"Line spacing\"\n          aria-valuetext={`${value.lineSpacing} times`}\n          onChange={(event) =>\n            onChange({ ...value, lineSpacing: Number(event.currentTarget.value) })\n          }\n        />\n      </label>\n    </fieldset>\n  );\n}\n\nfunction formatLineSpacing(value: number): string {\n  return `${value.toFixed(1).replace(/\\.0$/, '')}\\u00d7`;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FMGTHSTX.js

@@ -0,0 +1,110 @@
+// src/components/Dialog.tsx
+import { useCallback, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Dialog({
+  title,
+  onClose,
+  size = "default",
+  children,
+  footer,
+  initialFocusRef,
+  closeOnBackdrop = true,
+  className,
+  bodyClassName,
+  footerClassName
+}) {
+  const closeButtonRef = useRef(null);
+  const dialogRef = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const focusable = [...dialog.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
+        (element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true"
+      );
+      if (focusable.length === 0) {
+        e.preventDefault();
+        dialog.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  useEffect(() => {
+    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const target = initialFocusRef?.current ?? closeButtonRef.current;
+    target?.focus();
+    return () => {
+      if (previousFocus?.isConnected) previousFocus.focus();
+    };
+  }, []);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+    },
+    [closeOnBackdrop, onClose]
+  );
+  const sizeClass = size === "wide" ? "db-dialog--wide" : size === "full" ? "db-dialog--full" : "";
+  const panelClassName = ["db-dialog", sizeClass, className].filter(Boolean).join(" ");
+  const bodyClasses = ["db-dialog-body", bodyClassName].filter(Boolean).join(" ");
+  const footerClasses = ["db-dialog-footer", footerClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: "db-dialog-overlay", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      className: panelClassName,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "db-dialog-header", children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, className: "db-dialog-title", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeButtonRef,
+              type: "button",
+              className: "db-dialog-close",
+              onClick: onClose,
+              "aria-label": "Close",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: bodyClasses, children }),
+        footer && /* @__PURE__ */ jsx("div", { className: footerClasses, children: footer })
+      ]
+    }
+  ) });
+}
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+
+export {
+  Dialog
+};
+//# sourceMappingURL=chunk-FMGTHSTX.js.map

package/dist/chunk-FMGTHSTX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog.tsx"],"sourcesContent":["/**\n * Dialog — shared modal primitive.\n *\n * Promotes the `db-dialog-overlay` / `db-dialog` pattern used by the\n * settings dialogs into a reusable component, adding aria-modal and\n * initial focus. Escape and (by default) backdrop clicks close it.\n */\n\nimport React, { useCallback, useEffect, useId, useRef } from 'react';\n\nexport interface DialogProps {\n  title: string;\n  onClose: () => void;\n  /** default 380px / wide 560px / full min(1100px, 94vw) column. */\n  size?: 'default' | 'wide' | 'full';\n  children: React.ReactNode;\n  /** Right-aligned action row below the body. */\n  footer?: React.ReactNode;\n  /** Element to focus on open; defaults to the close button. */\n  initialFocusRef?: React.RefObject<HTMLElement | null>;\n  /** Set false when a stray backdrop click would lose user input. */\n  closeOnBackdrop?: boolean;\n  /** Additional class on the dialog panel. */\n  className?: string;\n  /** Additional class on the dialog body. */\n  bodyClassName?: string;\n  /** Additional class on the footer wrapper. */\n  footerClassName?: string;\n}\n\nexport function Dialog({\n  title,\n  onClose,\n  size = 'default',\n  children,\n  footer,\n  initialFocusRef,\n  closeOnBackdrop = true,\n  className,\n  bodyClassName,\n  footerClassName,\n}: DialogProps) {\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      if (e.key !== 'Tab') return;\n\n      const dialog = dialogRef.current;\n      if (!dialog) return;\n      const focusable = [...dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(\n        (element) =>\n          !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true',\n      );\n      if (focusable.length === 0) {\n        e.preventDefault();\n        dialog.focus();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey && document.activeElement === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [onClose]);\n\n  useEffect(() => {\n    const previousFocus =\n      document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    const target = initialFocusRef?.current ?? closeButtonRef.current;\n    target?.focus();\n    return () => {\n      if (previousFocus?.isConnected) previousFocus.focus();\n    };\n    // Focus only on mount — refocusing on every re-render would fight the user.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnBackdrop && e.target === e.currentTarget) onClose();\n    },\n    [closeOnBackdrop, onClose],\n  );\n\n  const sizeClass = size === 'wide' ? 'db-dialog--wide' : size === 'full' ? 'db-dialog--full' : '';\n  const panelClassName = ['db-dialog', sizeClass, className].filter(Boolean).join(' ');\n  const bodyClasses = ['db-dialog-body', bodyClassName].filter(Boolean).join(' ');\n  const footerClasses = ['db-dialog-footer', footerClassName].filter(Boolean).join(' ');\n\n  return (\n    <div className=\"db-dialog-overlay\" onClick={handleBackdropClick}>\n      <div\n        ref={dialogRef}\n        className={panelClassName}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        tabIndex={-1}\n      >\n        <div className=\"db-dialog-header\">\n          <h2 id={titleId} className=\"db-dialog-title\">\n            {title}\n          </h2>\n          <button\n            ref={closeButtonRef}\n            type=\"button\"\n            className=\"db-dialog-close\"\n            onClick={onClose}\n            aria-label=\"Close\"\n          >\n            &times;\n          </button>\n        </div>\n        <div className={bodyClasses}>{children}</div>\n        {footer && <div className={footerClasses}>{footer}</div>}\n      </div>\n    </div>\n  );\n}\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n"],"mappings":"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","names":[]}