nudge-ui 0.2.5 → 0.2.6

package/dist/project/identity.d.ts

@@ -1,6 +1,2 @@
-/**
- * Names a project deterministically across restarts. The root is canonicalized
- * first, so a symlinked working directory resolves to the same project — and
- * therefore the same durable session — as its real path.
- */
+/** The root is canonicalized first so a symlinked working directory names the same project as its real path. */
 export declare function createProjectId(host: string, root: string): string;

package/dist/project/identity.js

@@ -1,11 +1,7 @@
 import { createHash } from "node:crypto";
 import { realpathSync } from "node:fs";
 const PROJECT_DIGEST_LENGTH = 24;
-/**
- * Names a project deterministically across restarts. The root is canonicalized
- * first, so a symlinked working directory resolves to the same project — and
- * therefore the same durable session — as its real path.
- */
+/** The root is canonicalized first so a symlinked working directory names the same project as its real path. */
 export function createProjectId(host, root) {
     let canonical = root;
     try {

package/dist/project/mcpPackage.d.ts

@@ -1,8 +1,3 @@
-/**
- * Locates the optional MCP package installed for an application. Only the
- * application's own dependency tree counts; a global or unrelated copy never
- * starts a bridge or answers diagnostics for this project.
- */
+/** Only the application's own dependency tree counts; a global or unrelated copy never bridges this project. */
 export declare function findProjectMcpRoot(appRoot: string): string | null;
-/** Absolute path of the installed package's `nudge-mcp` executable entry. */
 export declare function projectMcpCliEntry(mcpRoot: string): string | null;

package/dist/project/mcpPackage.js

@@ -3,11 +3,7 @@ import { createRequire } from "node:module";
 import { dirname, join, parse } from "node:path";
 const MCP_PACKAGE = "@nudge-ui/mcp";
 const MCP_BIN = "nudge-mcp";
-/**
- * Locates the optional MCP package installed for an application. Only the
- * application's own dependency tree counts; a global or unrelated copy never
- * starts a bridge or answers diagnostics for this project.
- */
+/** Only the application's own dependency tree counts; a global or unrelated copy never bridges this project. */
 export function findProjectMcpRoot(appRoot) {
     let directory = appRoot;
     const { root } = parse(directory);
@@ -28,7 +24,6 @@ export function findProjectMcpRoot(appRoot) {
         return null;
     }
 }
-/** Absolute path of the installed package's `nudge-mcp` executable entry. */
 export function projectMcpCliEntry(mcpRoot) {
     const bin = readManifest(join(mcpRoot, "package.json"))?.bin;
     const entry = typeof bin === "string" ? bin : isRecord(bin) ? bin[MCP_BIN] : undefined;
@@ -56,5 +51,5 @@ function isRecord(value) {
     return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function isPnpRuntime() {
-    return typeof process.versions.pnp === "string";
+    return "pnp" in process.versions && typeof process.versions.pnp === "string";
 }

package/dist/project/pathPolicy.d.ts

@@ -1,8 +1,3 @@
-/**
- * Dot-prefixed segments commonly hold credentials, source-control metadata, or
- * local tool state. Treating the whole segment as sensitive keeps one policy
- * across direct requests, symlink targets, token discovery, and file watching.
- */
+/** Dot-prefixed segments may hold credentials or local tool state; one policy covers requests, symlinks, tokens, and watching. */
 export declare function isSensitiveProjectPath(projectPath: string): boolean;
-/** Returns whether a directory name is outside the standalone project view. */
 export declare function isExcludedDirectoryName(name: string): boolean;

package/dist/project/pathPolicy.js

@@ -1,12 +1,7 @@
-/**
- * Dot-prefixed segments commonly hold credentials, source-control metadata, or
- * local tool state. Treating the whole segment as sensitive keeps one policy
- * across direct requests, symlink targets, token discovery, and file watching.
- */
+/** Dot-prefixed segments may hold credentials or local tool state; one policy covers requests, symlinks, tokens, and watching. */
 export function isSensitiveProjectPath(projectPath) {
     return projectPath.split(/[\\/]/).some((segment) => segment.startsWith("."));
 }
-/** Returns whether a directory name is outside the standalone project view. */
 export function isExcludedDirectoryName(name) {
     return name.startsWith(".") || name === "build" || name === "dist" || name === "node_modules";
 }

package/dist/project/tokens.d.ts

@@ -1,36 +1,26 @@
 import type { TokenCatalogDiagnostic, TokenDefinition, TokenEntry } from "../css/model/index.js";
-/** The serializable token knowledge published by the standalone manifest. */
 export interface ProjectTokenSnapshot {
     readonly tokenCatalog: readonly TokenDefinition[];
     readonly tokens: readonly TokenEntry[];
     readonly tokenDiagnostics: readonly TokenCatalogDiagnostic[];
     readonly tokenGeneration: string;
 }
-/** The placeholder used before and in place of a successful project scan. */
 export declare const EMPTY_PROJECT_TOKEN_SNAPSHOT: ProjectTokenSnapshot;
-/** A CSS file discovered below the project root before inventory parsing. */
 export interface ProjectCssArtifact {
     readonly absolutePath: string;
     readonly projectPath: string;
     readonly content?: string;
     readonly readError?: string;
 }
-/** Injectable so unreadable-file handling stays testable. */
 export type ProjectCssFileReader = (absolutePath: string) => string | Promise<string>;
-/** Options for the deterministic project CSS scan. */
 export interface ProjectTokenSnapshotOptions {
     readonly rootDirectory: string;
-    /** Additional authored roots to include in the same deterministic inventory. */
     readonly additionalRootDirectories?: readonly string[];
     readonly readFile?: ProjectCssFileReader;
     /** Prefixed to the digest so two hosts scanning one project publish distinct generations. */
     readonly generationLabel: string;
 }
-/**
- * Files are sorted by project-relative POSIX path before receiving
- * discoveryOrder. Symlinks are followed only when their canonical target stays
- * below rootDirectory. Read and parse failures become diagnostics, never rejections.
- */
+/** Sorted by project-relative POSIX path; symlinks only within root; read failures become diagnostics, never rejections. */
 export declare function createProjectTokenSnapshot(options: ProjectTokenSnapshotOptions): Promise<ProjectTokenSnapshot>;
-/** Exported as a seam so provenance and symlink confinement are testable without PostCSS. */
+/** Exported for tests: provenance and symlink confinement without PostCSS. */
 export declare function discoverProjectCssArtifacts(rootDirectory: string, readFile?: ProjectCssFileReader): Promise<readonly ProjectCssArtifact[]>;

package/dist/project/tokens.js

@@ -1,26 +1,16 @@
-/**
- * Node-only CSS token discovery for the static HTML host. Reports directory
- * order as discovery evidence only: a directory walk cannot prove the order in
- * which a browser applies stylesheets. Every filesystem operation is async so a
- * large tree never blocks the server's event loop.
- */
+/** Directory order is discovery evidence only; a walk cannot prove the order a browser applies stylesheets. */
 import { createHash } from "node:crypto";
 import { readFile as readUtf8File, readdir, realpath, stat, } from "node:fs/promises";
 import { extname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { createTokenInventory, } from "../css/token-inventory/index.js";
 import { isExcludedDirectoryName, isSensitiveProjectPath } from "./pathPolicy.js";
-/** The placeholder used before and in place of a successful project scan. */
 export const EMPTY_PROJECT_TOKEN_SNAPSHOT = {
     tokenCatalog: [],
     tokens: [],
     tokenDiagnostics: [],
     tokenGeneration: "empty",
 };
-/**
- * Files are sorted by project-relative POSIX path before receiving
- * discoveryOrder. Symlinks are followed only when their canonical target stays
- * below rootDirectory. Read and parse failures become diagnostics, never rejections.
- */
+/** Sorted by project-relative POSIX path; symlinks only within root; read failures become diagnostics, never rejections. */
 export async function createProjectTokenSnapshot(options) {
     const rootDirectory = await canonicalRoot(options.rootDirectory);
     const additionalRoots = (await Promise.all((options.additionalRootDirectories ?? []).map((directory) => canonicalOptionalRoot(directory)))).filter((root) => root !== null);
@@ -34,8 +24,7 @@ export async function createProjectTokenSnapshot(options) {
             if (seenFiles.has(canonicalPath))
                 continue;
             seenFiles.add(canonicalPath);
-            // Additional roots are expressed relative to the primary one so a single
-            // inventory can merge their declarations without losing provenance.
+            // Additional roots are expressed relative to the primary so one inventory keeps provenance.
             artifacts.push({
                 ...artifact,
                 projectPath: index === 0
@@ -85,7 +74,7 @@ export async function createProjectTokenSnapshot(options) {
         tokenGeneration,
     };
 }
-/** Exported as a seam so provenance and symlink confinement are testable without PostCSS. */
+/** Exported for tests: provenance and symlink confinement without PostCSS. */
 export async function discoverProjectCssArtifacts(rootDirectory, readFile = (absolutePath) => readUtf8File(absolutePath, "utf8")) {
     const root = await canonicalRoot(rootDirectory);
     const artifacts = [];

package/dist/transport/editor.d.ts

@@ -1,23 +1,13 @@
-/** Returns the editor URL for one same-origin application location. */
 export declare function createNudgeUiEditorUrl(applicationHref: string): string;
-/** Resolves the application URL carried by an editor URL. */
 export declare function readNudgeUiEditorTarget(editorHref: string): string | null;
 type RequestHeaderValue = string | readonly string[] | undefined;
-/** Returns whether a host request should receive the pure editor document. */
 export declare function isNudgeUiEditorDocumentRequest(requestHref: string, method: string | undefined, headers: Record<string, RequestHeaderValue> | undefined): boolean;
-/** Adds the persistent marker that bypasses editor entry for a plain app view. */
 export declare function createNudgeUiDirectUrl(applicationHref: string): string;
-/** Reads the public `nudge-ui=off` / `nudge-ui=on` switch from an application URL. */
 export declare function readNudgeUiQuerySwitch(href: string): "off" | "on" | null;
-/** Returns whether this application location explicitly bypasses editor entry. */
 export declare function isNudgeUiDirectUrl(href: string): boolean;
-/** Remembers that this browser tab was explicitly opened outside the editor. */
 export declare function rememberNudgeUiDirectTabIntent(): void;
-/** Remembers an explicit URL switch so later navigations in this tab keep it. */
 export declare function rememberNudgeUiTabSwitch(value: "off" | "on"): void;
-/** Returns whether this browser tab should remain outside the editor. */
 export declare function hasNudgeUiDirectTabIntent(): boolean;
-/** Returns whether this browser tab explicitly asked for the editor with `nudge-ui=on`. */
 export declare function hasNudgeUiForcedTabIntent(): boolean;
 export type NudgeUiClientEntry = {
     readonly kind: "bootstrap";
@@ -40,8 +30,7 @@ export interface NudgeUiClientEntryContext {
     /** `navigator.webdriver`: Playwright, Puppeteer, Selenium, and headless Chrome. */
     readonly automated?: boolean;
 }
-/** Chooses the browser-client role before any runtime manifest is fetched. */
+/** Resolved before any runtime manifest is fetched. */
 export declare function resolveNudgeUiClientEntry(href: string, context: NudgeUiClientEntryContext): NudgeUiClientEntry;
-/** Renders the host-neutral editor document served by every development Adapter. */
 export declare function createNudgeUiEditorDocument(): string;
 export {};

package/dist/transport/editor.js

@@ -2,7 +2,6 @@ import { NUDGE_UI_CLIENT_PATH, NUDGE_UI_ARTIFACTS_PATH, NUDGE_UI_DIRECT_QUERY_PA
 const TARGET_QUERY_PARAM = "url";
 const DIRECT_TAB_SESSION_KEY = "nudge-ui:direct-tab";
 const FORCED_TAB_SESSION_KEY = "nudge-ui:forced-tab";
-/** Returns the editor URL for one same-origin application location. */
 export function createNudgeUiEditorUrl(applicationHref) {
     const applicationUrl = new URL(applicationHref);
     assertApplicationUrl(applicationUrl);
@@ -23,7 +22,6 @@ export function createNudgeUiEditorUrl(applicationHref) {
     applicationUrl.hash = hash;
     return applicationUrl.href;
 }
-/** Resolves the application URL carried by an editor URL. */
 export function readNudgeUiEditorTarget(editorHref) {
     const editorUrl = new URL(editorHref);
     if (editorUrl.pathname !== NUDGE_UI_EDITOR_PATH) {
@@ -50,7 +48,6 @@ export function readNudgeUiEditorTarget(editorHref) {
         return null;
     }
 }
-/** Returns whether a host request should receive the pure editor document. */
 export function isNudgeUiEditorDocumentRequest(requestHref, method, headers) {
     const normalizedMethod = (method ?? "GET").toUpperCase();
     if (normalizedMethod !== "GET" && normalizedMethod !== "HEAD")
@@ -69,14 +66,12 @@ export function isNudgeUiEditorDocumentRequest(requestHref, method, headers) {
     return header("sec-fetch-dest").toLowerCase() === "document"
         || header("accept").toLowerCase().includes("text/html");
 }
-/** Adds the persistent marker that bypasses editor entry for a plain app view. */
 export function createNudgeUiDirectUrl(applicationHref) {
     const url = new URL(applicationHref);
     assertApplicationUrl(url);
     url.searchParams.set(NUDGE_UI_DIRECT_QUERY_PARAM, "1");
     return url.href;
 }
-/** Reads the public `nudge-ui=off` / `nudge-ui=on` switch from an application URL. */
 export function readNudgeUiQuerySwitch(href) {
     const url = new URL(href);
     const values = url.searchParams.getAll(NUDGE_UI_EDITOR_QUERY_PARAM);
@@ -85,15 +80,12 @@ export function readNudgeUiQuerySwitch(href) {
     }
     return values.includes(NUDGE_UI_ON_QUERY_VALUE) ? "on" : null;
 }
-/** Returns whether this application location explicitly bypasses editor entry. */
 export function isNudgeUiDirectUrl(href) {
     return readNudgeUiQuerySwitch(href) === "off";
 }
-/** Remembers that this browser tab was explicitly opened outside the editor. */
 export function rememberNudgeUiDirectTabIntent() {
     rememberNudgeUiTabSwitch("off");
 }
-/** Remembers an explicit URL switch so later navigations in this tab keep it. */
 export function rememberNudgeUiTabSwitch(value) {
     try {
         sessionStorage.setItem(value === "off" ? DIRECT_TAB_SESSION_KEY : FORCED_TAB_SESSION_KEY, "1");
@@ -103,11 +95,9 @@ export function rememberNudgeUiTabSwitch(value) {
         // Storage denial must not prevent the current page from honoring the switch.
     }
 }
-/** Returns whether this browser tab should remain outside the editor. */
 export function hasNudgeUiDirectTabIntent() {
     return readTabFlag(DIRECT_TAB_SESSION_KEY);
 }
-/** Returns whether this browser tab explicitly asked for the editor with `nudge-ui=on`. */
 export function hasNudgeUiForcedTabIntent() {
     return readTabFlag(FORCED_TAB_SESSION_KEY);
 }
@@ -119,7 +109,7 @@ function readTabFlag(key) {
         return false;
     }
 }
-/** Chooses the browser-client role before any runtime manifest is fetched. */
+/** Resolved before any runtime manifest is fetched. */
 export function resolveNudgeUiClientEntry(href, context) {
     if (context.editorDocument || context.canvasRenderer)
         return { kind: "bootstrap" };
@@ -147,14 +137,13 @@ function assertApplicationUrl(url) {
         throw new TypeError("Nudge UI application URLs must be HTTP(S) URLs outside its reserved route namespace.");
     }
 }
-/** Renders the host-neutral editor document served by every development Adapter. */
 export function createNudgeUiEditorDocument() {
     return `<!doctype html>
 <html lang="en" data-nudge-ui-editor>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Nudge UI</title>
+  <title></title>
   <style>html,body,#${NUDGE_UI_MOUNT_ID}{width:100%;height:100%;margin:0}body{overflow:hidden}</style>
 </head>
 <body>

package/dist/transport/index.d.ts

@@ -1,8 +1,3 @@
-/**
- * The wire contract between any host and the browser client. Must stay
- * browser-safe: the inspector's mount components import these routes directly.
- * Anything needing Node belongs in `project/`.
- */
 export * from "./routes.js";
 export * from "./editor.js";
 /** Envelope version understood by the browser client. */

package/dist/transport/index.js

@@ -1,8 +1,3 @@
-/**
- * The wire contract between any host and the browser client. Must stay
- * browser-safe: the inspector's mount components import these routes directly.
- * Anything needing Node belongs in `project/`.
- */
 export * from "./routes.js";
 export * from "./editor.js";
 /** Envelope version understood by the browser client. */

package/dist/transport/routes.d.ts

@@ -1,8 +1,3 @@
-/**
- * The reserved URL namespace every host serves the inspector through. Hosts
- * own their own middleware and reload policy, but the paths are one contract:
- * the browser client is built once and requests the same URLs everywhere.
- */
 /** A host must not serve project files here. */
 export declare const NUDGE_UI_ROUTE_PREFIX = "/__nudge_ui__/";
 export declare const NUDGE_UI_MANIFEST_PATH = "/__nudge_ui__/manifest";

package/dist/transport/routes.js

@@ -1,8 +1,3 @@
-/**
- * The reserved URL namespace every host serves the inspector through. Hosts
- * own their own middleware and reload policy, but the paths are one contract:
- * the browser client is built once and requests the same URLs everywhere.
- */
 /** A host must not serve project files here. */
 export const NUDGE_UI_ROUTE_PREFIX = "/__nudge_ui__/";
 export const NUDGE_UI_MANIFEST_PATH = `${NUDGE_UI_ROUTE_PREFIX}manifest`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nudge-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A design panel for your codebase. Development only.",
   "license": "MIT",
   "repository": {
@@ -59,9 +59,9 @@
       "default": "./dist/inspector/index.js"
     },
     "./internal/component-runtime": {
-      "types": "./dist/inspector/componentSemantics/reactRuntime.d.ts",
-      "import": "./dist/inspector/componentSemantics/reactRuntime.js",
-      "default": "./dist/inspector/componentSemantics/reactRuntime.js"
+      "types": "./dist/inspector/componentSemantics/react/runtime.d.ts",
+      "import": "./dist/inspector/componentSemantics/react/runtime.js",
+      "default": "./dist/inspector/componentSemantics/react/runtime.js"
     },
     "./internal/host-runtime": {
       "types": "./dist/inspector/componentSemantics/runtimeBridge.d.ts",
@@ -143,6 +143,7 @@
     "access": "public"
   },
   "scripts": {
+    "dev:client": "node scripts/watch-inspector-client.mjs",
     "build": "node ../../scripts/build-package.mjs && node ../../scripts/vendor-agent-protocol.mjs && node scripts/build-inspector-client.mjs && node scripts/build-next-loaders.mjs && node scripts/build-static-cli.mjs",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test:unit": "vitest run --config vitest.unit.config.ts",

package/dist/inspector/styleEditors/InsetSection.d.ts

@@ -1,15 +0,0 @@
-import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
-import type { SelectedElement } from "../selection/selectionStore.js";
-export interface InsetSectionProps {
-    element: SelectedElement;
-    entries?: TokenEntry[];
-    tokenRows?: ResolvedProperty[];
-    onAfterEdit?: () => void;
-}
-/**
- * Keeps the positioned-element inset editor available as a standalone
- * section for callers that render it outside SpacingBox.
- */
-export declare function InsetSection({ element, entries, tokenRows, onAfterEdit, }: InsetSectionProps): ReactElement | null;

package/dist/inspector/styleEditors/InsetSection.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getStateStyleValue } from "../shell/stateValue.js";
-import { projectInspectorValues } from "../spacing/projection.js";
-import { SpacingField } from "./SpacingBox.js";
-/**
- * Keeps the positioned-element inset editor available as a standalone
- * section for callers that render it outside SpacingBox.
- */
-export function InsetSection({ element, entries = [], tokenRows = [], onAfterEdit, }) {
-    const el = element.domElement;
-    const position = getStateStyleValue(el, "position", "static").trim().toLowerCase();
-    if (position !== "relative" && position !== "sticky")
-        return null;
-    return (_jsx(SpacingField, { property: "inset", projection: projectInspectorValues(el, tokenRows).spacing.inset, domElement: el, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }));
-}

package/dist/inspector/styleEditors/PositionInsets.d.ts

@@ -1,15 +0,0 @@
-import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
-import type { EditTarget } from "../selection/editTarget.js";
-import type { StyleSelection } from "../selection/styleSelection.js";
-export interface PositionInsetsProps {
-    domElement: HTMLElement;
-    editTarget?: EditTarget;
-    selection?: StyleSelection | null;
-    entries?: TokenEntry[];
-    tokenRows?: ResolvedProperty[];
-    revision?: number;
-    onAfterEdit?: () => void;
-}
-export declare function PositionInsets({ domElement: el, editTarget, selection, entries, tokenRows, onAfterEdit, }: PositionInsetsProps): ReactElement;

package/dist/inspector/styleEditors/PositionInsets.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
-import { projectInspectorValues, projectInspectorValuesForSelection } from "../spacing/projection.js";
-import { SpacingField } from "./SpacingBox.js";
-const OFFSET_PRESETS = ["auto", "0", "50%", "100%"];
-export function PositionInsets({ domElement: el, editTarget, selection, entries, tokenRows = [], onAfterEdit, }) {
-    const allEntries = entries ?? getNudgeUiTokenEntries();
-    const projection = selection
-        ? projectInspectorValuesForSelection(selection)
-        : projectInspectorValues(el, tokenRows);
-    return (_jsxs("div", { className: "layout__group", "data-test": "layout-position", children: [_jsx("div", { className: "editor__title", children: "Position" }), _jsx(SpacingField, { property: "inset", projection: projection.spacing.inset, domElement: el, editTarget: editTarget, selection: selection, entries: allEntries, tokenRows: tokenRows, onAfterEdit: onAfterEdit, showLabel: false, showEmptyState: false, suggestions: OFFSET_PRESETS })] }));
-}

package/dist/inspector/tokens/TokenDropdown.d.ts

@@ -1,13 +0,0 @@
-import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
-import type { CssValueGrammar, TokenSemanticSlot } from "../../css/value-semantics/index.js";
-export interface TokenDropdownProps {
-    row: ResolvedProperty;
-    domElement: HTMLElement;
-    entries: TokenEntry[];
-    slot?: TokenSemanticSlot;
-    grammar?: CssValueGrammar;
-    onAfterEdit?: () => void;
-}
-export declare function TokenDropdown(props: TokenDropdownProps): ReactElement;

package/dist/inspector/tokens/TokenDropdown.js

@@ -1,59 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { swapToken, promoteToToken } from "./editActions.js";
-import { Select } from "../ui/Select.js";
-import { selectTokens, TOKEN_GROUP_LABELS, TOKEN_GROUP_ORDER, } from "../../css/value-semantics/index.js";
-function groupTokens(entries) {
-    const map = new Map();
-    for (const entry of entries) {
-        const group = entry.group;
-        let list = map.get(group);
-        if (!list) {
-            list = [];
-            map.set(group, list);
-        }
-        list.push(entry);
-    }
-    return map;
-}
-export function TokenDropdown(props) {
-    const { row, domElement, entries, slot, grammar, onAfterEdit } = props;
-    const candidates = useMemo(() => selectTokens({
-        element: domElement,
-        property: row.property,
-        slot,
-        entries,
-        currentToken: row.tokenName,
-        grammar,
-    }).candidates, [domElement, entries, grammar, row.property, row.tokenName, slot]);
-    const grouped = useMemo(() => groupTokens(candidates), [candidates]);
-    function handleSelect(value) {
-        const chosen = candidates.find(({ entry }) => entry.name === value)?.entry;
-        if (!chosen)
-            return;
-        const oldToken = row.tokenName
-            ? entries.find((entry) => entry.name === row.tokenName || entry.cssName === row.tokenName) ?? null
-            : null;
-        swapToken(domElement, row.property, chosen, oldToken);
-        onAfterEdit?.();
-    }
-    function handlePromote(value) {
-        const chosen = entries.find((entry) => entry.name === value);
-        if (!chosen)
-            return;
-        promoteToToken(domElement, row.property, chosen);
-        onAfterEdit?.();
-    }
-    const hasToken = row.tokenName !== null;
-    const selectValue = row.tokenName ?? "";
-    const selectGroups = TOKEN_GROUP_ORDER.flatMap((group) => {
-        const list = grouped.get(group);
-        if (!list || list.length === 0)
-            return [];
-        return [{
-                label: TOKEN_GROUP_LABELS[group],
-                options: list.map(({ entry }) => ({ value: entry.name, label: entry.name })),
-            }];
-    });
-    return (_jsx("span", { className: "token-dropdown", "data-test": "token-dropdown", children: hasToken ? (_jsx(Select, { "data-test": "token-select", value: selectValue, groups: selectGroups, searchable: true, searchPlaceholder: "Search", searchAriaLabel: "Search tokens", onValueChange: handleSelect })) : (_jsx("span", { className: "token-promote", "data-test": "token-promote", children: _jsx(Select, { "data-test": "token-promote-select", value: "", placeholder: "Replace with token\u2026", groups: selectGroups, searchable: true, searchPlaceholder: "Search", searchAriaLabel: "Search tokens", onValueChange: handlePromote }) })) }));
-}