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

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.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.js

@@ -12563,14 +12563,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]",
@@ -12638,7 +12639,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
 	});
 });