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

package/dist/browser/workbench.css

@@ -868,6 +868,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
   --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);
 }
@@ -1496,6 +1497,7 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     --spacing: .25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
+    --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
@@ -2202,6 +2204,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -2310,10 +2316,6 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -2390,6 +2392,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -2414,6 +2420,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -2686,6 +2696,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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;
   }
@@ -3410,6 +3424,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -3518,6 +3536,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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;
   }
@@ -4045,6 +4067,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
@@ -6252,6 +6278,10 @@ html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar
     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);
   }
@@ -7757,16 +7787,12 @@ svg.react-flow__connectionline {
 }
 
 .open-flow-workbench .resource-table {
-  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) max-content minmax(max-content, .7fr) 64px;
+  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) repeat(2, minmax(max-content, .7fr)) max-content;
   column-gap: 24px;
   min-width: 0;
   display: grid;
 }
 
-.open-flow-workbench .resource-table-with-teams {
-  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) max-content minmax(max-content, .7fr) 64px;
-}
-
 .open-flow-workbench .resource-list {
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
@@ -7826,7 +7852,7 @@ svg.react-flow__connectionline {
   grid-area: 1 / -2 / auto / -1;
   justify-content: flex-end;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   padding-right: 16px;
   display: flex;
 }
@@ -7865,7 +7891,7 @@ svg.react-flow__connectionline {
   display: flex;
 }
 
-.open-flow-workbench .resource-primary-name, .open-flow-workbench .resource-team-cell, .open-flow-workbench .resource-flow-id, .open-flow-workbench .resource-updated-at {
+.open-flow-workbench .resource-primary-name, .open-flow-workbench .resource-flow-id, .open-flow-workbench .resource-updated-at {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -7911,14 +7937,6 @@ svg.react-flow__connectionline {
   display: flex;
 }
 
-.open-flow-workbench .resource-team-cell {
-  min-width: 0;
-  color: var(--ui-muted-foreground);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-}
-
 .open-flow-workbench .resource-flow-id-cell {
   min-width: 0;
   color: var(--ui-muted-foreground);
@@ -9856,6 +9874,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);
 }
@@ -11154,11 +11173,7 @@ svg.react-flow__connectionline {
 
 @container open-flow-workbench (max-width: 720px) {
   .open-flow-workbench .resource-table {
-    grid-template-columns: minmax(0, 1fr) max-content minmax(max-content, .7fr) 64px;
-  }
-
-  .open-flow-workbench .resource-table-with-teams {
-    grid-template-columns: minmax(0, 1fr) minmax(0, .6fr) max-content minmax(max-content, .7fr) 64px;
+    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(max-content, .7fr)) max-content;
   }
 
   .open-flow-workbench .flow-columns, .open-flow-workbench .resource-item-row > .resource-list-row {
@@ -11262,14 +11277,14 @@ svg.react-flow__connectionline {
     display: none;
   }
 
-  .open-flow-workbench .resource-table, .open-flow-workbench .resource-table-with-teams {
-    grid-template-columns: max-content minmax(0, 1fr) max-content max-content auto;
-    column-gap: 8px;
+  .open-flow-workbench .resource-table {
+    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
+    column-gap: 16px;
   }
 
   .open-flow-workbench .resource-item-row > .resource-list-row {
     align-content: center;
-    gap: 2px 8px;
+    gap: 2px 16px;
   }
 
   .open-flow-workbench .resource-primary-cell {
@@ -11281,26 +11296,8 @@ svg.react-flow__connectionline {
     justify-self: center;
   }
 
-  .open-flow-workbench .resource-list-row[data-has-team="true"] .resource-flow-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-  }
-
   .open-flow-workbench .resource-primary-copy {
-    grid-area: 1 / 2;
-  }
-
-  .open-flow-workbench .resource-team-cell {
-    grid-area: 2 / 2;
-  }
-
-  .open-flow-workbench .resource-list-row[data-has-team="false"] .resource-team-cell {
-    display: none;
-  }
-
-  .open-flow-workbench .resource-list-row[data-has-team="false"] .resource-primary-copy {
-    grid-row: 1 / 3;
+    grid-area: 1 / 2 / 3;
   }
 
   .open-flow-workbench .resource-publication-status {
@@ -14135,49 +14132,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;
@@ -14185,7 +14213,7 @@ svg.react-flow__connectionline {
   padding: 8px 10px;
 }
 
-.CanvasCard_icon_afa5f {
+.CanvasCard_icon_56d5c {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -14195,11 +14223,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;
@@ -14207,19 +14235,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;
@@ -14227,22 +14255,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;
@@ -14250,51 +14282,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;
@@ -14306,29 +14338,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;
@@ -14340,15 +14372,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;
@@ -14356,52 +14388,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 {

package/dist/browser/workbench.d.ts

@@ -48,7 +48,6 @@ export interface OpenFlowWorkbenchProps {
         readonly status: string;
     } | undefined;
     readonly connectionHref?: ConnectionHref | undefined;
-    readonly flowBadges?: Readonly<Record<string, string>> | undefined;
     /** Reports the active Flow name, including renames; clears it on exit or unmount. Hosts own document titles. */
     readonly onFlowNameChange?: ((name: string | undefined) => void) | undefined;
     readonly host: WorkbenchHost;