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

package/lib/styles.css

@@ -0,0 +1,33 @@
+/**
+ * @hlang-org/editor-ui — single stylesheet entry.
+ *
+ * Import this once at your app root to get the full design system: design
+ * tokens plus every component's structural styling. Because the components'
+ * `import './*.css'` statements are compiled to no-ops (the JS bundle carries
+ * no CSS), this aggregated stylesheet is the delivery path for all styles.
+ *
+ *   import '@hlang-org/editor-ui/styles.css';
+ */
+
+@import './tokens/tokens.css';
+@import './nodes/HlangNode.css';
+@import './nodes/AssetNode.css';
+@import './nodes/PillNode.css';
+@import './edges/FlowEdge.css';
+@import './shell/EditorShell.css';
+@import './toolbar/Toolbar.css';
+@import './toolbar/ToolCluster.css';
+@import './canvas/CanvasChrome.css';
+@import './canvas/CanvasDock.css';
+@import './canvas/EmptyState.css';
+@import './panels/ParamForm.css';
+@import './panels/InspectorPanel.css';
+@import './panels/OutlineTree.css';
+@import './panels/PreviewPanel.css';
+@import './panels/RailTabs.css';
+@import './panels/AssetGrid.css';
+@import './panels/PositionPanel.css';
+@import './command-palette/NodeSearch.css';
+@import './context-menu/NodeContextMenu.css';
+@import './overlays/Cheatsheet.css';
+@import './overlays/Toast.css';

package/lib/tokens/tokens.css

@@ -0,0 +1,100 @@
+/**
+ * @hlang-org/editor-ui — design tokens: "Liquid Glass · Black & Silver".
+ *
+ * A calm, expensive, tech-crafted language. Near-black graphite surfaces, a
+ * bright metallic SILVER as the single accent (selection, primary actions,
+ * resting edges), frosted-glass panels, and generous radii. The one bold,
+ * memorable element is the LIVING STREAM: a cold spark that travels a silver
+ * hairline edge only while a flow is actually running — something a static
+ * node board cannot do. Everything at rest stays quiet black/silver glass.
+ *
+ * All tokens are namespaced `--hl-*`. Override any subset under a scope class
+ * (see createTheme).
+ */
+
+:root {
+  /* Graphite surface ramp (near-black → raised) */
+  --hl-void: #08090b;
+  --hl-void-2: #0b0c0f;
+  --hl-surface: #0f1114;
+  --hl-surface-2: #15171c;
+  --hl-line: #212429;
+  --hl-line-strong: #2d323a;
+
+  /* Silver — the primary accent (metallic ramp) */
+  --hl-silver: #c8ccd4; /* base silver: selection, primary, resting edges */
+  --hl-silver-hi: #eef1f6; /* bright edge / highlight */
+  --hl-silver-lo: #7d828c; /* dim silver / secondary */
+
+  /* Frosted glass primitives */
+  --hl-glass: rgba(22, 24, 28, 0.55);
+  --hl-glass-2: rgba(28, 31, 37, 0.62);
+  --hl-glass-blur: 20px;
+  --hl-glass-sat: 1.1;
+  /* 1px inner light border that gives glass its lit edge */
+  --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;
+
+  /* Node-kind temperatures — muted/desaturated to sit in the silver world;
+     used as a small dot/icon on the node, not a large fill. */
+  --hl-r: #7fb8bd; /* Readable — a quiet source */
+  --hl-t: #9298c9; /* Transform — quiet processing */
+  --hl-w: #86bda2; /* Writable — quiet landing */
+  --hl-error: #d98a92; /* @node/error — muted coral */
+  --hl-warning: #e0b877; /* predictive edit-time diagnostic — muted amber */
+
+  /* Text (cool grey ramp) */
+  --hl-ink: #e8eaef;
+  --hl-ink-2: #9ba0aa;
+  --hl-ink-3: #656a74;
+
+  /* Type */
+  --hl-font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --hl-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Radii / depth */
+  --hl-r-sm: 8px;
+  --hl-r-md: 12px;
+  --hl-r-lg: 16px;
+  --hl-r-pill: 999px;
+  /* Soft, expensive shadow (two-layer: contact + ambient) */
+  --hl-shadow-node: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.75);
+  --hl-shadow-glass: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 48px -20px rgba(0, 0, 0, 0.85);
+  /* Silver selection glow (subtle, not neon) */
+  --hl-glow-silver: 0 0 0 1px rgba(200, 204, 212, 0.5),
+    0 0 20px -4px rgba(200, 204, 212, 0.3);
+
+  --hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Live dimension — written imperatively per node/edge by useLiveSignals.
+     Defaults keep a static graph fully lit. */
+  --hl-activity: 1;
+  --hl-cost: 0;
+}
+
+/* Utility: numbers and codes align cleanly */
+.hl-mono {
+  font-family: var(--hl-font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+
+/* Reusable frosted-glass surface — the material of panels, toolbars, popovers. */
+.hl-glass {
+  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), var(--hl-shadow-glass);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hl-app *,
+  .hl-node *,
+  .hl-edge * {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
+  }
+}

package/lib/toolbar/ToolCluster.css

@@ -0,0 +1,48 @@
+/** ToolCluster — centred glass row of icon tools in the top bar. */
+
+.hl-toolcluster {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--hl-line);
+  border-radius: var(--hl-r-pill);
+}
+
+.hl-toolcluster-slot {
+  display: inline-flex;
+  align-items: center;
+}
+.hl-toolcluster-sep {
+  width: 1px;
+  height: 18px;
+  margin: 0 5px;
+  background: var(--hl-line-strong);
+}
+
+.hl-toolcluster-btn {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: none;
+  background: transparent;
+  color: var(--hl-ink-2);
+  border-radius: var(--hl-r-pill);
+  cursor: pointer;
+  transition: background 0.14s var(--hl-ease), color 0.14s var(--hl-ease);
+}
+.hl-toolcluster-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.07);
+  color: var(--hl-ink);
+}
+.hl-toolcluster-btn.is-active {
+  background: color-mix(in oklab, var(--hl-silver) 22%, transparent);
+  color: var(--hl-silver-hi);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--hl-silver) 30%, transparent);
+}
+.hl-toolcluster-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}

package/lib/toolbar/Toolbar.css

@@ -0,0 +1,126 @@
+/** Frosted-glass toolbar with a wordmark and a right-aligned action cluster. */
+
+.hl-toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 54px;
+  padding: 0 16px;
+  border-bottom: 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);
+}
+
+/* The centre tool cluster is absolutely centred so it never shifts with the
+   width of the brand or the action cluster on either side. */
+.hl-toolbar-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.hl-toolbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.hl-toolbar-glyph {
+  width: 14px;
+  height: 14px;
+  border-radius: 5px;
+  /* A brushed-silver bead with a faint kind shimmer — subtle, not rainbow. */
+  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-wordmark {
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--hl-ink);
+}
+
+.hl-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Read-only stat pill (node/vertex count). */
+.hl-toolbar-stat {
+  font-size: 11.5px;
+  color: var(--hl-ink-2);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--hl-line);
+  border-radius: var(--hl-r-pill);
+  padding: 5px 11px;
+}
+
+/* Ghost glass buttons for secondary actions (undo/redo). */
+.hl-toolbar-btn {
+  font-family: var(--hl-font-ui);
+  font-size: 12.5px;
+  font-weight: 550;
+  color: var(--hl-ink-2);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--hl-line-strong);
+  border-radius: var(--hl-r-sm);
+  padding: 7px 13px;
+  cursor: pointer;
+  transition: color 0.15s var(--hl-ease), border-color 0.15s var(--hl-ease),
+    background 0.15s var(--hl-ease);
+}
+.hl-toolbar-btn:hover:not(:disabled) {
+  color: var(--hl-ink);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: color-mix(in oklab, var(--hl-silver) 40%, var(--hl-line-strong));
+}
+.hl-toolbar-btn:focus-visible {
+  outline: 2px solid var(--hl-silver);
+  outline-offset: 2px;
+}
+.hl-toolbar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* The primary action — a brushed-silver frosted capsule. The hero button. */
+.hl-toolbar-run {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: #14161a;
+  border-radius: var(--hl-r-pill);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  background: linear-gradient(180deg, var(--hl-silver-hi), var(--hl-silver) 60%, var(--hl-silver-lo));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
+    0 2px 8px -2px rgba(0, 0, 0, 0.5), 0 0 20px -8px var(--hl-silver);
+  font-weight: 600;
+  padding: 7px 16px;
+}
+.hl-toolbar-run:hover:not(:disabled) {
+  color: #14161a;
+  background: linear-gradient(180deg, #ffffff, var(--hl-silver-hi) 60%, var(--hl-silver));
+  border-color: rgba(255, 255, 255, 0.5);
+}
+.hl-toolbar-run-icon {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #14161a;
+  opacity: 0.85;
+  transition: border-radius 0.15s var(--hl-ease);
+}
+/* While running, the icon becomes a square (Stop) and pulses. */
+.hl-toolbar-run-icon.is-stop {
+  border-radius: 1px;
+  animation: hl-toolbar-pulse 0.9s var(--hl-ease) infinite;
+}
+@keyframes hl-toolbar-pulse {
+  50% {
+    opacity: 0.25;
+  }
+}

package/package.json

@@ -1,6 +1,99 @@
 {
   "name": "@hlang-tech/editor-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "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",
+    "lumen",
+    "node-editor",
+    "design-system",
+    "react",
+    "react-flow",
+    "xyflow"
+  ],
+  "homepage": "https://github.com/hlang-tech/hlang/tree/main/packages/editor-ui#readme",
+  "bugs": {
+    "url": "https://github.com/hlang-tech/hlang/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hlang-tech/hlang.git",
+    "directory": "packages/editor-ui"
+  },
+  "license": "MIT",
+  "author": "hlang-tech",
+  "contributors": [
+    "Archer <qddegtya@gmail.com>",
+    "archersado <archersado@hotmail.com>"
+  ],
+  "type": "commonjs",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./lib/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      }
+    },
+    "./styles.css": "./lib/styles.css",
+    "./tokens.css": "./lib/tokens/tokens.css"
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hlang-tech/editor-react": "^0.1.1",
+    "@hlang-tech/interpreter": "^1.0.1",
+    "@hlang-tech/editor-core": "^0.1.1"
+  },
+  "peerDependencies": {
+    "@xyflow/react": "^12.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.4",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@xyflow/react": "^12.11.1",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "publint": "^0.3.21",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "ts-jest": "^29.4.11",
+    "tsup": "^8.5.1",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.62.1"
+  },
+  "scripts": {
+    "build": "tsup && copyfiles -u 1 \"src/**/*.css\" lib",
+    "test": "jest --coverage",
+    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "lint:pkg": "publint && attw --pack --exclude-entrypoints ./tokens.css ./styles.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf lib coverage"
+  }
+}