@hlang-org/editor-ui 0.3.0 → 0.4.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/ParamForm.css

@@ -86,3 +86,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,175 @@
+/** RunLog — the live console of a running graph, docked under the canvas. */
+
+.hl-runlog {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  background: var(--hl-void-2);
+  border-top: 1px solid var(--hl-line);
+}
+
+.hl-runlog-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 12px 7px 16px;
+  border-bottom: 1px solid var(--hl-line);
+  flex: none;
+}
+.hl-runlog-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--hl-silver);
+}
+.hl-runlog-count {
+  font-size: 11px;
+  color: var(--hl-ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.hl-runlog-actions {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+  flex: none;
+}
+.hl-runlog-toggle {
+  padding: 3px 9px;
+  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;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
+}
+.hl-runlog-toggle:hover:not(:disabled) {
+  color: var(--hl-ink-2);
+}
+.hl-runlog-toggle.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-runlog-toggle:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.hl-runlog-toggle:focus-visible,
+.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);
+}
+
+@media (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,6 +13,7 @@
 @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';
@@ -27,6 +28,7 @@
 @import './panels/RailTabs.css';
 @import './panels/AssetGrid.css';
 @import './panels/PositionPanel.css';
+@import './panels/RunLog.css';
 @import './command-palette/NodeSearch.css';
 @import './context-menu/NodeContextMenu.css';
 @import './overlays/Cheatsheet.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hlang-org/editor-ui",
-  "version": "0.3.0",
+  "version": "0.4.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-org/editor-react": "^0.1.2",
-    "@hlang-org/editor-core": "^0.2.0",
-    "@hlang-org/interpreter": "^2.0.0"
+    "@hlang-org/editor-core": "^0.3.0",
+    "@hlang-org/editor-react": "^0.2.0",
+    "@hlang-org/interpreter": "^2.1.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.0.0",
@@ -92,7 +92,7 @@
     "build": "tsup && node scripts/copy-css.mjs",
     "test": "vitest run --coverage",
     "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "lint:pkg": "publint && attw --pack --exclude-entrypoints ./tokens.css ./styles.css",
+    "lint:pkg": "publint && attw --pack",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit",
     "clean": "rm -rf lib coverage"
   }