3.11.5

Aug 01, 2026 · 4 packages · 12 unique changes · 4 release entries

libsBreaking changes

This release affects the sharedLibs family.

Run contractspec connect adoption resolve --family sharedLibs to see how it impacts your project.

Release summaries

layout-stack-box-system
Clarify Box/HStack/VStack layout intent and activate neutral Box defaults behind an explicit legacy bridge.
maintainer
The shared layout contract now distinguishes semantic Box wrappers from directional HStack/VStack flex stacks, with neutral Box defaults active and guard evidence for remaining owned bridge callsites.
integrator
Product UI should use VStack for vertical composition, HStack for horizontal composition, and reserve Box for neutral wrappers or documented true grid/custom layout exceptions.
m2-graph-ui-primitives
Additive: M2 graph UI — GraphCanvas, minimap, focus-mode, animations, drilldown, 5 design-system templates with engineer+manager RoleMorph variants.
maintainer
M2 graph primitives land as additive minor changes across four packages. ui-kit-core gains cross-platform graph/timeline interfaces and hooks. ui-kit-web gains the full P6 graph component suite (canvas, minimap, focus-mode, edge labels, animated transitions, drilldown, custom node renderer) plus axe-core tests. ui-kit gains the native equivalents of all P6 components (react-native-svg minimap, reanimated transitions, native drilldown) plus native a11y tests. design-system gains five role-morphing graph templates (ConversationGraphView, WorkflowDagView, AgentTreeView, EngineeringLoopView, PersonActivityView) each with engineer + manager variants and full DocBlock exports.
integrator
All new — no breaking changes. Import graph components from their respective packages: GraphCanvas from @lssm-tech/lib.ui-kit-web/ui/graph, GraphNode/GraphEdge types from @lssm-tech/lib.ui-kit-core/interfaces, ConversationGraphView and other templates from @lssm-tech/lib.design-system/components/templates/graph/*. Each design-system template accepts nodes[], edges[], viewerRole ('engineer'|'manager'), and onAction.
customer
Applications built with these packages can now render conversation graphs, workflow DAGs, agent task trees, engineering loops, and person activity streams with built-in role-appropriate layouts and accessibility support.
m3-ui-kit-core-graph-primitives
M3 — New graph analysis, accessibility, time, and AI cost-guard primitives across P2–P7 (rendering backend selection, LOD, viewport, a11y, filter, path analysis, clustering, heatmap, diff, animation budget, saved views, AI cost guard).
maintainer
All new primitives are additive exports. Existing consumers are unaffected. New hooks are opt-in.
integrator
Graph surfaces can now opt into rendering backend selection, LOD tiers, accessibility providers, filter specs, path analysis, clustering, heatmap, diff detection, animation budgets, saved views, and AI cost guardrails.
ui-kit-core-graph-timeline-primitives
Add shared graph/timeline prop interfaces and interaction hooks to ui-kit-core.
maintainer
New shared cross-platform primitives: GraphNodeProps, GraphEdgeProps, GraphCanvasProps, TimelineEventProps, TimelineProps, TimelineGraphProps, useGraphInteraction, useTimelineInteraction, useAdaptiveGraphRenderer (bounded threshold ladder: SVG ≤50 / Canvas ≤500 / WebGL >500; respects prefers-reduced-motion). All additive.
integrator
Import graph/timeline prop interfaces and hooks from @lssm-tech/lib.ui-kit-core. Use useAdaptiveGraphRenderer to pick the appropriate renderer strategy at runtime. Interfaces are consumed by ui-kit-web (SVG/reactflow) and ui-kit (.native.tsx) implementations.

Deprecations

- Relying on Box for implicit row direction, default gap, or centered alignment is deprecated; use HStack or VStack, or the temporary legacyBoxLayout bridge for owned exceptions.

Migration guide

Replace implicit Box stack layouts
Required
Replace Box-as-flex-stack usage with HStack or VStack and keep remaining exceptions behind the owned legacyBoxLayout bridge.
1. Run the layout guard and review high-confidence Box-as-stack findings.
2. Convert vertical Box layouts to VStack and horizontal Box layouts to HStack.
3. Prefer stack props over className-only flex, gap, items, or justify overrides.
4. Preserve true grid, absolute-positioned, or measured custom layouts with an allowlist rationale.
5. Do not treat legacyBoxLayout as normal product guidance.

Upgrade steps

Make stack direction explicit after the Box default flip
assisted
Use the package docs and guard output to migrate product surfaces toward explicit HStack and VStack usage while remaining legacy Box layout callsites stay behind the bridge.
Packages: @lssm-tech/lib.ui-kit-core, @lssm-tech/lib.ui-kit-web, @lssm-tech/lib.ui-kit, @lssm-tech/lib.design-system
1. Read packs/workspace-specific/rules/design-system-usage.md and the updated UI package READMEs.
2. Use VStack for page sections, card bodies, forms, lists, and panels.
3. Use HStack for toolbars, chip rows, inline metrics, action rows, and label/value pairs.
4. Reserve Box for neutral wrappers, single-child surfaces, true grid, or custom positioning.
5. Re-run the guard after each migration slice and keep bridge counts owned until removed.
Render graphs with GraphCanvas
assisted
GraphCanvas is the cross-platform graph renderer. Pass GraphNode[] + GraphEdge[] and choose a layout algorithm.
Packages: @lssm-tech/lib.ui-kit-core, @lssm-tech/lib.ui-kit-web, @lssm-tech/lib.ui-kit, @lssm-tech/lib.design-system
1. Import GraphCanvas from @lssm-tech/lib.ui-kit-web/ui/graph.
2. Import GraphNode, GraphEdge from @lssm-tech/lib.ui-kit-core/interfaces.
3. Set layout to 'dag' for directed flows, 'radial' for hub-spoke, 'grid' for uniform grids.
4. Use nodeRenderer prop to inject custom node components.
5. Wrap in GraphFocusMode for sub-tree collapse/expand.
6. Add GraphMinimap for viewport navigation on large graphs.
Use design-system templates for standard graph surfaces
assisted
Five templates cover the most common graph use cases with built-in role adaptation.
Packages: @lssm-tech/lib.ui-kit-core, @lssm-tech/lib.ui-kit-web, @lssm-tech/lib.ui-kit, @lssm-tech/lib.design-system
1. ConversationGraphView — for CommunicationOS thread/participant/channel graphs.
2. WorkflowDagView — for workflow step sequences and DAGs.
3. AgentTreeView — for agent task trees.
4. EngineeringLoopView — for CI/CD and engineering loop workflows.
5. PersonActivityView — for person timeline + activity graphs.
6. Pass viewerRole='engineer' for detailed DAG/topology view; 'manager' for summary overview.
7. Import from @lssm-tech/lib.design-system/components/templates/graph/<TemplateName>.
Honour prefers-reduced-motion in graph animations
assisted
Graph animated transitions respect the useReducedMotion hook from ui-kit-core. Pass reducedMotion={true} to GraphCanvas to disable animations explicitly.
Packages: @lssm-tech/lib.ui-kit-core, @lssm-tech/lib.ui-kit-web, @lssm-tech/lib.ui-kit, @lssm-tech/lib.design-system
1. Import useReducedMotion from @lssm-tech/lib.ui-kit-core.
2. Pass reducedMotion={useReducedMotion()} to GraphCanvas.
3. Animated transitions will skip to final state when reduced-motion is active.
Adopt useBackendSelection for adaptive rendering
manual
Use selectBackend() or useBackendSelection() to choose the correct rendering backend at mount.
Packages: @lssm-tech/lib.ui-kit-core
1. Import useBackendSelection from ui-kit-core.
2. Pass the returned backend to GraphCanvas as the backend prop.
3. Do not hot-swap the backend after mount.
Wire useAiCostGuard for AI budget enforcement
manual
Wrap AI graph surfaces with useAiCostGuard to enforce per-session and per-user/day spend limits.
Packages: @lssm-tech/lib.ui-kit-core
1. Import useAiCostGuard from ui-kit-core.
2. Pass session budget ($0.50) and per-user/day budget ($5.00) defaults.
3. Observe ai.graph.budget_exceeded events at 80% soft and 100% modal thresholds.

Unique release changes

- Additive: M2 graph UI — GraphCanvas, minimap, focus-mode, animations, drilldown, 5 design-system templates with engineer+manager RoleMorph variants.
4 packages · 4 occurrences
- Clarify Box/HStack/VStack layout intent and activate neutral Box defaults behind an explicit legacy bridge.
4 packages · 4 occurrences
- Five templates cover the most common graph use cases with built-in role adaptation.
4 packages · 4 occurrences
- Graph animated transitions respect the useReducedMotion hook from ui-kit-core. Pass reducedMotion={true} to GraphCanvas to disable animations explicitly.
4 packages · 4 occurrences
- GraphCanvas is the cross-platform graph renderer. Pass GraphNode[] + GraphEdge[] and choose a layout algorithm.
4 packages · 4 occurrences
- Relying on Box for implicit row direction, default gap, or centered alignment is deprecated; use HStack or VStack, or the temporary legacyBoxLayout bridge for owned exceptions.
4 packages · 4 occurrences
- Replace Box-as-flex-stack usage with HStack or VStack and keep remaining exceptions behind the owned legacyBoxLayout bridge.
4 packages · 4 occurrences
- Use the package docs and guard output to migrate product surfaces toward explicit HStack and VStack usage while remaining legacy Box layout callsites stay behind the bridge.
4 packages · 4 occurrences
- Add shared graph/timeline prop interfaces and interaction hooks to ui-kit-core.
1 packages · 1 occurrences
- M3 — New graph analysis, accessibility, time, and AI cost-guard primitives across P2–P7 (rendering backend selection, LOD, viewport, a11y, filter, path analysis, clustering, heatmap, diff, animation budget, saved views, AI cost guard).
1 packages · 1 occurrences
- Use selectBackend() or useBackendSelection() to choose the correct rendering backend at mount.
1 packages · 1 occurrences
- Wrap AI graph surfaces with useAiCostGuard to enforce per-session and per-user/day spend limits.
1 packages · 1 occurrences

Impacted packages

@lssm-tech/lib.design-system
Layer: libs · 4 changes
@lssm-tech/lib.ui-kit
Layer: libs · 4 changes
@lssm-tech/lib.ui-kit-core
Layer: libs · 1 changes
@lssm-tech/lib.ui-kit-web
Layer: libs · 4 changes