@arbidocs/blocks 0.4.99 → 0.4.101

package/dist/docx/layout/LayoutRibbon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The native editor's Layout tab, laid out like Word's Page Setup group: Margins, Orientation,
+ * Size, Columns, Breaks, and the Page Setup dialog for anything the galleries do not offer.
+ *
+ * Everything goes through the engine's own commands: `setPageSetup` (scoped to the caret's section,
+ * as Word's galleries are) for the galleries, the engine's break slots for Breaks, and its packaged
+ * Page Setup dialog. Columns are offered but disabled: the engine lays out a document's existing
+ * `w:cols`, but has no command that writes them (see the README).
+ */
+import React from 'react';
+/** Why Columns is disabled, in the words the tooltip shows. */
+export declare const COLUMNS_UNSUPPORTED = "Text columns are not available in this editor yet. Documents that already use columns display and save them unchanged.";
+interface Choice {
+    id: string;
+    label: string;
+    detail?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    title?: string;
+}
+/** A ribbon gallery: one column of choices, the current one marked, closing once one is picked. */
+export declare function RibbonGallery({ label, choices, current, onPick, close, testId, }: {
+    label: string;
+    choices: readonly Choice[];
+    current?: string | null;
+    onPick: (id: string) => void;
+    close: () => void;
+    testId?: string;
+}): React.JSX.Element;
+/** Layout tab: Margins, Orientation, Size, Columns, Breaks, Page Setup. */
+export declare function LayoutButtons(): React.JSX.Element;
+export {};

package/dist/docx/layout/LayoutTabs.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The ribbon tabs this folder adds: Layout always, and Word's contextual Table and Picture tabs
+ * while the caret is in a table or a picture is selected.
+ */
+import React from 'react';
+export declare const LAYOUT_TAB = "Layout";
+export declare const TABLE_TAB = "Table";
+export declare const PICTURE_TAB = "Picture";
+/**
+ * The contextual tabs available now, and the tab to show: a contextual tab that no longer applies
+ * (the caret left the table, the picture was deselected) falls back to Home, as Word's does.
+ */
+export declare function useContextualTabs(tab: string): {
+    tabs: string[];
+    shown: string;
+};
+/** The body of the Layout, Table or Picture tab; nothing for the other tabs. */
+export declare function LayoutTabContent({ tab }: {
+    tab: string;
+}): React.JSX.Element | null;

package/dist/docx/layout/PictureRibbon.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The native editor's contextual Picture tab — Word's Picture Format tab — offered while a picture
+ * is selected: Wrap Text, Size & Position, Alt Text (the engine's packaged picture chrome), rotate
+ * and flip, and Insert Caption.
+ */
+import React from 'react';
+import { useDocxEditor } from '@docx-editor.dev/react';
+import { useTrackedOrNoted } from '../structural/useTrackedOrNoted';
+import { type CaptionLabel } from './caption';
+type Editor = NonNullable<ReturnType<typeof useDocxEditor>>;
+/**
+ * Insert a caption paragraph directly after the caret's paragraph (the picture's), numbered after
+ * the captions with the same label that come before it. Returns the inserted number, or null when
+ * the editor refused.
+ */
+export declare function insertCaption(editor: Editor, label: CaptionLabel, text: string, track: ReturnType<typeof useTrackedOrNoted>): number | null;
+/** Word's Insert Caption: a label, the caption text, and Insert. */
+export declare function CaptionButton({ defaultLabel }: {
+    defaultLabel?: CaptionLabel;
+}): React.JSX.Element;
+/** Picture tab: Wrap Text, Size & Position, Alt Text, rotate and flip, Insert Caption. */
+export declare function PictureButtons(): React.JSX.Element;
+export {};

package/dist/docx/layout/TableKeys.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Word's Tab and Shift+Tab in a table: move to the next or previous cell, and Tab in the last cell
+ * adds a row. The engine types a tab character into the cell instead, so the keys are bound here,
+ * ahead of the editor's own handling, the way `WordShortcuts` binds note and style keys.
+ */
+import { type RefObject } from 'react';
+type Node = {
+    id?: string;
+    kind?: string;
+    localName?: string;
+    children?: readonly Node[];
+};
+/**
+ * The cells of the innermost table holding `paragraphId`, in reading order (each as its first
+ * paragraph), and which of them holds it. Null outside a table.
+ */
+export declare function tableCells(root: Node, paragraphId: string): {
+    cells: string[];
+    index: number;
+} | null;
+/** Binds Tab and Shift+Tab in tables inside `scope`. Renders nothing; mount inside `DocxEditor.Root`. */
+export declare function TableTabKeys({ scope }: {
+    scope: RefObject<HTMLElement | null>;
+}): null;
+export {};

package/dist/docx/layout/TableRibbon.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The native editor's contextual Table tab — Word's Table Design and Table Layout tabs in one row,
+ * offered while the caret is in a table.
+ *
+ * Rows, columns, deletion and cell alignment are the engine's table commands; borders and shading
+ * are its packaged table chrome. Merge, Split and Header Row are bound to the engine's commands
+ * too, so they show the engine's own reason while it refuses them and work as soon as it does not.
+ */
+import React from 'react';
+/** Table tab: insert and delete rows and columns, merge, split, header row, borders and shading. */
+export declare function TableButtons(): React.JSX.Element;

package/dist/docx/layout/caption.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Word's Insert Caption: a paragraph in the `Caption` style reading `Figure 1: text`, whose
+ * number is a `SEQ Figure` field so Word renumbers every caption when fields update.
+ *
+ * The engine has no caption command, but its paste lands an embedded `.docx` fragment intact —
+ * the `w:fldSimple` and the paragraph style, whose definition is merged into the document when
+ * the document has none. The number written as the field's result is the next one in reading
+ * order at insertion; the engine paints a SEQ field's stored result rather than recomputing it.
+ */
+import { type Revision } from '@arbidocs/coedit/template';
+export declare const CAPTION_LABELS: readonly ["Figure", "Table", "Equation"];
+export type CaptionLabel = (typeof CAPTION_LABELS)[number];
+type Node = {
+    id?: string;
+    localName?: string;
+    kind?: string;
+    value?: string;
+    attributes?: readonly {
+        localName: string;
+        value: string;
+    }[];
+    children?: readonly Node[];
+};
+/** The `SEQ` identifier of a field instruction (`SEQ Figure \* ARABIC` -> `Figure`). */
+export declare function seqIdentifier(instruction: string): string | null;
+/**
+ * How many `SEQ <label>` fields the tree holds — simple fields and complex `w:instrText` ones — in
+ * reading order up to and including the paragraph `throughId` (all of them when absent).
+ */
+export declare function countSeqFields(root: Node, label: string, throughId?: string): number;
+/** The caption paragraph: `Label N` with N a SEQ field, then `: text` when there is text. */
+export declare function captionParagraphXml(label: string, number: number, text: string): string;
+/**
+ * Clipboard HTML that pastes the caption as a whole paragraph (the editor's own fragment form),
+ * marked as a tracked insertion by `revision` when one is given.
+ */
+export declare function captionFragmentHtml(label: string, number: number, text: string, revision?: Revision | null): string;
+export {};

package/dist/docx/layout/presets.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Word's Layout presets — Margins, Size and Orientation — as page-setup updates in twips, the
+ * unit `w:pgSz`/`w:pgMar` and the engine's `setPageSetup` use. Pure, so the ribbon's choices and
+ * the preset a section already matches are tested without an editor.
+ */
+import type { PageSetup } from '@docx-editor.dev/react';
+export declare const TWIPS_PER_INCH = 1440;
+export interface MarginPreset {
+    id: string;
+    label: string;
+    /** Twips. */
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Word's Margins gallery (Mirrored is a binding option the engine does not write). */
+export declare const MARGIN_PRESETS: readonly MarginPreset[];
+export interface PaperSize {
+    id: string;
+    label: string;
+    /** Portrait width and height, in twips. */
+    width: number;
+    height: number;
+}
+/** Word's Size gallery: the paper sizes people actually pick. */
+export declare const PAPER_SIZES: readonly PaperSize[];
+/** The margin preset the section matches, if any (the gallery marks it as current). */
+export declare function matchMargins(setup: PageSetup | null): string | null;
+/** The paper size the section matches in either orientation, if any. */
+export declare function matchPaper(setup: PageSetup | null): string | null;
+/** A paper size's dimensions laid the way the section is turned, so picking a size keeps it. */
+export declare function orientedSize(paper: PaperSize, orientation: PageSetup['orientation'] | undefined): {
+    pageWidthTwips: number;
+    pageHeightTwips: number;
+};
+/** `1440` -> `1"`, `1080` -> `0.75"`: how the gallery describes a margin. */
+export declare function inches(twips: number): string;
+/** `Letter` -> `8.5" × 11"`. */
+export declare function paperDescription(paper: PaperSize): string;

package/dist/index.cjs

@@ -2,8 +2,8 @@
 'use strict';
 
 var chunkQI6AIHWP_cjs = require('./chunk-QI6AIHWP.cjs');
-var chunkHBF4BDRU_cjs = require('./chunk-HBF4BDRU.cjs');
 var chunk46IU3UPF_cjs = require('./chunk-46IU3UPF.cjs');
+var chunkHBF4BDRU_cjs = require('./chunk-HBF4BDRU.cjs');
 var chunk65THHQVB_cjs = require('./chunk-65THHQVB.cjs');
 var chunk7QDX2CO4_cjs = require('./chunk-7QDX2CO4.cjs');
 var chunkMJCCBMM5_cjs = require('./chunk-MJCCBMM5.cjs');
@@ -966,6 +966,10 @@ Object.defineProperty(exports, "stripMarkdownLinks", {
   enumerable: true,
   get: function () { return chunkQI6AIHWP_cjs.stripMarkdownLinks; }
 });
+Object.defineProperty(exports, "UsageMeter", {
+  enumerable: true,
+  get: function () { return chunk46IU3UPF_cjs.UsageMeter; }
+});
 Object.defineProperty(exports, "ActionCluster", {
   enumerable: true,
   get: function () { return chunkHBF4BDRU_cjs.ActionCluster; }
@@ -1142,10 +1146,6 @@ Object.defineProperty(exports, "workspaceKindMeta", {
   enumerable: true,
   get: function () { return chunkHBF4BDRU_cjs.workspaceKindMeta; }
 });
-Object.defineProperty(exports, "UsageMeter", {
-  enumerable: true,
-  get: function () { return chunk46IU3UPF_cjs.UsageMeter; }
-});
 Object.defineProperty(exports, "ArticleList", {
   enumerable: true,
   get: function () { return chunk65THHQVB_cjs.ArticleList; }

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 export { ApplyLabelButton, ApplyLabelDialog, DEFAULT_APPLY_LABEL_DIALOG_LABELS, DEFAULT_RELEVANCE_STEPS, DEFAULT_SEARCH_BAR_LABELS, DEFAULT_SEARCH_EMPTY_STATE_LABELS, DEFAULT_SEARCH_GROUP_HEADER_LABELS, DEFAULT_SEARCH_NO_RESULTS_LABELS, DEFAULT_SEARCH_PAGINATION_LABELS, DEFAULT_SEARCH_TOTALS_LABELS, DOCUMENT_SEARCH_NOUNS, Highlight, RelevanceThreshold, SearchBar, SearchControlsBar, SearchEmptyState, SearchErrorBanner, SearchGroupCard, SearchGroupHeader, SearchNoResults, SearchPageBody, SearchPageFrame, SearchPageHeader, SearchPagination, SearchPillToggle, SearchResultList, SearchResultsInner, SearchResultsMain, SearchToolbarRow, SearchTotalsHeadline, getPageNumbers, highlightTerms, searchNouns, splitByTerms, stripMarkdownLinks } from './chunk-2MJWWPHY.js';
-export { ActionCluster, AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_INSTALL_PROMPT_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_SIDEBAR_LABELS, DEFAULT_TIP_CARD_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, NotificationBell, OfflinePill, RemoteControlPill, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SplitLayout, StatusBadge, StatusRow, TipCard, UserMenu, WorkspaceIdentity, WorkspaceSwitcher, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useInstallPrompt, useSidebarContext, useSidebarSettle, workspaceKindColor, workspaceKindMeta } from './chunk-VLOPZHFH.js';
 export { UsageMeter } from './chunk-D5T53XCL.js';
+export { ActionCluster, AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_INSTALL_PROMPT_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_SIDEBAR_LABELS, DEFAULT_TIP_CARD_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, NotificationBell, OfflinePill, RemoteControlPill, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SplitLayout, StatusBadge, StatusRow, TipCard, UserMenu, WorkspaceIdentity, WorkspaceSwitcher, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useInstallPrompt, useSidebarContext, useSidebarSettle, workspaceKindColor, workspaceKindMeta } from './chunk-VLOPZHFH.js';
 export { ArticleList, Chart, CheckList, CollectionDetail, CtaBand, DefinitionList, EditorialHeading, EditorialHero, EditorialProse, EditorialSection, Eyebrow, PanelGrid, ProofStrip, PullQuote, Reveal, TagList } from './chunk-LYUO3E6V.js';
 export { DataTable, DataTableBlock, MetricCard, PageHeader, StatGroup } from './chunk-ZCF2JJFA.js';
 export { Accordion, AvatarBlock, Banner, BlockImage, BlockLink, CTABanner, Columns, ContactForm, Container, FAQ, FONT_PAIRINGS, FeatureGrid, Footer, Gallery, Hero, ListBlock, LogoCloud, MediaText, Navbar, PricingTable, ProfileCard, RichTextBlock, SectionHeading, Spacer, Steps, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, VideoEmbed, applyFontVars, applyStoredTheme, applyThemeVars, clearFontVars, clearThemeVars, createThemeStore, fontPackages, getFontPairing, matchFontPairing, tid, toEmbedUrl, toHslTriplet } from './chunk-DLBUFHLY.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbidocs/blocks",
-  "version": "0.4.99",
+  "version": "0.4.101",
   "description": "Composable, domain-neutral UI blocks for ARBI apps, organised by capability (retrieval, facts, agents, workspaces, citations, collaboration) plus shell, theme and site primitives, on top of @arbidocs/react.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -252,6 +252,7 @@
     "src/components/grid.css",
     "src/source.css",
     "src/docx/styles.css",
+    "src/docx/layout/layout.css",
     "src/docx/README.md",
     "src/calendar/calendar.css"
   ],
@@ -266,8 +267,8 @@
     "example:test:e2e": "playwright test -c examples/custom-ui/playwright.config.ts"
   },
   "dependencies": {
-    "@arbidocs/client": "0.4.99",
-    "@arbidocs/coedit": "0.4.99",
+    "@arbidocs/client": "0.4.101",
+    "@arbidocs/coedit": "0.4.101",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -293,7 +294,7 @@
     "zustand": "^5.0.14"
   },
   "peerDependencies": {
-    "@arbidocs/react": "0.4.99",
+    "@arbidocs/react": "0.4.101",
     "@docx-editor.dev/core": "2.28.0",
     "@docx-editor.dev/react": "2.28.0",
     "@lexical/html": "0.35.0",

package/src/docx/README.md

@@ -68,12 +68,33 @@ Word redline. Pass `baseId`, `revisedId`, `title` and optionally `onCompared` to
 refresh only the generated document in your host cache. Source files stay intact.
 
 Defined terms: give the adapter `definitions` (the workspace's facts labelled "Definitions", as
-`DefinitionSource`s) and the Insert tab offers Defined term and Update definitions, and typing
+`DefinitionSource`s) and the Insert tab offers Defined term, and typing
 `@@` in the body opens the term type-ahead. A picked term is inserted as an internal link
 (`w:hyperlink w:anchor`, the definition as its tooltip) to a hidden `_dt_<fact id>` bookmark on
 its definition, which is added in alphabetical order to the document's Definitions section (a
 heading named "Definitions"/"Definitions and interpretation"…, else a new "Definitions" heading at
-the end). Hovering a term shows its definition. Update definitions adds missing definitions,
-rewords and reorders the ones the section has, and lists those never used. The terms are read from
+the end). Hovering a term shows its definition. The terms are read from
 the facts with `parseDefinition`/`groupDefinitions` (root entry), which also print the glossary
 (`glossaryDocx`, `glossaryMarkdown`).
+
+Layout, tables and pictures (`layout/`): the ribbon's Layout tab offers Margins, Orientation and
+Size galleries (written to the caret's section with `setPageSetup`), Breaks (page, next-page and
+continuous section breaks) and the engine's Page Setup dialog. The contextual Table tab (caret in a
+table) inserts and deletes rows and columns, aligns cells and carries the engine's border and
+shading chrome. Tab and Shift+Tab move between cells and Tab in the last cell adds a row, as in
+Word (the engine would type a tab character). The contextual Picture tab (picture selected) offers wrap, size and position, alt
+text, rotate and flip, and Insert caption (a `Caption`-style paragraph numbered by a `SEQ` field).
+Give the adapter `imageGeneration` and Insert offers Generate image: the picture comes back as an
+ordinary inline picture at the caret, its alt text the prompt, its bytes a media part of the DOCX.
+
+What the engine does not do yet, so the ribbon shows it disabled with the engine's reason:
+
+- Text columns: `w:cols` in an opened document lay out and save unchanged, but no command writes
+  them (`setPageSetup` has no columns field, a pasted `w:sectPr` is dropped, and the `column`
+  break is refused).
+- Merge and split cells, repeat header row (`mergeCells`, `splitCell`, `toggleHeaderRow` are
+  refused); table properties (`setTableProperties`) has no tree-editor implementation.
+- Wrap text on an inline picture: only a picture that is already floating can change wrap.
+- Picture edits (wrap, resize, rotate) and a continuous section break cannot be suggested:
+  switch Review › Editing mode to Editing first. Inserting a picture or a table is tracked as an
+  insertion.

package/src/docx/layout/layout.css

@@ -0,0 +1,120 @@
+/* Layout, Table and Picture tabs, Generate image and Insert caption (src/docx/layout). */
+.native-docx-gallery {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2px;
+}
+.native-docx-gallery > button {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+.native-docx-gallery-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.native-docx-gallery-label {
+  font-weight: 600;
+}
+.native-docx-gallery-detail {
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+}
+.native-docx-gallery > button:hover:not(:disabled) {
+  background: hsl(var(--muted));
+}
+.native-docx-gallery > button[aria-checked='true'] {
+  box-shadow: inset 3px 0 hsl(var(--primary));
+  background: hsl(var(--muted));
+}
+.native-docx-gallery > button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.native-docx-gallery-more {
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-top: 1px solid hsl(var(--border));
+  background: transparent;
+  color: hsl(var(--primary));
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+.native-docx-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  font-size: 12px;
+}
+.native-docx-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-weight: 600;
+}
+.native-docx-form input,
+.native-docx-form select,
+.native-docx-form textarea {
+  padding: 4px 8px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font: inherit;
+  font-weight: 400;
+}
+.native-docx-form textarea {
+  resize: vertical;
+}
+.native-docx-form p {
+  margin: 0;
+  color: hsl(var(--muted-foreground));
+}
+.native-docx-form p[role='alert'] {
+  color: hsl(var(--destructive));
+}
+.native-docx-form button,
+.native-docx-form-actions button {
+  align-self: flex-end;
+  padding: 4px 12px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  cursor: pointer;
+  font: inherit;
+}
+.native-docx-form button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.native-docx-form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.native-docx-generate-image {
+  width: 300px;
+}
+.native-docx-spin {
+  animation: native-docx-spin 1s linear infinite;
+}
+@keyframes native-docx-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/docx/styles.css

@@ -1,3 +1,5 @@
+@import "./layout/layout.css";
+
 .native-docx-viewer {
   position: relative;
   height: 100%;