@dxos/react-ui-feed 0.11.1

package/src/stories/fill.stories.tsx

@@ -0,0 +1,271 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect } from 'storybook/test';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { FeedStory, type FeedStoryProps } from '../testing';
+
+/**
+ * How long the first fill takes, and what it spends the time on.
+ *
+ * `baseline/Uniform` visibly fills from the bottom up over more than a second, which construction
+ * cost does not explain — `stories/construction` measures one item at ~0.4ms, so a viewport of them
+ * is ~8ms. The remaining explanation is the number of *passes*: every measured row changes the
+ * offsets below it, and each correction the virtualizer makes costs a frame. This samples the DOM
+ * once per animation frame and reports how many frames the list took to stop changing.
+ */
+const meta: Meta<FeedStoryProps> = {
+  title: 'ui/react-ui-feed/stories/fill',
+  render: FeedStory,
+  decorators: [withLayout({ layout: 'column', classNames: 'w-[50rem]' }), withTheme()],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<FeedStoryProps>;
+
+type Sample = {
+  /** Milliseconds since the play function started sampling. */
+  at: number;
+  /** Rows the virtualizer has mounted. */
+  rows: number;
+  scrollTop: number;
+  scrollHeight: number;
+  /**
+   * Viewport-relative top of every mounted row, by index.
+   *
+   * Keyed, not positional. "The first mounted row" is not the same row from one frame to the next —
+   * a rebuild changes which rows are mounted — so its position moving says nothing about whether
+   * anything the reader is looking at moved. Comparing a row against itself does.
+   */
+  tops: Map<number, number>;
+};
+
+/**
+ * Sampled for a fixed window rather than until it holds still.
+ *
+ * Stopping at the first quiet patch reports the fill and hides everything after it: the layout can
+ * be rebuilt from the top hundreds of milliseconds later — after the quiet period that gates the
+ * re-base — and a reader sees the whole page move. Two seconds covers that.
+ */
+const WATCH_FRAMES = 150;
+
+const nextFrame = () => new Promise<number>((resolve) => requestAnimationFrame(resolve));
+
+/**
+ * Samples the scroll container once per frame until it stops changing.
+ *
+ * Read in the same frame as the scroll, deliberately: a row's position and the scroll offset taken
+ * from different frames differ by whatever happened between them, which reads as movement.
+ */
+const sampleFill = async (viewport: HTMLElement): Promise<Sample[]> => {
+  const samples: Sample[] = [];
+  const start = performance.now();
+
+  for (let frame = 0; frame < WATCH_FRAMES; frame++) {
+    await nextFrame();
+    const rows = [...viewport.querySelectorAll<HTMLElement>('[data-index]')];
+    const top = viewport.getBoundingClientRect().top;
+    const sample: Sample = {
+      at: Math.round(performance.now() - start),
+      rows: rows.length,
+      scrollTop: Math.round(viewport.scrollTop),
+      scrollHeight: Math.round(viewport.scrollHeight),
+      tops: new Map(rows.map((row) => [Number(row.dataset.index), Math.round(row.getBoundingClientRect().top - top)])),
+    };
+
+    samples.push(sample);
+  }
+
+  return samples;
+};
+
+const unchanged = (a: Sample, b: Sample) =>
+  a.rows === b.rows && a.scrollTop === b.scrollTop && a.scrollHeight === b.scrollHeight && !shifted(a, b);
+
+/** How far each row present in both frames has moved, by index; empty when nothing did. */
+const deltas = (a: Sample, b: Sample): Map<number, number> =>
+  new Map(
+    [...b.tops]
+      .filter(([index, top]) => a.tops.has(index) && Math.abs(a.tops.get(index)! - top) > 1)
+      .map(([index, top]) => [index, top - a.tops.get(index)!]),
+  );
+
+/** Rows present in both frames that are not where they were. */
+const shifted = (a: Sample, b: Sample): number => deltas(a, b).size;
+
+/**
+ * What a shift looks like, which is what says where it comes from.
+ *
+ * Every row moving by the same amount is the scroll and the offsets disagreeing — one number wrong.
+ * Rows moving by different amounts is the spacing between them changing, which is a measurement
+ * being discarded rather than a position being mis-set.
+ */
+const describe = (a: Sample, b: Sample): string => {
+  const moved = [...deltas(a, b)];
+  if (!moved.length) {
+    return '';
+  }
+
+  const values = moved.map(([, delta]) => delta);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const indexes = moved.map(([index]) => index);
+  return ` moved ${moved.length} rows ${min === max ? `all by ${min}` : `by ${min}..${max}`}, indexes ${Math.min(...indexes)}..${Math.max(...indexes)}`;
+};
+
+/** Only the frames where something moved: a run of identical frames says nothing. */
+const changes = (samples: Sample[]) =>
+  samples.filter((sample, index) => index === 0 || !unchanged(samples[index - 1], sample));
+
+const report = (name: string, samples: Sample[]) => {
+  const moved = changes(samples);
+  const settled = samples.indexOf(moved.at(-1)!) + 1;
+  const header = ['at ms', 'rows', 'scrollTop', 'scrollHeight', 'shifted'];
+  const body = moved.map((sample) => {
+    const previous = samples[samples.indexOf(sample) - 1];
+    return [
+      sample.at,
+      sample.rows,
+      sample.scrollTop,
+      sample.scrollHeight,
+      previous ? `${shifted(previous, sample)}${describe(previous, sample)}` : '0',
+    ].map(String);
+  });
+  const widths = header.map((_, column) => Math.max(...[header, ...body].map((row) => row[column].length)));
+  const table = [header, ...body]
+    .map((row) => row.map((cell, column) => cell.padStart(widths[column])).join('  '))
+    .join('\n');
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `[fill: ${name}] last change at frame ${settled} (${samples[settled - 1]?.at ?? 0}ms), ` +
+      `${moved.length} of ${samples.length} frames changed something\n${table}`,
+  );
+};
+
+/**
+ * Main-thread time the mount cost, which the frame sampler cannot see.
+ *
+ * A play function does not start until the story has rendered, so everything expensive has already
+ * happened by the time it can look. The observer is installed when this module is evaluated —
+ * before any story renders — and simply keeps the long tasks it is handed.
+ */
+const longTasks: PerformanceEntry[] = [];
+if (typeof PerformanceObserver !== 'undefined' && PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
+  new PerformanceObserver((list) => longTasks.push(...list.getEntries())).observe({ entryTypes: ['longtask'] });
+}
+
+const playFill = (name: string, allowed = 0) =>
+  async function play({ canvasElement }: { canvasElement: HTMLElement }) {
+    const viewport = await waitForViewport(canvasElement);
+    const samples = await sampleFill(viewport);
+    report(name, samples);
+    // Entries arrive through the observer's callback, so one more turn is needed before the last
+    // task of the fill is in the buffer.
+    await nextFrame();
+    const blocking = longTasks.splice(0).map(({ duration }) => Math.round(duration));
+    // eslint-disable-next-line no-console
+    console.log(
+      `[fill: ${name}] blocking ${blocking.reduce((sum, ms) => sum + ms, 0)}ms in ${blocking.length} long tasks ` +
+        `[${blocking.join(', ')}]`,
+    );
+    // Nothing here scrolls the feed, so a mounted row that moves is a defect — counted in rows, over
+    // every frame. The document *is* allowed to change: the layout is rebuilt once the measured
+    // average leaves the estimate behind, and that is correct. What the rebuild may not do is move
+    // the offsets and the scroll position in different frames, because the rows travel in between.
+    const jumped = samples.reduce(
+      (total, sample, index) => total + (index ? shifted(samples[index - 1], sample) : 0),
+      0,
+    );
+    await expect({ name, jumped }).toEqual({ name, jumped: allowed });
+  };
+
+const waitForViewport = async (canvasElement: HTMLElement): Promise<HTMLElement> => {
+  for (let frame = 0; frame < 120; frame++) {
+    const viewport = canvasElement.querySelector<HTMLElement>('[data-testid="feed.viewport"]');
+    if (viewport?.querySelector('[data-index]')) {
+      return viewport;
+    }
+    await nextFrame();
+  }
+
+  throw new Error('feed viewport never mounted a row');
+};
+
+/** Passive: the first fill, watched rather than measured. */
+export const Default: Story = {
+  args: { scenario: 'uniform', count: 500 },
+};
+
+/** No editor at all: the floor, and what every other case is compared against. */
+export const Plain: Story = {
+  args: { scenario: 'plain', count: 500 },
+  play: playFill('plain 500'),
+};
+
+/**
+ * The same feed, a tenth the length.
+ *
+ * A virtualized list mounts a viewport's worth of rows either way, so a cost that follows the count
+ * belongs to the model — building the messages, projecting them — and a cost that does not belongs
+ * to the rows on screen. Which one it is decides where the fix goes.
+ */
+export const PlainShort: Story = {
+  args: { scenario: 'plain', count: 50 },
+  play: playFill('plain 50'),
+};
+
+/** One editor per row, all identical — construction, and nothing else, added to `Plain`. */
+export const Uniform: Story = {
+  args: { scenario: 'uniform', count: 500 },
+  play: playFill('uniform 500'),
+};
+
+/**
+ * The same feed with space reserved past the end.
+ *
+ * The reserved space is part of the document, so everything that reads the element's own maximum —
+ * the tail test, the follow's target, the opening offset — has to stop short of it instead. This is
+ * where that is checked.
+ */
+/** Tall uneven rows and space past the end: the case where the opening jump is most wrong. */
+export const PlainPastEnd: Story = {
+  args: { scenario: 'plain', count: 500, scrollPastEnd: true },
+  play: playFill('plain past-end'),
+};
+
+export const UniformPastEnd: Story = {
+  args: { scenario: 'uniform', count: 500, scrollPastEnd: true },
+  // This was the one rung that moved: eighteen rows travelled on the frame the layout was rebuilt,
+  // pinned at what was measured so a regression past it would fail. There is no rebuild any more —
+  // it existed because the old engine could only revise the rows below the last one it had measured,
+  // so the whole document had to be re-based from the top to correct an opening guess, and that
+  // moved every offset at once. Zero now, and held there.
+  play: playFill('uniform past-end'),
+};
+
+export const UniformShort: Story = {
+  args: { scenario: 'uniform', count: 50 },
+  play: playFill('uniform 50'),
+};
+
+/**
+ * Contents of different lengths, so the estimate is wrong for most rows.
+ *
+ * The one rung where the rebuild is still not atomic: the reader is put back by index, and with rows
+ * of every height the offsets around the landing point are mostly estimates, so the virtualizer
+ * retries across a frame and the page is seen to move in it. Restoring by offset instead lands in
+ * one frame and then spends a second correcting itself — measured at 69–96 of 150 frames changing,
+ * against one here. Recorded in `chat-ui/TASKS.md`; the allowance is what is measured today, so a
+ * regression past it still fails.
+ */
+export const Varied: Story = {
+  args: { count: 500 },
+  play: playFill('varied 500'),
+};

package/src/stories/horizontal.stories.tsx

@@ -0,0 +1,129 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo, useRef } from 'react';
+import { expect } from 'storybook/test';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { MarkdownBlock } from '../components';
+import { ListModel } from '../model';
+import { Window, type WindowController } from '../virtualizer/Window';
+
+/**
+ * The inline axis against real content — editors, not boxes.
+ *
+ * `virtualizer/Horizontal` proves the arithmetic with rows that cannot lie about their size; this
+ * is the acceptance the axis claim needs (SPEC F-1.7): a horizontal strip of real CodeMirror
+ * documents, measured on the inline axis, where the *cross* axis (each card's height) is the hard
+ * constraint of the layout and the extent is what varies. The axis is in scope for the
+ * virtualizer only — the feed list stays vertical — so this story is the axis's whole acceptance
+ * suite, and it deliberately reuses the invariants the block axis is held to.
+ */
+const CARDS = 200;
+
+const documents = Array.from({ length: CARDS }, (_, index) => {
+  const words = 3 + ((index * 7) % 24);
+  return `### Card ${index}\n\n${Array.from({ length: words }, (_, word) => `word${word}`).join(' ')}`;
+});
+
+/** Declared widths, deliberately wrong for most cards so measurement is exercised. */
+const extent = (index: number) => 240 + (index % 5) * 40;
+
+const DefaultStory = () => {
+  const controller = useRef<WindowController>(null);
+  const extents = useMemo(() => ({ of: extent }), []);
+  const model = useMemo(
+    () =>
+      new ListModel({
+        items: Array.from({ length: CARDS }, (_, index) => ({ id: `card-${index}` })),
+        getId: (item) => item.id,
+      }),
+    [],
+  );
+
+  return (
+    <Window classNames='grow min-h-0' axis='inline' model={model} extents={extents} controllerRef={controller}>
+      {(index) => (
+        // Padding, never margin: a child's margin is outside its parent's offsetWidth, so the
+        // measured extent would disagree with the rendered pitch by exactly the gap.
+        <div className='h-full px-1 py-1'>
+          <div className='h-full w-[20rem] border border-separator rounded-md p-2 overflow-hidden'>
+            <MarkdownBlock text={documents[index]} />
+          </div>
+        </div>
+      )}
+    </Window>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-feed/stories/horizontal',
+  render: DefaultStory,
+  decorators: [withLayout({ layout: 'fullscreen' }), withTheme()],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+const nextFrame = () => new Promise<number>((resolve) => requestAnimationFrame(resolve));
+
+const settle = async (frames = 30) => {
+  for (let frame = 0; frame < frames; frame++) {
+    await nextFrame();
+  }
+};
+
+/** The horizontal strip, passively. No play. */
+export const Default: Story = {};
+
+/**
+ * The block-axis invariants, on the inline axis, with editors.
+ *
+ * Nothing here names a direction the arithmetic could hide behind: rows are tracked by index, a
+ * scroll must move them by what was scrolled, and the far end must be reachable — the same three
+ * readings `bridge/*` takes vertically.
+ */
+export const InlineContent: Story = {
+  play: async ({ canvasElement }) => {
+    await settle();
+    const scroller = canvasElement.querySelector<HTMLElement>('[data-testid="window.scroller"]')!;
+    const left = () => scroller.getBoundingClientRect().left;
+    const read = () =>
+      new Map(
+        [...scroller.querySelectorAll<HTMLElement>('[data-index]')].map((row) => [
+          Number(row.dataset.index),
+          Math.round(row.getBoundingClientRect().left - left()),
+        ]),
+      );
+
+    // A scroll moves the content by what was scrolled.
+    const before = read();
+    const from = scroller.scrollLeft;
+    scroller.scrollLeft = from + 480;
+    await settle(10);
+    const scrolled = scroller.scrollLeft - from;
+    const after = read();
+    // A row's viewport position after the scroll is its old position minus the distance scrolled.
+    const jumps = [...after]
+      .filter(([index, position]) => before.has(index) && Math.abs(before.get(index)! - position - scrolled) > 2)
+      .map(([index, position]) => ({ index, was: before.get(index)!, now: position, scrolled }));
+
+    // And the end is reachable, which is what says the measured extents reached the sizer.
+    let previous = -1;
+    for (let attempt = 0; attempt < 8 && scroller.scrollLeft !== previous; attempt++) {
+      previous = scroller.scrollLeft;
+      scroller.scrollLeft = scroller.scrollWidth;
+      await settle(10);
+    }
+
+    const last = scroller.querySelector<HTMLElement>(`[data-index="${CARDS - 1}"]`);
+    const rests = !!last && Math.abs(last.getBoundingClientRect().right - scroller.getBoundingClientRect().right) <= 2;
+
+    await expect({ mounted: after.size > 0, jumps, rests }).toEqual({ mounted: true, jumps: [], rests: true });
+  },
+};

package/src/stories/mount.stories.tsx

@@ -0,0 +1,233 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { expect, waitFor, within } from 'storybook/test';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { MessageList } from '../components';
+import { useFeedModel } from '../model';
+import { type FeedScenario, type ScenarioDefinition, createScenario } from '../testing';
+
+/**
+ * What one mounted row costs, with the fixtures already built.
+ *
+ * `baseline/fill` can only watch from the first frame a play function gets, and its numbers carry
+ * whatever the story did before that — generating five hundred messages, most of all. Here the
+ * scenarios are built once, before anything is timed, and each feed is then mounted and torn down
+ * repeatedly. What is left is the cost of putting rows on screen.
+ */
+const SCENARIOS: FeedScenario[] = [
+  'plain',
+  'uniform-text',
+  'uniform-bare',
+  'uniform-themed',
+  'uniform-markdown',
+  'uniform-decorated',
+  'uniform-item',
+  'uniform',
+  'assistant',
+];
+
+/** Warm-up mounts, discarded: the first feed of a run pays for style sheets the rest reuse. */
+const WARMUP = 1;
+
+/** Frames of an unchanged row count before a mount counts as complete. */
+const STABLE_FRAMES = 3;
+
+const MAX_FRAMES = 240;
+
+const nextFrame = () => new Promise<number>((resolve) => requestAnimationFrame(resolve));
+
+type Result = {
+  scenario: FeedScenario;
+  /** Rows the virtualizer mounted to cover the viewport. */
+  rows: number;
+  /** Mean milliseconds from mount until the row count stops changing. */
+  mean: number;
+  worst: number;
+  /**
+   * Mean animation frames over the same interval.
+   *
+   * The number that separates the two explanations: a fill that takes as many frames as it has rows
+   * is mounting them one per frame and the fix is to stop doing that, where a fill that takes a
+   * handful of very long frames is doing too much work per row.
+   */
+  frames: number;
+};
+
+type MountProfileProps = {
+  count?: number;
+  runs?: number;
+};
+
+const MountProfile = ({ count = 200, runs = 3 }: MountProfileProps) => {
+  // Built before anything is timed. Generating the fixtures is the story's cost, not the list's, and
+  // it is the larger number of the two at this length.
+  const scenarios = useMemo(
+    () => Object.fromEntries(SCENARIOS.map((scenario) => [scenario, createScenario({ scenario, count })])),
+    [count],
+  );
+
+  const [shown, setShown] = useState<FeedScenario | null>(null);
+  const [results, setResults] = useState<Result[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    // Measured to the last frame that changed anything, not to the end of the loop: the trailing
+    // stable frames are the sampler waiting, and charging them to the mount reports its patience.
+    const settle = async (): Promise<{ elapsed: number; frames: number; rows: number; fill: number[] }> => {
+      const start = performance.now();
+      // Rows mounted on each frame until the count holds. A feed that fills in one commit reads as a
+      // single number; anything else is the reader watching it arrive in pieces.
+      const fill: number[] = [];
+      let rows = 0;
+      let stable = 0;
+      let elapsed = 0;
+      let frames = 0;
+      for (let frame = 0; frame < MAX_FRAMES && stable < STABLE_FRAMES; frame++) {
+        await nextFrame();
+        const mounted = containerRef.current?.querySelectorAll('[data-index]').length ?? 0;
+        if (mounted > 0 && mounted === rows) {
+          stable += 1;
+        } else {
+          stable = 0;
+          elapsed = performance.now() - start;
+          frames = frame + 1;
+          fill.push(mounted);
+        }
+
+        rows = mounted;
+      }
+
+      return { elapsed, frames, rows, fill };
+    };
+
+    void (async () => {
+      const measured: Result[] = [];
+      for (const scenario of SCENARIOS) {
+        const times: number[] = [];
+        const frames: number[] = [];
+        let rows = 0;
+        for (let run = 0; run < runs + WARMUP && !cancelled; run++) {
+          setShown(scenario);
+          const settled = await settle();
+          rows = settled.rows;
+          if (run >= WARMUP) {
+            times.push(settled.elapsed);
+            frames.push(settled.frames);
+            // eslint-disable-next-line no-console
+            console.log(`[fill: ${scenario}]`, JSON.stringify(settled.fill));
+          }
+
+          setShown(null);
+          await nextFrame();
+        }
+
+        if (cancelled) {
+          return;
+        }
+
+        measured.push({
+          scenario,
+          rows,
+          mean: mean(times),
+          worst: Math.max(...times),
+          frames: mean(frames),
+        });
+      }
+
+      setResults(measured);
+      // eslint-disable-next-line no-console
+      console.log(`[mount: ${count} messages]\n` + format(measured));
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [scenarios, runs, count]);
+
+  const definition = shown ? scenarios[shown] : undefined;
+
+  return (
+    <div className='flex flex-col h-full'>
+      <pre className='p-4 text-xs whitespace-pre' data-testid='mount.results'>
+        {results.length ? format(results) : 'measuring…'}
+      </pre>
+      <div ref={containerRef} className='relative grow min-h-0'>
+        {definition && <Mounted key={shown} definition={definition} />}
+      </div>
+    </div>
+  );
+};
+
+const mean = (values: number[]) => values.reduce((sum, value) => sum + value, 0) / Math.max(1, values.length);
+
+const format = (results: Result[]): string => {
+  const header = ['scenario', 'rows', 'mean ms', 'worst ms', 'ms/row', 'frames', 'ms/frame'];
+  const body = results.map(({ scenario, rows, mean, worst, frames }) => [
+    scenario,
+    String(rows),
+    mean.toFixed(1),
+    worst.toFixed(1),
+    (mean / Math.max(1, rows)).toFixed(2),
+    frames.toFixed(1),
+    (mean / Math.max(1, frames)).toFixed(1),
+  ]);
+  const widths = header.map((_, column) => Math.max(...[header, ...body].map((row) => row[column].length)));
+
+  return [header, ...body].map((row) => row.map((cell, column) => cell.padEnd(widths[column])).join('  ')).join('\n');
+};
+
+/** One scenario mounted through the real Root; a component so the model hook has somewhere to live. */
+const Mounted = ({ definition }: { definition: ScenarioDefinition }) => {
+  const model = useFeedModel(definition.messages);
+  return (
+    <MessageList.Root
+      model={model}
+      renderer={definition.renderer}
+      registry={definition.registry}
+      Chrome={definition.Chrome}
+      Custom={definition.Custom}
+      estimateSize={definition.estimateSize}
+      stickyBottom={definition.stickyBottom}
+    >
+      <MessageList.Viewport classNames='absolute inset-0' padding />
+    </MessageList.Root>
+  );
+};
+
+const meta: Meta<MountProfileProps> = {
+  title: 'ui/react-ui-feed/stories/mount',
+  component: MountProfile,
+  decorators: [withLayout({ layout: 'column', classNames: 'w-[50rem]' }), withTheme()],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<MountProfileProps>;
+
+/**
+ * Per-row mount cost up the ladder.
+ *
+ * `plain` has no editor at all, `uniform` adds one identical editor per row, `assistant` adds
+ * per-message renderers and block widgets. `ms/row` is the number that decides whether the first
+ * fill is worth optimizing in the item or in the list.
+ */
+export const Default: Story = { args: { count: 200 }, play: waitForResults };
+
+/** The same rows in a shorter feed: anything that changes here scales with the model, not the view. */
+export const Short: Story = { args: { count: 50 }, play: waitForResults };
+
+// The measurement runs in the component, so the test's only job is to still be there when it
+// finishes — the numbers are printed, not asserted: a threshold on a shared CI machine is noise.
+async function waitForResults({ canvasElement }: { canvasElement: HTMLElement }) {
+  const results = within(canvasElement).getByTestId('mount.results');
+  await waitFor(() => expect(results.textContent).toContain('ms/row'), { timeout: 60_000 });
+}