@manifest-editor/manifest-preset 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 digirati-co-uk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,343 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  centerPanels: () => centerPanels,
+  creators: () => creators,
+  default: () => src_default,
+  editors: () => editors,
+  leftPanels: () => leftPanels,
+  modals: () => modals,
+  resources: () => resources,
+  rightPanels: () => rightPanels
+});
+module.exports = __toCommonJS(src_exports);
+var import_editors2 = require("@manifest-editor/editors");
+var import_creators = require("@manifest-editor/creators");
+var import_shell4 = require("@manifest-editor/shell");
+
+// src/left-panels/canvas-listing.tsx
+var import_editors = require("@manifest-editor/editors");
+var import_shell = require("@manifest-editor/shell");
+var import_react = require("react");
+var import_components = require("@manifest-editor/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ListingIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0V0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ListingIcon, {}),
+  render: (state, ctx, app) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CanvasListing,
+      {
+        gridView: state.gridView || false,
+        onChangeGridView: (gridView) => ctx.actions.change("canvas-listing", { gridView })
+      }
+    );
+  }
+};
+function CanvasListing({
+  gridView,
+  onChangeGridView
+}) {
+  const { edit, open } = (0, import_shell.useLayoutActions)();
+  const { structural, technical } = (0, import_shell.useManifestEditor)();
+  const [toggled, toggle] = (0, import_editors.useToggleList)();
+  const canvas = (0, import_editors.useInStack)("Canvas");
+  const { items } = structural;
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const [canCreateCanvas, canvasActions] = (0, import_shell.useCreator)(manifest, "items", "Canvas");
+  const canvases = (0, import_components.useFastList)(items.get(), 24);
+  (0, import_react.useEffect)(() => {
+    if (canvas?.resource.source.id) {
+      const key = items.get().findIndex((c) => c.id === canvas.resource.source.id);
+      if (key !== -1) {
+        open({ id: "current-canvas" });
+        canvasActions.edit({ id: canvas.resource.source.id, type: "Canvas" }, key);
+        return;
+      }
+    }
+    if (items.get().length) {
+      open({ id: "current-canvas" });
+      canvasActions.edit(items.get()[0]);
+    }
+  }, []);
+  (0, import_react.useLayoutEffect)(() => {
+    const selected = document.querySelector('[data-canvas-selected="true"]');
+    if (selected) {
+      selected.scrollIntoView({ block: "center" });
+    }
+  }, [canvases, gridView]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Sidebar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.SidebarHeader,
+      {
+        title: "Canvases",
+        actions: [
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: gridView ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListingIcon, { width: 24, height: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasThumbnailsIcon, {}) }),
+            title: gridView ? "List view" : "Grid view",
+            onClick: () => {
+              onChangeGridView(!gridView);
+            }
+          },
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListEditIcon, {}),
+            title: "Edit canvases",
+            disabled: gridView,
+            toggled: toggled.items,
+            onClick: () => toggle("items")
+          },
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CreateCanvasIcon, {}),
+            title: "Add new canvas",
+            onClick: () => canvasActions.create(),
+            disabled: !canCreateCanvas
+          }
+        ]
+      }
+    ),
+    gridView ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ThumbnailGridContainer, { children: canvases.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.CanvasThumbnailGridItem,
+      {
+        id: item.id,
+        selected: canvas?.resource.source.id === item.id,
+        onClick: () => {
+          open({ id: "current-canvas" });
+          canvasActions.edit(item);
+        }
+      },
+      item.id
+    )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.SidebarContent, { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editors.InputContainer, { $wide: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_editors.CanvasList,
+      {
+        id: items.focusId(),
+        list: items.get() || [],
+        inlineHandle: false,
+        activeId: canvas?.resource.source.id,
+        reorder: toggled.items ? (t) => items.reorder(t.startIndex, t.endIndex) : void 0,
+        onSelect: (item, idx) => {
+          open({ id: "current-canvas" });
+          canvasActions.edit(item, idx);
+        },
+        createActions: (0, import_editors.createAppActions)(items)
+      }
+    ) }) })
+  ] });
+}
+function ListEditIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_shell2 = require("@manifest-editor/shell");
+var import_react2 = require("react");
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_components2 = require("@manifest-editor/components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ManifestIcon({ title, titleId, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", "aria-labelledby": titleId, ...props, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { id: titleId, children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsx)(ManifestIcon, {}),
+  render: (state, ctx, app) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ManifestPanel, {});
+  }
+};
+function ManifestPanel() {
+  const { edit, open } = (0, import_shell2.useLayoutActions)();
+  const { descriptive, technical } = (0, import_shell2.useManifestEditor)();
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const label = descriptive.label.get();
+  const summary = descriptive.summary.get();
+  const requiredStatement = descriptive.requiredStatement.get();
+  const metadata = descriptive.metadata.get();
+  (0, import_react2.useEffect)(() => {
+    edit(manifest);
+    open({ id: "overview" });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_components2.Sidebar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_components2.SidebarHeader, { title: "Manifest summary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_components2.SidebarContent, { className: "p-4", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_iiif_vault.LocaleString, { as: "h2", className: "text-lg font-semibold mb-2 [&>a]:underline [&>a]:hover:text-slate-400", children: label }) : null,
+      summary ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_iiif_vault.LocaleString, { as: "p", className: "text-sm text-slate-800 block [&>a]:underline [&>a]:hover:text-slate-400 mb-2", children: summary }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {}),
+      requiredStatement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "py-2 text-black", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_iiif_vault.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__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_iiif_vault.LocaleString,
+            {
+              enableDangerouslySetInnerHTML: true,
+              className: "text-sm [&>a]:underline [&>a]:hover:text-slate-400",
+              children: requiredStatement.value
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("hr", {})
+      ] }) : null,
+      metadata && metadata.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_iiif_vault.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
+var import_components3 = require("@manifest-editor/components");
+var import_shell3 = require("@manifest-editor/shell");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var manifestOverview = {
+  id: "overview",
+  label: "Overview",
+  icon: "",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ManifestOverview, {})
+};
+function ManifestOverview() {
+  const { edit, open } = (0, import_shell3.useLayoutActions)();
+  const { structural, technical } = (0, import_shell3.useManifestEditor)();
+  const { items } = structural;
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  const [canCreateCanvas, canvasActions] = (0, import_shell3.useCreator)(manifest, "items", "Canvas");
+  const canvases = (0, import_components3.useFastList)(items.get(), 24);
+  if (!canvases || canvases.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components3.ManifestOverviewEmptyState, { onCreate: canvasActions.create, canCreate: canCreateCanvas }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components3.ThumbnailGridContainer, { wide: true, children: canvases.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_components3.CanvasThumbnailGridItem,
+    {
+      id: item.id,
+      onClick: () => {
+        open({ id: "current-canvas" });
+        open({ id: "canvas-listing", state: { gridView: true } });
+        canvasActions.edit(item);
+      }
+    },
+    item.id
+  )) });
+}
+
+// src/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var src_default = { id: "manifest-editor", title: "Manifest Editor", project: true, projectType: "Manifest" };
+var centerPanels = [
+  manifestOverview,
+  {
+    id: "current-canvas",
+    label: "Current canvas",
+    icon: "",
+    render: (state, { actions }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors2.CanvasPanelEditor, {})
+  },
+  {
+    id: "export",
+    label: "Export",
+    icon: "",
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_shell4.ExportPanel, {})
+  }
+];
+var leftPanels = [
+  manifestPanel,
+  canvasListing
+  // @todo we will come back to the image grid
+  // {
+  //   id: "image-grid",
+  //   label: "Image grid",
+  //   render: () => <ManifestItemsGrid />,
+  // },
+];
+var rightPanels = [import_shell4.baseEditor];
+var modals = [import_shell4.baseCreator];
+var editors = import_editors2.allEditors;
+var creators = import_creators.allCreators;
+var resources = ["Manifest", "Canvas", "ContentResource", "Agent", "AnnotationPage", "Annotation", "Range"];

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import * as _manifest_editor_creator_api from '@manifest-editor/creator-api';
+import * as _manifest_editor_shell from '@manifest-editor/shell';
+import { LayoutPanel } from '@manifest-editor/shell';
+
+declare const _default: {
+    id: string;
+    title: string;
+    project: boolean;
+    projectType: string;
+};
+
+declare const centerPanels: LayoutPanel[];
+declare const leftPanels: LayoutPanel[];
+declare const rightPanels: LayoutPanel[];
+declare const modals: LayoutPanel[];
+declare const editors: _manifest_editor_shell.EditorDefinition[];
+declare const creators: _manifest_editor_creator_api.CreatorDefinition[];
+declare const resources: string[];
+
+export { centerPanels, creators, _default as default, editors, leftPanels, modals, resources, rightPanels };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as _manifest_editor_creator_api from '@manifest-editor/creator-api';
+import * as _manifest_editor_shell from '@manifest-editor/shell';
+import { LayoutPanel } from '@manifest-editor/shell';
+
+declare const _default: {
+    id: string;
+    title: string;
+    project: boolean;
+    projectType: string;
+};
+
+declare const centerPanels: LayoutPanel[];
+declare const leftPanels: LayoutPanel[];
+declare const rightPanels: LayoutPanel[];
+declare const modals: LayoutPanel[];
+declare const editors: _manifest_editor_shell.EditorDefinition[];
+declare const creators: _manifest_editor_creator_api.CreatorDefinition[];
+declare const resources: string[];
+
+export { centerPanels, creators, _default as default, editors, leftPanels, modals, resources, rightPanels };

package/dist/index.js

@@ -0,0 +1,335 @@
+// src/index.tsx
+import { CanvasPanelEditor, allEditors } from "@manifest-editor/editors";
+import { allCreators } from "@manifest-editor/creators";
+import { ExportPanel, baseCreator, baseEditor } from "@manifest-editor/shell";
+
+// src/left-panels/canvas-listing.tsx
+import { InputContainer, useInStack, useToggleList, CanvasList, createAppActions } from "@manifest-editor/editors";
+import { useCreator, useLayoutActions, useManifestEditor } from "@manifest-editor/shell";
+import { useEffect, useLayoutEffect } from "react";
+import {
+  CanvasThumbnailGridItem,
+  CreateCanvasIcon,
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  ThumbnailGridContainer,
+  useFastList
+} from "@manifest-editor/components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ListingIcon = ({ 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(ListingIcon, {}),
+  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 { edit, 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) {
+      const key = items.get().findIndex((c) => c.id === canvas.resource.source.id);
+      if (key !== -1) {
+        open({ id: "current-canvas" });
+        canvasActions.edit({ id: canvas.resource.source.id, type: "Canvas" }, key);
+        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(ListingIcon, { width: 24, height: 24 }) : /* @__PURE__ */ jsx(CanvasThumbnailsIcon, {}) }),
+            title: gridView ? "List view" : "Grid view",
+            onClick: () => {
+              onChangeGridView(!gridView);
+            }
+          },
+          {
+            icon: /* @__PURE__ */ jsx(ListEditIcon, {}),
+            title: "Edit canvases",
+            disabled: gridView,
+            toggled: toggled.items,
+            onClick: () => toggle("items")
+          },
+          {
+            icon: /* @__PURE__ */ jsx(CreateCanvasIcon, {}),
+            title: "Add new canvas",
+            onClick: () => canvasActions.create(),
+            disabled: !canCreateCanvas
+          }
+        ]
+      }
+    ),
+    gridView ? /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(ThumbnailGridContainer, { children: canvases.map((item) => /* @__PURE__ */ jsx(
+      CanvasThumbnailGridItem,
+      {
+        id: item.id,
+        selected: canvas?.resource.source.id === item.id,
+        onClick: () => {
+          open({ id: "current-canvas" });
+          canvasActions.edit(item);
+        }
+      },
+      item.id
+    )) }) }) : /* @__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: toggled.items ? (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 { useLayoutActions as useLayoutActions2, useManifestEditor as useManifestEditor2 } from "@manifest-editor/shell";
+import { useEffect as useEffect2 } from "react";
+import { LocaleString, ManifestMetadata } from "react-iiif-vault";
+import { Sidebar as Sidebar2, SidebarContent as SidebarContent2, SidebarHeader as SidebarHeader2 } from "@manifest-editor/components";
+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__ */ jsx2(ManifestPanel, {});
+  }
+};
+function ManifestPanel() {
+  const { edit, open } = useLayoutActions2();
+  const { descriptive, technical } = useManifestEditor2();
+  const manifestId = technical.id.get();
+  const manifest = { id: manifestId, type: "Manifest" };
+  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" });
+  }, []);
+  return /* @__PURE__ */ jsxs2(Sidebar2, { children: [
+    /* @__PURE__ */ jsx2(SidebarHeader2, { title: "Manifest summary" }),
+    /* @__PURE__ */ jsxs2(SidebarContent2, { className: "p-4", 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, { 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(ManifestOverview, {})
+};
+function ManifestOverview() {
+  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
+  )) });
+}
+
+// src/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var src_default = { id: "manifest-editor", title: "Manifest Editor", project: true, projectType: "Manifest" };
+var centerPanels = [
+  manifestOverview,
+  {
+    id: "current-canvas",
+    label: "Current canvas",
+    icon: "",
+    render: (state, { actions }) => /* @__PURE__ */ jsx4(CanvasPanelEditor, {})
+  },
+  {
+    id: "export",
+    label: "Export",
+    icon: "",
+    render: () => /* @__PURE__ */ jsx4(ExportPanel, {})
+  }
+];
+var leftPanels = [
+  manifestPanel,
+  canvasListing
+  // @todo we will come back to the image grid
+  // {
+  //   id: "image-grid",
+  //   label: "Image grid",
+  //   render: () => <ManifestItemsGrid />,
+  // },
+];
+var rightPanels = [baseEditor];
+var modals = [baseCreator];
+var editors = allEditors;
+var creators = allCreators;
+var resources = ["Manifest", "Canvas", "ContentResource", "Agent", "AnnotationPage", "Annotation", "Range"];
+export {
+  centerPanels,
+  creators,
+  src_default as default,
+  editors,
+  leftPanels,
+  modals,
+  resources,
+  rightPanels
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@manifest-editor/manifest-preset",
+  "version": "1.0.2",
+  "type": "module",
+  "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/digirati-co-uk/iiif-manifest-editor.git",
+    "directory": "packages/manifest-preset"
+  },
+  "engines": {
+    "node": ">=18.14.1"
+  },
+  "keywords": [
+    "iiif",
+    "editor",
+    "typescript"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx",
+    "dev": "tsup src/index.tsx --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "tsup src/index.tsx"
+  },
+  "dependencies": {
+    "@iiif/helpers": "^1.2.12",
+    "@iiif/parser": "^2.1.2",
+    "@iiif/presentation-3": "^2.2.3",
+    "@iiif/presentation-3-normalized": "^0.9.7",
+    "@manifest-editor/components": "^1.0.2",
+    "@manifest-editor/creators": "^1.0.2",
+    "@manifest-editor/editors": "^1.0.2",
+    "@manifest-editor/shell": "^1.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-iiif-vault": "^1.2.1",
+    "styled-components": "6.1.8"
+  },
+  "devDependencies": {
+    "@manifest-editor/ui": "1.0.0",
+    "@repo/eslint-config": "0.0.0",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
+    "tiny-invariant": "^1.3.3",
+    "tsup": "^8.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "083fd2ce7d40755fb1857490e006e9854906d031"
+}