@myoc/excalidraw 0.19.547 → 0.20.0

package/CHANGELOG.md

@@ -6485,3 +6485,109 @@ First release of `@excalidraw/excalidraw`## Excalidraw Library
 
 ---
 
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Add ability to turn off compression for files that are smaller than a given size
+
+- Add lock tool to the dropdown and also add the status of the extra tools to be the same icon as the selected tool
+
+- Add view mode button
+
+- Add multiple image copy paste or drag and drop
+
+- Multiple image additions from clipboard
+
+- Add arrange elements action
+
+- Add top picks to appProps for both stoke color and background color
+
+### Fixes
+
+- Issues
+
+- Make mobile mode more myoc looking
+
+- Add normalise functionality
+
+- Update with excalidraw
+
+- Fix imports
+
+- Fix mutateGroup to use scene.mutateGroup
+
+- Imports
+
+- Ensure that fileId is different for compressed vs uncompressed file
+
+- Remove not working prop for dontResizeLimitMBs
+
+- Add smartview for mobile
+
+- Hide the alignment buttons if there is only one group selected (they do nothing if only one group is selected)
+
+- Use css vars already provided instead of hard coding directly from oc-gray
+
+- Remove unused variables
+
+- Pass the new top pick color props properly
+
+- Incorrect import for color (was moved to common)
+
+---## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Add ability to turn off compression for files that are smaller than a given size
+
+- Add lock tool to the dropdown and also add the status of the extra tools to be the same icon as the selected tool
+
+- Add view mode button
+
+- Add multiple image copy paste or drag and drop
+
+- Multiple image additions from clipboard
+
+- Add arrange elements action
+
+- Add top picks to appProps for both stoke color and background color
+
+### Fixes
+
+- Issues
+
+- Make mobile mode more myoc looking
+
+- Add normalise functionality
+
+- Update with excalidraw
+
+- Fix imports
+
+- Fix mutateGroup to use scene.mutateGroup
+
+- Imports
+
+- Ensure that fileId is different for compressed vs uncompressed file
+
+- Remove not working prop for dontResizeLimitMBs
+
+- Add smartview for mobile
+
+- Hide the alignment buttons if there is only one group selected (they do nothing if only one group is selected)
+
+- Use css vars already provided instead of hard coding directly from oc-gray
+
+- Remove unused variables
+
+- Pass the new top pick color props properly
+
+- Incorrect import for color (was moved to common)
+
+---
+

package/README.md

@@ -41,6 +41,100 @@ export default function App() {
 
 Excalidraw fills `100%` of the width and height of its parent. If the parent has no height, the canvas will not be visible.
 
+## Responsive UI layout
+
+Use `uiLayout` to independently place or hide built-in controls for desktop, tablet, and mobile form factors. Each form factor starts from its current default layout; omitted overrides keep their defaults. The host owns any persistence.
+
+The eight physical regions are:
+
+```text
+topLeft       topCenter       topRight
+middleLeft    [canvas]        middleRight
+bottomLeft    bottomCenter    bottomRight
+```
+
+```tsx
+import {
+  arrowsToEyeIcon,
+  Excalidraw,
+  RedoIcon,
+  UndoIcon,
+} from "@myoc/excalidraw";
+import type { ExcalidrawUICustomItem } from "@myoc/excalidraw";
+
+const historyAndZoom: ExcalidrawUICustomItem = {
+  id: "host-history-and-zoom",
+  region: "bottomLeft" as const,
+  render: ({ api }) => (
+    <div style={{ display: "flex", gap: 8 }}>
+      <button
+        aria-label="Undo"
+        onClick={() => api.executeCommand("action:undo")}
+      >
+        <span className="host-tool-icon">{UndoIcon}</span>
+      </button>
+      <button
+        aria-label="Redo"
+        onClick={() => api.executeCommand("action:redo")}
+      >
+        <span className="host-tool-icon">{RedoIcon}</span>
+      </button>
+      <button
+        aria-label="Smart Zoom"
+        onClick={() => api.executeCommand("action:smartZoom")}
+      >
+        <span className="host-tool-icon">{arrowsToEyeIcon}</span>
+      </button>
+    </div>
+  ),
+};
+
+export function Editor() {
+  return (
+    <Excalidraw
+      uiLayout={{
+        desktop: {
+          items: {
+            toolbar: { region: "middleLeft" },
+            undo: { visible: false },
+            redo: { visible: false },
+            zoom: { visible: false },
+          },
+          customItems: [historyAndZoom],
+        },
+        tablet: {
+          items: { toolbar: { region: "topLeft" } },
+        },
+        mobile: {
+          items: {
+            toolbar: { region: "bottomLeft" },
+            undo: { visible: false },
+            redo: { visible: false },
+            zoom: { visible: false },
+          },
+          customItems: [historyAndZoom],
+        },
+      }}
+    />
+  );
+}
+```
+
+Import `ExcalidrawUICustomItem` or `ExcalidrawImperativeAPI` from the package for the callback type. A custom item receives the API, current UI state and editor form factor, its resolved region, and its resolved orientation. The region names use physical left and right edges. Top and bottom regions arrange controls horizontally by default; middle side regions arrange them vertically. Set `orientation` to override the suggestion. Hiding a built-in control only hides its button; the matching keyboard shortcut and imperative command remain available.
+
+The existing icons are also available as named exports from the package root. Most are React SVG elements, so render them as children (for example, `{UndoIcon}`) and size them with a host-owned class:
+
+```css
+.host-tool-icon,
+.host-tool-icon svg {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+}
+```
+
+The host owns the surrounding button styles, accessible label, and command behavior. Theme-aware icons such as `GroupIcon` are React components and accept their documented props.
+
 ## Next.js / SSR frameworks
 
 Excalidraw should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled.

package/dist/dev/{chunk-6X722ZMM.js → chunk-JAMVC3FK.js}

@@ -1,7 +1,7 @@
 // <define:import.meta.env>
-var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.546", DEV: true };
+var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.548", DEV: true };
 
 export {
   define_import_meta_env_default
 };
-//# sourceMappingURL=chunk-6X722ZMM.js.map
+//# sourceMappingURL=chunk-JAMVC3FK.js.map

package/dist/dev/{chunk-OWS32STE.js → chunk-SYLLRP5N.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-6X722ZMM.js";
+} from "./chunk-JAMVC3FK.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -22,7 +22,6 @@ import {
 
 // appState.ts
 import {
-  COLOR_PALETTE,
   ARROW_TYPE,
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
@@ -138,7 +137,8 @@ var getDefaultAppState = () => {
     editingFrame: null,
     elementsToHighlight: null,
     toast: null,
-    viewBackgroundColor: COLOR_PALETTE.white,
+    // Let host applications provide the visible canvas backdrop.
+    viewBackgroundColor: "transparent",
     zenModeEnabled: false,
     zoom: {
       value: 1
@@ -5455,7 +5455,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-SHO5VNS6.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-MIDG6L22.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5906,4 +5906,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-OWS32STE.js.map
+//# sourceMappingURL=chunk-SYLLRP5N.js.map