visio-react-viewer 0.0.1 → 0.1.0

package/dist/types/src/text-layout.d.ts

@@ -0,0 +1,45 @@
+import type { VisioTextRun } from 'ooxml-core/visio';
+export interface TextLine {
+    runs: VisioTextRun[];
+    width: number;
+    height: number;
+}
+export type MeasureText = (text: string, run: VisioTextRun) => number;
+export interface TextLayoutLimits {
+    maxCharacters: number;
+    maxMeasurements: number;
+    maxLines: number;
+    maxFragments: number;
+    maxShapeCharacters: number;
+    maxShapeMeasurements: number;
+    maxShapeLines: number;
+    maxShapeFragments: number;
+    maxCacheEntries: number;
+}
+export declare class TextLayoutBudgetError extends Error {
+    constructor(message: string);
+}
+/** One bounded measurement cache and work budget per render; shape scopes share both. */
+export declare class TextLayoutBudget {
+    #private;
+    readonly limits: Readonly<TextLayoutLimits>;
+    private readonly cache;
+    private readonly parent?;
+    private constructor();
+    static create(options?: Partial<TextLayoutLimits>): TextLayoutBudget;
+    get characters(): number;
+    get measurements(): number;
+    get lines(): number;
+    get fragments(): number;
+    /** A shape may be omitted without consuming the rest of the page's budget. */
+    forShape(): TextLayoutBudget;
+    reserveCharacters(count: number): void;
+    reserveLine(): void;
+    reserveFragment(): void;
+    private reserveMeasurement;
+    measure(text: string, run: VisioTextRun, measure: MeasureText): number;
+}
+export declare const createTextLayoutBudget: (options?: Partial<TextLayoutLimits>) => TextLayoutBudget;
+export declare const measureBrowserText: MeasureText;
+/** Rendering-only greedy wrapping. Inject one budget across shapes to bound total UI-thread work. */
+export declare function wrapText(runs: VisioTextRun[], width: number, measure?: MeasureText, firstLineIndent?: number, budget?: TextLayoutBudget): TextLine[];

package/dist/types/src/viewer-chrome.d.ts

@@ -0,0 +1,10 @@
+import type { ViewerController, ViewerState } from './controller.js';
+/** Only static application markup belongs here. All document labels are inserted as text. */
+export declare const viewerChromeTemplate: string;
+/** Presentation state stays local; page navigation uses the same controller as every binding. */
+export declare class ViewerChrome {
+    #private;
+    constructor(root: ShadowRoot, controller: ViewerController);
+    wire(): () => void;
+    render(state: ViewerState, noteCount: number): void;
+}

package/dist/types/src/viewer-edit-controls.d.ts

@@ -0,0 +1,12 @@
+import type { ViewerController, ViewerState } from './controller.js';
+/** Static markup only. Document text is assigned exclusively through value/textContent. */
+export declare const editControlsTemplate = "<details class=\"edit-controls\"><summary>Edit diagram (experimental)</summary><p id=\"edit-warning\">Experimental source-backed editing. Unsupported targets are rejected. Native Visio compatibility is not verified. Keep your original file.</p><p data-edit-target></p><label for=\"edit-text\">Selected shape text</label><textarea id=\"edit-text\" rows=\"3\" aria-describedby=\"edit-warning edit-target edit-status\"></textarea><div class=\"edit-actions\"><button type=\"button\" data-edit=\"apply\">Apply text</button><button type=\"button\" data-edit=\"cancel\">Cancel</button><button type=\"button\" data-edit=\"undo\">Undo</button><button type=\"button\" data-edit=\"redo\">Redo</button></div><p id=\"edit-status\" role=\"status\" aria-live=\"polite\"></p><p data-edit-error role=\"alert\" hidden></p><ul data-edit-diagnostics></ul><fieldset data-geometry><legend>Geometry (experimental)</legend><p>Pin X/Y use drawing inches, bottom-left origin, Y up. Resize holds the rotation pin fixed. Core rejects unsupported formulas, protected cells, unsafe group/master dependencies and referenced deletion. Native Visio reopen fidelity is unverified.</p><label>New rectangle ID <input data-geometry-field=\"id\" type=\"text\" maxlength=\"256\"></label><label>Rectangle text (optional) <input data-geometry-field=\"text\" type=\"text\" maxlength=\"1000000\"></label><label>Pin X (inches) <input data-geometry-field=\"x\" type=\"number\" step=\"any\"></label><label>Pin Y (inches) <input data-geometry-field=\"y\" type=\"number\" step=\"any\"></label><label>Width (inches) <input data-geometry-field=\"width\" type=\"number\" min=\"0\" step=\"any\"></label><label>Height (inches) <input data-geometry-field=\"height\" type=\"number\" min=\"0\" step=\"any\"></label><div class=\"edit-actions\"><button type=\"button\" data-geometry-action=\"create-rectangle\">Create rectangle</button><button type=\"button\" data-geometry-action=\"move-shape\">Move selected</button><button type=\"button\" data-geometry-action=\"resize-shape\">Resize selected</button><button type=\"button\" data-geometry-action=\"delete-shape\">Delete selected</button></div><p data-geometry-error role=\"alert\" hidden></p></fieldset></details>";
+export declare class ViewerEditControls {
+    #private;
+    readonly panel: HTMLDetailsElement;
+    readonly input: HTMLTextAreaElement;
+    constructor(root: ShadowRoot, controller: ViewerController);
+    wire(): () => void;
+    reset(focus?: boolean): void;
+    render(state: ViewerState): void;
+}

package/dist/types/src/viewer-element.d.ts

@@ -0,0 +1,44 @@
+import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
+import type { VsdxSource } from './contract.js';
+import { ViewerController } from './controller.js';
+import { type SvgExportOptions, type SvgExportResult } from './export-svg.js';
+import { type CurrentPagePrintSnapshotOptions, type PrintSnapshot } from './print-snapshot.js';
+declare const BaseElement: typeof HTMLElement;
+export declare class VisioViewerElement extends BaseElement {
+    #private;
+    readonly controller: ViewerController;
+    constructor();
+    get document(): VisioDocument | null;
+    set document(value: VisioDocument | null);
+    get pageIndex(): number;
+    set pageIndex(value: number);
+    get zoom(): number;
+    set zoom(value: number);
+    get showToolbar(): boolean;
+    set showToolbar(value: boolean);
+    get renderWarnings(): readonly string[];
+    load(source: VsdxSource): Promise<void>;
+    applyEdits(edits: readonly VisioEdit[]): Promise<void>;
+    replacePlainText(pageId: string, shapeId: string, text: string): Promise<void>;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    cancelEdit(): void;
+    exportVsdx(): ReturnType<ViewerController['exportVsdx']>;
+    fit(): void;
+    setLayerVisibility(pageId: string, layerId: string, visible: boolean | null): void;
+    resetLayerVisibility(pageId?: string): void;
+    /** Return a portable saved-display current-page snapshot without changing selection or downloading a file. */
+    exportSvg(options?: SvgExportOptions): SvgExportResult;
+    /** Prepare only the captured current drawing with saved display visibility. No frame, download, print dialog or state change. */
+    createPrintSnapshot(options?: CurrentPagePrintSnapshotOptions): PrintSnapshot;
+    destroy(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare function registerVisioViewer(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'visio-viewer': VisioViewerElement;
+    }
+}
+export {};

package/dist/types/src/viewer-geometry-controls.d.ts

@@ -0,0 +1,14 @@
+import type { ViewerController, ViewerState } from './controller.js';
+export declare const geometryControlsTemplate = "<fieldset data-geometry><legend>Geometry (experimental)</legend><p>Pin X/Y use drawing inches, bottom-left origin, Y up. Resize holds the rotation pin fixed. Core rejects unsupported formulas, protected cells, unsafe group/master dependencies and referenced deletion. Native Visio reopen fidelity is unverified.</p><label>New rectangle ID <input data-geometry-field=\"id\" type=\"text\" maxlength=\"256\"></label><label>Rectangle text (optional) <input data-geometry-field=\"text\" type=\"text\" maxlength=\"1000000\"></label><label>Pin X (inches) <input data-geometry-field=\"x\" type=\"number\" step=\"any\"></label><label>Pin Y (inches) <input data-geometry-field=\"y\" type=\"number\" step=\"any\"></label><label>Width (inches) <input data-geometry-field=\"width\" type=\"number\" min=\"0\" step=\"any\"></label><label>Height (inches) <input data-geometry-field=\"height\" type=\"number\" min=\"0\" step=\"any\"></label><div class=\"edit-actions\"><button type=\"button\" data-geometry-action=\"create-rectangle\">Create rectangle</button><button type=\"button\" data-geometry-action=\"move-shape\">Move selected</button><button type=\"button\" data-geometry-action=\"resize-shape\">Resize selected</button><button type=\"button\" data-geometry-action=\"delete-shape\">Delete selected</button></div><p data-geometry-error role=\"alert\" hidden></p></fieldset>";
+/** Collect explicit coordinates; never infer a Visio pin from rendered SVG transforms. */
+export declare class ViewerGeometryControls {
+    #private;
+    private readonly panel;
+    private readonly controller;
+    private readonly draftChanged;
+    constructor(panel: HTMLElement, controller: ViewerController, draftChanged?: () => void);
+    wire(): () => void;
+    get hasDraft(): boolean;
+    reset(): void;
+    render(state: ViewerState): void;
+}

package/dist/types/src/viewer-input.d.ts

@@ -0,0 +1,10 @@
+import type { ViewerController } from './controller.js';
+interface Controls {
+    viewport: HTMLDivElement;
+    commandRoot: ShadowRoot;
+    pageSelect: HTMLSelectElement;
+    searchInput: HTMLInputElement;
+}
+/** Own every DOM listener and abort them together when the surface is disposed. */
+export declare function wireViewerInputs(controls: Controls, controller: ViewerController, fit: () => void): () => void;
+export {};

package/dist/types/src/viewer-layer-controls.d.ts

@@ -0,0 +1,5 @@
+import type { ViewerController, ViewerState } from './controller.js';
+export declare const layerControlsTemplate = "<details class=\"layer-controls\" hidden><summary>Layers</summary><p>Display changes only. SVG and print snapshots use saved visibility. Guides, NoShow and unknown hidden reasons remain hidden.</p><div data-layer-list></div><p data-layer-status role=\"status\"></p><button type=\"button\" data-layer-reset=\"all\">Reset all layers</button></details>";
+/** Static controls and text-only labels. Document strings never become selectors or markup. */
+export declare function renderLayerControls(panel: HTMLDetailsElement, state: ViewerState): void;
+export declare function wireLayerControls(panel: HTMLDetailsElement, controller: ViewerController): () => void;

package/dist/types/src/viewer-layers.d.ts

@@ -0,0 +1,22 @@
+import { type VisioDocument, type VisioShape } from 'ooxml-core/visio';
+/** UI limits. Visibility semantics and shape traversal remain in ooxml-core. */
+export declare const VIEWER_LAYER_LIMITS: Readonly<{
+    overrides: 25000;
+    controls: 200;
+}>;
+export interface LayerVisibilityOverride {
+    /** The source page owning the layer, including background pages. */
+    readonly pageId: string;
+    readonly layerId: string;
+    readonly visible: boolean;
+}
+export declare const EMPTY_LAYER_OVERRIDES: readonly LayerVisibilityOverride[];
+/** Validate before allocating indexes; never expose mutable maps as viewer state. */
+export declare function layerOverrideMaps(model: VisioDocument | null, overrides: readonly LayerVisibilityOverride[]): Map<string, Map<string, boolean>>;
+export declare function documentVisibility(model: VisioDocument | null, overrides?: readonly LayerVisibilityOverride[]): WeakMap<VisioShape, boolean>;
+export declare function visibleSelection(model: VisioDocument | null, pageIndex: number, selection: {
+    readonly id: string;
+    readonly pageId?: string;
+} | null, visible: WeakMap<VisioShape, boolean>): boolean;
+/** Rendering eligibility shared by selection and SVG containers; no format interpretation. */
+export declare function hasVisibleShapeContent(shape: VisioShape, visible: WeakMap<VisioShape, boolean> | undefined, cache?: WeakMap<VisioShape, boolean>): boolean;

package/dist/types/src/viewer-search.d.ts

@@ -0,0 +1,10 @@
+import type { ViewerState } from './controller.js';
+export declare const searchTemplate: string;
+export interface SearchControls {
+    input: HTMLInputElement;
+    status: HTMLSpanElement;
+    previous: HTMLButtonElement;
+    next: HTMLButtonElement;
+}
+export declare function searchControls(root: ShadowRoot): SearchControls;
+export declare function renderSearchControls(controls: SearchControls, state: ViewerState): void;

package/dist/types/src/worker-editor.d.ts

@@ -0,0 +1,23 @@
+export { snapshotEdits } from './edit-commands.js';
+import type { VisioDocument, VisioEdit } from 'ooxml-core/visio';
+import type { EditDiagnostic } from './document-history.js';
+export interface EditWorkerRequest {
+    bytes: ArrayBuffer;
+    edits: readonly VisioEdit[];
+}
+export interface EditTransactionResult {
+    bytes: Uint8Array;
+    document: VisioDocument;
+    changedParts: readonly string[];
+    diagnostics: readonly EditDiagnostic[];
+}
+export type CancellableEditor = ((bytes: Uint8Array, edits: readonly VisioEdit[]) => Promise<EditTransactionResult>) & {
+    cancel?: () => void;
+};
+export interface EditWorkerLike {
+    onmessage: ((event: MessageEvent) => void) | null;
+    onerror: ((event: ErrorEvent) => void) | null;
+    postMessage(message: EditWorkerRequest, transfer: Transferable[]): void;
+    terminate(): void;
+}
+export declare function createWorkerEditor(factory?: () => EditWorkerLike, timeoutMs?: number): CancellableEditor;

package/dist/types/src/worker-parser.d.ts

@@ -0,0 +1,13 @@
+import { type VisioDocument } from 'ooxml-core/visio';
+export type CancellableParser = ((bytes: Uint8Array | ArrayBuffer) => Promise<VisioDocument>) & {
+    cancel?: () => void;
+};
+export interface WorkerLike {
+    onmessage: ((event: MessageEvent) => void) | null;
+    onerror: ((event: ErrorEvent) => void) | null;
+    postMessage(message: ArrayBuffer, transfer: Transferable[]): void;
+    terminate(): void;
+}
+export type WorkerFactory = () => WorkerLike;
+/** One disposable worker per document prevents old parses and long CPU tasks from occupying the UI. */
+export declare function createWorkerParser(factory?: WorkerFactory, timeoutMs?: number): CancellableParser;

package/package.json

@@ -1,22 +1,37 @@
 {
 	"name": "visio-react-viewer",
-	"version": "0.0.1",
-	"description": "Placeholder for the Visio beta viewer. No viewer API is included yet.",
+	"version": "0.1.0",
+	"description": "Local-first Visio viewer for react",
 	"homepage": "https://christophervr.github.io/visio-viewer/",
-	"license": "UNLICENSED",
+	"license": "Apache-2.0",
 	"author": "ChristopherVR",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/ChristopherVR/visio-viewer.git",
-		"directory": "npm-placeholders/visio-react-viewer"
+		"directory": "packages/react"
 	},
 	"files": [
-		"index.js",
-		"README.md"
+		"dist",
+		"LICENSE",
+		"NOTICE"
 	],
 	"type": "module",
-	"exports": "./index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"dependencies": {
+		"emf-converter": "4.8.9",
+		"ooxml-core": "^0.10.0",
+		"visio-core": "^0.1.0"
+	},
+	"peerDependencies": {
+		"react": ">=18"
 	}
 }

package/index.js

@@ -1 +0,0 @@
-export const status = 'placeholder';