@nesso-how/mcp 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/starlight-docs.pages.json

@@ -12,6 +12,12 @@
       "description": "Adding concepts, drawing typed relations, and using the Inspector to enrich nodes with definitions, examples, notes, and images.",
       "markdown": "The canvas is the centre of Nesso. **Concepts** are nodes; **typed relations** are edges. The **Inspector** is the right-hand panel where you enrich whatever you've got selected.\n\n## Adding concepts\n\n- **Bottom dock -> +** adds a new concept near the centre of the viewport.\n- **`N`** adds a concept at the viewport centre (same as the dock `+`).\n- **Double-click** empty canvas to add a concept at the pointer.\n- New concepts open in edit mode. Type the label and press `Enter` to commit, `Esc` to cancel.\n- **Double-click** a concept to rename it inline.\n\nConcepts you add are stored locally in IndexedDB. Switch graphs from the sidebar; create new graphs from the **Graphs** list.\n\n## Drawing relations\n\nDrag from a node's right edge (`out` handle) to another node's left edge (`in` handle). On release, a **relation picker** opens, grouped by category. Pick the relation type and the edge is created.\n\n- Drag-to-self is ignored, so you can't accidentally create self-loops.\n- The connection line previews with the same quadratic geometry the final edge uses.\n- Edge type can be changed any time from the Inspector when an edge is selected.\n\nSee the [relation types reference](../../reference/relation-types/) for the full list, semantic meaning, and coefficients. Per-type line style and glyph come from `@nesso-how/relation-types`; edge encoding density is under [Display options](#display-options-sidebar) below.\n\n## Selecting and editing\n\n- **Click** a node or edge to select it. The Inspector reflects the selection.\n- **Hold `⌘` / `Ctrl` and click** to toggle additional items into the selection.\n- **Drag on empty canvas** to marquee-select multiple items.\n- **`Del`** or **`Backspace`** (or the trash icon in the bottom dock) deletes the selection (one relation, one concept, or every concept in a marquee). Edges attached to a deleted concept go with it. Relation delete is only from the dock or keyboard, not from the relation Inspector.\n- **`⌘C` / `Ctrl+C`** (copy icon in the bottom dock) copies the selection. Copying concepts also copies relations between them; copying a relation includes its two endpoints. **`⌘V` / `Ctrl+V`** (paste icon) duplicates the clipboard with a small offset and selects the new items.\n- **Arrow keys** nudge a selected concept; **Shift + arrows** move it in larger steps.\n- **`⌘Z` / `Ctrl+Z`** undoes structural edits; **`⌘⇧Z` / `Ctrl+Shift+Z`** redoes. History has 50 steps and resets when you switch or import a graph.\n\n## The Inspector\n\nWhen a concept is selected, the Inspector shows two tabs.\n\n### Overview\n\n- **Title:** edit inline. Pressing `Enter` commits; `Esc` reverts.\n- **FSRS stats:** when due, stability (in days), and last self-rating. Surfaced read-only.\n- **Relations:** outgoing and incoming edges grouped by category. Click a relation chip to jump to the connected node; click the type to swap relation in place.\n\n### Notes\n\nThree free-text fields that travel with the concept and feed both the AI mentor and Review:\n\n- **Definition:** a one-sentence-ish explanation in your own words.\n- **Examples:** one per line. Press `Shift+Enter` or use the `+` button to add a new line.\n- **Notes:** anything else: caveats, sources, mnemonics.\n\nThese power the [Review](./review-mode/) recall question. The model is told to _aim_ at the topic suggested by your notes without paraphrasing the definition, so active recall still works.\n\n### Concept image\n\nPress the picture icon to open the **Wikimedia Commons search**. The query auto-fills from the concept title and runs immediately; pick any result to attach a 200-px thumbnail to the concept. The image shows in the Inspector, in Review mode, and is included as context for the AI mentor.\n\nThe image link and Commons description URL are persisted with the graph, so attribution is preserved on export.\n\n## Display options (sidebar)\n\n**Sidebar → Display** controls how the **active graph** is rendered: heatmap overlay, edge encoding density, curve style, and auto flip. Choices are saved **with the graph** in IndexedDB (and included in JSON export). New graphs start from the app defaults until you change them.\n\nWhen **Display → Curve** is set to **Arc**, **Auto flip** (on by default) bends relations toward the side that avoids overlapping nodes, flipping when the target is above the source on the right, or below on the left, and updates live while you drag concepts. **Flip curve** in the Inspector is **Off | Auto | On** while auto flip is on: **Auto** follows layout, **Off** / **On** pin a manual bend on that edge. With auto flip off for that graph, the control is **Off | On** only.\n\n## When an edge is selected\n\nThe Inspector shows the relation as a chip with its category colour and a dropdown of every relation type. Picking a new type updates the edge in place; the graph keeps its endpoints and identity.\n\n## Stats and search\n\n- **Sidebar -> Stats** shows concept count, link count, and current zoom (a handy gut-check for graph size).\n- **`⌘K` / `Ctrl+K`** opens a fuzzy search palette over concept titles. `Enter` selects and recenters the viewport; `Esc` closes.\n\n## Edge encoding density\n\nEdges carry three visual channels: colour (category), line style, and glyph. Crank this down for large or printed graphs from **Sidebar → Display → Edges**:\n\n- **Full:** colour + style + glyph (default).\n- **Category:** colour only.\n- **Minimal:** plain line, no encoding.\n\nSymmetric relations (similarity, opposition) never render an arrowhead regardless of encoding."
     },
+    {
+      "slug": "guides/embedding-graphs",
+      "title": "Embedding graphs",
+      "description": "Render Nesso knowledge graphs in your own React app with @nesso-how/graph.",
+      "markdown": "The [`@nesso-how/graph`](https://www.npmjs.com/package/@nesso-how/graph) package is an embeddable React component for rendering Nesso knowledge graphs: the same visual style (categories, glyphs, edge curves) used by the app, available for docs, blog posts, or any React surface.\n\n## Install\n\n```bash\nnpm install @nesso-how/graph @xyflow/react react react-dom\n```\n\n`@xyflow/react`, `react`, and `react-dom` are peer dependencies. Install versions matching the ranges declared in the package's `peerDependencies`.\n\n## Basic usage\n\n```tsx\nimport { NessoGraph } from '@nesso-how/graph'\nimport '@xyflow/react/dist/style.css'\n;<NessoGraph nodes={nodes} edges={edges} style={{ width: '100%', height: 400 }} />\n```\n\nBy default the graph renders read-only (no drag, connect, or selection) using the same category colors, glyphs, and edge encoding as the app. Pass a full `NessoGraphFile` via `graph` instead of `nodes`/`edges` if you have one (e.g. a graph exported from the app as JSON).\n\n## Display options\n\n`display` controls how edges and categories are drawn:\n\n```tsx\n<NessoGraph\n  nodes={nodes}\n  edges={edges}\n  display={{ edgeEncoding: 'full', curveStyle: 'straight', showHeatmap: false }}\n/>\n```\n\n`palette` selects one of the category color palettes available in the app's settings. Embeds use hex colors from `PALETTES` (`categoryColorMode: 'palette'`, the default). Host apps that set `--cat-*` CSS variables (like Nesso itself) pass `categoryColorMode=\"css\"`.\n\nOptional `getRelationLabel` localizes edge labels; `isItemSelected` syncs selection with an external store.\n\n## Interactivity\n\n`nodesDraggable`, `nodesConnectable`, and `elementsSelectable` are all `false`/read-only by default, so turn on what you need. How you provide nodes determines who owns their state:\n\n- **`nodes`/`edges`** (_controlled_): you own the state, so also pass `onNodesChange`/`onEdgesChange`/`onConnect` to apply the resulting changes (e.g. when positions live in your own store, like the main app does).\n- **`defaultNodes`/`defaultEdges`** (_uncontrolled_): React Flow seeds its state once from these and manages drag, connect, and selection internally, with nothing else to wire up. The right choice for a self-contained embed.\n\n```tsx\n<NessoGraph\n  defaultNodes={nodes}\n  defaultEdges={edges}\n  nodesDraggable\n  style={{ width: '100%', height: 400 }}\n/>\n```\n\n## Escape hatch\n\nAny [`ReactFlow`](https://reactflow.dev/api-reference/react-flow) prop not listed above can be passed through `reactFlowProps`, for example to hide the attribution badge or disable double-click-to-zoom:\n\n```tsx\n<NessoGraph\n  nodes={nodes}\n  edges={edges}\n  reactFlowProps={{ proOptions: { hideAttribution: true }, zoomOnDoubleClick: false }}\n/>\n```"
+    },
     {
       "slug": "guides/getting-started",
       "title": "Getting started",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nesso-how/mcp",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "description": "MCP server exposing Nesso knowledge graph tools to LLM clients",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,7 @@
     "@cfworker/json-schema": "^4.1.1",
     "@modelcontextprotocol/server": "^2.0.0-alpha.2",
     "zod": "^4.4.3",
-    "@nesso-how/relation-types": "0.1.0-alpha.26"
+    "@nesso-how/relation-types": "0.1.0-alpha.28"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "bundle-docs": "node scripts/bundle-starlight-docs.mjs",
-    "build": "tsc && node scripts/bundle-starlight-docs.mjs",
+    "build": "rm -rf dist && tsc && node scripts/bundle-starlight-docs.mjs",
     "dev": "tsc --watch",
     "start": "node dist/index.js"
   }