@tinkerlandai/indiana-iam 0.5.0 → 0.7.0

package/README.md

@@ -1,13 +1,13 @@
 # @tinkerlandai/indiana-iam
 
-Build-time generator for the Indiana App Manifest (IAM). On every production build it scans your App's source, generates
-and validates the IAM, and writes the release descriptor your pages use to bind visual changes to that exact source.
-Indiana's App page map edits pages from these files; the browser SDK applies the published changes.
+Build-time generator for the Indiana App Manifest (IAM). It scans your App's source, generates and validates the IAM,
+and writes an immutable release descriptor. Web integrations bind published visual changes to that exact source.
+React Native / Expo integrations produce source previews; native visual-change execution is a separate capability.
 
 Install it as a development dependency (Node.js 22 or later):
 
 ```sh
-npm install --save-dev @tinkerlandai/indiana-iam
+npm install --save-dev --save-exact @tinkerlandai/indiana-iam@0.7.0
 ```
 
 ## Next.js (15.4.1 or later)
@@ -73,6 +73,77 @@ Browser apps use the single local module script in `index.html` to select reacha
 For multiple entry points, set `indianaIam({ entry: "src/main.tsx" })`, or pass `--entry src/main.tsx` to standalone generation.
 The path must stay inside the scanned root. Next.js uses its App/Pages root instead.
 
+## React Native and Expo Router
+
+Use the build-only `@tinkerlandai/indiana-iam/react-native` entry from a Node.js build script. Generate a separate artifact
+for each platform. It reuses the same IAM format, validator, asset packaging, release identity and upload client as Web.
+
+```js
+import { prepareReactNativeIam, finishReactNativeIam } from "@tinkerlandai/indiana-iam/react-native";
+
+const options = { root: process.cwd(), platform: "ios", routerRoot: "app", strict: true };
+const prepared = await prepareReactNativeIam(options);
+// Run your existing Expo / Metro bundle step here, using the same unchanged source.
+const result = await finishReactNativeIam({
+  ...options,
+  releaseId: prepared.releaseId,
+  bundleDirectory: "dist/ios", // asset staging directory inside root
+});
+// Include dist/ios + result.descriptorPath with this release's native assets.
+// result.file is the validated IAM outside the checkout.
+```
+
+For Android, use `platform: "android"` and a separate staging directory. With Expo Router, `routerRoot` defaults to
+the sole `app/` or `src/app/` directory. Ordinary route groups, index/dynamic/catch-all paths and nested `_layout`
+modules with `Slot`, `Stack` or `Tabs` retain route and source provenance. Group paths that collapse to the same URL
+are rejected. Shared array groups and native navigation state remain explicit gaps. Expo platform routes and layouts
+need a non-platform base module. For a single exported React Native screen, use `entry: "App.tsx"` instead of `routerRoot`.
+That entry does not extract a React Navigation graph or invoke `AppRegistry`.
+
+The adapter selects `.ios` / `.android`, then `.native`, then base modules using Metro's default JS/JSX/TS/TSX
+extensions. Literal `Platform.OS`, `Platform.select`, `StyleSheet.create`, `flatten`, `compose` and static style arrays
+are interpreted from source. Basic View/Text/Image, buttons, text inputs, scrolling and modal declarations project to
+inert semantic HTML. Local raster imports and literal `require` references use the existing bounded asset packer.
+Supported local state setters on `onPress` / `onChangeText` reuse the bounded preview interpreter. Business handlers,
+effects, remote data, custom Metro/Babel transforms, Yoga/device layout, safe-area measurement, navigation stacks,
+gestures and virtual lists are not executed; their missing behavior stays in coverage gaps.
+
+Every native preview node stays synthetic and supplies no SDK target binding, even when it has a `testID` or `nativeID`.
+This entry adds no native runtime dependency or automatic source-anchor transform. The descriptor records release identity;
+it does not install a native visual executor or make a Web visual script applicable to native views. Package its file
+with native assets in your existing release process; the helper does not configure Metro or Xcode/Gradle for you.
+
+Uploads are disabled by default. Explicitly authorized builds can pass
+`upload: { upload: "always", client: "rn-ios", apiKey, baseUrl }` to `finishReactNativeIam`;
+the default client is `rn-ios` / `rn-android`, and each client's platform is immutable. Use the matching Indiana
+ingestion validator version before uploading new source adapters. Local generation does not deploy it.
+
+Standalone generation uses the same adapter:
+
+```sh
+indiana-iam generate --root . --platform ios --router-root app --out <new folder outside checkout>
+indiana-iam generate --root . --platform android --entry App.tsx --out <another new folder>
+```
+
+## Memos integration example
+
+[`examples/memos/indiana.vite.config.mjs`](examples/memos/indiana.vite.config.mjs) wraps the original Vite configuration of
+[Memos v0.25.3](https://github.com/usememos/memos/tree/e17cd163c6c37726f8397c8f426d585b540c9562). It keeps Memos’s Go backend,
+SQLite database and application source, adds build anchors and binds the visual SDK to the generated release descriptor.
+
+After installing Memos’s own Web dependencies, set `INDIANA_MEMOS_WEB_ROOT` to its absolute `web` directory,
+`INDIANA_ENVIRONMENT_ID` to the intended Sandbox environment UUID, `INDIANA_CONSOLE_ORIGIN` to `https://dev.tinker.cash`
+and `INDIANA_API_ORIGIN` to `https://api.dev.tinker.cash`. From Memos’s `web` directory, run its installed `vite build`
+with `--config <Indiana checkout>/packages/iam/examples/memos/indiana.vite.config.mjs --mode release --outDir dist --emptyOutDir`.
+The example disables automatic uploads; upload the IAM file reported in the build log through the separately authorized IAM upload flow.
+
+Copy `web/dist` into Memos’s `server/router/frontend/dist` before building its native binary. Run that binary on
+`127.0.0.1:15230`, then run [`examples/memos/gateway.mjs`](examples/memos/gateway.mjs) with the same Web root. The gateway
+listens on `127.0.0.1:15231`, serves the generated `.well-known/indiana/releases/` descriptor omitted by Go’s `dist/*` embed,
+and forwards every other request unchanged to native Memos. Ports can be set with `INDIANA_MEMOS_PORT` and
+`INDIANA_MEMOS_BACKEND_PORT`. Allow the exact gateway origin in the same Sandbox environment before publishing page changes.
+Keep accounts, keys, SQLite files, generated manifests and binaries outside the committed example.
+
 ## Options
 
 Both integrations accept `{ enabled, name, automaticAnchors, strict, rootFont, omitSvgResources, logger, apiKey, baseUrl, upload, client }`;
@@ -83,8 +154,8 @@ If source changes during compilation, generation fails instead of publishing a d
 
 ## Target identity and release changes
 
-Framework builds reuse `id`, `data-testid`, `data-test`, `data-qa`, then `data-indiana-id`. When none is declared,
-the source loader adds a deterministic `data-indiana-id` to unambiguous native JSX in the build output and IAM.
+Next.js / Vite builds reuse `id`, `data-testid`, `data-test`, `data-qa`, then `data-indiana-id`. When none is declared,
+the source loader adds a deterministic `data-indiana-id` to unambiguous HTML JSX in the build output and IAM.
 Source files stay unchanged; formatting, comments and unrelated sibling insertions preserve a leaf's marker.
 Set `automaticAnchors: false` to use only existing attributes.
 
@@ -157,7 +228,7 @@ Source-proven `useSyncExternalStore` matchMedia getters retain both typed viewpo
 viewport. Subscriptions are not run. UI preference cookies with an explicit source SSR guard use an empty-cookie
 preview; auth/session cookies and arbitrary stores stay unobserved. Pure lazy local-state initializers are interpreted
 under the same bounded rules; merchant callbacks and browser storage are never executed or read.
-IAM has no configured page, node or total artifact byte limit. The exporter retains every supported route.
+Local IAM generation has no configured page, node or total artifact byte limit. The exporter retains every supported route. Online admission uses the environment's 512 MiB source storage budget, 256-version limit and build-key upload rate limit; it has no separate 8 MiB file cap.
 Large artifacts store sizeable HTML/preorder-map pairs as `domPayload` (`gzip-json-v1`), while keeping `html: ""`
 and `nodes: []` in that document's wire record. This lossless storage encoding preserves all source IDs, DOM values,
 HTML/DOM hashes and targets. Route navigation stores the exact interaction-array index instead of repeating its ID; validation checks node, route, destination and parameters. Source files retain their full hashes; component/element records cover reachable route compositions and shared fragments. Text node IDs that follow the original parent/index identity formula are derived locally instead of repeated; explicit exceptions remain stored, and every resolved source-map hash is checked. The document hash pins its encoded storage body; decoding is local and checks the exact declared size and hashes. Exported page HTML is expanded.
@@ -166,7 +237,7 @@ the selected document on demand, cancels superseded reads and retains one expand
 come from the complete validated IAM; the complete JSON remains the source of release identity.
 Serve the output directory over loopback HTTP to open `index.html`; browser `file://` restrictions prevent
 on-demand reads of its document files. Serving the exported files does not run the App or its backend.
-Use the matching 0.4 generator, validator and viewer together. Indiana ingestion/viewer sources must be updated
+Use the matching generator, validator and viewer from the same package version together. Indiana ingestion/viewer sources must be updated
 before uploading compressed artifacts; publishing this npm package alone does not deploy Indiana. The offline
 viewer uses the browser's built-in `DecompressionStream` and never fetches a decoder or merchant content.
 The scanner reads source files only; it never runs your build, imports your code or reads env files. Only the upload
@@ -175,11 +246,25 @@ Values that look like credentials, tokens, emails or private URLs are removed, b
 
 ## Upload
 
+IAM 0.7.0 uses the matching Indiana resumable ingestion protocol. Upgrade the build package together with the receiver.
+
 Create a Key with only the `app-manifests:write` permission (Console → developer settings) and set it as
 `INDIANA_IAM_KEY` in your build environment. Each production build then registers the IAM, stores it through a
-server-signed URL and asks Indiana to validate it; the validated version becomes its client's current version.
+private GCS resumable session and asks Indiana to validate it; the validated version becomes its client's current version.
 Rebuilding unchanged source only makes the existing version current again.
 
+Interrupted uploads resume when the same command or build runs again on the same machine. The uploader keeps the
+request ID, original label and private GCS session in `~/.cache/indiana/iam-uploads` (directory mode 0700, files 0600),
+scoped by Indiana origin, key fingerprint, client, platform and exact content. Set `INDIANA_IAM_CACHE_DIR` to a private
+directory to retain this state in a CI cache; CI workers with no shared cache start a new upload. Never publish this
+directory or place it in source/public build output. It contains bearer upload capabilities, but no API keys.
+On recovery, Indiana checks current key authority before the cached storage session is used. GCS's persisted offset
+selects the next byte; chunks are at most 8 MiB. Transient failures retry up to three times, while completed transfers
+retry validation without uploading again. Recovery retains the existing 15-minute SQL upload deadline; an expired
+intent starts a new version. A successful validation removes the local checkpoint. Storage sessions can remain valid
+longer than the SQL intent, but cannot make an expired or unauthorized version ready. The matching Indiana ingestion
+and build package must be deployed/published together for this transfer protocol.
+
 An App environment can hold several clients, each a named build with its own current version: for example `web` and
 `web-dashboard`, or later `ios` and `android` apps. Set the `client` option (or `INDIANA_IAM_CLIENT`) to 1-40 lowercase
 letters, digits or hyphens starting with a letter; the default is `web`. A client keeps the platform of its first

package/assets/document-controller.js

@@ -9,7 +9,14 @@
   }
   let machine = null, activeTabs = [],sourceUi=null,sourceRenderKey=null;
   const patches = new Map();
-  const node = id => [...document.querySelectorAll("[data-iam-node]")].find(e => e.dataset.iamNode === id);
+  const previewNodes = new Map([...document.querySelectorAll("[data-iam-node]")].map(el => [el.dataset.iamNode, el]));
+  const node = id => {
+    const cached = previewNodes.get(id);
+    if (cached?.isConnected) return cached;
+    const current = [...document.querySelectorAll("[data-iam-node]")].find(el => el.dataset.iamNode === id);
+    if (current) previewNodes.set(id, current);
+    return current;
+  };
   function viewportValues(graph,routeKey,renderKey){
     const values={};for(const variable of graph.variables??[]){
       if(variable.routeKey!==routeKey||variable.renderKey!==(renderKey??graph.routes.find(r=>r.routeKey===routeKey)?.initialRenderKey)||variable.valueType!=='boolean')continue;
@@ -34,6 +41,49 @@
     applySourceCollections(document,sourceUi,sourceRenderKey,values,true);
     markUnobservedData(document,sourceUi,true);
     for (const patch of patches.values()) applyPatch(patch);
+    reportProjection();
+  }
+  function reportProjection() {
+    const visibility = new WeakMap();
+    const visible = el => {
+      if (!el) return false;
+      if (visibility.has(el)) return visibility.get(el);
+      const style = getComputedStyle(el);
+      const result = !el.hidden && style.display !== "none" && style.visibility !== "hidden" &&
+        (!el.parentElement || visible(el.parentElement));
+      visibility.set(el, result);
+      return result;
+    };
+    const variables = new Set();
+    const reads = expression => {
+      if (!expression || typeof expression !== "object") return;
+      if (expression.op === "var") variables.add(expression.key);
+      for (const value of Object.values(expression)) {
+        if (Array.isArray(value)) value.forEach(reads);
+        else if (value && typeof value === "object") reads(value);
+      }
+    };
+    for (const binding of viewportGraph.bindings) {
+      if (binding.routeKey !== viewportRoute || binding.renderKey !== sourceRenderKey) continue;
+      const el = node(binding.nodeId);
+      if (el && visible(binding.property === "visible" ? el.parentElement : el)) reads(binding.value);
+    }
+    for (const transition of activeTransitions) if (visible(node(transition.trigger.nodeId))) {
+      transition.stateReads.forEach(key => variables.add(key));
+      transition.stateWrites.forEach(write => variables.add(write.variableKey));
+    }
+    const unobserved = [...document.querySelectorAll("[data-iam-preview-note]")].some(visible);
+    let content = false;
+    if (unobserved) {
+      const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+      let text;
+      while ((text = walker.nextNode())) if (text.textContent.trim() &&
+        !text.parentElement.closest("script,style,[data-iam-preview-note],[data-iam-observation]") && visible(text.parentElement)) {
+        content = true; break;
+      }
+      if (!content) content = [...document.querySelectorAll("img,svg,canvas,input,textarea,select,button")].some(visible);
+    }
+    send("projection", { visibleVariableKeys: [...variables], dataUnavailable: unobserved && !content });
   }
   function applyPatch(data) {
     const el = node(data.nodeId); if (!el) return;

package/assets/document-runtime.js

@@ -245,6 +245,9 @@ function markUnobservedData(doc, ui, enabled, selections = new Map()) {
     field.setAttribute("placeholder", "未观测");
     field.setAttribute("title", "此字段的数据未观测");
   }
+  for (const root of doc.querySelectorAll('[data-iam-source-template="unobserved"]')) {
+    const note=doc.createElement('div');note.setAttribute('data-iam-preview-note','unobserved');note.className='iam-observation-note';note.setAttribute('role','status');note.textContent='集合数据未观测 · 可检查源码组件结构';root.before(note);
+  }
   return unobserved;
 }
 /* Indiana UI simulation runtime 0.2.0. No merchant code, requests, authentication or purchases. */
@@ -258,7 +261,14 @@ function markUnobservedData(doc, ui, enabled, selections = new Map()) {
   }
   let machine = null, activeTabs = [],sourceUi=null,sourceRenderKey=null;
   const patches = new Map();
-  const node = id => [...document.querySelectorAll("[data-iam-node]")].find(e => e.dataset.iamNode === id);
+  const previewNodes = new Map([...document.querySelectorAll("[data-iam-node]")].map(el => [el.dataset.iamNode, el]));
+  const node = id => {
+    const cached = previewNodes.get(id);
+    if (cached?.isConnected) return cached;
+    const current = [...document.querySelectorAll("[data-iam-node]")].find(el => el.dataset.iamNode === id);
+    if (current) previewNodes.set(id, current);
+    return current;
+  };
   function viewportValues(graph,routeKey,renderKey){
     const values={};for(const variable of graph.variables??[]){
       if(variable.routeKey!==routeKey||variable.renderKey!==(renderKey??graph.routes.find(r=>r.routeKey===routeKey)?.initialRenderKey)||variable.valueType!=='boolean')continue;
@@ -283,6 +293,49 @@ function markUnobservedData(doc, ui, enabled, selections = new Map()) {
     applySourceCollections(document,sourceUi,sourceRenderKey,values,true);
     markUnobservedData(document,sourceUi,true);
     for (const patch of patches.values()) applyPatch(patch);
+    reportProjection();
+  }
+  function reportProjection() {
+    const visibility = new WeakMap();
+    const visible = el => {
+      if (!el) return false;
+      if (visibility.has(el)) return visibility.get(el);
+      const style = getComputedStyle(el);
+      const result = !el.hidden && style.display !== "none" && style.visibility !== "hidden" &&
+        (!el.parentElement || visible(el.parentElement));
+      visibility.set(el, result);
+      return result;
+    };
+    const variables = new Set();
+    const reads = expression => {
+      if (!expression || typeof expression !== "object") return;
+      if (expression.op === "var") variables.add(expression.key);
+      for (const value of Object.values(expression)) {
+        if (Array.isArray(value)) value.forEach(reads);
+        else if (value && typeof value === "object") reads(value);
+      }
+    };
+    for (const binding of viewportGraph.bindings) {
+      if (binding.routeKey !== viewportRoute || binding.renderKey !== sourceRenderKey) continue;
+      const el = node(binding.nodeId);
+      if (el && visible(binding.property === "visible" ? el.parentElement : el)) reads(binding.value);
+    }
+    for (const transition of activeTransitions) if (visible(node(transition.trigger.nodeId))) {
+      transition.stateReads.forEach(key => variables.add(key));
+      transition.stateWrites.forEach(write => variables.add(write.variableKey));
+    }
+    const unobserved = [...document.querySelectorAll("[data-iam-preview-note]")].some(visible);
+    let content = false;
+    if (unobserved) {
+      const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+      let text;
+      while ((text = walker.nextNode())) if (text.textContent.trim() &&
+        !text.parentElement.closest("script,style,[data-iam-preview-note],[data-iam-observation]") && visible(text.parentElement)) {
+        content = true; break;
+      }
+      if (!content) content = [...document.querySelectorAll("img,svg,canvas,input,textarea,select,button")].some(visible);
+    }
+    send("projection", { visibleVariableKeys: [...variables], dataUnavailable: unobserved && !content });
   }
   function applyPatch(data) {
     const el = node(data.nodeId); if (!el) return;

package/assets/viewer.css

@@ -706,6 +706,15 @@ button:disabled:hover { background: transparent; }
 .field input:disabled, .field textarea:disabled { color: var(--iam-ink-3); background: var(--iam-surface-sunk); }
 .state-control { display: grid; gap: 8px; margin-block: 12px; }
 .state-control select { width: 100%; min-height: 40px; border: 1px solid var(--iam-field-border); border-radius: 2px; background: var(--iam-surface); }
+.state-group { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
+.state-group legend { color: var(--iam-ink); font-weight: 500; overflow-wrap: anywhere; }
+.state-group .field { margin: 8px 0; }
+.state-group[hidden], .state-group .field[hidden] { display: none; }
+.state-other { margin-block: 12px; }
+.state-other summary { cursor: pointer; color: var(--iam-ink-2); }
+.projection-note { padding: 12px 16px; border-bottom: 1px solid var(--iam-line); background: var(--iam-surface-sunk); color: var(--iam-ink-2); }
+.projection-note p { margin: 0 0 8px; max-width: 80ch; }
+.projection-note[hidden] { display: none; }
 #preview { color-scheme: normal; background: #ffffff; }
 .frame-wrap { background: #ffffff; }
 body.embedded #export { display: none; }

package/assets/viewer.html

@@ -63,6 +63,10 @@
         <div class="breadcrumb">
           <span id="route"></span><span id="document-status"></span>
         </div>
+        <div id="projection-note" class="projection-note" role="status" hidden>
+          <p>此页面依赖未观测的运行时数据，当前无法展示完整内容。可查看未覆盖项，或从页面地图查看源码分支。</p>
+          <button id="projection-gaps">查看未覆盖项</button>
+        </div>
         <div class="canvas" id="canvas">
           <div class="frame-wrap" id="frame-wrap">
             <iframe

package/assets/viewer.js

@@ -67,7 +67,9 @@ const iamTranslations = {
   "界面状态": "UI states",
   "分析范围与未覆盖项": "Coverage and gaps",
   "DOM 映射 / SHA-256 / 源码证据": "DOM mappings / SHA-256 / source evidence",
-  "正在打开页面资料…": "Opening page data…"
+  "正在打开页面资料…": "Opening page data…",
+  "此页面依赖未观测的运行时数据，当前无法展示完整内容。可查看未覆盖项，或从页面地图查看源码分支。": "This page depends on runtime data that has not been observed. Its full content is unavailable. Review coverage gaps or inspect source branches in the page map.",
+  "查看未覆盖项": "Review coverage gaps"
 };
 const tr = value => iamEnglish ? iamTranslations[value] ?? value : value;
 // Theme changes are scoped to the Console tool shell, never its merchant iframe.
@@ -107,6 +109,7 @@ async function mountIamViewer(m, consoleContext) {
     nonce = "",
     viewport = matchMedia("(max-width: 900px)").matches ? 390 : 1280,
     pendingAnchor = null;
+  let projection = null, stateSearch = "";
   function setMobilePanel(panel) {
     document.body.dataset.panel = panel;
     for (const button of document.querySelectorAll(".mobile-panels [data-panel]")) {
@@ -305,6 +308,8 @@ async function mountIamViewer(m, consoleContext) {
     );
   }
   async function openPage(next, targetUrl = next.route, renderKey, historyMove=null) {
+    projection = null; stateSearch = "";
+    $("projection-note").hidden = true;
     if (consoleContext) targetUrl = viewUrl(targetUrl);
     retryOpen={pageKey:next.pageKey,targetUrl,renderKey,historyMove};
     if(consoleContext)consoleContext.documentReady=false;
@@ -479,6 +484,11 @@ async function mountIamViewer(m, consoleContext) {
       }
     }
     if (data.type === "selected") showSelection(data.element);
+    if (data.type === "projection" && Array.isArray(data.visibleVariableKeys)) {
+      projection = data;
+      $("projection-note").hidden = data.dataUnavailable !== true;
+      renderStates(uiValues.get(viewKey()) ?? {});
+    }
     if (data.type === "stateChanged") {uiValues.set(viewKey(),data.values);renderStates(data.values);}
     if (data.type === "navigate") {
       const interaction = m.interactions.find(
@@ -507,23 +517,66 @@ async function mountIamViewer(m, consoleContext) {
     if (data.type === "simulated") toast(data.message);
   });
   function renderStates(values = {}) {
-    const target = $("state-list"), canPreviewValues = scriptFor(doc).js.includes('type === "previewValues"'); target.replaceChildren();
+    const target = $("state-list"), canPreviewValues = scriptFor(doc).js.includes('type === "previewValues"');
+    const focused = document.activeElement?.dataset.variableKey;
+    const otherOpen = target.querySelector(".state-other")?.open ?? false;
+    target.replaceChildren();
     const renders=m.routeTree.renders?.filter(row=>row.routeKey===page.pageKey)??[];
     if(renders.length>1){const label=text('label',iamEnglish?'Page state':'页面状态','state-control'),select=document.createElement('select');select.setAttribute('aria-label',iamEnglish?'Page state':'页面状态');for(const [index,row]of renders.entries()){const option=document.createElement('option');option.value=row.renderKey;option.textContent=row.entryMode==='hard'?(iamEnglish?'Direct load':'直接打开'):(iamEnglish?'Soft navigation ':'软导航 ')+index;option.selected=row.renderKey===render?.renderKey;select.append(option);}select.addEventListener('change',()=>openPage(page,currentUrl,select.value));label.append(select);target.append(label);}
     const variables = m.routeTree.variables.filter(v => v.routeKey === page.pageKey && (!render || v.renderKey===render.renderKey));
     const stateSection = target.closest("details"), hasControls = String(variables.length > 0 || renders.length > 1);
     if (consoleContext && stateSection.dataset.hasControls !== hasControls) { stateSection.open = hasControls === "true"; stateSection.dataset.hasControls = hasControls; }
+    const active = new Set(projection?.visibleVariableKeys ?? []);
+    const other = document.createElement("details"); other.className = "state-other"; other.open = otherOpen;
+    other.append(text("summary", (iamEnglish ? "Other source states" : "其他源码状态") + ` (${variables.filter(v => !active.has(v.variableKey)).length})`));
+    const search = document.createElement("input"); search.type = "search"; search.value = stateSearch;
+    search.placeholder = iamEnglish ? "Find states or components" : "查找状态或组件";
+    search.setAttribute("aria-label", search.placeholder);
+    const searchLabel = text("label", iamEnglish ? "Filter states" : "筛选状态", "field"); searchLabel.append(search);
+    if (variables.length > 8) target.append(searchLabel);
+    const groups = new Map();
+    const filter = () => {
+      stateSearch = search.value;
+      const query = stateSearch.trim().toLocaleLowerCase();
+      for (const group of groups.values()) {
+        let shown = false;
+        for (const field of group.querySelectorAll(".field")) {
+          field.hidden = !field.dataset.search.includes(query); shown ||= !field.hidden;
+        }
+        group.hidden = !shown;
+      }
+      if (query) other.open = true;
+    };
+    search.addEventListener("input", filter);
     for (const variable of variables) {
+      const source = typeof variable.source === "number" ? m.routeTree.sourcePool?.[variable.source] : variable.source;
+      const owner = source?.symbol || source?.file?.split("/").at(-1) || (iamEnglish ? "Page" : "页面");
+      const isActive = active.has(variable.variableKey), groupKey = `${isActive}:${source?.file}:${owner}`;
+      if (!groups.has(groupKey)) {
+        const group = document.createElement("fieldset"); group.className = "state-group";
+        group.append(text("legend", owner)); groups.set(groupKey, group);
+        (isActive ? target : other).append(group);
+      }
+      const group = groups.get(groupKey);
       const value = Object.hasOwn(values, variable.variableKey) ? values[variable.variableKey] : variable.initialValue;
-      if (!canPreviewValues) { target.append(text("p", variable.label + " = " + JSON.stringify(value))); continue; }
+      if (!canPreviewValues) {
+        const field = text("p", variable.label + " = " + JSON.stringify(value), "field");
+        field.dataset.search = `${variable.label} ${owner} ${source?.file ?? ""}`.toLocaleLowerCase();
+        group.append(field); continue;
+      }
       const label = text("label", variable.label, "field"), input = document.createElement("input");
+      label.dataset.search = `${variable.label} ${owner} ${source?.file ?? ""}`.toLocaleLowerCase();
+      if (source) label.title = `${source.file}:${source.line}`;
       input.dataset.variableKey = variable.variableKey;
       input.type = variable.valueType === "boolean" ? "checkbox" : variable.valueType === "number" ? "number" : "text";
       input.setAttribute("aria-label", variable.label); input.maxLength = 4000;
       if (variable.valueType === "boolean") input.checked = value; else input.value = String(value);
       input.addEventListener("change", () => message("previewValues", { values: { [variable.variableKey]: variable.valueType === "boolean" ? input.checked : variable.valueType === "number" ? Number(input.value) : input.value } }));
-      label.append(input); target.append(label);
+      label.append(input); group.append(label);
     }
+    if (variables.some(v => !active.has(v.variableKey))) target.append(other);
+    filter();
+    if (focused) [...target.querySelectorAll("input")].find(input => input.dataset.variableKey === focused)?.focus();
     if (variables.length && canPreviewValues) target.append(text("p", tr("仅模拟界面值，不执行业务操作，也不保存为线上修改。")));
     const transitions = m.routeTree.transitions.filter(t => t.routeKey === page.pageKey && (!render || t.renderKey===render.renderKey));
     target.append(text("p", transitions.length + tr(" 个可模拟变化；其他业务行为列于未覆盖项。")));
@@ -761,11 +814,17 @@ function expandDomNodes(document, body, deriveTextId) {
     toast(tr("字号须为 8–120，已恢复当前值。"));
   });
   $("color").addEventListener("input", () => patch("color", $("color").value));
+  $("pick").setAttribute("aria-pressed", String(selecting));
   $("pick").addEventListener("click", () => {
     selecting = !selecting;
     $("pick").classList.toggle("active", selecting);
+    $("pick").setAttribute("aria-pressed", String(selecting));
     message("mode", { selecting });
   });
+  $("projection-gaps").addEventListener("click", () => {
+    const section = $("gaps").closest("details"); section.open = true;
+    setMobilePanel("inspector"); section.querySelector("summary").focus();
+  });
   let fitRequest = 0;
   if (typeof ResizeObserver !== "undefined") new ResizeObserver(() => {
     cancelAnimationFrame(fitRequest);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tinkerlandai/indiana-iam",
-  "version": "0.5.0",
-  "description": "Build-time Indiana App Manifest (IAM) generator for Next.js and Vite apps: scans source after the production build and writes the IAM and its release descriptor.",
+  "version": "0.7.0",
+  "description": "Build-time Indiana App Manifest (IAM) generator for Next.js, Vite and React Native / Expo source.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -38,6 +38,10 @@
     "./vite": {
       "types": "./src/vite.d.ts",
       "import": "./src/vite.mjs"
+    },
+    "./react-native": {
+      "types": "./src/react-native.d.ts",
+      "import": "./src/react-native.mjs"
     }
   },
   "scripts": {