alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/components/internal/sortableDrag.js

@@ -0,0 +1,175 @@
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/components/internal/sortableDrag.ts
+var threshold = 4;
+var duration = 200;
+var easing = "cubic-bezier(0.2, 0, 0, 1)";
+var scrollEdge = 48;
+var scrollSpeed = 12;
+var settling = /* @__PURE__ */ new Map();
+function pressSortableItem({
+  event,
+  list,
+  item,
+  items,
+  onDrop
+}) {
+  const startX = event.clientX;
+  const startY = event.clientY;
+  let pointerY = startY;
+  let drag = null;
+  function onMove(event2) {
+    if (event2.pointerId !== pointerId) return;
+    pointerY = event2.clientY;
+    if (!drag) {
+      const distance = Math.hypot(event2.clientX - startX, pointerY - startY);
+      if (distance < threshold) return;
+      drag = startDrag();
+      if (!drag) return finish(false);
+    }
+    drag.update();
+  }
+  function onUp(event2) {
+    if (event2.pointerId === pointerId) finish(true);
+  }
+  function onCancel(event2) {
+    if (event2.pointerId === pointerId) finish(false);
+  }
+  function onKeyDown(event2) {
+    if (event2.key !== "Escape" || !drag) return;
+    event2.preventDefault();
+    event2.stopPropagation();
+    finish(false);
+  }
+  function onBlur() {
+    finish(false);
+  }
+  const pointerId = event.pointerId;
+  window.addEventListener("pointermove", onMove, true);
+  window.addEventListener("pointerup", onUp, true);
+  window.addEventListener("pointercancel", onCancel, true);
+  window.addEventListener("keydown", onKeyDown, true);
+  window.addEventListener("blur", onBlur);
+  function finish(commit) {
+    window.removeEventListener("pointermove", onMove, true);
+    window.removeEventListener("pointerup", onUp, true);
+    window.removeEventListener("pointercancel", onCancel, true);
+    window.removeEventListener("keydown", onKeyDown, true);
+    window.removeEventListener("blur", onBlur);
+    if (!drag) return;
+    drag.end(commit);
+    drag = null;
+    const block = (event2) => {
+      if (!(event2.target instanceof Node) || !list.contains(event2.target))
+        return;
+      event2.preventDefault();
+      event2.stopPropagation();
+    };
+    window.addEventListener("click", block, true);
+    setTimeout(() => window.removeEventListener("click", block, true), 100);
+  }
+  function startDrag() {
+    for (const settle of Array.from(settling.values())) settle();
+    const elements = items();
+    const from = elements.indexOf(item);
+    if (from === -1) return null;
+    const rects = elements.map((element) => element.getBoundingClientRect());
+    const scroller = scrollParent(list);
+    const startScroll = scroller.scrollTop;
+    const others = elements.filter((element) => element !== item);
+    let to = from;
+    let frame = 0;
+    const userSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    document.documentElement.dataset.sortableDragging = "";
+    window.getSelection()?.removeAllRanges();
+    list.dataset.dragging = "";
+    item.dataset.dragging = "";
+    for (const other of others)
+      other.style.transition = `transform ${duration}ms ${easing}`;
+    function offset() {
+      const dy = pointerY - startY + scroller.scrollTop - startScroll;
+      const min = rects[0].top - rects[from].top;
+      const max = rects[rects.length - 1].bottom - rects[from].bottom;
+      return Math.min(max, Math.max(min, dy));
+    }
+    function update() {
+      const dy = offset();
+      item.style.transform = `translateY(${dy}px)`;
+      const top = rects[from].top + dy;
+      const bottom = rects[from].bottom + dy;
+      to = from;
+      for (let index = from - 1; index >= 0; index--)
+        if (top < middle(rects[index])) to = index;
+      for (let index = from + 1; index < rects.length; index++)
+        if (bottom > middle(rects[index])) to = index;
+      const size = rects[from].height;
+      elements.forEach((element, index) => {
+        if (element === item) return;
+        const shift = from < to && index > from && index <= to ? -size : to < from && index >= to && index < from ? size : 0;
+        element.style.transform = shift ? `translateY(${shift}px)` : "";
+      });
+    }
+    function autoScroll() {
+      const bounds = scrollBounds(scroller);
+      const step = pointerY < bounds.top + scrollEdge ? -scrollSpeed : pointerY > bounds.bottom - scrollEdge ? scrollSpeed : 0;
+      if (step) {
+        const before = scroller.scrollTop;
+        scroller.scrollTop += step;
+        if (scroller.scrollTop !== before) update();
+      }
+      frame = requestAnimationFrame(autoScroll);
+    }
+    frame = requestAnimationFrame(autoScroll);
+    function end(commit) {
+      cancelAnimationFrame(frame);
+      document.body.style.userSelect = userSelect;
+      delete document.documentElement.dataset.sortableDragging;
+      const moved = commit && to !== from;
+      for (const other of others) {
+        if (moved) other.style.transition = "";
+        other.style.transform = "";
+      }
+      const visualTop = item.getBoundingClientRect().top;
+      item.style.transform = "";
+      if (moved) onDrop(item, elements[to], to > from ? "after" : "before");
+      const distance = visualTop - item.getBoundingClientRect().top;
+      item.style.transition = "none";
+      item.style.transform = `translateY(${distance}px)`;
+      item.getBoundingClientRect();
+      item.style.transition = `transform ${duration}ms ${easing}`;
+      item.style.transform = "";
+      delete list.dataset.dragging;
+      const timeout = setTimeout(settle, duration);
+      function settle() {
+        clearTimeout(timeout);
+        settling.delete(item);
+        item.style.transition = "";
+        for (const other of others) other.style.transition = "";
+        delete item.dataset.dragging;
+      }
+      settling.set(item, settle);
+    }
+    return { update, end };
+  }
+}
+function middle(rect) {
+  return rect.top + rect.height / 2;
+}
+function scrollParent(element) {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    const { overflowY } = getComputedStyle(parent);
+    if ((overflowY === "auto" || overflowY === "scroll") && parent.scrollHeight > parent.clientHeight)
+      return parent;
+  }
+  return document.scrollingElement ?? document.documentElement;
+}
+function scrollBounds(scroller) {
+  if (scroller === document.scrollingElement)
+    return { top: 0, bottom: window.innerHeight };
+  const rect = scroller.getBoundingClientRect();
+  return { top: rect.top, bottom: rect.bottom };
+}
+export {
+  pressSortableItem
+};

package/dist/components/internal/useDragDrop.d.ts

@@ -0,0 +1,22 @@
+import { type DragAndDropHooks } from 'react-aria-components';
+import type { DragDropProps } from '../types.js';
+export interface UseDragDropOptions extends DragDropProps {
+    /** Class name of the line drawn between items while reordering */
+    dropIndicatorClassName?: (active: boolean) => string;
+    /** The data-slot of the drop indicator */
+    dropIndicatorSlot?: string;
+}
+export interface UseDragDropResult<T extends object> {
+    /** Pass to the react-aria collection, undefined when drag and drop is off */
+    dragAndDropHooks: DragAndDropHooks<T> | undefined;
+    /**
+     * react-aria cannot add drag and drop hooks to a mounted collection, use
+     * this as the collection key so it remounts when they are first enabled
+     */
+    key: string;
+}
+/**
+ * Converts our declarative `DragDropProps` into react-aria drag and drop
+ * hooks for Tree, Table and ContentGrid.
+ */
+export declare function useDragDrop<T extends object = object>({ getDragData, acceptedDragTypes, canDrop, onReorder, onMove, onDropItems, onDropFiles, renderDragPreview, dropIndicatorClassName, dropIndicatorSlot }: UseDragDropOptions): UseDragDropResult<T>;

package/dist/components/internal/useDragDrop.js

@@ -0,0 +1,110 @@
+import {
+  $32ef394310635fd5$export$2cfc5be7a55829f6,
+  $f9554a667e4f0374$export$62ed72bc21f6b8a6
+} from "../../chunks/chunk-7DDPSWRY.js";
+import "../../chunks/chunk-NUFRM6SI.js";
+import "../../chunks/chunk-PMGIIYDD.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import "../../chunks/chunk-PSSMQKAH.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/components/internal/useDragDrop.tsx
+import { useRef, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function useDragDrop({
+  getDragData,
+  acceptedDragTypes,
+  canDrop,
+  onReorder,
+  onMove,
+  onDropItems,
+  onDropFiles,
+  renderDragPreview,
+  dropIndicatorClassName,
+  dropIndicatorSlot
+}) {
+  const draggable = Boolean(getDragData);
+  const droppable = Boolean(onReorder || onMove || onDropItems || onDropFiles);
+  const [dnd, setDnd] = useState({ draggable, droppable });
+  if (draggable && !dnd.draggable || droppable && !dnd.droppable)
+    setDnd({
+      draggable: draggable || dnd.draggable,
+      droppable: droppable || dnd.droppable
+    });
+  const dragging = useRef(null);
+  async function drop(items, target) {
+    const data = [];
+    const files = [];
+    for (const item of items) {
+      if (item.kind === "file") files.push(await item.getFile());
+      if (item.kind !== "text") continue;
+      const record = {};
+      for (const type of item.types) record[type] = await item.getText(type);
+      data.push(record);
+    }
+    if (target && data.length > 0) await onDropItems?.({ items: data, target });
+    if (files.length > 0) await onDropFiles?.({ files, target });
+  }
+  const { dragAndDropHooks } = $32ef394310635fd5$export$2cfc5be7a55829f6({
+    isDisabled: !draggable && !droppable,
+    acceptedDragTypes,
+    getItems: dnd.draggable ? (keys) => getDragData?.(keys) ?? [] : void 0,
+    onDragStart: (event) => {
+      dragging.current = event.keys;
+    },
+    onDragEnd: () => {
+      dragging.current = null;
+    },
+    getDropOperation(target, types, allowedOperations) {
+      const internal = dragging.current;
+      if (target.type === "root") {
+        if (internal || !onDropFiles) return "cancel";
+        return allowedOperations.includes("copy") ? "copy" : allowedOperations[0];
+      }
+      const position = target.dropPosition;
+      const accepts = internal ? position === "on" ? Boolean(onMove) && !internal.has(target.key) : Boolean(onReorder) : Boolean(onDropItems || onDropFiles);
+      if (!accepts) return "cancel";
+      if (canDrop && !canDrop(dropTarget(target), types)) return "cancel";
+      return allowedOperations.includes("move") ? "move" : allowedOperations[0];
+    },
+    ...dnd.droppable && {
+      onMove(event) {
+        const target = dropTarget(event.target);
+        const move = { keys: event.keys, target };
+        return target.position === "on" ? onMove?.(move) : onReorder?.(move);
+      },
+      onInsert(event) {
+        return drop(event.items, dropTarget(event.target));
+      },
+      onItemDrop(event) {
+        if (event.isInternal) return;
+        return drop(event.items, dropTarget(event.target));
+      },
+      onRootDrop(event) {
+        return drop(event.items);
+      }
+    },
+    renderDragPreview: renderDragPreview ? (items) => /* @__PURE__ */ jsx(Fragment, { children: renderDragPreview(items) }) : void 0,
+    renderDropIndicator(target) {
+      return /* @__PURE__ */ jsx(
+        $f9554a667e4f0374$export$62ed72bc21f6b8a6,
+        {
+          target,
+          "data-slot": dropIndicatorSlot,
+          className: ({ isDropTarget }) => dropIndicatorClassName?.(isDropTarget) ?? ""
+        }
+      );
+    }
+  });
+  return {
+    dragAndDropHooks: dnd.draggable || dnd.droppable ? dragAndDropHooks : void 0,
+    key: `${dnd.draggable}-${dnd.droppable}`
+  };
+}
+function dropTarget(target) {
+  if (target.type === "root") return void 0;
+  return { key: target.key, position: target.dropPosition };
+}
+export {
+  useDragDrop
+};

package/dist/components/types.d.ts

@@ -0,0 +1,110 @@
+import type { ComponentType, CSSProperties, ReactElement, ReactNode, SVGProps } from 'react';
+export type Key = string | number;
+export type IconType = ComponentType<SVGProps<SVGSVGElement>>;
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export type Align = 'start' | 'center' | 'end';
+export interface StyleProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export interface AriaProps {
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+export interface OpenStateProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface PositionProps {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+export interface DataProps {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+}
+export type Orientation = 'horizontal' | 'vertical';
+export type SelectionMode = 'none' | 'single' | 'multiple';
+/** Either every item, or the set of selected keys */
+export type Selection = 'all' | ReadonlySet<Key>;
+export interface SelectionProps {
+    selectionMode?: SelectionMode;
+    selectedKeys?: Selection;
+    defaultSelectedKeys?: Selection;
+    onSelectionChange?: (keys: Selection) => void;
+    disabledKeys?: Iterable<Key>;
+}
+export type SortDirection = 'asc' | 'desc';
+export interface SortDescriptor {
+    column: Key;
+    direction: SortDirection;
+}
+/** Label, help text and validation state shared by every form control */
+export interface FieldSharedProps {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    icon?: IconType | ReactElement;
+    /** Marks the field as shared between translations */
+    shared?: boolean;
+}
+/** A range of ISO dates (`YYYY-MM-DD`), both ends inclusive */
+export interface DateRange {
+    start: string;
+    end: string;
+}
+/** Where dragged items are dropped, relative to the item with `key` */
+export interface DropTarget {
+    key: Key;
+    position: 'before' | 'after' | 'on';
+}
+/** The data types a drag operation carries */
+export interface DragTypes {
+    has(type: string): boolean;
+}
+/** Keys of dragged items and where they were dropped */
+export interface DragMoveEvent {
+    keys: ReadonlySet<Key>;
+    target: DropTarget;
+}
+/** Data of items dragged in from outside the collection */
+export interface DropItemsEvent {
+    items: Array<Record<string, string>>;
+    target: DropTarget;
+}
+/** Files dropped on an item, or on the collection itself */
+export interface DropFilesEvent {
+    files: Array<File>;
+    target?: DropTarget;
+}
+/** Declarative drag and drop for collections */
+export interface DragDropProps {
+    /** Data for the dragged items, keyed by mime type. Enables dragging. */
+    getDragData?: (keys: ReadonlySet<Key>) => Array<Record<string, string>>;
+    /** Drag types accepted on drop, defaults to every type */
+    acceptedDragTypes?: Array<string>;
+    /** Return false to reject a drop target */
+    canDrop?: (target: DropTarget, types: DragTypes) => boolean;
+    /** Items of this collection dropped before or after an item */
+    onReorder?: (event: DragMoveEvent) => void;
+    /** Items of this collection dropped on an item */
+    onMove?: (event: DragMoveEvent) => void;
+    /** Items from outside dropped on or next to an item */
+    onDropItems?: (event: DropItemsEvent) => void;
+    /** Files dropped on an item or on the collection */
+    onDropFiles?: (event: DropFilesEvent) => void;
+    /** Rendered under the pointer while dragging, gets the `getDragData` result */
+    renderDragPreview?: (items: Array<Record<string, string>>) => ReactNode;
+}
+export type ContentStatus = 'published' | 'draft' | 'unpublished' | 'archived' | 'untranslated';
+/** Error messages keyed by the `name` of a form field */
+export interface ValidationErrors {
+    [name: string]: string | Array<string>;
+}

package/dist/components.d.ts

@@ -1,38 +1,66 @@
+export * from './components/Alert.js';
+export * from './components/AppShell.js';
+export * from './components/AsyncList.js';
+export * from './components/Badge.js';
+export * from './components/Blockquote.js';
+export * from './components/Breadcrumbs.js';
 export * from './components/Button.js';
 export * from './components/Calendar.js';
 export * from './components/Checkbox.js';
 export * from './components/CheckboxGroup.js';
+export * from './components/Code.js';
+export * from './components/Collapsible.js';
 export * from './components/ColorSwatch.js';
 export * from './components/ColorSwatchPicker.js';
 export * from './components/ComboBox.js';
+export * from './components/Command.js';
+export * from './components/ContentCard.js';
+export * from './components/ContentGrid.js';
+export * from './components/DataList.js';
 export * from './components/DateField.js';
 export * from './components/DatePicker.js';
 export * from './components/DateRangePicker.js';
 export * from './components/Dialog.js';
-export * from './components/Disclosure.js';
+export * from './components/DropdownMenu.js';
 export * from './components/DropZone.js';
+export * from './components/Empty.js';
+export * from './components/Field.js';
+export * from './components/FileTrigger.js';
 export * from './components/FoldIcon.js';
+export * from './components/Form.js';
+export * from './components/Heading.js';
 export * from './components/Icon.js';
-export * from './components/Label.js';
+export * from './components/Kbd.js';
 export * from './components/Link.js';
 export * from './components/List.js';
-export * from './components/Menu.js';
-export * from './components/Modal.js';
+export * from './components/MediaPreview.js';
 export * from './components/MultipleSelect.js';
+export * from './components/NavRail.js';
 export * from './components/NumberField.js';
+export * from './components/Page.js';
 export * from './components/Popover.js';
-export * from './components/ProgressCircle.js';
+export * from './components/PreviewFrame.js';
 export * from './components/RadioGroup.js';
+export * from './components/Resizable.js';
 export * from './components/SearchField.js';
 export * from './components/Select.js';
+export * from './components/Sheet.js';
+export * from './components/Sidebar.js';
+export * from './components/SortableList.js';
+export * from './components/Spinner.js';
+export * from './components/Stack.js';
 export * from './components/Surface.js';
 export * from './components/Switch.js';
 export * from './components/Table.js';
 export * from './components/Tabs.js';
 export * from './components/TagGroup.js';
+export * from './components/Text.js';
 export * from './components/TextField.js';
 export * from './components/TimeField.js';
+export * from './components/Timestamp.js';
 export * from './components/Toggle.js';
+export * from './components/ToggleGroup.js';
 export * from './components/Toolbar.js';
 export * from './components/Tooltip.js';
 export * from './components/Tree.js';
+export type * from './components/types.js';

package/dist/components.js

@@ -1,39 +1,66 @@
 // src/components.ts
+export * from "./components/Alert.js";
+export * from "./components/AppShell.js";
+export * from "./components/AsyncList.js";
+export * from "./components/Badge.js";
+export * from "./components/Blockquote.js";
+export * from "./components/Breadcrumbs.js";
 export * from "./components/Button.js";
 export * from "./components/Calendar.js";
 export * from "./components/Checkbox.js";
 export * from "./components/CheckboxGroup.js";
+export * from "./components/Code.js";
+export * from "./components/Collapsible.js";
 export * from "./components/ColorSwatch.js";
 export * from "./components/ColorSwatchPicker.js";
 export * from "./components/ComboBox.js";
+export * from "./components/Command.js";
+export * from "./components/ContentCard.js";
+export * from "./components/ContentGrid.js";
+export * from "./components/DataList.js";
 export * from "./components/DateField.js";
 export * from "./components/DatePicker.js";
 export * from "./components/DateRangePicker.js";
 export * from "./components/Dialog.js";
-export * from "./components/Disclosure.js";
+export * from "./components/DropdownMenu.js";
 export * from "./components/DropZone.js";
+export * from "./components/Empty.js";
+export * from "./components/Field.js";
+export * from "./components/FileTrigger.js";
 export * from "./components/FoldIcon.js";
+export * from "./components/Form.js";
+export * from "./components/Heading.js";
 export * from "./components/Icon.js";
-export * from "./components/Label.js";
+export * from "./components/Kbd.js";
 export * from "./components/Link.js";
 export * from "./components/List.js";
-export * from "./components/Menu.js";
-export * from "./components/Modal.js";
+export * from "./components/MediaPreview.js";
 export * from "./components/MultipleSelect.js";
+export * from "./components/NavRail.js";
 export * from "./components/NumberField.js";
+export * from "./components/Page.js";
 export * from "./components/Popover.js";
-export * from "./components/ProgressCircle.js";
+export * from "./components/PreviewFrame.js";
 export * from "./components/RadioGroup.js";
+export * from "./components/Resizable.js";
 export * from "./components/SearchField.js";
 export * from "./components/Select.js";
+export * from "./components/Sheet.js";
+export * from "./components/Sidebar.js";
+export * from "./components/SortableList.js";
+export * from "./components/Spinner.js";
+export * from "./components/Stack.js";
 export * from "./components/Surface.js";
 export * from "./components/Switch.js";
 export * from "./components/Table.js";
 export * from "./components/Tabs.js";
 export * from "./components/TagGroup.js";
+export * from "./components/Text.js";
 export * from "./components/TextField.js";
 export * from "./components/TimeField.js";
+export * from "./components/Timestamp.js";
 export * from "./components/Toggle.js";
+export * from "./components/ToggleGroup.js";
 export * from "./components/Toolbar.js";
 export * from "./components/Tooltip.js";
 export * from "./components/Tree.js";

package/dist/config.d.ts

@@ -1,6 +1,8 @@
 export { createMediaRoot as media } from 'alinea/core/media/MediaRoot';
+export { file, mediaFile, mediaLibrary, mediaOverview } from 'alinea/core/media/MediaTypes';
 export { createConfig as create } from './core/Config.js';
 export { document } from './core/Document.js';
+export { column } from './core/Overview.js';
 export { page } from './core/Page.js';
 export { snippet } from './core/pages/Snippet.js';
 export { root } from './core/Root.js';

package/dist/config.js

@@ -2,8 +2,15 @@ import "./chunks/chunk-CQ52GEHY.js";
 
 // src/config.ts
 import { createMediaRoot } from "alinea/core/media/MediaRoot";
+import {
+  file,
+  mediaFile,
+  mediaLibrary,
+  mediaOverview
+} from "alinea/core/media/MediaTypes";
 import { createConfig } from "./core/Config.js";
 import { document } from "./core/Document.js";
+import { column } from "./core/Overview.js";
 import { page } from "./core/Page.js";
 import { snippet } from "./core/pages/Snippet.js";
 import { root } from "./core/Root.js";
@@ -13,9 +20,14 @@ import { type } from "./core/Type.js";
 import { role } from "./core/Role.js";
 import { workspace } from "./core/Workspace.js";
 export {
+  column,
   createConfig as create,
   document,
+  file,
   createMediaRoot as media,
+  mediaFile,
+  mediaLibrary,
+  mediaOverview,
   page,
   role,
   root,

package/dist/core/Client.js

@@ -13,6 +13,13 @@ import { getScope } from "./Scope.js";
 import { ReadonlyTree } from "./source/Tree.js";
 import { base64 } from "./util/Encoding.js";
 import { isRecord } from "./util/Objects.js";
+var readTimeout = 6e4;
+var reads = /* @__PURE__ */ new Set([
+  HandleAction.Tree,
+  HandleAction.Sha,
+  HandleAction.Blob,
+  HandleAction.Resolve
+]);
 var Client = class _Client {
   #options;
   constructor(options) {
@@ -180,10 +187,14 @@ var Client = class _Client {
     const controller = new AbortController();
     const signal = controller.signal;
     const location = `${url}?${new URLSearchParams(params).toString()}`;
+    const timer = reads.has(params.action) ? setTimeout(() => {
+      const seconds = readTimeout / 1e3;
+      controller.abort(new Error(`No response within ${seconds}s`));
+    }, readTimeout) : void 0;
     const promise = fetch(location, {
       ...applyAuth(init),
       signal
-    }).catch((err) => {
+    }).finally(() => clearTimeout(timer)).catch((err) => {
       throw new HttpError(
         500,
         `${err} @ ${init?.method || "GET"} action ${params.action}`