@optiaxiom/proteus 0.3.0 → 1.1.0

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

@@ -1,223 +1,230 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconArrowDown } from '@optiaxiom/icons';
-import { Disclosure, DisclosureTrigger, Box, Group, Text, DisclosureContent, Heading, Tooltip } 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';
-import { scrollIndicator, body } from './ProteusDocumentShell-css.js';
-import { resolveProteusValue } from './resolveProteusValue.js';
-
-function ProteusDocumentShell({
-  collapsible: collapsibleProp,
-  data = {},
-  defaultOpen = true,
-  element,
-  onDataChange,
-  onDownload,
-  onInteraction,
-  onMessage,
-  onOpenChange,
-  onPreview,
-  onTrack,
-  onUpload,
-  open: openProp,
-  readOnly = false,
-  strict,
-  useResource
-}) {
-  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 bodyRef = useRef(null);
-  useEffect(() => {
-    const node = bodyRef.current;
-    if (!node)
-      return;
-    const update = () => {
-      if (node.scrollHeight - node.scrollTop - node.clientHeight > 1) {
-        node.dataset.canScroll = "";
-      } else {
-        delete node.dataset.canScroll;
-      }
-    };
-    const observer = new ResizeObserver(update);
-    observer.observe(node);
-    node.addEventListener("scroll", update, { passive: true });
-    return () => {
-      observer.disconnect();
-      node.removeEventListener("scroll", update);
-    };
-  }, []);
-  const collapsible = collapsibleProp && element.appName;
-  const Trigger = collapsible ? DisclosureTrigger : Box;
-  const appearance = resolveProteusValue(element.appearance, data, "", []);
-  const inline = appearance === "inline";
-  return /* @__PURE__ */ jsx(
-    ProteusDocumentProvider,
-    {
-      data,
-      onDataChange: useEffectEvent((path, value) => {
-        const next = structuredClone(data);
-        set(next, path, value);
-        onDataChange?.(next);
-      }),
-      onEvent: useEffectEvent(async (event) => {
-        if ("interaction" in event) {
-          return await onInteraction?.(event.interaction, event.params);
-        } else if ("message" in event) {
-          await onMessage?.(event.message);
-        } else if (event.action === "download") {
-          const urls = [];
-          if (typeof event.url === "string") {
-            urls.push(event.url);
-          } else if (Array.isArray(event.url)) {
-            for (const u of event.url) {
-              if (typeof u !== "string") {
-                throw new Error("Invalid URL in download array");
-              }
-              urls.push(u);
-            }
-          } else {
-            throw new Error("Invalid URL for download action");
-          }
-          if (onDownload) {
-            await onDownload(urls);
-          } else {
-            await Promise.all(urls.map((u) => downloadFile(u)));
-          }
-        } else if (event.action === "openLink") {
-          if (typeof event.url === "string") {
-            window.open(event.url, "_blank", "noopener,noreferrer");
-          }
-        } else if (event.action === "preview") {
-          await onPreview?.(event.file);
-        }
-        return;
-      }),
-      onTrack: useEffectEvent(
-        (event, properties) => {
-          onTrack?.(event, properties);
-        }
-      ),
-      onUpload,
-      readOnly,
-      strict,
-      useResource,
-      valid,
-      children: /* @__PURE__ */ jsxs(
-        Disclosure,
-        {
-          bg: inline ? void 0 : "bg.default",
-          border: inline ? void 0 : "1",
-          borderColor: inline ? void 0 : "border.tertiary",
-          onOpenChange: setOpen,
-          open,
-          p: inline ? void 0 : "20",
-          rounded: inline ? void 0 : "xl",
-          children: [
-            !inline && 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: [
-                  !inline && element.title && /* @__PURE__ */ jsxs(
-                    Group,
-                    {
-                      alignItems: element.titleIcon ? "start" : void 0,
-                      bg: element.titleIcon ? "bg.page" : "transparent",
-                      gap: "12",
-                      p: element.titleIcon ? "12" : void 0,
-                      rounded: "lg",
-                      children: [
-                        element.titleIcon && /* @__PURE__ */ jsx(
-                          Group,
-                          {
-                            bg: "bg.avatar.purple",
-                            flex: "none",
-                            justifyContent: "center",
-                            rounded: "lg",
-                            size: "md",
-                            children: /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx("img", { alt: "", src: element.titleIcon }) })
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "4", children: [
-                          /* @__PURE__ */ jsx(Heading, { fontSize: "lg", fontWeight: "600", level: "2", lineClamp: "2", children: element.title }),
-                          !!element.subtitle && /* @__PURE__ */ jsx(Tooltip, { auto: true, content: element.subtitle, children: /* @__PURE__ */ jsx(Text, { color: "fg.secondary", lineClamp: "2", children: element.subtitle }) })
-                        ] })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsxs(
-                    "form",
-                    {
-                      onChange: (event) => {
-                        const form = event.currentTarget;
-                        setTimeout(() => {
-                          setValid(form.checkValidity());
-                        });
-                      },
-                      onSubmit: (event) => {
-                        event.preventDefault();
-                      },
-                      ref: formRef,
-                      children: [
-                        /* @__PURE__ */ jsxs(
-                          Group,
-                          {
-                            ref: element.compact ? bodyRef : void 0,
-                            ...body({ truncate: element.compact }),
-                            children: [
-                              element.body,
-                              element.compact && /* @__PURE__ */ jsx(Box, { ...scrollIndicator(), children: /* @__PURE__ */ jsx(IconArrowDown, {}) })
-                            ]
-                          }
-                        ),
-                        element.actions && !readOnly && /* @__PURE__ */ jsx(Group, { gap: "16", justifyContent: "end", w: "full", children: element.actions })
-                      ]
-                    }
-                  ) })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+import { ProteusDocumentProvider } from "./ProteusDocumentContext.js";
+import { resolveProteusValue } from "./resolveProteusValue.js";
+import { useEffectEvent } from "../hooks/useEffectEvent.js";
+import { downloadFile } from "../proteus-image/downloadFile.js";
+import { body, scrollIndicator } from "./ProteusDocumentShell-css.js";
+import { Box, Disclosure, DisclosureContent, DisclosureTrigger, Group, Heading, Text, Tooltip } from "@optiaxiom/react";
+import { useEffect, useRef, useState } from "react";
+import { get, set } from "jsonpointer";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowDown } from "@optiaxiom/icons";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/proteus-document/ProteusDocumentShell.tsx
+function ProteusDocumentShell({ collapsible: collapsibleProp, data = {}, defaultOpen = true, element, icons, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, onPreview, onTrack, onUpload, open: openProp, readOnly = false, strict, useResource }) {
+	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 bodyRef = useRef(null);
+	useEffect(() => {
+		const node = bodyRef.current;
+		if (!node) return;
+		const update = () => {
+			if (node.scrollHeight - node.scrollTop - node.clientHeight > 1) node.dataset.canScroll = "";
+			else delete node.dataset.canScroll;
+		};
+		const observer = new ResizeObserver(update);
+		observer.observe(node);
+		node.addEventListener("scroll", update, { passive: true });
+		return () => {
+			observer.disconnect();
+			node.removeEventListener("scroll", update);
+		};
+	}, []);
+	const collapsible = collapsibleProp && element.appName;
+	const Trigger = collapsible ? DisclosureTrigger : Box;
+	const inline = resolveProteusValue(element.appearance, data, "", []) === "inline";
+	return /* @__PURE__ */ jsx(ProteusDocumentProvider, {
+		data,
+		icons,
+		onDataChange: useEffectEvent((path, value) => {
+			onDataChange?.((prev) => {
+				const next = structuredClone(prev);
+				set(next, path, value);
+				return next;
+			});
+		}),
+		onEvent: useEffectEvent(async (event) => {
+			if ("interaction" in event) return await onInteraction?.(event.interaction, event.params);
+			else if ("message" in event) await onMessage?.(event.message);
+			else if (event.action === "download") {
+				const urls = [];
+				if (typeof event.url === "string") urls.push(event.url);
+				else if (Array.isArray(event.url)) for (const u of event.url) {
+					if (typeof u !== "string") throw new Error("Invalid URL in download array");
+					urls.push(u);
+				}
+				else throw new Error("Invalid URL for download action");
+				if (onDownload) await onDownload(urls);
+				else await Promise.all(urls.map((u) => downloadFile(u)));
+			} else if (event.action === "openLink") {
+				if (typeof event.url === "string") window.open(event.url, "_blank", "noopener,noreferrer");
+			} else if (event.action === "preview") await onPreview?.(event.file);
+			else if (event.action === "pushValue") {
+				const { path, value } = event;
+				onDataChange?.((prev) => {
+					const next = structuredClone(prev);
+					const current = get(next, path);
+					if (current !== void 0 && !Array.isArray(current)) {
+						if (strict) throw new Error(`pushValue: expected array at "${path}"`);
+						return prev;
+					}
+					set(next, path, [...current ?? [], value]);
+					return next;
+				});
+			} else if (event.action === "removeValue") {
+				const { path } = event;
+				const slash = path.lastIndexOf("/");
+				const parent = slash > 0 ? path.slice(0, slash) : "";
+				const index = Number(path.slice(slash + 1));
+				if (!parent || !Number.isInteger(index)) {
+					if (strict) throw new Error(`removeValue: "${path}" is not an array index`);
+					return;
+				}
+				onDataChange?.((prev) => {
+					const next = structuredClone(prev);
+					const arr = get(next, parent);
+					if (!Array.isArray(arr)) {
+						if (strict) throw new Error(`removeValue: "${parent}" is not an array`);
+						return prev;
+					}
+					set(next, parent, arr.filter((_, i) => i !== index));
+					return next;
+				});
+			}
+		}),
+		onTrack: useEffectEvent((event, properties) => {
+			onTrack?.(event, properties);
+		}),
+		onUpload,
+		readOnly,
+		strict,
+		useResource,
+		valid,
+		children: /* @__PURE__ */ jsxs(Disclosure, {
+			bg: inline ? void 0 : "bg.default",
+			border: inline ? void 0 : "1",
+			borderColor: inline ? void 0 : "border.tertiary",
+			onOpenChange: setOpen,
+			open,
+			p: inline ? void 0 : "20",
+			rounded: inline ? void 0 : "xl",
+			children: [!inline && 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: [!inline && element.title && /* @__PURE__ */ jsxs(Group, {
+					alignItems: element.titleIcon ? "start" : void 0,
+					bg: element.titleIcon ? "bg.page" : "transparent",
+					gap: "12",
+					p: element.titleIcon ? "12" : void 0,
+					rounded: "lg",
+					children: [element.titleIcon && /* @__PURE__ */ jsx(Group, {
+						bg: "bg.avatar.purple",
+						flex: "none",
+						justifyContent: "center",
+						rounded: "lg",
+						size: "md",
+						children: /* @__PURE__ */ jsx(Box, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("img", {
+								alt: "",
+								src: element.titleIcon
+							})
+						})
+					}), /* @__PURE__ */ jsxs(Group, {
+						flex: "1",
+						flexDirection: "column",
+						gap: "4",
+						children: [/* @__PURE__ */ jsx(Heading, {
+							fontSize: "lg",
+							fontWeight: "600",
+							level: "2",
+							lineClamp: "2",
+							children: element.title
+						}), !!element.subtitle && /* @__PURE__ */ jsx(Tooltip, {
+							auto: true,
+							content: element.subtitle,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "fg.secondary",
+								lineClamp: "2",
+								children: element.subtitle
+							})
+						})]
+					})]
+				}), /* @__PURE__ */ jsx(Group, {
+					asChild: true,
+					flexDirection: "column",
+					gap: "16",
+					children: /* @__PURE__ */ jsxs("form", {
+						onChange: (event) => {
+							const form = event.currentTarget;
+							setTimeout(() => {
+								setValid(form.checkValidity());
+							});
+						},
+						onSubmit: (event) => {
+							event.preventDefault();
+						},
+						ref: formRef,
+						children: [/* @__PURE__ */ jsxs(Group, {
+							ref: element.compact ? bodyRef : void 0,
+							...body({ truncate: element.compact }),
+							children: [element.body, element.compact && /* @__PURE__ */ jsx(Box, {
+								...scrollIndicator(),
+								children: /* @__PURE__ */ jsx(IconArrowDown, {})
+							})]
+						}), element.actions && !readOnly && /* @__PURE__ */ jsx(Group, {
+							gap: "16",
+							justifyContent: "end",
+							w: "full",
+							children: element.actions
+						})]
+					})
+				})]
+			})]
+		})
+	});
 }
 ProteusDocumentShell.displayName = "@optiaxiom/proteus/ProteusDocumentShell";
-
+//#endregion
 export { ProteusDocumentShell };

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

@@ -1,49 +1,35 @@
-import { get } from 'jsonpointer';
-
+import { get } from "jsonpointer";
+//#region src/proteus-document/getProteusValue.ts
 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;
-  }
+	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;
-  }
+	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);
+	const fn = formatters[typeof formatter === "string" ? formatter : formatter.type];
+	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);
 }
-
+//#endregion
 export { applyFormatter, getProteusValue };

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

@@ -1,53 +1,35 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { ProteusElement } from '../proteus-element/ProteusElement.js';
-import { getProteusValue } from './getProteusValue.js';
-import { evaluateCondition } from './resolveProteusValue.js';
-
+import { getProteusValue } from "./getProteusValue.js";
+import { evaluateCondition } from "./resolveProteusValue.js";
+import { ProteusElement } from "../proteus-element/ProteusElement.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/proteus-document/resolveProteusProp.tsx
 function resolveProteusProp(value, data, parentPath, mapIndices = []) {
-  if (typeof value !== "object" || value === null) {
-    return value;
-  }
-  if ("$type" in value && value.$type === "MapIndex") {
-    return mapIndices.at(-1);
-  }
-  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, mapIndices);
-      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;
-    });
-  }
-  if ("$type" in value && value.$type === "Show" && "when" in value && "children" in value) {
-    const conditions = Array.isArray(value.when) ? value.when : [value.when];
-    const shouldShow = conditions.every(
-      (condition) => evaluateCondition(condition, data, parentPath, mapIndices)
-    );
-    if (!shouldShow) {
-      return void 0;
-    }
-    return resolveProteusProp(value.children, data, parentPath, mapIndices);
-  }
-  return "$type" in value || Array.isArray(value) && value.some((v) => v && typeof v === "object" && "$type" in v) ? /* @__PURE__ */ jsx(ProteusElement, { element: value }) : value;
+	if (typeof value !== "object" || value === null) return value;
+	if ("$type" in value && value.$type === "MapIndex") return mapIndices.at(-1);
+	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, mapIndices);
+			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;
+		});
+	}
+	if ("$type" in value && value.$type === "Show" && "when" in value && "children" in value) {
+		if (!(Array.isArray(value.when) ? value.when : [value.when]).every((condition) => evaluateCondition(condition, data, parentPath, mapIndices))) return;
+		return resolveProteusProp(value.children, data, parentPath, mapIndices);
+	}
+	return "$type" in value || Array.isArray(value) && value.some((v) => v && typeof v === "object" && "$type" in v) ? /* @__PURE__ */ jsx(ProteusElement, { element: value }) : value;
 }
-
+//#endregion
 export { resolveProteusProp };