oasis-editor 0.0.134 → 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';
@@ -105,6 +106,10 @@ export interface EssentialsImageCapability {
     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/app/createAppCommandsController.d.ts

@@ -72,6 +72,7 @@ declare function createAppCommandsControllerImpl(deps: AppCommandsControllerDeps
         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 & {
@@ -109,6 +110,7 @@ declare function createAppCommandsControllerImpl(deps: AppCommandsControllerDeps
         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

@@ -87,6 +87,7 @@ declare function createEditorCommandRuntimeImpl(deps: EditorCommandRuntimeDeps):
         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/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/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/package.json

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