alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/CompactField.js

@@ -1,9 +1,7 @@
 import {
   useAtomValueRaw
 } from "../../chunks/chunk-D6UJHBJJ.js";
-import {
-  atom
-} from "../../chunks/chunk-CFNRVI3Y.js";
+import "../../chunks/chunk-CFNRVI3Y.js";
 import {
   dist_default
 } from "../../chunks/chunk-I4OYYAX5.js";
@@ -12,66 +10,106 @@ import "../../chunks/chunk-CQ52GEHY.js";
 // src/dashboard/app/CompactField.tsx
 import { Field } from "alinea/core/Field";
 import { Type } from "alinea/core/Type";
-import { isRecord } from "alinea/core/util/Objects";
-import { viewsAtom } from "alinea/dashboard/atoms/core";
-import { useMemo } from "react";
-import { Badge } from "./Badge.js";
+import { isRecord, keys } from "alinea/core/util/Objects";
+import { resolveView } from "alinea/core/View";
+import { DateField } from "alinea/field/date/DateField";
+import {
+  LocalisedField,
+  selectLocalisedValue
+} from "alinea/field/localiser/Localiser";
+import { Badge, Button } from "alinea/components";
+import { viewsAtom } from "../atoms/core.js";
 
 // src/dashboard/app/CompactField.module.css
 var CompactField_default = {
-  "CompactField-record-field": "alinea-CompactField-record-field",
-  "CompactFieldRecordField": "alinea-CompactField-record-field",
+  "CompactField-link-label": "alinea-CompactField-link-label",
+  "CompactFieldLinkLabel": "alinea-CompactField-link-label",
+  "CompactField-muted": "alinea-CompactField-muted",
+  "CompactFieldMuted": "alinea-CompactField-muted",
+  "CompactField-link-preview": "alinea-CompactField-link-preview",
+  "CompactFieldLinkPreview": "alinea-CompactField-link-preview",
+  "CompactField-record-value": "alinea-CompactField-record-value",
+  "CompactFieldRecordValue": "alinea-CompactField-record-value",
+  "CompactField-record-label": "alinea-CompactField-record-label",
+  "CompactFieldRecordLabel": "alinea-CompactField-record-label",
+  "CompactField-list-count": "alinea-CompactField-list-count",
+  "CompactFieldListCount": "alinea-CompactField-list-count",
   "CompactField": "alinea-CompactField",
-  "CompactField-items": "alinea-CompactField-items",
-  "CompactFieldItems": "alinea-CompactField-items",
   "CompactField-text": "alinea-CompactField-text",
   "CompactFieldText": "alinea-CompactField-text",
-  "CompactField-list-count": "alinea-CompactField-list-count",
-  "CompactFieldListCount": "alinea-CompactField-list-count",
-  "CompactField-record": "alinea-CompactField-record",
-  "CompactFieldRecord": "alinea-CompactField-record",
-  "CompactField-record-label": "alinea-CompactField-record-label",
-  "CompactFieldRecordLabel": "alinea-CompactField-record-label",
+  "CompactField-items": "alinea-CompactField-items",
+  "CompactFieldItems": "alinea-CompactField-items",
   "CompactField-json": "alinea-CompactField-json",
   "CompactFieldJson": "alinea-CompactField-json",
-  "CompactField-muted": "alinea-CompactField-muted",
-  "CompactFieldMuted": "alinea-CompactField-muted",
-  "CompactField-record-value": "alinea-CompactField-record-value",
-  "CompactFieldRecordValue": "alinea-CompactField-record-value"
+  "CompactField-record-field": "alinea-CompactField-record-field",
+  "CompactFieldRecordField": "alinea-CompactField-record-field",
+  "CompactField-record": "alinea-CompactField-record",
+  "CompactFieldRecord": "alinea-CompactField-record",
+  "CompactField-link": "alinea-CompactField-link",
+  "CompactFieldLink": "alinea-CompactField-link"
 };
 
 // src/dashboard/app/CompactField.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(CompactField_default);
-function CompactField({ field, value }) {
-  const customView = Field.compactView(field);
-  const resolvedViewAtom = useMemo(
-    () => atom(
-      (get) => typeof customView === "string" ? get(viewsAtom)[customView] : void 0
-    ),
-    [customView]
+function CompactField({ field, value, ...context }) {
+  const [resolvedField, resolvedValue] = unlocalise(field, value, context);
+  return /* @__PURE__ */ jsx(
+    CompactFieldView,
+    {
+      field: resolvedField,
+      value: resolvedValue,
+      ...context
+    }
+  );
+}
+function unlocalise(field, value, context) {
+  if (!(field instanceof LocalisedField)) return [field, value];
+  const { inner, locales, fallback } = field.localisation;
+  if (value !== void 0 && value !== null && !isRecord(value))
+    return unlocalise(inner, value, context);
+  return unlocalise(
+    inner,
+    selectLocalisedValue({
+      value: value ?? {},
+      locale: context.locale ?? null,
+      // A field that uses the locales of its root has the locales it stores
+      locales: locales ?? keys(value ?? {}),
+      fallback
+    }),
+    context
   );
-  const ResolvedView = useAtomValueRaw(resolvedViewAtom);
-  if (typeof customView === "function") return customView({ field, value });
-  if (ResolvedView) return /* @__PURE__ */ jsx(ResolvedView, { field, value });
-  return /* @__PURE__ */ jsx(CompactFieldFallback, { field, value });
+}
+function CompactFieldView(props) {
+  const views = useAtomValueRaw(viewsAtom);
+  const customView = Field.compactView(props.field);
+  const View = customView ? resolveView(views, customView) : void 0;
+  if (View) return /* @__PURE__ */ jsx(View, { ...props });
+  return /* @__PURE__ */ jsx(CompactFieldFallback, { ...props });
 }
 function CompactRecordFields({
   fields,
   layout = "inline",
-  value
+  value,
+  ...context
 }) {
-  return /* @__PURE__ */ jsx("span", { className: styles.CompactField(), "data-layout": layout, children: renderRecordValue(fields, value, {
+  return /* @__PURE__ */ jsx("span", { className: styles.CompactField(), "data-layout": layout, children: renderRecordValue(fields, value, context, {
     includeEmpty: layout === "footer",
     limit: layout === "footer" ? void 0 : 3
   }) });
 }
-function compactFieldText(field, value) {
+function compactFieldText(field, value, context = {}) {
+  const [resolvedField, resolvedValue] = unlocalise(field, value, context);
+  return compactResolvedText(resolvedField, resolvedValue, context);
+}
+function compactResolvedText(field, value, context) {
   const options = Field.options(field);
   if (isEmptyValue(value)) return "-";
   if (typeof value === "boolean") return value ? "Yes" : "No";
-  if (typeof value === "string") return options.options?.[value] ?? value;
-  if (typeof value === "number") return String(value);
+  if (typeof value === "string") return stringText(field, value, options);
+  if (typeof value === "number") return numberText(value);
+  const links = linkRows(value);
+  if (links) return links.map((link) => linkLabel(link, context)).join(", ");
   if (Array.isArray(value)) {
     if (value.length === 0) return "-";
     if (options.schema) return itemCount(value.length);
@@ -80,14 +118,14 @@ function compactFieldText(field, value) {
     return value.map((item) => compactValueText(item, options)).join(", ");
   }
   if (options.fields && isRecord(value)) {
-    return compactRecordText(Type.fields(options.fields), value);
+    return compactRecordText(Type.fields(options.fields), value, context);
   }
   return compactValueText(value, options);
 }
-function CompactFieldFallback({ field, value }) {
-  return /* @__PURE__ */ jsx("span", { className: styles.CompactField(), "data-empty": isEmptyValue(value), children: renderCompactValue(field, value) });
+function CompactFieldFallback({ field, value, ...context }) {
+  return /* @__PURE__ */ jsx("span", { className: styles.CompactField(), children: renderCompactValue(field, value, context) });
 }
-function renderCompactValue(field, value) {
+function renderCompactValue(field, value, context) {
   const options = Field.options(field);
   if (isEmptyValue(value))
     return /* @__PURE__ */ jsx("span", { className: styles.CompactField.muted(), children: "-" });
@@ -95,17 +133,61 @@ function renderCompactValue(field, value) {
     return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: value ? "Yes" : "No" });
   }
   if (typeof value === "string") {
-    return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: options.options?.[value] ?? value });
+    return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: stringText(field, value, options) });
   }
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: value });
+    return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: numberText(value) });
   }
+  const links = linkRows(value);
+  if (links) return renderLinks(links, context);
   if (Array.isArray(value)) return renderArrayValue(value, options);
   if (options.fields && isRecord(value)) {
-    return renderRecordValue(Type.fields(options.fields), value);
+    return renderRecordValue(Type.fields(options.fields), value, context);
   }
+  const text = textContent(value);
+  if (text) return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: text });
   return /* @__PURE__ */ jsx("span", { className: styles.CompactField.json(), children: jsonText(value) });
 }
+var visibleLinks = 3;
+function renderLinks(links, context) {
+  if (links.length === 0)
+    return /* @__PURE__ */ jsx("span", { className: styles.CompactField.muted(), children: "-" });
+  const hidden = links.length - visibleLinks;
+  return /* @__PURE__ */ jsxs("span", { className: styles.CompactField.items(), children: [
+    links.slice(0, visibleLinks).map((link, index) => {
+      const entryId = typeof link._entry === "string" ? link._entry : void 0;
+      const preview = entryId ? context.links?.get(entryId)?.preview : void 0;
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        preview && /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: "",
+            className: styles.CompactField.link.preview(),
+            src: preview
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles.CompactField.link.label(), children: linkLabel(link, context) })
+      ] });
+      const { onOpenEntry } = context;
+      if (entryId && link._type === "entry" && onOpenEntry)
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "link",
+            className: styles.CompactField.link(),
+            onClick: () => onOpenEntry(entryId),
+            children: content
+          },
+          index
+        );
+      return /* @__PURE__ */ jsx("span", { className: styles.CompactField.link(), children: content }, index);
+    }),
+    hidden > 0 && /* @__PURE__ */ jsxs("span", { className: styles.CompactField.list.count(), children: [
+      "+",
+      hidden
+    ] })
+  ] });
+}
 function renderArrayValue(value, options) {
   if (value.length === 0)
     return /* @__PURE__ */ jsx("span", { className: styles.CompactField.muted(), children: "-" });
@@ -114,9 +196,9 @@ function renderArrayValue(value, options) {
   }
   const text = options.options ? "" : textContent(value);
   if (text) return /* @__PURE__ */ jsx("span", { className: styles.CompactField.text(), children: text });
-  return /* @__PURE__ */ jsx("span", { className: styles.CompactField.items(), children: value.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx(Badge, { size: "small", children: compactValueText(item, options) }, index)) });
+  return /* @__PURE__ */ jsx("span", { className: styles.CompactField.items(), children: value.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx(Badge, { size: "sm", children: compactValueText(item, options) }, index)) });
 }
-function renderRecordValue(fields, value, options = {}) {
+function renderRecordValue(fields, value, context, options = {}) {
   const includeEmpty = options.includeEmpty ?? false;
   const limit = options.limit ?? (includeEmpty ? void 0 : 3);
   const entries = Object.entries(fields).filter(([key, field]) => {
@@ -127,15 +209,15 @@ function renderRecordValue(fields, value, options = {}) {
     return /* @__PURE__ */ jsx("span", { className: styles.CompactField.muted(), children: "-" });
   return /* @__PURE__ */ jsx("span", { className: styles.CompactField.record(), children: entries.map(([key, field]) => /* @__PURE__ */ jsxs("span", { className: styles.CompactField.record.field(), children: [
     /* @__PURE__ */ jsx("span", { className: styles.CompactField.record.label(), children: Field.label(field) }),
-    /* @__PURE__ */ jsx("span", { className: styles.CompactField.record.value(), children: /* @__PURE__ */ jsx(CompactField, { field, value: value[key] }) })
+    /* @__PURE__ */ jsx("span", { className: styles.CompactField.record.value(), children: /* @__PURE__ */ jsx(CompactField, { field, value: value[key], ...context }) })
   ] }, key)) });
 }
-function compactRecordText(fields, value) {
+function compactRecordText(fields, value, context) {
   return Object.entries(fields).filter(([key, field]) => {
     const options = Field.options(field);
     return !options.hidden && !isEmptyValue(value[key]);
   }).slice(0, 3).map(([key, field]) => {
-    return `${Field.label(field)} ${compactFieldText(field, value[key])}`;
+    return `${Field.label(field)} ${compactFieldText(field, value[key], context)}`;
   }).join(", ");
 }
 function compactValueText(value, options) {
@@ -146,6 +228,51 @@ function compactValueText(value, options) {
   const text = textContent(value);
   return text || jsonText(value);
 }
+function isLinkRow(value) {
+  return isRecord(value) && typeof value._type === "string" && (typeof value._entry === "string" || typeof value._url === "string");
+}
+function linkRows(value) {
+  if (isLinkRow(value)) return [value];
+  if (Array.isArray(value) && value.length > 0 && value.every(isLinkRow))
+    return value;
+  return void 0;
+}
+var linkTypeLabels = {
+  entry: "Entry",
+  image: "Image",
+  file: "File",
+  url: "Link"
+};
+function linkLabel(link, context) {
+  if (typeof link._entry === "string") {
+    const title = context.links?.get(link._entry)?.title;
+    if (title) return title;
+  }
+  if (typeof link._url === "string") return link._title || link._url;
+  return linkTypeLabels[link._type] ?? link._type;
+}
+var numberFormat = new Intl.NumberFormat(void 0, {
+  maximumFractionDigits: 20,
+  // Group thousands from five digits on, so years and codes stay intact
+  useGrouping: "min2"
+});
+function numberText(value) {
+  return Number.isFinite(value) ? numberFormat.format(value) : String(value);
+}
+var dateFormat = new Intl.DateTimeFormat(void 0, {
+  dateStyle: "medium",
+  timeZone: "UTC"
+});
+function dateText(value) {
+  const match = /^\d{4}-\d{2}-\d{2}$/.test(value);
+  if (!match) return value;
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  return Number.isNaN(date.getTime()) ? value : dateFormat.format(date);
+}
+function stringText(field, value, options) {
+  if (field instanceof DateField) return dateText(value);
+  return options.options?.[value] ?? value;
+}
 function itemCount(length) {
   return `${length} ${length === 1 ? "item" : "items"}`;
 }

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

@@ -0,0 +1,17 @@
+import { type ImageEdit } from 'alinea/core/media/ImageTransform';
+import type { CSSProperties } from 'react';
+export interface CroppedImageProps {
+    src: string;
+    /** Dimensions of the image as the browser shows it */
+    width: number;
+    height: number;
+    /** The rotation and crop to show, without one the whole image shows */
+    edit?: ImageEdit;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Shows an image rotated and cropped with css, the way transformImage encodes it.
+ * The element takes the aspect ratio of the crop, size it with css.
+ */
+export declare function CroppedImage({ src, width, height, edit, className, style }: CroppedImageProps): import("react").JSX.Element;

package/dist/dashboard/app/CroppedImage.js

@@ -0,0 +1,73 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/CroppedImage.tsx
+import { rotatedSize } from "alinea/core/media/ImageTransform";
+
+// src/dashboard/app/CroppedImage.module.css
+var CroppedImage_default = {
+  "CroppedImage": "alinea-CroppedImage",
+  "CroppedImage-image": "alinea-CroppedImage-image",
+  "CroppedImageImage": "alinea-CroppedImage-image",
+  "CroppedImage-frame": "alinea-CroppedImage-frame",
+  "CroppedImageFrame": "alinea-CroppedImage-frame"
+};
+
+// src/dashboard/app/CroppedImage.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(CroppedImage_default);
+function CroppedImage({
+  src,
+  width,
+  height,
+  edit,
+  className,
+  style
+}) {
+  const rotate = edit?.rotate ?? 0;
+  const crop = edit?.crop ?? { x: 0, y: 0, width: 1, height: 1 };
+  const rotated = rotatedSize(width, height, rotate);
+  const sideways = rotate % 180 !== 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.CroppedImage(dist_default.merge({ className })),
+      style: {
+        aspectRatio: `${crop.width * rotated.width} / ${crop.height * rotated.height}`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: styles.CroppedImage.frame(),
+          style: {
+            left: `${-crop.x / crop.width * 100}%`,
+            top: `${-crop.y / crop.height * 100}%`,
+            width: `${100 / crop.width}%`,
+            height: `${100 / crop.height}%`
+          },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: "",
+              draggable: false,
+              src,
+              className: styles.CroppedImage.image(),
+              style: {
+                // Sideways images swap their width and height inside the frame
+                width: sideways ? `${rotated.height / rotated.width * 100}%` : "100%",
+                height: sideways ? `${rotated.width / rotated.height * 100}%` : "100%",
+                transform: `translate(-50%, -50%) rotate(${rotate}deg)`
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  CroppedImage
+};

package/dist/dashboard/app/DashboardErrorBoundary.js

@@ -9,7 +9,16 @@ import {
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/DashboardErrorBoundary.tsx
-import { Button, Icon, Surface } from "alinea/components";
+import {
+  Button,
+  Code,
+  Empty,
+  EmptyContent,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Icon
+} from "alinea/components";
 import { MissingEntryError } from "alinea/dashboard/atoms/entry";
 import { routeAtom, routeGuardAtom } from "alinea/dashboard/atoms/nav";
 import { useEffect, useRef } from "react";
@@ -65,14 +74,8 @@ import { IcRoundWarning } from "../icons.js";
 
 // src/dashboard/app/DashboardErrorBoundary.module.css
 var DashboardErrorBoundary_default = {
-  "DashboardErrorBoundary-heading": "alinea-DashboardErrorBoundary-heading",
-  "DashboardErrorBoundaryHeading": "alinea-DashboardErrorBoundary-heading",
-  "DashboardErrorBoundary-card": "alinea-DashboardErrorBoundary-card",
-  "DashboardErrorBoundaryCard": "alinea-DashboardErrorBoundary-card",
-  "DashboardErrorBoundary-actions": "alinea-DashboardErrorBoundary-actions",
-  "DashboardErrorBoundaryActions": "alinea-DashboardErrorBoundary-actions",
-  "DashboardErrorBoundary-title": "alinea-DashboardErrorBoundary-title",
-  "DashboardErrorBoundaryTitle": "alinea-DashboardErrorBoundary-title",
+  "DashboardErrorBoundary-media": "alinea-DashboardErrorBoundary-media",
+  "DashboardErrorBoundaryMedia": "alinea-DashboardErrorBoundary-media",
   "DashboardErrorBoundary-message": "alinea-DashboardErrorBoundary-message",
   "DashboardErrorBoundaryMessage": "alinea-DashboardErrorBoundary-message",
   "DashboardErrorBoundary": "alinea-DashboardErrorBoundary"
@@ -109,13 +112,22 @@ function DashboardRouteErrorBoundary({
   if (didCatch && error instanceof MissingEntryError) return null;
   if (didCatch) {
     const message = errorMessage(error);
-    return /* @__PURE__ */ jsx("div", { className: styles.DashboardErrorBoundary(), children: /* @__PURE__ */ jsxs(Surface, { className: styles.DashboardErrorBoundary.card(), children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.DashboardErrorBoundary.heading(), children: [
-        /* @__PURE__ */ jsx(Icon, { icon: IcRoundWarning }),
-        /* @__PURE__ */ jsx("h1", { className: styles.DashboardErrorBoundary.title(), children: "Oops, something went wrong" })
+    return /* @__PURE__ */ jsx("div", { className: styles.DashboardErrorBoundary(), children: /* @__PURE__ */ jsxs(Empty, { variant: "card", children: [
+      /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+        /* @__PURE__ */ jsx(
+          EmptyMedia,
+          {
+            variant: "icon",
+            className: styles.DashboardErrorBoundary.media(),
+            children: /* @__PURE__ */ jsx(Icon, { icon: IcRoundWarning })
+          }
+        ),
+        /* @__PURE__ */ jsx(EmptyTitle, { as: "h1", children: "Oops, something went wrong" })
       ] }),
-      /* @__PURE__ */ jsx("pre", { className: styles.DashboardErrorBoundary.message(), children: message }),
-      /* @__PURE__ */ jsx("div", { className: styles.DashboardErrorBoundary.actions(), children: /* @__PURE__ */ jsx(Button, { intent: "primary", onPress: reloadDashboard, children: "Reload dashboard" }) })
+      /* @__PURE__ */ jsxs(EmptyContent, { children: [
+        /* @__PURE__ */ jsx(Code, { block: true, className: styles.DashboardErrorBoundary.message(), children: message }),
+        /* @__PURE__ */ jsx(Button, { color: "primary", onClick: reloadDashboard, children: "Reload dashboard" })
+      ] })
     ] }) });
   }
   return /* @__PURE__ */ jsx(ErrorBoundary, { children });

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

@@ -1,16 +1,18 @@
 import type { WorkspaceInternal } from 'alinea/core/Workspace';
 import type { Page } from 'alinea/dashboard/atoms/nav';
-import type { RootAtoms } from 'alinea/dashboard/atoms/root';
-import type { PropsWithChildren } from 'react';
+import type { RootAtoms, TreeView } from 'alinea/dashboard/atoms/root';
+import { type PropsWithChildren } from 'react';
 export interface DashboardLayoutProps extends PropsWithChildren {
     canManageMembers: boolean;
     page: Page;
     root: RootAtoms;
+    /** The sidebar tree of the page */
+    tree: TreeView;
     workspace: WorkspaceInternal & {
         name: string;
     };
 }
-export declare function DashboardLayout({ canManageMembers, children, page, root, workspace }: DashboardLayoutProps): import("react").JSX.Element;
+export declare function DashboardLayout({ canManageMembers, children, page, root, tree, workspace }: DashboardLayoutProps): import("react").JSX.Element;
 export interface CreateEntryButtonProps {
     root: RootAtoms;
     toolbar?: boolean;

package/dist/dashboard/app/DashboardLayout.js

@@ -8,17 +8,27 @@ import {
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/DashboardLayout.tsx
-import { Button, DialogTrigger } from "alinea/components";
+import {
+  AppShell,
+  AppShellContent,
+  Dialog,
+  DialogTrigger,
+  Sidebar,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset
+} from "alinea/components";
+import { useLayoutEffect } from "react";
 import { DashboardScope, useDashboardContext } from "../hooks.js";
 import { IcRoundAdd } from "../icons.js";
-import { AppShell, AppShellContent, AppShellInner } from "./AppShell.js";
 import { SidebarTree } from "./SidebarTree.js";
 import { SidebarLayout } from "./SidebarLayout.js";
 import { WorkspaceMenu } from "./WorkspaceMenu.js";
 import { WorkspaceRoots } from "./WorkspaceRoots.js";
 import { CreateEntry } from "./modals/CreateEntry.js";
+import { MoveConfirmDialog } from "./MoveConfirmDialog.js";
+import { PendingUploadsDialog } from "./PendingUploadsDialog.js";
 import { DashboardModal } from "./ui/DashboardModal.js";
-import { Sidebar, SidebarFooter, SidebarHeader } from "./ui/Sidebar.js";
 
 // src/dashboard/app/DashboardLayout.module.css
 var DashboardLayout_default = {
@@ -36,40 +46,52 @@ function DashboardLayout({
   children,
   page,
   root,
+  tree,
   workspace
 }) {
-  return /* @__PURE__ */ jsx(DashboardScope, { value: { page, root, workspace }, children: /* @__PURE__ */ jsx(AppShell, { children: /* @__PURE__ */ jsxs(AppShellInner, { children: [
-    /* @__PURE__ */ jsx(
-      WorkspaceRoots,
-      {
-        canManageMembers,
-        page,
-        root
-      }
-    ),
-    /* @__PURE__ */ jsx(AppShellContent, { children: /* @__PURE__ */ jsx(
-      SidebarLayout,
-      {
-        side: "left",
-        sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
-          /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(
-            WorkspaceMenu,
-            {
-              canManageMembers,
-              page,
-              root,
-              workspace
-            }
-          ) }),
-          /* @__PURE__ */ jsx(SidebarTree, { page, root }),
-          /* @__PURE__ */ jsx(SidebarCreateEntryButton, { root })
-        ] }),
-        children
-      }
-    ) })
-  ] }) }) });
+  return /* @__PURE__ */ jsxs(DashboardScope, { value: { page, root, workspace }, children: [
+    /* @__PURE__ */ jsx(WorkspaceColor, { color: workspace.color }),
+    /* @__PURE__ */ jsxs(AppShell, { children: [
+      /* @__PURE__ */ jsx(WorkspaceRoots, { canManageMembers, page }),
+      /* @__PURE__ */ jsx(AppShellContent, { children: /* @__PURE__ */ jsx(
+        SidebarLayout,
+        {
+          side: "left",
+          sidebar: /* @__PURE__ */ jsxs(Sidebar, { children: [
+            /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(
+              WorkspaceMenu,
+              {
+                canManageMembers,
+                page,
+                root,
+                workspace
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SidebarTree, { page, root, view: tree }),
+            /* @__PURE__ */ jsx(SidebarCreateEntryButton, { root })
+          ] }),
+          children: /* @__PURE__ */ jsx(SidebarInset, { children })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(PendingUploadsDialog, {}),
+    /* @__PURE__ */ jsx(MoveConfirmDialog, {})
+  ] });
+}
+function WorkspaceColor({ color }) {
+  useLayoutEffect(() => {
+    const { style } = document.documentElement;
+    style.setProperty("--alinea-workspace-color", color);
+    return () => {
+      style.removeProperty("--alinea-workspace-color");
+    };
+  }, [color]);
+  return null;
 }
 function SidebarCreateEntryButton({ root }) {
+  const { page } = useDashboardContext();
+  const canCreate = useAtomValueRaw(root.tree(page.locale).canCreate);
+  if (!canCreate) return null;
   return /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(CreateEntryButton, { root }) });
 }
 function CreateEntryButton({
@@ -79,18 +101,18 @@ function CreateEntryButton({
   const { page } = useDashboardContext();
   const canCreate = useAtomValueRaw(root.tree(page.locale).canCreate);
   if (!canCreate) return null;
-  return /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
     /* @__PURE__ */ jsx(
-      Button,
+      DialogTrigger,
       {
         "aria-label": "Create new",
         className: styles.DashboardLayout.create({ toolbar }),
         icon: IcRoundAdd,
-        intent: toolbar ? "primary" : "secondary",
+        color: toolbar ? "primary" : "secondary",
         children: "Create new"
       }
     ),
-    /* @__PURE__ */ jsx(DashboardModal, { children: /* @__PURE__ */ jsx(CreateEntry, {}) })
+    /* @__PURE__ */ jsx(DashboardModal, { "aria-label": "Create entry", children: /* @__PURE__ */ jsx(CreateEntry, {}) })
   ] });
 }
 export {

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

@@ -0,0 +1,11 @@
+import type { Entry } from 'alinea/core/Entry';
+import type { Type } from 'alinea/core/Type';
+import type { EditorNode } from '../atoms/editor.js';
+export interface EntryActionsProps {
+    type: Type;
+    node: EditorNode;
+    entry: Entry;
+    locale: string | null;
+}
+/** The actions configured with the `actions` option of a type */
+export declare function EntryActions({ type, node, entry, locale }: EntryActionsProps): import("react").JSX.Element | null;