react-extjs 0.0.1

package/src/components/SplitBar.tsx

@@ -0,0 +1,215 @@
+import { useRef, useState, useEffect, type CSSProperties, type ReactNode, type MouseEvent as ReactMouseEvent } from 'react';
+import { createPortal } from 'react-dom';
+
+// Ext.SplitBar 方位/朝向常量（对齐 src/widgets/SplitBar.js 顶部静态量）
+const HORIZONTAL = 2; // Ext.SplitBar.HORIZONTAL
+const VERTICAL = 1; // Ext.SplitBar.VERTICAL
+const LEFT = 1; // Ext.SplitBar.LEFT
+const RIGHT = 2; // Ext.SplitBar.RIGHT
+const TOP = 3; // Ext.SplitBar.TOP
+const BOTTOM = 4; // Ext.SplitBar.BOTTOM
+
+export type SplitOrientation = 'horizontal' | 'vertical';
+export type SplitPlacement = 'left' | 'right' | 'top' | 'bottom';
+
+export interface SplitBarProps {
+  /** 分隔条朝向：'horizontal' 表示竖直条（拖拽改变宽度）/ 'vertical' 表示水平条（拖拽改变高度）。默认 horizontal。 */
+  orientation?: SplitOrientation;
+  /** 被缩放元素（resizingEl）相对分隔条的位置：left/right（水平）或 top/bottom（垂直）。默认 left。 */
+  placement?: SplitPlacement;
+  /** 被缩放元素的初始尺寸（水平=宽度 / 垂直=高度），对应 Ext 初始 getElementSize。 */
+  size?: number;
+  /** 最小尺寸（默认 0）。 */
+  minSize?: number;
+  /** 最大尺寸（默认 2000）。 */
+  maxSize?: number;
+  /** 水平模式下容器高度 / 垂直模式下容器宽度（交叉轴尺寸）。 */
+  thickness?: number;
+  /** 分隔条厚度（像素），默认 6。 */
+  splitterWidth?: number;
+  /** 被缩放区域的内容。 */
+  resizingContent?: ReactNode;
+  /** 被缩放区域的内联样式（不含尺寸，尺寸由组件控制）。 */
+  resizingStyle?: CSSProperties;
+  /** 分隔条的内联样式（不含 class 与尺寸，尺寸/背景由组件控制）。 */
+  splitterStyle?: CSSProperties;
+  /** 分隔条拖动后的回调，传入新尺寸。 */
+  onMoved?: (size: number) => void;
+  /** 拖拽开始前回调（对齐 Ext 'beforeresize' 事件）。 */
+  onBeforeResize?: () => void;
+  id?: string;
+  testId?: string;
+}
+
+const clamp = (v: number, min: number, max: number) => Math.min(Math.max(min, v), max);
+
+/**
+ * 复刻 Ext.SplitBar（Ext 3.2.1，src/widgets/SplitBar.js）。
+ *
+ * DOM 契约（对齐原生 Ext.SplitBar，src/widgets/SplitBar.js + ext-all.css）：
+ *  - 分隔条（dragEl）根 class：`x-splitbar x-splitbar-h`（水平，竖直条）/ `x-splitbar x-splitbar-v`（垂直，水平条）。
+ *    原生 ext-all.css 仅赋予 cursor（col-resize/row-resize），无背景/grip——这是 standalone SplitBar 的真实原生外观。
+ *  - 被缩放元素（resizingEl）渲染在分隔条一侧，尺寸由 size 态控制（原生 SplitBar 也不为此元素加额外 class）。
+ *  - proxy（x-splitbar-proxy x-splitbar-proxy-{h|v}）与 overlay（x-drag-overlay）经 portal 挂 document.body，
+ *    静态态 display:none，不参与容器截图（对齐 Ext 的 createProxy 行为）。
+ *
+ * 拖拽数学对齐 Ext.SplitBar.onEndProxyDrag：
+ *  - 水平：newSize = startSize + (placement===LEFT ? dx : -dx)
+ *  - 垂直：newSize = startSize + (placement===TOP ? dy : -dy)
+ *  - 全程 Math.min/max 钳制到 [minSize, maxSize]。
+ */
+export function SplitBar(props: SplitBarProps) {
+  const {
+    orientation = 'horizontal',
+    placement = 'left',
+    size = 160,
+    minSize = 0,
+    maxSize = 2000,
+    thickness = 120,
+    splitterWidth = 6,
+    resizingContent,
+    resizingStyle,
+    splitterStyle,
+    onMoved,
+    onBeforeResize,
+    id,
+    testId,
+  } = props;
+
+  const horizontal = orientation === 'horizontal';
+  const orientConst = horizontal ? HORIZONTAL : VERTICAL;
+  const placeConst = placement === 'left' ? LEFT : placement === 'right' ? RIGHT : placement === 'top' ? TOP : BOTTOM;
+
+  const [curSize, setCurSize] = useState(size);
+  const sizeRef = useRef(curSize);
+  sizeRef.current = curSize;
+
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef<{
+    startSize: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+
+  // 容器交叉轴尺寸固定；沿轴尺寸 = max(初始 size, 当前 curSize) + splitterWidth。
+  // 用 max 而非单纯 curSize：拖拽时容器不会从「分隔条所在侧」收缩，从而让分隔条能真正跟随鼠标
+  // 移动（对齐 Ext.SplitBar 真实行为——分隔条是被拖动的元素，始终跟随指针）。
+  const cross = thickness;
+  const containerAlong = Math.max(size, curSize) + splitterWidth;
+  const containerStyle: CSSProperties = {
+    position: 'relative',
+    ...(horizontal ? { width: containerAlong, height: cross } : { width: cross, height: containerAlong }),
+  };
+
+  // 「起始侧」= 分隔条贴容器的左/上边缘：RIGHT（分隔条在左）、BOTTOM（分隔条在上）；
+  // 「结束侧」= 贴右/下边缘：LEFT（分隔条在右）、TOP（分隔条在下）。
+  // 起始侧时分隔条沿轴偏移随 curSize 反向计算，使拖拽时分隔条跟随鼠标；结束侧偏移即 curSize。两种 placement 均跟手。
+  const isStartSide = placeConst === RIGHT || placeConst === BOTTOM;
+  const splitterAlong = isStartSide ? containerAlong - splitterWidth - curSize : curSize;
+
+  // 分隔条根 class 已是原版 .x-splitbar .x-splitbar-h/v（ext-all.css 仅给 cursor，
+  // 无 grip 背景图——这是 Ext 3.2.1 原生表现），故此处不再自绘 grip，纯靠原版类。
+  const splitterStyleMerged: CSSProperties = {
+    position: 'absolute',
+    ...(horizontal
+      ? { left: splitterAlong, top: 0, width: splitterWidth, height: cross }
+      : { top: splitterAlong, left: 0, height: splitterWidth, width: cross }),
+    ...splitterStyle,
+  };
+
+  const resizingStyleMerged: CSSProperties = {
+    position: 'absolute',
+    ...(horizontal
+      ? isStartSide
+        ? { left: splitterWidth + splitterAlong, top: 0, width: curSize, height: cross }
+        : { left: 0, top: 0, width: curSize, height: cross }
+      : isStartSide
+        ? { top: splitterWidth + splitterAlong, left: 0, height: curSize, width: cross }
+        : { top: 0, left: 0, height: curSize, width: cross }),
+    ...resizingStyle,
+  };
+
+  const onSplitterDown = (e: ReactMouseEvent) => {
+    e.preventDefault();
+    const startSize = sizeRef.current;
+    drag.current = { startSize, startX: e.clientX, startY: e.clientY };
+    onBeforeResize?.();
+    setDragging(true);
+  };
+
+  // 拖拽监听经 useEffect 绑定（React 合成事件内直接 addEventListener 在 Playwright 下不可靠）：
+  // dragging 变 true 时挂 window mousemove/mouseup，松手或组件卸载时清理。
+  useEffect(() => {
+    if (!dragging) return;
+    const move = (ev: MouseEvent) => {
+      const d = drag.current;
+      if (!d) return;
+      const dx = ev.clientX - d.startX;
+      const dy = ev.clientY - d.startY;
+      let next: number;
+      if (orientConst === HORIZONTAL) {
+        // 水平：分隔条在左侧(LEFT)向右拖增大尺寸；在右侧(RIGHT)向右拖减小尺寸
+        next = d.startSize + (placeConst === LEFT ? dx : -dx);
+      } else {
+        // 垂直：分隔条在上侧(TOP)向下拖增大尺寸；在下侧(BOTTOM)向下拖减小尺寸
+        next = d.startSize + (placeConst === TOP ? dy : -dy);
+      }
+      next = clamp(next, minSize, maxSize);
+      setCurSize(next);
+    };
+    const up = () => {
+      setDragging(false);
+      onMoved?.(sizeRef.current);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+    return () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+  }, [dragging, orientConst, placeConst, minSize, maxSize, onMoved]);
+
+  const splitter = (
+    <div
+      className={`x-splitbar ${horizontal ? 'x-splitbar-h' : 'x-splitbar-v'}`}
+      unselectable="on"
+      style={splitterStyleMerged}
+      onMouseDown={onSplitterDown}
+    />
+  );
+  const resizing = (
+    <div style={resizingStyleMerged}>
+      {resizingContent}
+    </div>
+  );
+
+  const proxyId = id ? `${id}-proxy` : 'splitbar-proxy';
+
+  return (
+    <>
+      <div
+        id={id}
+        data-testid={testId}
+        style={containerStyle}
+      >
+        {resizing}
+        {splitter}
+      </div>
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <>
+            <div
+              id={proxyId}
+              className={`x-splitbar-proxy ${horizontal ? 'x-splitbar-proxy-h' : 'x-splitbar-proxy-v'}`}
+              style={{ display: 'none' }}
+            />
+            <div
+              className="x-drag-overlay"
+              style={dragging ? { display: 'block', position: 'fixed', width: '100%', height: '100%', zIndex: 20000 } : { display: 'none' }}
+            />
+          </>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/components/Spotlight.tsx

@@ -0,0 +1,262 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type CSSProperties,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * 复刻 Ext.ux.Spotlight（又名 Ext.Spotlight，见 examples/ux/Spotlight.js）。
+ *
+ * 行为：在 document.body 上创建 4 个绝对定位遮罩（right/left/top/bottom），
+ * 围绕目标元素拼成一个「挖洞」的半透明遮罩，使页面除目标元素外全部不可交互。
+ * show(el) 时 4 遮罩先从 base 锚点（各面板远端、尺寸 0）收拢态，再动画展开到
+ * 围合目标矩形的全尺寸；hide() 反向收拢后移除。等价原始的 createElements /
+ * applyBounds(basePts) / applyBounds(展开) / doHide。
+ *
+ * 视觉完全复用 ext-all.css 既有 .x-spotlight（z-index:8999、position:absolute、
+ * background:#ccc），组件仅以内联样式控制 4 面板的 left/top/width/height 与 transition。
+ */
+
+export type SpotlightTarget =
+  | string
+  | (() => HTMLElement | null)
+  | RefObject<HTMLElement | null>
+  | null;
+
+export interface SpotlightHandle {
+  /** 高亮指定元素（id 选择器 / 函数 / ref）。省略则用最近一次 target。 */
+  show: (target?: SpotlightTarget) => void;
+  /** 隐藏遮罩。 */
+  hide: () => void;
+  /** 当前是否高亮中。 */
+  readonly active: boolean;
+}
+
+export interface SpotlightProps {
+  /** 受控是否高亮。true 显示挖洞遮罩，false 隐藏。省略则走命令式 show/hide。 */
+  active?: boolean;
+  /** 目标元素：id 选择器 / 返回元素函数 / ref。受控模式下用于定位挖洞位置。 */
+  target?: SpotlightTarget;
+  /** 是否动画展开/收拢（等价原始 animate）。默认 true。 */
+  animate?: boolean;
+  /** 动画时长（秒），等价原始 duration。默认 0.25。 */
+  duration?: number;
+  /** CSS easing 名，等价原始 easing（easeNone→linear、easeOut→ease-out 等）。默认 'easeNone'。 */
+  easing?: string;
+  /** 遮罩 z-index，等价原始 .x-spotlight z-index:8999。默认 8999。 */
+  zIndex?: number;
+  /** 遮罩背景色，等价原始 .x-spotlight background-color:#ccc。默认 '#ccc'。 */
+  color?: string;
+  /** 命令式模式下的初始高亮状态。默认 false。 */
+  defaultActive?: boolean;
+}
+
+interface PanelBox {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+interface Panels {
+  left: PanelBox;
+  right: PanelBox;
+  top: PanelBox;
+  bottom: PanelBox;
+}
+
+const EASING_MAP: Record<string, string> = {
+  easeNone: 'linear',
+  easeOut: 'ease-out',
+  easeIn: 'ease-in',
+  easeInOut: 'ease-in-out',
+};
+
+/** 依据目标元素矩形与文档尺寸，计算 4 面板「全展开」与「收拢 base」两套边界。 */
+function computePanels(el: HTMLElement): { full: Panels; base: Panels } {
+  const r = el.getBoundingClientRect();
+  const sx = window.scrollX || window.pageXOffset || 0;
+  const sy = window.scrollY || window.pageYOffset || 0;
+  const L = r.left + sx;
+  const T = r.top + sy;
+  const R = r.right + sx;
+  const B = r.bottom + sy;
+  const docW = Math.max(document.documentElement.scrollWidth, window.innerWidth + sx);
+  const docH = Math.max(document.documentElement.scrollHeight, window.innerHeight + sy);
+
+  return {
+    full: {
+      left: { left: 0, top: 0, width: L, height: B },
+      right: { left: R, top: T, width: docW - R, height: docH - T },
+      top: { left: L, top: 0, width: docW - L, height: T },
+      bottom: { left: 0, top: B, width: R, height: docH - B },
+    },
+    // base：各面板收拢到其「远端」锚点（尺寸 0），动画时从外部向内合拢
+    base: {
+      left: { left: 0, top: 0, width: L, height: 0 },
+      right: { left: R, top: docH, width: 0, height: 0 },
+      top: { left: docW, top: 0, width: 0, height: T },
+      bottom: { left: 0, top: B, width: 0, height: docH - B },
+    },
+  };
+}
+
+export const Spotlight = forwardRef<SpotlightHandle, SpotlightProps>(
+  (
+    {
+      active,
+      target,
+      animate = true,
+      duration = 0.25,
+      easing = 'easeNone',
+      zIndex,
+      color = '#ccc',
+    },
+    ref,
+  ) => {
+    const isControlled = active !== undefined;
+    const [internalActive, setInternalActive] = useState(false);
+    const shown = isControlled ? (active as boolean) : internalActive;
+
+    // 命令式 target 覆盖受控 target（受控每渲染更新，命令式经 state 更新，二者统一到 targetRef）
+    const [impTarget, setImpTarget] = useState<SpotlightTarget | undefined>(undefined);
+    const targetRef = useRef<SpotlightTarget | null>(target ?? null);
+    targetRef.current = impTarget !== undefined ? impTarget : target ?? null;
+
+    const resolveTarget = useCallback((): HTMLElement | null => {
+      const t = targetRef.current;
+      if (!t) return null;
+      if (typeof t === 'string') return document.querySelector<HTMLElement>(t);
+      if (typeof t === 'function') return t();
+      return t.current;
+    }, []);
+
+    const [mounted, setMounted] = useState(false); // 4 面板是否在 DOM
+    const [expanded, setExpanded] = useState(false); // 是否处于全展开边界
+    const [animating, setAnimating] = useState(false); // 仅在 show/hide 过渡窗口内为 true
+    const [panels, setPanels] = useState<{ full: Panels; base: Panels } | null>(null);
+    const rafRef = useRef<number>();
+    const timerRef = useRef<number>();
+
+    const recompute = useCallback(() => {
+      const el = resolveTarget();
+      if (!el) return;
+      setPanels(computePanels(el));
+    }, [resolveTarget]);
+
+    // 当前解析出的目标 DOM 元素（稳定引用）。作为 effect 依赖，目标切换时触发边界重算，
+    // 用元素引用而非函数可避免内联 target 每次渲染变化引发的无限循环。
+    const currentTargetEl = resolveTarget();
+
+    useEffect(() => {
+      window.clearTimeout(timerRef.current);
+      if (!shown) {
+        setExpanded(false); // 收拢
+        if (animate) setAnimating(true);
+        const delay = animate ? duration * 1000 : 0;
+        timerRef.current = window.setTimeout(() => {
+          setMounted(false);
+          setPanels(null);
+          setAnimating(false);
+        }, delay);
+        window.removeEventListener('resize', recompute);
+        window.removeEventListener('scroll', recompute, true);
+        return;
+      }
+      // shown === true
+      recompute();
+      if (!mounted) {
+        // 首次显示：挂载 + 先收拢再展开（等价原始 applyBounds 先 base 后展开的时序）
+        setMounted(true);
+        setExpanded(false);
+        if (animate) setAnimating(true);
+        rafRef.current = window.requestAnimationFrame(() => {
+          rafRef.current = window.requestAnimationFrame(() => setExpanded(true));
+        });
+        window.addEventListener('resize', recompute);
+        window.addEventListener('scroll', recompute, true);
+        if (animate) {
+          timerRef.current = window.setTimeout(() => setAnimating(false), duration * 1000);
+        }
+      } else {
+        // 已显示时切换目标（如引导式 show(panel2)）：仅更新边界，保留展开态，
+        // 4 面板靠 CSS transition 平滑滑动到新目标（等价原始 applyBounds 在 active 时重算）。
+        setExpanded(true);
+        if (animate) {
+          setAnimating(true);
+          window.clearTimeout(timerRef.current);
+          timerRef.current = window.setTimeout(() => setAnimating(false), duration * 1000);
+        }
+      }
+      return () => {
+        window.removeEventListener('resize', recompute);
+        window.removeEventListener('scroll', recompute, true);
+      };
+    }, [shown, animate, duration, impTarget, currentTargetEl, recompute]);
+
+    useEffect(
+      () => () => {
+        window.cancelAnimationFrame(rafRef.current as number);
+        window.clearTimeout(timerRef.current);
+      },
+      [],
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: (t?: SpotlightTarget) => {
+          // 注意：t 可能是函数（如 () => el），必须用 updater 包裹，否则 React 会把 t 当成
+          // setState 的更新器函数执行掉（impTarget 变成 t(prev) 的返回值而非 t 本身）。
+          if (t !== undefined) setImpTarget(() => t);
+          setInternalActive(true);
+        },
+        hide: () => setInternalActive(false),
+        get active() {
+          return shown;
+        },
+      }),
+      [shown],
+    );
+
+    if (!mounted || !panels) return null;
+
+    const cssEase = EASING_MAP[easing] ?? 'linear';
+    const transition =
+      animate && animating ? `left ${duration}s ${cssEase}, top ${duration}s ${cssEase}, width ${duration}s ${cssEase}, height ${duration}s ${cssEase}` : 'none';
+
+    // 四个面板：展开取 full，收拢取 base
+    const renderPanel = (key: keyof Panels) => {
+      const box = expanded ? panels.full[key] : panels.base[key];
+      const style: CSSProperties = {
+        position: 'absolute',
+        left: box.left,
+        top: box.top,
+        width: box.width,
+        height: box.height,
+        zIndex,
+        backgroundColor: color,
+        transition,
+        pointerEvents: 'auto',
+      };
+      return <div key={key} className="x-spotlight" style={style} data-spotlight-panel={key} />;
+    };
+
+    return createPortal(
+      <>
+        {renderPanel('left')}
+        {renderPanel('right')}
+        {renderPanel('top')}
+        {renderPanel('bottom')}
+      </>,
+      document.body,
+    );
+  },
+);
+
+Spotlight.displayName = 'Spotlight';

package/src/components/StatusBar.tsx

@@ -0,0 +1,118 @@
+import React, { useImperativeHandle, useRef, forwardRef } from 'react';
+import Toolbar, { type ToolbarItem } from './Toolbar';
+
+/**
+ * StatusBar —— 保真复刻 Ext.ux.StatusBar（examples/ux/statusbar/StatusBar.js）。
+ *
+ * 保真契约（DOM/class 严格对齐源码 golden 实测）：
+ *  - 本质为 Toolbar 子类：根 class = "x-toolbar x-small-editor x-statusbar x-toolbar-layout-ct"
+ *    （仅比普通 Toolbar 多 x-statusbar；x-toolbar-layout-ct 由 ToolbarLayout.onLayout 注入）。
+ *  - 状态元素：afterRender 注入一个 Toolbar.TextItem，cls = "xtb-text x-status-text {iconCls}"，
+ *    文本取 text || defaultText。该元素位于 '->' 分隔之前（statusAlign:'left'）或之后（'right'）。
+ *  - 其余 items 经 '->' 推到对侧（左对齐 → 状态在左、工具项在右；右对齐反之）。
+ *  - 状态文本在此布局下为内容宽度（非贪婪占满），与 golden 实测一致。
+ *
+ * 样式：复用 StatusBar.css（examples/ux/statusbar/css/StatusBar.css，已复制并 @import）。
+ *   x-status-valid/x-status-busy/x-status-error 等 statusCls 自带背景图标（accept.png 等），零 CSS 契约破坏。
+ *
+ * 交互（行为契约）：setStatus 更新文本/图标；showBusy 切 x-status-busy + busyText；clearStatus 复位。
+ */
+export interface StatusBarProps {
+  items?: ToolbarItem[];
+  /** 初始状态文本（取 text || defaultText || emptyText） */
+  text?: string;
+  /** 状态图标 class，如 'x-status-valid' / 'x-status-busy' / 'x-status-error'（需 StatusBar.css 已定义背景图） */
+  iconCls?: string;
+  defaultText?: string;
+  /** 状态元素对齐：'left'（默认，状态在左、items 在右）或 'right'（状态在右、items 在左） */
+  statusAlign?: 'left' | 'right';
+  width?: number | string;
+  style?: React.CSSProperties;
+  className?: string;
+  /** 数据测试 id，挂在根 div 上（供保真截图/行为测试定位） */
+  testId?: string;
+}
+
+export interface StatusBarHandle {
+  /** 设置状态文本/图标；o 可为字符串（视为文本）或 {text, iconCls, clear} */
+  setStatus: (o: string | { text?: string; iconCls?: string }) => void;
+  /** 显示忙碌态：文本 busyText + 图标 busyIconCls（默认 x-status-busy / 'Loading...'） */
+  showBusy: (o?: { text?: string; iconCls?: string }) => void;
+  /** 清除状态：复位为 defaultText / 移除图标 class */
+  clearStatus: () => void;
+}
+
+const emptyText = ' ';
+
+export const StatusBar = forwardRef<StatusBarHandle, StatusBarProps>(function StatusBar(
+  {
+    items = [],
+    text,
+    iconCls,
+    defaultText = '',
+    statusAlign = 'left',
+    width,
+    style,
+    className,
+    testId,
+  },
+  ref,
+) {
+  const [statusText, setStatusText] = React.useState<string>(text || defaultText || emptyText);
+  const [statusCls, setStatusCls] = React.useState<string>(iconCls || '');
+
+  const currIconRef = useRef<string>(iconCls || '');
+
+  useImperativeHandle(ref, () => ({
+    setStatus(o) {
+      if (typeof o === 'string') {
+        setStatusText(o);
+        return;
+      }
+      if (o.text !== undefined) setStatusText(o.text);
+      if (o.iconCls !== undefined) {
+        currIconRef.current = o.iconCls;
+        setStatusCls(o.iconCls);
+      }
+    },
+    showBusy(o = {}) {
+      const busyIcon = o.iconCls ?? 'x-status-busy';
+      const busyText = o.text ?? 'Loading...';
+      currIconRef.current = busyIcon;
+      setStatusCls(busyIcon);
+      setStatusText(busyText);
+    },
+    clearStatus() {
+      currIconRef.current = '';
+      setStatusCls('');
+      setStatusText(defaultText || emptyText);
+    },
+  }), [defaultText]);
+
+  const statusItem: ToolbarItem = {
+    xtype: 'tbtext',
+    text: statusText,
+    cls: `x-status-text ${statusCls}`.trim(),
+  } as ToolbarItem;
+
+  const allItems: ToolbarItem[] =
+    statusAlign === 'right'
+      ? ['->', statusItem, ...items]
+      : [statusItem, '->', ...items];
+
+  const rootCls = [
+    'x-toolbar',
+    'x-small-editor',
+    'x-statusbar',
+    'x-toolbar-layout-ct',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Toolbar items={allItems} width={width} style={style} testId={testId} rootClass={rootCls} />
+  );
+});
+
+export default StatusBar;