@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/fields/image-editor-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-editor-dialog.js","names":[],"sources":["../../../src/components/fields/image-editor-dialog.tsx"],"sourcesContent":["import type {\n  CropHandle,\n  FileUploadImageEditorSchema,\n  ImageEditorData,\n  ImageEditorDragMode,\n} from '@alfakit/core'\nimport { ImageEditor, loadEditorImage } from '@alfakit/core'\nimport {\n  FlipHorizontal2Icon,\n  FlipVertical2Icon,\n  RotateCcwIcon,\n  RotateCwIcon,\n  Undo2Icon,\n  ZoomInIcon,\n  ZoomOutIcon,\n} from 'lucide-react'\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from 'react'\nimport { useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../ui/dialog'\nimport { Input } from '../ui/input'\nimport { Spinner } from '../ui/spinner'\n\nexport interface ImageEditRequest {\n  file: File\n  resolve: (file: File | null) => void\n}\n\nconst HANDLES: CropHandle[] = ['nw', 'ne', 'sw', 'se']\n\n/**\n * `FileUpload::imageEditor()`: crop, zoom, rotate and flip an image before it is uploaded\n * (or to replace an uploaded one). Resolves the request with the edited file, or null\n * when cancelled.\n */\nexport function ImageEditorDialog({\n  request,\n  options,\n}: {\n  request: ImageEditRequest | null\n  options: FileUploadImageEditorSchema\n}) {\n  const t = useT()\n  const [loaded, setLoaded] = useState<{ bitmap: ImageBitmap; editor: ImageEditor } | null>(null)\n  const [saving, setSaving] = useState(false)\n  const hintId = useId()\n\n  useEffect(() => {\n    if (!request) return\n\n    let cancelled = false\n\n    loadEditorImage(request.file)\n      .then((bitmap) => {\n        if (cancelled) return bitmap.close()\n\n        setLoaded({\n          bitmap,\n          editor: new ImageEditor({\n            width: bitmap.width,\n            height: bitmap.height,\n            aspectRatios: options.aspectRatios,\n            circle: options.circle,\n            mode: options.mode,\n            emptyFillColor: options.emptyFillColor,\n            viewportWidth: options.viewportWidth,\n            viewportHeight: options.viewportHeight,\n          }),\n        })\n      })\n      // Undecodable: upload the file as it is.\n      .catch(() => !cancelled && request.resolve(request.file))\n\n    return () => {\n      cancelled = true\n      setLoaded((current) => {\n        current?.bitmap.close()\n\n        return null\n      })\n    }\n  }, [request, options])\n\n  const finish = (file: File | null) => {\n    request?.resolve(file)\n  }\n\n  const save = async () => {\n    if (!request || !loaded) return\n\n    setSaving(true)\n\n    try {\n      finish(await loaded.editor.export(loaded.bitmap, request.file))\n    } catch {\n      finish(request.file)\n    } finally {\n      setSaving(false)\n    }\n  }\n\n  return (\n    <Dialog open={request !== null} onOpenChange={(open) => !open && finish(null)}>\n      <DialogContent className=\"sm:max-w-3xl\" data-slot=\"image-editor\">\n        <DialogHeader>\n          <DialogTitle>{t('image_editor.title', {}, 'Edit image')}</DialogTitle>\n          <DialogDescription id={hintId} className=\"sr-only\">\n            {t(\n              'image_editor.keyboard_hint',\n              {},\n              'Arrow keys move the crop area. Shift and arrow keys resize it.',\n            )}{' '}\n            {t('image_editor.zoom_hint', {}, 'Plus and minus keys zoom the image.')}\n          </DialogDescription>\n        </DialogHeader>\n        {loaded ? (\n          <ImageEditorCanvas editor={loaded.editor} bitmap={loaded.bitmap} hintId={hintId} />\n        ) : (\n          <div className=\"flex h-48 items-center justify-center\">\n            <Spinner />\n          </div>\n        )}\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" onClick={() => finish(null)}>\n            {t('image_editor.cancel', {}, 'Cancel')}\n          </Button>\n          <Button type=\"button\" disabled={!loaded || saving} onClick={() => void save()}>\n            {saving && <Spinner />}\n            {t('image_editor.save', {}, 'Apply')}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\n/** The numeric inputs, in the order Filament shows them. */\nconst NUMERIC_FIELDS = [\n  ['x', 'image_editor.x', 'X'],\n  ['y', 'image_editor.y', 'Y'],\n  ['width', 'image_editor.width', 'Width'],\n  ['height', 'image_editor.height', 'Height'],\n  ['rotate', 'image_editor.rotation', 'Rotation'],\n] as const satisfies ReadonlyArray<readonly [keyof ImageEditorData, string, string]>\n\nfunction ImageEditorCanvas({\n  editor,\n  bitmap,\n  hintId,\n}: {\n  editor: ImageEditor\n  bitmap: ImageBitmap\n  hintId: string\n}) {\n  const t = useT()\n  const state = useStore(editor.store)\n  const canvas = useRef<HTMLCanvasElement>(null)\n  const frame = useRef<HTMLDivElement>(null)\n  const inputsId = useId()\n\n  // Measure the container, and follow its size.\n  useEffect(() => {\n    const element = frame.current\n\n    if (!element) return\n\n    const measure = () => editor.setContainer(element.clientWidth, element.clientHeight)\n    measure()\n\n    if (typeof ResizeObserver === 'undefined') return\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(element)\n\n    return () => observer.disconnect()\n  }, [editor])\n\n  // Wheel and trackpad pinch zoom. A native listener: React's wheel listener is passive.\n  useEffect(() => {\n    const element = frame.current\n\n    if (!element) return\n\n    const onWheel = (event: WheelEvent) => {\n      const rect = element.getBoundingClientRect()\n\n      if (editor.wheel(event, { x: event.clientX - rect.left, y: event.clientY - rect.top })) {\n        event.preventDefault()\n      }\n    }\n\n    element.addEventListener('wheel', onWheel, { passive: false })\n\n    return () => element.removeEventListener('wheel', onWheel)\n  }, [editor])\n\n  useEffect(() => {\n    if (canvas.current) {\n      editor.drawPreview(canvas.current, bitmap, globalThis.devicePixelRatio || 1)\n    }\n  }, [editor, bitmap, state])\n\n  const box = editor.cropBox()\n  const data = editor.getData()\n\n  const start = (mode: ImageEditorDragMode) => (event: PointerEvent<HTMLElement>) => {\n    event.preventDefault()\n    event.stopPropagation()\n    event.currentTarget.setPointerCapture?.(event.pointerId)\n    editor.startDrag(mode, event.clientX, event.clientY, undefined, event.pointerId ?? 0)\n  }\n\n  const end = (event: PointerEvent<HTMLElement>) => editor.endDrag(event.pointerId ?? 0)\n\n  // Numeric inputs apply on blur and Enter; invalid values snap back to the current one.\n  const commit =\n    (field: keyof ImageEditorData) =>\n    (event: FocusEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {\n      const input = event.currentTarget\n      const value = input.value.trim() === '' ? Number.NaN : Number(input.value)\n\n      editor.setData({ [field]: value })\n      input.value = String(editor.getData()[field])\n    }\n\n  const ratioLabel = (ratio: string | null) => ratio ?? t('image_editor.free', {}, 'Free')\n\n  const tool = (label: string, icon: ReactNode, onClick: () => void, disabled = false) => (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      onClick={onClick}\n    >\n      {icon}\n    </Button>\n  )\n\n  return (\n    <div className=\"flex flex-col gap-4 md:flex-row\">\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3\">\n        {/* Image space: left is the image's left in every reading direction. */}\n        <div\n          ref={frame}\n          dir=\"ltr\"\n          data-slot=\"image-editor-viewport\"\n          className=\"bg-muted/40 relative h-72 w-full cursor-grab touch-none overflow-hidden rounded-md select-none sm:h-96\"\n          onPointerDown={start('pan')}\n          onPointerMove={(event) =>\n            editor.dragTo(event.clientX, event.clientY, event.pointerId ?? 0)\n          }\n          onPointerUp={end}\n          onPointerCancel={end}\n        >\n          <canvas ref={canvas} className=\"pointer-events-none absolute inset-0 block size-full\" />\n          <div\n            role=\"group\"\n            tabIndex={0}\n            aria-label={t('image_editor.crop_area', {}, 'Crop area')}\n            aria-describedby={hintId}\n            data-slot=\"image-editor-crop\"\n            className={cn(\n              'ring-ring/50 absolute cursor-move border-2 border-white shadow-[0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:ring-[3px]',\n              editor.circle && 'rounded-full',\n            )}\n            // Runtime geometry: no Tailwind class can hold these values.\n            style={{\n              left: `${box.left}%`,\n              top: `${box.top}%`,\n              width: `${box.width}%`,\n              height: `${box.height}%`,\n            }}\n            onPointerDown={start('move')}\n            onKeyDown={(event) => {\n              if (editor.handleKey(event)) event.preventDefault()\n            }}\n          >\n            {HANDLES.map((handle) => (\n              <span\n                key={handle}\n                data-handle={handle}\n                aria-hidden=\"true\"\n                className=\"absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-black/40 bg-white\"\n                style={{\n                  left: handle.endsWith('w') ? '0%' : '100%',\n                  top: handle.startsWith('n') ? '0%' : '100%',\n                  cursor: handle === 'nw' || handle === 'se' ? 'nwse-resize' : 'nesw-resize',\n                }}\n                onPointerDown={start(handle)}\n              />\n            ))}\n          </div>\n        </div>\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          {editor.aspectRatios.length > 1 ? (\n            <div\n              role=\"group\"\n              aria-label={t('image_editor.aspect_ratio', {}, 'Aspect ratio')}\n              className=\"flex flex-wrap gap-1\"\n            >\n              {editor.aspectRatios.map((ratio) => (\n                <Button\n                  key={ratio ?? 'free'}\n                  type=\"button\"\n                  size=\"sm\"\n                  variant={state.aspectRatio === ratio ? 'default' : 'outline'}\n                  aria-pressed={state.aspectRatio === ratio}\n                  onClick={() => editor.setAspectRatio(ratio)}\n                >\n                  {ratioLabel(ratio)}\n                </Button>\n              ))}\n            </div>\n          ) : (\n            <span />\n          )}\n          <div className=\"flex flex-wrap gap-1\">\n            {tool(\n              t('image_editor.zoom_out', {}, 'Zoom out'),\n              <ZoomOutIcon />,\n              () => editor.zoomOut(),\n              !editor.canZoomOut,\n            )}\n            {tool(\n              t('image_editor.zoom_in', {}, 'Zoom in'),\n              <ZoomInIcon />,\n              () => editor.zoomIn(),\n              !editor.canZoomIn,\n            )}\n            {tool(t('image_editor.rotate_left', {}, 'Rotate left'), <RotateCcwIcon />, () =>\n              editor.rotate(-1),\n            )}\n            {tool(t('image_editor.rotate_right', {}, 'Rotate right'), <RotateCwIcon />, () =>\n              editor.rotate(1),\n            )}\n            {tool(\n              t('image_editor.flip_horizontal', {}, 'Flip horizontally'),\n              <FlipHorizontal2Icon />,\n              () => editor.flip('x'),\n            )}\n            {tool(\n              t('image_editor.flip_vertical', {}, 'Flip vertically'),\n              <FlipVertical2Icon />,\n              () => editor.flip('y'),\n            )}\n            {tool(t('image_editor.reset', {}, 'Reset'), <Undo2Icon />, () => editor.reset())}\n          </div>\n        </div>\n      </div>\n      {/* Numeric inputs: beside the image from md up, under it on phones. */}\n      <div\n        role=\"group\"\n        aria-label={t('image_editor.inputs', {}, 'Position and size')}\n        data-slot=\"image-editor-inputs\"\n        className=\"grid grid-cols-2 content-start gap-x-3 gap-y-2 sm:grid-cols-4 md:w-40 md:shrink-0 md:grid-cols-1\"\n      >\n        {NUMERIC_FIELDS.map(([field, key, fallback]) => (\n          <div key={field} className=\"flex flex-col gap-1\">\n            <label htmlFor={`${inputsId}-${field}`} className=\"text-muted-foreground text-xs\">\n              {t(key, {}, fallback)}\n            </label>\n            <Input\n              // Remount with the new value when the editor changes it (drag, zoom…).\n              key={`${field}:${data[field]}`}\n              id={`${inputsId}-${field}`}\n              type=\"number\"\n              inputMode=\"decimal\"\n              step={1}\n              data-field={field}\n              className=\"h-8 tabular-nums\"\n              defaultValue={data[field]}\n              onBlur={commit(field)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter') {\n                  event.preventDefault()\n                  commit(field)(event)\n                }\n              }}\n            />\n          </div>\n        ))}\n        <div className=\"col-span-2 flex gap-1 sm:col-span-4 md:col-span-1\">\n          {(\n            [\n              ['x', 'image_editor.scale_x', 'Scale X'],\n              ['y', 'image_editor.scale_y', 'Scale Y'],\n            ] as const\n          ).map(([axis, key, fallback]) => {\n            const flipped = axis === 'x' ? state.flipX : state.flipY\n\n            return (\n              <Button\n                key={axis}\n                type=\"button\"\n                size=\"sm\"\n                variant={flipped ? 'default' : 'outline'}\n                aria-pressed={flipped}\n                data-field={`scale${axis.toUpperCase()}`}\n                className=\"flex-1\"\n                onClick={() => editor.flip(axis)}\n              >\n                {t(key, {}, fallback)}\n              </Button>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/index.d.ts

@@ -0,0 +1,24 @@
+import { BuilderField } from "./builder.js";
+import { CheckboxField } from "./checkbox.js";
+import { CheckboxListField } from "./checkbox-list.js";
+import { CodeEditorField } from "./code-editor-lazy.js";
+import { ColorPickerField } from "./color-picker.js";
+import { DatePickerField } from "./date-picker.js";
+import { FileUploadField } from "./file-upload.js";
+import { HiddenField } from "./hidden.js";
+import { IconPickerField } from "./icon-picker-lazy.js";
+import { KeyValueField } from "./key-value.js";
+import { ModalTableSelectField, QueryBuilderRulesField } from "./lazy-fields.js";
+import { MoneyInputField } from "./money-input.js";
+import { OneTimeCodeInputField } from "./one-time-code-input.js";
+import { RadioField } from "./radio.js";
+import { RepeaterField } from "./repeater.js";
+import { RichEditorField } from "./rich-editor-lazy.js";
+import { SelectField } from "./select.js";
+import { SliderField } from "./slider.js";
+import { TagsInputField } from "./tags-input.js";
+import { TextInputField } from "./text-input.js";
+import { TextareaField } from "./textarea.js";
+import { ToggleField } from "./toggle.js";
+import { ToggleButtonsField } from "./toggle-buttons.js";
+export { BuilderField, CheckboxField, CheckboxListField, CodeEditorField, ColorPickerField, DatePickerField, FileUploadField, HiddenField, IconPickerField, KeyValueField, ModalTableSelectField, MoneyInputField, OneTimeCodeInputField, QueryBuilderRulesField, RadioField, RepeaterField, RichEditorField, SelectField, SliderField, TagsInputField, TextInputField, TextareaField, ToggleButtonsField, ToggleField };

package/dist/components/fields/item-actions.js

@@ -0,0 +1,270 @@
+import { useActionRunner, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, ghostButtonColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionButton } from "../actions/action-button.js";
+import { ActionList } from "../actions/action-list.js";
+import { ITEM_MOVE_ATTRIBUTE, ItemMoveTracker, addActionJustify, itemActionContext, resolveItemAction, withItemActionState } from "@alfakit/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, CopyIcon, GripVerticalIcon, PlusIcon, Trash2Icon } from "lucide-react";
+//#region src/components/fields/item-actions.tsx
+/**
+* A built-in item action (Repeater, Builder, KeyValue). Uncustomised actions apply their
+* change in the browser (`onClient`); customised ones (`server`) run through the field
+* action endpoint with `args` (`item`, `items`, `block`).
+*/
+function ItemActionButton({ action, context, args, onClient, disabled, attributes, size = "xs", className }) {
+	if (!action) return null;
+	if (!action.server && action.variant === "icon-button" && !action.badge) {
+		const StaticIcon = action.icon ? STATIC_ICONS[action.icon] : void 0;
+		const label = action.label ?? action.tooltip ?? action.name;
+		return /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "plain",
+			size: size === "xs" ? "icon-xs" : size === "sm" ? "icon-sm" : "icon",
+			disabled: disabled || action.disabled,
+			"aria-label": label,
+			title: action.tooltip ?? label,
+			onClick: () => onClient?.(),
+			...extraProps({
+				...action.extraAttributes,
+				...attributes
+			}, cn(colorClass(ghostButtonColorClasses, action.color, "gray"), className)),
+			children: StaticIcon ? /* @__PURE__ */ jsx(StaticIcon, {}) : /* @__PURE__ */ jsx(Icon, { name: action.icon })
+		});
+	}
+	return /* @__PURE__ */ jsx(ServerItemActionButton, {
+		action,
+		context,
+		args,
+		onClient,
+		disabled,
+		attributes,
+		size,
+		className
+	});
+}
+/** The common item action icons, bundled so headers don't wait for dynamic icons. */
+const STATIC_ICONS = {
+	"chevron-up": ChevronUpIcon,
+	"chevron-down": ChevronDownIcon,
+	copy: CopyIcon,
+	"trash-2": Trash2Icon,
+	"grip-vertical": GripVerticalIcon,
+	plus: PlusIcon
+};
+function ServerItemActionButton({ action, context, args, onClient, disabled, attributes, size = "xs", className }) {
+	const runner = useActionRunner();
+	const scoped = useMemo(() => itemActionContext(context, args ?? {}), [context, args]);
+	return /* @__PURE__ */ jsx(ActionButton, {
+		action: withItemActionState(action, {
+			disabled,
+			attributes
+		}),
+		context: scoped,
+		size,
+		className,
+		withKeyBindings: false,
+		onTrigger: (schema, ctx) => action.server ? runner.trigger(schema, ctx) : onClient?.()
+	});
+}
+/** Run a built-in action: on the server when customised, else `onClient`. */
+function useRunItemAction(context) {
+	const runner = useActionRunner();
+	return (action, args, onClient) => {
+		if (!action) return;
+		if (action.server) runner.trigger(action, itemActionContext(context, args));
+		else onClient();
+	};
+}
+/** Default looks of the built-in actions, for payloads without `itemActions`. */
+function useItemActionFallbacks(addLabel = "") {
+	const t = useT();
+	return {
+		add: {
+			label: addLabel,
+			icon: "plus",
+			variant: "outline"
+		},
+		delete: {
+			label: t("form.remove_item", {}, "Remove"),
+			icon: "trash-2",
+			color: "danger"
+		},
+		clone: {
+			label: t("form.clone", {}, "Clone"),
+			icon: "copy"
+		},
+		reorder: {
+			label: t("form.reorder_item", {}, "Reorder"),
+			icon: "grip-vertical"
+		},
+		moveUp: {
+			label: t("form.move_up", {}, "Move up"),
+			icon: "chevron-up"
+		},
+		moveDown: {
+			label: t("form.move_down", {}, "Move down"),
+			icon: "chevron-down"
+		},
+		collapse: {
+			label: t("form.collapse_item", {}, "Collapse"),
+			icon: "chevron-up"
+		},
+		expand: {
+			label: t("form.expand_item", {}, "Expand"),
+			icon: "chevron-down"
+		},
+		collapseAll: {
+			label: t("form.collapse_all", {}, "Collapse all"),
+			icon: "chevrons-down-up",
+			variant: "link"
+		},
+		expandAll: {
+			label: t("form.expand_all", {}, "Expand all"),
+			icon: "chevrons-up-down",
+			variant: "link"
+		}
+	};
+}
+/** Resolve every built-in action of a field (and optionally one of its items). */
+function useItemActions(field, fallbacks) {
+	return (name, item) => resolveItemAction(name, field, item, fallbacks[name]);
+}
+/** Marks the move buttons so focus can return to them after a move (`ItemMoveTracker`). */
+const MOVE_UP_ATTRIBUTES = { [ITEM_MOVE_ATTRIBUTE]: "up" };
+const MOVE_DOWN_ATTRIBUTES = { [ITEM_MOVE_ATTRIBUTE]: "down" };
+/**
+* The end of an item header: move up / down, extra item actions, clone, delete and the
+* collapse toggle, in Filament's order.
+*/
+function ItemHeaderActions({ context, itemKey, index, count, resolve, extraActions, buttons, canClone, canDelete, collapsible, collapsed, onMove, onClone, onDelete, onToggle, children }) {
+	const args = useMemo(() => ({ item: itemKey }), [itemKey]);
+	const extraContext = useMemo(() => itemActionContext(context, args), [context, args]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ms-auto flex items-center gap-0.5",
+		"data-slot": "item-actions",
+		children: [
+			children,
+			buttons && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemActionButton, {
+				action: resolve("moveUp"),
+				context,
+				args,
+				disabled: index === 0,
+				attributes: MOVE_UP_ATTRIBUTES,
+				onClient: () => onMove(index, index - 1)
+			}), /* @__PURE__ */ jsx(ItemActionButton, {
+				action: resolve("moveDown"),
+				context,
+				args,
+				disabled: index === count - 1,
+				attributes: MOVE_DOWN_ATTRIBUTES,
+				onClient: () => onMove(index, index + 1)
+			})] }),
+			extraActions && extraActions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+				actions: extraActions,
+				context: extraContext,
+				size: "xs",
+				className: "gap-0.5"
+			}),
+			canClone && /* @__PURE__ */ jsx(ItemActionButton, {
+				action: resolve("clone"),
+				context,
+				args,
+				onClient: onClone
+			}),
+			canDelete && /* @__PURE__ */ jsx(ItemActionButton, {
+				action: resolve("delete"),
+				context,
+				args,
+				className: "text-destructive hover:text-destructive",
+				onClient: onDelete
+			}),
+			collapsible && /* @__PURE__ */ jsx(ItemActionButton, {
+				action: resolve(collapsed ? "expand" : "collapse"),
+				context,
+				args,
+				attributes: { "aria-expanded": collapsed ? "false" : "true" },
+				onClient: onToggle
+			})
+		]
+	});
+}
+/** "Collapse all" / "Expand all" above collapsible items. */
+function CollapseAllActions({ context, resolve, onCollapseAll, onExpandAll }) {
+	const collapseAll = resolve("collapseAll");
+	const expandAll = resolve("expandAll");
+	if (!collapseAll && !expandAll) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex justify-end gap-3",
+		"data-slot": "item-collapse-actions",
+		children: [/* @__PURE__ */ jsx(ItemActionButton, {
+			action: collapseAll,
+			context,
+			onClient: onCollapseAll
+		}), /* @__PURE__ */ jsx(ItemActionButton, {
+			action: expandAll,
+			context,
+			onClient: onExpandAll
+		})]
+	});
+}
+const JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+/** The row holding the add button, aligned with `addActionAlignment()`. */
+function AddActionRow({ alignment, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex", JUSTIFY[addActionJustify(alignment)]),
+		"data-slot": "item-add-action",
+		children
+	});
+}
+/**
+* Moves made with the item move buttons: one at a time, announced in a live region
+* ("Moved to position 2 of 5") and with focus kept on the moved item's move button.
+* Render `region` once in the field and put `containerRef` on an element holding the
+* items (they carry `data-index`).
+*/
+function useItemMoves(value, move, labelFor, count) {
+	const t = useT();
+	const [tracker] = useState(() => new ItemMoveTracker());
+	const [announcement, setAnnouncement] = useState("");
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (tracker.isMoving) tracker.finish(containerRef.current);
+	}, [value, tracker]);
+	const moveWithButton = (from, to) => {
+		if (to < 0 || to >= count || !tracker.begin(from, to)) return;
+		const label = labelFor(from);
+		move(from, to);
+		setAnnouncement(label ? t("form.labelled_item_moved", {
+			item: label,
+			position: to + 1,
+			total: count
+		}, ":item moved to position :position of :total") : t("form.item_moved", {
+			position: to + 1,
+			total: count
+		}, "Item moved to position :position of :total"));
+	};
+	return {
+		moveWithButton,
+		region: /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			className: "sr-only",
+			"data-slot": "item-move-status",
+			children: announcement
+		}),
+		containerRef
+	};
+}
+//#endregion
+export { AddActionRow, CollapseAllActions, ItemActionButton, ItemHeaderActions, useItemActionFallbacks, useItemActions, useItemMoves, useRunItemAction };
+
+//# sourceMappingURL=item-actions.js.map

package/dist/components/fields/item-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-actions.js","names":[],"sources":["../../../src/components/fields/item-actions.tsx"],"sourcesContent":["import type {\n  ActionContext,\n  ActionSchema,\n  ItemActionFallback,\n  ItemActionName,\n  ItemActionSchema,\n  ItemActionsItemProps,\n  ItemActionsProps,\n} from '@alfakit/core'\nimport {\n  ITEM_MOVE_ATTRIBUTE,\n  ItemMoveTracker,\n  addActionJustify,\n  itemActionContext,\n  resolveItemAction,\n  withItemActionState,\n} from '@alfakit/core'\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  CopyIcon,\n  GripVerticalIcon,\n  PlusIcon,\n  Trash2Icon,\n  type LucideIcon,\n} from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\nimport { useActionRunner, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { colorClass, ghostButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { ActionButton } from '../actions/action-button'\nimport { ActionList } from '../actions/action-list'\nimport { Button } from '../ui/button'\n\n/**\n * A built-in item action (Repeater, Builder, KeyValue). Uncustomised actions apply their\n * change in the browser (`onClient`); customised ones (`server`) run through the field\n * action endpoint with `args` (`item`, `items`, `block`).\n */\nexport function ItemActionButton({\n  action,\n  context,\n  args,\n  onClient,\n  disabled,\n  attributes,\n  size = 'xs',\n  className,\n}: {\n  action: ItemActionSchema | null\n  context: ActionContext\n  args?: Record<string, unknown>\n  onClient?: () => void\n  disabled?: boolean\n  attributes?: Record<string, string>\n  size?: 'xs' | 'sm' | 'default'\n  className?: string\n}) {\n  if (!action) return null\n\n  // Plain icon buttons that change the state in the browser repeat on every item: render\n  // them light (no runner subscription, no tooltip portal, static icons).\n  if (!action.server && action.variant === 'icon-button' && !action.badge) {\n    const StaticIcon = action.icon ? STATIC_ICONS[action.icon] : undefined\n    const label = action.label ?? action.tooltip ?? action.name\n\n    return (\n      <Button\n        type=\"button\"\n        variant=\"plain\"\n        size={size === 'xs' ? 'icon-xs' : size === 'sm' ? 'icon-sm' : 'icon'}\n        disabled={disabled || action.disabled}\n        aria-label={label}\n        title={action.tooltip ?? label}\n        onClick={() => onClient?.()}\n        {...extraProps(\n          { ...action.extraAttributes, ...attributes },\n          cn(colorClass(ghostButtonColorClasses, action.color, 'gray'), className),\n        )}\n      >\n        {StaticIcon ? <StaticIcon /> : <Icon name={action.icon} />}\n      </Button>\n    )\n  }\n\n  return (\n    <ServerItemActionButton\n      action={action}\n      context={context}\n      args={args}\n      onClient={onClient}\n      disabled={disabled}\n      attributes={attributes}\n      size={size}\n      className={className}\n    />\n  )\n}\n\n/** The common item action icons, bundled so headers don't wait for dynamic icons. */\nconst STATIC_ICONS: Record<string, LucideIcon> = {\n  'chevron-up': ChevronUpIcon,\n  'chevron-down': ChevronDownIcon,\n  copy: CopyIcon,\n  'trash-2': Trash2Icon,\n  'grip-vertical': GripVerticalIcon,\n  plus: PlusIcon,\n}\n\nfunction ServerItemActionButton({\n  action,\n  context,\n  args,\n  onClient,\n  disabled,\n  attributes,\n  size = 'xs',\n  className,\n}: {\n  action: ItemActionSchema\n  context: ActionContext\n  args?: Record<string, unknown>\n  onClient?: () => void\n  disabled?: boolean\n  attributes?: Record<string, string>\n  size?: 'xs' | 'sm' | 'default'\n  className?: string\n}) {\n  const runner = useActionRunner()\n  const scoped = useMemo(() => itemActionContext(context, args ?? {}), [context, args])\n\n  return (\n    <ActionButton\n      action={withItemActionState(action, { disabled, attributes })}\n      context={scoped}\n      size={size}\n      className={className}\n      withKeyBindings={false}\n      onTrigger={(schema, ctx) => (action.server ? runner.trigger(schema, ctx) : onClient?.())}\n    />\n  )\n}\n\n/** Run a built-in action: on the server when customised, else `onClient`. */\nexport function useRunItemAction(context: ActionContext) {\n  const runner = useActionRunner()\n\n  return (action: ItemActionSchema | null, args: Record<string, unknown>, onClient: () => void) => {\n    if (!action) return\n    if (action.server) void runner.trigger(action, itemActionContext(context, args))\n    else onClient()\n  }\n}\n\n/** Default looks of the built-in actions, for payloads without `itemActions`. */\nexport function useItemActionFallbacks(addLabel = ''): Record<ItemActionName, ItemActionFallback> {\n  const t = useT()\n\n  return {\n    add: { label: addLabel, icon: 'plus', variant: 'outline' },\n    delete: { label: t('form.remove_item', {}, 'Remove'), icon: 'trash-2', color: 'danger' },\n    clone: { label: t('form.clone', {}, 'Clone'), icon: 'copy' },\n    reorder: { label: t('form.reorder_item', {}, 'Reorder'), icon: 'grip-vertical' },\n    moveUp: { label: t('form.move_up', {}, 'Move up'), icon: 'chevron-up' },\n    moveDown: { label: t('form.move_down', {}, 'Move down'), icon: 'chevron-down' },\n    collapse: { label: t('form.collapse_item', {}, 'Collapse'), icon: 'chevron-up' },\n    expand: { label: t('form.expand_item', {}, 'Expand'), icon: 'chevron-down' },\n    collapseAll: {\n      label: t('form.collapse_all', {}, 'Collapse all'),\n      icon: 'chevrons-down-up',\n      variant: 'link',\n    },\n    expandAll: {\n      label: t('form.expand_all', {}, 'Expand all'),\n      icon: 'chevrons-up-down',\n      variant: 'link',\n    },\n  }\n}\n\n/** Resolve every built-in action of a field (and optionally one of its items). */\nexport function useItemActions(\n  field: ItemActionsProps,\n  fallbacks: Record<ItemActionName, ItemActionFallback>,\n) {\n  return (name: ItemActionName, item?: ItemActionsItemProps): ItemActionSchema | null =>\n    resolveItemAction(name, field, item, fallbacks[name])\n}\n\nexport interface ItemHeaderActionsProps {\n  context: ActionContext\n  itemKey: string\n  index: number\n  count: number\n  resolve: (name: ItemActionName) => ItemActionSchema | null\n  extraActions?: ActionSchema[]\n  buttons: boolean\n  canClone: boolean\n  canDelete: boolean\n  collapsible: boolean\n  collapsed: boolean\n  onMove: (from: number, to: number) => void\n  onClone: () => void\n  onDelete: () => void\n  onToggle: () => void\n  children?: ReactNode\n}\n\n/** Marks the move buttons so focus can return to them after a move (`ItemMoveTracker`). */\nconst MOVE_UP_ATTRIBUTES = { [ITEM_MOVE_ATTRIBUTE]: 'up' }\nconst MOVE_DOWN_ATTRIBUTES = { [ITEM_MOVE_ATTRIBUTE]: 'down' }\n\n/**\n * The end of an item header: move up / down, extra item actions, clone, delete and the\n * collapse toggle, in Filament's order.\n */\nexport function ItemHeaderActions({\n  context,\n  itemKey,\n  index,\n  count,\n  resolve,\n  extraActions,\n  buttons,\n  canClone,\n  canDelete,\n  collapsible,\n  collapsed,\n  onMove,\n  onClone,\n  onDelete,\n  onToggle,\n  children,\n}: ItemHeaderActionsProps) {\n  const args = useMemo(() => ({ item: itemKey }), [itemKey])\n  const extraContext = useMemo(() => itemActionContext(context, args), [context, args])\n\n  return (\n    <div className=\"ms-auto flex items-center gap-0.5\" data-slot=\"item-actions\">\n      {children}\n      {buttons && (\n        <>\n          <ItemActionButton\n            action={resolve('moveUp')}\n            context={context}\n            args={args}\n            disabled={index === 0}\n            attributes={MOVE_UP_ATTRIBUTES}\n            onClient={() => onMove(index, index - 1)}\n          />\n          <ItemActionButton\n            action={resolve('moveDown')}\n            context={context}\n            args={args}\n            disabled={index === count - 1}\n            attributes={MOVE_DOWN_ATTRIBUTES}\n            onClient={() => onMove(index, index + 1)}\n          />\n        </>\n      )}\n      {extraActions && extraActions.length > 0 && (\n        <ActionList actions={extraActions} context={extraContext} size=\"xs\" className=\"gap-0.5\" />\n      )}\n      {canClone && (\n        <ItemActionButton\n          action={resolve('clone')}\n          context={context}\n          args={args}\n          onClient={onClone}\n        />\n      )}\n      {canDelete && (\n        <ItemActionButton\n          action={resolve('delete')}\n          context={context}\n          args={args}\n          className=\"text-destructive hover:text-destructive\"\n          onClient={onDelete}\n        />\n      )}\n      {collapsible && (\n        <ItemActionButton\n          action={resolve(collapsed ? 'expand' : 'collapse')}\n          context={context}\n          args={args}\n          attributes={{ 'aria-expanded': collapsed ? 'false' : 'true' }}\n          onClient={onToggle}\n        />\n      )}\n    </div>\n  )\n}\n\n/** \"Collapse all\" / \"Expand all\" above collapsible items. */\nexport function CollapseAllActions({\n  context,\n  resolve,\n  onCollapseAll,\n  onExpandAll,\n}: {\n  context: ActionContext\n  resolve: (name: ItemActionName) => ItemActionSchema | null\n  onCollapseAll: () => void\n  onExpandAll: () => void\n}) {\n  const collapseAll = resolve('collapseAll')\n  const expandAll = resolve('expandAll')\n\n  if (!collapseAll && !expandAll) return null\n\n  return (\n    <div className=\"flex justify-end gap-3\" data-slot=\"item-collapse-actions\">\n      <ItemActionButton action={collapseAll} context={context} onClient={onCollapseAll} />\n      <ItemActionButton action={expandAll} context={context} onClient={onExpandAll} />\n    </div>\n  )\n}\n\nconst JUSTIFY = { start: 'justify-start', center: 'justify-center', end: 'justify-end' } as const\n\n/** The row holding the add button, aligned with `addActionAlignment()`. */\nexport function AddActionRow({ alignment, children }: { alignment?: string; children: ReactNode }) {\n  return (\n    <div className={cn('flex', JUSTIFY[addActionJustify(alignment)])} data-slot=\"item-add-action\">\n      {children}\n    </div>\n  )\n}\n\n/**\n * Moves made with the item move buttons: one at a time, announced in a live region\n * (\"Moved to position 2 of 5\") and with focus kept on the moved item's move button.\n * Render `region` once in the field and put `containerRef` on an element holding the\n * items (they carry `data-index`).\n */\nexport function useItemMoves<T>(\n  value: T,\n  move: (from: number, to: number) => void,\n  labelFor: (index: number) => string | null | undefined,\n  count: number,\n) {\n  const t = useT()\n  const [tracker] = useState(() => new ItemMoveTracker())\n  const [announcement, setAnnouncement] = useState('')\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (tracker.isMoving) tracker.finish(containerRef.current)\n  }, [value, tracker])\n\n  const moveWithButton = (from: number, to: number) => {\n    if (to < 0 || to >= count || !tracker.begin(from, to)) return\n\n    const label = labelFor(from)\n\n    move(from, to)\n    setAnnouncement(\n      label\n        ? t(\n            'form.labelled_item_moved',\n            { item: label, position: to + 1, total: count },\n            ':item moved to position :position of :total',\n          )\n        : t(\n            'form.item_moved',\n            { position: to + 1, total: count },\n            'Item moved to position :position of :total',\n          ),\n    )\n  }\n\n  const region = (\n    <span aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\" data-slot=\"item-move-status\">\n      {announcement}\n    </span>\n  )\n\n  return { moveWithButton, region, containerRef }\n}\n"],"mappings":"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"}

package/dist/components/fields/key-value.d.ts

@@ -0,0 +1,11 @@
+import { KeyValueSchema } from "@alfakit/core";
+//#region src/components/fields/key-value.d.ts
+/**
+ * The server stores an object; while editing we keep an ordered list of rows so keys
+ * can be typed freely (including temporarily duplicate or empty keys).
+ */
+export declare function KeyValueField({ component }: {
+  component: KeyValueSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=key-value.d.ts.map

package/dist/components/fields/key-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value.d.ts","names":[],"sources":["../../../src/components/fields/key-value.tsx"],"mappings":";;;;;;wBAwBgB,gBAAgB;EAAe,WAAW;oBAAgB,IAAA"}

package/dist/components/fields/key-value.js

@@ -0,0 +1,194 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useField } from "../form/form-context.js";
+import { useFieldActionContext } from "../schema/field-actions.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { ItemActionButton, useItemMoves, useRunItemAction } from "./item-actions.js";
+import { fieldIds, moveRepeaterItem, reorderedItemKeys, resolveItemAction } from "@alfakit/core";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+//#region src/components/fields/key-value.tsx
+/**
+* The server stores an object; while editing we keep an ordered list of rows so keys
+* can be typed freely (including temporarily duplicate or empty keys).
+*/
+function KeyValueField({ component }) {
+	const t = useT();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const rows = useMemo(() => {
+		if (Array.isArray(value)) return value.map((row) => ({
+			key: String(row.key ?? ""),
+			value: row.value === null || row.value === void 0 ? "" : String(row.value)
+		}));
+		return Object.entries(value ?? {}).map(([key, rowValue]) => ({
+			key,
+			value: rowValue === null || rowValue === void 0 ? "" : String(rowValue)
+		}));
+	}, [value]);
+	const context = useFieldActionContext(component);
+	const runItemAction = useRunItemAction(context);
+	const addAction = resolveItemAction("add", component, void 0, {
+		label: component.addActionLabel,
+		icon: "plus",
+		variant: "ghost"
+	});
+	const deleteAction = resolveItemAction("delete", component, void 0, {
+		label: t("form.remove_row", {}, "Remove row"),
+		icon: "trash-2"
+	});
+	const reorderAction = resolveItemAction("reorder", component, void 0, {
+		label: t("form.reorder_item", {}, "Reorder"),
+		icon: "grip-vertical"
+	});
+	const update = (next) => setValue(next);
+	const deletable = component.deletable && !readOnly && deleteAction !== null;
+	const reorderable = component.reorderable && !readOnly && !disabled && reorderAction !== null;
+	const [dragIndex, setDragIndex] = useState(null);
+	const move = (from, to) => runItemAction(reorderAction, { items: reorderedItemKeys(rows.length, from, to) }, () => update(moveRepeaterItem(rows, from, to)));
+	const { moveWithButton, region: moveRegion, containerRef: moveContainerRef } = useItemMoves(value, move, (index) => rows[index]?.key || null, rows.length);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: moveContainerRef,
+			className: "overflow-hidden rounded-md border",
+			children: [
+				moveRegion,
+				/* @__PURE__ */ jsxs("table", {
+					className: "w-full text-sm",
+					"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+					"aria-describedby": aria["aria-describedby"],
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-muted/50 text-muted-foreground text-xs",
+						children: /* @__PURE__ */ jsxs("tr", { children: [
+							reorderable && /* @__PURE__ */ jsx("th", { className: "w-16" }),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-3 py-2 text-start font-medium",
+								children: component.keyLabel
+							}),
+							/* @__PURE__ */ jsx("th", {
+								className: "px-3 py-2 text-start font-medium",
+								children: component.valueLabel
+							}),
+							deletable && /* @__PURE__ */ jsx("th", { className: "w-10" })
+						] })
+					}), /* @__PURE__ */ jsxs("tbody", { children: [rows.map((row, index) => /* @__PURE__ */ jsxs("tr", {
+						"data-index": index,
+						draggable: reorderable,
+						onDragStart: () => setDragIndex(index),
+						onDragOver: (event) => reorderable && event.preventDefault(),
+						onDrop: () => {
+							if (dragIndex !== null && dragIndex !== index) move(dragIndex, index);
+							setDragIndex(null);
+						},
+						onDragEnd: () => setDragIndex(null),
+						className: cn("border-t", dragIndex === index && "opacity-50"),
+						children: [
+							reorderable && /* @__PURE__ */ jsx("td", {
+								className: "p-1.5",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [/* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										"aria-label": t("form.move_up", {}, "Move up"),
+										disabled: index === 0,
+										"data-item-move": "up",
+										onClick: () => moveWithButton(index, index - 1),
+										children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+									}), /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										"aria-label": t("form.move_down", {}, "Move down"),
+										disabled: index === rows.length - 1,
+										"data-item-move": "down",
+										onClick: () => moveWithButton(index, index + 1),
+										children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "p-1.5",
+								children: /* @__PURE__ */ jsx(Input, {
+									dir: "auto",
+									value: row.key,
+									readOnly: readOnly || !component.editableKeys,
+									disabled,
+									placeholder: component.keyPlaceholder,
+									"aria-label": component.keyLabel,
+									"aria-invalid": aria["aria-invalid"],
+									className: "h-8",
+									onChange: (event) => update(rows.map((item, i) => i === index ? {
+										...item,
+										key: event.target.value
+									} : item)),
+									onBlur: blur
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "p-1.5",
+								children: /* @__PURE__ */ jsx(Input, {
+									dir: "auto",
+									value: row.value,
+									readOnly: readOnly || !component.editableValues,
+									disabled,
+									placeholder: component.valuePlaceholder,
+									"aria-label": component.valueLabel,
+									"aria-invalid": aria["aria-invalid"],
+									className: "h-8",
+									onChange: (event) => update(rows.map((item, i) => i === index ? {
+										...item,
+										value: event.target.value
+									} : item)),
+									onBlur: blur
+								})
+							}),
+							deletable && /* @__PURE__ */ jsx("td", {
+								className: "p-1.5",
+								children: /* @__PURE__ */ jsx(ItemActionButton, {
+									action: deleteAction,
+									context,
+									args: { item: String(index) },
+									size: "sm",
+									disabled,
+									className: "text-muted-foreground",
+									onClient: () => update(rows.filter((_, i) => i !== index))
+								})
+							})
+						]
+					}, index)), rows.length === 0 && /* @__PURE__ */ jsx("tr", {
+						className: "border-t",
+						children: /* @__PURE__ */ jsx("td", {
+							colSpan: reorderable ? 4 : 3,
+							className: "text-muted-foreground px-3 py-4 text-center text-xs",
+							children: "—"
+						})
+					})] })]
+				}),
+				component.addable && !readOnly && addAction && /* @__PURE__ */ jsx("div", {
+					className: "border-t p-1.5",
+					children: /* @__PURE__ */ jsx(ItemActionButton, {
+						action: addAction,
+						context,
+						size: "sm",
+						disabled,
+						onClient: () => update([...rows, {
+							key: "",
+							value: ""
+						}])
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { KeyValueField };
+
+//# sourceMappingURL=key-value.js.map

package/dist/components/fields/key-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value.js","names":[],"sources":["../../../src/components/fields/key-value.tsx"],"sourcesContent":["import {\n  fieldIds,\n  moveRepeaterItem,\n  reorderedItemKeys,\n  resolveItemAction,\n  type KeyValueSchema,\n} from '@alfakit/core'\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { useFieldActionContext } from '../schema/field-actions'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport { Input } from '../ui/input'\nimport { ItemActionButton, useItemMoves, useRunItemAction } from './item-actions'\n\ntype Row = { key: string; value: string }\n\n/**\n * The server stores an object; while editing we keep an ordered list of rows so keys\n * can be typed freely (including temporarily duplicate or empty keys).\n */\nexport function KeyValueField({ component }: { component: KeyValueSchema }) {\n  const t = useT()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<\n    Record<string, unknown> | Row[] | null\n  >(component)\n\n  const rows = useMemo<Row[]>(() => {\n    if (Array.isArray(value)) {\n      return value.map((row) => ({\n        key: String(row.key ?? ''),\n        value: row.value === null || row.value === undefined ? '' : String(row.value),\n      }))\n    }\n\n    return Object.entries(value ?? {}).map(([key, rowValue]) => ({\n      key,\n      value: rowValue === null || rowValue === undefined ? '' : String(rowValue),\n    }))\n  }, [value])\n\n  const context = useFieldActionContext(component)\n  const runItemAction = useRunItemAction(context)\n  const addAction = resolveItemAction('add', component, undefined, {\n    label: component.addActionLabel,\n    icon: 'plus',\n    variant: 'ghost',\n  })\n  const deleteAction = resolveItemAction('delete', component, undefined, {\n    label: t('form.remove_row', {}, 'Remove row'),\n    icon: 'trash-2',\n  })\n  const reorderAction = resolveItemAction('reorder', component, undefined, {\n    label: t('form.reorder_item', {}, 'Reorder'),\n    icon: 'grip-vertical',\n  })\n\n  const update = (next: Row[]) => setValue(next)\n  const deletable = component.deletable && !readOnly && deleteAction !== null\n  const reorderable = component.reorderable && !readOnly && !disabled && reorderAction !== null\n  const [dragIndex, setDragIndex] = useState<number | null>(null)\n  // Moving runs the reorder action: in the browser, or on the server when customised.\n  const move = (from: number, to: number) =>\n    runItemAction(reorderAction, { items: reorderedItemKeys(rows.length, from, to) }, () =>\n      update(moveRepeaterItem(rows, from, to) as Row[]),\n    )\n  // Move buttons: announced, one at a time, focus kept on the moved row.\n  const {\n    moveWithButton,\n    region: moveRegion,\n    containerRef: moveContainerRef,\n  } = useItemMoves(value, move, (index) => rows[index]?.key || null, rows.length)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div ref={moveContainerRef} className=\"overflow-hidden rounded-md border\">\n        {moveRegion}\n        <table\n          className=\"w-full text-sm\"\n          aria-labelledby={component.label ? fieldIds(id).label : undefined}\n          aria-describedby={aria['aria-describedby']}\n        >\n          <thead className=\"bg-muted/50 text-muted-foreground text-xs\">\n            <tr>\n              {reorderable && <th className=\"w-16\" />}\n              <th className=\"px-3 py-2 text-start font-medium\">{component.keyLabel}</th>\n              <th className=\"px-3 py-2 text-start font-medium\">{component.valueLabel}</th>\n              {deletable && <th className=\"w-10\" />}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row, index) => (\n              <tr\n                key={index}\n                data-index={index}\n                draggable={reorderable}\n                onDragStart={() => setDragIndex(index)}\n                onDragOver={(event) => reorderable && event.preventDefault()}\n                onDrop={() => {\n                  if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)\n                  setDragIndex(null)\n                }}\n                onDragEnd={() => setDragIndex(null)}\n                className={cn('border-t', dragIndex === index && 'opacity-50')}\n              >\n                {reorderable && (\n                  <td className=\"p-1.5\">\n                    <div className=\"flex items-center\">\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label={t('form.move_up', {}, 'Move up')}\n                        disabled={index === 0}\n                        data-item-move=\"up\"\n                        onClick={() => moveWithButton(index, index - 1)}\n                      >\n                        <ChevronUpIcon />\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label={t('form.move_down', {}, 'Move down')}\n                        disabled={index === rows.length - 1}\n                        data-item-move=\"down\"\n                        onClick={() => moveWithButton(index, index + 1)}\n                      >\n                        <ChevronDownIcon />\n                      </Button>\n                    </div>\n                  </td>\n                )}\n                <td className=\"p-1.5\">\n                  <Input\n                    dir=\"auto\"\n                    value={row.key}\n                    readOnly={readOnly || !component.editableKeys}\n                    disabled={disabled}\n                    placeholder={component.keyPlaceholder}\n                    aria-label={component.keyLabel}\n                    aria-invalid={aria['aria-invalid']}\n                    className=\"h-8\"\n                    onChange={(event) =>\n                      update(\n                        rows.map((item, i) =>\n                          i === index ? { ...item, key: event.target.value } : item,\n                        ),\n                      )\n                    }\n                    onBlur={blur}\n                  />\n                </td>\n                <td className=\"p-1.5\">\n                  <Input\n                    dir=\"auto\"\n                    value={row.value}\n                    readOnly={readOnly || !component.editableValues}\n                    disabled={disabled}\n                    placeholder={component.valuePlaceholder}\n                    aria-label={component.valueLabel}\n                    aria-invalid={aria['aria-invalid']}\n                    className=\"h-8\"\n                    onChange={(event) =>\n                      update(\n                        rows.map((item, i) =>\n                          i === index ? { ...item, value: event.target.value } : item,\n                        ),\n                      )\n                    }\n                    onBlur={blur}\n                  />\n                </td>\n                {deletable && (\n                  <td className=\"p-1.5\">\n                    <ItemActionButton\n                      action={deleteAction}\n                      context={context}\n                      args={{ item: String(index) }}\n                      size=\"sm\"\n                      disabled={disabled}\n                      className=\"text-muted-foreground\"\n                      onClient={() => update(rows.filter((_, i) => i !== index))}\n                    />\n                  </td>\n                )}\n              </tr>\n            ))}\n            {rows.length === 0 && (\n              <tr className=\"border-t\">\n                <td\n                  colSpan={reorderable ? 4 : 3}\n                  className=\"text-muted-foreground px-3 py-4 text-center text-xs\"\n                >\n                  —\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n        {component.addable && !readOnly && addAction && (\n          <div className=\"border-t p-1.5\">\n            <ItemActionButton\n              action={addAction}\n              context={context}\n              size=\"sm\"\n              disabled={disabled}\n              onClient={() => update([...rows, { key: '', value: '' }])}\n            />\n          </div>\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/lazy-fields.d.ts

@@ -0,0 +1,13 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { ModalTableSelectSchema, QueryBuilderRulesSchema } from "@alfakit/core";
+//#region src/components/fields/lazy-fields.d.ts
+/** `ModalTableSelect`; its code (the picker's table) loads the first time one is shown. */
+export declare const ModalTableSelectField: LazyComponent<{
+  component: ModalTableSelectSchema;
+}>;
+/** The query builder filter's rules; its code loads the first time one is shown. */
+export declare const QueryBuilderRulesField: LazyComponent<{
+  component: QueryBuilderRulesSchema;
+}>;
+//#endregion
+//# sourceMappingURL=lazy-fields.d.ts.map

package/dist/components/fields/lazy-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-fields.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/fields/lazy-fields.tsx"],"mappings":";;;;qBAkBa,uBAAmDA;EAAA,WAAA;;;qBAMnD,wBAAoDA;EAAA,WAAA"}