@oomol-lab/open-flow 0.1.0-beta.54 → 0.1.0-beta.56

package/dist/browser/theme.css

@@ -87,6 +87,7 @@
 
 .open-flow-property-panel {
   --ui-control-radius: 6px;
+  --ui-textarea-font-size: 12px;
   --ui-disabled-opacity: 1;
   --ui-disabled-cursor: default;
   --ui-disabled-background: var(--ui-control-background);

package/dist/browser/ui-idTooltip.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, ReactNode } from 'react';
+export declare function IdTooltip({ copyLabel, copiedLabel, value, label, trigger, container, alignOffset, children, }: {
+    readonly copyLabel: string;
+    readonly copiedLabel: string;
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly trigger: ReactElement;
+    readonly container: HTMLElement | null;
+    readonly alignOffset?: number;
+    readonly children?: ReactNode;
+}): ReactElement;

package/dist/browser/ui.css

@@ -201,6 +201,7 @@
 
 .open-flow-property-panel {
   --ui-control-radius: 6px;
+  --ui-textarea-font-size: 12px;
   --ui-disabled-opacity: 1;
   --ui-disabled-cursor: default;
   --ui-disabled-background: var(--ui-control-background);
@@ -1742,6 +1743,11 @@
     transform-origin: var(--transform-origin);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .-translate-x-0\.5 {
+    --tw-translate-x: calc(var(--spacing) * -.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1917,6 +1923,10 @@
     place-content: center;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .content-end {
+    align-content: flex-end;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .content-start {
     align-content: flex-start;
   }
@@ -2782,6 +2792,10 @@
     font-size: 16px;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .text-\[length\:var\(--ui-textarea-font-size\,var\(--ui-font-size\)\)\] {
+    font-size: var(--ui-textarea-font-size, var(--ui-font-size));
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -3283,6 +3297,18 @@
     color: var(--ui-primary-foreground);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-selected\/option\:border-primary:is(:where(.group\/option)[data-selected] *) {
+    border-color: var(--ui-primary);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-selected\/option\:bg-primary:is(:where(.group\/option)[data-selected] *) {
+    background-color: var(--ui-primary);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-selected\/option\:text-primary-foreground:is(:where(.group\/option)[data-selected] *) {
+    color: var(--ui-primary-foreground);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
     pointer-events: none;
   }
@@ -4346,6 +4372,10 @@
     opacity: 0;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-highlighted\:bg-accent[data-highlighted] {
+    background-color: var(--ui-accent);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-horizontal\:mx-px[data-horizontal] {
     margin-inline: 1px;
   }

package/dist/browser/ui.d.ts

@@ -37,6 +37,10 @@ export declare const InputGroupAddon: ComponentType<ComponentPropsWithoutRef<'di
 }>;
 export declare const InputGroupInput: ForwardRefExoticComponent<ComponentPropsWithoutRef<'input'> & RefAttributes<HTMLInputElement>>;
 export { Label } from './ui-label.js';
+export declare const NativeSelect: ComponentType<Omit<ComponentPropsWithoutRef<'select'>, 'size'> & {
+    readonly size?: 'sm' | 'default';
+}>;
+export declare const NativeSelectOption: ComponentType<ComponentPropsWithoutRef<'option'>>;
 export { OpenFlowLogo, type OpenFlowLogoProps } from './ui-logo.js';
 export { Textarea } from './ui-textarea.js';
 /** Shared Sonner presentation for hosts and the component Lab. */
@@ -63,3 +67,4 @@ export declare function NotificationUndoLabel({ children }: {
 }): ReactNode;
 export { HostTooltip, type HostTooltipProps } from './ui-hostTooltip.js';
 export { HostNavigationActions, type HostNavigationActionsProps, type HostThemeMode } from './ui-hostNavigationActions.js';
+export { IdTooltip } from './ui-idTooltip.js';

package/dist/browser/ui.js

@@ -11065,6 +11065,18 @@ var createLucideIcon = (iconName, iconNode) => {
 	return Component;
 };
 //#endregion
+//#region ../../node_modules/.bun/lucide-react@0.468.0+f4eacebf2041cd4f/node_modules/lucide-react/dist/esm/icons/chevron-down.js
+/**
+* @license lucide-react v0.468.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var ChevronDown = createLucideIcon("ChevronDown", [["path", {
+	d: "m6 9 6 6 6-6",
+	key: "qrunsl"
+}]]);
+//#endregion
 //#region ../../node_modules/.bun/lucide-react@0.468.0+f4eacebf2041cd4f/node_modules/lucide-react/dist/esm/icons/x.js
 /**
 * @license lucide-react v0.468.0 - ISC
@@ -12563,14 +12575,15 @@ var Input = React.forwardRef(function Input({ className, type, controlSize = "de
 });
 //#endregion
 //#region src/ui/browser/input-group.tsx
-function InputGroup$1({ className, ...props }) {
+var InputGroup$1 = React.forwardRef(function InputGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
+		ref,
 		"data-slot": "input-group",
 		role: "group",
 		className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:outline-none has-disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_50%,transparent))] has-disabled:opacity-[var(--ui-disabled-opacity,0.5)] has-[[data-slot=input-group-control]:focus-visible]:text-field-focus has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:invalid-text-field-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:has-disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_80%,transparent))] has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
 		...props
 	});
-}
+});
 var inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-[var(--ui-disabled-opacity,0.5)] [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
 	variants: { align: {
 		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
@@ -12602,6 +12615,32 @@ var InputGroupInput$1 = React.forwardRef(function InputGroupInput({ className, .
 	});
 });
 //#endregion
+//#region src/ui/browser/native-select.tsx
+function NativeSelect$1({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-8 w-full min-w-0 appearance-none rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground data-[slot=native-select]:focus-visible:text-field-focus data-[slot=native-select]:focus-visible:aria-invalid:invalid-text-field-focus disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-7 data-[size=sm]:rounded-[var(--ui-control-radius,var(--ui-radius))] data-[size=sm]:py-0.5 dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:hover:bg-input/50",
+			...props
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+}
+function NativeSelectOption$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+}
+//#endregion
 //#region src/ui/browser/label.tsx
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx("label", {
@@ -12638,7 +12677,7 @@ var Textarea = React.forwardRef(function Textarea({ className, ...props }, ref)
 	return /* @__PURE__ */ jsx("textarea", {
 		ref,
 		"data-slot": "textarea",
-		className: cn("flex field-sizing-content min-h-16 w-full rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] px-2.5 py-2 text-base transition-colors outline-none read-only:cursor-default placeholder:text-muted-foreground focus-visible:text-field-focus focus-visible:aria-invalid:invalid-text-field-focus disabled:cursor-[var(--ui-disabled-cursor,not-allowed)] disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_50%,transparent))] disabled:opacity-[var(--ui-disabled-opacity,0.5)] aria-invalid:border-destructive md:text-sm dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_80%,transparent))]", className),
+		className: cn("flex field-sizing-content min-h-16 w-full rounded-[var(--ui-control-radius,calc(var(--ui-radius)_+_2px))] border border-input bg-[var(--ui-control-background,var(--ui-muted))] px-2.5 py-2 text-[length:var(--ui-textarea-font-size,var(--ui-font-size))] leading-5 transition-colors outline-none read-only:cursor-default placeholder:text-muted-foreground focus-visible:text-field-focus focus-visible:aria-invalid:invalid-text-field-focus disabled:cursor-[var(--ui-disabled-cursor,not-allowed)] disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_50%,transparent))] disabled:opacity-[var(--ui-disabled-opacity,0.5)] aria-invalid:border-destructive dark:bg-[var(--ui-control-background,var(--ui-muted))] dark:disabled:bg-[var(--ui-disabled-background,color-mix(in_srgb,var(--ui-input)_80%,transparent))]", className),
 		...props
 	});
 });
@@ -12785,6 +12824,48 @@ function HostNavigationActions({ className, language, onLanguageChange, theme, o
 	});
 }
 //#endregion
+//#region src/ui/browser/idTooltip.tsx
+function IdTooltip({ copyLabel, copiedLabel, value, label, trigger, container, alignOffset = 0, children }) {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		onOpenChange: () => setCopied(false),
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: trigger,
+			children: label
+		}), /* @__PURE__ */ jsxs(TooltipContent, {
+			align: "start",
+			alignOffset,
+			className: "max-w-[min(440px,calc(100vw-32px))] flex-col items-stretch gap-2 p-1 pr-2",
+			collisionBoundary: [],
+			container,
+			positionMethod: "fixed",
+			side: "top",
+			sideOffset: 6,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-1",
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					"aria-label": copied ? copiedLabel : copyLabel,
+					className: "text-inherit hover:text-inherit hover:bg-[color-mix(in_srgb,currentColor_14%,transparent)]",
+					onClick: () => {
+						navigator.clipboard.writeText(value).then(() => setCopied(true));
+					},
+					size: "icon-xs",
+					type: "button",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx("i", {
+						"aria-hidden": "true",
+						className: "i-lucide-light:copy"
+					})
+				}), /* @__PURE__ */ jsx("code", {
+					className: "min-w-0 select-text break-all pl-0.5 text-inherit",
+					translate: "no",
+					children: value
+				})]
+			}), children]
+		})]
+	});
+}
+//#endregion
 //#region src/ui/browser/public.ts
 var Button = Button$1;
 var Dialog = Dialog$1;
@@ -12798,6 +12879,8 @@ var DialogDescription = DialogDescription$1;
 var InputGroup = InputGroup$1;
 var InputGroupAddon = InputGroupAddon$1;
 var InputGroupInput = InputGroupInput$1;
+var NativeSelect = NativeSelect$1;
+var NativeSelectOption = NativeSelectOption$1;
 /** Shared Sonner presentation for hosts and the component Lab. */
 var notificationToasterProps = {
 	className: "open-flow-notifications",
@@ -12833,4 +12916,4 @@ function NotificationUndoLabel({ children }) {
 	}), children);
 }
 //#endregion
-export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, HostNavigationActions, HostTooltip, Input, InputGroup, InputGroupAddon, InputGroupInput, Label, NotificationUndoLabel, OpenFlowLogo, Textarea, notificationToasterProps };
+export { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, HostNavigationActions, HostTooltip, IdTooltip, Input, InputGroup, InputGroupAddon, InputGroupInput, Label, NativeSelect, NativeSelectOption, NotificationUndoLabel, OpenFlowLogo, Textarea, notificationToasterProps };