@panphora/bevel 0.1.0

package/dist/react/models/filter.js

@@ -0,0 +1,79 @@
+const filterOperators = {
+  text: ["equals", "contains", "starts-with", "is-empty"],
+  number: ["eq", "ne", "gt", "gte", "lt", "lte", "is-empty"],
+  date: ["before", "on", "after", "is-empty"],
+  enum: ["is", "is-not", "is-empty"]
+};
+function parseNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string" || !/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim())) return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+function isISODate(value) {
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const date = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  return Number.isFinite(date.valueOf()) && date.toISOString().slice(0, 10) === value;
+}
+function validateFilter(expression, fields) {
+  const definitions = new Map(fields.map((field) => [field.id, field]));
+  const errors = [];
+  const ids = /* @__PURE__ */ new Set();
+  for (const rule of expression.rules) {
+    const field = definitions.get(rule.field);
+    let message = "";
+    if (!rule.id || ids.has(rule.id)) message = "Each rule needs a unique ID.";
+    else if (!field) message = "Choose an available field.";
+    else if (!filterOperators[field.type ?? "text"].includes(rule.operator)) message = "Choose an operator for this field.";
+    else if (rule.operator !== "is-empty") {
+      if (field.type === "number" && parseNumber(rule.value) === null) message = "Enter a number.";
+      if (field.type === "date" && !isISODate(rule.value)) message = "Enter a real date in YYYY-MM-DD format.";
+      if (field.type === "enum" && field.options && !field.options.some((option) => option.id === rule.value)) message = "Choose an available value.";
+    }
+    ids.add(rule.id);
+    if (message) errors.push({ ruleId: rule.id, message });
+  }
+  return errors;
+}
+function matchesFilter(row, expression, fields) {
+  if (validateFilter(expression, fields).length) return false;
+  const definitions = new Map(fields.map((field) => [field.id, field]));
+  const matches = (rule) => {
+    const field = definitions.get(rule.field);
+    const actual = field.getValue ? field.getValue(row) : row[field.id];
+    if (rule.operator === "is-empty") return actual == null || actual === "";
+    if (field.type === "number") {
+      const a2 = parseNumber(actual), b2 = parseNumber(rule.value);
+      if (a2 === null || b2 === null) return false;
+      switch (rule.operator) {
+        case "eq":
+          return a2 === b2;
+        case "ne":
+          return a2 !== b2;
+        case "gt":
+          return a2 > b2;
+        case "gte":
+          return a2 >= b2;
+        case "lt":
+          return a2 < b2;
+        case "lte":
+          return a2 <= b2;
+      }
+    }
+    if (field.type === "date") {
+      if (!isISODate(actual)) return false;
+      return rule.operator === "before" ? actual < rule.value : rule.operator === "after" ? actual > rule.value : actual === rule.value;
+    }
+    if (field.type === "enum") return rule.operator === "is" ? String(actual) === rule.value : String(actual) !== rule.value;
+    const a = String(actual ?? "").toLowerCase(), b = rule.value.toLowerCase();
+    return rule.operator === "equals" ? a === b : rule.operator === "contains" ? a.includes(b) : a.startsWith(b);
+  };
+  return expression.rules.length === 0 || (expression.match === "any" ? expression.rules.some(matches) : expression.rules.every(matches));
+}
+export {
+  filterOperators,
+  isISODate,
+  matchesFilter,
+  parseNumber,
+  validateFilter
+};

package/dist/react/models/kanban.d.ts

@@ -0,0 +1,51 @@
+export interface KanbanCheck {
+    id: string;
+    text: string;
+    checked: boolean;
+}
+export interface KanbanCard {
+    id: string;
+    columnId: string;
+    title: string;
+    description?: string;
+    assignee?: string;
+    priority?: 'low' | 'normal' | 'high' | 'urgent';
+    due?: string;
+    labels?: readonly string[];
+    checklist?: readonly KanbanCheck[];
+    archived?: boolean;
+    disabled?: boolean;
+}
+export interface KanbanColumn {
+    id: string;
+    label: string;
+    cardIds: readonly string[];
+    wip?: number;
+    done?: boolean;
+}
+export interface KanbanValue {
+    columns: readonly KanbanColumn[];
+    cards: readonly KanbanCard[];
+}
+export interface KanbanFilter {
+    query?: string;
+    assignee?: string;
+    label?: string;
+    priority?: string;
+    dueFrom?: string;
+    dueTo?: string;
+    due?: 'set' | 'empty';
+    archived?: boolean;
+}
+export interface KanbanMove {
+    cardId: string;
+    fromColumnId: string;
+    toColumnId: string;
+    index: number;
+}
+export declare function validateKanban(value: KanbanValue): void;
+export declare function matchesKanban(card: KanbanCard, filter: KanbanFilter): boolean | undefined;
+export declare function moveKanbanCard(value: KanbanValue, cardId: string, toColumnId: string, index: number): {
+    value: KanbanValue;
+    move: KanbanMove;
+} | null;

package/dist/react/models/kanban.js

@@ -0,0 +1,35 @@
+import { isISODate } from "./filter.js";
+import { moveBetweenColumns } from "./reorder.js";
+function validateKanban(value) {
+  const cards = new Map(value.cards.map((card) => [card.id, card])), seen = /* @__PURE__ */ new Set();
+  if (cards.size !== value.cards.length || new Set(value.columns.map((column) => column.id)).size !== value.columns.length) throw new Error("Kanban cards and columns need unique IDs.");
+  for (const column of value.columns) for (const id of column.cardIds) {
+    if (seen.has(id) || !cards.has(id) || cards.get(id).columnId !== column.id) throw new Error("Each Kanban card must belong to exactly one matching column.");
+    seen.add(id);
+  }
+  if (seen.size !== cards.size) throw new Error("Each Kanban card must appear in its column.");
+  for (const card of value.cards) if (new Set(card.checklist?.map((item) => item.id)).size !== (card.checklist?.length ?? 0)) throw new Error("Checklist IDs must be unique within a card.");
+}
+function matchesKanban(card, filter) {
+  if (Boolean(card.archived) !== Boolean(filter.archived)) return false;
+  if (filter.dueFrom && !isISODate(filter.dueFrom) || filter.dueTo && !isISODate(filter.dueTo)) return false;
+  const query = filter.query?.trim().toLowerCase();
+  return (!query || [card.title, card.description, card.assignee, ...card.labels ?? []].join(" ").toLowerCase().includes(query)) && (!filter.assignee || card.assignee === filter.assignee) && (!filter.label || card.labels?.includes(filter.label)) && (!filter.priority || card.priority === filter.priority) && (!filter.dueFrom || Boolean(card.due && card.due >= filter.dueFrom)) && (!filter.dueTo || Boolean(card.due && card.due <= filter.dueTo)) && (!filter.due || (filter.due === "set" ? Boolean(card.due) : !card.due));
+}
+function moveKanbanCard(value, cardId, toColumnId, index) {
+  const card = value.cards.find((card2) => card2.id === cardId), destination = value.columns.find((column) => column.id === toColumnId);
+  if (!card || card.disabled || !destination) return null;
+  const position = Math.max(0, Math.min(destination.cardIds.filter((id) => id !== cardId).length, Math.trunc(index) || 0));
+  const source = value.columns.find((column) => column.id === card.columnId);
+  if (source.id === destination.id && source.cardIds.indexOf(cardId) === position) return null;
+  const order = moveBetweenColumns(value.columns, cardId, toColumnId, position);
+  return {
+    value: { columns: value.columns.map((column) => ({ ...column, cardIds: order.find((item) => item.id === column.id).cardIds })), cards: value.cards.map((item) => item.id === cardId ? { ...item, columnId: toColumnId } : item) },
+    move: { cardId, fromColumnId: card.columnId, toColumnId, index: position }
+  };
+}
+export {
+  matchesKanban,
+  moveKanbanCard,
+  validateKanban
+};

package/dist/react/models/reorder.d.ts

@@ -0,0 +1,9 @@
+export declare function moveItem<Value>(items: readonly Value[], from: number, to: number): Value[];
+export declare function moveId(ids: readonly string[], id: string, to: number): string[];
+export declare function moveBetweenColumns(columns: ReadonlyArray<{
+    id: string;
+    cardIds: readonly string[];
+}>, cardId: string, toColumnId: string, index: number): readonly {
+    id: string;
+    cardIds: readonly string[];
+}[];

package/dist/react/models/reorder.js

@@ -0,0 +1,23 @@
+function moveItem(items, from, to) {
+  if (from < 0 || from >= items.length || to < 0 || to >= items.length || from === to) return [...items];
+  const result = [...items];
+  result.splice(to, 0, result.splice(from, 1)[0]);
+  return result;
+}
+function moveId(ids, id, to) {
+  return moveItem(ids, ids.indexOf(id), Math.max(0, Math.min(ids.length - 1, to)));
+}
+function moveBetweenColumns(columns, cardId, toColumnId, index) {
+  const from = columns.find((column) => column.cardIds.includes(cardId));
+  if (!from || !columns.some((column) => column.id === toColumnId)) return columns;
+  return columns.map((column) => {
+    const cardIds = column.cardIds.filter((id) => id !== cardId);
+    if (column.id === toColumnId) cardIds.splice(Math.max(0, Math.min(cardIds.length, index)), 0, cardId);
+    return { ...column, cardIds };
+  });
+}
+export {
+  moveBetweenColumns,
+  moveId,
+  moveItem
+};

package/dist/react/models/table.d.ts

@@ -0,0 +1,85 @@
+import { type FilterExpression, type FilterType } from './filter.js';
+export type RowId = string;
+export type ColumnId = string;
+export type Sort = {
+    columnId: ColumnId;
+    direction: 'ascending' | 'descending';
+} | null;
+export interface ColumnState {
+    id: ColumnId;
+    visible: boolean;
+    pinned: boolean;
+    width?: number;
+}
+export interface TableState {
+    query: string;
+    sort: Sort;
+    page: number;
+    pageSize: number;
+    selectedIds: RowId[];
+    expandedIds: RowId[];
+    columns: ColumnState[];
+    filter: FilterExpression;
+    view: string | null;
+}
+export interface ColumnDef<Row> {
+    id: ColumnId;
+    label: string;
+    type?: FilterType;
+    getValue: (row: Row) => unknown;
+    compare?: (a: Row, b: Row) => number;
+    required?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    options?: ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+}
+export interface TableView<Row> {
+    id: string;
+    label: string;
+    matches: (row: Row) => boolean;
+}
+export interface TableOptions<Row> {
+    rows: readonly Row[];
+    getRowId: (row: Row) => string;
+    columns: readonly ColumnDef<Row>[];
+    state: TableState;
+    mode?: 'client' | 'manual';
+    totalRows?: number;
+    hasNextPage?: boolean;
+    groupBy?: (row: Row) => string;
+    views?: readonly TableView<Row>[];
+    viewCounts?: Record<string, number>;
+    getSearchText?: (row: Row) => string;
+    isRowSelectable?: (row: Row) => boolean;
+    aggregate?: (rows: readonly Row[]) => Record<string, unknown>;
+    aggregates?: Record<string, unknown>;
+}
+export declare function normalizeColumns<Row>(columns: readonly ColumnDef<Row>[], state: readonly ColumnState[]): ColumnState[];
+export declare function createTableState<Row>(columns: readonly ColumnDef<Row>[], initial?: Partial<TableState>): TableState;
+export declare function updateTableState(state: TableState, patch: Partial<TableState>): TableState;
+export declare function setColumnVisibility<Row>(columns: readonly ColumnDef<Row>[], state: readonly ColumnState[], id: string, visible: boolean): ColumnState[];
+export declare function deriveTable<Row>(options: TableOptions<Row>): {
+    rows: Row[];
+    matchingRows: Row[];
+    columns: ColumnState[];
+    visibleColumns: ColumnState[];
+    total: number | undefined;
+    pageCount: number | undefined;
+    page: number;
+    pageSize: number;
+    start: number;
+    end: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    eligibleIds: string[];
+    allSelected: boolean;
+    mixedSelection: boolean;
+    selectedCount: number;
+    aggregates: Record<string, unknown>;
+    viewCounts: Record<string, number>;
+};
+export declare function toggleVisibleSelection(selectedIds: readonly string[], eligibleIds: readonly string[], selected: boolean): string[];
+export declare function pageItems(page: number, pageCount: number, radius?: number): Array<number | 'ellipsis'>;

package/dist/react/models/table.js

@@ -0,0 +1,144 @@
+import { matchesFilter, parseNumber } from "./filter.js";
+function normalizeColumns(columns, state) {
+  const definitions = new Map(columns.map((column) => [column.id, column]));
+  if (definitions.size !== columns.length) throw new Error("Table column IDs must be unique.");
+  const result = [];
+  for (const item of [...state, ...columns.map((column) => ({ id: column.id, visible: true, pinned: Boolean(column.required) }))]) {
+    const column = definitions.get(item.id);
+    if (!column || result.some((existing) => existing.id === item.id)) continue;
+    const requested = "width" in item && typeof item.width === "number" && Number.isFinite(item.width) ? item.width : 160;
+    const width = Math.max(column.minWidth ?? 80, Math.min(column.maxWidth ?? 800, requested));
+    result.push({ id: item.id, visible: column.required || item.visible, pinned: column.required || item.pinned, width });
+  }
+  const optional = result.filter((item) => !definitions.get(item.id)?.required);
+  if (optional.length && !optional.some((item) => item.visible)) optional[0].visible = true;
+  const required = columns.filter((column) => column.required).map((column) => result.find((item) => item.id === column.id));
+  return [...required, ...result.filter((item) => !definitions.get(item.id)?.required && item.pinned), ...result.filter((item) => !item.pinned)];
+}
+function createTableState(columns, initial = {}) {
+  return {
+    query: "",
+    sort: null,
+    page: 1,
+    pageSize: 10,
+    selectedIds: [],
+    expandedIds: [],
+    filter: { match: "all", rules: [] },
+    view: null,
+    ...initial,
+    columns: normalizeColumns(columns, initial.columns ?? [])
+  };
+}
+function updateTableState(state, patch) {
+  const reset = ["query", "filter", "view", "pageSize"].some((key) => key in patch && !Object.is(patch[key], state[key]));
+  return { ...state, ...patch, ...reset ? { page: 1 } : {} };
+}
+function setColumnVisibility(columns, state, id, visible) {
+  const current = normalizeColumns(columns, state);
+  const definition = columns.find((column) => column.id === id);
+  if (!definition || definition.required) return current;
+  if (!visible && current.filter((item) => item.visible && !columns.find((column) => column.id === item.id)?.required).length <= 1) return current;
+  return current.map((column) => column.id === id ? { ...column, visible } : column);
+}
+function compareValues(a, b, type = "text") {
+  const av = type === "number" ? parseNumber(a) : a, bv = type === "number" ? parseNumber(b) : b;
+  if (av == null || av === "") return bv == null || bv === "" ? 0 : 1;
+  if (bv == null || bv === "") return -1;
+  if (type === "number") return av - bv;
+  return String(av).localeCompare(String(bv), "en", { numeric: true, sensitivity: "base" });
+}
+function deriveTable(options) {
+  const { state, columns, getRowId, groupBy, mode = "client" } = options;
+  const pageSize = Math.max(1, Math.trunc(state.pageSize) || 1);
+  const ids = options.rows.map(getRowId);
+  if (new Set(ids).size !== ids.length) throw new Error("Table row IDs must be unique.");
+  const normalizedColumns = normalizeColumns(columns, state.columns);
+  const fields = columns.map((column) => ({ ...column }));
+  const query = state.query.trim().toLowerCase();
+  const filtered = mode === "manual" ? [...options.rows] : options.rows.filter((row) => (!query || (options.getSearchText ? options.getSearchText(row) : columns.map((column) => String(column.getValue(row) ?? "")).join(" ")).toLowerCase().includes(query)) && matchesFilter(row, state.filter, fields));
+  const viewCounts = mode === "manual" ? options.viewCounts ?? {} : Object.fromEntries((options.views ?? []).map((view2) => [view2.id, filtered.filter(view2.matches).length]));
+  const view = options.views?.find((view2) => view2.id === state.view);
+  const matching = mode === "manual" || !view ? filtered : filtered.filter(view.matches);
+  const sortColumn = state.sort && columns.find((column) => column.id === state.sort?.columnId);
+  let ordered = [...matching];
+  if (mode !== "manual" && sortColumn) {
+    const direction = state.sort?.direction === "descending" ? -1 : 1;
+    const sort = (rows2) => rows2.sort((a, b) => direction * (sortColumn.compare ? sortColumn.compare(a, b) : compareValues(sortColumn.getValue(a), sortColumn.getValue(b), sortColumn.type)));
+    if (groupBy) {
+      const groups = /* @__PURE__ */ new Map();
+      for (const row of ordered) {
+        const group = groupBy(row);
+        const rows2 = groups.get(group) ?? [];
+        rows2.push(row);
+        groups.set(group, rows2);
+      }
+      ordered = [...groups.values()].flatMap(sort);
+    } else sort(ordered);
+  } else if (mode !== "manual" && groupBy) {
+    const groups = /* @__PURE__ */ new Map();
+    for (const row of ordered) {
+      const group = groupBy(row);
+      const rows2 = groups.get(group) ?? [];
+      rows2.push(row);
+      groups.set(group, rows2);
+    }
+    ordered = [...groups.values()].flat();
+  }
+  const total = mode === "manual" ? options.totalRows : ordered.length;
+  const pageCount = total === void 0 ? void 0 : Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
+  const page = Math.max(1, Math.min(pageCount ?? Infinity, Math.trunc(state.page) || 1));
+  const rows = mode === "manual" ? ordered : ordered.slice((page - 1) * pageSize, page * pageSize);
+  const eligibleIds = rows.filter((row) => options.isRowSelectable?.(row) !== false).map(getRowId);
+  const selected = new Set(state.selectedIds);
+  const selectedVisible = eligibleIds.filter((id) => selected.has(id)).length;
+  const start = rows.length ? (page - 1) * pageSize + 1 : 0;
+  return {
+    rows,
+    matchingRows: matching,
+    columns: normalizedColumns,
+    visibleColumns: normalizedColumns.filter((column) => column.visible),
+    total,
+    pageCount,
+    page,
+    pageSize,
+    start,
+    end: rows.length ? start + rows.length - 1 : 0,
+    hasNextPage: pageCount === void 0 ? Boolean(options.hasNextPage) : page < pageCount,
+    hasPreviousPage: page > 1,
+    eligibleIds,
+    allSelected: eligibleIds.length > 0 && selectedVisible === eligibleIds.length,
+    mixedSelection: selectedVisible > 0 && selectedVisible < eligibleIds.length,
+    selectedCount: selected.size,
+    aggregates: mode === "manual" ? options.aggregates ?? {} : options.aggregate?.(matching) ?? {},
+    viewCounts
+  };
+}
+function toggleVisibleSelection(selectedIds, eligibleIds, selected) {
+  const next = new Set(selectedIds);
+  for (const id of eligibleIds) if (selected) next.add(id);
+  else next.delete(id);
+  return [...next];
+}
+function pageItems(page, pageCount, radius = 1) {
+  const last = Math.max(1, Math.trunc(pageCount));
+  const current = Math.max(1, Math.min(last, Math.trunc(page)));
+  const pages = /* @__PURE__ */ new Set([1, last]);
+  for (let value = Math.max(1, current - radius); value <= Math.min(last, current + radius); value++) pages.add(value);
+  const sorted = [...pages].sort((a, b) => a - b), result = [];
+  sorted.forEach((value, index) => {
+    const gap = value - (sorted[index - 1] ?? value);
+    if (gap === 2) result.push(value - 1);
+    else if (gap > 2) result.push("ellipsis");
+    result.push(value);
+  });
+  return result;
+}
+export {
+  createTableState,
+  deriveTable,
+  normalizeColumns,
+  pageItems,
+  setColumnVisibility,
+  toggleVisibleSelection,
+  updateTableState
+};

package/dist/react/models/tree.d.ts

@@ -0,0 +1,16 @@
+export interface TreeNode {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    href?: string;
+    children?: readonly TreeNode[];
+}
+export interface VisibleTreeNode {
+    node: TreeNode;
+    level: number;
+    parentId: string | null;
+    posInSet: number;
+    setSize: number;
+}
+export declare function visibleTree(nodes: readonly TreeNode[], expandedIds: readonly string[]): VisibleTreeNode[];
+export declare function treeParent(nodes: readonly TreeNode[], id: string, parent?: string | null): string | null | undefined;

package/dist/react/models/tree.js

@@ -0,0 +1,26 @@
+function visibleTree(nodes, expandedIds) {
+  const expanded = new Set(expandedIds);
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  const visit = (siblings, parentId, level, visible) => {
+    siblings.forEach((node, index) => {
+      if (seen.has(node.id)) throw new Error(`Duplicate tree ID: ${node.id}`);
+      seen.add(node.id);
+      if (visible) result.push({ node, level, parentId, posInSet: index + 1, setSize: siblings.length });
+      if (node.children) visit(node.children, node.id, level + 1, visible && expanded.has(node.id));
+    });
+  };
+  visit(nodes, null, 1, true);
+  return result;
+}
+function treeParent(nodes, id, parent = null) {
+  for (const node of nodes) {
+    if (node.id === id) return parent;
+    const found = node.children && treeParent(node.children, id, node.id);
+    if (found !== void 0) return found;
+  }
+}
+export {
+  treeParent,
+  visibleTree
+};

package/dist/react/provider.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps } from 'react';
+export type BevelTokens = {
+    [name: `--bevel-${string}`]: string | number;
+};
+export type BevelAppearance = 'plain' | 'bevel';
+export type BevelMode = 'system' | 'light' | 'dark';
+export interface BevelTheme {
+    appearance: BevelAppearance;
+    mode: BevelMode;
+    tokens: BevelTokens;
+}
+export declare function useBevel(): BevelTheme;
+export interface BevelProviderProps extends ComponentProps<'div'> {
+    appearance?: BevelAppearance;
+    mode?: BevelMode;
+    tokens?: BevelTokens;
+}
+export declare function BevelProvider({ appearance, mode, tokens, style, children, ...props }: BevelProviderProps): import("react").JSX.Element;

package/dist/react/provider.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const defaults = { appearance: "plain", mode: "system", tokens: {} };
+const ThemeContext = createContext(defaults);
+function useBevel() {
+  return useContext(ThemeContext);
+}
+function BevelProvider({ appearance, mode, tokens, style, children, ...props }) {
+  const parent = useBevel();
+  const theme = useMemo(() => ({
+    appearance: appearance ?? parent.appearance,
+    mode: mode ?? parent.mode,
+    tokens: { ...parent.tokens, ...tokens }
+  }), [appearance, mode, tokens, parent]);
+  return /* @__PURE__ */ jsx(ThemeContext, { value: theme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-bevel-scope": "",
+      "data-bevel-appearance": theme.appearance,
+      "data-bevel-mode": theme.mode,
+      style: { ...theme.tokens, ...style },
+      children
+    }
+  ) });
+}
+export {
+  BevelProvider,
+  useBevel
+};

package/dist/react/recipes/context-hypercms.d.ts

@@ -0,0 +1,17 @@
+export interface CMSDocument {
+    title: string;
+    introduction: string;
+    coverURL?: string;
+    contributors: readonly {
+        id: string;
+        name: string;
+    }[];
+}
+export interface CMSContextProps {
+    src: string;
+    document: CMSDocument;
+    onApply: (document: CMSDocument) => void;
+    pending?: boolean;
+    error?: string;
+}
+export declare function CMSContext({ src, document, onApply, pending, error }: CMSContextProps): import("react").JSX.Element;

package/dist/react/recipes/context-hypercms.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Dialog } from "../components/dialog.js";
+import { Button } from "../components/button.js";
+import { Field } from "../components/field.js";
+import { Input } from "../components/input.js";
+import { Textarea } from "../components/textarea.js";
+import { Sortable } from "../components/sortable.js";
+import { ImagePreview } from "../components/image.js";
+import { DocumentCard } from "../components/documents.js";
+function CMSContext({ src, document, onApply, pending = false, error }) {
+  const [open, setOpen] = useState(false), [draft, setDraft] = useState(document);
+  useEffect(() => {
+    setDraft(document);
+    setOpen(false);
+  }, [document]);
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs(DocumentCard.Root, { children: [
+      /* @__PURE__ */ jsx(DocumentCard.Identity, { children: document.title }),
+      /* @__PURE__ */ jsx(DocumentCard.Status, { children: "External CMS document" })
+    ] }),
+    /* @__PURE__ */ jsx("iframe", { src, title: `${document.title} CMS host`, style: { width: "100%", minHeight: 320, border: "1px solid currentColor" } }),
+    /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange: (value) => {
+      if (!pending) {
+        if (value) setDraft(document);
+        setOpen(value);
+      }
+    }, children: [
+      /* @__PURE__ */ jsx(Dialog.Trigger, { children: "Edit document metadata" }),
+      /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx(Dialog.Backdrop, {}),
+        /* @__PURE__ */ jsxs(Dialog.Popup, { children: [
+          /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { children: "Document metadata" }),
+            /* @__PURE__ */ jsx(Dialog.Description, { children: "The application applies these changes to its CMS document." })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: (event) => {
+            event.preventDefault();
+            if (!pending && draft.title.trim()) onApply({ ...draft, title: draft.title.trim() });
+          }, children: [
+            /* @__PURE__ */ jsxs(Dialog.Body, { children: [
+              /* @__PURE__ */ jsxs(Field.Root, { name: "title", children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: "Document title" }),
+                /* @__PURE__ */ jsx(Input, { required: true, value: draft.title, disabled: pending, onValueChange: (title) => setDraft({ ...draft, title }) }),
+                /* @__PURE__ */ jsx(Field.Error, {})
+              ] }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                "Introduction",
+                /* @__PURE__ */ jsx(Textarea, { value: draft.introduction, disabled: pending, onChange: (event) => setDraft({ ...draft, introduction: event.target.value }) })
+              ] }),
+              /* @__PURE__ */ jsx(ImagePreview.Root, { children: /* @__PURE__ */ jsx(ImagePreview.Frame, { children: /* @__PURE__ */ jsx(ImagePreview.Image, { src: draft.coverURL, alt: "Document cover" }) }) }),
+              /* @__PURE__ */ jsx(Sortable.Root, { value: draft.contributors.map((person) => person.id), disabled: pending, onValueChange: (ids) => setDraft({ ...draft, contributors: ids.map((id) => draft.contributors.find((person) => person.id === id)) }), children: (order) => order.map((id) => /* @__PURE__ */ jsxs(Sortable.Item, { id, children: [
+                /* @__PURE__ */ jsx(Sortable.Handle, { "aria-label": `Move ${draft.contributors.find((person) => person.id === id).name}` }),
+                /* @__PURE__ */ jsx(Sortable.Body, { children: draft.contributors.find((person) => person.id === id).name })
+              ] }, id)) }),
+              error && /* @__PURE__ */ jsx("p", { role: "alert", children: error })
+            ] }),
+            /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+              /* @__PURE__ */ jsx(Dialog.Close, { disabled: pending, children: "Cancel metadata" }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", disabled: pending, children: "Apply metadata" })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CMSContext
+};

package/dist/react/recipes/context-quickcrop.d.ts

@@ -0,0 +1,8 @@
+import { type QuickcropFunction, type QuickcropResult } from '../integrations/quickcrop.js';
+export interface CropImageFieldProps {
+    quickcrop: QuickcropFunction;
+    onResult: (result: QuickcropResult) => void;
+    onOriginal?: (file: File) => void;
+    disabled?: boolean;
+}
+export declare function CropImageField({ quickcrop, onResult, onOriginal, disabled }: CropImageFieldProps): import("react").JSX.Element;