vortx-gl 1.0.32 → 1.0.34

package/dist/components/GraphCanvas.d.ts

@@ -1,6 +1,7 @@
 import { GraphEngine } from '../engine/renderer';
 import { NodeInput, EdgeInput, Stylesheet, RadialMenuItem } from '../engine/types';
 import { PartialGraphConfig } from '../engine/config';
+import { RunLayoutOptions } from '../composables/useGraphLayout';
 interface GraphData {
     nodes: Array<{
         data: NodeInput;
@@ -25,10 +26,7 @@ type __VLS_Props = {
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {
     engine: import('vue').ShallowRef<GraphEngine | null, GraphEngine | null>;
-    runLayout: (id: string, opts?: {
-        spacing?: number;
-        nodeIds?: (string | number)[];
-    }) => void;
+    runLayout: (id: string, opts?: RunLayoutOptions) => Promise<boolean>;
     runStressTest: (count: number) => void;
     toggleFlow: () => void;
     toggleTheme: () => void;

package/dist/engine/config.d.ts

@@ -54,6 +54,10 @@ export declare const GraphConfig: {
         readonly nodeExpandButtonFill: "#000000";
         readonly nodeExpandButtonIcon: "#ffffff";
         readonly nodeExpandButtonIconPx: 12;
+        readonly nodeLockChipFill: "#475569";
+        readonly nodeLockChipIcon: "#ffffff";
+        readonly nodeDiscoverButtonFill: "#dc3545";
+        readonly nodeDiscoverButtonIcon: "#ffffff";
         readonly nodeShape: "circle";
         readonly edgeStyle: "bezier";
         readonly labelFontSize: 11;

package/dist/engine/overlay/NodeRenderer.d.ts

@@ -9,6 +9,18 @@ export declare class NodeRenderer {
     private state;
     constructor(state: SharedOverlayState);
     private expandButtonRects;
+    private discoverButtonRects;
+    /**
+     * Hit-test the discover buttons rendered by drawStatusChips. Returns the
+     * node index plus the button centre and radius in CSS px (so the host can
+     * anchor a menu beside it), or null.
+     */
+    pickDiscoverButton(mouseX: number, mouseY: number): {
+        index: number;
+        x: number;
+        y: number;
+        r: number;
+    } | null;
     /**
      * Hit-test the corner expand/collapse buttons rendered by drawExpandButtons.
      * Returns the node index under the cursor, or null. `mouseX/mouseY` are CSS
@@ -58,5 +70,28 @@ export declare class NodeRenderer {
      */
     punchOutNodes(_count: number, metadata: Map<number, NodeMetadata>, pointSize: number): void;
     private drawNodeIcon;
-    private drawLockIcon;
+    /**
+     * Lock and discover chips, placed with the same geometry as the degree
+     * badge (drawBadges): fixed-size circles tangent to the node's actual
+     * per-node-scaled edge, so they sit just outside the node instead of being
+     * swallowed by it. Corners are split so nothing collides with the degree
+     * badge / group +/− (top-right):
+     *   - lock     → bottom-right (was a 🔒 emoji drawn inside the node, whose
+     *                look depended on the platform's emoji font)
+     *   - discover → top-left, clickable.
+     *                Never on a group node: that corner is the group count, and
+     *                a collapsed group isn't a discoverable vertex.
+     *
+     * `show` false still clears the discover hit rects, so a button hidden by
+     * the zoom LOD can't be clicked at its last on-screen position.
+     */
+    drawStatusChips(metadata: Map<number, NodeMetadata>, lockedNodes: Set<number>, pointSize: number, dpr: number, show: boolean): void;
+    /** Filled circle with the 2px white border shared by every corner chip. */
+    private drawChip;
+    /** Padlock: rounded body + shackle arc. */
+    private drawLockGlyph;
+    /** Magic wand + sparkles, a vector take on the discoverable.svg icon. */
+    private drawDiscoverGlyph;
+    /** Four-point star with concave sides, half-extent `s`. */
+    private fillSparkle;
 }

package/dist/engine/overlay/OverlayManager.d.ts

@@ -33,6 +33,13 @@ export declare class OverlayManager {
     pickComboBorder(mouseX: number, mouseY: number): string | null;
     /** Hit-test the corner expand/collapse button of nodeGroup nodes (delegates to NodeRenderer). */
     pickExpandButton(mouseX: number, mouseY: number): number | null;
+    /** Hit-test the discover button of nodeDiscoverable nodes (delegates to NodeRenderer). */
+    pickDiscoverButton(mouseX: number, mouseY: number): {
+        index: number;
+        x: number;
+        y: number;
+        r: number;
+    } | null;
     render(params: OverlayRenderParams): void;
     /**
      * Walks every node, marking culled ones with NaN in `projectedCache` and

package/dist/engine/renderConstants.d.ts

@@ -11,3 +11,7 @@ export declare const NODE_EXPAND_BUTTON_RADIUS_PX: 12;
 export declare const NODE_EXPAND_BUTTON_FILL: "#000000";
 export declare const NODE_EXPAND_BUTTON_ICON: "#ffffff";
 export declare const NODE_EXPAND_BUTTON_ICON_PX: 12;
+export declare const NODE_LOCK_CHIP_FILL: "#475569";
+export declare const NODE_LOCK_CHIP_ICON: "#ffffff";
+export declare const NODE_DISCOVER_BUTTON_FILL: "#dc3545";
+export declare const NODE_DISCOVER_BUTTON_ICON: "#ffffff";

package/dist/engine/renderer.d.ts

@@ -222,6 +222,17 @@ export declare class GraphEngine {
      * relative to the canvas (no dpr multiply — applied internally).
      */
     pickNodeGroupButton(mouseX: number, mouseY: number): number | null;
+    /**
+     * Hit-test the discover button of a `nodeDiscoverable` node. Returns the
+     * node's internal index and the button centre + radius (CSS px relative to
+     * the canvas), or null.
+     */
+    pickDiscoverButton(mouseX: number, mouseY: number): {
+        index: number;
+        x: number;
+        y: number;
+        r: number;
+    } | null;
     deselectAll(): void;
     selectNode(id: number | null): void;
     lockNode(id: string | number): void;

package/dist/engine/types.d.ts

@@ -644,6 +644,14 @@ export interface GraphEventPayloadMap {
         index: number;
         expanded: boolean;
     };
+    /** Fired when the discover button of a `nodeDiscoverable` node is clicked. `x`/`y` are the button centre and `r` its radius, in CSS px relative to the canvas. */
+    "node:discover": {
+        id: string | number;
+        index: number;
+        x: number;
+        y: number;
+        r: number;
+    };
     "edge:click": {
         id: string;
     };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { GraphConfig, resolveConfig } from './engine/config';
 export type { GraphConfigType, PartialGraphConfig, ResolvedGraphConfig, GraphOptions, } from './engine/config';
 export { resolveNodeStyle, resolveNodeSelectStyle, resolveEdgeStyle, resolveEdgeSelectStyle, resolveEdgeClass, resolveIconKey, } from './engine/utils/styleResolver';
 export type { ResolvedNodeStyle, ResolvedNodeSelectStyle, ResolvedEdgeStyle, ResolvedEdgeSelectStyle, EdgeStyleClass, NodeElement, EdgeElement, } from './engine/utils/styleResolver';
+export type { RunLayoutOptions } from './composables/useGraphLayout';
 export declare const createGraphData: (nodes: NodeInput[], edges: EdgeInput[]) => {
     nodes: NodeInput[];
     edges: EdgeInput[];

package/dist/vortx-gl.css

@@ -874,7 +874,7 @@ input[data-v-bf144eba] {
   transition: width 0.3s ease, background-color 0.3s ease;
 }
 
-.vortx-gl-container[data-v-6ba1469f] {
+.vortx-gl-container[data-v-db1523d8] {
   position: relative;
   width: 100%;
   height: 100%;
@@ -886,13 +886,13 @@ input[data-v-bf144eba] {
 }
 
 /* Top Right Controls */
-.top-right-controls-container[data-v-6ba1469f] {
+.top-right-controls-container[data-v-db1523d8] {
   position: absolute;
   top: var(--vortx-space-md);
   right: var(--vortx-space-md);
   z-index: 1100;
 }
-.bottom-right-controls-container[data-v-6ba1469f] {
+.bottom-right-controls-container[data-v-db1523d8] {
   position: absolute;
   bottom: var(--vortx-space-md);
   right: var(--vortx-space-md);
@@ -902,21 +902,21 @@ input[data-v-bf144eba] {
   gap: var(--vortx-space-sm);
   z-index: 1100;
 }
-.bottom-right-controls-container[data-v-6ba1469f] .top-right-controls {
+.bottom-right-controls-container[data-v-db1523d8] .top-right-controls {
   position: static;
   transform: none;
 }
-.controls-stack[data-v-6ba1469f] {
+.controls-stack[data-v-db1523d8] {
   display: flex;
   gap: var(--vortx-space-sm);
   align-items: flex-start;
 }
-.controls-stack[data-v-6ba1469f] .top-right-controls {
+.controls-stack[data-v-db1523d8] .top-right-controls {
   position: static;
   transform: none;
 }
-.main-canvas[data-v-6ba1469f],
-.overlay-canvas[data-v-6ba1469f] {
+.main-canvas[data-v-db1523d8],
+.overlay-canvas[data-v-db1523d8] {
   position: absolute;
   top: 0;
   left: 0;
@@ -924,12 +924,12 @@ input[data-v-bf144eba] {
   height: 100%;
   display: block;
 }
-.overlay-canvas[data-v-6ba1469f] {
+.overlay-canvas[data-v-db1523d8] {
   pointer-events: none;
 }
 
 /* Mobile Menu */
-.mobile-menu[data-v-6ba1469f] {
+.mobile-menu[data-v-db1523d8] {
   position: fixed;
   bottom: var(--vortx-space-md);
   left: 50%;
@@ -941,7 +941,7 @@ input[data-v-bf144eba] {
   z-index: 1000;
   gap: 4px;
 }
-.menu-btn[data-v-6ba1469f] {
+.menu-btn[data-v-db1523d8] {
   background: transparent;
   border: none;
   color: var(--vortx-text-dim);
@@ -955,18 +955,18 @@ input[data-v-bf144eba] {
   transition: all 0.2s;
   min-width: 70px;
 }
-.menu-btn span[data-v-6ba1469f] {
+.menu-btn span[data-v-db1523d8] {
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-.menu-btn.active[data-v-6ba1469f] {
+.menu-btn.active[data-v-db1523d8] {
   background: var(--vortx-primary);
   color: white;
   box-shadow: 0 4px 12px var(--vortx-primary-glow);
 }
-.menu-divider[data-v-6ba1469f] {
+.menu-divider[data-v-db1523d8] {
   width: 1px;
   height: 24px;
   background: var(--vortx-border);
@@ -974,14 +974,14 @@ input[data-v-bf144eba] {
 }
 
 /* Mobile Drawers */
-.drawer-overlay[data-v-6ba1469f] {
+.drawer-overlay[data-v-db1523d8] {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(4px);
   z-index: 1300;
 }
-.mobile-drawer[data-v-6ba1469f] {
+.mobile-drawer[data-v-db1523d8] {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -991,37 +991,37 @@ input[data-v-bf144eba] {
   padding-bottom: env(safe-area-inset-bottom, var(--vortx-space-lg));
   animation: vortxSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.drawer-handle[data-v-6ba1469f] {
+.drawer-handle[data-v-db1523d8] {
   width: 40px;
   height: 4px;
   background: var(--vortx-border);
   border-radius: 2px;
   margin: 0 auto var(--vortx-space-md);
 }
-.drawer-header[data-v-6ba1469f] {
+.drawer-header[data-v-db1523d8] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--vortx-space-md);
 }
-.drawer-header h3[data-v-6ba1469f] {
+.drawer-header h3[data-v-db1523d8] {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
 }
-.drawer-close[data-v-6ba1469f] {
+.drawer-close[data-v-db1523d8] {
   background: transparent;
   border: none;
   color: var(--vortx-text-dim);
   cursor: pointer;
 }
-.drawer-content[data-v-6ba1469f] {
+.drawer-content[data-v-db1523d8] {
   padding: var(--vortx-space-sm) 0;
 }
 
 /* Fix desktop components inside drawer */
-.drawer-content[data-v-6ba1469f] .layout-controls,
-.drawer-content[data-v-6ba1469f] .top-right-controls {
+.drawer-content[data-v-db1523d8] .layout-controls,
+.drawer-content[data-v-db1523d8] .top-right-controls {
   position: static;
   transform: none;
   width: 100%;
@@ -1034,12 +1034,12 @@ input[data-v-bf144eba] {
   flex-wrap: wrap;
   justify-content: center;
 }
-.drawer-content[data-v-6ba1469f] .divider {
+.drawer-content[data-v-db1523d8] .divider {
   display: none;
 }
 
 /* Help Trigger */
-.help-trigger[data-v-6ba1469f] {
+.help-trigger[data-v-db1523d8] {
   position: absolute;
   bottom: var(--vortx-space-md);
   right: var(--vortx-space-md);
@@ -1059,7 +1059,7 @@ input[data-v-bf144eba] {
   transition: all 0.2s;
   color: var(--vortx-text-dim);
 }
-.help-trigger[data-v-6ba1469f]:hover {
+.help-trigger[data-v-db1523d8]:hover {
   background: var(--vortx-primary);
   color: white;
   border-color: white;
@@ -1067,7 +1067,7 @@ input[data-v-bf144eba] {
 }
 
 /* Help Modal */
-.help-modal-overlay[data-v-6ba1469f] {
+.help-modal-overlay[data-v-db1523d8] {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
@@ -1077,45 +1077,45 @@ input[data-v-bf144eba] {
   align-items: center;
   justify-content: center;
 }
-.help-modal[data-v-6ba1469f] {
+.help-modal[data-v-db1523d8] {
   width: 340px;
   border-radius: var(--vortx-radius-lg);
   overflow: hidden;
   animation: vortxScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.help-header[data-v-6ba1469f] {
+.help-header[data-v-db1523d8] {
   padding: var(--vortx-space-md);
   border-bottom: 1px solid var(--vortx-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.help-header h3[data-v-6ba1469f] {
+.help-header h3[data-v-db1523d8] {
   margin: 0;
   font-size: 16px;
 }
-.shortcut-row[data-v-6ba1469f] {
+.shortcut-row[data-v-db1523d8] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px var(--vortx-space-md);
   border-bottom: 1px solid var(--vortx-border);
 }
-.shortcut-row[data-v-6ba1469f]:last-child {
+.shortcut-row[data-v-db1523d8]:last-child {
   border-bottom: none;
 }
-.key-badge[data-v-6ba1469f] {
+.key-badge[data-v-db1523d8] {
   background: var(--vortx-border);
   padding: 4px 10px;
   border-radius: var(--vortx-radius-sm);
   font-family: monospace;
   font-size: 12px;
 }
-.action-desc[data-v-6ba1469f] {
+.action-desc[data-v-db1523d8] {
   font-size: 13px;
   color: var(--vortx-text-dim);
 }
-.close-btn[data-v-6ba1469f] {
+.close-btn[data-v-db1523d8] {
   background: transparent;
   border: none;
   color: var(--vortx-text-dim);
@@ -1123,13 +1123,13 @@ input[data-v-bf144eba] {
   cursor: pointer;
 }
 @media (max-width: 768px) {
-.help-trigger[data-v-6ba1469f] {
+.help-trigger[data-v-db1523d8] {
     display: none;
 }
 }
 
 /* Connecting Toast */
-.connecting-toast[data-v-6ba1469f] {
+.connecting-toast[data-v-db1523d8] {
   position: fixed;
   top: var(--vortx-space-lg);
   left: 50%;
@@ -1140,20 +1140,20 @@ input[data-v-bf144eba] {
   display: flex;
   align-items: center;
   gap: 16px;
-  animation: vortxSlideDown-6ba1469f 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: vortxSlideDown-db1523d8 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.toast-content[data-v-6ba1469f] {
+.toast-content[data-v-db1523d8] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.edge-config-group[data-v-6ba1469f] {
+.edge-config-group[data-v-db1523d8] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.vortx-input-sm[data-v-6ba1469f] {
+.vortx-input-sm[data-v-db1523d8] {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--vortx-border);
   border-radius: var(--vortx-radius-sm);
@@ -1163,24 +1163,24 @@ input[data-v-bf144eba] {
   width: 140px;
   height: 32px;
 }
-.vortx-input-sm.narrow[data-v-6ba1469f] {
+.vortx-input-sm.narrow[data-v-db1523d8] {
   width: 60px;
 }
-.color-presets[data-v-6ba1469f] {
+.color-presets[data-v-db1523d8] {
   display: flex;
   gap: 6px;
 }
-.color-dot[data-v-6ba1469f] {
+.color-dot[data-v-db1523d8] {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.2s;
 }
-.color-dot[data-v-6ba1469f]:hover {
+.color-dot[data-v-db1523d8]:hover {
   transform: scale(1.2);
 }
-@keyframes vortxPulse-6ba1469f {
+@keyframes vortxPulse-db1523d8 {
 0% {
     transform: scale(1);
     opacity: 1;
@@ -1194,7 +1194,7 @@ input[data-v-bf144eba] {
     opacity: 1;
 }
 }
-@keyframes vortxSlideDown-6ba1469f {
+@keyframes vortxSlideDown-db1523d8 {
 from {
     transform: translate(-50%, -20px);
     opacity: 0;