@dataverse-kit/form-runtime 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { b as FormThemeSettings, a as FormThemeColors } from './theme-BfeZIxmZ.js';
+
+/**
+ * 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 };

package/dist/theme.mjs

@@ -0,0 +1,186 @@
+// src/theme/FormThemeContext.tsx
+import { createContext, useContext, useMemo } from "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
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(DEFAULT_THEME.colors);
+function useFormTheme() {
+  return useContext(ThemeContext);
+}
+var FormThemeProvider = ({
+  themeSettings,
+  children
+}) => {
+  const themeColors = useMemo(() => {
+    return getResolvedThemeColors(themeSettings);
+  }, [themeSettings]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeColors, children });
+};
+export {
+  FormThemeProvider,
+  ThemeContext,
+  useFormTheme
+};
+//# sourceMappingURL=theme.mjs.map

package/dist/theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/FormThemeContext.tsx","../src/types/theme.ts"],"sourcesContent":["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":[]}