@dataverse-kit/form-runtime 0.1.0

package/dist/runtime-capabilities-BdGDdu0d.d.cts

@@ -0,0 +1,119 @@
+import { x as ControlDefinition } from './control-DFOg_pc_.cjs';
+
+/**
+ * Async capability shapes exposed by FormRuntimeContext.
+ *
+ * Form-runtime defines what it NEEDS to render. The editor and the
+ * generated host code each provide an implementation:
+ *
+ * - Editor (`apps/form-builder/src/contexts/EditorFormRuntimeProvider.tsx`)
+ *   wires these to the form-builder's Zustand stores + Dataverse client.
+ * - Generated host code wires these to `IApiService` from
+ *   `@dataverse-kit/api-service`.
+ *
+ * The capability returns RAW DATA (no loading/error state). Form-runtime
+ * provides hooks (`useLiveData`, `useWebResource`, `useLookupSearch`) that
+ * wrap each capability and manage the React-state choreography.
+ */
+
+/** Result of `fetchLiveData(control)` — successful fetch. */
+interface LiveDataResult {
+    records: Record<string, unknown>[];
+    /** Attribute names extracted from FetchXML (for auto-generating columns). */
+    fetchXmlAttributes: string[];
+    /** Timeline items — populated only for timeline controls; null otherwise. */
+    timelineItems: TimelineItem[] | null;
+}
+/** Result of `fetchWebResource(name, type?)` — successful fetch. */
+interface WebResourceData {
+    /** Decoded text content (HTML, CSS, JS, etc.) or base64-encoded binary. */
+    content: string;
+    /** MIME type derived from the Dataverse web-resource type code. */
+    contentType: string;
+    /** Display name from the Dataverse record. */
+    displayName: string;
+}
+/** Result of `searchLookup(entitySetName, term, options)` — successful fetch. */
+interface LookupResult {
+    /** Primary-key GUID of the record. */
+    id: string;
+    /** Display label — typically the entity's primary-name attribute. */
+    primaryName: string;
+    /** Raw record fields, for callers that need secondary display (subtitles, avatars). */
+    record: Record<string, unknown>;
+}
+/**
+ * Timeline item rendered by the `timeline` control. Lifted from
+ * `apps/form-builder/src/utils/timelineFetchXml.ts` — the runtime owns
+ * the shape; the editor's timelineFetchXml utility will re-import it
+ * once the util moves into form-runtime (deferred follow-up).
+ */
+interface TimelineItem {
+    id: string;
+    type: 'email' | 'phonecall' | 'task' | 'note' | 'appointment' | 'other';
+    icon: string;
+    title: string;
+    description: string;
+    time: string;
+    color: string;
+    createdon: Date;
+}
+/** Dataverse connection state — surfaced to controls that need it (WebResourceRenderer). */
+interface FormRuntimeConnection {
+    status: 'connected' | 'connecting' | 'disconnected' | 'error';
+    /** Root URL (`https://<org>.crm.dynamics.com`) when connected; undefined otherwise. */
+    dynamicsUrl?: string;
+}
+/** Preview-context state — surfaced to controls that need it for postMessage / parameter passing. */
+interface FormRuntimePreviewContext {
+    recordId?: string;
+    entityLogicalName?: string;
+}
+/** Options for `searchLookup`. */
+interface LookupSearchOptions {
+    /** OData $filter to narrow the search domain (e.g. statecode-active). */
+    filter?: string;
+    /** Max rows to return — defaults to 10 if omitted. */
+    top?: number;
+    /** Specific FetchXML view to run instead of an OData $select; mutually exclusive with filter. */
+    fetchXml?: string;
+    /** AbortSignal so React effect cleanup can cancel in-flight requests. */
+    signal?: AbortSignal;
+}
+/**
+ * Async capabilities the runtime needs but doesn't own.
+ *
+ * Every method returns a Promise of raw data (or rejects with an Error).
+ * No React-state fields here — runtime hooks layer on top.
+ */
+interface FormRuntimeCapabilities {
+    /** Dataverse connection snapshot. Re-renders the runtime when status changes. */
+    connection: FormRuntimeConnection;
+    /** Preview-record snapshot (record being shown in the editor's preview pane). */
+    previewContext: FormRuntimePreviewContext;
+    /**
+     * Fetch live data for a bound control (subgrid records, timeline items).
+     * Implementation may early-return empty when not connected or when the
+     * editor's live-preview toggle is off — that's a successful fetch with
+     * zero records, NOT an error.
+     */
+    fetchLiveData(control: ControlDefinition, options?: {
+        signal?: AbortSignal;
+    }): Promise<LiveDataResult>;
+    /**
+     * Fetch a web resource by name. `type` is the Dataverse type code
+     * (1=HTML, 2=CSS, 3=JS, ...) — when provided it short-circuits the
+     * metadata lookup.
+     */
+    fetchWebResource(name: string, type?: string, options?: {
+        signal?: AbortSignal;
+    }): Promise<WebResourceData>;
+    /**
+     * Search a lookup target entity. `entitySetName` is the plural set name
+     * (e.g. "accounts"). `term` is the user-typed search string; empty
+     * string means "return top recent records".
+     */
+    searchLookup(entitySetName: string, term: string, options?: LookupSearchOptions): Promise<LookupResult[]>;
+}
+
+export type { FormRuntimeCapabilities as F, LiveDataResult as L, TimelineItem as T, WebResourceData as W, FormRuntimeConnection as a, FormRuntimePreviewContext as b, LookupResult as c, LookupSearchOptions as d };

package/dist/runtime-capabilities-Brfc7loJ.d.ts

@@ -0,0 +1,119 @@
+import { x as ControlDefinition } from './control-DaXBm-52.js';
+
+/**
+ * Async capability shapes exposed by FormRuntimeContext.
+ *
+ * Form-runtime defines what it NEEDS to render. The editor and the
+ * generated host code each provide an implementation:
+ *
+ * - Editor (`apps/form-builder/src/contexts/EditorFormRuntimeProvider.tsx`)
+ *   wires these to the form-builder's Zustand stores + Dataverse client.
+ * - Generated host code wires these to `IApiService` from
+ *   `@dataverse-kit/api-service`.
+ *
+ * The capability returns RAW DATA (no loading/error state). Form-runtime
+ * provides hooks (`useLiveData`, `useWebResource`, `useLookupSearch`) that
+ * wrap each capability and manage the React-state choreography.
+ */
+
+/** Result of `fetchLiveData(control)` — successful fetch. */
+interface LiveDataResult {
+    records: Record<string, unknown>[];
+    /** Attribute names extracted from FetchXML (for auto-generating columns). */
+    fetchXmlAttributes: string[];
+    /** Timeline items — populated only for timeline controls; null otherwise. */
+    timelineItems: TimelineItem[] | null;
+}
+/** Result of `fetchWebResource(name, type?)` — successful fetch. */
+interface WebResourceData {
+    /** Decoded text content (HTML, CSS, JS, etc.) or base64-encoded binary. */
+    content: string;
+    /** MIME type derived from the Dataverse web-resource type code. */
+    contentType: string;
+    /** Display name from the Dataverse record. */
+    displayName: string;
+}
+/** Result of `searchLookup(entitySetName, term, options)` — successful fetch. */
+interface LookupResult {
+    /** Primary-key GUID of the record. */
+    id: string;
+    /** Display label — typically the entity's primary-name attribute. */
+    primaryName: string;
+    /** Raw record fields, for callers that need secondary display (subtitles, avatars). */
+    record: Record<string, unknown>;
+}
+/**
+ * Timeline item rendered by the `timeline` control. Lifted from
+ * `apps/form-builder/src/utils/timelineFetchXml.ts` — the runtime owns
+ * the shape; the editor's timelineFetchXml utility will re-import it
+ * once the util moves into form-runtime (deferred follow-up).
+ */
+interface TimelineItem {
+    id: string;
+    type: 'email' | 'phonecall' | 'task' | 'note' | 'appointment' | 'other';
+    icon: string;
+    title: string;
+    description: string;
+    time: string;
+    color: string;
+    createdon: Date;
+}
+/** Dataverse connection state — surfaced to controls that need it (WebResourceRenderer). */
+interface FormRuntimeConnection {
+    status: 'connected' | 'connecting' | 'disconnected' | 'error';
+    /** Root URL (`https://<org>.crm.dynamics.com`) when connected; undefined otherwise. */
+    dynamicsUrl?: string;
+}
+/** Preview-context state — surfaced to controls that need it for postMessage / parameter passing. */
+interface FormRuntimePreviewContext {
+    recordId?: string;
+    entityLogicalName?: string;
+}
+/** Options for `searchLookup`. */
+interface LookupSearchOptions {
+    /** OData $filter to narrow the search domain (e.g. statecode-active). */
+    filter?: string;
+    /** Max rows to return — defaults to 10 if omitted. */
+    top?: number;
+    /** Specific FetchXML view to run instead of an OData $select; mutually exclusive with filter. */
+    fetchXml?: string;
+    /** AbortSignal so React effect cleanup can cancel in-flight requests. */
+    signal?: AbortSignal;
+}
+/**
+ * Async capabilities the runtime needs but doesn't own.
+ *
+ * Every method returns a Promise of raw data (or rejects with an Error).
+ * No React-state fields here — runtime hooks layer on top.
+ */
+interface FormRuntimeCapabilities {
+    /** Dataverse connection snapshot. Re-renders the runtime when status changes. */
+    connection: FormRuntimeConnection;
+    /** Preview-record snapshot (record being shown in the editor's preview pane). */
+    previewContext: FormRuntimePreviewContext;
+    /**
+     * Fetch live data for a bound control (subgrid records, timeline items).
+     * Implementation may early-return empty when not connected or when the
+     * editor's live-preview toggle is off — that's a successful fetch with
+     * zero records, NOT an error.
+     */
+    fetchLiveData(control: ControlDefinition, options?: {
+        signal?: AbortSignal;
+    }): Promise<LiveDataResult>;
+    /**
+     * Fetch a web resource by name. `type` is the Dataverse type code
+     * (1=HTML, 2=CSS, 3=JS, ...) — when provided it short-circuits the
+     * metadata lookup.
+     */
+    fetchWebResource(name: string, type?: string, options?: {
+        signal?: AbortSignal;
+    }): Promise<WebResourceData>;
+    /**
+     * Search a lookup target entity. `entitySetName` is the plural set name
+     * (e.g. "accounts"). `term` is the user-typed search string; empty
+     * string means "return top recent records".
+     */
+    searchLookup(entitySetName: string, term: string, options?: LookupSearchOptions): Promise<LookupResult[]>;
+}
+
+export type { FormRuntimeCapabilities as F, LiveDataResult as L, TimelineItem as T, WebResourceData as W, FormRuntimeConnection as a, FormRuntimePreviewContext as b, LookupResult as c, LookupSearchOptions as d };

package/dist/theme-BfeZIxmZ.d.cts

@@ -0,0 +1,74 @@
+/**
+ * Theme configuration for Form Builder
+ * Provides Canvas-app-style theming with 9 preset themes
+ */
+interface FormThemeColors {
+    /** Main accent color for buttons, links, focus rings */
+    primary: string;
+    /** Darker variant of primary */
+    primaryDark: string;
+    /** Form header bar background */
+    headerBackground: string;
+    /** Section card background */
+    sectionBackground: string;
+    /** Canvas/page background */
+    canvasBackground: string;
+    /** Main text color */
+    textPrimary: string;
+    /** Muted/secondary text color */
+    textSecondary: string;
+    /** Section and component borders */
+    border: string;
+    /** Input field background */
+    inputBackground: string;
+    /** Input field borders */
+    inputBorder: string;
+}
+interface FormTheme {
+    id: string;
+    name: string;
+    colors: FormThemeColors;
+}
+interface GradientStop {
+    color: string;
+    position: number;
+}
+type BackgroundConfig = {
+    type: 'color';
+    color: string;
+} | {
+    type: 'image';
+    src: string;
+    size: 'cover' | 'contain' | 'auto';
+    position: string;
+    repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+    opacity?: number;
+} | {
+    type: 'gradient';
+    direction: number;
+    stops: GradientStop[];
+};
+interface FormThemeSettings {
+    /** The preset theme ID (e.g., 'blue', 'coral') */
+    presetId: string;
+    /** Optional custom background color that overrides theme's canvasBackground */
+    customBackgroundColor?: string;
+    /** Enhanced canvas background (color, image, or gradient) */
+    canvasBackground?: BackgroundConfig;
+    /** Enhanced header background (color, image, or gradient). When undefined, uses theme's headerBackground. */
+    headerBackground?: BackgroundConfig;
+}
+/**
+ * 9 preset themes matching Canvas app styling
+ */
+declare const THEME_PRESETS: FormTheme[];
+/** Default theme (Soft blue) */
+declare const DEFAULT_THEME: FormTheme;
+/** Standard color palette for the color picker (like Canvas app) */
+declare const STANDARD_COLORS: string[];
+/** Get theme by ID, falls back to default */
+declare function getThemeById(id: string): FormTheme;
+/** Get theme colors for a form, applying custom background if set */
+declare function getResolvedThemeColors(themeSettings?: FormThemeSettings): FormThemeColors;
+
+export { type BackgroundConfig as B, DEFAULT_THEME as D, type FormTheme as F, type GradientStop as G, STANDARD_COLORS as S, THEME_PRESETS as T, type FormThemeColors as a, type FormThemeSettings as b, getThemeById as c, getResolvedThemeColors as g };

package/dist/theme-BfeZIxmZ.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Theme configuration for Form Builder
+ * Provides Canvas-app-style theming with 9 preset themes
+ */
+interface FormThemeColors {
+    /** Main accent color for buttons, links, focus rings */
+    primary: string;
+    /** Darker variant of primary */
+    primaryDark: string;
+    /** Form header bar background */
+    headerBackground: string;
+    /** Section card background */
+    sectionBackground: string;
+    /** Canvas/page background */
+    canvasBackground: string;
+    /** Main text color */
+    textPrimary: string;
+    /** Muted/secondary text color */
+    textSecondary: string;
+    /** Section and component borders */
+    border: string;
+    /** Input field background */
+    inputBackground: string;
+    /** Input field borders */
+    inputBorder: string;
+}
+interface FormTheme {
+    id: string;
+    name: string;
+    colors: FormThemeColors;
+}
+interface GradientStop {
+    color: string;
+    position: number;
+}
+type BackgroundConfig = {
+    type: 'color';
+    color: string;
+} | {
+    type: 'image';
+    src: string;
+    size: 'cover' | 'contain' | 'auto';
+    position: string;
+    repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y';
+    opacity?: number;
+} | {
+    type: 'gradient';
+    direction: number;
+    stops: GradientStop[];
+};
+interface FormThemeSettings {
+    /** The preset theme ID (e.g., 'blue', 'coral') */
+    presetId: string;
+    /** Optional custom background color that overrides theme's canvasBackground */
+    customBackgroundColor?: string;
+    /** Enhanced canvas background (color, image, or gradient) */
+    canvasBackground?: BackgroundConfig;
+    /** Enhanced header background (color, image, or gradient). When undefined, uses theme's headerBackground. */
+    headerBackground?: BackgroundConfig;
+}
+/**
+ * 9 preset themes matching Canvas app styling
+ */
+declare const THEME_PRESETS: FormTheme[];
+/** Default theme (Soft blue) */
+declare const DEFAULT_THEME: FormTheme;
+/** Standard color palette for the color picker (like Canvas app) */
+declare const STANDARD_COLORS: string[];
+/** Get theme by ID, falls back to default */
+declare function getThemeById(id: string): FormTheme;
+/** Get theme colors for a form, applying custom background if set */
+declare function getResolvedThemeColors(themeSettings?: FormThemeSettings): FormThemeColors;
+
+export { type BackgroundConfig as B, DEFAULT_THEME as D, type FormTheme as F, type GradientStop as G, STANDARD_COLORS as S, THEME_PRESETS as T, type FormThemeColors as a, type FormThemeSettings as b, getThemeById as c, getResolvedThemeColors as g };

package/dist/theme.cjs

@@ -0,0 +1,215 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme/index.ts
+var theme_exports = {};
+__export(theme_exports, {
+  FormThemeProvider: () => FormThemeProvider,
+  ThemeContext: () => ThemeContext,
+  useFormTheme: () => useFormTheme
+});
+module.exports = __toCommonJS(theme_exports);
+
+// src/theme/FormThemeContext.tsx
+var import_react = require("react");
+
+// src/types/theme.ts
+var THEME_PRESETS = [
+  {
+    id: "soft-blue",
+    name: "Soft blue",
+    colors: {
+      primary: "#0078d4",
+      primaryDark: "#005a9e",
+      headerBackground: "#ffffff",
+      sectionBackground: "#ffffff",
+      canvasBackground: "#f3f2f1",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#edebe9",
+      inputBackground: "#ffffff",
+      inputBorder: "#8a8886"
+    }
+  },
+  {
+    id: "blue",
+    name: "Blue",
+    colors: {
+      primary: "#0078d4",
+      primaryDark: "#005a9e",
+      headerBackground: "#0078d4",
+      sectionBackground: "#e6f2ff",
+      canvasBackground: "#e6f2ff",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#c7e0f4",
+      inputBackground: "#ffffff",
+      inputBorder: "#0078d4"
+    }
+  },
+  {
+    id: "light",
+    name: "Light",
+    colors: {
+      primary: "#605e5c",
+      primaryDark: "#3b3a39",
+      headerBackground: "#f5f5f5",
+      sectionBackground: "#ffffff",
+      canvasBackground: "#fafafa",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#e1dfdd",
+      inputBackground: "#ffffff",
+      inputBorder: "#8a8886"
+    }
+  },
+  {
+    id: "coral",
+    name: "Coral",
+    colors: {
+      primary: "#d83b01",
+      primaryDark: "#a52a00",
+      headerBackground: "#d83b01",
+      sectionBackground: "#fff4f0",
+      canvasBackground: "#fff4f0",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#f3d6cd",
+      inputBackground: "#ffffff",
+      inputBorder: "#d83b01"
+    }
+  },
+  {
+    id: "red",
+    name: "Red",
+    colors: {
+      primary: "#a4262c",
+      primaryDark: "#7e1e23",
+      headerBackground: "#a4262c",
+      sectionBackground: "#fdf3f4",
+      canvasBackground: "#fdf3f4",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#f1d3d5",
+      inputBackground: "#ffffff",
+      inputBorder: "#a4262c"
+    }
+  },
+  {
+    id: "steel",
+    name: "Steel",
+    colors: {
+      primary: "#004578",
+      primaryDark: "#002d4e",
+      headerBackground: "#004578",
+      sectionBackground: "#f0f4f7",
+      canvasBackground: "#e8eef2",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#c8d4dc",
+      inputBackground: "#ffffff",
+      inputBorder: "#004578"
+    }
+  },
+  {
+    id: "dune",
+    name: "Dune",
+    colors: {
+      primary: "#7a6855",
+      primaryDark: "#5c4f3f",
+      headerBackground: "#7a6855",
+      sectionBackground: "#f5f3f0",
+      canvasBackground: "#e8e4df",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#d6d0c8",
+      inputBackground: "#ffffff",
+      inputBorder: "#7a6855"
+    }
+  },
+  {
+    id: "lavender",
+    name: "Lavender",
+    colors: {
+      primary: "#5c2d91",
+      primaryDark: "#472270",
+      headerBackground: "#5c2d91",
+      sectionBackground: "#f9f5ff",
+      canvasBackground: "#f5f0fa",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#e1d4f0",
+      inputBackground: "#ffffff",
+      inputBorder: "#5c2d91"
+    }
+  },
+  {
+    id: "brown",
+    name: "Brown",
+    colors: {
+      primary: "#6d4c41",
+      primaryDark: "#4e362e",
+      headerBackground: "#6d4c41",
+      sectionBackground: "#f5f0ed",
+      canvasBackground: "#ebe5e1",
+      textPrimary: "#323130",
+      textSecondary: "#605e5c",
+      border: "#d4ccc7",
+      inputBackground: "#ffffff",
+      inputBorder: "#6d4c41"
+    }
+  }
+];
+var DEFAULT_THEME = THEME_PRESETS[0];
+function getThemeById(id) {
+  return THEME_PRESETS.find((t) => t.id === id) ?? DEFAULT_THEME;
+}
+function getResolvedThemeColors(themeSettings) {
+  const theme = getThemeById(themeSettings?.presetId ?? "soft-blue");
+  if (themeSettings?.customBackgroundColor) {
+    return {
+      ...theme.colors,
+      canvasBackground: themeSettings.customBackgroundColor
+    };
+  }
+  return theme.colors;
+}
+
+// src/theme/FormThemeContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(DEFAULT_THEME.colors);
+function useFormTheme() {
+  return (0, import_react.useContext)(ThemeContext);
+}
+var FormThemeProvider = ({
+  themeSettings,
+  children
+}) => {
+  const themeColors = (0, import_react.useMemo)(() => {
+    return getResolvedThemeColors(themeSettings);
+  }, [themeSettings]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: themeColors, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormThemeProvider,
+  ThemeContext,
+  useFormTheme
+});
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/index.ts","../src/theme/FormThemeContext.tsx","../src/types/theme.ts"],"sourcesContent":["// Theme context + provider hook. See ./FormThemeContext.tsx for the\n// inversion-of-control note (provider takes themeSettings as a prop).\n\nexport {\n  ThemeContext,\n  FormThemeProvider,\n  useFormTheme,\n  type FormThemeProviderProps,\n} from './FormThemeContext';\n","import React, { createContext, useContext, useMemo } from 'react';\nimport {\n  FormThemeColors,\n  FormThemeSettings,\n  DEFAULT_THEME,\n  getResolvedThemeColors,\n} from '../types';\n\n/**\n * Theme context provides resolved theme colors to runtime components.\n *\n * Lifted from apps/form-builder/src/contexts/ThemeContext.tsx in Phase 1a\n * of the WYSIWYG-canvas refactor. Note the inversion: this provider takes\n * `themeSettings` as a prop rather than reading the editor's Zustand store.\n * The form-builder app supplies a thin wrapper that subscribes to its\n * `useDesignerStore` selector and passes the value down — that keeps\n * form-runtime free of editor-state dependencies and reusable by any host\n * (designer canvas, preview, generated form code, the runtime.html entry).\n */\nexport const ThemeContext = createContext<FormThemeColors>(DEFAULT_THEME.colors);\n\n/** Hook to access the current form theme colors. */\nexport function useFormTheme(): FormThemeColors {\n  return useContext(ThemeContext);\n}\n\nexport interface FormThemeProviderProps {\n  /**\n   * Theme settings to resolve. Pass `form.settings.theme` from your form\n   * definition. When `undefined`, the resolver returns the DEFAULT_THEME\n   * colors — same fallback the form-builder editor relied on.\n   */\n  themeSettings: FormThemeSettings | undefined;\n  children: React.ReactNode;\n}\n\n/**\n * Theme provider that resolves theme from caller-supplied settings.\n */\nexport const FormThemeProvider: React.FC<FormThemeProviderProps> = ({\n  themeSettings,\n  children,\n}) => {\n  const themeColors = useMemo(() => {\n    return getResolvedThemeColors(themeSettings);\n  }, [themeSettings]);\n\n  return <ThemeContext.Provider value={themeColors}>{children}</ThemeContext.Provider>;\n};\n","/**\n * Theme configuration for Form Builder\n * Provides Canvas-app-style theming with 9 preset themes\n */\n\nexport interface FormThemeColors {\n  /** Main accent color for buttons, links, focus rings */\n  primary: string;\n  /** Darker variant of primary */\n  primaryDark: string;\n  /** Form header bar background */\n  headerBackground: string;\n  /** Section card background */\n  sectionBackground: string;\n  /** Canvas/page background */\n  canvasBackground: string;\n  /** Main text color */\n  textPrimary: string;\n  /** Muted/secondary text color */\n  textSecondary: string;\n  /** Section and component borders */\n  border: string;\n  /** Input field background */\n  inputBackground: string;\n  /** Input field borders */\n  inputBorder: string;\n}\n\nexport interface FormTheme {\n  id: string;\n  name: string;\n  colors: FormThemeColors;\n}\n\nexport interface GradientStop {\n  color: string;\n  position: number; // 0-100\n}\n\nexport type BackgroundConfig =\n  | { type: 'color'; color: string }\n  | { type: 'image'; src: string; size: 'cover' | 'contain' | 'auto'; position: string;\n      repeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'; opacity?: number }\n  | { type: 'gradient'; direction: number; stops: GradientStop[] };\n\nexport interface FormThemeSettings {\n  /** The preset theme ID (e.g., 'blue', 'coral') */\n  presetId: string;\n  /** Optional custom background color that overrides theme's canvasBackground */\n  customBackgroundColor?: string;\n  /** Enhanced canvas background (color, image, or gradient) */\n  canvasBackground?: BackgroundConfig;\n  /** Enhanced header background (color, image, or gradient). When undefined, uses theme's headerBackground. */\n  headerBackground?: BackgroundConfig;\n}\n\n/**\n * 9 preset themes matching Canvas app styling\n */\nexport const THEME_PRESETS: FormTheme[] = [\n  {\n    id: 'soft-blue',\n    name: 'Soft blue',\n    colors: {\n      primary: '#0078d4',\n      primaryDark: '#005a9e',\n      headerBackground: '#ffffff',\n      sectionBackground: '#ffffff',\n      canvasBackground: '#f3f2f1',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#edebe9',\n      inputBackground: '#ffffff',\n      inputBorder: '#8a8886',\n    },\n  },\n  {\n    id: 'blue',\n    name: 'Blue',\n    colors: {\n      primary: '#0078d4',\n      primaryDark: '#005a9e',\n      headerBackground: '#0078d4',\n      sectionBackground: '#e6f2ff',\n      canvasBackground: '#e6f2ff',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#c7e0f4',\n      inputBackground: '#ffffff',\n      inputBorder: '#0078d4',\n    },\n  },\n  {\n    id: 'light',\n    name: 'Light',\n    colors: {\n      primary: '#605e5c',\n      primaryDark: '#3b3a39',\n      headerBackground: '#f5f5f5',\n      sectionBackground: '#ffffff',\n      canvasBackground: '#fafafa',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#e1dfdd',\n      inputBackground: '#ffffff',\n      inputBorder: '#8a8886',\n    },\n  },\n  {\n    id: 'coral',\n    name: 'Coral',\n    colors: {\n      primary: '#d83b01',\n      primaryDark: '#a52a00',\n      headerBackground: '#d83b01',\n      sectionBackground: '#fff4f0',\n      canvasBackground: '#fff4f0',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#f3d6cd',\n      inputBackground: '#ffffff',\n      inputBorder: '#d83b01',\n    },\n  },\n  {\n    id: 'red',\n    name: 'Red',\n    colors: {\n      primary: '#a4262c',\n      primaryDark: '#7e1e23',\n      headerBackground: '#a4262c',\n      sectionBackground: '#fdf3f4',\n      canvasBackground: '#fdf3f4',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#f1d3d5',\n      inputBackground: '#ffffff',\n      inputBorder: '#a4262c',\n    },\n  },\n  {\n    id: 'steel',\n    name: 'Steel',\n    colors: {\n      primary: '#004578',\n      primaryDark: '#002d4e',\n      headerBackground: '#004578',\n      sectionBackground: '#f0f4f7',\n      canvasBackground: '#e8eef2',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#c8d4dc',\n      inputBackground: '#ffffff',\n      inputBorder: '#004578',\n    },\n  },\n  {\n    id: 'dune',\n    name: 'Dune',\n    colors: {\n      primary: '#7a6855',\n      primaryDark: '#5c4f3f',\n      headerBackground: '#7a6855',\n      sectionBackground: '#f5f3f0',\n      canvasBackground: '#e8e4df',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#d6d0c8',\n      inputBackground: '#ffffff',\n      inputBorder: '#7a6855',\n    },\n  },\n  {\n    id: 'lavender',\n    name: 'Lavender',\n    colors: {\n      primary: '#5c2d91',\n      primaryDark: '#472270',\n      headerBackground: '#5c2d91',\n      sectionBackground: '#f9f5ff',\n      canvasBackground: '#f5f0fa',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#e1d4f0',\n      inputBackground: '#ffffff',\n      inputBorder: '#5c2d91',\n    },\n  },\n  {\n    id: 'brown',\n    name: 'Brown',\n    colors: {\n      primary: '#6d4c41',\n      primaryDark: '#4e362e',\n      headerBackground: '#6d4c41',\n      sectionBackground: '#f5f0ed',\n      canvasBackground: '#ebe5e1',\n      textPrimary: '#323130',\n      textSecondary: '#605e5c',\n      border: '#d4ccc7',\n      inputBackground: '#ffffff',\n      inputBorder: '#6d4c41',\n    },\n  },\n];\n\n/** Default theme (Soft blue) */\nexport const DEFAULT_THEME = THEME_PRESETS[0];\n\n/** Standard color palette for the color picker (like Canvas app) */\nexport const STANDARD_COLORS = [\n  '#ffffff', '#000000', '#1a1a1a', '#333333', '#4d4d4d',\n  '#666666', '#808080', '#999999', '#b3b3b3', '#cccccc',\n  '#a4262c', '#d83b01', '#ff8c00', '#ffb900', '#fff100',\n  '#bad80a', '#107c10', '#00b294', '#0078d4', '#5c2d91',\n];\n\n/** Get theme by ID, falls back to default */\nexport function getThemeById(id: string): FormTheme {\n  return THEME_PRESETS.find((t) => t.id === id) ?? DEFAULT_THEME;\n}\n\n/** Get theme colors for a form, applying custom background if set */\nexport function getResolvedThemeColors(\n  themeSettings?: FormThemeSettings\n): FormThemeColors {\n  const theme = getThemeById(themeSettings?.presetId ?? 'soft-blue');\n\n  if (themeSettings?.customBackgroundColor) {\n    return {\n      ...theme.colors,\n      canvasBackground: themeSettings.customBackgroundColor,\n    };\n  }\n\n  return theme.colors;\n}\n"],"mappings":"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","names":[]}

package/dist/theme.d.cts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { b as FormThemeSettings, a as FormThemeColors } from './theme-BfeZIxmZ.cjs';
+
+/**
+ * Theme context provides resolved theme colors to runtime components.
+ *
+ * Lifted from apps/form-builder/src/contexts/ThemeContext.tsx in Phase 1a
+ * of the WYSIWYG-canvas refactor. Note the inversion: this provider takes
+ * `themeSettings` as a prop rather than reading the editor's Zustand store.
+ * The form-builder app supplies a thin wrapper that subscribes to its
+ * `useDesignerStore` selector and passes the value down — that keeps
+ * form-runtime free of editor-state dependencies and reusable by any host
+ * (designer canvas, preview, generated form code, the runtime.html entry).
+ */
+declare const ThemeContext: React.Context<FormThemeColors>;
+/** Hook to access the current form theme colors. */
+declare function useFormTheme(): FormThemeColors;
+interface FormThemeProviderProps {
+    /**
+     * Theme settings to resolve. Pass `form.settings.theme` from your form
+     * definition. When `undefined`, the resolver returns the DEFAULT_THEME
+     * colors — same fallback the form-builder editor relied on.
+     */
+    themeSettings: FormThemeSettings | undefined;
+    children: React.ReactNode;
+}
+/**
+ * Theme provider that resolves theme from caller-supplied settings.
+ */
+declare const FormThemeProvider: React.FC<FormThemeProviderProps>;
+
+export { FormThemeProvider, type FormThemeProviderProps, ThemeContext, useFormTheme };