@netless/fastboard-react 0.1.0 → 0.2.2

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@netless/fastboard-react",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "A UI kit built on top of @netless/fastboard.",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "src/index.ts",
-  "sideEffects": false,
   "files": [
     "src",
     "dist"
@@ -13,29 +10,37 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
-    "framer-motion": "^5.6.0",
-    "i18next": "^21.6.6",
+    "framer-motion": "^6.2.3",
+    "i18next": "^21.6.9",
     "rc-slider": "^9.7.5"
   },
   "peerDependencies": {
-    "@netless/fastboard": "*",
+    "@netless/fastboard-core": "*",
     "@netless/window-manager": ">=0.4.0",
     "react": "*",
     "react-dom": "*",
     "white-web-sdk": ">=2.16.0"
   },
   "devDependencies": {
-    "@netless/app-slide": "^0.0.55",
-    "@netless/fastboard": "0.1.0",
-    "@netless/window-manager": "^0.4.0-canary.17",
+    "@netless/fastboard-core": "0.2.2",
+    "@netless/window-manager": "^0.4.0-canary.31",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "sass": "^1.49.0",
     "tippy.js": "^6.3.7",
     "tsup": "^5.11.11",
-    "white-web-sdk": "^2.16.0"
+    "white-web-sdk": "^2.16.5"
+  },
+  "publishConfig": {
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "src/index.ts"
   },
   "scripts": {
-    "build": "tsup"
-  }
+    "build": "tsup",
+    "cleanup": "rimraf dist",
+    "check": "tsc --noEmit"
+  },
+  "module": "dist/index.mjs",
+  "types": "src/index.ts"
 }

package/src/components/Fastboard.tsx

@@ -1,9 +1,8 @@
-import type { FastboardApp } from "@netless/fastboard";
-import type { PropsWithChildren } from "react";
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { ForwardedRef } from "react";
 import type { Language, Theme } from "../typings";
 
-import React, { useCallback, useEffect } from "react";
-
+import React, { forwardRef, useCallback, useEffect } from "react";
 import { createI18n, I18nContext } from "../i18n";
 import { useAsyncValue, useForceUpdate } from "../internal";
 import { FastboardAppContext, ThemeContext, useFastboardApp, useHideControls } from "./hooks";
@@ -19,24 +18,31 @@ export interface FastboardProps {
   language?: Language;
 }
 
-export function Fastboard({ app, ...restProps }: PropsWithChildren<FastboardProps>) {
-  if (!app) {
-    return <div className="fastboard-root" />;
-  }
+export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type WithForwardedRef<T = HTMLDivElement> = { forwardedRef: ForwardedRef<T> };
 
-  return (
-    <FastboardAppContext.Provider value={app}>
-      <FastboardInternal {...restProps} />
-    </FastboardAppContext.Provider>
-  );
-}
+export const Fastboard = /* @__PURE__ */ forwardRef<HTMLDivElement, FastboardProps & DivProps>(
+  function Fastboard({ app, theme, layout, language, ...restProps }, ref) {
+    if (!app) {
+      return <div className="fastboard-root" ref={ref} {...restProps} />;
+    }
+
+    return (
+      <FastboardAppContext.Provider value={app}>
+        <FastboardInternal forwardedRef={ref} {...{ theme, layout, language }} {...restProps} />
+      </FastboardAppContext.Provider>
+    );
+  }
+);
 
 function FastboardInternal({
+  forwardedRef,
   language,
   layout = {},
   theme = "light",
   children,
-}: Omit<PropsWithChildren<FastboardProps>, "app">) {
+  ...restProps
+}: Omit<FastboardProps, "app"> & DivProps & WithForwardedRef) {
   const app = useFastboardApp();
   const forceUpdate = useForceUpdate();
   const i18n = useAsyncValue(() => createI18n({ language }));
@@ -46,9 +52,13 @@ function FastboardInternal({
     forceUpdate();
   }, [forceUpdate, i18n, language]);
 
+  useEffect(() => {
+    app.manager.setPrefersColorScheme(theme);
+  }, [app, theme]);
+
   const useWhiteboard = useCallback(
     (container: HTMLDivElement | null) => {
-      container && app && app.manager.bindContainer(container);
+      if (container && app) app.manager.bindContainer(container);
     },
     [app]
   );
@@ -66,7 +76,7 @@ function FastboardInternal({
   return (
     <ThemeContext.Provider value={theme}>
       <I18nContext.Provider value={i18n}>
-        <div className="fastboard-root">
+        <div {...restProps} className="fastboard-root" ref={forwardedRef}>
           <div className="fastboard-view" ref={useWhiteboard} />
           {children ? (
             children

package/src/components/PageControl/PageControl.tsx

@@ -10,7 +10,7 @@ import { ChevronLeft } from "../../icons/ChevronLeft";
 import { ChevronRight } from "../../icons/ChevronRight";
 import { FilePlus } from "../../icons/FilePlus";
 import { TopOffset } from "../../theme";
-import { useFastboardApp, useTheme, useWritable } from "../hooks";
+import { useTheme, useWritable } from "../hooks";
 import { usePageControl } from "./hooks";
 
 export const name = "fastboard-page-control";
@@ -26,13 +26,11 @@ export function PageControl({
   nextIcon,
   nextIconDisable,
 }: PageControlProps) {
-  const app = useFastboardApp();
-
   theme = useTheme(theme);
   const { t } = useTranslation();
 
   const writable = useWritable();
-  const { pageIndex, pageCount, ...actions } = usePageControl(app.room, app.manager);
+  const { pageIndex, pageCount, ...actions } = usePageControl();
 
   const disabled = !writable;
 

package/src/components/PageControl/hooks.ts

@@ -1,67 +1,24 @@
-import type { Room, RoomState } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+import { useFastboardApp, useFastboardValue } from "../hooks";
 
-export function usePageControl(room?: Room | null, manager?: WindowManager | null) {
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageCount, setPageCount] = useState(0);
+export function usePageControl() {
+  const app = useFastboardApp();
+  const pageIndex = useFastboardValue(app.sceneIndex);
+  const pageCount = useFastboardValue(app.sceneLength);
 
   const addPage = useCallback(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-
-  const prevPage = useCallback(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex - 1);
-    } else if (room) {
-      room.pptPreviousStep();
-    }
-  }, [room, manager, pageIndex]);
-
-  const nextPage = useCallback(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (room) {
-      room.pptNextStep();
-    }
-  }, [room, manager, pageIndex]);
-
-  useEffect(() => {
-    if (room) {
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-
-      if (manager) {
-        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
-
-        return () => {
-          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
-        };
-      } else {
-        const onRoomStateChanged = (modifyState: Partial<RoomState>) => {
-          if (modifyState.sceneState) {
-            setPageIndex(modifyState.sceneState.index);
-            setPageCount(modifyState.sceneState.scenes.length);
-          }
-        };
-
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-
-        return () => {
-          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        };
-      }
-    }
-  }, [room, manager]);
+    await app.manager.switchMainViewToWriter();
+    app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
+
+  const prevPage = useCallback(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex - 1);
+  }, [app, pageIndex]);
+
+  const nextPage = useCallback(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
 
   return { pageIndex, pageCount, prevPage, nextPage, addPage };
 }

package/src/components/Toolbar/Content.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Icon } from "../../icons";
 
 import { clamp } from "../../internal";
 import { CleanButton, ClickerButton, EraserButton, SelectorButton } from "./components/ApplianceButtons";
@@ -9,12 +10,20 @@ import { ShapesButton } from "./components/ShapesButton";
 import { TextButton } from "./components/TextButton";
 import { DownButton, UpButton } from "./components/UpDownButtons";
 import { ItemHeight, ItemsCount, MaxHeight, MinHeight } from "./const";
-import { name } from "./Toolbar";
+import { name, ToolbarContext } from "./Toolbar";
 
-export const Content = React.memo(() => {
+import collapsePNG from "./components/assets/collapsed.png";
+
+export interface ContextProps {
+  onCollapse: () => void;
+}
+
+export function Content({ onCollapse }: ContextProps) {
+  const { theme, icons, writable } = useContext(ToolbarContext);
   const ref = useRef<HTMLDivElement>(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
+  const disabled = !writable;
 
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
@@ -69,6 +78,12 @@ export const Content = React.memo(() => {
         <AppsButton />
       </div>
       {needScroll && <DownButton scrollTo={scrollTo} disabled={disableScrollDown} />}
+      <div className={clsx("fastboard-toolbar-mask", theme)} onClick={onCollapse}>
+        <Icon
+          fallback={<img draggable={false} className={clsx(`${name}-mask-btn`, theme)} src={collapsePNG} />}
+          src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
+        />
+      </div>
     </>
   );
-});
+}

package/src/components/Toolbar/Toolbar.scss

@@ -98,8 +98,8 @@ $name: "fastboard-toolbar";
 
     svg,
     img {
-      width: 1em;
-      height: 1em;
+      width: 100%;
+      height: 100%;
     }
 
     &:disabled {
@@ -191,7 +191,7 @@ $name: "fastboard-toolbar";
     .#{$name}-btn {
       width: 40px;
       height: 40px;
-      font-size: 40px;
+      font-size: 0;
     }
   }
 
@@ -263,6 +263,16 @@ $name: "fastboard-toolbar";
     }
   }
 
+  &-mask {
+    position: absolute;
+    left: calc(100% + 1px);
+    top: 50%;
+    transform: translateY(-50%);
+    &.dark {
+      left: calc(100%);
+    }
+  }
+
   &-mask-btn {
     width: 17px;
     height: 62px;

package/src/components/Toolbar/Toolbar.tsx

@@ -3,14 +3,12 @@ import type { ToolbarHook } from "./hooks";
 
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import React, { createContext, useState } from "react";
 
-import collapsePNG from "./components/assets/collapsed.png";
 import expandPNG from "./components/assets/expanded.png";
 
 import { Icon } from "../../icons";
 import { useTheme } from "../hooks";
-import { Mask } from "./components/Mask";
 import { Content } from "./Content";
 import { EmptyToolbarHook, useToolbar } from "./hooks";
 
@@ -42,75 +40,45 @@ export const ToolbarContext = createContext<ToolbarContextType>({
 
 export const name = "fastboard-toolbar";
 
-export const Toolbar = ({ theme, icons }: ToolbarProps) => {
+export function Toolbar({ theme, icons }: ToolbarProps) {
   theme = useTheme(theme);
 
   const hook = useToolbar();
   const [expanded, setExpanded] = useState(true);
-  const [toolbar, toolbarRef] = useState<HTMLDivElement | null>(null);
-  const [onHover, setOnHover] = useState(false);
-  const [delayedOnHover, setDelayedOnHover] = useState(false);
-  const [pointEvents, setPointEvents] = useState(true);
+  const [pointerEvents, setPointerEvents] = useState<"auto" | "none">("auto");
   const disabled = !hook.writable;
 
-  const toggle = useCallback(() => {
-    setExpanded(e => !e);
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDelayedOnHover(onHover);
-    }, 400);
-    return () => clearTimeout(timer);
-  }, [onHover]);
-
   return (
     <ToolbarContext.Provider value={{ theme, icons, ...hook }}>
       <AnimatePresence>
         {expanded ? (
           <motion.div
-            initial={{ x: -100 }}
-            animate={{ x: 0, transition: { duration: 0.5 } }}
             key="toolbar"
-            ref={toolbarRef}
             className={clsx(name, theme)}
-            onPointerEnter={() => {
-              expanded && setOnHover(true);
-            }}
-            onMouseLeave={() => setOnHover(false)}
+            initial={{ x: -100 }}
+            animate={{ x: 0, transition: { duration: 0.5 } }}
             exit={{ x: -100, transition: { duration: 0.5 } }}
-            onAnimationStart={() => setPointEvents(false)}
-            onAnimationComplete={() => setPointEvents(true)}
-            style={{ pointerEvents: pointEvents ? "auto" : "none" }}
+            onAnimationStart={() => setPointerEvents("none")}
+            onAnimationComplete={() => setPointerEvents("auto")}
+            style={{ pointerEvents }}
           >
-            <Content />
-            {expanded && (onHover || delayedOnHover) && (
-              <Mask toolbar={toolbar}>
-                <div onClick={toggle}>
-                  <img draggable={false} className={clsx(`${name}-mask-btn`, theme)} src={collapsePNG} />
-                </div>
-              </Mask>
-            )}
+            <Content onCollapse={() => setExpanded(false)} />
           </motion.div>
         ) : (
           <motion.div
             className={clsx(`${name}-expand-btn`, theme)}
             key="expand"
-            onClick={toggle}
+            onClick={() => setExpanded(true)}
             initial={{ x: -100 }}
             animate={{ x: 0, transition: { duration: 0.5 } }}
           >
-            {!expanded && (
-              <Icon
-                fallback={
-                  <img draggable={false} src={expandPNG} className={clsx(`${name}-mask-btn`, theme)} />
-                }
-                src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
-              />
-            )}
+            <Icon
+              fallback={<img draggable={false} src={expandPNG} className={clsx(`${name}-mask-btn`, theme)} />}
+              src={disabled ? icons?.expandIconDisable : icons?.expandIcon}
+            />
           </motion.div>
         )}
       </AnimatePresence>
     </ToolbarContext.Provider>
   );
-};
+}

package/src/components/hooks.ts

@@ -1,4 +1,4 @@
-import type { FastboardApp, FastboardReadable } from "@netless/fastboard";
+import type { FastboardApp, FastboardReadable } from "@netless/fastboard-core";
 import type { Theme } from "../typings";
 
 import { BuiltinApps } from "@netless/window-manager";

package/src/index.ts

@@ -8,3 +8,4 @@ export * from "./components/PageControl";
 export * from "./components/Toolbar";
 export * from "./components/PlayerControl";
 export * from "./components/Fastboard";
+export * from "./vanilla";

package/src/vanilla/index.tsx

@@ -0,0 +1,18 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { DivProps, FastboardProps } from "../components/Fastboard";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { Fastboard } from "../components/Fastboard";
+
+/**
+ * Mount fastboard app to some dom, returns the disposer, which will unmount the app.
+ * @example
+ * let app = await createFastboard({ ...config })
+ * let disposer = mount(app, document.getElementById("whiteboard"))
+ * disposer()
+ */
+export function mount(app: FastboardApp, dom: HTMLElement, props: Omit<FastboardProps & DivProps, "ref">) {
+  ReactDOM.render(<Fastboard app={app} {...props} />, dom);
+  return () => ReactDOM.unmountComponentAtNode(dom);
+}

package/dist/behaviors/style.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Fastboard.d.ts

@@ -1,15 +0,0 @@
-import type { FastboardApp } from "@netless/fastboard";
-import type { PropsWithChildren } from "react";
-import type { Language, Theme } from "../typings";
-export interface FastboardProps {
-    app?: FastboardApp | null;
-    theme?: Theme;
-    layout?: {
-        Toolbar?: boolean;
-        RedoUndo?: boolean;
-        ZoomControl?: boolean;
-        PageControl?: boolean;
-    };
-    language?: Language;
-}
-export declare function Fastboard({ app, ...restProps }: PropsWithChildren<FastboardProps>): JSX.Element;

package/dist/components/PageControl/PageControl.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { CommonProps, GenericIcon } from "../../typings";
-export declare const name = "fastboard-page-control";
-export declare type PageControlProps = CommonProps & GenericIcon<"add" | "prev" | "next">;
-export declare function PageControl({ theme, addIcon, addIconDisable, prevIcon, prevIconDisable, nextIcon, nextIconDisable, }: PageControlProps): JSX.Element;

package/dist/components/PageControl/hooks.d.ts

@@ -1,9 +0,0 @@
-import type { Room } from "white-web-sdk";
-import type { WindowManager } from "@netless/window-manager";
-export declare function usePageControl(room?: Room | null, manager?: WindowManager | null): {
-    pageIndex: number;
-    pageCount: number;
-    prevPage: () => void;
-    nextPage: () => void;
-    addPage: () => Promise<void>;
-};

package/dist/components/PageControl/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./hooks";
-export { PageControl, type PageControlProps } from "./PageControl";

package/dist/components/PlayerControl/PlayerControl.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { Player } from "white-web-sdk";
-import type { CommonProps, GenericIcon } from "../../typings";
-export declare type PlayerControlProps = {
-    autoHide?: boolean;
-    player?: Player;
-} & Omit<CommonProps, "room"> & GenericIcon<"play" | "pause" | "loading">;
-export declare const name = "fastboard-player-control";
-export declare function PlayerControl({ theme, autoHide, player: player_, ...icons }: PlayerControlProps): JSX.Element;

package/dist/components/PlayerControl/hooks.d.ts

@@ -1,11 +0,0 @@
-import type { Player } from "white-web-sdk";
-import { PlayerPhase } from "white-web-sdk";
-export declare function usePlayerControl(player?: Player | null): {
-    phase: PlayerPhase;
-    currentTime: number;
-    totalTime: number;
-    speed: number;
-    setSpeed: (speed: number) => void;
-    togglePlay: () => void;
-    seekToProgressTime: (time: number) => void;
-};

package/dist/components/PlayerControl/icons/Loading.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Loading: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/Pause.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Pause: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/Play.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from "../../../typings";
-export declare const Play: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const Icons: {
-    Play: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Pause: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-    Loading: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
-};

package/dist/components/PlayerControl/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./hooks";
-export { PlayerControl, type PlayerControlProps } from "./PlayerControl";

package/dist/components/RedoUndo/RedoUndo.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { CommonProps, GenericIcon } from "../../typings";
-export declare const name = "fastboard-redo-undo";
-export declare type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
-export declare function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }: RedoUndoProps): JSX.Element;

package/dist/components/RedoUndo/hooks.d.ts

@@ -1,6 +0,0 @@
-export declare function useRedoUndo(): {
-    redoSteps: any;
-    undoSteps: any;
-    redo: () => void;
-    undo: () => void;
-};

package/dist/components/RedoUndo/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./hooks";
-export { RedoUndo, type RedoUndoProps } from "./RedoUndo";

package/dist/components/Toolbar/Content.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const Content: React.MemoExoticComponent<() => JSX.Element>;

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

@@ -1,14 +0,0 @@
-import type { CommonProps, GenericIcon, Theme } from "../../typings";
-import type { ToolbarHook } from "./hooks";
-import React from "react";
-export declare type ToolbarProps = CommonProps & {
-    icons?: GenericIcon<"clicker" | "selector" | "pencil" | "eraser" | "clean" | "expand" | "collapse" | "up" | "down" | "text" | "apps">;
-};
-declare type ToolbarContextType = ToolbarHook & {
-    theme: Theme;
-    icons?: ToolbarProps["icons"];
-};
-export declare const ToolbarContext: React.Context<ToolbarContextType>;
-export declare const name = "fastboard-toolbar";
-export declare const Toolbar: ({ theme, icons }: ToolbarProps) => JSX.Element;
-export {};

package/dist/components/Toolbar/components/ApplianceButtons.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { HotKey } from "white-web-sdk";
-export declare function renderToolTip(text: string | undefined, hotkey?: HotKey): string | JSX.Element | undefined;
-export declare function ClickerButton(): JSX.Element;
-export declare function SelectorButton(): JSX.Element;
-export declare function EraserButton(): JSX.Element;
-export declare function CleanButton(): JSX.Element;

package/dist/components/Toolbar/components/AppsButton.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-export interface AppsButtonProps {
-    content?: React.ReactNode;
-    onClick?: () => void;
-}
-export declare function AppsButton({ content, onClick }: AppsButtonProps): JSX.Element;

package/dist/components/Toolbar/components/ColorBox.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function ColorBox(): JSX.Element;

package/dist/components/Toolbar/components/CutLine.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function CutLine(): JSX.Element;

package/dist/components/Toolbar/components/Mask.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface MaskProps {
-    toolbar: HTMLDivElement | null;
-    children: React.ReactNode;
-}
-export declare const Mask: React.MemoExoticComponent<({ toolbar, children }: MaskProps) => React.ReactPortal | null>;
-export {};

package/dist/components/Toolbar/components/PencilButton.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function PencilButton(): JSX.Element;

package/dist/components/Toolbar/components/ShapesButton.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function ShapesButton(): JSX.Element;
-export declare function ShapesBox(): JSX.Element;