@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/StylePanel/styles.mjs

@@ -0,0 +1,99 @@
+const STYLES = {
+  color: [
+    { value: "black", icon: "color" },
+    { value: "grey", icon: "color" },
+    { value: "light-violet", icon: "color" },
+    { value: "violet", icon: "color" },
+    { value: "blue", icon: "color" },
+    { value: "light-blue", icon: "color" },
+    { value: "yellow", icon: "color" },
+    { value: "orange", icon: "color" },
+    { value: "green", icon: "color" },
+    { value: "light-green", icon: "color" },
+    { value: "light-red", icon: "color" },
+    { value: "red", icon: "color" }
+  ],
+  fill: [
+    { value: "none", icon: "fill-none" },
+    { value: "semi", icon: "fill-semi" },
+    { value: "solid", icon: "fill-solid" },
+    { value: "pattern", icon: "fill-pattern" }
+  ],
+  dash: [
+    { value: "draw", icon: "dash-draw" },
+    { value: "dashed", icon: "dash-dashed" },
+    { value: "dotted", icon: "dash-dotted" },
+    { value: "solid", icon: "dash-solid" }
+  ],
+  size: [
+    { value: "s", icon: "size-small" },
+    { value: "m", icon: "size-medium" },
+    { value: "l", icon: "size-large" },
+    { value: "xl", icon: "size-extra-large" }
+  ],
+  font: [
+    { value: "draw", icon: "font-draw" },
+    { value: "sans", icon: "font-sans" },
+    { value: "serif", icon: "font-serif" },
+    { value: "mono", icon: "font-mono" }
+  ],
+  horizontalAlign: [
+    { value: "start", icon: "text-align-left" },
+    { value: "middle", icon: "text-align-center" },
+    { value: "end", icon: "text-align-right" }
+  ],
+  verticalAlign: [
+    { value: "start", icon: "vertical-align-start" },
+    { value: "middle", icon: "vertical-align-center" },
+    { value: "end", icon: "vertical-align-end" }
+  ],
+  geo: [
+    { value: "rectangle", icon: "geo-rectangle" },
+    { value: "ellipse", icon: "geo-ellipse" },
+    { value: "cloud", icon: "geo-cloud" },
+    { value: "triangle", icon: "geo-triangle" },
+    { value: "diamond", icon: "geo-diamond" },
+    { value: "pentagon", icon: "geo-pentagon" },
+    { value: "hexagon", icon: "geo-hexagon" },
+    { value: "octagon", icon: "geo-octagon" },
+    { value: "star", icon: "geo-star" },
+    { value: "rhombus", icon: "geo-rhombus" },
+    { value: "rhombus-2", icon: "geo-rhombus-2" },
+    { value: "oval", icon: "geo-oval" },
+    { value: "trapezoid", icon: "geo-trapezoid" },
+    { value: "arrow-right", icon: "geo-arrow-right" },
+    { value: "arrow-left", icon: "geo-arrow-left" },
+    { value: "arrow-up", icon: "geo-arrow-up" },
+    { value: "arrow-down", icon: "geo-arrow-down" },
+    { value: "x-box", icon: "geo-x-box" },
+    { value: "check-box", icon: "geo-check-box" }
+  ],
+  arrowheadStart: [
+    { value: "none", icon: "arrowhead-none" },
+    { value: "arrow", icon: "arrowhead-arrow" },
+    { value: "triangle", icon: "arrowhead-triangle" },
+    { value: "square", icon: "arrowhead-square" },
+    { value: "dot", icon: "arrowhead-dot" },
+    { value: "diamond", icon: "arrowhead-diamond" },
+    { value: "inverted", icon: "arrowhead-triangle-inverted" },
+    { value: "bar", icon: "arrowhead-bar" }
+  ],
+  arrowheadEnd: [
+    { value: "none", icon: "arrowhead-none" },
+    { value: "arrow", icon: "arrowhead-arrow" },
+    { value: "triangle", icon: "arrowhead-triangle" },
+    { value: "square", icon: "arrowhead-square" },
+    { value: "dot", icon: "arrowhead-dot" },
+    { value: "diamond", icon: "arrowhead-diamond" },
+    { value: "inverted", icon: "arrowhead-triangle-inverted" },
+    { value: "bar", icon: "arrowhead-bar" }
+  ],
+  spline: [
+    { value: "line", icon: "spline-line" },
+    { value: "cubic", icon: "spline-cubic" }
+  ]
+};
+export {
+  STYLES
+};
+//# sourceMappingURL=styles.mjs.map

package/dist-esm/lib/ui/components/StylePanel/styles.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/styles.tsx"],
+  "sourcesContent": ["export type StyleValuesForUi<T> = readonly {\n\treadonly value: T\n\treadonly icon: string\n}[]\n\nexport const STYLES = {\n\tcolor: [\n\t\t{ value: 'black', icon: 'color' },\n\t\t{ value: 'grey', icon: 'color' },\n\t\t{ value: 'light-violet', icon: 'color' },\n\t\t{ value: 'violet', icon: 'color' },\n\t\t{ value: 'blue', icon: 'color' },\n\t\t{ value: 'light-blue', icon: 'color' },\n\t\t{ value: 'yellow', icon: 'color' },\n\t\t{ value: 'orange', icon: 'color' },\n\t\t{ value: 'green', icon: 'color' },\n\t\t{ value: 'light-green', icon: 'color' },\n\t\t{ value: 'light-red', icon: 'color' },\n\t\t{ value: 'red', icon: 'color' },\n\t],\n\tfill: [\n\t\t{ value: 'none', icon: 'fill-none' },\n\t\t{ value: 'semi', icon: 'fill-semi' },\n\t\t{ value: 'solid', icon: 'fill-solid' },\n\t\t{ value: 'pattern', icon: 'fill-pattern' },\n\t],\n\tdash: [\n\t\t{ value: 'draw', icon: 'dash-draw' },\n\t\t{ value: 'dashed', icon: 'dash-dashed' },\n\t\t{ value: 'dotted', icon: 'dash-dotted' },\n\t\t{ value: 'solid', icon: 'dash-solid' },\n\t],\n\tsize: [\n\t\t{ value: 's', icon: 'size-small' },\n\t\t{ value: 'm', icon: 'size-medium' },\n\t\t{ value: 'l', icon: 'size-large' },\n\t\t{ value: 'xl', icon: 'size-extra-large' },\n\t],\n\tfont: [\n\t\t{ value: 'draw', icon: 'font-draw' },\n\t\t{ value: 'sans', icon: 'font-sans' },\n\t\t{ value: 'serif', icon: 'font-serif' },\n\t\t{ value: 'mono', icon: 'font-mono' },\n\t],\n\thorizontalAlign: [\n\t\t{ value: 'start', icon: 'text-align-left' },\n\t\t{ value: 'middle', icon: 'text-align-center' },\n\t\t{ value: 'end', icon: 'text-align-right' },\n\t],\n\tverticalAlign: [\n\t\t{ value: 'start', icon: 'vertical-align-start' },\n\t\t{ value: 'middle', icon: 'vertical-align-center' },\n\t\t{ value: 'end', icon: 'vertical-align-end' },\n\t],\n\tgeo: [\n\t\t{ value: 'rectangle', icon: 'geo-rectangle' },\n\t\t{ value: 'ellipse', icon: 'geo-ellipse' },\n\t\t{ value: 'cloud', icon: 'geo-cloud' },\n\t\t{ value: 'triangle', icon: 'geo-triangle' },\n\t\t{ value: 'diamond', icon: 'geo-diamond' },\n\t\t{ value: 'pentagon', icon: 'geo-pentagon' },\n\t\t{ value: 'hexagon', icon: 'geo-hexagon' },\n\t\t{ value: 'octagon', icon: 'geo-octagon' },\n\t\t{ value: 'star', icon: 'geo-star' },\n\t\t{ value: 'rhombus', icon: 'geo-rhombus' },\n\t\t{ value: 'rhombus-2', icon: 'geo-rhombus-2' },\n\t\t{ value: 'oval', icon: 'geo-oval' },\n\t\t{ value: 'trapezoid', icon: 'geo-trapezoid' },\n\t\t{ value: 'arrow-right', icon: 'geo-arrow-right' },\n\t\t{ value: 'arrow-left', icon: 'geo-arrow-left' },\n\t\t{ value: 'arrow-up', icon: 'geo-arrow-up' },\n\t\t{ value: 'arrow-down', icon: 'geo-arrow-down' },\n\t\t{ value: 'x-box', icon: 'geo-x-box' },\n\t\t{ value: 'check-box', icon: 'geo-check-box' },\n\t],\n\tarrowheadStart: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tarrowheadEnd: [\n\t\t{ value: 'none', icon: 'arrowhead-none' },\n\t\t{ value: 'arrow', icon: 'arrowhead-arrow' },\n\t\t{ value: 'triangle', icon: 'arrowhead-triangle' },\n\t\t{ value: 'square', icon: 'arrowhead-square' },\n\t\t{ value: 'dot', icon: 'arrowhead-dot' },\n\t\t{ value: 'diamond', icon: 'arrowhead-diamond' },\n\t\t{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },\n\t\t{ value: 'bar', icon: 'arrowhead-bar' },\n\t],\n\tspline: [\n\t\t{ value: 'line', icon: 'spline-line' },\n\t\t{ value: 'cubic', icon: 'spline-cubic' },\n\t],\n} as const satisfies Record<string, StyleValuesForUi<string>>\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/ui/components/Toasts.mjs

@@ -0,0 +1,71 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as T from "@radix-ui/react-toast";
+import * as React from "react";
+import { useToasts } from "../hooks/useToastsProvider.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import { Icon } from "./primitives/Icon.mjs";
+function Toast({ toast }) {
+  const { removeToast } = useToasts();
+  const msg = useTranslation();
+  const onOpenChange = (isOpen) => {
+    if (!isOpen) {
+      removeToast(toast.id);
+    }
+  };
+  const hasActions = toast.actions && toast.actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    T.Root,
+    {
+      onOpenChange,
+      className: "tlui-toast__container",
+      duration: toast.keepOpen ? Infinity : 5e3,
+      children: [
+        toast.icon && /* @__PURE__ */ jsx("div", { className: "tlui-toast__icon", children: /* @__PURE__ */ jsx(Icon, { icon: toast.icon }) }),
+        /* @__PURE__ */ jsxs("div", { className: "tlui-toast__main", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tlui-toast__content", children: [
+            toast.title && /* @__PURE__ */ jsx(T.Title, { className: "tlui-toast__title", children: toast.title }),
+            toast.description && /* @__PURE__ */ jsx(T.Description, { className: "tlui-toast__description", children: toast.description })
+          ] }),
+          toast.actions && /* @__PURE__ */ jsxs("div", { className: "tlui-toast__actions", children: [
+            toast.actions.map((action, i) => /* @__PURE__ */ jsx(T.Action, { altText: action.label, asChild: true, onClick: action.onClick, children: /* @__PURE__ */ jsx(Button, { type: action.type, children: action.label }) }, i)),
+            /* @__PURE__ */ jsx(T.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "normal", className: "tlui-toast__close", style: { marginLeft: "auto" }, children: toast.closeLabel ?? msg("toast.close") }) })
+          ] })
+        ] }),
+        !hasActions && /* @__PURE__ */ jsx(T.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "normal", className: "tlui-toast__close", children: toast.closeLabel ?? msg("toast.close") }) })
+      ]
+    }
+  );
+}
+function _Toasts() {
+  const { toasts } = useToasts();
+  return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsx(Toast, { toast }, toast.id)) });
+}
+const Toasts = React.memo(_Toasts);
+function ToastViewport() {
+  const { toasts } = useToasts();
+  const [hasToasts, setHasToasts] = React.useState(false);
+  React.useEffect(() => {
+    let cancelled = false;
+    if (toasts.length) {
+      setHasToasts(true);
+    } else {
+      setTimeout(() => {
+        if (!cancelled) {
+          setHasToasts(false);
+        }
+      }, 1e3);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [toasts.length, setHasToasts]);
+  if (!hasToasts)
+    return null;
+  return /* @__PURE__ */ jsx(T.ToastViewport, { className: "tlui-toast__viewport" });
+}
+export {
+  ToastViewport,
+  Toasts
+};
+//# sourceMappingURL=Toasts.mjs.map

package/dist-esm/lib/ui/components/Toasts.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Toasts.tsx"],
+  "sourcesContent": ["import * as T from '@radix-ui/react-toast'\nimport * as React from 'react'\nimport { TLUiToast, useToasts } from '../hooks/useToastsProvider'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\n\nfunction Toast({ toast }: { toast: TLUiToast }) {\n\tconst { removeToast } = useToasts()\n\tconst msg = useTranslation()\n\n\tconst onOpenChange = (isOpen: boolean) => {\n\t\tif (!isOpen) {\n\t\t\tremoveToast(toast.id)\n\t\t}\n\t}\n\n\tconst hasActions = toast.actions && toast.actions.length > 0\n\n\treturn (\n\t\t<T.Root\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tclassName=\"tlui-toast__container\"\n\t\t\tduration={toast.keepOpen ? Infinity : 5000}\n\t\t>\n\t\t\t{toast.icon && (\n\t\t\t\t<div className=\"tlui-toast__icon\">\n\t\t\t\t\t<Icon icon={toast.icon as TLUiIconType} />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"tlui-toast__main\">\n\t\t\t\t<div className=\"tlui-toast__content\">\n\t\t\t\t\t{toast.title && <T.Title className=\"tlui-toast__title\">{toast.title}</T.Title>}\n\t\t\t\t\t{toast.description && (\n\t\t\t\t\t\t<T.Description className=\"tlui-toast__description\">{toast.description}</T.Description>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{toast.actions && (\n\t\t\t\t\t<div className=\"tlui-toast__actions\">\n\t\t\t\t\t\t{toast.actions.map((action, i) => (\n\t\t\t\t\t\t\t<T.Action key={i} altText={action.label} asChild onClick={action.onClick}>\n\t\t\t\t\t\t\t\t<Button type={action.type}>{action.label}</Button>\n\t\t\t\t\t\t\t</T.Action>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<T.Close asChild>\n\t\t\t\t\t\t\t<Button type=\"normal\" className=\"tlui-toast__close\" style={{ marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{toast.closeLabel ?? msg('toast.close')}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</T.Close>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!hasActions && (\n\t\t\t\t<T.Close asChild>\n\t\t\t\t\t<Button type=\"normal\" className=\"tlui-toast__close\">\n\t\t\t\t\t\t{toast.closeLabel ?? msg('toast.close')}\n\t\t\t\t\t</Button>\n\t\t\t\t</T.Close>\n\t\t\t)}\n\t\t</T.Root>\n\t)\n}\n\nfunction _Toasts() {\n\tconst { toasts } = useToasts()\n\n\treturn (\n\t\t<>\n\t\t\t{toasts.map((toast) => (\n\t\t\t\t<Toast key={toast.id} toast={toast} />\n\t\t\t))}\n\t\t</>\n\t)\n}\n\nexport const Toasts = React.memo(_Toasts)\n\nexport function ToastViewport() {\n\tconst { toasts } = useToasts()\n\n\tconst [hasToasts, setHasToasts] = React.useState(false)\n\n\tReact.useEffect(() => {\n\t\tlet cancelled = false\n\t\tif (toasts.length) {\n\t\t\tsetHasToasts(true)\n\t\t} else {\n\t\t\tsetTimeout(() => {\n\t\t\t\tif (!cancelled) {\n\t\t\t\t\tsetHasToasts(false)\n\t\t\t\t}\n\t\t\t}, 1000)\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelled = true\n\t\t}\n\t}, [toasts.length, setHasToasts])\n\n\tif (!hasToasts) return null\n\n\treturn <T.ToastViewport className=\"tlui-toast__viewport\" />\n}\n"],
+  "mappings": "AA4BK,SAwCH,UAxCG,KAID,YAJC;AA5BL,YAAY,OAAO;AACnB,YAAY,WAAW;AACvB,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAE/B,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,MAAM,EAAE,MAAM,GAAyB;AAC/C,QAAM,EAAE,YAAY,IAAI,UAAU;AAClC,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,CAAC,WAAoB;AACzC,QAAI,CAAC,QAAQ;AACZ,kBAAY,MAAM,EAAE;AAAA,IACrB;AAAA,EACD;AAEA,QAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,SAAS;AAE3D,SACC;AAAA,IAAC,EAAE;AAAA,IAAF;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM,WAAW,WAAW;AAAA,MAErC;AAAA,cAAM,QACN,oBAAC,SAAI,WAAU,oBACd,8BAAC,QAAK,MAAM,MAAM,MAAsB,GACzC;AAAA,QAED,qBAAC,SAAI,WAAU,oBACd;AAAA,+BAAC,SAAI,WAAU,uBACb;AAAA,kBAAM,SAAS,oBAAC,EAAE,OAAF,EAAQ,WAAU,qBAAqB,gBAAM,OAAM;AAAA,YACnE,MAAM,eACN,oBAAC,EAAE,aAAF,EAAc,WAAU,2BAA2B,gBAAM,aAAY;AAAA,aAExE;AAAA,UACC,MAAM,WACN,qBAAC,SAAI,WAAU,uBACb;AAAA,kBAAM,QAAQ,IAAI,CAAC,QAAQ,MAC3B,oBAAC,EAAE,QAAF,EAAiB,SAAS,OAAO,OAAO,SAAO,MAAC,SAAS,OAAO,SAChE,8BAAC,UAAO,MAAM,OAAO,MAAO,iBAAO,OAAM,KAD3B,CAEf,CACA;AAAA,YACD,oBAAC,EAAE,OAAF,EAAQ,SAAO,MACf,8BAAC,UAAO,MAAK,UAAS,WAAU,qBAAoB,OAAO,EAAE,YAAY,OAAO,GAC9E,gBAAM,cAAc,IAAI,aAAa,GACvC,GACD;AAAA,aACD;AAAA,WAEF;AAAA,QACC,CAAC,cACD,oBAAC,EAAE,OAAF,EAAQ,SAAO,MACf,8BAAC,UAAO,MAAK,UAAS,WAAU,qBAC9B,gBAAM,cAAc,IAAI,aAAa,GACvC,GACD;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,UAAU;AAClB,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,SACC,gCACE,iBAAO,IAAI,CAAC,UACZ,oBAAC,SAAqB,SAAV,MAAM,EAAkB,CACpC,GACF;AAEF;AAEO,MAAM,SAAS,MAAM,KAAK,OAAO;AAEjC,SAAS,gBAAgB;AAC/B,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AAEtD,QAAM,UAAU,MAAM;AACrB,QAAI,YAAY;AAChB,QAAI,OAAO,QAAQ;AAClB,mBAAa,IAAI;AAAA,IAClB,OAAO;AACN,iBAAW,MAAM;AAChB,YAAI,CAAC,WAAW;AACf,uBAAa,KAAK;AAAA,QACnB;AAAA,MACD,GAAG,GAAI;AAAA,IACR;AAEA,WAAO,MAAM;AACZ,kBAAY;AAAA,IACb;AAAA,EACD,GAAG,CAAC,OAAO,QAAQ,YAAY,CAAC;AAEhC,MAAI,CAAC;AAAW,WAAO;AAEvB,SAAO,oBAAC,EAAE,eAAF,EAAgB,WAAU,wBAAuB;AAC1D;",
+  "names": []
+}

package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useEditor, useValue } from "@bigbluebutton/editor";
+import classNames from "classnames";
+import { useBreakpoint } from "../../hooks/useBreakpoint.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+const NOT_LOCKABLE_TOOLS = [
+  "select",
+  "hand",
+  "draw",
+  "eraser",
+  "text",
+  "zoom",
+  "laser",
+  "highlight"
+];
+function ToggleToolLockedButton({ activeToolId }) {
+  const editor = useEditor();
+  const breakpoint = useBreakpoint();
+  const msg = useTranslation();
+  const isToolLocked = useValue("is tool locked", () => editor.getInstanceState().isToolLocked, [
+    editor
+  ]);
+  if (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId))
+    return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "normal",
+      title: msg("action.toggle-tool-lock"),
+      className: classNames("tlui-toolbar__lock-button", {
+        "tlui-toolbar__lock-button__mobile": breakpoint < 5
+      }),
+      icon: isToolLocked ? "lock" : "unlock",
+      onClick: () => editor.updateInstanceState({ isToolLocked: !isToolLocked }),
+      smallIcon: true
+    }
+  );
+}
+export {
+  ToggleToolLockedButton
+};
+//# sourceMappingURL=ToggleToolLockedButton.mjs.map

package/dist-esm/lib/ui/components/Toolbar/ToggleToolLockedButton.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx"],
+  "sourcesContent": ["import { useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\n\ninterface ToggleToolLockedButtonProps {\n\tactiveToolId?: string\n}\n\nconst NOT_LOCKABLE_TOOLS = [\n\t'select',\n\t'hand',\n\t'draw',\n\t'eraser',\n\t'text',\n\t'zoom',\n\t'laser',\n\t'highlight',\n]\n\nexport function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\n\tconst isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [\n\t\teditor,\n\t])\n\n\tif (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId)) return null\n\n\treturn (\n\t\t<Button\n\t\t\ttype=\"normal\"\n\t\t\ttitle={msg('action.toggle-tool-lock')}\n\t\t\tclassName={classNames('tlui-toolbar__lock-button', {\n\t\t\t\t'tlui-toolbar__lock-button__mobile': breakpoint < 5,\n\t\t\t})}\n\t\t\ticon={isToolLocked ? 'lock' : 'unlock'}\n\t\t\tonClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAiCE;AAjCF,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AACvB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AAMvB,MAAM,qBAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,uBAAuB,EAAE,aAAa,GAAgC;AACrF,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,cAAc;AACjC,QAAM,MAAM,eAAe;AAE3B,QAAM,eAAe,SAAS,kBAAkB,MAAM,OAAO,iBAAiB,EAAE,cAAc;AAAA,IAC7F;AAAA,EACD,CAAC;AAED,MAAI,CAAC,gBAAgB,mBAAmB,SAAS,YAAY;AAAG,WAAO;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,IAAI,yBAAyB;AAAA,MACpC,WAAW,WAAW,6BAA6B;AAAA,QAClD,qCAAqC,aAAa;AAAA,MACnD,CAAC;AAAA,MACD,MAAM,eAAe,SAAS;AAAA,MAC9B,SAAS,MAAM,OAAO,oBAAoB,EAAE,cAAc,CAAC,aAAa,CAAC;AAAA,MACzE,WAAS;AAAA;AAAA,EACV;AAEF;",
+  "names": []
+}

package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs

@@ -0,0 +1,217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from "@bigbluebutton/editor";
+import classNames from "classnames";
+import React, { memo } from "react";
+import { useBreakpoint } from "../../hooks/useBreakpoint.mjs";
+import { useReadonly } from "../../hooks/useReadonly.mjs";
+import { useToolbarSchema } from "../../hooks/useToolbarSchema.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { ActionsMenu } from "../ActionsMenu.mjs";
+import { DuplicateButton } from "../DuplicateButton.mjs";
+import { MobileStylePanel } from "../MobileStylePanel.mjs";
+import { RedoButton } from "../RedoButton.mjs";
+import { TrashButton } from "../TrashButton.mjs";
+import { UndoButton } from "../UndoButton.mjs";
+import { Button } from "../primitives/Button.mjs";
+import * as M from "../primitives/DropdownMenu.mjs";
+import { kbdStr } from "../primitives/shared.mjs";
+import { ToggleToolLockedButton } from "./ToggleToolLockedButton.mjs";
+const Toolbar = memo(function Toolbar2() {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const breakpoint = useBreakpoint();
+  const rMostRecentlyActiveDropdownItem = React.useRef(void 0);
+  const isReadonly = useReadonly();
+  const toolbarItems = useToolbarSchema();
+  const laserTool = toolbarItems.find((item) => item.toolItem.id === "laser");
+  const activeToolId = useValue("current tool id", () => editor.getCurrentToolId(), [editor]);
+  const geoState = useValue(
+    "geo",
+    () => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),
+    [editor]
+  );
+  const showEditingTools = !isReadonly;
+  const getTitle = (item) => item.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ""}` : "";
+  const activeTLUiToolbarItem = toolbarItems.find((item) => {
+    return isActiveTLUiToolItem(item.toolItem, activeToolId, geoState);
+  });
+  const { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {
+    const itemsInPanel2 = [];
+    const itemsInDropdown2 = [];
+    let dropdownFirstItem2;
+    const overflowIndex = Math.min(8, 5 + breakpoint);
+    for (let i = 4; i < toolbarItems.length; i++) {
+      const item = toolbarItems[i];
+      if (i < overflowIndex) {
+        itemsInPanel2.push(item);
+      } else {
+        if (item === activeTLUiToolbarItem) {
+          dropdownFirstItem2 = item;
+        }
+        itemsInDropdown2.push(item);
+      }
+    }
+    if (dropdownFirstItem2) {
+    } else {
+      if (!rMostRecentlyActiveDropdownItem.current) {
+        rMostRecentlyActiveDropdownItem.current = itemsInDropdown2[0];
+      }
+      dropdownFirstItem2 = rMostRecentlyActiveDropdownItem.current;
+      if (!itemsInDropdown2.includes(dropdownFirstItem2)) {
+        dropdownFirstItem2 = itemsInDropdown2[0];
+      }
+    }
+    rMostRecentlyActiveDropdownItem.current = dropdownFirstItem2;
+    if (itemsInDropdown2.length <= 2) {
+      itemsInPanel2.push(...itemsInDropdown2);
+      itemsInDropdown2.length = 0;
+    }
+    return { itemsInPanel: itemsInPanel2, itemsInDropdown: itemsInDropdown2, dropdownFirstItem: dropdownFirstItem2 };
+  }, [toolbarItems, activeTLUiToolbarItem, breakpoint]);
+  return /* @__PURE__ */ jsx("div", { className: "tlui-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__left", children: [
+      !isReadonly && /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__extras", children: [
+        breakpoint < 6 && !(activeToolId === "hand" || activeToolId === "zoom") && /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__extras__controls tlui-buttons__horizontal", children: [
+          /* @__PURE__ */ jsx(UndoButton, {}),
+          /* @__PURE__ */ jsx(RedoButton, {}),
+          /* @__PURE__ */ jsx(TrashButton, {}),
+          /* @__PURE__ */ jsx(DuplicateButton, {}),
+          /* @__PURE__ */ jsx(ActionsMenu, {})
+        ] }),
+        /* @__PURE__ */ jsx(ToggleToolLockedButton, { activeToolId })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames("tlui-toolbar__tools", {
+            "tlui-toolbar__tools__mobile": breakpoint < 5
+          }),
+          children: [
+            toolbarItems.slice(0, 2).map(({ toolItem }) => {
+              return /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              );
+            }),
+            isReadonly && laserTool && /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                item: laserTool.toolItem,
+                title: getTitle(laserTool.toolItem),
+                isSelected: isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)
+              },
+              laserTool.toolItem.id
+            ),
+            showEditingTools && /* @__PURE__ */ jsxs(Fragment, { children: [
+              toolbarItems.slice(2, 4).map(({ toolItem }) => /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              )),
+              itemsInPanel.map(({ toolItem }) => /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  item: toolItem,
+                  title: getTitle(toolItem),
+                  isSelected: isActiveTLUiToolItem(toolItem, activeToolId, geoState)
+                },
+                toolItem.id
+              )),
+              itemsInDropdown.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    item: dropdownFirstItem.toolItem,
+                    title: getTitle(dropdownFirstItem.toolItem),
+                    isSelected: isActiveTLUiToolItem(
+                      dropdownFirstItem.toolItem,
+                      activeToolId,
+                      geoState
+                    )
+                  },
+                  dropdownFirstItem.toolItem.id
+                ),
+                /* @__PURE__ */ jsxs(M.Root, { id: "toolbar overflow", modal: false, children: [
+                  /* @__PURE__ */ jsx(M.Trigger, { children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: "tlui-toolbar__overflow",
+                      icon: "chevron-up",
+                      type: "tool",
+                      "data-testid": "tools.more",
+                      title: msg("tool-panel.more")
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(M.Content, { side: "top", align: "center", children: /* @__PURE__ */ jsx(OverflowToolsContent, { toolbarItems: itemsInDropdown }) })
+                ] })
+              ] }) : null
+            ] })
+          ]
+        }
+      )
+    ] }),
+    breakpoint < 5 && !isReadonly && /* @__PURE__ */ jsx("div", { className: "tlui-toolbar__tools", children: /* @__PURE__ */ jsx(MobileStylePanel, {}) })
+  ] }) });
+});
+const OverflowToolsContent = track(function OverflowToolsContent2({
+  toolbarItems
+}) {
+  const msg = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {
+    return /* @__PURE__ */ jsx(
+      M.Item,
+      {
+        type: "icon",
+        className: "tlui-button-grid__button",
+        "data-testid": `tools.more.${id}`,
+        "data-tool": id,
+        "data-geo": meta?.geo ?? "",
+        "aria-label": label,
+        onClick: () => onSelect("toolbar"),
+        title: label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ""}` : "",
+        icon
+      },
+      id
+    );
+  }) });
+});
+function ToolbarButton({
+  item,
+  title,
+  isSelected
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "tool",
+      "data-testid": `tools.${item.id}`,
+      "data-tool": item.id,
+      "data-geo": item.meta?.geo ?? "",
+      "aria-label": item.label,
+      title,
+      icon: item.icon,
+      "data-state": isSelected ? "selected" : void 0,
+      onClick: () => item.onSelect("toolbar"),
+      onTouchStart: (e) => {
+        preventDefault(e);
+        item.onSelect("toolbar");
+      }
+    }
+  );
+}
+const isActiveTLUiToolItem = (item, activeToolId, geoState) => {
+  return item.meta?.geo ? activeToolId === "geo" && geoState === item.meta?.geo : activeToolId === item.id;
+};
+export {
+  Toolbar
+};
+//# sourceMappingURL=Toolbar.mjs.map

package/dist-esm/lib/ui/components/Toolbar/Toolbar.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/Toolbar/Toolbar.tsx"],
+  "sourcesContent": ["import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'\nimport classNames from 'classnames'\nimport React, { memo } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { ActionsMenu } from '../ActionsMenu'\nimport { DuplicateButton } from '../DuplicateButton'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { RedoButton } from '../RedoButton'\nimport { TrashButton } from '../TrashButton'\nimport { UndoButton } from '../UndoButton'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { kbdStr } from '../primitives/shared'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport const Toolbar = memo(function Toolbar() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)\n\n\tconst isReadonly = useReadonly()\n\tconst toolbarItems = useToolbarSchema()\n\tconst laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')\n\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst geoState = useValue(\n\t\t'geo',\n\t\t() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),\n\t\t[editor]\n\t)\n\n\tconst showEditingTools = !isReadonly\n\n\tconst getTitle = (item: TLUiToolItem) =>\n\t\titem.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''\n\n\tconst activeTLUiToolbarItem = toolbarItems.find((item) => {\n\t\treturn isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)\n\t})\n\n\tconst { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {\n\t\tconst itemsInPanel: TLUiToolbarItem[] = []\n\t\tconst itemsInDropdown: TLUiToolbarItem[] = []\n\t\tlet dropdownFirstItem: TLUiToolbarItem | undefined\n\n\t\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\t\tfor (let i = 4; i < toolbarItems.length; i++) {\n\t\t\tconst item = toolbarItems[i]\n\t\t\tif (i < overflowIndex) {\n\t\t\t\t// Items below the overflow index will always be in the panel\n\t\t\t\titemsInPanel.push(item)\n\t\t\t} else {\n\t\t\t\t// Items above will be in the dropdown menu unless the item\n\t\t\t\t// is active (or was the most recently selected active item)\n\t\t\t\tif (item === activeTLUiToolbarItem) {\n\t\t\t\t\t// If the dropdown item is active, make it the dropdownFirstItem\n\t\t\t\t\tdropdownFirstItem = item\n\t\t\t\t}\n\t\t\t\t// Otherwise, add it to the items in dropdown menu\n\t\t\t\titemsInDropdown.push(item)\n\t\t\t}\n\t\t}\n\n\t\tif (dropdownFirstItem) {\n\t\t\t// noop\n\t\t} else {\n\t\t\t// If we don't have a currently active dropdown item, use the most\n\t\t\t// recently active dropdown item as the current dropdown first item.\n\n\t\t\t// If haven't ever had a most recently active dropdown item, then\n\t\t\t// make the first item in the dropdown menu the most recently\n\t\t\t// active dropdown item.\n\t\t\tif (!rMostRecentlyActiveDropdownItem.current) {\n\t\t\t\trMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]\n\t\t\t}\n\n\t\t\tdropdownFirstItem = rMostRecentlyActiveDropdownItem.current\n\n\t\t\t// If the most recently active dropdown item is no longer in the\n\t\t\t// dropdown (because the breakpoint has changed) then make the\n\t\t\t// first item in the dropdown menu the most recently active\n\t\t\t// dropdown item.\n\t\t\tif (!itemsInDropdown.includes(dropdownFirstItem)) {\n\t\t\t\tdropdownFirstItem = itemsInDropdown[0]\n\t\t\t}\n\t\t}\n\n\t\t// We want this ref set to remember which item from the current\n\t\t// set of dropdown items was most recently active\n\t\trMostRecentlyActiveDropdownItem.current = dropdownFirstItem\n\n\t\tif (itemsInDropdown.length <= 2) {\n\t\t\titemsInPanel.push(...itemsInDropdown)\n\t\t\titemsInDropdown.length = 0\n\t\t}\n\n\t\treturn { itemsInPanel, itemsInDropdown, dropdownFirstItem }\n\t}, [toolbarItems, activeTLUiToolbarItem, breakpoint])\n\n\treturn (\n\t\t<div className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonly && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (\n\t\t\t\t\t\t\t\t<div className=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames('tlui-toolbar__tools', {\n\t\t\t\t\t\t\t'tlui-toolbar__tools__mobile': breakpoint < 5,\n\t\t\t\t\t\t})}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Select / Hand */}\n\t\t\t\t\t\t{toolbarItems.slice(0, 2).map(({ toolItem }) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{isReadonly && laserTool && (\n\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\tkey={laserTool.toolItem.id}\n\t\t\t\t\t\t\t\titem={laserTool.toolItem}\n\t\t\t\t\t\t\t\ttitle={getTitle(laserTool.toolItem)}\n\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showEditingTools && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{/* Draw / Eraser */}\n\t\t\t\t\t\t\t\t{toolbarItems.slice(2, 4).map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Everything Else */}\n\t\t\t\t\t\t\t\t{itemsInPanel.map(({ toolItem }) => (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={toolItem.id}\n\t\t\t\t\t\t\t\t\t\titem={toolItem}\n\t\t\t\t\t\t\t\t\t\ttitle={getTitle(toolItem)}\n\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t{/* Overflowing Shapes */}\n\t\t\t\t\t\t\t\t{itemsInDropdown.length ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t{/* Last selected (or first) item from the overflow */}\n\t\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={dropdownFirstItem.toolItem.id}\n\t\t\t\t\t\t\t\t\t\t\titem={dropdownFirstItem.toolItem}\n\t\t\t\t\t\t\t\t\t\t\ttitle={getTitle(dropdownFirstItem.toolItem)}\n\t\t\t\t\t\t\t\t\t\t\tisSelected={isActiveTLUiToolItem(\n\t\t\t\t\t\t\t\t\t\t\t\tdropdownFirstItem.toolItem,\n\t\t\t\t\t\t\t\t\t\t\t\tactiveToolId,\n\t\t\t\t\t\t\t\t\t\t\t\tgeoState\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* The dropdown to select everything else */}\n\t\t\t\t\t\t\t\t\t\t<M.Root id=\"toolbar overflow\" modal={false}>\n\t\t\t\t\t\t\t\t\t\t\t<M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon=\"chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</M.Trigger>\n\t\t\t\t\t\t\t\t\t\t\t<M.Content side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<OverflowToolsContent toolbarItems={itemsInDropdown} />\n\t\t\t\t\t\t\t\t\t\t\t</M.Content>\n\t\t\t\t\t\t\t\t\t\t</M.Root>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < 5 && !isReadonly && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n\nconst OverflowToolsContent = track(function OverflowToolsContent({\n\ttoolbarItems,\n}: {\n\ttoolbarItems: TLUiToolbarItem[]\n}) {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<div className=\"tlui-buttons__grid\">\n\t\t\t{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\t\tdata-tool={id}\n\t\t\t\t\t\tdata-geo={meta?.geo ?? ''}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\t\ttitle={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n\nfunction ToolbarButton({\n\titem,\n\ttitle,\n\tisSelected,\n}: {\n\titem: TLUiToolItem\n\ttitle: string\n\tisSelected: boolean\n}) {\n\treturn (\n\t\t<Button\n\t\t\ttype=\"tool\"\n\t\t\tdata-testid={`tools.${item.id}`}\n\t\t\tdata-tool={item.id}\n\t\t\tdata-geo={item.meta?.geo ?? ''}\n\t\t\taria-label={item.label}\n\t\t\ttitle={title}\n\t\t\ticon={item.icon}\n\t\t\tdata-state={isSelected ? 'selected' : undefined}\n\t\t\tonClick={() => item.onSelect('toolbar')}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\titem.onSelect('toolbar')\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nconst isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
+  "mappings": "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",
+  "names": ["Toolbar", "itemsInPanel", "itemsInDropdown", "dropdownFirstItem", "OverflowToolsContent"]
+}

package/dist-esm/lib/ui/components/TrashButton.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import { useActions } from "../hooks/useActions.mjs";
+import { useReadonly } from "../hooks/useReadonly.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import { kbdStr } from "./primitives/shared.mjs";
+const TrashButton = track(function TrashButton2() {
+  const editor = useEditor();
+  const actions = useActions();
+  const msg = useTranslation();
+  const action = actions["delete"];
+  const isReadonly = useReadonly();
+  if (isReadonly)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: action.icon,
+      type: "icon",
+      onClick: () => action.onSelect("quick-actions"),
+      disabled: !(editor.isIn("select") && editor.getSelectedShapeIds().length > 0),
+      title: `${msg(action.label)} ${kbdStr(action.kbd)}`,
+      smallIcon: true
+    }
+  );
+});
+export {
+  TrashButton
+};
+//# sourceMappingURL=TrashButton.mjs.map

package/dist-esm/lib/ui/components/TrashButton.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/TrashButton.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const TrashButton = track(function TrashButton() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst action = actions['delete']\n\n\tconst isReadonly = useReadonly()\n\n\tif (isReadonly) return null\n\n\treturn (\n\t\t<Button\n\t\t\ticon={action.icon}\n\t\t\ttype=\"icon\"\n\t\t\tonClick={() => action.onSelect('quick-actions')}\n\t\t\tdisabled={!(editor.isIn('select') && editor.getSelectedShapeIds().length > 0)}\n\t\t\ttitle={`${msg(action.label!)} ${kbdStr(action.kbd!)}`}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAkBE;AAlBF,SAAS,OAAO,iBAAiB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,cAAc;AAEhB,MAAM,cAAc,MAAM,SAASA,eAAc;AACvD,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,QAAQ,QAAQ;AAE/B,QAAM,aAAa,YAAY;AAE/B,MAAI;AAAY,WAAO;AAEvB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,SAAS,MAAM,OAAO,SAAS,eAAe;AAAA,MAC9C,UAAU,EAAE,OAAO,KAAK,QAAQ,KAAK,OAAO,oBAAoB,EAAE,SAAS;AAAA,MAC3E,OAAO,GAAG,IAAI,OAAO,KAAM,CAAC,IAAI,OAAO,OAAO,GAAI,CAAC;AAAA,MACnD,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["TrashButton"]
+}

package/dist-esm/lib/ui/components/UndoButton.mjs

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useActions } from "../hooks/useActions.mjs";
+import { useCanUndo } from "../hooks/useCanUndo.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import { kbdStr } from "./primitives/shared.mjs";
+const UndoButton = memo(function UndoButton2() {
+  const msg = useTranslation();
+  const canUndo = useCanUndo();
+  const actions = useActions();
+  const undo = actions["undo"];
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-testid": "main.undo",
+      icon: undo.icon,
+      type: "icon",
+      title: `${msg(undo.label)} ${kbdStr(undo.kbd)}`,
+      disabled: !canUndo,
+      onClick: () => undo.onSelect("quick-actions"),
+      smallIcon: true
+    }
+  );
+});
+export {
+  UndoButton
+};
+//# sourceMappingURL=UndoButton.mjs.map

package/dist-esm/lib/ui/components/UndoButton.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/UndoButton.tsx"],
+  "sourcesContent": ["import { memo } from 'react'\nimport { useActions } from '../hooks/useActions'\nimport { useCanUndo } from '../hooks/useCanUndo'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const UndoButton = memo(function UndoButton() {\n\tconst msg = useTranslation()\n\tconst canUndo = useCanUndo()\n\tconst actions = useActions()\n\n\tconst undo = actions['undo']\n\n\treturn (\n\t\t<Button\n\t\t\tdata-testid=\"main.undo\"\n\t\t\ticon={undo.icon}\n\t\t\ttype=\"icon\"\n\t\t\ttitle={`${msg(undo.label!)} ${kbdStr(undo.kbd!)}`}\n\t\t\tdisabled={!canUndo}\n\t\t\tonClick={() => undo.onSelect('quick-actions')}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAeE;AAfF,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,cAAc;AAEhB,MAAM,aAAa,KAAK,SAASA,cAAa;AACpD,QAAM,MAAM,eAAe;AAC3B,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,WAAW;AAE3B,QAAM,OAAO,QAAQ,MAAM;AAE3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,MAAK;AAAA,MACL,OAAO,GAAG,IAAI,KAAK,KAAM,CAAC,IAAI,OAAO,KAAK,GAAI,CAAC;AAAA,MAC/C,UAAU,CAAC;AAAA,MACX,SAAS,MAAM,KAAK,SAAS,eAAe;AAAA,MAC5C,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["UndoButton"]
+}