npm - @manifest-editor/components - Versions diffs - 1.3.1 → 1.4.1 - Mend

@manifest-editor/components 1.3.1 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -5,32 +5,27 @@ import "iiif-browser/dist/index.css";
 // src/ActionButton.tsx
 import { Button } from "react-aria-components";
-// src/utils.ts
-import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-var cn = (...inputs) => {
-  return twMerge(clsx(inputs));
-};
-// src/ActionButton.tsx
 import { jsx } from "react/jsx-runtime";
 function ActionButton({
   className: className2,
   primary,
   center,
+  large,
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     Button,
     {
-      className: cn(
+      className: (t) => twMerge(
         //
-        "border-none flex gap-1 items-center px-2 py-1 bg-gray-100 text-me-primary-500 text-sm rounded hover:bg-gray-200",
+        "border-none flex gap-1 items-center 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
+        large ? "px-4 py-2" : "px-2 py-1",
+        t.isDisabled ? "opacity-70 cursor-not-allowed pointer-events-none" : "",
+        typeof className2 === "string" ? className2 : className2?.(t)
       ),
       ...props,
       children
@@ -38,25 +33,39 @@ function ActionButton({
   );
 }
+// src/AccessibilityButton.tsx
+import { Button as Button2 } from "react-aria-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AccessibilityButton({ className: className2, children, ...props }) {
+  return /* @__PURE__ */ jsx2(Button2, { className: ["sr-only focus:not-sr-only p-2 bg-white text-black", className2].join(" "), ...props, children });
+}
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge as twMerge2 } from "tailwind-merge";
+var cn = (...inputs) => {
+  return twMerge2(clsx(inputs));
+};
 // src/Tooltip.tsx
-import * as React from "react";
 import {
-  useFloating,
+  FloatingPortal,
   autoUpdate,
-  offset,
   flip,
+  offset,
   shift,
-  useHover,
-  useFocus,
   useDismiss,
-  useRole,
+  useFloating,
+  useFocus,
+  useHover,
   useInteractions,
   useMergeRefs,
-  FloatingPortal
+  useRole
 } from "@floating-ui/react";
-import { Button as Button2 } from "react-aria-components";
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import * as React from "react";
+import { Button as Button3 } from "react-aria-components";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function useTooltip({
   initialOpen = false,
   placement = "top",
@@ -110,12 +119,9 @@ var useTooltipContext = () => {
   }
   return context;
 };
-function Tooltip({
-  children,
-  ...options
-}) {
+function Tooltip({ children, ...options }) {
   const tooltip = useTooltip(options);
-  return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: tooltip, children });
+  return /* @__PURE__ */ jsx3(TooltipContext.Provider, { value: tooltip, children });
 }
 var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
   const context = useTooltipContext();
@@ -132,8 +138,8 @@ var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChi
       })
     );
   }
-  return /* @__PURE__ */ jsx2(
-    Button2,
+  return /* @__PURE__ */ jsx3(
+    Button3,
     {
       ref,
       "data-state": context.open ? "open" : "closed",
@@ -142,12 +148,12 @@ var TooltipTrigger = React.forwardRef(function TooltipTrigger2({ children, asChi
     }
   );
 });
-var TooltipContent = React.forwardRef(function TooltipContent2({ style, ...props }, propRef) {
+var TooltipContent = React.forwardRef(function TooltipContent2({ style, root, ...props }, propRef) {
   const context = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!context.open)
     return null;
-  return /* @__PURE__ */ jsx2(FloatingPortal, { children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(FloatingPortal, { root, children: /* @__PURE__ */ jsx3(
     "div",
     {
       ref,
@@ -160,36 +166,34 @@ var TooltipContent = React.forwardRef(function TooltipContent2({ style, ...props
   ) });
 });
 function DefaultTooltipContent(props) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     TooltipContent,
     {
-      className: twMerge2(
-        "bg-me-gray-900 text-white text-sm px-3 py-2 rounded-lg opacity-90 z-50",
-        props.className
-      ),
+      root: props.root,
+      className: twMerge3("bg-me-gray-900 text-white text-sm px-3 py-2 rounded opacity-90 z-50", props.className),
       children: props.children
     }
   );
 }
 // src/Sidebar.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Sidebar({ children }) {
-  return /* @__PURE__ */ jsx3("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
+  return /* @__PURE__ */ jsx4("div", { className: "w-full h-full flex flex-col overflow-hidden", children });
 }
 function SidebarContent({
   children,
   className: className2,
   padding
 }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex-1 min-h-0 overflow-y-auto pb-64", className2, padding && "px-3 pt-3"), children });
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex-1 min-h-0 overflow-y-auto pb-64", className2, padding && "px-3 pt-3"), children });
 }
 function SidebarHeader(props) {
   const { actions, title } = props;
   return /* @__PURE__ */ 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 flex-shrink-0", children: [
-    /* @__PURE__ */ jsx3("div", { className: "flex-1", children: title }),
-    /* @__PURE__ */ jsx3("div", { className: "ml-auto flex gap-2 items-center", children: actions?.map((action, index) => /* @__PURE__ */ jsxs(Tooltip, { placement: "bottom", children: [
-      /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("div", { className: "flex-1", children: title }),
+    /* @__PURE__ */ jsx4("div", { className: "ml-auto flex gap-2 items-center", children: actions?.map((action, index) => /* @__PURE__ */ jsxs(Tooltip, { placement: "bottom", children: [
+      /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(
         "button",
         {
           className: cn(
@@ -205,7 +209,7 @@ function SidebarHeader(props) {
         },
         index
       ) }),
-      !action.disabled ? /* @__PURE__ */ jsx3(DefaultTooltipContent, { children: action.title }) : null
+      !action.disabled ? /* @__PURE__ */ jsx4(DefaultTooltipContent, { children: action.title }) : null
     ] }, index)) })
   ] });
 }
@@ -214,9 +218,9 @@ function SidebarHeader(props) {
 import { Fragment } from "react/jsx-runtime";
 // src/PanelSideMenuItem.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function PanelSideMenuItem(props) {
-  return /* @__PURE__ */ jsx4(Tooltip, { placement: "right", children: /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx5(Tooltip, { placement: "right", children: /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
     "button",
     {
       className: cn(
@@ -227,18 +231,18 @@ function PanelSideMenuItem(props) {
       onMouseDown: props.onClick,
       children: [
         props.icon,
-        /* @__PURE__ */ jsx4(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded-lg opacity-90 z-50", children: props.label })
+        /* @__PURE__ */ jsx5(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded opacity-90 z-50", children: props.label })
       ]
     }
   ) }) });
 }
 // src/PanelSideMenu.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function PanelSideMenu(props) {
-  return /* @__PURE__ */ jsx5("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
-    panel.divide ? /* @__PURE__ */ jsx5("div", { className: "flex-1 block w-2 min-h-1" }) : null,
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("div", { className: "bg-white border-me-gray-300 border-t border-r flex flex-col w-12 pb-2", "data-open": props.open, children: props.items.map((panel) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+    panel.divide ? /* @__PURE__ */ jsx6("div", { className: "flex-1 block w-2 min-h-1" }) : null,
+    /* @__PURE__ */ jsx6(
       PanelSideMenuItem,
       {
         label: panel.label,
@@ -252,12 +256,12 @@ function PanelSideMenu(props) {
 }
 // src/ThumbnailGridContainer.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ThumbnailGridContainer(props) {
   if (props.wide) {
-    return /* @__PURE__ */ jsx6("div", { className: "grid grid-md gap-4 p-4 overflow-y-auto", children: props.children });
+    return /* @__PURE__ */ jsx7("div", { className: "grid grid-md gap-4 p-4 overflow-y-auto", children: props.children });
   }
-  return /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-2 gap-4 p-4", children: props.children });
+  return /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-2 gap-4 p-4", children: props.children });
 }
 // src/LazyThumbnail.tsx
@@ -273,12 +277,12 @@ import {
   useThumbnail
 } from "react-iiif-vault";
 import { LazyLoadComponent } from "react-lazy-load-image-component";
-import { twMerge as twMerge3 } from "tailwind-merge";
+import { twMerge as twMerge4 } from "tailwind-merge";
 // src/Spinner.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Spinner(props) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: "1em",
@@ -288,8 +292,8 @@ function Spinner(props) {
       stroke: "currentColor",
       ...props,
       children: /* @__PURE__ */ jsxs4("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-        /* @__PURE__ */ jsx7("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-        /* @__PURE__ */ jsx7("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ jsx8("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx8(
           "animateTransform",
           {
             attributeName: "transform",
@@ -306,7 +310,7 @@ function Spinner(props) {
 }
 // src/icons/TextIcon.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function TextIcon(props) {
   return /* @__PURE__ */ jsxs5(
     "svg",
@@ -317,8 +321,8 @@ function TextIcon(props) {
       viewBox: "0 0 24 24",
       ...props,
       children: [
-        /* @__PURE__ */ jsx8("title", { children: "Text" }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("title", { children: "Text" }),
+        /* @__PURE__ */ jsx9(
           "path",
           {
             fill: "currentColor",
@@ -331,12 +335,12 @@ function TextIcon(props) {
 }
 // src/LazyThumbnail.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function LazyThumbnail({
   cover,
   fade = true
 }) {
-  return /* @__PURE__ */ jsx9(LazyLoadComponent, { children: /* @__PURE__ */ jsx9(LazyThumbnailInner, { cover, fade }) });
+  return /* @__PURE__ */ jsx10(LazyLoadComponent, { children: /* @__PURE__ */ jsx10(LazyThumbnailInner, { cover, fade }) });
 }
 var renderCache = /* @__PURE__ */ new Map();
 function LazyThumbnailInner({
@@ -370,7 +374,7 @@ function LazyThumbnailInner({
     [isCached]
   );
   return /* @__PURE__ */ jsxs6("div", { className: `w-full h-full relative`, children: [
-    thumbnail?.id ? /* @__PURE__ */ jsx9(
+    thumbnail?.id ? /* @__PURE__ */ jsx10(
       "img",
       {
         onLoad: () => setIsLoading(false),
@@ -379,15 +383,15 @@ function LazyThumbnailInner({
         alt: "",
         className: `w-full h-full ${cover ? "object-cover" : "object-contain"} ${!isLoading ? isCached ? "" : "animate-fadeIn" : "opacity-0"}`
       }
-    ) : /* @__PURE__ */ jsx9(ThumbnailFallback, {}),
-    !thumbnail?.id || isLoading ? /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsx10(ThumbnailFallback, {}),
+    !thumbnail?.id || isLoading ? /* @__PURE__ */ jsx10(
       "div",
       {
-        className: twMerge3(
+        className: twMerge4(
           "absolute inset-0 flex items-center justify-center bg-me-gray-100 text-2xl z-10",
           fade && "animate-fadeIn"
         ),
-        children: /* @__PURE__ */ jsx9(Spinner, {})
+        children: /* @__PURE__ */ jsx10(Spinner, {})
       }
     ) : null
   ] });
@@ -395,9 +399,9 @@ function LazyThumbnailInner({
 function ThumbnailFallback() {
   const [strategy] = useRenderingStrategy();
   if (strategy.type === "textual-content") {
-    return /* @__PURE__ */ jsx9("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: /* @__PURE__ */ jsx9(TextIcon, { className: "w-16 h-16" }) });
+    return /* @__PURE__ */ jsx10("div", { className: "text-black/30 flex items-center justify-center h-full bg-me-gray-100 animate-fadeInDelayed absolute inset-0 z-20", children: /* @__PURE__ */ jsx10(TextIcon, { className: "w-16 h-16" }) });
   }
-  return /* @__PURE__ */ jsx9("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" });
+  return /* @__PURE__ */ jsx10("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" });
 }
 // src/CanvasThumbnailGridItem.tsx
@@ -405,18 +409,18 @@ import { CanvasContext } from "react-iiif-vault";
 // src/CanvasLabel.tsx
 import { LocaleString, useCanvas as useCanvas2 } from "react-iiif-vault";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CanvasLabel(props) {
   const canvas = useCanvas2();
   if (!canvas)
     return null;
-  return /* @__PURE__ */ jsx10(LocaleString, { className: props.className, as: props.as, children: canvas.label });
+  return /* @__PURE__ */ jsx11(LocaleString, { className: props.className, as: props.as, children: canvas.label });
 }
 // src/Card3D.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
-import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Card3D({
   className: className2,
   shouldTranslate,
@@ -491,7 +495,7 @@ function Card3D({
     "div",
     {
       ref: outer,
-      className: twMerge4(
+      className: twMerge5(
         //
         "relative transition-all hover:duration-50",
         shouldTranslate && "hover:shadow-xl",
@@ -500,7 +504,7 @@ function Card3D({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             className: "pointer-events-none absolute inset-0 transition-all",
@@ -516,10 +520,10 @@ function Card3D({
 }
 // src/CanvasThumbnailGridItem.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function CanvasThumbnailGridItem(props) {
-  return /* @__PURE__ */ jsx12(CanvasContext, { canvas: props.id, children: /* @__PURE__ */ jsxs8("div", { onMouseDown: props.onClick, className: "flex flex-col", "data-canvas-selected": props.selected, children: [
-    /* @__PURE__ */ jsx12("div", { className: "bg-me-gray-100 w-full aspect-square flex-1 overflow-hidden rounded", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(CanvasContext, { canvas: props.id, children: /* @__PURE__ */ jsxs8("div", { onMouseDown: props.onClick, className: "flex flex-col", "data-canvas-selected": props.selected, children: [
+    /* @__PURE__ */ jsx13("div", { className: "bg-me-gray-100 w-full aspect-square flex-1 overflow-hidden rounded", children: /* @__PURE__ */ jsx13(
       Card3D,
       {
         "data-canvas-selected": props.active,
@@ -528,87 +532,68 @@ function CanvasThumbnailGridItem(props) {
           "border-2 border-transparent  p-1 w-full h-full rounded",
           props.selected && "border-me-primary-500"
         ),
-        children: /* @__PURE__ */ jsx12(LazyThumbnail, {})
+        children: /* @__PURE__ */ jsx13(LazyThumbnail, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(CanvasLabel, { className: "text-sm text-center truncate mt-1", as: "div" })
+    /* @__PURE__ */ jsx13(CanvasLabel, { className: "text-sm text-center truncate mt-1", as: "div" })
   ] }) });
 }
 // src/Modal.tsx
-import {
-  CloseButton,
-  Dialog,
-  DialogPanel,
-  DialogTitle
-} from "@headlessui/react";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function Modal({
-  id,
-  title,
-  open = true,
-  onClose,
-  actions,
-  children
-}) {
-  return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsxs9(
-    Dialog,
-    {
-      open,
-      onClose,
-      id,
-      className: "relative z-[500]",
-      children: [
-        /* @__PURE__ */ jsx13(
-          "div",
-          {
-            className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`,
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx13("div", { className: "relative p-4 w-full max-w-4xl max-h-full", children: /* @__PURE__ */ jsxs9(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
-          /* @__PURE__ */ jsxs9("div", { className: "flex  items-center justify-between p-4 md:p-5 rounded-t-lg sticky top-0 bg-white", children: [
-            /* @__PURE__ */ jsx13(DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
-            /* @__PURE__ */ jsxs9(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", children: [
-              /* @__PURE__ */ jsx13(
-                "svg",
+import { CloseButton, Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function ModalBackSlot({ children }) {
+  const element = document.getElementById("modal-back-slot");
+  if (!element)
+    return null;
+  return createPortal(children, element);
+}
+function Modal({ id, title, open = true, onClose, actions, children }) {
+  return /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsxs9(Dialog, { open, onClose, id, className: "relative z-[500]", children: [
+    /* @__PURE__ */ jsx14("div", { className: `fixed inset-0 bg-black/30 animate-fadeIn z-[501]`, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 flex w-screen items-center justify-center p-4 z-[502]", children: /* @__PURE__ */ jsx14("div", { className: "relative p-4 w-full max-w-4xl max-h-full", children: /* @__PURE__ */ jsxs9(DialogPanel, { className: "relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[80vh] flex flex-col", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex  items-center justify-between gap-3 p-4 rounded-t-lg sticky top-0 bg-white", children: [
+        /* @__PURE__ */ jsx14("div", { id: "modal-back-slot" }),
+        /* @__PURE__ */ jsx14(DialogTitle, { className: "text-xl font-semibold text-gray-900 ", children: title }),
+        /* @__PURE__ */ jsxs9(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", children: [
+          /* @__PURE__ */ jsx14(
+            "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__ */ jsx14(
+                "path",
                 {
-                  className: "w-3 h-3",
-                  "aria-hidden": "true",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
-                  viewBox: "0 0 14 14",
-                  children: /* @__PURE__ */ jsx13(
-                    "path",
-                    {
-                      stroke: "currentColor",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                    }
-                  )
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
                 }
-              ),
-              /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Close" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx13("div", { className: "flex-1 min-h-0 overflow-y-auto flex flex-col", children }),
-          actions ? /* @__PURE__ */ jsx13("div", { className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
-        ] }) }) })
-      ]
-    }
-  ) });
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx14("span", { className: "sr-only", children: "Close" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: "flex-1 min-h-0 overflow-y-auto flex flex-col", children }),
+      actions ? /* @__PURE__ */ jsx14("div", { className: "flex items-center p-4 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
+    ] }) }) })
+  ] }) });
 }
 // src/ControlButton.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ControlButton({
   children,
   className: className2,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       className: cn(
@@ -622,9 +607,9 @@ function ControlButton({
 }
 // src/OpaqueControls.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function OpaqueControls(props) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn("flex w-full p-0.5 opacity-0 transition-opacity duration-300 gap-2", props.active && "opacity-1"),
@@ -640,9 +625,9 @@ import {
   Tab as BaseTab,
   TabPanel as BaseTabPanel
 } from "react-aria-components";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Tabs({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabs,
     {
       className: (state) => {
@@ -659,7 +644,7 @@ function TabList({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabList,
     {
       className: (state) => {
@@ -672,7 +657,7 @@ function TabList({
   );
 }
 function Tab({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTab,
     {
       className: (state) => {
@@ -690,7 +675,7 @@ function Tab({ className: className2, children, ...props }) {
   );
 }
 function TabPanel({ className: className2, children, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     BaseTabPanel,
     {
       className: (state) => {
@@ -705,10 +690,10 @@ function TabPanel({ className: className2, children, ...props }) {
 // src/CreatorGrid.tsx
 import { ListBox, ListBoxItem } from "react-aria-components";
-import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CreatorGrid(props) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     ListBox,
     {
       orientation: "horizontal",
@@ -716,7 +701,7 @@ function CreatorGrid(props) {
       selectionMode: "single",
       items: props.items,
       className: "grid grid-sm gap-4 p-4 mb-8",
-      children: (item) => /* @__PURE__ */ jsx17(CreatorGridItem, { ...item })
+      children: (item) => /* @__PURE__ */ jsx18(CreatorGridItem, { ...item })
     }
   );
 }
@@ -726,22 +711,22 @@ function CreatorGridItem(props) {
     {
       id: props.id,
       onAction: props.onClick,
-      className: ($s) => twMerge5(
+      className: ($s) => twMerge6(
         "bg-white p-2 border-me-gray-300 rounded-md border hover:border-me-primary-500",
         $s.isFocused && "border-me-primary-500 outline-me-primary-500 outline-2"
       ),
       children: [
-        /* @__PURE__ */ jsx17("div", { className: "rounded bg-me-gray-300 mb-2 flex items-center justify-center py-1 aspect-square", children: /* @__PURE__ */ jsx17("div", { className: "text-center [&>svg]:w-16 [&>svg]:h-16", children: props.icon }) }),
-        /* @__PURE__ */ jsx17("div", { className: "text-center font-semibold text-sm", children: props.title }),
-        /* @__PURE__ */ jsx17("div", { className: "text-sm text-center text-black/50", children: props.description })
+        /* @__PURE__ */ jsx18("div", { className: "rounded bg-me-gray-300 mb-2 flex items-center justify-center py-1 aspect-square", children: /* @__PURE__ */ jsx18("div", { className: "text-center [&>svg]:w-16 [&>svg]:h-16", children: props.icon }) }),
+        /* @__PURE__ */ jsx18("div", { className: "text-center font-semibold text-sm", children: props.title }),
+        /* @__PURE__ */ jsx18("div", { className: "text-sm text-center text-black/50", children: props.description })
       ]
     }
   );
 }
 // src/icons/DownloadIcon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var DownloadIcon = (props) => /* @__PURE__ */ jsx18("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx18(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var DownloadIcon = (props) => /* @__PURE__ */ jsx19("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx19(
   "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",
@@ -751,10 +736,10 @@ var DownloadIcon = (props) => /* @__PURE__ */ jsx18("svg", { xmlns: "http://www.
 // src/DownloadButton.tsx
 import { useId } from "react-aria";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function DownloadButton({ label, id: _id, getData, fileName, fileType }) {
   const id = useId(_id);
-  return /* @__PURE__ */ jsx19(Tooltip, { placement: "bottom", children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx20(Tooltip, { placement: "bottom", children: /* @__PURE__ */ jsxs11(
     TooltipTrigger,
     {
       className: "bg-me-gray-100 hover:bg-me-primary-500 hover:text-white p-1 rounded-md text-me-primary-500 text-2xl",
@@ -762,8 +747,8 @@ function DownloadButton({ label, id: _id, getData, fileName, fileType }) {
       id,
       onPress: () => createDownload(getData(), fileName, fileType),
       children: [
-        /* @__PURE__ */ jsx19(DownloadIcon, { "aria-labelledby": _id }),
-        /* @__PURE__ */ jsx19(DefaultTooltipContent, { children: label })
+        /* @__PURE__ */ jsx20(DownloadIcon, { "aria-labelledby": _id }),
+        /* @__PURE__ */ jsx20(DefaultTooltipContent, { children: label })
       ]
     }
   ) });
@@ -783,11 +768,11 @@ function createDownload(data, fileName, fileType = "text/json") {
 }
 // src/AtlasBanner.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function AtlasBanner({ children, controlsId }) {
   return /* @__PURE__ */ jsxs12("div", { className: "bg-me-gray-100 border-b text-black p-1 flex gap-4 items-center h-12", children: [
-    /* @__PURE__ */ jsx20("div", { className: "px-4", children }),
-    /* @__PURE__ */ jsx20("div", { id: controlsId || "atlas-controls", className: "flex gap-2" })
+    /* @__PURE__ */ jsx21("div", { className: "px-4", children }),
+    /* @__PURE__ */ jsx21("div", { id: controlsId || "atlas-controls", className: "flex gap-2" })
   ] });
 }
@@ -795,7 +780,7 @@ function AtlasBanner({ children, controlsId }) {
 import { RenderSvgEditorControls } from "react-iiif-vault";
 // src/icons/DrawIcon.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
   "svg",
   {
@@ -806,8 +791,8 @@ var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx21("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx21(
+      title ? /* @__PURE__ */ jsx22("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx22(
         "path",
         {
           fill: "currentColor",
@@ -819,7 +804,7 @@ var DrawIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs13(
 );
 // src/icons/PolygonIcon.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
   "svg",
   {
@@ -830,8 +815,8 @@ var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx22("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx22(
+      title ? /* @__PURE__ */ jsx23("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx23(
         "path",
         {
           fill: "currentColor",
@@ -843,33 +828,33 @@ var PolygonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs14(
 );
 // src/icons/LineIcon.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function LineIcon({ title, titleId, ...props }) {
   return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
-    title ? /* @__PURE__ */ jsx23("title", { id: titleId, children: title }) : null,
+    title ? /* @__PURE__ */ jsx24("title", { id: titleId, children: title }) : null,
     /* @__PURE__ */ jsxs15("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ jsx23("circle", { cx: 4.5, cy: 4.5, r: 2.5, fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("circle", { cx: 15.5, cy: 15.5, r: 2.5, fill: "currentColor" }),
-      /* @__PURE__ */ jsx23("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m13.5 13.5-9-9" })
+      /* @__PURE__ */ jsx24("circle", { cx: 4.5, cy: 4.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ jsx24("circle", { cx: 15.5, cy: 15.5, r: 2.5, fill: "currentColor" }),
+      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m13.5 13.5-9-9" })
     ] })
   ] });
 }
 // src/icons/LineBoxIcon.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function LineBoxIcon({ title, titleId, ...props }) {
   return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
-    title ? /* @__PURE__ */ jsx24("title", { id: titleId, children: title }) : null,
+    title ? /* @__PURE__ */ jsx25("title", { id: titleId, children: title }) : null,
     /* @__PURE__ */ jsxs16("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ jsx24("path", { d: "M0 0h20v20H0z" }),
-      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m8.5 11.5 6-6M16 4v3m0-3h-3m0 14L2 7" }),
-      /* @__PURE__ */ jsx24("path", { stroke: "currentColor", strokeOpacity: 0.407, strokeWidth: 2, d: "m2 7 5-5 11 11-5 5z" })
+      /* @__PURE__ */ jsx25("path", { d: "M0 0h20v20H0z" }),
+      /* @__PURE__ */ jsx25("path", { stroke: "currentColor", strokeLinecap: "square", strokeWidth: 2, d: "m8.5 11.5 6-6M16 4v3m0-3h-3m0 14L2 7" }),
+      /* @__PURE__ */ jsx25("path", { stroke: "currentColor", strokeOpacity: 0.407, strokeWidth: 2, d: "m2 7 5-5 11 11-5 5z" })
     ] })
   ] });
 }
 // src/icons/ShapesIcon.tsx
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
   "svg",
   {
@@ -880,8 +865,8 @@ var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx25("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx25(
+      title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx26(
         "path",
         {
           fill: "currentColor",
@@ -893,7 +878,7 @@ var ShapesIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs17(
 );
 // src/icons/SquareIcon.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
   "svg",
   {
@@ -904,8 +889,8 @@ var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx26("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx26(
+      title ? /* @__PURE__ */ jsx27("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx27(
         "path",
         {
           fill: "currentColor",
@@ -917,7 +902,7 @@ var SquareIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs18(
 );
 // src/icons/TriangleIcon.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var TriangleIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs19(
   "svg",
   {
@@ -928,14 +913,14 @@ var TriangleIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs19(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx27("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx27("path", { d: "m80-160 400-640 400 640H80Zm144-80h512L480-650 224-240Zm256-205Z", fill: "currentColor" })
+      title ? /* @__PURE__ */ jsx28("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx28("path", { d: "m80-160 400-640 400 640H80Zm144-80h512L480-650 224-240Zm256-205Z", fill: "currentColor" })
     ]
   }
 );
 // src/icons/HexagonIcon.tsx
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
   "svg",
   {
@@ -946,8 +931,8 @@ var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
     "aria-labelledby": titleId,
     ...props,
     children: [
-      title ? /* @__PURE__ */ jsx28("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx28(
+      title ? /* @__PURE__ */ jsx29("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx29(
         "path",
         {
           fill: "currentColor",
@@ -959,12 +944,12 @@ var HexagonIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs20(
 );
 // src/icons/DeleteForeverIcon.tsx
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function DeleteForeverIcon(props) {
   return /* @__PURE__ */ jsxs21("svg", { height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-    /* @__PURE__ */ jsx29("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx29("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx30("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx30(
       "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",
@@ -976,18 +961,18 @@ function DeleteForeverIcon(props) {
 // src/SvgControlBar.tsx
 import { useEffect as useEffect2 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "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__ */ jsx30(DrawIcon, {}),
-  PolygonIcon: /* @__PURE__ */ jsx30(PolygonIcon, {}),
-  LineIcon: /* @__PURE__ */ jsx30(LineIcon, {}),
-  LineBoxIcon: /* @__PURE__ */ jsx30(LineBoxIcon, {}),
-  ShapesIcon: /* @__PURE__ */ jsx30(ShapesIcon, {}),
-  SquareIcon: /* @__PURE__ */ jsx30(SquareIcon, {}),
-  TriangleIcon: /* @__PURE__ */ jsx30(TriangleIcon, {}),
-  HexagonIcon: /* @__PURE__ */ jsx30(HexagonIcon, {}),
-  DeleteForeverIcon: /* @__PURE__ */ jsx30(DeleteForeverIcon, {})
+  DrawIcon: /* @__PURE__ */ jsx31(DrawIcon, {}),
+  PolygonIcon: /* @__PURE__ */ jsx31(PolygonIcon, {}),
+  LineIcon: /* @__PURE__ */ jsx31(LineIcon, {}),
+  LineBoxIcon: /* @__PURE__ */ jsx31(LineBoxIcon, {}),
+  ShapesIcon: /* @__PURE__ */ jsx31(ShapesIcon, {}),
+  SquareIcon: /* @__PURE__ */ jsx31(SquareIcon, {}),
+  TriangleIcon: /* @__PURE__ */ jsx31(TriangleIcon, {}),
+  HexagonIcon: /* @__PURE__ */ jsx31(HexagonIcon, {}),
+  DeleteForeverIcon: /* @__PURE__ */ jsx31(DeleteForeverIcon, {})
 };
 function SvgControlBar({
   helper,
@@ -997,7 +982,7 @@ function SvgControlBar({
   useEffect2(() => {
     helper.stamps.square();
   }, []);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     RenderSvgEditorControls,
     {
       icons,
@@ -1012,18 +997,18 @@ function SvgControlBar({
 }
 // src/ConfirmSelectionButton.tsx
-import { Button as Button3 } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { Button as Button4 } from "react-aria-components";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function ConfirmSelectionButton({ onPress, children }) {
-  return /* @__PURE__ */ jsx31(Button3, { className: "bg-me-primary-500 px-3 py-1 hover:bg-me-primary-600 text-white rounded", onPress, children });
+  return /* @__PURE__ */ jsx32(Button4, { className: "bg-me-primary-500 px-3 py-1 hover:bg-me-primary-600 text-white rounded", onPress, children });
 }
 // src/ManifestOverviewEmptyState.tsx
-import { Button as Button4 } from "react-aria-components";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Button as Button5 } from "react-aria-components";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function ManifestOverviewEmptyState({ onCreate, canCreate }) {
   return /* @__PURE__ */ jsxs22("div", { className: "flex items-center flex-col gap-5 py-16", children: [
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       Card3D,
       {
         shouldTranslate: true,
@@ -1031,10 +1016,10 @@ function ManifestOverviewEmptyState({ onCreate, canCreate }) {
         className: "border-2 border-dotted bg-black/5 aspect-[3/4] rounded w-32 border-black"
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: "font-bold text-lg", children: "Let's get started!" }),
-    /* @__PURE__ */ jsx32("div", { className: "max-w-xl px-5 my-4", children: "Add a title and top level information for this manifest using the editing panel on the right, and then add some canvases and content." }),
-    canCreate ? /* @__PURE__ */ jsx32(
-      Button4,
+    /* @__PURE__ */ jsx33("div", { className: "font-bold text-lg", children: "Let's get started!" }),
+    /* @__PURE__ */ jsx33("div", { className: "max-w-xl px-5 my-4", children: "Add a title and top level information for this manifest using the editing panel on the right, and then add some canvases and content." }),
+    canCreate ? /* @__PURE__ */ jsx33(
+      Button5,
       {
         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,
@@ -1052,7 +1037,7 @@ import {
   useState as useState3
 } from "react";
 import {
-  Button as Button5,
+  Button as Button6,
   Menu,
   MenuItem,
   MenuTrigger,
@@ -1063,8 +1048,8 @@ import {
   Tabs as Tabs2
 } from "react-aria-components";
 import { createHideableComponent } from "@react-aria/collections";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 function SidebarTabs({
   menu,
   menuId,
@@ -1122,14 +1107,14 @@ function SidebarTabs({
         onSelectionChange,
         children: [
           /* @__PURE__ */ jsxs23("div", { className: "flex items-center w-full tab-shadow", children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               TabList2,
               {
                 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__ */ jsx33(
+                  return /* @__PURE__ */ jsx34(
                     Tab2,
                     {
                       ref: (el) => itemsRef.current[idx] = el,
@@ -1148,9 +1133,9 @@ function SidebarTabs({
                 })
               }
             ),
-            /* @__PURE__ */ jsx33("div", { ref: setHiddenMenu, id: "hidden-menu" })
+            /* @__PURE__ */ jsx34("div", { ref: setHiddenMenu, id: "hidden-menu" })
           ] }),
-          menu.map((item) => /* @__PURE__ */ jsx33(
+          menu.map((item) => /* @__PURE__ */ jsx34(
             TabPanel2,
             {
               id: item.id,
@@ -1163,8 +1148,8 @@ function SidebarTabs({
       },
       menuId
     ),
-    hiddenMenu && hidden > 0 ? createPortal(
-      /* @__PURE__ */ jsx33(
+    hiddenMenu && hidden > 0 ? createPortal2(
+      /* @__PURE__ */ jsx34(
         MoreMenu,
         {
           hidden,
@@ -1180,8 +1165,8 @@ function SidebarTabs({
 }
 var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, selectedKey, onSelectionChange }) => {
   return /* @__PURE__ */ jsxs23(MenuTrigger, { children: [
-    /* @__PURE__ */ jsx33(
-      Button5,
+    /* @__PURE__ */ jsx34(
+      Button6,
       {
         className: cn(
           "border-none rounded bg-gray-100 px-1.5 py-1 mr-2 mb-1 text-me-primary-500 semibold uppercase text-[10px]",
@@ -1190,12 +1175,12 @@ var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, sel
         children: "MORE"
       }
     ),
-    /* @__PURE__ */ jsx33(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(Popover, { children: menuHidden.length ? /* @__PURE__ */ jsx34(
       Menu,
       {
         className: "bg-white rounded shadow-lg flex flex-col gap-0.5 p-0.5 min-w-28",
         children: menuHidden.map((item) => {
-          return /* @__PURE__ */ jsx33(
+          return /* @__PURE__ */ jsx34(
             MenuItem,
             {
               className: (state) => cn(
@@ -1215,7 +1200,7 @@ var MoreMenu = createHideableComponent(({ selectedIndex, hidden, menuHidden, sel
 // src/MetadataContainer.tsx
 import { LocaleString as LocaleString2 } from "react-iiif-vault";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 function MetadataContainer({
   className: className2,
   label,
@@ -1223,7 +1208,7 @@ function MetadataContainer({
   ...props
 }) {
   return /* @__PURE__ */ jsxs24(
-    "div",
+    "fieldset",
     {
       className: cn(
         "hover:ring ring-gray-200 focus-within:ring-me-primary-500 focus-within:ring p-2 rounded mb-2",
@@ -1231,7 +1216,7 @@ function MetadataContainer({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx34(LocaleString2, { className: "text-lg font-bold text-[#333] mb-2", as: "h3", children: label }),
+        /* @__PURE__ */ jsx35(LocaleString2, { className: "text-lg font-bold text-[#333] mb-2", as: "h3", children: label }),
         children
       ]
     }
@@ -1239,9 +1224,9 @@ function MetadataContainer({
 }
 // src/EmptyState.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function EmptyState(props) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn(
@@ -1255,9 +1240,9 @@ function EmptyState(props) {
 }
 // src/ManifestEditorLogo.tsx
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 function ManifestEditorLogo(props) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "svg",
     {
       width: "1em",
@@ -1267,26 +1252,26 @@ function ManifestEditorLogo(props) {
       className: "me-logo h-[23px] w-[176px]",
       ...props,
       children: /* @__PURE__ */ jsxs25("g", { fill: "none", children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "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__ */ jsx36("path", { fill: "#E94581", className: "me-logo-1", d: "M0 13.343 13.343 0l13.343 13.343-13.343 13.343z" }),
-        /* @__PURE__ */ jsx36("path", { fill: "#E94581", className: "me-logo-2", d: "M12.137 13.346 25.48.003l13.343 13.343L25.48 26.69z" }),
-        /* @__PURE__ */ jsx36("path", { fill: "#C63E75", className: "me-logo-3", d: "m12.104 13.348 7.311-7.311 7.312 7.311-7.312 7.312z" })
+        /* @__PURE__ */ jsx37("path", { fill: "#E94581", className: "me-logo-1", d: "M0 13.343 13.343 0l13.343 13.343-13.343 13.343z" }),
+        /* @__PURE__ */ jsx37("path", { fill: "#E94581", className: "me-logo-2", d: "M12.137 13.346 25.48.003l13.343 13.343L25.48 26.69z" }),
+        /* @__PURE__ */ jsx37("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
-import { Label, Form as RAForm, Input, RadioGroup, Radio } from "react-aria-components";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { Input, Label, Form as RAForm, Radio, RadioGroup, TextArea } from "react-aria-components";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function MeLabel({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Label,
     {
       className: cn(
@@ -1299,7 +1284,7 @@ function MeLabel({ className: className2, ...props }) {
   );
 }
 function MeRadioGroup({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     RadioGroup,
     {
       className: cn(
@@ -1312,7 +1297,7 @@ function MeRadioGroup({ className: className2, ...props }) {
   );
 }
 function MeRadio({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Radio,
     {
       className: (state) => cn(
@@ -1325,7 +1310,7 @@ function MeRadio({ className: className2, ...props }) {
   );
 }
 function MeForm({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     RAForm,
     {
       className: cn(
@@ -1338,7 +1323,7 @@ function MeForm({ className: className2, ...props }) {
   );
 }
 function MeInput({ className: className2, ...props }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Input,
     {
       className: cn(
@@ -1351,12 +1336,26 @@ function MeInput({ className: className2, ...props }) {
     }
   );
 }
+function MeTextArea({ className: className2, ...props }) {
+  return /* @__PURE__ */ jsx38(
+    TextArea,
+    {
+      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__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -1375,7 +1374,8 @@ var Form = {
   Label: MeLabel,
   InputContainer: MeInputContainer,
   RadioGroup: MeRadioGroup,
-  Radio: MeRadio
+  Radio: MeRadio,
+  TextArea: MeTextArea
 };
 // src/HTMLEditor.tsx
@@ -1405,12 +1405,12 @@ import {
   toolbarPlugin
 } from "@mdxeditor/editor";
 import { useMemo as useMemo3 } from "react";
-import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function MDXEditor({
   editorRef,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     BaseMDXEditor,
     {
       plugins: useMemo3(
@@ -1428,12 +1428,12 @@ function MDXEditor({
             toolbarClassName: "mdx-toolbar",
             toolbarContents: () => /* @__PURE__ */ jsxs26(Fragment4, { children: [
               " ",
-              /* @__PURE__ */ jsx38(UndoRedo, {}),
-              /* @__PURE__ */ jsx38(BoldItalicUnderlineToggles, {}),
-              /* @__PURE__ */ jsx38(BlockTypeSelect, {}),
-              /* @__PURE__ */ jsx38(ListsToggle, { options: ["bullet", "number"] }),
-              /* @__PURE__ */ jsx38(CreateLink, {}),
-              /* @__PURE__ */ jsx38(InsertImage, {})
+              /* @__PURE__ */ jsx39(UndoRedo, {}),
+              /* @__PURE__ */ jsx39(BoldItalicUnderlineToggles, {}),
+              /* @__PURE__ */ jsx39(BlockTypeSelect, {}),
+              /* @__PURE__ */ jsx39(ListsToggle, { options: ["bullet", "number"] }),
+              /* @__PURE__ */ jsx39(CreateLink, {}),
+              /* @__PURE__ */ jsx39(InsertImage, {})
             ] })
           })
         ],
@@ -1446,7 +1446,7 @@ function MDXEditor({
 }
 // src/HTMLEditor.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var converter = new Converter();
 converter.setFlavor("github");
 var turndownService = new TurndownService();
@@ -1474,7 +1474,7 @@ function HTMLEditor({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     MDXEditor,
     {
       editorRef,
@@ -1499,34 +1499,39 @@ function HTMLEditor({
 }
 // src/IconButton.tsx
-import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function IconButton({
   children,
   active,
   label,
   disabled,
-  onPress
+  onPress,
+  root,
+  className: className2,
+  placement = "top"
 }) {
-  return /* @__PURE__ */ jsx40(Tooltip, { placement: "top", children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx41(Tooltip, { placement, children: /* @__PURE__ */ jsxs27(
     TooltipTrigger,
     {
+      "aria-label": label,
       onClick: onPress,
-      className: twMerge6(
+      className: twMerge7(
         "rounded flex items-center bg-white justify-center p-2 hover:bg-gray-100 text-2xl",
         active ? "bg-me-primary-500 bg-opacity-40 hover:bg-opacity-70 hover:bg-me-primary-500" : "",
-        disabled ? "opacity-50 pointer-events-none" : ""
+        disabled ? "opacity-50 pointer-events-none" : "",
+        className2
       ),
       children: [
         children,
-        /* @__PURE__ */ jsx40(DefaultTooltipContent, { className: "translate-x-3", children: label })
+        /* @__PURE__ */ jsx41(DefaultTooltipContent, { root, className: "translate-x-3 z-50", children: label })
       ]
     }
   ) });
 }
 // src/ItemWithHandle.tsx
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function ItemWithHandle({
   children,
   handle,
@@ -1538,7 +1543,7 @@ function ItemWithHandle({
     "absolute flex p-1 gap-1 bg-white z-1 right-1 top-1 rounded"
   ) : "flex-shrink-0 flex items-center gap-1 px-1";
   return /* @__PURE__ */ jsxs28("div", { className: grid ? "relative flex flex-col" : "flex items-center", children: [
-    /* @__PURE__ */ jsx41("div", { className: "flex-1 min-w-0", style: { flex: 1, minWidth: 0 }, children }),
+    /* @__PURE__ */ jsx42("div", { className: "flex-1 min-w-0", style: { flex: 1, minWidth: 0 }, children }),
     /* @__PURE__ */ jsxs28("div", { className: gridStyleClassName, children: [
       actions,
       handle
@@ -1548,9 +1553,9 @@ function ItemWithHandle({
 // src/HandleContainer.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var HandleContainer = forwardRef2(function HandleContainer2({ className: className2, ...props }, ref) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       ref,
@@ -1560,12 +1565,126 @@ var HandleContainer = forwardRef2(function HandleContainer2({ className: classNa
   );
 });
+// src/CollectionListItem.tsx
+import { LocaleString as LocaleString3, useCollection } from "react-iiif-vault";
+// src/icons/CollectionIcon.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+function CollectionIcon(props) {
+  return /* @__PURE__ */ jsx44(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 -960 960 960",
+      "aria-label": "collection",
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx44(
+        "path",
+        {
+          d: "M320-320h480v-480h-80v280l-100-60-100 60v-280H320v480Zm0 80q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm360-720h200-200Zm-200 0h480-480Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+// src/CollectionListItem.tsx
+import { usePress } from "react-aria";
+import { getValue } from "@iiif/helpers/i18n";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+function CollectionListItem({ isActive, onAction }) {
+  const collection = useCollection({});
+  const { pressProps } = usePress({
+    onPress: onAction
+  });
+  return /* @__PURE__ */ jsxs29(
+    "li",
+    {
+      "aria-label": getValue(collection?.label),
+      className: "border-b-2 border-b-gray-200 flex p-2 gap-3 text-left truncate items-center w-full hover:bg-gray-100 data-[active]:bg-gray-200 data-[active]:border-b-me-primary-500",
+      "data-active": isActive || void 0,
+      ...pressProps,
+      children: [
+        /* @__PURE__ */ jsx45(
+          CollectionIcon,
+          {
+            "data-active": isActive || void 0,
+            className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx45(LocaleString3, { children: collection?.label })
+      ]
+    }
+  );
+}
+// src/ManifestListItem.tsx
+import { LocaleString as LocaleString4, useManifest } from "react-iiif-vault";
+// src/icons/ManifestIcon.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+function ManifestIcon(props) {
+  return /* @__PURE__ */ jsx46(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "20 -910 960 960",
+      "aria-label": "manifest",
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx46(
+        "path",
+        {
+          d: "M480-160q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740v484q51-32 107-48t113-16q36 0 70.5 6t69.5 18v-480q15 5 29.5 10.5T898-752q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59Zm80-200v-380l200-200v400L560-360Zm-160 65v-396q-33-14-68.5-21.5T260-720q-37 0-72 7t-68 21v397q35-13 69.5-19t70.5-6q36 0 70.5 6t69.5 19Zm0 0v-396 396Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+// src/ManifestListItem.tsx
+import { usePress as usePress2 } from "react-aria";
+import { getValue as getValue2 } from "@iiif/helpers";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+function ManifestListItem({ isActive, onAction }) {
+  const manifest = useManifest();
+  const { pressProps } = usePress2({
+    onPress: onAction
+  });
+  return /* @__PURE__ */ jsxs30(
+    "li",
+    {
+      "aria-label": getValue2(manifest?.label),
+      className: "border-b-2 border-b-gray-200 flex p-2 gap-3 text-left truncate items-center w-full hover:bg-gray-100 data-[active]:bg-gray-200 data-[active]:border-b-me-primary-500",
+      "data-active": isActive || void 0,
+      ...pressProps,
+      children: [
+        /* @__PURE__ */ jsx47(
+          ManifestIcon,
+          {
+            "data-active": isActive || void 0,
+            className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx47(LocaleString4, { children: manifest?.label })
+      ]
+    }
+  );
+}
 // src/icons/CreateCanvasIcon.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function CreateCanvasIcon() {
-  return /* @__PURE__ */ jsxs29("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
-    /* @__PURE__ */ jsx43("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs31("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
+    /* @__PURE__ */ jsx48("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx48(
       "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",
@@ -1576,8 +1695,8 @@ function CreateCanvasIcon() {
 }
 // src/icons/AddImageIcon.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var AddImageIcon = (props) => /* @__PURE__ */ jsx44("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx44(
+import { jsx as jsx49 } from "react/jsx-runtime";
+var AddImageIcon = (props) => /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx49(
   "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",
@@ -1586,8 +1705,8 @@ var AddImageIcon = (props) => /* @__PURE__ */ jsx44("svg", { xmlns: "http://www.
 ) });
 // src/icons/IIIFLogo.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
-var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
+var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1597,7 +1716,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
     ...props,
     viewBox: "0 0 493.36 441.333",
     children: [
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx50(
         "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",
@@ -1610,7 +1729,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx50(
         "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",
@@ -1623,7 +1742,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx50(
         "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",
@@ -1636,7 +1755,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx50(
         "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",
@@ -1654,8 +1773,8 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
 );
 // src/icons/HTMLIcon.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
-var HTMLIcon = (props) => /* @__PURE__ */ jsx46("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx46(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var HTMLIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx51(
   "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",
@@ -1664,8 +1783,8 @@ var HTMLIcon = (props) => /* @__PURE__ */ jsx46("svg", { xmlns: "http://www.w3.o
 ) });
 // src/icons/IIIFBrowserIcon.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx47("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx47(
+import { jsx as jsx52 } from "react/jsx-runtime";
+var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx52("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx52(
   "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",
@@ -1673,9 +1792,59 @@ var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx47("svg", { xmlns: "http://w
   }
 ) });
+// src/icons/InfoIcon.tsx
+import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+function InfoIcon({ title, titleId, ...props }) {
+  return /* @__PURE__ */ jsxs33("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
+    title ? /* @__PURE__ */ jsx53("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx53(
+      "path",
+      {
+        d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+// src/icons/ListingIcon.tsx
+import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+function ListingIcon({
+  title,
+  titleId,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs34(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      "aria-labelledby": titleId,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx54("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsxs34("g", { fill: "none", children: [
+          /* @__PURE__ */ jsx54("path", { d: "M0 0h24v24H0V0z" }),
+          /* @__PURE__ */ jsx54("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
+        ] }),
+        /* @__PURE__ */ jsx54(
+          "path",
+          {
+            d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
 // src/icons/YouTubeIcon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var YouTubeIcon = (props) => /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx48(
+import { jsx as jsx55 } from "react/jsx-runtime";
+var YouTubeIcon = (props) => /* @__PURE__ */ jsx55("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx55(
   "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",
@@ -1683,9 +1852,34 @@ var YouTubeIcon = (props) => /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.w
   }
 ) });
+// src/icons/ListEditIcon.tsx
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+function ListEditIcon({
+  title,
+  titleId,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs35(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      "aria-labelledby": titleId,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx56("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx56("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx56("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" })
+      ]
+    }
+  );
+}
 // src/icons/VideoIcon.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
-var VideoIcon = (props) => /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx49(
+import { jsx as jsx57 } from "react/jsx-runtime";
+var VideoIcon = (props) => /* @__PURE__ */ jsx57("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx57(
   "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",
@@ -1694,8 +1888,8 @@ var VideoIcon = (props) => /* @__PURE__ */ jsx49("svg", { xmlns: "http://www.w3.
 ) });
 // src/icons/AudioIcon.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-var AudioIcon = (props) => /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx50(
+import { jsx as jsx58 } from "react/jsx-runtime";
+var AudioIcon = (props) => /* @__PURE__ */ jsx58("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx58(
   "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",
@@ -1704,8 +1898,8 @@ var AudioIcon = (props) => /* @__PURE__ */ jsx50("svg", { xmlns: "http://www.w3.
 ) });
 // src/icons/EmptyCanvasIcon.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
-var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx51(
+import { jsx as jsx59 } from "react/jsx-runtime";
+var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx59("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx59(
   "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",
@@ -1714,14 +1908,14 @@ var EmptyCanvasIcon = (props) => /* @__PURE__ */ jsx51("svg", { xmlns: "http://w
 ) });
 // src/icons/AddIcon.tsx
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
 function AddIcon({
   className: className2,
   inline,
   height = 16,
   color = "black"
 }) {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs36(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1732,17 +1926,17 @@ function AddIcon({
       style: { verticalAlign: inline ? "bottom" : void 0 },
       className: className2,
       children: [
-        /* @__PURE__ */ jsx52("path", { d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx52("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" })
+        /* @__PURE__ */ jsx60("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx60("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" })
       ]
     }
   );
 }
 // src/icons/MoreMenu.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs37 } from "react/jsx-runtime";
 function MoreMenu2() {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs37(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1750,8 +1944,8 @@ function MoreMenu2() {
       viewBox: "0 0 24 24",
       width: "1em",
       children: [
-        /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx61("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx61(
           "path",
           {
             d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
@@ -1763,14 +1957,78 @@ function MoreMenu2() {
   );
 }
+// src/icons/PreviewIcon.tsx
+import { jsx as jsx62 } from "react/jsx-runtime";
+function PreviewIcon(props) {
+  return /* @__PURE__ */ jsx62("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx62(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3"
+    }
+  ) });
+}
+// src/icons/ImageListIcon.tsx
+import { jsx as jsx63 } from "react/jsx-runtime";
+function ImageListIcon(props) {
+  return /* @__PURE__ */ jsx63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx63(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1M11 17l2.5-3.15L15.29 16l2.5-3.22L21 17z"
+    }
+  ) });
+}
+// src/icons/BackIcon.tsx
+import { jsx as jsx64 } from "react/jsx-runtime";
+function BackIcon(props) {
+  return /* @__PURE__ */ jsx64("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx64("path", { fill: "currentColor", d: "M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z" }) });
+}
+// src/icons/GridIcon.tsx
+import { jsx as jsx65, jsxs as jsxs38 } from "react/jsx-runtime";
+function GridIcon(props) {
+  return /* @__PURE__ */ jsxs38("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: [
+    /* @__PURE__ */ jsx65(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M10 10h4v4h-4zm0 6h4v4h-4zM4 4h4v4H4zm0 6h4v4H4zm0 6h4v4H4zM16 4h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zM10 4h4v4h-4z",
+        opacity: ".3"
+      }
+    ),
+    /* @__PURE__ */ jsx65(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M8 20H4v-4h4zm0-6H4v-4h4zm0-6H4V4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4V4h4zm6 12h-4v-4h4zm0-6h-4v-4h4zm0-6h-4V4h4z"
+      }
+    )
+  ] });
+}
+// src/icons/ScaledImageIcon.tsx
+import { jsx as jsx66 } from "react/jsx-runtime";
+function ScaledImageIcon(props) {
+  return /* @__PURE__ */ jsx66("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx66(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M21 15h2v2h-2zm0-4h2v2h-2zm2 8h-2v2c1 0 2-1 2-2M13 3h2v2h-2zm8 4h2v2h-2zm0-4v2h2c0-1-1-2-2-2M1 7h2v2H1zm16-4h2v2h-2zm0 16h2v2h-2zM3 3C2 3 1 4 1 5h2zm6 0h2v2H9zM5 3h2v2H5zm-4 8v8c0 1.1.9 2 2 2h12V11zm2 8l2.5-3.21l1.79 2.15l2.5-3.22L13 19z"
+    }
+  ) });
+}
 // src/ErrorMessage.tsx
-import { twMerge as twMerge7 } from "tailwind-merge";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function ErrorMessage({ children, small = false, className: className2 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
-      className: twMerge7(
+      className: twMerge8(
         "bg-red-500 text-white",
         "border-1 drop-shadow border-red-700 w-full rounded-md py-2 px-4 leading-[1.9em] flex items-center",
         "has-[a]:text-white",
@@ -1804,11 +2062,11 @@ function useFastList(list, firstRender = 24) {
 // src/RenderTextualContent.tsx
 import { useState as useState6 } from "react";
-import { Button as Button6 } from "react-aria-components";
+import { Button as Button7 } from "react-aria-components";
 import {
-  LocaleString as LocaleString3
+  LocaleString as LocaleString5
 } from "react-iiif-vault";
-import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
 function RenderTextualContent(props) {
   const languages = props.strategy.items.map(
     (item) => Object.keys(item.text)[0]
@@ -1817,10 +2075,10 @@ function RenderTextualContent(props) {
   const selected = props.strategy.items.find(
     (item) => Object.keys(item.text)[0] === langauge
   );
-  return /* @__PURE__ */ jsxs33("div", { className: "overflow-y-auto bg-white shadow", children: [
-    /* @__PURE__ */ jsx55("div", { className: "flex gap-2 border-b", children: languages.map((language) => {
-      return /* @__PURE__ */ jsx55(
-        Button6,
+  return /* @__PURE__ */ jsxs39("div", { className: "overflow-y-auto bg-white shadow", children: [
+    /* @__PURE__ */ jsx68("div", { className: "flex gap-2 border-b", children: languages.map((language) => {
+      return /* @__PURE__ */ jsx68(
+        Button7,
         {
           className: `py-1 px-3 ${langauge === language ? "bg-me-500 text-white" : "bg-white text-black"}`,
           onPress: () => setLanguage(language),
@@ -1829,11 +2087,11 @@ function RenderTextualContent(props) {
         language
       );
     }) }),
-    /* @__PURE__ */ jsx55("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx55(
-      LocaleString3,
+    /* @__PURE__ */ jsx68("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx68(
+      LocaleString5,
       {
         enableDangerouslySetInnerHTML: true,
-        defaultText: /* @__PURE__ */ jsx55("span", { className: "text-gray-500 my-8", children: "No content available" }),
+        defaultText: /* @__PURE__ */ jsx68("span", { className: "text-gray-500 my-8", children: "No content available" }),
         children: selected?.text
       }
     ) })
@@ -1847,15 +2105,15 @@ import "@vidstack/react/player/styles/default/captions.css";
 import "@vidstack/react/player/styles/default/layouts/video.css";
 import { MediaPlayer, MediaProvider, Poster, Gesture, Track } from "@vidstack/react";
 import { defaultLayoutIcons, DefaultVideoLayout } from "@vidstack/react/player/layouts/default";
-import { getValue } from "@iiif/helpers";
+import { getValue as getValue3 } from "@iiif/helpers";
 import { useRef as useRef5 } from "react";
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
 function IIIFMediaPlayer(props) {
   const mediaPlayer = useRef5(null);
   const captions = props.captions || [];
   const language = props.language;
   const timeRef = useRef5(props.startTime || 0);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx69(
     MediaPlayer,
     {
       onTimeUpdate: (time) => {
@@ -1876,29 +2134,29 @@ function IIIFMediaPlayer(props) {
           type: props.media.format
         }
       ],
-      children: /* @__PURE__ */ jsxs34(MediaProvider, { className: "w-full h-full [&>video]:w-full [&>video]:h-full [&>video]:object-contain", children: [
+      children: /* @__PURE__ */ jsxs40(MediaProvider, { className: "w-full h-full [&>video]:w-full [&>video]:h-full [&>video]:object-contain", children: [
         captions.map((caption) => {
-          return /* @__PURE__ */ jsx56(
+          return /* @__PURE__ */ jsx69(
             Track,
             {
               src: caption.id,
               kind: "subtitles",
-              label: getValue(caption.label),
+              label: getValue3(caption.label),
               default: caption.language === language,
               language: caption.language
             },
             caption.id
           );
         }),
-        props.poster ? /* @__PURE__ */ jsx56(
+        props.poster ? /* @__PURE__ */ jsx69(
           Poster,
           {
             className: "absolute inset-0 bg-black block h-full w-full opacity-0 transition-opacity data-[visible]:opacity-100 object-contain",
             src: props.poster
           }
         ) : null,
-        /* @__PURE__ */ jsx56(Gestures, {}),
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx69(Gestures, {}),
+        /* @__PURE__ */ jsx69(
           DefaultVideoLayout,
           {
             className: "z-1",
@@ -1911,8 +2169,8 @@ function IIIFMediaPlayer(props) {
   );
 }
 function Gestures() {
-  return /* @__PURE__ */ jsxs34(Fragment5, { children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs40(Fragment5, { children: [
+    /* @__PURE__ */ jsx69(
       Gesture,
       {
         className: "pointer-coarse:hidden absolute top-0 start-12 bottom-20 right-0 -z-1 block",
@@ -1920,17 +2178,21 @@ function Gestures() {
         action: "toggle:paused"
       }
     ),
-    /* @__PURE__ */ jsx56(Gesture, { className: "absolute inset-0 z-0 block h-full w-full", event: "dblpointerup", action: "toggle:fullscreen" })
+    /* @__PURE__ */ jsx69(Gesture, { className: "absolute inset-0 z-0 block h-full w-full", event: "dblpointerup", action: "toggle:fullscreen" })
   ] });
 }
 export {
+  AccessibilityButton,
   ActionButton,
   AddIcon,
   AddImageIcon,
   AtlasBanner,
   AudioIcon,
+  BackIcon,
   CanvasThumbnailGridItem,
   Card3D,
+  CollectionIcon,
+  CollectionListItem,
   ConfirmSelectionButton,
   ControlButton,
   CreateCanvasIcon,
@@ -1943,6 +2205,7 @@ export {
   EmptyState,
   ErrorMessage,
   Form,
+  GridIcon,
   HTMLEditor,
   HTMLIcon,
   HandleContainer,
@@ -1950,21 +2213,31 @@ export {
   IIIFLogo,
   IIIFMediaPlayer,
   IconButton,
+  ImageListIcon,
+  InfoIcon,
   ItemWithHandle,
   LazyThumbnail,
+  ListEditIcon,
+  ListingIcon,
   MDXEditor,
   ManifestEditorLogo,
+  ManifestIcon,
+  ManifestListItem,
   ManifestOverviewEmptyState,
   MetadataContainer,
   Modal,
+  ModalBackSlot,
   MoreMenu2 as MoreMenu,
   OpaqueControls,
   PanelSideMenu,
+  PreviewIcon,
   RenderTextualContent,
+  ScaledImageIcon,
   Sidebar,
   SidebarContent,
   SidebarHeader,
   SidebarTabs,
+  Spinner,
   SvgControlBar,
   Tab,
   TabList,