nuxt-ui-tools 1.7.0 → 1.8.0

package/dist/runtime/form/fields/upload/upload-item.vue

@@ -0,0 +1,158 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UProgress from "@nuxt/ui/components/Progress.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { fileExtensionLabel, fileIconName, formatFileSize } from "../../../shared/utils/file";
+const props = defineProps({
+  item: { type: Object, required: true },
+  disabled: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false },
+  replaceable: { type: Boolean, required: false }
+});
+const emit = defineEmits(["open", "start", "cancel", "retry", "remove", "replace"]);
+const { code, t } = useUiToolsLocale();
+const icon = computed(() => fileIconName(props.item.type));
+const meta = computed(() => {
+  if (props.item.description) return props.item.description;
+  const extension = fileExtensionLabel({ name: props.item.name, type: props.item.type });
+  return props.item.size === null ? extension : `${extension} \xB7 ${formatFileSize(props.item.size, code.value)}`;
+});
+const status = computed(() => {
+  if (props.item.status === "uploading")
+    return props.item.progress === null ? t("form.fields.upload.uploading") : `${t("form.fields.upload.uploading")} ${Math.round(props.item.progress)} %`;
+  if (props.item.status === "queued") return t("form.fields.upload.queued");
+  return props.item.status === "failed" ? props.item.error : null;
+});
+</script>
+
+<template>
+  <li
+    class="flex w-full min-w-0 items-center rounded-lg border bg-default"
+    :class="[
+  compact ? 'gap-2 px-2 py-1.5' : 'gap-3 px-3 py-2',
+  item.status === 'failed' ? 'border-error/40' : 'border-default'
+]"
+    :data-form-upload-item="item.status"
+  >
+    <img
+      v-if="item.thumbnail"
+      :src="item.thumbnail"
+      :alt="item.name"
+      class="shrink-0 rounded-md border border-default bg-white object-contain p-0.5"
+      :class="compact ? 'size-7' : 'size-10'"
+    />
+    <span
+      v-else
+      class="grid shrink-0 place-items-center rounded-md border border-default bg-elevated text-muted"
+      :class="compact ? 'size-7' : 'size-10'"
+    >
+      <UIcon :name="icon" :class="compact ? 'size-4' : 'size-5'" aria-hidden="true" />
+    </span>
+
+    <span class="min-w-0 flex-1" :aria-busy="item.resolving || void 0">
+      <template v-if="item.resolving">
+        <span class="block h-3.5 w-2/3 animate-pulse rounded bg-elevated" />
+        <span v-if="!compact" class="mt-1.5 block h-3 w-1/3 animate-pulse rounded bg-elevated" />
+      </template>
+      <template v-else>
+        <button
+          v-if="item.openable"
+          type="button"
+          class="block max-w-full truncate text-left text-sm font-medium text-highlighted underline-offset-2 outline-none hover:underline focus-visible:underline"
+          :title="t('form.fields.upload.open')"
+          data-form-upload-open=""
+          @click="emit('open')"
+        >
+          {{ item.name }}
+        </button>
+        <span
+          v-else
+          class="block truncate text-sm font-medium text-highlighted"
+          data-form-upload-name=""
+        >
+          {{ item.name }}
+        </span>
+        <span
+          v-if="!compact || status"
+          class="block truncate text-xs"
+          :class="item.status === 'failed' ? 'text-error' : 'text-muted'"
+          :role="item.status === 'failed' ? 'alert' : void 0"
+          data-form-upload-meta=""
+        >
+          {{ status ?? meta }}
+        </span>
+      </template>
+      <UProgress
+        v-if="item.status === 'uploading'"
+        :model-value="item.progress"
+        size="xs"
+        class="mt-1.5"
+        data-form-upload-progress=""
+      />
+    </span>
+
+    <span class="flex shrink-0 items-center gap-0.5">
+      <UButton
+        v-if="item.status === 'queued'"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-upload"
+        :disabled="disabled"
+        :aria-label="t('form.fields.upload.upload')"
+        :title="t('form.fields.upload.upload')"
+        data-form-upload-start=""
+        @click="emit('start')"
+      />
+      <UButton
+        v-if="item.status === 'failed'"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-rotate-cw"
+        :disabled="disabled"
+        :aria-label="t('form.fields.upload.retry')"
+        :title="t('form.fields.upload.retry')"
+        data-form-upload-retry=""
+        @click="emit('retry')"
+      />
+      <UButton
+        v-if="item.status === 'stored' && replaceable"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-refresh-cw"
+        :disabled="disabled"
+        :aria-label="t('form.fields.upload.replace')"
+        :title="t('form.fields.upload.replace')"
+        data-form-upload-replace=""
+        @click="emit('replace')"
+      />
+      <UButton
+        v-if="item.status === 'uploading'"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-x"
+        :aria-label="t('form.fields.upload.cancel')"
+        :title="t('form.fields.upload.cancel')"
+        data-form-upload-cancel=""
+        @click="emit('cancel')"
+      />
+      <UButton
+        v-else
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-trash-2"
+        :disabled="disabled"
+        :aria-label="t('form.fields.upload.remove')"
+        :title="t('form.fields.upload.remove')"
+        data-form-upload-remove=""
+        @click="emit('remove')"
+      />
+    </span>
+  </li>
+</template>

package/dist/runtime/form/fields/upload/upload-item.vue.d.ts

@@ -0,0 +1,24 @@
+import type { FormUploadItem } from './use-upload-items.js';
+type __VLS_Props = {
+    item: FormUploadItem;
+    disabled?: boolean;
+    compact?: boolean;
+    replaceable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    replace: () => any;
+    retry: () => any;
+    start: () => any;
+    open: () => any;
+    remove: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReplace?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+    onStart?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/form/fields/upload/use-upload-items.d.ts

@@ -0,0 +1,44 @@
+import type { FormValue } from '../../types/index.js';
+import type { FormUploadField, FormUploadResolvedFile, FormUploadValue } from './types.js';
+export type FormUploadItemStatus = 'stored' | 'queued' | 'uploading' | 'failed';
+export interface FormUploadItem {
+    key: string;
+    status: FormUploadItemStatus;
+    name: string;
+    description: string | null;
+    size: number | null;
+    type: string | null;
+    thumbnail: string | null;
+    openable: boolean;
+    resolving: boolean;
+    progress: number | null;
+    error: string | null;
+}
+export declare function isUploadValue(value: FormValue): value is FormUploadValue;
+export declare function defaultUploadResolve(value: FormUploadValue): FormUploadResolvedFile;
+/**
+ * Owns the upload lifecycle of one upload field: stored values resolved for display, files that
+ * are queued, uploading, or failed, and the form value written when an upload succeeds.
+ */
+export declare function useUploadItems(field: () => FormUploadField, path: () => readonly string[]): {
+    busy: import("vue").ComputedRef<boolean>;
+    canSelect: import("vue").ComputedRef<boolean>;
+    cancel: (key: string, options?: {
+        keepPreview?: boolean;
+    }) => void;
+    items: import("vue").ComputedRef<readonly FormUploadItem[]>;
+    multiple: import("vue").ComputedRef<boolean>;
+    open: (key: string) => Promise<void>;
+    remove: (key: string) => Promise<void>;
+    retry: (key: string) => Promise<void>;
+    runtime: {
+        cancel: () => Promise<void>;
+        pending: () => boolean;
+        remove: (value?: FormValue) => Promise<void>;
+        retry: () => Promise<void>;
+        settle: () => Promise<void>;
+        start: () => Promise<void>;
+    };
+    select: (files: readonly File[]) => void;
+    start: (key: string) => Promise<void>;
+};

package/dist/runtime/form/fields/upload/use-upload-items.js

@@ -0,0 +1,317 @@
+import { computed, inject, onScopeDispose, shallowRef, toRaw, watch } from "vue";
+import { filePreviewApiKey } from "../../../file-preview/composables/use-file-preview-api.js";
+import { useUiToolsLocale } from "../../../i18n/use-locale.js";
+import { fileNameFromUrl, isImageType } from "../../../shared/utils/file.js";
+import { useResolvedFieldProps } from "../../composables/use-field-control.js";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime.js";
+import { isNumber, isObject, isString } from "../../utils/predicate.js";
+export function isUploadValue(value) {
+  return isString(value) || isObject(value) && value !== null && !Array.isArray(value);
+}
+export function defaultUploadResolve(value) {
+  if (isString(value)) return { name: fileNameFromUrl(value), url: value };
+  const url = readString(value, "url");
+  return {
+    name: readString(value, "name") ?? (url ? fileNameFromUrl(url) : "\u2014"),
+    size: readNumber(value, "size"),
+    thumbnail: readString(value, "thumbnail"),
+    type: readString(value, "type"),
+    url
+  };
+}
+function readString(value, key) {
+  const entry = value[key];
+  return isString(entry) && entry ? entry : null;
+}
+function readNumber(value, key) {
+  const entry = value[key];
+  return isNumber(entry) ? entry : null;
+}
+function clampProgress(percent) {
+  return Math.min(100, Math.max(0, percent));
+}
+function localItem(item) {
+  return {
+    description: null,
+    error: item.error,
+    key: item.key,
+    name: item.file.name,
+    openable: false,
+    progress: item.progress,
+    resolving: false,
+    size: item.file.size,
+    status: item.status,
+    thumbnail: item.thumbnail,
+    type: item.file.type || null
+  };
+}
+export function useUploadItems(field, path) {
+  const form = useFormRuntimeContext();
+  const fieldProps = useResolvedFieldProps(field, path);
+  const { t } = useUiToolsLocale();
+  const filePreview = inject(filePreviewApiKey, null);
+  const local = shallowRef([]);
+  const resolved = shallowRef(/* @__PURE__ */ new Map());
+  const tasks = /* @__PURE__ */ new Map();
+  const objectKeys = /* @__PURE__ */ new WeakMap();
+  const uploaded = /* @__PURE__ */ new Map();
+  let sequence = 0;
+  const multiple = computed(() => fieldProps.value.multiple === true);
+  const autoUpload = computed(() => fieldProps.value.autoUpload !== false);
+  const preview = computed(() => fieldProps.value.preview !== false);
+  const stored = computed(() => {
+    const value = form.getValue(path());
+    if (Array.isArray(value)) return value.filter(isUploadValue);
+    return isUploadValue(value) ? [value] : [];
+  });
+  const capacity = computed(() => {
+    if (!multiple.value) return 1;
+    const max = fieldProps.value.max;
+    return isNumber(max) ? Math.max(0, max - stored.value.length - local.value.length) : Infinity;
+  });
+  const items = computed(() => [
+    ...multiple.value || local.value.length === 0 ? stored.value.map(storedItem) : [],
+    ...local.value.map(localItem)
+  ]);
+  const canSelect = computed(
+    () => multiple.value ? capacity.value > 0 : items.value.length === 0
+  );
+  const busy = computed(() => local.value.some((item) => item.status === "uploading"));
+  function params() {
+    return form.getFieldCallbackParams(path(), field());
+  }
+  function valueKey(value) {
+    if (isString(value)) return value;
+    const known = objectKeys.get(value);
+    if (known !== void 0) return `#${known}`;
+    sequence += 1;
+    objectKeys.set(value, sequence);
+    return `#${sequence}`;
+  }
+  function storedItem(value, index) {
+    const state = resolved.value.get(value);
+    const file = state?.file ?? defaultUploadResolve(value);
+    const session = uploaded.get(toRaw(value));
+    const type = file.type ?? session?.file.type ?? null;
+    const thumbnail = file.thumbnail ?? session?.thumbnail ?? (isImageType(type) ? file.url ?? null : null);
+    return {
+      description: file.description ?? null,
+      error: null,
+      key: `stored:${index}:${valueKey(value)}`,
+      name: file.name || session?.file.name || "",
+      openable: file.openable ?? Boolean(field().upload.open ?? file.url ?? (filePreview?.mounted.value ? session : null)),
+      progress: null,
+      resolving: !session && (!state || state.pending),
+      size: file.size ?? session?.file.size ?? null,
+      status: "stored",
+      thumbnail: preview.value ? thumbnail : null,
+      type
+    };
+  }
+  async function resolveValue(value) {
+    const hook = field().upload.resolve;
+    let file = defaultUploadResolve(value);
+    if (hook) {
+      try {
+        file = await hook({ ...params(), value }) ?? file;
+      } catch {
+        file = defaultUploadResolve(value);
+      }
+    }
+    if (resolved.value.has(value))
+      resolved.value = new Map(resolved.value).set(value, { file, pending: false });
+  }
+  watch(
+    stored,
+    (values) => {
+      const next = /* @__PURE__ */ new Map();
+      for (const value of values) {
+        const known = resolved.value.get(value);
+        if (known) {
+          next.set(value, known);
+          continue;
+        }
+        next.set(value, { file: defaultUploadResolve(value), pending: true });
+      }
+      resolved.value = next;
+      for (const value of values) if (resolved.value.get(value)?.pending) void resolveValue(value);
+    },
+    { immediate: true }
+  );
+  function patch(key, changes) {
+    local.value = local.value.map((item) => item.key === key ? { ...item, ...changes } : item);
+  }
+  function drop(key, options = {}) {
+    const item = local.value.find((entry) => entry.key === key);
+    if (!item) return;
+    item.controller?.abort();
+    if (item.thumbnail && !options.keepPreview) URL.revokeObjectURL(item.thumbnail);
+    local.value = local.value.filter((entry) => entry.key !== key);
+  }
+  function forget(value) {
+    const session = uploaded.get(toRaw(value));
+    if (session?.thumbnail) URL.revokeObjectURL(session.thumbnail);
+    uploaded.delete(toRaw(value));
+  }
+  function select(files) {
+    const accepted = files.slice(0, capacity.value);
+    if (accepted.length === 0) return;
+    if (!multiple.value) for (const item of local.value) drop(item.key);
+    const added = accepted.map((file) => {
+      sequence += 1;
+      return {
+        controller: null,
+        error: null,
+        file,
+        key: `local:${sequence}`,
+        progress: null,
+        status: "queued",
+        thumbnail: preview.value && isImageType(file.type) ? URL.createObjectURL(file) : null
+      };
+    });
+    local.value = [...local.value, ...added];
+    if (autoUpload.value) for (const item of added) void run(item.key);
+  }
+  async function commit(key, result) {
+    const value = Array.isArray(result) ? result[0] ?? null : result;
+    if (value === null || !isUploadValue(value)) {
+      patch(key, { controller: null, error: t("form.fields.upload.failed"), status: "failed" });
+      return;
+    }
+    const replaced = multiple.value ? [] : stored.value;
+    const item = local.value.find((entry) => entry.key === key);
+    if (item) uploaded.set(toRaw(value), { file: item.file, thumbnail: item.thumbnail });
+    form.setValue(path(), multiple.value ? [...stored.value, value] : value);
+    drop(key, { keepPreview: true });
+    for (const previous of replaced) forget(previous);
+    for (const previous of replaced)
+      await field().upload.onDelete?.({ ...params(), value: previous });
+  }
+  async function upload(item, controller) {
+    try {
+      const result = await field().upload.handler({
+        ...params(),
+        files: [item.file],
+        onProgress: (percent) => {
+          if (!controller.signal.aborted) patch(item.key, { progress: clampProgress(percent) });
+        },
+        signal: controller.signal
+      });
+      if (!controller.signal.aborted) await commit(item.key, result);
+    } catch (error) {
+      if (controller.signal.aborted) return;
+      patch(item.key, {
+        controller: null,
+        error: error instanceof Error && error.message ? error.message : t("form.fields.upload.failed"),
+        progress: null,
+        status: "failed"
+      });
+    } finally {
+      tasks.delete(item.key);
+    }
+  }
+  function run(key) {
+    const item = local.value.find((entry) => entry.key === key);
+    if (!item || item.status === "uploading") return tasks.get(key) ?? Promise.resolve();
+    const controller = new AbortController();
+    patch(key, { controller, error: null, progress: null, status: "uploading" });
+    const task = upload(item, controller);
+    tasks.set(key, task);
+    return task;
+  }
+  function localKeys(status) {
+    return local.value.filter((item) => item.status === status).map((item) => item.key);
+  }
+  async function remove(key) {
+    if (key.startsWith("local:")) return drop(key);
+    const index = items.value.findIndex((item) => item.key === key);
+    const value = stored.value[index];
+    if (value === void 0) return;
+    await field().upload.onDelete?.({ ...params(), value });
+    form.setValue(
+      path(),
+      multiple.value ? stored.value.filter((_entry, position) => position !== index) : null
+    );
+    forget(value);
+  }
+  async function open(key) {
+    const index = items.value.findIndex((item) => item.key === key);
+    const value = stored.value[index];
+    if (value === void 0) return;
+    const file = resolved.value.get(value)?.file ?? defaultUploadResolve(value);
+    const hook = field().upload.open;
+    if (hook) return await hook({ ...params(), file, value });
+    if (filePreview?.mounted.value && openPreview(value)) return;
+    if (file.url) window.open(file.url, "_blank", "noopener");
+  }
+  function openPreview(value) {
+    const entries = stored.value.flatMap((entry) => {
+      const file = resolved.value.get(entry)?.file ?? defaultUploadResolve(entry);
+      const session = uploaded.get(toRaw(entry));
+      const src = session?.file ?? file.url;
+      if (!src) return [];
+      const described = {
+        mime: file.type ?? session?.file.type ?? void 0,
+        name: file.name || session?.file.name || void 0,
+        size: file.size ?? session?.file.size ?? void 0,
+        src,
+        thumbnail: file.thumbnail ?? session?.thumbnail ?? void 0
+      };
+      return [{ described, entry }];
+    });
+    const index = entries.findIndex((candidate) => candidate.entry === value);
+    if (index === -1 || !filePreview) return false;
+    filePreview.open(
+      entries.map((candidate) => candidate.described),
+      { index }
+    );
+    return true;
+  }
+  async function removeValue(value) {
+    for (const item of local.value) drop(item.key);
+    if (value === void 0) {
+      for (const entry of stored.value)
+        await field().upload.onDelete?.({ ...params(), value: entry });
+      form.setValue(path(), multiple.value ? [] : null);
+      return;
+    }
+    await field().upload.onDelete?.({ ...params(), value });
+    form.setValue(path(), multiple.value ? stored.value.filter((entry) => entry !== value) : null);
+  }
+  const runtime = {
+    cancel: async () => {
+      for (const key of localKeys("uploading")) drop(key);
+    },
+    pending: () => local.value.length > 0,
+    remove: removeValue,
+    retry: async () => {
+      await Promise.all(localKeys("failed").map(run));
+    },
+    settle: async () => {
+      await Promise.allSettled(tasks.values());
+    },
+    start: async () => {
+      await Promise.all(localKeys("queued").map(run));
+    }
+  };
+  onScopeDispose(() => {
+    for (const item of local.value) {
+      item.controller?.abort();
+      if (item.thumbnail) URL.revokeObjectURL(item.thumbnail);
+    }
+    for (const value of uploaded.keys()) forget(value);
+  });
+  return {
+    busy,
+    canSelect,
+    cancel: drop,
+    items,
+    multiple,
+    open,
+    remove,
+    retry: run,
+    runtime,
+    select,
+    start: run
+  };
+}

package/dist/runtime/form/types/callbacks.d.ts

@@ -1,9 +1,15 @@
 import type { FormValue } from './/index.js';
 import type { FormFieldApi } from './api.js';
+import type { FormObject } from './utils.js';
+/**
+ * Dependency values a field callback reads: each declared dependency under its target name, typed
+ * `FormValue` until the callback narrows it, since a reusable field can be mounted anywhere.
+ */
+export type FormDependencyValues = Readonly<FormObject>;
 /**
  * Parameters passed to field-level callbacks.
  */
-export interface FormFieldCallbackParams<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue, TOption = FormValue> {
+export interface FormFieldCallbackParams<TContext = NonNullable<unknown>, TDeps = FormDependencyValues, TValue = FormValue, TOption = FormValue> {
     /** Fully typed form-scoped context declared on the schema. */
     ctx: TContext;
     /** Values read from the field's dependency list. */
@@ -14,4 +20,4 @@ export interface FormFieldCallbackParams<TContext = NonNullable<unknown>, TDeps
 /**
  * Function receiving field callback parameters.
  */
-export type FormFieldCallback<TResult, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue, TOption = FormValue> = (params: FormFieldCallbackParams<TContext, TDeps, TValue, TOption>) => TResult;
+export type FormFieldCallback<TResult, TContext = NonNullable<unknown>, TDeps = FormDependencyValues, TValue = FormValue, TOption = FormValue> = (params: FormFieldCallbackParams<TContext, TDeps, TValue, TOption>) => TResult;

package/dist/runtime/form/types/controller.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 import type { FormValue } from './/index.js';
 import type { FormSubmitAction, FormSubmitHandler, FormSubmitHandlerResult } from './api.js';
-import type { ExtractFormInternalValue, ExtractFormOutput } from './output.js';
+import type { ExtractFormInput, ExtractFormInternalValue, ExtractFormOutput } from './output.js';
 import type { FormRuntime, FormRuntimeStep } from './runtime.js';
 import type { ExtractFormContext } from './schema.js';
 import type { FormObject } from './utils.js';
@@ -24,8 +24,11 @@ import type { FormValidationError, FormValidationMode, FormValidationOptions } f
 export interface UseFormParams<TSchema, TSubmitData = FormValue> {
     /** Schema owned by this form controller and passed to `<NutForm :form="form" />`. */
     schema: MaybeRefOrGetter<TSchema>;
-    /** Optional initial internal state. Dotted field keys are still normalized by the runtime. */
-    input?: MaybeRefOrGetter<FormObject | undefined>;
+    /**
+     * Optional initial value, typed from the schema: fields may be missing or `null`, and a field
+     * with `transform.input` takes what that hook accepts, such as a record loaded from the API.
+     */
+    input?: MaybeRefOrGetter<ExtractFormInput<TSchema> | undefined>;
     /** Keeps later input changes synchronized into the mounted runtime. */
     syncInput?: MaybeRefOrGetter<boolean | readonly string[]>;
     /** Selects required, custom-rule, all, or no validation. */

package/dist/runtime/form/types/field-base.d.ts

@@ -1,6 +1,6 @@
 import type { FormValue } from './/index.js';
 import type { FormFieldApi } from './api.js';
-import type { FormFieldCallback } from './callbacks.js';
+import type { FormDependencyValues, FormFieldCallback } from './callbacks.js';
 import type { FormField } from './field.js';
 import type { FormContainerLayout, FormItemLayout } from './layout.js';
 import type { FormTransformConfig } from './transform.js';
@@ -19,11 +19,11 @@ export interface FormFieldDescription {
 /**
  * Common stateful field properties.
  */
-export type FormFieldProps<TProps = FormObject, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormDynamic<TProps & FormObject, {
+export type FormFieldProps<TProps = FormObject, TContext = NonNullable<unknown>, TDeps = FormDependencyValues> = FormDynamic<TProps & FormObject, {
     ctx: TContext;
     deps: TDeps;
 }>;
-export interface FormStatefulFieldBase<TType extends FormFieldType, TValue, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TProps = FormObject> {
+export interface FormStatefulFieldBase<TType extends FormFieldType, TValue, TContext = NonNullable<unknown>, TDeps = FormDependencyValues, TProps = FormObject> {
     /** Raw path used to read/write the field value in form state. */
     key: string;
     /** Discriminant used by the field registry. */
@@ -101,7 +101,7 @@ export interface FormStatefulFieldBase<TType extends FormFieldType, TValue, TCon
 /**
  * Base properties for stateless visual fields.
  */
-export interface FormStatelessFieldBase<TType extends FormFieldType, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TProps = FormObject> {
+export interface FormStatelessFieldBase<TType extends FormFieldType, TContext = NonNullable<unknown>, TDeps = FormDependencyValues, TProps = FormObject> {
     /** Stable key for renderer identity. Stateless fields do not write form state. */
     key: string;
     /** Discriminant used by the field registry. */
@@ -118,7 +118,7 @@ export interface FormStatelessFieldBase<TType extends FormFieldType, TContext =
 /**
  * Base properties for structural fields that render children.
  */
-export interface FormContainerFieldBase<TType extends FormFieldType, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TProps = FormObject> {
+export interface FormContainerFieldBase<TType extends FormFieldType, TContext = NonNullable<unknown>, TDeps = FormDependencyValues, TProps = FormObject> {
     /** Stable renderer key. */
     key: string;
     /** Discriminant used by the field registry. */

package/dist/runtime/form/types/field-output-utils.d.ts

@@ -1,6 +1,7 @@
+import type { RemoteOptionsLoader } from '../../shared/types/remote-options.js';
 import type { DataTag, QueryKey } from './context.js';
 import type { FormOptionValue } from './options.js';
-export type FormStateMode = 'internal' | 'output';
+export type FormStateMode = 'internal' | 'output' | 'input';
 export type NullableValue = null;
 export type FieldProps<TField> = TField extends {
     readonly props: infer TProps;
@@ -18,9 +19,13 @@ type QueryFunctionValue<TValue> = TValue extends {
 export type QueryOptionsValue<TValue> = [TValue] extends [{
     queryKey: infer TQueryKey;
 }] ? [QuerySelectedValue<TValue>] extends [never] ? TQueryKey extends DataTag<QueryKey, infer TResult, infer _TError> ? TResult : QueryFunctionValue<TValue> : QuerySelectedValue<TValue> : TValue;
+/** Options a remote loader resolves, so a remote select is typed by the values it offers. */
+type RemoteLoaderOptions<TLoader> = TLoader extends RemoteOptionsLoader<infer TOption> ? readonly TOption[] : never;
 export type OptionSource<TField> = TField extends {
     options: infer TOptions;
 } ? TOptions extends {
+    loader: infer TLoader;
+} ? RemoteLoaderOptions<TLoader> : TOptions extends {
     source: infer TSource;
 } ? TSource : TOptions : never;
 export type OptionSourceValue<TSource> = TSource extends (...params: infer _TParams) => infer TResult ? QueryOptionsValue<AwaitedValue<TResult>> : QueryOptionsValue<AwaitedValue<TSource>>;
@@ -40,4 +45,10 @@ export type TransformOutputValue<TField, TFallback> = TField extends {
         output: infer TOutput;
     };
 } ? FallbackNever<AwaitedValue<FunctionReturn<TOutput>>, TFallback> : TFallback;
+/** Value a field accepts as input: what its `transform.input` takes, or its own value. */
+export type TransformInputValue<TField, TFallback> = TField extends {
+    transform: {
+        input: (value: infer TInput, ...params: infer _TParams) => unknown;
+    };
+} ? FallbackNever<TInput, TFallback> : TFallback;
 export {};

package/dist/runtime/form/types/field-output.d.ts

@@ -85,7 +85,7 @@ type ResolveNullableFormFieldValue<TField> = TField extends {
     type: 'rating';
 } ? RatingFieldOutput : TField extends {
     type: 'date';
-} ? DateFieldOutput : TField extends {
+} ? DateFieldOutput<TField> : TField extends {
     type: 'datetime';
 } ? DateTimeFieldOutput : TField extends {
     type: 'daterange';