@principal-ai/subsystems-react 0.17.0

package/src/pierre/PierreSnippetView.tsx

@@ -0,0 +1,184 @@
+/**
+ * PierreSnippetView — focused line-range code view via `@pierre/diffs`.
+ *
+ * Ported from `@industry-theme/file-city-panel` so subsystem graphs and
+ * Storybook can scroll to a declaration line without that panel package.
+ *
+ * `File.selectedLines` highlights the focus line but does not scroll; we call
+ * `scrollIntoView` on the rendered line after Pierre paints.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { File } from '@pierre/diffs/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { buildPierreOptions, PIERRE_FILE_STYLE } from './pierreBackground';
+import { pierreLangForPath } from './pierreFileLang';
+import { sliceSnippetWindow } from './sliceSnippet';
+
+import { scrollAnchorLine } from './scrollAnchor';
+
+function scrollFocusLineIntoView(
+  fileContainer: HTMLElement,
+  focusOffset: number,
+): void {
+  const root = fileContainer.shadowRoot ?? fileContainer;
+  const anchorLine = scrollAnchorLine(focusOffset);
+  const lineEl = root.querySelector(
+    `[data-line="${anchorLine}"]`,
+  ) as HTMLElement | null;
+  lineEl?.scrollIntoView({ block: 'start', behavior: 'auto' });
+}
+
+export interface PierreSnippetViewProps {
+  filePath: string;
+  fileName: string;
+  /** First line of the snippet (1-based, inclusive). */
+  startLine: number;
+  /** Last line of the snippet (1-based, inclusive). */
+  endLine: number;
+  /** Line to call out as the focus point; defaults to `startLine`. */
+  focusLine?: number;
+  /** Lines of context above/below the snippet; defaults to 2. */
+  contextLines?: number;
+  /** Host-supplied file reader. */
+  readFile: (path: string) => Promise<string>;
+  /** Override Pierre's container background. Any CSS color string. */
+  background?: string;
+}
+
+export function PierreSnippetView({
+  filePath,
+  fileName,
+  startLine,
+  endLine,
+  focusLine,
+  contextLines = 2,
+  readFile,
+  background,
+}: PierreSnippetViewProps) {
+  const { theme } = useTheme();
+  const [contents, setContents] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setContents(null);
+    setError(null);
+    void readFile(filePath)
+      .then((content) => {
+        if (!cancelled) setContents(content);
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to read file');
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [filePath, readFile]);
+
+  const slice = useMemo(() => {
+    if (contents == null) return null;
+    return sliceSnippetWindow(
+      contents,
+      startLine,
+      endLine,
+      contextLines,
+      focusLine ?? startLine,
+    );
+  }, [contents, startLine, endLine, contextLines, focusLine]);
+
+  const fileObject = useMemo(
+    () =>
+      slice
+        ? {
+            name: fileName,
+            contents: slice.contents,
+            lang: pierreLangForPath(filePath),
+          }
+        : null,
+    [fileName, filePath, slice],
+  );
+
+  const lineNumberOffset = slice ? slice.sliceStart - 1 : 0;
+
+  const onPostRender = useCallback(
+    (fileContainer: HTMLElement) => {
+      if (lineNumberOffset !== 0) {
+        const root = fileContainer.shadowRoot ?? fileContainer;
+        const items = root.querySelectorAll('[data-column-number][data-line-index]');
+        items.forEach((el) => {
+          const idxStr = (el as HTMLElement).dataset.lineIndex;
+          if (idxStr == null) return;
+          const idx = Number.parseInt(idxStr, 10);
+          if (Number.isNaN(idx)) return;
+          const display = String(idx + 1 + lineNumberOffset);
+          const span = el.querySelector('[data-line-number-content]');
+          if (span && span.textContent !== display) {
+            span.textContent = display;
+          }
+        });
+      }
+      if (slice?.focusOffset != null) {
+        scrollFocusLineIntoView(fileContainer, slice.focusOffset);
+      }
+    },
+    [lineNumberOffset, slice?.focusOffset],
+  );
+
+  const options = useMemo(
+    () => ({
+      ...buildPierreOptions(background),
+      onPostRender,
+    }),
+    [background, onPostRender],
+  );
+
+  if (error) {
+    return (
+      <div style={{ padding: 16, color: theme.colors.error ?? '#e5534b' }}>
+        {error}
+      </div>
+    );
+  }
+  if (!fileObject || !slice) {
+    return (
+      <div style={{ padding: 16, color: theme.colors.textSecondary }}>
+        Loading…
+      </div>
+    );
+  }
+
+  const rangeLabel =
+    slice.sliceStart === slice.sliceEnd
+      ? `Line ${slice.sliceStart}`
+      : `Lines ${slice.sliceStart}–${slice.sliceEnd}`;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+      <div
+        style={{
+          padding: '4px 14px 6px',
+          fontFamily: theme.fonts.monospace,
+          fontSize: theme.fontSizes[0],
+          color: theme.colors.textSecondary,
+          letterSpacing: 0.4,
+          textTransform: 'uppercase',
+        }}
+      >
+        {rangeLabel}
+      </div>
+      <File
+        file={fileObject}
+        options={options}
+        selectedLines={
+          slice.focusOffset != null
+            ? { start: slice.focusOffset, end: slice.focusOffset }
+            : undefined
+        }
+        style={PIERRE_FILE_STYLE}
+      />
+    </div>
+  );
+}

package/src/pierre/PierreThroughlineCodeView.tsx

@@ -0,0 +1,304 @@
+/**
+ * PierreThroughlineCodeView — multi-file step snippets via `@pierre/diffs` CodeView.
+ *
+ * Renders one sliced window per throughline step in a single virtualized
+ * scroll; when `stepIndex` changes, scrolls that step's site line into view
+ * and highlights it via CodeView `selectedLines` (same mechanism as
+ * `PierreSnippetView`).
+ */
+
+import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
+import {
+  CodeView,
+  type CodeViewHandle,
+  type CodeViewItem,
+  type CodeViewReactOptions,
+  type DiffLineAnnotation,
+  type LineAnnotation,
+} from '@pierre/diffs/react';
+
+/** Mirrors Pierre's CodeViewLineSelection (not re-exported from the React entry). */
+type CodeViewLineSelection = {
+  id: string;
+  range: { start: number; end: number };
+};
+/** Metadata carried on a throughline step's line annotation. */
+type ThroughlineStepAnnotation = { text: string };
+import { useTheme } from '@principal-ade/industry-theme';
+import type { SubsystemThroughline } from '../subsystem/model';
+import { buildPierreOptions, PIERRE_FILE_STYLE } from './pierreBackground';
+import {
+  pierreCodeViewFileName,
+  pierreLangForPath,
+} from './pierreFileLang';
+import { resolvePierreSyntaxThemeName } from './pierreSyntaxTheme';
+import { sliceSnippetWindow, type SnippetSlice } from './sliceSnippet';
+
+export interface PierreThroughlineCodeViewProps {
+  throughline: SubsystemThroughline;
+  /** Focused step; `null` shows all snippets without scrolling to a step. */
+  stepIndex: number | null;
+  readFile: (path: string) => Promise<string>;
+  /** Context lines above/below each step site; defaults to 8. */
+  contextLines?: number;
+  /** Override Pierre's container background. */
+  background?: string;
+}
+
+type FileLoadState =
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ready'; byPath: Map<string, string> };
+
+function stepItemId(throughlineId: string, index: number): string {
+  return `${throughlineId}:${index}`;
+}
+
+export function PierreThroughlineCodeView({
+  throughline,
+  stepIndex,
+  readFile,
+  contextLines = 8,
+  background,
+}: PierreThroughlineCodeViewProps) {
+  const { theme, mode } = useTheme();
+  const viewRef = useRef<CodeViewHandle<undefined>>(null);
+  const [load, setLoad] = useState<FileLoadState>({ status: 'loading' });
+
+  const pathsKey = useMemo(() => {
+    const paths = [...new Set(throughline.steps.map((s) => s.file))];
+    paths.sort();
+    return paths.join('\0');
+  }, [throughline.steps]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoad({ status: 'loading' });
+    const paths = [...new Set(throughline.steps.map((s) => s.file))];
+    void Promise.all(
+      paths.map(async (path) => {
+        const contents = await readFile(path);
+        return [path, contents] as const;
+      }),
+    )
+      .then((entries) => {
+        if (cancelled) return;
+        setLoad({ status: 'ready', byPath: new Map(entries) });
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setLoad({
+          status: 'error',
+          message: err instanceof Error ? err.message : 'Failed to read files',
+        });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [throughline.id, pathsKey, readFile]);
+
+  const slices = useMemo((): SnippetSlice[] => {
+    if (load.status !== 'ready') return [];
+    return throughline.steps.map((step) => {
+      const contents = load.byPath.get(step.file) ?? '';
+      return sliceSnippetWindow(
+        contents,
+        step.line,
+        step.line,
+        contextLines,
+        step.line,
+      );
+    });
+  }, [load, throughline.steps, contextLines]);
+
+const items = useMemo((): CodeViewItem<ThroughlineStepAnnotation>[] => {
+    if (load.status !== 'ready' || slices.length === 0) return [];
+    return throughline.steps.map((step, index) => {
+      const slice = slices[index]!;
+      const focus = slice.focusOffset;
+      const annotations:
+        | LineAnnotation<ThroughlineStepAnnotation>[]
+        | undefined =
+        step.annotation != null && step.annotation.length > 0 && focus != null
+          ? [
+              {
+                lineNumber: focus,
+                metadata: { text: step.annotation },
+              },
+            ]
+          : undefined;
+      return {
+        id: stepItemId(throughline.id, index),
+        type: 'file' as const,
+        version: 1,
+        annotations,
+        file: {
+          // Unique per-step name: many throughline steps share one path
+          // (e.g. seven sites in main.cpp), and identical `name`s have
+          // correlated with WebKit renderer traps in CodeView.
+          name: pierreCodeViewFileName(step.file, index),
+          contents: slice.contents,
+          // C-family → plain text: cpp Shiki still traps WebKit even with
+          // unique names (reproduced on 0.16.67).
+          lang: pierreLangForPath(step.file),
+          cacheKey: `${throughline.id}:${index}:${step.file}:${step.line}:${slice.sliceStart}-${slice.sliceEnd}`,
+        },
+      };
+    });
+  }, [load, slices, throughline.id, throughline.steps]);
+
+  /** Highlight the focused step's site line (1-based within its sliced window). */
+  const selectedLines = useMemo((): CodeViewLineSelection | null => {
+    if (stepIndex == null || stepIndex < 0 || stepIndex >= slices.length) {
+      return null;
+    }
+    const focus = slices[stepIndex]?.focusOffset;
+    if (focus == null) return null;
+    return {
+      id: stepItemId(throughline.id, stepIndex),
+      range: { start: focus, end: focus },
+    };
+  }, [stepIndex, slices, throughline.id]);
+
+  const renderHeaderPrefix = useMemo(() => {
+    return (item: CodeViewItem) => {
+      const index = Number.parseInt(item.id.split(':').pop() ?? '', 10);
+      const step = throughline.steps[index];
+      if (!step) return null;
+      const label =
+        step.symbol != null && step.symbol.length > 0
+          ? step.symbol
+          : `step ${index + 1}`;
+      return (
+        <span
+          style={{
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: theme.colors.textSecondary,
+            marginRight: 8,
+          }}
+        >
+          {index + 1}. {label}
+        </span>
+      );
+    };
+  }, [throughline.steps, theme]);
+
+  const renderHeaderMetadata = useMemo(() => {
+    return (item: CodeViewItem) => {
+      const index = Number.parseInt(item.id.split(':').pop() ?? '', 10);
+      const step = throughline.steps[index];
+      if (!step) return null;
+      return (
+        <span
+          style={{
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: theme.colors.textSecondary,
+            marginLeft: 8,
+          }}
+        >
+          L{step.line}
+        </span>
+      );
+    };
+  }, [throughline.steps, theme]);
+
+  const renderAnnotation = useMemo(() => {
+    return (
+      annotation:
+        | LineAnnotation<ThroughlineStepAnnotation>
+        | DiffLineAnnotation<ThroughlineStepAnnotation>,
+      item: CodeViewItem<ThroughlineStepAnnotation>,
+    ) => {
+      const index = Number.parseInt(item.id.split(':').pop() ?? '', 10);
+      const step = throughline.steps[index];
+      const text = annotation.metadata?.text;
+      if (!text || !step) return null;
+      return (
+        <span
+          style={{
+            display: 'inline-block',
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: theme.colors.textSecondary,
+            fontStyle: 'italic',
+            opacity: 0.9,
+          }}
+        >
+          {text}
+        </span>
+      );
+    };
+  }, [throughline.steps, theme]);
+
+  const options = useMemo((): CodeViewReactOptions => {
+    return {
+      theme: {
+        dark: resolvePierreSyntaxThemeName('dark'),
+        light: resolvePierreSyntaxThemeName('light'),
+      },
+      stickyHeaders: true,
+      disableFileHeader: false,
+      layout: { paddingTop: 8, paddingBottom: 16, gap: 12 },
+      ...(background ? buildPierreOptions(background) : {}),
+      ...(mode === 'light' || mode === 'dark' ? { themeType: mode } : {}),
+    };
+  }, [background, mode]);
+
+  useEffect(() => {
+    if (load.status !== 'ready' || stepIndex == null) return;
+    if (stepIndex < 0 || stepIndex >= throughline.steps.length) return;
+    const focus = slices[stepIndex]?.focusOffset;
+    if (focus == null) return;
+    // Defer until CodeView has laid out items.
+    const id = stepItemId(throughline.id, stepIndex);
+    const t = window.setTimeout(() => {
+      viewRef.current?.scrollTo({
+        type: 'line',
+        id,
+        lineNumber: focus,
+        align: 'center',
+      });
+    }, 50);
+    return () => window.clearTimeout(t);
+  }, [
+    load.status,
+    stepIndex,
+    throughline.id,
+    throughline.steps.length,
+    slices,
+    items.length,
+  ]);
+
+  if (load.status === 'error') {
+    return (
+      <div style={{ padding: 16, color: theme.colors.error ?? '#e5534b' }}>
+        {load.message}
+      </div>
+    );
+  }
+  if (load.status === 'loading' || items.length === 0) {
+    return (
+      <div style={{ padding: 16, color: theme.colors.textSecondary }}>
+        Loading…
+      </div>
+    );
+  }
+
+  // Pierre's CodeView prop / item unions blow past TS's complexity limit.
+  const CodeViewLoose = CodeView as unknown as (props: Record<string, unknown>) => ReactElement;
+
+  return (
+    <CodeViewLoose
+      ref={viewRef}
+      items={items}
+      options={options}
+      selectedLines={selectedLines}
+      renderHeaderPrefix={renderHeaderPrefix}
+      renderHeaderMetadata={renderHeaderMetadata}
+      renderAnnotation={renderAnnotation}
+      style={{ ...PIERRE_FILE_STYLE, height: '100%', overflow: 'auto' }}
+    />
+  );
+}

package/src/pierre/constructColors.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from 'bun:test';
+import { CONSTRUCT_COLOR, constructColorsFromPierreTheme } from './constructColors';
+import type { SubsystemComponentConstruct } from '../subsystem/model';
+
+const CONSTRUCTS: SubsystemComponentConstruct[] = [
+  'class',
+  'function',
+  'method',
+  'interface',
+  'type_alias',
+  'enum',
+  'module',
+  'store',
+  'external',
+];
+
+const HEX = /^#[0-9a-f]{6}$/;
+
+describe('constructColorsFromPierreTheme', () => {
+  test('resolves every construct to a hex in both themes (no fallbacks)', () => {
+    for (const themeName of ['pierre-dark', 'pierre-light'] as const) {
+      const colors = constructColorsFromPierreTheme(themeName);
+      for (const construct of CONSTRUCTS) {
+        expect(colors[construct]).toMatch(HEX);
+      }
+    }
+  });
+
+  test('all seven constructs are distinguishable within a theme', () => {
+    for (const themeName of ['pierre-dark', 'pierre-light'] as const) {
+      const colors = constructColorsFromPierreTheme(themeName);
+      const values = CONSTRUCTS.map((c) => colors[c]);
+      expect(new Set(values).size).toBe(CONSTRUCTS.length);
+    }
+  });
+
+  test('colliding scope pairs are shaded apart (class/type, function/method)', () => {
+    const dark = constructColorsFromPierreTheme('pierre-dark');
+    expect(dark.class).not.toBe(dark.type);
+    expect(dark.function).not.toBe(dark.method);
+  });
+
+  test('dark and light instantiations differ', () => {
+    expect(constructColorsFromPierreTheme('pierre-dark')).not.toEqual(
+      constructColorsFromPierreTheme('pierre-light'),
+    );
+  });
+
+  test('the static dark instantiation matches the derived table', () => {
+    expect(CONSTRUCT_COLOR).toEqual(constructColorsFromPierreTheme('pierre-dark'));
+  });
+});

package/src/pierre/constructColors.ts

@@ -0,0 +1,112 @@
+/**
+ * Construct colors derived from the Pierre syntax themes.
+ *
+ * Single source of truth for node coloring: the same palette the declaration
+ * panel and Pierre file views render with. The themes are static JSON objects
+ * (VS Code/Shiki `tokenColors` scope rules), so extraction is a synchronous
+ * scope lookup — no Shiki call, no React context. Dark/light (and any future
+ * variant) resolves by mode at render time.
+ *
+ * Syntax themes deliberately reuse one hue across related scopes (class and
+ * type share `entity.name.class`); the node taxonomy needs distinguishable
+ * colors, so colliding constructs take a shade of the scope color — derived
+ * from the theme itself, toward white in dark themes and toward black in
+ * light themes.
+ */
+
+import type { SubsystemComponentConstruct } from '../subsystem/model';
+import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
+import pierreDark from '@pierre/theme/pierre-dark';
+import pierreLight from '@pierre/theme/pierre-light';
+
+interface PierreThemeInput {
+  type: 'dark' | 'light';
+  colors: Record<string, string>;
+  tokenColors: Array<{ scope: string | string[]; settings: { foreground?: string } }>;
+}
+
+const THEMES: Record<PierreSyntaxThemeName, PierreThemeInput> = {
+  'pierre-dark': pierreDark as unknown as PierreThemeInput,
+  'pierre-light': pierreLight as unknown as PierreThemeInput,
+};
+
+/** First rule whose scope list contains the exact scope. */
+function scopeColor(theme: PierreThemeInput, scope: string): string | undefined {
+  for (const rule of theme.tokenColors) {
+    const scopes = Array.isArray(rule.scope) ? rule.scope : [rule.scope];
+    if (scopes.includes(scope)) return rule.settings.foreground;
+  }
+  return undefined;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+  const n = parseInt(full.slice(0, 6), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex([r, g, b]: [number, number, number]): string {
+  const to = (v: number) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0');
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/** Linear blend of two hex colors; amount 0 = base, 1 = other. */
+function mix(hex: string, other: string, amount: number): string {
+  const base = hexToRgb(hex);
+  const target = hexToRgb(other);
+  return rgbToHex([
+    base[0] + (target[0] - base[0]) * amount,
+    base[1] + (target[1] - base[1]) * amount,
+    base[2] + (target[2] - base[2]) * amount,
+  ]);
+}
+
+export function constructColorsFromPierreTheme(
+  themeName: PierreSyntaxThemeName,
+): Record<SubsystemComponentConstruct, string> {
+  const theme = THEMES[themeName];
+  // A scope the theme doesn't declare resolves to the theme's own foreground —
+  // still all-Pierre, never a hand-picked value.
+  const editorFg = theme.colors['editor.foreground'] ?? '#fafafa';
+  const pick = (scope: string) => scopeColor(theme, scope) ?? editorFg;
+  const towardBackground = theme.type === 'dark' ? lighten : darken;
+
+  const classColor = pick('entity.name.class');
+  const functionColor = pick('entity.name.function');
+  const typeColor = pick('support.type');
+  const moduleColor = pick('entity.name.namespace');
+
+  return {
+    class: classColor,
+    // interface/type are the type-name scope, shaded to separate them from
+    // class (whose declaration name shares the same hue in syntax themes)
+    interface: towardBackground(typeColor, 0.14),
+    type_alias: towardBackground(typeColor, 0.28),
+    function: functionColor,
+    method: towardBackground(functionColor, 0.14),
+    // enum members are constants — the generic constant hue
+    enum: pick('constant'),
+    // module and store share the constant hue — the module holds the store,
+    // and the store IS the retained value, so the store keeps the pure
+    // `variable.other.constant` color and the module takes the shade
+    module: towardBackground(moduleColor, 0.18),
+    store: pick('variable.other.constant'),
+    external: pick('comment'),
+  };
+}
+
+function lighten(hex: string, amount: number): string {
+  return mix(hex, '#ffffff', amount);
+}
+
+function darken(hex: string, amount: number): string {
+  return mix(hex, '#000000', amount);
+}
+
+/**
+ * The dark-theme instantiation, for consumers without a mode context (the
+ * bun-side excalidraw exporter). React components derive per mode instead.
+ */
+export const CONSTRUCT_COLOR: Record<SubsystemComponentConstruct, string> =
+  constructColorsFromPierreTheme('pierre-dark');

package/src/pierre/index.ts

@@ -0,0 +1,18 @@
+export { PierreFileView } from './PierreFileView';
+export type { PierreFileViewProps } from './PierreFileView';
+export { PierreSnippetView } from './PierreSnippetView';
+export type { PierreSnippetViewProps } from './PierreSnippetView';
+export { PierreThroughlineCodeView } from './PierreThroughlineCodeView';
+export type { PierreThroughlineCodeViewProps } from './PierreThroughlineCodeView';
+export { sliceSnippetWindow } from './sliceSnippet';
+export type { SnippetSlice } from './sliceSnippet';
+export {
+  isPierreCFamilyPath,
+  pierreCodeViewFileName,
+  pierreLangForPath,
+} from './pierreFileLang';
+export {
+  PIERRE_DEFAULT_SYNTAX_THEMES,
+  resolvePierreSyntaxThemeName,
+} from './pierreSyntaxTheme';
+export type { PierreSyntaxThemeName } from './pierreSyntaxTheme';

package/src/pierre/pierreBackground.ts

@@ -0,0 +1,33 @@
+/** Shared Pierre / @pierre/diffs option helpers for file + snippet views. */
+
+export const PIERRE_FILE_STYLE = { display: 'block' } as const;
+
+export const PIERRE_BASE_OPTIONS = {
+  disableFileHeader: true,
+} as const;
+
+export function buildBackgroundCSS(background: string): string {
+  return `
+  :host {
+    background: ${background} !important;
+  }
+  pre, code,
+  [data-gutter], [data-content],
+  [data-line], [data-column-number],
+  [data-gutter-buffer], [data-line-annotation], [data-no-newline],
+  [data-separator], [data-separator-wrapper] {
+    background: ${background} !important;
+  }
+  [data-line] span {
+    background: ${background} !important;
+  }
+`;
+}
+
+export function buildPierreOptions(background?: string) {
+  if (!background) return PIERRE_BASE_OPTIONS;
+  return {
+    ...PIERRE_BASE_OPTIONS,
+    unsafeCSS: buildBackgroundCSS(background),
+  };
+}