@manifest-editor/manifest-preset 1.2.0 → 1.3.1

package/dist/chunk-SJ3QA4KN.js

@@ -0,0 +1,425 @@
+// src/left-panels/canvas-listing.tsx
+import {
+  CreateCanvasIcon,
+  IIIFBrowserIcon,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  ThumbnailGridContainer,
+  useFastList
+} from "@manifest-editor/components";
+import {
+  CanvasGrid,
+  CanvasList,
+  InputContainer,
+  createAppActions,
+  useInStack,
+  useToggleList
+} from "@manifest-editor/editors";
+import {
+  useCreator,
+  useLayoutActions,
+  useManifestEditor
+} from "@manifest-editor/shell";
+import { useEffect, useLayoutEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CanvasListingIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsxs("g", { fill: "none", children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0V0z" }),
+        /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "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"
+        }
+      )
+    ]
+  }
+);
+var canvasListing = {
+  id: "canvas-listing",
+  label: "Canvases",
+  icon: /* @__PURE__ */ jsx(CanvasListingIcon, {}),
+  render: (state, ctx, app) => {
+    return /* @__PURE__ */ jsx(
+      CanvasListing,
+      {
+        gridView: state.gridView || false,
+        onChangeGridView: (gridView) => ctx.actions.change("canvas-listing", { gridView })
+      }
+    );
+  }
+};
+function CanvasListing({
+  gridView,
+  onChangeGridView
+}) {
+  const { open } = useLayoutActions();
+  const { structural, technical } = useManifestEditor();
+  const [toggled, toggle] = useToggleList();
+  const canvas = useInStack("Canvas");
+  const { items } = structural;
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const [canCreateCanvas, canvasActions] = useCreator(
+    manifest,
+    "items",
+    "Canvas"
+  );
+  const canvases = useFastList(items.get(), 24);
+  useEffect(() => {
+    if (canvas?.resource.source.id) {
+      return;
+    }
+    if (items.get().length) {
+      open({ id: "current-canvas" });
+      canvasActions.edit(items.get()[0]);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const selected = document.querySelector('[data-canvas-selected="true"]');
+    if (selected) {
+      selected.scrollIntoView({ block: "center" });
+    }
+  }, [canvases, gridView]);
+  return /* @__PURE__ */ jsxs(Sidebar, { children: [
+    /* @__PURE__ */ jsx(
+      SidebarHeader,
+      {
+        title: "Canvases",
+        actions: [
+          {
+            icon: /* @__PURE__ */ jsx(Fragment, { children: gridView ? /* @__PURE__ */ jsx(CanvasListingIcon, { width: 24, height: 24 }) : /* @__PURE__ */ jsx(CanvasThumbnailsIcon, {}) }),
+            title: gridView ? "List view" : "Grid view",
+            onClick: () => {
+              onChangeGridView(!gridView);
+            }
+          },
+          {
+            icon: /* @__PURE__ */ jsx(ListEditIcon, {}),
+            title: "Edit canvases",
+            toggled: toggled.items,
+            onClick: () => toggle("items")
+          },
+          {
+            icon: /* @__PURE__ */ jsx(IIIFBrowserIcon, { className: "text-2xl" }),
+            title: "IIIF Browser",
+            onClick: () => canvasActions.creator("@manifest-editor/iiif-browser-creator"),
+            disabled: !canCreateCanvas
+          },
+          {
+            icon: /* @__PURE__ */ jsx(CreateCanvasIcon, {}),
+            title: "Add new canvas",
+            onClick: () => canvasActions.create(),
+            disabled: !canCreateCanvas
+          }
+        ]
+      }
+    ),
+    gridView ? /* @__PURE__ */ jsx(CanvasGridView, { isEditing: toggled.items }) : /* @__PURE__ */ jsx(CanvasListView, { isEditing: toggled.items })
+  ] });
+}
+function useEditCanvasItems() {
+  const { edit, open } = useLayoutActions();
+  const canvas = useInStack("Canvas");
+  const { technical, structural } = useManifestEditor();
+  const { items } = structural;
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const canvases = useFastList(items.get(), 24);
+  const [canCreateCanvas, canvasActions] = useCreator(
+    manifest,
+    "items",
+    "Canvas"
+  );
+  return {
+    canvas,
+    canvases,
+    items,
+    canvasActions,
+    open,
+    edit,
+    canCreateCanvas
+  };
+}
+function CanvasGridView({ isEditing }) {
+  const { canvas, items, canvases, canvasActions, open } = useEditCanvasItems();
+  return /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(ThumbnailGridContainer, { children: /* @__PURE__ */ jsx(
+    CanvasGrid,
+    {
+      id: items.focusId(),
+      list: items.get() || [],
+      inlineHandle: false,
+      activeId: canvas?.resource.source.id,
+      reorder: isEditing ? (t) => items.reorder(t.startIndex, t.endIndex) : void 0,
+      onSelect: (item, idx) => {
+        open({ id: "current-canvas" });
+        canvasActions.edit(item, idx);
+      },
+      createActions: createAppActions(items)
+    }
+  ) }) });
+}
+function CanvasListView({ isEditing }) {
+  const { canvas, items, canvasActions, open } = useEditCanvasItems();
+  return /* @__PURE__ */ jsx(SidebarContent, { className: "p-3", children: /* @__PURE__ */ jsx(InputContainer, { $wide: true, children: /* @__PURE__ */ jsx(
+    CanvasList,
+    {
+      id: items.focusId(),
+      list: items.get() || [],
+      inlineHandle: false,
+      activeId: canvas?.resource.source.id,
+      reorder: isEditing ? (t) => items.reorder(t.startIndex, t.endIndex) : void 0,
+      onSelect: (item, idx) => {
+        open({ id: "current-canvas" });
+        canvasActions.edit(item, idx);
+      },
+      createActions: createAppActions(items)
+    }
+  ) }) });
+}
+function ListEditIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx("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" })
+      ]
+    }
+  );
+}
+function CanvasThumbnailsIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            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-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/left-panels/manifest.tsx
+import {
+  Sidebar as Sidebar2,
+  SidebarContent as SidebarContent2,
+  SidebarHeader as SidebarHeader2
+} from "@manifest-editor/components";
+import {
+  useLayoutActions as useLayoutActions2,
+  useManifestEditor as useManifestEditor2
+} from "@manifest-editor/shell";
+import { useEffect as useEffect2, useRef } from "react";
+import { LocaleString, ManifestMetadata } from "react-iiif-vault";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ManifestIcon({
+  title,
+  titleId,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      "aria-labelledby": titleId,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx2("title", { id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx2("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        /* @__PURE__ */ jsx2(
+          "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"
+          }
+        )
+      ]
+    }
+  );
+}
+var manifestPanel = {
+  id: "left-panel-manifest",
+  label: "Manifest summary",
+  icon: /* @__PURE__ */ jsx2(ManifestIcon, {}),
+  render: (state, ctx, app) => {
+    return /* @__PURE__ */ jsxs2(Sidebar2, { children: [
+      /* @__PURE__ */ jsx2(SidebarHeader2, { title: "Manifest summary" }),
+      /* @__PURE__ */ jsx2(SidebarContent2, { className: "p-4", children: /* @__PURE__ */ jsx2(ManifestPanel, {}) })
+    ] });
+  }
+};
+function ManifestPanel() {
+  const { edit, open } = useLayoutActions2();
+  const { descriptive, technical } = useManifestEditor2();
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const isInitial = useRef(true);
+  const label = descriptive.label.get();
+  const summary = descriptive.summary.get();
+  const requiredStatement = descriptive.requiredStatement.get();
+  const metadata = descriptive.metadata.get();
+  useEffect2(() => {
+    edit(manifest);
+    open({ id: "overview" });
+    isInitial.current = false;
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    label ? /* @__PURE__ */ jsx2(
+      LocaleString,
+      {
+        as: "h2",
+        className: "text-lg font-semibold mb-2 [&>a]:underline [&>a]:hover:text-slate-400",
+        children: label
+      }
+    ) : null,
+    summary ? /* @__PURE__ */ jsx2(
+      LocaleString,
+      {
+        enableDangerouslySetInnerHTML: true,
+        as: "p",
+        className: "text-sm text-slate-800 block [&>a]:underline [&>a]:hover:text-slate-400 mb-2",
+        children: summary
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2("hr", {}),
+    requiredStatement ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "py-2 text-black", children: [
+        /* @__PURE__ */ jsx2(
+          LocaleString,
+          {
+            as: "h4",
+            className: "font-bold text-black w-full text-sm font-semibold mb-0 [&>a]:underline [&>a]:hover:text-slate-400",
+            children: requiredStatement.label
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          LocaleString,
+          {
+            enableDangerouslySetInnerHTML: true,
+            className: "text-sm [&>a]:underline [&>a]:hover:text-slate-400",
+            children: requiredStatement.value
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("hr", {})
+    ] }) : null,
+    metadata && metadata.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "py-2 text-gray-400", children: "You can add some descriptive metadata for this manifest using the editing panel on the right" }) : null,
+    /* @__PURE__ */ jsx2(
+      ManifestMetadata,
+      {
+        allowHtml: true,
+        classes: {
+          container: "w-full",
+          row: "border-b border-gray-200 flex flex-col flex-wrap py-2",
+          label: "font-bold text-black w-full text-sm font-semibold mb-1",
+          value: "text-sm text-black block [&>span>a]:underline [&>span>a]:hover:text-slate-400",
+          empty: "text-gray-400"
+        }
+      }
+    )
+  ] });
+}
+
+// src/center-panels/manifest-overview.tsx
+import {
+  CanvasThumbnailGridItem as CanvasThumbnailGridItem2,
+  ManifestOverviewEmptyState,
+  ThumbnailGridContainer as ThumbnailGridContainer2,
+  useFastList as useFastList2
+} from "@manifest-editor/components";
+import {
+  useCreator as useCreator2,
+  useLayoutActions as useLayoutActions3,
+  useManifestEditor as useManifestEditor3
+} from "@manifest-editor/shell";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var manifestOverview = {
+  id: "overview",
+  label: "Overview",
+  icon: "",
+  render: () => /* @__PURE__ */ jsx3(ManifestOverviewCenterPanel, {})
+};
+function ManifestOverviewCenterPanel() {
+  const { edit, open } = useLayoutActions3();
+  const { structural, technical } = useManifestEditor3();
+  const { items } = structural;
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const [canCreateCanvas, canvasActions] = useCreator2(
+    manifest,
+    "items",
+    "Canvas"
+  );
+  const canvases = useFastList2(items.get(), 24);
+  if (!canvases || canvases.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+      ManifestOverviewEmptyState,
+      {
+        onCreate: canvasActions.create,
+        canCreate: canCreateCanvas
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx3(ThumbnailGridContainer2, { wide: true, children: canvases.map((item) => /* @__PURE__ */ jsx3(
+    CanvasThumbnailGridItem2,
+    {
+      id: item.id,
+      onClick: () => {
+        open({ id: "current-canvas" });
+        open({ id: "canvas-listing", state: { gridView: true } });
+        canvasActions.edit(item);
+      }
+    },
+    item.id
+  )) });
+}
+
+export {
+  CanvasListingIcon,
+  canvasListing,
+  CanvasListing,
+  useEditCanvasItems,
+  CanvasGridView,
+  CanvasListView,
+  ListEditIcon,
+  CanvasThumbnailsIcon,
+  ManifestIcon,
+  manifestPanel,
+  ManifestPanel,
+  manifestOverview,
+  ManifestOverviewCenterPanel
+};