html-overlay-node 0.1.6 → 0.1.10

package/index.css

@@ -1,232 +1,391 @@
-html,
-body {
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-  /* Prevent page scroll */
-}
-
-#wrap {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  /* Prevent grid overflow */
-}
-
-.content-root {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  /* KEY FIX: Prevent scroll on zoom/pan */
-}
-
-#cv {
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-button {
-  margin-right: 8px;
-}
-
-/* Toolbar buttons */
-#toolbar button {
-  padding: 6px 12px;
-  background: #6366f1;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-}
-
-#toolbar button:hover {
-  background: #818cf8;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
-}
-
-#toolbar button:active {
-  transform: translateY(0);
-}
-
-/* Toolbar */
-#toolbar {
-  z-index: 1000;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 12px 16px;
-  background: rgba(30, 30, 36, 0.95);
-  border-radius: 8px;
-  border: 1px solid #444;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
-  font-size: 13px;
-  color: #e9e9ef;
-}
-
-#toolbar label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-}
-
-#toolbar select {
-  padding: 4px 8px;
-  background: #1a1a1e;
-  border: 1px solid #555;
-  border-radius: 4px;
-  color: #e9e9ef;
-  font-size: 12px;
-}
-
-.indicator {
-  padding: 4px 8px;
-  background: #2a2a31;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.indicator.active {
-  background: #3a4a5a;
-  color: #6cf;
-}
-
-/* Help Overlay */
-#helpOverlay {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  width: 320px;
-  max-height: 500px;
-  background: rgba(20, 20, 23, 0.95);
-  border: 2px solid #444;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
-  font-size: 13px;
-  color: #e9e9ef;
-  overflow-y: auto;
-  display: none;
-  z-index: 1000;
-  /* Ensure it appears above canvas */
-}
-
-#helpOverlay.visible {
-  display: block;
-}
-
-#helpOverlay h3 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  color: #6cf;
-  border-bottom: 1px solid #444;
-  padding-bottom: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-#helpOverlay .close-btn {
-  cursor: pointer;
-  font-size: 24px;
-  line-height: 1;
-  color: #888;
-  transition: color 0.2s;
-  background: none;
-  border: none;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#helpOverlay .close-btn:hover {
-  color: #6cf;
-}
-
-#helpOverlay h4 {
-  margin: 16px 0 8px 0;
-  font-size: 13px;
-  color: #8aa1ff;
-  font-weight: 600;
-}
-
-.shortcut-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 8px;
-  margin: 4px 0;
-  background: rgba(42, 42, 49, 0.5);
-  border-radius: 4px;
-}
-
-.shortcut-key {
-  font-family: monospace;
-  font-weight: bold;
-  padding: 2px 6px;
-  background: #1a1a1e;
-  border: 1px solid #555;
-  border-radius: 3px;
-  font-size: 11px;
-  color: #6cf;
-}
-
-#helpToggle {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  width: 40px;
-  height: 40px;
-  background: rgba(30, 30, 36, 0.95);
-  border: 2px solid #444;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  font-weight: bold;
-  color: #6cf;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-  z-index: 1000;
-  /* Ensure it appears above canvas */
-}
-
-#helpToggle:hover {
-  background: rgba(42, 42, 49, 0.95);
-  transform: scale(1.05);
-}
-
-#helpToggle.active {
-  background: #3a4a5a;
-}
+:root {
+  /* Colors */
+  --color-primary: #6366f1;
+  --color-primary-hover: #818cf8;
+  --color-primary-active: #5568d0;
+  --color-bg-deep: rgba(10, 10, 18, 0.96);
+  --color-bg-surface: rgba(255, 255, 255, 0.05);
+  --color-bg-toolbar: rgba(12, 12, 20, 0.92);
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-light: rgba(255, 255, 255, 0.04);
+  --color-border-focus: rgba(99, 102, 241, 0.4);
+  --color-text-main: #f5f5f5;
+  --color-text-dim: #a0a0c0;
+  --color-text-muted: #8080a0;
+  --color-text-disabled: #4a4a68;
+
+  /* Layout */
+  --radius-xs: 1px;
+  --radius-sm: 2px;
+  --radius-md: 2px;
+  --radius-lg: 4px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
+
+  /* Node Categories - Premium Palette */
+  --color-node-default: #3b3b4f;
+  --color-node-logic: #7c3aed;
+  --color-node-action: #059669;
+  --color-node-data: #2563eb;
+  --color-node-info: #4f46e5;
+  --color-node-event: #d97706;
+  --color-node-math: #db2777;
+
+  --font-main: "Inter", system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", monospace;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--font-main);
+  background-color: #0c0c14;
+}
+
+#wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.content-root {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+#cv {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* ── Toolbar ─────────────────────────────────────────────────── */
+#toolbar {
+  z-index: 1000;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  padding: 6px 10px;
+  background: var(--color-bg-toolbar);
+  backdrop-filter: blur(8px);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm), var(--shadow-md);
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+#toolbar button {
+  padding: 4px 10px;
+  background: transparent;
+  color: var(--color-text-muted);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.4px;
+  transition: all 0.12s ease;
+  margin: 0;
+  white-space: nowrap;
+}
+
+#toolbar button:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #b0b0d0;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+#toolbar button:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.toolbar-sep {
+  width: 1px;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 0 6px;
+  flex-shrink: 0;
+}
+
+#toolbar label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  color: #606080;
+  font-size: 11px;
+}
+
+#toolbar select {
+  padding: 3px 24px 3px 8px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-dim);
+  font-size: 11px;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.15s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23606080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+}
+
+#toolbar select:hover {
+  border-color: var(--color-border-focus);
+  color: var(--color-text-main);
+  background-color: var(--color-bg-toolbar);
+}
+
+#toolbar select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.indicator {
+  padding: 3px 8px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  color: #4a4a68;
+  text-transform: uppercase;
+  transition: all 0.15s ease;
+}
+
+.indicator.active {
+  color: #5568d0;
+  border-color: rgba(85, 104, 208, 0.3);
+  background: rgba(85, 104, 208, 0.06);
+}
+
+/* ── Help Overlay ─────────────────────────────────────────────── */
+#helpOverlay {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  width: 300px;
+  max-height: 480px;
+  background: var(--color-bg-deep);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 14px;
+  box-shadow: var(--shadow-md), var(--shadow-lg);
+  font-size: 12px;
+  color: var(--color-text-muted);
+  overflow-y: auto;
+  display: none;
+  z-index: 1000;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+
+#helpOverlay::-webkit-scrollbar {
+  width: 5px;
+}
+
+#helpOverlay::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#helpOverlay::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+}
+
+#helpOverlay::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+#helpOverlay.visible {
+  display: block;
+}
+
+#helpOverlay h3 {
+  margin: 0 0 10px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-dim);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+#helpOverlay .close-btn {
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  color: #4a4a68;
+  transition: color 0.15s;
+  background: none;
+  border: none;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#helpOverlay .close-btn:hover {
+  color: #8888a8;
+}
+
+#helpOverlay h4 {
+  margin: 12px 0 6px 0;
+  font-size: 10px;
+  color: #4a4a68;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+}
+
+.shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 6px;
+  margin: 2px 0;
+  border-radius: 3px;
+}
+
+.shortcut-item:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.shortcut-item span:first-child {
+  font-size: 11px;
+  color: #68688a;
+}
+
+.shortcut-key {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  padding: 2px 5px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  color: var(--color-primary);
+  letter-spacing: 0.2px;
+}
+
+#helpToggle {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  width: 28px;
+  height: 28px;
+  background: var(--color-bg-toolbar);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-disabled);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: all 0.12s ease;
+  z-index: 1000;
+}
+
+#helpToggle:hover {
+  background: var(--color-bg-deep);
+  color: var(--color-text-dim);
+  border-color: var(--color-border-focus);
+}
+
+#helpToggle.active {
+  color: var(--color-primary);
+  border-color: var(--color-primary-active);
+  background: rgba(99, 102, 241, 0.08);
+}
+
+/* ── Premium Components ───────────────────────────────────────── */
+.premium-input {
+  width: 100%;
+  padding: 6px 10px;
+  background: rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: var(--radius-sm) !important;
+  color: var(--color-text-main) !important;
+  font-size: 11px !important;
+  font-family: var(--font-mono) !important;
+  outline: none !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  box-sizing: border-box !important;
+  pointer-events: auto !important;
+}
+
+.premium-input:focus {
+  border-color: var(--color-primary) !important;
+  background: rgba(0, 0, 0, 0.6) !important;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
+}
+
+.premium-button {
+  padding: 4px 12px;
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: var(--radius-sm);
+  color: var(--color-primary-hover);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  pointer-events: auto;
+}
+
+.premium-button:hover {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.premium-label {
+  color: var(--color-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  display: block;
+}
+
+.node-overlay {
+  /* Let the canvas renderer handle the box rendering */
+  border-radius: var(--radius-md);
+  pointer-events: none;
+}
+
+.node-body {
+  padding-top: 10px; /* Offset to clear port labels */
+}
+
+.node-header-accent {
+  display: none; /* Redundant now */
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "html-overlay-node",
-  "version": "0.1.6",
-  "description": "A customizable, LiteGraph-style node editor library with canvas rendering, HTML overlays, and flexible execution control",
-  "main": "dist/html-overlay-node.umd.js",
-  "module": "dist/html-overlay-node.es.js",
+  "version": "0.1.10",
+  "description": "LiteGraph-style node editor with HTML overlay support",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/html-overlay-node.es.js",
-      "require": "./dist/html-overlay-node.umd.js"
-    }
+    ".": "./src/index.js",
+    "./nodes": "./src/nodes/index.js",
+    "./defaults": "./src/defaults/index.js",
+    "./index.css": "./index.css",
+    "./src/ui/PropertyPanel.css": "./src/ui/PropertyPanel.css"
   },
   "files": [
     "dist",