@hlang-tech/editor-ui 0.0.0-stage → 0.1.1

package/lib/panels/InspectorPanel.css

@@ -0,0 +1,161 @@
+.hl-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 14px;
+  height: 100%;
+}
+
+.hl-inspector-empty {
+  align-items: center;
+  justify-content: center;
+}
+.hl-inspector-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--hl-ink-3);
+  text-align: center;
+}
+
+.hl-inspector-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--hl-line);
+}
+.hl-inspector-kind {
+  --hl-kind: var(--hl-silver);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--hl-void);
+  background: var(--hl-kind);
+  border-radius: 4px;
+  padding: 2px 6px;
+  line-height: 1.5;
+}
+.hl-inspector-kind.hl-r { --hl-kind: var(--hl-r); }
+.hl-inspector-kind.hl-t { --hl-kind: var(--hl-t); }
+.hl-inspector-kind.hl-w { --hl-kind: var(--hl-w); }
+.hl-inspector-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.hl-inspector-name {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--hl-ink);
+}
+.hl-inspector-role {
+  font-size: 10.5px;
+  color: var(--hl-ink-3);
+}
+
+.hl-inspector-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.hl-inspector-section-title {
+  margin: 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--hl-ink-3);
+}
+
+.hl-inspector-ports {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.hl-inspector-port {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--hl-ink-2);
+}
+.hl-inspector-port.is-error {
+  color: color-mix(in srgb, var(--hl-error) 80%, var(--hl-ink-2));
+}
+.hl-port-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.hl-dir-i { background: var(--hl-ink-3); }
+.hl-dir-o { background: var(--hl-silver); }
+.hl-inspector-port.is-error .hl-port-dot { background: var(--hl-error); }
+.hl-inspector-port-dir {
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--hl-ink-3);
+}
+
+/* Header preview thumbnail — image for assets, kind medallion otherwise. */
+.hl-inspector-preview {
+  --hl-kind: var(--hl-silver);
+  height: 132px;
+  border-radius: var(--hl-r-md);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--hl-kind) 22%, var(--hl-surface-2)),
+    var(--hl-void-2));
+  box-shadow: var(--hl-glass-edge);
+}
+.hl-inspector-preview.hl-r { --hl-kind: var(--hl-r); }
+.hl-inspector-preview.hl-t { --hl-kind: var(--hl-t); }
+.hl-inspector-preview.hl-w { --hl-kind: var(--hl-w); }
+.hl-inspector-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.hl-inspector-preview-badge {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: radial-gradient(circle at 32% 28%,
+    color-mix(in oklab, var(--hl-kind) 85%, white), var(--hl-kind) 75%);
+  color: var(--hl-void);
+  font-size: 17px;
+  font-weight: 700;
+  box-shadow: 0 0 18px -4px var(--hl-kind), var(--hl-glass-edge-hi);
+}
+
+/* Redesigned empty state — the first impression when nothing is selected. */
+.hl-inspector-blank {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  padding: 0 8px;
+}
+.hl-inspector-blank-badge {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: radial-gradient(circle at 30% 25%, var(--hl-silver-hi), var(--hl-silver-lo) 72%);
+  box-shadow: 0 0 16px -4px var(--hl-silver), var(--hl-glass-edge-hi);
+  opacity: 0.5;
+}
+.hl-inspector-blank-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--hl-ink-2);
+}

package/lib/panels/OutlineTree.css

@@ -0,0 +1,208 @@
+/**
+ * OutlineTree — a nested layer tree. Group heads (topology sub-flows) expand to
+ * member rows. Per-type icons, hover-revealed visible/lock controls, and a
+ * solid silver highlight on the selected row.
+ */
+
+.hl-outline {
+  padding: 2px 10px 10px;
+  overflow-y: auto;
+  min-height: 0;
+}
+.hl-outline-empty {
+  padding: 12px;
+  font-size: 11px;
+  color: var(--hl-ink-3);
+}
+
+/* Group header (a sub-flow). */
+.hl-outline-grouphead {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink-2);
+  font-family: var(--hl-font-ui);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  border-radius: var(--hl-r-sm);
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
+}
+.hl-outline-grouphead:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--hl-ink);
+}
+.hl-outline-caret {
+  font-size: 9px;
+  color: var(--hl-ink-3);
+  transition: transform 0.16s var(--hl-ease);
+}
+.hl-outline-caret.is-open {
+  transform: rotate(90deg);
+}
+.hl-outline-groupname {
+  flex: 1;
+  text-align: left;
+}
+.hl-outline-count {
+  font-size: 10px;
+  color: var(--hl-ink-3);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--hl-r-pill);
+  padding: 0 7px;
+}
+
+/* Members of a Flow are a FLAT list, NOT a tree. hlang's graph is a DAG — the
+   nodes in a weakly-connected component are peers, and their real relationships
+   (edges, fan-in/out, feedback) live on the canvas, not here. So the outline
+   only expresses GROUPING (which Flow a node belongs to), with no parent/child
+   guide line or nesting indent that would imply a hierarchy that doesn't exist.
+   A small left inset just visually associates members with their group header. */
+.hl-outline-members {
+  list-style: none;
+  margin: 0 0 4px;
+  padding: 0 0 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.hl-outline-row {
+  display: flex;
+  align-items: center;
+  border-radius: var(--hl-r-sm);
+  transition: background 0.14s var(--hl-ease);
+}
+.hl-outline-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+/* Solid silver highlight when selected — full row, not a thin border. */
+.hl-outline-row.is-active {
+  background: linear-gradient(90deg,
+    color-mix(in oklab, var(--hl-silver) 26%, transparent),
+    color-mix(in oklab, var(--hl-silver) 14%, transparent));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hl-silver) 30%, transparent);
+}
+/* A hidden layer must stay READABLE, not vanish. Dim only the NAME (one step,
+   not 0.4 on the whole row) and let the persistent slash-eye badge carry the
+   state. Icon, controls, and selection highlight keep full contrast. */
+.hl-outline-row.is-hidden .hl-outline-name {
+  color: var(--hl-ink-3);
+  font-style: italic;
+}
+.hl-outline-row.is-hidden .hl-outline-icon {
+  opacity: 0.55;
+}
+
+.hl-outline-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 6px 6px 6px 8px;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink);
+  font-family: var(--hl-font-ui);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.hl-outline-icon {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  overflow: hidden;
+  color: var(--hl-void);
+  background: var(--hl-silver-lo);
+}
+.hl-outline-icon.hl-kind-r { background: var(--hl-r); }
+.hl-outline-icon.hl-kind-t { background: var(--hl-t); }
+.hl-outline-icon.hl-kind-w { background: var(--hl-w); }
+.hl-outline-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hl-outline-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Edit-time diagnostic marker in a row. */
+.hl-outline-diag {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+}
+.hl-outline-diag.hl-diag-warning {
+  color: var(--hl-warning);
+}
+.hl-outline-diag.hl-diag-error {
+  color: var(--hl-error);
+}
+
+/* Persistent state glyph inside the row (lock / slash-eye). Always visible when
+   its flag is on, so a hidden or locked layer is legible at rest — the state
+   doesn't hide behind hover. Silver so it reads as an intentional marker. */
+.hl-outline-badge {
+  flex: none;
+  display: grid;
+  place-items: center;
+  color: var(--hl-silver);
+  opacity: 0.9;
+}
+
+/* Inline visible/lock controls — revealed on row hover or when selected. */
+.hl-outline-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 6px;
+  opacity: 0;
+  transition: opacity 0.14s var(--hl-ease);
+}
+.hl-outline-row:hover .hl-outline-controls,
+.hl-outline-row.is-active .hl-outline-controls,
+/* Keep controls visible whenever a flag is active, so the toggled-on state is
+   always operable and never hidden behind hover. */
+.hl-outline-row.is-hidden .hl-outline-controls,
+.hl-outline-row.is-locked .hl-outline-controls {
+  opacity: 1;
+}
+.hl-outline-ctl {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink-3);
+  border-radius: 5px;
+  cursor: pointer;
+  line-height: 1;
+}
+.hl-outline-ctl:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--hl-ink);
+}
+/* An engaged control (hidden/locked ON) reads in silver. */
+.hl-outline-ctl.is-active-ctl {
+  color: var(--hl-silver);
+}

package/lib/panels/ParamForm.css

@@ -0,0 +1,88 @@
+.hl-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hl-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.hl-field-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--hl-ink-2);
+  letter-spacing: 0.01em;
+}
+
+.hl-input {
+  font-family: var(--hl-font-ui);
+  font-size: 12.5px;
+  color: var(--hl-ink);
+  background: var(--hl-void-2);
+  border: 1px solid var(--hl-line-strong);
+  border-radius: var(--hl-r-sm);
+  padding: 6px 9px;
+  width: 100%;
+  transition: border-color 0.15s var(--hl-ease);
+  resize: vertical;
+}
+.hl-input.hl-mono {
+  font-family: var(--hl-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.hl-input:hover {
+  border-color: color-mix(in oklab, var(--hl-silver) 30%, var(--hl-line-strong));
+}
+.hl-input:focus {
+  outline: none;
+  border-color: var(--hl-silver);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hl-silver) 18%, transparent);
+}
+
+/* Toggle pill */
+.hl-toggle {
+  width: 34px;
+  height: 20px;
+  border-radius: 999px;
+  border: 1px solid var(--hl-line-strong);
+  background: var(--hl-void-2);
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  align-self: flex-start;
+  transition: background 0.18s var(--hl-ease), border-color 0.18s var(--hl-ease);
+}
+.hl-toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--hl-ink-3);
+  transition: transform 0.18s var(--hl-ease), background 0.18s var(--hl-ease);
+}
+.hl-toggle.is-on {
+  background: color-mix(in oklab, var(--hl-silver) 28%, var(--hl-void-2));
+  border-color: var(--hl-silver);
+}
+.hl-toggle.is-on .hl-toggle-knob {
+  transform: translateX(14px);
+  background: var(--hl-silver);
+}
+.hl-toggle:focus-visible {
+  outline: 2px solid var(--hl-silver);
+  outline-offset: 2px;
+}
+
+.hl-field-custom {
+  font-size: 12px;
+  color: var(--hl-ink-3);
+  padding: 6px 9px;
+  background: var(--hl-void-2);
+  border: 1px dashed var(--hl-line-strong);
+  border-radius: var(--hl-r-sm);
+}

package/lib/panels/PositionPanel.css

@@ -0,0 +1,87 @@
+/** PositionPanel — align cluster + X/Y coordinates, in the inspector. */
+
+.hl-position {
+  padding: 14px 16px 4px;
+  border-bottom: 1px solid var(--hl-line);
+}
+.hl-position-title {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--hl-silver-lo);
+  margin: 0 0 10px;
+}
+
+.hl-position-align {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 3px;
+  margin-bottom: 12px;
+}
+.hl-position-alignbtn {
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--hl-line);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--hl-ink-2);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease), border-color 0.14s var(--hl-ease);
+}
+.hl-position-alignbtn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--hl-ink);
+  border-color: color-mix(in oklab, var(--hl-silver) 40%, var(--hl-line-strong));
+}
+.hl-position-alignbtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.hl-position-coords {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.hl-position-field {
+  /* min-width:0 is load-bearing: without it the number input's intrinsic
+     min-width overflows the 1fr grid track and the second field spills past the
+     rail's right edge. */
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--hl-line-strong);
+  border-radius: var(--hl-r-sm);
+  padding: 0 9px;
+}
+.hl-position-field:focus-within {
+  border-color: color-mix(in oklab, var(--hl-silver) 45%, var(--hl-line-strong));
+}
+.hl-position-input {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink);
+  font-size: 12px;
+  outline: none;
+  /* strip number spinners */
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.hl-position-input::-webkit-outer-spin-button,
+.hl-position-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.hl-position-input:disabled {
+  color: var(--hl-ink-3);
+}
+.hl-position-axis {
+  font-size: 11px;
+  color: var(--hl-ink-3);
+}

package/lib/panels/PreviewPanel.css

@@ -0,0 +1,51 @@
+/** PreviewPanel — a glass-framed result image, the graph's "output". */
+
+.hl-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 14px 0;
+  /* In a vertical flex host (right rail) the preview must not be squeezed by a
+     taller sibling (inspector) — otherwise the square frame collapses to a
+     sliver. It keeps its intrinsic height. */
+  flex: none;
+}
+.hl-preview-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.hl-preview-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--hl-ink-3);
+}
+.hl-preview-status {
+  font-size: 10px;
+  color: var(--hl-silver);
+}
+
+.hl-preview-frame {
+  border-radius: var(--hl-r-md);
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  background: var(--hl-void-2);
+  box-shadow: var(--hl-glass-edge), var(--hl-shadow-node);
+}
+.hl-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.hl-preview-placeholder {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  color: var(--hl-ink-3);
+  background: linear-gradient(135deg, var(--hl-surface-2), var(--hl-void-2));
+}

package/lib/panels/RailTabs.css

@@ -0,0 +1,34 @@
+/** RailTabs — segmented glass tab strip for a side rail. */
+
+.hl-railtabs {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin: 12px 12px 6px;
+  padding: 3px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--hl-line);
+  border-radius: var(--hl-r-sm);
+}
+
+.hl-railtab {
+  flex: 1;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink-3);
+  font-family: var(--hl-font-ui);
+  font-size: 12px;
+  font-weight: 550;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
+}
+.hl-railtab:hover {
+  color: var(--hl-ink-2);
+}
+.hl-railtab.is-active {
+  color: var(--hl-ink);
+  background: color-mix(in oklab, var(--hl-silver) 16%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hl-silver) 24%, transparent);
+}

package/lib/shell/EditorShell.css

@@ -0,0 +1,75 @@
+/**
+ * EditorShell layout. A column of [toolbar / body / footer]; the body is a row
+ * of [left | canvas | right]. Panels are fixed-width, the canvas flexes.
+ */
+
+.hl-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  /* A faint silver ambient wash from the top — expensive, calm, no color cast. */
+  background:
+    radial-gradient(120% 80% at 50% -10%, rgba(200, 204, 212, 0.05), transparent 60%),
+    var(--hl-void);
+  color: var(--hl-ink);
+  font-family: var(--hl-font-ui);
+}
+
+.hl-region-toolbar {
+  flex-shrink: 0;
+}
+
+.hl-region-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+/* Side panels are frosted glass, so the canvas beneath washes through their
+   edges — this is what makes the material read as glass, not flat panels. */
+.hl-region-left {
+  width: 248px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--hl-line);
+  background: var(--hl-glass);
+  backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
+  -webkit-backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
+  box-shadow: var(--hl-glass-edge);
+  overflow: hidden; /* children own their scroll regions */
+}
+
+.hl-region-canvas {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+}
+/* A soft ambient pool of light in the canvas centre gives the glass panels and
+   nodes something luminous to sit over — depth, the opposite of a flat void. */
+.hl-region-canvas::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    60% 55% at 50% 42%,
+    rgba(200, 204, 212, 0.05),
+    transparent 70%
+  );
+  z-index: 0;
+}
+
+.hl-region-right {
+  width: 312px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--hl-line);
+  background: var(--hl-glass);
+  backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
+  -webkit-backdrop-filter: blur(var(--hl-glass-blur)) saturate(var(--hl-glass-sat));
+  box-shadow: var(--hl-glass-edge);
+  overflow: hidden; /* children own their scroll regions */
+}
+
+.hl-region-footer {
+  flex-shrink: 0;
+}