ooxml-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,35 @@
+import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
+import { registerControls } from './chunk-5UKGBJXE.js';
+export { CONTROL_DEFINERS, defineButton, defineCheckbox, defineDialog, defineRibbonGroup, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineToolbar, registerControls } from './chunk-5UKGBJXE.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-7MCSBDSU.js';
+import { definePresence } from './chunk-RLPL7Q6J.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
+import { defineSmartArt } from './chunk-KJV76AB7.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-KJV76AB7.js';
+export { CONTRACT_REVISION } from './chunk-EY266IK3.js';
+
+// src/index.ts
+var OFFICE_UI_TAGS = [
+  "office-ui-icon",
+  "office-ui-button",
+  "office-ui-checkbox",
+  "office-ui-switch",
+  "office-ui-select",
+  "office-ui-ribbon-group",
+  "office-ui-toolbar",
+  "office-ui-dialog",
+  "office-ui-status-bar",
+  "office-ui-status-item",
+  "office-ui-presence",
+  "office-ui-smartart"
+];
+function registerOfficeUi(options = {}) {
+  if (typeof window === "undefined" || !window.customElements) return;
+  if (options.theme !== false) installOfficeUiTheme();
+  registerControls();
+  definePresence();
+  defineSmartArt();
+}
+
+export { OFFICE_UI_TAGS, registerOfficeUi };

package/dist/presence.d.ts

@@ -0,0 +1,31 @@
+/**
+ * One collaborator as the avatar stack needs it. This is a deliberately minimal structural
+ * view of an awareness entry (identity, colour, activity); core's `collab` awareness model
+ * satisfies it, and `participantsFromAwareness` adapts raw `{ user }` awareness states.
+ */
+export interface PresenceParticipant {
+    id: string;
+    name: string;
+    /** CSS colour of the participant's cursor and avatar ring. */
+    color?: string;
+    status?: 'active' | 'idle' | 'away';
+    /** The local user: sorted first and labelled "(you)". */
+    self?: boolean;
+}
+export type OfficePresenceSelectEvent = CustomEvent<{
+    id: string;
+}>;
+/** Adapt awareness-like states (`{ clientId?, user: { id?, name, color? } }`) to participants. */
+export declare function participantsFromAwareness(states: Iterable<{
+    clientId?: string | number;
+    user?: Partial<PresenceParticipant>;
+} | undefined>, selfId?: string): PresenceParticipant[];
+export declare const initialsOf: (name: string) => string;
+/**
+ * Presence avatar stack. `participants` property (array of `PresenceParticipant`), `max`
+ * attribute (visible avatars, default 4; the rest collapse into a "+N" chip). `role="list"`
+ * with one button per person (accessible name = name, status and "(you)"); activating one emits
+ * `office-presence-select` `{ id }` so the host can follow that user. Rendering carries no
+ * identity beyond what the host passes in.
+ */
+export declare const definePresence: import("./registry.js").Definer;

package/dist/presence.js

@@ -0,0 +1,2 @@
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
+import './chunk-EY266IK3.js';

package/dist/registry.d.ts

@@ -0,0 +1,18 @@
+/** Internal UI ABI, independent of package versions. Bump for incompatible contracts. */
+export declare const CONTRACT_REVISION = 1;
+/** Throws when a tag is already defined by an incompatible ooxml-ui build. */
+export declare function assertContract(registry: Pick<CustomElementRegistry, 'get'>, tag: string): void;
+/**
+ * Define `tag` once per registry. Classes are built lazily inside `make`, so importing this
+ * package never touches `HTMLElement` (SSR-safe); only a define call needs a DOM.
+ */
+export declare function defineOnce(registry: CustomElementRegistry, tag: string, make: () => CustomElementConstructor): void;
+export type Definer = ((registry?: CustomElementRegistry) => void) & {
+    readonly tag: string;
+};
+/** The registry of the current window, or undefined where there is no DOM (SSR). */
+export declare function browserRegistry(): CustomElementRegistry | undefined;
+/** Wrap a per-tag `make` factory into a public, SSR-safe, idempotent definer. */
+export declare function definer(tag: string, make: () => CustomElementConstructor): Definer;
+/** Bubbling, composed event: crosses shadow boundaries like the native ones do. */
+export declare function emit<T>(host: HTMLElement, type: string, detail: T, cancelable?: boolean): boolean;

package/dist/ribbon.d.ts

@@ -0,0 +1,8 @@
+/** Labelled group of ribbon commands: `role="group"`, `label` attribute is caption and name. */
+export declare const defineRibbonGroup: import("./registry.js").Definer;
+/**
+ * `role="toolbar"` container. Left/Right/Home/End move focus between enabled direct or
+ * group-nested controls (Up/Down instead when `aria-orientation="vertical"`).
+ * All items stay in the tab order: roving tabindex is not implemented yet.
+ */
+export declare const defineToolbar: import("./registry.js").Definer;

package/dist/select.d.ts

@@ -0,0 +1,13 @@
+export interface OfficeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Single-select dropdown. Properties: `options` (array), `value`, `disabled`, `selectedIndex`;
+ * attributes `value`, `disabled`, `aria-label`. Trigger has `role="combobox"` and the popup is a
+ * `listbox`. Keyboard: ArrowDown/Up (open, move), Home, End, Enter/Space (choose), Escape
+ * (close), printable keys (typeahead); disabled options are skipped. `input` then `change`
+ * bubble when the user picks; setting a property is silent.
+ */
+export declare const defineSelect: import("./registry.js").Definer;

package/dist/smartart-svg.d.ts

@@ -0,0 +1,18 @@
+import type { DiagramColor, DiagramDrawing } from 'ooxml-core/diagram';
+export interface SmartArtRenderReport {
+    shapeCount: number;
+    /** Preset geometries drawn as a plain rectangle because no outline is available here. */
+    approximatedGeometries: string[];
+    /** Shapes that carry 3D scene data: drawn flat, the 3D is kept only in the source part. */
+    flattened3d: number;
+    /** Fill kinds drawn as a neutral placeholder (gradient is approximated by its first stop). */
+    approximatedFills: string[];
+}
+/** Theme colours the host resolved (`accent1` -> `#4472c4`); unresolved scheme colours are grey. */
+export type SchemeColors = Readonly<Record<string, string>>;
+export declare function colorToCss(color: DiagramColor | undefined, scheme: SchemeColors): string | undefined;
+/** Render a core `DiagramDrawing` into an `<svg>`: pure DOM construction, no markup injection. */
+export declare function renderDiagramDrawing(doc: Document, drawing: DiagramDrawing, scheme?: SchemeColors): {
+    svg: SVGSVGElement;
+    report: SmartArtRenderReport;
+};

package/dist/smartart.d.ts

@@ -0,0 +1,14 @@
+import { type SmartArtRenderReport } from './smartart-svg.js';
+export type { SchemeColors, SmartArtRenderReport } from './smartart-svg.js';
+export { renderDiagramDrawing } from './smartart-svg.js';
+export type OfficeSmartArtRenderEvent = CustomEvent<SmartArtRenderReport>;
+/**
+ * `<office-ui-smartart>` draws the cached drawing of a SmartArt diagram (core
+ * `DiagramDrawing`, from `ooxml-core/diagram`) as SVG. Set `drawing` (and
+ * optionally `schemeColors`, resolved theme colours such as `{ accent1: '#4472c4' }`);
+ * `label` becomes the accessible name (`role="img"`). It never re-lays-out a diagram: it shows
+ * what the producing application last computed. Approximations (preset outlines drawn as
+ * rectangles, gradient and pattern fills, 3D) are reported honestly in the
+ * `office-smartart-render` event detail and in `data-approximated` attributes, never hidden.
+ */
+export declare const defineSmartArt: import("./registry.js").Definer;

package/dist/smartart.js

@@ -0,0 +1,2 @@
+export { defineSmartArt, renderDiagramDrawing } from './chunk-KJV76AB7.js';
+import './chunk-EY266IK3.js';

package/dist/status-bar.d.ts

@@ -0,0 +1,11 @@
+export type OfficeStatusActivateEvent = CustomEvent<{
+    id: string;
+}>;
+/** Status bar container: `role="group"` named by its `label` attribute (default "Status"). */
+export declare const defineStatusBar: import("./registry.js").Definer;
+/**
+ * One status entry: `label` and `value` attributes (textual, so assistive tech reads both).
+ * With the `interactive` attribute it renders a button and emits `office-status-activate`
+ * `{ id }` (`id` attribute) on click, Enter or Space; zoom or language pickers are examples.
+ */
+export declare const defineStatusItem: import("./registry.js").Definer;

package/dist/styles.d.ts

@@ -0,0 +1,8 @@
+/** Attach scoped CSS to a shadow root: a constructed stylesheet when available, else a `<style>`. */
+export declare function attachStyles(root: ShadowRoot, css: string): void;
+/**
+ * Rules every control repeats: `hidden`, the coarse-pointer touch target and the forced-colors
+ * focus ring. Prepended to each control's own CSS by `controlCss`.
+ */
+export declare const COMMON_CONTROL_CSS = "\n:host([hidden]) { display: none !important; }\n@media (pointer: coarse), (max-width: 767px) {\n\t:host { --office-target-size: 44px; }\n}\n@media (forced-colors: active) {\n\t:host(:focus-visible), :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n";
+export declare const controlCss: (css: string) => string;

package/dist/theme.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Theme-token foundation. Custom properties cross shadow boundaries, so one `<style>` in the
+ * document head themes every control. Every token also has a fallback inside each control, so
+ * installing the theme is optional; a host overrides any token on `:root` or on a container.
+ */
+export declare const THEME_STYLE_ID = "office-ui-theme";
+export declare const THEME_CSS = "\n:root {\n\t--office-foreground: #1f2937;\n\t--office-muted-foreground: #6b7280;\n\t--office-background: #ffffff;\n\t--office-surface: #f3f4f6;\n\t--office-border: #d1d5db;\n\t--office-accent: #2563eb;\n\t--office-accent-foreground: #ffffff;\n\t--office-ring: #2563eb;\n\t--office-danger: #b91c1c;\n\t--office-target-size: 28px;\n\t--office-radius: 4px;\n\t--office-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n}\n@media (prefers-color-scheme: dark) {\n\t:root:not([data-office-theme=\"light\"]) {\n\t--office-foreground: #f9fafb;\n\t--office-muted-foreground: #9ca3af;\n\t--office-background: #111827;\n\t--office-surface: #1f2937;\n\t--office-border: #374151;\n\t--office-accent: #6366f1;\n\t--office-ring: #818cf8;\n\t--office-danger: #f87171;\n\t}\n}\n:root[data-office-theme=\"dark\"] {\n\t--office-foreground: #f9fafb;\n\t--office-muted-foreground: #9ca3af;\n\t--office-background: #111827;\n\t--office-surface: #1f2937;\n\t--office-border: #374151;\n\t--office-accent: #6366f1;\n\t--office-ring: #818cf8;\n\t--office-danger: #f87171;\n}\n@media (pointer: coarse), (max-width: 767px) {\n\t:root { --office-target-size: 44px; }\n}\n@media (forced-colors: active) {\n\t:root {\n\t\t--office-foreground: CanvasText;\n\t\t--office-muted-foreground: GrayText;\n\t\t--office-background: Canvas;\n\t\t--office-surface: Canvas;\n\t\t--office-border: CanvasText;\n\t\t--office-accent: Highlight;\n\t\t--office-accent-foreground: HighlightText;\n\t\t--office-ring: Highlight;\n\t\t--office-danger: CanvasText;\n\t}\n}\n";
+/** Idempotent. Browser-only; returns false (and does nothing) without a document. */
+export declare function installOfficeUiTheme(doc?: Document | undefined): boolean;

package/dist/theme.js

@@ -0,0 +1 @@
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';

package/package.json

@@ -0,0 +1,85 @@
+{
+	"name": "ooxml-ui",
+	"version": "0.1.1",
+	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
+	"keywords": [
+		"custom-elements",
+		"docx",
+		"office",
+		"pptx",
+		"ribbon",
+		"web-components"
+	],
+	"homepage": "https://github.com/ChristopherVR/ooxml/tree/main/packages/ui#readme",
+	"bugs": {
+		"url": "https://github.com/ChristopherVR/ooxml/issues"
+	},
+	"license": "Apache-2.0",
+	"author": "ChristopherVR",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ChristopherVR/ooxml.git",
+		"directory": "packages/ui"
+	},
+	"files": [
+		"dist",
+		"LICENSE",
+		"NOTICE",
+		"README.md"
+	],
+	"type": "module",
+	"sideEffects": false,
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./theme": {
+			"types": "./dist/theme.d.ts",
+			"import": "./dist/theme.js"
+		},
+		"./icons": {
+			"types": "./dist/icons.d.ts",
+			"import": "./dist/icons.js"
+		},
+		"./controls": {
+			"types": "./dist/controls.d.ts",
+			"import": "./dist/controls.js"
+		},
+		"./presence": {
+			"types": "./dist/presence.d.ts",
+			"import": "./dist/presence.js"
+		},
+		"./smartart": {
+			"types": "./dist/smartart.d.ts",
+			"import": "./dist/smartart.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "node scripts/build.mjs",
+		"prepack": "node scripts/ensure-built.mjs",
+		"typecheck": "tsc -p tsconfig.json --noEmit",
+		"test": "vitest run",
+		"test:package": "node scripts/package-smoke.mjs"
+	},
+	"dependencies": {
+		"ooxml-core": "^0.2.0"
+	},
+	"devDependencies": {
+		"@types/jsdom": "^21.1.7",
+		"jsdom": "^26.1.0",
+		"tsup": "^8.5.1",
+		"typescript": "^5.9.3",
+		"vitest": "^3.2.0"
+	},
+	"engines": {
+		"node": ">=22"
+	}
+}