alinea 1.7.0 → 2.0.0-preview.0

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { type DragAndDropHooks } from 'react-aria-components';
+import type { DashboardEntry, DashboardExplorer, ExplorerReadyPage } from '../atoms/explorer.js';
+export interface ExplorerCardsProps {
+    dragAndDropHooks: DragAndDropHooks<DashboardEntry>;
+    explorer: DashboardExplorer;
+    items: Array<DashboardEntry>;
+    page: ExplorerReadyPage;
+    renderEmptyState: () => ReactNode;
+    locale: string | null;
+}
+export declare function ExplorerCards({ dragAndDropHooks, explorer, items, page, renderEmptyState, locale }: ExplorerCardsProps): import("react").JSX.Element;

package/dist/dashboard/app/ExplorerCards.js

@@ -0,0 +1,389 @@
+import {
+  unwrap
+} from "../../chunks/chunk-STAJCW4Z.js";
+import {
+  useAtom,
+  useAtomValue,
+  useSetAtom,
+  useStore
+} from "../../chunks/chunk-U4VOHNR2.js";
+import "../../chunks/chunk-Y7XOMJOC.js";
+import {
+  $143fb904d86051ce$export$89be5a243e59c4b2,
+  $1f7649abe3ae3599$export$a7bfbda1311ca015,
+  $1f7649abe3ae3599$export$e96fc9a8407faa6b,
+  $7705c033048f6da7$export$353f5b6fc5456de1
+} from "../../chunks/chunk-I7X64JTZ.js";
+import "../../chunks/chunk-IWN3T3FL.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import {
+  $cc8e610d5d6e3fe4$export$cb6da89c6af1a8ec,
+  $fc34f5dff94ff74a$export$7d2b12578154a735
+} from "../../chunks/chunk-JFROOUG6.js";
+import "../../chunks/chunk-SJBZFMQ2.js";
+import "../../chunks/chunk-IYAQC63Y.js";
+import "../../chunks/chunk-LUBOGJCG.js";
+import "../../chunks/chunk-YK3OSMDM.js";
+import "../../chunks/chunk-AC4U3IMS.js";
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ExplorerCards.tsx
+import { Checkbox, Icon, Surface } from "alinea/components";
+import { getWorkspace } from "alinea/core/Internal";
+import { Fragment, memo, startTransition, useMemo } from "react";
+import {
+  IcRoundKeyboardArrowRight,
+  IcTwotoneDescription,
+  IcTwotoneFolder
+} from "../icons.js";
+import { configAtom } from "../atoms/core.js";
+
+// src/dashboard/app/ExplorerCards.module.css
+var ExplorerCards_default = {
+  "ExplorerCards-item-card": "alinea-ExplorerCards-item-card",
+  "ExplorerCardsItemCard": "alinea-ExplorerCards-item-card",
+  "ExplorerCards-item": "alinea-ExplorerCards-item",
+  "ExplorerCardsItem": "alinea-ExplorerCards-item",
+  "is-loading": "alinea-is-loading",
+  "isLoading": "alinea-is-loading",
+  "ExplorerCards-entry-iconSkeleton": "alinea-ExplorerCards-entry-iconSkeleton",
+  "ExplorerCardsEntryIconSkeleton": "alinea-ExplorerCards-entry-iconSkeleton",
+  "ExplorerCards-viewport": "alinea-ExplorerCards-viewport",
+  "ExplorerCardsViewport": "alinea-ExplorerCards-viewport",
+  "ExplorerCards-surface": "alinea-ExplorerCards-surface",
+  "ExplorerCardsSurface": "alinea-ExplorerCards-surface",
+  "ExplorerCards-entry-top": "alinea-ExplorerCards-entry-top",
+  "ExplorerCardsEntryTop": "alinea-ExplorerCards-entry-top",
+  "ExplorerCards-entry-icon": "alinea-ExplorerCards-entry-icon",
+  "ExplorerCardsEntryIcon": "alinea-ExplorerCards-entry-icon",
+  "is-breadcrumbs": "alinea-is-breadcrumbs",
+  "isBreadcrumbs": "alinea-is-breadcrumbs",
+  "ExplorerCards-entry-meta": "alinea-ExplorerCards-entry-meta",
+  "ExplorerCardsEntryMeta": "alinea-ExplorerCards-entry-meta",
+  "ExplorerCards-entry-label": "alinea-ExplorerCards-entry-label",
+  "ExplorerCardsEntryLabel": "alinea-ExplorerCards-entry-label",
+  "ExplorerCards-skeleton-pulse": "alinea-ExplorerCards-skeleton-pulse",
+  "ExplorerCardsSkeletonPulse": "alinea-ExplorerCards-skeleton-pulse",
+  "ExplorerCards-item-checkbox": "alinea-ExplorerCards-item-checkbox",
+  "ExplorerCardsItemCheckbox": "alinea-ExplorerCards-item-checkbox",
+  "is-file": "alinea-is-file",
+  "isFile": "alinea-is-file",
+  "is-wide": "alinea-is-wide",
+  "isWide": "alinea-is-wide",
+  "ExplorerCards-entry-skeleton": "alinea-ExplorerCards-entry-skeleton",
+  "ExplorerCardsEntrySkeleton": "alinea-ExplorerCards-entry-skeleton",
+  "ExplorerCards": "alinea-ExplorerCards",
+  "ExplorerCards-item-drag-handle": "alinea-ExplorerCards-item-drag-handle",
+  "ExplorerCardsItemDragHandle": "alinea-ExplorerCards-item-drag-handle",
+  "ExplorerCards-entry-body": "alinea-ExplorerCards-entry-body",
+  "ExplorerCardsEntryBody": "alinea-ExplorerCards-entry-body",
+  "ExplorerCards-parents-separator": "alinea-ExplorerCards-parents-separator",
+  "ExplorerCardsParentsSeparator": "alinea-ExplorerCards-parents-separator",
+  "ExplorerCards-entry": "alinea-ExplorerCards-entry",
+  "ExplorerCardsEntry": "alinea-ExplorerCards-entry",
+  "ExplorerCards-entry-body-inner": "alinea-ExplorerCards-entry-body-inner",
+  "ExplorerCardsEntryBodyInner": "alinea-ExplorerCards-entry-body-inner",
+  "ExplorerCards-parents": "alinea-ExplorerCards-parents",
+  "ExplorerCardsParents": "alinea-ExplorerCards-parents"
+};
+
+// src/dashboard/app/ExplorerCards.tsx
+import { ExplorerFileCard } from "./ExplorerFileCard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(ExplorerCards_default);
+var cardLayoutOptions = {
+  minItemSize: new $cc8e610d5d6e3fe4$export$cb6da89c6af1a8ec(240, 196),
+  maxItemSize: new $cc8e610d5d6e3fe4$export$cb6da89c6af1a8ec(320, 196),
+  minSpace: new $cc8e610d5d6e3fe4$export$cb6da89c6af1a8ec(16, 16),
+  maxColumns: 5,
+  preserveAspectRatio: true
+};
+var ExplorerCardItem = memo(function ExplorerCardItem2({
+  breadcrumbs,
+  entry,
+  explorer,
+  includeWorkspace,
+  showSelectionControls
+}) {
+  const { data } = useAtomValue(entry.data);
+  const isSelectable = useAtomValue(explorer.isSelectable(entry));
+  if (!data)
+    return /* @__PURE__ */ jsx(
+      ExplorerCardLoadingItem,
+      {
+        entry,
+        isSelectable,
+        showSelectionControls
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    ExplorerCardLoadedItem,
+    {
+      breadcrumbs,
+      entry,
+      data,
+      isSelectable,
+      includeWorkspace,
+      showSelectionControls
+    }
+  );
+});
+function ExplorerCardLoadingItem({
+  entry,
+  isSelectable,
+  showSelectionControls
+}) {
+  return /* @__PURE__ */ jsxs(
+    $1f7649abe3ae3599$export$e96fc9a8407faa6b,
+    {
+      id: entry.id,
+      textValue: "Loading entry",
+      className: styles.ExplorerCards.item({ loading: true }),
+      "aria-label": "Loading entry",
+      isDisabled: !isSelectable,
+      children: [
+        showSelectionControls && isSelectable && /* @__PURE__ */ jsx(ExplorerCardCheckbox, { label: "Loading entry" }),
+        /* @__PURE__ */ jsx(Surface, { className: styles.ExplorerCards.item.card(), children: /* @__PURE__ */ jsxs("div", { className: styles.ExplorerCards.entry(), children: [
+          /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.top(), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.ExplorerCards.entry.iconSkeleton(),
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.body(), children: /* @__PURE__ */ jsxs("div", { className: styles.ExplorerCards.entry.body.inner(), children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.ExplorerCards.entry.skeleton({ wide: true })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.skeleton() })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+var ExplorerCardLoadedItem = memo(function ExplorerCardLoadedItem2({
+  breadcrumbs,
+  entry,
+  data,
+  isSelectable,
+  includeWorkspace,
+  showSelectionControls
+}) {
+  const label = useAtomValue(data.label);
+  const icon = useAtomValue(data.icon);
+  const type = useAtomValue(data.type);
+  const canOpen = useAtomValue(data.canOpen);
+  const info = useAtomValue(
+    useMemo(() => unwrap(data.fileInfo, (previous) => previous ?? null), [data])
+  );
+  const location = breadcrumbs ? /* @__PURE__ */ jsx(
+    ExplorerCardLocation,
+    {
+      data,
+      entry,
+      includeWorkspace
+    }
+  ) : null;
+  const fallbackIcon = canOpen ? IcTwotoneFolder : IcTwotoneDescription;
+  return /* @__PURE__ */ jsxs(
+    $1f7649abe3ae3599$export$e96fc9a8407faa6b,
+    {
+      id: entry.id,
+      textValue: label,
+      className: styles.ExplorerCards.item(),
+      isDisabled: !isSelectable,
+      children: [
+        showSelectionControls && isSelectable && /* @__PURE__ */ jsx(ExplorerCardCheckbox, { label }),
+        /* @__PURE__ */ jsx(
+          $7705c033048f6da7$export$353f5b6fc5456de1,
+          {
+            slot: "drag",
+            "aria-label": `Drag ${label}`,
+            className: styles.ExplorerCards.item.drag.handle()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Surface,
+          {
+            className: styles.ExplorerCards.item.card({ file: Boolean(info) }),
+            children: info ? /* @__PURE__ */ jsx(
+              ExplorerFileCard,
+              {
+                file: info,
+                label,
+                layout: "card",
+                parents: location
+              }
+            ) : /* @__PURE__ */ jsx(
+              ExplorerEntryCard,
+              {
+                icon: icon ?? fallbackIcon,
+                label,
+                parents: location,
+                typeLabel: type.label
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+function ExplorerCardLocation({
+  data,
+  entry,
+  includeWorkspace
+}) {
+  const config = useAtomValue(configAtom);
+  const parents = useAtomValue(data.parents);
+  const root = useAtomValue(data.root);
+  const rootLabel = useAtomValue(root.label);
+  const workspace = config.workspaces[entry.workspace];
+  const workspaceLabel = workspace ? getWorkspace(workspace).label : entry.workspace;
+  return /* @__PURE__ */ jsx(
+    ExplorerCardParents,
+    {
+      parents,
+      rootLabel,
+      workspaceLabel: includeWorkspace ? workspaceLabel : void 0
+    }
+  );
+}
+function ExplorerCardCheckbox({ label }) {
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      slot: "selection",
+      className: styles.ExplorerCards.item.checkbox(),
+      "aria-label": `Select ${label}`
+    }
+  );
+}
+function ExplorerEntryCard({
+  icon,
+  label,
+  parents,
+  typeLabel
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.ExplorerCards.entry({ breadcrumbs: Boolean(parents) }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.top(), children: icon && /* @__PURE__ */ jsx(Icon, { icon, className: styles.ExplorerCards.entry.icon() }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.body(), children: /* @__PURE__ */ jsxs("div", { className: styles.ExplorerCards.entry.body.inner(), children: [
+          parents,
+          /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.label(), children: label }),
+          /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.entry.meta(), children: typeLabel })
+        ] }) })
+      ]
+    }
+  );
+}
+function ExplorerCardParents({
+  parents,
+  rootLabel,
+  workspaceLabel
+}) {
+  const breadcrumbs = [
+    ...workspaceLabel ? [{ id: "workspace", value: workspaceLabel }] : [],
+    ...rootLabel ? [{ id: "root", value: rootLabel }] : [],
+    ...parents.map((parent) => ({
+      id: `parent-${parent.id}`,
+      value: /* @__PURE__ */ jsx(ExplorerCardParent, { parent })
+    }))
+  ];
+  if (breadcrumbs.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: styles.ExplorerCards.parents(), children: breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx(
+      IcRoundKeyboardArrowRight,
+      {
+        "aria-hidden": true,
+        className: styles.ExplorerCards.parents.separator()
+      }
+    ),
+    breadcrumb.value
+  ] }, breadcrumb.id)) });
+}
+function ExplorerCardParent({ parent }) {
+  const { data } = useAtomValue(parent.data);
+  if (!data) return null;
+  return /* @__PURE__ */ jsx(ExplorerCardLoadedParent, { parent: data });
+}
+function ExplorerCardLoadedParent({ parent }) {
+  const label = useAtomValue(parent.label);
+  return /* @__PURE__ */ jsx(Fragment, { children: label });
+}
+function ExplorerCards({
+  dragAndDropHooks,
+  explorer,
+  items,
+  page,
+  renderEmptyState,
+  locale
+}) {
+  const [selected, setSelected] = useAtom(explorer.selection);
+  const performAction = useSetAtom(explorer.onAction);
+  const store = useStore();
+  const selectionMode = explorer.selectionMode;
+  const hasSelection = selectionMode !== "none";
+  const showSelectionControls = hasSelection && explorer.showSelectionControls;
+  function onItemAction(key) {
+    const entry = items.find((item) => item.id === String(key));
+    if (!entry) return;
+    if (!explorer.hasRowAction) {
+      const { data } = store.get(entry.data);
+      const canOpen = !store.get(explorer.isSelectable(entry)) && data !== void 0 && store.get(data.canOpen);
+      if (!canOpen) return;
+      startTransition(() => performAction(entry, locale));
+      return;
+    }
+    performAction(entry, locale);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Explorer card results",
+      className: styles.ExplorerCards.viewport(),
+      role: "region",
+      children: /* @__PURE__ */ jsx($143fb904d86051ce$export$89be5a243e59c4b2, { layout: $fc34f5dff94ff74a$export$7d2b12578154a735, layoutOptions: cardLayoutOptions, children: /* @__PURE__ */ jsx(
+        $1f7649abe3ae3599$export$a7bfbda1311ca015,
+        {
+          "aria-label": "Explorer entries",
+          items,
+          layout: "grid",
+          className: styles.ExplorerCards(),
+          selectionMode: hasSelection ? selectionMode : void 0,
+          selectionBehavior: explorer.selectionBehavior,
+          disabledBehavior: "selection",
+          dragAndDropHooks,
+          selectedKeys: hasSelection ? selected : void 0,
+          onSelectionChange: hasSelection ? setSelected : void 0,
+          onAction: onItemAction,
+          renderEmptyState,
+          style: { display: "block", width: "100%", height: "100%" },
+          children: (item) => /* @__PURE__ */ jsx(
+            ExplorerCardItem,
+            {
+              breadcrumbs: explorer.breadcrumbs || page.resultMode === "matches" || page.searchesEverything,
+              entry: item,
+              explorer,
+              includeWorkspace: page.searchesEverything,
+              showSelectionControls
+            }
+          )
+        }
+      ) })
+    }
+  );
+}
+export {
+  ExplorerCards
+};

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

@@ -0,0 +1,10 @@
+import { MediaFile } from 'alinea/core/media/MediaTypes';
+import { type Infer } from 'alinea/types';
+import type { ReactNode } from 'react';
+export interface ExplorerFileCardProps {
+    file: Infer<typeof MediaFile>;
+    label: string;
+    layout: 'card' | 'row';
+    parents?: ReactNode;
+}
+export declare function ExplorerFileCard({ file, label, layout, parents }: ExplorerFileCardProps): import("react").JSX.Element;

package/dist/dashboard/app/ExplorerFileCard.js

@@ -0,0 +1,115 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import {
+  prettyBytes
+} from "../../chunks/chunk-HRTN3UQ6.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ExplorerFileCard.tsx
+import { Icon } from "alinea/components";
+import { isImage } from "alinea/core/media/IsImage";
+import { IcRoundInsertDriveFile } from "../icons.js";
+
+// src/dashboard/app/ExplorerFileCard.module.css
+var ExplorerFileCard_default = {
+  "ExplorerFileCard-label": "alinea-ExplorerFileCard-label",
+  "ExplorerFileCardLabel": "alinea-ExplorerFileCard-label",
+  "ExplorerFileCard-top": "alinea-ExplorerFileCard-top",
+  "ExplorerFileCardTop": "alinea-ExplorerFileCard-top",
+  "ExplorerFileCard-preview": "alinea-ExplorerFileCard-preview",
+  "ExplorerFileCardPreview": "alinea-ExplorerFileCard-preview",
+  "is-breadcrumbs": "alinea-is-breadcrumbs",
+  "isBreadcrumbs": "alinea-is-breadcrumbs",
+  "ExplorerFileCard-preview-placeholder-icon": "alinea-ExplorerFileCard-preview-placeholder-icon",
+  "ExplorerFileCardPreviewPlaceholderIcon": "alinea-ExplorerFileCard-preview-placeholder-icon",
+  "is-row": "alinea-is-row",
+  "isRow": "alinea-is-row",
+  "ExplorerFileCard-body": "alinea-ExplorerFileCard-body",
+  "ExplorerFileCardBody": "alinea-ExplorerFileCard-body",
+  "ExplorerFileCard-meta": "alinea-ExplorerFileCard-meta",
+  "ExplorerFileCardMeta": "alinea-ExplorerFileCard-meta",
+  "ExplorerFileCard-preview-image": "alinea-ExplorerFileCard-preview-image",
+  "ExplorerFileCardPreviewImage": "alinea-ExplorerFileCard-preview-image",
+  "is-card": "alinea-is-card",
+  "isCard": "alinea-is-card",
+  "ExplorerFileCard-meta-extension": "alinea-ExplorerFileCard-meta-extension",
+  "ExplorerFileCardMetaExtension": "alinea-ExplorerFileCard-meta-extension",
+  "ExplorerFileCard-preview-placeholder": "alinea-ExplorerFileCard-preview-placeholder",
+  "ExplorerFileCardPreviewPlaceholder": "alinea-ExplorerFileCard-preview-placeholder",
+  "ExplorerFileCard-body-inner": "alinea-ExplorerFileCard-body-inner",
+  "ExplorerFileCardBodyInner": "alinea-ExplorerFileCard-body-inner",
+  "ExplorerFileCard-meta-details": "alinea-ExplorerFileCard-meta-details",
+  "ExplorerFileCardMetaDetails": "alinea-ExplorerFileCard-meta-details",
+  "ExplorerFileCard": "alinea-ExplorerFileCard"
+};
+
+// src/dashboard/app/ExplorerFileCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(ExplorerFileCard_default);
+function ExplorerFileCard({
+  file,
+  label,
+  layout,
+  parents
+}) {
+  const extension = formatExtension(file.extension);
+  const isImageFile = Boolean(file.extension && isImage(file.extension));
+  const preview = isImageFile ? file.preview : void 0;
+  const details = formatFileDetails(file);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.ExplorerFileCard(layout, {
+        breadcrumbs: Boolean(parents),
+        image: Boolean(preview)
+      }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.ExplorerFileCard.top(), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.ExplorerFileCard.preview(),
+            style: {
+              backgroundColor: file.averageColor || void 0
+            },
+            children: preview ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: preview,
+                alt: "",
+                className: styles.ExplorerFileCard.preview.image()
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: styles.ExplorerFileCard.preview.placeholder(), children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: IcRoundInsertDriveFile,
+                className: styles.ExplorerFileCard.preview.placeholder.icon()
+              }
+            ) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles.ExplorerFileCard.body(), children: /* @__PURE__ */ jsxs("div", { className: styles.ExplorerFileCard.body.inner(), children: [
+          parents,
+          /* @__PURE__ */ jsx("div", { className: styles.ExplorerFileCard.label(), children: label }),
+          /* @__PURE__ */ jsxs("div", { className: styles.ExplorerFileCard.meta(), children: [
+            extension && /* @__PURE__ */ jsx("span", { className: styles.ExplorerFileCard.meta.extension(), children: extension }),
+            details && /* @__PURE__ */ jsx("span", { className: styles.ExplorerFileCard.meta.details(), children: details })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function formatExtension(extension) {
+  if (!extension) return "";
+  return extension.replace(/^\./, "").toUpperCase();
+}
+function formatFileDetails(file) {
+  const details = new Array();
+  if (file.width && file.height) details.push(`${file.width}x${file.height}`);
+  if (typeof file.size === "number") details.push(prettyBytes(file.size));
+  return details.join(" ");
+}
+export {
+  ExplorerFileCard
+};

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

@@ -0,0 +1,9 @@
+import type { Selection } from 'react-aria-components';
+import { type DashboardExplorer, type ExplorerReadyPage } from '../atoms/explorer.js';
+export interface ExplorerListProps {
+    compactTable?: boolean;
+    explorer: DashboardExplorer;
+    onSelectionChange?: (selection: Selection) => void;
+    page: ExplorerReadyPage;
+}
+export declare function ExplorerList({ compactTable, explorer, onSelectionChange, page }: ExplorerListProps): import("react").JSX.Element;