@superxd-studio/adptr 0.5.0

package/chunks/canvas-BJ15-XxE.js

@@ -0,0 +1,598 @@
+import { O as e, f as t, g as n, n as r, p as i, u as a } from "./callout-DKMHSnjc.js";
+import { Children as o, cloneElement as s, createContext as c, isValidElement as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { Label as _, Link as v, TextArea as y, TextField as b } from "react-aria-components";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import C from "react-markdown";
+import w from "remark-gfm";
+//#region src/reusable/web/message/copy.ts
+var T = {
+	copy: "Copy response",
+	copyCode: "Copy code",
+	copying: "Copying",
+	copied: "Copied",
+	copyFailed: "Couldn’t copy. Select the text and copy it instead.",
+	code: "Code",
+	table: "Response table",
+	footnotes: "Notes",
+	back: "Back to the reference",
+	previous: "Previous version",
+	next: "Next version",
+	versions: "Message versions",
+	version: "Version",
+	edit: "Edit your message",
+	editInput: "Edit message",
+	save: "Save and resend",
+	cancel: "Cancel edit",
+	editNote: "Resending creates a new version. The original conversation stays available.",
+	editFailed: "This message couldn’t be resent. Your edit is still here. Try again when the response has stopped.",
+	regenerate: "Regenerate response",
+	latest: "Jump to latest message",
+	transcript: "Conversation messages"
+}, E = /* @__PURE__ */ new Set(["code", "pre"]);
+function D({ fresh: e = 2 } = {}) {
+	return (t) => {
+		let n = [], r = (e) => {
+			e.children = e.children.flatMap((e) => {
+				if (e.type === "element") {
+					let t = e;
+					return E.has(t.tagName) || r(t), [t];
+				}
+				return e.type === "text" ? e.value.split(/(\s+)/).filter(Boolean).map((e) => {
+					if (/^\s+$/.test(e)) return {
+						type: "text",
+						value: e
+					};
+					let t = {
+						type: "element",
+						tagName: "span",
+						properties: { className: ["stream-word"] },
+						children: [{
+							type: "text",
+							value: e
+						}]
+					};
+					return n.push(t), t;
+				}) : [e];
+			});
+		};
+		r(t);
+		for (let t of n.slice(-e)) t.properties.className.push("stream-word--fresh");
+		n.at(-1)?.children.push({
+			type: "element",
+			tagName: "span",
+			properties: {
+				className: ["stream-caret"],
+				ariaHidden: "true"
+			},
+			children: []
+		});
+	};
+}
+//#endregion
+//#region src/reusable/web/message/index.tsx
+function O({ text: e, label: t, iconOnly: i = !1, isDisabled: o, copy: s = T, writeText: c }) {
+	let [l, u] = g({
+		text: e,
+		phase: "idle"
+	}), f = h(0), p = h(void 0), m = l.text === e ? l.phase : "idle";
+	d(() => () => {
+		++f.current, clearTimeout(p.current);
+	}, [e]);
+	let _ = async () => {
+		let t = ++f.current;
+		clearTimeout(p.current), u({
+			text: e,
+			phase: "pending"
+		});
+		try {
+			if (c) await c(e);
+			else {
+				if (!navigator.clipboard) throw Error("Clipboard unavailable");
+				await navigator.clipboard.writeText(e);
+			}
+			if (t !== f.current) return;
+			u({
+				text: e,
+				phase: "copied"
+			}), p.current = setTimeout(() => {
+				t === f.current && u({
+					text: e,
+					phase: "idle"
+				});
+			}, 2500);
+		} catch {
+			t === f.current && u({
+				text: e,
+				phase: "error"
+			});
+		}
+	}, v = m === "copied" ? s.copied : m === "pending" ? s.copying : t ?? s.copy;
+	return /* @__PURE__ */ S("div", {
+		className: "flex min-w-0 flex-wrap items-center gap-2",
+		children: [/* @__PURE__ */ S(r, {
+			variant: "ghost",
+			size: i ? "icon-sm" : "sm",
+			"aria-label": v,
+			isDisabled: o || !e || m === "pending",
+			onPress: _,
+			children: [x(m === "copied" ? a : n, {}), i ? null : v]
+		}), /* @__PURE__ */ x("span", {
+			role: "status",
+			"aria-live": "polite",
+			className: m === "error" ? "type-caption text-fg-subtle" : "sr-only",
+			children: m === "error" ? s.copyFailed : m === "copied" ? s.copied : ""
+		})]
+	});
+}
+function k({ code: t, language: n, className: r, isStreaming: i, writeText: a, copy: o = T }) {
+	let s = n?.trim().slice(0, 50) || o.code;
+	return /* @__PURE__ */ S("div", {
+		className: e("reusable-code min-w-0 overflow-hidden rounded-control border border-line-subtle bg-surface-muted", r),
+		children: [/* @__PURE__ */ S("div", {
+			className: "flex flex-wrap items-center justify-between gap-2 border-b border-line-subtle px-4 py-2",
+			children: [/* @__PURE__ */ x("span", {
+				className: "font-mono type-caption text-fg-subtle",
+				children: s
+			}), /* @__PURE__ */ x(O, {
+				text: t,
+				label: o.copyCode,
+				isDisabled: i,
+				writeText: a,
+				copy: o
+			})]
+		}), /* @__PURE__ */ x("pre", {
+			tabIndex: 0,
+			role: "group",
+			"aria-label": `${o.code}: ${s}`,
+			className: "m-0 max-w-full overflow-x-auto rounded-cell px-4 py-control-y font-mono type-caption text-fg-emphasis outline-none focus-visible:focus-ring",
+			children: /* @__PURE__ */ x("code", { children: t })
+		})]
+	});
+}
+function A(e) {
+	if (/^[#]/.test(e) || /^\/(?!\/)/.test(e) && !e.includes("\\") && !Array.from(e).some((e) => e.charCodeAt(0) <= 32)) return e;
+	try {
+		let t = new URL(e);
+		if (["https:", "http:"].includes(t.protocol) && !t.username && !t.password || t.protocol === "mailto:") return e;
+	} catch {}
+	return "";
+}
+function j({ text: t, className: n, copy: r = T, writeText: i, isStreaming: a, streamingTail: s = !1 }) {
+	let c = f().replace(/[^\w-]/g, ""), u = m(() => ({
+		a: ({ href: e, children: t, id: n, ...r }) => e ? /* @__PURE__ */ x(v, {
+			href: e,
+			id: n,
+			"aria-label": r["aria-label"],
+			"aria-describedby": r["aria-describedby"] === "footnote-label" ? `sxd-${c}-notes` : r["aria-describedby"],
+			className: "rounded-cell text-fg-emphasis underline decoration-line-emphasis underline-offset-4 outline-none data-focus-visible:focus-ring",
+			children: t
+		}) : /* @__PURE__ */ x("span", { children: t }),
+		img: ({ alt: e }) => /* @__PURE__ */ x("span", { children: e }),
+		h2: ({ id: e, children: t, className: n }) => /* @__PURE__ */ x("h2", {
+			id: e === "footnote-label" ? `sxd-${c}-notes` : e,
+			className: n,
+			children: t
+		}),
+		pre: ({ children: e }) => {
+			let t = o.toArray(e).find(l)?.props;
+			return /* @__PURE__ */ x(k, {
+				code: String(t?.children ?? "").replace(/\n$/, ""),
+				language: t?.className?.replace(/^language-/, ""),
+				copy: r,
+				writeText: i,
+				isStreaming: a
+			});
+		},
+		table: ({ children: e }) => /* @__PURE__ */ x("div", {
+			role: "group",
+			tabIndex: 0,
+			"aria-label": r.table,
+			className: "max-w-full overflow-x-auto rounded-control border border-line-subtle outline-none focus-visible:focus-ring",
+			children: /* @__PURE__ */ x("table", {
+				className: "w-full border-collapse type-caption",
+				children: e
+			})
+		})
+	}), [
+		r,
+		c,
+		i,
+		a
+	]);
+	return /* @__PURE__ */ x("div", {
+		className: e("conversation-markdown reusable-markdown min-w-0 type-body whitespace-normal text-fg-emphasis", n),
+		children: /* @__PURE__ */ x(C, {
+			skipHtml: !0,
+			remarkPlugins: [w],
+			rehypePlugins: s ? [D] : [],
+			urlTransform: A,
+			remarkRehypeOptions: {
+				clobberPrefix: `sxd-${c}-`,
+				footnoteLabel: r.footnotes,
+				footnoteBackLabel: r.back
+			},
+			components: u,
+			children: t
+		})
+	});
+}
+function M(e) {
+	return /* @__PURE__ */ x(j, {
+		...e,
+		isStreaming: !0,
+		streamingTail: !0
+	});
+}
+function N({ branch: e, isDisabled: n, onPrevious: a, onNext: o, copy: s = T }) {
+	return e.count < 2 ? null : /* @__PURE__ */ S("div", {
+		role: "group",
+		"aria-label": s.versions,
+		className: "flex items-center gap-1",
+		children: [
+			a ? /* @__PURE__ */ x(r, {
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": s.previous,
+				isDisabled: n || e.index < 1,
+				onPress: a,
+				children: /* @__PURE__ */ x(t, {})
+			}) : null,
+			/* @__PURE__ */ S("span", {
+				"aria-label": `${s.version} ${e.index + 1} / ${e.count}`,
+				className: "font-mono type-caption text-fg-subtle numeric",
+				children: [
+					e.index + 1,
+					" / ",
+					e.count
+				]
+			}),
+			o ? /* @__PURE__ */ x(r, {
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": s.next,
+				isDisabled: n || e.index >= e.count - 1,
+				onPress: o,
+				children: /* @__PURE__ */ x(i, {})
+			}) : null
+		]
+	});
+}
+function P({ text: e, autoFocus: t = !1, hasFiles: n, isDisabled: i, onSave: a, onCancel: o, copy: s = T }) {
+	let [c, l] = g(e), [u, p] = g(!1), m = h(null), v = f();
+	return d(() => {
+		t && m.current?.focus({ preventScroll: !0 });
+	}, [t]), /* @__PURE__ */ S("div", {
+		className: "flex w-full min-w-0 flex-col gap-3 rounded-surface border border-line-input bg-surface p-4 shadow-control",
+		children: [
+			/* @__PURE__ */ S(b, {
+				value: c,
+				onChange: (e) => {
+					l(e), p(!1);
+				},
+				isDisabled: i,
+				children: [/* @__PURE__ */ x(_, {
+					className: "sr-only",
+					children: s.editInput
+				}), /* @__PURE__ */ x(y, {
+					ref: m,
+					rows: 3,
+					maxLength: 2e4,
+					"aria-describedby": v,
+					onKeyDown: (e) => {
+						e.key === "Escape" && !e.nativeEvent.isComposing && (e.preventDefault(), e.stopPropagation(), o());
+					},
+					className: "max-h-48 min-h-24 w-full resize-y rounded-control border border-line-input bg-surface px-control-md-x py-control-y type-body text-fg-emphasis outline-none focus-visible:focus-ring"
+				})]
+			}),
+			/* @__PURE__ */ x("p", {
+				id: v,
+				className: "type-caption text-fg-subtle",
+				children: s.editNote
+			}),
+			/* @__PURE__ */ x("p", {
+				role: "status",
+				className: u ? "type-caption text-error" : "sr-only",
+				children: u ? s.editFailed : ""
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: [/* @__PURE__ */ x(r, {
+					size: "sm",
+					onPress: o,
+					children: s.cancel
+				}), /* @__PURE__ */ x(r, {
+					size: "sm",
+					variant: "primary",
+					isDisabled: i || c === e || !c.trim() && !n,
+					onPress: () => {
+						a(c) || p(!0);
+					},
+					children: s.save
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/canvas/copy.ts
+var F = {
+	previous: "Previous state",
+	loading: "Loading",
+	ready: "Ready",
+	details: "Your details",
+	holding: "Holding the time",
+	submitting: "Submitting",
+	failed: "Try again",
+	checking: "Checking status",
+	confirm: "Confirm the change",
+	booked: "Booked",
+	requested: "Requested",
+	moved: "Booking moved",
+	manage: "Manage booking",
+	cancelling: "Cancelling",
+	cancelled: "Cancelled",
+	closed: "Closed",
+	calendar: "Calendar",
+	event: "Event details",
+	edit: "Edit event",
+	saving: "Saving changes",
+	saved: "Changes saved",
+	discard: "Unsaved changes",
+	review: "Choose changes",
+	applying: "Applying changes",
+	partial: "Review remaining changes",
+	complete: "Changes applied",
+	denied: "Changes declined",
+	conflict: "Draft changed",
+	blocked: "View only",
+	uncertain: "Check the outcome",
+	support: "Support request",
+	supportSaved: "Request saved"
+};
+//#endregion
+//#region src/components/canvas/recorder.ts
+function I() {
+	let e = !1, t = [], n, r = /* @__PURE__ */ new Map();
+	return Object.assign((i, a) => {
+		let o = t.at(-1);
+		if (o?.terminal) return;
+		let s = r.get(a) === i.phase;
+		if (s && a !== n) return;
+		if (r.set(a, i.phase), !e || !t.length && s) {
+			n = a;
+			return;
+		}
+		let c = s || o?.yieldToChild && a !== n;
+		return n = a, t = c ? [...t.slice(0, -1), i] : [...t, i], t;
+	}, { start: () => {
+		e = !0;
+	} });
+}
+//#endregion
+//#region src/components/superxd-arrow.tsx
+var L = "M5 12h14m-6-6 6 6-6 6";
+function R({ className: t }) {
+	return /* @__PURE__ */ x("svg", {
+		className: e("sxd-icon", t),
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.7,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ x("path", { d: L })
+	});
+}
+//#endregion
+//#region src/components/canvas/connector.tsx
+function z() {
+	return /* @__PURE__ */ x("span", {
+		"data-canvas-connector": !0,
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 -translate-y-1/2 text-system-blue",
+		children: /* @__PURE__ */ x(R, { className: "size-6 rotate-90" })
+	});
+}
+//#endregion
+//#region src/components/canvas/index.tsx
+var B = c(!1), V = c(!1), H = c(null), U = c(null), W = c(null);
+function G() {
+	let e = u(W);
+	return u(V) ? null : e;
+}
+function K({ children: t }) {
+	let n = u(H), [r, i] = g([]), [a] = g(() => I()), [o] = g(() => (e, t) => {
+		let n = a({
+			...e,
+			node: Z(e.node)
+		}, t);
+		n && i(n);
+	});
+	return /* @__PURE__ */ S("div", {
+		className: "flex min-w-0 flex-col gap-20",
+		"data-observed-canvas": !0,
+		children: [/* @__PURE__ */ x("div", {
+			"data-live-demo": !0,
+			"data-canvas-current": "true",
+			"data-current": "true",
+			className: "min-w-0",
+			onPointerDownCapture: a.start,
+			onKeyDownCapture: a.start,
+			onClickCapture: a.start,
+			children: /* @__PURE__ */ x(W.Provider, {
+				value: o,
+				children: t
+			})
+		}), /* @__PURE__ */ x("div", {
+			"data-state-history": !0,
+			hidden: !n || !r.length,
+			className: "flex min-w-0 flex-col gap-20 empty:hidden",
+			children: r.map((t, n) => /* @__PURE__ */ S("div", {
+				"data-canvas-phase": t.phase,
+				"data-canvas-snapshot": !0,
+				"data-canvas-current": "false",
+				"data-current": "false",
+				"data-generative-step": t.phase.startsWith("generative-") ? t.phase.split("-")[1] : void 0,
+				className: e("relative mx-auto w-full min-w-0", t.className),
+				children: [
+					n > 0 ? /* @__PURE__ */ x(z, {}) : null,
+					/* @__PURE__ */ x(Y, {
+						index: n,
+						label: t.label,
+						previous: n < r.length - 1
+					}),
+					/* @__PURE__ */ x("div", {
+						"data-canvas-content": !0,
+						inert: !0,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ x(V.Provider, {
+							value: !0,
+							children: t.node
+						})
+					})
+				]
+			}, n))
+		})]
+	});
+}
+function q({ children: e }) {
+	let t = u(B), n = u(U), r = u(H), i = u(W), a = u(V);
+	return r !== null && !i && !a ? /* @__PURE__ */ x(K, { children: e }) : t && !n ? /* @__PURE__ */ x(J, { children: e }) : e;
+}
+function J({ children: t }) {
+	let [n, r] = g([]), [i, a] = g(null), o = h(null), s = h(null), c = h(!1), [l] = g(() => (e) => {
+		let t = o.current;
+		t?.terminal || (t && t.phase !== e.phase && r((e) => [...e, {
+			...t,
+			node: Z(t.node)
+		}]), o.current = e, a((t) => t?.phase === e.phase && t.label === e.label && t.terminal === e.terminal ? t : {
+			phase: e.phase,
+			label: e.label,
+			terminal: e.terminal
+		}));
+	});
+	return d(() => {
+		if (!c.current || !i) return;
+		let e = s.current?.querySelector("[data-canvas-current=\"true\"]");
+		e && (e.contains(document.activeElement) || e.focus({ preventScroll: !0 }), e.scrollIntoView({
+			block: "nearest",
+			behavior: "instant"
+		}));
+	}, [i]), /* @__PURE__ */ S("div", {
+		ref: s,
+		"data-canvas-sequence": !0,
+		className: "flex w-full min-w-0 flex-col gap-20",
+		onPointerDownCapture: () => {
+			c.current = !0;
+		},
+		onKeyDownCapture: () => {
+			c.current = !0;
+		},
+		children: [n.map((t, n) => /* @__PURE__ */ S("div", {
+			"data-canvas-phase": t.phase,
+			"data-canvas-current": "false",
+			className: e("relative mx-auto w-full min-w-0", t.className),
+			children: [
+				n > 0 ? /* @__PURE__ */ x(z, {}) : null,
+				/* @__PURE__ */ x(Y, {
+					index: n,
+					label: t.label,
+					previous: !0
+				}),
+				/* @__PURE__ */ x("div", {
+					inert: !0,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ x(V.Provider, {
+						value: !0,
+						children: t.node
+					})
+				})
+			]
+		}, n)), /* @__PURE__ */ S("div", {
+			"data-canvas-phase": i?.phase,
+			"data-canvas-current": "true",
+			"data-canvas-terminal": i?.terminal || void 0,
+			tabIndex: -1,
+			className: "relative min-w-0 scroll-mt-6 outline-none",
+			children: [
+				n.length > 0 ? /* @__PURE__ */ x(z, {}) : null,
+				i ? /* @__PURE__ */ x(Y, {
+					index: n.length,
+					label: i.label
+				}) : null,
+				/* @__PURE__ */ x(U.Provider, {
+					value: l,
+					children: t
+				})
+			]
+		})]
+	});
+}
+function Y({ index: e, label: t, previous: n }) {
+	return /* @__PURE__ */ S("div", {
+		"data-canvas-caption": !0,
+		className: "mb-3 flex flex-wrap justify-between gap-2 font-mono type-caption text-system-blue",
+		children: [/* @__PURE__ */ S("span", { children: [
+			String(e + 1).padStart(2, "0"),
+			" ",
+			t
+		] }), n ? /* @__PURE__ */ x("span", { children: F.previous }) : null]
+	});
+}
+function X({ phase: e, label: t, terminal: n = !1, frameClassName: r, snapshot: i, children: a }) {
+	let o = u(U), s = G(), c = f(), l = u(V);
+	return p(() => {
+		l || o?.({
+			phase: e,
+			label: t,
+			terminal: n,
+			node: a
+		}), s?.({
+			phase: e,
+			label: t,
+			terminal: n,
+			className: r,
+			node: i ?? a
+		}, c);
+	}, [
+		o,
+		s,
+		c,
+		l,
+		e,
+		t,
+		n,
+		r,
+		i,
+		a
+	]), a;
+}
+function Z(e) {
+	return o.map(e, (e) => {
+		if (!l(e)) return e;
+		let t = {};
+		"ref" in e.props && (t.ref = null);
+		for (let n of [
+			"measureRef",
+			"triggerRef",
+			"eventTriggerRef"
+		]) n in e.props && (t[n] = void 0);
+		if (typeof e.type == "string") for (let n of [
+			"id",
+			"aria-labelledby",
+			"aria-describedby",
+			"htmlFor"
+		]) n in e.props && (t[n] = void 0);
+		return "autoFocus" in e.props && (t.autoFocus = !1), "children" in e.props && (t.children = Z(e.props.children)), s(e, t);
+	});
+}
+function Q({ publish: e, children: t }) {
+	return /* @__PURE__ */ x(U.Provider, {
+		value: e,
+		children: t
+	});
+}
+//#endregion
+export { Z as a, F as c, O as d, P as f, T as h, Q as i, N as l, M as m, q as n, G as o, j as p, X as r, z as s, V as t, k as u };