@hlang-tech/editor-ui 0.3.0 → 0.5.0

package/lib/live/LivePulse.css

@@ -0,0 +1,21 @@
+/** LivePulse — one flash per run of a node, over its own rounded outline. */
+
+.hl-live-pulse {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow:
+    0 0 0 2px var(--hl-spark),
+    0 0 36px -4px var(--hl-spark);
+  opacity: 0;
+  animation: hl-live-pulse 0.6s var(--hl-ease);
+}
+@keyframes hl-live-pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/lib/nodes/AssetNode.css

@@ -27,13 +27,6 @@
   box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
     0 0 0 1px color-mix(in oklab, var(--hl-spark) 70%, transparent),
     0 0 28px -6px var(--hl-spark);
-  animation: hl-asset-pulse 0.7s var(--hl-ease);
-}
-@keyframes hl-asset-pulse {
-  0% {
-    box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
-      0 0 0 2px var(--hl-spark), 0 0 36px -4px var(--hl-spark);
-  }
 }
 .hl-asset.is-live-error {
   box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
@@ -144,3 +137,12 @@
   background: var(--hl-silver-hi);
   transform: scale(1.2);
 }
+
+/* A node that has finished (RFC 0001): its inputs ended and its outputs
+   closed. It steps back, calmly, rather than going dark. */
+.hl-asset {
+  transition: opacity 0.4s var(--hl-ease);
+}
+.hl-asset.is-finished {
+  opacity: 0.6;
+}

package/lib/nodes/HlangNode.css

@@ -50,13 +50,6 @@
   box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
     0 0 0 1px color-mix(in oklab, var(--hl-spark) 70%, transparent),
     0 0 28px -6px var(--hl-spark);
-  animation: hl-node-pulse 0.7s var(--hl-ease);
-}
-@keyframes hl-node-pulse {
-  0% {
-    box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
-      0 0 0 2px var(--hl-spark), 0 0 36px -4px var(--hl-spark);
-  }
 }
 /* A node that threw during the run goes coral. */
 .hl-node.is-live-error {
@@ -190,3 +183,12 @@
 .hl-port.is-error .hl-handle.hl-handle:hover {
   background: var(--hl-error);
 }
+
+/* A node that has finished (RFC 0001): its inputs ended and its outputs
+   closed. It steps back, calmly, rather than going dark. */
+.hl-node {
+  transition: opacity 0.4s var(--hl-ease);
+}
+.hl-node.is-finished {
+  opacity: 0.6;
+}

package/lib/nodes/PillNode.css

@@ -40,13 +40,6 @@
   box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
     0 0 0 1px color-mix(in oklab, var(--hl-spark) 70%, transparent),
     0 0 26px -6px var(--hl-spark);
-  animation: hl-pill-pulse 0.7s var(--hl-ease);
-}
-@keyframes hl-pill-pulse {
-  0% {
-    box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
-      0 0 0 2px var(--hl-spark), 0 0 34px -4px var(--hl-spark);
-  }
 }
 .hl-pill.is-live-error {
   box-shadow: var(--hl-glass-edge-hi), var(--hl-shadow-node),
@@ -183,3 +176,12 @@
   background: var(--hl-silver-hi);
   transform: scale(1.2);
 }
+
+/* A node that has finished (RFC 0001): its inputs ended and its outputs
+   closed. It steps back, calmly, rather than going dark. */
+.hl-pill {
+  transition: opacity 0.4s var(--hl-ease);
+}
+.hl-pill.is-finished {
+  opacity: 0.6;
+}

package/lib/panels/InspectorPanel.css

@@ -4,6 +4,10 @@
   gap: 18px;
   padding: 14px;
   height: 100%;
+  min-height: 0;
+  /* Its own scroll region: a tall node (or a short pane) never clips it. */
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .hl-inspector-empty {
@@ -159,3 +163,58 @@
   font-weight: 600;
   color: var(--hl-ink-2);
 }
+
+/* Run statistics of the selected node (NodeRunStats). */
+.hl-runstats-hint {
+  text-align: left;
+}
+.hl-runstats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  margin: 0;
+}
+.hl-runstats-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  padding: 7px 9px;
+  border-radius: var(--hl-r-sm);
+  background: rgba(255, 255, 255, 0.025);
+  box-shadow: var(--hl-glass-edge);
+}
+.hl-runstats-cell.is-wide {
+  grid-column: 1 / -1;
+}
+.hl-runstats-cell dt {
+  font-size: 10px;
+  color: var(--hl-ink-3);
+}
+.hl-runstats-cell dd {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--hl-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hl-runstats-cell.is-error dd {
+  color: var(--hl-error);
+}
+
+/* A connection in the inspector: its glyph, and the note above its form. */
+.hl-inspector-kind.hl-connection {
+  --hl-kind: var(--hl-silver);
+}
+.hl-inspector-note {
+  text-align: left;
+  line-height: 1.5;
+}
+
+.hl-runstats-cell.is-warning dd {
+  color: var(--hl-warning);
+}
+.hl-runstats-cell.is-done dd {
+  color: var(--hl-ink-2);
+}

package/lib/panels/PanelHead.css

@@ -0,0 +1,119 @@
+/** PanelHead — a docked panel's header row; it responds to its own width. */
+
+.hl-panel-head {
+  container: hl-panel-head / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 7px 12px 7px 16px;
+  border-bottom: 1px solid var(--hl-line);
+  flex: none;
+}
+
+.hl-panel-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--hl-silver);
+  white-space: nowrap;
+}
+
+.hl-panel-meta {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  color: var(--hl-ink-3);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.hl-panel-actions {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+  flex: none;
+}
+
+.hl-panel-action {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  max-width: 180px;
+  padding: 0 9px 0 7px;
+  border: 1px solid var(--hl-line);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--hl-ink-3);
+  font-family: var(--hl-font-ui);
+  font-size: 11px;
+  font-weight: 550;
+  cursor: pointer;
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
+}
+.hl-panel-action:hover:not(:disabled) {
+  color: var(--hl-ink-2);
+}
+.hl-panel-action.is-on {
+  color: var(--hl-ink);
+  background: color-mix(in oklab, var(--hl-silver) 16%, transparent);
+  border-color: color-mix(in oklab, var(--hl-silver) 28%, transparent);
+}
+.hl-panel-action:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.hl-panel-action:focus-visible {
+  outline: 1px solid var(--hl-silver);
+  outline-offset: -1px;
+}
+.hl-panel-action-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+}
+.hl-panel-action-label {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Narrow: icons only. The label stays in the accessibility tree. */
+@container hl-panel-head (max-width: 599px) {
+  .hl-panel-action {
+    justify-content: center;
+    width: 30px;
+    padding: 0;
+  }
+  .hl-panel-action-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
+/* Narrower still: the status gives way to what the panel is and its actions. */
+@container hl-panel-head (max-width: 419px) {
+  .hl-panel-meta {
+    display: none;
+  }
+}
+
+/* A finger needs a larger target than a pointer. */
+@media (pointer: coarse) {
+  .hl-panel-action {
+    height: 30px;
+  }
+  @container hl-panel-head (max-width: 599px) {
+    .hl-panel-action {
+      width: 34px;
+    }
+  }
+}

package/lib/panels/ParamForm.css

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  /* A fieldset, for its disabled state; without the browser's frame. */
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
 
 .hl-field {
@@ -86,3 +91,14 @@
   border: 1px dashed var(--hl-line-strong);
   border-radius: var(--hl-r-sm);
 }
+
+/* A field that does not apply yet (a connection's capacity while it is
+   unbounded): visibly off, and not interactive. */
+.hl-input:disabled,
+.hl-toggle:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.hl-input:disabled:hover {
+  border-color: var(--hl-line-strong);
+}

package/lib/panels/RunLog.css

@@ -0,0 +1,119 @@
+/** RunLog — the live console of a running graph, docked under the canvas. */
+
+.hl-runlog {
+  container: hl-runlog / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background: var(--hl-void-2);
+  border-top: 1px solid var(--hl-line);
+}
+
+.hl-runlog-hit:focus-visible {
+  outline: 1px solid var(--hl-silver);
+  outline-offset: -1px;
+}
+
+.hl-runlog-empty {
+  margin: 0;
+  padding: 14px 16px;
+  font-size: 12px;
+  color: var(--hl-ink-3);
+}
+
+.hl-runlog-body {
+  overscroll-behavior: contain;
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  overflow: auto;
+  min-height: 0;
+  flex: 1;
+  font-size: 11.5px;
+}
+
+.hl-runlog-hit {
+  display: grid;
+  grid-template-columns: 64px minmax(0, min(22rem, 40%)) minmax(0, 1fr) 72px;
+  align-items: baseline;
+  gap: 12px;
+  width: 100%;
+  padding: 2px 12px 2px 16px;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink-2);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.hl-runlog-hit:hover {
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.hl-runlog-at {
+  color: var(--hl-ink-3);
+  font-variant-numeric: tabular-nums;
+}
+.hl-runlog-route {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.hl-runlog-node {
+  color: var(--hl-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hl-runlog-port {
+  color: var(--hl-ink-3);
+  flex: none;
+}
+.hl-runlog-arrow {
+  color: var(--hl-silver-lo);
+  flex: none;
+}
+.hl-runlog-value {
+  color: var(--hl-silver-hi);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hl-runlog-ms {
+  color: var(--hl-ink-3);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.hl-runlog-row.is-error .hl-runlog-port,
+.hl-runlog-row.is-error .hl-runlog-value {
+  color: var(--hl-error);
+}
+/* End of stream (RFC 0001): quiet, a lifecycle note rather than data. */
+.hl-runlog-row.is-end .hl-runlog-value {
+  color: var(--hl-ink-3);
+  font-style: italic;
+}
+/* A message a drop-oldest connection let go of: lossy, in the warning hue. */
+.hl-runlog-row.is-dropped .hl-runlog-value {
+  color: var(--hl-warning);
+}
+
+/* A narrow log puts the value on its own line. */
+@container hl-runlog (max-width: 720px) {
+  .hl-runlog-hit {
+    grid-template-columns: 56px minmax(0, 1fr) 56px;
+  }
+  .hl-runlog-ms {
+    grid-column: 3;
+    grid-row: 1;
+  }
+  .hl-runlog-value {
+    grid-column: 2 / 4;
+    grid-row: 2;
+  }
+}

package/lib/shell/EditorShell.css

@@ -80,3 +80,85 @@
 .hl-region-footer {
   flex-shrink: 0;
 }
+
+/* A resizable footer: its height is set by `useFooterResize`, its content
+   fills it, and the grab handle straddles its top edge. */
+.hl-region-footer.is-resizable {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.hl-region-footer.is-resizable > :not(.hl-footer-resizer) {
+  flex: 1;
+  min-height: 0;
+}
+/* While dragging, nothing in the editor gets selected and the cursor stays. */
+.hl-shell:has(.hl-region-footer.is-resizing) {
+  cursor: row-resize;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.hl-footer-resizer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -6px;
+  height: 12px;
+  z-index: 6;
+  display: grid;
+  place-items: center;
+  cursor: row-resize;
+  /* The handle owns its drags: no scrolling or zooming of the page under it. */
+  touch-action: none;
+  outline: none;
+}
+.hl-footer-resizer::before {
+  /* The edge itself lights up while the handle is in use. */
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 5px;
+  height: 2px;
+  background: transparent;
+  transition: background 0.14s var(--hl-ease);
+}
+.hl-footer-resizer::after {
+  /* The grip: a short silver bar in the middle of the edge. */
+  content: '';
+  width: 36px;
+  height: 4px;
+  border-radius: var(--hl-r-pill);
+  background: var(--hl-silver-lo);
+  opacity: 0;
+  transition: opacity 0.14s var(--hl-ease), background 0.14s var(--hl-ease);
+}
+.hl-footer-resizer:hover::after,
+.hl-footer-resizer:focus-visible::after,
+.hl-footer-resizer.is-dragging::after {
+  opacity: 1;
+}
+.hl-footer-resizer:hover::before,
+.hl-footer-resizer:focus-visible::before,
+.hl-footer-resizer.is-dragging::before {
+  background: color-mix(in oklab, var(--hl-silver) 45%, transparent);
+}
+.hl-footer-resizer.is-dragging::after {
+  background: var(--hl-silver-hi);
+}
+
+/* A finger needs a larger target, and a grip that shows without hovering. */
+@media (pointer: coarse) {
+  .hl-footer-resizer {
+    top: -14px;
+    height: 28px;
+  }
+  .hl-footer-resizer::before {
+    top: 13px;
+  }
+  .hl-footer-resizer::after {
+    width: 44px;
+    opacity: 0.7;
+  }
+}

package/lib/styles.css

@@ -13,10 +13,12 @@
 @import './nodes/HlangNode.css';
 @import './nodes/AssetNode.css';
 @import './nodes/PillNode.css';
+@import './live/LivePulse.css';
 @import './edges/FlowEdge.css';
 @import './shell/EditorShell.css';
 @import './toolbar/Toolbar.css';
 @import './toolbar/ToolCluster.css';
+@import './toolbar/ReadOnlyBadge.css';
 @import './canvas/CanvasChrome.css';
 @import './canvas/CanvasDock.css';
 @import './canvas/EmptyState.css';
@@ -27,6 +29,8 @@
 @import './panels/RailTabs.css';
 @import './panels/AssetGrid.css';
 @import './panels/PositionPanel.css';
+@import './panels/PanelHead.css';
+@import './panels/RunLog.css';
 @import './command-palette/NodeSearch.css';
 @import './context-menu/NodeContextMenu.css';
 @import './overlays/Cheatsheet.css';

package/lib/toolbar/ReadOnlyBadge.css

@@ -0,0 +1,35 @@
+/** ReadOnlyBadge — a quiet pill in the toolbar: the graph is view only. */
+
+.hl-readonly-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  padding: 4px 10px 4px 8px;
+  border: 1px solid var(--hl-line);
+  border-radius: var(--hl-r-pill);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--hl-ink-2);
+  font-family: var(--hl-font-ui);
+  font-size: 11.5px;
+  font-weight: 550;
+  white-space: nowrap;
+}
+.hl-readonly-badge svg {
+  flex: none;
+  color: var(--hl-silver);
+}
+
+@container hl-toolbar (max-width: 419px) {
+  .hl-readonly-badge {
+    padding: 6px;
+  }
+  .hl-readonly-badge-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

package/lib/toolbar/Toolbar.css

@@ -1,10 +1,13 @@
 /** Frosted-glass toolbar with a wordmark and a right-aligned action cluster. */
 
 .hl-toolbar {
+  /* Its children respond to the toolbar's width (e.g. ReadOnlyBadge). */
+  container: hl-toolbar / inline-size;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   height: 54px;
   padding: 0 16px;
   border-bottom: 1px solid var(--hl-line);
@@ -27,6 +30,9 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  /* The brand gives way first: the actions are what the toolbar is for. */
+  min-width: 0;
+  overflow: hidden;
 }
 .hl-toolbar-glyph {
   width: 14px;
@@ -36,6 +42,10 @@
   background: radial-gradient(circle at 30% 25%, var(--hl-silver-hi), var(--hl-silver-lo) 70%);
   box-shadow: 0 0 10px -3px var(--hl-silver), var(--hl-glass-edge-hi);
 }
+.hl-toolbar-glyph,
+.hl-toolbar-wordmark {
+  flex: none;
+}
 .hl-toolbar-wordmark {
   font-size: 15px;
   font-weight: 600;
@@ -47,6 +57,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: none;
 }
 
 /* Read-only stat pill (node/vertex count). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hlang-tech/editor-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Lumen design system for hlang: node, edge, panel, and shell components for a React Flow node editor, built on @hlang-org/editor-react.",
   "keywords": [
     "hlang",
@@ -59,9 +59,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@hlang-tech/editor-react": "^0.1.2",
-    "@hlang-tech/interpreter": "^2.0.0",
-    "@hlang-tech/editor-core": "^0.2.0"
+    "@hlang-tech/editor-core": "^0.4.0",
+    "@hlang-tech/editor-react": "^0.3.0",
+    "@hlang-tech/interpreter": "^2.1.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.0.0",