@fanfare-io/fanfare-sdk-react 0.1.0

package/dist/styles/index.d.ts

@@ -0,0 +1,2 @@
+export { default as baseStyles } from './base.css?inline';
+export { default as themeStyles } from './theme.css?inline';

package/dist/styles/theme.css

@@ -0,0 +1,143 @@
+@theme {
+  /* Core colors - global defaults; ThemeProvider only emits inline overrides.
+   * Color semantics (aligned with messaging templates):
+   * - surface: Outer/surrounding area (transparent by default)
+   * - background: Main content area (white by default)
+   */
+  --color-primary: #1d1f27;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f4f4f5;
+  --color-background: #ffffff;
+  --color-surface: transparent;
+  --color-surface-foreground: #1d1f27;
+  --color-foreground: #1d1f27;
+  --color-muted: #4b4e56cc;
+  --color-muted-foreground: #4b4e5699;
+  --color-border: #4b4e5666;
+
+  /* Status colors */
+  --color-success: oklch(0.77 0.18 130);
+  --color-success-foreground: #111111;
+  --color-warning: oklch(0.72 0.18 65);
+  --color-warning-foreground: #111111;
+  --color-danger: oklch(0.63 0.24 25);
+  --color-danger-foreground: #ffffff;
+
+  /* Typography */
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-heading: "Inter", system-ui, sans-serif;
+  /*
+   * --font-mono is intentionally not declared globally. The clean and retro
+   * variant blocks below set `--ff-font-mono` to the Inconsolata stack so the
+   * variant-scoped `font-mono` utility resolves correctly. The `default`
+   * variant has no mono-aesthetic surface today, so we let Tailwind's
+   * built-in default mono stack apply for compact component surfaces (access-code
+   * input, draw-module entry numbers, debug stories).
+   */
+
+  /* Extension below Tailwind's default `text-xs` (12px) for badge / pill / micro-label copy. */
+  --text-xxs: 0.625rem;
+  --text-xxs--line-height: 0.875rem;
+}
+
+/**
+ * Per-variant default tokens. Higher specificity than :root @theme defaults,
+ * lower than ThemeProvider inline overrides — so a customer overriding only
+ * `primary` does not reset the variant's other token defaults.
+ *
+ * Each block declares `--ff-variant: "<name>"` so the rule survives Tailwind
+ * v4 / Lightning CSS compilation (empty rules are stripped). ENG-464 will
+ * populate variant-specific design tokens here.
+ */
+[data-fanfare-variant="default"] {
+  --ff-variant: "default";
+}
+
+[data-fanfare-variant="retro"] {
+  --ff-variant: "retro";
+  --ff-color-background: #f4f1ea;
+  --ff-color-foreground: #000000;
+  --ff-color-muted: #444444;
+  --ff-color-muted-foreground: #444444;
+  --ff-color-border: #000000;
+  /*
+   * Note: retro intentionally does NOT override --ff-color-danger. The
+   * brutalist `#ff3a00` orange is a Countdown-critical-urgency accent only
+   * (applied directly in the countdown cva compound), not a global semantic
+   * destructive color. Destructive buttons / error views keep the customer's
+   * (or @theme default) danger token under retro.
+   */
+  --ff-font-sans: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --ff-font-heading: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --ff-font-mono: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+[data-fanfare-variant="rounded"] {
+  --ff-variant: "rounded";
+}
+
+[data-fanfare-variant="clean"] {
+  --ff-variant: "clean";
+  --ff-color-background: #ffffff;
+  --ff-color-foreground: #0a0a0a;
+  --ff-color-muted: #737373;
+  --ff-color-muted-foreground: #737373;
+  --ff-color-border: #e8e8e8;
+  --ff-font-sans: "Figtree", system-ui, sans-serif;
+  --ff-font-heading: "Figtree", system-ui, sans-serif;
+  --ff-font-mono: "Inconsolata", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+@layer base {
+  /**
+   * Default theme values for .fanfare-themed elements.
+   * ThemeProvider overrides these via inline styles.
+   * Uses surface (outer area) as the root background color.
+   */
+  .fanfare-themed {
+    font-family: var(--ff-font-sans);
+    color: var(--ff-color-foreground);
+    background-color: var(--ff-color-surface);
+  }
+
+  /**
+   * Ensure all descendants inherit border and outline colors
+   */
+  .fanfare-themed *,
+  .fanfare-themed ::after,
+  .fanfare-themed ::before,
+  .fanfare-themed ::backdrop,
+  .fanfare-themed ::file-selector-button {
+    border-color: var(--ff-color-border);
+    outline-color: var(--ff-color-border);
+  }
+
+  /**
+   * Interactive elements
+   */
+  .fanfare-themed button:not(:disabled),
+  .fanfare-themed [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  /**
+   * Focus styles
+   */
+  .fanfare-themed :focus-visible {
+    outline: 2px solid var(--ff-color-primary);
+    outline-offset: 2px;
+  }
+
+  /**
+   * Respect reduced motion preferences
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .fanfare-themed *,
+    .fanfare-themed ::before,
+    .fanfare-themed ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Theme System
+ *
+ * Provides theming infrastructure for Fanfare SDK components.
+ *
+ * @packageDocumentation
+ */
+export { THEME_CSS_VARS } from './theme.types';
+export type { ResolvedTheme, ThemeCssVar, WidgetThemeConfig, WidgetVariant } from './theme.types';
+export type { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+export { ThemeContext, useMergedTheme, useThemeContext } from './theme-context';
+export type { ThemeContextValue } from './theme-context';
+export { ThemeProvider } from './theme-provider';
+export type { ThemeProviderProps } from './theme-provider';
+export { useTheme, useThemeAndVariant, useVariant } from './use-theme';
+export { buildThemeCssVars } from './theme-utils';

package/dist/theme/theme-context.d.ts

@@ -0,0 +1,20 @@
+import { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+import { ResolvedTheme, WidgetVariant } from './theme.types';
+/**
+ * Context value for theme state.
+ */
+export interface ThemeContextValue extends ResolvedTheme {
+    /** Whether this is the root theme provider */
+    isRoot: boolean;
+}
+export declare const ThemeContext: import('react').Context<ThemeContextValue>;
+/**
+ * Hook to access the current theme context.
+ * Returns the merged theme and variant from the nearest ThemeProvider.
+ */
+export declare function useThemeContext(): ThemeContextValue;
+/**
+ * Hook to create a merged theme value for a nested provider.
+ * Shallow merges the new theme over the parent theme.
+ */
+export declare function useMergedTheme(theme?: BrandTheme | null, variant?: WidgetVariant): ThemeContextValue;

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,20 @@
+import { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+import { ReactNode } from 'react';
+import { WidgetVariant } from './theme.types';
+export interface ThemeProviderProps {
+    /** Theme overrides to merge with parent theme */
+    theme?: BrandTheme | null;
+    /** Widget variant (layout/density) */
+    variant?: WidgetVariant;
+    /** HTML element to render as wrapper */
+    as?: keyof JSX.IntrinsicElements;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child components */
+    children: ReactNode;
+}
+/**
+ * Provides theme context to descendants and applies CSS variables.
+ * Supports nesting - child providers shallow-merge over parent theme.
+ */
+export declare function ThemeProvider({ theme, variant, as: Component, className, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/theme/theme-utils.d.ts

@@ -0,0 +1,18 @@
+import { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+/**
+ * Builds CSS custom property values from a theme override.
+ *
+ * Only emits CSS vars for fields the customer explicitly configured plus any
+ * vars derived from those (computed foregrounds, mirrored mutedForeground,
+ * heading font fallback). Defaults for unset fields come from the SDK's CSS
+ * layer (:root @theme + [data-fanfare-variant] selectors), so per-variant
+ * defaults survive single-token overrides.
+ *
+ * Color semantics (aligned with messaging templates):
+ * - surface: Outer/surrounding area (transparent by default)
+ * - background: Main content area (white by default)
+ *
+ * Note: border is intentionally NOT mirrored from `muted` — see the comment
+ * inside the muted branch.
+ */
+export declare function buildThemeCssVars(theme: BrandTheme): Record<string, string>;

package/dist/theme/theme.types.d.ts

@@ -0,0 +1,47 @@
+import { BrandTheme, WidgetVariant } from '@fanfare-io/fanfare-sdk-core/theme';
+export type { WidgetVariant } from '@fanfare-io/fanfare-sdk-core/theme';
+/**
+ * Extended theme configuration for widgets.
+ * Builds on BrandTheme from fanfare-sdk-core.
+ */
+export interface WidgetThemeConfig {
+    /** Base theme from experience configuration */
+    theme?: BrandTheme;
+    /** Layout/density variant (not related to colors) */
+    variant?: WidgetVariant;
+}
+/**
+ * Resolved theme with all defaults applied.
+ * This is what components receive from the theme context.
+ */
+export interface ResolvedTheme {
+    /** The fully-merged BrandTheme with defaults */
+    theme: BrandTheme;
+    /** The active variant */
+    variant: WidgetVariant;
+}
+/**
+ * CSS custom property names used by the theme system.
+ * Maps to Tailwind V4 variables with ff- prefix (--ff-color-*, --ff-font-*).
+ */
+export declare const THEME_CSS_VARS: {
+    readonly primary: "--ff-color-primary";
+    readonly primaryForeground: "--ff-color-primary-foreground";
+    readonly secondary: "--ff-color-secondary";
+    readonly background: "--ff-color-background";
+    readonly surface: "--ff-color-surface";
+    readonly surfaceForeground: "--ff-color-surface-foreground";
+    readonly foreground: "--ff-color-foreground";
+    readonly muted: "--ff-color-muted";
+    readonly mutedForeground: "--ff-color-muted-foreground";
+    readonly border: "--ff-color-border";
+    readonly success: "--ff-color-success";
+    readonly successForeground: "--ff-color-success-foreground";
+    readonly warning: "--ff-color-warning";
+    readonly warningForeground: "--ff-color-warning-foreground";
+    readonly danger: "--ff-color-danger";
+    readonly dangerForeground: "--ff-color-danger-foreground";
+    readonly fontFamily: "--ff-font-sans";
+    readonly fontHeading: "--ff-font-heading";
+};
+export type ThemeCssVar = (typeof THEME_CSS_VARS)[keyof typeof THEME_CSS_VARS];

package/dist/theme/use-theme.d.ts

@@ -0,0 +1,44 @@
+import { BrandTheme } from '@fanfare-io/fanfare-sdk-core/theme';
+import { WidgetVariant } from './theme.types';
+/**
+ * Access the current theme from the nearest ThemeProvider.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ *   return <div style={{ color: theme.primary }}>Themed content</div>;
+ * }
+ * ```
+ */
+export declare function useTheme(): BrandTheme;
+/**
+ * Access the current widget variant from the nearest ThemeProvider.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const variant = useVariant();
+ *   if (variant === "compact") {
+ *     return <CompactView />;
+ *   }
+ *   return <DefaultView />;
+ * }
+ * ```
+ */
+export declare function useVariant(): WidgetVariant;
+/**
+ * Access both theme and variant from the nearest ThemeProvider.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, variant } = useThemeAndVariant();
+ *   // ...
+ * }
+ * ```
+ */
+export declare function useThemeAndVariant(): {
+    theme: BrandTheme;
+    variant: WidgetVariant;
+};

package/docs/SLOTS.md

@@ -0,0 +1,89 @@
+# ExperienceWidget Slots
+
+`ExperienceWidget` slots are render props for targeted UI overrides. Each slot is called only when the matching journey or sequence state is active; all other states keep the default Fanfare UI.
+
+The slot surface is derived from the same model as `JourneyView`: `journeyStage` -> `sequence.phase` -> `sequence.mechanism`. Actions are not serialized as a separate source of truth, and the server stays authoritative over what is permitted.
+
+Use `children` or `useExperienceJourney` when you need to replace the full widget. Use `slots` when the default flow is correct and a specific state needs custom UI.
+
+## Shared Props
+
+Every slot receives:
+
+- `snapshot`: the current `JourneySnapshot | null`.
+- `view`: the current `JourneyView | null`.
+- `error`: the current widget error string, or `null`.
+
+## Journey Slots
+
+| Slot         | Meaningful state                                              | Extra props                                               |
+| ------------ | ------------------------------------------------------------- | --------------------------------------------------------- |
+| `start`      | `journeyStage: "ready"`                                       | `onStart`, `isStarting`                                   |
+| `loading`    | `journeyStage: "routing"`, gated loading, or fallback loading | `message?`                                                |
+| `auth`       | `journeyStage: "gated"` with an auth gate                     | `onSubmit`, `onVerify`, `onSkip?`                         |
+| `accessCode` | `journeyStage: "gated"` with an access-code gate              | `onSubmit`, `onSkip?`                                     |
+| `challenge`  | `journeyStage: "gated"` with a bot-check gate                 | `challenge`, `botMitigation?`, `onVerifyToken`, `onRetry` |
+| `error`      | Widget action or loading error                                | `error`, `onRetry`                                        |
+
+## Routed Sequence Slots
+
+| Slot            | Meaningful state                                | Mechanisms                                                 | Extra props                                      |
+| --------------- | ----------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------ |
+| `upcoming`      | `phase: "scheduled"`                            | `queue`, `draw`, `auction`, `timed_release`, `appointment` | `startsAt?`, `canEnter`, `onEnter`, `isEntering` |
+| `upcoming`      | `phase: "enterable"`                            | `waitlist`                                                 | `startsAt?`, `canEnter`, `onEnter`, `isEntering` |
+| `waitlist`      | `phase: "participating"`                        | `waitlist`                                                 | `startsAt?`, `onLeave`, `isLeaving`              |
+| `enterable`     | `phase: "enterable"`                            | `queue`, `draw`, `auction`, `timed_release`, `appointment` | `sequence`, `participationType`                  |
+| `participating` | `phase: "participating"`                        | `queue`, `draw`, `auction`, `timed_release`, `appointment` | `sequence`, `participationType`, `position?`     |
+| `granted`       | `phase: "granted"`                              | `queue`, `draw`, `auction`, `timed_release`                | `sequence`, `grant?`, `expiresAt?`               |
+| `expired`       | `phase: "ended"` with `outcome.type: "expired"` | any ended mechanism                                        | `reason`, `endedAt?`                             |
+| `ended`         | `phase: "unavailable"` or `phase: "ended"`      | any ended mechanism                                        | `reason`, `endedAt?`                             |
+
+There is no slot for `phase: "settling"`; `draw` and `auction` render their default settling modules. There is no `granted` state for `appointment` or `waitlist`. The `ended` slot also renders `phase: "unavailable"` for convenience; `unavailable` is not a terminal phase.
+
+## `slots.enterable`
+
+`slots.enterable` receives the typed `sequence` view. Call the method exposed for that exact `phase` and `mechanism`.
+
+```tsx
+<ExperienceWidget
+  experienceId="exp_123"
+  slots={{
+    enterable: ({ sequence, participationType }) => {
+      if (sequence.mechanism === "auction") {
+        return <button onClick={() => void sequence.bid("125.00")}>Bid</button>;
+      }
+      if (sequence.mechanism === "appointment") {
+        return <button onClick={() => void sequence.book("slot_123")}>Book</button>;
+      }
+      return <button onClick={() => void sequence.enter()}>Enter {participationType}</button>;
+    },
+  }}
+/>
+```
+
+`participationType` is the slot prop carrying `sequence.mechanism` for the five non-waitlist mechanisms: `queue`, `draw`, `auction`, `timed_release`, or `appointment`. See the Mechanisms section of the core SDK `JOURNEY_MODEL.md`.
+
+## `slots.participating`
+
+`slots.participating` receives the typed `sequence` view for `queue`, `draw`, `auction`, `timed_release`, and `appointment`.
+
+- `queue`, `draw`: `state$`, `leave()`.
+- `auction`: `state$`, `bid(amount)`, `leave()`.
+- `timed_release`: `state$`, `leave()`, `complete()`.
+- `appointment`: `state$`, `cancel(reason?)`, `reschedule(newSlotId, newLocationId?)`.
+
+`position` is populated when queue display state includes a queue position.
+
+## Default Rendering
+
+Without a slot:
+
+- `ready` uses `StartView`.
+- `routing` and loading fallbacks use `LoadingView`.
+- `gated` uses `JourneyGate` or `ChallengeGate`.
+- `scheduled` and enterable `waitlist` use `UpcomingModule`.
+- participating `waitlist` uses `WaitlistView`.
+- `queue`, `draw`, `auction`, `timed_release`, and `appointment` use their default modules for supported phases.
+- `granted` uses the distribution module's granted panel.
+- `ended` uses the distribution module's outcome UI for `queue`, `draw`, `auction`, `timed_release`, and `appointment`; `unavailable` uses `EndedModule`.
+- ended `waitlist` can be handled with `slots.ended` or full custom rendering.

package/docs/STYLING.md

@@ -0,0 +1,61 @@
+# Styling Reference
+
+`@fanfare-io/fanfare-sdk-react` ships dressed components — `ExperienceWidget`, the
+sequence modules, and slot helpers — that read from a single theme context.
+Most customers should rely on the defaults, then override at four levels of
+increasing specificity:
+
+1. `theme` for brand colors, typography, and imagery
+2. `variant` for packaged presentation styles
+3. `slots` for swapping specific journey or sequence states
+4. `children` or `useExperienceJourney` for full custom rendering
+
+The rendered surface follows the SDK model: `journeyStage`, then
+`sequence.phase`, then `sequence.mechanism`. Styling changes presentation only;
+the server stays authoritative over which actions are permitted.
+
+## Theme
+
+Pass a `BrandTheme` to `ThemeProvider` or directly to `ExperienceWidget`.
+
+```tsx
+<ThemeProvider theme={{ primary: "#0f766e", fontHeading: "Instrument Serif, serif" }}>
+  <ExperienceWidget experienceId="exp_123" />
+</ThemeProvider>
+```
+
+Per-widget overrides are shallow-merged over the current theme.
+
+## Variant
+
+`ExperienceWidget` supports packaged variants:
+
+- `default`
+- `retro`
+- `rounded`
+- `clean`
+
+Use variants for presentation differences, not for business logic.
+
+## Slots
+
+Replace specific sections with slots — the slot's render prop is called when
+that state is active. All other states keep their default rendering.
+
+```tsx
+<ExperienceWidget
+  experienceId="exp_123"
+  slots={{
+    upcoming: ({ startsAt, onEnter }) => <YourUpcomingCard startsAt={startsAt} onCta={onEnter} />,
+  }}
+/>
+```
+
+See [`docs/SLOTS.md`](./SLOTS.md) for the full slot inventory.
+
+## Custom rendering
+
+For full control, pass `children` to `ExperienceWidget` (a render prop
+receiving `{ journey, view, snapshot, error, start, isStarting }`) or assemble
+your own UI from `useExperienceJourney`. This is the lowest-level integration
+and bypasses slots entirely.

package/package.json

@@ -0,0 +1,145 @@
+{
+  "name": "@fanfare-io/fanfare-sdk-react",
+  "version": "0.1.0",
+  "description": "React adapter for Fanfare SDK",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fanfare-io/fanfare-sdk.git"
+  },
+  "homepage": "https://docs.fanfare.io/sdk/components/react",
+  "bugs": {
+    "url": "https://github.com/fanfare-io/fanfare-sdk/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist/",
+    "docs/",
+    "README.md"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": {
+      "import": "./dist/styles/base.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "motion": "^12.23.12",
+    "react": "^18.0.0 || ^19.1.1",
+    "react-dom": "^18.0.0 || ^19.1.1"
+  },
+  "dependencies": {
+    "canvas-confetti": "^1.9.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "nanostores": "^1.1.0",
+    "tailwind-merge": "^2.6.0",
+    "valibot": "^1.1.0",
+    "@fanfare-io/fanfare-sdk-core": "0.1.0",
+    "@fanfare-io/fanfare-sdk-i18n": "0.1.0"
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.4",
+    "@size-limit/preset-small-lib": "^11.1.8",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-themes": "^10.4.0",
+    "@storybook/addon-vitest": "~10.2.16",
+    "@storybook/react-vite": "^10.4.0",
+    "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.3",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/canvas-confetti": "^1.9.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "jsdom": "^26.1.0",
+    "motion": "^12.23.12",
+    "playwright": "^1.51.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.56.2",
+    "rimraf": "^6.0.1",
+    "size-limit": "^11.1.8",
+    "storybook": "^10.4.0",
+    "tailwindcss": "^4.1.3",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.9.2",
+    "unplugin-icons": "^22.1.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4",
+    "@fanfare-io/fanfare-sdk-core": "0.1.0",
+    "@fanfare-io/fanfare-sdk-solid": "0.1.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "fanfare",
+    "react",
+    "hooks",
+    "sdk",
+    "queue",
+    "ecommerce"
+  ],
+  "license": "Apache-2.0",
+  "size-limit": [
+    {
+      "name": "React adapter",
+      "path": "dist/index.js",
+      "limit": "50 KB",
+      "ignore": [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "motion",
+        "motion/react",
+        "@fanfare-io/fanfare-sdk-core",
+        "@fanfare-io/fanfare-sdk-core/internals",
+        "@fanfare-io/fanfare-sdk-core/test-utils",
+        "@fanfare-io/fanfare-sdk-i18n"
+      ]
+    }
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist && pnpm -F @fanfare-io/fanfare-sdk-i18n build:deps && pnpm -F @fanfare-io/fanfare-sdk-core build:deps",
+    "pretest": "pnpm -F @fanfare-io/fanfare-sdk-i18n build:deps && pnpm -F @fanfare-io/fanfare-sdk-core build:deps && pnpm -F @fanfare-io/fanfare-sdk-solid build:incremental",
+    "build": "vite build && tailwindcss -i src/styles/base.css -o dist/styles/base.css && pnpm size",
+    "build:incremental": "vite build --emptyOutDir false",
+    "build:strict": "pnpm typecheck && pnpm build",
+    "build-storybook": "storybook build",
+    "dev": "vite build --watch",
+    "fmt": "prettier src --write",
+    "lint": "oxlint src",
+    "lint:fix": "oxlint --fix src",
+    "size": "size-limit",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "vitest run --project unit",
+    "test:browser": "vitest run --project storybook",
+    "test:watch": "vitest --project unit",
+    "test:unit": "vitest run --project unit --passWithNoTests",
+    "test:component": "vitest run .test.tsx --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  }
+}