@stealthscale/component-graphs 0.1.0

package/dist/recipe-BkmwNoaQ.js

@@ -0,0 +1,632 @@
+import { defineSlotRecipe, dense, onSlots, ratioVariants, truncate } from "@stealthscale/theme/authoring";
+//#region src/graph/disc.ts
+/**
+* Styles a network's node for the graph recipe: a disc with the node's icon, and its name under
+* it.
+*
+* @remarks
+*   The disc is as wide as its `--graph-disc`, which the preset writes from the node's weight, and
+*   is a circle from the theme's panel with a hairline edge. The name is one line on a pill in the
+*   panel's color, so an edge under it does not cross the letters. The node's box is the disc and
+*   the name, so the view's fit and the overview map include the name. The node's handles are in a
+*   hub, a line of no height half a handle below the disc's middle, so the top of each handle, the
+*   point React Flow starts a top handle's edges at, is the disc's centre. The hub is hidden, and
+*   React Flow still measures the handles in it. A selected disc takes the focus ink on its edge,
+*   and a dimmed node, `data-dimmed`, recedes by a dashed edge and a muted name, not by opacity on
+*   its words.
+*/
+/**
+* Styles of the node's box: the disc above its name, centred.
+*/
+const DISC_NODE = {
+	alignItems: "center",
+	display: "flex",
+	flexDirection: "column",
+	gap: "1",
+	position: "relative"
+};
+/**
+* Styles of the disc: a circle as wide as `--graph-disc` with the node's icon in its middle.
+*/
+const DISC = {
+	".react-flow__node.selected &": {
+		_highContrast: { borderColor: "Highlight" },
+		borderColor: "border.focus",
+		boxShadow: "0 0 0 {borderWidths.hairline} {colors.border.focus}"
+	},
+	"[data-dimmed] > &": {
+		borderStyle: "dashed",
+		boxShadow: "none"
+	},
+	"& > svg": { boxSize: "icon.sm" },
+	alignItems: "center",
+	background: "bg.panel",
+	borderColor: "border",
+	borderRadius: "full",
+	borderStyle: "solid",
+	borderWidth: "hairline",
+	boxShadow: "xs",
+	boxSize: "var(--graph-disc)",
+	color: "fg.muted",
+	display: "flex",
+	justifyContent: "center",
+	position: "relative"
+};
+/**
+* Styles of the hub the handles are in: a hidden line of no height, half a handle below the disc's
+* middle.
+*/
+const DISC_HUB = {
+	blockSize: "0",
+	insetBlockStart: "calc(50% + {sizes.2.5} / 2)",
+	insetInline: "0",
+	position: "absolute",
+	visibility: "hidden"
+};
+/**
+* Styles of the name under the disc: one line on a pill in the panel's color.
+*/
+const DISC_LABEL = {
+	"[data-dimmed] > &": {
+		color: "fg.muted",
+		fontWeight: "normal"
+	},
+	background: "bg.panel",
+	borderRadius: "l1",
+	color: "fg",
+	fontWeight: "medium",
+	paddingInline: "1",
+	textStyle: "body.xs",
+	whiteSpace: "nowrap"
+};
+//#endregion
+//#region src/graph/flow.ts
+/**
+* Restyles the classes React Flow writes, for the graph recipe's canvas.
+*
+* @remarks
+*   React Flow places its layers by these rules and ships them as `base.css`. A component imports
+*   no stylesheet, so the canvas states the rules the kit needs, with the theme's tokens for every
+*   color: the pane under the viewport, the nodes and edges above it, the label layer the edges'
+*   controls render in, the corner panels, and the attribution link. The layers keep React Flow's
+*   own order inside the canvas, which isolates them from the page. An edge is the muted ink, and a
+*   selected or focused edge is the focus ink twice as wide. An edge on a traced path,
+*   `data-trace="on"`, is the ink twice as wide, and an edge off it fades to the theme's backdrop
+*   opacity. An added edge, `data-change="added"`, is the success ink twice as wide, a removed edge
+*   the error ink dashed and twice as wide, and an unchanged edge fades, so the dash tells a
+*   removed edge apart under forced colors too. An edge's `--graph-strength` multiplies both
+*   widths, 1 unless set, so a network's stronger link renders wider. A handle is a dot in the
+*   muted ink inside a ring in the panel's color, and a handle no edge meets, `data-unused`, is
+*   invisible and still measured. Under forced colors the edges and the handles take `CanvasText`,
+*   and a selected edge and a handle that takes connections `Highlight`. The viewport is hidden
+*   while React Flow's element has `data-placing`, which a preset sets until its nodes are laid out
+*   by their measured sizes.
+*/
+/**
+* Rules of React Flow's own layers: where each is placed, what takes the pointer, and in which
+* order.
+*/
+const LAYERS = {
+	"& .react-flow": {
+		direction: "ltr",
+		inlineSize: "full",
+		position: "relative"
+	},
+	"& .react-flow__background": {
+		pointerEvents: "none",
+		zIndex: "-1"
+	},
+	"& .react-flow__background-pattern.dots": {
+		_highContrast: { fill: "GrayText" },
+		fill: "border"
+	},
+	"& .react-flow__container": {
+		blockSize: "full",
+		inlineSize: "full",
+		insetBlockStart: "0",
+		insetInlineStart: "0",
+		position: "absolute"
+	},
+	"& .react-flow__edgelabel-renderer": {
+		blockSize: "full",
+		inlineSize: "full",
+		insetBlockStart: "0",
+		insetInlineStart: "0",
+		pointerEvents: "none",
+		position: "absolute",
+		userSelect: "none"
+	},
+	"& .react-flow__nodes": {
+		pointerEvents: "none",
+		transformOrigin: "0 0"
+	},
+	"& .react-flow__pane": {
+		touchAction: "none",
+		zIndex: "1"
+	},
+	"& .react-flow__pane.draggable": { cursor: "pan" },
+	"& .react-flow__pane.dragging": { cursor: "dragging" },
+	"& .react-flow__renderer": { zIndex: "4" },
+	"& .react-flow__selection": { zIndex: "6" },
+	"& .react-flow__viewport": {
+		pointerEvents: "none",
+		transformOrigin: "0 0",
+		zIndex: "2"
+	},
+	"& .react-flow[data-placing] .react-flow__viewport": { visibility: "hidden" }
+};
+/**
+* Rules of the nodes: React Flow's wrapper places each node, takes the pointer and the focus ring.
+*/
+const NODES = {
+	"& .react-flow__node": {
+		boxSizing: "border-box",
+		focusRingColor: "border.focus",
+		focusVisibleRing: "outside",
+		pointerEvents: "all",
+		position: "absolute",
+		transformOrigin: "0 0",
+		userSelect: "none"
+	},
+	"& .react-flow__node.draggable": { cursor: "drag" },
+	"& .react-flow__node.draggable.dragging": { cursor: "dragging" },
+	"& .react-flow__node.selectable": { cursor: "button" }
+};
+/**
+* Rules of the edges and of the line a connection in progress renders.
+*/
+const EDGES = {
+	"& .react-flow__arrowhead polyline": {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "fg.muted"
+	},
+	"& .react-flow__arrowhead polyline.arrowclosed": {
+		_highContrast: { fill: "CanvasText" },
+		fill: "fg.muted"
+	},
+	"& .react-flow__connection": { pointerEvents: "none" },
+	"& .react-flow__connection-path": {
+		_highContrast: { stroke: "Highlight" },
+		fill: "none",
+		stroke: "border.focus",
+		strokeWidth: "ring"
+	},
+	"& .react-flow__connectionline": {
+		overflow: "visible",
+		position: "absolute",
+		zIndex: "1001"
+	},
+	"& .react-flow__edge": {
+		outline: "none",
+		pointerEvents: "visibleStroke"
+	},
+	"& .react-flow__edge-path": {
+		_highContrast: { stroke: "CanvasText" },
+		fill: "none",
+		stroke: "fg.muted",
+		strokeWidth: "calc({borderWidths.hairline} * var(--graph-strength, 1))",
+		transition: "stroke {durations.fast} {easings.out}, opacity {durations.fast} {easings.out}"
+	},
+	"& .react-flow__edge:is(.selected, :focus-visible) .react-flow__edge-path": {
+		_highContrast: { stroke: "Highlight" },
+		stroke: "border.focus",
+		strokeWidth: "ring"
+	},
+	"& .react-flow__edge.inactive": { pointerEvents: "none" },
+	"& .react-flow__edge.selectable": { cursor: "button" },
+	"& .react-flow__edge[data-change=added] .react-flow__edge-path": {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "border.success",
+		strokeWidth: "calc({borderWidths.ring} * var(--graph-strength, 1))"
+	},
+	"& .react-flow__edge[data-change=removed] .react-flow__edge-path": {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "border.error",
+		strokeDasharray: "{spacing.1.5} {spacing.1}",
+		strokeWidth: "calc({borderWidths.ring} * var(--graph-strength, 1))"
+	},
+	"& .react-flow__edge[data-change=unchanged]": { opacity: "backdrop" },
+	"& .react-flow__edge[data-trace=off]": { opacity: "backdrop" },
+	"& .react-flow__edge[data-trace=on] .react-flow__edge-path": {
+		_highContrast: { stroke: "CanvasText" },
+		stroke: "fg",
+		strokeWidth: "calc({borderWidths.ring} * var(--graph-strength, 1))"
+	},
+	"& .react-flow .react-flow__edges": { position: "absolute" },
+	"& .react-flow .react-flow__edges svg": {
+		overflow: "visible",
+		pointerEvents: "none",
+		position: "absolute"
+	}
+};
+/**
+* Rules of a handle, which React Flow places on the side of its node that `position` names.
+*/
+const HANDLES = {
+	"& .react-flow__handle": {
+		_highContrast: {
+			background: "CanvasText",
+			borderColor: "Canvas"
+		},
+		background: "fg.muted",
+		borderColor: "bg.panel",
+		borderRadius: "full",
+		borderStyle: "solid",
+		borderWidth: "ring",
+		boxSize: "2.5",
+		pointerEvents: "none",
+		position: "absolute"
+	},
+	"& .react-flow__handle-bottom": {
+		insetBlockEnd: "0",
+		left: "var(--graph-port-along, 50%)",
+		transform: "translate(-50%, 50%)"
+	},
+	"& .react-flow__handle-left": {
+		left: "0",
+		top: "var(--graph-port-along, 50%)",
+		transform: "translate(-50%, -50%)"
+	},
+	"& .react-flow__handle-right": {
+		right: "0",
+		top: "var(--graph-port-along, 50%)",
+		transform: "translate(50%, -50%)"
+	},
+	"& .react-flow__handle-top": {
+		insetBlockStart: "0",
+		left: "var(--graph-port-along, 50%)",
+		transform: "translate(-50%, -50%)"
+	},
+	"& .react-flow__handle.connectable": {
+		_highContrast: { background: "Highlight" },
+		background: "border.focus",
+		pointerEvents: "all"
+	},
+	"& .react-flow__handle.connectionindicator": { cursor: "connect" },
+	"& .react-flow__handle[data-unused]": { visibility: "hidden" }
+};
+/**
+* Rules of the corner panels: the attribution and any panel of the caller's.
+*/
+const PANELS = {
+	"& .react-flow__attribution": {
+		background: "bg.panel",
+		color: "fg.muted",
+		margin: "0",
+		paddingInline: "1",
+		textStyle: "body.xs"
+	},
+	"& .react-flow__attribution a": {
+		color: "fg.muted",
+		textDecoration: "none"
+	},
+	"& .react-flow__panel": {
+		margin: "3",
+		position: "absolute",
+		zIndex: "5"
+	},
+	"& .react-flow__panel.bottom": { insetBlockEnd: "0" },
+	"& .react-flow__panel.left": { left: "0" },
+	"& .react-flow__panel.right": { right: "0" },
+	"& .react-flow__panel.top": { insetBlockStart: "0" }
+};
+/**
+* Rules the canvas slot takes: React Flow's layers, nodes, edges, handles and panels.
+*/
+const FLOW = {
+	...LAYERS,
+	...NODES,
+	...EDGES,
+	...HANDLES,
+	...PANELS
+};
+//#endregion
+//#region src/graph/recipe.ts
+/**
+* Styles a graph's figure, canvas, controls, overview map, summary, empty state and nodes, and
+* restyles the classes React Flow writes with the theme's tokens.
+*
+* @remarks
+*   The canvas is a panel as wide as the figure and as tall as its ratio, because React Flow
+*   measures its box after the first render and renders nothing in a box 0 pixels high. The empty
+*   state takes the canvas's place at the same ratio. The controls are a row at the figure's start
+*   above the canvas, and the overview map a panel at its end below the canvas, so neither covers a
+*   node. A node is a card 256px wide, the width `layoutGraph` places a node by, with a header of
+*   an icon, a title, a subtitle, a status and actions, a body, and a problem line in the error
+*   ink. A tag renders above the card's top edge at its end, and a branch control straddles the
+*   middle of its bottom edge, where the card keeps half the control's height free. A network's
+*   node is a disc with its name under it instead of a card. A selected node takes the focus ink
+*   on its edge, and a node the canvas dims recedes by a dashed edge and a muted title, not by
+*   opacity on its words. A port's name is written beside its handle, outside
+*   the node, on the side the handle is on. The recipe has no `palette` axis, because a graph is
+*   not a control and its colors are the theme's roles.
+*/
+/**
+* Styles of the overview map's box: a panel 176 by 112 pixels at the end of the figure, the map's
+* nodes in the muted ink and the part out of view behind a wash.
+*/
+const OVERVIEW = {
+	"& .react-flow__minimap-mask": {
+		fill: "bg.muted",
+		fillOpacity: "{opacity.muted}",
+		stroke: "none"
+	},
+	"& .react-flow__minimap-node": {
+		_highContrast: { fill: "CanvasText" },
+		fill: "fg.muted"
+	},
+	"& .react-flow__minimap-svg": {
+		blockSize: "28",
+		display: "block",
+		inlineSize: "44"
+	},
+	background: "bg.panel",
+	borderColor: "border",
+	borderRadius: "l2",
+	borderStyle: "solid",
+	borderWidth: "hairline",
+	marginInlineStart: "auto",
+	overflow: "hidden"
+};
+/**
+* Rule of the hairline that parts a node's body and problem line from its header.
+*/
+const RULED = {
+	borderBlockStartColor: "border",
+	borderBlockStartStyle: "solid",
+	borderBlockStartWidth: "hairline",
+	paddingBlock: dense("{spacing.inset.xs}"),
+	paddingInline: dense("{spacing.inset.sm}"),
+	textStyle: "body.xs"
+};
+/**
+* Defines the graph recipe: a figure whose canvas is as wide as the figure and as tall as its
+* ratio, by default the video ratio.
+*/
+const recipe = defineSlotRecipe({
+	base: {
+		canvas: {
+			...FLOW,
+			background: "bg.panel",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			inlineSize: "full",
+			isolation: "isolate",
+			minInlineSize: "0",
+			overflow: "hidden",
+			position: "relative"
+		},
+		caption: {
+			color: "fg.muted",
+			textStyle: "body.sm"
+		},
+		controls: {
+			alignItems: "center",
+			alignSelf: "flex-start",
+			display: "flex",
+			gap: dense("{spacing.gap.xs}"),
+			maxInlineSize: "full"
+		},
+		disc: DISC,
+		discHub: DISC_HUB,
+		discLabel: DISC_LABEL,
+		discNode: DISC_NODE,
+		empty: {
+			alignItems: "center",
+			background: "bg.panel",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "dashed",
+			borderWidth: "hairline",
+			color: "fg.muted",
+			display: "flex",
+			inlineSize: "full",
+			justifyContent: "center",
+			padding: dense("{spacing.inset.md}"),
+			textAlign: "center",
+			textStyle: "body.sm"
+		},
+		level: {
+			color: "fg.muted",
+			fontVariantNumeric: "tabular-nums",
+			minInlineSize: "10",
+			paddingInline: dense("{spacing.inset.xs}"),
+			textAlign: "center",
+			textStyle: "body.xs"
+		},
+		node: {
+			".react-flow__node.selected > &": {
+				_highContrast: { borderColor: "Highlight" },
+				borderColor: "border.focus",
+				boxShadow: "0 0 0 {borderWidths.hairline} {colors.border.focus}"
+			},
+			"&:has(> .graph__nodeBranch)": { paddingBlockEnd: `calc(${dense("{sizes.control.xs}")} / 2)` },
+			"&[data-dimmed]": {
+				borderStyle: "dashed",
+				boxShadow: "none"
+			},
+			"&[data-invalid]": { borderColor: "border.error" },
+			background: "bg.panel",
+			borderColor: "border",
+			borderRadius: "l2",
+			borderStyle: "solid",
+			borderWidth: "hairline",
+			boxShadow: "xs",
+			color: "fg",
+			display: "flex",
+			flexDirection: "column",
+			inlineSize: "64",
+			position: "relative",
+			textAlign: "start",
+			textStyle: "body.sm"
+		},
+		nodeActions: {
+			alignItems: "center",
+			display: "flex",
+			flexShrink: "0"
+		},
+		nodeBody: {
+			...RULED,
+			color: "fg.muted"
+		},
+		nodeBranch: {
+			display: "inline-flex",
+			insetBlockEnd: "0",
+			left: "50%",
+			position: "absolute",
+			translate: "-50% 50%"
+		},
+		nodeHeader: {
+			alignItems: "flex-start",
+			display: "flex",
+			gap: dense("{spacing.gap.sm}"),
+			paddingBlock: dense("{spacing.inset.xs}"),
+			paddingInline: dense("{spacing.inset.sm}")
+		},
+		nodeIcon: {
+			"& > svg": { boxSize: "icon.sm" },
+			color: "fg.muted",
+			display: "inline-flex",
+			flexShrink: "0",
+			marginBlockStart: "0.5"
+		},
+		nodeProblem: {
+			...RULED,
+			color: "fg.error"
+		},
+		nodeSubtitle: {
+			...truncate(),
+			color: "fg.muted",
+			textStyle: "body.xs"
+		},
+		nodeTag: {
+			display: "inline-flex",
+			insetBlockEnd: "100%",
+			insetInlineEnd: dense("{spacing.inset.sm}"),
+			marginBlockEnd: "1",
+			pointerEvents: "none",
+			position: "absolute"
+		},
+		nodeText: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			minInlineSize: "0"
+		},
+		nodeTitle: {
+			...truncate(),
+			"[data-dimmed] &": {
+				color: "fg.muted",
+				fontWeight: "normal"
+			},
+			fontWeight: "medium"
+		},
+		overview: OVERVIEW,
+		portName: {
+			".react-flow__handle-bottom > &": {
+				insetBlockStart: "100%",
+				left: "50%",
+				marginBlockStart: "1",
+				translate: "-50% 0"
+			},
+			".react-flow__handle-left > &": {
+				marginInlineEnd: "1.5",
+				right: "100%",
+				top: "50%",
+				translate: "0 -50%"
+			},
+			".react-flow__handle-right > &": {
+				left: "100%",
+				marginInlineStart: "1.5",
+				top: "50%",
+				translate: "0 -50%"
+			},
+			".react-flow__handle-top > &": {
+				insetBlockEnd: "100%",
+				left: "50%",
+				marginBlockEnd: "1",
+				translate: "-50% 0"
+			},
+			"&[data-hidden]": { srOnly: true },
+			background: "bg.panel",
+			borderRadius: "l1",
+			color: "fg.muted",
+			paddingInline: "1",
+			pointerEvents: "none",
+			position: "absolute",
+			textStyle: "body.xs",
+			whiteSpace: "nowrap"
+		},
+		remove: {
+			display: "inline-flex",
+			left: "0",
+			pointerEvents: "all",
+			position: "absolute",
+			top: "0",
+			transform: "translate(-50%, -50%) translate(var(--graph-edge-x), var(--graph-edge-y))"
+		},
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: dense("{spacing.gap.md}"),
+			inlineSize: "full",
+			margin: "0",
+			minInlineSize: "0"
+		},
+		summary: {
+			alignItems: "center",
+			color: "fg.muted",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: dense("{spacing.gap.sm}"),
+			textStyle: "body.sm"
+		}
+	},
+	className: "graph",
+	defaultVariants: { ratio: "video" },
+	jsx: [/^Graph(\.\w+)?$/u],
+	slots: [
+		"root",
+		"canvas",
+		"controls",
+		"level",
+		"caption",
+		"node",
+		"nodeHeader",
+		"nodeIcon",
+		"nodeText",
+		"nodeTitle",
+		"nodeSubtitle",
+		"nodeActions",
+		"nodeBody",
+		"nodeProblem",
+		"nodeTag",
+		"nodeBranch",
+		"discNode",
+		"disc",
+		"discHub",
+		"discLabel",
+		"portName",
+		"remove",
+		"overview",
+		"summary",
+		"empty"
+	],
+	variants: { 
+	/**
+	* Aspect ratio of the canvas, one of the theme's ratios, which the empty state takes in the
+	* canvas's place.
+	*
+	* @remarks
+	*   React Flow measures the canvas's box after the first render and renders nothing in a box 0
+	*   pixels high. The ratio gives the box its height before that measurement.
+	*/
+ratio: onSlots({
+		canvas: ratioVariants(),
+		empty: ratioVariants()
+	}) }
+});
+//#endregion
+export { recipe as t };

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist/theme.d.ts

@@ -0,0 +1,11 @@
+//#region src/theme.d.ts
+/**
+ * Registers every recipe in the package in the preset an application's style compiler installs.
+ *
+ * @remarks
+ *   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so no
+ *   generator writes it.
+ */
+declare const _default: import("@stealthscale/theme/authoring").Preset;
+//#endregion
+export { _default as default };

package/dist/theme.js

@@ -0,0 +1,16 @@
+import { t as recipe } from "./recipe-BkmwNoaQ.js";
+import { definePreset } from "@stealthscale/theme/authoring";
+//#region src/theme.ts
+/**
+* Registers every recipe in the package in the preset an application's style compiler installs.
+*
+* @remarks
+*   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so no
+*   generator writes it.
+*/
+var theme_default = definePreset({
+	name: "@stealthscale/component-graphs",
+	theme: { extend: { slotRecipes: { graph: recipe } } }
+});
+//#endregion
+export { theme_default as default };