ooxml-ui 1.7.0 → 1.8.0

package/dist/xlsx/component.d.ts

@@ -3,6 +3,7 @@
  * in editor-core.ts and the DOM in editor-shell.ts.
  */
 import type { Workbook } from 'ooxml-core/xlsx';
+import type { RibbonAddInTab } from '../ribbon/add-in-tabs.js';
 import { XlsxEditorApi } from './element-api.js';
 import type { XlsxEditorEventMap } from './events.js';
 import type { XlsxCollaborationOptions } from './collaboration-types.js';
@@ -23,6 +24,7 @@ export interface XlsxEditorElement {
 export declare class XlsxEditorElement extends XlsxEditorApi {
     static get observedAttributes(): readonly string[];
     private shell;
+    private addIns;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     /** Interface language: `en`, `fr`, `de`, `es`, `zh-CN` (any tag mapping to one). */
@@ -49,6 +51,12 @@ export declare class XlsxEditorElement extends XlsxEditorApi {
     /** Command ids the ribbon, menus, Tell me and shortcuts leave out. */
     get hiddenActions(): string[];
     set hiddenActions(value: readonly string[]);
+    /**
+     * Tabs a host adds after Excel's own, as an Office add-in does. Each command runs its `run`
+     * callback and dispatches `office-ribbon-add-in` (`{ tab, command }`) from the editor.
+     */
+    get ribbonAddIns(): readonly RibbonAddInTab[];
+    set ribbonAddIns(value: readonly RibbonAddInTab[]);
     /** The open workbook model, or null. Assigning one shows it with a fresh undo history. */
     get workbook(): Workbook | null;
     set workbook(value: Workbook | null);

package/dist/xlsx/dialogs/format-cells/color-swatches.d.ts

@@ -2,9 +2,11 @@ import type { Color } from 'ooxml-core/xlsx';
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
 export declare const colorKey: (color: Color | undefined) => string;
 export interface SwatchGrid {
-    element: HTMLDivElement;
+    element: HTMLElement;
     value(): Color | undefined;
     set(color: Color | undefined): void;
+    /** Focus the current choice. */
+    focus(): void;
 }
-/** `noneLabel` names the "no colour" button (`Automatic` or `No Color`). */
+/** `noneLabel` names the "no colour" command (`Automatic` or `No Color`). */
 export declare function swatchGrid(ctx: EditorContext, label: string, noneLabel: string, initial: Color | undefined, onChange?: (color: Color | undefined) => void): SwatchGrid;

package/dist/xlsx/dialogs/styles.d.ts

@@ -1 +1 @@
-export declare const DIALOG_CSS = "\n.xve-cmd-dialog { --office-background: var(--xve-popover, var(--xve-background, #fff));\n\t--office-foreground: var(--xve-popover-foreground, var(--xve-foreground, #1f2937));\n\t--office-border: var(--xve-border, #d1d5db); --office-ring: var(--xve-ring, #217346); }\n.xve-dialog-body { display: flex; flex-direction: column; gap: 10px; min-width: min(360px, 86vw);\n\tfont: 13px/1.4 var(--xve-font, system-ui, \"Segoe UI\", sans-serif); color: var(--office-foreground); }\n.xve-cmd-dialog-wide .xve-dialog-body { min-width: min(560px, 90vw); }\n.xve-dialog-footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }\n.xve-btn { min-height: 28px; padding: 3px 14px; border-radius: var(--xve-radius, 4px); cursor: pointer;\n\tborder: 1px solid var(--xve-border, #c8c6c4); background: var(--xve-secondary, #fff); color: inherit; font: inherit; }\n.xve-btn:hover:not(:disabled) { background: var(--xve-accent, #f3f2f1); }\n.xve-btn:focus-visible, .xve-input:focus-visible, .xve-tab:focus-visible, .xve-listbox:focus-visible,\n\t.xve-swatch:focus-visible, .xve-tile:focus-visible { outline: 2px solid var(--xve-ring, #217346); outline-offset: 1px; }\n.xve-btn-primary { background: var(--xve-primary, #217346); color: var(--xve-primary-foreground, #fff);\n\tborder-color: var(--xve-primary, #217346); }\n.xve-btn-primary:hover:not(:disabled) { background: var(--xve-primary, #1b5e38); filter: brightness(.95); }\n.xve-btn:disabled { opacity: .5; cursor: default; }\n.xve-field { display: grid; grid-template-columns: minmax(110px, auto) 1fr; align-items: center; gap: 8px; }\n.xve-field-label { color: var(--xve-muted-foreground, #605e5c); }\n.xve-input { box-sizing: border-box; min-height: 28px; padding: 3px 6px; border-radius: var(--xve-radius, 4px);\n\tborder: 1px solid var(--xve-input, #c8c6c4); background: var(--xve-background, #fff); color: inherit; font: inherit; min-width: 0; }\ntextarea.xve-input { resize: vertical; }\n.xve-input[aria-invalid=\"true\"] { border-color: var(--xve-destructive, #c50f1f); }\n.xve-check { display: flex; align-items: center; gap: 6px; }\n.xve-fieldset { border: 1px solid var(--xve-border, #e1dfdd); border-radius: var(--xve-radius, 4px);\n\tpadding: 8px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.xve-fieldset legend { padding: 0 4px; font-weight: 600; }\n.xve-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }\n.xve-row > * { flex: 1 1 160px; }\n.xve-note { margin: 0; color: var(--xve-muted-foreground, #605e5c); font-size: 12px; }\n.xve-tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--xve-border, #e1dfdd); flex-wrap: wrap; }\n.xve-tab { border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 10px; cursor: pointer;\n\tborder-bottom: 2px solid transparent; }\n.xve-tab[aria-selected=\"true\"] { border-bottom-color: var(--xve-primary, #217346); font-weight: 600; }\n.xve-tabpanel { padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }\n.xve-tabpanel[hidden] { display: none; }\n.xve-listbox { border: 1px solid var(--xve-input, #c8c6c4); border-radius: var(--xve-radius, 4px);\n\tmin-height: 120px; max-height: 220px; overflow: auto; background: var(--xve-background, #fff); }\n.xve-option { padding: 3px 8px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.xve-option[aria-selected=\"true\"] { background: var(--xve-selection, #cce8d6); color: inherit; }\n.xve-sample { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 6px;\n\tborder: 1px solid var(--xve-border, #e1dfdd); background: var(--xve-sheet-bg, #fff); color: #000; overflow: hidden; }\n.xve-swatches { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; }\n.xve-swatch { width: 18px; height: 18px; border: 1px solid #c8c6c4; padding: 0; cursor: pointer; border-radius: 2px; }\n.xve-swatch[aria-pressed=\"true\"] { outline: 2px solid var(--xve-primary, #217346); outline-offset: 1px; }\n.xve-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }\n.xve-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; cursor: pointer;\n\tborder: 1px solid var(--xve-border, #e1dfdd); border-radius: var(--xve-radius, 4px); background: transparent; color: inherit; font: inherit; }\n.xve-tile[aria-pressed=\"true\"] { border-color: var(--xve-primary, #217346); background: var(--xve-selection, #e6f2ea); }\n.xve-symbols { display: grid; grid-template-columns: repeat(16, 28px); gap: 2px; max-height: 240px; overflow: auto; }\n.xve-symbols button { width: 28px; height: 28px; padding: 0; font-size: 16px; }\n.xve-preview { border: 1px solid var(--xve-border, #e1dfdd); background: #fff; min-height: 160px; display: flex;\n\talign-items: center; justify-content: center; }\n.xve-preview svg { max-width: 100%; height: auto; }\n.xve-results { max-height: 160px; overflow: auto; border: 1px solid var(--xve-border, #e1dfdd); }\n.xve-results table { border-collapse: collapse; width: 100%; font-size: 12px; }\n.xve-results th, .xve-results td { text-align: left; padding: 2px 6px; border-bottom: 1px solid var(--xve-border, #f3f2f1); }\n.xve-results tr[aria-selected=\"true\"] td { background: var(--xve-selection, #cce8d6); }\n.xve-border-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.xve-border-preview { width: 120px; height: 80px; position: relative; background: #fff; border: 1px dashed #c8c6c4; }\n@media (max-width: 600px) { .xve-field { grid-template-columns: 1fr; } .xve-symbols { grid-template-columns: repeat(8, 28px); } }\n";
+export declare const DIALOG_CSS = "\n.xve-cmd-dialog { --office-background: var(--xve-popover, var(--xve-background, #fff));\n\t--office-foreground: var(--xve-popover-foreground, var(--xve-foreground, #1f2937));\n\t--office-border: var(--xve-border, #d1d5db); --office-ring: var(--xve-ring, #217346); }\n.xve-dialog-body { display: flex; flex-direction: column; gap: 10px; min-width: min(360px, 86vw);\n\tfont: 13px/1.4 var(--xve-font, system-ui, \"Segoe UI\", sans-serif); color: var(--office-foreground); }\n.xve-cmd-dialog-wide .xve-dialog-body { min-width: min(560px, 90vw); }\n.xve-dialog-footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }\n.xve-btn { min-height: 28px; padding: 3px 14px; border-radius: var(--xve-radius, 4px); cursor: pointer;\n\tborder: 1px solid var(--xve-border, #c8c6c4); background: var(--xve-secondary, #fff); color: inherit; font: inherit; }\n.xve-btn:hover:not(:disabled) { background: var(--xve-accent, #f3f2f1); }\n.xve-btn:focus-visible, .xve-input:focus-visible, .xve-tab:focus-visible, .xve-listbox:focus-visible,\n\t.xve-tile:focus-visible { outline: 2px solid var(--xve-ring, #217346); outline-offset: 1px; }\n.xve-btn-primary { background: var(--xve-primary, #217346); color: var(--xve-primary-foreground, #fff);\n\tborder-color: var(--xve-primary, #217346); }\n.xve-btn-primary:hover:not(:disabled) { background: var(--xve-primary, #1b5e38); filter: brightness(.95); }\n.xve-btn:disabled { opacity: .5; cursor: default; }\n.xve-field { display: grid; grid-template-columns: minmax(110px, auto) 1fr; align-items: center; gap: 8px; }\n.xve-field-label { color: var(--xve-muted-foreground, #605e5c); }\n.xve-input { box-sizing: border-box; min-height: 28px; padding: 3px 6px; border-radius: var(--xve-radius, 4px);\n\tborder: 1px solid var(--xve-input, #c8c6c4); background: var(--xve-background, #fff); color: inherit; font: inherit; min-width: 0; }\ntextarea.xve-input { resize: vertical; }\n.xve-input[aria-invalid=\"true\"] { border-color: var(--xve-destructive, #c50f1f); }\n.xve-check { display: flex; align-items: center; gap: 6px; }\n.xve-fieldset { border: 1px solid var(--xve-border, #e1dfdd); border-radius: var(--xve-radius, 4px);\n\tpadding: 8px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.xve-fieldset legend { padding: 0 4px; font-weight: 600; }\n.xve-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }\n.xve-row > * { flex: 1 1 160px; }\n.xve-note { margin: 0; color: var(--xve-muted-foreground, #605e5c); font-size: 12px; }\n.xve-tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--xve-border, #e1dfdd); flex-wrap: wrap; }\n.xve-tab { border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 10px; cursor: pointer;\n\tborder-bottom: 2px solid transparent; }\n.xve-tab[aria-selected=\"true\"] { border-bottom-color: var(--xve-primary, #217346); font-weight: 600; }\n.xve-tabpanel { padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }\n.xve-tabpanel[hidden] { display: none; }\n.xve-listbox { border: 1px solid var(--xve-input, #c8c6c4); border-radius: var(--xve-radius, 4px);\n\tmin-height: 120px; max-height: 220px; overflow: auto; background: var(--xve-background, #fff); }\n.xve-option { padding: 3px 8px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.xve-option[aria-selected=\"true\"] { background: var(--xve-selection, #cce8d6); color: inherit; }\n.xve-sample { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 6px;\n\tborder: 1px solid var(--xve-border, #e1dfdd); background: var(--xve-sheet-bg, #fff); color: #000; overflow: hidden; }\n.xve-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }\n.xve-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; cursor: pointer;\n\tborder: 1px solid var(--xve-border, #e1dfdd); border-radius: var(--xve-radius, 4px); background: transparent; color: inherit; font: inherit; }\n.xve-tile[aria-pressed=\"true\"] { border-color: var(--xve-primary, #217346); background: var(--xve-selection, #e6f2ea); }\n.xve-symbols { display: grid; grid-template-columns: repeat(16, 28px); gap: 2px; max-height: 240px; overflow: auto; }\n.xve-symbols button { width: 28px; height: 28px; padding: 0; font-size: 16px; }\n.xve-preview { border: 1px solid var(--xve-border, #e1dfdd); background: #fff; min-height: 160px; display: flex;\n\talign-items: center; justify-content: center; }\n.xve-preview svg { max-width: 100%; height: auto; }\n.xve-results { max-height: 160px; overflow: auto; border: 1px solid var(--xve-border, #e1dfdd); }\n.xve-results table { border-collapse: collapse; width: 100%; font-size: 12px; }\n.xve-results th, .xve-results td { text-align: left; padding: 2px 6px; border-bottom: 1px solid var(--xve-border, #f3f2f1); }\n.xve-results tr[aria-selected=\"true\"] td { background: var(--xve-selection, #cce8d6); }\n.xve-border-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.xve-border-preview { width: 120px; height: 80px; position: relative; background: #fff; border: 1px dashed #c8c6c4; }\n@media (max-width: 600px) { .xve-field { grid-template-columns: 1fr; } .xve-symbols { grid-template-columns: repeat(8, 28px); } }\n";

package/dist/xlsx/events.d.ts

@@ -1,3 +1,4 @@
+import type { RibbonAddInCommandDetail } from 'ooxml-core/ribbon';
 import type { Workbook } from 'ooxml-core/xlsx';
 import type { XlsxCollaborationState } from './collaboration-types.js';
 export type FileCommand = 'new' | 'open' | 'save' | 'saveAs' | 'export' | 'exportCsv' | 'print';
@@ -53,11 +54,13 @@ export interface XlsxEditorEventMap {
     };
     /** Sharing started or stopped, the connection changed, or someone joined, left or synced. */
     'collaboration-change': XlsxCollaborationState;
+    /** A command of a host tab (`ribbonAddIns`) was chosen. */
+    'office-ribbon-add-in': RibbonAddInCommandDetail;
 }
 export type XlsxEditorEventName = keyof XlsxEditorEventMap;
 export type XlsxEditorEventDetail<K extends XlsxEditorEventName> = XlsxEditorEventMap[K];
 /** Runtime list of every event name; the `satisfies` check keeps it a subset of the map. */
-export declare const XLSX_EDITOR_EVENTS: readonly ["workbook-change", "workbook-error", "workbook-warning", "readonly-change", "ribbon-action", "ribbon-customize", "file-command", "selection-change", "sheet-change", "dirty-change", "collaboration-change"];
+export declare const XLSX_EDITOR_EVENTS: readonly ["workbook-change", "workbook-error", "workbook-warning", "readonly-change", "ribbon-action", "ribbon-customize", "file-command", "selection-change", "sheet-change", "dirty-change", "collaboration-change", "office-ribbon-add-in"];
 /**
  * Dispatches a bubbling, composed CustomEvent. Returns false when a cancelable event was canceled
  * (the `EventTarget.dispatchEvent` contract).

package/dist/xlsx/index.d.ts

@@ -9,3 +9,4 @@ export type { EditorContext, GridController, Selection as EditorSelection, Selec
 export type { DialogRegistry } from 'ooxml-core/xlsx/ui';
 export { registerRibbonTabs, type RibbonControl, type RibbonGroup, type RibbonMenuItem, type RibbonTab, } from 'ooxml-core/xlsx/ui';
 export { registerRibbonIcon } from './ribbon/icons.js';
+export { RIBBON_ADD_IN_EVENT, type OfficeRibbonAddInEvent, type RibbonAddInCommand, type RibbonAddInCommandDetail, type RibbonAddInGroup, type RibbonAddInTab, } from '../ribbon/add-in-tabs.js';

package/dist/xlsx/ribbon/color-grid.d.ts

@@ -1,18 +1,36 @@
 /**
- * Excel's colour picker: Automatic (or No Fill), Theme Colors (ten columns, each a theme slot over
- * five tints taken from the workbook theme), Standard Colors and More Colors (the browser's colour
- * input). The choice is a SpreadsheetML `Color` (`{ theme, tint }` or `{ rgb }`), or undefined.
+ * Excel's colour picker on the shared `office-ui-color-grid`: Automatic (or No Fill), Theme Colors
+ * (ten columns, each a theme slot over five tints of the workbook theme), Standard Colors and More
+ * Colors (the browser's colour input). The choice is a SpreadsheetML `Color` (`{ theme, tint }`
+ * or `{ rgb }`), or undefined. This module is the thin adapter between that colour model and the
+ * grid's swatches.
  */
 import { type Color, type ThemePalette } from 'ooxml-core/xlsx';
-/** Excel's five tint rows under each theme colour (lt1, dk1, lt2 and the rest differ). */
-export declare function themeTints(slot: number): number[];
-export declare const STANDARD_COLORS: ReadonlyArray<readonly [string, string]>;
+import { type OfficeColorPick, type OfficeUiColorGrid } from '../../controls.js';
+type Translate = (key: string, vars?: Record<string, string | number>) => string;
 export interface ColorGridOptions {
     /** First row: 'Automatic' (font colour) or 'No Fill' (fill colour). */
     automaticLabel?: string;
     theme?: ThemePalette;
-    t(key: string, vars?: Record<string, string | number>): string;
+    t: Translate;
 }
 /** The CSS colour a `Color` shows in the workbook theme (for swatches and the split bar). */
 export declare function cssColor(color: Color | undefined, theme?: ThemePalette): string;
+/**
+ * The shared colour grid showing a workbook theme, with every name translated. `noneLabel` is
+ * the first row's command (Automatic, No Fill, No Color): choosing it picks no colour.
+ */
+export declare function excelColorGrid(doc: Document, theme: ThemePalette, t: Translate, options?: {
+    noneLabel?: string;
+    moreLabel?: string;
+    label?: string;
+}): OfficeUiColorGrid;
+/**
+ * The SpreadsheetML colour a pick stands for: a theme swatch keeps its slot and tint (so it
+ * follows the workbook theme), anything else is its RGB. `alpha` writes `FFRRGGBB`.
+ */
+export declare function pickedExcelColor(pick: OfficeColorPick, alpha?: boolean): Color | undefined;
+/** The grid's `value` for a colour: its resolved hex, or the none command. */
+export declare function excelGridValue(color: Color | undefined, theme: ThemePalette): string;
 export declare function openColorGrid(anchor: HTMLElement, choose: (color: Color | undefined) => void, options: ColorGridOptions): void;
+export {};

package/dist/xlsx/ribbon/ribbon.d.ts

@@ -3,6 +3,7 @@
  * tab with labelled groups and dialog launchers, KeyTips, hidden actions and overflow folding. The tab
  * row, File button, collapse and peek belong to the shared `office-ui-ribbon`. Structure and look follow docx-viewer's ribbon.ts.
  */
+import { type RibbonAddInTab } from '../../ribbon/add-in-tabs.js';
 import type { EditorContext } from 'ooxml-core/xlsx/ui';
 export interface RibbonHandlers {
     openBackstage(): void;
@@ -15,6 +16,8 @@ export interface Ribbon {
     /** Rebuilds all tabs (after a locale change or newly registered tabs). */
     rebuild(): void;
     selectTab(id: string): void;
+    /** Tabs a host adds after Excel's own (`ribbonAddIns` of the editor). */
+    setAddIns(tabs: readonly RibbonAddInTab[]): void;
     activeTab(): string | undefined;
     /** Alt / F10: focus the selected tab and show the tab KeyTips. */
     showKeyTips(): void;