oasis-editor 0.0.129 → 0.0.131

package/dist/ui/OasisEditorEditor.d.ts

@@ -2,7 +2,7 @@ import { Accessor, JSX } from 'solid-js';
 import { ToolbarHost } from './components/Toolbar/state/createToolbarApi.js';
 import { EditorLayoutDocument, EditorLayoutParagraph, EditorState } from '../core/model.js';
 import { ImportProgressState } from '../app/controllers/useEditorDocumentIO.js';
-import { CaretBox, CommentHighlightBox, InputBox, LayoutOptionsOverlay, RevisionBox, SelectedImageBox, SelectedTextBoxBox, SelectionBox } from './editorUiTypes.js';
+import { CaretBox, CommentHighlightBox, InputBox, LayoutOptionsOverlay, RevisionBox, SelectedImageBox, SelectedTextBoxBox, SelectedTableBox, SelectionBox } from './editorUiTypes.js';
 import { ResizeHandleDirection } from './resizeGeometry.js';
 
 type ImportProgress = ImportProgressState;
@@ -24,6 +24,7 @@ export interface OasisEditorEditorOverlayProps {
     commentHighlights: Accessor<CommentHighlightBox[]>;
     selectedImageBox: Accessor<SelectedImageBox | null>;
     selectedTextBoxBox: Accessor<SelectedTextBoxBox | null>;
+    selectedTableBox: Accessor<SelectedTableBox | null>;
     caretBox: Accessor<CaretBox>;
     inputBox: Accessor<InputBox>;
     hoveredRevision: Accessor<RevisionBox | null>;
@@ -69,6 +70,7 @@ export interface OasisEditorEditorSurfaceHandlers {
         currentTarget: HTMLElement;
     }) => void;
     onTableDragHandleMouseDown: (tableId: string, event: MouseEvent) => void;
+    onTableCornerResizeHandleMouseDown: (tableId: string, event: MouseEvent) => void;
     onRevisionMouseEnter: (revisionId: string, event: MouseEvent) => void;
     onRevisionMouseLeave?: (revisionId: string, event: MouseEvent) => void;
     onEditorContextMenu?: (event: MouseEvent) => void;

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

@@ -2,6 +2,7 @@ import { EditorLayoutDocument, EditorState } from '../../core/model.js';
 import { CanvasLayoutSnapshotProvider } from '../canvas/canvasLayoutSnapshotProvider.js';
 import { createEditorImageOperations } from '../../app/controllers/useEditorImageOperations.js';
 import { createEditorTableResize } from '../../app/controllers/useEditorTableResize.js';
+import { createEditorTableCornerResize } from '../../app/controllers/useEditorTableCornerResize.js';
 import { createEditorTableDrag } from '../../app/controllers/useEditorTableDrag.js';
 import { createEditorTextDrag } from '../../app/controllers/useEditorTextDrag.js';
 import { JSX } from 'solid-js';
@@ -13,6 +14,7 @@ export interface EditorDragLayersProps {
     snapshotProvider: CanvasLayoutSnapshotProvider;
     zoomFactor?: () => number;
     tableResize: ReturnType<typeof createEditorTableResize>;
+    tableCornerResize: ReturnType<typeof createEditorTableCornerResize>;
     imageOps: ReturnType<typeof createEditorImageOperations>;
     tableDrag: ReturnType<typeof createEditorTableDrag>;
     textDrag: ReturnType<typeof createEditorTextDrag>;

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

@@ -1,10 +1,11 @@
 import { Accessor, JSX } from 'solid-js';
-import { CaretBox, CommentHighlightBox, InputBox, LayoutOptionsOverlay, RevisionBox, SelectedImageBox, SelectedTextBoxBox, SelectionBox } from '../editorUiTypes.js';
+import { CaretBox, CommentHighlightBox, InputBox, LayoutOptionsOverlay, RevisionBox, SelectedImageBox, SelectedTextBoxBox, SelectedTableBox, SelectionBox } from '../editorUiTypes.js';
 import { EditorLayoutDocument } from '../../core/model.js';
 import { OasisEditorEditorFileHandlers, OasisEditorEditorInputHandlers, OasisEditorEditorLayoutProps, OasisEditorEditorOverlayProps, OasisEditorEditorRefProps, OasisEditorEditorSurfaceHandlers } from '../OasisEditorEditor.js';
 import { createEditorFocusController } from './useEditorFocus.js';
 import { createEditorSurfaceEvents } from '../../app/controllers/useEditorSurfaceEvents.js';
 import { createEditorTableResize } from '../../app/controllers/useEditorTableResize.js';
+import { createEditorTableCornerResize } from '../../app/controllers/useEditorTableCornerResize.js';
 import { createEditorTableDrag } from '../../app/controllers/useEditorTableDrag.js';
 import { createEditorTextInput } from '../../app/controllers/useEditorTextInput.js';
 import { createEditorRevisionController } from '../../app/controllers/useEditorRevision.js';
@@ -26,6 +27,7 @@ export interface EditorViewOverlayInput {
     commentHighlights: Accessor<CommentHighlightBox[]>;
     selectedImageBox: Accessor<SelectedImageBox | null>;
     selectedTextBoxBox: Accessor<SelectedTextBoxBox | null>;
+    selectedTableBox: Accessor<SelectedTableBox | null>;
     layoutOptions: LayoutOptionsOverlay;
     caretBox: Accessor<CaretBox>;
     inputBox: Accessor<InputBox>;
@@ -47,6 +49,7 @@ export interface EditorViewFileInput {
 export interface EditorViewSurfaceInput {
     surfaceEvents: ReturnType<typeof createEditorSurfaceEvents>;
     tableResize: ReturnType<typeof createEditorTableResize>;
+    tableCornerResize: ReturnType<typeof createEditorTableCornerResize>;
     tableDrag: ReturnType<typeof createEditorTableDrag>;
     revisionController: ReturnType<typeof createEditorRevisionController>;
     handleDrop: OasisEditorEditorSurfaceHandlers["onDrop"];

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

@@ -58,6 +58,7 @@ declare function createEditorDocumentRuntimeImpl(deps: EditorDocumentRuntimeDeps
     commentHighlights: import('solid-js').Accessor<import('../editorUiTypes.js').CommentHighlightBox[]>;
     selectedImageBox: import('solid-js').Accessor<import('../canvas/CanvasSelectionGeometry.js').SelectedImageSelectionBox | null>;
     selectedTextBoxBox: import('solid-js').Accessor<import('../canvas/CanvasSelectionGeometry.js').SelectedTextBoxSelectionBox | null>;
+    selectedTableBox: import('solid-js').Accessor<import('../canvas/CanvasSelectionGeometry.js').SelectedTableBox | null>;
     caretBox: import('solid-js').Accessor<import('../editorUiTypes.js').CaretBox>;
     preferredColumnX: import('solid-js').Accessor<number | null>;
     setPreferredColumnX: import('solid-js').Setter<number | null>;

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

@@ -136,6 +136,7 @@ declare function createEditorInteractionRuntimeImpl(deps: EditorInteractionRunti
     };
     onEditorMouseDown: (event: MouseEvent) => void;
     tableResize: import('../../app/controllers/useEditorTableResize.js').TableResizeOps;
+    tableCornerResize: import('../../app/controllers/useEditorTableCornerResize.js').TableCornerResizeOps;
     tableDrag: {
         dragging: import('solid-js').Accessor<boolean>;
         draggedTableInfo: import('solid-js').Accessor<{

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

@@ -2,6 +2,7 @@ import { EditorState } from '../../core/model.js';
 import { EditorLogger } from '../../utils/logger.js';
 import { createEditorClipboardController } from '../../app/controllers/useEditorClipboard.js';
 import { createEditorTableResize } from '../../app/controllers/useEditorTableResize.js';
+import { createEditorTableCornerResize } from '../../app/controllers/useEditorTableCornerResize.js';
 import { createEditorTableDrag } from '../../app/controllers/useEditorTableDrag.js';
 import { createEditorSurfaceEvents } from '../../app/controllers/useEditorSurfaceEvents.js';
 import { createEditorTextInput } from '../../app/controllers/useEditorTextInput.js';
@@ -52,6 +53,7 @@ export interface EditorInteractionWiringContext {
 }
 export interface EditorInteractionWiring {
     tableResize: ReturnType<typeof createEditorTableResize>;
+    tableCornerResize: ReturnType<typeof createEditorTableCornerResize>;
     tableDrag: ReturnType<typeof createEditorTableDrag>;
     revisionController: ReturnType<typeof createEditorRevisionController>;
     textDrag: ReturnType<typeof createEditorTextDrag>;

package/dist/ui/canvas/CanvasSelectionGeometry.d.ts

@@ -26,11 +26,20 @@ export interface SelectedTextBoxSelectionBox {
     /** True when the selected text box is a floating (anchored) drawing. */
     floating: boolean;
 }
+/** Bounding box of the table containing the caret, for the move/resize handles. */
+export interface SelectedTableBox {
+    tableId: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
 export interface CanvasSelectionGeometryResult {
     selectionBoxes: SelectionBox[];
     caretBox: CaretBox;
     inputBox: InputBox;
     selectedImageBox: SelectedImageSelectionBox | null;
     selectedTextBoxBox: SelectedTextBoxSelectionBox | null;
+    selectedTableBox: SelectedTableBox | null;
 }
 export declare function computeCanvasSelectionGeometry(snapshot: CanvasLayoutSnapshot, state: EditorState): CanvasSelectionGeometryResult;

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

@@ -10,6 +10,8 @@ export interface ColorPickerProps {
     lastValue: string;
     tooltip: string;
     testId: string;
+    label?: string;
+    ribbonSize?: "normal" | "large";
     palette: ColorPalette;
     automaticLabel?: string;
     noColorLabel?: string;

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

@@ -5,6 +5,8 @@ export interface GridPickerProps {
     tooltip?: string;
     testId?: string;
     icon?: string;
+    label?: string;
+    ribbonSize?: "normal" | "large";
     maxRows?: number;
     maxCols?: number;
 }

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

@@ -4,6 +4,8 @@ export interface ToolbarSelectProps extends JSX.SelectHTMLAttributes<HTMLSelectE
     wide?: boolean;
     small?: boolean;
     tooltip?: string;
+    label?: string;
+    ribbonSize?: "normal" | "large";
 }
 /**
  * HTML select wrapper. Keeps the uncontrolled-with-sync pattern: the value is

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

@@ -7,6 +7,7 @@ export interface SplitButtonProps {
     tooltip?: string;
     rootClass?: string;
     rootActive?: boolean;
+    ribbonSize?: "normal" | "large";
     /** Main (left) button. */
     mainContent: JSX.Element;
     mainTestId?: string;

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

@@ -121,6 +121,9 @@ export interface SelectItem extends ToolbarItemBase {
     /** Leading "empty" option label, if any (e.g. font placeholder). */
     placeholder?: string;
     width?: "wide" | "small" | "default";
+    /** Caption shown above the control when `ribbonSize` is `"large"`. */
+    labelKey?: TranslationKey;
+    label?: string;
 }
 export interface StyleGalleryItem extends ToolbarItemBase {
     type: "styleGallery";
@@ -136,6 +139,9 @@ export interface ColorPickerItem extends ToolbarItemBase {
     command: CommandRef;
     palette?: ColorPalette;
     defaultValue: string;
+    /** Caption shown under the swatch when `ribbonSize` is `"large"`. */
+    labelKey?: TranslationKey;
+    label?: string;
 }
 export interface GridPickerItem extends ToolbarItemBase {
     type: "gridPicker";
@@ -143,6 +149,9 @@ export interface GridPickerItem extends ToolbarItemBase {
     command: CommandRef;
     maxRows?: number;
     maxCols?: number;
+    /** Caption shown under the icon when `ribbonSize` is `"large"`. */
+    labelKey?: TranslationKey;
+    label?: string;
 }
 export interface SeparatorItem {
     type: "separator";

package/dist/ui/editorUiTypes.d.ts

@@ -40,6 +40,14 @@ export interface SelectedTextBoxBox {
     /** True when the text box is a floating (anchored) drawing. */
     floating: boolean;
 }
+/** Bounding box of the table containing the caret (move/resize handles). */
+export interface SelectedTableBox {
+    tableId: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
 export interface RevisionBox {
     revisionId: string;
     author: string;
@@ -100,6 +108,7 @@ export interface EditorSurfaceProps {
         currentTarget: HTMLElement;
     }) => void;
     onTableDragHandleMouseDown: (tableId: string, event: MouseEvent) => void;
+    onTableCornerResizeHandleMouseDown: (tableId: string, event: MouseEvent) => void;
     onRevisionMouseEnter: (revisionId: string, event: MouseEvent) => void;
     onRevisionMouseLeave?: (revisionId: string, event: MouseEvent) => void;
 }

package/dist/ui/overlays/TableHandlesOverlay.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+import { SelectedTableBox } from '../editorUiTypes.js';
+
+export interface TableHandlesOverlayProps {
+    /** Bounding box of the table containing the caret, or `null`. */
+    box: () => SelectedTableBox | null;
+    readOnly: boolean;
+    /** Press on the top-left move handle (drag/reorder the whole table). */
+    onMoveStart: (event: MouseEvent & {
+        currentTarget: HTMLElement;
+    }) => void;
+    /** Press on the bottom-right corner handle (proportional resize). */
+    onResizeStart: (event: MouseEvent & {
+        currentTarget: HTMLElement;
+    }) => void;
+}
+/**
+ * Word-style table handles: a move grip at the top-left and a resize grip at
+ * the bottom-right, shown while the caret is inside a table. Positioned in the
+ * same surface-relative content space as the image/text-box selection overlay.
+ */
+export declare function TableHandlesOverlay(props: TableHandlesOverlayProps): JSX.Element;

package/package.json

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