@beyondwork/docx-react-component 1.0.81 → 1.0.83

package/src/ui-tailwind/chrome/editor-action-registry.ts

@@ -24,6 +24,8 @@ import type { EditorChromeMode } from "../../api/v3/ui/chrome-composition";
 import type { ContextMenuGroupId } from "./tw-context-menu";
 import type { ShortcutKey } from "./tw-shortcut-hint";
 
+type ProductSectionBreakType = "nextPage" | "continuous" | "evenPage" | "oddPage";
+
 /**
  * Target kinds roughly mirror DESIGN-EDITOR.md §4 "Local context" cells.
  * A contextmenu event resolves its target to one (or more) of these
@@ -80,6 +82,11 @@ export interface EditorActionHostCallbacks {
   readonly onToggleItalic?: () => void;
   readonly onToggleUnderline?: () => void;
   readonly onToggleStrikethrough?: () => void;
+  readonly onSetParagraphStyle?: (styleId: string) => void;
+  readonly onSetFontFamily?: (fontFamily: string) => void;
+  readonly onSetFontSize?: (fontSize: number) => void;
+  readonly onSetTextColor?: (color: string) => void;
+  readonly onSetHighlightColor?: (color: string | null) => void;
   readonly onToggleBulletedList?: () => void;
   readonly onToggleNumberedList?: () => void;
   readonly onOutdent?: () => void;
@@ -87,9 +94,18 @@ export interface EditorActionHostCallbacks {
   readonly onSetAlignment?: (
     alignment: "left" | "center" | "right" | "justify",
   ) => void;
+  readonly onInsertPageBreak?: () => void;
+  readonly onInsertSectionBreak?: (type: ProductSectionBreakType) => void;
   readonly onInsertTable?: () => void;
+  readonly onInsertImage?: () => void;
   readonly onAddComment?: () => void;
 
+  // Search / app-level host-delegated commands
+  readonly onFindRequested?: () => void;
+  readonly onReplaceRequested?: () => void;
+  readonly onPrintRequested?: () => void;
+  readonly onGoToRequested?: () => void;
+
   // Tracked-change operations (suggestion target)
   readonly onAcceptSuggestion?: () => void;
   readonly onRejectSuggestion?: () => void;
@@ -134,6 +150,7 @@ export interface EditorActionHostCallbacks {
 export interface EditorAction {
   readonly id: string;
   readonly label: string;
+  readonly description?: string;
   readonly shortcut?: readonly ShortcutKey[];
   readonly group: ContextMenuGroupId;
   /** Targets for which this action is relevant. */
@@ -167,6 +184,7 @@ export interface EditorAction {
 function mk<K extends keyof EditorActionHostCallbacks>(opts: {
   id: string;
   label: string;
+  description?: string;
   shortcut?: readonly ShortcutKey[];
   group: ContextMenuGroupId;
   targetKinds: readonly TargetKind[];
@@ -178,6 +196,7 @@ function mk<K extends keyof EditorActionHostCallbacks>(opts: {
   return {
     id: opts.id,
     label: opts.label,
+    ...(opts.description ? { description: opts.description } : {}),
     ...(opts.shortcut ? { shortcut: opts.shortcut } : {}),
     group: opts.group,
     targetKinds: new Set(opts.targetKinds),
@@ -211,6 +230,7 @@ function mk<K extends keyof EditorActionHostCallbacks>(opts: {
 function mkArg<A, K extends keyof EditorActionHostCallbacks>(opts: {
   id: string;
   label: string;
+  description?: string;
   shortcut?: readonly ShortcutKey[];
   group: ContextMenuGroupId;
   targetKinds: readonly TargetKind[];
@@ -222,6 +242,7 @@ function mkArg<A, K extends keyof EditorActionHostCallbacks>(opts: {
   return {
     id: opts.id,
     label: opts.label,
+    ...(opts.description ? { description: opts.description } : {}),
     ...(opts.shortcut ? { shortcut: opts.shortcut } : {}),
     group: opts.group,
     targetKinds: new Set(opts.targetKinds),
@@ -239,6 +260,41 @@ function mkArg<A, K extends keyof EditorActionHostCallbacks>(opts: {
   };
 }
 
+/**
+ * Build an important command that should remain visible as a disabled
+ * row when the host/runtime has not wired the implementation yet. Use
+ * sparingly for product-signpost commands such as Insert Image or
+ * Replace; most callback-less registry rows should stay hidden.
+ */
+function mkImportant<K extends keyof EditorActionHostCallbacks>(opts: {
+  id: string;
+  label: string;
+  description: string;
+  shortcut?: readonly ShortcutKey[];
+  group: ContextMenuGroupId;
+  targetKinds: readonly TargetKind[];
+  modes?: readonly EditorChromeMode[];
+  callback: K;
+}): EditorAction {
+  return {
+    id: opts.id,
+    label: opts.label,
+    description: opts.description,
+    ...(opts.shortcut ? { shortcut: opts.shortcut } : {}),
+    group: opts.group,
+    targetKinds: new Set(opts.targetKinds),
+    ...(opts.modes ? { modes: new Set(opts.modes) } : {}),
+    when: (ctx) =>
+      typeof ctx.host[opts.callback] === "function" ? true : "disabled",
+    run: (ctx) => {
+      const fn = ctx.host[opts.callback] as (() => void) | undefined;
+      if (!fn) return;
+      fn();
+      ctx.dismiss();
+    },
+  };
+}
+
 export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
   // -------- History --------
   mk({
@@ -341,6 +397,105 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     targetKinds: ["plain-text", "table-cell"],
     callback: "onToggleStrikethrough",
   }),
+  mkArg<string, "onSetParagraphStyle">({
+    id: "style-normal",
+    label: "Normal text",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetParagraphStyle",
+    payload: "Normal",
+  }),
+  mkArg<string, "onSetParagraphStyle">({
+    id: "style-heading-1",
+    label: "Heading 1",
+    shortcut: ["Mod", "Alt", "1"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetParagraphStyle",
+    payload: "Heading1",
+  }),
+  mkArg<string, "onSetParagraphStyle">({
+    id: "style-heading-2",
+    label: "Heading 2",
+    shortcut: ["Mod", "Alt", "2"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetParagraphStyle",
+    payload: "Heading2",
+  }),
+  mkArg<string, "onSetParagraphStyle">({
+    id: "style-heading-3",
+    label: "Heading 3",
+    shortcut: ["Mod", "Alt", "3"],
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetParagraphStyle",
+    payload: "Heading3",
+  }),
+  mkArg<string, "onSetFontFamily">({
+    id: "font-family-aptos",
+    label: "Font: Aptos",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetFontFamily",
+    payload: "Aptos",
+  }),
+  mkArg<string, "onSetFontFamily">({
+    id: "font-family-calibri",
+    label: "Font: Calibri",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetFontFamily",
+    payload: "Calibri",
+  }),
+  mkArg<number, "onSetFontSize">({
+    id: "font-size-11",
+    label: "Font size: 11",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetFontSize",
+    payload: 11,
+  }),
+  mkArg<number, "onSetFontSize">({
+    id: "font-size-12",
+    label: "Font size: 12",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetFontSize",
+    payload: 12,
+  }),
+  mkArg<string, "onSetTextColor">({
+    id: "text-color-black",
+    label: "Text color: Black",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetTextColor",
+    payload: "#000000",
+  }),
+  mkArg<string, "onSetTextColor">({
+    id: "text-color-accent",
+    label: "Text color: Accent",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetTextColor",
+    payload: "#1F6B4F",
+  }),
+  mkArg<string | null, "onSetHighlightColor">({
+    id: "highlight-yellow",
+    label: "Highlight: Yellow",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetHighlightColor",
+    payload: "#FFF2A8",
+  }),
+  mkArg<string | null, "onSetHighlightColor">({
+    id: "highlight-clear",
+    label: "Clear highlight",
+    group: "formatting",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onSetHighlightColor",
+    payload: null,
+  }),
   mk({
     id: "list-bulleted",
     label: "Bulleted list",
@@ -401,6 +556,31 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     callback: "onSetAlignment",
     payload: "justify",
   }),
+  mk({
+    id: "insert-page-break",
+    label: "Insert page break",
+    shortcut: ["Mod", "Enter"],
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onInsertPageBreak",
+  }),
+  mkArg<ProductSectionBreakType, "onInsertSectionBreak">({
+    id: "insert-section-break-next-page",
+    label: "Insert section break",
+    description: "Next page section break",
+    group: "misc",
+    targetKinds: ["plain-text", "table-cell"],
+    callback: "onInsertSectionBreak",
+    payload: "nextPage",
+  }),
+  mkImportant({
+    id: "insert-image",
+    label: "Insert image…",
+    description: "Needs a host file picker before it can run.",
+    group: "misc",
+    targetKinds: [],
+    callback: "onInsertImage",
+  }),
   mk({
     id: "insert-table",
     label: "Insert table",
@@ -416,6 +596,46 @@ export const EDITOR_ACTION_REGISTRY: readonly EditorAction[] = [
     callback: "onAddComment",
   }),
 
+  // -------- Search / navigation / app-level commands --------
+  // Empty targetKinds keeps these out of right-click local menus. The
+  // global command palette still projects them from the shared registry.
+  mkImportant({
+    id: "find",
+    label: "Find…",
+    description: "Host search panel is not wired.",
+    shortcut: ["Mod", "F"],
+    group: "misc",
+    targetKinds: [],
+    callback: "onFindRequested",
+  }),
+  mkImportant({
+    id: "replace",
+    label: "Replace…",
+    description: "Host replace panel is not wired.",
+    shortcut: ["Ctrl", "H"],
+    group: "misc",
+    targetKinds: [],
+    callback: "onReplaceRequested",
+  }),
+  mkImportant({
+    id: "go-to",
+    label: "Go to…",
+    description: "Host navigation panel is not wired.",
+    shortcut: ["Ctrl", "G"],
+    group: "misc",
+    targetKinds: [],
+    callback: "onGoToRequested",
+  }),
+  mkImportant({
+    id: "print",
+    label: "Print…",
+    description: "Host print/export flow is not wired.",
+    shortcut: ["Mod", "P"],
+    group: "misc",
+    targetKinds: [],
+    callback: "onPrintRequested",
+  }),
+
   // -------- Suggestion / tracked change --------
   mk({
     id: "accept-suggestion",

package/src/ui-tailwind/chrome/editor-actions-to-palette.ts

@@ -12,9 +12,10 @@
  *
  * Progressive-disclosure discipline (designsystem.md §2.1 principle 4):
  *   - Actions without a wired callback are hidden, not rendered
- *     disabled.  The palette is the escape valve for low-frequency
- *     actions; an empty surface is better than a wall of disabled
- *     rows.
+ *     disabled unless the registry marks them as important signposts
+ *     by returning `"disabled"` from `when()`. Those rows stay visible
+ *     with an explanation so users can see that the product recognizes
+ *     the workflow even when the host has not wired it yet.
  *   - Mode-filtered actions (e.g. `scope-open-card` is
  *     workflow/review-only) only appear when the composition mode
  *     allows them.
@@ -33,7 +34,6 @@ import type {
   CommandPaletteGroup,
   CommandPaletteItem,
 } from "./tw-command-palette";
-import type { ContextMenuGroupId } from "./tw-context-menu";
 import type { ShortcutKey } from "./tw-shortcut-hint";
 
 /**
@@ -90,43 +90,63 @@ export function formatShortcutForPalette(
 }
 
 /**
- * Human-friendly group labels.  Kept here because the palette renders
- * section headings and the registry's group ids are terse internal
- * identifiers.
+ * Product-facing command palette buckets. These are intentionally not
+ * the context-menu `ContextMenuGroupId`s: right-click menus group by
+ * local action family, while the palette groups by user intent.
  */
-const GROUP_LABELS: Record<ContextMenuGroupId, string> = {
-  clipboard: "Clipboard",
-  suggestion: "Review",
-  comment: "Comments",
-  table: "Table",
-  formatting: "Formatting",
-  misc: "More",
+type ProductPaletteGroupId =
+  | "commands"
+  | "search"
+  | "navigation"
+  | "mode"
+  | "diagnostics";
+
+const GROUP_LABELS: Record<ProductPaletteGroupId, string> = {
+  commands: "Commands",
+  search: "Search",
+  navigation: "Navigation",
+  mode: "Mode",
+  diagnostics: "Diagnostics",
 };
 
 /**
- * Stable group order — matches the progressive-disclosure priority in
- * designsystem.md §2.1 (clipboard first because it's always available,
- * review + comment next because they're the primary legal-review
- * actions, table + formatting after, misc last).
+ * Stable product group order per editor-product Slice 3.
  */
-const GROUP_ORDER: readonly ContextMenuGroupId[] = [
-  "clipboard",
-  "suggestion",
-  "comment",
-  "table",
-  "formatting",
-  "misc",
+const GROUP_ORDER: readonly ProductPaletteGroupId[] = [
+  "commands",
+  "search",
+  "navigation",
+  "mode",
+  "diagnostics",
 ];
 
-function isActionAvailable(
+function actionAvailability(
   action: EditorAction,
   ctx: EditorActionDispatchContext,
-): boolean {
+): false | "enabled" | "disabled" {
   const verdict = action.when ? action.when(ctx) : true;
-  // "disabled" actions are hidden from the palette.  The palette is a
-  // search-first surface; surfacing disabled rows dilutes the query
-  // space and clutters the empty state.
-  return verdict === true;
+  if (verdict === false) return false;
+  return verdict === "disabled" ? "disabled" : "enabled";
+}
+
+function paletteGroupForAction(action: EditorAction): ProductPaletteGroupId {
+  switch (action.id) {
+    case "find":
+    case "replace":
+      return "search";
+    case "go-to":
+    case "jump-to-comment-in-rail":
+    case "scope-jump-in-rail":
+    case "scope-open-card":
+      return "navigation";
+    case "scope-mark-resolved":
+      return "mode";
+    case "object-info":
+    case "print":
+      return "diagnostics";
+    default:
+      return "commands";
+  }
 }
 
 export interface BuildPaletteGroupsInput {
@@ -145,15 +165,18 @@ export function buildPaletteGroupsFromRegistry(
     dismiss: input.dismiss,
   };
 
-  const byGroup = new Map<ContextMenuGroupId, CommandPaletteItem[]>();
+  const byGroup = new Map<ProductPaletteGroupId, CommandPaletteItem[]>();
 
   for (const action of EDITOR_ACTION_REGISTRY) {
     if (action.modes && !action.modes.has(input.mode)) continue;
-    if (!isActionAvailable(action, ctx)) continue;
+    const availability = actionAvailability(action, ctx);
+    if (availability === false) continue;
 
     const item: CommandPaletteItem = {
       id: action.id,
       label: action.label,
+      ...(action.description ? { description: action.description } : {}),
+      ...(availability === "disabled" ? { disabled: true } : {}),
       // Chrome Closure Pass · Task 4 (designsystem.md §6.25) —
       // preserve the registry shortcut so the palette row shows
       // the same hint as the matching context-menu / tooltip.
@@ -163,9 +186,10 @@ export function buildPaletteGroupsFromRegistry(
       onInvoke: () => action.run(ctx),
     };
 
-    const bucket = byGroup.get(action.group) ?? [];
+    const groupId = paletteGroupForAction(action);
+    const bucket = byGroup.get(groupId) ?? [];
     bucket.push(item);
-    byGroup.set(action.group, bucket);
+    byGroup.set(groupId, bucket);
   }
 
   const groups: CommandPaletteGroup[] = [];

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -251,6 +251,7 @@ export const TwChromeOverlay: React.FC<TwChromeOverlayProps> = ({
       {pageStackScrollRoot !== undefined ? (
         <TwPageStackChromeLayer
           facet={facet}
+          geometryFacet={geometryFacet}
           scrollRoot={pageStackScrollRoot}
           renderFrameRevision={renderFrameRevision ?? 0}
           activeStory={activeStory ?? { kind: "main" }}