dslinter 0.1.5 → 0.2.0

package/src/playground/collectDefinedPlaygrounds.ts

@@ -0,0 +1,68 @@
+import { createElement } from "react";
+import type { DefinedPlayground } from "./definePlayground";
+import type { PlaygroundEntry } from "../types/playground";
+import type { PlaygroundPreviewComponent } from "../types/preview";
+import type { PlaygroundArgs } from "../types/controls";
+import type { BuildPlaygroundModules } from "./buildPlaygroundEntriesFromReport";
+import { catalogIdFromPlaygroundExport } from "./catalogIdFromPlaygroundExport";
+
+function isDefinedPlayground(value: unknown): value is DefinedPlayground {
+  if (!value || typeof value !== "object") return false;
+  const o = value as Record<string, unknown>;
+  if (typeof o.playgroundMeta !== "object" || o.playgroundMeta === null) return false;
+  const meta = o.playgroundMeta as { id?: unknown; title?: unknown; group?: unknown };
+  return (
+    typeof meta.id === "string" &&
+    typeof meta.title === "string" &&
+    (meta.group === undefined || typeof meta.group === "string") &&
+    Array.isArray(o.playgroundControls) &&
+    typeof o.PlaygroundPreview === "function"
+  );
+}
+
+function resolveDefinedMeta(
+  defined: DefinedPlayground,
+  exportName: string | undefined,
+): DefinedPlayground["playgroundMeta"] | undefined {
+  const meta = defined.playgroundMeta;
+  if (meta.id) return meta;
+  if (!exportName) return undefined;
+  const id = catalogIdFromPlaygroundExport(exportName);
+  if (!id) return undefined;
+  return { ...meta, id, title: meta.title || id };
+}
+
+function definedPlaygroundToEntry(defined: DefinedPlayground, modulePath: string): PlaygroundEntry {
+  const { playgroundMeta, playgroundControls, PlaygroundPreview } = defined;
+  const Preview = PlaygroundPreview as PlaygroundPreviewComponent;
+  const renderPreview = (values: PlaygroundArgs) => createElement(Preview, { values });
+
+  return {
+    id: playgroundMeta.id,
+    meta: playgroundMeta,
+    modulePath,
+    controls: playgroundControls,
+    renderPreview,
+    Preview,
+  };
+}
+
+/** Collect manual playground entries from `definePlayground()` exports in eager modules. */
+export function collectDefinedPlaygrounds(modules: BuildPlaygroundModules): PlaygroundEntry[] {
+  const out: PlaygroundEntry[] = [];
+  for (const [modulePath, mod] of Object.entries(modules)) {
+    if (!mod || typeof mod !== "object") continue;
+    for (const [exportName, value] of Object.entries(mod)) {
+      if (!isDefinedPlayground(value)) continue;
+      const meta = resolveDefinedMeta(value, exportName);
+      if (!meta) continue;
+      out.push(
+        definedPlaygroundToEntry(
+          meta === value.playgroundMeta ? value : { ...value, playgroundMeta: meta },
+          modulePath,
+        ),
+      );
+    }
+  }
+  return out;
+}

package/src/playground/controls.ts

@@ -0,0 +1,177 @@
+import type { PlaygroundControl } from "../types/controls";
+import type { DeclaredPropKind, UsageSummary } from "../types/report";
+
+export const CHILDREN_SLOT_DEFAULT = "Example";
+
+/** Never surfaced as playground controls or preview props. */
+export const SKIP_PLAYGROUND_PROPS = new Set(["key", "ref", "props"]);
+
+/** Styling props kept in the panel but without generated placeholder defaults. */
+export const PASSTHROUGH_STRING_PROPS = new Set(["className", "style"]);
+
+export function isPassthroughStringProp(key: string): boolean {
+  return PASSTHROUGH_STRING_PROPS.has(key);
+}
+
+export function stringDefaultForProp(key: string): string {
+  if (isPassthroughStringProp(key)) return "";
+  return defaultStringForProp(key);
+}
+
+export type PlaygroundStringControl = Extract<PlaygroundControl, { type: "string" }>;
+
+/** Parts like BreadcrumbSeparator default to an icon when children is omitted. */
+export function usesIconChildrenFallback(exportName: string): boolean {
+  return exportName.endsWith("Separator");
+}
+
+export function childrenControl(exportName?: string): PlaygroundStringControl {
+  if (exportName && usesIconChildrenFallback(exportName)) {
+    return {
+      key: "children",
+      label: "children",
+      type: "string",
+      default: "",
+      placeholder: "Custom separator (chevron when empty)",
+    };
+  }
+  return {
+    key: "children",
+    label: "children",
+    type: "string",
+    default: CHILDREN_SLOT_DEFAULT,
+    placeholder: "Slot content",
+  };
+}
+
+export function childrenPropForPreview(
+  exportName: string | undefined,
+  raw: unknown,
+): unknown | undefined {
+  if (exportName && usesIconChildrenFallback(exportName)) {
+    if (raw === undefined || raw === null || String(raw).length === 0) return undefined;
+    return String(raw);
+  }
+  if (raw === undefined || raw === null) return CHILDREN_SLOT_DEFAULT;
+  return String(raw);
+}
+
+export function componentAcceptsChildren(
+  declaredProps: string[],
+  usage?: UsageSummary,
+): boolean {
+  if (declaredProps.includes("children")) return true;
+  if (declaredProps.includes("asChild")) return true;
+  if ((usage?.prop_frequencies?.children ?? 0) > 0) return true;
+  return false;
+}
+
+export function ensureChildrenControl(
+  controls: PlaygroundControl[],
+  acceptsChildren: boolean,
+  exportName?: string,
+): PlaygroundControl[] {
+  if (!acceptsChildren || controls.some((c) => c.key === "children")) {
+    return controls;
+  }
+  return [...controls, childrenControl(exportName)];
+}
+
+export function isLikelyBooleanProp(name: string): boolean {
+  const n = name.toLowerCase();
+  if (n === "disabled" || n === "loading" || n === "aschild") return true;
+  if (n.startsWith("is") || n.startsWith("has")) return true;
+  if (n.startsWith("show") || n.startsWith("hide")) return true;
+  return false;
+}
+
+export function defaultStringForProp(key: string): string {
+  if (key === "href") return "/governance";
+  const k = key.toLowerCase();
+  if (
+    k === "title" ||
+    k === "label" ||
+    k === "text" ||
+    k === "name" ||
+    k === "heading"
+  ) {
+    return "Label";
+  }
+  return key;
+}
+
+export function controlsFromDeclaredProps(
+  declaredProps: string[],
+  propKinds?: Partial<Record<string, DeclaredPropKind>>,
+  propOptions?: Record<string, string[]>,
+  propDefaults?: Record<string, string>,
+  exportName?: string,
+): PlaygroundControl[] {
+  const out: PlaygroundControl[] = [];
+  for (const key of declaredProps) {
+    if (SKIP_PLAYGROUND_PROPS.has(key)) continue;
+    if (key === "children") {
+      out.push(childrenControl(exportName));
+      continue;
+    }
+    const options = propOptions?.[key];
+    if (options && options.length >= 2) {
+      const defaultVal =
+        propDefaults?.[key] ??
+        (options.includes("default") ? "default" : options[0]!);
+      out.push({
+        key,
+        label: key,
+        type: "select",
+        default: defaultVal,
+        options: options.map((value) => ({ value, label: value })),
+      });
+      continue;
+    }
+    const kind = propKinds?.[key];
+    if (kind === "boolean") {
+      out.push({ key, label: key, type: "boolean", default: false });
+    } else if (kind === "number") {
+      out.push({ key, label: key, type: "number", default: 0 });
+    } else if (kind === "string") {
+      out.push({
+        key,
+        label: key,
+        type: "string",
+        default: stringDefaultForProp(key),
+        placeholder: isPassthroughStringProp(key) ? undefined : key,
+      });
+    } else if (isLikelyBooleanProp(key)) {
+      out.push({ key, label: key, type: "boolean", default: false });
+    } else {
+      out.push({
+        key,
+        label: key,
+        type: "string",
+        default: stringDefaultForProp(key),
+        placeholder: isPassthroughStringProp(key) ? undefined : key,
+      });
+    }
+  }
+  return out;
+}
+
+export function controlsForSpec(
+  catalogId: string,
+  declaredProps: string[],
+  propKinds: Partial<Record<string, DeclaredPropKind>> | undefined,
+  propOptions: Record<string, string[]> | undefined,
+  propDefaults: Record<string, string> | undefined,
+  controlOverrides: Record<string, PlaygroundControl[]>,
+  exportName?: string,
+): PlaygroundControl[] {
+  const override = controlOverrides[catalogId];
+  if (override) return override;
+  return controlsFromDeclaredProps(
+    declaredProps,
+    propKinds,
+    propOptions,
+    propDefaults,
+    exportName,
+  );
+}

package/src/playground/createPlaygroundRegistry.ts

@@ -51,7 +51,7 @@ export function createPlaygroundRegistry(
     });
 }
 
-/** Convenience when you only need entries (skips are still logged in dev). */
+/** Convenience when you only need entries. */
 export function createPlaygroundRegistryEntriesOnly(
   modules: BuildPlaygroundModules,
   options: CreatePlaygroundRegistryOptions = {},

package/src/playground/definePlayground.tsx

@@ -1,5 +1,11 @@
 import type { ComponentType, ReactNode } from "react";
 import type { PlaygroundArgs, PlaygroundControl } from "../types/controls";
+import { buildKitControls, type PlaygroundKitHints } from "./enrichKitControls";
+import {
+  expandPlaygroundControls,
+  propsFromControls,
+  type PlaygroundControlsInput,
+} from "./expandPlaygroundControls";
 import type { PlaygroundMeta } from "../types/playground";
 import type { PlaygroundPreviewComponent, PlaygroundPreviewProps } from "../types/preview";
 
@@ -7,12 +13,14 @@ export type DefinedPlayground = {
   playgroundMeta: PlaygroundMeta;
   playgroundControls: PlaygroundControl[];
   PlaygroundPreview: PlaygroundPreviewComponent;
+  playgroundKitHints?: PlaygroundKitHints;
 };
 
 type PlaygroundDefinitionBase = {
   /**
    * Stable sidebar / URL id. Defaults to the component’s `displayName` or function `name`
-   * (dev builds). Required for `render`-only definitions or when the name is unreliable.
+   * (dev builds). For `render`-only definitions, omit when the module export is
+   * `{name}Playground` (resolved at collect time).
    */
   id?: string;
   title?: string;
@@ -20,7 +28,11 @@ type PlaygroundDefinitionBase = {
   group?: string;
   /** @deprecated Use `group` — kept for older call sites. */
   section?: string;
-  controls?: PlaygroundControl[];
+  controls?: PlaygroundControlsInput;
+};
+
+type PlaygroundMetaOptions = Omit<PlaygroundDefinitionBase, "controls"> & {
+  controls?: PlaygroundControlsInput;
 };
 
 type DefineWithComponent<P> = PlaygroundDefinitionBase & {
@@ -28,8 +40,15 @@ type DefineWithComponent<P> = PlaygroundDefinitionBase & {
   props: (values: PlaygroundArgs) => P;
 };
 
+type DefineWithKit<T extends PlaygroundArgs = PlaygroundArgs> = PlaygroundDefinitionBase & {
+  /** Preview renderer receiving mapped control values. */
+  kit: (args: T) => ReactNode;
+  /** Optional overrides merged after inferred / declared control defaults. */
+  defaults?: Partial<T>;
+};
+
 type DefineWithRender = PlaygroundDefinitionBase & {
-  /** Use when the preview is not a straight prop pass (composition, static demos, wrappers). */
+  /** Escape hatch when `kit` control mapping is not enough (raw panel values, legacy call sites). */
   render: (values: PlaygroundArgs) => ReactNode;
 };
 
@@ -50,8 +69,8 @@ function resolveMeta(
   base: PlaygroundDefinitionBase,
   nameFallback: string | undefined,
 ): PlaygroundMeta {
-  const id = base.id ?? inferId(nameFallback);
-  const title = base.title ?? id;
+  const id = base.id ?? (nameFallback ? inferId(nameFallback) : "");
+  const title = base.title ?? (id || "");
   const group = base.group ?? base.section;
   return {
     id,
@@ -60,27 +79,69 @@ function resolveMeta(
   };
 }
 
+function resolveKitControls(
+  kit: (args: PlaygroundArgs) => ReactNode,
+  opts: PlaygroundDefinitionBase & { defaults?: Partial<PlaygroundArgs> },
+  catalogId: string,
+): { controls: PlaygroundControl[]; hints: PlaygroundKitHints } {
+  return buildKitControls(kit, {
+    controls: opts.controls,
+    defaults: opts.defaults as Record<string, string | number | boolean> | undefined,
+    catalogId: catalogId || undefined,
+  });
+}
+
+function buildKitPlayground<T extends PlaygroundArgs>(
+  kit: (args: T) => ReactNode,
+  opts: PlaygroundDefinitionBase & { defaults?: Partial<T> },
+): DefinedPlayground {
+  const meta = resolveMeta(opts, undefined);
+  const { controls, hints } = resolveKitControls(kit, opts, meta.id);
+  function PlaygroundPreview({ values }: PlaygroundPreviewProps) {
+    return <>{kit(propsFromControls(controls, values, opts.defaults))}</>;
+  }
+  PlaygroundPreview.displayName = `${meta.id}PlaygroundPreview`;
+  return {
+    playgroundMeta: meta,
+    playgroundControls: controls,
+    PlaygroundPreview,
+    playgroundKitHints: hints,
+  };
+}
+
+function isComponentPropsOptions(value: unknown): value is DefineWithComponent<Record<string, unknown>> {
+  return typeof value === "object" && value !== null && "props" in value;
+}
+
 /**
- * Optional escape hatch: declare dashboard playground exports manually. Prefer driving
- * playgrounds from `dslint-report.json` (`playgrounds`) so component files stay free of
- * dashboard package imports.
+ * Declare dashboard playground exports manually. Pass a kit callback directly — control
+ * keys are inferred from destructured parameters (inline defaults become panel defaults).
  */
 export function definePlayground<P extends Record<string, unknown>>(
   component: ComponentType<P>,
   options: DefineWithComponent<P>,
 ): DefinedPlayground;
 
+export function definePlayground<T extends PlaygroundArgs>(
+  kit: (args: T) => ReactNode,
+  meta?: PlaygroundMetaOptions & { defaults?: Partial<T> },
+): DefinedPlayground;
+
+export function definePlayground<T extends PlaygroundArgs>(
+  options: DefineWithKit<T>,
+): DefinedPlayground;
+
 export function definePlayground(options: DefineWithRender): DefinedPlayground;
 
-export function definePlayground<P extends Record<string, unknown>>(
-  componentOrOptions: ComponentType<P> | DefineWithRender,
-  options?: DefineWithComponent<P>,
+export function definePlayground<P extends Record<string, unknown>, T extends PlaygroundArgs>(
+  componentOrKitOrOptions: ComponentType<P> | ((args: T) => ReactNode) | DefineWithKit<T> | DefineWithRender,
+  options?: DefineWithComponent<P> | (PlaygroundMetaOptions & { defaults?: Partial<T> }),
 ): DefinedPlayground {
-  if (options !== undefined) {
-    const Component = componentOrOptions as ComponentType<P>;
+  if (typeof componentOrKitOrOptions === "function" && isComponentPropsOptions(options)) {
+    const Component = componentOrKitOrOptions as ComponentType<P>;
     const opts = options;
     const meta = resolveMeta(opts, getComponentLabel(Component));
-    const controls = opts.controls ?? [];
+    const controls = expandPlaygroundControls(opts.controls);
     function PlaygroundPreview({ values }: PlaygroundPreviewProps) {
       return <Component {...opts.props(values)} />;
     }
@@ -88,12 +149,23 @@ export function definePlayground<P extends Record<string, unknown>>(
     return { playgroundMeta: meta, playgroundControls: controls, PlaygroundPreview };
   }
 
-  const opts = componentOrOptions as DefineWithRender;
+  if (typeof componentOrKitOrOptions === "function") {
+    const kit = componentOrKitOrOptions as (args: T) => ReactNode;
+    return buildKitPlayground(kit, options ?? {});
+  }
+
+  const opts = componentOrKitOrOptions as DefineWithKit<T> | DefineWithRender;
+  if ("kit" in opts) {
+    return buildKitPlayground(opts.kit, opts);
+  }
+
   const meta = resolveMeta(opts, undefined);
-  const controls = opts.controls ?? [];
+  const controls = expandPlaygroundControls(opts.controls);
   function PlaygroundPreview({ values }: PlaygroundPreviewProps) {
     return <>{opts.render(values)}</>;
   }
   PlaygroundPreview.displayName = `${meta.id}PlaygroundPreview`;
   return { playgroundMeta: meta, playgroundControls: controls, PlaygroundPreview };
 }
+
+export type { DefineWithKit as DefinePlaygroundKitOptions, PlaygroundKitHints };

package/src/playground/definePlaygroundFromKit.ts

@@ -0,0 +1,17 @@
+import type { PlaygroundArgs } from "../types/controls";
+import {
+  definePlayground,
+  type DefinedPlayground,
+  type DefinePlaygroundKitOptions,
+} from "./definePlayground";
+
+/** @deprecated Use `definePlayground({ kit, controls })` instead. */
+export type DefinePlaygroundFromKitOptions<T extends PlaygroundArgs> =
+  DefinePlaygroundKitOptions<T>;
+
+/** @deprecated Use `definePlayground({ kit, controls })` instead. */
+export function definePlaygroundFromKit<T extends PlaygroundArgs>(
+  options: DefinePlaygroundFromKitOptions<T>,
+): DefinedPlayground {
+  return definePlayground(options);
+}

package/src/playground/embedGlobKey.ts

@@ -0,0 +1,8 @@
+/** Virtual module map key for a scanner `rel_path` (embed convention). */
+export function embedGlobKeyFromRelPath(relPath: string): string {
+  const trimmed = relPath.replace(/^\/+/, "");
+  return `@dslinter-scan/${trimmed}`;
+}
+
+/** Alias for {@link embedGlobKeyFromRelPath} used by embed playground join helpers. */
+export const defaultEmbedGlobKeyFromRelPath = embedGlobKeyFromRelPath;

package/src/playground/enrichKitControls.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { enrichControlsFromKitJsx } from "./enrichKitControls";
+import { expandPlaygroundControls } from "./expandPlaygroundControls";
+
+describe("enrichControlsFromKitJsx", () => {
+  it("labels slot params from compound subcomponents", () => {
+    const controls = expandPlaygroundControls({ title: "title", description: "description" });
+    const enriched = enrichControlsFromKitJsx(controls, [
+      { component: "AlertTitle", param: "title" },
+      { component: "AlertDescription", param: "description" },
+    ]);
+    expect(enriched[0]).toMatchObject({
+      key: "title",
+      label: "Title",
+      default: "Heads up",
+      hint: "AlertTitle children",
+    });
+    expect(enriched[1]).toMatchObject({
+      key: "description",
+      label: "Description",
+      default: "This is a short description.",
+      hint: "AlertDescription children",
+    });
+  });
+});

package/src/playground/enrichKitControls.ts

@@ -0,0 +1,197 @@
+import type { PlaygroundControl } from "../types/controls";
+import type { ComponentDefinition, PlaygroundSpec, WorkspaceReport } from "../types/report";
+import { controlsForSpec } from "./controls";
+import {
+  inferKitRootPropBindings,
+  inferKitJsxSlots,
+  slotDefaultFromComponent,
+  slotLabelFromComponent,
+  type KitJsxSlot,
+  type KitRootPropBinding,
+} from "./inferKitJsx";
+import type { InferredKitParam } from "./inferKitParams";
+import { inferKitParams } from "./inferKitParams";
+import { expandPlaygroundControls } from "./expandPlaygroundControls";
+
+export type PlaygroundKitHints = {
+  rootComponent?: string;
+  slots: KitJsxSlot[];
+  rootPropBindings: KitRootPropBinding[];
+};
+
+function slotForParam(slots: KitJsxSlot[], key: string): KitJsxSlot | undefined {
+  return slots.find((slot) => slot.param === key);
+}
+
+function enrichOneControl(control: PlaygroundControl, slot: KitJsxSlot | undefined): PlaygroundControl {
+  if (!slot) return control;
+  const label = slotLabelFromComponent(slot.component);
+  const exampleDefault = slotDefaultFromComponent(slot.component);
+  const hint = `${slot.component} children`;
+
+  if (control.type === "string") {
+    const useExample =
+      exampleDefault !== undefined &&
+      (control.default === control.key || control.default === control.key.toLowerCase());
+    return {
+      ...control,
+      label,
+      hint,
+      ...(useExample
+        ? { default: exampleDefault, defaultSource: "example" as const, placeholder: exampleDefault }
+        : {}),
+    };
+  }
+  return { ...control, label, hint };
+}
+
+/** Apply compound slot metadata (labels, example defaults) to inferred controls. */
+export function enrichControlsFromKitJsx(
+  controls: PlaygroundControl[],
+  slots: KitJsxSlot[],
+): PlaygroundControl[] {
+  return controls.map((control) => enrichOneControl(control, slotForParam(slots, control.key)));
+}
+
+function mergeInferredParams(
+  params: InferredKitParam[],
+  rootPropBindings: KitRootPropBinding[],
+): InferredKitParam[] {
+  const byKey = new Map(params.map((param) => [param.key, param]));
+
+  for (const binding of rootPropBindings) {
+    if (!byKey.has(binding.param)) {
+      byKey.set(binding.param, { key: binding.param });
+    }
+  }
+
+  return [...byKey.values()];
+}
+
+function specForCatalog(
+  report: { playgrounds?: PlaygroundSpec[] } | null | undefined,
+  catalogId: string,
+): PlaygroundSpec | undefined {
+  return report?.playgrounds?.find(
+    (spec) => spec.export_name === catalogId || spec.id === catalogId,
+  );
+}
+
+function definitionForExport(
+  report: WorkspaceReport | null | undefined,
+  exportName: string,
+): ComponentDefinition | undefined {
+  for (const file of report?.files ?? []) {
+    const def = file.definitions?.find((d) => d.name === exportName);
+    if (def) return def;
+  }
+  return undefined;
+}
+
+function propMetadataForCatalog(
+  report: WorkspaceReport | null | undefined,
+  catalogId: string,
+): {
+  spec: PlaygroundSpec;
+  propOptions: Record<string, string[]>;
+  propDefaults: Record<string, string>;
+  propKinds: PlaygroundSpec["declared_prop_kinds"];
+} | undefined {
+  const spec = specForCatalog(report, catalogId);
+  if (!spec || !report) return undefined;
+
+  const def = definitionForExport(report, spec.export_name);
+  const propOptions = {
+    ...(def?.declared_prop_options ?? {}),
+    ...(spec.declared_prop_options ?? {}),
+  };
+  const propDefaults = {
+    ...(def?.declared_prop_defaults ?? {}),
+    ...(spec.declared_prop_defaults ?? {}),
+  };
+  const propKinds = { ...spec.declared_prop_kinds };
+
+  return { spec, propOptions, propDefaults, propKinds };
+}
+
+/** Merge typed root props (e.g. CVA `variant`) from the report when the kit binds them. */
+export function mergeReportControlsForKit(
+  controls: PlaygroundControl[],
+  rootPropBindings: KitRootPropBinding[],
+  report: WorkspaceReport | null | undefined,
+  catalogId: string,
+): PlaygroundControl[] {
+  const metadata = propMetadataForCatalog(report, catalogId);
+  if (!metadata) return controls;
+
+  const { spec, propOptions, propDefaults, propKinds } = metadata;
+  const rootBindings = rootPropBindings.filter(
+    (binding) => binding.component === spec.export_name || binding.component === catalogId,
+  );
+  if (rootBindings.length === 0) return controls;
+
+  const boundProps = new Set(rootBindings.map((binding) => binding.prop));
+  const reportControls = controlsForSpec(
+    catalogId,
+    (spec.declared_props ?? []).filter((prop) => boundProps.has(prop)),
+    propKinds,
+    Object.keys(propOptions).length ? propOptions : undefined,
+    Object.keys(propDefaults).length ? propDefaults : undefined,
+    {},
+    spec.export_name,
+  );
+
+  const byKey = new Map(controls.map((control) => [control.key, control]));
+  for (const control of reportControls) {
+    byKey.set(control.key, control);
+  }
+  return [...byKey.values()];
+}
+
+export function buildKitControls(
+  kit: (args: Record<string, unknown>) => unknown,
+  options: {
+    controls?: Parameters<typeof expandPlaygroundControls>[0];
+    defaults?: Record<string, string | number | boolean>;
+    report?: { playgrounds?: PlaygroundSpec[] } | null;
+    catalogId?: string;
+  },
+): { controls: PlaygroundControl[]; hints: PlaygroundKitHints } {
+  const slots = inferKitJsxSlots(kit);
+  const rootPropBindings = inferKitRootPropBindings(kit);
+  const params = mergeInferredParams(inferKitParams(kit), rootPropBindings);
+
+  let controls: PlaygroundControl[];
+  if (options.controls !== undefined) {
+    controls = expandPlaygroundControls(options.controls);
+  } else if (options.defaults !== undefined && Object.keys(options.defaults).length > 0) {
+    controls = expandPlaygroundControls(options.defaults);
+  } else if (params.length > 0) {
+    controls = expandPlaygroundControls(
+      Object.fromEntries(params.map((param) => [param.key, param.defaultValue ?? param.key])),
+    );
+  } else {
+    controls = [];
+  }
+
+  controls = enrichControlsFromKitJsx(controls, slots);
+
+  if (options.catalogId && options.report) {
+    controls = mergeReportControlsForKit(
+      controls,
+      rootPropBindings,
+      options.report,
+      options.catalogId,
+    );
+  }
+
+  const rootBinding = rootPropBindings[0];
+  return {
+    controls,
+    hints: {
+      rootComponent: rootBinding?.component ?? options.catalogId,
+      slots,
+      rootPropBindings,
+    },
+  };
+}