@bendyline/docblocks-react 1.1.1 → 2.0.0

package/src/DocBlocksShell/LazyEditorShell.ts

@@ -0,0 +1,2 @@
+/** Deferred boundary for the large Squisq editor implementation. */
+export { EditorShell as default } from '@bendyline/squisq-editor-react';

package/src/DocBlocksShell/UpdateAvailableNotice.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+const UPDATE_PROMPT_ID = 'db-update-available-prompt';
+
+export interface UpdateAvailableNoticeProps {
+  available: boolean;
+  onApplyUpdate?: () => void;
+  blocked?: boolean;
+  statusBarVisible: boolean;
+}
+
+/**
+ * Keeps PWA updates unobtrusive until the user asks to review one. The
+ * notice is positioned over the editor status bar by DocBlocksShell CSS;
+ * the existing Reload/Later prompt remains a fixed shell-level card.
+ */
+export function UpdateAvailableNotice({
+  available,
+  onApplyUpdate,
+  blocked = false,
+  statusBarVisible,
+}: UpdateAvailableNoticeProps) {
+  const [promptOpen, setPromptOpen] = useState(false);
+
+  if (!available || !onApplyUpdate) return null;
+
+  const promptVisible = promptOpen && !blocked;
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`db-update-status-notice${
+          statusBarVisible ? '' : ' db-update-status-notice--floating'
+        }`}
+        onClick={() => setPromptOpen(true)}
+        disabled={blocked}
+        aria-controls={UPDATE_PROMPT_ID}
+        aria-expanded={promptVisible}
+        aria-label="A new version of DocBlocks is available. Show update options."
+        title="A new version of DocBlocks is available"
+      >
+        Update available
+      </button>
+      {promptVisible && (
+        <div id={UPDATE_PROMPT_ID} className="db-update-banner" role="alert">
+          <span>A new version of DocBlocks is available.</span>
+          <div className="db-update-banner-actions">
+            <button type="button" onClick={onApplyUpdate}>
+              Reload
+            </button>
+            <button type="button" onClick={() => setPromptOpen(false)}>
+              Later
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/DocBlocksShell/document-title.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+const APP_TITLE = 'DocBlocks';
+
+export function titleForSelectedFile(selectedFile: string | null): string {
+  if (!selectedFile) return APP_TITLE;
+
+  const filename = selectedFile.replace(/^\/+/, '').split('/').pop();
+  const name = filename?.replace(/\.[^.]+$/, '');
+  return name ? `${name} - ${APP_TITLE}` : APP_TITLE;
+}
+
+export function useDocumentTitle(selectedFile: string | null): void {
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.title = titleForSelectedFile(selectedFile);
+    }
+  }, [selectedFile]);
+}

package/src/DocBlocksShell/workspace-authority-barrier.ts

@@ -0,0 +1,26 @@
+/**
+ * Renderer-side barrier for main-authoritative Electron workspace identity.
+ * OS requests may arrive before IndexedDB descriptors have been reconciled;
+ * they must retain navigation priority while waiting for that reconciliation.
+ */
+export class WorkspaceAuthorityBarrier {
+  private ready = false;
+  private readonly readyPromise: Promise<void>;
+  private resolveReady!: () => void;
+
+  public constructor() {
+    this.readyPromise = new Promise<void>((resolve) => {
+      this.resolveReady = resolve;
+    });
+  }
+
+  public markReady(): void {
+    if (this.ready) return;
+    this.ready = true;
+    this.resolveReady();
+  }
+
+  public wait(): Promise<void> {
+    return this.readyPromise;
+  }
+}

package/src/Export/DeferredExportToolbarControls.tsx

@@ -0,0 +1,23 @@
+import { lazy, Suspense } from 'react';
+import type {
+  ExportDestinationAdapter,
+  ExportDestinationTarget,
+  ExportToolbarControlsProps,
+} from './ExportToolbarControls.js';
+
+const ExportToolbarControlsImplementation = lazy(() =>
+  import('./ExportToolbarControls.js').then((module) => ({
+    default: module.ExportToolbarControls,
+  })),
+);
+
+/** Public toolbar control with its editor-coupled implementation deferred. */
+export function ExportToolbarControls(props: ExportToolbarControlsProps) {
+  return (
+    <Suspense fallback={null}>
+      <ExportToolbarControlsImplementation {...props} />
+    </Suspense>
+  );
+}
+
+export type { ExportDestinationAdapter, ExportDestinationTarget, ExportToolbarControlsProps };

package/src/Export/ExportDialog.tsx

@@ -2,23 +2,33 @@
  * ExportDialog — modal for choosing export format and options.
  */
 
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { getThemeSummaries } from '@bendyline/squisq/schemas';
-import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import type { ExportFormat, ExportOptions, HtmlBundle, HtmlStyle } from './export-options.js';
 import { FORMAT_LABELS, saveExportOptions } from './export-options.js';
+import { loadTransformStyleSummaries, type ExportSummaryOption } from './transform-summaries.js';
 
 export interface ExportDialogProps {
   /** Initial options (pre-populated from last export). */
   initial: ExportOptions;
   /** Whether the export is currently running. */
   exporting: boolean;
+  /** Optional host-provided destination path control. */
+  destination?: ExportDestinationControl;
   /** Called when the user confirms the export. */
   onExport: (options: ExportOptions) => void;
+  /** Called whenever the currently selected options change. */
+  onOptionsChange?: (options: ExportOptions) => void;
   /** Called when the dialog is dismissed. */
   onClose: () => void;
 }
 
+export interface ExportDestinationControl {
+  value: string;
+  onPick: (options: ExportOptions) => void | Promise<void>;
+  hint?: string;
+}
+
 const FORMATS: ExportFormat[] = ['pdf', 'docx', 'pptx', 'html', 'md'];
 
 /** Short labels for the Format chip row. The fuller `FORMAT_LABELS` list
@@ -96,7 +106,14 @@ function ChipRadioGroup<T extends string>({
   );
 }
 
-export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDialogProps) {
+export function ExportDialog({
+  initial,
+  exporting,
+  destination,
+  onExport,
+  onOptionsChange,
+  onClose,
+}: ExportDialogProps) {
   const [format, setFormat] = useState<ExportFormat>(initial.format);
   const [themeId, setThemeId] = useState(initial.themeId);
   const [transformStyle, setTransformStyle] = useState(initial.transformStyle);
@@ -105,10 +122,10 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
   const [htmlBundle, setHtmlBundle] = useState<HtmlBundle>(initial.htmlBundle);
   const [includeLinkedDocs, setIncludeLinkedDocs] = useState<boolean>(initial.includeLinkedDocs);
   const [entryAsIndex, setEntryAsIndex] = useState<boolean>(initial.entryAsIndex);
+  const [transforms, setTransforms] = useState<ExportSummaryOption[]>([]);
   const dialogRef = useRef<HTMLDivElement>(null);
 
   const themes = getThemeSummaries();
-  const transforms = getTransformStyleSummaries();
 
   // Both HTML styles honor themes now: rendered HTML through the
   // SquisqPlayer's theme system, plain HTML through squisq's
@@ -139,8 +156,25 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
   // inert control.
   const showEntryAsIndex = showHtmlOptions && (htmlBundle === 'single' || includeLinkedDocs);
 
-  const handleExport = useCallback(() => {
-    const opts: ExportOptions = {
+  useEffect(() => {
+    if (!showTransform) return;
+    let cancelled = false;
+
+    loadTransformStyleSummaries()
+      .then((nextTransforms) => {
+        if (!cancelled) setTransforms(nextTransforms);
+      })
+      .catch(() => {
+        if (!cancelled) setTransforms([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [showTransform]);
+
+  const currentOptions = useMemo<ExportOptions>(
+    () => ({
       format,
       themeId,
       transformStyle,
@@ -149,22 +183,29 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
       htmlBundle,
       includeLinkedDocs: showIncludeLinked && includeLinkedDocs,
       entryAsIndex: showEntryAsIndex && entryAsIndex,
-    };
-    saveExportOptions(opts);
-    onExport(opts);
-  }, [
-    format,
-    themeId,
-    transformStyle,
-    pageSize,
-    htmlStyle,
-    htmlBundle,
-    includeLinkedDocs,
-    entryAsIndex,
-    showIncludeLinked,
-    showEntryAsIndex,
-    onExport,
-  ]);
+    }),
+    [
+      format,
+      themeId,
+      transformStyle,
+      pageSize,
+      htmlStyle,
+      htmlBundle,
+      includeLinkedDocs,
+      entryAsIndex,
+      showIncludeLinked,
+      showEntryAsIndex,
+    ],
+  );
+
+  useEffect(() => {
+    onOptionsChange?.(currentOptions);
+  }, [currentOptions, onOptionsChange]);
+
+  const handleExport = useCallback(() => {
+    saveExportOptions(currentOptions);
+    onExport(currentOptions);
+  }, [currentOptions, onExport]);
 
   // Close on Escape
   useEffect(() => {
@@ -209,6 +250,36 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
             />
           </div>
 
+          {destination && (
+            <div className="db-export-field">
+              <label className="db-export-label" htmlFor="db-export-path">
+                Export to
+              </label>
+              <div className="db-export-path-row">
+                <input
+                  id="db-export-path"
+                  className="db-export-path-input"
+                  value={destination.value}
+                  readOnly
+                  disabled={exporting}
+                  spellCheck={false}
+                  autoComplete="off"
+                />
+                <button
+                  type="button"
+                  className="db-export-path-pick"
+                  onClick={() => void destination.onPick(currentOptions)}
+                  disabled={exporting}
+                  aria-label="Choose export location"
+                  title="Choose export location"
+                >
+                  ...
+                </button>
+              </div>
+              {destination.hint && <span className="db-export-hint">{destination.hint}</span>}
+            </div>
+          )}
+
           {/* HTML style + bundle (HTML only) — also chip rows */}
           {showHtmlOptions && (
             <>
@@ -313,11 +384,15 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
                 value={transformStyle}
                 onChange={(e) => setTransformStyle(e.target.value)}
               >
-                {transforms.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                  </option>
-                ))}
+                {transforms.length === 0 ? (
+                  <option value={transformStyle}>Loading...</option>
+                ) : (
+                  transforms.map((t) => (
+                    <option key={t.id} value={t.id}>
+                      {t.name}
+                    </option>
+                  ))
+                )}
               </select>
               <span className="db-export-hint">
                 {transforms.find((t) => t.id === transformStyle)?.description}