visio-react-viewer 0.0.2 → 0.1.1

package/dist/types/src/shape-inspector.d.ts

@@ -0,0 +1,5 @@
+import type { VisioDocument, VisioShape } from 'ooxml-core/visio';
+import type { ViewerState } from './controller.js';
+export declare function selectedShape(document: VisioDocument | null, selection: ViewerState['selectedShape'], pageIndex: number): VisioShape | undefined;
+export declare function safeExternalHref(value: string): string | undefined;
+export declare function shapeDetails(shape: VisioShape): DocumentFragment;

package/dist/types/src/snapshot-scene.d.ts

@@ -0,0 +1,8 @@
+import type { VisioDocument } from 'ooxml-core/visio';
+/**
+ * @internal Copy a canonically validated scene without retaining any renderer-used mutable input.
+ * The caller validates the result before use. Independent allocation caps also bound a host that
+ * changes its arrays while fields are read. Shared raster buffers are copied once per invocation.
+ * Inspector metadata, connectors, layers and unknown host properties are not used by static SVG.
+ */
+export declare function copySnapshotScene(model: VisioDocument): VisioDocument;

package/dist/types/src/styles.d.ts

@@ -0,0 +1,2 @@
+/** Inherited public tokens use local fallback aliases so host themes are never shadowed. */
+export declare const viewerStyles = "\n:host {\n  --_vv-bg:var(--vv-background,#eceae8); --_vv-surface:var(--vv-surface,#fff);\n  --_vv-secondary:var(--vv-secondary,#f3f2f1); --_vv-ink:var(--vv-ink,#1f1f1f);\n  --_vv-muted:var(--vv-muted,#605e5c); --_vv-border:var(--vv-border,#e1dfdd);\n  --_vv-accent:var(--vv-accent,#3955a3); --_vv-accent-soft:var(--vv-accent-soft,rgba(57,85,163,.10));\n  display:flex; flex-direction:column; min-width:0; min-height:320px; height:100%; overflow:hidden;\n  color:var(--_vv-ink); background:var(--_vv-bg); font:12px/1.5 \"Segoe UI\",Arial,sans-serif; contain:layout;\n}\n* { box-sizing:border-box; }\n[hidden] { display:none !important; }\nbutton,select,input,textarea { font:inherit; color:inherit; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; min-height:28px; padding:3px 8px; }\nbutton { cursor:pointer; }\nbutton:hover:enabled { background:var(--_vv-accent-soft); border-color:var(--_vv-accent); }\nbutton:disabled { opacity:.4; cursor:default; }\nbutton:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--vv-focus,var(--_vv-accent)); outline-offset:2px; }\nbutton[aria-pressed=\"true\"] { color:var(--_vv-accent); background:var(--_vv-accent-soft); }\n.toolbar { flex:none; min-width:0; border-bottom:1px solid var(--_vv-border); background:var(--_vv-surface); }\n.ribbon-primary { height:32px; display:flex; align-items:center; gap:6px; padding:2px 8px; }\n.page-picker { display:flex; min-width:0; align-items:center; gap:8px; color:var(--_vv-muted); font-size:11px; }\n.page-picker select { width:190px; max-width:42vw; height:26px; min-height:26px; padding:2px 6px; font-size:11px; color:var(--_vv-ink); }\n.page-stepper { display:flex; align-items:center; gap:2px; }\n.page-stepper button { width:26px; height:26px; min-height:26px; padding:0; font-size:18px; line-height:22px; background:transparent; border-color:transparent; }\n.spacer { flex:1; }\n.local-label { color:var(--_vv-muted); font-size:10px; white-space:nowrap; }\n.ribbon-tabs { height:35px; display:flex; align-items:stretch; padding:0 4px; border-bottom:1px solid var(--_vv-border); }\n.ribbon-tabs button { position:relative; min-height:34px; padding:7px 14px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); font-size:12px; font-weight:500; }\n.ribbon-tabs button[aria-selected=\"true\"] { color:var(--_vv-accent); }\n.ribbon-tabs button[aria-selected=\"true\"]::after { content:\"\"; position:absolute; inset:auto 0 -1px; height:2.5px; background:var(--_vv-accent); }\n.ribbon-content { min-height:82px; display:flex; align-items:stretch; gap:0; padding:2px 4px; overflow-x:auto; }\n.ribbon-group { display:flex; flex-direction:column; justify-content:space-between; flex:none; gap:2px; padding:3px 10px 4px; border-right:1px solid var(--_vv-border); }\n.group-label { font-size:10px; line-height:12px; color:var(--_vv-muted); text-align:center; }\n.ribbon-actions { display:flex; align-items:stretch; gap:2px; flex:1; }\n.ribbon-command { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-width:70px; padding:2px 6px; border-color:transparent; background:transparent; font-size:11px; white-space:nowrap; }\n.command-icon { display:grid; place-items:center; width:26px; height:26px; color:var(--_vv-accent); }\n.command-icon::before { content:\"\"; width:24px; height:24px; background:currentColor; mask:var(--command-symbol) center / contain no-repeat; }\n[data-icon=\"selection\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%203%2013%209-6%201-3%206z%22%2F%3E%3C%2Fsvg%3E\"); }\n[data-icon=\"edit\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M12%205v14M8%2019h8%22%2F%3E%3C%2Fsvg%3E\"); }\n[data-icon=\"layers\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%208%209-5%209%205-9%205zM3%2012l9%205%209-5M3%2016l9%205%209-5%22%2F%3E%3C%2Fsvg%3E\"); }\n[data-icon=\"pages\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E\"); }\n[data-icon=\"inspector\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M14%204v16M17%208h1M17%2012h1M17%2016h1%22%2F%3E%3C%2Fsvg%3E\"); }\n[data-icon=\"notes\"] { --command-symbol:url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v12H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h5%22%2F%3E%3C%2Fsvg%3E\"); }\n.ribbon-command[data-chrome=\"edit\"] .command-icon { font-family:ui-serif,Georgia,serif; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }\n.ribbon-hint { align-self:center; flex:none; margin:0; padding:0 16px; font-size:11px; line-height:18px; color:var(--_vv-muted); }\n.search-group { width:330px; }\n.search-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }\n.search-controls label { display:flex; align-items:center; min-width:0; gap:6px; flex:1; font-size:11px; }\n.search-controls input { width:100%; min-width:0; padding:3px 6px; font-size:11px; }\n.search-controls button { padding:3px 6px; font-size:10px; background:var(--_vv-secondary); }\n.search-controls [role=\"status\"] { display:block; width:100%; min-height:15px; font-size:10px; line-height:15px; color:var(--_vv-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.workspace { position:relative; display:flex; flex:1; min-width:0; min-height:0; overflow:hidden; }\n.page-rail { flex:0 0 180px; width:180px; min-width:0; overflow:auto; border-right:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n.pane-heading { height:37px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--_vv-border); font-size:11px; font-weight:600; }\n.pane-heading [data-page-count],.inspector-kind { color:var(--_vv-muted); font-size:10px; font-weight:400; }\n.page-list { list-style:none; padding:8px 5px; margin:0; display:flex; flex-direction:column; gap:4px; }\n.page-link { display:flex; align-items:center; position:relative; width:100%; min-width:0; gap:4px; padding:4px 5px 4px 2px; border:0; border-radius:0; background:transparent; color:var(--_vv-muted); text-align:left; }\n.page-link[aria-current=\"page\"] { background:var(--_vv-accent-soft); }\n.page-link[aria-current=\"page\"]::before { content:\"\"; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:0 2px 2px 0; background:var(--_vv-accent); }\n.page-number { flex:0 0 20px; width:20px; padding-right:3px; font-size:10px; text-align:right; }\n.page-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; width:100%; min-height:98px; gap:3px; padding:10px; border:1px solid var(--_vv-border); border-radius:2px; background:var(--_vv-surface); }\n.page-link[aria-current=\"page\"] .page-card { border-color:var(--_vv-accent); }\n.page-link[aria-current=\"page\"] .page-number { color:var(--_vv-accent); font-weight:600; }\n.page-mark { color:var(--_vv-muted); font-size:20px; line-height:23px; }\n.page-name { color:var(--_vv-ink); font-size:11px; font-weight:500; line-height:16px; overflow-wrap:anywhere; }\n.page-meta { color:var(--_vv-muted); font-size:9px; line-height:14px; }\n.page-empty { margin:12px; color:var(--_vv-muted); font-size:11px; }\n.viewport { position:relative; display:flex; flex-direction:column; flex:1; overflow:auto; min-width:0; min-height:0; padding:16px 4px; background:var(--_vv-bg); }\n.paper { display:block; flex:none; background:white; box-shadow:var(--vv-shadow,0 2px 8px rgb(0 0 0 / 14%)); margin:auto; }\n.paper [data-shape-id] { cursor:pointer; }\n.paper [data-selected=\"true\"] > [data-geometry] { stroke:var(--_vv-accent) !important; stroke-width:.025 !important; }\n.inspector-pane { flex:0 0 288px; width:288px; min-width:0; overflow:auto; border-left:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n.inspector-body { display:flex; flex-direction:column; gap:12px; padding:12px 10px; }\n.inspector-card,.edit-controls,.layer-controls { min-width:0; padding:8px; margin:0; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); font-size:11px; line-height:17px; }\n.document-card h2 { margin:0 0 8px; font-size:10px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:var(--_vv-muted); }\n.current-page-name { margin:0 0 8px; font-size:12px; font-weight:500; overflow-wrap:anywhere; }\n.document-card dl { display:grid; grid-template-columns:1fr auto; gap:4px 10px; margin:0; font-size:11px; }\n.document-card dt { color:var(--_vv-muted); }\n.document-card dd { margin:0; text-align:right; overflow-wrap:anywhere; }\n.selection-hint { margin:0; padding:0 2px; color:var(--_vv-muted); font-size:11px; }\nsummary { cursor:pointer; min-height:22px; line-height:22px; font-weight:500; }\nsummary::marker { color:var(--_vv-muted); font-size:10px; }\n.shape-inspector div { max-height:260px; overflow:auto; }\n.shape-inspector p { margin:6px 0; overflow-wrap:anywhere; }\n.shape-inspector dl { display:grid; grid-template-columns:minmax(60px,1fr) 1.5fr; gap:6px 10px; }\n.shape-inspector dt { font-weight:500; }\n.shape-inspector dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }\n.shape-inspector h3 { margin:12px 0 5px; font-size:11px; }\n.shape-inspector a { color:var(--_vv-accent); overflow-wrap:anywhere; }\n.edit-controls p,.layer-controls p { margin:6px 0; color:var(--_vv-muted); overflow-wrap:anywhere; }\n.edit-controls textarea { display:block; width:100%; resize:vertical; max-height:180px; margin-top:4px; background:var(--_vv-secondary); }\n.edit-controls label { display:block; margin-top:8px; }\n.edit-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }\n.edit-actions button { font-size:11px; padding:3px 7px; }\n.edit-actions [data-edit=\"apply\"]:enabled { background:var(--_vv-accent); border-color:var(--_vv-accent); color:var(--vv-accent-ink,#fff); }\n.edit-controls [data-geometry] { min-width:0; margin:8px 0 0; padding:6px; border:1px solid var(--_vv-border); }\n.edit-controls [data-geometry-field] { display:block; width:100%; min-width:0; margin-top:4px; }\n.edit-controls [data-geometry-error] { color:var(--vv-danger,#b42318); }\n.edit-controls [data-edit-error] { color:var(--vv-danger,#b42318); }\n.edit-controls [data-edit-diagnostics] { max-height:100px; overflow:auto; padding-left:16px; }\n.layer-controls [data-layer-list] { max-height:240px; overflow:auto; }\n.layer-controls fieldset { border:1px solid var(--_vv-border); margin:6px 0; padding:6px; min-width:0; }\n.layer-controls legend { max-width:100%; overflow-wrap:anywhere; }\n.layer-controls fieldset div { display:flex; align-items:center; gap:6px; margin:3px 0; }\n.layer-controls label { display:flex; align-items:center; gap:6px; overflow-wrap:anywhere; }\n.layer-controls input { flex-shrink:0; width:16px; height:16px; min-height:16px; padding:0; accent-color:var(--_vv-accent); }\n.notes ul { max-height:220px; overflow:auto; padding-left:17px; margin:6px 0 0; color:var(--_vv-muted); }\n.notes li { margin:5px 0; overflow-wrap:anywhere; }\n.notes-strip { flex:none; display:flex; align-items:center; justify-content:space-between; min-height:25.5px; padding:0 12px; border-top:1px solid var(--_vv-border); background:var(--_vv-bg); color:var(--_vv-muted); font-size:10px; }\n.notes-strip button { min-height:24.5px; padding:2px 0; border:0; background:transparent; color:var(--_vv-muted); font-size:11px; }\n.notes-strip button::before { content:\"\u25B8\"; margin-right:6px; }\n.notes-strip button[aria-expanded=\"true\"]::before { content:\"\u25BE\"; }\n.status { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; min-height:29px; padding:0 8px 0 12px; border-top:1px solid var(--_vv-border); color:var(--_vv-muted); background:var(--_vv-surface); font-size:10px; }\n.status-message { display:flex; gap:16px; min-width:0; }\n.status-message span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.zoom-controls { display:flex; flex:none; align-items:center; gap:3px; }\n.zoom-controls button { min-height:24px; height:24px; padding:1px 6px; border-color:transparent; background:transparent; font-size:10px; }\n.zoom-controls [data-action=\"in\"],.zoom-controls [data-action=\"out\"] { min-width:24px; padding:0; font-size:17px; line-height:20px; }\n.zoom-divider { width:1px; height:14px; background:var(--_vv-border); margin:0 3px; }\n.zoom { min-width:40px; font-size:10px; text-align:center; font-variant-numeric:tabular-nums; }\n.empty { max-width:360px; margin:60px auto; padding:16px; text-align:center; color:var(--_vv-muted); font-size:12px; }\n.empty strong { display:block; color:var(--_vv-ink); font-size:18px; font-weight:500; margin-bottom:8px; }\n@media(max-width:1100px) { .ribbon-hint { display:none; } [data-diagnostics] { display:none; } }\n@media(max-width:760px) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary { min-height:44px; line-height:44px; }\n  .ribbon-primary { height:52px; padding:4px 8px; }\n  .page-picker { flex:1; }\n  .page-picker select { width:100%; max-width:none; min-height:44px; height:44px; font-size:12px; }\n  .page-stepper button { width:44px; min-height:44px; height:44px; }\n  .local-label,.ribbon-primary>.spacer { display:none; }\n  .ribbon-tabs { height:44px; }\n  .ribbon-tabs button { min-height:44px; padding:8px 16px; }\n  .ribbon-content { min-height:86px; }\n  .ribbon-group { padding:4px 8px; }\n  .search-group { width:100%; border-right:0; }\n  .search-controls { gap:4px; }\n  .search-controls label { font-size:12px; }\n  .search-controls input { font-size:12px; }\n  .search-controls button { min-width:44px; font-size:0; padding:3px; }\n  .search-controls [data-action=\"search-previous\"]::before { content:\"\u2039\"; font-size:22px; }\n  .search-controls [data-action=\"search-next\"]::before { content:\"\u203A\"; font-size:22px; }\n  #home-panel>.ribbon-group:not(.search-group) { display:none; }\n  .ribbon-command { min-width:90px; }\n  .workspace { display:block; overflow:auto; }\n  .page-rail { width:100%; max-height:190px; border-right:0; border-bottom:1px solid var(--_vv-border); }\n  .page-list { flex-direction:row; overflow-x:auto; }\n  .page-list li { flex:0 0 155px; }\n  .page-card { min-height:86px; }\n  .viewport { height:340px; min-height:260px; padding:16px 4px; }\n  .inspector-pane { width:100%; overflow:visible; border-left:0; border-top:1px solid var(--_vv-border); }\n  .inspector-body { gap:8px; padding:10px; }\n  .inspector-card,.edit-controls,.layer-controls { font-size:12px; }\n  .layer-controls label { min-height:44px; }\n  .layer-controls input { min-width:20px; width:20px; height:20px; min-height:20px; }\n  .notes-strip { min-height:44px; padding:0 10px; }\n  .notes-strip button { min-height:44px; }\n  .status { flex-wrap:wrap; gap:0; padding:4px 8px; }\n  .status-message { width:100%; min-height:18px; }\n  .zoom-controls { justify-content:flex-end; width:100%; }\n  .zoom-controls button { min-height:44px; height:44px; min-width:44px; font-size:11px; }\n  .zoom-controls [data-action=\"in\"],.zoom-controls [data-action=\"out\"] { min-width:44px; font-size:20px; }\n  .zoom { font-size:11px; }\n}\n@media(pointer:coarse) {\n  button,select,input,textarea { min-height:44px; }\n  button { min-width:44px; }\n  summary,.layer-controls label { min-height:44px; line-height:44px; }\n  .ribbon-primary { min-height:52px; height:52px; }\n  .page-picker select,.page-stepper button { min-height:44px; height:44px; }\n  .page-stepper button { min-width:44px; }\n  .ribbon-tabs { min-height:44px; height:44px; }\n  .ribbon-tabs button { min-height:44px; }\n  .ribbon-content { min-height:96px; }\n  .search-group { width:380px; max-width:100%; }\n  .zoom-controls button,.notes-strip button { min-height:44px; height:44px; }\n  .zoom-controls [data-action=\"in\"],.zoom-controls [data-action=\"out\"] { min-width:44px; }\n  .layer-controls input { min-height:20px; }\n}\n/* Suite ribbon: tabs lead directly into command groups, with page navigation inside. */\n.ribbon-tabs { height:40px; }\n.ribbon-tabs button { min-height:39px; padding:8px 16px; }\n.ribbon-content { min-height:104px; padding:4px 4px; }\n.ribbon-primary { height:auto; min-height:92px; width:238px; flex:none; flex-wrap:wrap; justify-content:center; gap:2px; padding:10px 12px 18px; border-right:1px solid var(--_vv-border); position:relative; order:1; }\n.ribbon-primary .page-picker { flex-direction:column; align-items:start; gap:5px; }\n.ribbon-primary .page-picker select { width:160px; max-width:100%; }\n.ribbon-primary .spacer { display:none; }\n.ribbon-primary .local-label { position:absolute; bottom:4px; left:0; width:100%; text-align:center; }\n.search-group { order:2; width:320px; }\n.ribbon-hint { order:3; padding:10px 18px; }\n.ribbon-command { min-width:82px; }\n.pane-close { display:none; }\n@media(max-width:760px) {\n .ribbon-tabs { height:44px; }\n .ribbon-tabs button { min-height:44px; }\n .ribbon-content { min-height:54px; padding:4px 0; }\n .ribbon-primary { min-height:44px; height:44px; width:100%; padding:0 8px; border:0; flex-wrap:nowrap; gap:4px; order:0; }\n .ribbon-primary .page-picker { flex-direction:row; flex:1; align-items:center; gap:8px; }\n .ribbon-primary .page-picker select { flex:1; width:100%; min-width:0; }\n .search-group { flex:0 0 100%; width:100%; min-height:54px; }\n .search-feedback,.group-label { display:none; }\n .ribbon-content { overflow-x:auto; scroll-snap-type:x mandatory; }\n .ribbon-primary,.search-group { scroll-snap-align:start; }\n .workspace { display:flex; position:relative; overflow:hidden; }\n .viewport { flex:1; width:100%; height:100%; min-height:0; padding:16px 4px; }\n .inspector-pane { position:absolute; inset:0 0 0 auto; width:min(320px,100%); z-index:4; overflow:auto; border-left:1px solid var(--_vv-border); box-shadow:-8px 0 24px #0002; }\n .pane-close { display:block; width:44px; height:44px; padding:0; font-size:22px; background:transparent; border:0; }\n .inspector-kind { margin-left:auto; }\n .page-rail { position:absolute; inset:0 auto 0 0; width:180px; max-height:none; z-index:3; border-right:1px solid var(--_vv-border); background:var(--_vv-secondary); }\n .page-list { flex-direction:column; }\n .page-list li { flex:none; }\n .notes-strip { display:none; }\n .status { min-height:48px; padding:2px 8px; }\n .status-message { display:none; }\n}\n.toolbar { position:relative; }\n.ribbon-tools { display:flex; flex:none; order:0; }\n.tools-content { display:flex; align-items:stretch; }\n.ribbon-tools>summary { display:none; }\n.ribbon-command { font-size:12px; min-width:88px; }\n.ribbon-hint { font-size:12px; line-height:20px; flex:1; }\n.group-label { font-size:11px; line-height:14px; }\n.inspector-card,.edit-controls,.layer-controls { font-size:12px; line-height:18px; }\n.selection-hint,.document-card dl { font-size:12px; }\n.pane-heading { font-size:12px; }\n.inspector-pane .pane-heading { position:sticky; top:0; z-index:1; background:var(--_vv-secondary); flex:none; }\n.status .notes-strip { border:0; padding:0 8px; background:transparent; min-height:28px; }\n.status .notes-strip>span { display:none; }\n.status-message { flex:1; }\n@media(max-width:760px) {\n #home-panel { overflow:visible; min-height:54px; padding:4px; }\n .ribbon-primary { width:calc(100% - 92px); min-width:0; flex:1; padding:0 4px; }\n .ribbon-primary .page-picker { font-size:0; gap:0; }\n .ribbon-primary .page-picker select { font-size:12px; }\n .ribbon-tools { display:block; flex:0 0 84px; width:84px; order:1; }\n .ribbon-tools>summary { display:flex; min-height:44px; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--_vv-border); background:var(--_vv-surface); border-radius:4px; font-size:12px; cursor:pointer; list-style:none; }\n .ribbon-tools>summary::-webkit-details-marker { display:none; }\n .ribbon-tools .tools-content { display:flex; position:absolute; top:100%; left:4px; right:4px; z-index:6; flex-direction:column; padding:12px; gap:12px; border:1px solid var(--_vv-border); border-radius:4px; background:var(--_vv-surface); box-shadow:0 12px 28px #0003; max-height:60vh; overflow:auto; }\n .ribbon-tools:not([open])>.tools-content { display:none; }\n .ribbon-tools .ribbon-group { display:flex; width:100%; min-height:64px; border:0; padding:0; }\n .ribbon-tools .ribbon-actions { justify-content:space-between; }\n .ribbon-tools .ribbon-command { min-width:88px; font-size:12px; }\n .ribbon-tools .search-group { order:1; flex:auto; }\n .ribbon-tools .search-feedback { display:block; }\n .status { flex-wrap:nowrap; gap:4px; min-height:48px; }\n .zoom-controls { width:auto; flex:1; gap:0; }\n .zoom-divider { margin:0; }\n .status .notes-strip { display:none; }\n}\n@media(pointer:coarse) { .ribbon-tabs {height:45px;min-height:45px;} .ribbon-tabs button {min-height:44px;height:44px;} }\n@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }\n";

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.2",
-	"description": "Placeholder for the Visio beta viewer. No viewer API is included yet.",
+	"version": "0.1.1",
+	"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.1"
+	},
+	"peerDependencies": {
+		"react": ">=18"
 	}
 }

package/index.js

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