@manifest-editor/components 1.0.2

package/dist/index.cjs

@@ -0,0 +1,1457 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  ActionButton: () => ActionButton,
+  AddIcon: () => AddIcon,
+  AddImageIcon: () => AddImageIcon,
+  AtlasBanner: () => AtlasBanner,
+  AudioIcon: () => AudioIcon,
+  CanvasThumbnailGridItem: () => CanvasThumbnailGridItem,
+  Card3D: () => Card3D,
+  ConfirmSelectionButton: () => ConfirmSelectionButton,
+  ControlButton: () => ControlButton,
+  CreateCanvasIcon: () => CreateCanvasIcon,
+  CreatorGrid: () => CreatorGrid,
+  DefaultTooltipContent: () => DefaultTooltipContent,
+  DownloadButton: () => DownloadButton,
+  DownloadIcon: () => DownloadIcon,
+  EmptyCanvasIcon: () => EmptyCanvasIcon,
+  EmptyState: () => EmptyState,
+  Form: () => Form,
+  HTMLIcon: () => HTMLIcon,
+  IIIFBrowserIcon: () => IIIFBrowserIcon,
+  IIIFLogo: () => IIIFLogo,
+  LazyThumbnail: () => LazyThumbnail,
+  ManifestEditorLogo: () => ManifestEditorLogo,
+  ManifestOverviewEmptyState: () => ManifestOverviewEmptyState,
+  MetadataContainer: () => MetadataContainer,
+  Modal: () => Modal,
+  OpaqueControls: () => OpaqueControls,
+  PanelSideMenu: () => PanelSideMenu,
+  Sidebar: () => Sidebar,
+  SidebarContent: () => SidebarContent,
+  SidebarHeader: () => SidebarHeader,
+  SidebarTabs: () => SidebarTabs,
+  SvgControlBar: () => SvgControlBar,
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Tabs: () => Tabs,
+  ThumbnailGridContainer: () => ThumbnailGridContainer,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipTrigger: () => TooltipTrigger,
+  VideoIcon: () => VideoIcon,
+  YouTubeIcon: () => YouTubeIcon,
+  createDownload: () => createDownload,
+  useFastList: () => useFastList,
+  useTooltip: () => useTooltip,
+  useTooltipContext: () => useTooltipContext
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/ActionButton.tsx
+var import_react_aria_components = require("react-aria-components");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var cn = (...inputs) => {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+};
+
+// src/ActionButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ActionButton({
+  className: className2,
+  primary,
+  center,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Button,
+    {
+      className: cn(
+        //
+        "flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
+        primary ? "bg-me-primary-500 text-white hover:bg-me-primary-600" : "",
+        center ? "place-content-center" : "",
+        className2
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/Tooltip.tsx
+var React = __toESM(require("react"), 1);
+var import_react = require("@floating-ui/react");
+var import_react_aria_components2 = require("react-aria-components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen
+} = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const data = (0, import_react.useFloating)({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: import_react.autoUpdate,
+    middleware: [
+      (0, import_react.offset)(5),
+      (0, import_react.flip)({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      (0, import_react.shift)({ padding: 5 })
+    ]
+  });
+  const context = data.context;
+  const hover = (0, import_react.useHover)(context, {
+    move: false,
+    enabled: controlledOpen == null
+  });
+  const focus = (0, import_react.useFocus)(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = (0, import_react.useDismiss)(context);
+  const role = (0, import_react.useRole)(context, { role: "tooltip" });
+  const interactions = (0, import_react.useInteractions)([hover, focus, dismiss, role]);
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data
+    }),
+    [open, setOpen, interactions, data]
+  );
+}
+var TooltipContext = React.createContext(null);
+var useTooltipContext = () => {
+  const context = React.useContext(TooltipContext);
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  }
+  return context;
+};
+function Tooltip({ children, ...options }) {
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipContext.Provider, { value: tooltip, children });
+}
+var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
+  const context = useTooltipContext();
+  const childrenRef = children.ref;
+  const ref = (0, import_react.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed"
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_aria_components2.Button,
+    {
+      ref,
+      "data-state": context.open ? "open" : "closed",
+      ...context.getReferenceProps(props),
+      children
+    }
+  );
+});
+var TooltipContent = React.forwardRef(function TooltipContent2({ style, ...props }, propRef) {
+  const context = useTooltipContext();
+  const ref = (0, import_react.useMergeRefs)([context.refs.setFloating, propRef]);
+  if (!context.open)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref,
+      style: {
+        ...context.floatingStyles,
+        ...style
+      },
+      ...context.getFloatingProps(props)
+    }
+  ) });
+});
+function DefaultTooltipContent(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded-lg opacity-90 z-50", children: props.children });
+}
+
+// src/Sidebar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Sidebar({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
+}
+function SidebarContent({ children, className: className2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("flex-1 min-h-0 overflow-y-auto", className2), children });
+}
+function SidebarHeader(props) {
+  const { actions, title } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "bg-me-gray-100 h-12 flex items-center px-3 z-10 text-black border-b-me-gray-300 border-b", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "ml-auto flex gap-2 items-center", children: actions?.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { placement: "bottom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          className: cn(
+            //
+            `p-1 rounded hover:bg-me-gray-300`,
+            action.toggled && "bg-me-gray-300",
+            action.disabled && "opacity-50 cursor-not-allowed"
+          ),
+          onClick: action.onClick,
+          title: action.title,
+          disabled: action.disabled,
+          children: action.icon
+        },
+        index
+      ) }),
+      !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultTooltipContent, { children: action.title }) : null
+    ] }, index)) })
+  ] });
+}
+
+// src/PanelSideMenu.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/PanelSideMenuItem.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function PanelSideMenuItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      className: cn(
+        "aspect-square w-full flex justify-center items-center hover:bg-me-primary-100 hover:text-black [&>svg]:text-2xl cursor-default",
+        props.selected ? "bg-me-primary-500 hover:bg-me-primary-600 hover:text-white text-white" : "text-me-gray-700"
+      ),
+      onMouseDown: props.onClick,
+      children: [
+        props.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded-lg opacity-90 z-50", children: props.label })
+      ]
+    }
+  ) }) });
+}
+
+// src/PanelSideMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PanelSideMenu(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-white border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    panel.divide ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 block w-2 min-h-1" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PanelSideMenuItem,
+      {
+        label: panel.label,
+        selected: panel.id === props.current && props.open,
+        icon: panel.icon,
+        onClick: panel.onClick
+      },
+      panel.id
+    )
+  ] }, panel.id)) });
+}
+
+// src/ThumbnailGridContainer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ThumbnailGridContainer(props) {
+  if (props.wide) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-md gap-4 p-4 overflow-y-auto", children: props.children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-2 gap-4 p-4", children: props.children });
+}
+
+// src/LazyThumbnail.tsx
+var import_react_lazy_load_image_component = require("react-lazy-load-image-component");
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_react2 = require("react");
+
+// src/Spinner.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 42 42",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 18 18",
+            to: "360 18 18",
+            dur: "1s",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/LazyThumbnail.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function LazyThumbnail() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_lazy_load_image_component.LazyLoadComponent, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LazyThumbnailInner, {}) });
+}
+function LazyThumbnailInner() {
+  const img = (0, import_react2.useRef)(null);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const thumbnail = (0, import_react_iiif_vault.useThumbnail)({ height: 256, width: 256 }, true);
+  (0, import_react2.useEffect)(() => {
+    if (thumbnail?.id) {
+      setIsLoading(true);
+    }
+  }, [thumbnail?.id]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (img.current) {
+      if (img.current.complete || img.current.naturalWidth > 0) {
+        setIsLoading(false);
+      }
+    }
+  }, [thumbnail?.id]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `w-full h-full relative`, children: [
+    thumbnail?.id ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "img",
+      {
+        onLoad: () => setIsLoading(false),
+        ref: img,
+        src: thumbnail?.id,
+        alt: "",
+        className: `w-full h-full object-contain ${!isLoading ? "animate-fadeIn" : "opacity-0"}`
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: "No thumbnail" }),
+    !thumbnail?.id || isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-me-gray-100 text-2xl animate-fadeIn z-10", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, {}) }) : null
+  ] });
+}
+
+// src/CanvasThumbnailGridItem.tsx
+var import_react_iiif_vault3 = require("react-iiif-vault");
+
+// src/CanvasLabel.tsx
+var import_react_iiif_vault2 = require("react-iiif-vault");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CanvasLabel(props) {
+  const canvas = (0, import_react_iiif_vault2.useCanvas)();
+  if (!canvas)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_iiif_vault2.LocaleString, { className: props.className, as: props.as, children: canvas.label });
+}
+
+// src/Card3D.tsx
+var import_react3 = require("react");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Card3D({
+  className: className2,
+  shouldTranslate,
+  children,
+  ...props
+}) {
+  const outer = (0, import_react3.useRef)(null);
+  const inner = (0, import_react3.useRef)(null);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!outer.current || !inner.current)
+      return;
+    let bounds;
+    function rotateToMouse(e) {
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+      const leftX = mouseX - bounds.x;
+      const topY = mouseY - bounds.y;
+      const center = {
+        x: leftX - bounds.width / 2,
+        y: topY - bounds.height / 2
+      };
+      const distance = Math.sqrt(center.x ** 2 + center.y ** 2);
+      if (shouldTranslate) {
+        outer.current.style.transform = `
+        scale3d(1.07, 1.07, 1.07)
+        rotate3d(
+          ${center.y / 100},
+          ${-center.x / 100},
+          0,
+          ${Math.log(distance) * 2}deg
+        )
+      `;
+      }
+      inner.current.style.backgroundImage = `
+        radial-gradient(
+          circle at
+          ${center.x * 2 + bounds.width / 2}px
+          ${center.y * 2 + bounds.height / 2}px,
+          #ffffff66,
+          #ffffff00
+        )
+      `;
+    }
+    function reset() {
+      outer.current.style.transform = "";
+      inner.current.style.backgroundImage = "";
+    }
+    let isActive = false;
+    const mouseenter = () => {
+      bounds = outer.current.getBoundingClientRect();
+      isActive = true;
+    };
+    const mouseleave = () => {
+      isActive = false;
+      reset();
+    };
+    const mousemove = (e) => {
+      if (!isActive)
+        return;
+      rotateToMouse(e);
+    };
+    outer.current.addEventListener("mouseenter", mouseenter);
+    outer.current.addEventListener("mouseleave", mouseleave);
+    outer.current.addEventListener("mousemove", mousemove);
+    return () => {
+      outer.current.removeEventListener("mouseenter", mouseenter);
+      outer.current.removeEventListener("mouseleave", mouseleave);
+      outer.current.removeEventListener("mousemove", mousemove);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref: outer,
+      className: (0, import_tailwind_merge2.twMerge)(
+        //
+        "relative transition-all hover:duration-50",
+        shouldTranslate && "hover:shadow-xl",
+        className2
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 transition-all",
+            style: {
+              backgroundImage: "radial-gradient(circle at 50% -20%, #ffffff00, #ffffff00)"
+            },
+            ref: inner
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/CanvasThumbnailGridItem.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CanvasThumbnailGridItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_iiif_vault3.CanvasContext, { canvas: props.id, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onMouseDown: props.onClick, className: "flex flex-col", "data-canvas-selected": props.selected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-me-gray-100 w-full aspect-square flex-1 overflow-hidden rounded", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      Card3D,
+      {
+        className: cn(
+          "border-2 border-transparent  p-1 w-full h-full rounded",
+          props.selected && "border-me-primary-500"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LazyThumbnail, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CanvasLabel, { className: "text-sm text-center truncate mt-1", as: "div" })
+  ] }) });
+}
+
+// src/Modal.tsx
+var import_react4 = require("@headlessui/react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Modal({ id, title, open = true, onClose, actions, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.Dialog, { open, onClose, id, className: "relative z-[500]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative p-4 w-full max-w-3xl max-h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl dark:bg-gray-700 max-h-[80vh] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg dark:border-gray-600 sticky top-0 bg-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react4.DialogTitle, { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.CloseButton, { className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "svg",
+            {
+              className: "w-3 h-3",
+              "aria-hidden": "true",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 14 14",
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "path",
+                {
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: "Close" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react4.Description, { className: "flex-1 min-h-0 overflow-y-auto", children }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600 justify-end", children: actions }) : null
+    ] }) }) })
+  ] }) });
+}
+
+// src/ControlButton.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ControlButton({
+  children,
+  className: className2,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    {
+      className: cn(
+        "bg-white border border-me-primary-500 text-xs py-1 px-2 rounded text-me-primary-600 hover:bg-me-primary-50",
+        className2
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/OpaqueControls.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function OpaqueControls(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn("flex w-full p-0.5 opacity-0 transition-opacity duration-300 gap-2", props.active && "opacity-1"),
+      children: props.children
+    }
+  );
+}
+
+// src/Tabs.tsx
+var import_react_aria_components3 = require("react-aria-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Tabs({ className: className2, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_aria_components3.Tabs,
+    {
+      className: (state) => {
+        const cs = typeof className2 === "function" ? className2(state) : className2;
+        return cn("", cs);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function TabList({
+  className: className2,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_aria_components3.TabList,
+    {
+      className: (state) => {
+        const cs = typeof className2 === "function" ? className2(state) : className2;
+        return cn("flex gap-4", cs);
+      },
+      ...props,
+      children
+    }
+  );
+}
+function Tab({ className: className2, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_aria_components3.Tab,
+    {
+      className: (state) => {
+        const cs = typeof className2 === "function" ? className2(state) : className2;
+        return cn(
+          "cursor-default outline-none group py-1 font-semibold px-2 border-b-2 text-me-gray-700",
+          state.isSelected && "border-b-me-primary-600 text-black",
+          state.isFocusVisible && "focus-visible:bg-me-primary-100",
+          cs
+        );
+      },
+      ...props,
+      children
+    }
+  );
+}
+function TabPanel({ className: className2, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react_aria_components3.TabPanel,
+    {
+      className: (state) => {
+        const cs = typeof className2 === "function" ? className2(state) : className2;
+        return cn("", cs);
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/CreatorGrid.tsx
+var import_react_aria_components4 = require("react-aria-components");
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function CreatorGrid(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_aria_components4.ListBox,
+    {
+      orientation: "horizontal",
+      "aria-label": props.label,
+      selectionMode: "single",
+      items: props.items,
+      className: "grid grid-sm gap-4 p-4",
+      children: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreatorGridItem, { ...item })
+    }
+  );
+}
+function CreatorGridItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_aria_components4.ListBoxItem,
+    {
+      id: props.id,
+      onAction: props.onClick,
+      className: ($s) => (0, import_tailwind_merge3.twMerge)(
+        "bg-white p-2 rounded-md border hover:border-me-primary-500",
+        $s.isFocused && "border-me-primary-500 outline-me-primary-500 outline-2"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded bg-me-gray-300 mb-2 flex items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center [&>svg]:w-16 [&>svg]:h-16", children: props.icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center font-semibold text-sm", children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm text-center text-black/50", children: props.description })
+      ]
+    }
+  );
+}
+
+// src/icons/DownloadIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DownloadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  "path",
+  {
+    d: "M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/DownloadButton.tsx
+var import_react_aria = require("react-aria");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DownloadButton({ label, id: _id, getData, fileName, fileType }) {
+  const id = (0, import_react_aria.useId)(_id);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { placement: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    TooltipTrigger,
+    {
+      className: "bg-me-gray-100 hover:bg-me-primary-500 hover:text-white p-1 rounded-md text-me-primary-500 text-2xl",
+      "aria-label": label,
+      id,
+      onPress: () => createDownload(getData(), fileName, fileType),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DownloadIcon, { "aria-labelledby": _id }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DefaultTooltipContent, { children: label })
+      ]
+    }
+  ) });
+}
+function createDownload(data, fileName, fileType = "text/json") {
+  const blob = data instanceof Blob ? data : new Blob([data], { type: fileType });
+  const a = document.createElement("a");
+  a.download = fileName;
+  a.href = window.URL.createObjectURL(blob);
+  const clickEvt = new MouseEvent("click", {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  a.dispatchEvent(clickEvt);
+  a.remove();
+}
+
+// src/AtlasBanner.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function AtlasBanner({ children, controlsId }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "bg-me-gray-100 border-b text-black p-1 flex gap-4 items-center h-12", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "px-4", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: controlsId || "atlas-controls", className: "flex gap-2" })
+  ] });
+}
+
+// src/SvgControlBar.tsx
+var import_react_iiif_vault4 = require("react-iiif-vault");
+
+// src/icons/DrawIcon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M160-120v-170l527-526q12-12 27-18t30-6q16 0 30.5 6t25.5 18l56 56q12 11 18 25.5t6 30.5q0 15-6 30t-18 27L330-120H160Zm80-80h56l393-392-28-29-29-28-392 393v56Zm560-503-57-57 57 57Zm-139 82-29-28 57 57-28-29ZM560-120q74 0 137-37t63-103q0-36-19-62t-51-45l-59 59q23 10 36 22t13 26q0 23-36.5 41.5T560-200q-17 0-28.5 11.5T520-160q0 17 11.5 28.5T560-120ZM183-426l60-60q-20-8-31.5-16.5T200-520q0-12 18-24t76-37q88-38 117-69t29-70q0-55-44-87.5T280-840q-45 0-80.5 16T145-785q-11 13-9 29t15 26q13 11 29 9t27-13q14-14 31-20t42-6q41 0 60.5 12t19.5 28q0 14-17.5 25.5T262-654q-80 35-111 63.5T120-520q0 32 17 54.5t46 39.5Z"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/PolygonIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M600-80v-100L320-320H120v-240h172l108-124v-196h240v240H468L360-516v126l240 120v-50h240v240H600ZM480-720h80v-80h-80v80ZM200-400h80v-80h-80v80Zm480 240h80v-80h-80v80ZM520-760ZM240-440Zm480 240Z"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/LineIcon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function LineIcon({ title, titleId, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: 4.5, cy: 4.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: 15.5, cy: 15.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m13.5 13.5-9-9" })
+    ] })
+  ] });
+}
+
+// src/icons/LineBoxIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function LineBoxIcon({ title, titleId, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M0 0h20v20H0z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m8.5 11.5 6-6M16 4v3m0-3h-3m0 14L2 7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { stroke: "currentColor", strokeOpacity: 0.407, strokeWidth: 2, d: "m2 7 5-5 11 11-5 5z" })
+    ] })
+  ] });
+}
+
+// src/icons/ShapesIcon.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M600-360ZM320-242q10 1 19.5 1.5t20.5.5q11 0 20.5-.5T400-242v82h400v-400h-82q1-10 1.5-19.5t.5-20.5q0-11-.5-20.5T718-640h82q33 0 56.5 23.5T880-560v400q0 33-23.5 56.5T800-80H400q-33 0-56.5-23.5T320-160v-82Zm40-78q-117 0-198.5-81.5T80-600q0-117 81.5-198.5T360-880q117 0 198.5 81.5T640-600q0 117-81.5 198.5T360-320Zm0-80q83 0 141.5-58.5T560-600q0-83-58.5-141.5T360-800q-83 0-141.5 58.5T160-600q0 83 58.5 141.5T360-400Zm0-200Z"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/SquareIcon.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0 0v-560 560Z"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/TriangleIcon.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TriangleIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "m80-160 400-640 400 640H80Zm144-80h512L480-650 224-240Zm256-205Z", fill: "currentColor" })
+    ]
+  }
+);
+
+// src/icons/HexagonIcon.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M272-120 64-480l208-360h416l208 360-208 360H272Zm46-80h324l161-280-161-280H318L156-480l162 280Zm162-280Z"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/DeleteForeverIcon.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function DeleteForeverIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "path",
+      {
+        d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+
+// src/SvgControlBar.tsx
+var import_react5 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var className = 'bg-me-gray-100 border hover:bg-me-gray-300 rounded p-1 text-2xl text-me-primary-500 data-[active="true"]:border-me-primary-600';
+var icons = {
+  DrawIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawIcon, {}),
+  PolygonIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PolygonIcon, {}),
+  LineIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LineIcon, {}),
+  LineBoxIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LineBoxIcon, {}),
+  ShapesIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ShapesIcon, {}),
+  SquareIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SquareIcon, {}),
+  TriangleIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TriangleIcon, {}),
+  HexagonIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(HexagonIcon, {}),
+  DeleteForeverIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DeleteForeverIcon, {})
+};
+function SvgControlBar({
+  helper,
+  state,
+  showShapes
+}) {
+  (0, import_react5.useEffect)(() => {
+    helper.stamps.square();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_react_iiif_vault4.RenderSvgEditorControls,
+    {
+      icons,
+      helper,
+      state,
+      showShapes,
+      classNames: {
+        button: className
+      }
+    }
+  );
+}
+
+// src/ConfirmSelectionButton.tsx
+var import_react_aria_components5 = require("react-aria-components");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ConfirmSelectionButton({ onPress, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria_components5.Button, { className: "bg-me-primary-500 px-3 py-1 hover:bg-me-primary-600 text-white rounded", onPress, children });
+}
+
+// src/ManifestOverviewEmptyState.tsx
+var import_react_aria_components6 = require("react-aria-components");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ManifestOverviewEmptyState({ onCreate, canCreate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center flex-col gap-5 py-16", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      Card3D,
+      {
+        shouldTranslate: true,
+        onClick: canCreate ? onCreate : void 0,
+        className: "border-2 border-dotted bg-black/5 aspect-[3/4] rounded w-32 border-black"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "font-bold text-lg", children: "Good to go!" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "max-w-xl px-5", children: "Add a title and top level information for this manifest using the editing panel, and then add some canvases and content." }),
+    canCreate ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_react_aria_components6.Button,
+      {
+        className: "px-8 font-bold py-2 border rounded-lg border-me-primary-500 text-me-primary-500 hover:border-me-primary-600 hover:text-me-primary-600",
+        onPress: onCreate,
+        children: "Start adding content"
+      }
+    ) : null
+  ] });
+}
+
+// src/SidebarTabs.tsx
+var import_react6 = require("react");
+var import_react_aria_components7 = require("react-aria-components");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function SidebarTabs({ menu, menuId, selectedKey, onSelectionChange }) {
+  const ref = (0, import_react6.useRef)(null);
+  const [hidden, setHidden] = (0, import_react6.useState)(0);
+  const widths = (0, import_react6.useRef)([]);
+  const itemsRef = (0, import_react6.useRef)([]);
+  const selectedIndex = (0, import_react6.useMemo)(() => menu.findIndex((item) => item.id === selectedKey), [menu, selectedKey]);
+  (0, import_react6.useLayoutEffect)(() => {
+    const cb = () => {
+      if (widths.current.length === 0) {
+        widths.current = [];
+        for (const item of itemsRef.current) {
+          if (item) {
+            widths.current.push(item.getBoundingClientRect().width);
+          }
+        }
+      }
+      const fullWidth = widths.current.reduce((a, b) => a + b, 0);
+      if (fullWidth && ref.current) {
+        const el = ref.current;
+        const width = el.getBoundingClientRect().width - 20;
+        let hidden2 = 0;
+        let total = 0;
+        for (let i = widths.current.length - 1; i >= 0; i--) {
+          total += widths.current[i];
+          if (total > width) {
+            hidden2 = i + 1;
+            break;
+          }
+        }
+        setHidden(hidden2);
+      }
+    };
+    cb();
+    const interval = setInterval(cb, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_react_aria_components7.Tabs,
+    {
+      className: "w-full flex-1 overflow-hidden flex flex-col",
+      selectedKey,
+      onSelectionChange,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center w-full tab-shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.TabList, { ref, className: "flex-1 overflow-hidden w-full flex text-sm whitespace-nowrap", children: menu.map((item, idx) => {
+            const isHidden = hidden >= menu.length - idx;
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              import_react_aria_components7.Tab,
+              {
+                ref: (el) => itemsRef.current[idx] = el,
+                id: item.id,
+                className: (state) => cn(
+                  //
+                  "border-b-2 px-2 py-1 text-sm text-gray-400 select-none hover:text-black focus:ring-0 focus:outline-none",
+                  state.isSelected && "border-me-primary-500 text-black",
+                  state.isFocusVisible && "ring-0 bg-me-gray-100",
+                  isHidden && "hidden"
+                ),
+                children: item.label
+              },
+              item.id
+            );
+          }) }),
+          hidden > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_aria_components7.MenuTrigger, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              import_react_aria_components7.Button,
+              {
+                className: cn(
+                  "rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
+                  selectedIndex > hidden && "bg-me-primary-500 text-white rounded"
+                ),
+                children: "MORE"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.Menu, { className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28", children: menu.map((item, idx) => {
+              if (idx < menu.length - hidden)
+                return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                import_react_aria_components7.MenuItem,
+                {
+                  className: (state) => cn(
+                    "hover:bg-me-gray-100 p-1 rounded-sm text-sm",
+                    selectedKey === item.id && "ring ring-me-primary-500"
+                  ),
+                  onAction: () => onSelectionChange?.(item.id),
+                  children: item.label
+                },
+                item.id
+              );
+            }) }) })
+          ] })
+        ] }),
+        menu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components7.TabPanel, { id: item.id, className: "flex-1 overflow-y-auto h-full", children: item.renderComponent }, item.id))
+      ]
+    },
+    menuId
+  );
+}
+
+// src/MetadataContainer.tsx
+var import_react_iiif_vault5 = require("react-iiif-vault");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function MetadataContainer({
+  className: className2,
+  label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      className: cn(
+        "hover:ring ring-gray-200 focus-within:ring-me-primary-500 focus-within:ring p-2 rounded mb-2",
+        className2
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_iiif_vault5.LocaleString, { className: "text-lg font-bold text-[#333] mb-2", as: "h3", children: label }),
+        children
+      ]
+    }
+  );
+}
+
+// src/EmptyState.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function EmptyState(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center text-gray-400 text-md",
+        props.$noMargin ? "" : "m-4",
+        props.$box ? "p-4 border border-gray-200 rounded" : ""
+      ),
+      children: props.children
+    }
+  );
+}
+
+// src/ManifestEditorLogo.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function ManifestEditorLogo(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 206 27",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "me-logo h-[23px] w-[176px]",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("g", { fill: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "path",
+          {
+            d: "M62.558 5.41v14.873h-2.983v-9.675l-3.985 9.675h-2.26l-4.006-9.675v9.675H46.34V5.41h3.388l4.73 11.06L59.19 5.41zm2.173 8.928c0-1.194.238-2.252.714-3.176.476-.923 1.123-1.633 1.94-2.13.816-.498 1.73-.746 2.738-.746.88 0 1.651.177 2.312.532.66.355 1.19.803 1.588 1.343V8.477h3.004v11.806h-3.004v-1.726c-.384.554-.913 1.012-1.588 1.374-.675.363-1.453.544-2.334.544-.994 0-1.9-.256-2.717-.767-.816-.512-1.463-1.233-1.939-2.163-.476-.93-.714-2-.714-3.207Zm9.292.042c0-.724-.143-1.346-.427-1.864a3.005 3.005 0 0 0-1.15-1.194 3.076 3.076 0 0 0-1.556-.415c-.554 0-1.066.135-1.534.405-.47.27-.85.664-1.14 1.182-.292.519-.437 1.133-.437 1.844 0 .71.145 1.331.437 1.864.29.533.674.941 1.15 1.226.476.284.984.426 1.524.426.554 0 1.073-.139 1.556-.416a3.005 3.005 0 0 0 1.15-1.193c.284-.519.427-1.14.427-1.865Zm12.466-6.073c1.406 0 2.543.444 3.41 1.332.866.888 1.3 2.127 1.3 3.718v6.926h-2.984v-6.52c0-.938-.234-1.66-.703-2.164-.47-.504-1.108-.756-1.918-.756-.824 0-1.474.252-1.95.756-.476.505-.714 1.226-.714 2.163v6.521h-2.983V8.477h2.983v1.47a4.121 4.121 0 0 1 1.524-1.203 4.713 4.713 0 0 1 2.035-.437Zm9.057-1.237c-.526 0-.963-.166-1.311-.5a1.657 1.657 0 0 1-.522-1.247c0-.497.174-.912.522-1.246.348-.334.785-.5 1.31-.5.526 0 .963.166 1.311.5.348.334.522.75.522 1.246 0 .498-.174.913-.522 1.247-.348.334-.785.5-1.31.5Zm1.47 1.407v11.806h-2.983V8.477h2.983Zm8.354 2.451h-2.068v9.355h-3.026v-9.355h-1.342v-2.45h1.342V7.88c0-1.45.412-2.515 1.236-3.197.824-.682 2.067-1.001 3.73-.959V6.24c-.725-.014-1.23.106-1.513.362-.284.256-.427.718-.427 1.385v.49h2.068v2.451Zm12.913 3.197c0 .426-.028.81-.085 1.15h-8.63c.07.853.369 1.52.895 2.003.525.483 1.172.725 1.939.725 1.108 0 1.896-.476 2.365-1.428h3.218c-.34 1.137-.994 2.07-1.96 2.802-.967.732-2.153 1.098-3.56 1.098-1.136 0-2.155-.252-3.057-.757a5.325 5.325 0 0 1-2.11-2.141c-.504-.924-.756-1.99-.756-3.197 0-1.222.248-2.294.745-3.218a5.204 5.204 0 0 1 2.089-2.13c.895-.498 1.925-.746 3.09-.746 1.122 0 2.127.241 3.015.724a5.1 5.1 0 0 1 2.067 2.057c.49.887.735 1.907.735 3.058Zm-3.09-.853c-.014-.767-.29-1.381-.83-1.843-.54-.462-1.201-.693-1.982-.693-.74 0-1.36.224-1.865.671-.504.448-.813 1.07-.927 1.865h5.604Zm9.782 7.203c-.966 0-1.833-.174-2.6-.522-.767-.348-1.375-.82-1.822-1.417a3.591 3.591 0 0 1-.735-1.982h3.004c.057.454.281.83.672 1.13.39.298.877.447 1.46.447.568 0 1.012-.114 1.331-.341.32-.227.48-.519.48-.874 0-.383-.196-.671-.586-.863-.391-.192-1.012-.401-1.865-.629-.88-.213-1.602-.433-2.163-.66a3.755 3.755 0 0 1-1.449-1.044c-.405-.47-.607-1.101-.607-1.897 0-.653.188-1.25.564-1.79.377-.54.917-.966 1.62-1.279.703-.312 1.53-.468 2.483-.468 1.406 0 2.528.351 3.367 1.054.838.704 1.3 1.652 1.385 2.845h-2.856c-.042-.469-.238-.841-.586-1.118-.348-.277-.813-.416-1.396-.416-.54 0-.955.1-1.246.298a.951.951 0 0 0-.437.831c0 .398.199.7.597.906.397.206 1.015.416 1.854.629.852.213 1.555.433 2.11.66a3.727 3.727 0 0 1 1.438 1.055c.405.476.614 1.105.628 1.886 0 .682-.188 1.293-.564 1.833-.377.54-.917.962-1.62 1.268-.703.305-1.524.458-2.461.458Zm10.569-9.547v5.711c0 .398.096.686.288.863.192.178.515.267.97.267h1.385v2.514h-1.875c-2.515 0-3.772-1.222-3.772-3.665v-5.69h-1.407v-2.45h1.407v-2.92h3.004v2.92h2.643v2.45h-2.643Zm12.851-3.111v3.73h5.007v2.364h-5.007v3.943h5.647v2.43h-8.631V5.386h8.63v2.43zm7.585 6.521c0-1.194.239-2.252.715-3.176.476-.923 1.126-1.633 1.95-2.13.824-.498 1.74-.746 2.749-.746.767 0 1.498.167 2.194.5.697.334 1.25.778 1.663 1.332V4.514h3.026v15.77h-3.026v-1.748c-.37.582-.888 1.051-1.556 1.406s-1.442.533-2.323.533a5.07 5.07 0 0 1-2.727-.767c-.824-.512-1.474-1.233-1.95-2.163-.476-.93-.714-2-.714-3.207Zm9.292.042c0-.724-.142-1.346-.426-1.864a3.005 3.005 0 0 0-1.151-1.194 3.076 3.076 0 0 0-1.556-.415 3.02 3.02 0 0 0-1.534.405c-.469.27-.849.664-1.14 1.182-.291.519-.437 1.133-.437 1.844 0 .71.146 1.331.437 1.864.291.533.675.941 1.15 1.226a2.93 2.93 0 0 0 1.524.426c.554 0 1.073-.139 1.556-.416a3.005 3.005 0 0 0 1.15-1.193c.285-.519.427-1.14.427-1.865Zm7.438-7.31c-.527 0-.963-.166-1.311-.5a1.657 1.657 0 0 1-.523-1.247c0-.497.174-.912.523-1.246.348-.334.784-.5 1.31-.5s.963.166 1.31.5c.349.334.523.75.523 1.246 0 .498-.174.913-.522 1.247-.348.334-.785.5-1.31.5Zm1.47 1.407v11.806h-2.984V8.477h2.984Zm6.414 2.451v5.711c0 .398.096.686.287.863.192.178.515.267.97.267h1.385v2.514h-1.875c-2.515 0-3.772-1.222-3.772-3.665v-5.69h-1.406v-2.45h1.406v-2.92h3.005v2.92h2.642v2.45h-2.642Zm10.036 9.547c-1.136 0-2.159-.252-3.068-.757a5.447 5.447 0 0 1-2.141-2.141c-.519-.924-.778-1.99-.778-3.197s.266-2.273.799-3.196a5.553 5.553 0 0 1 2.184-2.142c.924-.504 1.954-.756 3.09-.756 1.137 0 2.167.252 3.09.756a5.553 5.553 0 0 1 2.184 2.142c.533.923.8 1.989.8 3.196 0 1.208-.274 2.273-.821 3.197a5.681 5.681 0 0 1-2.216 2.141c-.93.505-1.971.757-3.122.757Zm0-2.6a3.1 3.1 0 0 0 1.524-.394c.476-.263.856-.657 1.14-1.183.285-.526.427-1.165.427-1.918 0-1.122-.295-1.985-.885-2.589a2.907 2.907 0 0 0-2.163-.906c-.852 0-1.566.302-2.141.906-.576.604-.863 1.467-.863 2.59 0 1.122.28 1.985.841 2.588.562.604 1.268.906 2.12.906Zm11.338-7.565a4.194 4.194 0 0 1 1.502-1.47c.618-.356 1.325-.533 2.12-.533v3.132h-.788c-.938 0-1.644.22-2.12.661-.476.44-.714 1.208-.714 2.302v5.881h-2.984V8.477h2.984v1.833Z",
+            fill: "#000"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { fill: "#E94581", className: "me-logo-1", d: "M0 13.343 13.343 0l13.343 13.343-13.343 13.343z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { fill: "#E94581", className: "me-logo-2", d: "M12.137 13.346 25.48.003l13.343 13.343L25.48 26.69z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { fill: "#C63E75", className: "me-logo-3", d: "m12.104 13.348 7.311-7.311 7.312 7.311-7.312 7.312z" })
+      ] })
+    }
+  );
+}
+
+// src/Forms.tsx
+var import_react_aria_components8 = require("react-aria-components");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function MeLabel({ className: className2, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components8.Label,
+    {
+      className: cn(
+        //
+        "font-semibold text-sm",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+function MeRadioGroup({ className: className2, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components8.RadioGroup,
+    {
+      className: cn(
+        //
+        "",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+function MeRadio({ className: className2, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components8.Radio,
+    {
+      className: (state) => cn(
+        //
+        "outline outline-me-primary-500 outline-offset-2 w-5 h-5 rounded-full bg-white transition-all border-[7px] border-gray-700 group-pressed:border-gray-800 outline-0",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+function MeForm({ className: className2, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components8.Form,
+    {
+      className: cn(
+        //
+        "",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+function MeInput({ className: className2, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components8.Input,
+    {
+      className: cn(
+        //
+        "p-2 bg-me-gray-100 border-b border-b-me-gray-500",
+        "focus:ring-0 outline-0 focus:border-me-primary-500 focus:bg-[#ECEEF5]",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+function MeInputContainer({
+  horizontal,
+  className: className2,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: cn(
+        //
+        "flex flex-col gap-2",
+        horizontal && "flex-row",
+        className2
+      ),
+      ...props
+    }
+  );
+}
+var Form = {
+  Input: MeInput,
+  Form: MeForm,
+  Label: MeLabel,
+  InputContainer: MeInputContainer,
+  RadioGroup: MeRadioGroup,
+  Radio: MeRadio
+};
+
+// src/icons/CreateCanvasIcon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function CreateCanvasIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "path",
+      {
+        d: "M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+
+// src/icons/AddImageIcon.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var AddImageIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  "path",
+  {
+    d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm480-480v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM240-280h480L570-480 450-320l-90-120-120 160Zm-40-480v560-560Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/IIIFLogo.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: "1em",
+    height: "1em",
+    ...props,
+    viewBox: "0 0 493.36 441.333",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "path",
+        {
+          d: "m65.242 2178.75 710-263.75-1.25-1900-708.75 261.25v1902.5m738.903 461.34c81.441-240.91-26.473-436.2-241.04-436.2-214.558 0-454.511 195.29-535.953 436.2-81.433 240.89 26.48 436.18 241.039 436.18 214.567 0 454.512-195.29 535.954-436.18",
+          style: {
+            fill: mono ? "currentColor" : "#2873ab",
+            fillOpacity: 1,
+            fillRule: "nonzero",
+            stroke: "none"
+          },
+          transform: "matrix(.13333 0 0 -.13333 0 441.333)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "path",
+        {
+          d: "M1678.58 2178.75 968.578 1915l1.25-1900 708.752 261.25v1902.5m-743.498 461.34c-81.437-240.91 26.477-436.2 241.038-436.2 214.56 0 454.51 195.29 535.96 436.2 81.43 240.89-26.48 436.18-241.04 436.18-214.57 0-454.52-195.29-535.958-436.18",
+          style: {
+            fill: mono ? "currentColor" : "#ed1d33",
+            fillOpacity: 1,
+            fillRule: "nonzero",
+            stroke: "none"
+          },
+          transform: "matrix(.13333 0 0 -.13333 0 441.333)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "path",
+        {
+          d: "m1860.24 2178.75 710-263.75-1.25-1900-708.75 261.25v1902.5m743.5 461.34c81.45-240.91-26.47-436.2-241.03-436.2-214.58 0-454.52 195.29-535.96 436.2-81.44 240.89 26.48 436.18 241.03 436.18 214.57 0 454.51-195.29 535.96-436.18",
+          style: {
+            fill: mono ? "currentColor" : "#2873ab",
+            fillOpacity: 1,
+            fillRule: "nonzero",
+            stroke: "none"
+          },
+          transform: "matrix(.13333 0 0 -.13333 0 441.333)"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "path",
+        {
+          d: "M3700.24 3310v-652.5s-230 90-257.5-142.5c-2.5-247.5 0-336.25 0-336.25l257.5 83.75V1690l-258.61-92.5v-1335L2735.24 0v2360s-15 850 965 950",
+          style: {
+            fill: mono ? "currentColor" : "#ed1d33",
+            fillOpacity: 1,
+            fillRule: "nonzero",
+            stroke: "none"
+          },
+          transform: "matrix(.13333 0 0 -.13333 0 441.333)"
+        }
+      )
+    ]
+  }
+);
+
+// src/icons/HTMLIcon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var HTMLIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  "path",
+  {
+    d: "M0-360v-240h60v80h80v-80h60v240h-60v-100H60v100H0Zm310 0v-180h-70v-60h200v60h-70v180h-60Zm170 0v-200q0-17 11.5-28.5T520-600h180q17 0 28.5 11.5T740-560v200h-60v-180h-40v140h-60v-140h-40v180h-60Zm320 0v-240h60v180h100v60H800Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/IIIFBrowserIcon.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var IIIFBrowserIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  "path",
+  {
+    d: "M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v80H200v560h560v-214l80 80v134q0 33-23.5 56.5T760-120H200Zm40-160 120-160 90 120 120-160 150 200H240Zm622-144L738-548q-21 14-45 21t-51 7q-74 0-126-52.5T464-700q0-75 52.5-127.5T644-880q75 0 127.5 52.5T824-700q0 27-8 52t-20 46l122 122-56 56ZM644-600q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/YouTubeIcon.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var YouTubeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  "path",
+  {
+    d: "M616-242q-27 1-51.5 1.5t-43.5.5h-41q-71 0-133-2-53-2-104.5-5.5T168-257q-26-7-45-26t-26-45q-6-23-9.5-56T82-447q-2-36-2-73t2-73q2-30 5.5-63t9.5-56q7-26 26-45t45-26q23-6 74.5-9.5T347-798q62-2 133-2t133 2q53 2 104.5 5.5T792-783q26 7 45 26t26 45q6 23 9.5 56t5.5 63q2 36 2 73v17q-19-8-39-12.5t-41-4.5q-83 0-141.5 58.5T600-320q0 21 4 40.5t12 37.5ZM400-400l208-120-208-120v240Zm360 200v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/VideoIcon.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var VideoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  "path",
+  {
+    d: "M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/AudioIcon.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var AudioIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  "path",
+  {
+    d: "M480-400q-50 0-85-35t-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35Zm0-240Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm40-360q17 0 28.5-11.5T520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/EmptyCanvasIcon.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var EmptyCanvasIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  "path",
+  {
+    d: "M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z",
+    fill: "currentColor"
+  }
+) });
+
+// src/icons/AddIcon.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function AddIcon({
+  className: className2,
+  inline,
+  height = 16,
+  color = "black"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: `${height}px`,
+      viewBox: "0 0 24 24",
+      width: "24px",
+      fill: color,
+      style: { verticalAlign: inline ? "bottom" : void 0 },
+      className: className2,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+
+// src/hooks.ts
+var import_react7 = require("react");
+function useFastList(list, firstRender = 24) {
+  const [isMounted, setIsMounted] = (0, import_react7.useState)(false);
+  (0, import_react7.useLayoutEffect)(() => {
+    if (list) {
+      setTimeout(() => {
+        setIsMounted(true);
+      }, 0);
+    }
+  }, [list]);
+  if (!list) {
+    return [];
+  }
+  if (isMounted) {
+    return list;
+  }
+  return list.slice(0, firstRender);
+}