@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/FrappeChartCard.stories.tsx

@@ -2,6 +2,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { XStack, YStack } from "tamagui";
 import { ChartCard } from "./FrappeDashboard";
 import { FrappeChartCard } from "./FrappeChartCard";
+import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
 export default {
@@ -13,12 +14,79 @@ export default {
     docs: {
       description: {
         component:
-          "ChartCard as re-exported by @multiplatform.one/frappe-ui (the 'Frappe ChartCard' bridge). Same component object as the components-package ChartCard; stories exercise chart modes and series edge cases.",
+          "ChartCard as re-exported by @multiplatform.one/frappe-ui (the 'Frappe ChartCard' bridge). Same component object as the components-package ChartCard; stories exercise chart modes and series edge cases. The dataSource story is 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).
+//
+// The FrappeChartCard dataSource path previously rode FrappeStoryProvider,
+// whose offline fallback is https://demo.frappe.cloud. The fixture provider
+// serves the *collection*, but DocType meta still resolves over HTTP — so
+// native Storybook / Kitchen Sink fired a real cross-origin request the
+// browser rejected with CORS. MOCK_HOST keeps the same code path (real
+// fetch, real meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappechartcard.mock.test";
+
+function todoMetaRaw(name: string) {
+  return {
+    name,
+    module: "Desk",
+    title_field: "description",
+    fields: [
+      { fieldname: "description", fieldtype: "Small Text", label: "Description", in_list_view: 1 },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nClosed\nCancelled",
+        in_list_view: 1,
+        in_standard_filter: 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.__frappeChartCardMockFetch) return;
+  w.__frappeChartCardMockFetch = 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(decodeURIComponent(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, group_by): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 const monthly = [
   { label: "Jan", value: 12 },
   { label: "Feb", value: 19 },
@@ -97,10 +165,10 @@ export const CustomHeightAndColors = () => (
 );
 
 // ---------------------------------------------------------------------------
-// Live grouped aggregate (FrappeChartCard + dataSource): one data point per
-// group, computed server-side (get_list + group_by), refetched (debounced) on
-// realtime events. Bench when reachable, fixtures otherwise. Palette is left
-// to the canonical tokenized chart palette defaults (LC-27).
+// Hermetic grouped aggregate (FrappeChartCard + dataSource): one data point
+// per group, computed from fixtures. Native Storybook / Kitchen Sink show
+// this path — never demo.frappe.cloud. Palette is left to the canonical
+// tokenized chart palette defaults (LC-27).
 // ---------------------------------------------------------------------------
 
 const liveTodoFixtures = [
@@ -109,21 +177,46 @@ const liveTodoFixtures = [
   { name: "TD-3", doctype: "ToDo", description: "Fixture todo C", status: "Closed" },
 ];
 
-export const LiveToDoByStatus = () => (
+const todoByStatusChart = (
+  <YStack width={480} testID="live-todo-by-status">
+    <FrappeChartCard
+      config={{ id: "todo-by-status", title: "ToDos by Status", type: "bar", showLabels: true }}
+      dataSource={{ doctype: "ToDo", groupBy: "status" }}
+    />
+  </YStack>
+);
+
+export const ToDoByStatus = () => (
+  <FrappeProvider
+    baseURL={MOCK_HOST}
+    fixtures={new InMemoryFixtureProvider({ ToDo: liveTodoFixtures })}
+  >
+    {todoByStatusChart}
+  </FrappeProvider>
+);
+ToDoByStatus.parameters = {
+  docs: {
+    description: {
+      story:
+        "Hermetic bar chart: count of fixture ToDo documents grouped by status. MOCK_HOST plus the in-story fetch intercept serve DocType meta so native Storybook never hits demo.frappe.cloud.",
+    },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Live grouped aggregate: bench when reachable, fixtures otherwise.
+// ---------------------------------------------------------------------------
+
+export const Live = () => (
   <FrappeStoryProvider fixtures={new InMemoryFixtureProvider({ ToDo: liveTodoFixtures })}>
-    <YStack width={480} testID="live-todo-by-status">
-      <FrappeChartCard
-        config={{ id: "todo-by-status", title: "ToDos by Status", type: "bar", showLabels: true }}
-        dataSource={{ doctype: "ToDo", groupBy: "status" }}
-      />
-    </YStack>
+    {todoByStatusChart}
   </FrappeStoryProvider>
 );
-LiveToDoByStatus.parameters = {
+Live.parameters = {
   docs: {
     description: {
       story:
-        "LIVE bar chart: count of ToDo documents grouped by status, aggregated server-side and refetched with a 300ms coalescing window on realtime list_update / doc_update / doc_deleted. Create/close/delete ToDos on the bench and the bars move in place — no reload.",
+        "LIVE bar chart: count of ToDo documents grouped by status, aggregated server-side and refetched with a 300ms coalescing window on realtime list_update / doc_update / doc_deleted. Create/close/delete ToDos on the bench and the bars move in place — no reload. Fixture fallback when the bench is unreachable.",
     },
   },
 };

package/src/FrappeChartCard.tsx

@@ -18,13 +18,14 @@
  */
 import {
   AsyncBoundary,
+  Card,
   Skeleton,
   type ChartCardProps,
   type ChartConfig,
 } from "@multiplatform.one/components";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Card, YStack, type YStackProps } from "tamagui";
+import { YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ChartCard } from "./FrappeDashboard";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -73,17 +74,9 @@ function ChartCardSkeleton({
   const { t } = useTranslation();
   return (
     <YStack {...knobProps.gap} aria-busy aria-label={t("Loading")} {...stackProps}>
-      <Skeleton width="40%" height={16} />
-      <Card
-        size={knobProps.sizeToken}
-        borderRadius={knobProps.borderRadius.borderRadius}
-        elevation={knobProps.elevation}
-        borderWidth={1}
-        borderColor="$borderColor"
-      >
-        <Card.Footer {...knobProps.panelPadding}>
-          <Skeleton variant="rounded" width="100%" height={height} />
-        </Card.Footer>
+      <Skeleton width="40%" />
+      <Card>
+        <Skeleton variant="rounded" width="100%" height={height} />
       </Card>
     </YStack>
   );

package/src/FrappeDashboard.stories.tsx

@@ -12,12 +12,85 @@ export default {
     status: { type: "stable" },
     docs: {
       description: {
-        component: "A dashboard component with KPI cards and charts for visualizing Frappe data.",
+        component:
+          "A dashboard component with KPI cards and charts for visualizing Frappe data. 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 Frappe still resolves DocType
+// meta over HTTP — so 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; ERR_HOST is the deliberate failure host
+// for the error-state story.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappedashboard.mock.test";
+const ERR_HOST = "https://forbidden.frappedashboard.mock.test";
+
+function salesOrderMetaRaw(name: string) {
+  return {
+    name,
+    module: "Selling",
+    title_field: "name",
+    fields: [
+      { fieldname: "total", fieldtype: "Currency", label: "Total", in_list_view: 1 },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Completed\nPending",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+      { fieldname: "region", fieldtype: "Data", label: "Region", in_list_view: 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.__frappeDashboardMockFetch) return;
+  w.__frappeDashboardMockFetch = 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") || "SalesOrder";
+        return jsonResponse({ docs: [salesOrderMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: salesOrderMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "SalesOrder", module: "Selling" }] });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 // KPI Card Stories
 export const KPICardDefault = () => (
   <KPICard
@@ -189,7 +262,7 @@ const widgets: DashboardWidget[] = [
 
 /** Static widgets only — does not exercise the live dataSource path. */
 export const StaticWidgets = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud">
+  <FrappeProvider baseURL={MOCK_HOST}>
     <FrappeDashboard title="Sales (static)" widgets={widgets} columns={4} />
   </FrappeProvider>
 );
@@ -209,7 +282,7 @@ StaticWidgets.parameters = {
  */
 export const SalesDashboard = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ SalesOrder: salesFixtures })}
   >
     <FrappeDashboard<SalesOrder>
@@ -336,7 +409,7 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
  * p-results/state-triplet-coverage.md.
  */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <FrappeDashboard<SalesOrder>
       title="Sales"
       columns={4}
@@ -348,10 +421,7 @@ export const Loading = () => (
 
 /** Zero documents and no static widgets — the Dashboard's neutral empty state (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
-    fixtures={new InMemoryFixtureProvider({ SalesOrder: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ SalesOrder: [] })}>
     <FrappeDashboard<SalesOrder>
       title="Sales"
       columns={4}
@@ -363,7 +433,7 @@ export const Empty = () => (
 
 /** Live path with a broken host — exercises the error render prop (SB-M-806). */
 export const LoadError = () => (
-  <FrappeProvider baseURL="https://frappe-dashboard-error.mock.test">
+  <FrappeProvider baseURL={ERR_HOST}>
     <FrappeDashboard<SalesOrder>
       title="Sales"
       columns={4}

package/src/FrappeDashboard.tsx

@@ -10,10 +10,10 @@ import {
   type ChartDataPoint,
   type DashboardWidget,
 } from "@multiplatform.one/components";
+import { Button, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Spinner } from "@multiplatform.one/forms";
 import { Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
 import { formatTimeOfDay, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -168,7 +168,7 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps}>
         <Spinner size="large" />
-        <Text color="$color10" marginTop="$2">
+        <Text color={formCommonColors.muted} marginTop="$2" {...knobProps.body}>
           {t("Loading dashboard...")}
         </Text>
       </YStack>
@@ -180,8 +180,8 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     if (error) return <>{error(err)}</>;
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps} {...knobProps.gap}>
-        <Text color="$red11">{t("Failed to load dashboard")}</Text>
-        <Text color="$color10" fontSize="$2">
+        <Text color={formCommonColors.error}>{t("Failed to load dashboard")}</Text>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {err.message}
         </Text>
       </YStack>
@@ -197,11 +197,11 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
           alignItems="center"
           paddingBottom={0}
         >
-          {title ? <H3>{title}</H3> : <YStack flex={1} />}
+          {title ? <H3 {...knobProps.heading}>{title}</H3> : <YStack flex={1} />}
           {showRefresh && (
             <XStack {...knobProps.gap} alignItems="center">
               {isLiveStale && <Spinner size="small" aria-label={t("Updating")} />}
-              <Text fontSize="$1" color="$color10">
+              <Text color={formCommonColors.muted} {...knobProps.label}>
                 {t("Last updated: {{time}}", {
                   time: formatTimeOfDay(dataUpdatedAt ?? lastRefresh),
                 })}
@@ -318,10 +318,10 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
             alignItems="center"
             paddingBottom={0}
           >
-            {title ? <H3>{title}</H3> : <YStack flex={1} />}
+            {title ? <H3 {...knobProps.heading}>{title}</H3> : <YStack flex={1} />}
             <XStack {...knobProps.gap} alignItems="center">
               {autoRefresh && (
-                <Text fontSize="$1" color="$color10">
+                <Text color={formCommonColors.muted} {...knobProps.label}>
                   {t("Last updated: {{time}}", { time: formatTimeOfDay(lastRefresh) })}
                 </Text>
               )}

package/src/FrappeForm.tsx

@@ -24,8 +24,8 @@ import type React from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
-import { Spinner } from "@multiplatform.one/forms";
-import { Button, Text, XStack, YStack } from "tamagui";
+import { Button, formCommonColors } from "@multiplatform.one/forms";
+import { Text, XStack, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
@@ -117,11 +117,9 @@ function mapMetaToFormSchema(meta: DocTypeMeta, sectionOverrides?: FormSection[]
   const genericSections: GenericFormSection[] = sections.map((section) => ({
     label: section.label,
     collapsible: section.collapsible,
-    columns: section.columns.map(
-      (col): GenericFormColumn => ({
-        fields: col.fields.map(mapFieldToGenericSchema),
-      }),
-    ),
+    columns: section.columns.map((col): GenericFormColumn => ({
+      fields: col.fields.map(mapFieldToGenericSchema),
+    })),
   }));
 
   // Flat list of all fields for depends_on pre-compilation
@@ -633,8 +631,10 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
   if (!children && metaError && !meta) {
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap}>
-        <Text color="$red11">{t("Failed to load {{doctype}} form", { doctype })}</Text>
-        <Text color="$color10" fontSize="$2">
+        <Text color={formCommonColors.error} {...knobProps.body}>
+          {t("Failed to load {{doctype}} form", { doctype })}
+        </Text>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {metaError.message}
         </Text>
       </YStack>
@@ -654,8 +654,10 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
   if (name && !liveDoc?.isLoading && !liveDoc?.data && !wasDeleted) {
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap}>
-        <Text color="$red11">{t("{{doctype}} not found", { doctype })}</Text>
-        <Text color="$color10" fontSize="$2">
+        <Text color={formCommonColors.error} {...knobProps.body}>
+          {t("{{doctype}} not found", { doctype })}
+        </Text>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {t("Document {{name}} does not exist or could not be loaded.", { name })}
         </Text>
       </YStack>
@@ -691,7 +693,7 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
           backgroundColor="$red3"
           testID="frappe-form-deleted-banner"
         >
-          <Text color="$red11" fontSize="$3">
+          <Text color={formCommonColors.error} {...knobProps.body}>
             {hasUnsavedChanges
               ? t(
                   "This {{doctype}} was deleted on the server. Fields are read-only and your unsaved edits can no longer be saved.",
@@ -713,7 +715,7 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
           backgroundColor="$orange3"
           testID="frappe-form-conflict-banner"
         >
-          <Text color="$orange11" fontSize="$3">
+          <Text color="$orange11" {...knobProps.body}>
             {t(
               "Changed elsewhere while you were editing: {{fields}}. Your edits are kept — saving will overwrite the newer server values.",
               { fields: conflictLabels },
@@ -767,12 +769,14 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
           ) : (
             // Metadata unavailable (should be covered by metaError branch above)
             <YStack {...knobProps.panelPadding} alignItems="center">
-              <Text color="$color10">{t("Form schema unavailable")}</Text>
+              <Text color={formCommonColors.muted} {...knobProps.body}>
+                {t("Form schema unavailable")}
+              </Text>
             </YStack>
           )}
 
           {errors.general && (
-            <Text color="$red11" fontSize="$2">
+            <Text color={formCommonColors.error} {...knobProps.body}>
               {errors.general}
             </Text>
           )}
@@ -785,17 +789,20 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
               paddingTop="$3"
             >
               {hasUnsavedChanges && (
-                <Text color="$orange10" fontSize="$2" marginInlineEnd="auto">
+                <Text color="$orange11" marginInlineEnd="auto" {...knobProps.body}>
                   {t("Not Saved")}
                 </Text>
               )}
 
               {name && onDelete && !wasDeleted && (
                 <Button
-                  theme="red"
-                  variant="outlined"
-                  icon={isSubmitting ? Spinner : TrashIcon}
-                  disabled={isSubmitting || effectiveDisabled}
+                  outlined
+                  error
+                  icon={TrashIcon}
+                  loading={isSubmitting}
+                  disabled={effectiveDisabled}
+                  disabledReason={t("Form is read-only")}
+                  disabledReasonPlacement="inline"
                   onPress={handleDelete}
                 >
                   {t("Delete")}
@@ -804,9 +811,11 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
 
               {onCancel && (
                 <Button
-                  variant="outlined"
+                  outlined
                   icon={XIcon}
                   disabled={isSubmitting || disabled}
+                  disabledReason={t("Form is read-only")}
+                  disabledReasonPlacement="inline"
                   onPress={handleCancel}
                 >
                   {t("Cancel")}
@@ -814,9 +823,12 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
               )}
 
               <Button
-                theme="active"
-                icon={isSubmitting ? Spinner : FloppyDiskIcon}
-                disabled={isSubmitting || effectiveDisabled}
+                accent
+                icon={FloppyDiskIcon}
+                loading={isSubmitting}
+                disabled={effectiveDisabled}
+                disabledReason={t("Form is read-only")}
+                disabledReasonPlacement="inline"
                 onPress={handleSave}
               >
                 {isSubmitting ? t("Saving...") : t("Save")}

package/src/FrappeGantt.stories.tsx

@@ -14,12 +14,81 @@ export default {
     docs: {
       description: {
         component:
-          "Gantt view over useFrappeCollection / useLiveQuery. Stories use InMemoryFixtureProvider so the live path runs against fixtures. Field mapping defaults to Frappe's Gantt settings (exp_start_date / exp_end_date / subject). Bars drag horizontally to reschedule (snapping to whole days): moves persist via collection.update on the date fields and then fire onItemMove(name, start, end). Set enableItemDrag={false} to opt out.",
+          "Gantt view over 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. Field mapping defaults to Frappe's Gantt settings (exp_start_date / exp_end_date / subject). Bars drag horizontally to reschedule (snapping to whole days): moves persist via collection.update on the date fields and then fire onItemMove(name, start, end). Set enableItemDrag={false} to opt out.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// 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. MOCK_HOST keeps the same code path (real fetch, real
+// meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappegantt.mock.test";
+
+function taskMetaRaw(name: string) {
+  return {
+    name,
+    module: "Projects",
+    title_field: "subject",
+    fields: [
+      { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+      { fieldname: "exp_start_date", fieldtype: "Date", label: "Expected Start Date" },
+      { fieldname: "exp_end_date", fieldtype: "Date", label: "Expected End Date" },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nWorking\nCompleted",
+        in_list_view: 1,
+      },
+      { fieldname: "color", fieldtype: "Color", label: "Color" },
+    ],
+    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.__frappeGanttMockFetch) return;
+  w.__frappeGanttMockFetch = 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") || "Task";
+        return jsonResponse({ docs: [taskMetaRaw(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: taskMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "Task", module: "Projects" }] });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 interface ProjectTask {
   name: string;
   doctype: string;
@@ -94,7 +163,7 @@ const taskFixtures: ProjectTask[] = [
 
 export const Main = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ Task: taskFixtures })}
   >
     <FrappeGantt<ProjectTask>
@@ -116,7 +185,7 @@ Main.parameters = {
 
 export const MonthZoom = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ Task: taskFixtures })}
   >
     <FrappeGantt<ProjectTask>
@@ -138,7 +207,7 @@ MonthZoom.parameters = {
 
 export const WithItemMove = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ Task: taskFixtures })}
   >
     <FrappeGantt<ProjectTask>