@manifest-editor/components 1.3.0 → 1.4.0

package/dist/index.js

@@ -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,24 +33,31 @@ function ActionButton({
   );
 }
 
+// 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 * as React from "react";
 import { Button as Button2 } from "react-aria-components";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { twMerge as twMerge3 } from "tailwind-merge";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function useTooltip({
   initialOpen = false,
@@ -110,10 +112,7 @@ var useTooltipContext = () => {
   }
   return context;
 };
-function Tooltip({
-  children,
-  ...options
-}) {
+function Tooltip({ children, ...options }) {
   const tooltip = useTooltip(options);
   return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: tooltip, children });
 }
@@ -142,12 +141,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__ */ jsx2(FloatingPortal, { root, children: /* @__PURE__ */ jsx2(
     "div",
     {
       ref,
@@ -163,10 +162,8 @@ function DefaultTooltipContent(props) {
   return /* @__PURE__ */ jsx2(
     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
     }
   );
@@ -223,10 +220,11 @@ function PanelSideMenuItem(props) {
         "border-none 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"
       ),
+      "aria-label": props.label,
       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__ */ jsx4(TooltipContent, { className: "bg-me-gray-900 text-white text-sm px-3 py-2 rounded opacity-90 z-50", children: props.label })
       ]
     }
   ) }) });
@@ -272,7 +270,7 @@ 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";
@@ -382,7 +380,7 @@ function LazyThumbnailInner({
     !thumbnail?.id || isLoading ? /* @__PURE__ */ jsx9(
       "div",
       {
-        className: twMerge3(
+        className: twMerge4(
           "absolute inset-0 flex items-center justify-center bg-me-gray-100 text-2xl z-10",
           fade && "animate-fadeIn"
         ),
@@ -414,7 +412,7 @@ function CanvasLabel(props) {
 
 // src/Card3D.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
-import { twMerge as twMerge4 } from "tailwind-merge";
+import { twMerge as twMerge5 } from "tailwind-merge";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Card3D({
   className: className2,
@@ -490,7 +488,7 @@ function Card3D({
     "div",
     {
       ref: outer,
-      className: twMerge4(
+      className: twMerge5(
         //
         "relative transition-all hover:duration-50",
         shouldTranslate && "hover:shadow-xl",
@@ -535,69 +533,50 @@ function CanvasThumbnailGridItem(props) {
 }
 
 // src/Modal.tsx
-import {
-  CloseButton,
-  Dialog,
-  DialogPanel,
-  DialogTitle
-} from "@headlessui/react";
+import { CloseButton, Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
+import { createPortal } from "react-dom";
 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",
+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__ */ 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 gap-3 p-4 rounded-t-lg sticky top-0 bg-white", children: [
+        /* @__PURE__ */ jsx13("div", { id: "modal-back-slot" }),
+        /* @__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",
+            {
+              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",
                 {
-                  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__ */ 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 border-t border-gray-200 rounded-b justify-end", children: actions }) : null
+    ] }) }) })
+  ] }) });
 }
 
 // src/ControlButton.tsx
@@ -704,7 +683,7 @@ function TabPanel({ className: className2, children, ...props }) {
 
 // src/CreatorGrid.tsx
 import { ListBox, ListBoxItem } from "react-aria-components";
-import { twMerge as twMerge5 } from "tailwind-merge";
+import { twMerge as twMerge6 } from "tailwind-merge";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function CreatorGrid(props) {
   return /* @__PURE__ */ jsx17(
@@ -725,7 +704,7 @@ 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"
       ),
@@ -1062,7 +1041,7 @@ import {
   Tabs as Tabs2
 } from "react-aria-components";
 import { createHideableComponent } from "@react-aria/collections";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function SidebarTabs({
   menu,
@@ -1162,7 +1141,7 @@ function SidebarTabs({
       },
       menuId
     ),
-    hiddenMenu && hidden > 0 ? createPortal(
+    hiddenMenu && hidden > 0 ? createPortal2(
       /* @__PURE__ */ jsx33(
         MoreMenu,
         {
@@ -1222,7 +1201,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",
@@ -1282,7 +1261,7 @@ function ManifestEditorLogo(props) {
 }
 
 // src/Forms.tsx
-import { Label, Form as RAForm, Input, RadioGroup, Radio } from "react-aria-components";
+import { Input, Label, Form as RAForm, Radio, RadioGroup, TextArea } from "react-aria-components";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function MeLabel({ className: className2, ...props }) {
   return /* @__PURE__ */ jsx37(
@@ -1350,6 +1329,20 @@ function MeInput({ className: className2, ...props }) {
     }
   );
 }
+function MeTextArea({ className: className2, ...props }) {
+  return /* @__PURE__ */ jsx37(
+    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,
@@ -1374,7 +1367,8 @@ var Form = {
   Label: MeLabel,
   InputContainer: MeInputContainer,
   RadioGroup: MeRadioGroup,
-  Radio: MeRadio
+  Radio: MeRadio,
+  TextArea: MeTextArea
 };
 
 // src/HTMLEditor.tsx
@@ -1387,18 +1381,21 @@ import TurndownService from "turndown";
 import "@mdxeditor/editor/style.css";
 import {
   MDXEditor as BaseMDXEditor,
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CreateLink,
   InsertImage,
   ListsToggle,
   UndoRedo,
+  diffSourcePlugin,
   headingsPlugin,
   imagePlugin,
+  linkDialogPlugin,
   linkPlugin,
   listsPlugin,
-  markdownShortcutPlugin,
   quotePlugin,
   thematicBreakPlugin,
-  toolbarPlugin,
-  BlockTypeSelect
+  toolbarPlugin
 } from "@mdxeditor/editor";
 import { useMemo as useMemo3 } from "react";
 import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -1412,22 +1409,23 @@ function MDXEditor({
       plugins: useMemo3(
         () => [
           // Example Plugin Usage
-          headingsPlugin(),
+          headingsPlugin({ allowedHeadingLevels: [2, 3] }),
           listsPlugin(),
           linkPlugin(),
           quotePlugin(),
           thematicBreakPlugin(),
-          headingsPlugin(),
-          // linkDialogPlugin(),
-          markdownShortcutPlugin(),
+          linkDialogPlugin(),
           imagePlugin(),
+          diffSourcePlugin(),
           toolbarPlugin({
             toolbarClassName: "mdx-toolbar",
             toolbarContents: () => /* @__PURE__ */ jsxs26(Fragment4, { children: [
               " ",
               /* @__PURE__ */ jsx38(UndoRedo, {}),
+              /* @__PURE__ */ jsx38(BoldItalicUnderlineToggles, {}),
               /* @__PURE__ */ jsx38(BlockTypeSelect, {}),
-              /* @__PURE__ */ jsx38(ListsToggle, {}),
+              /* @__PURE__ */ jsx38(ListsToggle, { options: ["bullet", "number"] }),
+              /* @__PURE__ */ jsx38(CreateLink, {}),
               /* @__PURE__ */ jsx38(InsertImage, {})
             ] })
           })
@@ -1475,7 +1473,11 @@ function HTMLEditor({
       editorRef,
       onBlur: internalOnChange,
       readOnly: disabled,
-      className: "bg-white prose-sm text-sm border rounded-lg p-0.5 focus-within:outline-none focus-within:border-me-primary-500",
+      className: [
+        "bg-white prose-sm text-sm border rounded-lg prose-a:text-me-primary-500 prose-a:underline prose-ul:list-disc p-0.5",
+        "prose-ol:list-decimal",
+        "focus-within:outline-none focus-within:border-me-primary-500 z-50 relative"
+      ].join(" "),
       markdown: memoState,
       suppressHtmlProcessing: true,
       onError: (err) => {
@@ -1490,27 +1492,31 @@ function HTMLEditor({
 }
 
 // src/IconButton.tsx
-import { twMerge as twMerge6 } from "tailwind-merge";
+import { twMerge as twMerge7 } from "tailwind-merge";
 import { jsx as jsx40, 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__ */ jsx40(Tooltip, { placement, children: /* @__PURE__ */ jsxs27(
     TooltipTrigger,
     {
       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__ */ jsx40(DefaultTooltipContent, { root, className: "translate-x-3 z-50", children: label })
       ]
     }
   ) });
@@ -1551,12 +1557,116 @@ var HandleContainer = forwardRef2(function HandleContainer2({ className: classNa
   );
 });
 
+// src/CollectionListItem.tsx
+import { Button as Button6 } from "react-aria-components";
+import { LocaleString as LocaleString3, useCollection } from "react-iiif-vault";
+
+// src/icons/CollectionIcon.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+function CollectionIcon(props) {
+  return /* @__PURE__ */ jsx43(
+    "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__ */ jsx43(
+        "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 { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+function CollectionListItem({ isActive, onAction }) {
+  const collection = useCollection({});
+  return /* @__PURE__ */ jsxs29(
+    Button6,
+    {
+      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",
+      onPress: onAction,
+      "data-active": isActive || void 0,
+      children: [
+        /* @__PURE__ */ jsx44(
+          CollectionIcon,
+          {
+            "data-active": isActive || void 0,
+            className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx44(LocaleString3, { children: collection?.label })
+      ]
+    }
+  );
+}
+
+// src/ManifestListItem.tsx
+import { Button as Button7 } from "react-aria-components";
+import { LocaleString as LocaleString4, useManifest } from "react-iiif-vault";
+
+// src/icons/ManifestIcon.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+function ManifestIcon(props) {
+  return /* @__PURE__ */ jsx45(
+    "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__ */ jsx45(
+        "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 { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+function ManifestListItem({ isActive, onAction }) {
+  const manifest = useManifest();
+  return /* @__PURE__ */ jsxs30(
+    Button7,
+    {
+      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",
+      onPress: onAction,
+      "data-active": isActive || void 0,
+      children: [
+        /* @__PURE__ */ jsx46(
+          ManifestIcon,
+          {
+            "data-active": isActive || void 0,
+            className: "flex-shrink-0 text-2xl data-[active]:text-me-primary-500 text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx46(LocaleString4, { children: manifest?.label })
+      ]
+    }
+  );
+}
+
 // src/icons/CreateCanvasIcon.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx47, 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__ */ jsx47("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx47(
       "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",
@@ -1567,8 +1677,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 jsx48 } from "react/jsx-runtime";
+var AddImageIcon = (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(
   "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",
@@ -1577,8 +1687,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 jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1588,7 +1698,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
     ...props,
     viewBox: "0 0 493.36 441.333",
     children: [
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx49(
         "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",
@@ -1601,7 +1711,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx49(
         "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",
@@ -1614,7 +1724,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx49(
         "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",
@@ -1627,7 +1737,7 @@ var IIIFLogo = ({ mono = true, ...props }) => /* @__PURE__ */ jsxs30(
           transform: "matrix(.13333 0 0 -.13333 0 441.333)"
         }
       ),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx49(
         "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",
@@ -1645,8 +1755,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 jsx50 } from "react/jsx-runtime";
+var HTMLIcon = (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(
   "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",
@@ -1655,8 +1765,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 jsx51 } from "react/jsx-runtime";
+var IIIFBrowserIcon = (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: "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",
@@ -1664,9 +1774,59 @@ var IIIFBrowserIcon = (props) => /* @__PURE__ */ jsx47("svg", { xmlns: "http://w
   }
 ) });
 
+// src/icons/InfoIcon.tsx
+import { jsx as jsx52, 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__ */ jsx52("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ jsx52("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx52(
+      "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 jsx53, 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__ */ jsx53("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsxs34("g", { fill: "none", children: [
+          /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z" }),
+          /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
+        ] }),
+        /* @__PURE__ */ jsx53(
+          "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 jsx54 } from "react/jsx-runtime";
+var YouTubeIcon = (props) => /* @__PURE__ */ jsx54("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx54(
   "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",
@@ -1674,9 +1834,34 @@ var YouTubeIcon = (props) => /* @__PURE__ */ jsx48("svg", { xmlns: "http://www.w
   }
 ) });
 
+// src/icons/ListEditIcon.tsx
+import { jsx as jsx55, 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__ */ jsx55("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx55("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx55("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 jsx56 } from "react/jsx-runtime";
+var VideoIcon = (props) => /* @__PURE__ */ jsx56("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "#5f6368", viewBox: "0 -960 960 960", ...props, children: /* @__PURE__ */ jsx56(
   "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",
@@ -1685,8 +1870,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 jsx57 } from "react/jsx-runtime";
+var AudioIcon = (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: "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",
@@ -1695,8 +1880,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 jsx58 } from "react/jsx-runtime";
+var EmptyCanvasIcon = (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: "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",
@@ -1705,14 +1890,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 jsx59, 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",
@@ -1723,17 +1908,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__ */ jsx59("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx59("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 jsx60, jsxs as jsxs37 } from "react/jsx-runtime";
 function MoreMenu2() {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs37(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1741,8 +1926,8 @@ function MoreMenu2() {
       viewBox: "0 0 24 24",
       width: "1em",
       children: [
-        /* @__PURE__ */ jsx53("path", { d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx60("path", { d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx60(
           "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",
@@ -1754,14 +1939,78 @@ function MoreMenu2() {
   );
 }
 
+// src/icons/PreviewIcon.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+function PreviewIcon(props) {
+  return /* @__PURE__ */ jsx61("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx61(
+    "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 jsx62 } from "react/jsx-runtime";
+function ImageListIcon(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: "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 jsx63 } from "react/jsx-runtime";
+function BackIcon(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: "M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20z" }) });
+}
+
+// src/icons/GridIcon.tsx
+import { jsx as jsx64, 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__ */ jsx64(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M10 10h4v4h-4zm0 6h4v4h-4zM4 4h4v4H4zm0 6h4v4H4zm0 6h4v4H4zM16 4h4v4h-4zm0 6h4v4h-4zm0 6h4v4h-4zM10 4h4v4h-4z",
+        opacity: ".3"
+      }
+    ),
+    /* @__PURE__ */ jsx64(
+      "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 jsx65 } from "react/jsx-runtime";
+function ScaledImageIcon(props) {
+  return /* @__PURE__ */ jsx65("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: "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 jsx66 } from "react/jsx-runtime";
 function ErrorMessage({ children, small = false, className: className2 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx66(
     "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",
@@ -1795,11 +2044,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 Button8 } 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 jsx67, jsxs as jsxs39 } from "react/jsx-runtime";
 function RenderTextualContent(props) {
   const languages = props.strategy.items.map(
     (item) => Object.keys(item.text)[0]
@@ -1808,10 +2057,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__ */ jsx67("div", { className: "flex gap-2 border-b", children: languages.map((language) => {
+      return /* @__PURE__ */ jsx67(
+        Button8,
         {
           className: `py-1 px-3 ${langauge === language ? "bg-me-500 text-white" : "bg-white text-black"}`,
           onPress: () => setLanguage(language),
@@ -1820,11 +2069,11 @@ function RenderTextualContent(props) {
         language
       );
     }) }),
-    /* @__PURE__ */ jsx55("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx55(
-      LocaleString3,
+    /* @__PURE__ */ jsx67("div", { className: "p-4 prose", children: /* @__PURE__ */ jsx67(
+      LocaleString5,
       {
         enableDangerouslySetInnerHTML: true,
-        defaultText: /* @__PURE__ */ jsx55("span", { className: "text-gray-500 my-8", children: "No content available" }),
+        defaultText: /* @__PURE__ */ jsx67("span", { className: "text-gray-500 my-8", children: "No content available" }),
         children: selected?.text
       }
     ) })
@@ -1840,13 +2089,13 @@ import { MediaPlayer, MediaProvider, Poster, Gesture, Track } from "@vidstack/re
 import { defaultLayoutIcons, DefaultVideoLayout } from "@vidstack/react/player/layouts/default";
 import { getValue } 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 jsx68, 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__ */ jsx68(
     MediaPlayer,
     {
       onTimeUpdate: (time) => {
@@ -1867,9 +2116,9 @@ 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__ */ jsx68(
             Track,
             {
               src: caption.id,
@@ -1881,15 +2130,15 @@ function IIIFMediaPlayer(props) {
             caption.id
           );
         }),
-        props.poster ? /* @__PURE__ */ jsx56(
+        props.poster ? /* @__PURE__ */ jsx68(
           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__ */ jsx68(Gestures, {}),
+        /* @__PURE__ */ jsx68(
           DefaultVideoLayout,
           {
             className: "z-1",
@@ -1902,8 +2151,8 @@ function IIIFMediaPlayer(props) {
   );
 }
 function Gestures() {
-  return /* @__PURE__ */ jsxs34(Fragment5, { children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs40(Fragment5, { children: [
+    /* @__PURE__ */ jsx68(
       Gesture,
       {
         className: "pointer-coarse:hidden absolute top-0 start-12 bottom-20 right-0 -z-1 block",
@@ -1911,7 +2160,7 @@ 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__ */ jsx68(Gesture, { className: "absolute inset-0 z-0 block h-full w-full", event: "dblpointerup", action: "toggle:fullscreen" })
   ] });
 }
 export {
@@ -1920,8 +2169,11 @@ export {
   AddImageIcon,
   AtlasBanner,
   AudioIcon,
+  BackIcon,
   CanvasThumbnailGridItem,
   Card3D,
+  CollectionIcon,
+  CollectionListItem,
   ConfirmSelectionButton,
   ControlButton,
   CreateCanvasIcon,
@@ -1934,6 +2186,7 @@ export {
   EmptyState,
   ErrorMessage,
   Form,
+  GridIcon,
   HTMLEditor,
   HTMLIcon,
   HandleContainer,
@@ -1941,21 +2194,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,