@oomol-lab/open-flow 0.1.0-beta.85 → 0.1.0-beta.87

package/dist/browser/preview.css

@@ -92,7 +92,7 @@
 
 .open-flow-theme {
   --_open-flow-theme: light;
-  color-scheme: var(--_open-flow-theme);
+  color-scheme: light;
   --_open-flow-background: var(--open-flow-background, light-dark(#fdfdfd, #1c1c1c));
   --_open-flow-foreground: var(--open-flow-foreground, light-dark(#242424, #eee));
   --_open-flow-card: var(--open-flow-card, light-dark(#fefefe, #242424));
@@ -131,6 +131,7 @@
 
 .open-flow-theme[data-theme="dark"] {
   --_open-flow-theme: dark;
+  color-scheme: dark;
 }
 
 .open-flow-theme, .open-flow-canvas-root :is(.react-flow__controls, [data-canvas-control-scope]) {
@@ -1450,6 +1451,10 @@
     min-height: min(360px, 80dvh);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .min-h-min {
+    min-height: min-content;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
@@ -6131,23 +6136,20 @@
 }
 
 .open-flow-navigation-menu {
+  width: max-content;
+  max-width: calc(100vw - 16px);
+  max-height: var(--available-height);
+  overscroll-behavior: contain;
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius);
   background: var(--ui-popover);
   color: var(--ui-popover-foreground);
-  margin: 0;
+  gap: 0;
   padding: 4px;
-  position: fixed;
-  inset: 48px 16px auto auto;
+  overflow-y: auto;
   box-shadow: 0 4px 12px #0002;
 }
 
-.open-flow-navigation-menu:popover-open {
-  flex-direction: column;
-  align-items: stretch;
-  display: flex;
-}
-
 .open-flow-navigation-menu button[aria-pressed="true"] {
   background: var(--ui-muted);
 }
@@ -11855,6 +11857,187 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .CornerControls_corner_3d2c6.CornerControls_corner_3d2c6.react-flow__panel {
   position: static;
   margin: 0;
+}.fieldTable_list_14bfd {
+  /* Stay in the containing panel's stacking context so rows can cross section boundaries. */
+  container: value-fields/inline-size;
+  min-width: 0;
+  --field-toggle-width: 20px;
+  --field-value-name-gap: 2px;
+  --field-grip-width: 0px;
+  padding: 8px 8px 16px 3px;
+  --field-actions-width: 28px;
+  color: var(--ui-foreground);
+}
+
+.fieldTable_list_14bfd[data-action-slots="2"] {
+  --field-actions-width: 58px;
+  --field-table-actions-gap: 4px;
+  --field-action-pair-gap: 2px;
+}
+
+.fieldTable_list_14bfd[data-standalone] {
+  --field-outer-gutter: calc(var(--field-toggle-width) + var(--field-value-name-gap));
+  width: calc(100% + var(--field-outer-gutter));
+  margin-inline-start: calc(-1 * var(--field-outer-gutter));
+  padding: 0;
+}
+
+.fieldTable_columns_14bfd {
+  --field-nullable-width: var(--field-table-nullable-width, 0px);
+  --field-name-track: minmax(0, 1fr);
+  --field-type-track: minmax(64px, 0.48fr);
+  --field-value-track: minmax(0, 1.5fr);
+  --field-name-gap: 4px;
+  --field-actions-gap: var(--field-table-actions-gap, 4px);
+  --field-name-type-gap: 4px;
+  --field-type-value-gap: 4px;
+  --field-value-prefix-gap: 8px;
+  --field-value-column: value;
+  --field-value-row: 1;
+  --field-branch-row: 2;
+  display: grid;
+  column-gap: 0;
+  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] var(--field-name-track) var(--field-name-type-gap) [type] var(--field-type-track) var(--field-type-value-gap) [value] var(--field-value-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
+}
+.fieldTable_columns_14bfd[data-value-prefix] {
+  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] var(--field-name-track) var(--field-name-type-gap) [type] var(--field-type-track) var(--field-type-value-gap) [value-prefix] max-content var(--field-value-prefix-gap) [value] var(--field-value-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
+}
+.fieldTable_columns_14bfd[data-layout=values], .fieldTable_columns_14bfd[data-layout=ports] {
+  --field-name-track: minmax(
+    90px,
+    calc(
+      (100% - var(--field-grip-width, 0px) - var(--field-toggle-width, 24px) - var(--field-name-gap) - var(--field-name-type-gap) -
+          var(--field-table-type-width, 56px) - var(--field-type-value-gap) - var(--field-actions-gap) - var(--field-nullable-width) -
+          var(--field-actions-width, 28px)) *
+        0.4
+    )
+  );
+  --field-value-track: minmax(0, 1fr);
+  --field-type-track: var(--field-type-width, 56px);
+  --field-name-gap: var(--field-value-name-gap, 2px);
+  --field-actions-gap: var(--field-table-actions-gap, 2px);
+}
+.fieldTable_columns_14bfd[data-output] {
+  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
+}
+@container value-fields (max-width: 340px) {
+  .fieldTable_columns_14bfd:not([data-output]) {
+    --field-value-column: handle / content-end;
+    --field-value-row: 2;
+    --field-branch-row: 3;
+    grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
+  }
+  .fieldTable_columns_14bfd[data-value-prefix]:not([data-output]) {
+    --field-value-column: value / content-end;
+    grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle value-prefix] max-content var(--field-value-prefix-gap) [value] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
+  }
+}
+@container value-fields (max-width: 340px) {
+  .fieldTable_columns_14bfd:not([data-output]) {
+    display: none;
+  }
+}
+.fieldTable_columns_14bfd {
+  row-gap: 4px;
+  color: var(--ui-muted-foreground);
+  font-size: 12px;
+  padding: 4px 0;
+}
+.fieldTable_columns_14bfd > span {
+  padding-left: 7px;
+}
+.fieldTable_columns_14bfd > .fieldTable_nameHeading_14bfd {
+  grid-column: handle;
+  grid-row: 1;
+}
+.fieldTable_columns_14bfd > .fieldTable_typeHeading_14bfd {
+  grid-column: type;
+  grid-row: 1;
+}
+.fieldTable_list_14bfd[data-fixed-types] .fieldTable_columns_14bfd > .fieldTable_typeHeading_14bfd {
+  padding-left: 0;
+}
+.fieldTable_columns_14bfd > .fieldTable_valueHeading_14bfd {
+  grid-column: var(--field-value-heading-column, var(--field-value-column));
+  grid-row: var(--field-value-row);
+}
+
+.fieldTable_list_14bfd[data-fixed-types] {
+  --field-table-type-width: 32px;
+  --field-type-width: 32px;
+}
+
+.fieldTable_list_14bfd:not([data-type-column]) {
+  --field-table-type-width: 0px;
+  --field-type-width: 0px;
+  --field-type-value-gap: 0px;
+}
+
+.fieldTable_list_14bfd[data-output] {
+  --field-type-width: minmax(96px, 0.65fr);
+}
+
+.fieldTable_list_14bfd[data-output][data-composite-types] {
+  --field-type-width: minmax(176px, 1.15fr);
+}
+
+.fieldTable_list_14bfd[data-nullable] {
+  --field-table-nullable-width: 28px;
+}
+
+.fieldTable_list_14bfd[data-layout=ports] {
+  padding-top: 2px;
+}
+.fieldTable_list_14bfd[data-layout=ports] .fieldTable_columns_14bfd {
+  padding-block: 2px;
+}
+
+.fieldTable_list_14bfd[data-empty] {
+  padding-block: 0;
+}
+
+.fieldTable_row_14bfd {
+  position: relative;
+  min-width: 0;
+  --row-gap: 6px;
+  margin: var(--row-gap) 0;
+}
+
+.fieldTable_nullableControl_14bfd,
+.fieldTable_columns_14bfd > .fieldTable_nullableHeading_14bfd {
+  display: flex;
+  grid-column: nullable;
+  grid-row: 1;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.fieldTable_nullableControl_14bfd {
+  height: var(--field-control-height, 30px);
+}.fieldBranch_branch_a5820 {
+  --branch-origin: calc(var(--field-indent, 0px) + var(--field-toggle-width, 24px) / 2);
+  --branch-extension: 0px;
+  position: relative;
+}
+.fieldBranch_branch_a5820::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: calc(20px + var(--branch-extension, 0px));
+  border-left: 1px solid color-mix(in srgb, var(--ui-foreground) 20%, var(--ui-background));
+  border-bottom: 1px solid color-mix(in srgb, var(--ui-foreground) 20%, var(--ui-background));
+  border-bottom-left-radius: 10px;
+  left: var(--branch-origin, calc(var(--field-indent, 0px) + var(--field-toggle-width, 24px) / 2));
+  top: calc(-1 * var(--branch-extension, 0px));
+  width: 16px;
+}
+.fieldBranch_branch_a5820[data-branch-endpoint=marker]::before {
+  width: 6px;
+}
+.fieldBranch_branch_a5820[hidden] {
+  display: none;
 }/* Each editor is one stacking unit. The field table raises the active unit;
    attached feedback stays behind the controls inside it. */
 .valueEditor_root_4a4f1,
@@ -12885,28 +13068,6 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 }
 .sortableFieldList_grip_c1437:active {
   cursor: grabbing;
-}.fieldBranch_branch_a5820 {
-  --branch-origin: calc(var(--field-indent, 0px) + var(--field-toggle-width, 24px) / 2);
-  --branch-extension: 0px;
-  position: relative;
-}
-.fieldBranch_branch_a5820::before {
-  content: "";
-  position: absolute;
-  width: 16px;
-  height: calc(20px + var(--branch-extension, 0px));
-  border-left: 1px solid color-mix(in srgb, var(--ui-foreground) 20%, var(--ui-background));
-  border-bottom: 1px solid color-mix(in srgb, var(--ui-foreground) 20%, var(--ui-background));
-  border-bottom-left-radius: 10px;
-  left: var(--branch-origin, calc(var(--field-indent, 0px) + var(--field-toggle-width, 24px) / 2));
-  top: calc(-1 * var(--branch-extension, 0px));
-  width: 16px;
-}
-.fieldBranch_branch_a5820[data-branch-endpoint=marker]::before {
-  width: 6px;
-}
-.fieldBranch_branch_a5820[hidden] {
-  display: none;
 }.open-flow-workbench .condition-groups[hidden],
 .open-flow-workbench .condition-expressions[hidden] {
   display: none;
@@ -13046,165 +13207,6 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
 .nodeInputValue_sourceControl_67a3d:focus-visible {
   outline: 2px solid var(--ui-destructive);
   outline-offset: -1px;
-}.fieldTable_list_14bfd {
-  /* Stay in the containing panel's stacking context so rows can cross section boundaries. */
-  container: value-fields/inline-size;
-  min-width: 0;
-  --field-toggle-width: 20px;
-  --field-value-name-gap: 2px;
-  --field-grip-width: 0px;
-  padding: 8px 8px 16px 3px;
-  --field-actions-width: 28px;
-  color: var(--ui-foreground);
-}
-
-.fieldTable_list_14bfd[data-action-slots="2"] {
-  --field-actions-width: 58px;
-  --field-table-actions-gap: 4px;
-  --field-action-pair-gap: 2px;
-}
-
-.fieldTable_list_14bfd[data-standalone] {
-  --field-outer-gutter: calc(var(--field-toggle-width) + var(--field-value-name-gap));
-  width: calc(100% + var(--field-outer-gutter));
-  margin-inline-start: calc(-1 * var(--field-outer-gutter));
-  padding: 0;
-}
-
-.fieldTable_columns_14bfd {
-  --field-nullable-width: var(--field-table-nullable-width, 0px);
-  --field-name-track: minmax(0, 1fr);
-  --field-type-track: minmax(64px, 0.48fr);
-  --field-value-track: minmax(0, 1.5fr);
-  --field-name-gap: 4px;
-  --field-actions-gap: var(--field-table-actions-gap, 4px);
-  --field-name-type-gap: 4px;
-  --field-type-value-gap: 4px;
-  --field-value-prefix-gap: 8px;
-  --field-value-column: value;
-  --field-value-row: 1;
-  --field-branch-row: 2;
-  display: grid;
-  column-gap: 0;
-  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] var(--field-name-track) var(--field-name-type-gap) [type] var(--field-type-track) var(--field-type-value-gap) [value] var(--field-value-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
-}
-.fieldTable_columns_14bfd[data-value-prefix] {
-  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] var(--field-name-track) var(--field-name-type-gap) [type] var(--field-type-track) var(--field-type-value-gap) [value-prefix] max-content var(--field-value-prefix-gap) [value] var(--field-value-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
-}
-.fieldTable_columns_14bfd[data-layout=values], .fieldTable_columns_14bfd[data-layout=ports] {
-  --field-name-track: minmax(
-    90px,
-    calc(
-      (100% - var(--field-grip-width, 0px) - var(--field-toggle-width, 24px) - var(--field-name-gap) - var(--field-name-type-gap) -
-          var(--field-table-type-width, 56px) - var(--field-type-value-gap) - var(--field-actions-gap) - var(--field-nullable-width) -
-          var(--field-actions-width, 28px)) *
-        0.4
-    )
-  );
-  --field-value-track: minmax(0, 1fr);
-  --field-type-track: var(--field-type-width, 56px);
-  --field-name-gap: var(--field-value-name-gap, 2px);
-  --field-actions-gap: var(--field-table-actions-gap, 2px);
-}
-.fieldTable_columns_14bfd[data-output] {
-  grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
-}
-@container value-fields (max-width: 340px) {
-  .fieldTable_columns_14bfd:not([data-output]) {
-    --field-value-column: handle / content-end;
-    --field-value-row: 2;
-    --field-branch-row: 3;
-    grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
-  }
-  .fieldTable_columns_14bfd[data-value-prefix]:not([data-output]) {
-    --field-value-column: value / content-end;
-    grid-template-columns: [grip] var(--field-grip-width, 0px) [toggle] var(--field-toggle-width, 24px) var(--field-name-gap) [handle value-prefix] max-content var(--field-value-prefix-gap) [value] minmax(0, 1fr) var(--field-name-type-gap) [type] var(--field-type-track) [content-end] var(--field-actions-gap) [nullable] var(--field-nullable-width) [actions] var(--field-actions-width, 28px) [end];
-  }
-}
-@container value-fields (max-width: 340px) {
-  .fieldTable_columns_14bfd:not([data-output]) {
-    display: none;
-  }
-}
-.fieldTable_columns_14bfd {
-  row-gap: 4px;
-  color: var(--ui-muted-foreground);
-  font-size: 12px;
-  padding: 4px 0;
-}
-.fieldTable_columns_14bfd > span {
-  padding-left: 7px;
-}
-.fieldTable_columns_14bfd > .fieldTable_nameHeading_14bfd {
-  grid-column: handle;
-  grid-row: 1;
-}
-.fieldTable_columns_14bfd > .fieldTable_typeHeading_14bfd {
-  grid-column: type;
-  grid-row: 1;
-}
-.fieldTable_list_14bfd[data-fixed-types] .fieldTable_columns_14bfd > .fieldTable_typeHeading_14bfd {
-  padding-left: 0;
-}
-.fieldTable_columns_14bfd > .fieldTable_valueHeading_14bfd {
-  grid-column: var(--field-value-heading-column, var(--field-value-column));
-  grid-row: var(--field-value-row);
-}
-
-.fieldTable_list_14bfd[data-fixed-types] {
-  --field-table-type-width: 32px;
-  --field-type-width: 32px;
-}
-
-.fieldTable_list_14bfd:not([data-type-column]) {
-  --field-table-type-width: 0px;
-  --field-type-width: 0px;
-  --field-type-value-gap: 0px;
-}
-
-.fieldTable_list_14bfd[data-output] {
-  --field-type-width: minmax(96px, 0.65fr);
-}
-
-.fieldTable_list_14bfd[data-output][data-composite-types] {
-  --field-type-width: minmax(176px, 1.15fr);
-}
-
-.fieldTable_list_14bfd[data-nullable] {
-  --field-table-nullable-width: 28px;
-}
-
-.fieldTable_list_14bfd[data-layout=ports] {
-  padding-top: 2px;
-}
-.fieldTable_list_14bfd[data-layout=ports] .fieldTable_columns_14bfd {
-  padding-block: 2px;
-}
-
-.fieldTable_list_14bfd[data-empty] {
-  padding-block: 0;
-}
-
-.fieldTable_row_14bfd {
-  position: relative;
-  min-width: 0;
-  --row-gap: 6px;
-  margin: var(--row-gap) 0;
-}
-
-.fieldTable_nullableControl_14bfd,
-.fieldTable_columns_14bfd > .fieldTable_nullableHeading_14bfd {
-  display: flex;
-  grid-column: nullable;
-  grid-row: 1;
-  padding: 0;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.fieldTable_nullableControl_14bfd {
-  height: var(--field-control-height, 30px);
 }.portList_row_51bf3 {
   padding: 0;
 }