@oomol-lab/open-flow 0.1.0-beta.66 → 0.1.0-beta.67

package/dist/browser/preview.css

@@ -97,6 +97,7 @@
   --open-flow-card: #fff;
   --open-flow-node-surface: #f6f6f6;
   --open-flow-node-content: #fff;
+  --open-flow-node-running-beam: oklch(72.3% .219 149.579);
   --open-flow-comment-surface: #f3eddc;
   --open-flow-comment-content: var(--open-flow-comment-surface);
 }
@@ -725,6 +726,7 @@
     --spacing: .25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
@@ -1431,6 +1433,10 @@
     max-height: 85dvh;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[calc\(100dvh-2rem\)\] {
+    max-height: calc(100dvh - 2rem);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-h-\[calc\(100dvh-32px\)\] {
     max-height: calc(100dvh - 32px);
   }
@@ -1539,10 +1545,6 @@
     width: calc(var(--spacing) * 16);
   }
 
-  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-24 {
-    width: calc(var(--spacing) * 24);
-  }
-
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -1619,6 +1621,10 @@
     width: max-content;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .w-md {
+    width: var(--container-md);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\(--available-width\) {
     max-width: var(--available-width);
   }
@@ -1643,6 +1649,10 @@
     max-width: calc(100% - 2rem);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\[calc\(100vw-2rem\)\] {
+    max-width: calc(100vw - 2rem);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .max-w-\[calc\(100vw-24px\)\] {
     max-width: calc(100vw - 24px);
   }
@@ -1915,6 +1925,10 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-rows-\[auto_minmax\(0\,1fr\)_auto\] {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .grid-rows-\[minmax\(0\,1fr\)_auto\] {
     grid-template-rows: minmax(0, 1fr) auto;
   }
@@ -2639,6 +2653,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -2747,6 +2765,10 @@
     padding-left: 22px;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .pl-\[calc\(1\.25rem\+1em\)\] {
+    padding-left: calc(1.25rem + 1em);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .text-center {
     text-align: center;
   }
@@ -3274,6 +3296,10 @@
     cursor: pointer;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-open\:rotate-90:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 90deg;
+  }
+
   @media (hover: hover) {
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-hover\/app\:border-\[color-mix\(in_srgb\,var\(--ui-foreground\)_14\%\,var\(--ui-popover\)\)\]:is(:where(.group\/app):hover *) {
       border-color: var(--ui-foreground);
@@ -5481,6 +5507,10 @@
     height: calc(var(--spacing) * 4);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
+    display: none;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .\[\.border-b\]\:pb-2.border-b {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -8185,6 +8215,7 @@ svg.react-flow__connectionline {
 }
 
 .open-flow-workbench .account-control[data-status="warning"] {
+  --ui-control-hover-background: var(--warning-control-hover-background);
   border-color: var(--warning-border);
   background: var(--warning-surface);
 }
@@ -9259,49 +9290,80 @@ svg.react-flow__connectionline {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}.CanvasCard_card_afa5f {
+}.CanvasCard_card_56d5c {
   --card-stroke: var(--node-border-color);
   --card-selection-stroke: var(--node-selected-border-color);
   --card-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 4px 12px rgb(0 0 0 / 3%);
+  --card-radius: 20px;
   position: relative;
   width: 100%;
   padding: 8px;
   border: 1px solid var(--card-stroke);
-  border-radius: 20px;
+  border-radius: var(--card-radius);
   background: var(--open-flow-node-surface);
   color: var(--text-4);
   box-shadow: var(--card-shadow);
 }
 
-.CanvasCard_value_afa5f {
+.CanvasCard_value_56d5c {
   --card-shadow: 0 1px 2px rgb(0 0 0 / 3%);
-  border-radius: 12px;
+  --card-radius: 12px;
 }
-.CanvasCard_value_afa5f .CanvasCard_preview_afa5f {
+.CanvasCard_value_56d5c .CanvasCard_preview_56d5c {
   border-radius: 6px;
 }
 
-.CanvasCard_comment_afa5f {
+.CanvasCard_comment_56d5c {
   --card-stroke: var(--comment-border);
   --card-selection-stroke: var(--comment-selected-border);
   background: var(--comment-bg);
 }
 
-.CanvasCard_comment_afa5f .CanvasCard_preview_afa5f {
+.CanvasCard_comment_56d5c .CanvasCard_preview_56d5c {
   background: var(--comment-preview-bg);
   border-color: color-mix(in srgb, var(--comment-border) 45%, transparent);
 }
 
-.CanvasCard_selected_afa5f {
+.CanvasCard_selected_56d5c {
   --card-stroke: var(--card-selection-stroke);
   box-shadow: 0 0 0 1px var(--card-stroke), var(--card-shadow);
 }
 
-.CanvasCard_problem_afa5f {
+.CanvasCard_problem_56d5c {
   --card-stroke: var(--accent-red-1);
 }
 
-.CanvasCard_header_afa5f {
+.CanvasCard_runningBeam_56d5c {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  fill: none;
+  stroke: var(--open-flow-node-running-beam);
+  stroke-width: 1px;
+  animation: CanvasCard_running-beam_56d5c 4s linear infinite;
+}
+.CanvasCard_runningBeam_56d5c rect {
+  width: calc(100% - 1px);
+  height: calc(100% - 1px);
+  rx: calc(var(--card-radius) - 1px);
+}
+
+@keyframes CanvasCard_running-beam_56d5c {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -1000px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .CanvasCard_runningBeam_56d5c {
+    animation: none;
+  }
+}
+.CanvasCard_header_56d5c {
   min-height: 58px;
   display: flex;
   align-items: center;
@@ -9309,7 +9371,7 @@ svg.react-flow__connectionline {
   padding: 8px 10px;
 }
 
-.CanvasCard_icon_afa5f {
+.CanvasCard_icon_56d5c {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9319,11 +9381,11 @@ svg.react-flow__connectionline {
   font-size: 22px;
   color: var(--text-2);
 }
-.CanvasCard_icon_afa5f > :where(img, svg) {
+.CanvasCard_icon_56d5c > :where(img, svg) {
   width: 24px;
   height: 24px;
 }
-.CanvasCard_icon_afa5f:has(> img, > [data-icon-kind=initials]) {
+.CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) {
   --content-icon-initials-background: transparent;
   width: 32px;
   height: 32px;
@@ -9331,19 +9393,19 @@ svg.react-flow__connectionline {
   border: 1px solid color-mix(in srgb, var(--ui-foreground) 14%, transparent);
   border-radius: 11px;
 }
-.CanvasCard_icon_afa5f:has(> img, > [data-icon-kind=initials]) > img {
+.CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) > img {
   width: 20px;
   height: 20px;
 }
 
-.CanvasCard_identity_afa5f {
+.CanvasCard_identity_56d5c {
   display: flex;
   flex: 1;
   min-width: 0;
   flex-direction: column;
   gap: 4px;
 }
-.CanvasCard_identity_afa5f strong {
+.CanvasCard_identity_56d5c strong {
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
@@ -9351,22 +9413,26 @@ svg.react-flow__connectionline {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.CanvasCard_identity_afa5f > span {
+.CanvasCard_identity_56d5c > span {
   font-size: 11px;
   line-height: 15px;
   color: var(--text-2);
 }
 
-.CanvasCard_indicator_afa5f {
+.CanvasCard_indicator_56d5c {
   font-size: 20px;
   transform: translateX(4px);
 }
 
-.CanvasCard_warning_afa5f {
+.CanvasCard_warning_56d5c {
+  color: var(--widget-warn-color);
+}
+
+.CanvasCard_danger_56d5c {
   color: var(--accent-red-1);
 }
 
-.CanvasCard_content_afa5f {
+.CanvasCard_content_56d5c {
   padding: 2px 10px 12px;
   font-size: 13px;
   line-height: 1.65;
@@ -9374,51 +9440,51 @@ svg.react-flow__connectionline {
   overflow-wrap: anywhere;
 }
 
-.CanvasCard_preview_afa5f {
+.CanvasCard_preview_56d5c {
   border: 1px solid color-mix(in srgb, var(--node-border-color) 45%, transparent);
   border-radius: 12px;
   background: var(--node-background-color);
   overflow: hidden;
 }
 
-.CanvasCard_footer_afa5f {
+.CanvasCard_footer_56d5c {
   margin: 2px 8px 0;
   padding: 8px 0 2px;
   border-top: 1px solid color-mix(in srgb, var(--node-border-color) 60%, transparent);
 }
 
-.CanvasCard_afterPreview_afa5f {
+.CanvasCard_afterPreview_56d5c {
   margin-top: 4px;
   border-top: 0;
 }
 
-.CanvasCard_branches_afa5f {
+.CanvasCard_branches_56d5c {
   grid-template-columns: minmax(0, 1fr) 12px 84px;
   column-gap: 12px;
   display: grid;
   margin: 0 -8px;
 }
 
-.CanvasCard_collapse_afa5f {
+.CanvasCard_collapse_56d5c {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows 200ms ease;
 }
-.CanvasCard_collapse_afa5f[data-hidden=true] {
+.CanvasCard_collapse_56d5c[data-hidden=true] {
   grid-template-rows: 0fr;
 }
 
-.CanvasCard_collapseInner_afa5f {
+.CanvasCard_collapseInner_56d5c {
   min-height: 0;
   overflow: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .CanvasCard_collapse_afa5f {
+  .CanvasCard_collapse_56d5c {
     transition: none;
   }
 }
-.CanvasCard_compactIdentity_afa5f {
+.CanvasCard_compactIdentity_56d5c {
   container: compact-node-identity/size;
   position: absolute;
   inset: 0;
@@ -9430,29 +9496,29 @@ svg.react-flow__connectionline {
   visibility: hidden;
   pointer-events: none;
 }
-.CanvasCard_compactIdentity_afa5f .CanvasCard_icon_afa5f {
+.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c {
   width: 36px;
   height: 36px;
   font-size: 32px;
 }
-.CanvasCard_compactIdentity_afa5f .CanvasCard_icon_afa5f > :where(img, svg) {
+.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c > :where(img, svg) {
   width: 32px;
   height: 32px;
 }
-.CanvasCard_compactIdentity_afa5f .CanvasCard_icon_afa5f:has(> img, > [data-icon-kind=initials]) {
+.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) {
   width: 40px;
   height: 40px;
   font-size: 28px;
   border-radius: 13px;
 }
-.CanvasCard_compactIdentity_afa5f .CanvasCard_icon_afa5f:has(> img, > [data-icon-kind=initials]) > img {
+.CanvasCard_compactIdentity_56d5c .CanvasCard_icon_56d5c:has(> img, > [data-icon-kind=initials]) > img {
   width: 28px;
   height: 28px;
 }
-.CanvasCard_compactIdentity_afa5f .CanvasCard_indicator_afa5f {
+.CanvasCard_compactIdentity_56d5c .CanvasCard_indicator_56d5c {
   font-size: 30px;
 }
-.CanvasCard_compactIdentity_afa5f strong {
+.CanvasCard_compactIdentity_56d5c strong {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -9464,15 +9530,15 @@ svg.react-flow__connectionline {
   transform: translateY(-1px);
 }
 
-.CanvasCard_compact_afa5f > .CanvasCard_header_afa5f {
+.CanvasCard_compact_56d5c > .CanvasCard_header_56d5c {
   visibility: hidden;
 }
-.CanvasCard_compact_afa5f .CanvasCard_compactIdentity_afa5f {
+.CanvasCard_compact_56d5c .CanvasCard_compactIdentity_56d5c {
   visibility: visible;
 }
 
 @container compact-node-identity (min-height: 72px) {
-  .CanvasCard_compactIdentity_afa5f strong {
+  .CanvasCard_compactIdentity_56d5c strong {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -9480,52 +9546,52 @@ svg.react-flow__connectionline {
     overflow-wrap: anywhere;
   }
 }
-.CanvasCard_withBody_afa5f {
+.CanvasCard_withBody_56d5c {
   position: relative;
 }
-.CanvasCard_withBody_afa5f .CanvasCard_compactIdentity_afa5f {
+.CanvasCard_withBody_56d5c .CanvasCard_compactIdentity_56d5c {
   padding: 8px 10px;
 }
 
-.CanvasCard_compactContent_afa5f > :not(.CanvasCard_header_afa5f) {
+.CanvasCard_compactContent_56d5c > :not(.CanvasCard_header_56d5c, .CanvasCard_runningBeam_56d5c) {
   visibility: hidden;
 }
 
-.CanvasCard_compactContent_afa5f .CanvasCard_singleContent_afa5f {
+.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c {
   border-radius: 12px;
   background: var(--node-background-color);
   visibility: visible;
 }
-.CanvasCard_compactContent_afa5f .CanvasCard_singleContent_afa5f > * {
+.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c > * {
   visibility: hidden;
 }
 
-.CanvasCard_value_afa5f.CanvasCard_compactContent_afa5f .CanvasCard_singleContent_afa5f {
+.CanvasCard_value_56d5c.CanvasCard_compactContent_56d5c .CanvasCard_singleContent_56d5c {
   border-radius: 6px;
 }
 
-.CanvasCard_subtitle_afa5f {
+.CanvasCard_subtitle_56d5c {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
-.CanvasCard_subtitle_afa5f > span:first-child {
+.CanvasCard_subtitle_56d5c > span:first-child {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.CanvasCard_fill_afa5f {
+.CanvasCard_fill_56d5c {
   height: 100%;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
 }
-.CanvasCard_fill_afa5f > .CanvasCard_singleContent_afa5f,
-.CanvasCard_fill_afa5f .CanvasCard_collapse_afa5f,
-.CanvasCard_fill_afa5f .CanvasCard_collapseInner_afa5f,
-.CanvasCard_fill_afa5f .CanvasCard_preview_afa5f {
+.CanvasCard_fill_56d5c > .CanvasCard_singleContent_56d5c,
+.CanvasCard_fill_56d5c .CanvasCard_collapse_56d5c,
+.CanvasCard_fill_56d5c .CanvasCard_collapseInner_56d5c,
+.CanvasCard_fill_56d5c .CanvasCard_preview_56d5c {
   min-height: 0;
   height: 100%;
 }.NodeContentRows_rows_01c56 {