@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/FrappeLikedBy.stories.tsx

@@ -14,12 +14,83 @@ export default {
     docs: {
       description: {
         component:
-          "Heart / like toggle for one document: count + avatar cluster from the `_liked_by` JSON field, optimistic toggle via the whitelisted `frappe.desk.like.toggle_like` method (fixtures emulate it with an optimistic collection update), live doc subscription so out-of-band likes update in place.",
+          "Heart / like toggle for one document: count + avatar cluster from the `_liked_by` JSON field, optimistic toggle via the whitelisted `frappe.desk.like.toggle_like` method (fixtures emulate it with an optimistic collection update), live doc subscription so out-of-band likes update in place. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request the browser
+// rejected with CORS, poisoning the console for every automated probe.
+// MOCK_HOST keeps the same code path (real fetch, real meta shape) without
+// leaving the machine; ERR_HOST is the deliberate failure host for LoadError.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappelikedby.mock.test";
+const ERR_HOST = "https://forbidden.frappelikedby.mock.test";
+
+function likedByMetaRaw(name: string) {
+  return {
+    name,
+    module: name === "User" ? "Core" : name === "ToDo" ? "Desk" : "Projects",
+    title_field: name === "User" ? "full_name" : "subject",
+    fields: [
+      { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+      { fieldname: "_liked_by", fieldtype: "Text", label: "Liked By", hidden: 1 },
+      { fieldname: "full_name", fieldtype: "Data", label: "Full Name" },
+      { fieldname: "user_image", fieldtype: "Attach Image", label: "User Image", hidden: 1 },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeLikedByMockFetch) return;
+  w.__frappeLikedByMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(ERR_HOST)) return jsonResponse({ message: "Not permitted" }, 403);
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "Task";
+        return jsonResponse({ docs: [likedByMetaRaw(decodeURIComponent(doctype))] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: likedByMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "Task", module: "Projects" },
+            { name: "ToDo", module: "Desk" },
+            { name: "User", module: "Core" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts, likes RPC): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 const userFixtures: FrappeUserDoc[] = [
   { name: "Administrator", doctype: "User", full_name: "Administrator" },
   { name: "jane@example.com", doctype: "User", full_name: "Jane Doe" },
@@ -68,7 +139,7 @@ const makeFixtures = () =>
 
 /** Liked by the current user: filled heart, count 2, two avatars. Toggling flips optimistically. */
 export const Main = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy
       doctype="Task"
       name="TASK-001"
@@ -81,7 +152,7 @@ Main.storyName = "Main";
 
 /** Current user has not liked the doc: outline heart, existing likes still render. */
 export const NotLiked = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy
       doctype="Task"
       name="TASK-001"
@@ -93,28 +164,28 @@ export const NotLiked = () => (
 
 /** Zero likes: outline heart only — no count, no avatars. */
 export const NoLikes = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy doctype="Task" name="TASK-002" currentUser="Administrator" />
   </FrappeProvider>
 );
 
 /** Six likers with maxAvatars=3: three avatars + a "+3" overflow bubble. */
 export const ManyLikes = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy doctype="Task" name="TASK-003" currentUser="Administrator" maxAvatars={3} />
   </FrappeProvider>
 );
 
 /** Avatar cluster suppressed — heart + count only. */
 export const WithoutAvatars = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy doctype="Task" name="TASK-001" currentUser="Administrator" showAvatars={false} />
   </FrappeProvider>
 );
 
 /** disabled: list renders, the heart does not toggle. */
 export const Disabled = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <FrappeLikedBy doctype="Task" name="TASK-001" currentUser="Administrator" disabled />
   </FrappeProvider>
 );
@@ -137,7 +208,7 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
 
 /** Doc subscription still syncing — skeleton chrome, never "zero likes" (LC-20 / DG-ST-02). */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <FrappeLikedBy doctype="Task" name="TASK-001" currentUser="Administrator" />
   </FrappeProvider>
 );
@@ -145,10 +216,11 @@ export const Loading = () => (
 /**
  * Live doc subscription against an unreachable host with no fixtures: the
  * failed initial sync surfaces as error chrome with Retry instead of
- * masquerading as "no likes" (DG-ST-01 / Axiom 6).
+ * masquerading as "no likes" (DG-ST-01 / Axiom 6). The failure is served
+ * hermetically — the in-story mock answers ERR_HOST with 403.
  */
 export const LoadError = () => (
-  <FrappeProvider baseURL="https://frappe-likedby-error.mock.test">
+  <FrappeProvider baseURL={ERR_HOST}>
     <FrappeLikedBy doctype="Task" name="TASK-001" />
   </FrappeProvider>
 );

package/src/FrappeLikedBy.tsx

@@ -13,7 +13,7 @@
  */
 import { AsyncBoundary, Avatar } from "@multiplatform.one/components";
 import { HttpClient, useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { Button } from "@multiplatform.one/forms";
+import { Button, formCommonColors } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -291,8 +291,8 @@ function FrappeLikedByBody({
                 color={
                   liked
                     ? isWeb
-                      ? "var(--red10)"
-                      : theme.red10?.val
+                      ? formCommonColors.error
+                      : theme.red11?.val
                     : isWeb
                       ? "currentColor"
                       : theme.color?.val
@@ -302,8 +302,8 @@ function FrappeLikedByBody({
           />
           {likedBy.length > 0 ? (
             <Text
-              fontSize="$2"
-              color="$color11"
+              {...knobProps.label}
+              color={formCommonColors.muted}
               aria-label={t("Liked by {{count}} users", { count: likedBy.length })}
               testID="frappe-liked-by-count"
             >
@@ -334,7 +334,7 @@ function FrappeLikedByBody({
         </XStack>
       </AsyncBoundary>
       {actionError ? (
-        <Text role="alert" fontSize="$2" color="$red11">
+        <Text role="alert" {...knobProps.label} color={formCommonColors.error}>
           {actionError}
         </Text>
       ) : null}

package/src/FrappeList.stories.tsx

@@ -14,12 +14,89 @@ export default {
     docs: {
       description: {
         component:
-          "List over useFrappePagination → useFrappeCollection / useLiveQuery. Stories below use InMemoryFixtureProvider so the live path runs against fixtures (not a silent static items prop).",
+          "List over useFrappePagination → useFrappeCollection / useLiveQuery. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but FrappeList still resolves
+// DocType meta over HTTP — so every one of those stories fired a real
+// cross-origin request that the browser rejected with a CORS error, poisoning
+// the console for every automated probe. MOCK_HOST keeps the same code path
+// (real fetch, real meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappelist.mock.test";
+
+function todoMetaRaw(name: string) {
+  return {
+    name,
+    module: "Desk",
+    title_field: "description",
+    fields: [
+      { fieldname: "description", fieldtype: "Data", label: "Description", in_list_view: 1 },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nWorking\nCompleted",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+      {
+        fieldname: "priority",
+        fieldtype: "Select",
+        label: "Priority",
+        options: "Low\nMedium\nHigh",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+      { fieldname: "date", fieldtype: "Date", label: "Due Date" },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeListMockFetch) return;
+  w.__frappeListMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "ToDo";
+        return jsonResponse({ docs: [todoMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 interface ToDo {
   name: string;
   doctype: string;
@@ -40,7 +117,7 @@ const todoFixtures: ToDo[] = Array.from({ length: 100 }, (_, i) => ({
 
 export const Default = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures.slice(0, 10) })}
   >
     <FrappeList<ToDo>
@@ -76,7 +153,7 @@ Default.parameters = {
 Default.storyName = "Main";
 export const WithCustomFieldRenderer = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures.slice(0, 10) })}
   >
     <FrappeList<ToDo>
@@ -186,7 +263,7 @@ const renderTodo = (doc: Partial<ToDo>) => (
 
 /** Collection stuck syncing: the underlying List renders its list skeleton (LC-20 / DG-ST-02). */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <FrappeList<ToDo> doctype="ToDo" renderItem={renderTodo} height={400} />
   </FrappeProvider>
 );
@@ -194,7 +271,7 @@ export const Loading = () => (
 /** Zero documents, no failure — "No ToDo records found" (empty ≠ error). */
 export const Empty = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
   >
     <FrappeList<ToDo> doctype="ToDo" renderItem={renderTodo} height={400} />
@@ -210,7 +287,7 @@ export const Empty = () => (
  */
 export const LoadError = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
   >
     <FrappeList<ToDo>
@@ -231,7 +308,7 @@ export const LoadError = () => (
  */
 export const NoResults = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures.slice(0, 10) })}
   >
     <FrappeList<ToDo>
@@ -246,7 +323,7 @@ export const NoResults = () => (
 
 export const VirtualScrolling = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures })}
   >
     <FrappeList<ToDo>

package/src/FrappeListView.spec.tsx

@@ -25,6 +25,7 @@ const metaRaw = {
   name: "QaTodo",
   module: "QA",
   title_field: "description",
+  image_field: "avatar",
   fields: [
     {
       fieldname: "description",
@@ -41,6 +42,12 @@ const metaRaw = {
       in_list_view: 1,
       in_standard_filter: 1,
     },
+    {
+      fieldname: "avatar",
+      fieldtype: "Attach Image",
+      label: "Avatar",
+      hidden: 1,
+    },
   ],
   permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
 };
@@ -85,6 +92,11 @@ const fixtures = new InMemoryFixtureProvider({
       doctype: "QaTodo",
       description: "Review document",
       status: "Open",
+      avatar:
+        "data:image/svg+xml;utf8," +
+        encodeURIComponent(
+          '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="#4a90d9"/></svg>',
+        ),
     },
   ],
 });
@@ -142,3 +154,50 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
     expect(onAdd).toHaveBeenCalledTimes(1);
   });
 });
+
+// Design-law 100% (theme-propagation-spec FrappeListView): avatar geometry
+// rides nestedControl (R-PILL / size recipe), not a 40px literal; title and
+// filter labels take body/label recipes (400/700), not 500/600 literals.
+const midWeightAtom = /(?:^|\s)(?:_fw-|_fow-|_fontWeight-)(?:500|600)(?:\s|$)/;
+
+describe("FrappeListView design-law (avatar + type)", () => {
+  it("list-row avatars are nested and follow nestedControl, not a 40px literal", async () => {
+    const { container } = renderListView();
+    const avatar = await waitFor(() => {
+      const node = container.querySelector("[data-avatar-px]");
+      expect(node).not.toBeNull();
+      return node as HTMLElement;
+    });
+    expect(avatar.getAttribute("data-avatar-nested")).toBe("true");
+    expect(Number(avatar.getAttribute("data-avatar-px"))).toBe(32);
+    expect(Number(avatar.getAttribute("data-avatar-px"))).not.toBe(40);
+  });
+
+  it("row title uses the body recipe weight, not 500", async () => {
+    const { container } = renderListView();
+    const title = await waitFor(() => {
+      const node =
+        (container.querySelector('[data-list-slot="title"]') as HTMLElement | null) ??
+        (Array.from(container.querySelectorAll("*")).find(
+          (el) => el.textContent === "Review document" && el.children.length === 0,
+        ) as HTMLElement | undefined) ??
+        null;
+      expect(node).not.toBeNull();
+      return node as HTMLElement;
+    });
+    expect(title.textContent).toContain("Review document");
+    expect(title.className).not.toMatch(midWeightAtom);
+  });
+
+  it("filter sidebar labels use the label recipe, not weight 600", async () => {
+    const { container } = renderListView({ showFilterSidebar: true });
+    const heading = await waitFor(() => {
+      const node = Array.from(container.querySelectorAll("*")).find(
+        (el) => el.textContent === "Filters" && el.children.length === 0,
+      );
+      expect(node).not.toBeNull();
+      return node as HTMLElement;
+    });
+    expect(heading.className).not.toMatch(midWeightAtom);
+  });
+});

package/src/FrappeListView.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Button, SearchInput, Spinner } from "@multiplatform.one/forms";
 import { Text, View, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { SavedFilterDropdown, useSavedFilters, type ParsedFilter } from "@multiplatform.one/table";
-import { Avatar, ViewSwitcher } from "@multiplatform.one/components";
+import { Avatar, ViewSwitcher, componentColors } from "@multiplatform.one/components";
 import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -281,23 +281,23 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         .filter((part) => part !== null);
       const imageUrl = imageFieldName ? resolveImageUrl(row[imageFieldName], finalBaseURL) : "";
 
+      const titleName = typeof title === "string" ? title : undefined;
       return (
-        <XStack alignItems="center" gap="$3" paddingVertical="$2" paddingHorizontal="$3">
+        <XStack alignItems="center" flex={1} minWidth={0} width="100%" {...knobProps.gap}>
           {imageUrl ? (
-            <Avatar circular size={40} backgroundColor="$color3">
-              <Avatar.Image
-                src={imageUrl}
-                alt={typeof title === "string" ? title : ""}
-                objectFit="cover"
-              />
-            </Avatar>
+            <Avatar nested circular src={imageUrl} name={titleName} alt={titleName ?? ""} />
           ) : null}
-          <YStack flex={1} gap="$0.5">
-            <Text fontSize="$4" fontWeight="500" numberOfLines={1}>
+          <YStack flex={1} minWidth={0}>
+            <Text
+              {...knobProps.body}
+              color={componentColors.text.primary}
+              numberOfLines={1}
+              {...({ "data-list-slot": "title" } as Record<string, unknown>)}
+            >
               {title}
             </Text>
             {subtitleParts.length > 0 && (
-              <Text color="$color10" fontSize="$2" numberOfLines={1}>
+              <Text {...knobProps.body} color={componentColors.text.muted} numberOfLines={1}>
                 {subtitleParts.map((part, index) => (
                   <React.Fragment key={index}>
                     {index > 0 ? " · " : null}
@@ -310,7 +310,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         </XStack>
       );
     },
-    [effectiveDisplayFields, imageFieldName, finalBaseURL],
+    [effectiveDisplayFields, imageFieldName, finalBaseURL, knobProps],
   );
 
   const effectiveColumns = useMemo((): DataTableColumn<Partial<TDoc>>[] => {
@@ -431,7 +431,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         {...stackProps}
       >
         <Spinner size="large" />
-        <Text color="$color10" marginTop="$2">
+        <Text {...knobProps.body} color={componentColors.text.muted} marginTop="$2">
           {t("Loading {{doctype}} schema...", { doctype })}
         </Text>
       </YStack>
@@ -444,11 +444,10 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
     return (
       <XStack
         {...knobProps.panelPadding}
-        {...knobProps.surface}
         alignItems="center"
         justifyContent="space-between"
-        // knobProps.surface carries a full borderWidth; keep only the bottom
-        // hairline so the toolbar reads as a band, not a floating box.
+        // Frame owns SF-CARD; this band is flattened (zero box border, one
+        // bottom hairline) so it does not paint a second surface.
         borderWidth={0}
         borderBottomWidth={1}
         borderBottomColor="$borderColor"
@@ -500,11 +499,9 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack
         width={220}
-        {...knobProps.surface}
-        // knobProps.surface carries a full borderWidth; keep only the
-        // inline-end hairline (same band treatment as the toolbar). Web uses
-        // inline style so the CSS logical props deterministically beat the
-        // physical border-right-width:0 from the borderWidth expansion
+        // Frame owns SF-CARD; sidebar is a flattened band (inline-end
+        // hairline only). Web uses inline style so the CSS logical props
+        // beat physical border-right-width:0 from the borderWidth expansion
         // (tamagui borderEndWidth does not compile to working CSS, SB-M-1215).
         borderWidth={0}
         {...(isWeb
@@ -519,17 +516,17 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         {...knobProps.panelPadding}
         {...knobProps.gap}
       >
-        <Text fontWeight="600" fontSize="$2" color="$color10">
+        <Text {...knobProps.label} color={componentColors.text.muted}>
           {t("Filters")}
         </Text>
         {standardFilterFields.length > 0 && (
           <YStack {...knobProps.gap}>
             {standardFilterFields.map((field) => (
-              <YStack key={field.fieldname} gap="$1">
-                <Text fontSize="$1" color="$color10">
+              <YStack key={field.fieldname} {...knobProps.gap}>
+                <Text {...knobProps.label} color={componentColors.text.muted}>
                   {field.label || field.fieldname}
                 </Text>
-                <Text fontSize="$2" color="$color10">
+                <Text {...knobProps.body} color={componentColors.text.muted}>
                   {field.fieldtype === "Select" ? field.options || "—" : "—"}
                 </Text>
               </YStack>
@@ -538,7 +535,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         )}
         {savedFiltersHook.filters.length > 0 && (
           <YStack {...knobProps.gap}>
-            <Text fontWeight="600" fontSize="$2" color="$color10">
+            <Text {...knobProps.label} color={componentColors.text.muted}>
               {t("Saved Filters")}
             </Text>
             <SavedFilterDropdown
@@ -558,9 +555,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
   const renderListSearch = () => (
     <XStack
       alignItems="center"
-      paddingHorizontal="$2"
-      paddingVertical="$2"
-      backgroundColor="$color3"
+      {...knobProps.panelPadding}
       borderBottomWidth={1}
       borderBottomColor="$borderColor"
     >
@@ -629,7 +624,9 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
   return (
     <YStack
       flex={1}
+      {...knobProps.surface}
       {...knobProps.containerRadius}
+      overflow="hidden"
       testID={`${doctype.toLowerCase()}-list`}
       {...stackProps}
     >

package/src/FrappeProvider.stories.tsx

@@ -11,12 +11,63 @@ export default {
     docs: {
       description: {
         component:
-          "Non-visual context provider for Frappe connection configuration. Stories render a probe consumer that prints what the provider supplies.",
+          "Non-visual context provider for Frappe connection configuration. Stories render a probe consumer that prints what the provider supplies. The Main story is network-hermetic (G-15/D-05): baseURL is MOCK_HOST and an in-story fetch mock swallows any REST to that origin so nothing leaves the machine.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// provider itself does not fetch, but any consumer that resolves DocType meta
+// from baseURL would. MOCK_HOST keeps the same code path without leaving the
+// machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappeprovider.mock.test";
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeProviderMockFetch) return;
+  w.__frappeProviderMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({
+          data: {
+            name: decodeURIComponent(metaMatch[1]),
+            module: "Custom",
+            fields: [],
+            permissions: [{ role: "All", read: 1 }],
+          },
+        });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [] });
+      }
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        return jsonResponse({ docs: [] });
+      }
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 function ConfigProbe({ probeId = "config-probe" }: { probeId?: string }) {
   const config = useFrappeConfig();
   return (
@@ -40,7 +91,7 @@ function ConfigProbe({ probeId = "config-probe" }: { probeId?: string }) {
 
 export const Main = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     socketPort={9000}
     auth={{ useToken: true, token: "story-token", type: "token" }}
     fixtures={new InMemoryFixtureProvider({})}