@hlang-tech/editor-ui 0.4.0 → 0.6.0

package/lib/panels/InspectorPanel.css

@@ -5,7 +5,11 @@
   padding: 14px;
   height: 100%;
   min-height: 0;
-  /* Its own scroll region: a tall node (or a short pane) never clips it. */
+  /* Its own scroll region: a tall node (or a short pane) never clips it. A host
+     that stacks it in a larger scrolling column sets `height: auto` and
+     `overflow: visible`: a scroll container that cannot scroll would still
+     end the wheel's scroll chain (overscroll-behavior), so the column would
+     never scroll under the pointer. */
   overflow-y: auto;
   overscroll-behavior: contain;
 }

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 {

package/lib/panels/RunLog.css

@@ -1,6 +1,7 @@
 /** 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;
@@ -9,64 +10,6 @@
   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;
@@ -160,7 +103,8 @@
   color: var(--hl-warning);
 }
 
-@media (max-width: 720px) {
+/* 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;
   }

package/lib/styles.css

@@ -18,6 +18,7 @@
 @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';
@@ -28,6 +29,7 @@
 @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';

package/lib/tokens/tokens.css

@@ -35,8 +35,9 @@
   --hl-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   --hl-glass-edge-hi: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
 
-  /* The single cold spark — ONLY for live/flowing signal, never resting UI */
-  --hl-spark: #a7c7ff;
+  /* The live light — ONLY for live/flowing signal, never resting UI. Moving
+     data is told by light, not by hue: brighter than any resting silver. */
+  --hl-spark: #f7f9fc;
 
   /* Node-kind temperatures — muted/desaturated to sit in the silver world;
      used as a small dot/icon on the node, not a large fill. */

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.4.0",
+  "version": "0.6.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.2.0",
+    "@hlang-tech/editor-core": "^0.4.0",
     "@hlang-tech/interpreter": "^2.1.0",
-    "@hlang-tech/editor-core": "^0.3.0"
+    "@hlang-tech/editor-react": "^0.3.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.0.0",