@powerhousedao/design-system 6.2.3-dev.61 → 6.2.3-dev.62

package/dist/{content-BMXLcwWY.d.ts → content-L3OINRSY.d.ts}

@@ -1,4 +1,4 @@
-import { C as SelectProps } from "./index-C05uhexJ.js";
+import { C as SelectProps } from "./index-D99twPFI.js";
 import React from "react";
 //#region src/ui/components/select-field/content.d.ts
 interface ContentProps {
@@ -17,4 +17,4 @@ declare const Content: React.FC<ContentProps>;
 //#endregion
 export { Content as t };
 export {};
-//# sourceMappingURL=content-BMXLcwWY.d.ts.map
+//# sourceMappingURL=content-L3OINRSY.d.ts.map

package/dist/{content-BMXLcwWY.d.ts.map → content-L3OINRSY.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"content-BMXLcwWY.d.ts","names":[],"sources":["../src/ui/components/select-field/content.tsx"],"mappings":";;;UAaU;EACR;EACA,gBAAgB,MAAM,UAAU;EAChC;EACA;EACA;EACA;EACA,SAAS;EACT,kBAAkB;EAClB;EACA,eAAe;;cAGJ,SAAS,MAAM,GAAG"}
+{"version":3,"file":"content-L3OINRSY.d.ts","names":[],"sources":["../src/ui/components/select-field/content.tsx"],"mappings":";;;UAaU;EACR;EACA,gBAAgB,MAAM,UAAU;EAChC;EACA;EACA;EACA;EACA,SAAS;EACT,kBAAkB;EAClB;EACA,eAAe;;cAGJ,SAAS,MAAM,GAAG"}

package/dist/default-editor.impl-a6EOuEme.js

@@ -0,0 +1,30 @@
+import { SelectFieldRaw } from "./ui/components/select-field/select-field.js";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/connect/components/modal/settings-modal-v2/default-editor.impl.tsx
+function DefaultEditor(props) {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("rounded-lg bg-background p-3", className),
+		children: /* @__PURE__ */ jsx(DefaultEditorSelect, { ...rest })
+	});
+}
+function DefaultEditorSelect(props) {
+	const { documentModelEditor, setDocumentModelEditor, documentModelEditorOptions, className } = props;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+		className: "mb-4 font-semibold text-foreground",
+		children: "Default Editor Selection"
+	}), /* @__PURE__ */ jsx(SelectFieldRaw, {
+		className: twMerge("max-w-fit min-w-36", className),
+		name: "default-editor",
+		required: true,
+		value: documentModelEditor,
+		options: documentModelEditorOptions,
+		multiple: false,
+		onChange: (value) => setDocumentModelEditor(value)
+	})] });
+}
+//#endregion
+export { DefaultEditor, DefaultEditorSelect };
+
+//# sourceMappingURL=default-editor.impl-a6EOuEme.js.map

package/dist/default-editor.impl-a6EOuEme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-editor.impl-a6EOuEme.js","names":["SelectFieldRaw","twMerge","DefaultEditor","props","className","rest","DefaultEditorSelect","documentModelEditor","setDocumentModelEditor","documentModelEditorOptions","value"],"sources":["../src/connect/components/modal/settings-modal-v2/default-editor.impl.tsx"],"sourcesContent":["import type { SelectOption } from \"#design-system/ui\";\nimport { SelectFieldRaw } from \"#design-system/ui\";\nimport { twMerge } from \"tailwind-merge\";\n\ntype Props = {\n  documentModelEditor: string;\n  setDocumentModelEditor: (value: string) => void;\n  documentModelEditorOptions: SelectOption[];\n  className?: string;\n};\n\nexport function DefaultEditor(props: Props) {\n  const { className, ...rest } = props;\n  return (\n    <div className={twMerge(\"rounded-lg bg-background p-3\", className)}>\n      <DefaultEditorSelect {...rest} />\n    </div>\n  );\n}\n\nexport function DefaultEditorSelect(props: Props) {\n  const {\n    documentModelEditor,\n    setDocumentModelEditor,\n    documentModelEditorOptions,\n    className,\n  } = props;\n\n  return (\n    <div>\n      <h3 className=\"mb-4 font-semibold text-foreground\">\n        Default Editor Selection\n      </h3>\n      <SelectFieldRaw\n        className={twMerge(\"max-w-fit min-w-36\", className)}\n        name=\"default-editor\"\n        required\n        value={documentModelEditor}\n        options={documentModelEditorOptions}\n        multiple={false}\n        onChange={(value) => setDocumentModelEditor(value as string)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAWA,SAAgBE,cAAcC,OAAc;CAC1C,MAAM,EAAEC,WAAW,GAAGC,SAASF;CAC/B,OACE,oBAAC,OAAD;EAAK,WAAWF,QAAQ,gCAAgCG,SAAS;EAC/D,UAAA,oBAAC,qBAAD,EAAqB,GAAIC,KAAK,CAAA;CAC3B,CAAA;AAET;AAEA,SAAgBC,oBAAoBH,OAAc;CAChD,MAAM,EACJI,qBACAC,wBACAC,4BACAL,cACED;CAEJ,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,MAAD;EAAI,WAAU;EAAoC,UAAA;CAE9C,CAAA,GACJ,oBAAC,gBAAD;EACE,WAAWF,QAAQ,sBAAsBG,SAAS;EAClD,MAAK;EACL,UAAA;EACA,OAAOG;EACP,SAASE;EACT,UAAU;EACV,WAAWC,UAAUF,uBAAuBE,KAAe;CAAE,CAAA,CAE5D,EAAA,CAAA;AAET"}

package/dist/document-timeline.impl-DRmIHFaI.js

@@ -0,0 +1,254 @@
+import { t as Icon } from "./icon-CR_tC1gc.js";
+import { ConnectTooltip, ConnectTooltipProvider } from "./connect/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { format, formatDistanceToNow, parseISO } from "date-fns";
+//#region src/connect/components/document-timeline/components/h-divider.tsx
+const HDivider = (props) => {
+	const { className, timestampUtcMs: timestamp, title, subtitle, onClick, isSelected = false } = props;
+	const [open, setOpen] = useState(false);
+	const hasContent = !!title || !!subtitle || !!timestamp;
+	useEffect(() => {
+		if (open) {
+			setOpen(false);
+			setTimeout(() => hasContent && setOpen(true), 50);
+		}
+	}, [
+		title,
+		subtitle,
+		timestamp,
+		hasContent
+	]);
+	const formatTimestamp = (isoString) => {
+		if (!isoString) return "";
+		try {
+			return formatDistanceToNow(new Date(isoString), { addSuffix: true });
+		} catch {
+			return isoString;
+		}
+	};
+	const tooltipContent = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col text-xs",
+		children: [
+			!!title && /* @__PURE__ */ jsx("div", { children: title }),
+			!!subtitle && /* @__PURE__ */ jsx("div", {
+				className: "text-foreground",
+				children: subtitle
+			}),
+			!!timestamp && /* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) })
+		]
+	});
+	const handleMouseEnter = () => {
+		if (hasContent) setOpen(true);
+	};
+	const handleMouseLeave = () => {
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
+			name: "TimelineCaret",
+			color: "#4EA9FF",
+			size: 10,
+			className: "absolute top-[-11px] z-40"
+		}), /* @__PURE__ */ jsx(ConnectTooltip, {
+			className: "rounded-md bg-primary text-primary-foreground",
+			content: tooltipContent,
+			open: open && hasContent,
+			onOpenChange: setOpen,
+			delayDuration: 0,
+			side: "bottom",
+			sideOffset: 5,
+			children: /* @__PURE__ */ jsx("div", {
+				className: twMerge("mx-0.5 flex h-6.25 w-1.5 cursor-pointer flex-col items-center justify-center rounded-xs hover:hover-effect", isSelected && "bg-info/10", className),
+				onClick,
+				"data-title": title,
+				"data-subtitle": subtitle,
+				"data-timestamp": timestamp,
+				children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-1 rounded-full bg-muted" })
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/document-timeline/components/timeline-bar.tsx
+const getBarHeight = (size = 0) => {
+	switch (true) {
+		case size <= 0: return "h-[1px]";
+		case size === 1: return "h-[3px]";
+		case size === 2: return "h-[6px]";
+		case size === 3: return "h-[9px]";
+		case size >= 4: return "h-[12px]";
+		default: return "h-[1px]";
+	}
+};
+const formatTimestamp = (isoString) => {
+	if (!isoString) return "";
+	try {
+		const date = parseISO(isoString);
+		return format(date, "HH:mm, dd, MMMM");
+	} catch {
+		return isoString;
+	}
+};
+const TimelineBar = ({ onClick, className, timestampUtcMs: timestamp, additions, deletions, addSize = 0, delSize = 0, isSelected = false }) => {
+	const [open, setOpen] = useState(false);
+	const noChanges = addSize === 0 && delSize === 0;
+	const addBarHeight = getBarHeight(addSize);
+	const delBarHeight = getBarHeight(delSize);
+	const tooltipContent = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col text-xs",
+		children: [
+			/* @__PURE__ */ jsx("div", { children: formatTimestamp(timestamp) }),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-success",
+				children: `${additions} additions +`
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-destructive",
+				children: `${deletions} deletions -`
+			})
+		]
+	});
+	const handleMouseEnter = () => {
+		if (!noChanges) setOpen(true);
+	};
+	const handleMouseLeave = () => {
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [isSelected && /* @__PURE__ */ jsx(Icon, {
+			name: "TimelineCaret",
+			color: "#4EA9FF",
+			size: 10,
+			className: "absolute top-[-11px] left-[-2px] z-40"
+		}), noChanges ? /* @__PURE__ */ jsx("div", {
+			className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className),
+			"data-timestamp": timestamp,
+			onClick,
+			children: /* @__PURE__ */ jsx("div", { className: "size-[3px] rounded-full bg-muted-foreground" })
+		}) : /* @__PURE__ */ jsx(ConnectTooltip, {
+			className: "rounded-md bg-primary text-primary-foreground",
+			content: tooltipContent,
+			open,
+			onOpenChange: setOpen,
+			delayDuration: 0,
+			side: "bottom",
+			sideOffset: 5,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: twMerge("flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect", className, isSelected && "bg-info/10"),
+				"data-timestamp": timestamp,
+				onClick,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex h-3 w-0.5 items-end",
+					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-t-full bg-success", addBarHeight) })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex h-3 w-0.5 items-start",
+					children: /* @__PURE__ */ jsx("div", { className: twMerge("h-3 w-0.5 rounded-b-full bg-destructive", delBarHeight) })
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/connect/components/document-timeline/document-timeline.impl.tsx
+const defaultTimeLineItem = {
+	id: "default",
+	type: "bar",
+	addSize: 0,
+	delSize: 0
+};
+const DocumentTimeline = (props) => {
+	const { timeline = [], onItemClick } = props;
+	const [selectedItem, setSelectedItem] = useState(null);
+	const scrollContainerRef = useRef(null);
+	const handleClick = (item) => {
+		if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {
+			onItemClick?.(null);
+			setSelectedItem(null);
+		} else {
+			onItemClick?.(item);
+			setSelectedItem(item.id);
+		}
+	};
+	const mergedTimelineItems = [...timeline, defaultTimeLineItem];
+	const [unselectedItems, selectedItems] = useMemo(() => {
+		const indexSelected = mergedTimelineItems.findIndex((item) => item.id === selectedItem);
+		return indexSelected === -1 ? [mergedTimelineItems, []] : [mergedTimelineItems.slice(0, indexSelected), mergedTimelineItems.slice(indexSelected)];
+	}, [mergedTimelineItems, selectedItem]);
+	const renderTimelineItems = useCallback((items) => {
+		return items.map((item) => {
+			if (item.type === "divider") {
+				const { timestampUtcMs, title, subtitle } = item;
+				return /* @__PURE__ */ jsx(HDivider, {
+					timestampUtcMs,
+					title,
+					subtitle,
+					onClick: () => handleClick(item),
+					isSelected: item.id === selectedItem
+				}, item.id);
+			}
+			return /* @__PURE__ */ jsx(TimelineBar, {
+				timestampUtcMs: item.timestampUtcMs,
+				addSize: item.addSize,
+				delSize: item.delSize,
+				additions: item.additions,
+				deletions: item.deletions,
+				isSelected: item.id === selectedItem,
+				onClick: () => handleClick(item)
+			}, item.id);
+		});
+	}, [handleClick, selectedItem]);
+	const unselectedContent = useMemo(() => renderTimelineItems(unselectedItems), [unselectedItems, renderTimelineItems]);
+	const selectedContent = useMemo(() => renderTimelineItems(selectedItems), [selectedItems, renderTimelineItems]);
+	useEffect(() => {
+		if (scrollContainerRef.current) scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
+	}, []);
+	return /* @__PURE__ */ jsx(ConnectTooltipProvider, {
+		delayDuration: 0,
+		skipDelayDuration: 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative h-[36px] w-full",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute left-0 z-20 h-[17px] w-[6px] bg-background",
+					children: /* @__PURE__ */ jsx("div", { className: "mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-background" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-background",
+					children: /* @__PURE__ */ jsx("div", { className: "h-[6px] w-[6px] rounded-tr-md bg-background" })
+				}),
+				/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-background" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-x-0 bottom-0 h-[36px]",
+					children: /* @__PURE__ */ jsx("div", {
+						ref: scrollContainerRef,
+						className: "h-full overflow-x-auto rounded-md",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "ml-auto flex h-[36px] w-max items-end px-2 pb-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex",
+								children: unselectedContent
+							}), /* @__PURE__ */ jsx("div", {
+								className: "flex rounded-sm bg-info/10",
+								children: selectedContent
+							})]
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-background" }),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-background" })
+			]
+		})
+	});
+};
+//#endregion
+export { DocumentTimeline };
+
+//# sourceMappingURL=document-timeline.impl-DRmIHFaI.js.map

package/dist/document-timeline.impl-DRmIHFaI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-timeline.impl-DRmIHFaI.js","names":["Icon","formatDistanceToNow","useEffect","useState","twMerge","ConnectTooltip","HDivider","props","className","timestampUtcMs","timestamp","title","subtitle","onClick","isSelected","open","setOpen","hasContent","setTimeout","formatTimestamp","isoString","Date","addSuffix","tooltipContent","handleMouseEnter","handleMouseLeave","Icon","format","parseISO","useState","twMerge","ConnectTooltip","getBarHeight","size","formatTimestamp","isoString","date","TimelineBar","onClick","className","timestampUtcMs","timestamp","additions","deletions","addSize","delSize","isSelected","open","setOpen","noChanges","addBarHeight","delBarHeight","tooltipContent","handleMouseEnter","handleMouseLeave","useCallback","useEffect","useMemo","useRef","useState","ConnectTooltipProvider","HDivider","TimelineBar","defaultTimeLineItem","id","type","addSize","delSize","DocumentTimeline","props","timeline","onItemClick","selectedItem","setSelectedItem","scrollContainerRef","handleClick","item","mergedTimelineItems","unselectedItems","selectedItems","indexSelected","findIndex","slice","renderTimelineItems","items","map","timestampUtcMs","title","subtitle","additions","deletions","unselectedContent","selectedContent","current","scrollLeft","scrollWidth"],"sources":["../src/connect/components/document-timeline/components/h-divider.tsx","../src/connect/components/document-timeline/components/timeline-bar.tsx","../src/connect/components/document-timeline/document-timeline.impl.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ConnectTooltip } from \"../../tooltip/tooltip.js\";\n\nexport interface HDividerProps {\n  className?: string;\n  timestampUtcMs?: string;\n  title?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  isSelected?: boolean;\n}\n\nexport const HDivider = (props: HDividerProps) => {\n  const {\n    className,\n    timestampUtcMs: timestamp,\n    title,\n    subtitle,\n    onClick,\n    isSelected = false,\n  } = props;\n  const [open, setOpen] = useState<boolean>(false);\n  const hasContent = !!title || !!subtitle || !!timestamp;\n\n  // Force update tooltips when props change\n  useEffect(() => {\n    // Force close and re-open if already open to refresh content\n    if (open) {\n      // eslint-disable-next-line react-hooks-extra/set-state-in-effect\n      setOpen(false);\n      setTimeout(() => hasContent && setOpen(true), 50);\n    }\n  }, [title, subtitle, timestamp, hasContent]);\n\n  const formatTimestamp = (isoString?: string) => {\n    if (!isoString) return \"\";\n    try {\n      return formatDistanceToNow(new Date(isoString), { addSuffix: true });\n    } catch {\n      return isoString;\n    }\n  };\n\n  const tooltipContent = (\n    <div className=\"flex flex-col text-xs\">\n      {!!title && <div>{title}</div>}\n      {!!subtitle && <div className=\"text-foreground\">{subtitle}</div>}\n      {!!timestamp && <div>{formatTimestamp(timestamp)}</div>}\n    </div>\n  );\n\n  const handleMouseEnter = () => {\n    if (hasContent) {\n      setOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div\n      className=\"relative\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {isSelected && (\n        <Icon\n          name=\"TimelineCaret\"\n          color=\"#4EA9FF\"\n          size={10}\n          className=\"absolute top-[-11px] z-40\"\n        />\n      )}\n      <ConnectTooltip\n        className=\"rounded-md bg-primary text-primary-foreground\"\n        content={tooltipContent}\n        open={open && hasContent}\n        onOpenChange={setOpen}\n        delayDuration={0}\n        side=\"bottom\"\n        sideOffset={5}\n      >\n        <div\n          className={twMerge(\n            \"mx-0.5 flex h-6.25 w-1.5 cursor-pointer flex-col items-center justify-center rounded-xs hover:hover-effect\",\n            isSelected && \"bg-info/10\",\n            className,\n          )}\n          onClick={onClick}\n          data-title={title}\n          data-subtitle={subtitle}\n          data-timestamp={timestamp}\n        >\n          <div className=\"h-0.5 w-1 rounded-full bg-muted\" />\n        </div>\n      </ConnectTooltip>\n    </div>\n  );\n};\n","import { Icon } from \"#design-system\";\nimport type { TimelineBarItem } from \"@powerhousedao/reactor-browser\";\nimport { format, parseISO } from \"date-fns\";\nimport { useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ConnectTooltip } from \"../../tooltip/tooltip.js\";\n\nexport interface TimelineBarProps extends Omit<\n  TimelineBarItem,\n  \"id\" | \"type\" | \"revision\" | \"startDate\" | \"endDate\"\n> {\n  readonly className?: string;\n  onClick?: () => void;\n  isSelected?: boolean;\n}\n\nconst getBarHeight = (size = 0) => {\n  switch (true) {\n    case size <= 0:\n      return \"h-[1px]\";\n    case size === 1:\n      return \"h-[3px]\";\n    case size === 2:\n      return \"h-[6px]\";\n    case size === 3:\n      return \"h-[9px]\";\n    case size >= 4:\n      return \"h-[12px]\";\n    default:\n      return \"h-[1px]\";\n  }\n};\n\nconst formatTimestamp = (isoString?: string) => {\n  if (!isoString) return \"\";\n  try {\n    const date = parseISO(isoString);\n    return format(date, \"HH:mm, dd, MMMM\");\n  } catch {\n    return isoString;\n  }\n};\n\nexport const TimelineBar: React.FC<TimelineBarProps> = ({\n  onClick,\n  className,\n  timestampUtcMs: timestamp,\n  additions,\n  deletions,\n  addSize = 0,\n  delSize = 0,\n  isSelected = false,\n}) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const noChanges = addSize === 0 && delSize === 0;\n\n  const addBarHeight = getBarHeight(addSize);\n  const delBarHeight = getBarHeight(delSize);\n\n  const tooltipContent = (\n    <div className=\"flex flex-col text-xs\">\n      <div>{formatTimestamp(timestamp)}</div>\n      <div className=\"text-success\">{`${additions} additions +`}</div>\n      <div className=\"text-destructive\">{`${deletions} deletions -`}</div>\n    </div>\n  );\n\n  const handleMouseEnter = () => {\n    if (!noChanges) {\n      setOpen(true);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOpen(false);\n  };\n\n  return (\n    <div\n      className=\"relative\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {isSelected && (\n        <Icon\n          name=\"TimelineCaret\"\n          color=\"#4EA9FF\"\n          size={10}\n          className=\"absolute top-[-11px] left-[-2px] z-40\"\n        />\n      )}\n      {noChanges ? (\n        <div\n          className={twMerge(\n            \"flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect\",\n            className,\n          )}\n          data-timestamp={timestamp}\n          onClick={onClick}\n        >\n          <div className=\"size-[3px] rounded-full bg-muted-foreground\" />\n        </div>\n      ) : (\n        <ConnectTooltip\n          className=\"rounded-md bg-primary text-primary-foreground\"\n          content={tooltipContent}\n          open={open}\n          onOpenChange={setOpen}\n          delayDuration={0}\n          side=\"bottom\"\n          sideOffset={5}\n        >\n          <div\n            className={twMerge(\n              \"flex h-[25px] w-1.5 cursor-pointer flex-col items-center justify-center rounded-[2px] hover:hover-effect\",\n              className,\n              isSelected && \"bg-info/10\",\n            )}\n            data-timestamp={timestamp}\n            onClick={onClick}\n          >\n            <div className=\"flex h-3 w-0.5 items-end\">\n              <div\n                className={twMerge(\n                  \"h-3 w-0.5 rounded-t-full bg-success\",\n                  addBarHeight,\n                )}\n              ></div>\n            </div>\n            <div className=\"flex h-3 w-0.5 items-start\">\n              <div\n                className={twMerge(\n                  \"h-3 w-0.5 rounded-b-full bg-destructive\",\n                  delBarHeight,\n                )}\n              ></div>\n            </div>\n          </div>\n        </ConnectTooltip>\n      )}\n    </div>\n  );\n};\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { ConnectTooltipProvider } from \"../tooltip/tooltip.js\";\nimport { HDivider } from \"./components/h-divider.js\";\nimport { TimelineBar } from \"./components/timeline-bar.js\";\n\nexport type TimelineBarItem = {\n  id: string;\n  type: \"bar\";\n  addSize?: 0 | 1 | 2 | 3 | 4;\n  delSize?: 0 | 1 | 2 | 3 | 4;\n  timestampUtcMs?: string;\n  additions?: number;\n  deletions?: number;\n  revision?: number;\n  startDate?: Date;\n  endDate?: Date;\n};\n\nexport type TimelineDividerItem = {\n  id: string;\n  type: \"divider\";\n  timestampUtcMs?: string;\n  title?: string;\n  subtitle?: string;\n  revision?: number;\n  startDate?: Date;\n  endDate?: Date;\n};\n\nexport type TimelineItem = TimelineBarItem | TimelineDividerItem;\n\nexport interface DocumentTimelineProps {\n  onItemClick?: (item: TimelineItem | null) => void;\n  timeline?: Array<TimelineItem>;\n}\n\nconst defaultTimeLineItem: TimelineBarItem = {\n  id: \"default\",\n  type: \"bar\",\n  addSize: 0,\n  delSize: 0,\n};\n\nexport const DocumentTimeline = (props: DocumentTimelineProps) => {\n  const { timeline = [], onItemClick } = props;\n  const [selectedItem, setSelectedItem] = useState<null | string>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const handleClick = (item: TimelineItem) => {\n    if (item.id === selectedItem || item.id === defaultTimeLineItem.id) {\n      onItemClick?.(null);\n      setSelectedItem(null);\n    } else {\n      onItemClick?.(item);\n      setSelectedItem(item.id);\n    }\n  };\n\n  const mergedTimelineItems = [...timeline, defaultTimeLineItem];\n  const [unselectedItems, selectedItems] = useMemo(() => {\n    const indexSelected = mergedTimelineItems.findIndex(\n      (item) => item.id === selectedItem,\n    );\n\n    return indexSelected === -1\n      ? [mergedTimelineItems, []]\n      : [\n          mergedTimelineItems.slice(0, indexSelected),\n          mergedTimelineItems.slice(indexSelected),\n        ];\n  }, [mergedTimelineItems, selectedItem]);\n\n  const renderTimelineItems = useCallback(\n    (items: Array<TimelineBarItem | TimelineDividerItem>) => {\n      return items.map((item) => {\n        if (item.type === \"divider\") {\n          const { timestampUtcMs, title, subtitle } = item;\n          return (\n            <HDivider\n              key={item.id}\n              timestampUtcMs={timestampUtcMs}\n              title={title}\n              subtitle={subtitle}\n              onClick={() => handleClick(item)}\n              isSelected={item.id === selectedItem}\n            />\n          );\n        }\n\n        return (\n          <TimelineBar\n            key={item.id}\n            timestampUtcMs={item.timestampUtcMs}\n            addSize={item.addSize}\n            delSize={item.delSize}\n            additions={item.additions}\n            deletions={item.deletions}\n            isSelected={item.id === selectedItem}\n            onClick={() => handleClick(item)}\n          />\n        );\n      });\n    },\n    [handleClick, selectedItem],\n  );\n\n  const unselectedContent = useMemo(\n    () => renderTimelineItems(unselectedItems),\n    [unselectedItems, renderTimelineItems],\n  );\n\n  const selectedContent = useMemo(\n    () => renderTimelineItems(selectedItems),\n    [selectedItems, renderTimelineItems],\n  );\n\n  // Scroll to the end by default\n  useEffect(() => {\n    if (scrollContainerRef.current) {\n      scrollContainerRef.current.scrollLeft =\n        scrollContainerRef.current.scrollWidth;\n    }\n  }, []);\n\n  return (\n    <ConnectTooltipProvider delayDuration={0} skipDelayDuration={0}>\n      <div className=\"relative h-[36px] w-full\">\n        <div className=\"absolute left-0 z-20 h-[17px] w-[6px] bg-background\">\n          <div className=\"mt-[11px] h-[6px] w-[6px] rounded-tl-md bg-background\" />\n        </div>\n\n        <div className=\"absolute top-[11px] right-0 z-20 h-[6px] w-[6px] bg-background\">\n          <div className=\"h-[6px] w-[6px] rounded-tr-md bg-background\" />\n        </div>\n        <div className=\"absolute inset-x-0 bottom-0 h-[25px] rounded-md bg-background\" />\n\n        <div className=\"absolute inset-x-0 bottom-0 h-[36px]\">\n          <div\n            ref={scrollContainerRef}\n            className=\"h-full overflow-x-auto rounded-md\"\n          >\n            <div className=\"ml-auto flex h-[36px] w-max items-end px-2 pb-0\">\n              <div className=\"flex\">{unselectedContent}</div>\n              <div className=\"flex rounded-sm bg-info/10\">\n                {selectedContent}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className=\"pointer-events-none absolute bottom-0 left-0 z-10 h-[25px] w-2 rounded-l-md bg-background\" />\n        <div className=\"pointer-events-none absolute right-0 bottom-0 z-10 h-[25px] w-2 rounded-r-md bg-background\" />\n      </div>\n    </ConnectTooltipProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/drive-settings-form.impl-4yBGaTxe.js

@@ -0,0 +1,171 @@
+import { b as PowerhouseButton } from "./src-B2s8MAp7.js";
+import { t as Icon } from "./icon-CR_tC1gc.js";
+import { t as Label } from "./label-nH2HoKfI.js";
+import { ConnectSelect, Disclosure, Divider, FormInput, sharingTypeOptions } from "./connect/index.js";
+import { n as AvailableOfflineToggle, t as LocationInfo } from "./location-info-C3YbSsV0.js";
+import { forwardRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Controller, useForm } from "react-hook-form";
+//#region src/connect/components/form/inputs/drive-name-input.tsx
+const DriveNameInput = /*#__PURE__*/ forwardRef(function DriveNameInput(props, ref) {
+	return /* @__PURE__ */ jsx(FormInput, {
+		...props,
+		icon: props.icon ?? /* @__PURE__ */ jsx(Icon, { name: "Drive" }),
+		id: "driveName",
+		placeholder: "Drive name",
+		ref
+	});
+});
+//#endregion
+//#region src/connect/components/form/inputs/delete-drive.tsx
+function DeleteDrive(props) {
+	const { drive, handleDeleteDrive, onCancel } = props;
+	const [driveNameInput, setDriveNameInput] = useState("");
+	const isAllowedToDelete = driveNameInput === drive.header.name;
+	function deleteDrive() {
+		if (isAllowedToDelete) handleDeleteDrive();
+	}
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "mb-2 rounded-md bg-background p-4 text-center text-foreground",
+			children: "Are you sure you want to delete this drive? All files and subfolders within it will be removed. Do you want to proceed?"
+		}),
+		/* @__PURE__ */ jsx(DriveNameInput, {
+			icon: /* @__PURE__ */ jsx(Icon, { name: "Lock" }),
+			onChange: (event) => setDriveNameInput(event.target.value),
+			placeholder: "Enter drive name...",
+			value: driveNameInput
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [/* @__PURE__ */ jsx(PowerhouseButton, {
+				className: "w-full",
+				color: "light",
+				onClick: onCancel,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(PowerhouseButton, {
+				className: "w-full",
+				color: "red",
+				disabled: !isAllowedToDelete,
+				onClick: deleteDrive,
+				children: "Delete"
+			})]
+		})
+	] });
+}
+//#endregion
+//#region src/connect/components/form/inputs/sharing-type-form-input.tsx
+function SharingTypeFormInput(props) {
+	const { control, ...delegatedProps } = props;
+	return /* @__PURE__ */ jsx(Controller, {
+		control,
+		name: "sharingType",
+		render: ({ field }) => /* @__PURE__ */ jsx(ConnectSelect, {
+			...delegatedProps,
+			...field,
+			id: "sharingType",
+			items: sharingTypeOptions
+		})
+	});
+}
+//#endregion
+//#region src/connect/components/form/drive-settings-form.impl.tsx
+function DriveSettingsForm(props) {
+	const { drive, sharingType, availableOffline, systemInfo, onSubmit, handleDeleteDrive } = props;
+	const name = drive.header.name;
+	const [showLocationSettings, setShowLocationSettings] = useState(false);
+	const [showAbout, setShowAbout] = useState(false);
+	const [showDangerZone, setShowDangerZone] = useState(false);
+	const [showDeleteDrive, setShowDeleteDrive] = useState(false);
+	const { register, handleSubmit, control } = useForm({
+		mode: "onBlur",
+		defaultValues: {
+			name,
+			sharingType,
+			availableOffline
+		}
+	});
+	const location = sharingType === "PUBLIC" ? "SWITCHBOARD" : sharingType;
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: (e) => void handleSubmit(onSubmit)(e),
+		children: [
+			/* @__PURE__ */ jsx(DriveNameInput, { ...register("name") }),
+			/* @__PURE__ */ jsx(Divider, { className: "my-4" }),
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "sharingType",
+				children: "Sharing settings"
+			}),
+			/* @__PURE__ */ jsx(SharingTypeFormInput, { control }),
+			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
+			/* @__PURE__ */ jsxs(Disclosure, {
+				isOpen: showLocationSettings,
+				onOpenChange: () => setShowLocationSettings(!showLocationSettings),
+				title: "Location",
+				children: [/* @__PURE__ */ jsx(LocationInfo, { location }), /* @__PURE__ */ jsx(AvailableOfflineToggle, { ...register("availableOffline") })]
+			}),
+			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
+			/* @__PURE__ */ jsxs(Disclosure, {
+				isOpen: showAbout,
+				onOpenChange: () => setShowAbout(!showAbout),
+				title: "About this drive",
+				children: [
+					systemInfo.status === "local" && /* @__PURE__ */ jsx("p", {
+						className: "py-2 text-sm text-muted-foreground",
+						children: "Local drive — N/A"
+					}),
+					systemInfo.status === "loading" && /* @__PURE__ */ jsx("p", {
+						className: "py-2 text-sm text-muted-foreground",
+						children: "Loading…"
+					}),
+					systemInfo.status === "error" && /* @__PURE__ */ jsx("p", {
+						className: "py-2 text-sm text-destructive",
+						children: "Could not load system info"
+					}),
+					systemInfo.status === "ready" && /* @__PURE__ */ jsxs("div", {
+						className: "py-2 text-sm text-foreground",
+						children: [/* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: "Version:"
+							}),
+							" ",
+							systemInfo.version
+						] }), /* @__PURE__ */ jsxs("div", { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: "Git hash:"
+							}),
+							" ",
+							systemInfo.gitHash
+						] })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Divider, { className: "my-3" }),
+			/* @__PURE__ */ jsx(Disclosure, {
+				isOpen: showDangerZone,
+				onOpenChange: () => setShowDangerZone(!showDangerZone),
+				title: "Danger zone",
+				children: /* @__PURE__ */ jsxs("button", {
+					className: "flex gap-2 py-3 font-semibold text-destructive transition hover:hover-effect",
+					onClick: () => setShowDeleteDrive(true),
+					type: "button",
+					children: [/* @__PURE__ */ jsx(Icon, { name: "Trash" }), "Delete drive"]
+				})
+			}),
+			showDeleteDrive && showDangerZone ? /* @__PURE__ */ jsx(DeleteDrive, {
+				drive,
+				handleDeleteDrive,
+				onCancel: () => setShowDeleteDrive(false)
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, { className: "my-3" }), /* @__PURE__ */ jsx(PowerhouseButton, {
+				className: "mb-4 w-full",
+				type: "submit",
+				children: "Confirm"
+			})] })
+		]
+	});
+}
+//#endregion
+export { DriveSettingsForm };
+
+//# sourceMappingURL=drive-settings-form.impl-4yBGaTxe.js.map

package/dist/drive-settings-form.impl-4yBGaTxe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drive-settings-form.impl-4yBGaTxe.js","names":["Icon","forwardRef","FormInput","DriveNameInput","props","ref","icon","Icon","PowerhouseButton","useState","DriveNameInput","DeleteDrive","props","drive","handleDeleteDrive","onCancel","driveNameInput","setDriveNameInput","isAllowedToDelete","header","name","deleteDrive","event","target","value","Controller","ConnectSelect","sharingTypeOptions","SharingTypeFormInput","props","control","delegatedProps","field","Icon","PowerhouseButton","useState","useForm","Disclosure","Divider","AvailableOfflineToggle","DeleteDrive","DriveNameInput","Label","LocationInfo","SharingTypeFormInput","DriveSettingsForm","props","drive","sharingType","availableOffline","systemInfo","onSubmit","handleDeleteDrive","name","header","showLocationSettings","setShowLocationSettings","showAbout","setShowAbout","showDangerZone","setShowDangerZone","showDeleteDrive","setShowDeleteDrive","register","handleSubmit","control","mode","defaultValues","location","e","status","version","gitHash"],"sources":["../src/connect/components/form/inputs/drive-name-input.tsx","../src/connect/components/form/inputs/delete-drive.tsx","../src/connect/components/form/inputs/sharing-type-form-input.tsx","../src/connect/components/form/drive-settings-form.impl.tsx"],"sourcesContent":["import { Icon } from \"#design-system\";\nimport type { ComponentPropsWithRef, ForwardedRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { FormInput } from \"../../form-input/form-input.js\";\n\ntype DriveNameInputProps = Omit<\n  ComponentPropsWithRef<typeof FormInput>,\n  \"icon\" | \"id\"\n> & {\n  readonly icon?: React.JSX.Element;\n};\n\nexport const DriveNameInput = forwardRef(function DriveNameInput(\n  props: DriveNameInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  return (\n    <FormInput\n      {...props}\n      icon={props.icon ?? <Icon name=\"Drive\" />}\n      id=\"driveName\"\n      placeholder=\"Drive name\"\n      ref={ref}\n    />\n  );\n});\n","import { Icon, PowerhouseButton } from \"#design-system\";\nimport type { DocumentDriveDocument } from \"@powerhousedao/shared/document-drive\";\nimport { useState } from \"react\";\nimport { DriveNameInput } from \"./drive-name-input.js\";\n\nexport type DeleteDriveProps = {\n  drive: DocumentDriveDocument;\n  handleDeleteDrive: () => void;\n  onCancel: () => void;\n};\n\nexport function DeleteDrive(props: DeleteDriveProps) {\n  const { drive, handleDeleteDrive, onCancel } = props;\n  const [driveNameInput, setDriveNameInput] = useState(\"\");\n\n  const isAllowedToDelete = driveNameInput === drive.header.name;\n\n  function deleteDrive() {\n    if (isAllowedToDelete) {\n      handleDeleteDrive();\n    }\n  }\n\n  return (\n    <div>\n      <p className=\"mb-2 rounded-md bg-background p-4 text-center text-foreground\">\n        Are you sure you want to delete this drive? All files and subfolders\n        within it will be removed. Do you want to proceed?\n      </p>\n      <DriveNameInput\n        icon={<Icon name=\"Lock\" />}\n        onChange={(event) => setDriveNameInput(event.target.value)}\n        placeholder=\"Enter drive name...\"\n        value={driveNameInput}\n      />\n      <div className=\"flex gap-3\">\n        <PowerhouseButton className=\"w-full\" color=\"light\" onClick={onCancel}>\n          Cancel\n        </PowerhouseButton>\n        <PowerhouseButton\n          className=\"w-full\"\n          color=\"red\"\n          disabled={!isAllowedToDelete}\n          onClick={deleteDrive}\n        >\n          Delete\n        </PowerhouseButton>\n      </div>\n    </div>\n  );\n}\n","import type { SharingType } from \"@powerhousedao/shared/document-drive\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport type { Control, Path } from \"react-hook-form\";\nimport { Controller } from \"react-hook-form\";\nimport { ConnectSelect } from \"../../select/select.js\";\nimport { sharingTypeOptions } from \"../../../constants/options.js\";\n\ntype SharingTypeFormInputProps<T extends { sharingType: SharingType }> = Omit<\n  ComponentPropsWithRef<typeof ConnectSelect>,\n  \"id\" | \"items\" | \"value\" | \"onChange\"\n> & {\n  readonly control: Control<T>;\n};\nexport function SharingTypeFormInput<T extends { sharingType: SharingType }>(\n  props: SharingTypeFormInputProps<T>,\n) {\n  const { control, ...delegatedProps } = props;\n\n  return (\n    <Controller\n      control={control}\n      name={\"sharingType\" as Path<T>}\n      render={({ field }) => (\n        <ConnectSelect\n          {...delegatedProps}\n          {...field}\n          id=\"sharingType\"\n          items={sharingTypeOptions}\n        />\n      )}\n    />\n  );\n}\n","import { Icon, PowerhouseButton } from \"#design-system\";\nimport type { DriveSystemInfoState } from \"@powerhousedao/reactor-browser\";\nimport type { DocumentDriveDocument } from \"@powerhousedao/shared/document-drive\";\nimport type { SharingType } from \"@powerhousedao/shared/document-drive\";\nimport { useState } from \"react\";\nimport type { SubmitHandler } from \"react-hook-form\";\nimport { useForm } from \"react-hook-form\";\nimport { Disclosure } from \"../disclosure/disclosure.js\";\nimport { Divider } from \"../divider/divider.js\";\nimport { AvailableOfflineToggle } from \"./inputs/available-offline-toggle.js\";\nimport { DeleteDrive } from \"./inputs/delete-drive.js\";\nimport { DriveNameInput } from \"./inputs/drive-name-input.js\";\nimport { Label } from \"./inputs/label.js\";\nimport { LocationInfo } from \"./inputs/location-info.js\";\nimport { SharingTypeFormInput } from \"./inputs/sharing-type-form-input.js\";\n\ntype Inputs = {\n  name: string;\n  sharingType: SharingType;\n  availableOffline: boolean;\n};\n\ntype DriveSettingsFormProps = {\n  drive: DocumentDriveDocument;\n  sharingType: SharingType;\n  availableOffline: boolean;\n  systemInfo: DriveSystemInfoState;\n  onSubmit: DriveSettingsFormSubmitHandler;\n  handleCancel: () => void;\n  handleDeleteDrive: () => void;\n};\n\nexport type DriveSettingsFormSubmitHandler = SubmitHandler<Inputs>;\n\nexport function DriveSettingsForm(props: DriveSettingsFormProps) {\n  const {\n    drive,\n    sharingType,\n    availableOffline,\n    systemInfo,\n    onSubmit,\n    handleDeleteDrive,\n  } = props;\n  const name = drive.header.name;\n\n  const [showLocationSettings, setShowLocationSettings] = useState(false);\n  const [showAbout, setShowAbout] = useState(false);\n  const [showDangerZone, setShowDangerZone] = useState(false);\n  const [showDeleteDrive, setShowDeleteDrive] = useState(false);\n\n  const { register, handleSubmit, control } = useForm<Inputs>({\n    mode: \"onBlur\",\n    defaultValues: {\n      name,\n      sharingType,\n      availableOffline,\n    },\n  });\n\n  const location = sharingType === \"PUBLIC\" ? \"SWITCHBOARD\" : sharingType;\n\n  return (\n    <form onSubmit={(e) => void handleSubmit(onSubmit)(e)}>\n      <DriveNameInput {...register(\"name\")} />\n      <Divider className=\"my-4\" />\n      <Label htmlFor=\"sharingType\">Sharing settings</Label>\n      <SharingTypeFormInput control={control} />\n      <Divider className=\"my-3\" />\n      <Disclosure\n        isOpen={showLocationSettings}\n        onOpenChange={() => setShowLocationSettings(!showLocationSettings)}\n        title=\"Location\"\n      >\n        <LocationInfo location={location} />\n        <AvailableOfflineToggle {...register(\"availableOffline\")} />\n      </Disclosure>\n      <Divider className=\"my-3\" />\n      <Disclosure\n        isOpen={showAbout}\n        onOpenChange={() => setShowAbout(!showAbout)}\n        title=\"About this drive\"\n      >\n        {systemInfo.status === \"local\" && (\n          <p className=\"py-2 text-sm text-muted-foreground\">\n            Local drive — N/A\n          </p>\n        )}\n        {systemInfo.status === \"loading\" && (\n          <p className=\"py-2 text-sm text-muted-foreground\">Loading…</p>\n        )}\n        {systemInfo.status === \"error\" && (\n          <p className=\"py-2 text-sm text-destructive\">\n            Could not load system info\n          </p>\n        )}\n        {systemInfo.status === \"ready\" && (\n          <div className=\"py-2 text-sm text-foreground\">\n            <div>\n              <span className=\"font-medium\">Version:</span> {systemInfo.version}\n            </div>\n            <div>\n              <span className=\"font-medium\">Git hash:</span>{\" \"}\n              {systemInfo.gitHash}\n            </div>\n          </div>\n        )}\n      </Disclosure>\n      <Divider className=\"my-3\" />\n      <Disclosure\n        isOpen={showDangerZone}\n        onOpenChange={() => setShowDangerZone(!showDangerZone)}\n        title=\"Danger zone\"\n      >\n        <button\n          className=\"flex gap-2 py-3 font-semibold text-destructive transition hover:hover-effect\"\n          onClick={() => setShowDeleteDrive(true)}\n          type=\"button\"\n        >\n          <Icon name=\"Trash\" />\n          Delete drive\n        </button>\n      </Disclosure>\n      {showDeleteDrive && showDangerZone ? (\n        <DeleteDrive\n          drive={drive}\n          handleDeleteDrive={handleDeleteDrive}\n          onCancel={() => setShowDeleteDrive(false)}\n        />\n      ) : (\n        <>\n          <Divider className=\"my-3\" />\n          <PowerhouseButton className=\"mb-4 w-full\" type=\"submit\">\n            Confirm\n          </PowerhouseButton>\n        </>\n      )}\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/{enum-field-qgV9wsyI.d.ts → enum-field-CSeQE4Ss.d.ts}

@@ -1,5 +1,5 @@
-import { n as RadioGroupFieldProps } from "./radio-group-field-CjX_Zt0C.js";
-import { n as SelectFieldProps } from "./select-field-BuXjM43L.js";
+import { n as RadioGroupFieldProps } from "./radio-group-field-Bsf4waat.js";
+import { n as SelectFieldProps } from "./select-field-DbFd1YiC.js";
 import React from "react";
 //#region src/ui/components/enum-field/enum-field.d.ts
 type EnumFieldProps = ({
@@ -13,4 +13,4 @@ declare const EnumField: React.ForwardRefExoticComponent<EnumFieldProps & React.
 //#endregion
 export { EnumFieldProps as n, EnumField as t };
 export {};
-//# sourceMappingURL=enum-field-qgV9wsyI.d.ts.map
+//# sourceMappingURL=enum-field-CSeQE4Ss.d.ts.map

package/dist/{enum-field-qgV9wsyI.d.ts.map → enum-field-CSeQE4Ss.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"enum-field-qgV9wsyI.d.ts","names":[],"sources":["../src/ui/components/enum-field/enum-field.tsx"],"mappings":";;;;KAUY;EAEN;KACG,uBAAuB;EAE1B;IACE;EAEF;IACE;cAEK,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA,oBAAA"}
+{"version":3,"file":"enum-field-CSeQE4Ss.d.ts","names":[],"sources":["../src/ui/components/enum-field/enum-field.tsx"],"mappings":";;;;KAUY;EAEN;KACG,uBAAuB;EAE1B;IACE;EAEF;IACE;cAEK,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA,oBAAA"}

package/dist/formatted-json-viewer.impl-C198BZt5.js

@@ -0,0 +1,58 @@
+import { t as Icon } from "./icon-CR_tC1gc.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@powerhousedao/reactor-browser";
+import { isStrictEqual, isString } from "remeda";
+import { JsonView } from "@uiw/react-json-view";
+import { darkTheme } from "@uiw/react-json-view/dark";
+import { lightTheme } from "@uiw/react-json-view/light";
+//#region src/connect/components/formatted-json-viewer.impl.tsx
+function FormattedJsonViewer(props) {
+	const { theme } = useTheme();
+	return /* @__PURE__ */ jsxs(JsonView, {
+		displayDataTypes: false,
+		displayObjectSize: false,
+		style: theme === "light" ? lightTheme : darkTheme,
+		...props,
+		children: [/* @__PURE__ */ jsx(JsonView.Copied, { render: ({ onClick, ...props }) => {
+			if (props["data-copied"]) return /* @__PURE__ */ jsx(Icon, {
+				...props,
+				className: "inline-block text-success",
+				name: "FilesEarmark",
+				size: 16
+			});
+			return /* @__PURE__ */ jsx(Icon, {
+				...props,
+				onClick,
+				className: "inline-block cursor-pointer text-foreground",
+				name: "FilesEarmark",
+				size: 16
+			});
+		} }), /* @__PURE__ */ jsx(JsonView.String, { render: ({ children, ...rest }, { value, keyName }) => {
+			if (isString(children) && isString(value) && isStrictEqual(children, value) && value.length > 30) return /* @__PURE__ */ jsx("span", {
+				...rest,
+				className: "inline-grid",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "pl-[1ch] indent-[-1ch] wrap-anywhere hyphens-none",
+					style: { maxWidth: `${60 - keyName.toString().length}ch` },
+					children: [
+						"\"",
+						children,
+						"\""
+					]
+				})
+			});
+			return /* @__PURE__ */ jsxs("span", {
+				...rest,
+				children: [
+					"\"",
+					children,
+					"\""
+				]
+			});
+		} })]
+	});
+}
+//#endregion
+export { FormattedJsonViewer };
+
+//# sourceMappingURL=formatted-json-viewer.impl-C198BZt5.js.map

package/dist/formatted-json-viewer.impl-C198BZt5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatted-json-viewer.impl-C198BZt5.js","names":["useTheme","JsonView","darkTheme","lightTheme","isStrictEqual","isString","Icon","FormattedJsonViewer","props","theme","style","onClick","children","rest","value","keyName","maxLength","length","maxWidth","toString"],"sources":["../src/connect/components/formatted-json-viewer.impl.tsx"],"sourcesContent":["import { useTheme } from \"@powerhousedao/reactor-browser\";\nimport { JsonView, type JsonViewProps } from \"@uiw/react-json-view\";\nimport { darkTheme } from \"@uiw/react-json-view/dark\";\nimport { lightTheme } from \"@uiw/react-json-view/light\";\nimport { isStrictEqual, isString } from \"remeda\";\nimport { Icon } from \"../../powerhouse/index.js\";\n\n/* Shows arbitrary JSON content in a nicely formatted viewer.\n * Takes all the same props as the JSON view React component.\n * Provides some quality of life improvements:\n *\n * allows expand and collapse of any / all of the rendered fields\n * Allows copy-paste of the whole object as well as individual fields, with a success indicator\n * Formats very long text fields so that they are first truncated, and then if expanded word wrap applies\n */\nexport function FormattedJsonViewer(props: JsonViewProps<object>) {\n  const { theme } = useTheme();\n  const style = theme === \"light\" ? lightTheme : darkTheme;\n  return (\n    <JsonView\n      displayDataTypes={false}\n      displayObjectSize={false}\n      style={style}\n      {...props}\n    >\n      <JsonView.Copied\n        render={({ onClick, ...props }) => {\n          if ((props as { \"data-copied\": boolean })[\"data-copied\"]) {\n            return (\n              <Icon\n                {...props}\n                className=\"inline-block text-success\"\n                name=\"FilesEarmark\"\n                size={16}\n              />\n            );\n          }\n          return (\n            <Icon\n              {...props}\n              onClick={onClick}\n              className=\"inline-block cursor-pointer text-foreground\"\n              name=\"FilesEarmark\"\n              size={16}\n            />\n          );\n        }}\n      />\n      <JsonView.String\n        render={({ children, ...rest }, { value, keyName }) => {\n          // strings are truncated with ellipsis at 30 chars in this component by default\n          const maxLength = 30;\n          if (\n            // if the children are a plain string, we know this is a text node\n            isString(children) &&\n            // the value should therefore also be a string\n            isString(value) &&\n            // when the content is truncated, the children will be the truncated content\n            // and the value will be the original content\n            // we know that the content is not truncated if the value and the children are the same\n            isStrictEqual(children, value) &&\n            // if the string is long then apply word wrap to avoid letting the parent component put everything\n            // on one line\n            value.length > maxLength\n          ) {\n            return (\n              /* use inline grid so that this text is still aligned with the field name */\n              <span {...rest} className=\"inline-grid\">\n                <span\n                  // We must wrap anywhere because data can be of any length\n                  // do not use hyphens, show the raw content\n                  // apply one character of left padding and negative indent because of the string quotation mark\n                  className=\"pl-[1ch] indent-[-1ch] wrap-anywhere hyphens-none\"\n                  style={{\n                    // calculate the line width from the width of the key in the json\n                    maxWidth: `${60 - keyName.toString().length}ch`,\n                  }}\n                >\n                  \"{children}\"\n                </span>\n              </span>\n            );\n          }\n          return <span {...rest}>\"{children}\"</span>;\n        }}\n      />\n    </JsonView>\n  );\n}\n"],"mappings":";;;;;;;;AAeA,SAAgBO,oBAAoBC,OAA8B;CAChE,MAAM,EAAEC,UAAUT,SAAS;CAE3B,OACE,qBAAC,UAAD;EACE,kBAAkB;EAClB,mBAAmB;EACnB,OALUS,UAAU,UAAUN,aAAaD;EAM3C,GAAIM;EAJN,UAAA,CAME,oBAAC,SAAS,QAAV,EACE,SAAS,EAAEG,SAAS,GAAGH,YAAY;GACjC,IAAKA,MAAqC,gBACxC,OACE,oBAAC,MAAD;IACE,GAAIA;IACJ,WAAU;IACV,MAAK;IACL,MAAM;GAAG,CAAA;GAIf,OACE,oBAAC,MAAD;IACE,GAAIA;IACKG;IACT,WAAU;IACV,MAAK;IACL,MAAM;GAAG,CAAA;EAGf,EAAE,CAAA,GAEJ,oBAAC,SAAS,QAAV,EACE,SAAS,EAAEC,UAAU,GAAGC,QAAQ,EAAEC,OAAOC,cAAc;GAGrD,IAEEV,SAASO,QAAQ,KAEjBP,SAASS,KAAK,KAIdV,cAAcQ,UAAUE,KAAK,KAG7BA,MAAMG,SAASD,IAEf,OAEE,oBAAC,QAAD;IAAM,GAAIH;IAAM,WAAU;IACxB,UAAA,qBAAC,QAAD;KAIE,WAAU;KACV,OAAO,EAELK,UAAU,GAAG,KAAKH,QAAQI,SAAS,CAAC,CAACF,OAAM,IAC7C;KARF,UAAA;MAQI;MAEAL;MAAS;KACP;;GACF,CAAA;GAGV,OAAO,qBAAC,QAAD;IAAM,GAAIC;IAAV,UAAA;KAAgB;KAAED;KAAS;IAAO;;EAC3C,EAAE,CAAA,CAEI;;AAEd"}