@myoc/element 0.19.548 → 0.20.1

package/dist/types/excalidraw/components/Actions.d.ts

@@ -29,12 +29,14 @@ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction
  * overflow measurement that promotes duplicate/delete out of the popover when
  * there is room.
  */
-export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
+export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, showUndo, showRedo, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
     renderAction: ActionManager["renderAction"];
     app: AppClassProperties;
     setAppState: React.Component<any, AppState>["setState"];
+    showUndo?: boolean;
+    showRedo?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ZoomActions: ({ renderAction, }: {
     renderAction: ActionManager["renderAction"];

package/dist/types/excalidraw/components/LayerUI.d.ts

@@ -30,6 +30,7 @@ interface LayerUIProps {
     isCollaborating: boolean;
     generateLinkForSelection?: AppProps["generateLinkForSelection"];
     currentUserControls?: ExcalidrawProps["currentUserControls"];
+    uiLayout?: ExcalidrawProps["uiLayout"];
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onPenModeToggle, showExitZenModeBtn, renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, defaultUIEnabled, zoomUIEnabled, scrollBackToContentUIEnabled, isCollaborating, generateLinkForSelection, currentUserControls, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onPenModeToggle, showExitZenModeBtn, renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, defaultUIEnabled, zoomUIEnabled, scrollBackToContentUIEnabled, isCollaborating, generateLinkForSelection, currentUserControls, uiLayout, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/types/excalidraw/components/MobileMenu.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 import type { ActionManager } from "../actions/manager";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
+import type { AppClassProperties, AppState, ExcalidrawProps, UIAppState } from "../types";
 import type { JSX } from "react";
 type MobileMenuProps = {
     appState: UIAppState;
@@ -18,6 +18,7 @@ type MobileMenuProps = {
     defaultUIEnabled: boolean;
     scrollBackToContentUIEnabled: boolean;
     app: AppClassProperties;
+    uiLayout?: ExcalidrawProps["uiLayout"];
 };
-export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, uiLayout, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/excalidraw/components/ToolPopover.d.ts

@@ -17,6 +17,7 @@ type ToolPopoverProps = {
     "data-testid": string;
     onToolChange: (type: string) => void;
     displayedOption: ToolOption;
+    shortcut?: string;
 };
-export declare const ToolPopover: ({ app, options, activeTool, defaultOption, "data-testid": dataTestId, onToolChange, displayedOption, }: ToolPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolPopover: ({ app, options, activeTool, defaultOption, "data-testid": dataTestId, onToolChange, displayedOption, shortcut, }: ToolPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/excalidraw/components/Toolbar.d.ts

@@ -1,7 +1,25 @@
 import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
 import type { ActionManager } from "../actions/manager";
+import type { ToolbarToolType } from "./Tools";
+export type ExcalidrawToolbarOverflowItemName = ToolbarToolType | "objectsSnapMode" | "strokeEyedropper";
+export declare const ObjectsSnapModeButton: ({ actionManager, app, }: {
+    actionManager: ActionManager;
+    app: AppClassProperties;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const StrokeEyeDropperButton: ({ app, }: {
+    app: AppClassProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraToolsDropdown: ({ app, activeTool, setAppState, UIOptions, isMyocSimplifiedMode, actionManager, overflowItems, }: {
+    app: AppClassProperties;
+    activeTool: UIAppState["activeTool"];
+    setAppState: React.Component<any, AppState>["setState"];
+    UIOptions: AppProps["UIOptions"];
+    isMyocSimplifiedMode: boolean;
+    actionManager: ActionManager;
+    overflowItems?: readonly ExcalidrawToolbarOverflowItemName[];
+}) => import("react/jsx-runtime").JSX.Element;
 /** the main (desktop/tablet) toolbar island */
-export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, }: {
+export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, showPenMode, }: {
     app: AppClassProperties;
     appState: UIAppState;
     setAppState: React.Component<any, AppState>["setState"];
@@ -10,4 +28,5 @@ export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionMa
     onPenModeToggle: AppClassProperties["togglePenMode"];
     onLockToggle: () => void;
     heading: React.ReactNode;
+    showPenMode?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/excalidraw/components/Tools.d.ts

@@ -1,3 +1,4 @@
+import type { PointerType } from "@excalidraw/element/types";
 import type { AppClassProperties, AppState, ToolType, UIAppState } from "../types";
 export type ToolConfig = {
     icon: React.ReactNode;
@@ -68,6 +69,30 @@ export type ToolButtonComponentProps = {
      */
     hideShortcut?: boolean;
 };
+type ToolButtonBehavior = {
+    /**
+     * display the shortcut of another tool (tooltip, aria, keybinding badge) —
+     * e.g. the lasso button shows the selection shortcut, which activates it
+     * when lasso is the preferred selection tool
+     */
+    shortcutType?: ToolbarToolType;
+    /**
+     * custom activation — replaces the default track + `setActiveTool` (pen
+     * detection still runs before it)
+     */
+    onSelect?: (app: AppClassProperties, data: {
+        pointerType: PointerType | null;
+    }) => void;
+};
+/**
+ * Creates a toolbar button component for the given tool. Activation is
+ * uniform: track + `setActiveTool` (recording the previous tool for toggle
+ * tools), with pen detection on the first pen interaction.
+ */
+export declare const createToolButton: (type: ToolbarToolType, behavior?: ToolButtonBehavior) => {
+    ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const HandToolButton: {
     ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -136,10 +161,11 @@ export declare const LassoToolButton: {
  * The selection ⇄ lasso popover used in compact (tablet) and mobile
  * toolbars; picking an option also makes it the preferred selection tool.
  */
-export declare const SelectionToolPopover: ({ app, activeTool, setAppState, }: {
+export declare const SelectionToolPopover: ({ app, activeTool, setAppState, hideShortcut, }: {
     app: AppClassProperties;
     activeTool: UIAppState["activeTool"];
     setAppState: React.Component<any, AppState>["setState"];
+    hideShortcut?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * The freedraw ⇄ draw-shape popover used in compact (tablet) and mobile
@@ -149,3 +175,4 @@ export declare const FreedrawToolPopover: ({ app, activeTool, }: {
     app: AppClassProperties;
     activeTool: UIAppState["activeTool"];
 }) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/excalidraw/components/UIRegionLayout.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { EditorInterface } from "@excalidraw/common";
+import "./UIRegionLayout.scss";
+import type { ExcalidrawImperativeAPI, ExcalidrawUIFormFactorLayout, ExcalidrawUIItem, ExcalidrawUIOrientation, ExcalidrawUIRegion, UIAppState } from "../types";
+export type UIRegionLayoutItem = {
+    id: ExcalidrawUIItem;
+    content: React.ReactNode;
+    defaultRegion: ExcalidrawUIRegion;
+    defaultOrder?: number;
+    defaultOrientation?: ExcalidrawUIOrientation;
+    islandGroup?: {
+        id: string;
+        className: string;
+        padding: number;
+        gap: number;
+    };
+};
+export declare const UIRegionLayout: ({ items, layout, app, appState, editorInterface, className, legacyBottomCenter, legacyBottomLeft, }: {
+    items: readonly UIRegionLayoutItem[];
+    layout?: ExcalidrawUIFormFactorLayout;
+    app: {
+        api: ExcalidrawImperativeAPI;
+    };
+    appState: UIAppState;
+    editorInterface: EditorInterface;
+    className?: string;
+    legacyBottomCenter?: React.ReactNode;
+    legacyBottomLeft?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const getUIFormFactorLayout: (layout: {
+    desktop?: ExcalidrawUIFormFactorLayout;
+    tablet?: ExcalidrawUIFormFactorLayout;
+    mobile?: ExcalidrawUIFormFactorLayout;
+} | undefined, editorInterface: Pick<EditorInterface, "formFactor">) => ExcalidrawUIFormFactorLayout | undefined;

package/dist/types/excalidraw/types.d.ts

@@ -695,7 +695,45 @@ export type UIConfig = {
         scrollBackToContent?: boolean;
     };
 };
+export type ExcalidrawUIRegion = "topLeft" | "topCenter" | "topRight" | "middleLeft" | "middleRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+export type ExcalidrawUIOrientation = "auto" | "horizontal" | "vertical";
+/** Built-in controls that can be independently placed by `uiLayout`. */
+export type ExcalidrawUIItem = "mainMenu" | "sidebarTrigger" | "hostTopLeftUI" | "hostTopRightUI" | "toolbar" | "stylesPanel" | "collaborators" | "stats" | "undo" | "redo" | "smartZoom" | "viewMode" | "zoom" | "penMode" | "help";
+export type ExcalidrawUIItemLayout = {
+    region?: ExcalidrawUIRegion;
+    visible?: boolean;
+    order?: number;
+    orientation?: ExcalidrawUIOrientation;
+};
+export type ExcalidrawUICustomItem = ExcalidrawUIItemLayout & {
+    id: string;
+    region: ExcalidrawUIRegion;
+    render: (context: {
+        api: ExcalidrawImperativeAPI;
+        appState: UIAppState;
+        /** Current canvas zoom, updated reactively when the viewport zoom changes. */
+        zoom: AppState["zoom"];
+        editorInterface: EditorInterface;
+        region: ExcalidrawUIRegion;
+        orientation: Exclude<ExcalidrawUIOrientation, "auto">;
+    }) => React.ReactNode;
+};
+export type ExcalidrawUIFormFactorLayout = {
+    items?: Partial<Record<ExcalidrawUIItem, ExcalidrawUIItemLayout>>;
+    customItems?: readonly ExcalidrawUICustomItem[];
+};
+/** Independent host-owned layouts for each responsive editor form factor. */
+export type ExcalidrawUILayout = {
+    desktop?: ExcalidrawUIFormFactorLayout;
+    tablet?: ExcalidrawUIFormFactorLayout;
+    mobile?: ExcalidrawUIFormFactorLayout;
+};
 export interface ExcalidrawProps {
+    /**
+     * Host-controlled placement and visibility for editor UI. Each form factor
+     * has its own overrides; omitted values retain that form factor's defaults.
+     */
+    uiLayout?: ExcalidrawUILayout;
     className?: string;
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
     onThemeChange?: (theme: Theme | "system") => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myoc/element",
-  "version": "0.19.548",
+  "version": "0.20.1",
   "type": "module",
   "types": "./dist/types/element/src/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -65,9 +65,9 @@
   },
   "dependencies": {
     "@discourse/gif": "1.0.0",
-    "@excalidraw/common": "npm:@myoc/common@0.19.548",
-    "@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.19.548",
-    "@excalidraw/math": "npm:@myoc/math@0.19.548",
+    "@excalidraw/common": "npm:@myoc/common@0.20.1",
+    "@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.20.1",
+    "@excalidraw/math": "npm:@myoc/math@0.20.1",
     "thumbhash": "0.1.1"
   }
 }

package/dist/types/excalidraw/components/FixedSideContainer.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import "./FixedSideContainer.scss";
-type FixedSideContainerProps = {
-    children: React.ReactNode;
-    side: "top" | "left" | "right";
-    className?: string;
-};
-export declare const FixedSideContainer: ({ children, side, className, }: FixedSideContainerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/excalidraw/components/footer/Footer.d.ts

@@ -1,14 +0,0 @@
-import type { ActionManager } from "../../actions/manager";
-import type { UIAppState } from "../../types";
-declare const Footer: {
-    ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, defaultUIEnabled, zoomUIEnabled, }: {
-        appState: UIAppState;
-        actionManager: ActionManager;
-        showExitZenModeBtn: boolean;
-        renderWelcomeScreen: boolean;
-        defaultUIEnabled: boolean;
-        zoomUIEnabled: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default Footer;