@hansenexus/hud 0.3.0 → 0.4.0

package/dist/force-state-CCqoTfVB.d.ts

@@ -0,0 +1,23 @@
+//#region src/plugins/design/force-state.d.ts
+/**
+ * Force-state store: lets a reviewer (the States panel) or an agent
+ * (`?__state=`) render any registered state boundary as loading, empty or
+ * error without faking data.
+ *
+ * Development only. `StateBoundary` reaches this module behind a
+ * `NODE_ENV === "development"` constant, so production builds drop it; a
+ * consumer's bundle gate greps client chunks for FORCE_STATE_MARKER to prove it.
+ */
+declare const FORCED_STATES: readonly ["loading", "empty", "error"];
+type ForcedState = (typeof FORCED_STATES)[number];
+/** `?__state=loading` forces top-level boundaries; `?__state=<id>:error` one boundary. */
+declare const FORCE_STATE_PARAM = "__state";
+/**
+ * globalThis key of the store singleton, and the bundle-gate marker. Holding
+ * the store on globalThis keeps one instance even if the module is evaluated
+ * twice: HMR, or the app's `StateBoundary` chunk and the HUD's States panel
+ * chunk each carrying a copy.
+ */
+declare const FORCE_STATE_MARKER = "__HANSENEXUS_HUD_FORCE_STATE__";
+//#endregion
+export { ForcedState as i, FORCE_STATE_MARKER as n, FORCE_STATE_PARAM as r, FORCED_STATES as t };

package/dist/handler-WmE4Lu7l.d.ts

@@ -0,0 +1,39 @@
+import { a as HudHttpMethod, o as HudPlugin, r as HudCapability } from "./plugins-CQ_0w1ot.js";
+//#region src/server/handler.d.ts
+/**
+ * Decides whether a request may reach a plugin route. Return a `Response` to
+ * refuse it (404, 401, 403 ...) or `null` to let it through. The `access`
+ * plugin supplies one for deployed tiers.
+ */
+type HudGuard = (request: Request, capability: HudCapability | undefined) => Response | null | Promise<Response | null>;
+interface HudHandlerOptions {
+  /** Path the catch-all route is mounted at. Default `/api/hud`. */
+  basePath?: string;
+  /** Default: `developmentOnly`, which answers 404 unless `NODE_ENV` is `development`. */
+  guard?: HudGuard;
+  /** Drops plugins server side, like `defineHud({ can })` does client side. Default: grant all. */
+  can?: (capability: HudCapability) => boolean;
+}
+type HudRequestHandler = (request: Request) => Promise<Response>;
+/** One function per method, so a Next route can `export const { GET, POST } = createHudHandler(...)`. */
+type HudHandler = {
+  handle: HudRequestHandler;
+} & Record<HudHttpMethod, HudRequestHandler>;
+/**
+ * The default guard. Core assumes development, so a deployed build that
+ * mounts the route without an `access` guard serves nothing and reveals
+ * nothing about which plugins exist.
+ */
+declare const developmentOnly: HudGuard;
+/**
+ * Serves every plugin's routes from one catch-all route
+ * (`app/api/hud/[...hud]/route.ts` in Next). A request to
+ * `<basePath>/<plugin id>/<path>` reaches that plugin's `routes[path][method]`;
+ * unknown plugin or path answers 404, a known path with another method 405.
+ *
+ * Pass the server halves (`@hansenexus/hud/plugins/<id>/server`): they carry
+ * `routes` and no React.
+ */
+declare function createHudHandler(plugins: readonly HudPlugin[], options?: HudHandlerOptions): HudHandler;
+//#endregion
+export { createHudHandler as a, HudRequestHandler as i, HudHandler as n, developmentOnly as o, HudHandlerOptions as r, HudGuard as t };

package/dist/index-BYsdS-7d.d.ts

@@ -0,0 +1,55 @@
+import { o as HudPlugin, r as HudCapability } from "./plugins-CQ_0w1ot.js";
+import "./define-hud-BBzsSl8b.js";
+//#region src/core/grabber/picker.d.ts
+interface PickPoint {
+  clientX: number;
+  clientY: number;
+}
+interface ElementPickerProps {
+  active: boolean;
+  onPick: (element: Element, point: PickPoint) => void;
+  onCancel: () => void;
+  /** Banner text while active. */
+  hint?: string;
+  /** Label next to the hover outline. Default: the tag name. */
+  describe?: (element: Element) => string;
+  /** Extra elements to leave alone, on top of the picker's own shadow host. */
+  ignore?: (element: Element) => boolean;
+}
+/**
+ * Styles for the picker overlay. The picker renders where it is mounted, so
+ * the caller puts these into the same (shadow) root. Colours fall back when
+ * the `--hud-*` tokens are absent.
+ */
+declare const PICKER_CSS = "\n.grab-layer { position: fixed; inset: 0; pointer-events: none; }\n.grab-hint {\n  position: fixed;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 3px 12px;\n  border-radius: 0 0 6px 6px;\n  white-space: nowrap;\n  background: var(--hud-accent, #0369a1);\n  color: var(--hud-accent-fg, #ffffff);\n  font: 600 11px/1.5 var(--hud-mono, ui-monospace, monospace);\n}\n.grab-outline {\n  position: fixed;\n  border: 1.5px solid var(--hud-accent, #0369a1);\n  background: color-mix(in srgb, var(--hud-accent, #0369a1) 8%, transparent);\n  border-radius: 3px;\n}\n.grab-label {\n  position: fixed;\n  max-width: min(480px, calc(100vw - 8px));\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 1px 6px;\n  border-radius: 3px;\n  background: var(--hud-accent, #0369a1);\n  color: var(--hud-accent-fg, #ffffff);\n  font: 600 10px/1.6 var(--hud-mono, ui-monospace, monospace);\n}\n";
+/**
+ * Click-to-pick controller: crosshair, hover outline with a label, the next
+ * click picks, Escape cancels. Events inside the picker's own shadow host
+ * (the HUD's pill and panels) pass through untouched, so panels stay usable
+ * and mounted during a grab.
+ */
+declare function ElementPicker({ active, onPick, onCancel, hint, describe, ignore }: ElementPickerProps): import("react").JSX.Element;
+//#endregion
+//#region src/shell/hud.d.ts
+interface HudProps {
+  /** App slug: labels the pill and keys the persisted layout. */
+  appSlug: string;
+  /** Badge shown at the start of the pill. Default "DEV". */
+  envLabel?: string;
+  /** Client halves of the plugins, in pill order. Keep the array stable across renders. */
+  plugins?: readonly HudPlugin[];
+  /** Base path of the plugin routes. Default "/api/hud". */
+  apiBase?: string;
+  /** Capability check. Default: grant all (core assumes development). Keep it stable. */
+  can?: (capability: HudCapability) => boolean;
+}
+/**
+ * The HUD shell: a shadow-rooted status pill and floating panels.
+ *
+ * It renders unconditionally. Keeping it out of production builds is the
+ * loader's job, at the import site, so a bundler can drop the whole module
+ * (see `@hansenexus/hud/next`).
+ */
+declare function Hud({ appSlug, envLabel, plugins, apiBase, can }: HudProps): import("react").JSX.Element;
+//#endregion
+export { PICKER_CSS as a, ElementPickerProps as i, HudProps as n, PickPoint as o, ElementPicker as r, Hud as t };

package/dist/index.d.ts

@@ -1,36 +1,6 @@
-import { a as HudPlugin, d as PinEdge, f as definePlugin, n as HudCapability, o as HudPluginContext, r as HudCommand, s as HudPluginProps, t as HudApiError } from "./plugins-1QmTmZyL.js";
-import { n as HudMountProps, r as defineHud, t as DefineHudOptions } from "./define-hud-BHQR8Lbv.js";
-//#region src/core/marker.d.ts
-/**
- * Literal a consumer's CI bundle gate greps for in production client chunks.
- * It is rendered as an attribute on the HUD root, so a bundler cannot drop it
- * while keeping the HUD, and it is unmistakably deliberate rather than an
- * incidental string a refactor could rename away.
- */
-export declare const HUD_DEV_MARKER = "__HANSENEXUS_HUD_DEV__";
-/** Tag name of the element that hosts the HUD's shadow root. */
-export declare const HUD_HOST_TAG = "hn-hud";
-//#endregion
-//#region src/shell/hud.d.ts
-interface HudProps {
-  /** App slug: labels the pill and keys the persisted layout. */
-  appSlug: string;
-  /** Badge shown at the start of the pill. Default "DEV". */
-  envLabel?: string;
-  /** Client halves of the plugins, in pill order. Keep the array stable across renders. */
-  plugins?: readonly HudPlugin[];
-  /** Base path of the plugin routes. Default "/api/hud". */
-  apiBase?: string;
-  /** Capability check. Default: grant all (core assumes development). Keep it stable. */
-  can?: (capability: HudCapability) => boolean;
-}
-/**
- * The HUD shell: a shadow-rooted status pill and floating panels.
- *
- * It renders unconditionally. Keeping it out of production builds is the
- * loader's job, at the import site, so a bundler can drop the whole module
- * (see `@hansenexus/hud/next`).
- */
-export declare function Hud({ appSlug, envLabel, plugins, apiBase, can }: HudProps): import("react").JSX.Element;
-//#endregion
-export { type DefineHudOptions, HudApiError, type HudCapability, type HudCommand, type HudMountProps, type HudPlugin, type HudPluginContext, type HudPluginProps, type HudProps, type PinEdge, defineHud, definePlugin };
+import { a as GrabComponent, i as matchComponentHints, n as GrabAnchor, r as GrabPayload, t as ComponentHint } from "./payload-CLKDVZWl.js";
+import { c as HudPluginProps, f as PinEdge, g as useGrab, h as HudGrabState, i as HudCommand, m as HudGrab, n as HudApiError, o as HudPlugin, p as definePlugin, r as HudCapability, s as HudPluginContext, t as HudAccessControl } from "./plugins-CQ_0w1ot.js";
+import { n as HudMountProps, r as defineHud, t as DefineHudOptions } from "./define-hud-BBzsSl8b.js";
+import { a as PICKER_CSS, i as ElementPickerProps, n as HudProps, o as PickPoint, r as ElementPicker, t as Hud } from "./index-BYsdS-7d.js";
+import { n as HUD_HOST_TAG, t as HUD_DEV_MARKER } from "./marker-CMrvxPmS.js";
+export { type ComponentHint, type DefineHudOptions, ElementPicker, type ElementPickerProps, type GrabAnchor, type GrabComponent, type GrabPayload, HUD_DEV_MARKER, HUD_HOST_TAG, Hud, type HudAccessControl, HudApiError, type HudCapability, type HudCommand, type HudGrab, type HudGrabState, type HudMountProps, type HudPlugin, type HudPluginContext, type HudPluginProps, type HudProps, PICKER_CSS, type PickPoint, type PinEdge, defineHud, definePlugin, matchComponentHints, useGrab };

package/dist/index.js

@@ -1,7 +1,43 @@
-import { a as resolvePlugins, i as definePlugin, n as HudApiError, r as createPluginContext } from "./plugins-CzUiTn_r.js";
+import { a as buildGrabPayload, c as createGrabber, i as parseShortcut, l as useGrab, n as isApplePlatform, o as describeElement, r as matchesShortcut, s as matchComponentHints, t as formatShortcut } from "./shortcut-U6ftVY06.js";
+import { n as HUD_HOST_TAG, t as HUD_DEV_MARKER } from "./marker-uZYPOJ4M.js";
+import { a as resolvePlugins, i as definePlugin, n as HudApiError, r as createPluginContext } from "./plugins-DVy_vaYr.js";
+import { i as PICKER_CSS, n as ShadowHost, r as ElementPicker, t as HUD_CSS } from "./styles--slk86ZQ.js";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+//#region src/shell/grabber.tsx
+const GRAB_CSS = PICKER_CSS + `
+.hud .grab-toggle { font-size: 14px; line-height: 1; padding: 2px 6px; }
+.hud .grab-toggle[aria-pressed="true"] { color: var(--hud-accent); }
+`;
+/**
+* Grab mode for the shell. It lives beside the panels, not inside one, so a
+* grab never unmounts or closes a panel; the picker ignores clicks inside the
+* HUD, so open panels stay usable while it is active.
+*/
+function Grabber({ app, store, slots }) {
+	const { grabbing } = useGrab(store);
+	const onPick = useCallback((element) => {
+		const payload = buildGrabPayload(element, { app });
+		store.complete(payload);
+		for (const { plugin, ctx } of slots) try {
+			plugin.onGrab?.(payload, ctx);
+		} catch (error) {
+			console.error(`hud: ${plugin.id} onGrab failed`, error);
+		}
+	}, [
+		app,
+		store,
+		slots
+	]);
+	return /* @__PURE__ */ jsx(ElementPicker, {
+		active: grabbing,
+		onPick,
+		onCancel: store.cancel,
+		describe: describeElement,
+		hint: "Grab: click an element · Esc cancels"
+	});
+}
+//#endregion
 //#region src/shell/commands/context.ts
 const RegistryContext = createContext(null);
 function useRegistry() {
@@ -24,46 +60,7 @@ function useRegisterCommands(commands) {
 	}, [registry, commands]);
 }
 //#endregion
-//#region src/shell/commands/shortcut.ts
-function parseShortcut(spec) {
-	const parts = spec.toLowerCase().split("+");
-	return {
-		key: parts.at(-1) ?? "",
-		mod: parts.includes("mod"),
-		shift: parts.includes("shift"),
-		alt: parts.includes("alt")
-	};
-}
-function isApplePlatform() {
-	return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
-}
-function matchesShortcut(event, shortcut, apple) {
-	if ((apple ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey) !== shortcut.mod) return false;
-	if (event.shiftKey !== shortcut.shift || event.altKey !== shortcut.alt) return false;
-	if (event.key.toLowerCase() === shortcut.key) return true;
-	if (/^[a-z]$/.test(shortcut.key)) return event.code === `Key${shortcut.key.toUpperCase()}`;
-	if (/^\d$/.test(shortcut.key)) return event.code === `Digit${shortcut.key}`;
-	return false;
-}
-function formatShortcut(shortcut, apple) {
-	const key = shortcut.key.toUpperCase();
-	if (apple) return `${shortcut.mod ? "⌘" : ""}${shortcut.alt ? "⌥" : ""}${shortcut.shift ? "⇧" : ""}${key}`;
-	return [
-		shortcut.mod && "Ctrl",
-		shortcut.alt && "Alt",
-		shortcut.shift && "Shift",
-		key
-	].filter(Boolean).join("+");
-}
-//#endregion
 //#region src/shell/commands/registry.ts
-/** Element grab arrives with the grabber slice (hud#7); the shortcut is reserved now. */
-const GRAB_COMMAND = {
-	id: "hud.grab",
-	title: "Grab element",
-	shortcut: "mod+shift+g",
-	run: () => {}
-};
 /**
 * Commands the shell and plugins contribute. Registering an id again
 * replaces the earlier command; the first registered shortcut match wins.
@@ -106,12 +103,11 @@ var CommandRegistry = class {
 };
 //#endregion
 //#region src/shell/commands/command-provider.tsx
-const BUILTIN = [GRAB_COMMAND];
 /** Owns one HUD's command registry and binds its shortcuts on `window`. */
 function CommandProvider({ commands, children }) {
 	const [registry] = useState(() => new CommandRegistry());
 	useEffect(() => {
-		const unregister = [...BUILTIN, ...commands].map((command) => registry.register(command));
+		const unregister = commands.map((command) => registry.register(command));
 		return () => {
 			for (const off of unregister) off();
 		};
@@ -900,7 +896,7 @@ const PANEL_CSS = `
 //#endregion
 //#region src/shell/plugin-slots.tsx
 /** One stable context per plugin, so panels and pills can depend on `ctx` in effects. */
-function usePluginSlots(plugins, { app, apiBase, can, close, pin }) {
+function usePluginSlots(plugins, { app, apiBase, can, close, open, pin, grab }) {
 	return useMemo(() => plugins.map((plugin) => ({
 		plugin,
 		title: plugin.title ?? plugin.id,
@@ -909,7 +905,9 @@ function usePluginSlots(plugins, { app, apiBase, can, close, pin }) {
 			apiBase,
 			can,
 			close: () => close(plugin.id),
-			pin: (edge) => pin(plugin.id, edge)
+			open: () => open(plugin.id),
+			pin: (edge) => pin(plugin.id, edge),
+			grab
 		})
 	})), [
 		plugins,
@@ -917,7 +915,9 @@ function usePluginSlots(plugins, { app, apiBase, can, close, pin }) {
 		apiBase,
 		can,
 		close,
-		pin
+		open,
+		pin,
+		grab
 	]);
 }
 /**
@@ -946,153 +946,8 @@ function PluginPanelBody({ slot }) {
 	return Panel ? /* @__PURE__ */ jsx(Panel, { ctx: slot.ctx }) : null;
 }
 //#endregion
-//#region src/core/marker.ts
-/**
-* Literal a consumer's CI bundle gate greps for in production client chunks.
-* It is rendered as an attribute on the HUD root, so a bundler cannot drop it
-* while keeping the HUD, and it is unmistakably deliberate rather than an
-* incidental string a refactor could rename away.
-*/
-const HUD_DEV_MARKER = "__HANSENEXUS_HUD_DEV__";
-/** Tag name of the element that hosts the HUD's shadow root. */
-const HUD_HOST_TAG = "hn-hud";
-//#endregion
-//#region src/shell/shadow-host.tsx
-/**
-* Inline `!important` on the host element: author `!important` in a host
-* stylesheet (`* { position: static !important }`) loses to inline
-* `!important`, so this is the one set of rules a client site cannot override.
-* The host covers the viewport but lets every click through; HUD surfaces opt
-* back in with `pointer-events: auto`.
-*/
-const HOST_STYLE = {
-	all: "initial",
-	position: "fixed",
-	inset: "0",
-	"z-index": "2147483000",
-	"pointer-events": "none",
-	display: "block"
-};
-/**
-* Renders children into a shadow root on a host element appended to <body>.
-* Mounted in an effect, so server rendering emits nothing and hydration never
-* differs.
-*/
-function ShadowHost({ css, children }) {
-	const [mount, setMount] = useState(null);
-	useLayoutEffect(() => {
-		const host = document.createElement(HUD_HOST_TAG);
-		for (const [prop, value] of Object.entries(HOST_STYLE)) host.style.setProperty(prop, value, "important");
-		const shadow = host.attachShadow({ mode: "open" });
-		const style = document.createElement("style");
-		style.textContent = css;
-		const root = document.createElement("div");
-		root.className = "hud";
-		root.setAttribute("data-hud-marker", HUD_DEV_MARKER);
-		shadow.append(style, root);
-		document.body.appendChild(host);
-		setMount(root);
-		return () => {
-			host.remove();
-			setMount(null);
-		};
-	}, [css]);
-	return mount ? createPortal(children, mount) : null;
-}
-//#endregion
 //#region src/shell/hud.tsx
-const CSS = `
-.hud {
-  all: initial;
-  --hud-bg: #ffffff;
-  --hud-bg-subtle: #f4f4f5;
-  --hud-fg: #18181b;
-  --hud-fg-muted: #71717a;
-  --hud-border: rgba(24, 24, 27, 0.14);
-  --hud-accent: #0369a1;
-  --hud-good: #15803d;
-  --hud-warn: #b45309;
-  --hud-poor: #b91c1c;
-  --hud-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
-  --hud-radius: 8px;
-  --hud-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --hud-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-
-  font-family: var(--hud-font);
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--hud-fg);
-}
-
-@media (prefers-color-scheme: dark) {
-  .hud {
-    --hud-bg: #18181b;
-    --hud-bg-subtle: #27272a;
-    --hud-fg: #f4f4f5;
-    --hud-fg-muted: #a1a1aa;
-    --hud-border: rgba(244, 244, 245, 0.16);
-    --hud-accent: #38bdf8;
-    --hud-good: #4ade80;
-    --hud-warn: #fbbf24;
-    --hud-poor: #f87171;
-    --hud-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-  }
-}
-
-.hud *, .hud *::before, .hud *::after { box-sizing: border-box; }
-
-.hud button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-.hud :focus-visible { outline: 2px solid var(--hud-accent); outline-offset: 1px; }
-
-.pill {
-  position: fixed;
-  left: 12px;
-  bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 3px;
-  background: var(--hud-bg);
-  border: 1px solid var(--hud-border);
-  border-radius: 999px;
-  box-shadow: var(--hud-shadow);
-  font-family: var(--hud-mono);
-  pointer-events: auto;
-}
-
-.hud .pill-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  white-space: nowrap;
-}
-
-.pill-item:hover, .pill-item[aria-pressed="true"] { background: var(--hud-bg-subtle); }
-
-.env { font-weight: 600; color: var(--hud-accent); }
-
-.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hud-fg-muted); }
-.dot[data-rating="good"] { background: var(--hud-good); }
-.dot[data-rating="needs-improvement"] { background: var(--hud-warn); }
-.dot[data-rating="poor"] { background: var(--hud-poor); }
-
-.vitals { width: 100%; border-collapse: collapse; font-family: var(--hud-mono); }
-.vitals td { padding: 3px 0; }
-.vitals td:last-child { text-align: right; }
-.vitals .label { color: var(--hud-fg-muted); }
-.empty { color: var(--hud-fg-muted); }
-` + PANEL_CSS;
+const CSS = HUD_CSS + PANEL_CSS + GRAB_CSS;
 const NO_PLUGINS = [];
 const GRANT_ALL = () => true;
 /**
@@ -1106,6 +961,7 @@ function Hud({ appSlug, envLabel = "DEV", plugins = NO_PLUGINS, apiBase = "/api/
 	const resolved = useMemo(() => resolvePlugins(plugins, can), [plugins, can]);
 	return /* @__PURE__ */ jsx(ShadowHost, {
 		css: CSS,
+		marker: HUD_DEV_MARKER,
 		children: /* @__PURE__ */ jsx(Shell, {
 			appSlug,
 			envLabel,
@@ -1117,38 +973,55 @@ function Hud({ appSlug, envLabel = "DEV", plugins = NO_PLUGINS, apiBase = "/api/
 }
 function Shell({ appSlug, envLabel, plugins, apiBase, can }) {
 	const panelsRef = useRef(null);
+	const close = useCallback((id) => panelsRef.current?.close(id), []);
+	const open = useCallback((id) => panelsRef.current?.open(id), []);
+	const pin = useCallback((id, edge) => panelsRef.current?.pin(id, edge), []);
+	const [grab] = useState(createGrabber);
 	const slots = usePluginSlots(plugins, {
 		app: appSlug,
 		apiBase,
 		can,
-		close: useCallback((id) => panelsRef.current?.close(id), []),
-		pin: useCallback((id, edge) => panelsRef.current?.pin(id, edge), [])
+		close,
+		open,
+		pin,
+		grab
 	});
 	const panels = useMemo(() => slots.filter((slot) => slot.plugin.panel).map((slot) => ({
 		id: slot.plugin.id,
 		title: slot.title,
 		render: () => /* @__PURE__ */ jsx(PluginPanelBody, { slot })
 	})), [slots]);
-	const commands = useMemo(() => slots.flatMap(({ plugin, ctx }) => (plugin.commands ?? []).map((command) => ({
+	const commands = useMemo(() => [{
+		id: "hud.grab",
+		title: "Grab element",
+		shortcut: "mod+shift+g",
+		run: () => grab.getState().grabbing ? grab.cancel() : grab.start()
+	}, ...slots.flatMap(({ plugin, ctx }) => (plugin.commands ?? []).map((command) => ({
 		id: `${plugin.id}.${command.id}`,
 		title: command.title,
 		shortcut: command.shortcut,
 		run: () => command.run(ctx)
-	}))), [slots]);
-	return /* @__PURE__ */ jsx(PanelManager, {
+	})))], [slots, grab]);
+	return /* @__PURE__ */ jsxs(PanelManager, {
 		appSlug,
 		panels,
 		commands,
 		apiRef: panelsRef,
-		children: /* @__PURE__ */ jsx(Pill, {
+		children: [/* @__PURE__ */ jsx(Pill, {
 			appSlug,
 			envLabel,
+			slots,
+			grab
+		}), /* @__PURE__ */ jsx(Grabber, {
+			app: appSlug,
+			store: grab,
 			slots
-		})
+		})]
 	});
 }
-function Pill({ appSlug, envLabel, slots }) {
+function Pill({ appSlug, envLabel, slots, grab }) {
 	const panels = usePanels();
+	const { grabbing } = useGrab(grab);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "pill",
 		role: "toolbar",
@@ -1163,6 +1036,15 @@ function Pill({ appSlug, envLabel, slots }) {
 				open: panels.isOpen(slot.plugin.id),
 				onToggle: () => panels.toggle(slot.plugin.id)
 			}, slot.plugin.id)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pill-item grab-toggle",
+				"aria-label": "Grab element",
+				"aria-pressed": grabbing,
+				title: "Grab element",
+				onClick: () => grabbing ? grab.cancel() : grab.start(),
+				children: "⌖"
+			}),
 			/* @__PURE__ */ jsx(PillMenu, {})
 		]
 	});
@@ -1182,7 +1064,19 @@ function Pill({ appSlug, envLabel, slots }) {
 function defineHud({ app, plugins, apiBase, can }) {
 	resolvePlugins(plugins, () => true);
 	const list = Object.freeze([...plugins]);
-	function DefinedHud({ envLabel }) {
+	const access = list.find((plugin) => plugin.access)?.access;
+	function DefinedHud({ envLabel, env = "development" }) {
+		if (env === "disabled") return null;
+		if (access) return /* @__PURE__ */ jsx(AccessHud, {
+			access,
+			env,
+			app,
+			plugins: list,
+			apiBase: apiBase ?? "/api/hud",
+			...envLabel === void 0 ? {} : { envLabel },
+			...can === void 0 ? {} : { can }
+		});
+		if (env !== "development") return null;
 		return /* @__PURE__ */ jsx(Hud, {
 			appSlug: app,
 			plugins: list,
@@ -1194,5 +1088,28 @@ function defineHud({ app, plugins, apiBase, can }) {
 	DefinedHud.displayName = `Hud(${app})`;
 	return DefinedHud;
 }
+/**
+* The shell behind the access plugin's lock and capability matrix.
+*
+* Display only: hiding a plugin here protects nothing, since its code ships
+* in the bundle and its routes are one URL away. The server guard
+* (`accessGuard`) is what enforces the tier.
+*/
+function AccessHud({ access, env, app, plugins, apiBase, envLabel, can }) {
+	const unlocked = access.useUnlocked(env, apiBase);
+	const gated = useCallback((capability) => access.can(env, capability) && (can?.(capability) ?? true), [
+		access,
+		env,
+		can
+	]);
+	const shown = useMemo(() => unlocked ? plugins : plugins.filter((plugin) => plugin.access), [unlocked, plugins]);
+	return /* @__PURE__ */ jsx(Hud, {
+		appSlug: app,
+		plugins: shown,
+		apiBase,
+		can: gated,
+		...envLabel === void 0 ? {} : { envLabel }
+	});
+}
 //#endregion
-export { HUD_DEV_MARKER, HUD_HOST_TAG, Hud, HudApiError, defineHud, definePlugin };
+export { ElementPicker, HUD_DEV_MARKER, HUD_HOST_TAG, Hud, HudApiError, PICKER_CSS, defineHud, definePlugin, matchComponentHints, useGrab };

package/dist/marker-C66LxOhJ.d.ts

@@ -0,0 +1,9 @@
+//#region src/review/marker.d.ts
+/**
+ * Literal on the review entrypoint's root. A consumer's bundle gate expects it
+ * where the review widget is meant to ship and nowhere else; it never appears
+ * next to `HUD_DEV_MARKER`, which belongs to the dev shell alone.
+ */
+declare const HUD_REVIEW_MARKER = "__HANSENEXUS_HUD_REVIEW__";
+//#endregion
+export { HUD_REVIEW_MARKER as t };

package/dist/marker-CMrvxPmS.d.ts

@@ -0,0 +1,12 @@
+//#region src/core/marker.d.ts
+/**
+ * Literal a consumer's CI bundle gate greps for in production client chunks.
+ * It is rendered as an attribute on the HUD root, so a bundler cannot drop it
+ * while keeping the HUD, and it is unmistakably deliberate rather than an
+ * incidental string a refactor could rename away.
+ */
+declare const HUD_DEV_MARKER = "__HANSENEXUS_HUD_DEV__";
+/** Tag name of the element that hosts the HUD's shadow root. */
+declare const HUD_HOST_TAG = "hn-hud";
+//#endregion
+export { HUD_HOST_TAG as n, HUD_DEV_MARKER as t };

package/dist/marker-DjeGvL-F.js

@@ -0,0 +1,9 @@
+//#region src/review/marker.ts
+/**
+* Literal on the review entrypoint's root. A consumer's bundle gate expects it
+* where the review widget is meant to ship and nowhere else; it never appears
+* next to `HUD_DEV_MARKER`, which belongs to the dev shell alone.
+*/
+const HUD_REVIEW_MARKER = "__HANSENEXUS_HUD_REVIEW__";
+//#endregion
+export { HUD_REVIEW_MARKER as t };

package/dist/marker-uZYPOJ4M.js

@@ -0,0 +1,12 @@
+//#region src/core/marker.ts
+/**
+* Literal a consumer's CI bundle gate greps for in production client chunks.
+* It is rendered as an attribute on the HUD root, so a bundler cannot drop it
+* while keeping the HUD, and it is unmistakably deliberate rather than an
+* incidental string a refactor could rename away.
+*/
+const HUD_DEV_MARKER = "__HANSENEXUS_HUD_DEV__";
+/** Tag name of the element that hosts the HUD's shadow root. */
+const HUD_HOST_TAG = "hn-hud";
+//#endregion
+export { HUD_HOST_TAG as n, HUD_DEV_MARKER as t };

package/dist/markers.d.ts

@@ -0,0 +1,3 @@
+import { t as HUD_DEV_MARKER } from "./marker-CMrvxPmS.js";
+import { t as HUD_REVIEW_MARKER } from "./marker-C66LxOhJ.js";
+export { HUD_DEV_MARKER, HUD_REVIEW_MARKER };

package/dist/markers.js

@@ -0,0 +1,3 @@
+import { t as HUD_DEV_MARKER } from "./marker-uZYPOJ4M.js";
+import { t as HUD_REVIEW_MARKER } from "./marker-DjeGvL-F.js";
+export { HUD_DEV_MARKER, HUD_REVIEW_MARKER };