@danxbot/ui 13.2.0 → 13.3.0

package/dist/types/components/focus-web/FocusWeb.d.ts

@@ -0,0 +1,3 @@
+import type { FocusWebProps } from "./types";
+export type { FocusWebProps } from "./types";
+export declare function FocusWeb<Extra = unknown>({ center, ring, parent, onSelect, onUp, renderNode, label, className, }: FocusWebProps<Extra>): import("react").JSX.Element;

package/dist/types/components/focus-web/index.d.ts

@@ -0,0 +1,4 @@
+export { FocusWeb } from "./FocusWeb";
+export { CENTER_POSITION, PARENT_POSITION, WIDE_RING_THRESHOLD, layoutRing } from "./layout";
+export type { PlacedRingNode } from "./layout";
+export type { FocusNodeRenderContext, FocusNodeRenderer, FocusNodeRole, FocusWebNode, FocusWebProps, } from "./types";

package/dist/types/components/focus-web/layout.d.ts

@@ -0,0 +1,28 @@
+/** Ids at or below this count get ONE ring; more get two concentric ones. */
+export declare const WIDE_RING_THRESHOLD = 10;
+/** Fixed corner slot for the "up" affordance — matches the legacy page's own
+    placement (`left: 7%, top: 10%`), never part of the ring itself. */
+export declare const PARENT_POSITION: {
+    leftPct: number;
+    topPct: number;
+};
+export declare const CENTER_POSITION: {
+    leftPct: number;
+    topPct: number;
+};
+export interface PlacedRingNode {
+    id: string;
+    leftPct: number;
+    topPct: number;
+    /** Which concentric ring this sits on. `0` (outer) for every node while the
+        ring is at or below `WIDE_RING_THRESHOLD`. */
+    tier: 0 | 1;
+}
+/**
+ * Places `ids` (already in the caller's desired order — see `types.ts`'s
+ * module doc) around one or two concentric rings. Pure and total: an empty
+ * array places nothing, and the result is always the same length as `ids`,
+ * in the SAME order, so a caller can zip it back against its own node array
+ * by index without a lookup.
+ */
+export declare function layoutRing(ids: readonly string[], threshold?: number): PlacedRingNode[];

package/dist/types/components/focus-web/types.d.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import type { CanvasNode } from "../node-canvas/types";
+/**
+ * One node FocusWeb draws — the centre, a ring member, or the "up" parent.
+ * Same `Extra`-carrying shape as `CanvasNode` everywhere else in this library
+ * (`node-canvas/types.ts`'s own module doc explains why): a consumer's own
+ * fields (an icon name, a type, a colour) come back untouched through
+ * `renderNode`, and the library assigns no meaning to any of them.
+ */
+export type FocusWebNode<Extra = unknown> = CanvasNode<Extra>;
+/** Which of the three roles a rendered node is playing this frame. */
+export type FocusNodeRole = "center" | "ring" | "parent";
+/**
+ * What `renderNode` is told about the node it is drawing — structural facts
+ * about the node's place in THIS frame's layout, mirroring
+ * `ExplorerNodeRenderContext` / `NodeRenderContext` elsewhere in the library.
+ */
+export interface FocusNodeRenderContext {
+    role: FocusNodeRole;
+    /** 0-based position in `ring`, in the order the caller supplied. `null` for `center`/`parent`. */
+    index: number | null;
+    /** Which of the (possibly two) concentric rings this ring node sits on — see `layoutRing`. `null` off the ring. */
+    tier: 0 | 1 | null;
+    /** This ring node currently carries the roving tab stop. Always `false` for `center`/`parent` (neither is ring-navigable). */
+    isTabStop: boolean;
+    /**
+     * The viewport is narrow enough (< 640px) that FocusWeb has switched to its
+     * own compact layout (a taller plane, giving a wide two-tier ring more
+     * vertical room to spread into — PLN-12 architecture §4 "works at 375px").
+     * `renderNode` gets this so a custom body can shrink its own icon/label
+     * the same way `DefaultFocusNodeBody` shrinks itself — a body that ignores
+     * it still renders correctly, just at its normal size in less headroom.
+     */
+    compact: boolean;
+}
+export type FocusNodeRenderer<Extra = unknown> = (node: FocusWebNode<Extra>, context: FocusNodeRenderContext) => ReactNode;
+export interface FocusWebProps<Extra = unknown> {
+    /** The node currently centred. Controlled — FocusWeb never picks its own centre. */
+    center: FocusWebNode<Extra>;
+    /**
+     * The centre's one-hop neighbours, already in the exact order to draw.
+     * FocusWeb does not sort, dedupe or reorder this — see the module doc.
+     */
+    ring: readonly FocusWebNode<Extra>[];
+    /** The "up" affordance's target. `null`/`undefined` at the root — no parent, no up button. */
+    parent?: FocusWebNode<Extra> | null;
+    /**
+     * Fired when a ring node is activated (click, or Enter/Space while it
+     * carries the roving tab stop). FocusWeb does not recentre itself — the
+     * caller responds by changing `center`/`ring`/`parent`, which is what makes
+     * the position change and glide.
+     */
+    onSelect: (id: string) => void;
+    /**
+     * Fired when the "up" affordance is activated. Ignored (and the button
+     * inert to the keyboard shortcut) while `parent` is absent — see
+     * `FocusWebProps.parent`.
+     */
+    onUp?: () => void;
+    /** Custom node body. Omit for a plain label pill — the same "falls back to
+        label" rule as `CanvasNode.label` everywhere else in this library. */
+    renderNode?: FocusNodeRenderer<Extra>;
+    /** Accessible name for the whole widget (an `aria-label`, `role="group"`). */
+    label: string;
+    className?: string;
+}

package/dist/types/index.d.ts

@@ -131,6 +131,7 @@ export { confidenceLevel, CONFIDENCE_LEVEL_LABELS, type ConfidenceLevel } from "
 export { createSimStore, resetSimStores, useSimSettings, setSimSettings, getNetworkSpeed, getDataSource, simulateLatency, SimNetworkError, type SimStore, type SimStoreOptions, type SimSettings, type NetworkSpeed, type DataSource, type SimNamespace, } from "./lib/sim";
 export { NodeCanvas, LAYOUT_DEFAULTS, edgePath, layoutGraph, neighbourhood, type NodeCanvasProps, type CanvasCycleScope, type CanvasEdge, type CanvasGraph, type CanvasGroup, type CanvasLayout, type CanvasNode, type CanvasOrientation, type CanvasPlacedEdge, type CanvasScope, type LayoutOptions, type NodeRenderContext, type NodeRenderer, type PlacedNode, } from "./components/node-canvas";
 export { GraphExplorer, frameBoxFor, layoutExplorerTree, neighbourhoodTree, CAMERA_DEFAULTS, centerOn, clampScale, fitBox, fitBoxWithFloor, toContentPoint, toScreenPoint, unionBox, zoomAtPoint, type GraphExplorerProps, type Box, type CameraState, type FitOptions, type FitWithFloorOptions, type FitWithFloorResult, type FrameOverflow, type Point, type ScaleBounds, type Size, type CrossLink, type ExplorerLayout, type ExplorerNodeRenderContext, type ExplorerNodeRenderer, type ExplorerTree, type GraphExplorerVariant, type TreeNode as ExplorerTreeNode, } from "./components/graph-explorer";
+export { FocusWeb, CENTER_POSITION, PARENT_POSITION, WIDE_RING_THRESHOLD, layoutRing, type FocusNodeRenderContext, type FocusNodeRenderer, type FocusNodeRole, type FocusWebNode, type FocusWebProps, type PlacedRingNode, } from "./components/focus-web";
 export { SequenceDiagram, type SequenceDiagramProps, type SequenceStep, } from "./components/SequenceDiagram";
 export { defineRecordType, resetRecordTypes, useRecord, useRecords, useStaleness, write, writeAll, peekRecord, readState, readStaleness, subscribeToKey, subscribeToStaleness, retainKeys, sweepRecords, setRecordStoreTenant, getRecordStoreTenant, flushRecordNotifications, resetRecordStore, recordStoreStats, UNKNOWN_STATE, normalizeTypeName, normalizeTimestamp, recordKey, isRecordRef, type RecordRef, type ReadOptions, type RecordPayload, type RecordState, type RecordTypeOptions, type RecordTypeToken, type StalenessEntry, type WriteAllResult, type WriteOptions, type WriteResult, type WriteSource, type WriteVerdict, } from "./lib/records";
 export { RealtimeProvider, useRealtime, useRealtimeEpoch, useRealtimeHealth, useRealtimeRegistry, SubscriptionRegistry, normalizeScope, scopeKey, subscriptionKey, readRealtimeEpoch, subscribeToRealtimeEpoch, subscribeToRealtimeEvents, resetRealtimeSignals, type RealtimeChannel, type RealtimeConnectionState, type RealtimeDiagnostic, type RealtimeEvent, type RealtimeHealth, type RealtimeProviderProps, type RealtimeScope, type RealtimeScopeInput, type RealtimeStatus, type RealtimeTransport, type RegistryOptions, type SubscriptionHealth, type SubscriptionLease, type SubscriptionRequest, } from "./lib/realtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "13.2.0",
+  "version": "13.3.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",