@templmf/temp-solf-lmf 0.0.102 → 0.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@templmf/temp-solf-lmf",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "description": "",
   "main": "index.js",
   "scripts": {

package/skill.md

@@ -0,0 +1,1368 @@
+# G6 v5 Expert Skill（Production Edition）
+
+````md
+---
+name: g6-v5-expert
+description: |
+  Production-grade expert skill for AntV G6 v5.
+
+  Purpose:
+  Prevent LLMs from mixing G6 v3/v4/v5 APIs and enforce
+  correct G6 v5 architecture, runtime APIs, extension APIs,
+  layout usage, behaviors, data structures, rendering lifecycle,
+  and performance patterns.
+
+  MUST:
+  - Generate ONLY G6 v5 code
+  - Prefer @antv/g6 modern APIs
+  - Use extension-driven architecture
+  - Use async render()
+  - Use updateNodeData/updateEdgeData
+  - Use register + ExtensionCategory
+  - Use behaviors instead of legacy modes
+  - Use Graph options schema
+
+  NEVER:
+  - Generate v3/v4 legacy APIs
+  - Use Net / TreeGraph constructors
+  - Use Item APIs
+  - Use graph.data(data)
+  - Use graph.changeData(data)
+  - Use graph.refresh()
+  - Use graph.updateItem()
+  - Use graph.findById()
+  - Use graph.getNodes()
+  - Use graph.getEdges()
+  - Use graph.addItem()
+  - Use graph.removeItem()
+  - Use graph.setMode()
+
+  This skill acts as:
+  - API correctness layer
+  - version guardrail
+  - architecture guideline
+  - runtime update handbook
+  - layout decision engine
+  - graph rendering best practice guide
+
+version: g6-v5-only
+framework: "@antv/g6"
+priority: critical
+
+triggers:
+  - g6
+  - antv
+  - graph visualization
+  - topology
+  - relationship graph
+  - knowledge graph
+  - dag
+  - tree graph
+  - flow graph
+  - combo
+  - graph editor
+  - node edge
+  - layout
+  - graph canvas
+---
+
+# =========================================================
+# CORE VERSION RULES
+# =========================================================
+
+CRITICAL:
+
+This skill ONLY targets:
+
+- @antv/g6 v5+
+
+Never generate:
+- v3 APIs
+- v4 APIs
+- deprecated APIs
+
+Do NOT mix versions.
+
+If user code contains legacy APIs:
+- migrate them to v5 APIs
+- explain migration when necessary
+
+---
+
+# =========================================================
+# G6 v5 ARCHITECTURE
+# =========================================================
+
+G6 v5 is:
+
+- extension-driven
+- declarative
+- runtime-update-oriented
+- async-render-based
+
+Everything is an Extension:
+
+- Node
+- Edge
+- Combo
+- Layout
+- Behavior
+- Plugin
+- Theme
+- Transform
+- Animation
+
+Modern G6 architecture revolves around:
+
+- Graph
+- extensions
+- behaviors
+- layouts
+- runtime updates
+
+NOT:
+- Items
+- Modes
+- ShapeFactory
+- imperative item manipulation
+
+---
+
+# =========================================================
+# CORRECT IMPORTS
+# =========================================================
+
+ALWAYS:
+
+```ts
+import { Graph } from '@antv/g6';
+````
+
+OR:
+
+```ts
+import {
+  Graph,
+  register,
+  ExtensionCategory,
+} from '@antv/g6';
+```
+
+NEVER:
+
+```ts
+import G6 from '@antv/g6';
+```
+
+NEVER:
+
+```ts
+const net = new G6.Net();
+```
+
+NEVER:
+
+```ts
+new G6.TreeGraph()
+```
+
+---
+
+# =========================================================
+
+# GRAPH INITIALIZATION
+
+# =========================================================
+
+STANDARD:
+
+```ts
+const graph = new Graph({
+  container: 'container',
+  width: 1200,
+  height: 800,
+
+  data,
+
+  node: {},
+  edge: {},
+  combo: {},
+
+  layout: {},
+
+  behaviors: [],
+
+  plugins: [],
+});
+
+await graph.render();
+```
+
+MUST:
+
+* use async render()
+* pass data inside constructor or setData()
+
+PREFER:
+
+* declarative config
+
+---
+
+# =========================================================
+
+# DATA STRUCTURE
+
+# =========================================================
+
+ONLY use:
+
+```ts
+{
+  nodes: [],
+  edges: [],
+  combos: [],
+}
+```
+
+Example:
+
+```ts
+const data = {
+  nodes: [
+    {
+      id: 'node-1',
+      type: 'circle',
+      style: {
+        labelText: 'Node A',
+      },
+      data: {
+        category: 'service',
+      },
+    },
+  ],
+
+  edges: [
+    {
+      source: 'node-1',
+      target: 'node-2',
+      type: 'line',
+    },
+  ],
+
+  combos: [],
+};
+```
+
+MUST:
+
+* every node has unique id
+* edges use source + target
+* style goes into style field
+* business fields go into data field
+
+NEVER:
+
+* mix style fields at root level
+* omit ids
+
+---
+
+# =========================================================
+
+# RENDERING LIFECYCLE
+
+# =========================================================
+
+INITIAL RENDER:
+
+```ts
+await graph.render();
+```
+
+INCREMENTAL UPDATE:
+
+```ts
+graph.updateNodeData([...]);
+graph.updateEdgeData([...]);
+
+graph.draw();
+```
+
+FULL DATA REPLACEMENT:
+
+```ts
+graph.setData(data);
+
+await graph.render();
+```
+
+NEVER:
+
+```ts
+graph.refresh()
+```
+
+NEVER:
+
+```ts
+graph.changeData()
+```
+
+NEVER:
+
+```ts
+graph.paint()
+```
+
+NEVER:
+
+```ts
+graph.data(data)
+```
+
+---
+
+# =========================================================
+
+# NODE CONFIGURATION
+
+# =========================================================
+
+GLOBAL NODE CONFIG:
+
+```ts
+node: {
+  type: 'rect',
+
+  style: {
+    size: [120, 40],
+    fill: '#1677ff',
+    radius: 8,
+    labelText: 'Node',
+  },
+},
+```
+
+PER NODE OVERRIDE:
+
+```ts
+nodes: [
+  {
+    id: '1',
+    type: 'circle',
+
+    style: {
+      fill: 'red',
+    },
+  },
+]
+```
+
+COMMON NODE TYPES:
+
+* circle
+* rect
+* ellipse
+* diamond
+* triangle
+* image
+* html
+
+PREFER:
+
+* rect for topology
+* circle for relationships
+* image for avatars
+* html only for complex UI nodes
+
+AVOID:
+
+* massive html nodes
+
+---
+
+# =========================================================
+
+# EDGE CONFIGURATION
+
+# =========================================================
+
+COMMON EDGE TYPES:
+
+* line
+* polyline
+* quadratic
+* cubic
+* cubic-horizontal
+* cubic-vertical
+
+FLOWCHARTS:
+
+* polyline
+
+RELATIONSHIPS:
+
+* cubic
+
+Example:
+
+```ts
+edge: {
+  type: 'polyline',
+
+  style: {
+    endArrow: true,
+    stroke: '#999',
+  },
+},
+```
+
+---
+
+# =========================================================
+
+# COMBO SYSTEM
+
+# =========================================================
+
+Combos are grouping containers.
+
+Use combos for:
+
+* service domains
+* departments
+* clusters
+* grouping
+* bounded contexts
+
+Example:
+
+```ts
+{
+  id: 'node-1',
+  combo: 'backend-group',
+}
+```
+
+Combo definition:
+
+```ts
+combos: [
+  {
+    id: 'backend-group',
+    style: {
+      labelText: 'Backend',
+    },
+  },
+]
+```
+
+---
+
+# =========================================================
+
+# LAYOUT RULES
+
+# =========================================================
+
+# DAG / FLOWCHART
+
+USE:
+
+```ts
+layout: {
+  type: 'dagre',
+}
+```
+
+Best for:
+
+* workflow
+* pipeline
+* dependency graph
+* architecture graph
+
+---
+
+# RELATIONSHIP GRAPH
+
+USE:
+
+```ts
+layout: {
+  type: 'force',
+}
+```
+
+Best for:
+
+* knowledge graph
+* social graph
+* entity relation
+
+---
+
+# TREE GRAPH
+
+USE:
+
+* compact-box
+* indented
+* mindmap
+
+NEVER:
+
+* force layout for trees
+
+---
+
+# RADIAL GRAPH
+
+USE:
+
+```ts
+layout: {
+  type: 'radial',
+}
+```
+
+Best for:
+
+* center relationship graph
+
+---
+
+# CLUSTER GRAPH
+
+USE:
+
+```ts
+layout: {
+  type: 'combo-combined',
+}
+```
+
+---
+
+# GRID GRAPH
+
+USE:
+
+```ts
+layout: {
+  type: 'grid',
+}
+```
+
+---
+
+# CONCENTRIC GRAPH
+
+USE:
+
+```ts
+layout: {
+  type: 'concentric',
+}
+```
+
+---
+
+# IMPORTANT LAYOUT RULE
+
+Do NOT rerun expensive layouts frequently.
+
+Prefer:
+
+* incremental updates
+* stable positioning
+* partial updates
+
+---
+
+# =========================================================
+
+# BEHAVIORS
+
+# =========================================================
+
+G6 v5 uses:
+
+```ts
+behaviors: []
+```
+
+NOT:
+
+```ts
+modes: {}
+```
+
+DEFAULT RECOMMENDED:
+
+```ts
+behaviors: [
+  'drag-canvas',
+  'zoom-canvas',
+  'drag-element',
+]
+```
+
+COMMON BEHAVIORS:
+
+* drag-canvas
+* zoom-canvas
+* drag-element
+* click-select
+* brush-select
+* hover-activate
+* focus-element
+* collapse-expand
+
+---
+
+# INTERACTIVE GRAPH
+
+Recommended:
+
+```ts
+behaviors: [
+  'drag-canvas',
+  'zoom-canvas',
+  'drag-element',
+  'hover-activate',
+  'click-select',
+]
+```
+
+---
+
+# TREE GRAPH
+
+Recommended:
+
+```ts
+behaviors: [
+  'collapse-expand',
+  'drag-canvas',
+  'zoom-canvas',
+]
+```
+
+---
+
+# =========================================================
+
+# STATES
+
+# =========================================================
+
+Use state APIs.
+
+Example:
+
+```ts
+graph.setElementState(
+  'node-1',
+  ['selected'],
+);
+```
+
+COMMON STATES:
+
+* selected
+* active
+* inactive
+* highlighted
+* disabled
+
+Example:
+
+```ts
+node: {
+  state: {
+    selected: {
+      stroke: '#ff4d4f',
+      lineWidth: 3,
+    },
+  },
+},
+```
+
+---
+
+# =========================================================
+
+# CUSTOM EXTENSIONS
+
+# =========================================================
+
+Register custom extensions via:
+
+```ts
+register(
+  ExtensionCategory.NODE,
+  'server-node',
+  ServerNode,
+);
+```
+
+Categories:
+
+* NODE
+* EDGE
+* COMBO
+* BEHAVIOR
+* PLUGIN
+* TRANSFORM
+
+NEVER use:
+
+* old registerNode
+* old registerEdge
+* old registerBehavior
+
+---
+
+# CUSTOM NODE
+
+# =========================================================
+
+Use custom node for:
+
+* topology card
+* service card
+* monitoring node
+* server card
+* status panel
+* React/Vue node
+
+Example:
+
+```ts
+register(
+  ExtensionCategory.NODE,
+  'service-node',
+  ServiceNode,
+);
+```
+
+Usage:
+
+```ts
+node: {
+  type: 'service-node',
+}
+```
+
+---
+
+# =========================================================
+
+# PLUGINS
+
+# =========================================================
+
+Plugins go into:
+
+```ts
+plugins: []
+```
+
+COMMON PLUGINS:
+
+* minimap
+* toolbar
+* contextmenu
+* tooltip
+* grid-line
+* fullscreen
+
+Example:
+
+```ts
+plugins: [
+  {
+    type: 'minimap',
+  },
+]
+```
+
+---
+
+# =========================================================
+
+# TRANSFORMS
+
+# =========================================================
+
+Use transforms for:
+
+* filtering
+* clustering
+* simplifying large graphs
+
+Transforms are preferred over:
+
+* manual data mutation loops
+
+---
+
+# =========================================================
+
+# EVENT SYSTEM
+
+# =========================================================
+
+Example:
+
+```ts
+graph.on('node:click', (event) => {
+  console.log(event);
+});
+```
+
+COMMON EVENTS:
+
+* node:click
+* edge:click
+* canvas:click
+* node:mouseenter
+* node:mouseleave
+
+NEVER:
+
+* use legacy event APIs
+
+---
+
+# =========================================================
+
+# VIEW CONTROL
+
+# =========================================================
+
+Fit view:
+
+```ts
+graph.fitView();
+```
+
+Center:
+
+```ts
+graph.focusElement('node-1');
+```
+
+Zoom:
+
+```ts
+graph.zoomTo(1.5);
+```
+
+Translate:
+
+```ts
+graph.translateBy([100, 0]);
+```
+
+---
+
+# =========================================================
+
+# RUNTIME UPDATE PATTERNS
+
+# =========================================================
+
+PREFERRED:
+
+```ts
+graph.updateNodeData([
+  {
+    id: 'node-1',
+    style: {
+      fill: 'red',
+    },
+  },
+]);
+
+graph.draw();
+```
+
+AVOID:
+
+```ts
+graph.render();
+```
+
+for minor updates.
+
+---
+
+# ADDING DATA
+
+# =========================================================
+
+Preferred:
+
+```ts
+const current = graph.getData();
+
+graph.setData({
+  ...current,
+  nodes: [...current.nodes, newNode],
+});
+
+await graph.render();
+```
+
+NEVER:
+
+```ts
+graph.addItem()
+```
+
+---
+
+# REMOVING DATA
+
+# =========================================================
+
+Preferred:
+
+```ts
+const data = graph.getData();
+
+graph.setData({
+  ...data,
+  nodes: data.nodes.filter(...),
+});
+
+await graph.render();
+```
+
+NEVER:
+
+```ts
+graph.removeItem()
+```
+
+---
+
+# =========================================================
+
+# PERFORMANCE RULES
+
+# =========================================================
+
+For large graphs:
+
+MUST:
+
+* reduce labels
+* reduce animations
+* use transforms
+* use clustering
+* paginate
+* lazy load
+* virtualize when possible
+
+AVOID:
+
+* thousands of html nodes
+* repeated render()
+* repeated force layout
+* heavy shadows
+* massive animations
+
+PREFER:
+
+* updateNodeData
+* updateEdgeData
+* draw()
+
+---
+
+# LARGE KNOWLEDGE GRAPH
+
+# =========================================================
+
+Recommended:
+
+* force layout
+* hover-activate
+* focus-element
+* clustering
+* lazy expansion
+* dynamic neighbor loading
+
+Avoid:
+
+* rendering all relationships initially
+
+---
+
+# TOPOLOGY GRAPH
+
+# =========================================================
+
+Recommended:
+
+* dagre
+* rect nodes
+* polyline edges
+* combos
+* minimap
+* grid-line
+
+---
+
+# TREE GRAPH
+
+# =========================================================
+
+Recommended layouts:
+
+* compact-box
+* indented
+* mindmap
+
+Recommended behaviors:
+
+* collapse-expand
+* zoom-canvas
+* drag-canvas
+
+---
+
+# =========================================================
+
+# HTML NODE RULES
+
+# =========================================================
+
+HTML nodes are expensive.
+
+Use ONLY when:
+
+* embedded UI
+* buttons
+* forms
+* Vue/React components
+
+Avoid for:
+
+* large graphs
+* thousands of nodes
+
+Prefer:
+
+* canvas nodes
+
+---
+
+# =========================================================
+
+# ANIMATION RULES
+
+# =========================================================
+
+Prefer:
+
+* fade
+* translate
+* lightweight animations
+
+Avoid:
+
+* massive path animations
+* continuous animations
+* expensive particle effects
+
+---
+
+# =========================================================
+
+# REACT INTEGRATION
+
+# =========================================================
+
+Recommended:
+
+```ts
+useEffect(() => {
+  const graph = new Graph({...});
+
+  graph.render();
+
+  return () => {
+    graph.destroy();
+  };
+}, []);
+```
+
+MUST:
+
+* destroy graph on unmount
+
+AVOID:
+
+* recreating graph repeatedly
+
+---
+
+# =========================================================
+
+# VUE INTEGRATION
+
+# =========================================================
+
+Recommended:
+
+```ts
+onMounted(async () => {
+  graph = new Graph({...});
+
+  await graph.render();
+});
+
+onBeforeUnmount(() => {
+  graph.destroy();
+});
+```
+
+---
+
+# =========================================================
+
+# COMMON MIGRATIONS
+
+# =========================================================
+
+OLD:
+
+```ts
+graph.changeData(data)
+```
+
+NEW:
+
+```ts
+graph.setData(data);
+
+await graph.render();
+```
+
+---
+
+OLD:
+
+```ts
+graph.refresh()
+```
+
+NEW:
+
+```ts
+graph.draw()
+```
+
+---
+
+OLD:
+
+```ts
+graph.updateItem()
+```
+
+NEW:
+
+```ts
+graph.updateNodeData()
+graph.updateEdgeData()
+```
+
+---
+
+OLD:
+
+```ts
+modes: {
+  default: ['drag-node']
+}
+```
+
+NEW:
+
+```ts
+behaviors: ['drag-element']
+```
+
+---
+
+OLD:
+
+```ts
+G6.registerNode()
+```
+
+NEW:
+
+```ts
+register(
+  ExtensionCategory.NODE,
+  ...
+)
+```
+
+---
+
+# =========================================================
+
+# ABSOLUTE FORBIDDEN APIs
+
+# =========================================================
+
+NEVER GENERATE:
+
+```ts
+graph.changeData()
+graph.refresh()
+graph.paint()
+graph.updateItem()
+graph.findById()
+graph.getNodes()
+graph.getEdges()
+graph.addItem()
+graph.removeItem()
+graph.setMode()
+G6.registerNode()
+G6.registerEdge()
+G6.registerBehavior()
+new G6.TreeGraph()
+new G6.Net()
+```
+
+These are legacy APIs.
+
+---
+
+# =========================================================
+
+# AI DECISION RULES
+
+# =========================================================
+
+IF:
+
+* workflow
+* DAG
+* architecture
+
+THEN:
+
+* dagre
+* rect
+* polyline
+
+---
+
+IF:
+
+* knowledge graph
+* relationship graph
+
+THEN:
+
+* force
+* circle
+* cubic
+
+---
+
+IF:
+
+* org chart
+* tree
+
+THEN:
+
+* compact-box
+* collapse-expand
+
+---
+
+IF:
+
+* large graph
+
+THEN:
+
+* clustering
+* transforms
+* lazy load
+* avoid html nodes
+
+---
+
+IF:
+
+* business grouping exists
+
+THEN:
+
+* combos
+
+---
+
+# =========================================================
+
+# OUTPUT REQUIREMENTS
+
+# =========================================================
+
+Generated code MUST:
+
+* use TypeScript when possible
+* use async render()
+* use Graph from @antv/g6
+* follow v5 APIs only
+* avoid deprecated APIs
+* prefer declarative configs
+* support runtime updates
+
+Generated examples SHOULD:
+
+* include behaviors
+* include layout
+* include proper node styles
+* include cleanup logic
+
+---
+
+# =========================================================
+
+# OFFICIAL REFERENCES
+
+# =========================================================
+
+Official site:
+[https://g6.antv.antgroup.com/](https://g6.antv.antgroup.com/)
+
+GitHub:
+[https://github.com/antvis/G6](https://github.com/antvis/G6)
+
+API docs:
+[https://github.com/antvis/G6/tree/v5/packages/site/docs/api](https://github.com/antvis/G6/tree/v5/packages/site/docs/api)
+
+Architecture:
+
+* Extension system
+* Runtime graph updates
+* Layout system
+* Behavior system
+
+---
+
+```