@withpotter/components 0.13.0-next.101

package/dist/dynamic-form/fields-content-select.js

@@ -0,0 +1,399 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useContext } from "react";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { Select } from "@withpotter/ui-kit/select";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, Checkbox, Textarea } from "@withpotter/ui-kit";
+import {
+  TenantContext,
+  TemplateSchemaContext
+} from "./shared";
+function ContentSelectField({
+  field,
+  value,
+  onChange,
+  error,
+  disabled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [openUpward, setOpenUpward] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newItemData, setNewItemData] = useState({});
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const buttonRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const tenantSlug = useContext(TenantContext);
+  const templateSchema = useContext(TemplateSchemaContext);
+  const contentType = field.contentType;
+  const valueField = field.valueField || "name";
+  const displayField = field.displayField || "name";
+  const mapsTo = field.mapsTo;
+  const storeDisplay = field.storeDisplay;
+  const creatable = field.creatable;
+  const getNestedValue = (obj, path) => {
+    return path.split(".").reduce((acc, part) => acc?.[part], obj);
+  };
+  const getItemDisplay = (item) => getNestedValue(item, displayField) || item.name || item.title || item.id;
+  const selectedItem = items.find((item) => {
+    if (valueField === "id") return item.id === value;
+    return getNestedValue(item, valueField) === value;
+  });
+  const filteredItems = items.filter((item) => {
+    if (!searchQuery.trim()) return true;
+    const display = getItemDisplay(item)?.toLowerCase() || "";
+    return display.includes(searchQuery.toLowerCase());
+  });
+  const searchMatchesExisting = items.some(
+    (item) => getItemDisplay(item)?.toLowerCase() === searchQuery.toLowerCase()
+  );
+  const fetchItems = async () => {
+    if (!tenantSlug || !contentType) return;
+    setLoading(true);
+    try {
+      const { contentApi } = await import("@withpotter/lib/api");
+      const response = await contentApi.list(tenantSlug, contentType);
+      setItems(response.data || []);
+    } catch (err) {
+      console.error("Failed to fetch content items:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  React.useEffect(() => {
+    if (value && items.length === 0 && !loading) {
+      fetchItems();
+    }
+  }, [value, tenantSlug, contentType]);
+  const handleOpen = async () => {
+    if (disabled) return;
+    if (!isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      setOpenUpward(spaceBelow < 300);
+    }
+    if (!isOpen && items.length === 0) {
+      await fetchItems();
+    }
+    setIsOpen(!isOpen);
+    setTimeout(() => searchInputRef.current?.focus(), 50);
+  };
+  const handleSelect = (item) => {
+    if (!item) {
+      if (mapsTo || storeDisplay) {
+        onChange({
+          __mappedValues: {
+            [field.name]: void 0,
+            ...mapsTo && { [mapsTo]: void 0 },
+            ...storeDisplay && { [storeDisplay]: void 0 }
+          }
+        });
+      } else {
+        onChange(void 0);
+      }
+      setIsOpen(false);
+      setSearchQuery("");
+      return;
+    }
+    const itemValue = valueField === "id" ? item.id : getNestedValue(item, valueField);
+    if (mapsTo || storeDisplay) {
+      const mappedValues = {
+        [field.name]: itemValue
+      };
+      if (mapsTo) {
+        mappedValues[mapsTo] = item.id;
+      }
+      if (storeDisplay) {
+        mappedValues[storeDisplay] = getItemDisplay(item);
+      }
+      onChange({ __mappedValues: mappedValues });
+    } else {
+      onChange(itemValue);
+    }
+    setIsOpen(false);
+    setSearchQuery("");
+  };
+  const handleCreateNew = () => {
+    setShowCreateDialog(true);
+    setIsOpen(false);
+    const nameField = displayField === "name" || displayField === "title" ? displayField : "name";
+    setNewItemData({ [nameField]: searchQuery.trim() });
+  };
+  const generateSlug = (name) => {
+    return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  };
+  const handleSaveNewItem = async () => {
+    if (!tenantSlug || !contentType) return;
+    setCreating(true);
+    try {
+      const { contentApi } = await import("@withpotter/lib/api");
+      const dataWithSlug = { ...newItemData };
+      if (!dataWithSlug.slug && (dataWithSlug.name || dataWithSlug.title)) {
+        dataWithSlug.slug = generateSlug(
+          dataWithSlug.name || dataWithSlug.title
+        );
+      }
+      const response = await contentApi.create(
+        tenantSlug,
+        contentType,
+        dataWithSlug
+      );
+      const newItem = response.data;
+      setItems((prev) => [...prev, newItem]);
+      handleSelect(newItem);
+      setShowCreateDialog(false);
+      setNewItemData({});
+      setSearchQuery("");
+    } catch (err) {
+      console.error("Failed to create item:", err);
+    } finally {
+      setCreating(false);
+    }
+  };
+  const getCreateFields = () => {
+    if (templateSchema?.getContentTypeFields) {
+      const allFields = templateSchema.getContentTypeFields(contentType || "");
+      return allFields.filter((f) => {
+        const simpleTypes = [
+          "text",
+          "textarea",
+          "number",
+          "boolean",
+          "select"
+        ];
+        return f.required || f.name === "name" || f.name === "title" || f.name === "slug" || simpleTypes.includes(f.type) && !f.name.includes("image") && !f.name.includes("gallery");
+      }).slice(0, 6);
+    }
+    return [
+      { name: "name", label: "Name", type: "text", required: true },
+      { name: "slug", label: "URL slug", type: "text", required: true }
+    ];
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          onClick: handleOpen,
+          disabled,
+          className: `w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${error ? "border-[var(--error)]" : isOpen ? "border-brand-500 ring-2 ring-brand-500" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"} bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: selectedItem ? "text-[var(--text-primary)]" : "text-[var(--text-tertiary)]",
+                children: selectedItem ? getItemDisplay(selectedItem) : value && (loading || items.length === 0) ? "Loading..." : field.placeholder || `Select ${field.label}...`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-[60]",
+            onClick: () => {
+              setIsOpen(false);
+              setSearchQuery("");
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg ${openUpward ? "bottom-full mb-1" : "top-full mt-1"}`,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  placeholder: creatable ? `Select or create ${field.label.toLowerCase()}...` : `Search ${field.label.toLowerCase()}...`,
+                  className: "w-full"
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "max-h-52 overflow-y-auto", children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: "Loading..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                creatable && searchQuery.trim() && !searchMatchesExisting && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCreateNew,
+                    className: "w-full px-3 py-2 text-left text-sm hover:bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium flex items-center gap-2 border-b border-[var(--border-subtle)]",
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                      "Create \u201C",
+                      searchQuery.trim(),
+                      "\u201D"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSelect(null),
+                    className: "w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]",
+                    children: "None"
+                  }
+                ),
+                filteredItems.map((item) => {
+                  const itemValue = valueField === "id" ? item.id : getNestedValue(item, valueField);
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSelect(item),
+                      className: `w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${value === itemValue ? "bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium" : "text-[var(--text-primary)]"}`,
+                      children: getItemDisplay(item)
+                    },
+                    item.id
+                  );
+                }),
+                filteredItems.length === 0 && !loading && !searchQuery.trim() && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: creatable ? /* @__PURE__ */ jsx("span", { children: "No items yet. Type to create one." }) : /* @__PURE__ */ jsx("span", { children: "No items available" }) }),
+                filteredItems.length === 0 && searchQuery.trim() && !creatable && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--text-tertiary)]", children: "No matches found" })
+              ] }) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    showCreateDialog && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-end sm:items-center justify-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/50 modal-scrim",
+          onClick: () => {
+            setShowCreateDialog(false);
+            setNewItemData({});
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative bg-[var(--bg-base)] w-full sm:max-w-md sm:rounded-md shadow-xl max-h-[90vh] overflow-y-auto animate-in slide-in-from-bottom-4 sm:slide-in-from-bottom-0 sm:zoom-in-95", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sticky top-0 bg-[var(--bg-base)] border-b border-[var(--border-default)] px-4 py-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: [
+            "Create ",
+            field.label
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Close",
+              type: "button",
+              onClick: () => {
+                setShowCreateDialog(false);
+                setNewItemData({});
+              },
+              className: "p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] rounded",
+              children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-4 space-y-4", children: getCreateFields().map((createField) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: [
+            createField.label,
+            createField.required && /* @__PURE__ */ jsx("span", { className: "text-[var(--error)] ml-1", children: "*" })
+          ] }),
+          createField.type === "textarea" ? /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: newItemData[createField.name] || "",
+              onChange: (e) => setNewItemData((prev) => ({
+                ...prev,
+                [createField.name]: e.target.value,
+                ...createField.name === "name" || createField.name === "title" ? { slug: generateSlug(e.target.value) } : {}
+              })),
+              placeholder: createField.placeholder,
+              rows: 3
+            }
+          ) : createField.type === "boolean" ? /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: newItemData[createField.name] ?? createField.defaultValue ?? false,
+              onChange: (e) => setNewItemData((prev) => ({
+                ...prev,
+                [createField.name]: e.target.checked
+              })),
+              label: createField.description || `Enable ${createField.label.toLowerCase()}`
+            }
+          ) : createField.type === "number" ? /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              value: newItemData[createField.name] ?? "",
+              onChange: (e) => setNewItemData((prev) => ({
+                ...prev,
+                [createField.name]: e.target.value ? Number(e.target.value) : void 0
+              })),
+              placeholder: createField.placeholder
+            }
+          ) : createField.type === "select" && createField.options ? /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: String(newItemData[createField.name] ?? ""),
+              onChange: (next) => setNewItemData((prev) => ({
+                ...prev,
+                [createField.name]: next
+              })),
+              options: createField.options,
+              placeholder: "Select...",
+              searchable: createField.options.length > 15
+            }
+          ) : /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: newItemData[createField.name] || "",
+              onChange: (e) => setNewItemData((prev) => ({
+                ...prev,
+                [createField.name]: e.target.value,
+                ...createField.name === "name" || createField.name === "title" ? { slug: generateSlug(e.target.value) } : {}
+              })),
+              placeholder: createField.placeholder
+            }
+          )
+        ] }, createField.name)) }),
+        /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 bg-[var(--bg-base)] border-t border-[var(--border-default)] px-4 py-3 flex gap-2 justify-end", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setShowCreateDialog(false);
+                setNewItemData({});
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleSaveNewItem,
+              disabled: creating || !newItemData.name && !newItemData.title,
+              children: [
+                creating && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-[var(--bg-base)] border-t-transparent rounded-full animate-spin" }),
+                creating ? "Creating..." : "Create & Select"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ContentSelectField
+};
+//# sourceMappingURL=fields-content-select.js.map

package/dist/dynamic-form/fields-content-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/dynamic-form/fields-content-select.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useContext } from 'react';\nimport { type ContentFieldConfig } from '@withpotter/lib/template-types';\nimport { ChevronDown, Plus, X } from 'lucide-react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, Checkbox, Textarea } from '@withpotter/ui-kit';\nimport {\n  TenantContext,\n  type FieldRendererProps,\n  TemplateSchemaContext,\n} from './shared';\n\n/**\n * Pick a row of another content type — a therapist, a room, a plan.\n *\n * This one fetches, filters, positions its own menu (upward when it would\n * fall off the viewport) and can CREATE the thing you were looking for\n * without leaving the form.\n *\n * It is over the 500-line house limit and is on the ledger in\n * `design-system-adoption.test.ts` for it. The way down is written on that\n * entry: its create step is a hand-rolled `fixed inset-0` overlay with its\n * own scrim, which CLAUDE.md says must be a Dialog or at minimum call\n * `useModalBehaviour` — as written it does not trap Tab, lock the page or\n * return focus. Lifting that out is both the bug fix and about 140 lines.\n */\n\n// ContentSelectField fetches items from another content type (e.g., therapists)\n// Supports mapping the selected item's ID to a different field (resourceId) for bookable entities\n// When creatable=true, allows creating new items from the dropdown with a dialog form\nexport function ContentSelectField({\n  field,\n  value,\n  onChange,\n  error,\n  disabled,\n}: FieldRendererProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [openUpward, setOpenUpward] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showCreateDialog, setShowCreateDialog] = useState(false);\n  const [creating, setCreating] = useState(false);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [newItemData, setNewItemData] = useState<Record<string, any>>({});\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [items, setItems] = useState<Array<any>>([]);\n  const [loading, setLoading] = useState(false);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const tenantSlug = useContext(TenantContext);\n  const templateSchema = useContext(TemplateSchemaContext);\n\n  // Get content type from field config (e.g., 'therapists')\n  const contentType = (field as ContentFieldConfig & { contentType?: string })\n    .contentType;\n  // Field can store either the ID (valueField: 'id') or a field path (valueField: 'data.name')\n  const valueField =\n    (field as ContentFieldConfig & { valueField?: string }).valueField ||\n    'name';\n  // Display field for showing in dropdown (supports nested paths like 'data.name')\n  const displayField =\n    (field as ContentFieldConfig & { displayField?: string }).displayField ||\n    'name';\n  // Optional: map the ID to a different field (e.g., 'resourceId' for booking conflict detection)\n  const mapsTo = (field as ContentFieldConfig & { mapsTo?: string }).mapsTo;\n  // Optional: store the display value in an additional field (e.g., 'therapistName')\n  const storeDisplay = (field as ContentFieldConfig & { storeDisplay?: string })\n    .storeDisplay;\n  // Creatable: allows creating new items from dropdown\n  const creatable = (field as ContentFieldConfig & { creatable?: boolean })\n    .creatable;\n\n  // Helper to get nested field value (e.g., 'data.name' -> item.data.name)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const getNestedValue = (obj: any, path: string): string | undefined => {\n    return path.split('.').reduce((acc, part) => acc?.[part], obj);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const getItemDisplay = (item: any) =>\n    getNestedValue(item, displayField) || item.name || item.title || item.id;\n\n  const selectedItem = items.find((item) => {\n    if (valueField === 'id') return item.id === value;\n    return getNestedValue(item, valueField) === value;\n  });\n\n  // Filter items by search query\n  const filteredItems = items.filter((item) => {\n    if (!searchQuery.trim()) return true;\n    const display = getItemDisplay(item)?.toLowerCase() || '';\n    return display.includes(searchQuery.toLowerCase());\n  });\n\n  // Check if search query matches any existing item\n  const searchMatchesExisting = items.some(\n    (item) => getItemDisplay(item)?.toLowerCase() === searchQuery.toLowerCase(),\n  );\n\n  // Fetch content items\n  const fetchItems = async () => {\n    if (!tenantSlug || !contentType) return;\n    setLoading(true);\n    try {\n      const { contentApi } = await import('@withpotter/lib/api');\n      const response = await contentApi.list(tenantSlug, contentType);\n      setItems(response.data || []);\n    } catch (err) {\n      console.error('Failed to fetch content items:', err);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  // Fetch items on mount if there's an initial value (so we can display the name instead of UUID)\n  React.useEffect(() => {\n    if (value && items.length === 0 && !loading) {\n      fetchItems();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, tenantSlug, contentType]);\n\n  // Fetch content items when dropdown opens\n  const handleOpen = async () => {\n    if (disabled) return;\n\n    if (!isOpen && buttonRef.current) {\n      const rect = buttonRef.current.getBoundingClientRect();\n      const spaceBelow = window.innerHeight - rect.bottom;\n      setOpenUpward(spaceBelow < 300);\n    }\n\n    if (!isOpen && items.length === 0) {\n      await fetchItems();\n    }\n\n    setIsOpen(!isOpen);\n    // Focus search input after opening\n    setTimeout(() => searchInputRef.current?.focus(), 50);\n  };\n\n  // Handle selection - may emit multiple field updates via __mappedValues\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleSelect = (item: any | null) => {\n    if (!item) {\n      // Clear selection\n      if (mapsTo || storeDisplay) {\n        // Emit special object to clear mapped fields\n        onChange({\n          __mappedValues: {\n            [field.name]: undefined,\n            ...(mapsTo && { [mapsTo]: undefined }),\n            ...(storeDisplay && { [storeDisplay]: undefined }),\n          },\n        });\n      } else {\n        onChange(undefined);\n      }\n      setIsOpen(false);\n      setSearchQuery('');\n      return;\n    }\n\n    const itemValue =\n      valueField === 'id' ? item.id : getNestedValue(item, valueField);\n\n    if (mapsTo || storeDisplay) {\n      // Emit special object with all field mappings\n      const mappedValues: Record<string, unknown> = {\n        [field.name]: itemValue,\n      };\n      if (mapsTo) {\n        mappedValues[mapsTo] = item.id; // Always map the ID\n      }\n      if (storeDisplay) {\n        mappedValues[storeDisplay] = getItemDisplay(item);\n      }\n      onChange({ __mappedValues: mappedValues });\n    } else {\n      onChange(itemValue);\n    }\n    setIsOpen(false);\n    setSearchQuery('');\n  };\n\n  // Handle create new item\n  const handleCreateNew = () => {\n    setShowCreateDialog(true);\n    setIsOpen(false);\n    // Pre-fill the name/title with search query\n    const nameField =\n      displayField === 'name' || displayField === 'title'\n        ? displayField\n        : 'name';\n    setNewItemData({ [nameField]: searchQuery.trim() });\n  };\n\n  // Generate slug from name\n  const generateSlug = (name: string) => {\n    return name\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-')\n      .replace(/^-|-$/g, '');\n  };\n\n  // Handle saving new item\n  const handleSaveNewItem = async () => {\n    if (!tenantSlug || !contentType) return;\n    setCreating(true);\n    try {\n      const { contentApi } = await import('@withpotter/lib/api');\n\n      // Auto-generate slug if not provided\n      const dataWithSlug = { ...newItemData };\n      if (!dataWithSlug.slug && (dataWithSlug.name || dataWithSlug.title)) {\n        dataWithSlug.slug = generateSlug(\n          dataWithSlug.name || dataWithSlug.title,\n        );\n      }\n\n      const response = await contentApi.create(\n        tenantSlug,\n        contentType,\n        dataWithSlug as any,\n      );\n\n      // Add new item to list and select it\n      const newItem = response.data;\n      setItems((prev) => [...prev, newItem]);\n      handleSelect(newItem);\n\n      setShowCreateDialog(false);\n      setNewItemData({});\n      setSearchQuery('');\n    } catch (err) {\n      console.error('Failed to create item:', err);\n    } finally {\n      setCreating(false);\n    }\n  };\n\n  // Get fields for creating new item (basic fields only)\n  const getCreateFields = (): ContentFieldConfig[] => {\n    if (templateSchema?.getContentTypeFields) {\n      const allFields = templateSchema.getContentTypeFields(contentType || '');\n      // Only show essential fields for quick creation: name/title, slug, and first few simple fields\n      return allFields\n        .filter((f) => {\n          const simpleTypes = [\n            'text',\n            'textarea',\n            'number',\n            'boolean',\n            'select',\n          ];\n          return (\n            f.required ||\n            f.name === 'name' ||\n            f.name === 'title' ||\n            f.name === 'slug' ||\n            (simpleTypes.includes(f.type) &&\n              !f.name.includes('image') &&\n              !f.name.includes('gallery'))\n          );\n        })\n        .slice(0, 6); // Limit to 6 fields for dialog\n    }\n    // Fallback: basic name and slug fields\n    return [\n      { name: 'name', label: 'Name', type: 'text', required: true },\n      { name: 'slug', label: 'URL slug', type: 'text', required: true },\n    ];\n  };\n\n  return (\n    <>\n      <div className=\"relative\">\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          onClick={handleOpen}\n          disabled={disabled}\n          className={`w-full px-3 py-2 rounded-md border text-left flex items-center justify-between ${\n            error\n              ? 'border-[var(--error)]'\n              : isOpen\n                ? 'border-brand-500 ring-2 ring-brand-500'\n                : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n          } bg-[var(--bg-base)] text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed`}\n        >\n          <span\n            className={\n              selectedItem\n                ? 'text-[var(--text-primary)]'\n                : 'text-[var(--text-tertiary)]'\n            }\n          >\n            {selectedItem\n              ? getItemDisplay(selectedItem)\n              : value && (loading || items.length === 0)\n                ? 'Loading...'\n                : field.placeholder || `Select ${field.label}...`}\n          </span>\n          <ChevronDown\n            className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? 'rotate-180' : ''}`}\n          />\n        </button>\n\n        {isOpen && (\n          <>\n            <div\n              className=\"fixed inset-0 z-[60]\"\n              onClick={() => {\n                setIsOpen(false);\n                setSearchQuery('');\n              }}\n            />\n            <div\n              className={`absolute z-[70] w-full bg-[var(--bg-base)] border border-[var(--border-subtle)] rounded-md shadow-lg ${\n                openUpward ? 'bottom-full mb-1' : 'top-full mt-1'\n              }`}\n            >\n              {/* Search input */}\n              <div className=\"p-2 border-b border-[var(--border-subtle)]\">\n                <Input\n                  ref={searchInputRef}\n                  type=\"text\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  placeholder={\n                    creatable\n                      ? `Select or create ${field.label.toLowerCase()}...`\n                      : `Search ${field.label.toLowerCase()}...`\n                  }\n                  className=\"w-full\"\n                />\n              </div>\n\n              <div className=\"max-h-52 overflow-y-auto\">\n                {loading ? (\n                  <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                    Loading...\n                  </div>\n                ) : (\n                  <>\n                    {/* Create new option */}\n                    {creatable &&\n                      searchQuery.trim() &&\n                      !searchMatchesExisting && (\n                        <button\n                          type=\"button\"\n                          onClick={handleCreateNew}\n                          className=\"w-full px-3 py-2 text-left text-sm hover:bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium flex items-center gap-2 border-b border-[var(--border-subtle)]\"\n                        >\n                          <Plus className=\"size-4\" />\n                          Create &ldquo;{searchQuery.trim()}&rdquo;\n                        </button>\n                      )}\n\n                    {/* No selection option */}\n                    <button\n                      type=\"button\"\n                      onClick={() => handleSelect(null)}\n                      className=\"w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] text-[var(--text-tertiary)]\"\n                    >\n                      None\n                    </button>\n\n                    {/* Filtered items */}\n                    {filteredItems.map((item) => {\n                      const itemValue =\n                        valueField === 'id'\n                          ? item.id\n                          : getNestedValue(item, valueField);\n                      return (\n                        <button\n                          key={item.id}\n                          type=\"button\"\n                          onClick={() => handleSelect(item)}\n                          className={`w-full px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)] ${\n                            value === itemValue\n                              ? 'bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)] font-medium'\n                              : 'text-[var(--text-primary)]'\n                          }`}\n                        >\n                          {getItemDisplay(item)}\n                        </button>\n                      );\n                    })}\n\n                    {filteredItems.length === 0 &&\n                      !loading &&\n                      !searchQuery.trim() && (\n                        <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                          {creatable ? (\n                            <span>No items yet. Type to create one.</span>\n                          ) : (\n                            <span>No items available</span>\n                          )}\n                        </div>\n                      )}\n\n                    {filteredItems.length === 0 &&\n                      searchQuery.trim() &&\n                      !creatable && (\n                        <div className=\"px-3 py-2 text-sm text-[var(--text-tertiary)]\">\n                          No matches found\n                        </div>\n                      )}\n                  </>\n                )}\n              </div>\n            </div>\n          </>\n        )}\n      </div>\n\n      {/* Create new item dialog */}\n      {showCreateDialog && (\n        <div className=\"fixed inset-0 z-[100] flex items-end sm:items-center justify-center\">\n          <div\n            className=\"fixed inset-0 bg-black/50 modal-scrim\"\n            onClick={() => {\n              setShowCreateDialog(false);\n              setNewItemData({});\n            }}\n          />\n          <div className=\"relative bg-[var(--bg-base)] w-full sm:max-w-md sm:rounded-md shadow-xl max-h-[90vh] overflow-y-auto animate-in slide-in-from-bottom-4 sm:slide-in-from-bottom-0 sm:zoom-in-95\">\n            <div className=\"sticky top-0 bg-[var(--bg-base)] border-b border-[var(--border-default)] px-4 py-3 flex items-center justify-between\">\n              <h3 className=\"text-lg font-semibold text-[var(--text-primary)]\">\n                Create {field.label}\n              </h3>\n              <button\n                aria-label=\"Close\"\n                type=\"button\"\n                onClick={() => {\n                  setShowCreateDialog(false);\n                  setNewItemData({});\n                }}\n                className=\"p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] rounded\"\n              >\n                <X className=\"size-5\" />\n              </button>\n            </div>\n\n            <div className=\"p-4 space-y-4\">\n              {getCreateFields().map((createField) => (\n                <div key={createField.name}>\n                  <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\n                    {createField.label}\n                    {createField.required && (\n                      <span className=\"text-[var(--error)] ml-1\">*</span>\n                    )}\n                  </label>\n                  {createField.type === 'textarea' ? (\n                    <Textarea\n                      value={newItemData[createField.name] || ''}\n                      onChange={(e) =>\n                        setNewItemData((prev) => ({\n                          ...prev,\n                          [createField.name]: e.target.value,\n                          ...(createField.name === 'name' ||\n                          createField.name === 'title'\n                            ? { slug: generateSlug(e.target.value) }\n                            : {}),\n                        }))\n                      }\n                      placeholder={createField.placeholder}\n                      rows={3}\n                    />\n                  ) : createField.type === 'boolean' ? (\n                    <Checkbox\n                      checked={\n                        newItemData[createField.name] ??\n                        createField.defaultValue ??\n                        false\n                      }\n                      onChange={(e) =>\n                        setNewItemData((prev) => ({\n                          ...prev,\n                          [createField.name]: e.target.checked,\n                        }))\n                      }\n                      label={\n                        createField.description ||\n                        `Enable ${createField.label.toLowerCase()}`\n                      }\n                    />\n                  ) : createField.type === 'number' ? (\n                    <Input\n                      type=\"number\"\n                      value={newItemData[createField.name] ?? ''}\n                      onChange={(e) =>\n                        setNewItemData((prev) => ({\n                          ...prev,\n                          [createField.name]: e.target.value\n                            ? Number(e.target.value)\n                            : undefined,\n                        }))\n                      }\n                      placeholder={createField.placeholder}\n                    />\n                  ) : createField.type === 'select' && createField.options ? (\n                    <Select\n                      value={String(newItemData[createField.name] ?? '')}\n                      onChange={(next) =>\n                        setNewItemData((prev) => ({\n                          ...prev,\n                          [createField.name]: next,\n                        }))\n                      }\n                      options={createField.options}\n                      placeholder=\"Select...\"\n                      searchable={createField.options.length > 15}\n                    />\n                  ) : (\n                    <Input\n                      value={newItemData[createField.name] || ''}\n                      onChange={(e) =>\n                        setNewItemData((prev) => ({\n                          ...prev,\n                          [createField.name]: e.target.value,\n                          ...(createField.name === 'name' ||\n                          createField.name === 'title'\n                            ? { slug: generateSlug(e.target.value) }\n                            : {}),\n                        }))\n                      }\n                      placeholder={createField.placeholder}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n\n            <div className=\"sticky bottom-0 bg-[var(--bg-base)] border-t border-[var(--border-default)] px-4 py-3 flex gap-2 justify-end\">\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setShowCreateDialog(false);\n                  setNewItemData({});\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={handleSaveNewItem}\n                disabled={creating || (!newItemData.name && !newItemData.title)}\n              >\n                {creating && (\n                  <div className=\"w-4 h-4 border-2 border-[var(--bg-base)] border-t-transparent rounded-full animate-spin\" />\n                )}\n                {creating ? 'Creating...' : 'Create & Select'}\n              </Button>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dynamic-form/fields-media.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type FieldRendererProps } from './shared';
+/**
+ * One image, and many.
+ *
+ * The gallery carries the drag-to-reorder, the per-item upload state and the
+ * library picker, which is why it is three times the size of the single-image
+ * field beside it.
+ */
+export declare function ImageField({ field, value, onChange, disabled, }: FieldRendererProps): React.JSX.Element;
+export interface GalleryImage {
+    url: string;
+    type?: 'image' | 'video';
+    alt?: string;
+    thumbnail?: string;
+    duration?: number;
+    publicId?: string;
+    isCloudinary?: boolean;
+}
+export declare function GalleryField({ field, value, onChange, disabled, }: FieldRendererProps): React.JSX.Element;