@bendyline/docblocks-react 2.0.0 → 2.1.0

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":[]}