alinea 2.0.0-preview.7 → 2.0.0-preview.8

package/dist/field/list/ListField.view.js

@@ -87,6 +87,8 @@ import { SlugField } from "alinea/field/path/SlugField";
 import {
   createContext,
   Fragment,
+  memo,
+  useCallback,
   useContext,
   useMemo,
   useRef,
@@ -95,29 +97,29 @@ import {
 
 // src/field/list/ListField.module.css
 var ListField_default = {
-  "ListFieldCreateActions-button": "alinea-ListFieldCreateActions-button",
-  "ListFieldCreateActionsButton": "alinea-ListFieldCreateActions-button",
+  "ListFieldTypePicker-dialog": "alinea-ListFieldTypePicker-dialog",
+  "ListFieldTypePickerDialog": "alinea-ListFieldTypePicker-dialog",
+  "ListFieldTypePicker-list": "alinea-ListFieldTypePicker-list",
+  "ListFieldTypePickerList": "alinea-ListFieldTypePicker-list",
   "ListFieldView-rowDropTarget": "alinea-ListFieldView-rowDropTarget",
   "ListFieldViewRowDropTarget": "alinea-ListFieldView-rowDropTarget",
-  "ListFieldCreateActions": "alinea-ListFieldCreateActions",
-  "ListFieldView-insertAction": "alinea-ListFieldView-insertAction",
-  "ListFieldViewInsertAction": "alinea-ListFieldView-insertAction",
-  "ListFieldView-dropIndicator": "alinea-ListFieldView-dropIndicator",
-  "ListFieldViewDropIndicator": "alinea-ListFieldView-dropIndicator",
+  "ListFieldTypePicker-search": "alinea-ListFieldTypePicker-search",
+  "ListFieldTypePickerSearch": "alinea-ListFieldTypePicker-search",
   "ListFieldTypePicker-trigger": "alinea-ListFieldTypePicker-trigger",
   "ListFieldTypePickerTrigger": "alinea-ListFieldTypePicker-trigger",
-  "ListFieldTypePicker-popover": "alinea-ListFieldTypePicker-popover",
-  "ListFieldTypePickerPopover": "alinea-ListFieldTypePicker-popover",
-  "ListFieldTypePicker-list": "alinea-ListFieldTypePicker-list",
-  "ListFieldTypePickerList": "alinea-ListFieldTypePicker-list",
-  "ListFieldTypePicker-dialog": "alinea-ListFieldTypePicker-dialog",
-  "ListFieldTypePickerDialog": "alinea-ListFieldTypePicker-dialog",
+  "ListFieldView-insertAction": "alinea-ListFieldView-insertAction",
+  "ListFieldViewInsertAction": "alinea-ListFieldView-insertAction",
   "ListFieldTypePicker-item": "alinea-ListFieldTypePicker-item",
   "ListFieldTypePickerItem": "alinea-ListFieldTypePicker-item",
-  "ListFieldTypePicker-search": "alinea-ListFieldTypePicker-search",
-  "ListFieldTypePickerSearch": "alinea-ListFieldTypePicker-search",
+  "ListFieldCreateActions-button": "alinea-ListFieldCreateActions-button",
+  "ListFieldCreateActionsButton": "alinea-ListFieldCreateActions-button",
+  "ListFieldView-dropIndicator": "alinea-ListFieldView-dropIndicator",
+  "ListFieldViewDropIndicator": "alinea-ListFieldView-dropIndicator",
+  "ListFieldCreateActions": "alinea-ListFieldCreateActions",
   "ListFieldTypePicker-empty": "alinea-ListFieldTypePicker-empty",
-  "ListFieldTypePickerEmpty": "alinea-ListFieldTypePicker-empty"
+  "ListFieldTypePickerEmpty": "alinea-ListFieldTypePicker-empty",
+  "ListFieldTypePicker-popover": "alinea-ListFieldTypePicker-popover",
+  "ListFieldTypePickerPopover": "alinea-ListFieldTypePicker-popover"
 };
 
 // src/field/list/ListField.view.tsx
@@ -191,14 +193,28 @@ function ListFieldView({ field }) {
   function toggleAll() {
     setFoldedIds(allExpanded ? new Set(rowIds) : /* @__PURE__ */ new Set());
   }
-  function toggleRow(rowId) {
+  const toggleRow = useCallback((rowId) => {
     setFoldedIds((current) => {
       const next = new Set(current);
       if (next.has(rowId)) next.delete(rowId);
       else next.add(rowId);
       return next;
     });
-  }
+  }, []);
+  const endRowDrag = useCallback(() => {
+    setDraggingRowId(null);
+    setDropIndicator(null);
+  }, []);
+  const changeDropIndicator = useCallback(
+    (index, position) => {
+      setDropIndicator((current) => {
+        if (current?.index === index && current.position === position)
+          return current;
+        return position ? { index, position } : null;
+      });
+    },
+    []
+  );
   function addRow(typeName, type) {
     pushRow(createRow(typeName, type));
   }
@@ -223,21 +239,18 @@ function ListFieldView({ field }) {
             /* @__PURE__ */ jsx(
               ListFieldRow,
               {
-                addBetweenRow: (value, position = "after") => insertRow(insertIndex(index, position), value),
                 canCreate,
                 draggingRowId,
-                foldedIds,
+                expanded: !foldedIds.has(rowIds[index]),
                 index,
                 list,
                 readOnly,
                 onCopyRow: copyRow,
+                onInsertRow: insertRow,
                 onMoveRow: moveRow,
-                onRowDragEnd: () => {
-                  setDraggingRowId(null);
-                  setDropIndicator(null);
-                },
-                onRowDragStart: () => setDraggingRowId(rowIds[index] ?? null),
-                onDropIndicatorChange: (position) => setDropIndicator(position ? { index, position } : null),
+                onRowDragEnd: endRowDrag,
+                onRowDragStart: setDraggingRowId,
+                onDropIndicatorChange: changeDropIndicator,
                 onToggleRow: toggleRow,
                 row,
                 rows: nodes.length,
@@ -444,9 +457,10 @@ function ListFieldInsertPanel({
     )
   ] }) });
 }
-function ListFieldRow({
+var ListFieldRow = memo(function ListFieldRow2({
   canCreate,
   draggingRowId,
+  expanded,
   index,
   list,
   readOnly,
@@ -455,14 +469,13 @@ function ListFieldRow({
   schema,
   typeItems,
   pasted,
-  foldedIds,
   onToggleRow,
   onCopyRow,
+  onInsertRow,
   onMoveRow,
   onRowDragEnd,
   onRowDragStart,
-  onDropIndicatorChange,
-  addBetweenRow
+  onDropIndicatorChange
 }) {
   const itemId = useAtomValueRaw(row.field("_id"));
   const typeName = useAtomValueRaw(row.field("_type"));
@@ -483,7 +496,7 @@ function ListFieldRow({
       return ["move"];
     },
     onDragEnd: onRowDragEnd,
-    onDragStart: onRowDragStart,
+    onDragStart: () => onRowDragStart(itemId),
     isDisabled: readOnly,
     preview: dragPreview
   });
@@ -500,19 +513,19 @@ function ListFieldRow({
     },
     onDropEnter(event) {
       const position = rowDropPosition(rowRef.current, event.y);
-      onDropIndicatorChange(position);
+      onDropIndicatorChange(index, position);
     },
     onDropMove(event) {
       const position = rowDropPosition(rowRef.current, event.y);
-      onDropIndicatorChange(position);
+      onDropIndicatorChange(index, position);
     },
     onDropExit() {
-      onDropIndicatorChange(null);
+      onDropIndicatorChange(index, null);
     },
     async onDrop(event) {
       const position = rowDropPosition(rowRef.current, event.y);
       const rowId = await getDraggedRowId(event.items, LIST_FIELD_ROW_DRAG_TYPE);
-      onDropIndicatorChange(null);
+      onDropIndicatorChange(index, null);
       if (!rowId) return;
       onMoveRow(rowId, insertIndex(index, position));
     }
@@ -521,7 +534,6 @@ function ListFieldRow({
   if (!type) return null;
   const label = Type.label(type);
   const typeIcon = getType(type).icon;
-  const expanded = !foldedIds.has(itemId);
   function moveCurrentRow(direction) {
     moveListRow(index, index + direction);
   }
@@ -573,8 +585,8 @@ function ListFieldRow({
                 onCustomLabelChange: updateCustomLabel,
                 onCopy: () => onCopyRow(itemId),
                 onDelete: deleteRow,
-                onInsertBefore: (value) => addBetweenRow(value, "before"),
-                onInsertAfter: (value) => addBetweenRow(value, "after"),
+                onInsertBefore: (value) => onInsertRow(insertIndex(index, "before"), value),
+                onInsertAfter: (value) => onInsertRow(insertIndex(index, "after"), value),
                 onMoveDown: () => moveCurrentRow(1),
                 onMoveUp: () => moveCurrentRow(-1),
                 onToggle: () => onToggleRow(itemId)
@@ -586,7 +598,7 @@ function ListFieldRow({
       )
     }
   ) });
-}
+});
 function ListFieldDropIndicator({ active }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -663,134 +675,144 @@ function ListFieldRowHeader({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs(ListRowActions, { children: [
-      /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: actionsOpen, onOpenChange: setActionsOpen, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "plain",
-            "aria-label": `${label} actions`,
-            icon: IcRoundMoreHoriz,
-            size: "icon-small"
-          }
-        ),
-        /* @__PURE__ */ jsx(Popover, { placement: "bottom right", children: insertPosition ? /* @__PURE__ */ jsx(
-          ListFieldInsertPanel,
-          {
-            items: insertItems,
-            label: `Insert ${insertPosition}`,
-            pasted,
-            pasteLabel: pasted ? pasteBlockLabel(pasted, insertItems) : void 0,
-            onPaste: (row) => {
-              if (insertPosition === "before") onInsertBefore(cloneRow(row));
-              else onInsertAfter(cloneRow(row));
-              closeActions();
-            },
-            onSelect: (item) => {
-              const row = createRow(item.id, item.type);
-              if (insertPosition === "before") onInsertBefore(row);
-              else onInsertAfter(row);
-              closeActions();
-            }
-          }
-        ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsxs(ListRowSettings, { children: [
-            /* @__PURE__ */ jsx(
-              TextField,
-              {
-                label: "Label",
-                autoFocus: true,
-                isDisabled: readOnly || isPreview,
-                onChange: onCustomLabelChange,
-                value: customLabel
-              }
-            ),
+      /* @__PURE__ */ jsxs(
+        DialogTrigger,
+        {
+          isOpen: actionsOpen,
+          onOpenChange: (isOpen) => {
+            if (isOpen) setActionsOpen(true);
+            else closeActions();
+          },
+          children: [
             /* @__PURE__ */ jsx(
-              SlugField,
-              {
-                fieldValue: anchor,
-                label: "Anchor",
-                isDisabled: readOnly || isPreview,
-                onChange: onAnchorChange,
-                source: customLabel
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(MenuSeparator, {}),
-          /* @__PURE__ */ jsx(ListRowSettings, { actions: true, children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              appearance: "plain",
-              onPress: () => {
-                onCopy?.();
-                closeActions();
-              },
-              children: [
-                /* @__PURE__ */ jsx(Icon, { icon: IcBaselineContentCopy }),
-                "Copy"
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(MenuSeparator, {}),
-          /* @__PURE__ */ jsxs(ListRowSettings, { actions: true, children: [
-            !isFirstRow && /* @__PURE__ */ jsxs(
               Button,
               {
                 appearance: "plain",
-                onPress: () => {
-                  onMoveUp?.();
-                  closeActions();
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowUpward }),
-                  "Move up"
-                ]
+                "aria-label": `${label} actions`,
+                icon: IcRoundMoreHoriz,
+                size: "icon-small"
               }
             ),
-            !isLastRow && /* @__PURE__ */ jsxs(
-              Button,
+            /* @__PURE__ */ jsx(Popover, { placement: "bottom right", children: insertPosition ? /* @__PURE__ */ jsx(
+              ListFieldInsertPanel,
               {
-                appearance: "plain",
-                onPress: () => {
-                  onMoveDown?.();
+                items: insertItems,
+                label: `Insert ${insertPosition}`,
+                pasted,
+                pasteLabel: pasted ? pasteBlockLabel(pasted, insertItems) : void 0,
+                onPaste: (row) => {
+                  if (insertPosition === "before") onInsertBefore(cloneRow(row));
+                  else onInsertAfter(cloneRow(row));
                   closeActions();
                 },
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowDownward }),
-                  "Move down"
-                ]
-              }
-            ),
-            canInsert && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx(
-                ListFieldInsertAction,
-                {
-                  icon: IcRoundFirstPage,
-                  isDisabled: Boolean(readOnly || isPreview),
-                  items: insertItems,
-                  label: "Insert before",
-                  pasted,
-                  onClose: closeActions,
-                  onOpenPicker: () => setInsertPosition("before"),
-                  onSelect: (item) => onInsertBefore(createRow(item.id, item.type))
+                onSelect: (item) => {
+                  const row = createRow(item.id, item.type);
+                  if (insertPosition === "before") onInsertBefore(row);
+                  else onInsertAfter(row);
+                  closeActions();
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                ListFieldInsertAction,
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+              /* @__PURE__ */ jsxs(ListRowSettings, { children: [
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "Label",
+                    autoFocus: true,
+                    isDisabled: readOnly || isPreview,
+                    onChange: onCustomLabelChange,
+                    value: customLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SlugField,
+                  {
+                    fieldValue: anchor,
+                    label: "Anchor",
+                    isDisabled: readOnly || isPreview,
+                    onChange: onAnchorChange,
+                    source: customLabel
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(ListRowSettings, { actions: true, children: /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  icon: IcRoundLastPage,
-                  isDisabled: Boolean(readOnly || isPreview),
-                  items: insertItems,
-                  label: "Insert after",
-                  pasted,
-                  onClose: closeActions,
-                  onOpenPicker: () => setInsertPosition("after"),
-                  onSelect: (item) => onInsertAfter(createRow(item.id, item.type))
+                  appearance: "plain",
+                  onPress: () => {
+                    onCopy?.();
+                    closeActions();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: IcBaselineContentCopy }),
+                    "Copy"
+                  ]
                 }
-              )
-            ] })
-          ] })
-        ] }) })
-      ] }),
+              ) }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsxs(ListRowSettings, { actions: true, children: [
+                !isFirstRow && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    appearance: "plain",
+                    onPress: () => {
+                      onMoveUp?.();
+                      closeActions();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowUpward }),
+                      "Move up"
+                    ]
+                  }
+                ),
+                !isLastRow && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    appearance: "plain",
+                    onPress: () => {
+                      onMoveDown?.();
+                      closeActions();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowDownward }),
+                      "Move down"
+                    ]
+                  }
+                ),
+                canInsert && /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx(
+                    ListFieldInsertAction,
+                    {
+                      icon: IcRoundFirstPage,
+                      isDisabled: Boolean(readOnly || isPreview),
+                      items: insertItems,
+                      label: "Insert before",
+                      pasted,
+                      onClose: closeActions,
+                      onOpenPicker: () => setInsertPosition("before"),
+                      onSelect: (item) => onInsertBefore(createRow(item.id, item.type))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ListFieldInsertAction,
+                    {
+                      icon: IcRoundLastPage,
+                      isDisabled: Boolean(readOnly || isPreview),
+                      items: insertItems,
+                      label: "Insert after",
+                      pasted,
+                      onClose: closeActions,
+                      onOpenPicker: () => setInsertPosition("after"),
+                      onSelect: (item) => onInsertAfter(createRow(item.id, item.type))
+                    }
+                  )
+                ] })
+              ] })
+            ] }) })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx(
         Button,
         {

package/dist/field/metadata/MetadataField.d.ts

@@ -1,6 +1,7 @@
 import type { FieldOptions } from 'alinea/core/Field';
 import { RecordField } from 'alinea/core/field/RecordField';
 import { ScalarField } from 'alinea/core/field/ScalarField';
+import { type Section, type SectionData } from 'alinea/core/Section';
 import { Type } from 'alinea/core/Type';
 import { type ImageField, type ImageLink } from 'alinea/field/link';
 import { type ObjectField } from 'alinea/field/object';
@@ -13,19 +14,23 @@ export interface MetadataTimestampOptions extends FieldOptions<number | null> {
 export interface MetadataUserOptions extends FieldOptions<MetadataAuditUser> {
     width?: number;
 }
-export interface MetadataFields {
+export interface MetadataSeoFields {
     title: TextField;
     description: TextField;
-    aliases: AliasesField;
     openGraph: ObjectField<{
         image: ImageField;
         title: TextField;
         description: TextField;
     }>;
+}
+export interface MetadataDetailsFields {
     createdAt: MetadataTimestampField;
     createdBy: MetadataUserField;
     updatedAt: MetadataTimestampField;
     updatedBy: MetadataUserField;
+    aliases: AliasesField;
+}
+export interface MetadataFields extends MetadataSeoFields, MetadataDetailsFields {
 }
 export interface MetadataAuditUser {
     name: string;
@@ -47,6 +52,15 @@ export interface Metadata {
 }
 export interface MetadataOptions extends FieldOptions<Metadata> {
     fields: Type<MetadataFields>;
+    seo: Type<MetadataSeoFields>;
+    details: Type<MetadataDetailsFields>;
+    /** The details are rendered by a separate `metadataDetails` section */
+    detailsSection?: boolean;
+}
+export interface MetadataConfig {
+    /** Leave the details out of the field view, render them with
+     * `metadataDetails(field)` instead */
+    detailsSection?: boolean;
 }
 export declare class MetadataField extends RecordField<Metadata, MetadataOptions> {
 }
@@ -56,4 +70,15 @@ export declare class MetadataTimestampField extends ScalarField<number | null, M
 }
 export declare class MetadataUserField extends ScalarField<MetadataAuditUser, MetadataUserOptions> {
 }
-export declare function metadata(label?: string): MetadataField;
+export declare function metadata(label?: string, { detailsSection }?: MetadataConfig): MetadataField;
+export declare class MetadataDetailsSection implements SectionData {
+    field: MetadataField;
+    view: string;
+    definition: {};
+    fields: {};
+    sections: never[];
+    constructor(field: MetadataField);
+}
+/** Renders the created/updated details and aliases of a metadata field
+ * created with `detailsSection: true` */
+export declare function metadataDetails(field: MetadataField): Section;

package/dist/field/metadata/MetadataField.js

@@ -3,6 +3,7 @@ import "../../chunks/chunk-CQ52GEHY.js";
 // src/field/metadata/MetadataField.ts
 import { RecordField } from "alinea/core/field/RecordField";
 import { ScalarField } from "alinea/core/field/ScalarField";
+import { section } from "alinea/core/Section";
 import { Type, type } from "alinea/core/Type";
 import { isRecord } from "alinea/core/util/Objects";
 import { viewKeys } from "alinea/dashboard/ViewKeys";
@@ -21,8 +22,8 @@ var MetadataTimestampField = class extends ScalarField {
 };
 var MetadataUserField = class extends ScalarField {
 };
-function metadata(label = "Metadata") {
-  const fields = type("Fields", {
+function metadata(label = "Metadata", { detailsSection } = {}) {
+  const seo = type("SEO", {
     fields: {
       title: text("Title"),
       description: text("Description", {
@@ -32,7 +33,6 @@ function metadata(label = "Metadata") {
           if (value.length > 160) return "Too many characters.";
         }
       }),
-      aliases: aliases(),
       openGraph: object("Open Graph", {
         fields: {
           image: image("Image", {
@@ -44,17 +44,39 @@ function metadata(label = "Metadata") {
             help: "If empty, default description"
           })
         }
-      }),
+      })
+    }
+  });
+  const details = type("Details", {
+    fields: {
       createdAt: timestamp("Created at"),
       createdBy: user("Created by"),
       updatedAt: timestamp("Updated at"),
-      updatedBy: user("Updated by")
+      updatedBy: user("Updated by"),
+      aliases: aliases()
+    }
+  });
+  const { title, description, openGraph } = seo;
+  const { createdAt, createdBy, updatedAt, updatedBy } = details;
+  const fields = type("Fields", {
+    fields: {
+      title,
+      description,
+      aliases: details.aliases,
+      openGraph,
+      createdAt,
+      createdBy,
+      updatedAt,
+      updatedBy
     }
   });
   const result = new MetadataField(fields, {
     options: {
       label,
-      fields
+      fields,
+      seo,
+      details,
+      detailsSection
     },
     defaultValue() {
       return Type.initialValue(fields);
@@ -75,6 +97,19 @@ function metadata(label = "Metadata") {
   });
   return Object.assign(result, fields);
 }
+var MetadataDetailsSection = class {
+  constructor(field) {
+    this.field = field;
+  }
+  field;
+  view = viewKeys.MetadataDetailsView;
+  definition = {};
+  fields = {};
+  sections = [];
+};
+function metadataDetails(field) {
+  return section(new MetadataDetailsSection(field));
+}
 function timestamp(label) {
   return new MetadataTimestampField({
     options: {
@@ -145,9 +180,11 @@ function isMetadataAuditUser(value) {
   return typeof value.name === "string" && typeof value.email === "string";
 }
 export {
+  MetadataDetailsSection,
   MetadataField,
   MetadataTimestampField,
   MetadataUserField,
   aliases2 as aliases,
-  metadata
+  metadata,
+  metadataDetails
 };

package/dist/field/metadata/MetadataField.view.d.ts

@@ -1,3 +1,4 @@
+import { Section } from 'alinea/core/Section';
 import { MetadataField, MetadataTimestampField, MetadataUserField } from 'alinea/field/metadata';
 export interface MetadataFieldViewProps {
     field: MetadataField;
@@ -11,3 +12,7 @@ export interface MetadataUserFieldViewProps {
 }
 export declare function MetadataUserFieldView({ field }: MetadataUserFieldViewProps): import("react").JSX.Element;
 export declare function MetadataFieldView({ field }: MetadataFieldViewProps): import("react").JSX.Element;
+export interface MetadataDetailsViewProps {
+    section: Section;
+}
+export declare function MetadataDetailsView({ section }: MetadataDetailsViewProps): import("react").JSX.Element;