oasis-editor 0.0.133 → 0.0.135

package/dist/plugins/internal/essentialsCapabilities.d.ts

@@ -1,4 +1,5 @@
-import { EditorPageMargins } from '../../core/model.js';
+import { EditorImageBorder, EditorPageMargins } from '../../core/model.js';
+import { ImageBorderPatch } from '../../core/commands/image.js';
 import { TextCaseMode } from '../../core/commands/text.js';
 import { ToolbarStyleState } from '../../ui/toolbarStyleState.js';
 import { OasisBuiltinCommand } from '../../core/commands/builtinCommands.js';
@@ -90,6 +91,25 @@ export interface EssentialsImageCapability {
     promptAlt: () => void;
     promptCaption: () => void;
     isSelected: () => boolean;
+    /** Displayed size of the selected image in centimetres, or `null`. */
+    getSizeCm: () => {
+        width: number;
+        height: number;
+    } | null;
+    /** Set the displayed width (cm), scaling height to keep the aspect ratio. */
+    setWidthCm: (cm: number) => void;
+    /** Set the displayed height (cm), scaling width to keep the aspect ratio. */
+    setHeightCm: (cm: number) => void;
+    /** Whether interactive crop mode is currently active. */
+    isCropActive: () => boolean;
+    /** Toggle interactive crop mode for the selected image. */
+    toggleCrop: () => void;
+    /** Apply an aspect-ratio crop preset (e.g. "16:9", "1:1", "reset"). */
+    applyCropAspect: (preset: string) => void;
+    /** Outline of the selected image (`pic:spPr/a:ln`), or `null`. */
+    getBorder: () => EditorImageBorder | null;
+    /** Merge a partial outline edit; `{ color: null }` removes the outline. */
+    setBorder: (patch: ImageBorderPatch) => void;
 }
 export interface EssentialsBrowserCapability {
     print: () => void;

package/dist/ui/OasisEditorEditorProps.d.ts

@@ -31,6 +31,8 @@ export interface OasisEditorEditorOverlayProps {
     focused: Accessor<boolean>;
     showCaret: Accessor<boolean>;
     importProgress?: Accessor<ImportProgress | null>;
+    /** Whether interactive image crop mode is active (shows crop handles). */
+    imageCropMode?: Accessor<boolean>;
     toolbarHost?: () => ToolbarHost;
     persistenceStatus?: () => string;
     showFloatingTableToolbar?: Accessor<boolean>;
@@ -66,6 +68,9 @@ export interface OasisEditorEditorSurfaceHandlers {
     onImageRotateHandleMouseDown: (paragraphId: string, paragraphOffset: number, event: MouseEvent & {
         currentTarget: HTMLElement;
     }) => void;
+    onImageCropHandleMouseDown?: (paragraphId: string, paragraphOffset: number, direction: ResizeHandleDirection, event: MouseEvent & {
+        currentTarget: HTMLElement;
+    }) => void;
     onTextBoxRotateHandleMouseDown: (paragraphId: string, paragraphOffset: number, event: MouseEvent & {
         currentTarget: HTMLElement;
     }) => void;

package/dist/ui/app/buildEditorViewProps.d.ts

@@ -35,6 +35,7 @@ export interface EditorViewOverlayInput {
     focused: Accessor<boolean>;
     showCaret: Accessor<boolean>;
     importProgress: Accessor<ImportProgress | null>;
+    imageCropMode: Accessor<boolean>;
 }
 /** Owner of the editor element refs. */
 export interface EditorViewRefsInput {
@@ -58,6 +59,7 @@ export interface EditorViewSurfaceInput {
     handleImageResizeHandleMouseDown: OasisEditorEditorSurfaceHandlers["onImageResizeHandleMouseDown"];
     handleTextBoxResizeHandleMouseDown: OasisEditorEditorSurfaceHandlers["onTextBoxResizeHandleMouseDown"];
     handleImageRotateHandleMouseDown: OasisEditorEditorSurfaceHandlers["onImageRotateHandleMouseDown"];
+    handleImageCropHandleMouseDown: NonNullable<OasisEditorEditorSurfaceHandlers["onImageCropHandleMouseDown"]>;
     handleTextBoxRotateHandleMouseDown: OasisEditorEditorSurfaceHandlers["onTextBoxRotateHandleMouseDown"];
     handleEditorContextMenu: (event: MouseEvent) => void;
 }

package/dist/ui/app/createAppCommandsController.d.ts

@@ -69,6 +69,10 @@ declare function createAppCommandsControllerImpl(deps: AppCommandsControllerDeps
         promptForImageAlt: () => void;
         applyImageCaptionCommand: (caption: string) => void;
         promptForImageCaption: () => void;
+        applyImageWidthCmCommand: (cm: number) => void;
+        applyImageHeightCmCommand: (cm: number) => void;
+        applyImageCropAspectCommand: (preset: string) => void;
+        applyImageBorderCommand: (patch: import('../../core/commands/image.js').ImageBorderPatch) => void;
         handleListTab: (direction: "indent" | "outdent") => boolean;
         handleListEnter: () => boolean;
         handleListBoundaryBackspace: (event: KeyboardEvent & {
@@ -103,6 +107,10 @@ declare function createAppCommandsControllerImpl(deps: AppCommandsControllerDeps
         promptForImageAlt: () => void;
         applyImageCaptionCommand: (caption: string) => void;
         promptForImageCaption: () => void;
+        applyImageWidthCmCommand: (cm: number) => void;
+        applyImageHeightCmCommand: (cm: number) => void;
+        applyImageCropAspectCommand: (preset: string) => void;
+        applyImageBorderCommand: (patch: import('../../core/commands/image.js').ImageBorderPatch) => void;
         handleListTab: (direction: "indent" | "outdent") => boolean;
         handleListEnter: () => boolean;
         handleListBoundaryBackspace: (event: KeyboardEvent & {

package/dist/ui/app/createEditorCommandRuntime.d.ts

@@ -84,6 +84,10 @@ declare function createEditorCommandRuntimeImpl(deps: EditorCommandRuntimeDeps):
         promptForImageAlt: () => void;
         applyImageCaptionCommand: (caption: string) => void;
         promptForImageCaption: () => void;
+        applyImageWidthCmCommand: (cm: number) => void;
+        applyImageHeightCmCommand: (cm: number) => void;
+        applyImageCropAspectCommand: (preset: string) => void;
+        applyImageBorderCommand: (patch: import('../../core/commands/image.js').ImageBorderPatch) => void;
         handleListTab: (direction: "indent" | "outdent") => boolean;
         handleListEnter: () => boolean;
         handleListBoundaryBackspace: (event: KeyboardEvent & {

package/dist/ui/app/createEditorInteractionRuntime.d.ts

@@ -89,6 +89,9 @@ declare function createEditorInteractionRuntimeImpl(deps: EditorInteractionRunti
     };
     imageOps: {
         dragging: import('solid-js').Accessor<boolean>;
+        cropMode: import('solid-js').Accessor<boolean>;
+        setCropMode: import('solid-js').Setter<boolean>;
+        toggleCropMode: () => void;
         draggedImageInfo: import('solid-js').Accessor<import('../../app/controllers/useEditorImageOperations.js').ActiveImageDrag | null>;
         mousePos: import('solid-js').Accessor<{
             x: number;
@@ -107,6 +110,7 @@ declare function createEditorInteractionRuntimeImpl(deps: EditorInteractionRunti
         stopImageDrag: () => void;
         stopImageResize: () => void;
         stopImageRotate: () => void;
+        stopImageCrop: () => void;
         handleImageMouseDown: (paragraphId: string, paragraphOffset: number, event: MouseEvent & {
             currentTarget: HTMLElement;
         }) => void;
@@ -116,6 +120,9 @@ declare function createEditorInteractionRuntimeImpl(deps: EditorInteractionRunti
         handleImageRotateHandleMouseDown: (paragraphId: string, paragraphOffset: number, event: MouseEvent & {
             currentTarget: HTMLElement;
         }) => void;
+        handleImageCropHandleMouseDown: (paragraphId: string, paragraphOffset: number, direction: import('../resizeGeometry.js').ResizeHandleDirection, event: MouseEvent & {
+            currentTarget: HTMLElement;
+        }) => void;
     };
     textBoxOps: {
         handleTextBoxResizeHandleMouseDown: (paragraphId: string, paragraphOffset: number, direction: import('../resizeGeometry.js').ResizeHandleDirection, event: MouseEvent & {

package/dist/ui/app/essentials/types.d.ts

@@ -29,6 +29,11 @@ export interface CreateEditorEssentialsPluginOptions {
     importInputRef: () => HTMLInputElement | undefined;
     imageInputRef: () => HTMLInputElement | undefined;
     selectedImageRun: () => SelectedImageRun | null;
+    /** Interactive image crop-mode signal (owned by the image operations). */
+    imageCropMode: {
+        isActive: () => boolean;
+        toggle: () => void;
+    };
     selectionBoxes: () => Array<unknown>;
     focusInput: () => void;
     applyState: (nextState: EditorState) => void;

package/dist/ui/canvas/paragraph/canvasInlineImage.d.ts

@@ -2,7 +2,7 @@ import { EditorImageRunData, EditorLayoutLine, EditorPageSettings, EditorState }
 
 /**
  * Draw an inline image fragment, honoring crop (`a:srcRect`), rotation
- * (`a:xfrm/@rot`) and horizontal/vertical flips.
+ * (`a:xfrm/@rot`), horizontal/vertical flips and the picture outline.
  */
 export declare function drawImageFragment(ctx: CanvasRenderingContext2D, img: CanvasImageSource & {
     naturalWidth: number;

package/dist/ui/components/Toolbar/controls/ImageSizeControls.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+import { ToolbarActionApi } from '../schema/items.js';
+
+/**
+ * A labelled centimetre field for the image Size group (height or width). Reads
+ * the current size from the `imageHeightCm`/`imageWidthCm` command and writes it
+ * back on change; the core keeps the aspect ratio locked.
+ */
+export declare function ImageSizeField(props: {
+    api: ToolbarActionApi;
+    dimension: "height" | "width";
+}): JSX.Element;
+/** The Cortar chevron menu: toggle crop mode + aspect-ratio presets. */
+export declare function ImageCropMenu(props: {
+    api: ToolbarActionApi;
+}): JSX.Element;

package/dist/ui/components/Toolbar/pictureBorderPresets.d.ts

@@ -0,0 +1,19 @@
+import { EditorLineDash } from '../../../core/model.js';
+import { TranslationKey } from '../../../i18n/index.js';
+
+/** Border weights offered by Word's Picture Border ▸ Weight submenu, in points. */
+export declare const PICTURE_BORDER_WEIGHTS_PT: number[];
+/** `0.25` → `"¼"`, `1.5` → `"1½"`, `3` → `"3"`. */
+export declare function formatBorderWeight(widthPt: number): string;
+export interface PictureBorderDashOption {
+    value: EditorLineDash;
+    labelKey: TranslationKey;
+}
+/** Ordered as Word's Dashes flyout: shortest pattern first. */
+export declare const PICTURE_BORDER_DASH_OPTIONS: PictureBorderDashOption[];
+/**
+ * `stroke-dasharray` for a menu preview stroke, derived from the same point
+ * table the canvas and PDF renderers use — so a preview can never disagree with
+ * what gets painted. Solid yields `undefined` (no attribute).
+ */
+export declare function dashPreviewArray(dash: EditorLineDash): string | undefined;

package/dist/ui/components/Toolbar/primitives/ColorGrids.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'solid-js';
+import { ColorPalette } from '../schema/palette.js';
+
+export interface ColorGridsProps {
+    palette: ColorPalette;
+    themeColorsLabel: string;
+    standardColorsLabel: string;
+    /** Lowercased hex of the currently applied colour, for the active ring. */
+    activeColor: string;
+    testId: string;
+    onPreview: (color: string | null) => void;
+    onPick: (color: string) => void;
+}
+/**
+ * The theme-colour columns and standard-colour row shared by every colour popup
+ * (font colour, highlight, shading, picture border). Owns only the swatches —
+ * the surrounding "automatic"/"no colour" and "more colours" actions differ per
+ * consumer and stay with them.
+ */
+export declare function ColorGrids(props: ColorGridsProps): JSX.Element;

package/dist/ui/components/Toolbar/primitives/PictureBorderPicker.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+import { ColorPalette } from '../schema/palette.js';
+import { EditorImageBorder, EditorLineDash } from '../../../../core/model.js';
+import { ImageBorderPatch } from '../../../../core/commands/image.js';
+
+export interface PictureBorderPickerProps {
+    /** The outline currently on the selected picture, or `null`. */
+    border: EditorImageBorder | null;
+    palette: ColorPalette;
+    disabled?: boolean;
+    testId: string;
+    label: string;
+    noOutlineLabel: string;
+    moreColorsLabel: string;
+    weightLabel: string;
+    dashesLabel: string;
+    themeColorsLabel: string;
+    standardColorsLabel: string;
+    /** Ordered dash presets with their translated names. */
+    dashOptions: Array<{
+        value: EditorLineDash;
+        label: string;
+    }>;
+    onApply: (patch: ImageBorderPatch) => void;
+}
+/**
+ * Word's Picture Border popup: theme/standard colour grids, "No Outline",
+ * "More Outline Colors…", and Weight/Dashes flyouts. Purely presentational —
+ * every action reports a partial patch, so a colour pick keeps the current
+ * weight and vice-versa.
+ *
+ * The flyouts render *inside* the popover panel rather than in their own
+ * portal: `Popover`'s dismiss watcher only knows about the trigger and the
+ * panel, so a portalled child would read as an outside click and close its own
+ * parent.
+ */
+export declare function PictureBorderPicker(props: PictureBorderPickerProps): JSX.Element;

package/dist/ui/components/Toolbar/primitives/WideMenuButton.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+
+export interface WideMenuButtonProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    icon?: string;
+    label: string;
+    tooltip?: string;
+    testId?: string;
+    active?: boolean;
+    disabled?: boolean;
+    /** A swatch strip under the icon, e.g. the current border colour. */
+    indicatorColor?: string | null;
+    panelClass?: string;
+    children: JSX.Element;
+}
+/**
+ * A dropdown whose trigger lays icon, label and chevron out on a single
+ * horizontal line, sized to span a ribbon group's full height. This is the
+ * shape Word gives its Picture Border / Picture Effects / Picture Layout
+ * buttons, and it is the third trigger geometry in the toolbar — distinct from
+ * the icon-only (`normal`) and icon-above-label (`large`) `Button`s.
+ *
+ * Unlike `Menu`, no click inside the panel is intercepted: consumers own when
+ * the popup closes, which nested flyouts need.
+ */
+export declare function WideMenuButton(props: WideMenuButtonProps): JSX.Element;

package/dist/ui/components/Toolbar/schema/items.d.ts

@@ -143,6 +143,20 @@ export interface ColorPickerItem extends ToolbarItemBase {
     labelKey?: TranslationKey;
     label?: string;
 }
+/**
+ * Word's Picture Border control: a wide horizontal trigger over a popup that
+ * carries colour grids plus Weight/Dashes flyouts. Its own item type (rather
+ * than a `colorPicker` variant) because a border is three facets — colour,
+ * weight, dash — dispatched as partial patches of one command.
+ */
+export interface PictureBorderItem extends ToolbarItemBase {
+    type: "pictureBorder";
+    /** Command dispatched with an `ImageBorderPatch` payload. */
+    command: CommandRef;
+    palette?: ColorPalette;
+    labelKey?: TranslationKey;
+    label?: string;
+}
 export interface GridPickerItem extends ToolbarItemBase {
     type: "gridPicker";
     /** Command dispatched with `{ rows, cols }` as payload. */
@@ -171,5 +185,5 @@ export interface CustomItem extends ToolbarItemBase {
     type: "custom";
     render: (api: ToolbarActionApi) => JSX.Element;
 }
-export type ToolbarItem = ButtonItem | ToggleItem | SplitItem | MenuItem | SelectItem | StyleGalleryItem | ColorPickerItem | GridPickerItem | SeparatorItem | GroupItem | CustomItem;
+export type ToolbarItem = ButtonItem | ToggleItem | SplitItem | MenuItem | SelectItem | StyleGalleryItem | ColorPickerItem | PictureBorderItem | GridPickerItem | SeparatorItem | GroupItem | CustomItem;
 export type ToolbarItemType = ToolbarItem["type"];

package/dist/ui/cropGeometry.d.ts

@@ -0,0 +1,23 @@
+import { ResizeHandleDirection } from './resizeGeometry.js';
+import { EditorImageCrop } from '../core/model.js';
+
+export interface CropSessionGeometry {
+    handleDirection: ResizeHandleDirection;
+    /** Displayed box size (px) captured when the handle was grabbed. */
+    startWidth: number;
+    startHeight: number;
+    /** Crop fractions captured when the handle was grabbed. */
+    startCrop: EditorImageCrop;
+}
+export interface CropResult {
+    crop: EditorImageCrop;
+    width: number;
+    height: number;
+}
+/**
+ * Resolves the next crop + displayed size for a crop-handle drag. `deltaX`/
+ * `deltaY` are pointer deltas in document px (already divided by zoom). Growing
+ * a side is bounded by that side's original crop (you cannot un-crop past the
+ * source image).
+ */
+export declare function resolveCroppedImage(geometry: CropSessionGeometry, deltaX: number, deltaY: number): CropResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oasis-editor",
-  "version": "0.0.133",
+  "version": "0.0.135",
   "type": "module",
   "repository": {
     "type": "git",