@epam/ai-dial-ui-kit 0.13.0-dev.42 → 0.13.0-dev.43

package/dist/mcp-server.cjs

@@ -74,13 +74,24 @@ var ENTITY_KINDS = [
   "theming"
 ];
 var ENTITY_HINT = ENTITY_KINDS.join(" | ");
+function cell(value) {
+  return value.replace(/\s*\n\s*/g, " ").replace(/\\/g, "\\\\").replace(/\|/g, "\\|").trim();
+}
+var GENERATION_GUIDANCE = "Components come in two generations. Generation 2.0 is the current design system \u2014 prefer it. Reach for a 1.0 component only when it has no 2.0 equivalent (no `supersededBy` on the entry).";
 function formatComponent(comp) {
   const lines = [
     `# ${comp.name}`,
     `**Category:** ${comp.category}`,
+    `**Generation:** ${comp.generation}`,
     `**Source:** \`${comp.sourceFile}\``,
     ""
   ];
+  if (comp.supersededBy) {
+    lines.push(
+      `> \u26A0\uFE0F **Generation 1.0 \u2014 superseded by \`${comp.supersededBy}\`.** Use \`${comp.supersededBy}\` for new code and prefer it when touching existing code; see getEntityDetails(entity: "component", name: "${comp.supersededBy}"). Only stay on \`${comp.name}\` if the 2.0 replacement is missing something you need.`,
+      ""
+    );
+  }
   if (comp.description) lines.push(comp.description, "");
   if (comp.lazy) {
     lines.push("## Lazy Loading", "");
@@ -171,6 +182,7 @@ function collectTypeRefs(comp) {
   }
   return [...refs].sort();
 }
+var GENERATION_2_0_BONUS = 30;
 function searchComponents(query) {
   if (!query.trim()) return manifest.components.slice(0, 20);
   const q = query.toLowerCase();
@@ -184,6 +196,7 @@ function searchComponents(query) {
     else if (name.includes(q)) score = 60;
     if (desc.includes(q)) score += 20;
     if (cat.includes(q)) score += 10;
+    if (score > 0 && c.generation === "2.0") score += GENERATION_2_0_BONUS;
     return { c, score };
   }).filter((s) => s.score > 0).sort((a, b) => b.score - a.score).map((s) => s.c);
 }
@@ -223,7 +236,7 @@ server.setRequestHandler(import_types.ListToolsRequestSchema, async () => ({
   tools: [
     {
       name: "searchEntity",
-      description: 'Search for UI kit entities (components, hooks, utils, types, constants) by name or description. Returns a summary list of matches. For typography and theming, returns the full reference content regardless of query.\n\nExamples:\n  searchEntity("component", "button") \u2192 lists Button-related components\n  searchEntity("hook", "click") \u2192 lists hooks with "click" in name/description\n  searchEntity("typography") \u2192 returns full typography CSS class reference',
+      description: 'Search for UI kit entities (components, hooks, utils, types, constants) by name or description. Returns a summary list of matches. For typography and theming, returns the full reference content regardless of query.\n\nComponents come in two generations and results are ranked 2.0 first. Generation 2.0 is the current design system (exported without the `Dial` prefix \u2014 `Button`, `Input`, `Select`); generation 1.0 is the legacy set (`Dial*`). Default to the 2.0 component. A 1.0 result carries "Use instead" when a 2.0 replacement exists \u2014 pick that replacement. Only use a 1.0 component when it has no replacement listed.\n\nExamples:\n  searchEntity("component", "button") \u2192 Button (2.0) ranked above DialButton (1.0)\n  searchEntity("hook", "click") \u2192 lists hooks with "click" in name/description\n  searchEntity("typography") \u2192 returns full typography CSS class reference',
       inputSchema: {
         type: "object",
         properties: {
@@ -243,7 +256,7 @@ server.setRequestHandler(import_types.ListToolsRequestSchema, async () => ({
     },
     {
       name: "getEntityDetails",
-      description: 'Get full documentation for a specific UI kit entity by exact name \u2014 props table, examples, signatures, type members, etc. For typography and theming, returns the full reference content (name not required).\n\nExamples:\n  getEntityDetails("component", "DialButton") \u2192 full props + examples\n  getEntityDetails("type", "ButtonSize") \u2192 enum values\n  getEntityDetails("hook", "useClickOutside") \u2192 signature + description\n  getEntityDetails("theming") \u2192 full CSS variable and token reference',
+      description: 'Get full documentation for a specific UI kit entity by exact name \u2014 props table, examples, signatures, type members, etc. For typography and theming, returns the full reference content (name not required).\n\nA component response states its generation. If it reports being superseded by a 2.0 component, look that one up instead of using the 1.0 entry.\n\nExamples:\n  getEntityDetails("component", "Button") \u2192 full props + examples for the 2.0 button\n  getEntityDetails("component", "DialButton") \u2192 1.0 button, flagged as superseded by `Button`\n  getEntityDetails("type", "ButtonSize") \u2192 enum values\n  getEntityDetails("hook", "useClickOutside") \u2192 signature + description\n  getEntityDetails("theming") \u2192 full CSS variable and token reference',
       inputSchema: {
         type: "object",
         properties: {
@@ -310,7 +323,7 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
           ]
         };
       }
-      const header2 = query ? `Found ${results2.length} component(s) matching "${query}":` : `First ${results2.length} components (pass a query to filter):`;
+      const header2 = query ? `Found ${results2.length} component(s) matching "${query}", best match first:` : `First ${results2.length} components, generation 2.0 first (pass a query to filter):`;
       return {
         content: [
           {
@@ -318,10 +331,12 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
             text: [
               header2,
               "",
-              "| Name | Category | Description |",
-              "|------|----------|-------------|",
+              GENERATION_GUIDANCE,
+              "",
+              "| Name | Gen | Use instead | Category | Description |",
+              "|------|-----|-------------|----------|-------------|",
               ...results2.map(
-                (c) => `| \`${c.name}\` | ${c.category} | ${c.description} |`
+                (c) => `| \`${c.name}\` | ${c.generation} | ${c.supersededBy ? `\`${c.supersededBy}\`` : "\u2014"} | ${cell(c.category)} | ${cell(c.description)} |`
               ),
               "",
               'Use getEntityDetails(entity: "component", name: "...") for full props and examples.'
@@ -353,7 +368,7 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
               "| Name | Kind | Description |",
               "|------|------|-------------|",
               ...results2.map(
-                (t) => `| \`${t.name}\` | ${t.kind} | ${t.description ?? ""} |`
+                (t) => `| \`${t.name}\` | ${t.kind} | ${cell(t.description ?? "")} |`
               ),
               "",
               'Use getEntityDetails(entity: "type", name: "...") for members and values.'
@@ -384,7 +399,9 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
             "",
             "| Name | Description |",
             "|------|-------------|",
-            ...results.map((e) => `| \`${e.name}\` | ${e.description ?? ""} |`),
+            ...results.map(
+              (e) => `| \`${e.name}\` | ${cell(e.description ?? "")} |`
+            ),
             "",
             `Use getEntityDetails(entity: "${entity}", name: "...") for full signature.`
           ].join("\n")
@@ -406,8 +423,11 @@ server.setRequestHandler(import_types.CallToolRequestSchema, async (request) =>
     if (entity === "component") {
       const comp = manifest.components.find((c) => c.name === entityName);
       if (!comp) {
+        const alt = manifest.components.find(
+          (c) => c.name === `Dial${entityName}` || c.name === entityName.replace(/^Dial/, "")
+        );
         throw new Error(
-          `Component "${entityName}" not found. Use searchEntity(entity: "component") to browse available components.`
+          `Component "${entityName}" not found.${alt ? ` Did you mean "${alt.name}" (generation ${alt.generation})?` : ""} Use searchEntity(entity: "component") to browse available components.`
         );
       }
       return { content: [{ type: "text", text: formatComponent(comp) }] };

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
+export declare const dropdownSubMenuClassName: string;
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownItemDisabledClassName: string;
 export declare const dropdownItemDangerClassName = "text-error";

package/dist/src/components/New/Select/constants.d.ts

@@ -15,6 +15,9 @@ export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
+export declare const selectSubMenuClassName: string;
+/** Marks an option that opens a nested list. Matches the dropdown's caret. */
+export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
 /** Classes for the chevron rendered as the field's trailing icon. */
 export declare const selectFieldIconClassName = "text-secondary transition-transform";
 /**

package/dist/src/components/New/constants/overlay.d.ts

@@ -5,6 +5,13 @@
  */
 /** The floating panel itself: rounded raised card with a one-unit inset. */
 export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
+/**
+ * A nested panel opened from a row of the surface above it. It is the same
+ * object as its parent panel, so it reads from `overlaySurfaceClassName` too —
+ * only the width behaviour differs, since a submenu is sized by its own content
+ * rather than by the trigger further up.
+ */
+export declare const overlaySubMenuClassName: string;
 /**
  * A selectable row inside the panel. Keeps a visible focus ring: these rows are
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.

package/dist/src/mcp/types.d.ts

@@ -11,9 +11,21 @@ export interface LazyComponentEntry {
     ssr: false;
     nextDynamicExample: string;
 }
+/**
+ * Component generation. `2.0` components live under `src/components/New/` and
+ * are exported without the `Dial` prefix; everything else is `1.0`.
+ */
+export type ComponentGeneration = '1.0' | '2.0';
 export interface ComponentEntry {
     name: string;
     category: string;
+    /** `2.0` components are the current design system and should be preferred. */
+    generation: ComponentGeneration;
+    /**
+     * Present on `1.0` components that have a `2.0` replacement — the name of
+     * that replacement (e.g. `DialButton` → `Button`).
+     */
+    supersededBy?: string;
     description: string;
     props: PropEntry[];
     examples: string[];

package/dist/src/utils/sub-menu-floating.d.ts

@@ -39,6 +39,12 @@ interface SubMenuPanelProps {
     context: ReturnType<typeof useSubMenuFloating>['context'];
     getFloatingProps: ReturnType<typeof useSubMenuFloating>['getFloatingProps'];
     role: 'menu' | 'listbox';
+    /**
+     * Replaces the surface tokens — radius, background, shadow, inset. The 2.0
+     * menus pass their own overlay surface so a submenu is the same object as the
+     * panel that opened it; the 1.0 menus keep the default.
+     */
+    surfaceClassName?: string;
     /** Extra classes appended to the default floating container classes. */
     className?: string;
     children: ReactNode;
@@ -47,5 +53,5 @@ interface SubMenuPanelProps {
  * Shared floating panel wrapper (FloatingPortal → FloatingFocusManager → container div).
  * Used by DropdownSubMenuItem and SelectSubMenuItem.
  */
-export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.13.0-dev.42",
+  "version": "0.13.0-dev.43",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",