@meshagent/meshagent-tailwind 0.39.8 → 0.40.0

package/dist/cjs/file-preview/file-preview.js

@@ -0,0 +1,329 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var file_preview_exports = {};
+__export(file_preview_exports, {
+  FileKind: () => FileKind,
+  FilePreview: () => FilePreview,
+  FilePreviewDialog: () => FilePreviewDialog,
+  ImagePreview: () => ImagePreview,
+  PdfPreview: () => PdfPreview,
+  VideoPreview: () => VideoPreview,
+  classifyFile: () => classifyFile,
+  filePreviewName: () => filePreviewName,
+  isImagePath: () => isImagePath
+});
+module.exports = __toCommonJS(file_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_react_pdf = require("react-pdf");
+var import_dialog = require("../components/ui/dialog");
+var import_button = require("../components/ui/button");
+var import_spinner = require("../components/ui/spinner");
+var import_utils = require("../lib/utils");
+import_react_pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${import_react_pdf.pdfjs.version}/build/pdf.worker.min.mjs`;
+var FileKind = /* @__PURE__ */ ((FileKind2) => {
+  FileKind2["Image"] = "image";
+  FileKind2["Video"] = "video";
+  FileKind2["Pdf"] = "pdf";
+  FileKind2["Unknown"] = "unknown";
+  return FileKind2;
+})(FileKind || {});
+const imageExtensions = /* @__PURE__ */ new Set([
+  "avif",
+  "bmp",
+  "gif",
+  "heic",
+  "heif",
+  "jfif",
+  "jpeg",
+  "jpg",
+  "png",
+  "svg",
+  "svgz",
+  "tif",
+  "tiff",
+  "webp"
+]);
+const videoExtensions = /* @__PURE__ */ new Set(["m4v", "mkv", "mov", "mp4", "webm"]);
+const pdfExtensions = /* @__PURE__ */ new Set(["pdf"]);
+function basename(path) {
+  const withoutQuery = path.split("?")[0] ?? path;
+  const withoutHash = withoutQuery.split("#")[0] ?? withoutQuery;
+  return withoutHash.split("/").pop() ?? withoutHash;
+}
+function extension(path) {
+  const name = basename(path).trim();
+  const dotIndex = name.lastIndexOf(".");
+  if (dotIndex < 0 || dotIndex === name.length - 1) {
+    return "";
+  }
+  return name.slice(dotIndex + 1).toLowerCase();
+}
+function isHttpUrl(path) {
+  return /^https?:\/\//iu.test(path.trim());
+}
+function filePreviewName(path) {
+  const name = basename(path).trim();
+  return name === "" ? "Attachment" : name;
+}
+function classifyFile(path) {
+  const ext = extension(path);
+  if (imageExtensions.has(ext)) {
+    return "image" /* Image */;
+  }
+  if (videoExtensions.has(ext)) {
+    return "video" /* Video */;
+  }
+  if (pdfExtensions.has(ext)) {
+    return "pdf" /* Pdf */;
+  }
+  return "unknown" /* Unknown */;
+}
+function isImagePath(path) {
+  return classifyFile(path) === "image" /* Image */;
+}
+function useDownloadUrl(room, path) {
+  const [url, setUrl] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    const normalizedPath = path.trim();
+    setUrl(null);
+    setError(null);
+    if (normalizedPath === "") {
+      return;
+    }
+    if (isHttpUrl(normalizedPath)) {
+      setUrl(normalizedPath);
+      return;
+    }
+    void room.storage.downloadUrl(normalizedPath).then((nextUrl) => {
+      if (!cancelled) {
+        setUrl(nextUrl);
+      }
+    }).catch((nextError) => {
+      if (!cancelled) {
+        setError(nextError);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, room]);
+  return { url, error };
+}
+function usePdfUrl(room, path) {
+  const [url, setUrl] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    let objectUrl = null;
+    const normalizedPath = path.trim();
+    setUrl(null);
+    setError(null);
+    if (normalizedPath === "") {
+      return;
+    }
+    if (isHttpUrl(normalizedPath)) {
+      setUrl(normalizedPath);
+      return;
+    }
+    void room.storage.download(normalizedPath).then((content) => {
+      if (cancelled) {
+        return;
+      }
+      objectUrl = URL.createObjectURL(new Blob([content.data], { type: "application/pdf" }));
+      setUrl(objectUrl);
+    }).catch((nextError) => {
+      if (!cancelled) {
+        setError(nextError);
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (objectUrl != null) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [path, room]);
+  return { url, error };
+}
+function ErrorPreview({ message }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-full min-h-48 items-center justify-center p-6 text-center text-sm text-destructive", children: message });
+}
+function LoadingPreview() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-full min-h-48 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spinner.Spinner, { className: "h-6 w-6" }) });
+}
+function DownloadButton({ room, path }) {
+  const { url } = useDownloadUrl(room, path);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_button.Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      disabled: url == null,
+      onClick: () => {
+        if (url != null) {
+          window.open(url, "_blank", "noopener,noreferrer");
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Download, { className: "h-4 w-4" }),
+        "Download"
+      ]
+    }
+  );
+}
+function ImagePreview({
+  room,
+  path,
+  alt = filePreviewName(path)
+}) {
+  const { url, error } = useDownloadUrl(room, path);
+  if (error != null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorPreview, { message: `Unable to load image preview: ${String(error)}` });
+  }
+  if (url == null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPreview, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: url, alt, className: "h-full max-h-full w-full object-contain" });
+}
+function VideoPreview({ room, path }) {
+  const { url, error } = useDownloadUrl(room, path);
+  if (error != null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorPreview, { message: `Unable to load video preview: ${String(error)}` });
+  }
+  if (url == null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPreview, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "video",
+    {
+      src: url,
+      controls: true,
+      playsInline: true,
+      className: "h-full max-h-full w-full bg-black object-contain"
+    }
+  );
+}
+function useElementWidth() {
+  const ref = (0, import_react.useRef)(null);
+  const [width, setWidth] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const element = ref.current;
+    if (element == null) {
+      return;
+    }
+    const updateWidth = () => {
+      setWidth(element.clientWidth);
+    };
+    updateWidth();
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return [ref, width];
+}
+function PdfPreview({ room, path }) {
+  const { url, error } = usePdfUrl(room, path);
+  const [numPages, setNumPages] = (0, import_react.useState)(0);
+  const [containerRef, containerWidth] = useElementWidth();
+  const pageWidth = Math.max(Math.min(containerWidth, 960), 320);
+  if (error != null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorPreview, { message: `Unable to load PDF: ${String(error)}` });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className: "h-full overflow-auto bg-muted/30 p-4", children: url == null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPreview, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_pdf.Document,
+    {
+      file: url,
+      loading: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPreview, {}),
+      error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorPreview, { message: "Unable to render PDF preview." }),
+      onLoadSuccess: ({ numPages: nextNumPages }) => {
+        setNumPages(nextNumPages);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col items-center gap-4", children: Array.from({ length: numPages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_pdf.Page,
+        {
+          pageNumber: index + 1,
+          width: pageWidth,
+          renderAnnotationLayer: false,
+          renderTextLayer: false,
+          loading: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-40" }),
+          className: "overflow-hidden rounded-md bg-background shadow-sm"
+        },
+        `page_${index + 1}`
+      )) })
+    }
+  ) });
+}
+function UnsupportedPreview({ room, path }) {
+  const filename = filePreviewName(path);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full min-h-64 flex-col items-center justify-center gap-4 p-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-md border bg-muted/50", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.FileText, { className: "h-7 w-7 text-muted-foreground" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-md space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-medium text-foreground", children: filename }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted-foreground", children: "No preview available for this file type." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DownloadButton, { room, path })
+  ] });
+}
+function FilePreview({ room, path }) {
+  const kind = (0, import_react.useMemo)(() => classifyFile(path), [path]);
+  switch (kind) {
+    case "image" /* Image */:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImagePreview, { room, path });
+    case "video" /* Video */:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VideoPreview, { room, path });
+    case "pdf" /* Pdf */:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PdfPreview, { room, path });
+    case "unknown" /* Unknown */:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnsupportedPreview, { room, path });
+  }
+}
+function FilePreviewDialog({
+  room,
+  path,
+  children,
+  className
+}) {
+  const filename = filePreviewName(path);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dialog.DialogContent,
+      {
+        className: (0, import_utils.cn)(
+          "h-[min(90vh,900px)] max-w-[min(96vw,1100px)] grid-rows-[auto_minmax(0,1fr)] gap-0 p-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.DialogHeader, { className: "border-b px-4 py-3 pr-12", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogTitle, { className: "truncate text-base", children: filename }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.DialogDescription, { className: "sr-only", children: "File preview" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilePreview, { room, path }) })
+        ]
+      }
+    )
+  ] });
+}

package/dist/cjs/forms/email-address.d.ts

@@ -0,0 +1,10 @@
+export declare class Address {
+    readonly mailAddress: string;
+    readonly name: string | null;
+    private static readonly quotableNameRegExp;
+    constructor(mailAddress: string, name?: string | null);
+    get sanitizedName(): string | null;
+    get sanitizedAddress(): string;
+    toString(): string;
+}
+export declare function parseEmailList(addresses: string): Address[];

package/dist/cjs/forms/email-address.js

@@ -0,0 +1,105 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var email_address_exports = {};
+__export(email_address_exports, {
+  Address: () => Address,
+  parseEmailList: () => parseEmailList
+});
+module.exports = __toCommonJS(email_address_exports);
+class Address {
+  mailAddress;
+  name;
+  static quotableNameRegExp = /[",]/u;
+  constructor(mailAddress, name = null) {
+    this.mailAddress = mailAddress;
+    this.name = name;
+  }
+  get sanitizedName() {
+    if (this.name == null) {
+      return null;
+    }
+    if (Address.quotableNameRegExp.test(this.name)) {
+      return `"${this.name.replace(/"/gu, '\\"')}"`;
+    }
+    return this.name;
+  }
+  get sanitizedAddress() {
+    return this.mailAddress;
+  }
+  toString() {
+    return this.name == null ? this.mailAddress : `${this.name} <${this.mailAddress}>`;
+  }
+}
+function parseEmailList(addresses) {
+  const result = [];
+  const nameOrEmail = [];
+  const email = [];
+  const name = [];
+  let inQuote = false;
+  let inAngleBrackets = false;
+  const addAddress = () => {
+    if (nameOrEmail.length > 0) {
+      if (email.length === 0) {
+        email.push(...nameOrEmail);
+      } else if (name.length === 0) {
+        name.push(...nameOrEmail);
+      }
+    }
+    if (email.length > 0) {
+      const parsedName = name.join("").trim();
+      result.push(new Address(email.join("").trim(), parsedName === "" ? null : parsedName));
+    }
+    email.length = 0;
+    name.length = 0;
+    nameOrEmail.length = 0;
+    inAngleBrackets = false;
+    inQuote = false;
+  };
+  for (let index = 0; index < addresses.length; index += 1) {
+    const char = addresses[index];
+    if (inQuote) {
+      if (char === '"') {
+        inQuote = false;
+      } else if (char === "\\") {
+        index += 1;
+        if (index < addresses.length) {
+          name.push(addresses[index] ?? "");
+        }
+      } else if (char != null) {
+        name.push(char);
+      }
+    } else if (inAngleBrackets) {
+      if (char === ">") {
+        inAngleBrackets = false;
+      } else if (char != null) {
+        email.push(char);
+      }
+    } else if (char === "," || char === ";") {
+      addAddress();
+    } else if (char === '"') {
+      inQuote = true;
+    } else if (char === "<") {
+      inAngleBrackets = true;
+    } else if (char != null) {
+      nameOrEmail.push(char);
+    }
+  }
+  addAddress();
+  return result;
+}

package/dist/cjs/forms/form.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement } from "react";
+import { Element as MeshElement, MeshDocument, RoomClient } from "@meshagent/meshagent";
+export type FormDocumentValue = string;
+export type FormDocumentValues = Record<string, FormDocumentValue>;
+type FormDocumentForm = any;
+export declare function FormDocumentViewer({ document, client: _client, onSubmit, submitLabel, }: {
+    client?: RoomClient;
+    document: MeshDocument;
+    onSubmit?: (values: FormDocumentValues) => void;
+    submitLabel?: string;
+}): ReactElement | null;
+export declare function FormDocumentField({ element, name, form, }: {
+    element: MeshElement;
+    name: string;
+    form: FormDocumentForm;
+}): ReactElement;
+export declare function FormDocumentSelect({ element, name, form, }: {
+    element: MeshElement;
+    name: string;
+    form: FormDocumentForm;
+}): ReactElement;
+export declare function FormDocumentInput({ element, name, form, }: {
+    element: MeshElement;
+    name: string;
+    form: FormDocumentForm;
+}): ReactElement;
+export {};

package/dist/cjs/forms/form.js

@@ -0,0 +1,200 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_exports = {};
+__export(form_exports, {
+  FormDocumentField: () => FormDocumentField,
+  FormDocumentInput: () => FormDocumentInput,
+  FormDocumentSelect: () => FormDocumentSelect,
+  FormDocumentViewer: () => FormDocumentViewer
+});
+module.exports = __toCommonJS(form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_meshagent = require("@meshagent/meshagent");
+var import_react_form = require("@tanstack/react-form");
+var import_button = require("../components/ui/button");
+var import_card = require("../components/ui/card");
+var import_input = require("../components/ui/input");
+var import_label = require("../components/ui/label");
+var import_select = require("../components/ui/select");
+var import_textarea = require("../components/ui/textarea");
+function stringAttribute(element, name) {
+  const value = element.getAttribute(name);
+  return typeof value === "string" ? value : null;
+}
+function fieldName(element, index) {
+  return stringAttribute(element, "name") ?? stringAttribute(element, "$id") ?? stringAttribute(element, "id") ?? `${element.tagName}_${index}`;
+}
+function fieldDefaultValue(element) {
+  return stringAttribute(element, "value") ?? stringAttribute(element, "default_value") ?? stringAttribute(element, "defaultValue") ?? "";
+}
+function elementChildren(element) {
+  return element.getChildren().filter((child) => child instanceof import_meshagent.Element);
+}
+function formFields(document) {
+  return elementChildren(document.root);
+}
+function formDefaultValues(document) {
+  const values = {};
+  formFields(document).forEach((field, index) => {
+    values[fieldName(field, index)] = fieldDefaultValue(field);
+  });
+  return values;
+}
+function useDocumentVersion(document) {
+  const [version, setVersion] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const onUpdated = () => setVersion((current) => current + 1);
+    document.on("updated", onUpdated);
+    return () => {
+      document.off("updated", onUpdated);
+    };
+  }, [document]);
+  return version;
+}
+function FieldText({
+  element,
+  fallbackName
+}) {
+  return {
+    name: fallbackName,
+    label: stringAttribute(element, "label"),
+    description: stringAttribute(element, "description")
+  };
+}
+function FormDocumentViewer({
+  document,
+  client: _client,
+  onSubmit,
+  submitLabel = "Submit"
+}) {
+  const version = useDocumentVersion(document);
+  const fields = (0, import_react.useMemo)(() => formFields(document), [document, version]);
+  const defaultValues = (0, import_react.useMemo)(() => formDefaultValues(document), [document, version]);
+  const title = stringAttribute(document.root, "title");
+  const description = stringAttribute(document.root, "description");
+  const form = (0, import_react_form.useForm)({
+    defaultValues,
+    onSubmit: ({ value }) => {
+      onSubmit?.(value);
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    form.reset(defaultValues);
+  }, [defaultValues, form]);
+  if (fields.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.Card, { children: [
+    title != null || description != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardHeader, { children: [
+      title != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardTitle, { children: title }) : null,
+      description != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardDescription, { children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        onSubmit: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          void form.handleSubmit();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "grid gap-6", children: fields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            FormDocumentField,
+            {
+              element: field,
+              name: fieldName(field, index),
+              form
+            },
+            field.id ?? `${field.tagName}:${index}`
+          )) }),
+          onSubmit != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardFooter, { className: "justify-end pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "submit", children: submitLabel }) }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+function FormDocumentField({
+  element,
+  name,
+  form
+}) {
+  if (element.tagName === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormDocumentSelect, { element, name, form });
+  }
+  if (element.tagName === "input") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormDocumentInput, { element, name, form });
+  }
+  throw new Error("Unexpected form field type");
+}
+function FormDocumentSelect({
+  element,
+  name,
+  form
+}) {
+  const text = FieldText({ element, fallbackName: name });
+  const options = elementChildren(element).map((option) => ({
+    value: stringAttribute(option, "value") ?? "",
+    text: stringAttribute(option, "text") ?? stringAttribute(option, "value") ?? ""
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(form.Field, { name, children: (field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+    text.label != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: field.name, children: text.label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_select.Select,
+      {
+        value: field.state.value,
+        onValueChange: (value) => field.handleChange(value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { id: field.name, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: "pick a value" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectContent, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { value: option.value, children: option.text }, option.value)) })
+        ]
+      }
+    ),
+    text.description != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: text.description }) : null
+  ] }) });
+}
+function FormDocumentInput({
+  element,
+  name,
+  form
+}) {
+  const text = FieldText({ element, fallbackName: name });
+  const multiline = element.getAttribute("multiline") === true || stringAttribute(element, "multiline") === "true";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(form.Field, { name, children: (field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+    text.label != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { htmlFor: field.name, children: text.label }) : null,
+    multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_textarea.Textarea,
+      {
+        id: field.name,
+        value: field.state.value,
+        onBlur: field.handleBlur,
+        onChange: (event) => field.handleChange(event.currentTarget.value)
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_input.Input,
+      {
+        id: field.name,
+        value: field.state.value,
+        onBlur: field.handleBlur,
+        onChange: (event) => field.handleChange(event.currentTarget.value)
+      }
+    ),
+    text.description != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: text.description }) : null
+  ] }) });
+}