@lotics/cli 0.191.0 → 0.191.1

package/dist/src/cli.js

@@ -39864,15 +39864,15 @@ var require_deflate = __commonJS({
       if (!strm) {
         return Z_STREAM_ERROR;
       }
-      var wrap = 1;
+      var wrap2 = 1;
       if (level === Z_DEFAULT_COMPRESSION) {
         level = 6;
       }
       if (windowBits < 0) {
-        wrap = 0;
+        wrap2 = 0;
         windowBits = -windowBits;
       } else if (windowBits > 15) {
-        wrap = 2;
+        wrap2 = 2;
         windowBits -= 16;
       }
       if (memLevel < 1 || memLevel > MAX_MEM_LEVEL || method !== Z_DEFLATED || windowBits < 8 || windowBits > 15 || level < 0 || level > 9 || strategy < 0 || strategy > Z_FIXED) {
@@ -39884,7 +39884,7 @@ var require_deflate = __commonJS({
       var s = new DeflateState();
       strm.state = s;
       s.strm = strm;
-      s.wrap = wrap;
+      s.wrap = wrap2;
       s.gzhead = null;
       s.w_bits = windowBits;
       s.w_size = 1 << s.w_bits;
@@ -40177,7 +40177,7 @@ var require_deflate = __commonJS({
       var dictLength = dictionary.length;
       var s;
       var str, n;
-      var wrap;
+      var wrap2;
       var avail;
       var next;
       var input;
@@ -40186,16 +40186,16 @@ var require_deflate = __commonJS({
         return Z_STREAM_ERROR;
       }
       s = strm.state;
-      wrap = s.wrap;
-      if (wrap === 2 || wrap === 1 && s.status !== INIT_STATE || s.lookahead) {
+      wrap2 = s.wrap;
+      if (wrap2 === 2 || wrap2 === 1 && s.status !== INIT_STATE || s.lookahead) {
         return Z_STREAM_ERROR;
       }
-      if (wrap === 1) {
+      if (wrap2 === 1) {
         strm.adler = adler32(strm.adler, dictionary, dictLength, 0);
       }
       s.wrap = 0;
       if (dictLength >= s.w_size) {
-        if (wrap === 0) {
+        if (wrap2 === 0) {
           zero(s.head);
           s.strstart = 0;
           s.block_start = 0;
@@ -40235,7 +40235,7 @@ var require_deflate = __commonJS({
       strm.next_in = next;
       strm.input = input;
       strm.avail_in = avail;
-      s.wrap = wrap;
+      s.wrap = wrap2;
       return Z_OK;
     }
     exports2.deflateInit = deflateInit;
@@ -41255,17 +41255,17 @@ var require_inflate = __commonJS({
       return inflateResetKeep(strm);
     }
     function inflateReset2(strm, windowBits) {
-      var wrap;
+      var wrap2;
       var state;
       if (!strm || !strm.state) {
         return Z_STREAM_ERROR;
       }
       state = strm.state;
       if (windowBits < 0) {
-        wrap = 0;
+        wrap2 = 0;
         windowBits = -windowBits;
       } else {
-        wrap = (windowBits >> 4) + 1;
+        wrap2 = (windowBits >> 4) + 1;
         if (windowBits < 48) {
           windowBits &= 15;
         }
@@ -41276,7 +41276,7 @@ var require_inflate = __commonJS({
       if (state.window !== null && state.wbits !== windowBits) {
         state.window = null;
       }
-      state.wrap = wrap;
+      state.wrap = wrap2;
       state.wbits = windowBits;
       return inflateReset(strm);
     }
@@ -46001,7 +46001,7 @@ function resultSideEffects(result) {
 }
 
 // src/version.ts
-var VERSION = "0.191.0";
+var VERSION = "0.191.1";
 
 // src/timezone.ts
 function machineTimezone() {
@@ -46110,6 +46110,167 @@ function matchDocArea(areas, query) {
   if (exact.length > 0) return exact;
   return areas.filter((a) => a.area.toLowerCase().includes(q));
 }
+var PAGE_BYTES = 16e3;
+var NAV_BYTES = PAGE_BYTES / 2;
+var CUT_MARK = "\n[cut \u2014 the whole document is at the path above]";
+var slugOf = (title) => title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+function docSections(text) {
+  const lines = text.split("\n");
+  const found = [];
+  let fenced = false;
+  lines.forEach((line, index) => {
+    if (line.startsWith("```")) {
+      fenced = !fenced;
+      return;
+    }
+    if (fenced) return;
+    const m = /^(#{1,6})\s+(.+?)\s*$/.exec(line);
+    if (m === null) return;
+    const level = m[1].length;
+    for (const open of found) {
+      if (open.end === lines.length && open.level >= level) open.end = index;
+    }
+    found.push({ level, title: m[2], slug: slugOf(m[2]), line: index, end: lines.length });
+  });
+  return found;
+}
+function docRows(text) {
+  const found = [];
+  let fenced = false;
+  let header = true;
+  text.split("\n").forEach((line, index) => {
+    if (line.startsWith("```")) {
+      fenced = !fenced;
+      return;
+    }
+    if (fenced) return;
+    if (!line.startsWith("|")) {
+      header = true;
+      return;
+    }
+    const cells = line.split("|");
+    if (cells.length < 3) return;
+    const first3 = cells[1].trim();
+    if (/^:?-{2,}:?$/.test(first3)) return;
+    if (header) {
+      header = false;
+      return;
+    }
+    const key = first3.replace(/[`*[\]]/g, "").trim();
+    if (key === "") return;
+    found.push({ key, slug: slugOf(key), line: index });
+  });
+  return found;
+}
+var byteLength = (s) => Buffer.byteLength(s, "utf-8");
+var oneNewline = (s) => `${s.replace(/\n+$/, "")}
+`;
+var wrap = (names, width = 92) => names.reduce((out, name2) => {
+  const last3 = out[out.length - 1];
+  if (last3 !== void 0 && last3.length + name2.length + 1 <= width) {
+    out[out.length - 1] = `${last3} ${name2}`;
+    return out;
+  }
+  return [...out, `    ${name2}`];
+}, []);
+var fit = (lines, budget) => {
+  const kept = [];
+  let used = 0;
+  for (const line of lines) {
+    const cost = byteLength(line) + 1;
+    if (used + cost > budget) break;
+    kept.push(line);
+    used += cost;
+  }
+  return { kept, dropped: lines.length - kept.length };
+};
+var childrenOf = (sections, parent) => {
+  const within = parent === void 0 ? sections : sections.filter((s) => s.line > parent.line && s.line < parent.end);
+  if (within.length === 0) return [];
+  const top = Math.min(...within.map((s) => s.level));
+  return within.filter((s) => s.level === top);
+};
+var linesOf = (lines, section) => section === void 0 ? lines : lines.slice(section.line, section.end);
+var tableTop = (lines, rowLine) => {
+  for (let i2 = rowLine; i2 > 0; i2--) {
+    if (!lines[i2].startsWith("|")) return i2 + 1;
+  }
+  return 0;
+};
+var tableHeader = (lines, rowLine) => {
+  for (let i2 = rowLine; i2 > 0; i2--) {
+    if (/^\|\s*:?-{2,}/.test(lines[i2])) return i2 > 0 ? [lines[i2 - 1], lines[i2]] : [];
+    if (!lines[i2].startsWith("|")) return [];
+  }
+  return [];
+};
+function renderDocPage(text, args) {
+  const lines = text.split("\n");
+  const sections = docSections(text);
+  const rows = docRows(text);
+  const address = (slug) => `  lotics docs ${args.address}/${slug}`;
+  const navFor = (parent2) => {
+    const children2 = childrenOf(sections, parent2);
+    if (children2.length > 0) {
+      return children2.map(
+        (s) => `${address(s.slug)}   (${byteLength(linesOf(lines, s).join("\n"))} bytes)`
+      );
+    }
+    const within = parent2 === void 0 ? rows : rows.filter((r) => r.line > parent2.line && r.line < parent2.end);
+    if (within.length === 0) return [];
+    return [`  lotics docs ${args.address}/<name>, where <name> is one of:`, "", ...wrap(within.map((r) => r.slug))];
+  };
+  const titled = sections.length > 0 && sections[0].level === 1 ? sections[0] : void 0;
+  const listed = (nav2) => {
+    const shown = fit(nav2, NAV_BYTES);
+    return [...shown.kept, ...shown.dropped > 0 ? [`  \u2026 and ${shown.dropped} more`] : []].join(
+      "\n"
+    );
+  };
+  let current;
+  if (args.section !== void 0 && args.section !== "") {
+    const q = slugOf(args.section);
+    const pick4 = (all) => {
+      const exact = all.filter((s) => s.slug === q);
+      return exact.length > 0 ? exact : all.filter((s) => s.slug.startsWith(q));
+    };
+    const hitSections = pick4(sections.filter((s) => s.level > 1));
+    const hitRows = hitSections.length > 0 ? [] : pick4(rows);
+    if (hitSections.length + hitRows.length !== 1) {
+      const ambiguous = [...hitSections.map((s) => s.slug), ...hitRows.map((r) => r.slug)];
+      const list2 = listed(ambiguous.length > 1 ? ambiguous.map(address) : navFor(titled));
+      return {
+        error: ambiguous.length > 1 ? `"${args.section}" names more than one part of ${args.address}:
+${list2}` : `No "${args.section}" in ${args.address}. It holds:
+${list2}`
+      };
+    }
+    const row = hitRows[0];
+    if (row !== void 0) {
+      return { text: oneNewline([...tableHeader(lines, row.line), lines[row.line]].join("\n")) };
+    }
+    current = hitSections[0];
+  }
+  const whole = linesOf(lines, current).join("\n");
+  if (byteLength(whole) <= PAGE_BYTES) return { text: oneNewline(whole) };
+  const parent = current ?? titled;
+  const nav = navFor(parent);
+  const navText = nav.length === 0 ? "" : `
+
+This is ${byteLength(whole)} bytes; one page is ${PAGE_BYTES}. It holds:
+
+${listed(nav)}`;
+  const children = childrenOf(sections, parent);
+  const rowsWithin = parent === void 0 ? rows : rows.filter((r) => r.line > parent.line && r.line < parent.end);
+  const openingTo = children.length > 0 ? children[0].line : rowsWithin.length > 0 ? tableTop(lines, rowsWithin[0].line) : current?.end ?? lines.length;
+  const head = fit(
+    lines.slice(current?.line ?? 0, openingTo),
+    PAGE_BYTES - byteLength(navText) - byteLength(CUT_MARK) - 1
+  );
+  return {
+    text: oneNewline(`${head.kept.join("\n")}${head.dropped > 0 ? CUT_MARK : ""}${navText}`)
+  };
+}
 function onlySelfReference(areas) {
   return areas.length > 0 && areas.every((a) => a.pkg === "@lotics/cli");
 }
@@ -46129,6 +46290,7 @@ ${a.pkg}  ${a.version}`);
     lines.push(`  ${name2.length >= 24 ? `${name2}  ` : name2.padEnd(24)}${a.title}`);
   }
   lines.push("\n  lotics docs <area>            print one, e.g. `lotics docs ai`");
+  lines.push("  lotics docs <area>/<section>  one section \u2014 a long doc prints its section list");
   lines.push("  lotics docs <pkg>/<area>      when two packages share a name");
   lines.push("\n  Versions are the INSTALLED ones; a doc describes the version beside it.");
   if (onlySelfReference(areas)) {
@@ -46145,7 +46307,17 @@ function docsCommand(args) {
     console.log(renderDocIndex(areas));
     return;
   }
-  const hits = matchDocArea(areas, args.area);
+  const asked = args.area.trim();
+  let hits = matchDocArea(areas, asked);
+  let section;
+  if (hits.length === 0 && asked.includes("/")) {
+    const cut = asked.lastIndexOf("/");
+    const head = matchDocArea(areas, asked.slice(0, cut));
+    if (head.length > 0) {
+      hits = head;
+      section = asked.slice(cut + 1);
+    }
+  }
   if (hits.length === 0) {
     console.error(
       `No reference area matching "${args.area}".
@@ -46156,14 +46328,22 @@ function docsCommand(args) {
   if (hits.length > 1) {
     console.error(
       `"${args.area}" matches more than one reference \u2014 name the package:
-` + hits.map((a) => `  \u2022 lotics docs ${qualified(a)}   (${a.pkg} ${a.version})`).join("\n")
+` + hits.map(
+        (a) => `  \u2022 lotics docs ${qualified(a)}${section === void 0 ? "" : `/${section}`}   (${a.pkg} ${a.version})`
+      ).join("\n")
     );
     process.exit(1);
   }
   const hit = hits[0];
+  const address = areas.filter((a) => a.area === hit.area).length > 1 ? qualified(hit) : hit.area;
+  const page = renderDocPage(fs5.readFileSync(hit.absPath, "utf-8"), { address, section });
+  if ("error" in page) {
+    console.error(page.error);
+    process.exit(1);
+  }
   console.error(`${hit.pkg} ${hit.version} \xB7 ${path5.relative(projectDir, hit.absPath)}
 `);
-  process.stdout.write(fs5.readFileSync(hit.absPath, "utf-8"));
+  process.stdout.write(page.text);
 }
 
 // src/commands.ts
@@ -46295,7 +46475,8 @@ var COMMANDS = [
     verbs: ["docs"],
     help: [
       "  lotics docs                          List the reference docs the npm packages in node_modules ship",
-      "  lotics docs <area>                   Print one (e.g. 'lotics docs ai')"
+      "  lotics docs <area>                   Print one, capped at a page (e.g. 'lotics docs ai')",
+      "  lotics docs <area>/<section>         One section, or one row of a table doc"
     ]
   },
   {
@@ -46639,7 +46820,6 @@ import { createHash as createHash3 } from "node:crypto";
 import { tmpdir as tmpdir2 } from "node:os";
 
 // src/starter_template.ts
-var STARTER_REACT_NATIVE_VERSION = "0.85.3";
 var VITEST_SETUP_FILENAME = "vitest.setup.ts";
 var VITEST_SETUP_CONTENT = `// Runs before every test file (wired by vite.config.ts \`test.setupFiles\`).
 // Empty by default \u2014 put global test setup here: custom matchers, a fetch stub,
@@ -46675,7 +46855,7 @@ function buildStarterTemplate(args) {
             // or a broken vitest config, indefinitely. A detector that cannot
             // fire when the thing is ABSENT rather than excessive is not one.
             //
-            // What the scaffold seeds instead is `src/harness.test.ts`, which
+            // What the scaffold seeds instead is `src/harness.test.tsx`, which
             // asserts the HARNESS and nothing else. The file it replaces
             // (`src/App.test.tsx`) asserted the scaffold's placeholder copy
             // ("First item"), so it failed the moment the author did the very
@@ -46693,15 +46873,14 @@ function buildStarterTemplate(args) {
             // that IMPORTS @lotics/docx or @lotics/xlsx directly (its own doc/excel
             // builders) declares its own dependency then.
             "@lotics/ui": uiVersion,
-            "@react-native-picker/picker": "^2.7.0",
-            "expo-image": "~3.0.9",
+            // @base-ui/react is deliberately absent: @lotics/ui declares it as an
+            // EXACT peer, npm installs a peer, and a second declaration here is a
+            // version that drifts from the kit's — which Base UI punishes
+            // silently, since it passes state through React context and a nested
+            // copy renders parts that never open.
             "lucide-react": "^0.562.0",
-            "lucide-react-native": "^0.562.0",
             react: "^19.0.0",
             "react-dom": "^19.0.0",
-            "react-native": STARTER_REACT_NATIVE_VERSION,
-            "react-native-svg": "^15.0.0",
-            "react-native-web": "^0.21.0",
             // In-app routing for the scaffolded list→detail example. The app owns
             // its routing; the SDK's `isEmbedded()` picks memory vs browser history. `react-router` is the
             // canonical package (react-router-dom is a shim over it).
@@ -46750,9 +46929,10 @@ function buildStarterTemplate(args) {
             strict: true,
             noFallthroughCasesInSwitch: true
           },
-          // Restrict tsc to the project's own sources. tsgo follows
-          // transitive imports into node_modules — strict rules
-          // (noUnusedLocals etc.) would fire on @lotics/ui's source.
+          // Restrict tsc to the project's own sources — a `noEmit` program has
+          // no reason to walk anything else, and under the `LOTICS_UI_SRC`
+          // dev-link `@lotics/ui` resolves to a working copy of the kit's own
+          // .tsx, which strict rules (noUnusedLocals etc.) would then fire on.
           // `.lotics/**/*` (not bare `.lotics`): TypeScript's include glob walk
           // SKIPS dot-directories, so a bare `.lotics` silently loads zero of the
           // generated `.d.ts` augmentations and typed useWorkflow/useQuery/useAgentRun
@@ -46780,87 +46960,25 @@ function buildStarterTemplate(args) {
       path: "vite.config.ts",
       content: `/// <reference types="vitest" />
 import { defineConfig } from "vite";
-import type { Plugin } from "vite";
 import react from "@vitejs/plugin-react";
-import { loticsOptimizeDeps, loticsOptimizeExclude, loticsResolve } from "@lotics/ui/vite";
-
-// @lotics/ui/icon.tsx deep-imports \`lucide-react-native/dist/esm/icons/<name>\`.
-// lucide-react-native's \`exports\` map lists only "." and "./icons", so a strict
-// resolver (the sandbox's vite dev optimizer) blocks the deep path with
-// \`Missing "./dist/esm/icons/<name>" specifier\`. lucide-react ships the same
-// per-icon files with NO exports map, so redirect there. A \`resolveId\` PLUGIN
-// (not \`resolve.alias\`) is required: the dep-optimizer SCAN runs plugin
-// resolveId hooks but does NOT apply regex \`resolve.alias\`, so the alias alone
-// fixes the production build but leaves the dev preview broken.
-function lucideIconsWebAlias(): Plugin {
-  return {
-    name: "lucide-icons-web-alias",
-    enforce: "pre",
-    async resolveId(source, importer, options) {
-      const m = /^lucide-react-native\\/dist\\/esm\\/icons\\/(.+)$/.exec(source);
-      if (!m) return null;
-      return this.resolve(\`lucide-react/dist/esm/icons/\${m[1]}\`, importer, {
-        ...options,
-        skipSelf: true,
-      });
-    },
-  };
-}
+import { loticsResolve } from "@lotics/ui/vite";
 
 // Vite default base (/) emits absolute asset URLs in index.html. Lotics's
 // render endpoint rewrites those to /v1/apps/{id}/asset/... so the bundle
 // loads via the platform's asset proxy. Don't change \`base\` unless you
 // also adjust the rewrite logic in backend/api/apps.ts:rewriteAssetPaths.
 export default defineConfig({
-  plugins: [lucideIconsWebAlias(), react()],
-  // RN libraries reference globals Metro injects but Vite does not \u2014 undefined
-  // \u21D2 the bundle throws. \`__DEV__\` (react-native-web, @react-native-picker's
-  // UnimplementedView): throws at load, blank iframe. \`global\` (rn-web
-  // Animated's \`global.cancelAnimationFrame\`): throws when a spring animation is
-  // interrupted/torn down \u2014 e.g. toggling @lotics/ui's Switch. rollup hits it;
-  // the dev esbuild path masks it, so it only surfaces in the deployed app.
-  // rn-web only reads \`global.x\` as a free var, so mapping it to \`globalThis\`
-  // is safe. Define both so dev and the deployed build behave identically.
-  define: { __DEV__: "false", global: "globalThis" },
-  // The kit owns its own resolution \u2014 the react-native \u2192 react-native-web alias,
-  // \`.web.tsx\`-first extensions, the React dedupe, and the \`LOTICS_UI_SRC\`
-  // dev-link \u2014 for the same reason it owns \`loticsOptimizeDeps\`: every entry is
-  // dictated by @lotics/ui's internals, so shipping it WITH the kit means it can
-  // never drift from the version installed here. It also stops being an app's job
-  // to hand-carry a load-bearing alias that a regex edit twice deleted (GAP-133/142).
+  plugins: [react()],
+  // The kit owns this block: the \`LOTICS_UI_SRC\` dev-link and the React dedupe
+  // are decided by @lotics/ui's own delivery, so shipping it WITH the kit means
+  // it can never drift from the version installed here \u2014 and it stops being an
+  // app's job to hand-carry a line a regex edit twice deleted (GAP-133/142).
   // \`lotics app codegen\` writes the matching \`paths\` into
-  // .lotics/tsconfig.link.json, so tsc/vitest/eslint/your editor resolve the same
-  // @lotics/ui this does. To add your own alias, spread it:
+  // .lotics/tsconfig.link.json, so tsc/vitest/eslint/your editor resolve the
+  // same @lotics/ui this does. To add your own alias, spread it:
   //   const base = loticsResolve();
   //   resolve: { ...base, alias: [...base.alias, { find: "x", replacement: "y" }] }
   resolve: loticsResolve(),
-  optimizeDeps: {
-    // The dev dep-optimizer must pre-bundle @lotics/ui's RN-ecosystem + markdown
-    // CJS-interop deps or \`lotics app dev\` blanks the iframe ("does not provide an
-    // export named 'default'/'parse'"). Dev-ONLY: the prod rollup build resolves the
-    // interop without it, so typecheck/lint/build stay green while the dev iframe
-    // goes blank. The canonical list ships WITH @lotics/ui as \`loticsOptimizeDeps\`
-    // (imported above) so it can never drift from what the kit's transitive deps
-    // require across a major bump \u2014 the per-family rationale lives in that module.
-    // To add app-specific entries, spread: include: [...loticsOptimizeDeps, "my-dep"].
-    include: loticsOptimizeDeps,
-    // The kit is ONE module graph, so it must never be pre-bundled: the optimizer
-    // auto-discovers each @lotics/ui subpath and inlines a private copy of every
-    // context-owning module it reaches (locale, tooltip, portal, popover), leaving
-    // the provider filling one context and the component reading another.
-    exclude: loticsOptimizeExclude,
-    // The dep optimizer pre-bundles deps with a SEPARATE esbuild pass that
-    // top-level \`define\` doesn't always reach, so a pre-bundled RN dep can
-    // still hit \`__DEV__ is not defined\` under \`lotics app dev\`. Define it
-    // here too \u2014 belt-and-suspenders with the top-level \`define\` above.
-    // The optimizer pre-bundles with a SEPARATE esbuild resolver that ignores
-    // \`resolve.extensions\`, so \`.web.js\` must be repeated here or a pre-bundled
-    // RN dep still resolves \`./Picker\` to the native build.
-    esbuildOptions: {
-      define: { __DEV__: "false", global: "globalThis" },
-      resolveExtensions: [".web.tsx", ".web.ts", ".web.js", ".tsx", ".ts", ".jsx", ".js", ".json", ".mjs", ".mts"],
-    },
-  },
   build: {
     outDir: "dist",
     // No source maps in the production build: they ship the original source
@@ -46886,11 +47004,6 @@ export default defineConfig({
     // cross-site WS hijack fix) \u2014 without this entry the proxied preview page
     // loads over HTTP but HMR never connects, so edits stop live-updating.
     allowedHosts: [".lotics-sandbox.app"],
-    // @lotics/ui/fonts.css references the API's /iframe/fonts/*.woff2 files
-    // by root-relative URL. A deployed app is served from the API origin so
-    // they resolve directly; under \`lotics app dev\` the app runs on
-    // localhost, so proxy /iframe to the API to load the real fonts.
-    proxy: { "/iframe": { target: "https://api.lotics.ai", changeOrigin: true } },
   },
   test: {
     environment: "jsdom",
@@ -46899,39 +47012,31 @@ export default defineConfig({
     // EXIST either way: setupFiles naming a missing file makes vitest fail to
     // load every test. See vitest.setup.ts.
     setupFiles: ["./${VITEST_SETUP_FILENAME}"],
-    // RN packages ship Flow (\`import typeof\`) in their native source, reached
-    // transitively by RN-Web components (pickers, calendars, anything touching
-    // Animated). Vitest's web optimizer is OFF by default and ignores the
-    // \`optimizeDeps.resolveExtensions\` above, so it pre-bundles the native
-    // \`.js\` / \`src\` Flow files and esbuild can't parse them. Enable it with the
-    // same \`.web.js\`-first resolution so it bundles the compiled web variants
-    // (Picker.web.js, RN-Web dist) \u2014 without this, any test that renders a tree
-    // pulling a Picker / DatePicker fails with "Unexpected token 'typeof'".
+    // @lotics/ui ships built ESM whose every component module carries the
+    // literal \`import "./button.css"\` that delivers its sheet. Vitest hands
+    // node_modules to Node's ESM loader, which has no loader for \`.css\` \u2014 so
+    // without this line EVERY suite that touches a kit component fails to load
+    // with \`Unknown file extension ".css"\`, before a single assertion runs.
+    // Inlining routes those modules through Vite's transform instead, where a
+    // CSS import is inert under jsdom. Any package whose modules import CSS
+    // needs the same entry.
+    server: { deps: { inline: [/@lotics\\/ui/] } },
     deps: {
       optimizer: {
         web: {
           enabled: true,
-          // react + react-dom + the @testing-library renderer must ride in the
-          // SAME optimized chunk as react-native-web, so a rendered tree and the
-          // renderer share ONE react instance. Without this, a test that renders a
-          // non-trivial App tree hits a null hooks dispatcher ("Cannot read
-          // properties of null (reading 'useState')") the moment it mounts.
+          // Everything here ships COMPILED JS, so vitest pre-bundles each into
+          // its own chunk \u2014 and a chunk carrying its own react import splits the
+          // instance and nulls the hooks dispatcher the moment a rendered tree
+          // calls one ("Cannot read properties of null (reading 'useState')").
+          // They ride in ONE optimized chunk with react and the renderer instead.
           include: [
             "react",
             "react-dom",
             "react-dom/client",
             "react-dom/test-utils",
-            "react-native",
-            "react-native-web",
-            "react-native-svg",
-            "@react-native-picker/picker",
             "@testing-library/react",
             "@testing-library/dom",
-            // @lotics/app-sdk ships compiled dist/ JS (unlike @lotics/ui, which
-            // ships source vitest transforms inline) \u2014 pre-bundled into its own
-            // chunk, its react import splits from the shared instance and nulls
-            // the hooks dispatcher the instant a hook (useAgentRun / useQuery)
-            // runs in a rendered App tree.
             "@lotics/app-sdk",
             // The /router subpath is a SEPARATE optimizer entry \u2014 without it,
             // AppRouter's BrowserRouter bundles apart from the app's
@@ -46943,9 +47048,6 @@ export default defineConfig({
             // ("Invalid hook call") when a test renders the routed App tree.
             "react-router",
           ],
-          esbuildOptions: {
-            resolveExtensions: [".web.tsx", ".web.ts", ".web.js", ".tsx", ".ts", ".jsx", ".js", ".json", ".mjs", ".mts"],
-          },
         },
       },
     },
@@ -46969,8 +47071,8 @@ export default defineConfig({
        * default of html/body being content-sized collapses every \`flex: 1\`
        * to 0 and the surface shrinks to fit only its rendered content.
        *
-       * Also: #root is made a flex column so the outermost RN \`<View flex:1>\`
-       * inside App.tsx claims the full iframe height.
+       * Also: #root is a flex column, so App.tsx's outermost \`flex: 1\` box
+       * claims the full iframe height.
        */
       html, body, #root { height: 100%; margin: 0; }
       #root { display: flex; flex-direction: column; }
@@ -46985,45 +47087,47 @@ export default defineConfig({
     },
     {
       path: "src/main.tsx",
-      content: `import "@lotics/ui/index.css";
+      content: `import "@lotics/ui/styles.css";
 import "@lotics/ui/fonts.css";
-import { PortalHost } from "@lotics/ui/portal";
 import { LoticsLocaleProvider, vi } from "@lotics/ui/locale";
 import { mount } from "@lotics/app-sdk";
 import App from "./App";
 
+// \`styles.css\` is not optional. It carries the cascade-layer order, every design
+// token and the reset, and the kit's chrome reads those variables with NO inline
+// fallback \u2014 without it every colour, size and radius is invalid and the screen
+// renders unstyled but working.
+//
 // THIS APP LOOKS LIKE LOTICS unless you say otherwise, which is the right
 // default: the kit's own palette and typeface are what every screen in the
 // product wears, and an app that sets nothing belongs with them.
 //
-// If this app carries someone else's brand \u2014 a customer's typeface, their one
-// colour \u2014 \`applyLoticsTheme\` is the escape hatch. Call it ONCE, here, before
-// \`mount\`, so the variables are in place for the first paint:
+// If this app carries someone else's brand, a theme is a STYLESHEET \u2014 there is
+// no theme function. Declare the shadcn/ui variables in your own CSS, imported
+// after \`styles.css\`; an unlayered rule of yours beats every layered kit rule at
+// any specificity, with no \`!important\`:
 //
-//   import { applyLoticsTheme } from "@lotics/ui/theme";
-//   applyLoticsTheme({ primary: "#0F766E" });
+//   :root, .light { --primary: #0F766E; --primary-foreground: #fff; --ring: #0F766E; }
+//   .dark         { --primary: #5EEAD4; --primary-foreground: #042F2E; --ring: #5EEAD4; }
 //
-// It is ADDITIVE \u2014 set what you own and every other role keeps the kit's value,
-// rather than resetting to some second set of defaults:
+// Paste BOTH blocks of whatever palette you start from: a token set only on
+// \`:root\` keeps its light value in dark mode, because your unlayered rule also
+// beats the kit's \`.dark\`. The roles worth knowing:
 //
-//   accent      which of these \u2014 a selected row, an active filter
-//   primary     this is on \u2014 the filled button, a checkbox, an active tab's rail
-//   background  the raised surface (Card, Drawer, Modal); leave white unless you
-//               deliberately want a toned surface
-//   border      hairlines \u2014 a register is mostly these, so a small change here is
-//               felt against the whole screen
-//   bodyFont    the typeface for everything (a CSS stack you know RESOLVES, and
-//               that carries Vietnamese diacritics \u2014 a face without them turns
-//               "Th\u1EA9m \u0111\u1ECBnh" into tofu). Declare its @font-face in your own CSS.
-//   displayFont display type only; defaults to bodyFont
+//   --primary            this is on \u2014 the filled button, a checkbox, an active tab's rail
+//   --lotics-accent      which of these \u2014 a selected row, an active filter (themed: set
+//                        it in both blocks, beside --primary)
+//   --card               the raised surface (Card, Drawer, Dialog)
+//   --border             hairlines \u2014 a register is mostly these, so a small change
+//                        here is felt against the whole screen
+//   --font-sans          the typeface for everything (a stack you know RESOLVES, and that
+//                        carries Vietnamese diacritics \u2014 a face without them turns
+//                        "Th\u1EA9m \u0111\u1ECBnh" into tofu). Declare its @font-face in your own CSS.
+//   --lotics-font-display  display type only; defaults to --font-sans
 //
-// Prefer it over declaring \`--lotics-*\` in your own stylesheet: two of those
-// values are DERIVED and fail quietly by hand \u2014 the selection wash is the accent
-// at 7%, and one bodyFont has to reach all three weight rungs or medium and
-// semibold stay in the kit's face and the screen reads as a font that half-loaded.
-//
-// PortalHost is the render target for @lotics/ui overlays (Popover, Tooltip,
-// Dialog). Without it, Portal renders nothing \u2014 keep it wrapping the app.
+// Everything derived \u2014 the selection wash, hover and press shades, the hairline
+// ladder \u2014 is computed in CSS from those, so there is nothing to keep in step by
+// hand. The full contract is \`node_modules/@lotics/ui/docs/theming.md\`.
 //
 // LoticsLocaleProvider supplies the kit's own strings (Pagination, sort
 // headers, select-all, the Drawer's record nav\u2026) in one language \u2014 Vietnamese
@@ -47031,9 +47135,7 @@ import App from "./App";
 // LoticsLocale pack) for another language; remove it to fall back to English.
 mount(
   <LoticsLocaleProvider locale={vi}>
-    <PortalHost>
-      <App />
-    </PortalHost>
+    <App />
   </LoticsLocaleProvider>,
 );
 `
@@ -47047,21 +47149,22 @@ mount(
       //     host never sees it, so navigation never reloads the app); standalone,
       //     real path URLs. Browser Back/Forward walk app screens in both.
       //   - The full-container layout pattern is preserved in `Screen`: an outer
-      //     <View flex:1> claims the iframe height (index.html sets
-      //     html/body/#root to 100% + #root is a flex column). Keep that chain
-      //     plain — @lotics/ui/stack wraps children in an unstyled <View> that
-      //     breaks `flex: 1` propagation to a fill-remaining-space child.
+      //     `flex: 1` box claims the iframe height (index.html sets
+      //     html/body/#root to 100% + #root is a flex column). It is a plain
+      //     `<div>` rather than a kit primitive because that chain has to stay
+      //     unbroken — `Stack` is the right thing INSIDE it, where the gutter is
+      //     what you want, not around a fill-remaining-space child.
       // A single-screen app can delete the router and render one Screen directly.
       content: `import type { ReactNode } from "react";
-import { View } from "react-native";
 import { useNavigate, useParams } from "react-router";
 import { AppRouter } from "@lotics/app-sdk/router";
 import { useAiContext } from "@lotics/app-sdk";
 import { Card } from "@lotics/ui/card";
+import { Stack } from "@lotics/ui/stack";
 import { Text } from "@lotics/ui/text";
 import { Button } from "@lotics/ui/button";
 import { BackButton } from "@lotics/ui/back_button";
-import { EmptyState } from "@lotics/ui/empty_state";
+import { RegionState } from "@lotics/ui/region_state";
 
 // AppRouter makes the app's screens real URLs \u2014 write plain react-router
 // (useNavigate / useParams / <Link>) and it handles both modes. The app owns its
@@ -47078,14 +47181,16 @@ const ITEMS = [
   { id: "3", name: "Third item" },
 ];
 
-// Outer <View flex:1> claims the full iframe height \u2014 works because index.html
-// sets html/body/#root to 100% and #root is a flex column. Keep this flex chain
-// plain (not @lotics/ui/stack) so a fill-remaining-space child can claim height.
+// The outer box claims the full iframe height \u2014 it works because index.html sets
+// html/body/#root to 100% and #root is a flex column. Keep this chain plain: a
+// box that says nothing about \`flex\` is what breaks it.
 function Screen({ children }: { children: ReactNode }) {
   return (
-    <View style={{ flex: 1, padding: 24, alignItems: "center" }}>
-      <View style={{ maxWidth: 640, width: "100%", gap: 16 }}>{children}</View>
-    </View>
+    <div style={{ flex: 1, padding: 24, display: "flex", justifyContent: "center" }}>
+      <Stack gap={16} style={{ maxWidth: 640, width: "100%" }}>
+        {children}
+      </Stack>
+    </div>
   );
 }
 
@@ -47101,18 +47206,16 @@ function ListScreen() {
       </Text>
       {ITEMS.map((item) => (
         <Card key={item.id}>
-          <View
-            style={{
-              padding: 16,
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-            }}
+          <Stack
+            direction="row"
+            gap={8}
+            align="center"
+            justify="between"
+            style={{ padding: 16 }}
           >
             <Text weight="medium">{item.name}</Text>
             <Button title="Open" color="primary" onPress={() => navigate("/item/" + item.id)} />
-          </View>
+          </Stack>
         </Card>
       ))}
     </Screen>
@@ -47146,20 +47249,20 @@ function ItemDetailScreen() {
           \`<Button title="Back">\` with no \`color\` draws NOTHING at rest \u2014 no
           ground, no border, no underline \u2014 so its only affordance is a hover
           wash, which touch and keyboard never see. BackButton also carries its
-          own \`alignSelf\`, so it needs no wrapping View to sit left. */}
+          own \`alignSelf\`, so it needs no wrapping box to sit left. */}
       <BackButton onPress={() => navigate(-1)} />
       <Text size="xl" weight="semibold">{item ? item.name : "Not found"}</Text>
       {/* Every state gets its own content. Swapping only the TITLE left the card
           below still describing the record the title had just said was missing. */}
       {item ? (
         <Card>
-          <View style={{ padding: 16, gap: 8 }}>
+          <Stack gap={4} style={{ padding: 16 }}>
             <Text>Detail for item {id}.</Text>
             <Text color="muted">Reached via in-app navigation, not a host route.</Text>
-          </View>
+          </Stack>
         </Card>
       ) : (
-        <EmptyState message={"No item with id " + id + "."} />
+        <RegionState state="empty" message={"No item with id " + id + "."} />
       )}
     </Screen>
   );
@@ -47230,25 +47333,6 @@ alias the binding is keyed by).
 capabilities only. \`apps.workflows\` has exactly one author: \`set_app_workflow\`
 (which \`lotics app workflow set\` calls). The typed \`inputs\`/\`outputs\` schema for
 each alias lives in \`package.json#lotics.workflows.<alias>\`.
-`
-    },
-    {
-      path: "src/lucide-react-native.d.ts",
-      content: `// Type shim for lucide-react-native's deep-icon imports
-// (\`lucide-react-native/dist/esm/icons/<name>\`). The package ships JS-only
-// files without per-file .d.ts. The lucideIconsWebAlias() plugin in
-// vite.config.ts redirects these to lucide-react at resolve time; this
-// declaration covers the TypeScript compile-time gap.
-declare module "lucide-react-native/dist/esm/icons/*" {
-  import type { ComponentType } from "react";
-  const Icon: ComponentType<{
-    size: number;
-    color: string;
-    fill?: string;
-    strokeWidth?: number;
-  }>;
-  export default Icon;
-}
 `
     },
     {
@@ -47258,13 +47342,16 @@ declare module "lucide-react-native/dist/esm/icons/*" {
   export default classes;
 }
 
-// Plain side-effect CSS imports (@lotics/ui ships .tsx with import "./x.css").
+// Plain side-effect CSS imports \u2014 @lotics/ui/styles.css, and any sheet of
+// your own.
 declare module "*.css";
 `
     },
     {
-      path: "src/harness.test.ts",
+      path: "src/harness.test.tsx",
       content: `import { describe, test, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { Text } from "@lotics/ui/text";
 
 /**
  * The one test the scaffold seeds, and it is about the TEST SETUP rather than
@@ -47272,11 +47359,19 @@ declare module "*.css";
  * never has to be green over zero tests. It imports nothing of yours and
  * nothing generated, so it passes on a fresh clone before any codegen has run.
  *
+ * It renders a KIT component deliberately. @lotics/ui ships built ESM whose
+ * modules import their own \`.css\`, and a vitest that externalizes them dies
+ * with \`Unknown file extension ".css"\` on every suite that touches one \u2014 a
+ * whole-suite failure that a harness test importing only vitest would never
+ * see. \`test.server.deps.inline\` in vite.config.ts is what prevents it; this
+ * is what notices when that line goes.
+ *
  * Delete it once you have tests of your own, or keep it; it costs nothing.
  */
 describe("test harness", () => {
-  test("runs in a DOM", () => {
-    expect(typeof document).toBe("object");
+  test("renders a kit component in a DOM", () => {
+    const { container } = render(<Text>ok</Text>);
+    expect(container.textContent).toBe("ok");
   });
 });
 `
@@ -47317,6 +47412,59 @@ dist
 .DS_Store
 .lotics
 coverage
+`
+    },
+    {
+      path: "AGENTS.md",
+      content: `# ${args.app_name} \u2014 for the agent editing this app
+
+A Lotics custom-code app: React + Vite, data through \`@lotics/app-sdk\`, every pixel from
+\`@lotics/ui\`. Both are installed here \u2014 read them from \`node_modules\`, never from memory.
+
+## Read in this order, and stop when you have the answer
+
+1. **\`node_modules/@lotics/ui/llms.txt\`** \u2014 every kit entry by the data role it answers, its
+   import, and the one question that says where it does NOT go. One read, ~12k tokens.
+   **Start here for any UI question**, before writing a component of your own.
+2. **\`node_modules/@lotics/ui/dist/<module>.d.ts\`** \u2014 the props of the entry you picked, with the
+   source's own doc comments. **Never guess a prop; open the declaration.**
+3. **\`lotics docs ui/catalog/<Entry>\`** \u2014 that entry's full wrong-place test, one row.
+   **Never read \`catalog.md\` whole**: it is 334 entries, and you need one.
+4. **\`node_modules/@lotics/ui/examples/tpl_*.tsx\`** \u2014 a whole screen as source, when the SHAPE is
+   the question. Copy and adapt; never import from \`examples/\`.
+5. **\`node_modules/@lotics/app-sdk/AGENTS.md\`** \u2014 queries, workflows, files, AI.
+
+\`lotics docs\` lists what is installed here at the versions installed, so a reference always
+describes the code beside it. Every answer is capped at a page; a long one hands back its section
+list, and \`lotics docs <area>/<section>\` prints one section.
+
+## The rules that do not change
+
+- **Reuse before you build.** A capability the kit lacks is added to the kit, never hand-rolled
+  here. Search \`llms.txt\` for the role before writing a component.
+- **Customize through TOKENS and PROPS.** Tokens are the shadcn variables, the space rungs, the
+  radius ladder and the type ramp; props are \`variant\`, \`size\`, \`tone\`, \`render\` and slots.
+  \`className\`/\`style\` place an entry in your layout \u2014 they do not restyle it. The kit's DOM and
+  class names are private, so CSS that reaches inside an entry breaks on its next release.
+- **\`import "@lotics/ui/styles.css"\` once**, in \`src/main.tsx\` \u2014 it carries every token the kit's
+  \`var()\`s read, and without it the screen renders unstyled but working.
+- **A workflow is the only way this app writes.** Queries read; \`useWorkflow\` writes.
+
+## Before you commit \u2014 six checks
+
+1. **One value, one rendering.** A chart draws the entity its table draws, and a value's filter
+   renders it the way its cell does.
+2. **Every figure is formatted, by the reader's locale** \u2014 money, dates, quantities. A number
+   joined to a string is a number in somebody else's convention.
+3. **One accent.** Everything else is neutral or a valence, whose colour IS the meaning.
+4. **Every gap is a rung and the ratio is 1 : 3 : 6**: 4 inside a pair, 8 inside a group, 24
+   between bands, 48 between sections.
+5. **No bare native control.** A \`<button>\`, \`<input>\`, \`<select>\` or \`<table>\` in your source is a
+   control outside the type ramp, the locale and the keyboard contract.
+6. **No raw id reaches the reader.** \`rec_\`, \`opt_\` and \`fld_\` are keys; a cell shows the name.
+
+Then \`npm run typecheck && npm run lint && npm test\`, and \`lotics app deploy\`.
+The full review \u2014 the gates, the probes, the measurement snippets \u2014 is \`lotics docs ui/reviewing\`.
 `
     },
     {
@@ -47357,12 +47505,13 @@ import { Stack } from "@lotics/ui/stack";
 import { Card } from "@lotics/ui/card";
 import { Button } from "@lotics/ui/button";
 import { Text } from "@lotics/ui/text";
-// ... and Grid, Dialog, DatePicker, FormPicker, BarChart, LineChart, PieChart, Metric, ProgressBar, etc.
+// ... and Grid, Dialog, DatePicker, Select, BarChart, LineChart, PieChart, Metric, Progress, etc.
 \`\`\`
 
-@lotics/ui ships React Native primitives that render via react-native-web
-in this Vite app (the alias is preconfigured in \`vite.config.ts\`). See
-the full catalog with \`lotics docs ui\`.
+@lotics/ui ships built React DOM components with their own CSS \u2014 import
+\`@lotics/ui/styles.css\` once (main.tsx does) and every one of them is themed
+and addressable. Which entry answers which role is
+\`node_modules/@lotics/ui/llms.txt\`, one read.
 
 ## Routing
 
@@ -47375,11 +47524,15 @@ shareable and survives a full refresh. Standalone (\`<slug>.lotics.app\`) it's a
 normal browser router with real path URLs. A single-screen app can drop the
 router and render one screen directly.
 
-Run \`lotics docs\` for the SDK reference \u2014 it lists what the packages installed
-here actually ship, at the versions installed, so it can never point at a page
-that moved. \`lotics docs building_an_app\` is the sequence, read once before
-building; the area docs (\`lotics docs ai\`, \`lotics docs queries\`,
-\`lotics docs ui\`) are its detail.
+## References
+
+\`AGENTS.md\` in this directory is the reading order and the six checks before a
+commit. The references themselves ship inside the packages, so they always
+describe the versions installed here: \`node_modules/@lotics/ui/llms.txt\` and
+\`node_modules/@lotics/app-sdk/AGENTS.md\` are readable with no tooling at all.
+With the CLI on PATH, \`lotics docs\` indexes the same set and prints one page at
+a time \u2014 \`lotics docs building_an_app\` is the sequence, read once before
+building.
 `
     }
   ];
@@ -73643,8 +73796,8 @@ function warnAboutDevLink(projectDir, command) {
   const linked = config2.includes("loticsResolve") || config2.includes("LOTICS_UI_SRC");
   if (!linked) {
     console.error(
-      `\u26A0 LOTICS_UI_SRC is set but vite.config.ts never reads it \u2014 @lotics/ui will still resolve from node_modules, so kit edits will NOT ${command === "deploy" ? "ship" : "appear"}. Hand the whole resolve block to the kit (it owns the dev-link, the react-native alias, the extensions and the dedupe):
-    import { loticsOptimizeDeps, loticsResolve } from "@lotics/ui/vite";
+      `\u26A0 LOTICS_UI_SRC is set but vite.config.ts never reads it \u2014 @lotics/ui will still resolve from node_modules, so kit edits will NOT ${command === "deploy" ? "ship" : "appear"}. Hand the whole resolve block to the kit (it owns the dev-link and the React dedupe):
+    import { loticsResolve } from "@lotics/ui/vite";
     // \u2026
     resolve: loticsResolve(),`
     );
@@ -73722,6 +73875,71 @@ A newer kit is published \u2014 \`npm update ${findings.map((f) => f.pkg).join("
 ` + lines.join("\n")
   );
 }
+var KIT_SPECIFIER = "@lotics/ui/button";
+var KIT_INSTALLED_PATH = "/node_modules/@lotics/ui/dist/button.js";
+function inlineEntries(source) {
+  const out = [];
+  const key = /\binline\s*:\s*/g;
+  for (let match2 = key.exec(source); match2 !== null; match2 = key.exec(source)) {
+    const i2 = match2.index + match2[0].length;
+    if (source.startsWith("true", i2)) {
+      out.push({ kind: "everything" });
+      continue;
+    }
+    if (source[i2] !== "[") continue;
+    for (let depth = 1, i22 = i2 + 1; i22 < source.length && depth > 0; ) {
+      const c = source[i22];
+      if (c === "[") {
+        depth++;
+        i22++;
+      } else if (c === "]") {
+        depth--;
+        i22++;
+      } else if (c === '"' || c === "'" || c === "`") {
+        let j = i22 + 1;
+        while (j < source.length && source[j] !== c) j += source[j] === "\\" ? 2 : 1;
+        out.push({ kind: "string", value: source.slice(i22 + 1, j) });
+        i22 = j + 1;
+      } else if (c === "/" && source[i22 + 1] === "/") {
+        const nl = source.indexOf("\n", i22);
+        i22 = nl === -1 ? source.length : nl + 1;
+      } else if (c === "/" && source[i22 + 1] === "*") {
+        const end = source.indexOf("*/", i22);
+        i22 = end === -1 ? source.length : end + 2;
+      } else if (c === "/") {
+        let j = i22 + 1;
+        for (let inClass = false; j < source.length; j++) {
+          const ch = source[j];
+          if (ch === "\\") j++;
+          else if (ch === "[") inClass = true;
+          else if (ch === "]") inClass = false;
+          else if (ch === "/" && !inClass) break;
+          else if (ch === "\n") break;
+        }
+        if (source[j] === "/") {
+          let k = j + 1;
+          while (k < source.length && /[a-z]/.test(source[k])) k++;
+          out.push({ kind: "regex", source: source.slice(i22 + 1, j), flags: source.slice(j + 1, k) });
+          i22 = k;
+        } else i22++;
+      } else i22++;
+    }
+  }
+  return out;
+}
+function inlinesKitUnderVitest(viteConfig) {
+  return inlineEntries(viteConfig).some((entry) => {
+    if (entry.kind === "everything") return true;
+    if (entry.kind === "string")
+      return KIT_SPECIFIER === entry.value || KIT_SPECIFIER.startsWith(`${entry.value}/`);
+    try {
+      const re2 = new RegExp(entry.source, entry.flags.replace("g", ""));
+      return re2.test(KIT_SPECIFIER) || re2.test(KIT_INSTALLED_PATH);
+    } catch {
+      return false;
+    }
+  });
+}
 function ensureAppVitestSetup(projectDir) {
   const setupPath = path9.join(projectDir, VITEST_SETUP_FILENAME);
   if (!fs8.existsSync(setupPath)) {
@@ -73731,11 +73949,18 @@ function ensureAppVitestSetup(projectDir) {
   const viteConfigPath = path9.join(projectDir, "vite.config.ts");
   if (!fs8.existsSync(viteConfigPath)) return;
   const viteConfig = fs8.readFileSync(viteConfigPath, "utf-8");
-  if (/setupFiles\s*:/.test(viteConfig) && viteConfig.includes(VITEST_SETUP_FILENAME)) return;
-  console.error(
-    `\u26A0 vite.config.ts does not wire ${VITEST_SETUP_FILENAME}. Nothing is broken by that \u2014 it is the slot for global test setup (matchers, stubs, timezone pinning). Add it to the \`test\` block when you need one:
+  if (!(/setupFiles\s*:/.test(viteConfig) && viteConfig.includes(VITEST_SETUP_FILENAME))) {
+    console.error(
+      `\u26A0 vite.config.ts does not wire ${VITEST_SETUP_FILENAME}. Nothing is broken by that \u2014 it is the slot for global test setup (matchers, stubs, timezone pinning). Add it to the \`test\` block when you need one:
     setupFiles: ["./${VITEST_SETUP_FILENAME}"],`
-  );
+    );
+  }
+  if (!inlinesKitUnderVitest(viteConfig)) {
+    console.error(
+      `\u26A0 vite.config.ts does not inline @lotics/ui under vitest, so \`npm test\` fails to load every suite that renders a kit component ("Unknown file extension \\".css\\"") \u2014 the kit's modules import their own stylesheets and vitest hands node_modules to Node. Add it to the \`test\` block:
+    server: { deps: { inline: [/@lotics\\/ui/] } },`
+    );
+  }
 }
 async function appCodegen(args) {
   const projectDir = path9.resolve(args.projectDir ?? process.cwd());
@@ -74924,6 +75149,13 @@ function isVersionBelow(version2, floor2) {
   if (minor !== floorMinor) return minor < floorMinor;
   return patch < floorPatch;
 }
+function bundlesReactNative(projectDir) {
+  const manifest = path9.join(projectDir, "package.json");
+  if (!fs8.existsSync(manifest)) return false;
+  const pkg = JSON.parse(fs8.readFileSync(manifest, "utf-8"));
+  const declared = { ...pkg.dependencies, ...pkg.devDependencies };
+  return "react-native" in declared || "react-native-web" in declared;
+}
 function warnIfProjectFootguns(projectDir, sourceText) {
   const lines = [];
   const sdkVersion = installedKitVersion(projectDir, "@lotics/app-sdk");
@@ -74939,7 +75171,7 @@ function warnIfProjectFootguns(projectDir, sourceText) {
     );
   }
   const configName = VITE_CONFIG_NAMES.find((name2) => fs8.existsSync(path9.join(projectDir, name2)));
-  if (configName !== void 0) {
+  if (configName !== void 0 && bundlesReactNative(projectDir)) {
     const config2 = fs8.readFileSync(path9.join(projectDir, configName), "utf-8");
     const defined = defineBlockKeys(config2);
     const missing = ["global", "__DEV__"].filter((name2) => !defined.has(name2));
@@ -90327,11 +90559,11 @@ function buildXfXml(s, fontId, fillId, borderId, numFmtId) {
   if (s.horizontalAlign || s.verticalAlign || s.wrapText || s.indent || s.textRotation || s.shrinkToFit) {
     const hAlign = s.horizontalAlign ? ` horizontal="${s.horizontalAlign}"` : "";
     const vAlign = s.verticalAlign ? ` vertical="${s.verticalAlign}"` : "";
-    const wrap = s.wrapText ? ' wrapText="1"' : "";
+    const wrap2 = s.wrapText ? ' wrapText="1"' : "";
     const indent = s.indent ? ` indent="${s.indent}"` : "";
     const rotation = s.textRotation !== void 0 ? ` textRotation="${s.textRotation === "vertical" ? 255 : s.textRotation}"` : "";
     const shrink = s.shrinkToFit ? ' shrinkToFit="1"' : "";
-    return `<xf ${attrs} applyAlignment="1"><alignment${hAlign}${vAlign}${wrap}${indent}${rotation}${shrink}/></xf>`;
+    return `<xf ${attrs} applyAlignment="1"><alignment${hAlign}${vAlign}${wrap2}${indent}${rotation}${shrink}/></xf>`;
   }
   return `<xf ${attrs}/>`;
 }