alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/LocaleMenu.js

@@ -2,38 +2,37 @@ import {
   useAtomValueRaw
 } from "../../chunks/chunk-D6UJHBJJ.js";
 import "../../chunks/chunk-CFNRVI3Y.js";
-import {
-  $7705c033048f6da7$export$353f5b6fc5456de1
-} from "../../chunks/chunk-OFEKTDRF.js";
-import "../../chunks/chunk-NIVGVRDS.js";
-import "../../chunks/chunk-IYAQC63Y.js";
-import "../../chunks/chunk-DNJX6CRV.js";
-import "../../chunks/chunk-AC4U3IMS.js";
-import "../../chunks/chunk-D6RGFNUW.js";
-import "../../chunks/chunk-RKDPDEF7.js";
-import "../../chunks/chunk-SJBZFMQ2.js";
-import "../../chunks/chunk-S4AU6SRS.js";
 import {
   dist_default
 } from "../../chunks/chunk-I4OYYAX5.js";
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/LocaleMenu.tsx
-import { Icon, Menu, MenuItem } from "alinea/components";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Icon
+} from "alinea/components";
 import { IcRoundUnfoldMore } from "../icons.js";
 
 // src/dashboard/app/LocaleMenu.module.css
 var LocaleMenu_default = {
-  "LocaleMenu-trigger": "alinea-LocaleMenu-trigger",
-  "LocaleMenuTrigger": "alinea-LocaleMenu-trigger",
   "LocaleMenu-label": "alinea-LocaleMenu-label",
   "LocaleMenuLabel": "alinea-LocaleMenu-label",
+  "LocaleMenu-trigger": "alinea-LocaleMenu-trigger",
+  "LocaleMenuTrigger": "alinea-LocaleMenu-trigger",
+  "LocaleMenu-label-fullName": "alinea-LocaleMenu-label-fullName",
+  "LocaleMenuLabelFullName": "alinea-LocaleMenu-label-fullName",
   "LocaleMenu-trigger-icon": "alinea-LocaleMenu-trigger-icon",
   "LocaleMenuTriggerIcon": "alinea-LocaleMenu-trigger-icon",
+  "is-lg": "alinea-is-lg",
+  "isLg": "alinea-is-lg",
   "LocaleMenu-label-code": "alinea-LocaleMenu-label-code",
-  "LocaleMenuLabelCode": "alinea-LocaleMenu-label-code",
-  "LocaleMenu-label-fullName": "alinea-LocaleMenu-label-fullName",
-  "LocaleMenuLabelFullName": "alinea-LocaleMenu-label-fullName"
+  "LocaleMenuLabelCode": "alinea-LocaleMenu-label-code"
 };
 
 // src/dashboard/app/LocaleMenu.tsx
@@ -66,7 +65,12 @@ function LocaleLabel({ locale }) {
     /* @__PURE__ */ jsx("span", { className: styles.LocaleMenu.label.fullName(), children: display.name })
   ] });
 }
-function LocaleMenu({ root, locale, onLocaleChange }) {
+function LocaleMenu({
+  root,
+  locale,
+  size,
+  onLocaleChange
+}) {
   const i18n = useAtomValueRaw(root.i18n);
   if (!i18n) return null;
   return /* @__PURE__ */ jsx(
@@ -74,6 +78,7 @@ function LocaleMenu({ root, locale, onLocaleChange }) {
     {
       locale,
       locales: i18n.locales,
+      size,
       onLocaleChange
     }
   );
@@ -82,41 +87,47 @@ function LocaleMenuSelect({
   ariaLabel = "Language",
   locale,
   locales,
+  size = "default",
   onLocaleChange
 }) {
   const activeLocale = locale ?? locales[0];
   if (!activeLocale) return null;
-  return /* @__PURE__ */ jsx(
-    Menu,
-    {
-      label: /* @__PURE__ */ jsxs($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": ariaLabel, className: styles.LocaleMenu.trigger(), children: [
-        /* @__PURE__ */ jsx(LocaleLabel, { locale: activeLocale }),
-        /* @__PURE__ */ jsx(
-          Icon,
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        "aria-label": ariaLabel,
+        className: styles.LocaleMenu.trigger({ lg: size === "lg" }),
+        children: [
+          /* @__PURE__ */ jsx(LocaleLabel, { locale: activeLocale }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: IcRoundUnfoldMore,
+              className: styles.LocaleMenu.trigger.icon()
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { "aria-label": ariaLabel, side: "bottom", align: "end", children: /* @__PURE__ */ jsx(
+      DropdownMenuRadioGroup,
+      {
+        value: activeLocale,
+        onValueChange: onLocaleChange,
+        children: locales.map((locale2) => /* @__PURE__ */ jsx(
+          DropdownMenuRadioItem,
           {
-            icon: IcRoundUnfoldMore,
-            className: styles.LocaleMenu.trigger.icon()
-          }
-        )
-      ] }),
-      "aria-label": ariaLabel,
-      popoverProps: { placement: "bottom right" },
-      selectionMode: "single",
-      selectedKeys: [activeLocale],
-      onAction: (key) => {
-        onLocaleChange(String(key));
-      },
-      children: locales.map((locale2) => /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          id: locale2,
-          textValue: localeDisplay(locale2).textValue,
-          children: /* @__PURE__ */ jsx(LocaleLabel, { locale: locale2 })
-        },
-        locale2
-      ))
-    }
-  );
+            value: locale2,
+            textValue: localeDisplay(locale2).textValue,
+            children: /* @__PURE__ */ jsx(LocaleLabel, { locale: locale2 })
+          },
+          locale2
+        ))
+      }
+    ) })
+  ] });
 }
 export {
   LocaleMenu,

package/dist/dashboard/app/MediaPreviewCell.d.ts

@@ -0,0 +1,8 @@
+import type { OverviewCellProps } from 'alinea/core/Overview';
+export interface MediaPreviewCellValue {
+    preview?: string | null;
+    averageColor?: string | null;
+    extension?: string | null;
+}
+/** The preview column of the media library */
+export declare function MediaPreviewCell({ value }: OverviewCellProps<MediaPreviewCellValue | undefined>): import("react").JSX.Element;

package/dist/dashboard/app/MediaPreviewCell.js

@@ -0,0 +1,50 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/MediaPreviewCell.tsx
+import { hasPreviewImage } from "alinea/core/media/Pdf";
+import { fileKindVisual } from "./FileKind.js";
+
+// src/dashboard/app/MediaPreviewCell.module.css
+var MediaPreviewCell_default = {
+  "is-file": "alinea-is-file",
+  "isFile": "alinea-is-file",
+  "MediaPreviewCell-image": "alinea-MediaPreviewCell-image",
+  "MediaPreviewCellImage": "alinea-MediaPreviewCell-image",
+  "MediaPreviewCell": "alinea-MediaPreviewCell",
+  "MediaPreviewCell-icon": "alinea-MediaPreviewCell-icon",
+  "MediaPreviewCellIcon": "alinea-MediaPreviewCell-icon"
+};
+
+// src/dashboard/app/MediaPreviewCell.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(MediaPreviewCell_default);
+function MediaPreviewCell({
+  value
+}) {
+  const preview = value?.preview;
+  const extension = value?.extension;
+  if (preview && extension && hasPreviewImage(extension))
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.MediaPreviewCell(),
+        style: { background: value?.averageColor ?? void 0 },
+        children: /* @__PURE__ */ jsx("img", { alt: "", className: styles.MediaPreviewCell.image(), src: preview })
+      }
+    );
+  if (!extension) return /* @__PURE__ */ jsx("span", { className: styles.MediaPreviewCell() });
+  const { icon: Icon, iconColor } = fileKindVisual(extension);
+  return /* @__PURE__ */ jsx("span", { className: styles.MediaPreviewCell({ file: true }), children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      className: styles.MediaPreviewCell.icon(),
+      style: { color: iconColor }
+    }
+  ) });
+}
+export {
+  MediaPreviewCell
+};

package/dist/dashboard/app/MoveConfirmDialog.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Asks before a drag moves pages under another parent, changing their urls,
+ * or tells why the dragged entries can not move there
+ */
+export declare function MoveConfirmDialog(): import("react").JSX.Element;

package/dist/dashboard/app/MoveConfirmDialog.js

@@ -0,0 +1,79 @@
+import {
+  useAtomValueRaw,
+  useSetAtom
+} from "../../chunks/chunk-D6UJHBJJ.js";
+import "../../chunks/chunk-CFNRVI3Y.js";
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/MoveConfirmDialog.tsx
+import { Button, Text } from "alinea/components";
+import {
+  confirmMovesAtom,
+  moveConfirmationAtom
+} from "alinea/dashboard/atoms/moveConfirmation";
+import { useState } from "react";
+import { IcRoundDriveFileMove } from "../icons.js";
+
+// src/dashboard/app/MoveConfirmDialog.module.css
+var MoveConfirmDialog_default = {
+  "MoveConfirmDialog-actions": "alinea-MoveConfirmDialog-actions",
+  "MoveConfirmDialogActions": "alinea-MoveConfirmDialog-actions"
+};
+
+// src/dashboard/app/MoveConfirmDialog.tsx
+import {
+  DashboardModal,
+  DashboardModalContent,
+  DashboardModalDialog,
+  DashboardModalFooter
+} from "./ui/DashboardModal.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(MoveConfirmDialog_default);
+function MoveConfirmDialog() {
+  const confirmation = useAtomValueRaw(moveConfirmationAtom);
+  const setConfirmMoves = useSetAtom(confirmMovesAtom);
+  const [shown, setShown] = useState(confirmation);
+  if (confirmation && confirmation !== shown) setShown(confirmation);
+  const { pages = [], refusal } = confirmation ?? shown ?? {};
+  const single = pages.length === 1;
+  const title = single && pages[0].title ? `"${pages[0].title}"` : "this page";
+  const answer = (confirmed) => confirmation?.resolve(confirmed);
+  return /* @__PURE__ */ jsx(
+    DashboardModal,
+    {
+      open: Boolean(confirmation),
+      onOpenChange: (isOpen) => {
+        if (!isOpen) answer(false);
+      },
+      children: refusal ? /* @__PURE__ */ jsxs(DashboardModalDialog, { label: "Can't move here", children: [
+        /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsx(Text, { as: "p", children: refusal }) }),
+        /* @__PURE__ */ jsx(DashboardModalFooter, { children: /* @__PURE__ */ jsx("div", { className: styles.MoveConfirmDialog.actions(), children: /* @__PURE__ */ jsx(Button, { onClick: () => answer(false), children: "OK" }) }) })
+      ] }) : /* @__PURE__ */ jsxs(DashboardModalDialog, { label: single ? "Move page" : "Move pages", children: [
+        /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsx(Text, { as: "p", children: single ? `Are you sure you want to move ${title}? This permanently changes the URL of this page and of all pages below it.` : `Are you sure you want to move these ${pages.length} pages? This permanently changes their URLs and those of all pages below them.` }) }),
+        /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => {
+                setConfirmMoves(false);
+                answer(true);
+              },
+              children: "Move and don't ask again"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.MoveConfirmDialog.actions(), children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => answer(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { icon: IcRoundDriveFileMove, onClick: () => answer(true), children: "Move" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  MoveConfirmDialog
+};

package/dist/dashboard/app/MoveDialog.d.ts

@@ -0,0 +1,10 @@
+import { type MoveTargets } from 'alinea/dashboard/atoms/move';
+export interface MoveDialogProps {
+    /** Where the entries of one root can move to, closed when undefined */
+    targets: MoveTargets | undefined;
+    onClose(): void;
+    /** Called once the entries were moved */
+    onMoved?(): void;
+}
+/** Picks an entry of the root, or its top level, to move entries to */
+export declare function MoveDialog({ targets, onClose, onMoved }: MoveDialogProps): import("react").JSX.Element;

package/dist/dashboard/app/MoveDialog.js

@@ -0,0 +1,161 @@
+import {
+  useAtomValueRawSync,
+  useSetAtom
+} from "../../chunks/chunk-D6UJHBJJ.js";
+import "../../chunks/chunk-CFNRVI3Y.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/MoveDialog.tsx
+import { Button, Text } from "alinea/components";
+import {
+  moveEntriesAtom
+} from "alinea/dashboard/atoms/move";
+import { Suspense, useState, useTransition } from "react";
+import { IcRoundDriveFileMove } from "../icons.js";
+import { ExplorerHeader } from "./Explorer.js";
+import {
+  ExplorerModal,
+  ExplorerModalActions,
+  ExplorerModalFooter,
+  ExplorerModalSuspense
+} from "./ExplorerModal.js";
+import {
+  ExplorerPickerContent,
+  usePickerExplorer
+} from "./ExplorerPickerContent.js";
+import {
+  DashboardModal,
+  DashboardModalCloseButton,
+  DashboardModalDialog
+} from "./ui/DashboardModal.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function moveDialogTitle(subjects) {
+  const [first] = subjects;
+  if (subjects.length === 1 && first) return `Move "${first.title}"`;
+  return `Move ${subjects.length} items`;
+}
+function MoveDialog({ targets, onClose, onMoved }) {
+  return /* @__PURE__ */ jsx(
+    DashboardModal,
+    {
+      open: Boolean(targets),
+      size: "explorer",
+      "aria-label": targets && moveDialogTitle(targets.subjects),
+      onOpenChange: (isOpen) => {
+        if (!isOpen) onClose();
+      },
+      children: targets && /* @__PURE__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsx(DashboardModalDialog, { variant: "explorer", isLoading: true }),
+          children: /* @__PURE__ */ jsx(
+            MoveDialogContent,
+            {
+              targets,
+              onClose,
+              onMoved
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function MoveDialogContent({
+  targets,
+  onClose,
+  onMoved
+}) {
+  const { subjects } = targets;
+  const [{ workspace, root, locale, parentId }] = subjects;
+  const { explorer, tree } = usePickerExplorer(
+    {
+      canSelect: targets.canSelect,
+      condition: targets.condition,
+      initialResultMode: "browse",
+      limitLocations: [{ workspace, root }],
+      nestedNavigation: true,
+      searchDepth: "all"
+    },
+    {
+      workspace,
+      root,
+      parentId: parentId ?? void 0,
+      locale: locale ?? void 0
+    },
+    "row"
+  );
+  const page = useAtomValueRawSync(explorer.page);
+  const {
+    items: [target]
+  } = useAtomValueRawSync(explorer.selectionActions);
+  const moveEntries = useSetAtom(moveEntriesAtom);
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState();
+  if (!page) return /* @__PURE__ */ jsx(DashboardModalDialog, { variant: "explorer", isLoading: true });
+  const isCurrent = (target2) => subjects.every((subject) => subject.parentId === target2);
+  function moveTo(target2) {
+    setError(void 0);
+    startTransition(async () => {
+      try {
+        await moveEntries(subjects, target2);
+      } catch (error2) {
+        setError(error2 instanceof Error ? error2.message : String(error2));
+        return;
+      }
+      onMoved?.();
+      onClose();
+    });
+  }
+  return /* @__PURE__ */ jsx(DashboardModalDialog, { variant: "explorer", children: /* @__PURE__ */ jsx(ExplorerModalSuspense, { children: /* @__PURE__ */ jsxs(ExplorerModal, { children: [
+    /* @__PURE__ */ jsx(
+      ExplorerHeader,
+      {
+        autoFocusSearch: true,
+        controls: /* @__PURE__ */ jsx(DashboardModalCloseButton, {}),
+        explorer,
+        navigate: true,
+        page
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ExplorerPickerContent,
+      {
+        explorer,
+        navigationLabel: "Move targets",
+        options: {},
+        page,
+        tree
+      }
+    ),
+    /* @__PURE__ */ jsxs(ExplorerModalFooter, { children: [
+      error ? /* @__PURE__ */ jsx(Text, { color: "destructive", asChild: true, children: /* @__PURE__ */ jsx("span", { role: "alert", children: error }) }) : /* @__PURE__ */ jsx(Text, { color: "muted", children: !target ? moveDialogTitle(subjects) : isCurrent(target.id) ? `Already in "${target.title}"` : `Move to "${target.title}"` }),
+      /* @__PURE__ */ jsxs(ExplorerModalActions, { children: [
+        targets.rootAccepts && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            disabled: isPending || isCurrent(null),
+            onClick: () => moveTo(null),
+            children: "Move to root"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "primary",
+            icon: IcRoundDriveFileMove,
+            disabled: !target || isCurrent(target.id) || isPending,
+            loading: isPending,
+            onClick: () => target && moveTo(target.id),
+            children: "Move"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+export {
+  MoveDialog
+};

package/dist/dashboard/app/NodeEditor.d.ts

@@ -0,0 +1,11 @@
+import type { Type } from 'alinea/core/Type';
+import type { PropsWithChildren } from 'react';
+import type { EditorNode } from '../atoms/editor.js';
+interface NodeEditorProps extends PropsWithChildren {
+    node: EditorNode;
+    readOnly?: boolean;
+    type: Type;
+}
+/** Edits the fields of a nested node, eg. a list row or an object */
+export declare function NodeEditor({ children, node, readOnly, type }: NodeEditorProps): import("react").JSX.Element;
+export {};

package/dist/dashboard/app/NodeEditor.js

@@ -0,0 +1,13 @@
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/NodeEditor.tsx
+import { EditorScope, useNodeEditor } from "../hooks.js";
+import { FieldsEditor } from "./EntryFields.js";
+import { jsx } from "react/jsx-runtime";
+function NodeEditor({ children, node, readOnly, type }) {
+  const editor = useNodeEditor(node, type, readOnly);
+  return /* @__PURE__ */ jsx(EditorScope, { editor, children: children ?? /* @__PURE__ */ jsx(FieldsEditor, {}) });
+}
+export {
+  NodeEditor
+};

package/dist/dashboard/app/OverviewCell.d.ts

@@ -0,0 +1,15 @@
+import { type TableColumn } from 'alinea/components';
+import type { Config } from 'alinea/core/Config';
+import { type OverviewColumnState, type OverviewRow } from 'alinea/dashboard/atoms/overview';
+import { type CompactFieldLink } from './CompactField.js';
+/** The table column of an overview column */
+export declare function overviewTableColumn(column: OverviewColumnState): TableColumn;
+/** The text of a cell, for tooltips and the accessible name of its row */
+export declare function overviewCellText(config: Config, column: OverviewColumnState, row: OverviewRow, links?: ReadonlyMap<string, CompactFieldLink>): string;
+export interface OverviewCellProps {
+    column: OverviewColumnState;
+    row: OverviewRow;
+    links?: ReadonlyMap<string, CompactFieldLink>;
+}
+/** The content of an overview cell */
+export declare function OverviewCell({ column, row, links }: OverviewCellProps): import("react").JSX.Element;