@svadmin/create 0.26.2 → 0.29.0

package/README.md

@@ -2,7 +2,7 @@
 
 The official scaffolding CLI for `headless-admin-svelte` (svadmin).
 
-Quickly bootstrap a completely configured, headless admin panel project built on Svelte 5, Shadcn Svelte, and TanStack Query.
+Quickly bootstrap a completely configured, headless admin panel project built on Svelte 5, the native-CSS `@svadmin/ui` components, and TanStack Query.
 
 ## Quick Start
 
@@ -21,7 +21,7 @@ Follow the interactive prompts to:
 
 The generated project is pre-configured with:
 - **Svelte 5** + **Vite**
-- **Tailwind CSS** + **Shadcn Svelte** UI components
+- **@svadmin/ui** native CSS, semantic tokens and Bits UI interactions; no host CSS compiler is required
 - **@svadmin/core**: The headless business logic and hooks (useTable, useForm, useAuth, etc.)
 - **@svadmin/ai-elements**: Composable Svelte 5 AI conversation, tool, reasoning, and source components.
 - **@svadmin/ui**: Beautiful default dashboard UI, standalone CRUD buttons, and data tables.

package/dist/index.js

@@ -19,7 +19,7 @@ var __toESM = (mod, isNodeMode, target) => {
       return cached;
   }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  const to = isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   if (mod && typeof mod === "object" || typeof mod === "function") {
     for (let key of __getOwnPropNames(mod))
       if (!__hasOwnProp.call(to, key))
@@ -259,7 +259,7 @@ var require_clear = __commonJS(function(exports, module) {
         if (it)
           o = it;
         var i = 0;
-        var F = function F2() {};
+        var F = function F() {};
         return { s: F, n: function n() {
           if (i >= o.length)
             return { done: true };
@@ -876,7 +876,7 @@ var require_select = __commonJS(function(exports, module) {
       else
         this.out.write(clear(this.outputText, this.out.columns));
       super.render();
-      let _entriesToDisplay = entriesToDisplay(this.cursor, this.choices.length, this.optionsPerPage), startIndex = _entriesToDisplay.startIndex, endIndex = _entriesToDisplay.endIndex;
+      let _entriesToDisplay = entriesToDisplay(this.cursor, this.choices.length, this.optionsPerPage), { startIndex, endIndex } = _entriesToDisplay;
       this.outputText = [style.symbol(this.done, this.aborted), color.bold(this.msg), style.delimiter(false), this.done ? this.selection.title : this.selection.disabled ? color.yellow(this.warn) : color.gray(this.hint)].join(" ");
       if (!this.done) {
         this.outputText += `
@@ -1885,14 +1885,14 @@ Instructions:
       }
       return "";
     }
-    renderOption(cursor2, v, i, arrowIndicator) {
+    renderOption(cursor, v, i, arrowIndicator) {
       const prefix = (v.selected ? color.green(figures.radioOn) : figures.radioOff) + " " + arrowIndicator + " ";
       let title, desc;
       if (v.disabled) {
-        title = cursor2 === i ? color.gray().underline(v.title) : color.strikethrough().gray(v.title);
+        title = cursor === i ? color.gray().underline(v.title) : color.strikethrough().gray(v.title);
       } else {
-        title = cursor2 === i ? color.cyan().underline(v.title) : v.title;
-        if (cursor2 === i && v.description) {
+        title = cursor === i ? color.cyan().underline(v.title) : v.title;
+        if (cursor === i && v.description) {
           desc = ` - ${v.description}`;
           if (prefix.length + title.length + desc.length >= this.out.columns || v.description.split(/\r?\n/).length > 1) {
             desc = `
@@ -1909,7 +1909,7 @@ Instructions:
       if (options.length === 0) {
         return color.red("No matches for this query.");
       }
-      let _entriesToDisplay = entriesToDisplay(this.cursor, options.length, this.optionsPerPage), startIndex = _entriesToDisplay.startIndex, endIndex = _entriesToDisplay.endIndex;
+      let _entriesToDisplay = entriesToDisplay(this.cursor, options.length, this.optionsPerPage), { startIndex, endIndex } = _entriesToDisplay;
       let prefix, styledOptions = [];
       for (let i = startIndex;i < endIndex; i++) {
         if (i === startIndex && startIndex > 0) {
@@ -2217,7 +2217,7 @@ var require_autocomplete = __commonJS(function(exports, module) {
       else
         this.out.write(clear(this.outputText, this.out.columns));
       super.render();
-      let _entriesToDisplay = entriesToDisplay(this.select, this.choices.length, this.limit), startIndex = _entriesToDisplay.startIndex, endIndex = _entriesToDisplay.endIndex;
+      let _entriesToDisplay = entriesToDisplay(this.select, this.choices.length, this.limit), { startIndex, endIndex } = _entriesToDisplay;
       this.outputText = [style.symbol(this.done, this.aborted, this.exited), color.bold(this.msg), style.delimiter(this.completing), this.done && this.suggestions[this.select] ? this.suggestions[this.select].title : this.rendered = this.transform.render(this.input)].join(" ");
       if (!this.done) {
         const suggestions = this.suggestions.slice(startIndex, endIndex).map((item, i) => this.renderOption(item, this.select === i + startIndex, i === 0 && startIndex > 0, i + startIndex === endIndex - 1 && endIndex < this.choices.length)).join(`
@@ -2356,12 +2356,12 @@ Instructions:
 Filtered results for: ${this.inputValue ? this.inputValue : color.gray("Enter something to filter")}
 `;
     }
-    renderOption(cursor2, v, i) {
+    renderOption(cursor, v, i) {
       let title;
       if (v.disabled)
-        title = cursor2 === i ? color.gray().underline(v.title) : color.strikethrough().gray(v.title);
+        title = cursor === i ? color.gray().underline(v.title) : color.strikethrough().gray(v.title);
       else
-        title = cursor2 === i ? color.cyan().underline(v.title) : v.title;
+        title = cursor === i ? color.cyan().underline(v.title) : v.title;
       return (v.selected ? color.green(figures.radioOn) : figures.radioOff) + "  " + title;
     }
     renderDoneOrInstructions() {
@@ -2591,7 +2591,7 @@ var require_dist = __commonJS(function(exports, module) {
         if (it)
           o = it;
         var i = 0;
-        var F = function F2() {};
+        var F = function F() {};
         return { s: F, n: function n() {
           if (i >= o.length)
             return { done: true };
@@ -2684,17 +2684,17 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       onCancel = noop
     } = {}) {
       const answers = {};
-      const override2 = prompt._override || {};
+      const override = prompt._override || {};
       questions = [].concat(questions);
       let answer, question, quit, name, type, lastPrompt;
       const getFormattedAnswer = /* @__PURE__ */ function() {
-        var _ref = _asyncToGenerator(function* (question2, answer2, skipValidation = false) {
-          if (!skipValidation && question2.validate && question2.validate(answer2) !== true) {
+        var _ref = _asyncToGenerator(function* (question, answer, skipValidation = false) {
+          if (!skipValidation && question.validate && question.validate(answer) !== true) {
             return;
           }
-          return question2.format ? yield question2.format(answer2, answers) : answer2;
+          return question.format ? yield question.format(answer, answers) : answer;
         });
-        return function getFormattedAnswer2(_x, _x2) {
+        return function getFormattedAnswer(_x, _x2) {
           return _ref.apply(this, arguments);
         };
       }();
@@ -2727,8 +2727,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           if (prompts[type] === undefined) {
             throw new Error(`prompt type (${type}) is not defined`);
           }
-          if (override2[question.name] !== undefined) {
-            answer = yield getFormattedAnswer(question, override2[question.name]);
+          if (override[question.name] !== undefined) {
+            answer = yield getFormattedAnswer(question, override[question.name]);
             if (answer !== undefined) {
               answers[name] = answer;
               continue;
@@ -4870,14 +4870,14 @@ var require_lib = __commonJS(function(exports, module) {
   var noop = () => {};
   async function prompt(questions = [], { onSubmit = noop, onCancel = noop } = {}) {
     const answers = {};
-    const override2 = prompt._override || {};
+    const override = prompt._override || {};
     questions = [].concat(questions);
     let answer, question, quit, name, type, lastPrompt;
-    const getFormattedAnswer = async (question2, answer2, skipValidation = false) => {
-      if (!skipValidation && question2.validate && question2.validate(answer2) !== true) {
+    const getFormattedAnswer = async (question, answer, skipValidation = false) => {
+      if (!skipValidation && question.validate && question.validate(answer) !== true) {
         return;
       }
-      return question2.format ? await question2.format(answer2, answers) : answer2;
+      return question.format ? await question.format(answer, answers) : answer;
     };
     for (question of questions) {
       ({ name, type } = question);
@@ -4901,8 +4901,8 @@ var require_lib = __commonJS(function(exports, module) {
       if (prompts[type] === undefined) {
         throw new Error(`prompt type (${type}) is not defined`);
       }
-      if (override2[question.name] !== undefined) {
-        answer = await getFormattedAnswer(question, override2[question.name]);
+      if (override[question.name] !== undefined) {
+        answer = await getFormattedAnswer(question, override[question.name]);
         if (answer !== undefined) {
           answers[name] = answer;
           continue;
@@ -5075,22 +5075,22 @@ function assertReferencedPacksExist(dependencyPacks, selectedPacks) {
 }
 function assertScaffoldManifest(candidate) {
   assertJsonObject(candidate, "scaffold manifest");
-  assertNonEmptyString(candidate.name, "scaffold manifest.name");
-  assertNonEmptyString(candidate.version, "scaffold manifest.version");
-  if (candidate.private !== true) {
+  assertNonEmptyString(candidate["name"], "scaffold manifest.name");
+  assertNonEmptyString(candidate["version"], "scaffold manifest.version");
+  if (candidate["private"] !== true) {
     throw new Error("scaffold manifest.private must be true");
   }
-  assertNonEmptyString(candidate.type, "scaffold manifest.type");
-  assertStringRecord(candidate.scripts, "scaffold manifest.scripts");
-  assertStringRecord(candidate.dependencies, "scaffold manifest.dependencies");
-  assertStringRecord(candidate.devDependencies, "scaffold manifest.devDependencies");
-  assertJsonObject(candidate.svadmin, "scaffold manifest.svadmin");
-  assertDependencyPacks(candidate.svadmin.dependencyPacks);
-  assertSelectionMap(candidate.svadmin.dataProviders, DATA_PROVIDER_CHOICES, "scaffold manifest.svadmin.dataProviders");
-  assertSelectionMap(candidate.svadmin.authProviders, AUTH_PROVIDER_CHOICES, "scaffold manifest.svadmin.authProviders");
-  assertReferencedPacksExist(candidate.svadmin.dependencyPacks, [
-    ...Object.values(candidate.svadmin.dataProviders).flat(),
-    ...Object.values(candidate.svadmin.authProviders).flat()
+  assertNonEmptyString(candidate["type"], "scaffold manifest.type");
+  assertStringRecord(candidate["scripts"], "scaffold manifest.scripts");
+  assertStringRecord(candidate["dependencies"], "scaffold manifest.dependencies");
+  assertStringRecord(candidate["devDependencies"], "scaffold manifest.devDependencies");
+  assertJsonObject(candidate["svadmin"], "scaffold manifest.svadmin");
+  assertDependencyPacks(candidate["svadmin"]["dependencyPacks"]);
+  assertSelectionMap(candidate["svadmin"]["dataProviders"], DATA_PROVIDER_CHOICES, "scaffold manifest.svadmin.dataProviders");
+  assertSelectionMap(candidate["svadmin"]["authProviders"], AUTH_PROVIDER_CHOICES, "scaffold manifest.svadmin.authProviders");
+  assertReferencedPacksExist(candidate["svadmin"]["dependencyPacks"], [
+    ...Object.values(candidate["svadmin"]["dataProviders"]).flat(),
+    ...Object.values(candidate["svadmin"]["authProviders"]).flat()
   ]);
 }
 function loadScaffoldManifest(manifestPath) {
@@ -5114,7 +5114,10 @@ function createProjectPackageJson(scaffold, options) {
     ...scaffold.svadmin.authProviders[options.authProvider]
   ]);
   for (const packName of selectedPacks) {
-    mergeDependencyPack(dependencies, scaffold.svadmin.dependencyPacks[packName], packName);
+    const pack = scaffold.svadmin.dependencyPacks[packName];
+    if (pack === undefined)
+      throw new Error(`Unknown dependency pack: ${packName}`);
+    mergeDependencyPack(dependencies, pack, packName);
   }
   return {
     name: options.projectName.trim(),
@@ -5431,8 +5434,10 @@ function parseGraphQLSDL(sdl) {
   const enumRegex = /enum\s+([A-Za-z0-9_]+)\s*\{([^}]+)\}/g;
   let match;
   while ((match = enumRegex.exec(cleanSDL)) !== null) {
-    const enumName = match[1];
-    const rawValues = match[2].split(/\s+/).filter(Boolean);
+    const [, enumName, enumBody] = match;
+    if (enumName === undefined || enumBody === undefined)
+      continue;
+    const rawValues = enumBody.split(/\s+/).filter(Boolean);
     types.push({
       kind: "ENUM",
       name: enumName,
@@ -5441,8 +5446,9 @@ function parseGraphQLSDL(sdl) {
   }
   const typeRegex = /type\s+([A-Za-z0-9_]+)\s*(?:implements\s+[A-Za-z0-9_&,\s]+)?\s*\{([^}]+)\}/g;
   while ((match = typeRegex.exec(cleanSDL)) !== null) {
-    const typeName = match[1];
-    const fieldsBody = match[2];
+    const [, typeName, fieldsBody] = match;
+    if (typeName === undefined || fieldsBody === undefined)
+      continue;
     const fieldLines = fieldsBody.split(`
 `).map((l) => l.trim()).filter(Boolean);
     const fields = [];
@@ -5450,8 +5456,9 @@ function parseGraphQLSDL(sdl) {
       const fieldMatch = /^([A-Za-z0-9_]+)(?:\([^)]*\))?\s*:\s*([[\]A-Za-z0-9_!]+)/.exec(line);
       if (!fieldMatch)
         continue;
-      const fName = fieldMatch[1];
-      const rawType = fieldMatch[2];
+      const [, fName, rawType] = fieldMatch;
+      if (fName === undefined || rawType === undefined)
+        continue;
       const isNonNullable = rawType.endsWith("!");
       const cleanType = isNonNullable ? rawType.slice(0, -1) : rawType;
       const isList = cleanType.startsWith("[") && cleanType.endsWith("]");
@@ -5884,6 +5891,13 @@ function generateTypeBoxSchemaCode(resource) {
       case "date":
         typeDef = "Type.String({ format: 'date-time' })";
         break;
+      case "datetime":
+      case "time":
+        typeDef = "Type.String()";
+        break;
+      case "daterange":
+        typeDef = "Type.Union([Type.Object({ start: Type.Union([Type.String(), Type.Null()]), end: Type.Union([Type.String(), Type.Null()]) }, { additionalProperties: false }), Type.Null()])";
+        break;
       case "email":
         typeDef = "Type.String({ format: 'email' })";
         break;
@@ -5966,74 +5980,99 @@ function parseInferArguments(args) {
     method: "GET",
     format: "all"
   };
-  for (let i = 0;i < args.length; i++) {
-    const arg = args[i];
+  const argumentsIterator = args.values();
+  function requireArgument(flag) {
+    const next = argumentsIterator.next();
+    if (next.done || !next.value.trim() || next.value.startsWith("-")) {
+      throw new Error(`Missing value for ${flag}`);
+    }
+    return next.value;
+  }
+  function sourceType(value) {
+    switch (value) {
+      case "rest":
+      case "openapi":
+      case "graphql":
+      case "auto":
+        return value;
+      default:
+        throw new Error(`Invalid source type: ${value}`);
+    }
+  }
+  function outputFormat(value) {
+    switch (value) {
+      case "all":
+      case "resource":
+      case "typebox":
+      case "components":
+        return value;
+      default:
+        throw new Error(`Invalid output format: ${value}`);
+    }
+  }
+  function addHeader(headerLine) {
+    const colonIndex = headerLine.indexOf(":");
+    const key = headerLine.slice(0, colonIndex).trim();
+    if (colonIndex <= 0 || !key) {
+      throw new Error(`Invalid header: ${headerLine}`);
+    }
+    options.headers ??= {};
+    options.headers[key] = headerLine.slice(colonIndex + 1).trim();
+  }
+  for (const arg of argumentsIterator) {
+    if (arg.startsWith("--") && arg.indexOf("=") === arg.length - 1) {
+      throw new Error(`Missing value for ${arg.slice(0, -1)}`);
+    }
     if (arg === "--write" || arg === "-w") {
       options.write = true;
     } else if (arg === "--dry-run") {
       options.write = false;
     } else if (arg === "--url" || arg === "-u") {
-      options.url = args[++i];
+      options.url = requireArgument(arg);
     } else if (arg.startsWith("--url=")) {
       options.url = arg.slice(6);
     } else if (arg === "--file" || arg === "-f") {
-      options.file = args[++i];
+      options.file = requireArgument(arg);
     } else if (arg.startsWith("--file=")) {
       options.file = arg.slice(7);
     } else if (arg === "--type" || arg === "-t") {
-      options.type = args[++i];
+      options.type = sourceType(requireArgument(arg));
     } else if (arg.startsWith("--type=")) {
-      options.type = arg.slice(7);
+      options.type = sourceType(arg.slice(7));
     } else if (arg === "--resource" || arg === "-r") {
-      options.resource = args[++i];
+      options.resource = requireArgument(arg);
     } else if (arg.startsWith("--resource=")) {
       options.resource = arg.slice(11);
     } else if (arg === "--out-dir" || arg === "-o" || arg === "--output") {
-      options.outDir = args[++i];
+      options.outDir = requireArgument(arg);
     } else if (arg.startsWith("--out-dir=")) {
       options.outDir = arg.slice(10);
     } else if (arg.startsWith("--output=")) {
       options.outDir = arg.slice(9);
     } else if (arg === "--primary-key" || arg === "-k") {
-      options.primaryKey = args[++i];
+      options.primaryKey = requireArgument(arg);
     } else if (arg.startsWith("--primary-key=")) {
       options.primaryKey = arg.slice(14);
     } else if (arg === "--fields") {
-      options.fields = args[++i];
+      options.fields = requireArgument(arg);
     } else if (arg.startsWith("--fields=")) {
       options.fields = arg.slice(9);
     } else if (arg === "--header" || arg === "-H") {
-      const headerLine = args[++i] ?? "";
-      const colonIndex = headerLine.indexOf(":");
-      if (colonIndex > 0) {
-        const key = headerLine.slice(0, colonIndex).trim();
-        const value = headerLine.slice(colonIndex + 1).trim();
-        if (!options.headers)
-          options.headers = {};
-        options.headers[key] = value;
-      }
+      addHeader(requireArgument(arg));
     } else if (arg.startsWith("--header=")) {
-      const headerLine = arg.slice(9);
-      const colonIndex = headerLine.indexOf(":");
-      if (colonIndex > 0) {
-        const key = headerLine.slice(0, colonIndex).trim();
-        const value = headerLine.slice(colonIndex + 1).trim();
-        if (!options.headers)
-          options.headers = {};
-        options.headers[key] = value;
-      }
+      addHeader(arg.slice(9));
     } else if (arg === "--method" || arg === "-m") {
-      options.method = (args[++i] ?? "GET").toUpperCase();
+      options.method = requireArgument(arg).toUpperCase();
     } else if (arg.startsWith("--method=")) {
       options.method = arg.slice(9).toUpperCase();
     } else if (arg === "--body" || arg === "-b") {
-      options.body = args[++i];
+      options.body = requireArgument(arg);
     } else if (arg.startsWith("--body=")) {
       options.body = arg.slice(7);
     } else if (arg === "--format") {
-      options.format = args[++i];
+      options.format = outputFormat(requireArgument(arg));
     } else if (arg.startsWith("--format=")) {
-      options.format = arg.slice(9);
+      options.format = outputFormat(arg.slice(9));
     } else if (arg === "--help" || arg === "-h") {
       printInferHelp();
       process.exit(0);
@@ -6045,6 +6084,8 @@ function parseInferArguments(args) {
       } else {
         options.resource = arg;
       }
+    } else {
+      throw new Error(`Unexpected argument: ${arg}`);
     }
   }
   return options;
@@ -6080,6 +6121,22 @@ ${import_picocolors.default.bold("EXAMPLES:")}
   svadmin infer --file sample-posts.json --resource posts --out-dir src/resources --write
 `);
 }
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isOpenAPIDocument(value) {
+  return isRecord(value) && (("openapi" in value) || ("swagger" in value) || ("paths" in value) && ("components" in value));
+}
+function isGraphQLDocument(value) {
+  return isRecord(value) && (("__schema" in value) || isRecord(value["data"]) && ("__schema" in value["data"]) || Array.isArray(value["types"]));
+}
+function readSampleRecords(value) {
+  const records = Array.isArray(value) ? value : isRecord(value) && Array.isArray(value["data"]) ? value["data"] : isRecord(value) && Array.isArray(value["items"]) ? value["items"] : [value];
+  if (!records.every(isRecord)) {
+    throw new Error("REST samples must be objects or arrays of objects");
+  }
+  return records;
+}
 async function loadSourceData(options, customFetch = fetch) {
   if (options.file) {
     const filePath = path.resolve(process.cwd(), options.file);
@@ -6097,31 +6154,9 @@ async function loadSourceData(options, customFetch = fetch) {
         sourceDescription: options.file
       };
     }
+    let json;
     try {
-      const json = JSON.parse(content);
-      if (typeof json === "object" && json !== null && (("openapi" in json) || ("swagger" in json) || ("paths" in json) && ("components" in json))) {
-        return {
-          sourceType: "openapi",
-          data: json,
-          derivedResourceName: options.resource,
-          sourceDescription: options.file
-        };
-      }
-      if (typeof json === "object" && json !== null && (("__schema" in json) || ("data" in json) && json.data && ("__schema" in json.data) || ("types" in json) && Array.isArray(json.types))) {
-        return {
-          sourceType: "graphql",
-          data: json,
-          derivedResourceName: options.resource,
-          sourceDescription: options.file
-        };
-      }
-      const records = Array.isArray(json) ? json : Array.isArray(json.data) ? json.data : Array.isArray(json.items) ? json.items : [json];
-      return {
-        sourceType: "rest",
-        data: records,
-        derivedResourceName: options.resource || baseName,
-        sourceDescription: options.file
-      };
+      json = JSON.parse(content);
     } catch {
       if (content.includes("type ") || content.includes("enum ") || content.includes("schema ")) {
         return {
@@ -6133,12 +6168,35 @@ async function loadSourceData(options, customFetch = fetch) {
       }
       throw new Error(`Unable to parse file ${filePath}. Expected valid JSON or GraphQL SDL schema.`);
     }
+    if (isOpenAPIDocument(json)) {
+      return {
+        sourceType: "openapi",
+        data: json,
+        ...options.resource === undefined ? {} : { derivedResourceName: options.resource },
+        sourceDescription: options.file
+      };
+    }
+    if (isGraphQLDocument(json)) {
+      return {
+        sourceType: "graphql",
+        data: json,
+        ...options.resource === undefined ? {} : { derivedResourceName: options.resource },
+        sourceDescription: options.file
+      };
+    }
+    const records = readSampleRecords(json);
+    return {
+      sourceType: "rest",
+      data: records,
+      derivedResourceName: options.resource || baseName,
+      sourceDescription: options.file
+    };
   }
   if (options.url) {
     const url = options.url;
     const isGraphQL = options.type === "graphql" || url.endsWith("/graphql") || url.includes("/graphql?");
     if (isGraphQL) {
-      const response2 = await customFetch(url, {
+      const response = await customFetch(url, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -6147,14 +6205,14 @@ async function loadSourceData(options, customFetch = fetch) {
         },
         body: JSON.stringify({ query: GRAPHQL_INTROSPECTION_QUERY })
       });
-      if (!response2.ok) {
-        throw new Error(`GraphQL introspection request failed: HTTP ${response2.status} ${response2.statusText}`);
+      if (!response.ok) {
+        throw new Error(`GraphQL introspection request failed: HTTP ${response.status} ${response.statusText}`);
       }
-      const json2 = await response2.json();
+      const json = await response.json();
       return {
         sourceType: "graphql",
-        data: json2,
-        derivedResourceName: options.resource,
+        data: json,
+        ...options.resource === undefined ? {} : { derivedResourceName: options.resource },
         sourceDescription: url
       };
     }
@@ -6164,25 +6222,25 @@ async function loadSourceData(options, customFetch = fetch) {
         Accept: "application/json",
         ...options.headers ?? {}
       },
-      body: options.body
+      ...options.body === undefined ? {} : { body: options.body }
     });
     if (!response.ok) {
       throw new Error(`HTTP request failed: HTTP ${response.status} ${response.statusText}`);
     }
     const json = await response.json();
-    if (typeof json === "object" && json !== null && (("openapi" in json) || ("swagger" in json) || ("paths" in json) && ("components" in json))) {
+    if (isOpenAPIDocument(json)) {
       return {
         sourceType: "openapi",
         data: json,
-        derivedResourceName: options.resource,
+        ...options.resource === undefined ? {} : { derivedResourceName: options.resource },
         sourceDescription: url
       };
     }
-    if (typeof json === "object" && json !== null && (("__schema" in json) || ("data" in json) && json.data?.__schema)) {
+    if (isGraphQLDocument(json)) {
       return {
         sourceType: "graphql",
         data: json,
-        derivedResourceName: options.resource,
+        ...options.resource === undefined ? {} : { derivedResourceName: options.resource },
         sourceDescription: url
       };
     }
@@ -6196,7 +6254,7 @@ async function loadSourceData(options, customFetch = fetch) {
         derivedName = "items";
       }
     }
-    const records = Array.isArray(json) ? json : Array.isArray(json.data) ? json.data : Array.isArray(json.items) ? json.items : [json];
+    const records = readSampleRecords(json);
     return {
       sourceType: "rest",
       data: records,
@@ -6270,9 +6328,11 @@ async function executeInfer(options, customFetch = fetch) {
   let resources;
   const bundles = new Map;
   if (loaded.sourceType === "openapi") {
+    if (!isRecord(loaded.data))
+      throw new Error("OpenAPI source must be an object");
     resources = inferFromOpenAPI(loaded.data, {
       primaryKey,
-      include: options.resource ? [options.resource] : undefined
+      ...options.resource ? { include: [options.resource] } : {}
     });
     for (const res of resources) {
       bundles.set(res.name, generateResourceBundle(res));
@@ -6280,14 +6340,14 @@ async function executeInfer(options, customFetch = fetch) {
   } else if (loaded.sourceType === "graphql") {
     resources = inferFromGraphQL(loaded.data, {
       primaryKey,
-      include: options.resource ? [options.resource] : undefined
+      ...options.resource ? { include: [options.resource] } : {}
     });
     for (const res of resources) {
       bundles.set(res.name, generateResourceBundle(res));
     }
   } else {
     const resName = options.resource || loaded.derivedResourceName || "items";
-    const sampleArray = Array.isArray(loaded.data) ? loaded.data : [loaded.data];
+    const sampleArray = readSampleRecords(loaded.data);
     const inferRes = inferResource(resName, sampleArray, { primaryKey });
     resources = [inferRes.resource];
     bundles.set(resName, inferRes);
@@ -6312,7 +6372,7 @@ async function executeInfer(options, customFetch = fetch) {
     files,
     sourceDescription: loaded.sourceDescription,
     wrote,
-    outDir: options.outDir
+    ...options.outDir === undefined ? {} : { outDir: options.outDir }
   };
 }
 function printInferResult(result) {
@@ -6409,14 +6469,33 @@ async function promptInferWizard() {
       initial: true
     }
   ]);
-  const targetPath = answers.pathOrUrl || answers.endpointUrl;
-  const isUrl = targetPath?.startsWith("http://") || targetPath?.startsWith("https://");
+  return parseInferWizardAnswers(answers);
+}
+function parseInferWizardAnswers(answers) {
+  if (!isRecord(answers))
+    throw new Error("Invalid inference wizard answers");
+  const sourceType = answers["sourceType"];
+  if (sourceType !== "rest-file" && sourceType !== "rest-url" && sourceType !== "openapi" && sourceType !== "graphql") {
+    throw new Error("Invalid inference wizard source type");
+  }
+  const targetPath = sourceType === "rest-file" || sourceType === "openapi" ? answers["pathOrUrl"] : answers["endpointUrl"];
+  if (typeof targetPath !== "string" || !targetPath.trim()) {
+    throw new Error("Inference wizard requires a URL or file path");
+  }
+  const outDir = answers["outDir"];
+  const write = answers["write"];
+  if (typeof outDir !== "string" || !outDir.trim() || typeof write !== "boolean") {
+    throw new Error("Invalid inference wizard output options");
+  }
+  const isUrl = targetPath.startsWith("http://") || targetPath.startsWith("https://");
+  if ((sourceType === "rest-url" || sourceType === "graphql") && !isUrl) {
+    throw new Error("Inference wizard requires an HTTP(S) endpoint");
+  }
   return {
-    url: isUrl ? targetPath : undefined,
-    file: !isUrl ? targetPath : undefined,
-    type: answers.sourceType.startsWith("graphql") ? "graphql" : answers.sourceType.startsWith("openapi") ? "openapi" : "rest",
-    outDir: answers.outDir,
-    write: answers.write
+    ...isUrl ? { url: targetPath } : { file: targetPath },
+    type: sourceType === "graphql" ? "graphql" : sourceType === "openapi" ? "openapi" : "rest",
+    outDir,
+    write
   };
 }
 async function inferCommand(args) {
@@ -6442,34 +6521,81 @@ import path2 from "node:path";
 function parseGenerateArguments(args) {
   return parseInferArguments(args);
 }
+var fieldTypes = {
+  text: true,
+  number: true,
+  boolean: true,
+  date: true,
+  time: true,
+  datetime: true,
+  daterange: true,
+  select: true,
+  multiselect: true,
+  tags: true,
+  textarea: true,
+  richtext: true,
+  image: true,
+  images: true,
+  json: true,
+  relation: true,
+  color: true,
+  url: true,
+  email: true,
+  phone: true,
+  currency: true,
+  percent: true,
+  file: true,
+  markdown: true,
+  password: true,
+  array: true,
+  "tree-select": true,
+  treeselect: true,
+  cascader: true,
+  transfer: true,
+  rate: true,
+  rating: true,
+  avatar: true,
+  copy: true,
+  code: true
+};
+function isFieldType(value) {
+  return Object.hasOwn(fieldTypes, value);
+}
+function parseManualFields(fields, primaryKey) {
+  const keys = new Set;
+  return fields.split(",").map((field) => {
+    const [rawKey, rawType, extra] = field.split(":");
+    const key = rawKey?.trim();
+    const type = rawType === undefined ? "text" : rawType.trim();
+    if (!key || extra !== undefined)
+      throw new Error(`Invalid field definition: ${field}`);
+    if (!isFieldType(type))
+      throw new Error(`Invalid field type: ${type}`);
+    if (keys.has(key))
+      throw new Error(`Duplicate field: ${key}`);
+    keys.add(key);
+    return {
+      key,
+      label: key.charAt(0).toUpperCase() + key.slice(1),
+      type,
+      required: key === primaryKey
+    };
+  });
+}
 async function generateCommand(args) {
   const options = parseGenerateArguments(args);
   if (options.resource && options.fields) {
     const resourceName = options.resource;
     const primaryKey = options.primaryKey ?? "id";
-    const fieldDefs = options.fields.split(",").map((f) => {
-      const [key, typeRaw] = f.split(":");
-      const type = typeRaw || "text";
-      return {
-        key: key.trim(),
-        label: key.trim().charAt(0).toUpperCase() + key.trim().slice(1),
-        type,
-        required: key.trim() === primaryKey
-      };
-    });
-    const mockSample = {};
-    for (const f of fieldDefs) {
-      mockSample[f.key] = f.type === "number" ? 1 : f.type === "boolean" ? true : `sample_${f.key}`;
-    }
-    const inferRes = inferResource(resourceName, [mockSample], { primaryKey });
-    const resources = [
-      {
-        name: resourceName,
-        label: resourceName.charAt(0).toUpperCase() + resourceName.slice(1),
-        primaryKey,
-        fields: fieldDefs
-      }
-    ];
+    const fieldDefs = parseManualFields(options.fields, primaryKey);
+    const resource = {
+      name: resourceName,
+      label: resourceName.charAt(0).toUpperCase() + resourceName.slice(1),
+      primaryKey,
+      fields: fieldDefs
+    };
+    const resources = [resource];
+    const inferRes = generateResourceBundle(resource);
     const bundles = new Map([[resourceName, inferRes]]);
     const files = planGeneratedFiles(resources, bundles, options.format);
     let wrote = false;
@@ -6488,7 +6614,7 @@ async function generateCommand(args) {
       files,
       sourceDescription: `manual schema: ${options.fields}`,
       wrote,
-      outDir: options.outDir
+      ...options.outDir === undefined ? {} : { outDir: options.outDir }
     });
     return;
   }
@@ -6781,17 +6907,17 @@ import {
   unlinkSync,
   writeFileSync
 } from "node:fs";
-function parseDependencyMap(candidate, path4) {
+function parseDependencyMap(candidate, path) {
   if (candidate === undefined)
     return;
-  assertStringRecord(candidate, path4);
+  assertStringRecord(candidate, path);
   return { ...candidate };
 }
 function parseMaintainedPackageJson(packageJsonCandidate) {
   assertJsonObject(packageJsonCandidate, "package.json");
   const packageJson = structuredClone(packageJsonCandidate);
-  const dependencies = parseDependencyMap(packageJsonCandidate.dependencies, "package.json.dependencies");
-  const devDependencies = parseDependencyMap(packageJsonCandidate.devDependencies, "package.json.devDependencies");
+  const dependencies = parseDependencyMap(packageJsonCandidate["dependencies"], "package.json.dependencies");
+  const devDependencies = parseDependencyMap(packageJsonCandidate["devDependencies"], "package.json.devDependencies");
   if (dependencies !== undefined)
     packageJson.dependencies = dependencies;
   if (devDependencies !== undefined)
@@ -6837,6 +6963,8 @@ function desiredDependencies(project, scaffold) {
   }
   for (const packName of selectedDependencyPacks(project, scaffold)) {
     const pack = scaffold.svadmin.dependencyPacks[packName];
+    if (pack === undefined)
+      throw new Error(`Unknown dependency pack: ${packName}`);
     for (const [packageName, version] of Object.entries(pack)) {
       const existing = desired.get(packageName);
       if (existing !== undefined && (existing.version !== version || existing.section !== "dependencies")) {
@@ -6947,12 +7075,12 @@ function duplicateDependencyIssue(desired, state) {
 function doctorIssueForDependency(project, desired) {
   const state = dependencyState(project, desired);
   if (state.canonicalVersion === undefined) {
-    return state.alternateVersion === undefined ? missingDependencyIssue(desired) : misplacedDependencyIssue(desired, state);
+    return state.alternateVersion === undefined ? missingDependencyIssue(desired) : misplacedDependencyIssue(desired, { ...state, alternateVersion: state.alternateVersion });
   }
   if (state.canonicalVersion !== desired.version) {
     return versionDependencyIssue(desired, state.canonicalVersion);
   }
-  return state.alternateVersion === undefined ? null : duplicateDependencyIssue(desired, state);
+  return state.alternateVersion === undefined ? null : duplicateDependencyIssue(desired, { ...state, alternateVersion: state.alternateVersion });
 }
 function doctorProjectPackageJson(packageJsonCandidate, scaffold) {
   const project = parseMaintainedPackageJson(packageJsonCandidate);
@@ -6960,10 +7088,10 @@ function doctorProjectPackageJson(packageJsonCandidate, scaffold) {
   return issues.length === 0 ? { status: "clean", exitCode: 0, issues: [] } : { status: "issues", exitCode: 1, issues };
 }
 function upgradeChangeForDependency(desired, state) {
-  if (state.canonicalVersion === undefined && state.alternateVersion === undefined) {
-    return { action: "add", packageName: desired.packageName, to: desired.version, section: desired.section };
-  }
   if (state.canonicalVersion === undefined) {
+    if (state.alternateVersion === undefined) {
+      return { action: "add", packageName: desired.packageName, to: desired.version, section: desired.section };
+    }
     return {
       action: "move",
       packageName: desired.packageName,
@@ -6981,7 +7109,7 @@ function upgradeChangeForDependency(desired, state) {
     from: state.canonicalVersion,
     to: desired.version,
     section: desired.section,
-    previousSection: state.alternateVersion === undefined ? undefined : state.alternateSection
+    ...state.alternateVersion === undefined ? {} : { previousSection: state.alternateSection }
   };
 }
 function applyDesiredDependency(updatedPackageJson, desired) {
@@ -7325,7 +7453,7 @@ bun run dev
 
 ## Stack
 
-- **UI**: Svelte 5 + Shadcn Svelte + TailwindCSS
+- **UI**: Svelte 5 + Bits UI + precompiled Panda CSS
 - **Data**: ${dpLabel} DataProvider
 - **Auth**: ${authLabel}
 - **State**: TanStack Query v6

package/guidance/AGENTS.md

@@ -13,6 +13,45 @@ acceptance checks in this project.
    custom markup or raw colors.
 5. Verify loading, empty, partial, error, permission, success, and mobile states.
 
+## Type-safe AI development
+
+- Read the actual provider API and resource models before generating a page.
+  Do not invent fields or duplicate server/schema types.
+- Define module-level contracts with `defineResource(name, schemas)` and derive
+  models from TypeBox `Static<typeof Schema>`. Do not duplicate models or use
+  declaration merging as proof of runtime validation.
+- Use `useList`, `useOne`, `useShow`, and `useMany` with a resource contract.
+  `useTable` also infers query rows and `clientData`; `useInfiniteList` and `useSelect`
+  use the same contract. String resources, implicit routes, and data generics are
+  rejected by the default entry point. Use getters for reactive query inputs.
+- Treat network responses, storage contents, and AI tool arguments as `unknown`
+  until validated at their boundary. Resource contracts validate CRUD requests
+  and responses automatically, but they do not authorize a mutation.
+- Provide the full closed record schema with a required string/number `id`.
+  Supply create and update schemas explicitly; missing schemas disable writes.
+  Extra fields, nested `any`, open dictionaries, and unsupported schema kinds
+  are rejected. Do not coerce values or silently remove unexpected fields.
+- Define custom calls with `defineCommand` and use `useCustom` or
+  `useCustomMutation`. Inputs and outputs must have schemas; URLs and methods
+  cannot be overridden by individual calls.
+- Bind `useCreate`, `useUpdate`, `useDelete`, and their `Many` variants to an
+  explicit contract to infer mutation inputs and results. A bound mutation
+  cannot target another resource. `useUpdate` and `useDelete` require an ID.
+- Keep required delete variables in `useDeleteMany` calls; both native batch
+  providers and single-record fallbacks receive them.
+- Bind forms to a contract and a fixed create/edit action. `defaultValues` and
+  `setFieldValue` follow the operation schema, including required fields.
+  Edit backfill excludes record-only fields.
+- Do not import `@svadmin/core/unsafe` in new application pages. It is reserved
+  for reviewed metadata-driven framework boundaries, not compatibility fallback.
+- Do not automatically retry an invalid write response: inspect the structured
+  `writeMayHaveSucceeded` diagnostic and read back the server state first.
+- Never silence a mismatch with `any`, double assertions, `@ts-ignore`, or a
+  broader index signature. Fix the source contract or validate and narrow it.
+- Run the generated project's `bun run check` and focused tests after each
+  change. Cover invalid fields and payloads as well as successful paths.
+  Passing runtime tests alone does not prove compile-time type safety.
+
 ## Feedback invariant
 
 `one event -> one primary feedback surface`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/create",
-  "version": "0.26.2",
+  "version": "0.29.0",
   "description": "Scaffolding tool for svadmin projects",
   "type": "module",
   "bin": {
@@ -27,7 +27,7 @@
     "@types/node": "^26.4.0",
     "@types/prompts": "^2.4.9",
     "typescript": "^7.0.2",
-    "@svadmin/core": "^0.50.0"
+    "@svadmin/core": "^0.53.0"
   },
   "keywords": [
     "svadmin",
@@ -39,7 +39,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vibeunion/svadmin.git",
+    "url": "git+https://github.com/vibeunion/svadmin.git",
     "directory": "packages/create-svadmin"
   }
 }

package/scaffold-manifest.json

@@ -10,20 +10,17 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@svadmin/core": "^0.50.0",
-    "@svadmin/ai-elements": "^0.5.1",
-    "@svadmin/ui": "^0.70.0",
+    "@svadmin/core": "^0.53.0",
+    "@svadmin/ai-elements": "^0.8.0",
+    "@svadmin/ui": "^0.73.0",
     "@sinclair/typebox": "^0.34.52",
     "@tanstack/svelte-query": "^6.1.48",
     "@lucide/svelte": "^1.35.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@tailwindcss/vite": "^4.3.3",
     "svelte": "^5.56.10",
     "svelte-check": "^4.7.6",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3",
     "vite": "^8.2.2"
   },
@@ -33,16 +30,16 @@
         "@refinedev/core": "^5.0.12"
       },
       "simple-rest": {
-        "@svadmin/simple-rest": "^0.9.25",
+        "@svadmin/simple-rest": "^0.10.7",
         "@refinedev/simple-rest": "^6.0.1"
       },
       "supabase": {
-        "@svadmin/supabase": "^0.13.9",
+        "@svadmin/supabase": "^0.15.1",
         "@supabase/supabase-js": "^2.112.4",
         "@refinedev/supabase": "^6.0.2"
       },
       "graphql": {
-        "@svadmin/graphql": "^0.9.25",
+        "@svadmin/graphql": "^0.10.7",
         "@refinedev/graphql": "^8.0.1",
         "graphql-request": "^7.4.0",
         "graphql": "^16.8.0"

package/template/src/app.css

@@ -1,8 +1,2 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* Tailwind source tokens and component discovery are owned by SVAdmin packages. */
-@import "@svadmin/ui/app.theme.css";
+@import "@svadmin/ui/app.css";
 @import "@svadmin/ai-elements/ai.css";
-
-@custom-variant dark (&:is(.dark *));

package/template/src/pages/Dashboard.svelte

@@ -1,79 +1,92 @@
 <script lang="ts">
   import { useList } from '@svadmin/core';
-  import { FileText, Users, MessageCircle, Loader2 } from '@lucide/svelte';
+  import { posts, users, comments } from '../resource-contracts';
+  import { Button, DataState, MetricBlock } from '@svadmin/ui';
 
-  const postsQuery = useList({ resource: 'posts', pagination: { current: 1, pageSize: 1 } });
-  const usersQuery = useList({ resource: 'users', pagination: { current: 1, pageSize: 1 } });
-  const commentsQuery = useList({ resource: 'comments', pagination: { current: 1, pageSize: 1 } });
+  const postsQuery = useList({ resource: posts, pagination: { current: 1, pageSize: 1 } });
+  const usersQuery = useList({ resource: users, pagination: { current: 1, pageSize: 1 } });
+  const commentsQuery = useList({ resource: comments, pagination: { current: 1, pageSize: 1 } });
 
   const stats = $derived([
-    { label: 'Total Posts', value: $postsQuery.data?.total ?? '—', Icon: FileText, color: 'bg-blue-50 text-blue-600' },
-    { label: 'Total Users', value: $usersQuery.data?.total ?? '—', Icon: Users, color: 'bg-green-50 text-green-600' },
-    { label: 'Total Comments', value: $commentsQuery.data?.total ?? '—', Icon: MessageCircle, color: 'bg-purple-50 text-purple-600' },
+    { label: 'Total Posts', query: postsQuery },
+    { label: 'Total Users', query: usersQuery },
+    { label: 'Total Comments', query: commentsQuery },
   ]);
 
-  const isLoading = $derived($postsQuery.isLoading || $usersQuery.isLoading || $commentsQuery.isLoading);
+  const hasMetricError = $derived(stats.some(stat => stat.query.isError));
 
-  const recentPosts = useList({ resource: 'posts', pagination: { current: 1, pageSize: 5 } });
-  const recentUsers = useList({ resource: 'users', pagination: { current: 1, pageSize: 5 } });
+  const recentPosts = useList({ resource: posts, pagination: { current: 1, pageSize: 5 } });
+  const recentUsers = useList({ resource: users, pagination: { current: 1, pageSize: 5 } });
 </script>
 
-<div class="space-y-6">
-  <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
+<div class="space-y-4">
+  <h1 class="text-xl font-semibold text-foreground">Dashboard</h1>
 
-  <!-- Stats -->
+  {#if hasMetricError}
+    <DataState state="error" title="Some totals are unavailable" retry={() => {
+      for (const stat of stats) if (stat.query.isError && !stat.query.isFetching) void stat.query.refetch();
+    }} />
+  {/if}
   <div class="grid gap-4 sm:grid-cols-3">
-    {#each stats as stat, _i (_i)}
-      <div class="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
-        <div class="flex h-12 w-12 items-center justify-center rounded-xl {stat.color}">
-          <stat.Icon class="h-6 w-6" />
-        </div>
-        <div>
-          <p class="text-sm text-gray-500">{stat.label}</p>
-          {#if isLoading}
-            <Loader2 class="mt-1 h-5 w-5 animate-spin text-gray-300" />
-          {:else}
-            <p class="text-2xl font-bold text-gray-900">{stat.value}</p>
-          {/if}
-        </div>
-      </div>
+    {#each stats as stat (stat.label)}
+      <MetricBlock label={stat.label} value={stat.query.isError ? '—' : stat.query.data?.total ?? '—'} loading={stat.query.isLoading} />
     {/each}
   </div>
 
   <!-- Recent Data -->
   <div class="grid gap-6 lg:grid-cols-2">
-    <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
-      <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
-        <h2 class="font-semibold text-gray-900">Recent Posts</h2>
+    <section class="min-w-0">
+      <div class="flex items-center justify-between border-b py-3">
+        <h2 class="font-semibold text-foreground">Recent Posts</h2>
         <a href="#/posts" class="text-sm text-primary hover:underline">View all</a>
       </div>
-      <div class="divide-y divide-gray-50">
-        {#each $recentPosts.data?.data ?? [] as post, _i (_i)}
-          <div class="flex items-center justify-between px-5 py-3">
-            <div>
-              <p class="text-sm font-medium text-gray-900">{post.title}</p>
-              <p class="text-xs text-gray-500">User #{post.userId}</p>
+      {#if recentPosts.isLoading}
+        <DataState state="loading" />
+      {:else if recentPosts.isError}
+        <DataState state="error" retry={() => { if (!recentPosts.isFetching) void recentPosts.refetch(); }} />
+      {:else}
+      <div class="divide-y">
+        {#each recentPosts.data?.data ?? [] as post, _i (_i)}
+          <div class="flex items-center justify-between py-3">
+            <div class="min-w-0">
+              <p class="break-words text-sm font-medium text-foreground">{post.title}</p>
+              <p class="text-xs text-muted-foreground">User #{post.userId}</p>
             </div>
           </div>
+        {:else}
+          <DataState state="empty">
+            {#snippet action()}<Button href="#/posts/create">Create post</Button>{/snippet}
+          </DataState>
         {/each}
       </div>
-    </div>
+      {/if}
+    </section>
 
-    <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
-      <div class="flex items-center justify-between border-b border-gray-100 px-5 py-4">
-        <h2 class="font-semibold text-gray-900">Users</h2>
+    <section class="min-w-0">
+      <div class="flex items-center justify-between border-b py-3">
+        <h2 class="font-semibold text-foreground">Users</h2>
         <a href="#/users" class="text-sm text-primary hover:underline">View all</a>
       </div>
-      <div class="divide-y divide-gray-50">
-        {#each $recentUsers.data?.data ?? [] as user, _i (_i)}
-          <div class="flex items-center justify-between px-5 py-3">
-            <div>
-              <p class="text-sm font-medium text-gray-900">{user.name}</p>
-              <p class="text-xs text-gray-500">{user.email}</p>
+      {#if recentUsers.isLoading}
+        <DataState state="loading" />
+      {:else if recentUsers.isError}
+        <DataState state="error" retry={() => { if (!recentUsers.isFetching) void recentUsers.refetch(); }} />
+      {:else}
+      <div class="divide-y">
+        {#each recentUsers.data?.data ?? [] as user, _i (_i)}
+          <div class="flex items-center justify-between py-3">
+            <div class="min-w-0">
+              <p class="break-words text-sm font-medium text-foreground">{user.name}</p>
+              <p class="break-words text-xs text-muted-foreground">{user.email}</p>
             </div>
           </div>
+        {:else}
+          <DataState state="empty">
+            {#snippet action()}<Button href="#/users/create">Create user</Button>{/snippet}
+          </DataState>
         {/each}
       </div>
-    </div>
+      {/if}
+    </section>
   </div>
 </div>

package/template/src/resource-contracts.ts

@@ -0,0 +1,29 @@
+import { Type } from '@sinclair/typebox';
+import { defineResource } from '@svadmin/core';
+
+export const posts = defineResource('posts', {
+  record: Type.Object({
+    id: Type.Number(), userId: Type.Number(), title: Type.String(), body: Type.String(),
+  }),
+});
+export const users = defineResource('users', {
+  record: Type.Object({
+    id: Type.Number(), name: Type.String(), username: Type.String(), email: Type.String(),
+    phone: Type.String(), website: Type.String(),
+    address: Type.Object({
+      street: Type.String(), suite: Type.String(), city: Type.String(), zipcode: Type.String(),
+      geo: Type.Object({ lat: Type.String(), lng: Type.String() }),
+    }),
+    company: Type.Object({ name: Type.String(), catchPhrase: Type.String(), bs: Type.String() }),
+  }),
+});
+export const comments = defineResource('comments', {
+  record: Type.Object({
+    id: Type.Number(), postId: Type.Number(), name: Type.String(), email: Type.String(), body: Type.String(),
+  }),
+});
+export const todos = defineResource('todos', {
+  record: Type.Object({
+    id: Type.Number(), userId: Type.Number(), title: Type.String(), completed: Type.Boolean(),
+  }),
+});

package/template/src/resources.ts

@@ -1,10 +1,12 @@
 // Example resource definitions — generic demo data (JSONPlaceholder-style)
 
 import type { ResourceDefinition } from '@svadmin/core';
+import { posts, users, comments, todos } from './resource-contracts';
 
 export const resources: ResourceDefinition[] = [
   {
     name: 'posts',
+    contract: posts,
     label: 'Posts',
     icon: 'file-text',
     fields: [
@@ -18,6 +20,7 @@ export const resources: ResourceDefinition[] = [
 
   {
     name: 'users',
+    contract: users,
     label: 'Users',
     icon: 'users',
     canCreate: false,
@@ -34,6 +37,7 @@ export const resources: ResourceDefinition[] = [
 
   {
     name: 'comments',
+    contract: comments,
     label: 'Comments',
     icon: 'message-circle',
     fields: [
@@ -48,6 +52,7 @@ export const resources: ResourceDefinition[] = [
 
   {
     name: 'todos',
+    contract: todos,
     label: 'Todos',
     icon: 'check-square',
     fields: [

package/template/vite.config.ts

@@ -1,10 +1,8 @@
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   plugins: [
-    tailwindcss(),
     svelte(),
   ],
   server: {