@wildwinter/app-shell 0.18.0 → 0.20.0

package/dist/index.d.cts

@@ -237,6 +237,16 @@ interface ConfirmOptions {
 /** Resolves true on confirm; false on Cancel / Esc / backdrop. */
 declare function confirmDialog(opts: ConfirmOptions): Promise<boolean>;
 
+/**
+ * Play the close animation on `element`, then run `done` exactly once.
+ *
+ * `done` does the real teardown: remove the node, drop listeners, unmount
+ * whatever was inside it. Under `prefers-reduced-motion` the duration reads 0
+ * and `done` runs synchronously, so reduced motion means instant rather than
+ * an invisible wait.
+ */
+declare function closeWithExit(element: HTMLElement, done: () => void): void;
+
 interface AboutOptions {
     /** The product's name, large. */
     appName: string;
@@ -324,6 +334,11 @@ interface GameIdEditorOptions {
     validate?: (gameId: string) => boolean;
     /** Where the panel goes, for hosts that anchor it somewhere tight. */
     prefer?: "left" | "below" | "centre";
+    /** Chrome the panel must not cover, passed through to the anchored panel: an
+     *  app with a problems bar along the bottom wants it usable while an address
+     *  is being edited. Without this the editor is the one panel in a host that
+     *  can land on top of its own bars. */
+    keepClear?: string[];
 }
 /**
  * Open it. Returns false when that click TOGGLED the panel shut, which is the
@@ -452,6 +467,25 @@ interface CommentsOptions {
     deleteMessage?: (threadId: string, index: number) => void;
     /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
     prefer?: "left" | "below" | "centre";
+    /**
+     * Chrome the panel must not cover. Defaults to `[".problembar"]`, which was
+     * hardcoded here and should not have been: one app's class name in shared
+     * code, and it misses any OTHER bar a host has. A second app arrived with two.
+     */
+    keepClear?: string[];
+    /**
+     * The text a thread is pinned to, shown above it as a quotation.
+     *
+     * A callback rather than a field on `Comment`, because resolving an anchor is
+     * the APP's half of the seam and this is only that resolution rendered: an app
+     * that pins threads to a span of prose can quote it, one that pins them to a
+     * whole card has nothing to quote and passes nothing. Keeping it out of the
+     * thread type also means no change to what is written to disk, which matters
+     * for files living in version control.
+     *
+     * Return undefined (or "") for a thread with no quotable anchor.
+     */
+    quoteFor?: (thread: Comment) => string | undefined;
 }
 declare function openComments(opts: CommentsOptions): void;
 
@@ -647,4 +681,4 @@ interface StepperBarOptions {
 /** Draw (or hide) the bar in `host`. Idempotent: call it again with new state. */
 declare function renderStepperBar(host: HTMLElement, opts: StepperBarOptions): void;
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, type GameIdEditorOptions, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobProgressOptions, type JobProgressView, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButtonOptions, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };
+export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, type GameIdEditorOptions, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobProgressOptions, type JobProgressView, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButtonOptions, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };

package/dist/index.d.ts

@@ -237,6 +237,16 @@ interface ConfirmOptions {
 /** Resolves true on confirm; false on Cancel / Esc / backdrop. */
 declare function confirmDialog(opts: ConfirmOptions): Promise<boolean>;
 
+/**
+ * Play the close animation on `element`, then run `done` exactly once.
+ *
+ * `done` does the real teardown: remove the node, drop listeners, unmount
+ * whatever was inside it. Under `prefers-reduced-motion` the duration reads 0
+ * and `done` runs synchronously, so reduced motion means instant rather than
+ * an invisible wait.
+ */
+declare function closeWithExit(element: HTMLElement, done: () => void): void;
+
 interface AboutOptions {
     /** The product's name, large. */
     appName: string;
@@ -324,6 +334,11 @@ interface GameIdEditorOptions {
     validate?: (gameId: string) => boolean;
     /** Where the panel goes, for hosts that anchor it somewhere tight. */
     prefer?: "left" | "below" | "centre";
+    /** Chrome the panel must not cover, passed through to the anchored panel: an
+     *  app with a problems bar along the bottom wants it usable while an address
+     *  is being edited. Without this the editor is the one panel in a host that
+     *  can land on top of its own bars. */
+    keepClear?: string[];
 }
 /**
  * Open it. Returns false when that click TOGGLED the panel shut, which is the
@@ -452,6 +467,25 @@ interface CommentsOptions {
     deleteMessage?: (threadId: string, index: number) => void;
     /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
     prefer?: "left" | "below" | "centre";
+    /**
+     * Chrome the panel must not cover. Defaults to `[".problembar"]`, which was
+     * hardcoded here and should not have been: one app's class name in shared
+     * code, and it misses any OTHER bar a host has. A second app arrived with two.
+     */
+    keepClear?: string[];
+    /**
+     * The text a thread is pinned to, shown above it as a quotation.
+     *
+     * A callback rather than a field on `Comment`, because resolving an anchor is
+     * the APP's half of the seam and this is only that resolution rendered: an app
+     * that pins threads to a span of prose can quote it, one that pins them to a
+     * whole card has nothing to quote and passes nothing. Keeping it out of the
+     * thread type also means no change to what is written to disk, which matters
+     * for files living in version control.
+     *
+     * Return undefined (or "") for a thread with no quotable anchor.
+     */
+    quoteFor?: (thread: Comment) => string | undefined;
 }
 declare function openComments(opts: CommentsOptions): void;
 
@@ -647,4 +681,4 @@ interface StepperBarOptions {
 /** Draw (or hide) the bar in `host`. Idempotent: call it again with new state. */
 declare function renderStepperBar(host: HTMLElement, opts: StepperBarOptions): void;
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, type GameIdEditorOptions, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobProgressOptions, type JobProgressView, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButtonOptions, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };
+export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, type GameIdEditorOptions, type IconName, type IconSvgName, type Identity, type IdentityOptions, type JobProgressOptions, type JobProgressView, type Notes, type NotesEditorOptions, PALETTE, PALETTE_SIZE, type PaneShell, type PaneShellOptions, type PaneShellState, type PaneSide, type PaneSideConfig, type PinButtonOptions, type SaveController, type SaveControllerOptions, type SaveIndicator, type SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type StaleBarOptions, type StepperBarOptions, type StepperItem, type StepperTone, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };

package/dist/index.js

@@ -476,6 +476,29 @@ function pinButton(opts) {
   return b;
 }
 
+// src/exit.ts
+function closeWithExit(element, done) {
+  element.classList.add("closing");
+  const seconds = parseFloat(getComputedStyle(element).animationDuration) || 0;
+  if (seconds === 0) {
+    done();
+    return;
+  }
+  let fired = false;
+  const finish = () => {
+    if (fired) return;
+    fired = true;
+    element.removeEventListener("animationend", onEnd);
+    clearTimeout(timer2);
+    done();
+  };
+  const onEnd = (e) => {
+    if (e.target === element) finish();
+  };
+  element.addEventListener("animationend", onEnd);
+  const timer2 = setTimeout(finish, seconds * 1e3 + 120);
+}
+
 // src/confirm.ts
 function confirmDialog(opts) {
   return new Promise((resolve) => {
@@ -497,21 +520,9 @@ function confirmDialog(opts) {
       if (done) return;
       done = true;
       resolve(ok);
-      dlg.classList.add("closing");
-      const dur = parseFloat(getComputedStyle(dlg).animationDuration) || 0;
-      const teardown = () => {
+      closeWithExit(dlg, () => {
         dlg.close();
         dlg.remove();
-      };
-      if (dur === 0) {
-        teardown();
-        return;
-      }
-      const timer2 = setTimeout(teardown, dur * 1e3 + 120);
-      dlg.addEventListener("animationend", (e) => {
-        if (e.target !== dlg) return;
-        clearTimeout(timer2);
-        teardown();
       });
     };
     cancel.addEventListener("click", () => finish(false));
@@ -604,8 +615,10 @@ function openAnchoredPanel(opts) {
     if (current?.panel === panel) current = null;
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
-    panel.remove();
-    opts.onClose?.();
+    closeWithExit(panel, () => {
+      opts.onClose?.();
+      panel.remove();
+    });
   };
   closeBtn.addEventListener("click", close);
   const onDown = (e) => {
@@ -692,7 +705,8 @@ function openGameIdEditor(opts) {
     className: "shell-id-editor",
     title: opts.title ?? "Game ID",
     width: 260,
-    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {}
+    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {},
+    ...opts.keepClear !== void 0 ? { keepClear: opts.keepClear } : {}
   });
   if (!panel) return false;
   const input = el("input", "shell-id-input");
@@ -991,7 +1005,7 @@ function openComments(opts) {
     // want it to the left; and never over the problems bar, which an author may
     // be stepping through while reading the thread.
     prefer: opts.prefer ?? "below",
-    keepClear: [".problembar"]
+    keepClear: opts.keepClear ?? [".problembar"]
   });
   if (!panel) return;
   const { body, close } = panel;
@@ -1025,6 +1039,10 @@ function openComments(opts) {
     }
     const thread = open;
     if (thread) {
+      const quote = opts.quoteFor?.(thread);
+      if (quote !== void 0 && quote !== "") {
+        body.append(el("blockquote", { className: "shell-cmt-quote", text: quote }));
+      }
       const list = el("div", { className: `shell-cmt-list${thread.resolved === true ? " resolved" : ""}` });
       thread.messages.forEach((message, index) => {
         const head = el(
@@ -1466,6 +1484,6 @@ function renderStepperBar(host, opts) {
   );
 }
 
-export { PALETTE, PALETTE_SIZE, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };
+export { PALETTE, PALETTE_SIZE, askIdentity, closeAnchoredPanel, closeWithExit, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, gameIdify, hideTip, icon, iconBtn, iconSvg, initTooltips, isValidGameId, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openGameIdEditor, openNotesEditor, paintVcBadges, pinButton, placeAnchored, renderStepperBar, saveIndicator, showAbout, staleBar, tagChips, tipAt, tipBold, vcBadgeFor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map