@chelone/vue 0.0.0-stage → 0.1.0

package/dist/label/inflection.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Clean-room subset of the `inflection` rules the resource-label fallback needs
+ * — the Vue twin of `@chelone/react`'s `label/inflection.ts`. `humanize` strips
+ * a trailing `_id`, underscores → spaces, lowercases, capitalizes the first
+ * letter (no camelCase split, ra-core parity). `pluralize` covers the regular
+ * English rules + a small irregular set and is idempotent on plurals. Full
+ * parity with the `inflection` package is a documented non-goal — the fallback
+ * only fires when both a translation key and an explicit label are absent.
+ */
+/**
+ * ra-core `humanize`: strip a trailing `_id`, underscores → spaces, lowercase,
+ * capitalize the first letter. Deliberately does NOT split camelCase.
+ */
+export declare function humanize(text: string): string;
+/**
+ * ra-core `transform(source, ['underscore','humanize'])`: camelCase-aware
+ * humanization for FIELD labels — `firstName` → `First name`, `full_name` →
+ * `Full name`, `author name` → `Author name`. Used by `useTranslateLabel` for
+ * the humanized fallback when no translation key and no explicit label exist.
+ */
+export declare function humanizeField(source: string): string;
+/**
+ * ra-core `inflect(word, count)`: singular for `count === 1`, plural otherwise.
+ */
+export declare function pluralize(word: string, count?: number): string;

package/dist/label/inflection.js

@@ -0,0 +1,51 @@
+function capitalizeFirst(text) {
+  return text.length === 0 ? text : text.charAt(0).toUpperCase() + text.slice(1);
+}
+function humanize(text) {
+  const withoutId = text.replace(/_id$/, "");
+  const spaced = withoutId.replace(/_+/g, " ").trim().toLowerCase();
+  return capitalizeFirst(spaced);
+}
+function underscore(text) {
+  return text.replace(/([a-z\d])([A-Z])/g, "$1_$2").replace(/[-\s]+/g, "_").toLowerCase();
+}
+function humanizeField(source) {
+  return humanize(underscore(source));
+}
+const IRREGULARS = [
+  ["person", "people"],
+  ["child", "children"],
+  ["man", "men"],
+  ["woman", "women"],
+  ["mouse", "mice"],
+  ["foot", "feet"],
+  ["tooth", "teeth"],
+  ["goose", "geese"]
+];
+function toSingular(word) {
+  for (const [singular, plural] of IRREGULARS) {
+    if (word === plural) return singular;
+    if (word === singular) return singular;
+  }
+  if (/ies$/.test(word)) return `${word.slice(0, -3)}y`;
+  if (/(ss|x|z|ch|sh)es$/.test(word)) return word.slice(0, -2);
+  if (/s$/.test(word) && !/ss$/.test(word)) return word.slice(0, -1);
+  return word;
+}
+function toPlural(word) {
+  for (const [singular2, plural] of IRREGULARS) {
+    if (word === singular2 || word === plural) return plural;
+  }
+  const singular = toSingular(word);
+  if (/[^aeiou]y$/.test(singular)) return `${singular.slice(0, -1)}ies`;
+  if (/(s|x|z|ch|sh)$/.test(singular)) return `${singular}es`;
+  return `${singular}s`;
+}
+function pluralize(word, count = 2) {
+  return count === 1 ? toSingular(word) : toPlural(word);
+}
+export {
+  humanize,
+  humanizeField,
+  pluralize
+};

package/dist/label/use-get-record-representation.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `useGetRecordRepresentation(resource?)` — resolve a record to its display
+ * representation. The Vue twin of `@chelone/react`'s
+ * `label/use-get-record-representation.tsx` (ra-core parity, clean-room).
+ *
+ * Reads the resource's `recordRepresentation` from the ambient registry and
+ * applies:
+ * - a function → call it with the record;
+ * - a string → the value at that (deep) source path off the record;
+ * - otherwise the default chain `name → title → label → reference → #${id}`.
+ * A nullish record → `""`.
+ *
+ * The resource comes from the argument or the ambient `<Resource>` name. The
+ * registry is optional (a form/field used without `<Admin>` in a unit test):
+ * with no registry, only the default chain applies.
+ */
+/** The resolver `useGetRecordRepresentation` returns. */
+export type GetRecordRepresentation = (record: unknown) => string;
+export declare function useGetRecordRepresentation(resource?: string): GetRecordRepresentation;

package/dist/label/use-get-record-representation.js

@@ -0,0 +1,44 @@
+import { inject } from "vue";
+import { ResourceRegistryKey } from "../admin/resource-registry.js";
+import { useResourceContext } from "../resource-context.js";
+function getAtPath(record, source) {
+  if (source === "") return record;
+  let current = record;
+  const pattern = /\[([^\]]*)\]|[^.[\]]+/g;
+  let match = pattern.exec(source);
+  while (match !== null) {
+    if (current == null || typeof current !== "object") return void 0;
+    const key = match[1] !== void 0 ? match[1] : match[0];
+    current = current[key];
+    match = pattern.exec(source);
+  }
+  return current;
+}
+function isPresent(value) {
+  return value != null && value !== "";
+}
+function useGetRecordRepresentation(resource) {
+  const name = useResourceContext({ resource });
+  const registry = inject(ResourceRegistryKey, null);
+  const recordRepresentation = name ? registry?.definitions[name]?.recordRepresentation : void 0;
+  return (record) => {
+    if (record == null) return "";
+    if (typeof recordRepresentation === "function") {
+      return String(
+        recordRepresentation(record) ?? ""
+      );
+    }
+    if (typeof recordRepresentation === "string") {
+      return String(getAtPath(record, recordRepresentation) ?? "");
+    }
+    const chain = record;
+    if (isPresent(chain.name)) return String(chain.name);
+    if (isPresent(chain.title)) return String(chain.title);
+    if (isPresent(chain.label)) return String(chain.label);
+    if (isPresent(chain.reference)) return String(chain.reference);
+    return `#${String(chain.id)}`;
+  };
+}
+export {
+  useGetRecordRepresentation
+};

package/dist/label/use-get-resource-label.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `useGetResourceLabel()` — returns `(resource, count?) => string`, the Vue twin
+ * of `@chelone/react`'s `label/use-get-resource-label.ts` (ra-core parity).
+ * Translates `resources.${resource}.name` with pluralization, falling back to a
+ * humanized, count-inflected default when the key is missing (Chelone
+ * `translate` echoes the key on a miss).
+ *
+ * Vue divergence from the React twin: the adapter's `ResourceDefinition` carries
+ * no `options.label` bag (a later wave), so the fallback is purely the humanized
+ * plural of the resource name — no per-resource label override yet.
+ */
+/** The label resolver `useGetResourceLabel` returns. */
+export type GetResourceLabel = (resource: string, count?: number) => string;
+export declare function useGetResourceLabel(): GetResourceLabel;

package/dist/label/use-get-resource-label.js

@@ -0,0 +1,14 @@
+import { useTranslate } from "../i18n/use-translate.js";
+import { humanize, pluralize } from "./inflection.js";
+function useGetResourceLabel() {
+  const translate = useTranslate();
+  return (resource, count = 2) => {
+    const humanizedDefault = humanize(pluralize(resource, count));
+    const key = `resources.${resource}.name`;
+    const translated = translate(key, { count, smart_count: count });
+    return translated === key ? humanizedDefault : translated;
+  };
+}
+export {
+  useGetResourceLabel
+};

package/dist/label/use-translate-label.d.ts

@@ -0,0 +1,39 @@
+/**
+ * `useTranslateLabel()` — the Vue twin of `@chelone/react`'s
+ * `label/use-translate-label.tsx`. Returns a resolver
+ * `({ source, label?, resource? }) => string | null` that computes a field's
+ * displayable label text:
+ * - `label === false` or `label === ""` → `null` (render no label);
+ * - a non-empty string `label` → translate it (echoing itself on a miss);
+ * - otherwise translate `resources.${resource}.fields.${source}`, falling back
+ *   to the humanized field name when the key is missing.
+ *
+ * The default label KEY follows ra-core's `getFieldLabelTranslationArgs`:
+ * digits are stripped from the source (`tags.0.url` → `tags.url`), and the
+ * humanized DEFAULT is derived from the source SUFFIX after the last index
+ * (`tags.0.url` → `url` → `Url`). The resource comes from the `resource`
+ * option, the ambient source scope's `getLabel(source)`, or the ambient
+ * `ResourceContext`.
+ *
+ * Idiom translation from the React twin: React returns a `ReactNode` (a label
+ * may be a node); Vue keeps the resolver STRING-typed (`string | null`) and
+ * handles a custom-node label at the `<FieldLabelText>` component seam via a
+ * slot, so this composable stays presentation-free and fully typed. Core's
+ * `translate` echoes the key on a miss (no polyglot `_`), so the
+ * humanized-field fallback is applied here when `translate(key) === key`.
+ */
+/** Options accepted by the resolver `useTranslateLabel` returns. */
+export interface TranslateLabelOptions {
+    source?: string;
+    /** A string is translated; `false`/`""` resolves to `null` (no label). */
+    label?: string | false;
+    resource?: string;
+}
+/** The field-label resolver `useTranslateLabel` returns. */
+export type TranslateLabel = (options: TranslateLabelOptions) => string | null;
+/**
+ * Resolve field labels against the ambient i18n + resource + source scope. The
+ * returned resolver reads those ambient values at call time, so it stays
+ * reactive to a locale/resource change (the caller wraps it in a `computed`).
+ */
+export declare function useTranslateLabel(): TranslateLabel;

package/dist/label/use-translate-label.js

@@ -0,0 +1,48 @@
+import { useSourceScope } from "../form/form-context.js";
+import { useTranslate } from "../i18n/use-translate.js";
+import { useResourceContext } from "../resource-context.js";
+import { humanizeField } from "./inflection.js";
+function getSourceParts(source) {
+  const sourceWithoutDigits = source.replace(/\.\d+\./g, ".");
+  const parts = source.split(".");
+  let lastIndex;
+  parts.forEach((part, index) => {
+    if (part.length > 0 && /^\d+$/.test(part)) lastIndex = index;
+  });
+  const sourceSuffix = lastIndex != null ? parts.slice(lastIndex + 1).join(".") : source;
+  return { sourceWithoutDigits, sourceSuffix };
+}
+const fieldLabelKey = (resource, source) => `resources.${resource}.fields.${source}`;
+function useTranslateLabel() {
+  const translate = useTranslate();
+  const resourceFromContext = useResourceContext();
+  const sourceScope = useSourceScope();
+  return ({
+    source,
+    label,
+    resource
+  }) => {
+    if (label === false || label === "") return null;
+    if (typeof label === "string") {
+      return translate(label, { _: label });
+    }
+    if (source == null) return "";
+    const { sourceWithoutDigits, sourceSuffix } = getSourceParts(source);
+    const humanizedDefault = humanizeField(sourceSuffix.replace(/\./g, " "));
+    let key;
+    if (resource) {
+      key = fieldLabelKey(resource, sourceWithoutDigits);
+    } else {
+      const contextLabel = sourceScope.getLabel(source);
+      key = contextLabel && contextLabel !== source ? contextLabel : fieldLabelKey(
+        resourceFromContext ?? "undefined",
+        sourceWithoutDigits
+      );
+    }
+    const translated = translate(key);
+    return translated === key ? humanizedDefault : translated;
+  };
+}
+export {
+  useTranslateLabel
+};

package/dist/lib/are-ids-equal.d.ts

@@ -0,0 +1,7 @@
+/**
+ * `areIdsEqual` — compares two record ids for equality, coercing to strings so a
+ * numeric id sourced from a data provider matches a string id held in form
+ * state. The Vue twin of `@chelone/react`'s `lib/are-ids-equal.ts` (the
+ * autocomplete inputs' default option-vs-value equality check).
+ */
+export declare function areIdsEqual(a: unknown, b: unknown): boolean;

package/dist/lib/are-ids-equal.js

@@ -0,0 +1,8 @@
+function areIdsEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  return String(a) === String(b);
+}
+export {
+  areIdsEqual
+};

package/dist/lib/shallow-equal.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `shallowEqual(a, b)` — shallow equality with `Object.is` semantics at the top
+ * level, the Vue twin of `@chelone/react`'s `util/shallow-equal.ts` (parity with
+ * ra-core's `shallowEqual`). Used by `<FileInput>` to identify the file to drop
+ * from a `multiple` value array (file records are compared by their own
+ * enumerable keys, not by reference, so a re-`format`ted copy still matches).
+ *
+ * - reference-equal inputs (and `Object.is`-equal primitives) are equal;
+ * - `+0` / `-0` are NOT equal, `NaN` / `NaN` ARE equal (Object.is);
+ * - two objects/arrays are equal iff they have the same own enumerable keys and
+ *   each value pair is `Object.is`-equal — nested values are compared by
+ *   reference only (shallow);
+ * - a non-object (or `null`) that is not reference-equal is unequal.
+ */
+export declare function shallowEqual(a: unknown, b: unknown): boolean;

package/dist/lib/shallow-equal.js

@@ -0,0 +1,27 @@
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  }
+  return Number.isNaN(x) && Number.isNaN(y);
+}
+function shallowEqual(a, b) {
+  if (is(a, b)) return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.hasOwn(b, key) || !is(
+      a[key],
+      b[key]
+    )) {
+      return false;
+    }
+  }
+  return true;
+}
+export {
+  shallowEqual
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `cn` — the class-name joiner the `ui/` primitives use. The Vue twin of
+ * `@chelone/react`'s `@/lib/utils#cn`, kept DEPENDENCY-FREE: the React package
+ * pulls `clsx` + `tailwind-merge`, but the V1 Vue slice needs only truthy
+ * concatenation (no conflicting-class de-duplication yet), so this stays a
+ * zero-dependency filter/join. If a later wave needs tailwind-merge semantics
+ * it can be swapped in behind this same signature.
+ */
+/** A class value: a string, or a nullish/false toggle (dropped), nestable in arrays. */
+export type ClassValue = string | false | null | undefined | ClassValue[];
+/** Join truthy class values into a single space-separated string. */
+export declare function cn(...values: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,16 @@
+function cn(...values) {
+  const out = [];
+  for (const value of values) {
+    if (!value) continue;
+    if (Array.isArray(value)) {
+      const nested = cn(...value);
+      if (nested) out.push(nested);
+    } else {
+      out.push(value);
+    }
+  }
+  return out.join(" ");
+}
+export {
+  cn
+};

package/dist/list/infinite-list-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `useInfiniteListContext` — the ambient list, as an infinite one. The Vue twin
+ * of `@chelone/react`'s hook. Throws when the nearest list context comes from a
+ * plain `useListController`: there is no next page to ask for.
+ */
+import type { RecordOf, ResourceMap } from "@chelone/core";
+import type { UseInfiniteListControllerReturn } from "../controllers/use-infinite-list-controller.js";
+export declare function useInfiniteListContext<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(): UseInfiniteListControllerReturn<RecordOf<TResources, TName>>;

package/dist/list/infinite-list-context.js

@@ -0,0 +1,17 @@
+import { useListContext } from "./list-context.js";
+function isInfiniteList(list) {
+  const candidate = list;
+  return typeof candidate.fetchNextPage === "function" && typeof candidate.fetchPreviousPage === "function";
+}
+function useInfiniteListContext() {
+  const list = useListContext();
+  if (!isInfiniteList(list)) {
+    throw new Error(
+      "useInfiniteListContext: the ambient list is not an infinite list"
+    );
+  }
+  return list;
+}
+export {
+  useInfiniteListContext
+};

package/dist/list/list-context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `ListContext` — the ambient list surface a `<List>` view publishes so every
+ * descendant (the `<DataTable>`, a future filter/pagination) reads the SAME
+ * list-controller result. The Vue twin of `@chelone/react`'s `ListContext`
+ * (`form/filter-live-form.tsx` — `ListContextProvider` + `useListContext`).
+ *
+ * Idiom translation: React threads the controller result through a
+ * `createContext` provider. Vue `provide`s it under a typed `InjectionKey`. The
+ * value is the `reactive` result of `useListController` (Task 5) — a live view
+ * whose `data` / `isPending` / `selectedIds` update in place — so descendants
+ * read it directly with no ref juggling. `useListContext` throws without a
+ * provider (parity with the React twin).
+ */
+import type { RecordOf, ResourceMap } from "@chelone/core";
+import { type InjectionKey } from "vue";
+import type { UseListControllerReturn } from "../controllers/use-list-controller.js";
+/** The ambient list surface — the reactive `useListController` result. */
+export type ListContextValue<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string> = UseListControllerReturn<RecordOf<TResources, TName>>;
+/** The provide/inject key for the ambient list surface. */
+export declare const ListContextKey: InjectionKey<ListContextValue>;
+/** Provide the ambient list surface (called by `<List>` in `setup`). */
+export declare function provideListContext(value: ListContextValue): void;
+/** The ambient list surface; throws without a `<List>`/provider above. */
+export declare function useListContext<TResources extends ResourceMap = ResourceMap, TName extends keyof TResources & string = keyof TResources & string>(): ListContextValue<TResources, TName>;

package/dist/list/list-context.js

@@ -0,0 +1,19 @@
+import { provide, inject } from "vue";
+const ListContextKey = /* @__PURE__ */ Symbol(
+  "chelone-list-context"
+);
+function provideListContext(value) {
+  provide(ListContextKey, value);
+}
+function useListContext() {
+  const ctx = inject(ListContextKey, null);
+  if (!ctx) {
+    throw new Error("useListContext: no <List> found above this component.");
+  }
+  return ctx;
+}
+export {
+  ListContextKey,
+  provideListContext,
+  useListContext
+};

package/dist/list/use-data-table-columns.d.ts

@@ -0,0 +1,30 @@
+import { type DataTableColumnInfo } from "@chelone/core";
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface UseDataTableColumnsOptions {
+    /** The store key of the hidden ids; the order and columns keys derive from it. */
+    storeKey: MaybeRefOrGetter<string>;
+    /** Hidden until a choice is stored under `storeKey`. */
+    defaultHiddenColumns?: MaybeRefOrGetter<readonly string[] | undefined>;
+}
+export interface UseDataTableColumnsResult {
+    /** The columns the table last published. */
+    columns: Readonly<Ref<readonly DataTableColumnInfo[]>>;
+    /** The stored hidden ids, or `defaultHiddenColumns` until a choice is stored. */
+    hidden: Readonly<Ref<readonly string[]>>;
+    order: Readonly<Ref<readonly string[]>>;
+    toggle: (id: string) => void;
+    move: (id: string, direction: -1 | 1) => void;
+    /** Forget the stored choice: the defaults apply again. */
+    reset: () => void;
+    /** Record the table's columns; a write is skipped when nothing changed. */
+    publish: (columns: readonly DataTableColumnInfo[]) => void;
+}
+/**
+ * The column state a `<DataTable>` shares through the store with a control
+ * outside it. Built on the context's optional store, not `useCheloneStore`:
+ * with no store it returns the defaults and setters that do nothing.
+ *
+ * Both options may be refs or getters: a new `storeKey` re-reads and
+ * resubscribes, a new `defaultHiddenColumns` applies until a choice is stored.
+ */
+export declare function useDataTableColumns(options: UseDataTableColumnsOptions): UseDataTableColumnsResult;

package/dist/list/use-data-table-columns.js

@@ -0,0 +1,69 @@
+import { dataTableColumnKeys, moveColumn, toggleHiddenColumn } from "@chelone/core";
+import { computed, toValue, shallowRef, watch } from "vue";
+import { useCheloneContext } from "../context.js";
+function useDataTableColumns(options) {
+  const { store } = useCheloneContext();
+  const keys = computed(() => dataTableColumnKeys(toValue(options.storeKey)));
+  const defaults = computed(() => toValue(options.defaultHiddenColumns) ?? []);
+  const version = shallowRef(0);
+  if (store) {
+    watch(
+      keys,
+      ({ hidden: hidden2, order: order2, columns: columns2 }, _previous, onCleanup) => {
+        const bump = () => {
+          version.value++;
+        };
+        const unsubscribers = [hidden2, order2, columns2].map(
+          (key) => store.subscribe(key, bump)
+        );
+        onCleanup(() => {
+          for (const unsubscribe of unsubscribers) unsubscribe();
+        });
+      },
+      { immediate: true }
+    );
+  }
+  const hidden = computed(() => {
+    version.value;
+    return store?.getItem(keys.value.hidden) ?? defaults.value;
+  });
+  const order = computed(() => {
+    version.value;
+    return store?.getItem(keys.value.order) ?? [];
+  });
+  const columns = computed(() => {
+    version.value;
+    return store?.getItem(keys.value.columns) ?? [];
+  });
+  return {
+    columns,
+    hidden,
+    order,
+    toggle: (id) => {
+      store?.setItem(keys.value.hidden, toggleHiddenColumn(hidden.value, id));
+    },
+    move: (id, direction) => {
+      store?.setItem(
+        keys.value.order,
+        moveColumn(
+          order.value,
+          columns.value.map((column) => column.id),
+          id,
+          direction
+        )
+      );
+    },
+    reset: () => {
+      store?.removeItem(keys.value.hidden);
+      store?.removeItem(keys.value.order);
+    },
+    publish: (next) => {
+      if (!store) return;
+      const unchanged = JSON.stringify(next) === JSON.stringify(store.getItem(keys.value.columns));
+      if (!unchanged) store.setItem(keys.value.columns, next);
+    }
+  };
+}
+export {
+  useDataTableColumns
+};

package/dist/list/use-list.d.ts

@@ -0,0 +1,50 @@
+/**
+ * `useList` — the client-side (in-memory) list composable, the Vue twin of
+ * `@chelone/react`'s `useList` (`use-list.tsx`). It filters / sorts / paginates
+ * / selects over an in-memory `data` array with NO dataProvider and NO fetching,
+ * returning the SAME reactive shape a `<List>` publishes (`ListContextValue`) —
+ * so it is a drop-in source for `provideListContext` around an array of embedded
+ * records (`<ArrayField>`) or an async-resolved reference list
+ * (`<ReferenceArrayField>` / `<ReferenceManyField>`).
+ *
+ * Idiom translation from the React twin: React binds the vanilla
+ * `createClientListController` with `useSyncExternalStore` and reflects `data` /
+ * `filter` / loading PROP changes back into the controller through effects
+ * (keyed by content, guarded against the mount seed). Vue binds it through the
+ * same {@link useMicroStore} seam and reflects reactive-source changes with `watch`
+ * (skip-on-mount by default — construction already seeded the source). The data
+ * watcher is registered BEFORE the loading watcher so that on the tick an async
+ * source resolves (`data` populates AND `isPending` flips false together),
+ * `setData` lands first and the `setLoadingState` recompute then publishes the
+ * populated slice — exactly the React effect ordering.
+ */
+import { type FilterPayload, type ResourceRecord, type SortPayload } from "@chelone/core";
+import { type MaybeRefOrGetter } from "vue";
+import type { ListContextValue } from "./list-context.js";
+/** Options for {@link useList} — the client-side list composable. */
+export interface UseListOptions<TRecord extends ResourceRecord = ResourceRecord> {
+    /** The in-memory records (reactive-aware). `undefined` = not-yet-loaded. */
+    data?: MaybeRefOrGetter<TRecord[] | undefined>;
+    /** Client-side filter for the embedded list. */
+    filter?: FilterPayload;
+    /** Client-side sort for the embedded list. */
+    sort?: SortPayload | SortPayload[];
+    /** Client-side page size. Default 1000 (ra-core `useList` — "show everything"). */
+    perPage?: number;
+    /** Initial page (1-based). Default 1. */
+    page?: number;
+    /** Pass-through loading flag for an async source feeding the list. */
+    isPending?: MaybeRefOrGetter<boolean>;
+    /** Pass-through fetching flag for an async source feeding the list. */
+    isFetching?: MaybeRefOrGetter<boolean>;
+    /** Pass-through error for an async source feeding the list. */
+    error?: MaybeRefOrGetter<unknown>;
+}
+/**
+ * Client-side list controller bound to Vue reactivity: returns the reactive
+ * `ListContextValue` a `provideListContext` / `useListContext` consumer reads.
+ * A reactive `data` / `isPending` / `isFetching` / `error` source is reflected
+ * into the live controller so an async feed (a resolving `useGetMany` /
+ * `useGetList`) populates the list in place.
+ */
+export declare function useList<TRecord extends ResourceRecord = ResourceRecord>(options?: UseListOptions<TRecord>): ListContextValue;

package/dist/list/use-list.js

@@ -0,0 +1,59 @@
+import { createClientListController } from "@chelone/core";
+import { toValue, watch, reactive, computed } from "vue";
+import { useMicroStore } from "../store/use-micro-store.js";
+function useList(options = {}) {
+  const controller = createClientListController({
+    data: toValue(options.data),
+    filter: options.filter,
+    sort: options.sort,
+    perPage: options.perPage,
+    page: options.page,
+    isPending: toValue(options.isPending),
+    isFetching: toValue(options.isFetching),
+    error: toValue(options.error)
+  });
+  const state = useMicroStore(controller);
+  watch(
+    () => toValue(options.data),
+    (next) => controller.setData(next)
+  );
+  watch(
+    () => ({
+      isPending: toValue(options.isPending),
+      isFetching: toValue(options.isFetching),
+      error: toValue(options.error)
+    }),
+    (patch) => controller.setLoadingState(patch)
+  );
+  return reactive({
+    data: computed(() => state.value.data),
+    total: computed(() => state.value.total),
+    pageInfo: computed(() => state.value.pageInfo),
+    isPending: computed(() => state.value.isPending),
+    isFetching: computed(() => state.value.isFetching),
+    error: computed(() => state.value.error),
+    page: computed(() => state.value.page),
+    perPage: computed(() => state.value.perPage),
+    sort: computed(() => state.value.sort),
+    filter: computed(() => state.value.filter),
+    displayedFilters: computed(() => state.value.displayedFilters),
+    selectedIds: computed(() => state.value.selectedIds),
+    hasNextPage: computed(() => state.value.hasNextPage),
+    hasPreviousPage: computed(() => state.value.hasPreviousPage),
+    setPage: controller.setPage,
+    setPerPage: controller.setPerPage,
+    setSort: controller.setSort,
+    setFilters: controller.setFilters,
+    setParams: controller.setParams,
+    showFilter: controller.showFilter,
+    hideFilter: controller.hideFilter,
+    select: controller.select,
+    toggleItem: controller.toggleItem,
+    unselectAll: controller.unselectAll,
+    selectAll: controller.selectAll,
+    refetch: controller.refetch
+  });
+}
+export {
+  useList
+};

package/dist/maps-draw.d.ts

@@ -0,0 +1,7 @@
+export { BBoxInput, type BBoxInputProps, } from "./components/maps-draw/bbox-input.js";
+export { type DrawToolbarProps, default as DrawToolbar, } from "./components/maps-draw/draw-toolbar.vue.js";
+export { type CutResult, cutFeatures, type SimplifyOptions, simplifyGeo, } from "./components/maps-draw/geometry-ops.js";
+export { default as ShapeInput, type ShapeInputProps, } from "./components/maps-draw/shape-input.vue.js";
+export { FeatureCollectionInput, type FeatureCollectionInputProps, FeatureInput, type FeatureInputProps, GeoJsonInput, type GeoJsonInputBaseProps, type GeoJsonInputProps, GeometryCollectionInput, type GeometryShape, LineStringInput, MultiLineStringInput, MultiPointInput, MultiPolygonInput, PointInput, PolygonInput, toolsForShapes, } from "./components/maps-draw/shape-inputs.js";
+export { default as SimplifyInput, type SimplifyInputProps, type SimplifyQuality, } from "./components/maps-draw/simplify-input.vue.js";
+export { type DrawTool, type TerraDrawEdit, toolMode, type UseTerraDrawOptions, type UseTerraDrawResult, useTerraDraw, } from "./components/maps-draw/use-terra-draw.js";