@oomol-lab/open-flow 0.1.0-beta.22 → 0.1.0-beta.23

package/dist/browser/{markdownContent-BBgH9ZIV.js → markdownContent-SIlWuHve.js}

@@ -1,8 +1,8 @@
 import { o as e, r as t, t as n } from "./rolldown-runtime-CEFd7nDs.js";
 import { i as r } from "./main-BDnNHhkU.js";
 import { a as i } from "./dist-B_T-OpQp.js";
-import { memo as a, useEffect as o, useMemo as s, useRef as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { memo as c, useEffect as l, useMemo as u, useRef as d } from "react";
 //#region ../../node_modules/.bun/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js
 var f = /* @__PURE__ */ n(((e, t) => {
 	var n = function(e) {
@@ -5770,19 +5770,19 @@ function Eo(e) {
 	return typeof t == "string" ? n.value = t : "" + t, n;
 }
 function Do(e, t) {
-	let n = t.allowedElements, r = t.allowElement, i = t.components, a = t.disallowedElements, o = t.skipHtml, s = t.unwrapDisallowed, c = t.urlTransform || Oo;
+	let n = t.allowedElements, r = t.allowElement, i = t.components, c = t.disallowedElements, l = t.skipHtml, u = t.unwrapDisallowed, d = t.urlTransform || Oo;
 	for (let e of Co) Object.hasOwn(t, e.from) && "" + e.from + (e.to ? "use `" + e.to + "` instead" : "remove it") + e.id;
 	return Ta(e, f), Je(e, {
-		Fragment: l,
+		Fragment: a,
 		components: i,
 		ignoreInvalidStyle: !0,
-		jsx: u,
-		jsxs: d,
+		jsx: o,
+		jsxs: s,
 		passKeys: !0,
 		passNode: !0
 	});
 	function f(e, t, i) {
-		if (e.type === "raw" && i && typeof t == "number") return o ? i.children.splice(t, 1) : i.children[t] = {
+		if (e.type === "raw" && i && typeof t == "number") return l ? i.children.splice(t, 1) : i.children[t] = {
 			type: "text",
 			value: e.value
 		}, t;
@@ -5790,12 +5790,12 @@ function Do(e, t) {
 			let t;
 			for (t in gt) if (Object.hasOwn(gt, t) && Object.hasOwn(e.properties, t)) {
 				let n = e.properties[t], r = gt[t];
-				(r === null || r.includes(e.tagName)) && (e.properties[t] = c(String(n || ""), t, e));
+				(r === null || r.includes(e.tagName)) && (e.properties[t] = d(String(n || ""), t, e));
 			}
 		}
 		if (e.type === "element") {
-			let o = n ? !n.includes(e.tagName) : a ? a.includes(e.tagName) : !1;
-			if (!o && r && typeof t == "number" && (o = !r(e, t, i)), o && i && typeof t == "number") return s && e.children ? i.children.splice(t, 1, ...e.children) : i.children.splice(t, 1), t;
+			let a = n ? !n.includes(e.tagName) : c ? c.includes(e.tagName) : !1;
+			if (!a && r && typeof t == "number" && (a = !r(e, t, i)), a && i && typeof t == "number") return u && e.children ? i.children.splice(t, 1, ...e.children) : i.children.splice(t, 1), t;
 		}
 	}
 }
@@ -44544,10 +44544,10 @@ function GE(e, t, n) {
 		}, e.children = [];
 	}
 }
-var KE = /* @__PURE__ */ a(function({ dark: e, unstyled: t, text: n, className: i = "", components: a, mermaid: l }) {
-	let d = r(), f = s(() => RE(d), [d]), p = c(null), m = c(/* @__PURE__ */ new WeakMap());
-	return o(() => {
-		let t = l ? [...p.current?.querySelectorAll("pre code.language-mermaid") ?? []] : [];
+var KE = /* @__PURE__ */ c(function({ dark: e, unstyled: t, text: n, className: i = "", components: a, mermaid: s }) {
+	let c = r(), f = u(() => RE(c), [c]), p = d(null), m = d(/* @__PURE__ */ new WeakMap());
+	return l(() => {
+		let t = s ? [...p.current?.querySelectorAll("pre code.language-mermaid") ?? []] : [];
 		if (t.length == 0) return;
 		let n = !1;
 		return (async () => {
@@ -44571,13 +44571,13 @@ var KE = /* @__PURE__ */ a(function({ dark: e, unstyled: t, text: n, className:
 			n = !0;
 		};
 	}, [
-		l,
+		s,
 		e,
 		n
-	]), n ? /* @__PURE__ */ u("div", {
+	]), n ? /* @__PURE__ */ o("div", {
 		ref: p,
 		className: `${t ? "" : `open-flow-markdown-${e ? "dark" : "light"}`} ${i}`,
-		children: /* @__PURE__ */ u(wo, {
+		children: /* @__PURE__ */ o(wo, {
 			rehypePlugins: f,
 			remarkPlugins: IE,
 			components: a,

package/dist/browser/theme.css

@@ -1,8 +1,15 @@
+:root,
+.open-flow-theme {
+  --ui-font-size: 13px;
+}
+
 .open-flow-theme {
   color-scheme: light;
   --open-flow-background: #fafafa;
   --open-flow-foreground: #242424;
   --open-flow-card: #ffffff;
+  --open-flow-node-surface: #f6f6f6;
+  --open-flow-node-content: #ffffff;
   --open-flow-card-foreground: #242424;
   --open-flow-popover: #ffffff;
   --open-flow-popover-foreground: #242424;
@@ -45,6 +52,8 @@
   --open-flow-background: #1c1c1c;
   --open-flow-foreground: #eeeeee;
   --open-flow-card: #242424;
+  --open-flow-node-surface: #2b2b2b;
+  --open-flow-node-content: #242424;
   --open-flow-card-foreground: #eeeeee;
   --open-flow-popover: #2b2b2b;
   --open-flow-popover-foreground: #eeeeee;
@@ -169,6 +178,8 @@
   --accent-soft: #ededed;
   --accent-soft-hover: #e3e3e3;
   --accent-foreground: #333333;
+  --trigger-icon-color: var(--accent-orange-2);
+  --trigger-icon-fill: color-mix(in srgb, var(--trigger-icon-color) 16%, transparent);
   --canvas-grid: rgb(100 100 100 / 14%);
   --node-shadow: none;
   --node-selected-shadow: 0 0 0 2px rgb(70 70 70 / 12%), 0 2px 6px rgb(0 0 0 / 5%);
@@ -201,7 +212,7 @@
   --brand-highlight-color: #505050;
   --brand-hover-color: color-mix(in srgb, var(--brand-highlight-color) 20%, transparent);
 
-  --node-background-color: var(--fill-1);
+  --node-background-color: var(--open-flow-node-content);
   --node-border-color: var(--border-1);
   --node-selected-border-color: var(--brand-highlight-color);
   --node-head-background-color: var(--fill-3);
@@ -313,6 +324,7 @@
   --pseudo-outline-color: var(--brand-3);
 
   --comment-bg: #f3eddc;
+  --comment-preview-bg: color-mix(in srgb, var(--comment-bg) 55%, var(--node-background-color));
   --comment-head-bg: #e8d7b3;
   --comment-border: #e3d8ba;
   --comment-selected-border: #a58b50;
@@ -341,6 +353,8 @@
   --accent-soft: #353535;
   --accent-soft-hover: #424242;
   --accent-foreground: #e0e0e0;
+  --trigger-icon-color: var(--warning);
+  --trigger-icon-fill: color-mix(in srgb, var(--trigger-icon-color) 24%, transparent);
   --canvas-grid: rgb(180 180 180 / 13%);
   --node-shadow: none;
   --node-selected-shadow: 0 0 0 2px rgb(190 190 190 / 16%), 0 2px 6px rgb(0 0 0 / 20%);
@@ -370,7 +384,7 @@
   --ui-ring: var(--open-flow-ring);
   --ui-radius: 6px;
 
-  --node-background-color: var(--fill-1);
+  --node-background-color: var(--open-flow-node-content);
   --node-border-color: var(--border-1);
   --node-selected-border-color: var(--brand-highlight-color);
   --node-head-background-color: var(--fill-3);
@@ -481,10 +495,36 @@
 
   --pseudo-outline-color: var(--brand-7);
 
-  --comment-bg: #343128;
-  --comment-head-bg: #504837;
-  --comment-border: #514a38;
+  --comment-bg: #403727;
+  --comment-preview-bg: #2b261d;
+  --comment-head-bg: #514532;
+  --comment-border: #5c4e36;
   --comment-selected-border: #bba165;
   --comment-hover-bg: color-mix(in srgb, var(--comment-head-bg) 89%, #ffffff);
   --comment-active-bg: color-mix(in srgb, var(--comment-head-bg) 90%, #000000);
 }
+
+/* Native scroll regions share a quiet thumb and transparent track. */
+:where(.open-flow-theme, .open-flow-theme *) {
+  scrollbar-width: thin;
+  scrollbar-color: light-dark(rgb(0 0 0 / 24%), rgb(255 255 255 / 28%)) transparent;
+}
+
+@supports not (scrollbar-width: thin) {
+  :where(.open-flow-theme, .open-flow-theme *)::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  :where(.open-flow-theme, .open-flow-theme *)::-webkit-scrollbar-track,
+  :where(.open-flow-theme, .open-flow-theme *)::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  :where(.open-flow-theme, .open-flow-theme *)::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 8px;
+    background: light-dark(rgb(0 0 0 / 24%), rgb(255 255 255 / 28%));
+    background-clip: padding-box;
+  }
+}