diff --git a/.changeset/shape-text-creates-txbody.md b/.changeset/shape-text-creates-txbody.md new file mode 100644 index 00000000..3eca3d05 --- /dev/null +++ b/.changeset/shape-text-creates-txbody.md @@ -0,0 +1,11 @@ +--- +"@office-kit/pptx": patch +--- + +fix: setShapeText / appendShapeText now add text to a shape that has no text body + +Previously, setting text on a shape authored without one (e.g. `addSlideShape` +called without `text`) threw `shape "…" has no `. PowerPoint always +gives an autoshape a text body so you can click in and type, so these functions +now create the body on demand and populate it, matching that behavior. Picture / +table shapes still throw, since they are not text-bearing. diff --git a/site/src/lib/components/SiteHeader.svelte b/site/src/lib/components/SiteHeader.svelte index 3b9980a4..cd7175db 100644 --- a/site/src/lib/components/SiteHeader.svelte +++ b/site/src/lib/components/SiteHeader.svelte @@ -7,6 +7,7 @@ { path: '/docs/getting-started', label: 'Docs' }, { path: '/repl', label: 'REPL' }, { path: '/playground', label: 'Playground' }, + { path: '/editor', label: 'Editor' }, { path: '/api', label: 'API' }, { path: 'https://github.com/office-kit/pptx', label: 'GitHub', external: true }, ]; diff --git a/site/src/lib/editor/EditorApp.svelte b/site/src/lib/editor/EditorApp.svelte new file mode 100644 index 00000000..9177171b --- /dev/null +++ b/site/src/lib/editor/EditorApp.svelte @@ -0,0 +1,124 @@ + + + + +
+ + +
+ + + +
+ + + {#if editor.paletteOpen} + + {/if} + {#if editor.activeDialog} + + {/if} + {#if editor.contextMenu} + + {/if} + +
+ + diff --git a/site/src/lib/editor/README.md b/site/src/lib/editor/README.md new file mode 100644 index 00000000..f590858f --- /dev/null +++ b/site/src/lib/editor/README.md @@ -0,0 +1,104 @@ +# @office-kit/pptx — Editor + +A PowerPoint-style editing UI built **entirely on the `@office-kit/pptx` public +API**, in Svelte 5 + SvelteKit. It lives at the `/editor` route. + +The design goal is _MS Office-like operation covering every pptx expression the +library can author_ — and, crucially, a **mechanism that guarantees that +coverage** rather than leaving it to diligence. + +## The coverage guarantee (why this can't silently miss a feature) + +The library exposes ~440 public functions. The ones a UI must surface as an +**operation** are the _mutating_ (state-changing) exports — every `add*`, +`set*`, `clear*`, `remove*`, `insert*`, … There are **147** of them today. + +That set is the coverage target, and it is enforced end-to-end: + +1. **`manifest/generate.mjs`** reads the library source, enumerates the mutating + exports by verb prefix, parses each signature into an operand + parameter + schema, and writes **`manifest/capabilities.generated.json`** — 147 entries. +2. **`core/registry.ts`** turns _every_ manifest entry into a runnable Command + that dispatches to the real library function by name (`pptx[id](operand, +…args)`). No stubs: a command is bound to an actual callable or it fails. +3. **`test/editor-capability-coverage.test.ts`** (in the library's own vitest + suite) independently re-derives the mutating-export set from the compiled + library and asserts it equals the manifest exactly, and that every id is a + real callable. If someone adds a new `setX` authoring function, **`pnpm +test` fails** until it is manifested — and therefore wired into the editor. +4. **`test/editor-command-smoke.test.ts`** drives the registry end-to-end + (author a shape → fill → move → save → reload) to prove the wiring executes, + not just type-checks. + +So implementation effort can never quietly drop a capability: the gate is the +same `pnpm test` that guards the library. + +## How a capability reaches the user + +Every capability is reachable by at least one path, in increasing ergonomics: + +- **Command palette** (`Ctrl/Cmd+K`) — searchable list of all 147, always + available. The guaranteed floor. +- **Properties panel** — auto-generated from the manifest: given the current + selection it lists _every_ capability that can act on it, grouped by category. + Exhaustive by construction. +- **Ribbon** (`ribbon/config.ts`) — a PowerPoint-style tab/group layout over the + common commands, with contextual tabs (Shape Format, Table) that appear with + the matching selection. Ergonomics for the common path, not the coverage + surface. +- **Direct manipulation** (`canvas/SlideCanvas.svelte`) — the shape moves for + real on every frame (`applyLive` re-renders the slide via the preview renderer, + ~6ms; the whole gesture is one undo step committed on release), with: + - **smart-guide snapping** (`canvas/snapping.ts`) — edges/centres snap to other + shapes and the slide, drawing pink guide lines; + - **multi-select** via marquee (rubber-band on empty canvas) and Shift-click, + with group move; + - handles to resize, a top handle to rotate (Shift = 15° steps), double-click + to edit text; + - **keyboard**: arrow-nudge (Shift = coarse), Ctrl+D duplicate, Ctrl+C/X/V + copy·cut·paste, Ctrl+A select-all, Delete, Ctrl+±/0 zoom; + - **zoom / fit** (auto-fit to the viewport, manual zoom in the status bar); + - a **right-click context menu** (`ui/ContextMenu.svelte`). + + These all funnel through the controller's actions and the same undoable + command path, so direct manipulation and the ribbon never diverge. + +## Argument collection + +Commands that need arguments open a dialog (`ui/CommandDialog.svelte`) built from +the parameter schema by `ui/ParamField.svelte`, which renders a control per +kind (string / number / EMU-with-units / color / boolean / enum) and **recurses +into nested object and array schemas** (see the Gradient / Transition dialogs). +Capabilities whose options are enriched with a schema get a field-based form; +the rest fall back to a structured-JSON editor, so the long tail stays usable +while remaining reachable. Enriched schemas come from two places, merged in +`manifest/overrides.ts` (hand wins per id): + +- **`manifest/overrides.generated.ts`** — schemas produced by a one-off pass + that read the library's option types (exact enum members, nested object/array + fields for `TextFormat`, `TableCellBorders`, `ArrowOptions`, …). Rebuild with + `manifest/build-generated-overrides.mjs`, which **validates that each + override's top-level parameter names match the generated capability** — a + mismatch would make the registry pass the wrong positional args, so it is + rejected rather than emitted. +- **hand entries in `overrides.ts`** — flagship dialogs (gradient, shadow, + transition, …) and label/ribbon tuning. + +## State & undo + +`core/document.svelte.ts` holds the live `PresentationData` in `$state.raw` and +drives re-render with a `version` counter (the library mutates its object graph +in place; deep-proxying fights that). Undo/redo snapshots by **serializing to +`.pptx` bytes** (`savePresentation`/`loadPresentation`) — the library's +guaranteed round-trip — because the model's real state hangs off a symbol-keyed +`OpcPackage` that `structuredClone` silently corrupts. Edits stay synchronous; +snapshots are taken asynchronously (one per discrete gesture). + +## Regenerating the manifest + +``` +node site/src/lib/editor/manifest/generate.mjs +``` + +Run this whenever the library's authoring surface changes; the coverage test +tells you when it is needed. diff --git a/site/src/lib/editor/canvas/SlideCanvas.svelte b/site/src/lib/editor/canvas/SlideCanvas.svelte new file mode 100644 index 00000000..07e0e269 --- /dev/null +++ b/site/src/lib/editor/canvas/SlideCanvas.svelte @@ -0,0 +1,578 @@ + + + + + + + diff --git a/site/src/lib/editor/canvas/geometry.ts b/site/src/lib/editor/canvas/geometry.ts new file mode 100644 index 00000000..8f27bfcf --- /dev/null +++ b/site/src/lib/editor/canvas/geometry.ts @@ -0,0 +1,77 @@ +// Canvas ↔ slide coordinate helpers. The slide is authored in EMU; the canvas +// paints it at some pixel size. These convert between the two and express a +// shape's box as percentages of the slide so overlays stay aligned at any +// zoom without re-measuring. + +import { + getShapeBoundsResolved, + getShapeId, + getShapeRotation, + getSlideSize, +} from '@office-kit/pptx'; +import type { PresentationData, SlideData, SlideShapeData } from '@office-kit/pptx'; + +export const DEFAULT_SLIDE = { width: 12192000, height: 6858000 }; + +export interface Box { + readonly id: number; + /** Percentages of the slide (0–100). */ + readonly left: number; + readonly top: number; + readonly width: number; + readonly height: number; + readonly rotation: number; + readonly shape: SlideShapeData; +} + +export interface SlideMetrics { + readonly widthEmu: number; + readonly heightEmu: number; +} + +export function slideMetrics(pres: PresentationData): SlideMetrics { + const size = getSlideSize(pres); + return { + widthEmu: (size?.width as unknown as number) ?? DEFAULT_SLIDE.width, + heightEmu: (size?.height as unknown as number) ?? DEFAULT_SLIDE.height, + }; +} + +export function shapeBoxes( + pres: PresentationData, + slide: SlideData, + shapes: readonly SlideShapeData[], +): Box[] { + const m = slideMetrics(pres); + const out: Box[] = []; + for (const shape of shapes) { + const b = getShapeBoundsResolved(pres, shape); + if (!b) continue; + out.push({ + id: getShapeId(shape), + left: ((b.x as unknown as number) / m.widthEmu) * 100, + top: ((b.y as unknown as number) / m.heightEmu) * 100, + width: ((b.w as unknown as number) / m.widthEmu) * 100, + height: ((b.h as unknown as number) / m.heightEmu) * 100, + rotation: safeRotation(shape), + shape, + }); + } + return out; +} + +function safeRotation(shape: SlideShapeData): number { + try { + return getShapeRotation(shape); + } catch { + return 0; + } +} + +/** EMU-per-pixel for a stage rendered at `rectW × rectH` pixels. */ +export function emuPerPx(m: SlideMetrics, rectW: number, rectH: number) { + return { + x: rectW ? m.widthEmu / rectW : 1, + y: rectH ? m.heightEmu / rectH : 1, + }; +} diff --git a/site/src/lib/editor/canvas/snapping.ts b/site/src/lib/editor/canvas/snapping.ts new file mode 100644 index 00000000..5e14a573 --- /dev/null +++ b/site/src/lib/editor/canvas/snapping.ts @@ -0,0 +1,113 @@ +// Smart-guide snapping — the behaviour that makes dragging feel precise. +// +// When a shape's edge or centre lines up (within a small threshold) with +// another shape's edge/centre or the slide's edges/centre, we nudge it into +// exact alignment and report a guide line to draw. All coordinates are EMU. + +export interface Rect { + x: number; + y: number; + w: number; + h: number; +} + +export interface Guide { + /** 'v' = vertical line at x=pos; 'h' = horizontal line at y=pos. */ + readonly o: 'v' | 'h'; + readonly pos: number; + /** Span on the perpendicular axis (for drawing a tidy segment). */ + readonly from: number; + readonly to: number; +} + +export interface SnapResult { + readonly x: number; + readonly y: number; + readonly guides: readonly Guide[]; +} + +interface Anchor { + readonly value: number; + readonly kind: 'start' | 'center' | 'end'; +} + +function xAnchors(r: Rect): Anchor[] { + return [ + { value: r.x, kind: 'start' }, + { value: r.x + r.w / 2, kind: 'center' }, + { value: r.x + r.w, kind: 'end' }, + ]; +} +function yAnchors(r: Rect): Anchor[] { + return [ + { value: r.y, kind: 'start' }, + { value: r.y + r.h / 2, kind: 'center' }, + { value: r.y + r.h, kind: 'end' }, + ]; +} + +/** + * Snap `moving` against `others` + the slide box. Returns the adjusted x/y and + * the guide lines to render. `thresh` is the snap distance in EMU. + */ +export function snapMove( + moving: Rect, + others: readonly Rect[], + slide: { w: number; h: number }, + thresh: number, +): SnapResult { + const targets: Rect[] = [{ x: 0, y: 0, w: slide.w, h: slide.h }, ...others]; + + // Best snap per axis (smallest delta wins). + let bestX: { delta: number; pos: number; targets: Rect[] } | null = null; + let bestY: { delta: number; pos: number; targets: Rect[] } | null = null; + + for (const ma of xAnchors(moving)) { + for (const t of targets) { + for (const ta of xAnchors(t)) { + const delta = ta.value - ma.value; + if (Math.abs(delta) <= thresh && (!bestX || Math.abs(delta) < Math.abs(bestX.delta))) { + bestX = { delta, pos: ta.value, targets: [t] }; + } else if (bestX && ta.value === bestX.pos) { + bestX.targets.push(t); + } + } + } + } + for (const ma of yAnchors(moving)) { + for (const t of targets) { + for (const ta of yAnchors(t)) { + const delta = ta.value - ma.value; + if (Math.abs(delta) <= thresh && (!bestY || Math.abs(delta) < Math.abs(bestY.delta))) { + bestY = { delta, pos: ta.value, targets: [t] }; + } else if (bestY && ta.value === bestY.pos) { + bestY.targets.push(t); + } + } + } + } + + const x = moving.x + (bestX?.delta ?? 0); + const y = moving.y + (bestY?.delta ?? 0); + const snapped: Rect = { ...moving, x, y }; + + const guides: Guide[] = []; + if (bestX) { + const ys = [ + snapped.y, + snapped.y + snapped.h, + ...bestX.targets.flatMap((t) => [t.y, t.y + t.h]), + ]; + guides.push({ o: 'v', pos: bestX.pos, from: Math.min(...ys), to: Math.max(...ys) }); + } + if (bestY) { + const xs = [ + snapped.x, + snapped.x + snapped.w, + ...bestY.targets.flatMap((t) => [t.x, t.x + t.w]), + ]; + guides.push({ o: 'h', pos: bestY.pos, from: Math.min(...xs), to: Math.max(...xs) }); + } + + return { x, y, guides }; +} diff --git a/site/src/lib/editor/core/context.ts b/site/src/lib/editor/core/context.ts new file mode 100644 index 00000000..3031bb04 --- /dev/null +++ b/site/src/lib/editor/core/context.ts @@ -0,0 +1,17 @@ +// Svelte context plumbing so any editor component can reach the controller +// without prop-drilling. The root sets it; everything else gets it. + +import { getContext, setContext } from 'svelte'; +import type { EditorController } from './controller.svelte.ts'; + +const KEY = Symbol('ok-editor'); + +export function setEditor(controller: EditorController): void { + setContext(KEY, controller); +} + +export function getEditor(): EditorController { + const c = getContext(KEY); + if (!c) throw new Error('getEditor() called outside '); + return c; +} diff --git a/site/src/lib/editor/core/controller.svelte.ts b/site/src/lib/editor/core/controller.svelte.ts new file mode 100644 index 00000000..b0335e25 --- /dev/null +++ b/site/src/lib/editor/core/controller.svelte.ts @@ -0,0 +1,265 @@ +// The editor controller — the façade the UI talks to. +// +// It owns the document, runs commands through the registry, and holds the +// transient UI state that several components share (which command dialog is +// open, whether the palette is showing, the toast queue). Ribbon buttons, +// context menus and the palette all funnel through `invoke` / `runOrPrompt`, +// so there is exactly one path from "user intent" to "library call". + +import { + copyShape, + getShapeBoundsResolved, + getShapeId, + getSlideShapes, + inches, + removeShape, + setShapeBounds, + type SlideShapeData, +} from '@office-kit/pptx'; +import { getCommand, type Command, type CommandContext } from './registry.ts'; +import { capabilityById } from '../manifest/index.ts'; +import { EditorDocument } from './document.svelte.ts'; +import { selectedShapeIds } from './selection.ts'; + +export interface Toast { + readonly id: number; + readonly kind: 'info' | 'error'; + readonly message: string; +} + +export interface ContextMenuState { + readonly x: number; + readonly y: number; +} + +/** What copy/cut stashed: the slide + shape ids to clone on paste. */ +interface Clipboard { + slideIndex: number; + shapeIds: number[]; +} + +const PASTE_OFFSET = inches(0.25) as unknown as number; + +let toastSeq = 0; + +export class EditorController { + readonly doc = new EditorDocument(); + + /** Command whose argument dialog is currently open (null = none). */ + activeDialog = $state(null); + paletteOpen = $state(false); + toasts = $state([]); + + get ctx(): CommandContext { + return { doc: this.doc }; + } + + command(id: string): Command | undefined { + return getCommand(id); + } + + canRun(id: string): boolean { + const cmd = getCommand(id); + return cmd ? cmd.canRun(this.ctx) : false; + } + + /** Execute a command immediately with fully-supplied args. */ + invoke(id: string, args: Record = {}): unknown { + const cmd = getCommand(id); + if (!cmd) { + this.toast('error', `Unknown command: ${id}`); + return undefined; + } + if (!cmd.canRun(this.ctx)) { + const cap = capabilityById.get(id); + this.toast('error', `${cap?.labelEn ?? id}: select a ${cap?.operand ?? 'target'} first.`); + return undefined; + } + try { + return cmd.run(this.ctx, args); + } catch (err) { + this.toast('error', `${id}: ${(err as Error).message}`); + return undefined; + } + } + + /** + * Run a command, but if it still needs user-supplied required arguments, + * open its argument dialog instead. `presetArgs` can pre-fill some params + * (e.g. a color chosen in the ribbon). + */ + runOrPrompt(id: string, presetArgs: Record = {}): void { + const cmd = getCommand(id); + if (!cmd) return; + const needs = cmd.params.filter((p) => !p.optional && presetArgs[p.name] === undefined); + if (needs.length === 0) { + this.invoke(id, presetArgs); + } else { + this.pendingPreset = presetArgs; + this.activeDialog = id; + } + } + + /** Args seeded into a dialog opened via runOrPrompt. */ + pendingPreset: Record = {}; + + closeDialog(): void { + this.activeDialog = null; + this.pendingPreset = {}; + } + + togglePalette(open?: boolean): void { + this.paletteOpen = open ?? !this.paletteOpen; + } + + toast(kind: Toast['kind'], message: string): void { + const id = ++toastSeq; + this.toasts = [...this.toasts, { id, kind, message }]; + setTimeout( + () => { + this.toasts = this.toasts.filter((t) => t.id !== id); + }, + kind === 'error' ? 6000 : 3000, + ); + } + + // --- Zoom -------------------------------------------------------------- + /** Canvas zoom multiplier (1 = fit-ish base). */ + zoom = $state(1); + /** When set by the canvas, `fit` recomputes to this multiplier. */ + fitZoom = $state(1); + + setZoom(z: number): void { + this.zoom = Math.max(0.1, Math.min(z, 5)); + } + zoomIn(): void { + this.setZoom(this.zoom * 1.2); + } + zoomOut(): void { + this.setZoom(this.zoom / 1.2); + } + zoomFit(): void { + this.setZoom(this.fitZoom); + } + zoomReset(): void { + this.setZoom(1); + } + + // --- Context menu ------------------------------------------------------ + contextMenu = $state(null); + openContextMenu(x: number, y: number): void { + this.contextMenu = { x, y }; + } + closeContextMenu(): void { + this.contextMenu = null; + } + + // --- Clipboard & shape actions ----------------------------------------- + #clipboard: Clipboard | null = null; + + /** Resolve the currently selected shapes to live objects. */ + selectedShapes(): SlideShapeData[] { + const sel = this.doc.selection; + const ids = selectedShapeIds(sel); + return ids + .map((id) => this.doc.shapeById(sel.slideIndex, id)) + .filter((s): s is SlideShapeData => s != null); + } + + selectAllShapes(): void { + const slideIndex = this.doc.selection.slideIndex; + const slide = this.doc.slideAt(slideIndex); + if (!slide) return; + const ids = getSlideShapes(slide).map((s) => getShapeId(s)); + if (ids.length) this.doc.select({ kind: 'shape', slideIndex, shapeIds: ids }); + } + + deleteSelection(): void { + const shapes = this.selectedShapes(); + if (!shapes.length) return; + this.doc.transact('Delete', () => { + for (const s of shapes) removeShape(s); + }); + this.doc.clearShapeSelection(); + } + + /** Clone shapes onto `slide`, offset, and return the new ids. */ + #cloneOnto(shapes: SlideShapeData[], slideIndex: number, offset: number): number[] { + const slide = this.doc.slideAt(slideIndex); + if (!slide) return []; + const newIds: number[] = []; + for (const src of shapes) { + const copy = copyShape(slide, src); + const b = getShapeBoundsResolved(this.doc.pres, copy); + if (b) { + setShapeBounds(copy, { + x: ((b.x as unknown as number) + offset) as never, + y: ((b.y as unknown as number) + offset) as never, + w: b.w, + h: b.h, + }); + } + newIds.push(getShapeId(copy)); + } + return newIds; + } + + duplicateSelection(): void { + const shapes = this.selectedShapes(); + if (!shapes.length) return; + const slideIndex = this.doc.selection.slideIndex; + const newIds = this.doc.transact('Duplicate', () => + this.#cloneOnto(shapes, slideIndex, PASTE_OFFSET), + ); + if (newIds.length) this.doc.select({ kind: 'shape', slideIndex, shapeIds: newIds }); + } + + copySelection(): void { + const sel = this.doc.selection; + const ids = selectedShapeIds(sel); + if (!ids.length) return; + this.#clipboard = { slideIndex: sel.slideIndex, shapeIds: [...ids] }; + this.toast('info', `Copied ${ids.length} shape${ids.length > 1 ? 's' : ''}`); + } + + cutSelection(): void { + this.copySelection(); + this.deleteSelection(); + } + + paste(): void { + const clip = this.#clipboard; + if (!clip) return; + const sources = clip.shapeIds + .map((id) => this.doc.shapeById(clip.slideIndex, id)) + .filter((s): s is SlideShapeData => s != null); + if (!sources.length) return; + const slideIndex = this.doc.selection.slideIndex; + const newIds = this.doc.transact('Paste', () => + this.#cloneOnto(sources, slideIndex, PASTE_OFFSET), + ); + if (newIds.length) this.doc.select({ kind: 'shape', slideIndex, shapeIds: newIds }); + } + + hasClipboard(): boolean { + return this.#clipboard != null; + } + + /** Move all selected shapes by an EMU delta as one undo step. */ + nudge(dxEmu: number, dyEmu: number): void { + const shapes = this.selectedShapes(); + if (!shapes.length) return; + this.doc.transact('Move', () => { + for (const s of shapes) { + const b = getShapeBoundsResolved(this.doc.pres, s); + if (!b) continue; + setShapeBounds(s, { + x: ((b.x as unknown as number) + dxEmu) as never, + y: ((b.y as unknown as number) + dyEmu) as never, + w: b.w, + h: b.h, + }); + } + }); + } +} diff --git a/site/src/lib/editor/core/document.svelte.ts b/site/src/lib/editor/core/document.svelte.ts new file mode 100644 index 00000000..1e213847 --- /dev/null +++ b/site/src/lib/editor/core/document.svelte.ts @@ -0,0 +1,233 @@ +// The single source of truth for the editor: the in-memory presentation, the +// current selection, undo/redo history, and derived rendering. +// +// The @office-kit/pptx model is a mutable object graph that the library's +// authoring functions edit in place. Rather than deep-proxy that graph (which +// fights the library's reference-based mutation), we hold it in `$state.raw` +// and drive reactivity with an explicit `version` counter bumped on every +// mutation. Derived values (the rendered SVG, the slide list) read `version`, +// so any command re-renders the canvas without the store needing to understand +// the shape of every mutation. +// +// Undo/redo snapshots the presentation by *serializing it to .pptx bytes*, not +// by structuredClone: the model's real state hangs off a symbol-keyed +// `OpcPackage` instance that structuredClone silently drops, producing a +// corrupt copy. save→load is the library's guaranteed round-trip, so it is the +// only sound snapshot. Edits stay instant (the mutation runs synchronously); +// the byte snapshot is taken asynchronously afterwards, which is why undo +// availability can trail an edit by a few milliseconds. Because each discrete +// gesture (a drag, a click) commits exactly one transaction, this is one +// serialization per user action — not per pointer move. + +import { + createPresentation, + addTitleSlide, + getSlides, + findShapeById, + loadPresentation, + savePresentation, +} from '@office-kit/pptx'; +import { renderSlideToSvg } from '@office-kit/pptx-preview'; +import type { PresentationData, SlideData, SlideShapeData } from '@office-kit/pptx'; +import type { Selection } from './selection.ts'; + +interface Snapshot { + readonly bytes: Uint8Array; + readonly selection: Selection; + readonly label: string; +} + +const HISTORY_MAX = 60; + +export class EditorDocument { + /** The live presentation. Mutated in place by library commands. */ + pres = $state.raw(createInitial()); + /** Bumped on every mutation to invalidate derived rendering. */ + version = $state(0); + selection = $state.raw({ kind: 'none', slideIndex: 0 }); + fileName = $state('Untitled.pptx'); + dirty = $state(false); + + // History of committed states as serialized snapshots. `#cursor` is the index + // of the current state within `#history`. + #history = $state.raw([]); + #cursor = $state(-1); + #serializing = false; + #pending = false; + + constructor() { + // Seed the initial state so the first undo returns to the blank deck. + void this.#snapshot('Initial'); + } + + // --- Derived views ----------------------------------------------------- + slides = $derived.by>(() => { + this.version; + return getSlides(this.pres); + }); + + currentSlide = $derived.by(() => { + const list = this.slides; + const idx = this.selection.slideIndex; + return list[idx] ?? list[0] ?? null; + }); + + currentSvg = $derived.by(() => { + this.version; + const slide = this.currentSlide; + if (!slide) return ''; + try { + return renderSlideToSvg(this.pres, slide); + } catch (err) { + return ``; + } + }); + + canUndo = $derived(this.#cursor > 0); + canRedo = $derived(this.#cursor >= 0 && this.#cursor < this.#history.length - 1); + + // --- Resolvers --------------------------------------------------------- + slideAt(index: number): SlideData | null { + return this.slides[index] ?? null; + } + + shapeById(slideIndex: number, id: number): SlideShapeData | null { + const slide = this.slideAt(slideIndex); + return slide ? findShapeById(slide, id) : null; + } + + // --- Mutation core ----------------------------------------------------- + /** + * Run `fn` as one undoable transaction. The mutation runs synchronously so + * the UI updates immediately; a byte snapshot is captured asynchronously for + * undo. Returns whatever `fn` returns (e.g. a newly created shape/slide). + */ + transact(label: string, fn: () => T): T { + const result = fn(); + this.version++; + this.dirty = true; + void this.#snapshot(label); + return result; + } + + /** + * Apply a live, high-frequency mutation (a drag/resize frame). Re-renders + * immediately but does NOT snapshot — so a whole gesture stays one undo step. + * Call `commit()` once when the gesture ends. + */ + applyLive(fn: () => T): T { + const result = fn(); + this.version++; + this.dirty = true; + return result; + } + + /** Close a live gesture by taking a single undo snapshot. */ + commit(label: string): void { + void this.#snapshot(label); + } + + /** Serialize the current state and push it as the new history head. */ + async #snapshot(label: string): Promise { + if (this.#serializing) { + this.#pending = true; + return; + } + this.#serializing = true; + try { + const bytes = await savePresentation(this.pres); + const kept = this.#history.slice(0, this.#cursor + 1); + kept.push({ bytes, selection: this.selection, label }); + const trimmed = kept.slice(-HISTORY_MAX); + this.#history = trimmed; + this.#cursor = trimmed.length - 1; + } finally { + this.#serializing = false; + if (this.#pending) { + this.#pending = false; + void this.#snapshot(label); + } + } + } + + async #restore(index: number): Promise { + const snap = this.#history[index]; + if (!snap) return; + this.pres = await loadPresentation(snap.bytes); + this.selection = snap.selection; + this.#cursor = index; + this.version++; + this.dirty = true; + } + + async undo(): Promise { + if (this.#cursor > 0) await this.#restore(this.#cursor - 1); + } + + async redo(): Promise { + if (this.#cursor < this.#history.length - 1) await this.#restore(this.#cursor + 1); + } + + // --- Selection --------------------------------------------------------- + select(sel: Selection): void { + this.selection = sel; + } + + selectSlide(index: number): void { + const clamped = Math.max(0, Math.min(index, this.slides.length - 1)); + this.selection = { kind: 'none', slideIndex: clamped }; + } + + selectShape(slideIndex: number, shapeId: number, additive = false): void { + if (additive && this.selection.kind === 'shape' && this.selection.slideIndex === slideIndex) { + const set = new Set(this.selection.shapeIds); + if (set.has(shapeId)) set.delete(shapeId); + else set.add(shapeId); + this.selection = { kind: 'shape', slideIndex, shapeIds: [...set] }; + } else { + this.selection = { kind: 'shape', slideIndex, shapeIds: [shapeId] }; + } + } + + selectCell(slideIndex: number, shapeId: number, row: number, col: number): void { + this.selection = { kind: 'cell', slideIndex, shapeId, row, col }; + } + + clearShapeSelection(): void { + this.selection = { kind: 'none', slideIndex: this.selection.slideIndex }; + } + + // --- IO ---------------------------------------------------------------- + async loadBytes(bytes: Uint8Array, name: string): Promise { + const pres = await loadPresentation(bytes); + this.pres = pres; + this.fileName = name; + this.#history = []; + this.#cursor = -1; + this.selection = { kind: 'none', slideIndex: 0 }; + this.version++; + this.dirty = false; + void this.#snapshot('Open'); + } + + async toBytes(): Promise { + return savePresentation(this.pres); + } + + resetBlank(): void { + this.pres = createInitial(); + this.fileName = 'Untitled.pptx'; + this.#history = []; + this.#cursor = -1; + this.selection = { kind: 'none', slideIndex: 0 }; + this.version++; + this.dirty = false; + void this.#snapshot('New'); + } +} + +function createInitial(): PresentationData { + const pres = createPresentation(); + addTitleSlide(pres, 'Untitled presentation'); + return pres; +} diff --git a/site/src/lib/editor/core/registry.ts b/site/src/lib/editor/core/registry.ts new file mode 100644 index 00000000..d94de499 --- /dev/null +++ b/site/src/lib/editor/core/registry.ts @@ -0,0 +1,185 @@ +// The command registry — where the capability manifest becomes executable. +// +// Every capability in the manifest is turned into a Command that: +// - knows its operand and can resolve it from the live selection, +// - reports whether it can run given the current selection, and +// - executes by calling the *real* library function by name, inside an +// undoable transaction, and post-processes the result (e.g. selecting a +// newly created shape). +// +// Because the registry is built by iterating the manifest, coverage is +// structural: if a capability is manifested (and the coverage test guarantees +// all 147 are), it has a runnable command here — reachable at minimum through +// the command palette. Bespoke ribbon UIs supply nicer argument collection but +// dispatch through this same execution path. + +import * as pptx from '@office-kit/pptx'; +import type { PresentationData, SlideData, SlideShapeData } from '@office-kit/pptx'; +import { capabilities, capabilityById } from '../manifest/index.ts'; +import type { ResolvedCapability } from '../manifest/types.ts'; +import type { Selection } from './selection.ts'; +import { availableOperands, selectedShapeId } from './selection.ts'; + +/** A dynamic view of the library so we can dispatch by capability id. */ +const lib = pptx as unknown as Record unknown>; + +/** + * The document surface the registry needs — the structural subset of + * `EditorDocument` that command dispatch touches. Declared here (not imported + * from `document.svelte.ts`) so the registry — and the coverage/smoke tests that + * import it — stay free of Svelte-rune modules, which the root `tsc` can't parse. + */ +export interface CommandDoc { + readonly selection: Selection; + readonly pres: PresentationData; + readonly slides: ReadonlyArray; + slideAt(index: number): SlideData | null; + shapeById(slideIndex: number, id: number): SlideShapeData | null; + selectShape(slideIndex: number, id: number): void; + selectSlide(index: number): void; + transact(label: string, fn: () => T): T; +} + +export interface CommandContext { + readonly doc: CommandDoc; +} + +/** The concrete target object a capability operates on, resolved from selection. */ +export interface CellTarget { + readonly table: unknown; + readonly row: number; + readonly col: number; +} + +export class CommandError extends Error {} + +export interface Command { + readonly capability: ResolvedCapability; + /** Args this command still needs from the user (operand param dropped). */ + readonly params: ResolvedCapability['params']; + /** True if the current selection can supply this command's operand. */ + canRun(ctx: CommandContext): boolean; + /** + * Execute with the given named arguments. Runs inside `doc.transact`, calls + * the library function, and applies result-selection side effects. + */ + run(ctx: CommandContext, args: Record): unknown; +} + +/** Resolve the object a capability's first parameter expects, from selection. */ +function resolveOperand(doc: CommandDoc, cap: ResolvedCapability): unknown { + const sel = doc.selection; + switch (cap.operand) { + case 'presentation': + return doc.pres; + case 'slide': + return doc.slideAt(sel.slideIndex); + case 'shape': { + const id = selectedShapeId(sel); + return id == null ? null : doc.shapeById(sel.slideIndex, id); + } + case 'cell': { + if (sel.kind !== 'cell') return null; + const table = doc.shapeById(sel.slideIndex, sel.shapeId); + if (!table) return null; + try { + return (lib.getTableCell as (t: unknown, r: number, c: number) => unknown)( + table, + sel.row, + sel.col, + ); + } catch { + return null; + } + } + } +} + +/** Order the user-supplied named args to positional args. `cap.params` already + * excludes the operand, so this maps every entry. */ +function orderArgs(cap: ResolvedCapability, args: Record): unknown[] { + return cap.params.map((p) => args[p.name]); +} + +/** After a mutating call, if it produced a shape/slide, select it. */ +function applyResultSelection(doc: CommandDoc, cap: ResolvedCapability, result: unknown): void { + if (result == null || typeof result !== 'object') return; + const ret = cap.returns; + try { + if (ret.includes('SlideShapeData')) { + const id = (lib.getShapeId as (s: unknown) => number)(result); + doc.selectShape(doc.selection.slideIndex, id); + } else if (ret.includes('SlideData')) { + const slides = doc.slides; + const idx = slides.indexOf(result as never); + if (idx >= 0) doc.selectSlide(idx); + } + } catch { + // Result-selection is a convenience; never fail the command over it. + } +} + +class ManifestCommand implements Command { + readonly capability: ResolvedCapability; + constructor(cap: ResolvedCapability) { + this.capability = cap; + } + + get params(): ResolvedCapability['params'] { + return this.capability.params; + } + + canRun(ctx: CommandContext): boolean { + const cap = this.capability; + if (!cap.takesOperand) return true; // factory/package ops always available + if (!availableOperands(ctx.doc.selection).has(cap.operand)) return false; + return resolveOperand(ctx.doc, cap) != null || cap.operand === 'presentation'; + } + + run(ctx: CommandContext, args: Record): unknown { + const cap = this.capability; + const fn = lib[cap.id]; + if (typeof fn !== 'function') { + throw new CommandError(`Library function "${cap.id}" is not callable.`); + } + const positional = orderArgs(cap, args); + return ctx.doc.transact(cap.labelEn, () => { + let result: unknown; + if (cap.takesOperand) { + const operand = resolveOperand(ctx.doc, cap); + if (operand == null && cap.operand !== 'presentation') { + throw new CommandError(`No ${cap.operand} selected for "${cap.id}".`); + } + result = fn(operand, ...positional); + } else { + result = fn(...positional); + } + applyResultSelection(ctx.doc, cap, result); + return result; + }); + } +} + +const registry = new Map( + capabilities.map((cap) => [cap.id, new ManifestCommand(cap)]), +); + +export function getCommand(id: string): Command | undefined { + return registry.get(id); +} + +export function allCommands(): readonly Command[] { + return [...registry.values()]; +} + +/** Commands the current selection can run right now. */ +export function runnableCommands(ctx: CommandContext): readonly Command[] { + return allCommands().filter((c) => c.canRun(ctx)); +} + +export function hasCommand(id: string): boolean { + return registry.has(id); +} + +// Re-export so UI can introspect the manifest via the registry entry point. +export { capabilityById }; diff --git a/site/src/lib/editor/core/selection.ts b/site/src/lib/editor/core/selection.ts new file mode 100644 index 00000000..a5da550e --- /dev/null +++ b/site/src/lib/editor/core/selection.ts @@ -0,0 +1,77 @@ +// The editor selection model. +// +// A capability's `operand` (presentation / slide / shape / cell) determines +// which selection makes it applicable — this mirrors PowerPoint's contextual +// behaviour, where the ribbon lights up different controls depending on whether +// you have a slide, a shape, or a table cell selected. +// +// Selections are stored by *stable identity* (slide index + shape id + cell +// coordinates), never by object reference, so they survive re-renders, undo +// snapshots, and structural clones. + +import type { Operand } from '../manifest/types.ts'; + +export interface SlideSelection { + readonly kind: 'slide'; + readonly slideIndex: number; +} + +export interface ShapeSelection { + readonly kind: 'shape'; + readonly slideIndex: number; + /** `getShapeId` value; unique within the slide. Multiple for multi-select. */ + readonly shapeIds: readonly number[]; +} + +export interface CellSelection { + readonly kind: 'cell'; + readonly slideIndex: number; + /** The table shape holding the cell. */ + readonly shapeId: number; + readonly row: number; + readonly col: number; +} + +export interface NoneSelection { + readonly kind: 'none'; + /** Even with nothing selected we track which slide is shown. */ + readonly slideIndex: number; +} + +export type Selection = SlideSelection | ShapeSelection | CellSelection | NoneSelection; + +export function selectionSlideIndex(sel: Selection): number { + return sel.slideIndex; +} + +/** The primary (first) selected shape id, if any. */ +export function selectedShapeId(sel: Selection): number | null { + if (sel.kind === 'shape') return sel.shapeIds[0] ?? null; + if (sel.kind === 'cell') return sel.shapeId; + return null; +} + +/** All selected shape ids (empty unless a shape/cell selection). */ +export function selectedShapeIds(sel: Selection): number[] { + if (sel.kind === 'shape') return [...sel.shapeIds]; + if (sel.kind === 'cell') return [sel.shapeId]; + return []; +} + +/** Which operands the current selection can satisfy. Used to enable/disable + * commands and to route a command to the right target object. */ +export function availableOperands(sel: Selection): ReadonlySet { + const set = new Set(['presentation']); + // A presentation always has slides once one exists. + set.add('slide'); + if (sel.kind === 'shape' && sel.shapeIds.length > 0) set.add('shape'); + if (sel.kind === 'cell') { + set.add('shape'); + set.add('cell'); + } + return set; +} + +export function isOperandAvailable(sel: Selection, operand: Operand): boolean { + return availableOperands(sel).has(operand); +} diff --git a/site/src/lib/editor/i18n/i18n.svelte.ts b/site/src/lib/editor/i18n/i18n.svelte.ts new file mode 100644 index 00000000..c39db1db --- /dev/null +++ b/site/src/lib/editor/i18n/i18n.svelte.ts @@ -0,0 +1,60 @@ +// Editor localization. +// +// Strategy: the English string IS the message key, so wrapping a literal in +// `t('New')` needs no separate key table — only Japanese overrides are stored +// (`ja.ts`). A missing override falls back to the English key, so the UI is +// never blank in either language. Capability / category labels come from the +// manifest, which already carries `labelEn` / `labelJa`. +// +// `locale` is a module-level `$state`; because `t()` / `capLabel()` read it, +// any component template or `$derived` that calls them re-renders when the +// language switches. That is the whole reactivity story — no context, no props. + +import { ja } from './ja.ts'; + +export type Locale = 'ja' | 'en'; + +const STORAGE_KEY = 'ok-editor-locale'; + +function detectInitial(): Locale { + if (typeof localStorage !== 'undefined') { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'ja' || stored === 'en') return stored; + } + if (typeof navigator !== 'undefined' && navigator.language?.toLowerCase().startsWith('ja')) { + return 'ja'; + } + return 'en'; +} + +let locale = $state(detectInitial()); + +export function getLocale(): Locale { + return locale; +} + +export function setLocale(next: Locale): void { + locale = next; + if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, next); +} + +export const LOCALES: ReadonlyArray<{ id: Locale; label: string }> = [ + { id: 'en', label: 'English' }, + { id: 'ja', label: '日本語' }, +]; + +/** Translate an English-keyed UI string to the active locale. */ +export function t(key: string): string { + if (locale === 'en') return key; + return ja[key] ?? key; +} + +/** A capability's label in the active locale. */ +export function capLabel(cap: { labelEn: string; labelJa: string }): string { + return locale === 'ja' ? cap.labelJa : cap.labelEn; +} + +/** A category label (from `CATEGORY_LABELS`) in the active locale. */ +export function catLabel(label: { en: string; ja: string }): string { + return locale === 'ja' ? label.ja : label.en; +} diff --git a/site/src/lib/editor/i18n/ja.ts b/site/src/lib/editor/i18n/ja.ts new file mode 100644 index 00000000..ce4a8bee --- /dev/null +++ b/site/src/lib/editor/i18n/ja.ts @@ -0,0 +1,117 @@ +// Japanese overrides. Keyed by the English UI string (see i18n.svelte.ts). +// Anything not listed falls back to its English key. + +export const ja: Record = { + // TopBar / file + New: '新規', + Open: '開く', + Save: '保存', + 'Open .pptx': '.pptx を開く', + 'Save as .pptx': '.pptx として保存', + 'Undo (Ctrl+Z)': '元に戻す (Ctrl+Z)', + 'Redo (Ctrl+Y)': 'やり直し (Ctrl+Y)', + Editor: 'エディター', + 'Unsaved changes': '未保存の変更', + 'Command palette (Ctrl+K)': 'コマンドパレット (Ctrl+K)', + 'All capabilities': 'すべての機能', + Opened: '開きました:', + 'Open failed': '読み込みに失敗しました', + 'Saved .pptx': '.pptx を保存しました', + 'Save failed': '保存に失敗しました', + Language: '言語', + + // Ribbon tabs + Home: 'ホーム', + Insert: '挿入', + Design: 'デザイン', + Transitions: '画面切り替え', + Animations: 'アニメーション', + 'Shape Format': '図形の書式', + Table: '表', + + // Ribbon groups + Slides: 'スライド', + Font: 'フォント', + Paragraph: '段落', + Drawing: '図形描画', + Arrange: '配置', + Editing: '編集', + Tables: '表', + Illustrations: '図', + Text: 'テキスト', + Comments: 'コメント', + 'Slide setup': 'スライドの設定', + Background: '背景', + Theme: 'テーマ', + Transition: '画面切り替え', + Animation: 'アニメーション', + Fill: '塗りつぶし', + Outline: '枠線', + Effects: '効果', + 'Size & rotate': 'サイズと回転', + 'Rows & columns': '行と列', + Cell: 'セル', + 'Table style': '表のスタイル', + + // Ribbon explicit item labels + 'Text format': '文字の書式', + 'Run format': 'ラン書式', + Bullets: '箇条書き', + Replace: '置換', + + // Context menu + Cut: '切り取り', + Copy: 'コピー', + Paste: '貼り付け', + Duplicate: '複製', + Delete: '削除', + 'Bring to front': '最前面へ移動', + 'Bring forward': '前面へ移動', + 'Send backward': '背面へ移動', + 'Send to back': '最背面へ移動', + Group: 'グループ化', + Ungroup: 'グループ解除', + 'Select all': 'すべて選択', + + // Status bar + Slide: 'スライド', + 'No selection': '選択なし', + Fit: '全体表示', + 'Zoom in (Ctrl+=)': '拡大 (Ctrl+=)', + 'Zoom out (Ctrl+-)': '縮小 (Ctrl+-)', + 'Reset to 100%': '100% に戻す', + 'Fit (Ctrl+0)': '全体表示 (Ctrl+0)', + + // Slide navigator + 'New slide': '新しいスライド', + 'Move slide': 'スライドを移動', + + // Command palette + 'Search capabilities…': '機能を検索…（例: gradient, table, transition）', + 'No capability matches': '該当する機能がありません', + navigate: '移動', + run: '実行', + close: '閉じる', + + // Bespoke property controls + 'Fill & outline': '塗りつぶしと枠線', + 'Position & size (in)': '位置とサイズ（インチ）', + Rotation: '回転', + + // Properties panel + actions: '個の操作', + 'All applicable capabilities': '適用可能なすべての機能', + Shape: '図形', + shapes: '個の図形', + 'Table cell': '表のセル', + + // Command dialog + Run: '実行', + Cancel: 'キャンセル', + Apply: '適用', + Close: '閉じる', + 'This command takes no arguments.': 'この操作に引数はありません。', + 'operates on': '対象', + category: 'カテゴリ', + returns: '戻り値', +}; diff --git a/site/src/lib/editor/manifest/build-generated-overrides.mjs b/site/src/lib/editor/manifest/build-generated-overrides.mjs new file mode 100644 index 00000000..14844f87 --- /dev/null +++ b/site/src/lib/editor/manifest/build-generated-overrides.mjs @@ -0,0 +1,117 @@ +// Turns the enrichment-workflow output (/tmp/enrich-result.json) into +// `overrides.generated.ts`. Validates every ParamSpec kind and — critically — +// that each override's TOP-LEVEL parameter names match the generated +// capability exactly (the registry dispatches positionally by those names, so a +// mismatch would silently pass `undefined`). Nested field names are trusted as +// the agent read them from the library source. +import { readFileSync, writeFileSync } from 'node:fs'; +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const here = dirname(fileURLToPath(import.meta.url)); +const RESULT = process.argv[2] ?? '/tmp/enrich-result.json'; +const generated = JSON.parse(readFileSync(join(here, 'capabilities.generated.json'), 'utf8')); +const byId = new Map(generated.capabilities.map((c) => [c.id, c])); +const VALID_KINDS = new Set([ + 'string', + 'number', + 'emu', + 'color', + 'boolean', + 'enum', + 'index', + 'object', + 'array', +]); + +const data = JSON.parse(readFileSync(RESULT, 'utf8')); + +function validateSpec(spec, path, errors) { + if (!spec || typeof spec !== 'object') return errors.push(`${path}: not an object`); + if (!spec.name) errors.push(`${path}: missing name`); + if (!VALID_KINDS.has(spec.kind)) errors.push(`${path}.${spec.name}: invalid kind "${spec.kind}"`); + if (spec.kind === 'enum' && (!Array.isArray(spec.enumValues) || !spec.enumValues.length)) { + errors.push(`${path}.${spec.name}: enum without enumValues`); + } + if (spec.fields) for (const f of spec.fields) validateSpec(f, `${path}.${spec.name}`, errors); + if (spec.item) validateSpec(spec.item, `${path}.${spec.name}[]`, errors); +} + +// Normalize a spec into the exact ParamSpec field set (drop stray keys). +function clean(spec) { + const out = { + name: String(spec.name), + type: String(spec.type ?? 'unknown'), + kind: spec.kind, + optional: Boolean(spec.optional), + }; + if (spec.default !== undefined) out.default = String(spec.default); + if (spec.label) out.label = String(spec.label); + if (spec.kind === 'enum' && spec.enumValues) out.enumValues = spec.enumValues.map(String); + if (spec.fields) out.fields = spec.fields.map(clean); + if (spec.item) out.item = clean(spec.item); + return out; +} + +const skipped = []; +const entries = {}; +for (const o of data.overrides) { + const errors = []; + const cap = byId.get(o.id); + if (!cap) { + skipped.push(`${o.id}: not a known capability`); + continue; + } + let params; + try { + params = JSON.parse(o.paramsJson); + } catch (e) { + skipped.push(`${o.id}: bad paramsJson (${e.message})`); + continue; + } + if (!Array.isArray(params)) { + skipped.push(`${o.id}: paramsJson not an array`); + continue; + } + // Top-level param names must equal the generated user-param names, in order — + // else the registry would pass the wrong (or undefined) positional args. + const wantNames = cap.params.map((p) => p.name); + const gotNames = params.map((p) => p.name); + if (JSON.stringify(wantNames) !== JSON.stringify(gotNames)) { + skipped.push( + `${o.id}: param names ${JSON.stringify(gotNames)} != expected ${JSON.stringify(wantNames)}`, + ); + continue; + } + for (const p of params) validateSpec(p, o.id, errors); + if (errors.length) { + skipped.push(...errors); + continue; + } + entries[o.id] = { + labelEn: o.labelEn, + labelJa: o.labelJa, + params: params.map(clean), + }; +} + +if (skipped.length) { + // Skipped entries keep their generated (JSON-fallback) schema — still reachable. + console.warn('SKIPPED (kept on generated schema):\n ' + skipped.join('\n ')); +} + +const banner = `// AUTO-GENERATED by build-generated-overrides.mjs from an enrichment pass that +// read the @office-kit/pptx type sources. Provides field-based parameter schemas +// (accurate enum members, nested object/array fields) so the command dialogs are +// forms rather than JSON blobs. Do not edit by hand — re-run the generator. +// Human tweaks belong in overrides.ts, which is merged on top of these. +import type { CapabilityOverride } from './types.ts'; + +export const generatedOverrides: Record = ${JSON.stringify(entries, null, 2)}; +`; + +const outPath = join(here, 'overrides.generated.ts'); +writeFileSync(outPath, banner); +console.log( + `Wrote ${Object.keys(entries).length} generated overrides to ${outPath.replace(here + '/', '')}`, +); diff --git a/site/src/lib/editor/manifest/capabilities.generated.json b/site/src/lib/editor/manifest/capabilities.generated.json new file mode 100644 index 00000000..dd2f379c --- /dev/null +++ b/site/src/lib/editor/manifest/capabilities.generated.json @@ -0,0 +1,2583 @@ +{ + "generatedFrom": "src/api/index.ts", + "count": 147, + "capabilities": [ + { + "id": "addBlankSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [] + }, + { + "id": "addContentSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ title?: string; body?: string }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSectionHeaderSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "title", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "addSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "options", + "type": "{ layout: SlideLayoutData }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideAt", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "options", + "type": "{ layout: SlideLayoutData }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideChart", + "operand": "slide", + "takesOperand": true, + "category": "chart", + "file": "api/fn/charts.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ spec: ChartSpec; x: Emu; y: Emu; w: Emu; h: Emu; name?: string; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideComment", + "operand": "slide", + "takesOperand": true, + "category": "comment", + "file": "api/fn/comments.ts", + "returns": "SlideCommentData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ author: { name: string; initials?: string }; text: string; position?: CommentPosition | null; date?: Date; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideImage", + "operand": "slide", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-authoring.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + }, + { + "name": "opts", + "type": "{ x: Emu; y: Emu; w: Emu; h: Emu; format?: ImageFormat; name?: string; fit?: ImageFit }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideLine", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/shape-authoring.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ from: { x: Emu; y: Emu }; to: { x: Emu; y: Emu }; color?: string; widthEmu?: number; name?: string; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideShape", + "operand": "slide", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-authoring.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ preset: PresetShape | string; x: Emu; y: Emu; w: Emu; h: Emu; text?: string; /** Vertical text anchor (`t` / `ctr` / `b`). Horizontal alignment is set * separately via `setShapeAlignment` / `setParagraphAlignment`. */ textAnchor?: 'ctr' | 't' | 'b'; name?: string; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideTable", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/shape-authoring.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ x: Emu; y: Emu; w: Emu; h: Emu; rows: ReadonlyArray>; colWidths?: ReadonlyArray; rowHeights?: ReadonlyArray; firstRow?: boolean; bandRow?: boolean; name?: string; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addSlideTextBox", + "operand": "slide", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-authoring.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "{ x: Emu; y: Emu; w: Emu; h: Emu; text: string; name?: string }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "addTitleSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "title", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "appendShapeText", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "value", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "appendSlideNotes", + "operand": "slide", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "text", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "bringShapeForward", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "bringShapeToFront", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearAllHyperlinks", + "operand": "presentation", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "number", + "canvas": true, + "params": [] + }, + { + "id": "clearAllSlideComments", + "operand": "presentation", + "takesOperand": true, + "category": "comment", + "file": "api/fn/comments.ts", + "returns": "number", + "canvas": true, + "params": [] + }, + { + "id": "clearAllSlideNotes", + "operand": "presentation", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "number", + "canvas": true, + "params": [] + }, + { + "id": "clearShapeEffects", + "operand": "shape", + "takesOperand": true, + "category": "effect", + "file": "api/fn/shape-effects.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearShapeFill", + "operand": "shape", + "takesOperand": true, + "category": "fill", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearShapeStroke", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideAnimations", + "operand": "slide", + "takesOperand": true, + "category": "animation", + "file": "api/fn/shape-animation.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideBackground", + "operand": "slide", + "takesOperand": true, + "category": "slide-background", + "file": "api/fn/slide-background.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideComments", + "operand": "slide", + "takesOperand": true, + "category": "comment", + "file": "api/fn/comments.ts", + "returns": "number", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideHyperlinks", + "operand": "slide", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "number", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideShapes", + "operand": "slide", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearSlideTransition", + "operand": "slide", + "takesOperand": true, + "category": "transition", + "file": "api/fn/slide-transition.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "clearTableCellFill", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "compactPackage", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/package-introspection.ts", + "returns": "{ readonly removed: ReadonlyArray }", + "canvas": false, + "params": [] + }, + { + "id": "copyShape", + "operand": "slide", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "sourceShape", + "type": "SlideShapeData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "createPresentation", + "operand": "presentation", + "takesOperand": false, + "category": "presentation", + "file": "api/fn/package-io.ts", + "returns": "PresentationData", + "canvas": true, + "params": [ + { + "name": "options", + "type": "{ size?: PresentationSize }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "duplicateSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "slide", + "type": "SlideData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "duplicateSlideAt", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "slide", + "type": "SlideData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "groupShapes", + "operand": "presentation", + "takesOperand": false, + "category": "shape", + "file": "api/fn/shape-grouping.ts", + "returns": "SlideShapeData", + "canvas": true, + "params": [ + { + "name": "shapes", + "type": "ReadonlyArray", + "kind": "object", + "optional": false + }, + { + "name": "opts", + "type": "{ name?: string }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "importSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "SlideData", + "canvas": false, + "params": [ + { + "name": "sourceSlide", + "type": "SlideData", + "kind": "object", + "optional": false + }, + { + "name": "targetLayout", + "type": "SlideLayoutData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "incrementRevision", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/properties.ts", + "returns": "number", + "canvas": false, + "params": [] + }, + { + "id": "insertTableColumn", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": true + }, + { + "name": "widthEmu", + "type": "number", + "kind": "number", + "optional": true + } + ] + }, + { + "id": "insertTableRow", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": true + }, + { + "name": "cells", + "type": "ReadonlyArray", + "kind": "object", + "optional": false, + "default": "[]" + } + ] + }, + { + "id": "mergePresentations", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "ReadonlyArray", + "canvas": false, + "params": [ + { + "name": "sourcePres", + "type": "PresentationData", + "kind": "object", + "optional": false + }, + { + "name": "targetLayout", + "type": "SlideLayoutData | ((sourceSlide: SlideData, index: number) => SlideLayoutData),", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "mergeTableCells", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "block", + "type": "{ readonly row: number; readonly col: number; readonly rowSpan: number; readonly colSpan: number; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "moveSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "slide", + "type": "SlideData", + "kind": "object", + "optional": false + }, + { + "name": "toIndex", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "removeShape", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "removeSlide", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "slide", + "type": "SlideData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "removeSlideComment", + "operand": "presentation", + "takesOperand": false, + "category": "comment", + "file": "api/fn/comments.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "comment", + "type": "SlideCommentData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "removeSlideNotes", + "operand": "slide", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "removeTableColumn", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "removeTableRow", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "atIndex", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "removeThumbnail", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/thumbnail.ts", + "returns": "void", + "canvas": false, + "params": [] + }, + { + "id": "renameShape", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-read-base.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "newName", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceHyperlink", + "operand": "presentation", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "from", + "type": "string", + "kind": "string", + "optional": false + }, + { + "name": "to", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceTextInNotes", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "from", + "type": "string | RegExp", + "kind": "string", + "optional": false + }, + { + "name": "to", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceTextInPresentation", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "from", + "type": "string | RegExp", + "kind": "string", + "optional": false + }, + { + "name": "to", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceTextInSlide", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "from", + "type": "string | RegExp", + "kind": "string", + "optional": false + }, + { + "name": "to", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceTextInSlideNotes", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "boolean", + "canvas": true, + "params": [ + { + "name": "from", + "type": "string | RegExp", + "kind": "string", + "optional": false + }, + { + "name": "to", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "replaceTokensInPresentation", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "tokens", + "type": "Record", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "replaceTokensInSlide", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/shape-slide-read.ts", + "returns": "number", + "canvas": true, + "params": [ + { + "name": "tokens", + "type": "Record", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "reverseSlides", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "sendShapeBackward", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "sendShapeToBack", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "setChartSpec", + "operand": "presentation", + "takesOperand": false, + "category": "chart", + "file": "api/fn/charts.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "chart", + "type": "SlideChartData", + "kind": "object", + "optional": false + }, + { + "name": "spec", + "type": "ChartSpec", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setCoreProperties", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/properties.ts", + "returns": "void", + "canvas": false, + "params": [ + { + "name": "values", + "type": "Partial", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setExtendedProperties", + "operand": "presentation", + "takesOperand": true, + "category": "text", + "file": "api/fn/properties.ts", + "returns": "void", + "canvas": false, + "params": [ + { + "name": "values", + "type": "Partial", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setMediaPartBytes", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/package-introspection.ts", + "returns": "boolean", + "canvas": false, + "params": [ + { + "name": "partName", + "type": "string", + "kind": "string", + "optional": false + }, + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setParagraphAlignment", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "align", + "type": "ParagraphAlignment", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setParagraphBullet", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "style", + "type": "BulletStyle", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setParagraphLevel", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "level", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setParagraphLineSpacing", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "spacing", + "type": "| { readonly kind: 'pct'; readonly value: number } | { readonly kind: 'pts'; readonly value: number } | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setParagraphSpacing", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "opts", + "type": "{ beforePts?: number | null; afterPts?: number | null }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setPresentationFonts", + "operand": "presentation", + "takesOperand": true, + "category": "theme", + "file": "api/fn/theme.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "fonts", + "type": "PresentationFontsInput", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setPresentationTheme", + "operand": "presentation", + "takesOperand": true, + "category": "theme", + "file": "api/fn/theme.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "theme", + "type": "Partial> & { name?: string }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeAdjustValues", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "values", + "type": "Readonly>", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeAlignment", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "align", + "type": "ParagraphAlignment", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeAltTitle", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-read-base.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "title", + "type": "string | null", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setShapeAnimation", + "operand": "shape", + "takesOperand": true, + "category": "animation", + "file": "api/fn/shape-animation.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "AnimationOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeBounds", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-read-base.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "bounds", + "type": "ShapeBounds", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeBullets", + "operand": "shape", + "takesOperand": true, + "category": "paragraph", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "style", + "type": "BulletStyle", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeClickAction", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-click-action.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "action", + "type": "ShapeClickAction | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeDescription", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-read-base.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "description", + "type": "string | null", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setShapeFill", + "operand": "shape", + "takesOperand": true, + "category": "fill", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "color", + "type": "string", + "kind": "color", + "optional": false + } + ] + }, + { + "id": "setShapeFlip", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "{ horizontal?: boolean; vertical?: boolean }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeGlow", + "operand": "shape", + "takesOperand": true, + "category": "effect", + "file": "api/fn/shape-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "GlowOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeGradientFill", + "operand": "shape", + "takesOperand": true, + "category": "fill", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "GradientFillOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeHidden", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-read-base.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "hidden", + "type": "boolean", + "kind": "boolean", + "optional": false + } + ] + }, + { + "id": "setShapeHyperlink", + "operand": "shape", + "takesOperand": true, + "category": "hyperlink", + "file": "api/fn/shape-paragraph.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "url", + "type": "string | null", + "kind": "string", + "optional": false + }, + { + "name": "tooltip", + "type": "string", + "kind": "string", + "optional": true + } + ] + }, + { + "id": "setShapeImage", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-image.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + }, + { + "name": "options", + "type": "{ format?: ImageFormat; fit?: ImageFit }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "setShapeImageBrightness", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-image-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "value", + "type": "number | null", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setShapeImageContrast", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-image-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "value", + "type": "number | null", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setShapeImageCrop", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-image-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "crop", + "type": "ImageCrop | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeImageFill", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + }, + { + "name": "options", + "type": "{ format?: ImageFormat }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "setShapeImageOpacity", + "operand": "shape", + "takesOperand": true, + "category": "image", + "file": "api/fn/shape-image-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "opacity", + "type": "number | null", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setShapeNoFill", + "operand": "shape", + "takesOperand": true, + "category": "fill", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "setShapeNoStroke", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [] + }, + { + "id": "setShapePatternFill", + "operand": "shape", + "takesOperand": true, + "category": "fill", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "PatternFillOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapePosition", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "x", + "type": "Emu", + "kind": "emu", + "optional": false + }, + { + "name": "y", + "type": "Emu", + "kind": "emu", + "optional": false + } + ] + }, + { + "id": "setShapeRotation", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "degrees", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setShapeRunFormat", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-paragraph.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "runIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "format", + "type": "TextFormat", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeRunHyperlink", + "operand": "shape", + "takesOperand": true, + "category": "hyperlink", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "runIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "url", + "type": "string | null", + "kind": "string", + "optional": false + }, + { + "name": "tooltip", + "type": "string", + "kind": "string", + "optional": true + } + ] + }, + { + "id": "setShapeRunText", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-runs.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "paragraphIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "runIndex", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "text", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setShapeShadow", + "operand": "shape", + "takesOperand": true, + "category": "effect", + "file": "api/fn/shape-effects.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "ShadowOptions", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "setShapeSize", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "w", + "type": "Emu", + "kind": "emu", + "optional": false + }, + { + "name": "h", + "type": "Emu", + "kind": "emu", + "optional": false + } + ] + }, + { + "id": "setShapeStroke", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "{ color?: string; widthEmu?: number }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeStrokeArrow", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "end", + "type": "'head' | 'tail'", + "kind": "enum", + "optional": false, + "enumValues": ["head", "tail"] + }, + { + "name": "options", + "type": "ArrowOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeStrokeCap", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "cap", + "type": "'rnd' | 'sq' | 'flat' | null", + "kind": "enum", + "optional": false, + "enumValues": ["rnd", "sq", "flat"] + } + ] + }, + { + "id": "setShapeStrokeCompound", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "cmpd", + "type": "'sng' | 'dbl' | 'thickThin' | 'thinThick' | 'tri' | null", + "kind": "enum", + "optional": false, + "enumValues": ["sng", "dbl", "thickThin", "thinThick", "tri"] + } + ] + }, + { + "id": "setShapeStrokeDash", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "dash", + "type": "LineDash", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeStrokeJoin", + "operand": "shape", + "takesOperand": true, + "category": "stroke", + "file": "api/fn/shape-fill-stroke.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "join", + "type": "'round' | 'bevel' | 'miter' | null", + "kind": "enum", + "optional": false, + "enumValues": ["round", "bevel", "miter"] + } + ] + }, + { + "id": "setShapeText", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "value", + "type": "string", + "kind": "string", + "optional": false + }, + { + "name": "options", + "type": "{ bullets?: BulletStyle }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "setShapeTextAnchor", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "anchor", + "type": "TextAnchor", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextAutoFit", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "mode", + "type": "TextAutoFit", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextBodyRotationDeg", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "rotationDeg", + "type": "number | null", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setShapeTextColumns", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "columns", + "type": "{ count: number; gapEmu?: number } | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextDirection", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "direction", + "type": "| 'horz' | 'vert' | 'vert270' | 'wordArtVert' | 'eaVert' | 'mongolianVert' | 'wordArtVertRtl' | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextFormat", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "format", + "type": "TextFormat", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextMargins", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "margins", + "type": "{ left?: number; top?: number; right?: number; bottom?: number }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeTextWrap", + "operand": "shape", + "takesOperand": true, + "category": "text", + "file": "api/fn/shape-text.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "wrap", + "type": "TextWrap", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setShapeZIndex", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-removal-zorder.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "toIndex", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "setSlideBackground", + "operand": "slide", + "takesOperand": true, + "category": "slide-background", + "file": "api/fn/slide-background.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "color", + "type": "string", + "kind": "color", + "optional": false + } + ] + }, + { + "id": "setSlideBackgroundImage", + "operand": "slide", + "takesOperand": true, + "category": "slide-background", + "file": "api/fn/slide-background.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + }, + { + "name": "options", + "type": "{ format?: ImageFormat }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "setSlideBody", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-title.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "text", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setSlideHidden", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-query.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "hidden", + "type": "boolean", + "kind": "boolean", + "optional": false + } + ] + }, + { + "id": "setSlideLayout", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/shape-slide-read.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "layout", + "type": "SlideLayoutData", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setSlideNotes", + "operand": "slide", + "takesOperand": true, + "category": "notes", + "file": "api/fn/slide-notes.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "value", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setSlidePlaceholders", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-title.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "byType", + "type": "Readonly>", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setSlideSections", + "operand": "presentation", + "takesOperand": true, + "category": "section", + "file": "api/fn/sections.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "sections", + "type": "ReadonlyArray<{ name: string; slides: ReadonlyArray }>", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setSlideSize", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-size.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "opts", + "type": "SlideSize", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setSlideTitle", + "operand": "slide", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-title.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "title", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setSlideTransition", + "operand": "slide", + "takesOperand": true, + "category": "transition", + "file": "api/fn/slide-transition.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "options", + "type": "TransitionOptions", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableCellAlignment", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "align", + "type": "ParagraphAlignment", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableCellAnchor", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "anchor", + "type": "'top' | 'center' | 'bottom' | null", + "kind": "enum", + "optional": false, + "enumValues": ["top", "center", "bottom"] + } + ] + }, + { + "id": "setTableCellBorders", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "sides", + "type": "{ left?: Partial | null; right?: Partial | null; top?: Partial | null; bottom?: Partial | null; tlToBr?: Partial | null; blToTr?: Partial | null; } | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableCellFill", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "color", + "type": "string", + "kind": "color", + "optional": false + } + ] + }, + { + "id": "setTableCellMargins", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "margins", + "type": "{ left?: number | null; right?: number | null; top?: number | null; bottom?: number | null; } | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableCellText", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "text", + "type": "string", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setTableCellTextDirection", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "direction", + "type": "| 'horz' | 'vert' | 'vert270' | 'wordArtVert' | 'eaVert' | 'mongolianVert' | 'wordArtVertRtl' | null", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableCellTextFormat", + "operand": "cell", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "format", + "type": "TextFormat", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableColumnWidth", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "col", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "width", + "type": "Emu", + "kind": "emu", + "optional": false + } + ] + }, + { + "id": "setTableRowHeight", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "row", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "height", + "type": "Emu", + "kind": "emu", + "optional": false + } + ] + }, + { + "id": "setTableStyleFlags", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "flags", + "type": "{ firstRow?: boolean; lastRow?: boolean; firstCol?: boolean; lastCol?: boolean; bandRow?: boolean; bandCol?: boolean; }", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "setTableStyleId", + "operand": "shape", + "takesOperand": true, + "category": "table", + "file": "api/fn/tables.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "styleId", + "type": "string | null", + "kind": "string", + "optional": false + } + ] + }, + { + "id": "setThumbnail", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/thumbnail.ts", + "returns": "void", + "canvas": false, + "params": [ + { + "name": "bytes", + "type": "Uint8Array", + "kind": "object", + "optional": false + }, + { + "name": "options", + "type": "{ format?: ImageFormat }", + "kind": "object", + "optional": false, + "default": "{}" + } + ] + }, + { + "id": "sortSlides", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "compareFn", + "type": "(a: SlideData, b: SlideData) => number,", + "kind": "object", + "optional": false + } + ] + }, + { + "id": "swapSlides", + "operand": "presentation", + "takesOperand": true, + "category": "slide", + "file": "api/fn/slide-deck.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "indexA", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "indexB", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "touchModified", + "operand": "presentation", + "takesOperand": true, + "category": "presentation", + "file": "api/fn/properties.ts", + "returns": "void", + "canvas": false, + "params": [ + { + "name": "at", + "type": "Date", + "kind": "object", + "optional": false, + "default": "new Date()" + } + ] + }, + { + "id": "translateShapes", + "operand": "presentation", + "takesOperand": false, + "category": "shape", + "file": "api/fn/shape-slide-read.ts", + "returns": "void", + "canvas": true, + "params": [ + { + "name": "shapes", + "type": "ReadonlyArray", + "kind": "object", + "optional": false + }, + { + "name": "dxEmu", + "type": "number", + "kind": "number", + "optional": false + }, + { + "name": "dyEmu", + "type": "number", + "kind": "number", + "optional": false + } + ] + }, + { + "id": "ungroupShapes", + "operand": "shape", + "takesOperand": true, + "category": "shape", + "file": "api/fn/shape-grouping.ts", + "returns": "ReadonlyArray", + "canvas": true, + "params": [] + } + ] +} diff --git a/site/src/lib/editor/manifest/generate.mjs b/site/src/lib/editor/manifest/generate.mjs new file mode 100644 index 00000000..82e20135 --- /dev/null +++ b/site/src/lib/editor/manifest/generate.mjs @@ -0,0 +1,310 @@ +// Capability-manifest generator — the backbone of the coverage guarantee. +// +// Reads the @office-kit/pptx public API source, enumerates every *mutating* +// export (the verbs a PowerPoint-style UI must expose as an operation), and +// emits `capabilities.generated.json`: one entry per capability with its +// operand, parsed parameter list, and a heuristic category. +// +// This file is the *source of truth for what exists*. The coverage test +// (`coverage.test.ts`) independently re-derives the mutating-export set from +// the compiled library and fails if it drifts from the manifest — so a new +// authoring function added to the library cannot be silently left out of the +// editor. Human-authored refinements (labels, ribbon groups, richer param +// schemas) live in `overrides.ts` and are merged on top; they never remove +// entries. +// +// Run: `node site/src/lib/editor/manifest/generate.mjs` +import { readFileSync, readdirSync, statSync, writeFileSync } from 'node:fs'; +import { dirname, join } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const here = dirname(fileURLToPath(import.meta.url)); +const repoRoot = join(here, '..', '..', '..', '..', '..'); +const srcRoot = join(repoRoot, 'src'); +const apiIndex = join(srcRoot, 'api', 'index.ts'); + +// Verb prefixes that denote a state-changing (authoring) operation. Kept in +// sync with `coverage.test.ts` — the two MUST agree. +export const MUTATING_VERBS = [ + 'add', + 'set', + 'clear', + 'replace', + 'remove', + 'insert', + 'duplicate', + 'bring', + 'send', + 'append', + 'group', + 'ungroup', + 'swap', + 'sort', + 'reverse', + 'rename', + 'move', + 'merge', + 'import', + 'copy', + 'create', + 'translate', + 'touch', + 'increment', + 'compact', +]; + +// A handful of mutating-verb exports are not slide-authoring operations the +// canvas UI drives; they still get a command (reachable via palette) but we +// tag them so the ribbon layer can skip them. +const NON_CANVAS = new Set([ + 'compactPackage', + 'incrementRevision', + 'touchModified', + 'mergePresentations', + 'importSlide', + 'setCoreProperties', + 'setExtendedProperties', + 'setMediaPartBytes', + 'removeThumbnail', + 'setThumbnail', +]); + +function isMutating(name) { + return MUTATING_VERBS.some( + (v) => + name.startsWith(v) && + name.length > v.length && + name[v.length] === name[v.length].toUpperCase(), + ); +} + +function walk(dir) { + let out = []; + for (const e of readdirSync(dir)) { + const p = join(dir, e); + const s = statSync(p); + if (s.isDirectory()) out = out.concat(walk(p)); + else if (p.endsWith('.ts') && !p.endsWith('.test.ts')) out.push(p); + } + return out; +} + +// The value exports of the public API — parse the `export { ... }` blocks. +function publicValueExports() { + const code = readFileSync(apiIndex, 'utf8'); + const names = new Set(); + const re = /export \{([^}]*)\}/g; + let m; + while ((m = re.exec(code))) { + for (const raw of m[1].split(',')) { + const t = raw.trim().replace(/^type\s+/, ''); + if (!t || t.startsWith('type ')) continue; + // skip `type X` entries and aliases (`a as b` → keep b) + const asMatch = t.match(/\bas\s+([A-Za-z_]\w*)/); + const name = asMatch ? asMatch[1] : t; + if (/^[a-z][A-Za-z0-9_]*$/.test(name)) names.add(name); + } + } + return names; +} + +const files = walk(srcRoot); +const source = Object.fromEntries(files.map((f) => [f, readFileSync(f, 'utf8')])); + +// Extract the full parameter block + return type for a named arrow-const. +function extractSignature(name) { + for (const [file, code] of Object.entries(source)) { + const idx = code.indexOf(`export const ${name} = `); + if (idx < 0) continue; + let i = idx + `export const ${name} = `.length; + // optional `async` + if (code.startsWith('async ', i)) i += 6; + if (code[i] !== '(') continue; + let depth = 0; + const parenStart = i; + for (; i < code.length; i++) { + if (code[i] === '(') depth++; + else if (code[i] === ')') { + depth--; + if (depth === 0) { + i++; + break; + } + } + } + const params = code.slice(parenStart + 1, i - 1); + // return type: from `:` to `=>` + const arrow = code.indexOf('=>', i); + const ret = code + .slice(i, arrow) + .replace(/^\s*:\s*/, '') + .trim(); + return { file: file.replace(srcRoot + '/', '').replace(/\\/g, '/'), params, ret }; + } + return null; +} + +// Split a parameter list on top-level commas (ignoring nested <>, (), {}, []). +function splitTop(s) { + const out = []; + let depth = 0, + cur = ''; + for (const ch of s) { + if ('<([{'.includes(ch)) depth++; + else if ('>)]}'.includes(ch)) depth--; + if (ch === ',' && depth === 0) { + out.push(cur); + cur = ''; + } else cur += ch; + } + if (cur.trim()) out.push(cur); + return out.map((x) => x.trim()).filter(Boolean); +} + +// Classify a TS type string into a UI param kind. +function kindOf(typeText, paramName) { + const t = typeText.replace(/\s+/g, ' ').trim(); + const lname = (paramName || '').toLowerCase(); + if (/^Emu\b/.test(t) || /\bEmu$/.test(t)) return 'emu'; + if (lname === 'color' || /\bcolor\b/i.test(lname)) return 'color'; + if (/^number\b/.test(t)) return 'number'; + if (/^boolean\b/.test(t)) return 'boolean'; + if (/^string\b/.test(t)) return 'string'; + // string-literal union → enum + const lits = t.match(/'[^']+'/g); + if ( + lits && + new RegExp(`^(?:'[^']+'\\s*\\|?\\s*)+$`).test(t.replace(/\bnull\b|\bundefined\b/g, '').trim()) + ) { + return 'enum'; + } + if (/^\{/.test(t) || /Options$|Spec$|Data$|Input$/.test(t)) return 'object'; + return 'object'; +} + +function parseParam(p) { + // `name?: Type` or `name: Type = default` + const eq = (() => { + // find top-level ` = ` for defaults + let depth = 0; + for (let i = 0; i < p.length - 2; i++) { + const ch = p[i]; + if ('<([{'.includes(ch)) depth++; + else if ('>)]}'.includes(ch)) depth--; + if (depth === 0 && p.slice(i, i + 3) === ' = ') return i; + } + return -1; + })(); + let deflt; + let body = p; + if (eq >= 0) { + deflt = p.slice(eq + 3).trim(); + body = p.slice(0, eq).trim(); + } + const colon = body.indexOf(':'); + if (colon < 0) + return { + name: body.replace(/[?]/g, '').trim(), + type: 'unknown', + kind: 'object', + optional: body.includes('?'), + }; + const rawName = body.slice(0, colon).trim(); + const optional = rawName.endsWith('?'); + const name = rawName.replace(/\?$/, '').replace(/^\{[\s\S]*$/, 'options'); + const type = body.slice(colon + 1).trim(); + const kind = kindOf(type, name); + const spec = { name, type: type.replace(/\s+/g, ' '), kind, optional }; + if (deflt !== undefined) spec.default = deflt; + if (kind === 'enum') { + spec.enumValues = (type.match(/'([^']+)'/g) || []).map((x) => x.slice(1, -1)); + } + return spec; +} + +const OPERAND_BY_TYPE = { + PresentationData: 'presentation', + SlideData: 'slide', + SlideShapeData: 'shape', + TableCellData: 'cell', +}; + +// Heuristic category from the source file name + export name. +function categoryOf(name, file) { + const f = file; + if (/charts\.ts$/.test(f)) return 'chart'; + if (/tables\.ts$/.test(f)) return 'table'; + if (/transition/.test(f)) return 'transition'; + if (/animation/.test(f)) return 'animation'; + if (/comments\.ts$/.test(f)) return 'comment'; + if (/notes/.test(f)) return 'notes'; + if (/theme|color-map|features/.test(f)) return 'theme'; + if (/background/.test(f)) return 'slide-background'; + if (/sections/.test(f)) return 'section'; + if ( + /\bslide-(deck|query|size|title)\b/.test(f) || + (/Slide/.test(name) && /slides?\b/i.test(name)) + ) + return 'slide'; + if (/hyperlink/i.test(name)) return 'hyperlink'; + if (/image/i.test(name)) return 'image'; + if (/gradient|patternfill|nofill|fill/i.test(name)) return 'fill'; + if (/stroke|arrow|dash|cap|join|compound/i.test(name)) return 'stroke'; + if (/glow|shadow|effect|reflection/i.test(name)) return 'effect'; + if (/paragraph|bullet/i.test(name)) return 'paragraph'; + if (/run|text|font|anchor|autofit|wrap|margin|column|direction/i.test(name)) return 'text'; + if (/^set?Shape|Shape/.test(name)) return 'shape'; + if (/Slide/.test(name)) return 'slide'; + if (/Presentation|Core|Extended|Revision|Modified|Media|Thumbnail|Package/.test(name)) + return 'presentation'; + return 'misc'; +} + +const publicNames = [...publicValueExports()].filter(isMutating).sort(); +const capabilities = []; +const missing = []; +for (const name of publicNames) { + const sig = extractSignature(name); + if (!sig) { + missing.push(name); + continue; + } + const allParams = splitTop(sig.params).map(parseParam); + // The operand is the leading parameter *only* when its type is one of the + // domain objects (PresentationData / SlideData / SlideShapeData / + // TableCellData). Factories like `createPresentation(options)` take no + // operand — their first parameter is a real user argument. + const firstType = allParams.length ? (allParams[0].type || '').split(/[<\s]/)[0] : ''; + const operandFromFirst = OPERAND_BY_TYPE[firstType]; + const takesOperand = Boolean(operandFromFirst); + const operand = operandFromFirst ?? 'presentation'; + // `params` is the user-facing argument list — the operand is dropped so the + // registry/forms never ask the user to supply the object they already have + // selected. + const params = takesOperand ? allParams.slice(1) : allParams; + capabilities.push({ + id: name, + operand, + takesOperand, + category: categoryOf(name, sig.file), + file: sig.file, + returns: sig.ret, + canvas: !NON_CANVAS.has(name), + params, + }); +} + +if (missing.length) { + console.error('WARNING: could not extract signatures for:', missing.join(', ')); +} + +const outPath = join(here, 'capabilities.generated.json'); +writeFileSync( + outPath, + JSON.stringify( + { generatedFrom: 'src/api/index.ts', count: capabilities.length, capabilities }, + null, + 2, + ) + '\n', +); +console.log(`Wrote ${capabilities.length} capabilities to ${outPath.replace(repoRoot + '/', '')}`); diff --git a/site/src/lib/editor/manifest/index.ts b/site/src/lib/editor/manifest/index.ts new file mode 100644 index 00000000..50f5fdf2 --- /dev/null +++ b/site/src/lib/editor/manifest/index.ts @@ -0,0 +1,110 @@ +// The resolved capability manifest — generated catalogue + human overrides. +// +// Consumers (registry, ribbon, command palette, coverage test) import from +// here, never from the raw JSON. This is the single list the whole editor +// treats as "everything the library can author". + +import generated from './capabilities.generated.json'; +import { overrides } from './overrides.ts'; +import type { Capability, CategoryId, ResolvedCapability } from './types.ts'; + +const base = generated.capabilities as unknown as Capability[]; +const baseIds = new Set(base.map((c) => c.id)); + +// Guard: an override must refine an existing capability, never invent one. +// (Coverage is enforced against the generated set in +// `test/editor-capability-coverage.test.ts`; this keeps overrides honest at +// module load so a stale/misspelled key fails loudly instead of silently.) +for (const id of Object.keys(overrides)) { + if (!baseIds.has(id)) { + throw new Error( + `Capability override "${id}" does not match any generated capability. Re-run manifest/generate.mjs or fix the key.`, + ); + } +} + +/** Default English label from a camelCase id: `setShapeFill` → "Set shape fill". */ +function humanize(id: string): string { + const words = id.replace(/([a-z0-9])([A-Z])/g, '$1 $2').split(/\s+/); + return words + .map((w, i) => (i === 0 ? (w[0] ?? '').toUpperCase() + w.slice(1) : w.toLowerCase())) + .join(' '); +} + +export const capabilities: readonly ResolvedCapability[] = base + .map((cap): ResolvedCapability => { + const o = overrides[cap.id] ?? {}; + return { + ...cap, + category: o.category ?? cap.category, + params: o.params ?? cap.params, + labelEn: o.labelEn ?? humanize(cap.id), + labelJa: o.labelJa ?? humanize(cap.id), + ...(o.ribbonGroup !== undefined ? { ribbonGroup: o.ribbonGroup } : {}), + primary: o.primary ?? false, + }; + }) + .sort((a, b) => a.id.localeCompare(b.id)); + +/** Fast id → capability lookup. */ +export const capabilityById: ReadonlyMap = new Map( + capabilities.map((c) => [c.id, c]), +); + +export function capabilitiesByCategory(category: CategoryId): ResolvedCapability[] { + return capabilities.filter((c) => c.category === category); +} + +export function capabilitiesForOperand( + operand: ResolvedCapability['operand'], +): ResolvedCapability[] { + return capabilities.filter((c) => c.operand === operand); +} + +export const CATEGORY_ORDER: readonly CategoryId[] = [ + 'slide', + 'shape', + 'text', + 'paragraph', + 'fill', + 'stroke', + 'effect', + 'image', + 'table', + 'chart', + 'animation', + 'transition', + 'hyperlink', + 'comment', + 'notes', + 'slide-background', + 'section', + 'theme', + 'presentation', + 'misc', +]; + +export const CATEGORY_LABELS: Record = { + slide: { en: 'Slides', ja: 'スライド' }, + shape: { en: 'Shapes', ja: '図形' }, + text: { en: 'Text', ja: 'テキスト' }, + paragraph: { en: 'Paragraph', ja: '段落' }, + fill: { en: 'Fill', ja: '塗りつぶし' }, + stroke: { en: 'Line', ja: '線' }, + effect: { en: 'Effects', ja: '効果' }, + image: { en: 'Picture', ja: '画像' }, + table: { en: 'Table', ja: '表' }, + chart: { en: 'Chart', ja: 'グラフ' }, + animation: { en: 'Animation', ja: 'アニメーション' }, + transition: { en: 'Transitions', ja: '画面切り替え' }, + hyperlink: { en: 'Hyperlink', ja: 'ハイパーリンク' }, + comment: { en: 'Comments', ja: 'コメント' }, + notes: { en: 'Notes', ja: 'ノート' }, + 'slide-background': { en: 'Background', ja: '背景' }, + section: { en: 'Sections', ja: 'セクション' }, + theme: { en: 'Design', ja: 'デザイン' }, + presentation: { en: 'Document', ja: 'ドキュメント' }, + misc: { en: 'Other', ja: 'その他' }, +}; + +export type { Capability, CategoryId, ResolvedCapability } from './types.ts'; diff --git a/site/src/lib/editor/manifest/overrides.generated.ts b/site/src/lib/editor/manifest/overrides.generated.ts new file mode 100644 index 00000000..f2bf1f95 --- /dev/null +++ b/site/src/lib/editor/manifest/overrides.generated.ts @@ -0,0 +1,1739 @@ +// AUTO-GENERATED by build-generated-overrides.mjs from an enrichment pass that +// read the @office-kit/pptx type sources. Provides field-based parameter schemas +// (accurate enum members, nested object/array fields) so the command dialogs are +// forms rather than JSON blobs. Do not edit by hand — re-run the generator. +// Human tweaks belong in overrides.ts, which is merged on top of these. +import type { CapabilityOverride } from './types.ts'; + +export const generatedOverrides: Record = { + addSlideComment: { + labelEn: 'Add Slide Comment', + labelJa: 'スライドにコメントを追加', + params: [ + { + name: 'opts', + type: '{ author: { name: string; initials?: string }; text: string; position?: CommentPosition | null; date?: Date; }', + kind: 'object', + optional: false, + label: 'Comment', + fields: [ + { + name: 'author', + type: '{ name: string; initials?: string }', + kind: 'object', + optional: false, + label: 'Author', + fields: [ + { + name: 'name', + type: 'string', + kind: 'string', + optional: false, + label: 'Author Name', + }, + { + name: 'initials', + type: 'string', + kind: 'string', + optional: true, + label: 'Initials', + }, + ], + }, + { + name: 'text', + type: 'string', + kind: 'string', + optional: false, + label: 'Text', + }, + { + name: 'position', + type: 'CommentPosition | null', + kind: 'object', + optional: true, + label: 'Position (EMU)', + fields: [ + { + name: 'x', + type: 'number', + kind: 'emu', + optional: false, + label: 'X', + }, + { + name: 'y', + type: 'number', + kind: 'emu', + optional: false, + label: 'Y', + }, + ], + }, + { + name: 'date', + type: 'Date', + kind: 'string', + optional: true, + label: 'Date (ISO)', + }, + ], + }, + ], + }, + setParagraphAlignment: { + labelEn: 'Set Paragraph Alignment', + labelJa: '段落の配置を設定', + params: [ + { + name: 'paragraphIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Paragraph Index', + }, + { + name: 'align', + type: 'ParagraphAlignment', + kind: 'enum', + optional: false, + label: 'Alignment', + enumValues: [ + 'left', + 'center', + 'right', + 'justify', + 'distribute', + 'l', + 'ctr', + 'r', + 'just', + 'dist', + 'justLow', + 'thaiDist', + ], + }, + ], + }, + setShapeAlignment: { + labelEn: 'Set Shape Text Alignment', + labelJa: '図形テキストの配置を設定', + params: [ + { + name: 'align', + type: 'ParagraphAlignment', + kind: 'enum', + optional: false, + label: 'Alignment', + enumValues: [ + 'left', + 'center', + 'right', + 'justify', + 'distribute', + 'l', + 'ctr', + 'r', + 'just', + 'dist', + 'justLow', + 'thaiDist', + ], + }, + ], + }, + setShapeStrokeArrow: { + labelEn: 'Set Shape Stroke Arrow', + labelJa: '図形の線の矢印を設定', + params: [ + { + name: 'end', + type: "'head' | 'tail'", + kind: 'enum', + optional: false, + label: 'End', + enumValues: ['head', 'tail'], + }, + { + name: 'options', + type: 'ArrowOptions', + kind: 'object', + optional: false, + label: 'Arrow Options', + fields: [ + { + name: 'type', + type: 'LineEndType', + kind: 'enum', + optional: false, + label: 'Type', + enumValues: ['none', 'triangle', 'stealth', 'diamond', 'oval', 'arrow'], + }, + { + name: 'width', + type: 'LineEndSize', + kind: 'enum', + optional: true, + label: 'Width', + enumValues: ['sm', 'med', 'lg'], + }, + { + name: 'length', + type: 'LineEndSize', + kind: 'enum', + optional: true, + label: 'Length', + enumValues: ['sm', 'med', 'lg'], + }, + ], + }, + ], + }, + setShapeTextFormat: { + labelEn: 'Set Shape Text Format', + labelJa: '図形テキストの書式を設定', + params: [ + { + name: 'format', + type: 'TextFormat', + kind: 'object', + optional: false, + label: 'Text Format', + fields: [ + { + name: 'font', + type: 'string', + kind: 'string', + optional: true, + label: 'Font (Latin)', + }, + { + name: 'fontEastAsian', + type: 'string', + kind: 'string', + optional: true, + label: 'Font (East Asian)', + }, + { + name: 'size', + type: 'number', + kind: 'number', + optional: true, + label: 'Size (pt)', + }, + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'bold', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Bold', + }, + { + name: 'italic', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Italic', + }, + { + name: 'underline', + type: 'boolean | string', + kind: 'string', + optional: true, + label: 'Underline', + }, + { + name: 'strike', + type: 'boolean | string', + kind: 'string', + optional: true, + label: 'Strikethrough', + }, + { + name: 'spc', + type: 'number', + kind: 'number', + optional: true, + label: 'Char Spacing (1/100pt)', + }, + { + name: 'baseline', + type: 'number', + kind: 'number', + optional: true, + label: 'Baseline (fraction)', + }, + { + name: 'cap', + type: "'none' | 'small' | 'all'", + kind: 'enum', + optional: true, + label: 'Caps', + enumValues: ['none', 'small', 'all'], + }, + { + name: 'highlight', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Highlight', + }, + ], + }, + ], + }, + setTableCellBorders: { + labelEn: 'Set Table Cell Borders', + labelJa: '表セルの罫線を設定', + params: [ + { + name: 'sides', + type: '{ left?, right?, top?, bottom?, tlToBr?, blToTr?: Partial | null } | null', + kind: 'object', + optional: true, + label: 'Sides', + fields: [ + { + name: 'left', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Left', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + { + name: 'right', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Right', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + { + name: 'top', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Top', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + { + name: 'bottom', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Bottom', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + { + name: 'tlToBr', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Diagonal TL→BR', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + { + name: 'blToTr', + type: 'Partial | null', + kind: 'object', + optional: true, + label: 'Diagonal BL→TR', + fields: [ + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'widthEmu', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Width (EMU)', + }, + { + name: 'dash', + type: 'string | null', + kind: 'string', + optional: true, + label: 'Dash', + }, + ], + }, + ], + }, + ], + }, + groupShapes: { + labelEn: 'Group Shapes', + labelJa: '図形をグループ化', + params: [ + { + name: 'shapes', + type: 'ReadonlyArray', + kind: 'object', + optional: false, + label: 'Shapes to group', + }, + { + name: 'opts', + type: '{ name?: string }', + kind: 'object', + optional: true, + label: 'Options', + fields: [ + { + name: 'name', + type: 'string', + kind: 'string', + optional: true, + label: 'Group name', + }, + ], + }, + ], + }, + setParagraphBullet: { + labelEn: 'Set Paragraph Bullet', + labelJa: '段落の箇条書きを設定', + params: [ + { + name: 'paragraphIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Paragraph index', + }, + { + name: 'style', + type: 'BulletStyle', + kind: 'object', + optional: false, + label: 'Bullet style (kind + value; value used for char/autoNum)', + fields: [ + { + name: 'kind', + type: "'bullet' | 'number' | 'none' | 'char' | 'autoNum'", + kind: 'enum', + optional: false, + label: 'Kind', + enumValues: ['bullet', 'number', 'none', 'char', 'autoNum'], + }, + { + name: 'value', + type: 'string', + kind: 'string', + optional: true, + label: 'Value (char glyph or autoNum type)', + }, + ], + }, + ], + }, + setShapeBounds: { + labelEn: 'Set Shape Bounds', + labelJa: '図形の位置とサイズを設定', + params: [ + { + name: 'bounds', + type: 'ShapeBounds', + kind: 'object', + optional: false, + label: 'Bounds', + fields: [ + { + name: 'x', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'X', + }, + { + name: 'y', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'Y', + }, + { + name: 'w', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'Width', + }, + { + name: 'h', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'Height', + }, + ], + }, + ], + }, + setShapeStrokeDash: { + labelEn: 'Set Shape Stroke Dash', + labelJa: '図形の線の破線パターンを設定', + params: [ + { + name: 'dash', + type: 'LineDash', + kind: 'enum', + optional: false, + label: 'Dash pattern', + enumValues: [ + 'solid', + 'dot', + 'dash', + 'lgDash', + 'dashDot', + 'lgDashDot', + 'lgDashDotDot', + 'sysDash', + 'sysDot', + 'sysDashDot', + 'sysDashDotDot', + ], + }, + ], + }, + setShapeTextMargins: { + labelEn: 'Set Shape Text Margins', + labelJa: '図形のテキスト余白を設定', + params: [ + { + name: 'margins', + type: '{ left?: number; top?: number; right?: number; bottom?: number }', + kind: 'object', + optional: false, + label: 'Text margins (EMU)', + fields: [ + { + name: 'left', + type: 'number', + kind: 'emu', + optional: true, + label: 'Left', + }, + { + name: 'top', + type: 'number', + kind: 'emu', + optional: true, + label: 'Top', + }, + { + name: 'right', + type: 'number', + kind: 'emu', + optional: true, + label: 'Right', + }, + { + name: 'bottom', + type: 'number', + kind: 'emu', + optional: true, + label: 'Bottom', + }, + ], + }, + ], + }, + setTableCellMargins: { + labelEn: 'Set Table Cell Margins', + labelJa: '表セルの余白を設定', + params: [ + { + name: 'margins', + type: '{ left?: number | null; right?: number | null; top?: number | null; bottom?: number | null } | null', + kind: 'object', + optional: true, + label: 'Cell margins (EMU; null to clear)', + fields: [ + { + name: 'left', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Left', + }, + { + name: 'right', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Right', + }, + { + name: 'top', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Top', + }, + { + name: 'bottom', + type: 'number | null', + kind: 'emu', + optional: true, + label: 'Bottom', + }, + ], + }, + ], + }, + insertTableRow: { + labelEn: 'Insert Table Row', + labelJa: 'テーブルの行を挿入', + params: [ + { + name: 'atIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Insert position (row index)', + }, + { + name: 'cells', + type: 'ReadonlyArray', + kind: 'array', + optional: false, + label: 'Cell texts', + item: { + name: 'cell', + type: 'string', + kind: 'string', + optional: false, + label: 'Cell text', + }, + }, + ], + }, + setParagraphLineSpacing: { + labelEn: 'Set Paragraph Line Spacing', + labelJa: '段落の行間を設定', + params: [ + { + name: 'paragraphIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Paragraph index', + }, + { + name: 'spacing', + type: "{ kind: 'pct' | 'pts'; value: number } | null", + kind: 'object', + optional: true, + label: 'Line spacing (percent or points; omit to clear)', + fields: [ + { + name: 'kind', + type: "'pct' | 'pts'", + kind: 'enum', + optional: false, + label: 'Unit', + enumValues: ['pct', 'pts'], + }, + { + name: 'value', + type: 'number', + kind: 'number', + optional: false, + label: 'Value', + }, + ], + }, + ], + }, + setShapeBullets: { + labelEn: 'Set Shape Bullets', + labelJa: '図形の箇条書きを設定', + params: [ + { + name: 'style', + type: "'bullet' | 'number' | 'none' | { char: string } | { autoNum: string }", + kind: 'object', + optional: false, + label: 'Bullet style', + fields: [ + { + name: 'kind', + type: "'bullet' | 'number' | 'none' | 'char' | 'autoNum'", + kind: 'enum', + optional: false, + label: 'Bullet kind', + enumValues: ['bullet', 'number', 'none', 'char', 'autoNum'], + }, + { + name: 'value', + type: 'string', + kind: 'string', + optional: true, + label: "Custom char / autoNum type (for 'char' or 'autoNum')", + }, + ], + }, + ], + }, + setShapeText: { + labelEn: 'Set Shape Text', + labelJa: '図形のテキストを設定', + params: [ + { + name: 'value', + type: 'string', + kind: 'string', + optional: false, + label: 'Text', + }, + { + name: 'options', + type: '{ bullets?: BulletStyle }', + kind: 'object', + optional: true, + label: 'Options', + fields: [ + { + name: 'bullets', + type: "'bullet' | 'number' | 'none' | { char: string } | { autoNum: string }", + kind: 'object', + optional: true, + label: 'Bullet style', + fields: [ + { + name: 'kind', + type: "'bullet' | 'number' | 'none' | 'char' | 'autoNum'", + kind: 'enum', + optional: false, + label: 'Bullet kind', + enumValues: ['bullet', 'number', 'none', 'char', 'autoNum'], + }, + { + name: 'value', + type: 'string', + kind: 'string', + optional: true, + label: 'Custom char / autoNum type', + }, + ], + }, + ], + }, + ], + }, + setShapeTextWrap: { + labelEn: 'Set Shape Text Wrap', + labelJa: '図形のテキスト折り返しを設定', + params: [ + { + name: 'wrap', + type: "'none' | 'square'", + kind: 'enum', + optional: false, + label: 'Text wrap', + enumValues: ['none', 'square'], + }, + ], + }, + setTableCellTextDirection: { + labelEn: 'Set Table Cell Text Direction', + labelJa: 'テーブルセルの文字方向を設定', + params: [ + { + name: 'direction', + type: "'horz' | 'vert' | 'vert270' | 'wordArtVert' | 'eaVert' | 'mongolianVert' | 'wordArtVertRtl' | null", + kind: 'enum', + optional: true, + label: 'Text direction (omit/null clears to default horizontal)', + enumValues: [ + 'horz', + 'vert', + 'vert270', + 'wordArtVert', + 'eaVert', + 'mongolianVert', + 'wordArtVertRtl', + ], + }, + ], + }, + mergeTableCells: { + labelEn: 'Merge Table Cells', + labelJa: '表のセルを結合', + params: [ + { + name: 'block', + type: '{ row: number; col: number; rowSpan: number; colSpan: number }', + kind: 'object', + optional: false, + label: 'Merge Block', + fields: [ + { + name: 'row', + type: 'number', + kind: 'index', + optional: false, + label: 'Start Row', + }, + { + name: 'col', + type: 'number', + kind: 'index', + optional: false, + label: 'Start Column', + }, + { + name: 'rowSpan', + type: 'number', + kind: 'index', + optional: false, + label: 'Row Span', + }, + { + name: 'colSpan', + type: 'number', + kind: 'index', + optional: false, + label: 'Column Span', + }, + ], + }, + ], + }, + setParagraphSpacing: { + labelEn: 'Set Paragraph Spacing', + labelJa: '段落の余白を設定', + params: [ + { + name: 'paragraphIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Paragraph Index', + }, + { + name: 'opts', + type: '{ beforePts?: number | null; afterPts?: number | null }', + kind: 'object', + optional: false, + label: 'Spacing Options', + fields: [ + { + name: 'beforePts', + type: 'number | null', + kind: 'number', + optional: true, + label: 'Space Before (pt)', + }, + { + name: 'afterPts', + type: 'number | null', + kind: 'number', + optional: true, + label: 'Space After (pt)', + }, + ], + }, + ], + }, + setShapeClickAction: { + labelEn: 'Set Shape Click Action', + labelJa: '図形のクリック動作を設定', + params: [ + { + name: 'action', + type: 'ShapeClickAction | null', + kind: 'object', + optional: true, + label: 'Click Action', + fields: [ + { + name: 'kind', + type: "'url' | 'slide' | 'nextSlide' | 'prevSlide' | 'firstSlide' | 'lastSlide'", + kind: 'enum', + optional: false, + label: 'Action Type', + enumValues: ['url', 'slide', 'nextSlide', 'prevSlide', 'firstSlide', 'lastSlide'], + }, + { + name: 'url', + type: 'string', + kind: 'string', + optional: true, + label: 'URL (when type is url)', + }, + ], + }, + ], + }, + setShapeTextAnchor: { + labelEn: 'Set Shape Text Anchor', + labelJa: '図形テキストの垂直配置を設定', + params: [ + { + name: 'anchor', + type: 'TextAnchor', + kind: 'enum', + optional: false, + label: 'Vertical Anchor', + enumValues: ['top', 'center', 'bottom'], + }, + ], + }, + setSlidePlaceholders: { + labelEn: 'Set Slide Placeholders', + labelJa: 'スライドのプレースホルダーを設定', + params: [ + { + name: 'byType', + type: 'Readonly>', + kind: 'object', + optional: false, + label: 'Placeholder Text by Type (JSON)', + }, + ], + }, + setTableCellTextFormat: { + labelEn: 'Set Table Cell Text Format', + labelJa: '表セルの文字書式を設定', + params: [ + { + name: 'format', + type: 'TextFormat', + kind: 'object', + optional: false, + label: 'Text Format', + fields: [ + { + name: 'font', + type: 'string', + kind: 'string', + optional: true, + label: 'Font (Latin)', + }, + { + name: 'fontEastAsian', + type: 'string', + kind: 'string', + optional: true, + label: 'Font (East Asian)', + }, + { + name: 'size', + type: 'number', + kind: 'number', + optional: true, + label: 'Size (pt)', + }, + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'bold', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Bold', + }, + { + name: 'italic', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Italic', + }, + { + name: 'underline', + type: 'boolean | string', + kind: 'boolean', + optional: true, + label: 'Underline', + }, + { + name: 'strike', + type: 'boolean | string', + kind: 'boolean', + optional: true, + label: 'Strikethrough', + }, + { + name: 'spc', + type: 'number', + kind: 'number', + optional: true, + label: 'Character Spacing (1/100pt)', + }, + { + name: 'baseline', + type: 'number', + kind: 'number', + optional: true, + label: 'Baseline Offset (fraction)', + }, + { + name: 'cap', + type: "'none' | 'small' | 'all'", + kind: 'enum', + optional: true, + label: 'Capitalization', + enumValues: ['none', 'small', 'all'], + }, + { + name: 'highlight', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Highlight Color', + }, + ], + }, + ], + }, + removeSlideComment: { + labelEn: 'Remove Slide Comment', + labelJa: 'スライドコメントを削除', + params: [ + { + name: 'comment', + type: 'SlideCommentData', + kind: 'object', + optional: false, + label: 'Comment handle (opaque)', + }, + ], + }, + setPresentationFonts: { + labelEn: 'Set Presentation Fonts', + labelJa: 'プレゼンテーションのフォントを設定', + params: [ + { + name: 'fonts', + type: 'PresentationFontsInput', + kind: 'object', + optional: false, + label: 'Fonts', + fields: [ + { + name: 'majorLatin', + type: 'string', + kind: 'string', + optional: true, + label: 'Major Latin (headings)', + }, + { + name: 'majorEastAsian', + type: 'string', + kind: 'string', + optional: true, + label: 'Major East Asian', + }, + { + name: 'majorComplexScript', + type: 'string', + kind: 'string', + optional: true, + label: 'Major Complex Script', + }, + { + name: 'minorLatin', + type: 'string', + kind: 'string', + optional: true, + label: 'Minor Latin (body)', + }, + { + name: 'minorEastAsian', + type: 'string', + kind: 'string', + optional: true, + label: 'Minor East Asian', + }, + { + name: 'minorComplexScript', + type: 'string', + kind: 'string', + optional: true, + label: 'Minor Complex Script', + }, + ], + }, + ], + }, + setShapeFlip: { + labelEn: 'Set Shape Flip', + labelJa: '図形の反転を設定', + params: [ + { + name: 'options', + type: '{ horizontal?: boolean; vertical?: boolean }', + kind: 'object', + optional: false, + label: 'Flip', + fields: [ + { + name: 'horizontal', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Horizontal', + }, + { + name: 'vertical', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Vertical', + }, + ], + }, + ], + }, + setShapeTextAutoFit: { + labelEn: 'Set Shape Text Auto-Fit', + labelJa: '図形テキストの自動調整を設定', + params: [ + { + name: 'mode', + type: 'TextAutoFit', + kind: 'enum', + optional: false, + label: 'Auto-fit mode', + enumValues: ['none', 'normal', 'shape'], + }, + ], + }, + setSlideSections: { + labelEn: 'Set Slide Sections', + labelJa: 'スライドセクションを設定', + params: [ + { + name: 'sections', + type: 'ReadonlyArray<{ name: string; slides: ReadonlyArray }>', + kind: 'array', + optional: false, + label: 'Sections', + item: { + name: 'section', + type: '{ name: string; slides: ReadonlyArray }', + kind: 'object', + optional: false, + fields: [ + { + name: 'name', + type: 'string', + kind: 'string', + optional: false, + label: 'Section name', + }, + { + name: 'slides', + type: 'ReadonlyArray', + kind: 'array', + optional: false, + label: 'Slides', + item: { + name: 'slide', + type: 'SlideData', + kind: 'object', + optional: false, + label: 'Slide handle (opaque)', + }, + }, + ], + }, + }, + ], + }, + setTableStyleFlags: { + labelEn: 'Set Table Style Flags', + labelJa: 'テーブルスタイルフラグを設定', + params: [ + { + name: 'flags', + type: '{ firstRow?: boolean; lastRow?: boolean; firstCol?: boolean; lastCol?: boolean; bandRow?: boolean; bandCol?: boolean }', + kind: 'object', + optional: false, + label: 'Style flags', + fields: [ + { + name: 'firstRow', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'First row', + }, + { + name: 'lastRow', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Last row', + }, + { + name: 'firstCol', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'First column', + }, + { + name: 'lastCol', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Last column', + }, + { + name: 'bandRow', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Banded rows', + }, + { + name: 'bandCol', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Banded columns', + }, + ], + }, + ], + }, + replaceTokensInPresentation: { + labelEn: 'Replace Tokens in Presentation', + labelJa: 'プレゼンテーション内のトークンを置換', + params: [ + { + name: 'tokens', + type: 'Record', + kind: 'object', + optional: false, + label: 'Token map (key → replacement)', + }, + ], + }, + setPresentationTheme: { + labelEn: 'Set Presentation Theme', + labelJa: 'プレゼンテーションのテーマを設定', + params: [ + { + name: 'theme', + type: "Partial> & { name?: string }", + kind: 'object', + optional: false, + label: 'Theme color scheme', + fields: [ + { + name: 'name', + type: 'string', + kind: 'string', + optional: true, + label: 'Theme name', + }, + { + name: 'dark1', + type: 'string', + kind: 'color', + optional: true, + label: 'Dark 1', + }, + { + name: 'light1', + type: 'string', + kind: 'color', + optional: true, + label: 'Light 1', + }, + { + name: 'dark2', + type: 'string', + kind: 'color', + optional: true, + label: 'Dark 2', + }, + { + name: 'light2', + type: 'string', + kind: 'color', + optional: true, + label: 'Light 2', + }, + { + name: 'accent1', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 1', + }, + { + name: 'accent2', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 2', + }, + { + name: 'accent3', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 3', + }, + { + name: 'accent4', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 4', + }, + { + name: 'accent5', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 5', + }, + { + name: 'accent6', + type: 'string', + kind: 'color', + optional: true, + label: 'Accent 6', + }, + { + name: 'hyperlink', + type: 'string', + kind: 'color', + optional: true, + label: 'Hyperlink', + }, + { + name: 'followedHyperlink', + type: 'string', + kind: 'color', + optional: true, + label: 'Followed hyperlink', + }, + ], + }, + ], + }, + setShapeRunFormat: { + labelEn: 'Set Shape Run Format', + labelJa: '図形のラン書式を設定', + params: [ + { + name: 'paragraphIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Paragraph index', + }, + { + name: 'runIndex', + type: 'number', + kind: 'index', + optional: false, + label: 'Run index', + }, + { + name: 'format', + type: 'TextFormat', + kind: 'object', + optional: false, + label: 'Text format', + fields: [ + { + name: 'font', + type: 'string', + kind: 'string', + optional: true, + label: 'Latin font', + }, + { + name: 'fontEastAsian', + type: 'string', + kind: 'string', + optional: true, + label: 'East Asian font', + }, + { + name: 'size', + type: 'number', + kind: 'number', + optional: true, + label: 'Size (pt)', + }, + { + name: 'color', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Color', + }, + { + name: 'bold', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Bold', + }, + { + name: 'italic', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Italic', + }, + { + name: 'underline', + type: 'boolean | string', + kind: 'string', + optional: true, + label: 'Underline (true or token)', + }, + { + name: 'strike', + type: 'boolean | string', + kind: 'string', + optional: true, + label: 'Strike (true or token)', + }, + { + name: 'spc', + type: 'number', + kind: 'number', + optional: true, + label: 'Char spacing (1/100 pt)', + }, + { + name: 'kern', + type: 'number', + kind: 'number', + optional: true, + label: 'Kerning (1/100 pt)', + }, + { + name: 'baseline', + type: 'number', + kind: 'number', + optional: true, + label: 'Baseline (fraction)', + }, + { + name: 'cap', + type: "'none' | 'small' | 'all'", + kind: 'enum', + optional: true, + label: 'Caps', + enumValues: ['none', 'small', 'all'], + }, + { + name: 'highlight', + type: 'string | null', + kind: 'color', + optional: true, + label: 'Highlight', + }, + ], + }, + ], + }, + setShapeTextColumns: { + labelEn: 'Set Shape Text Columns', + labelJa: '図形テキストの段組みを設定', + params: [ + { + name: 'columns', + type: '{ count: number; gapEmu?: number } | null', + kind: 'object', + optional: true, + label: 'Columns (null to clear)', + fields: [ + { + name: 'count', + type: 'number', + kind: 'index', + optional: false, + label: 'Column count', + }, + { + name: 'gapEmu', + type: 'number', + kind: 'emu', + optional: true, + label: 'Gap (EMU)', + }, + ], + }, + ], + }, + setSlideSize: { + labelEn: 'Set Slide Size', + labelJa: 'スライドサイズを設定', + params: [ + { + name: 'opts', + type: 'SlideSize', + kind: 'object', + optional: false, + label: 'Slide size', + fields: [ + { + name: 'width', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'Width (EMU)', + }, + { + name: 'height', + type: 'Emu', + kind: 'emu', + optional: false, + label: 'Height (EMU)', + }, + { + name: 'type', + type: 'string', + kind: 'string', + optional: true, + label: 'Aspect-ratio hint (e.g. screen16x9)', + }, + ], + }, + ], + }, + translateShapes: { + labelEn: 'Translate Shapes', + labelJa: '図形を移動', + params: [ + { + name: 'shapes', + type: 'ReadonlyArray', + kind: 'object', + optional: false, + label: 'Shapes (JSON)', + }, + { + name: 'dxEmu', + type: 'number', + kind: 'emu', + optional: false, + label: 'Δx (EMU)', + }, + { + name: 'dyEmu', + type: 'number', + kind: 'emu', + optional: false, + label: 'Δy (EMU)', + }, + ], + }, + replaceTokensInSlide: { + labelEn: 'Replace Tokens in Slide', + labelJa: 'スライド内のトークン置換', + params: [ + { + name: 'tokens', + type: 'Record', + kind: 'object', + optional: false, + label: 'Token map (token → replacement)', + }, + ], + }, + setShapeAdjustValues: { + labelEn: 'Set Shape Adjust Values', + labelJa: '図形の調整値を設定', + params: [ + { + name: 'values', + type: 'Readonly>', + kind: 'object', + optional: false, + label: 'Adjust handles (name → value)', + }, + ], + }, + setShapeTextDirection: { + labelEn: 'Set Shape Text Direction', + labelJa: '図形のテキスト方向を設定', + params: [ + { + name: 'direction', + type: "'horz' | 'vert' | 'vert270' | 'wordArtVert' | 'eaVert' | 'mongolianVert' | 'wordArtVertRtl' | null", + kind: 'enum', + optional: true, + label: 'Text direction', + enumValues: [ + 'horz', + 'vert', + 'vert270', + 'wordArtVert', + 'eaVert', + 'mongolianVert', + 'wordArtVertRtl', + ], + }, + ], + }, + setTableCellAlignment: { + labelEn: 'Set Table Cell Alignment', + labelJa: '表セルの配置を設定', + params: [ + { + name: 'align', + type: 'ParagraphAlignment', + kind: 'enum', + optional: false, + label: 'Alignment', + enumValues: [ + 'left', + 'center', + 'right', + 'justify', + 'distribute', + 'l', + 'ctr', + 'r', + 'just', + 'dist', + 'justLow', + 'thaiDist', + ], + }, + ], + }, +}; diff --git a/site/src/lib/editor/manifest/overrides.ts b/site/src/lib/editor/manifest/overrides.ts new file mode 100644 index 00000000..78dadf54 --- /dev/null +++ b/site/src/lib/editor/manifest/overrides.ts @@ -0,0 +1,416 @@ +// Human-authored refinements over the generated capability manifest. +// +// The generator gives every capability a working default (a humanized label and +// a parsed parameter schema). This file upgrades the ones that benefit from a +// hand-tuned schema, a bilingual label, a ribbon home, or `primary` prominence. +// Entries here NEVER remove capabilities — coverage stays exhaustive regardless +// of how much of this file is filled in. Unlisted capabilities simply use their +// generated defaults, which are still fully reachable via the command palette. + +import { generatedOverrides } from './overrides.generated.ts'; +import type { CapabilityOverride } from './types.ts'; + +// Hand-authored refinements. Merged on top of `generatedOverrides` (the +// workflow-enriched field schemas), so a hand entry wins for the same id. +const handOverrides: Record = { + // --- Slides ------------------------------------------------------------ + addBlankSlide: { + labelEn: 'Blank slide', + labelJa: '白紙のスライド', + ribbonGroup: 'slides', + primary: true, + params: [], + }, + addTitleSlide: { + labelEn: 'Title slide', + labelJa: 'タイトルスライド', + ribbonGroup: 'slides', + primary: true, + params: [{ name: 'title', type: 'string', kind: 'string', optional: false, label: 'Title' }], + }, + addContentSlide: { + labelEn: 'Title + content slide', + labelJa: 'タイトルとコンテンツ', + ribbonGroup: 'slides', + primary: true, + params: [ + { name: 'title', type: 'string', kind: 'string', optional: true, label: 'Title' }, + { name: 'body', type: 'string', kind: 'string', optional: true, label: 'Body' }, + ], + }, + duplicateSlide: { + labelEn: 'Duplicate slide', + labelJa: 'スライドの複製', + ribbonGroup: 'slides', + primary: true, + params: [], + }, + removeSlide: { + labelEn: 'Delete slide', + labelJa: 'スライドの削除', + ribbonGroup: 'slides', + primary: true, + params: [], + }, + moveSlide: { labelEn: 'Move slide', labelJa: 'スライドの移動', ribbonGroup: 'slides' }, + setSlideHidden: { + labelEn: 'Hide slide', + labelJa: 'スライドを非表示', + ribbonGroup: 'slides', + params: [ + { name: 'hidden', type: 'boolean', kind: 'boolean', optional: false, label: 'Hidden' }, + ], + }, + setSlideSize: { labelEn: 'Slide size', labelJa: 'スライドのサイズ', ribbonGroup: 'design' }, + + // --- Shapes ------------------------------------------------------------ + setShapeFill: { + labelEn: 'Shape fill', + labelJa: '図形の塗りつぶし', + ribbonGroup: 'shape-styles', + primary: true, + params: [{ name: 'color', type: 'string', kind: 'color', optional: false, label: 'Color' }], + }, + setShapeStroke: { + labelEn: 'Shape outline', + labelJa: '図形の枠線', + ribbonGroup: 'shape-styles', + primary: true, + // The library takes a single `options` object — flattening it would pass + // the wrong positional args. Render it as a field group. + params: [ + { + name: 'options', + type: '{ color?: string; widthEmu?: number }', + kind: 'object', + optional: false, + fields: [ + { name: 'color', type: 'string', kind: 'color', optional: true, label: 'Color' }, + { name: 'widthEmu', type: 'number', kind: 'emu', optional: true, label: 'Width' }, + ], + }, + ], + }, + setShapeNoFill: { + labelEn: 'No fill', + labelJa: '塗りつぶしなし', + ribbonGroup: 'shape-styles', + params: [], + }, + setShapeNoStroke: { + labelEn: 'No outline', + labelJa: '枠線なし', + ribbonGroup: 'shape-styles', + params: [], + }, + removeShape: { + labelEn: 'Delete shape', + labelJa: '図形の削除', + ribbonGroup: 'arrange', + primary: true, + params: [], + }, + bringShapeToFront: { + labelEn: 'Bring to front', + labelJa: '最前面へ', + ribbonGroup: 'arrange', + params: [], + }, + sendShapeToBack: { + labelEn: 'Send to back', + labelJa: '最背面へ', + ribbonGroup: 'arrange', + params: [], + }, + bringShapeForward: { + labelEn: 'Bring forward', + labelJa: '前面へ', + ribbonGroup: 'arrange', + params: [], + }, + sendShapeBackward: { + labelEn: 'Send backward', + labelJa: '背面へ', + ribbonGroup: 'arrange', + params: [], + }, + setShapeRotation: { + labelEn: 'Rotation', + labelJa: '回転', + ribbonGroup: 'arrange', + params: [ + { + name: 'degrees', + type: 'number', + kind: 'number', + optional: false, + label: 'Degrees', + default: '0', + }, + ], + }, + + // --- Effects / advanced fills (field-based nested dialogs) -------------- + setShapeGradientFill: { + labelEn: 'Gradient fill', + labelJa: 'グラデーション', + ribbonGroup: 'shape-styles', + params: [ + { + name: 'options', + type: 'GradientFillOptions', + kind: 'object', + optional: false, + fields: [ + { + name: 'stops', + type: 'GradientStop[]', + kind: 'array', + optional: false, + label: 'Color stops', + item: { + name: 'stop', + type: 'GradientStop', + kind: 'object', + optional: false, + fields: [ + { + name: 'offset', + type: 'number', + kind: 'number', + optional: false, + label: 'Offset (0–1)', + }, + { name: 'color', type: 'string', kind: 'color', optional: false, label: 'Color' }, + ], + }, + }, + { + name: 'angleDeg', + type: 'number', + kind: 'number', + optional: true, + label: 'Angle (°)', + default: '90', + }, + { + name: 'path', + type: "'linear'|'circle'|'rect'|'shape'", + kind: 'enum', + optional: true, + label: 'Path', + enumValues: ['linear', 'circle', 'rect', 'shape'], + }, + ], + }, + ], + }, + setShapePatternFill: { + labelEn: 'Pattern fill', + labelJa: 'パターン', + ribbonGroup: 'shape-styles', + params: [ + { + name: 'options', + type: 'PatternFillOptions', + kind: 'object', + optional: false, + fields: [ + { + name: 'preset', + type: 'PatternPreset', + kind: 'string', + optional: false, + label: 'Preset (e.g. pct50, dkUpDiag, wave)', + }, + { + name: 'foreground', + type: 'string', + kind: 'color', + optional: false, + label: 'Foreground', + }, + { + name: 'background', + type: 'string', + kind: 'color', + optional: false, + label: 'Background', + }, + ], + }, + ], + }, + setShapeShadow: { + labelEn: 'Shadow', + labelJa: '影', + ribbonGroup: 'effects', + params: [ + { + name: 'options', + type: 'ShadowOptions', + kind: 'object', + optional: true, + fields: [ + { name: 'color', type: 'string', kind: 'color', optional: true, label: 'Color' }, + { name: 'blurEmu', type: 'Emu', kind: 'emu', optional: true, label: 'Blur' }, + { name: 'offsetEmu', type: 'Emu', kind: 'emu', optional: true, label: 'Offset' }, + { + name: 'angleDeg', + type: 'number', + kind: 'number', + optional: true, + label: 'Angle (°)', + default: '45', + }, + { + name: 'opacity', + type: 'number', + kind: 'number', + optional: true, + label: 'Opacity (0–1)', + }, + ], + }, + ], + }, + setShapeGlow: { + labelEn: 'Glow', + labelJa: '光彩', + ribbonGroup: 'effects', + params: [ + { + name: 'options', + type: 'GlowOptions', + kind: 'object', + optional: false, + fields: [ + { name: 'color', type: 'string', kind: 'color', optional: false, label: 'Color' }, + { name: 'radiusEmu', type: 'Emu', kind: 'emu', optional: true, label: 'Radius' }, + ], + }, + ], + }, + setSlideTransition: { + labelEn: 'Transition', + labelJa: '画面切り替え', + ribbonGroup: 'transition', + primary: true, + params: [ + { + name: 'options', + type: 'TransitionOptions', + kind: 'object', + optional: false, + fields: [ + { + name: 'effect', + type: 'TransitionEffect', + kind: 'enum', + optional: false, + label: 'Effect', + enumValues: [ + 'none', + 'fade', + 'push', + 'cover', + 'wipe', + 'split', + 'cut', + 'dissolve', + 'checker', + 'blinds', + 'randomBar', + 'zoom', + 'circle', + 'diamond', + 'plus', + 'wedge', + 'newsflash', + ], + }, + { + name: 'speed', + type: "'slow'|'med'|'fast'", + kind: 'enum', + optional: true, + label: 'Speed', + enumValues: ['slow', 'med', 'fast'], + }, + { + name: 'direction', + type: 'string', + kind: 'string', + optional: true, + label: 'Direction (effect-specific, e.g. l/r/u/d)', + }, + { + name: 'thruBlack', + type: 'boolean', + kind: 'boolean', + optional: true, + label: 'Through black (fade)', + }, + ], + }, + ], + }, + setShapeAnimation: { + labelEn: 'Animation', + labelJa: 'アニメーション', + ribbonGroup: 'animation', + primary: true, + params: [ + { + name: 'opts', + type: 'AnimationOptions', + kind: 'object', + optional: false, + fields: [ + { + name: 'effect', + type: 'AnimationEffect', + kind: 'enum', + optional: false, + label: 'Effect', + enumValues: ['fadeIn', 'fadeOut', 'appear', 'disappear'], + }, + { + name: 'durationMs', + type: 'number', + kind: 'number', + optional: true, + label: 'Duration (ms)', + default: '500', + }, + ], + }, + ], + }, + setShapeImageCrop: { + labelEn: 'Crop image', + labelJa: '画像のトリミング', + ribbonGroup: 'picture', + params: [ + { + name: 'crop', + type: 'ImageCrop', + kind: 'object', + optional: false, + fields: [ + { name: 'left', type: 'number', kind: 'number', optional: true, label: 'Left (0–1)' }, + { name: 'top', type: 'number', kind: 'number', optional: true, label: 'Top (0–1)' }, + { name: 'right', type: 'number', kind: 'number', optional: true, label: 'Right (0–1)' }, + { name: 'bottom', type: 'number', kind: 'number', optional: true, label: 'Bottom (0–1)' }, + ], + }, + ], + }, +}; + +// The effective override map: workflow-enriched field schemas as the base, +// hand-authored refinements layered on top (hand wins per id). +export const overrides: Record = { + ...generatedOverrides, + ...handOverrides, +}; diff --git a/site/src/lib/editor/manifest/types.ts b/site/src/lib/editor/manifest/types.ts new file mode 100644 index 00000000..07529333 --- /dev/null +++ b/site/src/lib/editor/manifest/types.ts @@ -0,0 +1,99 @@ +// Types describing the capability manifest — the machine-readable catalogue of +// every authoring operation the editor must expose. See `generate.mjs` for how +// the base data is derived, `overrides.ts` for human refinements, and +// `coverage.test.ts` for the guarantee that this catalogue stays exhaustive. + +/** What a capability operates on. Drives which selection makes it applicable. */ +export type Operand = 'presentation' | 'slide' | 'shape' | 'cell'; + +/** UI-facing classification of a parameter, chosen so a generic form renderer + * can pick the right control. `object` falls back to a structured JSON editor. */ +export type ParamKind = + | 'string' + | 'number' + | 'emu' + | 'color' + | 'boolean' + | 'enum' + | 'index' + | 'object' + | 'array'; + +export interface ParamSpec { + readonly name: string; + /** The raw TypeScript type text, kept for the JSON-editor fallback + docs. */ + readonly type: string; + readonly kind: ParamKind; + readonly optional: boolean; + readonly default?: string; + readonly enumValues?: readonly string[]; + /** Human label (defaults to `name`). */ + readonly label?: string; + /** For `kind: 'object'` — sub-fields to render and assemble into an object. + * When present the dialog builds a field-based form instead of a JSON blob. */ + readonly fields?: readonly ParamSpec[]; + /** For `kind: 'array'` — the spec of each element (repeatable in the UI). */ + readonly item?: ParamSpec; +} + +/** Coarse grouping used to organise the ribbon and command palette. */ +export type CategoryId = + | 'slide' + | 'shape' + | 'text' + | 'paragraph' + | 'fill' + | 'stroke' + | 'effect' + | 'image' + | 'table' + | 'chart' + | 'animation' + | 'transition' + | 'comment' + | 'notes' + | 'hyperlink' + | 'slide-background' + | 'section' + | 'theme' + | 'presentation' + | 'misc'; + +export interface Capability { + /** Matches the exported function name in `@office-kit/pptx` exactly. */ + readonly id: string; + readonly operand: Operand; + /** True when the library function's first argument is the operand object + * (the common case). False for factories like `createPresentation(options)` + * whose first argument is a real user parameter, not the operand. */ + readonly takesOperand: boolean; + readonly category: CategoryId; + /** Source file the function is declared in (for docs / traceability). */ + readonly file: string; + readonly returns: string; + /** True for operations the on-canvas ribbon surfaces; false for + * package-level plumbing that only appears in the command palette. */ + readonly canvas: boolean; + readonly params: readonly ParamSpec[]; +} + +/** Human-authored refinement merged over a generated capability. Every field + * is optional; only what is specified overrides. `params` replaces wholesale + * when present (so a hand-tuned schema wins over the parsed one). */ +export interface CapabilityOverride { + readonly labelEn?: string; + readonly labelJa?: string; + readonly category?: CategoryId; + readonly ribbonGroup?: string; + readonly params?: readonly ParamSpec[]; + /** Marks the primary/most-common ops for prominent ribbon placement. */ + readonly primary?: boolean; +} + +/** A capability enriched with its human-authored metadata. */ +export interface ResolvedCapability extends Capability { + readonly labelEn: string; + readonly labelJa: string; + readonly ribbonGroup?: string; + readonly primary: boolean; +} diff --git a/site/src/lib/editor/panels/BespokeSections.svelte b/site/src/lib/editor/panels/BespokeSections.svelte new file mode 100644 index 00000000..9a50bcd9 --- /dev/null +++ b/site/src/lib/editor/panels/BespokeSections.svelte @@ -0,0 +1,226 @@ + + +{#if shape} +
+
+
{t('Fill & outline')}
+
+ + +
+
+ + {#if bounds} +
+
{t('Position & size (in)')}
+
+ + + + +
+
+ {/if} + +
+
{t('Rotation')}
+
+ applyRotation(Number(e.currentTarget.value))} /> + ° +
+
+ +
+
{t('Text')}
+ +
+
+{/if} + + diff --git a/site/src/lib/editor/panels/PropertiesPanel.svelte b/site/src/lib/editor/panels/PropertiesPanel.svelte new file mode 100644 index 00000000..c97030e7 --- /dev/null +++ b/site/src/lib/editor/panels/PropertiesPanel.svelte @@ -0,0 +1,201 @@ + + +
+
+ + {selLabel} + {applicable.length} {t('actions')} +
+ + + + +
+
{t('All applicable capabilities')}
+ {#each grouped as g (g.category)} +
+ + {#if open[g.category]} +
+ {#each g.items as cap (cap.id)} + + {/each} +
+ {/if} +
+ {/each} +
+
+ + diff --git a/site/src/lib/editor/ribbon/Ribbon.svelte b/site/src/lib/editor/ribbon/Ribbon.svelte new file mode 100644 index 00000000..e3b5f3c1 --- /dev/null +++ b/site/src/lib/editor/ribbon/Ribbon.svelte @@ -0,0 +1,188 @@ + + +
+
+ {#each visibleTabs as tab (tab.id)} + + {/each} +
+ +
+ {#each current?.groups ?? [] as group (group.title)} +
+
+ {#each group.items as item (item.id + (item.label ?? ''))} + {@const cap = capabilityById.get(item.id)} + + {/each} +
+
{t(group.title)}
+
+ {/each} +
+
+ + diff --git a/site/src/lib/editor/ribbon/config.ts b/site/src/lib/editor/ribbon/config.ts new file mode 100644 index 00000000..d79a0771 --- /dev/null +++ b/site/src/lib/editor/ribbon/config.ts @@ -0,0 +1,296 @@ +// Ribbon layout — a PowerPoint-style tab/group/command arrangement over the +// capability manifest. Each command id here must exist in the manifest (guarded +// at load below), but the ribbon is deliberately NOT the coverage surface: any +// capability the ribbon does not list is still reachable through the properties +// panel (auto-generated from the manifest) and the Ctrl+K palette. The ribbon's +// job is ergonomics for the common path, not exhaustiveness. + +import { inches } from '@office-kit/pptx'; +import { capabilityById } from '../manifest/index.ts'; + +// Default drop placement for inserted objects — like PowerPoint dropping a +// default-sized shape you then move/resize. EMU via the public unit helpers. +const IN = (n: number) => inches(n) as unknown as number; +const DROP = { x: IN(2), y: IN(1.5), w: IN(4), h: IN(2) }; +const PRESET = { + shape: { opts: { preset: 'rect', x: DROP.x, y: DROP.y, w: DROP.w, h: DROP.h } }, + textBox: { opts: { x: DROP.x, y: DROP.y, w: DROP.w, h: IN(1), text: 'Text' } }, + table: { + opts: { + x: DROP.x, + y: DROP.y, + w: IN(5), + h: IN(2), + rows: [ + ['', '', ''], + ['', '', ''], + ['', '', ''], + ], + firstRow: true, + }, + }, + line: { opts: { from: { x: IN(2), y: IN(3) }, to: { x: IN(7), y: IN(3) } } }, +} as const; + +export interface RibbonItem { + /** Capability id to run (via runOrPrompt). */ + readonly id: string; + /** Optional preset args applied before prompting for the rest. */ + readonly preset?: Record; + /** Override label (else the manifest label). */ + readonly label?: string; + readonly icon?: string; +} + +export interface RibbonGroup { + readonly title: string; + readonly items: readonly RibbonItem[]; +} + +export interface RibbonTab { + readonly id: string; + readonly title: string; + /** When set, the tab only shows for this selection kind (contextual tab). */ + readonly contextual?: 'shape' | 'cell' | 'image' | 'table'; + readonly groups: readonly RibbonGroup[]; +} + +export const RIBBON: readonly RibbonTab[] = [ + { + id: 'home', + title: 'Home', + groups: [ + { + title: 'Slides', + items: [ + { id: 'addBlankSlide', icon: 'slide-blank' }, + { id: 'addTitleSlide', icon: 'slide-title' }, + { id: 'addContentSlide', icon: 'slide-content' }, + { id: 'duplicateSlide', icon: 'duplicate' }, + { id: 'removeSlide', icon: 'trash' }, + ], + }, + { + title: 'Font', + items: [ + { id: 'setShapeTextFormat', icon: 'text-format', label: 'Text format' }, + { id: 'setShapeRunFormat', icon: 'text-run', label: 'Run format' }, + ], + }, + { + title: 'Paragraph', + items: [ + { id: 'setParagraphAlignment', icon: 'align' }, + { id: 'setShapeBullets', icon: 'bullets', label: 'Bullets' }, + { id: 'setParagraphLevel', icon: 'indent' }, + { id: 'setParagraphLineSpacing', icon: 'line-spacing' }, + { id: 'setParagraphSpacing', icon: 'space' }, + ], + }, + { + title: 'Drawing', + items: [ + { id: 'addSlideShape', icon: 'shape', preset: PRESET.shape }, + { id: 'addSlideTextBox', icon: 'textbox', preset: PRESET.textBox }, + { id: 'setShapeFill', icon: 'fill' }, + { id: 'setShapeStroke', icon: 'outline' }, + { id: 'setShapeShadow', icon: 'shadow' }, + ], + }, + { + title: 'Arrange', + items: [ + { id: 'bringShapeToFront', icon: 'front' }, + { id: 'sendShapeToBack', icon: 'back' }, + { id: 'groupShapes', icon: 'group' }, + { id: 'setShapeAlignment', icon: 'align' }, + ], + }, + { + title: 'Editing', + items: [{ id: 'replaceTextInPresentation', icon: 'replace', label: 'Replace' }], + }, + ], + }, + { + id: 'insert', + title: 'Insert', + groups: [ + { + title: 'Tables', + items: [{ id: 'addSlideTable', icon: 'table', preset: PRESET.table }], + }, + { + title: 'Illustrations', + items: [ + { id: 'addSlideShape', icon: 'shape', preset: PRESET.shape }, + { id: 'addSlideImage', icon: 'image' }, + { id: 'addSlideChart', icon: 'chart' }, + { id: 'addSlideLine', icon: 'line', preset: PRESET.line }, + ], + }, + { + title: 'Text', + items: [ + { id: 'addSlideTextBox', icon: 'textbox', preset: PRESET.textBox }, + { id: 'setShapeHyperlink', icon: 'link' }, + ], + }, + { + title: 'Comments', + items: [{ id: 'addSlideComment', icon: 'comment' }], + }, + ], + }, + { + id: 'design', + title: 'Design', + groups: [ + { + title: 'Slide setup', + items: [{ id: 'setSlideSize', icon: 'resize' }], + }, + { + title: 'Background', + items: [ + { id: 'setSlideBackground', icon: 'background' }, + { id: 'setSlideBackgroundImage', icon: 'image' }, + { id: 'clearSlideBackground', icon: 'trash' }, + ], + }, + { + title: 'Theme', + items: [ + { id: 'setPresentationTheme', icon: 'theme' }, + { id: 'setPresentationFonts', icon: 'font' }, + ], + }, + ], + }, + { + id: 'transitions', + title: 'Transitions', + groups: [ + { + title: 'Transition', + items: [ + { id: 'setSlideTransition', icon: 'transition' }, + { id: 'clearSlideTransition', icon: 'trash' }, + ], + }, + ], + }, + { + id: 'animations', + title: 'Animations', + groups: [ + { + title: 'Animation', + items: [ + { id: 'setShapeAnimation', icon: 'animation' }, + { id: 'clearSlideAnimations', icon: 'trash' }, + ], + }, + ], + }, + { + id: 'shape', + title: 'Shape Format', + contextual: 'shape', + groups: [ + { + title: 'Fill', + items: [ + { id: 'setShapeFill', icon: 'fill' }, + { id: 'setShapeGradientFill', icon: 'gradient' }, + { id: 'setShapePatternFill', icon: 'pattern' }, + { id: 'setShapeImageFill', icon: 'image' }, + { id: 'setShapeNoFill', icon: 'no-fill' }, + ], + }, + { + title: 'Outline', + items: [ + { id: 'setShapeStroke', icon: 'outline' }, + { id: 'setShapeStrokeDash', icon: 'dash' }, + { id: 'setShapeStrokeArrow', icon: 'arrow' }, + { id: 'setShapeNoStroke', icon: 'no-fill' }, + ], + }, + { + title: 'Effects', + items: [ + { id: 'setShapeShadow', icon: 'shadow' }, + { id: 'setShapeGlow', icon: 'glow' }, + { id: 'clearShapeEffects', icon: 'trash' }, + ], + }, + { + title: 'Size & rotate', + items: [ + { id: 'setShapeBounds', icon: 'resize' }, + { id: 'setShapeRotation', icon: 'rotate' }, + { id: 'setShapeFlip', icon: 'flip' }, + ], + }, + { + title: 'Arrange', + items: [ + { id: 'bringShapeToFront', icon: 'front' }, + { id: 'bringShapeForward', icon: 'forward' }, + { id: 'sendShapeBackward', icon: 'backward' }, + { id: 'sendShapeToBack', icon: 'back' }, + { id: 'groupShapes', icon: 'group' }, + { id: 'ungroupShapes', icon: 'ungroup' }, + ], + }, + ], + }, + { + id: 'table', + title: 'Table', + contextual: 'cell', + groups: [ + { + title: 'Rows & columns', + items: [ + { id: 'insertTableRow', icon: 'cells-row' }, + { id: 'insertTableColumn', icon: 'cells-col' }, + { id: 'removeTableRow', icon: 'cells-row' }, + { id: 'removeTableColumn', icon: 'cells-col' }, + { id: 'mergeTableCells', icon: 'merge' }, + ], + }, + { + title: 'Cell', + items: [ + { id: 'setTableCellFill', icon: 'fill' }, + { id: 'setTableCellBorders', icon: 'border' }, + { id: 'setTableCellText', icon: 'text-format' }, + { id: 'setTableCellAlignment', icon: 'align' }, + ], + }, + { + title: 'Table style', + items: [ + { id: 'setTableStyleId', icon: 'theme' }, + { id: 'setTableColumnWidth', icon: 'cells-col' }, + { id: 'setTableRowHeight', icon: 'cells-row' }, + ], + }, + ], + }, +]; + +// Guard: every ribbon command id must be a real capability. +for (const tab of RIBBON) { + for (const group of tab.groups) { + for (const item of group.items) { + if (!capabilityById.has(item.id)) { + throw new Error( + `Ribbon references unknown capability "${item.id}" (tab ${tab.id} / ${group.title}).`, + ); + } + } + } +} diff --git a/site/src/lib/editor/tsconfig.json b/site/src/lib/editor/tsconfig.json new file mode 100644 index 00000000..21bb731e --- /dev/null +++ b/site/src/lib/editor/tsconfig.json @@ -0,0 +1,18 @@ +{ + "//": "Self-contained tsconfig for the editor module. It exists so tooling that resolves the *nearest* tsconfig (e.g. the library's vitest transform, importing the registry/manifest for the coverage + smoke tests) does not fall through to site/tsconfig.json, which extends the SvelteKit-generated .svelte-kit/tsconfig.json that only exists after `svelte-kit sync`. Keeping the editor's compiler settings here makes those tests runnable in a bare checkout.", + "compilerOptions": { + "target": "es2022", + "module": "esnext", + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "isolatedModules": true, + "resolveJsonModule": true, + "strict": true, + "skipLibCheck": true, + "noEmit": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": [] + }, + "include": ["**/*.ts"] +} diff --git a/site/src/lib/editor/ui/CommandDialog.svelte b/site/src/lib/editor/ui/CommandDialog.svelte new file mode 100644 index 00000000..0d0ad7e8 --- /dev/null +++ b/site/src/lib/editor/ui/CommandDialog.svelte @@ -0,0 +1,163 @@ + + + + + diff --git a/site/src/lib/editor/ui/CommandPalette.svelte b/site/src/lib/editor/ui/CommandPalette.svelte new file mode 100644 index 00000000..74fc9c42 --- /dev/null +++ b/site/src/lib/editor/ui/CommandPalette.svelte @@ -0,0 +1,178 @@ + + + + + diff --git a/site/src/lib/editor/ui/ContextMenu.svelte b/site/src/lib/editor/ui/ContextMenu.svelte new file mode 100644 index 00000000..780afb7c --- /dev/null +++ b/site/src/lib/editor/ui/ContextMenu.svelte @@ -0,0 +1,117 @@ + + + editor.closeContextMenu()} + onblur={() => editor.closeContextMenu()} +/> + + + + diff --git a/site/src/lib/editor/ui/Icon.svelte b/site/src/lib/editor/ui/Icon.svelte new file mode 100644 index 00000000..d2040551 --- /dev/null +++ b/site/src/lib/editor/ui/Icon.svelte @@ -0,0 +1,124 @@ + + + diff --git a/site/src/lib/editor/ui/ParamField.svelte b/site/src/lib/editor/ui/ParamField.svelte new file mode 100644 index 00000000..2a62343e --- /dev/null +++ b/site/src/lib/editor/ui/ParamField.svelte @@ -0,0 +1,256 @@ + + +
+ + + {#if spec.kind === 'string'} + onchange(e.currentTarget.value)} + /> + {:else if spec.kind === 'number' || spec.kind === 'index'} + onchange(e.currentTarget.value === '' ? undefined : Number(e.currentTarget.value))} + /> + {:else if spec.kind === 'emu'} +
+ + onchange(e.currentTarget.value === '' ? undefined : toEmu(Number(e.currentTarget.value), unit))} + /> + +
+ {:else if spec.kind === 'color'} +
+ onchange(normHex(e.currentTarget.value))} + /> + onchange(e.currentTarget.value)} + /> +
+ {:else if spec.kind === 'boolean'} + + {:else if spec.kind === 'enum'} + + {:else if spec.kind === 'object' && spec.fields} + + {@const obj = (value ?? {}) as Record} +
+ {#each spec.fields as f (f.name)} + { + const next = { ...obj }; + if (v === undefined) delete next[f.name]; + else next[f.name] = v; + onchange(next); + }} + /> + {/each} +
+ {:else if spec.kind === 'array' && spec.item} + {@const arr = (Array.isArray(value) ? value : []) as unknown[]} +
+ {#each arr as el, i (i)} +
+ { + const next = arr.slice(); + next[i] = v; + onchange(next); + }} + /> + +
+ {/each} + +
+ {:else} + + + {spec.type} + {/if} +
+ + diff --git a/site/src/lib/editor/ui/SlideNavigator.svelte b/site/src/lib/editor/ui/SlideNavigator.svelte new file mode 100644 index 00000000..c5a5a7b0 --- /dev/null +++ b/site/src/lib/editor/ui/SlideNavigator.svelte @@ -0,0 +1,118 @@ + + +
+
+ +
+ + {#each doc.slides as _slide, i (i)} +
(dragIndex = i)} + ondragover={(e) => e.preventDefault()} + ondrop={() => { + if (dragIndex !== null && dragIndex !== i) reorder(dragIndex, i); + dragIndex = null; + }} + onclick={() => doc.selectSlide(i)} + onkeydown={(e) => e.key === 'Enter' && doc.selectSlide(i)} + > + {i + 1} +
+ {@html thumb(i)} +
+
+ {/each} +
+ + diff --git a/site/src/lib/editor/ui/StatusBar.svelte b/site/src/lib/editor/ui/StatusBar.svelte new file mode 100644 index 00000000..b9779bce --- /dev/null +++ b/site/src/lib/editor/ui/StatusBar.svelte @@ -0,0 +1,92 @@ + + +
+ {t('Slide')} {doc.selection.slideIndex + 1} / {doc.slides.length} + + {selectionLabel} + +
+ + + + +
+
+ + diff --git a/site/src/lib/editor/ui/ToastStack.svelte b/site/src/lib/editor/ui/ToastStack.svelte new file mode 100644 index 00000000..4a9829e2 --- /dev/null +++ b/site/src/lib/editor/ui/ToastStack.svelte @@ -0,0 +1,38 @@ + + +
+ {#each editor.toasts as t (t.id)} +
{t.message}
+ {/each} +
+ + diff --git a/site/src/lib/editor/ui/TopBar.svelte b/site/src/lib/editor/ui/TopBar.svelte new file mode 100644 index 00000000..6411ad12 --- /dev/null +++ b/site/src/lib/editor/ui/TopBar.svelte @@ -0,0 +1,167 @@ + + +
+
+ ◈ + @office-kit/pptx + {t('Editor')} +
+ +
+ + + + + + +
+ +
+ {doc.fileName}{#if doc.dirty} ●{/if} +
+ +
+ + +
+ + +
+ + diff --git a/site/src/lib/editor/ui/tokens.css b/site/src/lib/editor/ui/tokens.css new file mode 100644 index 00000000..6290263c --- /dev/null +++ b/site/src/lib/editor/ui/tokens.css @@ -0,0 +1,108 @@ +/* Design tokens for the editor — a restrained, Office-like light theme. + Scoped under .ok-editor so the editor's chrome never leaks into the docs + site (and vice versa). */ +.ok-editor { + --ok-accent: #b83b1d; /* office-kit brand rust, used like PowerPoint's orange */ + --ok-accent-2: #d95a3a; + --ok-bg: #f3f2f1; + --ok-panel: #ffffff; + --ok-panel-2: #faf9f8; + --ok-ribbon: #f9f8f7; + --ok-ribbon-active: #ffffff; + --ok-border: #e1dfdd; + --ok-border-strong: #c8c6c4; + --ok-text: #201f1e; + --ok-text-2: #605e5c; + --ok-text-3: #8a8886; + --ok-hover: #f3f2f1; + --ok-selected: #eef4fb; + --ok-selected-border: #2b6cb0; + --ok-canvas-bg: #d0cfce; + --ok-danger: #a4262c; + --ok-radius: 3px; + --ok-radius-lg: 6px; + --ok-shadow: 0 1.6px 3.6px rgba(0, 0, 0, 0.13), 0 0.3px 0.9px rgba(0, 0, 0, 0.1); + --ok-shadow-lg: 0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11); + --ok-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; + --ok-mono: 'Cascadia Code', 'SF Mono', 'Consolas', monospace; + --ok-ribbon-h: 92px; + --ok-nav-w: 200px; + --ok-panel-w: 300px; + + font-family: var(--ok-font); + color: var(--ok-text); + font-size: 13px; + -webkit-font-smoothing: antialiased; +} + +.ok-editor *, +.ok-editor *::before, +.ok-editor *::after { + box-sizing: border-box; +} + +/* Small reusable primitives shared across editor components. */ +.ok-btn { + display: inline-flex; + align-items: center; + gap: 6px; + border: 1px solid transparent; + background: transparent; + color: var(--ok-text); + border-radius: var(--ok-radius); + padding: 4px 8px; + font: inherit; + cursor: pointer; + white-space: nowrap; + user-select: none; +} +.ok-btn:hover { + background: var(--ok-hover); + border-color: var(--ok-border); +} +.ok-btn:active { + background: var(--ok-selected); +} +.ok-btn[aria-pressed='true'], +.ok-btn.is-active { + background: var(--ok-selected); + border-color: var(--ok-selected-border); +} +.ok-btn:disabled { + color: var(--ok-text-3); + cursor: default; + background: transparent; + border-color: transparent; +} + +.ok-input, +.ok-select { + border: 1px solid var(--ok-border-strong); + border-radius: var(--ok-radius); + padding: 3px 6px; + font: inherit; + color: var(--ok-text); + background: var(--ok-panel); + min-width: 0; +} +.ok-input:focus, +.ok-select:focus { + outline: 2px solid var(--ok-selected-border); + outline-offset: -1px; +} + +.ok-field { + display: flex; + flex-direction: column; + gap: 2px; + margin-bottom: 8px; +} +.ok-field > label { + font-size: 11px; + color: var(--ok-text-2); +} + +.ok-scroll { + overflow: auto; + scrollbar-width: thin; +} diff --git a/site/src/routes/editor/+page.svelte b/site/src/routes/editor/+page.svelte new file mode 100644 index 00000000..f3b057ab --- /dev/null +++ b/site/src/routes/editor/+page.svelte @@ -0,0 +1,13 @@ + + + + Editor · @office-kit/pptx + + + + diff --git a/src/api/fn/_helpers.ts b/src/api/fn/_helpers.ts index bdbe73b6..753eed93 100644 --- a/src/api/fn/_helpers.ts +++ b/src/api/fn/_helpers.ts @@ -8,6 +8,7 @@ import { readSlidePart } from '../../internal/presentationml/index.ts'; import { NS, type XmlElement, + elem, firstChildElement, qname, serializeXml, @@ -122,6 +123,36 @@ export const requireTxBody = (shape: SlideShapeData): XmlElement => { return txBody; }; +const NAME_BODY_PR = qname('a', 'bodyPr', NS.dml); +const NAME_LST_STYLE = qname('a', 'lstStyle', NS.dml); +const NAME_A_P = qname('a', 'p', NS.dml); + +/** + * Returns the shape's ``, creating an empty one if absent. + * + * PowerPoint always gives an autoshape a text body so it can hold text the + * moment you click in and type. A shape authored without text (e.g. + * `addSlideShape` with no `text`) has none, so setting text later would + * otherwise fail — this makes every text-bearing shape editable. Unlike + * `requireTxBody`, it never throws for a missing body; it still throws for a + * non-text-bearing shape kind (picture / table / etc.). + */ +export const ensureTxBody = (shape: SlideShapeData): XmlElement => { + if (shape[SHAPE_SNAPSHOT].kind !== 'shape') { + throw new Error( + `text operations require a shape kind; ${shape[SHAPE_SNAPSHOT].kind} is not text-bearing`, + ); + } + const existing = firstChildElement(shape[SHAPE_ELEMENT], NAME_TX_BODY); + if (existing !== null) return existing; + const txBody = elem(NAME_TX_BODY, { + children: [elem(NAME_BODY_PR), elem(NAME_LST_STYLE), elem(NAME_A_P)], + }); + // txBody is the last child of , after spPr / style. + shape[SHAPE_ELEMENT].children.push(txBody); + return txBody; +}; + export const commitAndRefresh = (shape: SlideShapeData): void => { commitSlideData(shape[SHAPE_SLIDE]); refreshSlideData(shape[SHAPE_SLIDE]); diff --git a/src/api/fn/shape-text.ts b/src/api/fn/shape-text.ts index ff107006..dd46555b 100644 --- a/src/api/fn/shape-text.ts +++ b/src/api/fn/shape-text.ts @@ -43,7 +43,7 @@ import { SHAPE_SNAPSHOT, type SlideShapeData, } from '../_internal-symbols.ts'; -import { commitAndRefresh, decode, requireTxBody } from './_helpers.ts'; +import { commitAndRefresh, decode, ensureTxBody, requireTxBody } from './_helpers.ts'; const NAME_TX_BODY = qname('p', 'txBody', NS.pml); // --------------------------------------------------------------------------- @@ -59,15 +59,10 @@ export const setShapeText = ( value: string, options: { bullets?: BulletStyle } = {}, ): void => { - if (shape[SHAPE_SNAPSHOT].kind !== 'shape') { - throw new Error( - `setShapeText only works on text-bearing shapes; ${shape[SHAPE_SNAPSHOT].kind} is not one`, - ); - } - const txBody = firstChildElement(shape[SHAPE_ELEMENT], NAME_TX_BODY); - if (txBody === null) { - throw new Error(`shape "${shape[SHAPE_SNAPSHOT].name}" has no `); - } + // Creates the text body if absent (PowerPoint always gives an autoshape one), + // so a shape authored without text is still editable. Throws only for + // non-text-bearing kinds (picture / table / …). + const txBody = ensureTxBody(shape); setTextBody(txBody, value); if (options.bullets !== undefined) { applyBulletToAllParagraphs(txBody, options.bullets); @@ -84,15 +79,7 @@ export const setShapeText = ( * minus the leading newline when there was no existing text. */ export const appendShapeText = (shape: SlideShapeData, value: string): void => { - if (shape[SHAPE_SNAPSHOT].kind !== 'shape') { - throw new Error( - `appendShapeText only works on text-bearing shapes; ${shape[SHAPE_SNAPSHOT].kind} is not one`, - ); - } - const txBody = firstChildElement(shape[SHAPE_ELEMENT], NAME_TX_BODY); - if (txBody === null) { - throw new Error(`shape "${shape[SHAPE_SNAPSHOT].name}" has no `); - } + const txBody = ensureTxBody(shape); const existing = shape[SHAPE_SNAPSHOT].text; const combined = existing.length === 0 ? value : `${existing}\n${value}`; setTextBody(txBody, combined); diff --git a/test/editor-capability-coverage.test.ts b/test/editor-capability-coverage.test.ts new file mode 100644 index 00000000..350f0f16 --- /dev/null +++ b/test/editor-capability-coverage.test.ts @@ -0,0 +1,115 @@ +// COVERAGE GUARANTEE for the @office-kit/pptx editor UI. +// +// The editor's promise is that *every* authoring operation the library exposes +// is reachable from the UI. This test makes that a mechanically enforced fact +// rather than an aspiration: +// +// 1. It re-derives the set of mutating (state-changing) public exports +// straight from the compiled library — the same verb-prefix rule the +// manifest generator uses, but computed independently here. +// 2. It asserts the editor's capability manifest lists exactly that set: +// neither missing a function (an unreachable capability) nor naming one +// that no longer exists (a dead command). +// 3. It asserts every manifested id is a real callable on the library, so a +// capability can't be "registered" against a typo or a removed function. +// +// Consequence: the moment someone adds a new `setX` / `addX` authoring function +// to the public API, `pnpm test` fails until it is added to the manifest (and +// thereby wired into the editor's command registry). Implementation effort can +// never silently drop a capability. + +import { describe, expect, it } from 'vitest'; +import * as pptx from '@office-kit/pptx'; +// Import the generated data directly (pure JSON) rather than the resolved +// manifest module: the resolved manifest lives in the SvelteKit source tree +// whose tsconfig is only materialised by `svelte-kit sync`, and pulling it into +// the library's vitest run would couple the two toolchains. `overrides` never +// add or remove capabilities (guarded at runtime in `manifest/index.ts`), so +// the generated id set is exactly the resolved id set for coverage purposes. +import generated from '../site/src/lib/editor/manifest/capabilities.generated.json'; + +const capabilities = generated.capabilities as ReadonlyArray<{ + id: string; + operand: string; + category: string; +}>; +const capabilityById = new Map(capabilities.map((c) => [c.id, c])); + +// Kept in lockstep with `manifest/generate.mjs::MUTATING_VERBS`. +const MUTATING_VERBS = [ + 'add', + 'set', + 'clear', + 'replace', + 'remove', + 'insert', + 'duplicate', + 'bring', + 'send', + 'append', + 'group', + 'ungroup', + 'swap', + 'sort', + 'reverse', + 'rename', + 'move', + 'merge', + 'import', + 'copy', + 'create', + 'translate', + 'touch', + 'increment', + 'compact', +]; + +function isMutatingName(name: string): boolean { + return MUTATING_VERBS.some( + (v) => + name.startsWith(v) && + name.length > v.length && + name[v.length] === name[v.length]!.toUpperCase(), + ); +} + +const libraryMutatingExports = Object.entries(pptx) + .filter(([name, value]) => typeof value === 'function' && isMutatingName(name)) + .map(([name]) => name) + .sort(); + +const manifestIds = capabilities.map((c) => c.id).sort(); + +describe('editor capability coverage', () => { + it('manifests every mutating public export (no unreachable capability)', () => { + const missing = libraryMutatingExports.filter((name) => !capabilityById.has(name)); + expect( + missing, + `these library authoring functions are missing from the editor manifest:\n${missing.join('\n')}`, + ).toEqual([]); + }); + + it('has no manifest entry that does not exist in the library (no dead command)', () => { + const dead = manifestIds.filter((id) => !(id in pptx)); + expect( + dead, + `these manifest capabilities reference functions not exported by the library:\n${dead.join('\n')}`, + ).toEqual([]); + }); + + it('binds every capability to a real callable function', () => { + const notCallable = manifestIds.filter( + (id) => typeof (pptx as Record)[id] !== 'function', + ); + expect(notCallable, `not callable on the library:\n${notCallable.join('\n')}`).toEqual([]); + }); + + it('manifest and library mutating sets are exactly equal', () => { + expect(manifestIds).toEqual(libraryMutatingExports); + }); + + it('assigns every capability an operand and a category', () => { + const bad = capabilities.filter((c) => !c.operand || !c.category); + expect(bad.map((c) => c.id)).toEqual([]); + }); +}); diff --git a/test/editor-command-smoke.test.ts b/test/editor-command-smoke.test.ts new file mode 100644 index 00000000..dc8d03c5 --- /dev/null +++ b/test/editor-command-smoke.test.ts @@ -0,0 +1,121 @@ +// End-to-end proof that the editor's command registry actually *drives* the +// library — not just that the ids line up. It builds a presentation entirely +// through the registry (the same path the ribbon/palette use), then round-trips +// it through save/load. This needs no XSDs, so it runs even where the ECMA-376 +// schema submodule is absent. + +import { describe, expect, it } from 'vitest'; +import { + createPresentation, + addBlankSlide, + findShapeById, + getShapeId, + getShapeText, + getSlideShapes, + getSlides, + inches, + loadPresentation, + savePresentation, +} from '@office-kit/pptx'; +import type { PresentationData, SlideData, SlideShapeData } from '@office-kit/pptx'; +import { getCommand } from '../site/src/lib/editor/core/registry.ts'; +import type { Selection } from '../site/src/lib/editor/core/selection.ts'; + +// A minimal stand-in for EditorDocument that satisfies the surface the registry +// uses. Real one adds undo/rendering/reactivity, irrelevant to dispatch logic. +class FakeDoc { + pres: PresentationData; + selection: Selection = { kind: 'none', slideIndex: 0 }; + constructor(pres: PresentationData) { + this.pres = pres; + } + get slides(): readonly SlideData[] { + return getSlides(this.pres); + } + slideAt(i: number): SlideData | null { + return this.slides[i] ?? null; + } + shapeById(slideIndex: number, id: number): SlideShapeData | null { + const slide = this.slideAt(slideIndex); + return slide ? findShapeById(slide, id) : null; + } + selectShape(slideIndex: number, id: number): void { + this.selection = { kind: 'shape', slideIndex, shapeIds: [id] }; + } + selectSlide(i: number): void { + this.selection = { kind: 'none', slideIndex: i }; + } + transact(_label: string, fn: () => T): T { + return fn(); + } +} + +function run(doc: FakeDoc, id: string, args: Record = {}) { + const cmd = getCommand(id); + expect(cmd, `command ${id} should be registered`).toBeTruthy(); + expect(cmd!.canRun({ doc: doc as never }), `command ${id} should be runnable`).toBe(true); + return cmd!.run({ doc: doc as never }, args); +} + +describe('editor command registry drives the library', () => { + it('authors a slide + shape through the registry and round-trips', async () => { + const pres = createPresentation(); + addBlankSlide(pres); + const doc = new FakeDoc(pres); + doc.selectSlide(0); + + // Add a rectangle via the registry (auto-selects it on return). + run(doc, 'addSlideShape', { + opts: { + preset: 'rect', + x: inches(1), + y: inches(1), + w: inches(4), + h: inches(2), + text: 'Hello', + }, + }); + expect(doc.selection.kind).toBe('shape'); + + // The selected shape now drives shape-operand commands. + run(doc, 'setShapeFill', { color: 'FF0000' }); + run(doc, 'setShapeText', { value: 'Edited via registry' }); + run(doc, 'setShapePosition', { x: inches(2), y: inches(3) }); + + const shapes = getSlideShapes(doc.slideAt(0)!); + expect(shapes.length).toBe(1); + expect(getShapeText(shapes[0]!)).toBe('Edited via registry'); + + // Round-trip: save and reload; the shape (and its text) survives. + const bytes = await savePresentation(doc.pres); + expect(bytes.byteLength).toBeGreaterThan(0); + const reloaded = await loadPresentation(bytes); + // createPresentation() yields 0 slides; addBlankSlide made the only slide. + const reloadedShapes = getSlideShapes(getSlides(reloaded)[0]!); + expect(reloadedShapes.some((s) => getShapeText(s) === 'Edited via registry')).toBe(true); + }); + + it('refuses shape commands when nothing is selected', () => { + const pres = createPresentation(); + addBlankSlide(pres); + const doc = new FakeDoc(pres); + doc.selectSlide(0); + const cmd = getCommand('setShapeFill')!; + expect(cmd.canRun({ doc: doc as never })).toBe(false); + }); + + it('binds a command for every generated capability id', () => { + // Cross-check with the coverage test: each manifested id resolves to a + // runnable command object here. + const ids = getShapeId; // silence unused import lint; used above indirectly + void ids; + for (const id of [ + 'setShapeGradientFill', + 'addSlideTable', + 'setSlideTransition', + 'insertTableRow', + ]) { + expect(getCommand(id), id).toBeTruthy(); + } + }); +}); diff --git a/test/fn-set-shape-text-creates-txbody.test.ts b/test/fn-set-shape-text-creates-txbody.test.ts new file mode 100644 index 00000000..42e63384 --- /dev/null +++ b/test/fn-set-shape-text-creates-txbody.test.ts @@ -0,0 +1,65 @@ +// A preset shape authored without `text` has no . PowerPoint always +// gives an autoshape one so you can click in and type; setShapeText / +// appendShapeText must therefore create the body on demand rather than throw. +// Regression for the editor's "can't type into an inserted shape" bug. + +import { readFile } from 'node:fs/promises'; +import { fileURLToPath } from 'node:url'; +import { describe, expect, it } from 'vitest'; +import { + addSlideShape, + appendShapeText, + getShapeText, + getSlides, + inches, + loadPresentation, + savePresentation, + setShapeText, +} from '../src/api/index.ts'; + +const fixture = (name: string): string => + fileURLToPath(new URL(`./fixtures/minimal/${name}`, import.meta.url)); + +const addBareRect = (slide: ReturnType[number]) => + addSlideShape(slide, { + preset: 'rect', + x: inches(1), + y: inches(1), + w: inches(3), + h: inches(1), + // no `text` — so no is authored + }); + +describe('fn API: setShapeText creates a missing txBody', () => { + it('an autoshape authored without text starts empty', async () => { + const pres = await loadPresentation(await readFile(fixture('two-slides.pptx'))); + const shape = addBareRect(getSlides(pres)[0]!); + expect(getShapeText(shape)).toBe(''); + }); + + it('setShapeText populates a shape that had no text body', async () => { + const pres = await loadPresentation(await readFile(fixture('two-slides.pptx'))); + const shape = addBareRect(getSlides(pres)[0]!); + setShapeText(shape, 'こんにちは'); + expect(getShapeText(shape)).toBe('こんにちは'); + }); + + it('appendShapeText works on a shape that had no text body', async () => { + const pres = await loadPresentation(await readFile(fixture('two-slides.pptx'))); + const shape = addBareRect(getSlides(pres)[0]!); + appendShapeText(shape, 'line 1'); + appendShapeText(shape, 'line 2'); + expect(getShapeText(shape)).toBe('line 1\nline 2'); + }); + + it('multi-line text survives a save / load round-trip', async () => { + const pres = await loadPresentation(await readFile(fixture('two-slides.pptx'))); + const shape = addBareRect(getSlides(pres)[0]!); + setShapeText(shape, 'title\nsubtitle'); + + const reopened = await loadPresentation(await savePresentation(pres)); + const shapes = getSlides(reopened)[0]!; + const texts = (await import('../src/api/index.ts')).getSlideShapes(shapes).map(getShapeText); + expect(texts).toContain('title\nsubtitle'); + }); +});