@optiaxiom/proteus 0.0.0 → 0.1.0

package/dist/esm/proteus-document/ProteusDocumentShell.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading } from '@optiaxiom/react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { set } from 'jsonpointer';
+import { useState, useRef, useEffect } from 'react';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import { downloadFile } from '../proteus-image/downloadFile.js';
+import { ProteusDocumentProvider } from './ProteusDocumentContext.js';
+
+function ProteusDocumentShell({
+  collapsible: collapsibleProp,
+  data = {},
+  defaultOpen = true,
+  element,
+  onDataChange,
+  onMessage,
+  onOpenChange,
+  onToolCall,
+  open: openProp,
+  readOnly = false,
+  strict
+}) {
+  const [valid, setValid] = useState(false);
+  const formRef = useRef(null);
+  useEffect(() => {
+    if (formRef.current) {
+      setValid(formRef.current.checkValidity());
+    }
+  }, []);
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const collapsible = collapsibleProp && element.appName;
+  const Trigger = collapsible ? DisclosureTrigger : Box;
+  return /* @__PURE__ */ jsx(
+    ProteusDocumentProvider,
+    {
+      data,
+      onDataChange: useEffectEvent((path, value) => {
+        const next = structuredClone(data);
+        set(next, path, value);
+        onDataChange?.(next);
+      }),
+      onEvent: useEffectEvent(async (event) => {
+        if ("tool" in event) {
+          await onToolCall?.(event.tool);
+        } else if ("message" in event) {
+          await onMessage?.(event.message);
+        } else if (event.action === "download") {
+          if (typeof event.url === "string") {
+            await downloadFile(event.url);
+          } else {
+            throw new Error("Invalid URL for download action");
+          }
+        }
+      }),
+      readOnly,
+      strict,
+      valid,
+      children: /* @__PURE__ */ jsxs(
+        Disclosure,
+        {
+          bg: "bg.default",
+          border: "1",
+          borderColor: "border.tertiary",
+          onOpenChange: setOpen,
+          open,
+          p: "16",
+          rounded: "xl",
+          children: [
+            element.appName && /* @__PURE__ */ jsx(Trigger, { py: "0", ...collapsible ? { chevronPosition: "end" } : {}, children: /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "8", children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  asChild: true,
+                  bg: element.appIcon ? void 0 : "bg.accent.subtle",
+                  flex: "none",
+                  rounded: "xs",
+                  size: "20",
+                  children: element.appIcon ? /* @__PURE__ */ jsx("img", { alt: "", src: element.appIcon }) : /* @__PURE__ */ jsx("div", {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { fontWeight: "500", children: element.appName }),
+              !open && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", lineClamp: "1", children: element.title })
+            ] }) }),
+            /* @__PURE__ */ jsxs(
+              DisclosureContent,
+              {
+                alignItems: "stretch",
+                display: "flex",
+                flexDirection: "column",
+                gap: "16",
+                pb: "0",
+                pt: element.appName ? "16" : "0",
+                children: [
+                  /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "4", children: [
+                    /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: element.title }),
+                    !!element.subtitle && /* @__PURE__ */ jsx(Text, { color: "fg.secondary", fontSize: "sm", children: element.subtitle })
+                  ] }),
+                  /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsx(
+                    "form",
+                    {
+                      onChange: (event) => {
+                        const form = event.currentTarget;
+                        setTimeout(() => {
+                          setValid(form.checkValidity());
+                        });
+                      },
+                      ref: formRef,
+                      children: element.body
+                    }
+                  ) }),
+                  element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+ProteusDocumentShell.displayName = "@optiaxiom/proteus/ProteusDocumentShell";
+
+export { ProteusDocumentShell };

package/dist/esm/proteus-document/getProteusValue.js

@@ -0,0 +1,49 @@
+import { get } from 'jsonpointer';
+
+function getProteusValue(data, element, parentPath) {
+  try {
+    const value = get(
+      data,
+      element.path.startsWith("/") ? element.path : element.path ? `${parentPath}/${element.path}` : parentPath
+    );
+    if (element.formatter) {
+      return applyFormatter(value, element.formatter);
+    }
+    return value;
+  } catch {
+    return null;
+  }
+}
+const formatters = {
+  DateTime: (value, options) => {
+    if (typeof value === "number" || typeof value === "string") {
+      return new Intl.DateTimeFormat(void 0, {
+        day: "numeric",
+        month: "short",
+        ...options
+      }).format(new Date(value));
+    }
+    return value;
+  },
+  Number: (value, options) => {
+    const num = typeof value === "number" ? value : typeof value === "string" && value !== "" ? Number(value) : NaN;
+    if (!Number.isNaN(num)) {
+      return new Intl.NumberFormat(void 0, options).format(num);
+    }
+    return value;
+  }
+};
+function applyFormatter(value, formatter) {
+  const key = typeof formatter === "string" ? formatter : formatter.type;
+  const fn = formatters[key];
+  if (!fn) {
+    return value;
+  }
+  const options = typeof formatter === "string" ? void 0 : formatter.options;
+  if (Array.isArray(value)) {
+    return value.map((v) => fn(v, options));
+  }
+  return fn(value, options);
+}
+
+export { applyFormatter, getProteusValue };

package/dist/esm/proteus-document/resolveProteusProp.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ProteusElement } from '../proteus-element/ProteusElement.js';
+import { getProteusValue } from './getProteusValue.js';
+
+function resolveProteusProp(value, data, parentPath) {
+  if (typeof value !== "object" || value === null) {
+    return value;
+  }
+  if ("$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
+    return getProteusValue(
+      data,
+      value,
+      parentPath
+    );
+  }
+  if ("$type" in value && value.$type === "Zip" && "sources" in value) {
+    const sources = value.sources;
+    const resolved = {};
+    let length = 0;
+    for (const [k, v] of Object.entries(sources)) {
+      const arr = resolveProteusProp(v, data, parentPath);
+      if (Array.isArray(arr)) {
+        resolved[k] = arr;
+        length = Math.max(length, arr.length);
+      }
+    }
+    return Array.from({ length }, (_, i) => {
+      const row = {};
+      for (const [k, arr] of Object.entries(resolved)) {
+        row[k] = arr[i];
+      }
+      return row;
+    });
+  }
+  return "$type" in value || Array.isArray(value) && value.some((v) => v && typeof v === "object" && "$type" in v) ? /* @__PURE__ */ jsx(ProteusElement, { element: value }) : value;
+}
+
+export { resolveProteusProp };

package/dist/esm/proteus-document/resolveProteusValue.js

@@ -0,0 +1,18 @@
+"use client";
+import { getProteusValue } from './getProteusValue.js';
+
+function resolveProteusValue(value, data, parentPath) {
+  if (typeof value !== "object" || value === null) {
+    return value;
+  }
+  if ("$type" in value && value.$type === "Value" && "path" in value && typeof value.path === "string") {
+    return getProteusValue(
+      data,
+      value,
+      parentPath
+    );
+  }
+  return value;
+}
+
+export { resolveProteusValue };

package/dist/esm/proteus-document/schemas.js

@@ -0,0 +1,48 @@
+import { Validator } from '@cfworker/json-schema';
+import proteusDocumentSpec from '../schema/runtime-schema.json.js';
+
+const documentValidator = new Validator(
+  {
+    $ref: "#/definitions/ProteusDocument",
+    definitions: proteusDocumentSpec.definitions
+  },
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  "7"
+);
+const elementValidator = new Validator(
+  {
+    $ref: "#/definitions/ProteusNode",
+    definitions: proteusDocumentSpec.definitions
+  },
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  "7"
+);
+function safeParseDocument({
+  actions,
+  body,
+  ...data
+}) {
+  const result = documentValidator.validate({ body: [], ...data });
+  if (result.valid) {
+    return {
+      data: { actions, body, ...data },
+      success: true
+    };
+  }
+  return { error: result.errors.map(({ error }) => error), success: false };
+}
+function safeParseElement({
+  children,
+  ...data
+}) {
+  const result = elementValidator.validate(data);
+  if (result.valid) {
+    return {
+      data: { children, ...data },
+      success: true
+    };
+  }
+  return { error: result.errors.map(({ error }) => error), success: false };
+}
+
+export { safeParseDocument, safeParseElement };

package/dist/esm/proteus-document/useProteusValue.js

@@ -0,0 +1,15 @@
+import { getProteusValue } from './getProteusValue.js';
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+
+function useProteusValue(element) {
+  const { data } = useProteusDocumentContext(
+    "@optiaxiom/proteus/useProteusValue"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/useProteusValue"
+  );
+  return getProteusValue(data, element, parentPath);
+}
+
+export { useProteusValue };

package/dist/esm/proteus-document/useResolvedProteusProps.js

@@ -0,0 +1,19 @@
+import { useProteusDocumentContext } from './ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from './ProteusDocumentPathContext.js';
+import { resolveProteusValue } from './resolveProteusValue.js';
+
+function useResolvedProteusProps(props) {
+  const { data } = useProteusDocumentContext(
+    "@optiaxiom/react/useResolvedProteusProps"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/react/useResolvedProteusProps"
+  );
+  const resolved = {};
+  for (const [key, value] of Object.entries(props)) {
+    resolved[key] = resolveProteusValue(value, data, parentPath);
+  }
+  return resolved;
+}
+
+export { useResolvedProteusProps };

package/dist/esm/proteus-element/ProteusElement.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Text, Separator, SelectTrigger, SelectContent, Link, Box, Heading, Group, Field, CardLink, CardHeader, Card, Badge, Avatar } from '@optiaxiom/react';
+import { Time, Range } from '@optiaxiom/react/unstable';
+import { lazy, Suspense } from 'react';
+import { IconCalendar } from '../icons/IconCalendar.js';
+import { ProteusAction } from '../proteus-action/ProteusAction.js';
+import { ProteusCancelAction } from '../proteus-action/ProteusCancelAction.js';
+import { ProteusDataTable } from '../proteus-data-table/ProteusDataTable.js';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
+import { resolveProteusProp } from '../proteus-document/resolveProteusProp.js';
+import { safeParseElement } from '../proteus-document/schemas.js';
+import { ProteusImage } from '../proteus-image/ProteusImage.js';
+import { ProteusInput } from '../proteus-input/ProteusInput.js';
+import { ProteusMap } from '../proteus-map/ProteusMap.js';
+import { ProteusQuestion } from '../proteus-question/ProteusQuestion.js';
+import { ProteusSelect } from '../proteus-select/ProteusSelect.js';
+import { ProteusShow } from '../proteus-show/ProteusShow.js';
+import { ProteusTextarea } from '../proteus-textarea/ProteusTextarea.js';
+import { ProteusValue } from '../proteus-value/ProteusValue.js';
+
+const ProteusChart = lazy(async () => {
+  return {
+    default: (await import('../proteus-chart/ProteusChart.js')).ProteusChart
+  };
+});
+const ProteusElement = ({
+  element: elementProp
+}) => {
+  const { data, strict } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusElement"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusElement"
+  );
+  if (!elementProp) {
+    return null;
+  } else if (typeof elementProp === "string" || typeof elementProp === "number") {
+    return elementProp;
+  } else if (Array.isArray(elementProp)) {
+    return /* @__PURE__ */ jsx(Fragment, { children: elementProp.map((element2, index) => /* @__PURE__ */ jsx(ProteusElement, { element: element2 }, index)) });
+  }
+  const result = safeParseElement(elementProp);
+  if (!result.success) {
+    if (strict) {
+      throw new Error(`Invalid element: ${result.error.join("\n")}`);
+    }
+    return null;
+  }
+  const element = result.data;
+  const resolve = (obj) => {
+    const { $type: _$type, ...rest } = obj;
+    const resolved = {};
+    for (const [key, value] of Object.entries(rest)) {
+      resolved[key] = resolveProteusProp(value, data, parentPath);
+    }
+    return resolved;
+  };
+  switch (element.$type) {
+    case "Action":
+      return /* @__PURE__ */ jsx(ProteusAction, { ...resolve(element) });
+    case "Avatar":
+      return /* @__PURE__ */ jsx(Avatar, { ...resolve(element) });
+    case "Badge":
+      return /* @__PURE__ */ jsx(Badge, { ...resolve(element) });
+    case "CancelAction":
+      return /* @__PURE__ */ jsx(ProteusCancelAction, { ...resolve(element) });
+    case "Card":
+      return /* @__PURE__ */ jsx(Card, { ...resolve(element) });
+    case "CardHeader":
+      return /* @__PURE__ */ jsx(CardHeader, { ...resolve(element) });
+    case "CardLink":
+      return /* @__PURE__ */ jsx(CardLink, { ...resolve(element) });
+    case "Chart":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        ProteusChart,
+        {
+          ...resolve(element)
+        }
+      ) });
+    case "DataTable":
+      return /* @__PURE__ */ jsx(
+        ProteusDataTable,
+        {
+          ...resolve(element)
+        }
+      );
+    case "Field":
+      return /* @__PURE__ */ jsx(Field, { ...resolve(element) });
+    case "Group":
+      return /* @__PURE__ */ jsx(Group, { ...resolve(element) });
+    case "Heading":
+      return /* @__PURE__ */ jsx(Heading, { ...resolve(element) });
+    case "IconCalendar":
+      return /* @__PURE__ */ jsx(Box, { asChild: true, ...resolve(element), children: /* @__PURE__ */ jsx(IconCalendar, {}) });
+    case "Image":
+      return /* @__PURE__ */ jsx(ProteusImage, { ...resolve(element) });
+    case "Input":
+      return /* @__PURE__ */ jsx(ProteusInput, { ...resolve(element) });
+    case "Link":
+      return /* @__PURE__ */ jsx(Link, { ...resolve(element) });
+    case "Map":
+      return /* @__PURE__ */ jsx(
+        ProteusMap,
+        {
+          ...resolve(element)
+        }
+      );
+    case "Question":
+      return /* @__PURE__ */ jsx(ProteusQuestion, { ...resolve(element) });
+    case "Range":
+      return /* @__PURE__ */ jsx(Range, { ...resolve(element) });
+    case "Select":
+      return /* @__PURE__ */ jsx(ProteusSelect, { ...resolve(element) });
+    case "SelectContent":
+      return /* @__PURE__ */ jsx(SelectContent, { ...resolve(element) });
+    case "SelectTrigger":
+      return /* @__PURE__ */ jsx(SelectTrigger, { ...resolve(element) });
+    case "Separator":
+      return /* @__PURE__ */ jsx(Separator, { ...resolve(element) });
+    case "Show":
+      return /* @__PURE__ */ jsx(
+        ProteusShow,
+        {
+          ...resolve(element)
+        }
+      );
+    case "Text":
+      return /* @__PURE__ */ jsx(Text, { ...resolve(element) });
+    case "Textarea":
+      return /* @__PURE__ */ jsx(ProteusTextarea, { ...resolve(element) });
+    case "Time":
+      return /* @__PURE__ */ jsx(
+        Time,
+        {
+          ...resolve(element)
+        }
+      );
+    case "Value":
+      return /* @__PURE__ */ jsx(
+        ProteusValue,
+        {
+          ...element
+        }
+      );
+    default:
+      return null;
+  }
+};
+ProteusElement.displayName = "@optiaxiom/proteus/ProteusElement";
+
+export { ProteusElement };

package/dist/esm/proteus-image/ProteusImage.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, Spinner, Dialog, DialogTrigger, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogClose, Button } from '@optiaxiom/react';
+import { useState, useRef } from 'react';
+import { downloadFile } from './downloadFile.js';
+
+function ProteusImage(props) {
+  const [open, setOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isLoaded && /* @__PURE__ */ jsx(
+      Box,
+      {
+        alignItems: "center",
+        bg: "bg.tertiary",
+        display: "flex",
+        justifyContent: "center",
+        p: "24",
+        rounded: "md",
+        style: { aspectRatio: "16 / 9" },
+        w: "full",
+        ...props,
+        children: /* @__PURE__ */ jsx(Spinner, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(Dialog, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { "aria-label": "Expand", asChild: true, children: /* @__PURE__ */ jsx(Box, { asChild: true, display: isLoaded ? "block" : "none", ...props, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: props.src,
+          onClick: (event) => {
+            event.preventDefault();
+            setOpen(true);
+          },
+          type: "",
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              asChild: true,
+              objectFit: "cover",
+              overflow: "hidden",
+              rounded: "inherit",
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  alt: props.alt,
+                  onLoad: () => setIsLoaded(true),
+                  ref: imgRef,
+                  src: props.src
+                }
+              )
+            }
+          )
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs(DialogContent, { size: "lg", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { lineClamp: "1", children: props.alt }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(Box, { asChild: true, display: "block", objectFit: "cover", children: /* @__PURE__ */ jsx("img", { alt: props.alt, src: props.src }) }) }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(DialogClose, { children: "Close" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              asChild: true,
+              loading: isDownloading,
+              onClick: async (event) => {
+                event.preventDefault();
+                if (isDownloading) {
+                  return;
+                }
+                setIsDownloading(true);
+                try {
+                  await downloadFile(String(props.src));
+                } finally {
+                  setIsDownloading(false);
+                }
+              },
+              children: /* @__PURE__ */ jsx("a", { download: true, href: props.src, children: "Download" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+ProteusImage.displayName = "@optiaxiom/proteus/ProteusImage";
+
+export { ProteusImage };

package/dist/esm/proteus-image/downloadFile.js

@@ -0,0 +1,12 @@
+async function downloadFile(url) {
+  const response = await fetch(url, { credentials: "include" });
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = objectUrl;
+  a.download = url.split("/").pop() || "";
+  a.click();
+  URL.revokeObjectURL(objectUrl);
+}
+
+export { downloadFile };

package/dist/esm/proteus-input/ProteusInput.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Input } from '@optiaxiom/react';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext } from '../proteus-document/ProteusDocumentPathContext.js';
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusInput(props) {
+  const { onDataChange, readOnly } = useProteusDocumentContext(
+    "@optiaxiom/proteus/ProteusInput"
+  );
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusInput"
+  );
+  const value = useProteusValue({ path: props.name ?? "" });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      onValueChange: (value2) => {
+        if (props.name) {
+          onDataChange?.(`${parentPath}/${props.name}`, value2);
+        }
+      },
+      readOnly,
+      value: props.name ? String(value ?? "") : ""
+    }
+  );
+}
+ProteusInput.displayName = "@optiaxiom/proteus/ProteusInput";
+
+export { ProteusInput };

package/dist/esm/proteus-map/ProteusMap.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentContext.js';
+import { useProteusDocumentPathContext, ProteusDocumentPathProvider } from '../proteus-document/ProteusDocumentPathContext.js';
+import { useProteusValue } from '../proteus-document/useProteusValue.js';
+
+function ProteusMap({ children, path, separator }) {
+  const { strict } = useProteusDocumentContext("@optiaxiom/proteus/ProteusMap");
+  const { path: parentPath } = useProteusDocumentPathContext(
+    "@optiaxiom/proteus/ProteusMap"
+  );
+  const array = useProteusValue({ path });
+  if (!Array.isArray(array)) {
+    if (strict) {
+      throw new Error(
+        `Expected value at "${path}" to be an array got "${typeof array}" instead`
+      );
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: array.map((_, index) => /* @__PURE__ */ jsxs(
+    ProteusDocumentPathProvider,
+    {
+      path: `${path.startsWith("/") ? path : `${parentPath}/${path}`}/${index}`,
+      children: [
+        index > 0 && separator,
+        children
+      ]
+    },
+    index
+  )) });
+}
+ProteusMap.displayName = "@optiaxiom/proteus/ProteusMap";
+
+export { ProteusMap };