@naturaldesign/dev 0.0.12 → 0.0.13

package/dist/cli.mjs

@@ -15114,8 +15114,20 @@ function classifyType(type, scope, depth = 0) {
         return classifyType(local.typeAnnotation, scope, depth + 1);
       if (lastSegment(name) === "PropType")
         return classifyType(typeArguments(type)[0], scope, depth + 1);
-      return { type: "other" };
-    }
+      if (/^(ReadonlyArray|Array|Set)$/.test(lastSegment(name)))
+        return { type: "other", shape: "array" };
+      if (/^(Function|Dispatch|SetStateAction|MouseEventHandler|ChangeEventHandler|EventHandler)$/.test(lastSegment(name)) || /Handler$/.test(lastSegment(name)))
+        return { type: "other", shape: "function" };
+      return { type: "other", shape: "object" };
+    }
+    case "TSFunctionType":
+      return { type: "other", shape: "function" };
+    case "TSArrayType":
+    case "TSTupleType":
+      return { type: "other", shape: "array" };
+    case "TSTypeLiteral":
+    case "TSMappedType":
+      return { type: "other", shape: "object" };
     case "TSUnionType": {
       const kinds = type.types.filter((member) => member.type !== "TSUndefinedKeyword" && member.type !== "TSNullKeyword" && member.type !== "TSVoidKeyword").map((member) => classifyType(member, scope, depth + 1));
       return mergeKinds(kinds);
@@ -15159,7 +15171,7 @@ function membersToProps(members, scope, optionalAll = false) {
       const kind = name === "children" ? { type: "slot" } : classifyType(member.typeAnnotation?.typeAnnotation, scope);
       out.push({ name, ...kind, optional: optionalAll || !!member.optional });
     } else if (member.type === "TSMethodSignature") {
-      out.push({ name, type: "other", optional: optionalAll || !!member.optional });
+      out.push({ name, type: "other", shape: "function", optional: optionalAll || !!member.optional });
     }
   }
   return out;
@@ -15546,6 +15558,21 @@ function patternDefaults2(ts, fn) {
   return out;
 }
 var SLOT_TEXT = /\b(ReactNode|ReactElement|ReactChild|ReactPortal|JSX\.Element)\b/;
+function shapeOf(ts, checker, parts) {
+  if (parts.length && parts.every((part) => part.getCallSignatures().length > 0))
+    return "function";
+  const isArray = (part) => {
+    const check = checker;
+    if (check.isArrayType?.(part) || check.isTupleType?.(part))
+      return true;
+    return /^(Array|ReadonlyArray)$/.test(part.getSymbol()?.getName() ?? "");
+  };
+  if (parts.length && parts.every(isArray))
+    return "array";
+  if (parts.length && parts.every((part) => part.flags & ts.TypeFlags.Object))
+    return "object";
+  return;
+}
 function classify(ts, checker, name, type, declared) {
   if (name === "children" || SLOT_TEXT.test(declared) || SLOT_TEXT.test(checker.typeToString(type)))
     return { type: "slot" };
@@ -15560,7 +15587,8 @@ function classify(ts, checker, name, type, declared) {
     return { type: "number" };
   if (parts.every((part) => part.flags & ts.TypeFlags.StringLike))
     return { type: "text" };
-  return { type: "other" };
+  const shape = shapeOf(ts, checker, parts);
+  return shape ? { type: "other", shape } : { type: "other" };
 }
 function propsOf(ts, checker, propsType, at, fn, isOwn) {
   const defaults = patternDefaults2(ts, fn);
@@ -15888,11 +15916,46 @@ function indexFiles(root, files, options = {}) {
   }
   return out;
 }
+function withoutDuplicates(entries) {
+  const kept = new Map;
+  for (const entry2 of entries) {
+    const key = `${entry2.file}#${entry2.name}`;
+    const seen = kept.get(key);
+    if (!seen || seen.exportName === "default" && entry2.exportName !== "default")
+      kept.set(key, entry2);
+  }
+  return entries.filter((entry2) => kept.get(`${entry2.file}#${entry2.name}`) === entry2);
+}
+function words(name) {
+  return name.match(/[A-Z][a-z0-9]*|[a-z0-9]+/g) ?? [name];
+}
+function markParts(entries) {
+  const byFile = new Map;
+  for (const entry2 of entries)
+    byFile.set(entry2.file, [...byFile.get(entry2.file) ?? [], entry2]);
+  for (const [file, inFile] of byFile) {
+    const names = [...new Set(inFile.map((entry2) => entry2.name))];
+    if (names.length < 2)
+      continue;
+    const stem = path3.basename(file).replace(/\.[^.]+$/, "");
+    const base = (stem === "index" ? path3.basename(path3.dirname(file)) : stem).split(/[^A-Za-z0-9]+/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join("");
+    const root = names.find((name) => name === base) ?? names[0];
+    const head = words(root)[0];
+    for (const entry2 of inFile) {
+      if (entry2.name === root)
+        continue;
+      const first = words(entry2.name)[0];
+      if (first.startsWith(head) || head.startsWith(first))
+        entry2.part = true;
+    }
+  }
+  return entries;
+}
 function indexComponents(projectRoot, options = {}) {
   const root = path3.resolve(projectRoot);
   const files = componentFiles(root, options.folders);
   const byFile = indexFiles(root, files, options);
-  const own = files.flatMap((file) => byFile.get(file) ?? []);
+  const own = markParts(withoutDuplicates(files.flatMap((file) => byFile.get(file) ?? [])));
   const ts = options.packages?.length && options.typescript !== false ? tsIndexerFor(root) : null;
   const fromPackages = ts ? options.packages.flatMap((name) => {
     try {
@@ -17942,22 +18005,30 @@ ${indent}`);
 function init(rootArg, options = {}) {
   const root = path10.resolve(rootArg);
   const steps = [];
-  if (!fs.existsSync(path10.join(root, "package.json")))
-    return { ok: false, steps: [`No package.json in ${root}`] };
+  const step = (line) => {
+    steps.push(line);
+    options.onStep?.(line);
+  };
+  if (!fs.existsSync(path10.join(root, "package.json"))) {
+    step(`No package.json in ${root}`);
+    return { ok: false, steps };
+  }
   const manager = packageManager(root);
   if (listsPackage(root)) {
-    steps.push(`${PACKAGE} is already in package.json`);
+    step(`${PACKAGE} is already in package.json`);
   } else if (options.install !== false) {
     const args = manager === "npm" ? ["install", "--save-dev", PACKAGE] : ["add", "-D", PACKAGE];
-    steps.push(`Running ${manager} ${args.join(" ")}`);
+    step(`Running ${manager} ${args.join(" ")}`);
     const run = spawnSync(manager, args, { cwd: root, stdio: ["ignore", "inherit", "inherit"] });
-    if (run.status !== 0)
-      return { ok: false, steps: [...steps, `${manager} could not install ${PACKAGE}`] };
+    if (run.status !== 0) {
+      step(`${manager} could not install ${PACKAGE}`);
+      return { ok: false, steps };
+    }
   }
   const next = firstExisting(root, NEXT_CONFIGS);
   const vite = next ? null : firstExisting(root, VITE_CONFIGS);
   if (!next && !vite) {
-    steps.push("No next.config or vite.config found. Add the plugin by hand: see the README");
+    step("No next.config or vite.config found. Add the plugin by hand: see the README");
     return { ok: false, steps };
   }
   const name = next ?? vite;
@@ -17965,19 +18036,48 @@ function init(rootArg, options = {}) {
   const source = fs.readFileSync(file, "utf8");
   const wired = next ? wireNext(source) : wireVite(source, /\.cjs$/.test(name) || name.endsWith(".js") && /module\.exports\s*=/.test(source));
   if (wired === null) {
-    steps.push(`Could not read the config in ${name}. Add the plugin by hand: see the README`);
+    step(`Could not read the config in ${name}. Add the plugin by hand: see the README`);
     return { ok: false, steps };
   }
   if (wired === source) {
-    steps.push(`${name} already uses the plugin`);
+    step(`${name} already uses the plugin`);
   } else {
     fs.writeFileSync(file, wired);
-    steps.push(`Added the plugin to ${name}`);
+    step(`Added the plugin to ${name}`);
   }
-  steps.push("Restart the dev server to see the components in Natural Design");
+  step("Restart the dev server to see the components in Natural Design");
   return { ok: true, steps };
 }
 
+// src/logo.ts
+var LOGO = `
+       ⣤⣶⣦⡄                                ⣀⣀                             ⣴⣶⡆
+   ⢠⣴⣶⣤⠛⢿⠿⢣⣴⣶⣤                             ⣿⣿                             ⣿⣿⡇
+   ⠘⠻⠿⠛⣤⣶⣦⡜⠻⠿⠟         ⣶⣶⣠⣶⣿⣿⣷⣆  ⣠⣶⣿⠿⢿⣷⣦⡀⢰⣾⣿⣿⣶⣶ ⣶⣶    ⣶⣶  ⣶⣶⣠⣶⣿⡆⢀⣴⣾⡿⠿⣿⣶⣄  ⣿⣿⡇
+   ⢠⣴⣶⣤⠛⢿⠟⢣⣴⣶⣤         ⣿⣿⡏  ⠈⣿⣿⡆ ⠛⠛   ⣹⣿⡇  ⣿⣿   ⣿⣿    ⣿⣿  ⣿⣿⡟⠉⠁ ⠚⠛⠃  ⢈⣿⣿  ⣿⣿⡇
+⣤⣶⣦⡜⠿⡿⠟⣤⣶⣦⡜⠻⡿⠟⣤⣶⣦⡄     ⣿⣿    ⣿⣿⡇⢀⣤⣶⣾⠿⠿⢻⣿⡇  ⣿⣿   ⣿⣿    ⣿⣿  ⣿⣿    ⣠⣶⣶⠿⠿⠛⣿⣿  ⣿⣿⡇
+⠛⢿⠟⢣⣴⣶⣤⠛⢿⠿⢣⣴⣶⣤⠛⢿⠿⠃     ⣿⣿    ⣿⣿⡇⢸⣿⣏   ⣼⣿⡇  ⣿⣿⡀  ⣿⣿⣄  ⣰⣿⣿  ⣿⣿   ⠰⣿⣿⡁  ⣠⣿⣿  ⣿⣿⡇
+⣤⣶⣦⡜⠿⡿⠟ ⣰⡄⠘⠻⡿⠟⣤⣶⣦⡄     ⠿⠿    ⠿⠿⠇⠈⠻⢿⣿⡾⠟⠹⠿⠧  ⠻⠿⠿⠿ ⠙⠿⣿⣿⠿⠋⠿⠿  ⠿⠿    ⠙⠿⣿⣶⠿⠋⠿⠿⠄ ⠿⠿⠇
+⠻⢿⠿⢣⣴⣶⣤⠘⠿⠿⢠⣴⣶⣤⠛⢿⠿⠃           ⣿⣿⡆                      ⣿⣿⡆
+   ⠘⠿⡿⠟⣀ ⢀⡜⠿⡿⠟           ⣀⣀⡀ ⣿⣿⡇    ⣀⣀⣀       ⣀⣀⣀⡀    ⣉⣉    ⢀⣀⣀  ⣀⡀ ⢀⣀⡀ ⣀⣀⣀
+       ⣿⣿⣿⡇           ⢀⣴⣿⡿⠿⠿⣷⣿⣿⡇ ⢀⣴⣿⠿⠛⠿⣿⣦⡀  ⣴⣿⠟⠛⠻⣿⣷⡀  ⣿⣿  ⢠⣾⣿⠿⠿⢿⣾⣿⣿ ⢸⣿⣷⡿⠿⠿⣿⣷⡄
+       ⣿⣿⣿⡇           ⣼⣿⡏   ⠈⣿⣿⡇ ⣿⣿⣃⣀⣀⣀⣸⣿⣷  ⣿⣿⣦⣤⣀⣈⠉⠁  ⣿⣿  ⣿⣿⠃   ⢹⣿⣿ ⢸⣿⡏   ⢹⣿⡇
+       ⣿⣿⣿⡇           ⣿⣿⡇    ⣿⣿⡇ ⣿⣿⡛⠛⠛⠛⠛⠛⠛  ⠈⠙⠛⠻⠿⣿⣿⣆  ⣿⣿  ⣿⣿⡀   ⣸⣿⣿ ⢸⣿⡇   ⢸⣿⡇
+       ⣿⣿⣿⡇           ⠸⣿⣿⣄⣀⣠⣼⣿⣿⡇ ⠹⣿⣷⣄⣀⣀⣴⣶⡖ ⠸⣿⣷⣄⣀⣀⣸⣿⡿  ⣿⣿  ⠙⢿⣿⣶⣤⣶⢿⣿⣿ ⢸⣿⡇   ⢸⣿⡇
+       ⠿⣿⡿⠇            ⠈⠛⠿⠿⠟⠁⠛⠛⠃  ⠈⠛⠻⠿⠿⠛⠉   ⠈⠛⠻⠿⠿⠟⠋   ⠛⠛  ⣀⣀⡉⠉⠉⠁⢸⣿⡟ ⠘⠛⠃   ⠘⠛⠃
+                                                          ⠙⢿⣷⣶⣶⣶⣿⠟⠁
+                                                             ⠉⠉⠁
+`.slice(1, -1);
+var LOGO_WIDTH = 77;
+function printLogo(stream = process.stdout) {
+  if (!stream.isTTY || (stream.columns ?? 0) < LOGO_WIDTH + 2 || process.env.CI)
+    return;
+  stream.write(`
+${LOGO}
+
+`);
+}
+
 // src/cli.ts
 function parseArgs(argv) {
   const positional = [];
@@ -18010,10 +18110,10 @@ async function main(argv) {
   const [command, ...rest] = argv;
   const { positional, flags } = parseArgs(rest);
   if (command === "init") {
-    const result = init(positional[0] ?? ".", { install: !flags.has("no-install") });
-    for (const step of result.steps)
-      process.stdout.write(`${step}
-`);
+    const result = init(positional[0] ?? ".", { install: !flags.has("no-install"), onStep: (line) => process.stdout.write(`${line}
+`) });
+    if (result.ok)
+      printLogo();
     return result.ok ? 0 : 1;
   }
   console.log = console.info = (...args) => console.error(...args);

package/dist/index.mjs

@@ -16349,8 +16349,20 @@ function classifyType(type, scope, depth = 0) {
         return classifyType(local.typeAnnotation, scope, depth + 1);
       if (lastSegment(name) === "PropType")
         return classifyType(typeArguments(type)[0], scope, depth + 1);
-      return { type: "other" };
-    }
+      if (/^(ReadonlyArray|Array|Set)$/.test(lastSegment(name)))
+        return { type: "other", shape: "array" };
+      if (/^(Function|Dispatch|SetStateAction|MouseEventHandler|ChangeEventHandler|EventHandler)$/.test(lastSegment(name)) || /Handler$/.test(lastSegment(name)))
+        return { type: "other", shape: "function" };
+      return { type: "other", shape: "object" };
+    }
+    case "TSFunctionType":
+      return { type: "other", shape: "function" };
+    case "TSArrayType":
+    case "TSTupleType":
+      return { type: "other", shape: "array" };
+    case "TSTypeLiteral":
+    case "TSMappedType":
+      return { type: "other", shape: "object" };
     case "TSUnionType": {
       const kinds = type.types.filter((member) => member.type !== "TSUndefinedKeyword" && member.type !== "TSNullKeyword" && member.type !== "TSVoidKeyword").map((member) => classifyType(member, scope, depth + 1));
       return mergeKinds(kinds);
@@ -16394,7 +16406,7 @@ function membersToProps(members, scope, optionalAll = false) {
       const kind = name === "children" ? { type: "slot" } : classifyType(member.typeAnnotation?.typeAnnotation, scope);
       out.push({ name, ...kind, optional: optionalAll || !!member.optional });
     } else if (member.type === "TSMethodSignature") {
-      out.push({ name, type: "other", optional: optionalAll || !!member.optional });
+      out.push({ name, type: "other", shape: "function", optional: optionalAll || !!member.optional });
     }
   }
   return out;
@@ -16781,6 +16793,21 @@ function patternDefaults2(ts, fn) {
   return out;
 }
 var SLOT_TEXT = /\b(ReactNode|ReactElement|ReactChild|ReactPortal|JSX\.Element)\b/;
+function shapeOf(ts, checker, parts) {
+  if (parts.length && parts.every((part) => part.getCallSignatures().length > 0))
+    return "function";
+  const isArray = (part) => {
+    const check = checker;
+    if (check.isArrayType?.(part) || check.isTupleType?.(part))
+      return true;
+    return /^(Array|ReadonlyArray)$/.test(part.getSymbol()?.getName() ?? "");
+  };
+  if (parts.length && parts.every(isArray))
+    return "array";
+  if (parts.length && parts.every((part) => part.flags & ts.TypeFlags.Object))
+    return "object";
+  return;
+}
 function classify(ts, checker, name, type, declared) {
   if (name === "children" || SLOT_TEXT.test(declared) || SLOT_TEXT.test(checker.typeToString(type)))
     return { type: "slot" };
@@ -16795,7 +16822,8 @@ function classify(ts, checker, name, type, declared) {
     return { type: "number" };
   if (parts.every((part) => part.flags & ts.TypeFlags.StringLike))
     return { type: "text" };
-  return { type: "other" };
+  const shape = shapeOf(ts, checker, parts);
+  return shape ? { type: "other", shape } : { type: "other" };
 }
 function propsOf(ts, checker, propsType, at, fn, isOwn) {
   const defaults = patternDefaults2(ts, fn);
@@ -17123,11 +17151,46 @@ function indexFiles(root, files, options = {}) {
   }
   return out;
 }
+function withoutDuplicates(entries) {
+  const kept = new Map;
+  for (const entry2 of entries) {
+    const key = `${entry2.file}#${entry2.name}`;
+    const seen = kept.get(key);
+    if (!seen || seen.exportName === "default" && entry2.exportName !== "default")
+      kept.set(key, entry2);
+  }
+  return entries.filter((entry2) => kept.get(`${entry2.file}#${entry2.name}`) === entry2);
+}
+function words(name) {
+  return name.match(/[A-Z][a-z0-9]*|[a-z0-9]+/g) ?? [name];
+}
+function markParts(entries) {
+  const byFile = new Map;
+  for (const entry2 of entries)
+    byFile.set(entry2.file, [...byFile.get(entry2.file) ?? [], entry2]);
+  for (const [file, inFile] of byFile) {
+    const names = [...new Set(inFile.map((entry2) => entry2.name))];
+    if (names.length < 2)
+      continue;
+    const stem = path3.basename(file).replace(/\.[^.]+$/, "");
+    const base = (stem === "index" ? path3.basename(path3.dirname(file)) : stem).split(/[^A-Za-z0-9]+/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join("");
+    const root = names.find((name) => name === base) ?? names[0];
+    const head = words(root)[0];
+    for (const entry2 of inFile) {
+      if (entry2.name === root)
+        continue;
+      const first = words(entry2.name)[0];
+      if (first.startsWith(head) || head.startsWith(first))
+        entry2.part = true;
+    }
+  }
+  return entries;
+}
 function indexComponents(projectRoot, options = {}) {
   const root = path3.resolve(projectRoot);
   const files = componentFiles(root, options.folders);
   const byFile = indexFiles(root, files, options);
-  const own = files.flatMap((file) => byFile.get(file) ?? []);
+  const own = markParts(withoutDuplicates(files.flatMap((file) => byFile.get(file) ?? [])));
   const ts = options.packages?.length && options.typescript !== false ? tsIndexerFor(root) : null;
   const fromPackages = ts ? options.packages.flatMap((name) => {
     try {

package/dist/loader.cjs

@@ -15145,8 +15145,20 @@ function classifyType(type, scope, depth = 0) {
         return classifyType(local.typeAnnotation, scope, depth + 1);
       if (lastSegment(name) === "PropType")
         return classifyType(typeArguments(type)[0], scope, depth + 1);
-      return { type: "other" };
-    }
+      if (/^(ReadonlyArray|Array|Set)$/.test(lastSegment(name)))
+        return { type: "other", shape: "array" };
+      if (/^(Function|Dispatch|SetStateAction|MouseEventHandler|ChangeEventHandler|EventHandler)$/.test(lastSegment(name)) || /Handler$/.test(lastSegment(name)))
+        return { type: "other", shape: "function" };
+      return { type: "other", shape: "object" };
+    }
+    case "TSFunctionType":
+      return { type: "other", shape: "function" };
+    case "TSArrayType":
+    case "TSTupleType":
+      return { type: "other", shape: "array" };
+    case "TSTypeLiteral":
+    case "TSMappedType":
+      return { type: "other", shape: "object" };
     case "TSUnionType": {
       const kinds = type.types.filter((member) => member.type !== "TSUndefinedKeyword" && member.type !== "TSNullKeyword" && member.type !== "TSVoidKeyword").map((member) => classifyType(member, scope, depth + 1));
       return mergeKinds(kinds);
@@ -15190,7 +15202,7 @@ function membersToProps(members, scope, optionalAll = false) {
       const kind = name === "children" ? { type: "slot" } : classifyType(member.typeAnnotation?.typeAnnotation, scope);
       out.push({ name, ...kind, optional: optionalAll || !!member.optional });
     } else if (member.type === "TSMethodSignature") {
-      out.push({ name, type: "other", optional: optionalAll || !!member.optional });
+      out.push({ name, type: "other", shape: "function", optional: optionalAll || !!member.optional });
     }
   }
   return out;
@@ -15521,6 +15533,21 @@ function patternDefaults2(ts, fn) {
   return out;
 }
 var SLOT_TEXT = /\b(ReactNode|ReactElement|ReactChild|ReactPortal|JSX\.Element)\b/;
+function shapeOf(ts, checker, parts) {
+  if (parts.length && parts.every((part) => part.getCallSignatures().length > 0))
+    return "function";
+  const isArray = (part) => {
+    const check = checker;
+    if (check.isArrayType?.(part) || check.isTupleType?.(part))
+      return true;
+    return /^(Array|ReadonlyArray)$/.test(part.getSymbol()?.getName() ?? "");
+  };
+  if (parts.length && parts.every(isArray))
+    return "array";
+  if (parts.length && parts.every((part) => part.flags & ts.TypeFlags.Object))
+    return "object";
+  return;
+}
 function classify(ts, checker, name, type, declared) {
   if (name === "children" || SLOT_TEXT.test(declared) || SLOT_TEXT.test(checker.typeToString(type)))
     return { type: "slot" };
@@ -15535,7 +15562,8 @@ function classify(ts, checker, name, type, declared) {
     return { type: "number" };
   if (parts.every((part) => part.flags & ts.TypeFlags.StringLike))
     return { type: "text" };
-  return { type: "other" };
+  const shape = shapeOf(ts, checker, parts);
+  return shape ? { type: "other", shape } : { type: "other" };
 }
 function propsOf(ts, checker, propsType, at, fn, isOwn) {
   const defaults = patternDefaults2(ts, fn);

package/dist/types/component-index/babel-props.d.ts

@@ -1,5 +1,5 @@
 import { type Node } from '../ast';
-import type { PropDefault, PropEntry, PropKind } from './types';
+import type { PropDefault, PropEntry, PropKind, PropShape } from './types';
 export type TypeScope = Map<string, Node>;
 /**
  * Top-level interfaces and type aliases of a script, exported or not; and (keyed `value:<name>`)
@@ -11,6 +11,7 @@ export declare function typeArguments(node: Node | null | undefined): Node[];
 interface Kind {
     type: PropKind;
     options?: string[];
+    shape?: PropShape;
 }
 /** Classifies one prop's type node. */
 export declare function classifyType(type: Node | null | undefined, scope: TypeScope, depth?: number): Kind;

package/dist/types/component-index/scan.d.ts

@@ -15,5 +15,11 @@ export declare function inComponentFolder(root: string, file: string, folders?:
 export declare function componentFiles(root: string, folders?: string[]): string[];
 /** Indexes the given files (absolute). React files share one TypeScript program. */
 export declare function indexFiles(root: string, files: string[], options?: IndexOptions): Map<string, ComponentEntry[]>;
+/**
+ * Marks the pieces of compound components. In a file exporting several (shadcn's
+ * `alert-dialog.tsx`: AlertDialog, AlertDialogTitle, …), the root is the export named after the
+ * file, else the first; the others that share its first word are its parts (TabItem of Tabs too).
+ */
+export declare function markParts(entries: ComponentEntry[]): ComponentEntry[];
 /** The project's components: one entry per exported component in the component folders, then the listed packages'. */
 export declare function indexComponents(projectRoot: string, options?: IndexOptions): ComponentEntry[];

package/dist/types/component-index/types.d.ts

@@ -10,7 +10,10 @@ export interface PropEntry {
     optional: boolean;
     /** A static default from the source (destructuring default, withDefaults, `export let x = …`). */
     default?: PropDefault;
+    /** For an `other` prop, the kind of value it takes, so a render can pass a harmless stand-in (a no-op, `[]`, `{}`). */
+    shape?: PropShape;
 }
+export type PropShape = 'function' | 'array' | 'object';
 export interface ComponentEntry {
     name: string;
     /** Path relative to the project root, `/`-separated. */
@@ -21,4 +24,6 @@ export interface ComponentEntry {
     props: PropEntry[];
     /** Set for a component an installed npm package exports: `file` is then the package name (read-only). */
     package?: string;
+    /** A piece of another component in its file (`AlertDialogTitle` of `AlertDialog`): it works only inside it, so it is not listed on its own. */
+    part?: boolean;
 }

package/dist/types/providers.d.ts

@@ -0,0 +1,2 @@
+/** The decorator module (`export function decorator({ children })`), or null when the entry has no provider to take. */
+export declare function providersModule(root: string): string | null;

package/dist/types/registry.d.ts

@@ -1,6 +1,8 @@
 import type { ComponentEntry, Framework } from './component-index/types';
 export declare const REGISTRY_ID = "virtual:natural-design/registry";
 export declare const HOST_ID = "virtual:natural-design/host";
+/** The app's providers read from its entry (providers.ts), when it has no natural.config. */
+export declare const PROVIDERS_ID = "virtual:natural-design/providers";
 export declare const HOST_PATH = "/__natural/host";
 export declare const INDEX_PATH = "/__natural/components.json";
 /** A URL Vite serves for a project file: root-relative inside the root, `/@fs/` outside it. */
@@ -10,6 +12,6 @@ export declare function naturalConfigFile(root: string): string | null;
 /** The registry module's code. `frameworks` lists those whose runtime the project can resolve. */
 export declare function registryModule(root: string, components: ComponentEntry[], frameworks: Set<Framework>, packages?: string[]): string;
 /** The host page's module: global styles, the registry, the decorator, and `?component=Name&props={…}` for a direct render. */
-export declare function hostModule(root: string, stylesheets: string[], configFile: string | null): string;
+export declare function hostModule(root: string, stylesheets: string[], configFile: string | null, appProviders?: boolean): string;
 /** The bare host document, before Vite's transformIndexHtml adds its client and the React refresh preamble. */
 export declare function hostHtml(root: string, base: string): string;

package/dist/types/styles.d.ts

@@ -1,3 +1,7 @@
+declare function resolveSpecifier(root: string, from: string, specifier: string): string | null;
+/** The app's entry modules: index.html's module scripts, then the usual entry files that exist. */
+export declare function appEntries(root: string): string[];
+export { resolveSpecifier };
 /** Absolute paths of the global stylesheets, in import order. `explicit` (root-relative) wins when given. */
 export declare function globalStylesheets(root: string, explicit?: string[]): string[];
 /** `<html …>` and `<body …>` attributes of the project's index.html (theme classes, fonts), for the host page. */

package/dist/vite.mjs

@@ -15110,8 +15110,20 @@ function classifyType(type, scope, depth = 0) {
         return classifyType(local.typeAnnotation, scope, depth + 1);
       if (lastSegment(name) === "PropType")
         return classifyType(typeArguments(type)[0], scope, depth + 1);
-      return { type: "other" };
-    }
+      if (/^(ReadonlyArray|Array|Set)$/.test(lastSegment(name)))
+        return { type: "other", shape: "array" };
+      if (/^(Function|Dispatch|SetStateAction|MouseEventHandler|ChangeEventHandler|EventHandler)$/.test(lastSegment(name)) || /Handler$/.test(lastSegment(name)))
+        return { type: "other", shape: "function" };
+      return { type: "other", shape: "object" };
+    }
+    case "TSFunctionType":
+      return { type: "other", shape: "function" };
+    case "TSArrayType":
+    case "TSTupleType":
+      return { type: "other", shape: "array" };
+    case "TSTypeLiteral":
+    case "TSMappedType":
+      return { type: "other", shape: "object" };
     case "TSUnionType": {
       const kinds = type.types.filter((member) => member.type !== "TSUndefinedKeyword" && member.type !== "TSNullKeyword" && member.type !== "TSVoidKeyword").map((member) => classifyType(member, scope, depth + 1));
       return mergeKinds(kinds);
@@ -15155,7 +15167,7 @@ function membersToProps(members, scope, optionalAll = false) {
       const kind = name === "children" ? { type: "slot" } : classifyType(member.typeAnnotation?.typeAnnotation, scope);
       out.push({ name, ...kind, optional: optionalAll || !!member.optional });
     } else if (member.type === "TSMethodSignature") {
-      out.push({ name, type: "other", optional: optionalAll || !!member.optional });
+      out.push({ name, type: "other", shape: "function", optional: optionalAll || !!member.optional });
     }
   }
   return out;
@@ -15534,6 +15546,21 @@ function patternDefaults2(ts, fn) {
   return out;
 }
 var SLOT_TEXT = /\b(ReactNode|ReactElement|ReactChild|ReactPortal|JSX\.Element)\b/;
+function shapeOf(ts, checker, parts) {
+  if (parts.length && parts.every((part) => part.getCallSignatures().length > 0))
+    return "function";
+  const isArray = (part) => {
+    const check = checker;
+    if (check.isArrayType?.(part) || check.isTupleType?.(part))
+      return true;
+    return /^(Array|ReadonlyArray)$/.test(part.getSymbol()?.getName() ?? "");
+  };
+  if (parts.length && parts.every(isArray))
+    return "array";
+  if (parts.length && parts.every((part) => part.flags & ts.TypeFlags.Object))
+    return "object";
+  return;
+}
 function classify(ts, checker, name, type, declared) {
   if (name === "children" || SLOT_TEXT.test(declared) || SLOT_TEXT.test(checker.typeToString(type)))
     return { type: "slot" };
@@ -15548,7 +15575,8 @@ function classify(ts, checker, name, type, declared) {
     return { type: "number" };
   if (parts.every((part) => part.flags & ts.TypeFlags.StringLike))
     return { type: "text" };
-  return { type: "other" };
+  const shape = shapeOf(ts, checker, parts);
+  return shape ? { type: "other", shape } : { type: "other" };
 }
 function propsOf(ts, checker, propsType, at, fn, isOwn) {
   const defaults = patternDefaults2(ts, fn);
@@ -15880,11 +15908,46 @@ function indexFiles(root, files, options = {}) {
   }
   return out;
 }
+function withoutDuplicates(entries) {
+  const kept = new Map;
+  for (const entry2 of entries) {
+    const key = `${entry2.file}#${entry2.name}`;
+    const seen = kept.get(key);
+    if (!seen || seen.exportName === "default" && entry2.exportName !== "default")
+      kept.set(key, entry2);
+  }
+  return entries.filter((entry2) => kept.get(`${entry2.file}#${entry2.name}`) === entry2);
+}
+function words(name) {
+  return name.match(/[A-Z][a-z0-9]*|[a-z0-9]+/g) ?? [name];
+}
+function markParts(entries) {
+  const byFile = new Map;
+  for (const entry2 of entries)
+    byFile.set(entry2.file, [...byFile.get(entry2.file) ?? [], entry2]);
+  for (const [file, inFile] of byFile) {
+    const names = [...new Set(inFile.map((entry2) => entry2.name))];
+    if (names.length < 2)
+      continue;
+    const stem = path3.basename(file).replace(/\.[^.]+$/, "");
+    const base = (stem === "index" ? path3.basename(path3.dirname(file)) : stem).split(/[^A-Za-z0-9]+/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join("");
+    const root = names.find((name) => name === base) ?? names[0];
+    const head = words(root)[0];
+    for (const entry2 of inFile) {
+      if (entry2.name === root)
+        continue;
+      const first = words(entry2.name)[0];
+      if (first.startsWith(head) || head.startsWith(first))
+        entry2.part = true;
+    }
+  }
+  return entries;
+}
 function indexComponents(projectRoot, options = {}) {
   const root = path3.resolve(projectRoot);
   const files = componentFiles(root, options.folders);
   const byFile = indexFiles(root, files, options);
-  const own = files.flatMap((file) => byFile.get(file) ?? []);
+  const own = markParts(withoutDuplicates(files.flatMap((file) => byFile.get(file) ?? [])));
   const ts = options.packages?.length && options.typescript !== false ? tsIndexerFor(root) : null;
   const fromPackages = ts ? options.packages.flatMap((name) => {
     try {
@@ -15938,6 +16001,18 @@ function stylesImportedBy(root, entry2) {
   }
   return out;
 }
+function appEntries(root) {
+  const entries = [];
+  const html = path4.join(root, "index.html");
+  if (existsSync3(html)) {
+    for (const script of readFileSync3(html, "utf8").matchAll(ENTRY_SCRIPT))
+      if (script[1].startsWith("/"))
+        entries.push(path4.join(root, script[1]));
+  }
+  for (const file of ENTRIES)
+    entries.push(path4.join(root, file));
+  return [...new Set(entries)].filter((entry2) => existsSync3(entry2));
+}
 function globalStylesheets(root, explicit) {
   if (explicit?.length)
     return explicit.map((file) => path4.resolve(root, file.replace(/^\//, "")));
@@ -15980,6 +16055,7 @@ function documentAttributes(root) {
 // src/registry.ts
 var REGISTRY_ID = "virtual:natural-design/registry";
 var HOST_ID = "virtual:natural-design/host";
+var PROVIDERS_ID = "virtual:natural-design/providers";
 var HOST_PATH = "/__natural/host";
 var INDEX_PATH = "/__natural/components.json";
 function serveUrl(root, file) {
@@ -15997,7 +16073,8 @@ var RENDERERS = {
   react: `async (component, props, element) => {
     const pick = (m) => (m && m.default && typeof m.default === "object" && !m.createElement && !m.createRoot && !m.flushSync ? m.default : m);
     const [React, Client, Dom] = (await Promise.all([import("react"), import("react-dom/client"), import("react-dom")])).map(pick);
-    const slot = (value) => value && typeof value === "object" && typeof value.__html === "string" ? React.createElement("span", { style: { display: "contents" }, dangerouslySetInnerHTML: { __html: value.__html } }) : value;
+    // Slot markup becomes children; a stand-in for a required callback (props travel as JSON) becomes a no-op.
+    const slot = (value) => value && typeof value === "object" && value.__nd === "function" ? () => {} : value && typeof value === "object" && typeof value.__html === "string" ? React.createElement("span", { style: { display: "contents" }, dangerouslySetInnerHTML: { __html: value.__html } }) : value;
     const resolved = {};
     for (const key of Object.keys(props)) resolved[key] = slot(props[key]);
     let node = React.createElement(component, resolved);
@@ -16082,7 +16159,7 @@ nd.render = async (name, props, element) => {
   if (!renderer) throw new Error(entry.framework + " components cannot be mounted in the browser");
   nd.unmount(element);
   mounted.set(element, await renderer(component, props || {}, element));
-  await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+  await Promise.race([new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))), new Promise((resolve) => setTimeout(resolve, 100))]);
   return element;
 };
 nd.registry = true;
@@ -16090,8 +16167,18 @@ window.dispatchEvent(new CustomEvent("nd:registry"));
 export default nd;
 `;
 }
-function hostModule(root, stylesheets, configFile) {
-  const lines = ["// Generated by @naturaldesign/dev: the render host."];
+function hostModule(root, stylesheets, configFile, appProviders = false) {
+  const lines = [
+    "// Generated by @naturaldesign/dev: the render host.",
+    "const ndFailed = (error) => {",
+    '  const message = String((error && error.message) || error || "Render failed");',
+    "  if (document.documentElement.dataset.ndError) return;",
+    "  document.documentElement.dataset.ndError = message;",
+    '  if (window.parent !== window) window.parent.postMessage({ type: "nd:host-error", component: new URLSearchParams(location.search).get("component"), message }, "*");',
+    "};",
+    'window.addEventListener("error", (event) => ndFailed(event.error || event.message));',
+    'window.addEventListener("unhandledrejection", (event) => ndFailed(event.reason));'
+  ];
   for (const sheet of stylesheets)
     lines.push(`import ${JSON.stringify(serveUrl(root, sheet))};`);
   lines.push(`import nd from ${JSON.stringify(REGISTRY_ID)};`);
@@ -16099,8 +16186,11 @@ function hostModule(root, stylesheets, configFile) {
     lines.push(`import * as config from ${JSON.stringify(serveUrl(root, configFile))};`);
     lines.push("const decorator = config.decorator || (config.default && config.default.decorator);");
     lines.push("if (decorator) nd.decorator = decorator;");
+  } else if (appProviders) {
+    lines.push(`import { decorator } from ${JSON.stringify(PROVIDERS_ID)};`);
+    lines.push("nd.decorator = decorator;");
   }
-  lines.push("nd.host = true;", "const params = new URLSearchParams(location.search);", 'const requested = params.get("component");', 'if (requested) nd.render(requested, JSON.parse(params.get("props") || "{}"), document.getElementById("nd-host-root")).catch((error) => { document.documentElement.dataset.ndError = String(error && error.message || error); console.error(error); });', 'window.dispatchEvent(new CustomEvent("nd:host"));');
+  lines.push("nd.host = true;", "const params = new URLSearchParams(location.search);", 'const requested = params.get("component");', 'const ndDone = () => setTimeout(() => { if (window.parent !== window && !document.documentElement.dataset.ndError) { const root = document.getElementById("nd-host-root"); window.parent.postMessage({ type: "nd:host-done", component: requested, empty: !root || (!root.children.length && !root.textContent.trim()) || root.getBoundingClientRect().height === 0 }, "*"); } }, 400);', 'if (requested) nd.render(requested, JSON.parse(params.get("props") || "{}"), document.getElementById("nd-host-root")).then(ndDone, (error) => { ndFailed(error); console.error(error); });', 'window.dispatchEvent(new CustomEvent("nd:host"));');
   return lines.join(`
 `) + `
 `;
@@ -16123,6 +16213,173 @@ function hostHtml(root, base) {
 `;
 }
 
+// src/providers.ts
+import { readFileSync as readFileSync4, statSync as statSync3 } from "node:fs";
+import path6 from "node:path";
+var SKIPPED = new Set(["StrictMode", "Fragment", "Profiler", "Suspense"]);
+var EXTENSIONS = [".tsx", ".ts", ".jsx", ".js", ".mjs"];
+function elementName(name) {
+  if (name.type === "JSXIdentifier")
+    return { binding: String(name.name), member: [] };
+  if (name.type === "JSXMemberExpression") {
+    const inner = elementName(name.object);
+    return inner ? { binding: inner.binding, member: [...inner.member, String(name.property.name)] } : null;
+  }
+  return null;
+}
+function elementChildren(element) {
+  return (element.children ?? []).filter((child) => child.type === "JSXElement");
+}
+function renderedTree(program) {
+  let found = null;
+  walk(program, (node) => {
+    if (found)
+      return false;
+    if (node.type !== "CallExpression")
+      return;
+    const callee = node.callee;
+    const args = node.arguments ?? [];
+    const isRender = callee.type === "MemberExpression" && callee.property.name === "render";
+    const isHydrate = callee.type === "Identifier" && callee.name === "hydrateRoot" || callee.type === "MemberExpression" && callee.property.name === "hydrateRoot";
+    const tree = isRender ? args[0] : isHydrate ? args[1] : null;
+    if (tree?.type === "JSXElement")
+      found = tree;
+  });
+  return found;
+}
+function wrapperChain(tree) {
+  const chain = [];
+  let current = tree;
+  while (current) {
+    const children = elementChildren(current);
+    if (!children.length)
+      break;
+    chain.push(current);
+    current = children.find((child) => elementChildren(child).length > 0) ?? null;
+  }
+  return chain;
+}
+function importsOf(program) {
+  const imports = new Map;
+  for (const statement of program.body ?? []) {
+    if (statement.type !== "ImportDeclaration" || statement.importKind === "type")
+      continue;
+    const source = String(statement.source.value);
+    for (const specifier of statement.specifiers ?? []) {
+      const local = String(specifier.local.name);
+      if (specifier.type === "ImportDefaultSpecifier")
+        imports.set(local, { source, imported: "default" });
+      else if (specifier.type === "ImportNamespaceSpecifier")
+        imports.set(local, { source, imported: "*" });
+      else
+        imports.set(local, { source, imported: String(specifier.imported.name ?? specifier.imported.value) });
+    }
+  }
+  return imports;
+}
+function propValue(value, imports, used) {
+  if (!value)
+    return "true";
+  if (value.type === "StringLiteral")
+    return JSON.stringify(value.value);
+  if (value.type !== "JSXExpressionContainer")
+    return null;
+  const expression = value.expression;
+  if (expression.type === "StringLiteral" || expression.type === "NumericLiteral" || expression.type === "BooleanLiteral")
+    return JSON.stringify(expression.value);
+  if (expression.type === "NullLiteral")
+    return "null";
+  if (expression.type === "Identifier" && imports.has(String(expression.name))) {
+    used.add(String(expression.name));
+    return String(expression.name);
+  }
+  return null;
+}
+function servedSource(root, entry2, source) {
+  if (!source.startsWith("."))
+    return source;
+  const file = resolveSpecifier(root, entry2, source);
+  if (!file)
+    return source;
+  const isFile = (candidate) => {
+    try {
+      return statSync3(candidate).isFile();
+    } catch {
+      return false;
+    }
+  };
+  const candidates = [file, ...EXTENSIONS.map((extension) => file + extension), ...EXTENSIONS.map((extension) => path6.join(file, `index${extension}`))];
+  return serveUrl(root, candidates.find(isFile) ?? file);
+}
+function providersModule(root) {
+  for (const entry2 of appEntries(root)) {
+    if (!/\.(tsx|jsx|ts|js)$/.test(entry2))
+      continue;
+    let code;
+    try {
+      code = readFileSync4(entry2, "utf8");
+    } catch {
+      continue;
+    }
+    const file = parseModule(code);
+    if (!file)
+      continue;
+    const program = programOf(file);
+    const tree = renderedTree(program);
+    if (!tree)
+      continue;
+    const imports = importsOf(program);
+    const used = new Set;
+    const wrappers = [];
+    for (const element of wrapperChain(tree)) {
+      const name = elementName(element.openingElement.name);
+      if (!name)
+        continue;
+      if (SKIPPED.has(name.member.at(-1) ?? name.binding) || name.binding === "Fragment")
+        continue;
+      if (!imports.has(name.binding))
+        continue;
+      const props = [];
+      let rebuildable = true;
+      for (const attribute of element.openingElement.attributes ?? []) {
+        if (attribute.type !== "JSXAttribute") {
+          rebuildable = false;
+          break;
+        }
+        const value = propValue(attribute.value, imports, used);
+        if (value === null) {
+          rebuildable = false;
+          break;
+        }
+        props.push({ name: String(attribute.name.name), value });
+      }
+      if (!rebuildable)
+        continue;
+      used.add(name.binding);
+      wrappers.push({ binding: name.binding, member: name.member, props });
+    }
+    if (!wrappers.length)
+      return null;
+    const lines = [`// Generated by @naturaldesign/dev: the app's providers, read from ${path6.relative(root, entry2)}.`, 'import * as __ndReact from "react";'];
+    for (const binding of used) {
+      const source = JSON.stringify(servedSource(root, entry2, imports.get(binding).source));
+      const { imported } = imports.get(binding);
+      lines.push(imported === "default" ? `import ${binding} from ${source};` : imported === "*" ? `import * as ${binding} from ${source};` : `import { ${imported === binding ? binding : `${imported} as ${binding}`} } from ${source};`);
+    }
+    let body = "children";
+    for (const wrapper of [...wrappers].reverse()) {
+      const type = [wrapper.binding, ...wrapper.member].join(".");
+      const props = wrapper.props.length ? `{ ${wrapper.props.map((prop) => `${JSON.stringify(prop.name)}: ${prop.value}`).join(", ")} }` : "null";
+      body = `__ndReact.createElement(${type}, ${props}, ${body})`;
+    }
+    lines.push(`export function decorator({ children }) {`, `  return ${body};`, `}`);
+    return lines.join(`
+`) + `
+`;
+  }
+  return null;
+}
+
 // ../../node_modules/@jridgewell/sourcemap-codec/dist/sourcemap-codec.mjs
 var comma = 44;
 var semicolon = 59;
@@ -17383,17 +17640,22 @@ function naturalDesign(options = {}) {
     resolveId(id) {
       if (!registryOn)
         return null;
-      if (id === REGISTRY_ID || id === HOST_ID)
+      if (id === REGISTRY_ID || id === HOST_ID || id === PROVIDERS_ID)
         return RESOLVED(id);
       return null;
     },
     load(id) {
       if (id === RESOLVED(REGISTRY_ID)) {
-        registryEntries ??= indexComponents(root, { folders: options.indexFolders, typescript: false });
+        registryEntries ??= index ?? indexComponents(root, { folders: options.indexFolders, typescript: false });
         return registryModule(root, registryEntries, frameworks(), options.packages ?? []);
       }
-      if (id === RESOLVED(HOST_ID))
-        return hostModule(root, globalStylesheets(root, options.styles), naturalConfigFile(root));
+      if (id === RESOLVED(HOST_ID)) {
+        const config = naturalConfigFile(root);
+        return hostModule(root, globalStylesheets(root, options.styles), config, !config && providersModule(root) !== null);
+      }
+      if (id === RESOLVED(PROVIDERS_ID))
+        return providersModule(root) ?? `export function decorator({ children }) { return children }
+`;
       return null;
     },
     transformIndexHtml() {
@@ -17419,7 +17681,13 @@ function naturalDesign(options = {}) {
         const url = (req.url ?? "").split("?")[0];
         if (options.index !== false && url.endsWith(INDEX_PATH)) {
           try {
-            index ??= indexComponents(root, { folders: options.indexFolders, packages: options.packages });
+            if (!index) {
+              index = indexComponents(root, { folders: options.indexFolders, packages: options.packages });
+              registryEntries = null;
+              const module = server.moduleGraph.getModuleById(RESOLVED(REGISTRY_ID));
+              if (module)
+                server.moduleGraph.invalidateModule(module);
+            }
             return send(res, 200, "application/json", JSON.stringify({ root, components: index }));
           } catch (error) {
             return send(res, 500, "application/json", JSON.stringify({ root, components: [], error: String(error?.message ?? error) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naturaldesign/dev",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "description": "Dev-only plugin for Natural Design: stamps JSX with its source, indexes the project's components and renders them, so Natural Design can show and edit a project's real components. Run `npx @naturaldesign/dev init` in a Next or Vite project.",
   "bin": {