@stealthscale/component-graphs 0.1.0 → 0.2.2

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { t as recipe } from "./recipe-BkmwNoaQ.js";
+import { t as recipe } from "./recipes-lWPA4IJC.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**

package/locales/en/specimen/directed-graph.json

@@ -0,0 +1,88 @@
+{
+  "about": "A directed graph laid out by rank: focus a node to trace what feeds it and what it feeds, and open or close a branch with the count of what it hides.",
+  "controlled": {
+    "about": "The caller keeps the focus in its own state through focus and onFocusChange, so a search result, a table row or the address can focus a node. A press on a node or the Clear focus control reports the new focus back.",
+    "label": "Order lineage",
+    "none": "Nothing focused",
+    "pick": "Focus a dataset",
+    "title": "Controlled focus"
+  },
+  "controls": "Lineage controls",
+  "empty": {
+    "about": "A graph without a node renders its message in the canvas's place, at the canvas's ratio, without the controls, the readout or the overview.",
+    "label": "Revenue lineage",
+    "message": "No datasets match the filter.",
+    "title": "Empty"
+  },
+  "fit": "Fit the graph in view",
+  "isolate": {
+    "about": "trace=\"isolate\" renders the focused node and the nodes it traced alone, laid out again, and depth={1} follows one hop each way. A warehouse graph runs to thousands of tables, and one hop is enough for most questions.",
+    "label": "Revenue lineage, one hop",
+    "title": "Isolated trace"
+  },
+  "kinds": {
+    "dashboard": "Dashboard",
+    "features": "Feature set",
+    "job": "Scheduled job",
+    "model": "dbt model",
+    "source": "Source"
+  },
+  "lineage": {
+    "about": "The graph opens focused on dim_customer. Each card that feeds it or depends on it states its relation, and the rest recede. Select another node to trace it, and press Escape or Clear focus to drop the trace. The layout moves only when the nodes shown change.",
+    "caption": "Customer dimensions feed the executive overview and the churn features, and the failed events model feeds both.",
+    "exec_overview": "Executive overview",
+    "finance_export": "Finance export",
+    "label": "Revenue lineage",
+    "overview": "Overview of the revenue lineage",
+    "title": "Lineage"
+  },
+  "org": {
+    "about": "treeEdges turns a flat list whose people state their manager into the chart's edges. collapsible gives each manager a control with the number of people it hides or shows, and trace=\"off\" keeps a focus as a selection.",
+    "clear": "Clear selection",
+    "collapse_one": "Hide {{count}} report",
+    "collapse_other": "Hide {{count}} reports",
+    "description": "Press Enter or Space to select the person, and Escape to clear the selection.",
+    "empty": "Nobody to show.",
+    "expand_one": "Show {{count}} report",
+    "expand_other": "Show {{count}} reports",
+    "label": "Organisation chart",
+    "leave": "On leave",
+    "open": "Open role",
+    "prompt": "Select a person to see how many people report to them.",
+    "reports": "Reports",
+    "reportsTo": "Reports to",
+    "summary_one": "{{name}} leads {{count}} person.",
+    "summary_other": "{{name}} leads {{count}} people.",
+    "title": "Org chart"
+  },
+  "people": {
+    "ceo": { "name": "Ada Okonkwo", "title": "Chief executive" },
+    "cfo": { "name": "Priya Raman", "title": "Chief financial officer" },
+    "cpo": { "name": "Mateo Silva", "title": "Chief product officer" },
+    "cto": { "name": "Sven Halvorsen", "title": "Chief technology officer" },
+    "des1": { "name": "Hanna Virtanen", "title": "Head of design" },
+    "eng1": { "name": "Ines Duarte", "title": "Head of platform" },
+    "eng2": { "name": "Tomas Nowak", "title": "Head of product engineering" },
+    "eng3": { "name": "Yuki Tanaka", "title": "Staff engineer" },
+    "eng4": { "name": "Nadia Aslam", "title": "Senior engineer" },
+    "fin1": { "name": "Grace Mbeki", "title": "Financial controller" },
+    "pm1": { "name": "Vacant", "title": "Product manager" }
+  },
+  "status": {
+    "failed": "Failed",
+    "stale": "Stale"
+  },
+  "title": "Directed graph",
+  "words": {
+    "clear": "Clear focus",
+    "description": "Press Enter or Space to trace the dataset, and Escape to clear the trace.",
+    "downstream": "Downstream",
+    "edge": "{{source}} to {{target}}",
+    "focus": "Focus",
+    "prompt": "Select a dataset to trace what feeds it and what depends on it.",
+    "summary": "{{name}}: {{upstream}} upstream, {{downstream}} downstream",
+    "upstream": "Upstream"
+  },
+  "zoomIn": "Zoom in",
+  "zoomOut": "Zoom out"
+}

package/locales/en/specimen/graph.json

@@ -0,0 +1,155 @@
+{
+  "about": "A canvas of nodes and the edges between them over React Flow: named nodes with named ports, edges a person can remove, zoom controls and an overview map, and layouts by rank.",
+  "controls": "Canvas",
+  "editor": {
+    "about": "An editable canvas keeps its nodes and edges in React Flow's own state hooks. Drag from an output port to an input port to connect two steps, drag a step to move it, and press an edge's remove control or select it and press Delete to remove it.",
+    "count_one": "{{count}} connection",
+    "count_other": "{{count}} connections",
+    "email": "Send email",
+    "enrich": "Enrich customer",
+    "label": "Alert routing",
+    "remove": "Remove the connection from {{source}} to {{target}}",
+    "route": "Route by severity",
+    "slack": "Post to Slack",
+    "title": "Editable canvas",
+    "webhook": "Webhook"
+  },
+  "fit": "Fit the graph in view",
+  "judge": {
+    "about": "A node with two outputs names each port beside its handle, and an edge leaves the port its sourceHandle names. The judge is invalid, so its card is edged in the error ink and states the fault.",
+    "caption": "Answers that pass the rubric are published, and the rest go back for revision.",
+    "draft": "Draft answer",
+    "fail": "Fail",
+    "judge": "Judge",
+    "label": "Answer review",
+    "model": "Language model",
+    "pass": "Pass",
+    "problem": "No passing score is set.",
+    "publish": "Publish",
+    "revise": "Revise",
+    "rubric": "Rubric of five checks",
+    "title": "Ports and problems"
+  },
+  "pipeline": {
+    "about": "layoutGraph places the steps of a nightly pipeline in ranks 64px apart, from the sources at the top to the outputs at the bottom. The canvas is read-only: it pans, zooms and gives each step a tab stop, and nothing on it can be moved or removed.",
+    "caption": "The churn model failed after the join of orders and customers.",
+    "churn": { "kind": "Model", "label": "Churn model" },
+    "clean": { "kind": "Transform", "label": "Clean orders" },
+    "customers": { "kind": "Source table", "label": "Customers" },
+    "join": { "kind": "Transform", "label": "Join customers" },
+    "label": "Nightly pipeline",
+    "orders": { "kind": "Source table", "label": "Orders" },
+    "revenue": { "kind": "Dashboard", "label": "Revenue report" },
+    "title": "Read-only pipeline"
+  },
+  "ratio": {
+    "about": "ratio sets the canvas's aspect ratio. React Flow renders nothing in a box without a height, so the ratio gives the canvas its height before React Flow measures it.",
+    "title": "Ratio"
+  },
+  "review": {
+    "draft": "Draft",
+    "label": "Review flow",
+    "publish": "Publish",
+    "review": "Review"
+  },
+  "services": {
+    "about": "The overview map below the canvas shows the whole graph and the part in view. Drag it to pan the canvas, and scroll over it to zoom.",
+    "auth": "auth",
+    "caption": "Checkout calls five services, and every order touches inventory.",
+    "cart": "cart",
+    "catalog": "catalog",
+    "checkout": "checkout",
+    "fraud": "fraud",
+    "gateway": "gateway",
+    "inventory": "inventory",
+    "label": "Service calls",
+    "ledger": "ledger",
+    "media": "media",
+    "overview": "Overview of the service calls",
+    "payments": "payments",
+    "pricing": "pricing",
+    "search": "search",
+    "shipping": "shipping",
+    "title": "Overview map"
+  },
+  "status": {
+    "failed": "Failed",
+    "running": "Running",
+    "succeeded": "Succeeded"
+  },
+  "title": "Graph",
+  "versions": {
+    "about": "diffGraphs compares two versions of a flow, and each canvas takes the comparison as changes. An added or changed step takes a tag with a mark and a word, the removed step is tagged in the version it is in, an unchanged step recedes, and an added edge is the success ink while a removed one is dashed.",
+    "added": "Added",
+    "after": {
+      "caption": "Version 4 scores three drafts before it publishes, and no longer notifies the owner.",
+      "label": "Version 4 of the answer flow"
+    },
+    "before": {
+      "caption": "Version 3 publishes the first draft and emails the owner.",
+      "label": "Version 3 of the answer flow"
+    },
+    "changed": "Changed",
+    "details": {
+      "email": "By email",
+      "helpCentre": "To the help centre",
+      "large": "Large model",
+      "screening": "Blocks unsafe requests",
+      "small": "Small model",
+      "three": "Best of three drafts"
+    },
+    "list": {
+      "about": "The comparison is data, so a list of the changes composes from the collections DataList and the data package's Badge: the mark and the word in the label column, the name in the value column, and the changed fields after a changed step's name.",
+      "fields": "{{label}} ({{fields}})",
+      "links": "Connections",
+      "steps": "Steps",
+      "subtitle": "model",
+      "summary_one": "{{count}} change",
+      "summary_other": "{{count}} changes",
+      "title": "Change list"
+    },
+    "removed": "Removed",
+    "steps": {
+      "draft": "Draft the answer",
+      "notify": "Notify the owner",
+      "publish": "Publish the answer",
+      "score": "Score the drafts",
+      "screen": "Screen the request"
+    },
+    "title": "Two versions",
+    "unchanged": "Unchanged"
+  },
+  "workflow": {
+    "about": "Drag a step from the palette onto the canvas, or press it to add the step in the middle of the view. onGraphChange reports each finished edit once, as the graph after it and a step that names what changed, so the example keeps every version and Undo goes back one.",
+    "add": {
+      "fraud": "Add a fraud check",
+      "notice": "Add a warehouse notice",
+      "stock": "Add a stock reservation"
+    },
+    "edits": {
+      "add": "Added {{name}}.",
+      "connect": "Connected two steps.",
+      "move_one": "Moved a step.",
+      "move_other": "Moved {{count}} steps.",
+      "remove_one": "Removed a step.",
+      "remove_other": "Removed {{count}} steps.",
+      "unlink_one": "Removed a connection.",
+      "unlink_other": "Removed {{count}} connections."
+    },
+    "kinds": {
+      "fraud": "Fraud check",
+      "notice": "Warehouse notice",
+      "stock": "Stock reservation"
+    },
+    "label": "Order workflow",
+    "none": "No edits yet.",
+    "placed": "Order placed",
+    "receipt": "Send the receipt",
+    "remove": "Remove the connection from {{source}} to {{target}}",
+    "title": "Palette and history",
+    "undo": "Undo",
+    "undone": "Undid: {{edit}}"
+  },
+  "zoomIn": "Zoom in",
+  "zoomOut": "Zoom out"
+}

package/locales/en/specimen/network-graph.json

@@ -0,0 +1,99 @@
+{
+  "about": "A network laid out by force from a seed: nodes are discs as large as their weight, and a focus lights what a node connects to within a number of hops.",
+  "controlled": {
+    "about": "The caller keeps the focus in its own state through focus and onFocusChange, so a list, a search result or the address can focus a department. A press on a disc or the Clear focus control reports the new focus back.",
+    "label": "Referrals between departments",
+    "none": "No department",
+    "pick": "Focus a department",
+    "summary_one": "{{name}} exchanges referrals with {{count}} department.",
+    "summary_other": "{{name}} exchanges referrals with {{count}} departments.",
+    "title": "Controlled focus"
+  },
+  "controls": "Network controls",
+  "departments": {
+    "cardiology": "Cardiology",
+    "emergency": "Emergency",
+    "neurology": "Neurology",
+    "oncology": "Oncology",
+    "paediatrics": "Paediatrics",
+    "pharmacy": "Pharmacy",
+    "radiology": "Radiology"
+  },
+  "empty": {
+    "about": "A network without a node renders its message in the canvas's place, at the canvas's ratio, without the controls, the readout or the overview.",
+    "label": "Claims handled jointly",
+    "message": "No claim was handled by more than one adjuster this month.",
+    "title": "Empty"
+  },
+  "fit": "Fit the network in view",
+  "mentoring": {
+    "about": "depth={2} lights the people two hops away as well. Elena mentors three people, and at two hops six of the other seven are lit: past one hop a dense network lights nearly everything.",
+    "label": "Mentoring network",
+    "prompt": "Select a person to see who they are connected to.",
+    "summary_one": "{{count}} person is within two hops of {{name}}.",
+    "summary_other": "{{count}} people are within two hops of {{name}}.",
+    "title": "Two hops"
+  },
+  "modules": {
+    "about": "No module states a weight, so each disc is as large as the number of modules taken beside it: Statistics I is taken with all five others and is the largest.",
+    "label": "Modules taken together",
+    "names": {
+      "calculus": "Calculus II",
+      "econometrics": "Econometrics",
+      "ethics": "Research Ethics",
+      "linear": "Linear Algebra",
+      "stats": "Statistics I",
+      "structures": "Data Structures"
+    },
+    "prompt": "Select a module to see what is taken beside it.",
+    "summary_one": "{{name}} is taken with {{count}} other module.",
+    "summary_other": "{{name}} is taken with {{count}} other modules.",
+    "title": "Sized by links"
+  },
+  "pinned": {
+    "about": "draggable={false} pins every site where the layout put it, for a diagram that goes into a report. Panning, zooming and the focus still work, and the description offers no arrow key.",
+    "label": "Inbound supply network",
+    "prompt": "Select a site to see what it depends on.",
+    "sites": {
+      "bochum": "Paint, Bochum",
+      "eindhoven": "Assembly, Eindhoven",
+      "genk": "Press shop, Genk",
+      "kortrijk": "Seats, Kortrijk",
+      "timisoara": "Wiring, Timișoara",
+      "venlo": "Parts hub, Venlo"
+    },
+    "summary_one": "{{name}}: {{count}} direct link",
+    "summary_other": "{{name}}: {{count}} direct links",
+    "title": "Pinned"
+  },
+  "rail": {
+    "about": "Forty stations and eighty services, laid out from seed 6. The shape reads at a glance and the names read once you zoom in, where the overview map shows which part of the network is in view.",
+    "label": "Intercity rail network",
+    "overview": "Overview of the rail network",
+    "prompt": "Select a station to see where it has direct services.",
+    "summary_one": "{{name}}: {{count}} direct service",
+    "summary_other": "{{name}}: {{count}} direct services",
+    "title": "Forty stations"
+  },
+  "title": "Network graph",
+  "topology": {
+    "about": "The graph opens focused on checkout-api: the services it calls are lit, the rest recede, and the readout counts them. A disc is as large as its weight and a line as wide as its tie. Drag a disc, or move the focused one with the arrow keys, to rearrange the picture.",
+    "caption": "Checkout writes to Kafka and Postgres, which the ledger reads, and nothing calls the fax gateway.",
+    "label": "Service topology",
+    "overview": "Overview of the service topology",
+    "prompt": "Select a service to light up what it talks to.",
+    "summary_one": "{{name}} talks to {{count}} service.",
+    "summary_other": "{{name}} talks to {{count}} services.",
+    "title": "Service topology"
+  },
+  "words": {
+    "clear": "Clear focus",
+    "connected": "Connected",
+    "description": "Press Enter or Space to focus the node, the arrow keys to move it, and Escape to clear the focus.",
+    "edge": "{{source}} and {{target}}",
+    "fixed": "Press Enter or Space to focus the node, and Escape to clear the focus.",
+    "focus": "Focus"
+  },
+  "zoomIn": "Zoom in",
+  "zoomOut": "Zoom out"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-graphs",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Renders node graphs over React Flow: a canvas of named nodes and ports, removable edges, zoom controls, a minimap, and layouts by rank or by force.",
   "keywords": [
     "components",
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -38,40 +39,40 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^3.1",
-    "@stealthscale/component-a11y": "^0.1.0",
-    "@stealthscale/component-actions": "^0.1.0",
-    "@stealthscale/component-data": "^0.1.0",
+    "@stealthscale/component-a11y": "^0.1.3",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-data": "^0.2.2",
     "@xyflow/react": "^12.12",
     "d3-force": "^3.0"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/hooks": "^0.1.0",
-    "@stealthscale/provider-locale": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
-    "@stealthscale/vite-config": "^0.6.0",
-    "@stealthscale/vite-config-i18n": "^0.1.0",
-    "@stealthscale/vite-config-react": "^0.8.0",
-    "@stealthscale/vite-config-specimen": "^0.1.0",
-    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/provider-locale": "^0.1.1",
+    "@stealthscale/theme": "^0.5.0",
+    "@stealthscale/vite-config": "^0.8.0",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
+    "@stealthscale/vite-config-react": "^0.9.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/d3-force": "^3.0",
     "@types/react": "^19.3",
     "@types/react-dom": "^19.3",
     "happy-dom": "^20.14",
-    "lucide-react": "^1.48",
-    "oxc-transform-react": "^0.151",
+    "lucide-react": "^1.52",
+    "oxc-transform-react": "^0.153",
     "publint": "^0.3",
     "react": "^19.3",
     "react-dom": "^19.3",
     "typescript": "^7.0",
-    "vitest": "5.0.1"
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/hooks": "^0.1.0",
-    "@stealthscale/provider-locale": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/provider-locale": "^0.1.1",
+    "@stealthscale/theme": "^0.5.0",
     "react": "^19.3",
     "react-dom": "^19.3"
   },