@sonata-innovations/fiber-theme-editor

A plug-and-play theming widget for Fiber. It is a controlled editor for the theme slice of a flow's configuration — pick a mode, light/dark scheme, accent color, style, and (optionally) every palette token — beside a live FBRE preview that renders the real form with the chosen theme.

The editor's value is { mode, theme }:

• mode — "standard" | "conversational" (lives on FlowConfiguration.mode).
• theme — the ThemeConfig (lives on FlowConfiguration.theme).

Splice the result back into your flow: theme → flow.config.theme, mode → flow.config.mode.

Install

npm install @sonata-innovations/fiber-theme-editor

Peer dependencies

Install these alongside it (the editor renders a real FBRE preview, so it shares your app's FBRE and types instances rather than bundling its own):

npm install react react-dom @sonata-innovations/fiber-fbre @sonata-innovations/fiber-types

Styles

Import the editor's stylesheet and FBRE's stylesheet (the preview needs it):

import "@sonata-innovations/fiber-theme-editor/styles";
import "@sonata-innovations/fiber-fbre/styles";

Usage

The widget is fully controlled — hold { mode, theme } in your own state:

import { useState } from "react";
import {
  ThemeEditor,
  FBTL_KNOBS,
  type ThemeEditorValue,
} from "@sonata-innovations/fiber-theme-editor";
import "@sonata-innovations/fiber-theme-editor/styles";
import "@sonata-innovations/fiber-fbre/styles";

function ThemePanel() {
  const [value, setValue] = useState<ThemeEditorValue>({
    mode: "conversational",
    theme: { colorScheme: "light" },
  });

  return (
    <ThemeEditor
      mode={value.mode}
      theme={value.theme}
      onChange={setValue}
      knobs={FBTL_KNOBS}
    />
  );
}

Props

| Prop | Type | Default | Description | | ------------- | -------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------- | | mode | FlowModeType | — | Current flow mode. Gates the style dropdown and the preview render. | | theme | ThemeConfig | — | Current theme. Any subset of knobs may be set; unset knobs fall through to the scheme/style preset. | | onChange | (next: ThemeEditorValue) => void | — | Fired on every change with the full { mode, theme }. | | defaultTab | "settings" \| "palette" | "settings" | Which pane is open on mount. | | knobs | ThemeKnob[] | full set | Which palette knobs the Palette tab exposes. Use the FBTL_KNOBS / FBT_KNOBS presets. | | defaults | ThemeConfig | FBRE built-ins | Baseline shown as placeholder/swatch for unset knobs, and merged under theme in the preview. | | previewFlow | Flow | kitchen sink | Flow rendered in the live preview. | | className | string | — | Extra class on the root element. |

Knob presets

• FBTL_KNOBS — background, surface, text, border, radius, fontFamily, error.
• FBT_KNOBS — the above plus success, warning (the callout-only colors).

Exports

• ThemeEditor — the widget.
• FBTL_KNOBS, FBT_KNOBS, KNOB_DEFS — knob sets and metadata.
• LIGHT_THEME_DEFAULTS, DARK_THEME_DEFAULTS, resolveThemeDefaults — the built-in default values shown as placeholders.
• buildGlossary, SETTINGS_GLOSSARY, KNOB_GLOSSARY — the in-widget glossary copy.
• STANDARD_STYLE_OPTIONS, CONVERSATIONAL_STYLE_OPTIONS, styleOptionsForMode, reconcileStyle — the style dropdown options.
• buildPreviewFlow, defaultPreviewFlow — the default preview flow.
• Types: ThemeEditorProps, ThemeEditorValue, ThemeEditorTab, ThemeKnob, GlossaryEntry, KnobDef, KnobKind, StyleOption.

License

MIT