@meshagent/meshagent-tailwind 0.39.8 → 0.40.0

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

@@ -0,0 +1,316 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Download, FileText } from "lucide-react";
+import { Document, Page, pdfjs } from "react-pdf";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../components/ui/dialog";
+import { Button } from "../components/ui/button";
+import { Spinner } from "../components/ui/spinner";
+import { cn } from "../lib/utils";
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${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] = useState(null);
+  const [error, setError] = useState(null);
+  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] = useState(null);
+  const [error, setError] = useState(null);
+  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__ */ 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__ */ jsx("div", { className: "flex h-full min-h-48 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }) });
+}
+function DownloadButton({ room, path }) {
+  const { url } = useDownloadUrl(room, path);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      disabled: url == null,
+      onClick: () => {
+        if (url != null) {
+          window.open(url, "_blank", "noopener,noreferrer");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(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__ */ jsx(ErrorPreview, { message: `Unable to load image preview: ${String(error)}` });
+  }
+  if (url == null) {
+    return /* @__PURE__ */ jsx(LoadingPreview, {});
+  }
+  return /* @__PURE__ */ 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__ */ jsx(ErrorPreview, { message: `Unable to load video preview: ${String(error)}` });
+  }
+  if (url == null) {
+    return /* @__PURE__ */ jsx(LoadingPreview, {});
+  }
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      src: url,
+      controls: true,
+      playsInline: true,
+      className: "h-full max-h-full w-full bg-black object-contain"
+    }
+  );
+}
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  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] = useState(0);
+  const [containerRef, containerWidth] = useElementWidth();
+  const pageWidth = Math.max(Math.min(containerWidth, 960), 320);
+  if (error != null) {
+    return /* @__PURE__ */ jsx(ErrorPreview, { message: `Unable to load PDF: ${String(error)}` });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full overflow-auto bg-muted/30 p-4", children: url == null ? /* @__PURE__ */ jsx(LoadingPreview, {}) : /* @__PURE__ */ jsx(
+    Document,
+    {
+      file: url,
+      loading: /* @__PURE__ */ jsx(LoadingPreview, {}),
+      error: /* @__PURE__ */ jsx(ErrorPreview, { message: "Unable to render PDF preview." }),
+      onLoadSuccess: ({ numPages: nextNumPages }) => {
+        setNumPages(nextNumPages);
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4", children: Array.from({ length: numPages }, (_, index) => /* @__PURE__ */ jsx(
+        Page,
+        {
+          pageNumber: index + 1,
+          width: pageWidth,
+          renderAnnotationLayer: false,
+          renderTextLayer: false,
+          loading: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full min-h-64 flex-col items-center justify-center gap-4 p-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-md border bg-muted/50", children: /* @__PURE__ */ jsx(FileText, { className: "h-7 w-7 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-md space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: filename }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No preview available for this file type." })
+    ] }),
+    /* @__PURE__ */ jsx(DownloadButton, { room, path })
+  ] });
+}
+function FilePreview({ room, path }) {
+  const kind = useMemo(() => classifyFile(path), [path]);
+  switch (kind) {
+    case "image" /* Image */:
+      return /* @__PURE__ */ jsx(ImagePreview, { room, path });
+    case "video" /* Video */:
+      return /* @__PURE__ */ jsx(VideoPreview, { room, path });
+    case "pdf" /* Pdf */:
+      return /* @__PURE__ */ jsx(PdfPreview, { room, path });
+    case "unknown" /* Unknown */:
+      return /* @__PURE__ */ jsx(UnsupportedPreview, { room, path });
+  }
+}
+function FilePreviewDialog({
+  room,
+  path,
+  children,
+  className
+}) {
+  const filename = filePreviewName(path);
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: cn(
+          "h-[min(90vh,900px)] max-w-[min(96vw,1100px)] grid-rows-[auto_minmax(0,1fr)] gap-0 p-0",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { className: "border-b px-4 py-3 pr-12", children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "truncate text-base", children: filename }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "File preview" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(FilePreview, { room, path }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  FileKind,
+  FilePreview,
+  FilePreviewDialog,
+  ImagePreview,
+  PdfPreview,
+  VideoPreview,
+  classifyFile,
+  filePreviewName,
+  isImagePath
+};

package/dist/esm/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/esm/forms/email-address.js

@@ -0,0 +1,85 @@
+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;
+}
+export {
+  Address,
+  parseEmailList
+};

package/dist/esm/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/esm/forms/form.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Element as MeshElement } from "@meshagent/meshagent";
+import { useForm } from "@tanstack/react-form";
+import { Button } from "../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../components/ui/card";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../components/ui/select";
+import { Textarea } from "../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 MeshElement);
+}
+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] = useState(0);
+  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 = useMemo(() => formFields(document), [document, version]);
+  const defaultValues = useMemo(() => formDefaultValues(document), [document, version]);
+  const title = stringAttribute(document.root, "title");
+  const description = stringAttribute(document.root, "description");
+  const form = useForm({
+    defaultValues,
+    onSubmit: ({ value }) => {
+      onSubmit?.(value);
+    }
+  });
+  useEffect(() => {
+    form.reset(defaultValues);
+  }, [defaultValues, form]);
+  if (fields.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxs(Card, { children: [
+    title != null || description != null ? /* @__PURE__ */ jsxs(CardHeader, { children: [
+      title != null ? /* @__PURE__ */ jsx(CardTitle, { children: title }) : null,
+      description != null ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          void form.handleSubmit();
+        },
+        children: [
+          /* @__PURE__ */ jsx(CardContent, { className: "grid gap-6", children: fields.map((field, index) => /* @__PURE__ */ jsx(
+            FormDocumentField,
+            {
+              element: field,
+              name: fieldName(field, index),
+              form
+            },
+            field.id ?? `${field.tagName}:${index}`
+          )) }),
+          onSubmit != null ? /* @__PURE__ */ jsx(CardFooter, { className: "justify-end pt-6", children: /* @__PURE__ */ jsx(Button, { type: "submit", children: submitLabel }) }) : null
+        ]
+      }
+    )
+  ] }) });
+}
+function FormDocumentField({
+  element,
+  name,
+  form
+}) {
+  if (element.tagName === "select") {
+    return /* @__PURE__ */ jsx(FormDocumentSelect, { element, name, form });
+  }
+  if (element.tagName === "input") {
+    return /* @__PURE__ */ 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__ */ jsx(form.Field, { name, children: (field) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    text.label != null ? /* @__PURE__ */ jsx(Label, { htmlFor: field.name, children: text.label }) : null,
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: field.state.value,
+        onValueChange: (value) => field.handleChange(value),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id: field.name, className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "pick a value" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.text }, option.value)) })
+        ]
+      }
+    ),
+    text.description != null ? /* @__PURE__ */ 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__ */ jsx(form.Field, { name, children: (field) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    text.label != null ? /* @__PURE__ */ jsx(Label, { htmlFor: field.name, children: text.label }) : null,
+    multiline ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id: field.name,
+        value: field.state.value,
+        onBlur: field.handleBlur,
+        onChange: (event) => field.handleChange(event.currentTarget.value)
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: field.name,
+        value: field.state.value,
+        onBlur: field.handleBlur,
+        onChange: (event) => field.handleChange(event.currentTarget.value)
+      }
+    ),
+    text.description != null ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: text.description }) : null
+  ] }) });
+}
+export {
+  FormDocumentField,
+  FormDocumentInput,
+  FormDocumentSelect,
+  FormDocumentViewer
+};

package/dist/esm/forms/multi-select-autocomplete.d.ts

@@ -0,0 +1,35 @@
+import type { ReactElement } from "react";
+export type AsyncSearch = (query: string) => Promise<string[]> | string[];
+export declare class MultiSelectController {
+    private listeners;
+    private _value;
+    constructor(initialValue?: string[]);
+    get value(): string[];
+    set value(nextValue: string[]);
+    add(item: string): Promise<boolean>;
+    canAddItem(_item: string): boolean | Promise<boolean>;
+    remove(item: string): void;
+    removeLast(): void;
+    clear(): void;
+    subscribe(listener: (value: string[]) => void): () => void;
+    dispose(): void;
+    private notify;
+}
+export declare function MultiSelectAutocomplete({ search, onChanged, controller, placeholder, debounceDuration, minimumSearchLength, initialValue, value, autoFocus, className, inputClassName, onTextChanged, }: {
+    search: AsyncSearch;
+    onChanged?: (value: string[]) => void;
+    controller?: MultiSelectController;
+    placeholder?: string;
+    debounceDuration?: number;
+    minimumSearchLength?: number;
+    initialValue?: string[];
+    value?: string[];
+    autoFocus?: boolean;
+    className?: string;
+    inputClassName?: string;
+    onTextChanged?: (text: string, context: {
+        add: (item: string) => Promise<void>;
+        setText: (text: string) => void;
+        controller: MultiSelectController;
+    }) => void;
+}): ReactElement;