stream-chat-react-native-core 9.12.1 → 9.14.0

package/src/ai-components/__tests__/signIn.test.tsx

@@ -0,0 +1,324 @@
+import React, { type ReactElement } from 'react';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import {
+  AIClientIdentity,
+  AIConnectorSignInError,
+  AIMessagePart,
+  type AIToolApprover,
+  AIToolApproverProvider,
+  AIToolAuthorization,
+  AIToolAuthorizationCard,
+  type AIToolAuthorizer,
+  type AIToolCallPart,
+  createAuthSessionAuthorizer,
+  parseMessagePart,
+  readConnectorSignInResult,
+  signInLaunchUrl,
+  StreamTheme,
+} from '../index';
+import { forgetCallStates } from '../message-parts/callStates';
+import NativeAIAgent from '../native-specs/NativeAIAgent';
+
+// Each test's questions start unanswered, though tests reuse calls.
+afterEach(forgetCallStates);
+
+jest.mock('../native-specs/NativeAIAgent', () => ({
+  __esModule: true,
+  default: { installId: jest.fn(), openAuthSession: jest.fn() },
+}));
+
+const native = NativeAIAgent as unknown as {
+  installId: jest.Mock;
+  openAuthSession: jest.Mock;
+};
+
+const renderWithTheme = (ui: ReactElement) => {
+  const result = render(<StreamTheme>{ui}</StreamTheme>);
+  return {
+    ...result,
+    rerender: (next: ReactElement) => result.rerender(<StreamTheme>{next}</StreamTheme>),
+  };
+};
+
+const signIn = parseMessagePart({
+  authorization: {
+    handoff_token: 'tok',
+    provider: 'linear',
+    provider_name: 'Linear',
+    title: 'Connect Linear',
+    type: 'oauth',
+    url: 'https://router.example.com/launch/abc',
+  },
+  id: 'call_2',
+  name: 'linear_create_issue',
+  status: 'awaiting_authorization',
+  target_user_id: 'alex',
+  type: 'ai_tool_call',
+})?.toolCall as AIToolCallPart;
+
+const approverWith = (authorizer?: AIToolAuthorizer): AIToolApprover => ({
+  authorizer,
+  clientId: 'ios-1',
+  decide: jest.fn(() => Promise.resolve()),
+  userId: 'alex',
+});
+
+describe('AIToolAuthorization', () => {
+  it('asks nothing without an authorizer, or of another person', () => {
+    const { rerender } = renderWithTheme(
+      <AIToolAuthorization approver={approverWith()} part={signIn} />,
+    );
+    expect(screen.queryByText('Connect Linear')).toBeNull();
+    rerender(
+      <AIToolAuthorization
+        approver={{ ...approverWith({ connect: jest.fn(), decline: jest.fn() }), userId: 'sam' }}
+        part={signIn}
+      />,
+    );
+    expect(screen.queryByText('Connect Linear')).toBeNull();
+  });
+
+  it('connects, and lets the person try again when the sign-in ends unconnected', async () => {
+    let finish: (connected: boolean) => void = () => undefined;
+    const connect = jest.fn(
+      () =>
+        new Promise<boolean>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    renderWithTheme(
+      <AIToolAuthorization
+        approver={approverWith({ connect, decline: jest.fn() })}
+        part={signIn}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Connect' }));
+    expect(connect).toHaveBeenCalledWith(signIn);
+    expect(screen.getByRole('button', { name: 'Connecting...' })).toBeDisabled();
+    // Not now stays available while the sign-in is open.
+    expect(screen.getByRole('button', { name: 'Not now' })).toBeEnabled();
+
+    await act(async () => {
+      finish(false);
+      await Promise.resolve();
+    });
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeEnabled();
+  });
+
+  it('declines a sign-in the person closed, which cannot be opened again', async () => {
+    const decline = jest.fn(() => Promise.reject(new Error('offline')));
+    renderWithTheme(
+      <AIToolAuthorization
+        approver={approverWith({ connect: () => Promise.resolve('closed'), decline })}
+        part={signIn}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Connect' }));
+    await act(() => Promise.resolve());
+    expect(decline).toHaveBeenCalledWith(signIn);
+
+    // As with "Not now", an answer that couldn't be sent can be given again.
+    await act(() => Promise.resolve());
+    expect(screen.getByText("Your answer couldn't be sent. Try again.")).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Not now' })).toBeEnabled();
+  });
+
+  it('keeps connecting once connected, until the step changes', async () => {
+    renderWithTheme(
+      <AIToolAuthorization
+        approver={approverWith({ connect: () => Promise.resolve(true), decline: jest.fn() })}
+        part={signIn}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Connect' }));
+    await act(() => Promise.resolve());
+    expect(screen.getByRole('button', { name: 'Connecting...' })).toBeDisabled();
+  });
+
+  it('says when the sign-in could not open, and lets the person try again', async () => {
+    const connect = jest.fn(() => Promise.reject(new AIConnectorSignInError('failed')));
+    renderWithTheme(
+      <AIToolAuthorization
+        approver={approverWith({ connect, decline: jest.fn() })}
+        part={signIn}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Connect' }));
+    await act(() => Promise.resolve());
+    expect(screen.getByText("The sign-in couldn't be opened. Try again.")).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeEnabled();
+  });
+
+  it('declines, and lets the person answer again when that fails', async () => {
+    const decline = jest.fn(() => Promise.reject(new Error('offline')));
+    renderWithTheme(
+      <AIToolAuthorization
+        approver={approverWith({ connect: jest.fn(), decline })}
+        part={signIn}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Not now' }));
+    expect(decline).toHaveBeenCalledWith(signIn);
+    expect(screen.getByRole('button', { name: 'Not now' })).toBeDisabled();
+    await act(() => Promise.resolve());
+    expect(screen.getByText("Your answer couldn't be sent. Try again.")).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Not now' })).toBeEnabled();
+  });
+
+  it.each([
+    ['connected', 'Connected to Linear'],
+    ['declined', 'Not connected'],
+    ['failed', "The sign-in didn't complete."],
+    ['expired', 'This sign-in has expired.'],
+  ])('says how a %s sign-in ended, without buttons', (status, outcome) => {
+    renderWithTheme(
+      <AIToolAuthorizationCard
+        authorization={{ ...signIn.authorization!, status }}
+        onConnect={jest.fn()}
+        onDecline={jest.fn()}
+      />,
+    );
+    expect(screen.getByText(outcome)).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Connect' })).toBeNull();
+  });
+
+  it('can no longer be opened past its expiry', () => {
+    renderWithTheme(
+      <AIToolAuthorizationCard
+        authorization={{ ...signIn.authorization!, expiresAt: Date.now() - 1 }}
+        onConnect={jest.fn()}
+        onDecline={jest.fn()}
+      />,
+    );
+    expect(screen.getByText('This sign-in has expired.')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Connect' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Not now' })).toBeEnabled();
+  });
+
+  it('is asked under its tool call, with the approver of the provider', () => {
+    renderWithTheme(
+      <AIToolApproverProvider approver={approverWith({ connect: jest.fn(), decline: jest.fn() })}>
+        <AIMessagePart part={parseMessagePart({ ...signInAttachment, type: 'ai_tool_call' })!} />
+      </AIToolApproverProvider>,
+    );
+    expect(screen.getByText('Connect Linear')).toBeTruthy();
+    expect(screen.getByText('Waiting for you to sign in')).toBeTruthy();
+  });
+});
+
+const signInAttachment = {
+  authorization: {
+    handoff_token: 'tok',
+    provider: 'linear',
+    title: 'Connect Linear',
+    type: 'oauth',
+    url: 'https://router.example.com/launch/abc',
+  },
+  id: 'call_3',
+  name: 'linear_list_issues',
+  status: 'awaiting_authorization',
+  target_user_id: 'alex',
+};
+
+describe('createAuthSessionAuthorizer', () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it('puts the handoff token in the launch page’s fragment, encoded', () => {
+    expect(signInLaunchUrl({ ...signIn.authorization!, handoffToken: 'a+b&c=d/e' })).toBe(
+      'https://router.example.com/launch/abc#handoff_token=a%2Bb%26c%3Dd%2Fe',
+    );
+    expect(signInLaunchUrl({ ...signIn.authorization!, handoffToken: undefined })).toBe(
+      'https://router.example.com/launch/abc',
+    );
+  });
+
+  it('opens the sign-in for the app’s scheme, and reads how it ended', async () => {
+    const decline = jest.fn(() => Promise.resolve());
+    const authorizer = createAuthSessionAuthorizer({ callbackScheme: 'myapp', decline });
+
+    native.openAuthSession.mockResolvedValueOnce(
+      'myapp://signed-in?connection_id=c1&status=connected',
+    );
+    await expect(authorizer.connect(signIn)).resolves.toBe(true);
+    expect(native.openAuthSession).toHaveBeenCalledWith(
+      'https://router.example.com/launch/abc#handoff_token=tok',
+      'myapp',
+    );
+
+    native.openAuthSession.mockResolvedValueOnce(
+      'myapp://signed-in?connection_id=c1&status=denied',
+    );
+    await expect(authorizer.connect(signIn)).resolves.toBe(false);
+
+    // The person closed the sheet: the sign-in can't be opened again.
+    native.openAuthSession.mockResolvedValueOnce('');
+    await expect(authorizer.connect(signIn)).resolves.toBe('closed');
+
+    await authorizer.decline(signIn);
+    expect(decline).toHaveBeenCalledWith(signIn);
+  });
+
+  it('takes the app’s scheme written as the start of a URL', async () => {
+    for (const written of ['myapp://', 'myapp:', ' myapp:/ ']) {
+      const authorizer = createAuthSessionAuthorizer({
+        callbackScheme: written,
+        decline: jest.fn(),
+      });
+      expect(authorizer.callbackScheme).toBe('myapp');
+      native.openAuthSession.mockResolvedValueOnce('');
+      await authorizer.connect(signIn);
+      expect(native.openAuthSession).toHaveBeenLastCalledWith(expect.any(String), 'myapp');
+    }
+  });
+
+  it('lets a closed sign-in be tried again with declineOnClose off', async () => {
+    const authorizer = createAuthSessionAuthorizer({
+      callbackScheme: 'myapp',
+      decline: jest.fn(),
+      declineOnClose: false,
+    });
+    native.openAuthSession.mockResolvedValueOnce('');
+    await expect(authorizer.connect(signIn)).resolves.toBe(false);
+  });
+
+  it('rejects when the sign-in could not be opened', async () => {
+    const authorizer = createAuthSessionAuthorizer({ callbackScheme: 'myapp', decline: jest.fn() });
+
+    native.openAuthSession.mockRejectedValueOnce(new Error('No browser'));
+    await expect(authorizer.connect(signIn)).rejects.toMatchObject({
+      message: 'No browser',
+      reason: 'failed',
+    });
+    await expect(authorizer.connect({ ...signIn, authorization: undefined })).rejects.toMatchObject(
+      { reason: 'unavailable' },
+    );
+  });
+
+  it('reads only an outcome the router sends', () => {
+    expect(readConnectorSignInResult('myapp://x?status=connected&connection_id=conn-1')).toEqual({
+      connectionId: 'conn-1',
+      status: 'connected',
+    });
+    expect(readConnectorSignInResult('myapp://x?status=maybe&connection_id=conn-1')).toBeNull();
+    expect(readConnectorSignInResult('myapp://x?status=connected')).toBeNull();
+    expect(readConnectorSignInResult('myapp://x')).toBeNull();
+  });
+});
+
+describe('AIClientIdentity', () => {
+  it('is the install id the native module keeps', () => {
+    native.installId.mockReturnValue('ios-ABC');
+    expect(AIClientIdentity.installId()).toBe('ios-ABC');
+  });
+
+  it('lives in memory, unchanged, when the native module has none', () => {
+    native.installId.mockImplementation(() => {
+      throw new Error('not linked');
+    });
+    const first = AIClientIdentity.installId();
+    expect(first).toMatch(/^(ios|android)-[0-9a-f]{32}$/);
+    expect(AIClientIdentity.installId()).toBe(first);
+  });
+});

package/src/ai-components/__tests__/theme.test.tsx

@@ -38,4 +38,22 @@ describe('ai-components theme', () => {
     });
     expect(preMerged.current.theme).toBe(mergedStyle);
   });
+  it('draws the conversation’s parts in the app’s palette when it changes it, as for dark mode', () => {
+    const dark = mergeThemes({
+      style: {
+        colors: { black: '#FFFFFF', grey_whisper: '#27272F', white: '#050509' },
+        suggestions: { text: '#FF0000' },
+      },
+    });
+    expect(dark.message?.userMessageBackground).toBe('#27272F');
+    expect(dark.message?.userMessageText).toBe('#FFFFFF');
+    expect(dark.conversation?.scrollButtonBackground).toBe('#050509');
+    // A part the style sets keeps its own; one drawn in a color it left alone keeps the design's.
+    expect(dark.suggestions?.text).toBe('#FF0000');
+    expect(dark.chatOptions?.chipText).toBe(defaultTheme.chatOptions?.chipText);
+    // Without palette changes, the design's own colors stay.
+    expect(mergeThemes({ style: { conversation: {} } }).message?.userMessageBackground).toBe(
+      defaultTheme.message?.userMessageBackground,
+    );
+  });
 });

package/src/ai-components/__tests__/translation.test.tsx

@@ -0,0 +1,85 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+import type { TFunction } from 'i18next';
+
+import {
+  TranslationProvider as ChatTranslationProvider,
+  type TranslationContextValue,
+} from '../../contexts/translationContext';
+import { Streami18n } from '../../utils/i18n/Streami18n';
+import {
+  type AITranslate,
+  defaultAITranslate,
+  interpolateAIString,
+  TranslationProvider,
+  useAITranslation,
+} from '../contexts';
+
+const withValue =
+  (value: TranslationContextValue) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatTranslationProvider value={value}>{children}</ChatTranslationProvider>
+  );
+
+describe('AI translation', () => {
+  it('fills placeholders and leaves unknown ones', () => {
+    expect(interpolateAIString('Thought for {{ duration }}', { duration: '12s' })).toBe(
+      'Thought for 12s',
+    );
+    expect(interpolateAIString('Connected to {{provider}}', { provider: 'Linear' })).toBe(
+      'Connected to Linear',
+    );
+    expect(interpolateAIString('Thought for {{ duration }}', {})).toBe(
+      'Thought for {{ duration }}',
+    );
+    expect(interpolateAIString('Thinking...')).toBe('Thinking...');
+    expect(interpolateAIString('{{ count }} files', { count: 0 })).toBe('0 files');
+  });
+
+  it('is English without <Chat>', () => {
+    const { result } = renderHook(() => useAITranslation());
+    expect(result.current.t).toBe(defaultAITranslate);
+    expect(result.current.t('Thinking... {{ duration }}', { duration: '4s' })).toBe(
+      'Thinking... 4s',
+    );
+  });
+
+  it('follows the chat SDK translator, as inside <Chat>', async () => {
+    const i18n = new Streami18n({ language: 'fr' });
+    // `registerTranslation` only takes keys in `en.json`; the AI keys join it with the views.
+    i18n.registerTranslation('fr', {
+      'Thought for {{ duration }}': 'Réfléchi pendant {{ duration }}',
+    } as Parameters<typeof i18n.registerTranslation>[1]);
+    const translators = (await i18n.getTranslators()) as unknown as TranslationContextValue;
+
+    const { result } = renderHook(() => useAITranslation(), {
+      wrapper: withValue({ ...translators, userLanguage: 'fr' }),
+    });
+    expect(result.current.t('Thought for {{ duration }}', { duration: '12s' })).toBe(
+      'Réfléchi pendant 12s',
+    );
+  });
+
+  it('is the same provider as the chat SDK, for apps without <Chat>', () => {
+    expect(TranslationProvider).toBe(ChatTranslationProvider);
+    const t = ((key: string) => `[es] ${key}`) as unknown as TFunction;
+    const { result } = renderHook(() => useAITranslation(), {
+      wrapper: ({ children }: PropsWithChildren) => (
+        <TranslationProvider
+          value={{ t, tDateTimeParser: (input) => input ?? 0, userLanguage: 'es' }}
+        >
+          {children}
+        </TranslationProvider>
+      ),
+    });
+    expect(result.current.t('Allow')).toBe('[es] Allow');
+  });
+
+  it('takes the chat SDK translator as it is', () => {
+    // A compile-time check: core's `t` (i18next's TFunction) must be assignable without a cast.
+    const coreT = ((key: string) => key) as unknown as TFunction;
+    const t: AITranslate = coreT;
+    expect(t('Allow')).toBe('Allow');
+  });
+});

package/src/ai-components/__tests__/voiceDriver.test.ts

@@ -21,9 +21,6 @@ import {
 } from '../voice-visualization/driver';
 import type { Hsv, VoiceAgentState } from '../voice-visualization/types';
 
-// Ported from stream-chat-android's VoiceVisualizationDriverTest and VoiceVisualizationBounceTest,
-// so the platforms keep moving alike.
-
 const blue: Hsv = { hue: 218 / 360, saturation: 1, value: 1 };
 const red: Hsv = { hue: 0, saturation: 1, value: 1 };
 const FRAME = 1 / 60;

package/src/ai-components/__tests__/voicePalette.test.ts

@@ -84,7 +84,7 @@ describe('voice visualization inputs', () => {
 
 describe('voice visualization noise', () => {
   it('matches the shader’s simplex noise as a GPU computes it', () => {
-    // Read back from the shader's own snoise on a GPU (stream-chat-react's fixtures).
+    // Read back from the shader's own snoise on a GPU.
     const gpu: Array<[number, number, number, number]> = [
       [0.3, 21, 0, 0.7696],
       [1.7, 5, 0, 0.208],

package/src/ai-components/__tests__/withoutKeyboardController.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Keyboard, Text } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { ComposerView, sheetStore, sheetStoreApi, StreamTheme } from '../index';
+import { dismissKeyboard, KeyboardStickyView, keyboardHeight } from '../internal/keyboard';
+
+jest.mock('react-native-keyboard-controller', () => {
+  throw new Error("Cannot find module 'react-native-keyboard-controller'");
+});
+
+const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+describe('without react-native-keyboard-controller', () => {
+  afterEach(() => {
+    act(() => {
+      sheetStoreApi.closeSheet();
+    });
+    jest.restoreAllMocks();
+  });
+
+  it('lays the sticky view out as a plain view', () => {
+    render(
+      <KeyboardStickyView offset={{ closed: 0, opened: 34 }} testID='sticky'>
+        <Text>inside</Text>
+      </KeyboardStickyView>,
+    );
+
+    const sticky = screen.getByTestId('sticky');
+    expect(sticky.type).toBe('View');
+    expect(sticky.props.offset).toBeUndefined();
+    expect(screen.getByText('inside')).toBeTruthy();
+    expect(keyboardHeight()).toBe(0);
+  });
+
+  it('closes the keyboard with React Native', async () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss');
+
+    await expect(dismissKeyboard()).resolves.toBeUndefined();
+    expect(dismiss).toHaveBeenCalled();
+  });
+
+  it('renders the composer and opens its sheet', async () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss');
+    render(
+      <StreamTheme>
+        <ComposerView onSendMessage={() => Promise.resolve()} />
+      </StreamTheme>,
+    );
+
+    await act(async () => {
+      fireEvent.press(screen.getByText('+'));
+      await flushPromises();
+    });
+
+    expect(dismiss).toHaveBeenCalled();
+    expect(sheetStore.getLatestValue().open).toBe(true);
+  });
+});

package/src/ai-components/charts/components/PieLegend.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { primitives } from '../../internal/tokens';
 import type { Datum } from '../types';
 
 export const PieLegend = ({ items, maxRows = 3 }: { items: Datum[]; maxRows?: number }) => {
@@ -45,6 +46,6 @@ const styles = StyleSheet.create({
     height: 12,
   },
   label: {
-    fontSize: 13,
+    fontSize: primitives.typographyFontSizeXs,
   },
 });

package/src/ai-components/charts/components/VictoryChart.tsx

@@ -15,7 +15,9 @@ import {
 
 import { PieLegend } from './PieLegend';
 
+import { primitives } from '../../internal/tokens';
 import type { ChartSpec } from '../types';
+import { formatTimeLabel } from '../utils/format-time-label';
 
 const font = matchFont({
   fontFamily: Platform.select({
@@ -23,7 +25,7 @@ const font = matchFont({
     android: 'sans-serif',
     default: 'serif',
   }),
-  fontSize: 12,
+  fontSize: primitives.typographyFontSizeXxs,
   fontWeight: 'normal',
   fontStyle: 'normal',
 });
@@ -96,8 +98,13 @@ export const VictoryChart = (props: VictoryChartProps) => {
         ),
       );
 
+  // A time axis is labelled short (`29 Oct`, `13:45`), so it is never turned on its side.
   const hasLongLabels =
-    (visibleBars > 4 ? maxTickCharCount > 1 : maxTickCharCount > 5) && !spec.isNumericDim;
+    (visibleBars > 4 ? maxTickCharCount > 1 : maxTickCharCount > 5) &&
+    !spec.isNumericDim &&
+    !spec.isTemporalDim;
+  const times = spec.isTemporalDim ? table.map((entry) => new Date(entry.x).getTime()) : [];
+  const timeSpan = times.length > 1 ? Math.max(...times) - Math.min(...times) : 0;
 
   const lowestValue = minY < 0 ? minY - 20 : 0;
 
@@ -116,6 +123,7 @@ export const VictoryChart = (props: VictoryChartProps) => {
         xAxis={{
           font,
           formatXLabel: (label: number | string) => {
+            if (spec.isTemporalDim) return formatTimeLabel(label, timeSpan);
             const parsedLabel = (typeof label === 'number' ? String(label) : label) ?? '';
             if (hasLongLabels && parsedLabel.length > 4) {
               return `${parsedLabel.slice(0, 3)}...`;

package/src/ai-components/charts/utils/format-time-label.ts

@@ -0,0 +1,18 @@
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+const twoDigits = (value: number) => String(value).padStart(2, '0');
+
+/**
+ * A short label for a point on a time axis: the time of day when the chart spans a day or less,
+ * such as `13:45`, and otherwise the day and month, such as `29 Oct`. A date written out in full
+ * doesn't fit under a point. Anything that isn't a date is labelled as it is.
+ */
+export const formatTimeLabel = (value: unknown, spanMs: number): string => {
+  const date =
+    value instanceof Date ? value : typeof value === 'number' ? new Date(value) : undefined;
+  if (!date || Number.isNaN(date.getTime())) return String(value ?? '');
+  if (spanMs <= DAY_MS) return `${twoDigits(date.getHours())}:${twoDigits(date.getMinutes())}`;
+  return `${date.getDate()} ${MONTHS[date.getMonth()]}`;
+};

package/src/ai-components/charts/vega-lite/schema.ts

@@ -56,7 +56,7 @@ const BaseVL = z.object({
     values: z.array(z.record(z.string(), z.unknown())),
   }),
   mark: z.union([MarkName, MarkDef, z.string()]).optional(),
-  layer: z.array(z.looseObject({ mark: MarkDef })).optional(),
+  layer: z.array(z.looseObject({ mark: z.union([MarkDef, z.string()]) })).optional(),
   marks: z.array(MarkDef).optional(),
   markName: MarkName,
 });
@@ -95,12 +95,29 @@ const deriveMarkName = (o: any): string | undefined => {
   return Array.isArray(o?.marks) && o.marks.length > 0 ? normalizeMarkName(o.marks[0]) : undefined;
 };
 
+const DRAWN_MARKS = new Set<string>(MarkName.options);
+
+// A layered chart keeps its encoding, and often its data, in its layers: it is drawn as the first
+// layer that draws data the way this renders, with the chart's data when the layer has none.
+// Other layers, such as a rule marking a threshold or text labels, are left out.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
+const withPrimaryLayer = (o: any) => {
+  if (o?.encoding || !Array.isArray(o?.layer)) return o;
+  const layer = o.layer.find(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- an untyped layer of the input
+    (each: any) => each?.encoding && DRAWN_MARKS.has(normalizeMarkName(each.mark) ?? ''),
+  );
+  return layer
+    ? { ...o, data: layer.data ?? o.data, encoding: layer.encoding, mark: layer.mark }
+    : o;
+};
+
 export const VegaLiteCore = z.discriminatedUnion('type', [VL_XY, VL_PIE]);
 
 /* final schema: preprocess to inject needed metadata, then discriminated union */
 export const VegaLiteSchema = z.preprocess((raw) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
-  const o: any = raw ?? {};
+  const o: any = withPrimaryLayer(raw ?? {});
   const markName = deriveMarkName(o);
   const hasTheta = !!o?.encoding?.theta;