@wildwinter/app-shell 0.14.0 → 0.15.0

package/dist/index.d.cts

@@ -269,7 +269,7 @@ interface AnchoredPanelOptions {
      * inspector); `"below"` suits one hung off a button in a document's header
      * (Storyletter's topline). Either way it flips when the room is not there.
      */
-    prefer?: "left" | "below";
+    prefer?: "left" | "below" | "centre";
     /** Selectors for chrome the panel must not cover - a problems bar, a review
      *  bar - so those stay usable while it is open. */
     keepClear?: string[];
@@ -284,7 +284,44 @@ declare function openAnchoredPanel(opts: AnchoredPanelOptions): AnchoredPanel |
  *  an element that no longer exists would hang in the air. */
 declare function closeAnchoredPanel(): void;
 /** Patterpad's placement, with the side as a parameter. */
-declare function placeAnchored(panel: HTMLElement, anchor: HTMLElement, width: number, prefer: "left" | "below", keepClear: string[]): void;
+declare function placeAnchored(panel: HTMLElement, anchor: HTMLElement, width: number, prefer: "left" | "below" | "centre", keepClear: string[]): void;
+
+/**
+ * Slugify a name into hyphen form: lower case, apostrophes dropped, runs of
+ * anything else to a single hyphen, no leading or trailing hyphen.
+ *
+ * May return "", when there was nothing usable in the input. Callers treat that
+ * as "no pinned address" rather than as an address.
+ */
+declare function gameIdify(text: string): string;
+/** Is this a legal address? Lower case, digits and hyphens, starting and ending
+ *  with a letter or a digit. Note "" is NOT legal: an empty pinned address means
+ *  "derive one", which is a different thing from an address. */
+declare function isValidGameId(gameId: string): boolean;
+
+interface GameIdEditorOptions {
+    anchor: HTMLElement;
+    /** The pinned address, or "" when it is being derived. */
+    value: string;
+    /** What it derives to, shown as the placeholder. */
+    derived: string;
+    /** Persist. "" means "stop pinning, go back to deriving". */
+    onCommit: (gameId: string) => void;
+    /** The panel's title. Both apps say "Game ID"; a third may not. */
+    title?: string;
+    /** Override the rules. Defaults are the shell's, which is what a new app
+     *  should use; an app whose domain layer owns them can pass its own. */
+    slugify?: (text: string) => string;
+    validate?: (gameId: string) => boolean;
+    /** Where the panel goes, for hosts that anchor it somewhere tight. */
+    prefer?: "left" | "below" | "centre";
+}
+/**
+ * Open it. Returns false when that click TOGGLED the panel shut, which is the
+ * anchored panel's contract and worth passing on: a caller that repaints on open
+ * needs to know it did not.
+ */
+declare function openGameIdEditor(opts: GameIdEditorOptions): boolean;
 
 /** One shard's state as the renderer sees it. The app's own DTO will be this
  *  shape (it crosses its own bridge); this is what the view needs. */
@@ -365,6 +402,11 @@ interface CommentMessage {
     author: string;
     ts: string;
     body: string;
+    /** A TOMBSTONE: the words are gone, the turn in the conversation is not.
+     *  Deleting a reply out of a thread would renumber the argument around it, so
+     *  what is left says who spoke and when and that they withdrew it. The body is
+     *  emptied on the way out, so "deleted" means deleted from the file too. */
+    deleted?: boolean;
 }
 /** A thread, anchored to the id of whatever it is about. */
 interface Comment {
@@ -385,6 +427,22 @@ interface CommentsOptions {
     newThreadId: () => string;
     post: (threadId: string, body: string) => void;
     setResolved: (threadId: string, resolved: boolean) => void;
+    /**
+     * Withdraw one message. Absent = the host does not offer deletion.
+     *
+     * By INDEX, because a message has no id of its own and giving every message
+     * one would be a format change to every stored thread for the sake of one
+     * verb. The index is read off the list the reader is looking at, and these
+     * files are edited by one person at a time with a VCS underneath.
+     *
+     * The host decides what deleting MEANS: the agreed rule is that the message
+     * becomes a tombstone, and the whole thread goes when nothing readable would
+     * be left (which covers the common case of withdrawing a comment nobody had
+     * replied to).
+     */
+    deleteMessage?: (threadId: string, index: number) => void;
+    /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
+    prefer?: "left" | "below" | "centre";
 }
 declare function openComments(opts: CommentsOptions): void;
 
@@ -503,4 +561,4 @@ interface SaveController {
 }
 declare function createSaveController(opts: SaveControllerOptions): SaveController;
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, 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 SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, hideTip, icon, iconBtn, iconSvg, initTooltips, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openNotesEditor, paintVcBadges, pinButton, placeAnchored, showAbout, 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 SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, 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, showAbout, tagChips, tipAt, tipBold, vcBadgeFor };

package/dist/index.d.ts

@@ -269,7 +269,7 @@ interface AnchoredPanelOptions {
      * inspector); `"below"` suits one hung off a button in a document's header
      * (Storyletter's topline). Either way it flips when the room is not there.
      */
-    prefer?: "left" | "below";
+    prefer?: "left" | "below" | "centre";
     /** Selectors for chrome the panel must not cover - a problems bar, a review
      *  bar - so those stay usable while it is open. */
     keepClear?: string[];
@@ -284,7 +284,44 @@ declare function openAnchoredPanel(opts: AnchoredPanelOptions): AnchoredPanel |
  *  an element that no longer exists would hang in the air. */
 declare function closeAnchoredPanel(): void;
 /** Patterpad's placement, with the side as a parameter. */
-declare function placeAnchored(panel: HTMLElement, anchor: HTMLElement, width: number, prefer: "left" | "below", keepClear: string[]): void;
+declare function placeAnchored(panel: HTMLElement, anchor: HTMLElement, width: number, prefer: "left" | "below" | "centre", keepClear: string[]): void;
+
+/**
+ * Slugify a name into hyphen form: lower case, apostrophes dropped, runs of
+ * anything else to a single hyphen, no leading or trailing hyphen.
+ *
+ * May return "", when there was nothing usable in the input. Callers treat that
+ * as "no pinned address" rather than as an address.
+ */
+declare function gameIdify(text: string): string;
+/** Is this a legal address? Lower case, digits and hyphens, starting and ending
+ *  with a letter or a digit. Note "" is NOT legal: an empty pinned address means
+ *  "derive one", which is a different thing from an address. */
+declare function isValidGameId(gameId: string): boolean;
+
+interface GameIdEditorOptions {
+    anchor: HTMLElement;
+    /** The pinned address, or "" when it is being derived. */
+    value: string;
+    /** What it derives to, shown as the placeholder. */
+    derived: string;
+    /** Persist. "" means "stop pinning, go back to deriving". */
+    onCommit: (gameId: string) => void;
+    /** The panel's title. Both apps say "Game ID"; a third may not. */
+    title?: string;
+    /** Override the rules. Defaults are the shell's, which is what a new app
+     *  should use; an app whose domain layer owns them can pass its own. */
+    slugify?: (text: string) => string;
+    validate?: (gameId: string) => boolean;
+    /** Where the panel goes, for hosts that anchor it somewhere tight. */
+    prefer?: "left" | "below" | "centre";
+}
+/**
+ * Open it. Returns false when that click TOGGLED the panel shut, which is the
+ * anchored panel's contract and worth passing on: a caller that repaints on open
+ * needs to know it did not.
+ */
+declare function openGameIdEditor(opts: GameIdEditorOptions): boolean;
 
 /** One shard's state as the renderer sees it. The app's own DTO will be this
  *  shape (it crosses its own bridge); this is what the view needs. */
@@ -365,6 +402,11 @@ interface CommentMessage {
     author: string;
     ts: string;
     body: string;
+    /** A TOMBSTONE: the words are gone, the turn in the conversation is not.
+     *  Deleting a reply out of a thread would renumber the argument around it, so
+     *  what is left says who spoke and when and that they withdrew it. The body is
+     *  emptied on the way out, so "deleted" means deleted from the file too. */
+    deleted?: boolean;
 }
 /** A thread, anchored to the id of whatever it is about. */
 interface Comment {
@@ -385,6 +427,22 @@ interface CommentsOptions {
     newThreadId: () => string;
     post: (threadId: string, body: string) => void;
     setResolved: (threadId: string, resolved: boolean) => void;
+    /**
+     * Withdraw one message. Absent = the host does not offer deletion.
+     *
+     * By INDEX, because a message has no id of its own and giving every message
+     * one would be a format change to every stored thread for the sake of one
+     * verb. The index is read off the list the reader is looking at, and these
+     * files are edited by one person at a time with a VCS underneath.
+     *
+     * The host decides what deleting MEANS: the agreed rule is that the message
+     * becomes a tombstone, and the whole thread goes when nothing readable would
+     * be left (which covers the common case of withdrawing a comment nobody had
+     * replied to).
+     */
+    deleteMessage?: (threadId: string, index: number) => void;
+    /** Where the panel sits: "centre" for a point on a canvas (see anchored.ts). */
+    prefer?: "left" | "below" | "centre";
 }
 declare function openComments(opts: CommentsOptions): void;
 
@@ -503,4 +561,4 @@ interface SaveController {
 }
 declare function createSaveController(opts: SaveControllerOptions): SaveController;
 
-export { type AboutOptions, type AnchoredPanel, type AnchoredPanelOptions, type Child, type Comment, type CommentMessage, type CommentsOptions, type ConfirmOptions, type DocLine, type DupGuard, type ElProps, 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 SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, type TipRect, type TooltipOptions, type VcMap, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, hideTip, icon, iconBtn, iconSvg, initTooltips, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openNotesEditor, paintVcBadges, pinButton, placeAnchored, showAbout, 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 SaveStatus, type SettingsDialog, type SettingsDialogOptions, type SettingsSection, type SettingsSectionHandle, type ShardVc, 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, showAbout, tagChips, tipAt, tipBold, vcBadgeFor };

package/dist/index.js

@@ -628,9 +628,14 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
   const CAP = window.innerHeight * 0.7;
   const MIN_H = 140;
   panel.style.width = `${width}px`;
-  const leftOf = a.left - width - GAP2;
-  const alignedRight = Math.min(a.right - width, window.innerWidth - width - 8);
-  panel.style.left = `${Math.round(prefer === "left" && leftOf >= 8 ? leftOf : Math.max(8, prefer === "left" ? a.left : alignedRight))}px`;
+  if (prefer === "centre") {
+    const centred = a.left + a.width / 2 - width / 2;
+    panel.style.left = `${Math.round(Math.min(Math.max(8, centred), window.innerWidth - width - 8))}px`;
+  } else {
+    const leftOf = a.left - width - GAP2;
+    const alignedRight = Math.min(a.right - width, window.innerWidth - width - 8);
+    panel.style.left = `${Math.round(prefer === "left" && leftOf >= 8 ? leftOf : Math.max(8, prefer === "left" ? a.left : alignedRight))}px`;
+  }
   let bottomLimit = window.innerHeight - 8;
   for (const selector of keepClear) {
     const bar = document.querySelector(selector);
@@ -638,6 +643,16 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
     const r = bar.getBoundingClientRect();
     if (r.height > 0) bottomLimit = Math.min(bottomLimit, r.top - 6);
   }
+  if (prefer === "centre") {
+    const height = Math.min(CAP, Math.max(MIN_H, panel.offsetHeight));
+    const mid = a.top + a.height / 2 - height / 2;
+    if (mid >= 8 && mid + height <= bottomLimit) {
+      panel.style.top = `${Math.round(mid)}px`;
+      panel.style.bottom = "auto";
+      panel.style.maxHeight = `${Math.round(CAP)}px`;
+      return;
+    }
+  }
   const roomBelow = bottomLimit - (a.bottom + GAP2);
   const roomAbove = a.top - GAP2 - 8;
   if (roomAbove > roomBelow) {
@@ -651,6 +666,75 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
   }
 }
 
+// src/ids.ts
+function gameIdify(text) {
+  return text.toLowerCase().replace(/['’]/g, "").replace(/[^a-z0-9-]+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+function isValidGameId(gameId) {
+  return /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(gameId);
+}
+
+// src/id-editor.ts
+function openGameIdEditor(opts) {
+  const slugify = opts.slugify ?? gameIdify;
+  const valid = opts.validate ?? isValidGameId;
+  const panel = openAnchoredPanel({
+    anchor: opts.anchor,
+    className: "shell-id-editor",
+    title: opts.title ?? "Game ID",
+    width: 260,
+    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {}
+  });
+  if (!panel) return false;
+  const input = el("input", "shell-id-input");
+  input.type = "text";
+  input.value = opts.value;
+  input.placeholder = opts.derived || "<game-id>";
+  input.spellcheck = false;
+  const hint = el("div", "shell-id-hint", "Lower case, digits, hyphens. Empty = auto from the name.");
+  const actions = el("div", "shell-id-actions");
+  const reset = el("button", "shell-id-reset", "Reset to auto");
+  const set = el("button", "shell-id-set", "Set");
+  reset.type = "button";
+  set.type = "button";
+  actions.append(reset, set);
+  panel.body.append(input, hint, actions);
+  const legal = () => {
+    const v = input.value.trim();
+    return v === "" || valid(v);
+  };
+  const sync = () => {
+    set.disabled = !legal();
+    hint.classList.toggle("bad", !legal());
+  };
+  const commit = () => {
+    if (!legal()) return;
+    opts.onCommit(input.value.trim());
+    panel.close();
+  };
+  input.addEventListener("input", sync);
+  input.addEventListener("keydown", (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Tab" && input.value.trim() !== "") {
+      e.preventDefault();
+      input.value = slugify(input.value);
+      sync();
+    }
+  });
+  set.addEventListener("click", commit);
+  reset.addEventListener("click", () => {
+    opts.onCommit("");
+    panel.close();
+  });
+  sync();
+  setTimeout(() => input.focus(), 0);
+  return true;
+}
+
 // src/vc-view.ts
 function foldVc(shards, keys) {
   if (!keys) return void 0;
@@ -884,7 +968,7 @@ var stamp = (ts) => {
   return when.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
 };
 var gist = (thread) => {
-  const first = thread.messages[0]?.body ?? "";
+  const first = thread.messages.find((m) => m.deleted !== true)?.body ?? "";
   return first.length > 60 ? `${first.slice(0, 57)}\u2026` : first;
 };
 function openComments(opts) {
@@ -897,7 +981,7 @@ function openComments(opts) {
     // Below its button (the topline), unlike Patterpad's inspector rows which
     // want it to the left; and never over the problems bar, which an author may
     // be stepping through while reading the thread.
-    prefer: "below",
+    prefer: opts.prefer ?? "below",
     keepClear: [".problembar"]
   });
   if (!panel) return;
@@ -933,19 +1017,26 @@ function openComments(opts) {
     const thread = open;
     if (thread) {
       const list = el("div", { className: `shell-cmt-list${thread.resolved === true ? " resolved" : ""}` });
-      for (const message of thread.messages) {
+      thread.messages.forEach((message, index) => {
+        const head = el(
+          "div",
+          { className: "shell-cmt-msg-head" },
+          el("span", { className: "shell-cmt-author", text: message.author === "" ? "Someone" : message.author }),
+          el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
+        );
+        if (opts.deleteMessage && message.deleted !== true) {
+          const bin = el("button", { className: "shell-cmt-del", text: "\u2715" });
+          bin.title = "Delete this comment";
+          bin.addEventListener("click", () => opts.deleteMessage?.(thread.id, index));
+          head.append(bin);
+        }
         list.append(el(
           "div",
-          { className: "shell-cmt-msg" },
-          el(
-            "div",
-            { className: "shell-cmt-msg-head" },
-            el("span", { className: "shell-cmt-author", text: message.author === "" ? "Someone" : message.author }),
-            el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
-          ),
-          el("div", { className: "shell-cmt-body", text: message.body })
+          { className: `shell-cmt-msg${message.deleted === true ? " gone" : ""}` },
+          head,
+          el("div", { className: "shell-cmt-body", text: message.deleted === true ? "Comment deleted" : message.body })
         ));
-      }
+      });
       body.append(list);
     }
     const input = el("textarea", { className: "shell-cmt-input" });
@@ -1273,6 +1364,6 @@ function createSaveController(opts) {
   };
 }
 
-export { PALETTE, PALETTE_SIZE, askIdentity, closeAnchoredPanel, colourFor, colourIndex, confirmDialog, createSaveController, dupGuard, el, expandableRow, focusNewRow, foldVc, hideTip, icon, iconBtn, iconSvg, initTooltips, labelled, lockControls, lockNotice, mountJobProgress, mountPaneShell, mountSettingsDialog, moveItem, openAnchoredPanel, openComments, openNotesEditor, paintVcBadges, pinButton, placeAnchored, showAbout, tagChips, tipAt, tipBold, vcBadgeFor };
+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, showAbout, tagChips, tipAt, tipBold, vcBadgeFor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map