@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/src/components/Table/TableContext.tsx

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -14,9 +15,11 @@ export interface TableScrollState {
   isScrolling: boolean;
 }
 
+type ColumnWidths = Record<number, number>; // Maps index to width
+
 interface StickyColumnInfo {
-  leftColumnWidths: Map<number, number>; // Maps index to width
-  rightColumnWidths: Map<number, number>; // Maps index to width
+  left: ColumnWidths;
+  right: ColumnWidths;
 }
 
 interface TableContextValue extends TableScrollState {
@@ -26,6 +29,14 @@ interface TableContextValue extends TableScrollState {
     index: number,
     width: number
   ) => void;
+  /**
+   * Whether a width is already known for this sticky column.
+   *
+   * Reads a ref, not state, so a caller can ask without subscribing to width
+   * changes — body cells use it to skip measuring a column the header has
+   * already measured. See {@link useRegisterStickyWidth}.
+   */
+  hasStickyWidth: (direction: 'left' | 'right', index: number) => boolean;
   getStickyOffset: (direction: 'left' | 'right', index: number) => number;
   isLastStickyColumn: (direction: 'left' | 'right', index: number) => boolean;
 }
@@ -52,9 +63,15 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
     isScrolling: false,
   });
 
-  const stickyColumnsRef = useRef<StickyColumnInfo>({
-    leftColumnWidths: new Map(),
-    rightColumnWidths: new Map(),
+  // Column widths live in state (not a ref) so that a width change — a font
+  // swap, a window/sidebar resize, or the columns re-flowing when the table
+  // goes from fitting to overflowing — triggers a re-render and the sticky
+  // offsets are recomputed. Storing them in a ref (the previous approach) meant
+  // the offsets were computed once at mount and then went stale, detaching the
+  // sticky columns from their real positions.
+  const [stickyColumns, setStickyColumns] = useState<StickyColumnInfo>({
+    left: {},
+    right: {},
   });
 
   // 스크롤 상태 업데이트
@@ -95,14 +112,41 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
     [updateScrollState]
   );
 
-  // Register a sticky column with its width
+  /*
+   * A ref mirror of the widths above, so `hasStickyWidth` can answer without
+   * making its caller a subscriber. Every body cell subscribing to width state
+   * would re-render the whole table on the first measurement of any column.
+   */
+  const stickyColumnsRef = useRef<StickyColumnInfo>({ left: {}, right: {} });
+
+  const hasStickyWidth = useCallback(
+    (direction: 'left' | 'right', index: number) =>
+      stickyColumnsRef.current[direction][index] !== undefined,
+    []
+  );
+
+  // Register a sticky column with its (measured) width. Rounds to whole pixels
+  // and bails when unchanged so the ResizeObserver-driven callers can't
+  // ping-pong on sub-pixel differences and spin the render loop.
   const registerStickyColumn = useCallback(
     (direction: 'left' | 'right', index: number, width: number) => {
-      if (direction === 'left') {
-        stickyColumnsRef.current.leftColumnWidths.set(index, width);
-      } else {
-        stickyColumnsRef.current.rightColumnWidths.set(index, width);
-      }
+      const rounded = Math.round(width);
+      // The ref is written here rather than in an effect so `hasStickyWidth` is
+      // already true for the next cell that mounts in the same commit — without
+      // that, every cell of a column measures before the first state update
+      // lands, which is exactly the cost this is meant to avoid.
+      stickyColumnsRef.current = {
+        ...stickyColumnsRef.current,
+        [direction]: {
+          ...stickyColumnsRef.current[direction],
+          [index]: rounded,
+        },
+      };
+      setStickyColumns((prev) => {
+        const side = prev[direction];
+        if (side[index] === rounded) return prev;
+        return { ...prev, [direction]: { ...side, [index]: rounded } };
+      });
     },
     []
   );
@@ -112,38 +156,33 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
     (direction: 'left' | 'right', index: number) => {
       if (index === 0) return 0;
 
-      const widthsMap =
-        direction === 'left'
-          ? stickyColumnsRef.current.leftColumnWidths
-          : stickyColumnsRef.current.rightColumnWidths;
+      const widths = stickyColumns[direction];
 
       let offset = 0;
       for (let i = 0; i < index; i++) {
-        offset += widthsMap.get(i) || 0;
+        offset += widths[i] || 0;
       }
 
       return offset;
     },
-    []
+    [stickyColumns]
   );
 
   // Check if a column is the last sticky column on its side
   const isLastStickyColumn = useCallback(
     (direction: 'left' | 'right', index: number) => {
-      const widthsMap =
-        direction === 'left'
-          ? stickyColumnsRef.current.leftColumnWidths
-          : stickyColumnsRef.current.rightColumnWidths;
+      const widths = stickyColumns[direction];
 
-      // Find the highest index in the map
+      // Find the highest registered index on this side
       let maxIndex = -1;
-      for (const idx of widthsMap.keys()) {
+      for (const key of Object.keys(widths)) {
+        const idx = Number(key);
         if (idx > maxIndex) maxIndex = idx;
       }
 
       return index === maxIndex;
     },
-    []
+    [stickyColumns]
   );
 
   // 단일 useEffect에서 모든 이벤트 리스너 관리
@@ -171,17 +210,44 @@ export const TableProvider: React.FC<TableProviderProps> = ({ children }) => {
     };
   }, [updateScrollState]);
 
+  /*
+   * Memoised, because an object literal here is a new value on *every* render of
+   * this provider, and a new context value re-renders every consumer —
+   * `Th`/`Td`/`Tr` all call `useTableContext()`. React propagates a context
+   * change into subtrees that `React.memo` has already bailed out of, so a
+   * memoised row does not stop it: the cells inside re-render anyway.
+   *
+   * In a virtualised table that is the dominant cost of scrolling. Measured on a
+   * consumer's 12,000-row admin table (production build): one scroll step that
+   * mounted a single new row re-rendered `Td` **794 times** — every cell of every
+   * rendered row, each one re-running Chakra's runtime style resolution. Wall
+   * time was ~1,050ms per step and did not depend on how many rows the step
+   * actually brought in (1.8 rows and 7.3 rows cost the same), which is the
+   * signature of a whole-table re-render rather than incremental work.
+   *
+   * With this memo the value changes only when `scrollState` or the registered
+   * sticky widths change, so a scroll that alters neither costs nothing.
+   */
+  const value = useMemo(
+    () => ({
+      ...scrollState,
+      setContainerRef,
+      registerStickyColumn,
+      hasStickyWidth,
+      getStickyOffset,
+      isLastStickyColumn,
+    }),
+    [
+      scrollState,
+      setContainerRef,
+      registerStickyColumn,
+      hasStickyWidth,
+      getStickyOffset,
+      isLastStickyColumn,
+    ]
+  );
+
   return (
-    <TableContext.Provider
-      value={{
-        ...scrollState,
-        setContainerRef,
-        registerStickyColumn,
-        getStickyOffset,
-        isLastStickyColumn,
-      }}
-    >
-      {children}
-    </TableContext.Provider>
+    <TableContext.Provider value={value}>{children}</TableContext.Provider>
   );
 };

package/src/components/Table/Td.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { Table, useToken } from '@chakra-ui/react';
 
 import { getStickyStyles } from './Table.styles';
 import { TableCellProps } from './Table.types';
 import { useTableContext } from './TableContext';
+import { useRegisterStickyWidth } from './useRegisterStickyWidth';
 
 export const Td = ({
   wrap,
@@ -77,18 +78,22 @@ export const Td = ({
 
   const {
     registerStickyColumn,
+    hasStickyWidth,
     getStickyOffset,
     isLastStickyColumn,
     ...scrollState
   } = tableContext;
 
-  // Update width when element is mounted and dimensions change
-  useEffect(() => {
-    if (isSticky && cellRef.current) {
-      const width = cellRef.current.getBoundingClientRect().width;
-      registerStickyColumn(stickyDirection, stickyIndex, width);
-    }
-  }, [isSticky, registerStickyColumn, stickyDirection, stickyIndex]);
+  // Keep this column's width registered so the cumulative sticky offsets stay
+  // correct across layout changes (font swap, resize, fit -> overflow).
+  useRegisterStickyWidth(cellRef, {
+    isSticky,
+    direction: stickyDirection,
+    index: stickyIndex,
+    register: registerStickyColumn,
+    hasWidth: hasStickyWidth,
+    role: 'body',
+  });
 
   // Get the sticky offset based on the column's position
   const stickyOffset = isSticky

package/src/components/Table/Th.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { Table, useToken } from '@chakra-ui/react';
 
 import { getStickyStyles } from './Table.styles';
 import { TableCellProps } from './Table.types';
 import { useTableContext } from './TableContext';
+import { useRegisterStickyWidth } from './useRegisterStickyWidth';
 
 export const Th = forwardRef<
   HTMLTableCellElement,
@@ -81,18 +82,22 @@ export const Th = forwardRef<
 
     const {
       registerStickyColumn,
+      hasStickyWidth,
       getStickyOffset,
       isLastStickyColumn,
       ...scrollState
     } = tableContext;
 
-    // Update width when element is mounted and dimensions change
-    useEffect(() => {
-      if (isSticky && measureNodeRef.current) {
-        const width = measureNodeRef.current.getBoundingClientRect().width;
-        registerStickyColumn(stickyDirection, stickyIndex, width);
-      }
-    }, [isSticky, registerStickyColumn, stickyDirection, stickyIndex]);
+    // Keep this column's width registered so the cumulative sticky offsets stay
+    // correct across layout changes (font swap, resize, fit -> overflow).
+    useRegisterStickyWidth(measureNodeRef, {
+      isSticky,
+      direction: stickyDirection,
+      index: stickyIndex,
+      register: registerStickyColumn,
+      hasWidth: hasStickyWidth,
+      role: 'header',
+    });
 
     // Combine refs (forwarded ref and internal ref)
     const setRefs = useCallback(

package/src/components/Table/contextStability.test.tsx

@@ -0,0 +1,140 @@
+import { ReactNode, useMemo, useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { LogicianProvider } from '../LogicianProvider';
+import { Table } from './Table';
+import { TableContainer } from './TableContainer';
+import { useTableContext } from './TableContext';
+import { Tbody } from './Tbody';
+import { Td } from './Td';
+import { Tr } from './Tr';
+
+/**
+ * 표의 컨텍스트 값이 렌더마다 새 객체면, **표 안의 모든 셀이 다시 그려진다**.
+ *
+ * `Th`/`Td`/`Tr` 은 전부 `useTableContext()` 를 부른다. 컨텍스트 변경은
+ * `React.memo` 를 우회한다 — React 는 이미 bail-out 된 서브트리 **안으로** 변경을
+ * 전파하므로, 행을 memo 로 감싸도 그 안의 셀은 다시 그려진다.
+ *
+ * 가상 스크롤 표에서는 이것이 스크롤 비용 그 자체가 된다. 실측(소비자의 12,000행
+ * 관리자 표, 프로덕션 빌드): **새 행 하나만 마운트하는 스크롤 한 칸이 `Td` 를 794번**
+ * 다시 그렸다. 한 칸에 ~1,050ms 였고, 그 값은 그 칸이 실제로 몇 행을 새로 들였는지와
+ * **무관했다**(1.8행과 7.3행이 같은 비용) — 증분 작업이 아니라 표 전체가 다시
+ * 그려지고 있다는 신호다.
+ *
+ * 그래서 이 테스트는 오프셋이 맞는지가 아니라 **`Td` 가 몇 번 그려지는지**를 센다.
+ * 그것이 회귀했던 값이고, 다음 변경이 조용히 되돌릴 값이다.
+ */
+let tdRenders = 0;
+
+/**
+ * `Td` 자신을 셀 수는 없으니(패키지 내부 컴포넌트다) **같은 것을 구독하는 대역**을
+ * 센다 — `useTableContext()` 를 부르는 컴포넌트. 표 안에서 다시 그려지는 모집단이
+ * 정확히 이것이다(`Th`/`Td`/`Tr` 이 전부 이 훅을 부른다).
+ *
+ * 이 대역이 셀 안에 있어야 의미가 있다: 행 엘리먼트가 고정돼 있어도 컨텍스트 변경은
+ * bail-out 된 서브트리 안으로 전파되므로, 여기서 세는 숫자가 곧 스크롤 한 칸의
+ * 실제 재렌더 수다.
+ */
+const ContextProbe = ({ children }: { children: ReactNode }) => {
+  useTableContext();
+  tdRenders += 1;
+  return <>{children}</>;
+};
+
+const CountingTd = ({ children }: { children: ReactNode }) => (
+  <Td>
+    <ContextProbe>{children}</ContextProbe>
+  </Td>
+);
+
+beforeEach(() => {
+  // jsdom 에는 없다 — Chakra 의 provider 가 부팅하면서 부른다.
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }));
+  tdRenders = 0;
+});
+
+/**
+ * 표를 그대로 둔 채 **표 위쪽만** 다시 그린다 — 가상 스크롤 목록이 스크롤 중에
+ * 하는 일이 정확히 이것이다(보이는 구간이 바뀌어 리스트 컴포넌트가 다시 그려진다).
+ * 행 엘리먼트는 같은 것을 다시 넘기므로, 셀이 다시 그려질 이유는 컨텍스트뿐이다.
+ */
+const Harness = ({ rowCount }: { rowCount: number }) => {
+  const [tick, setTick] = useState(0);
+  /*
+   * 행 엘리먼트를 고정한다 — 실제 목록에서 행이 `React.memo` 로 bail-out 되는 것과
+   * 같은 상황이다. 이렇게 해야 "부모가 다시 그려졌으니 자식도 다시 그려졌다"는
+   * 평범한 이유가 빠지고, 셀이 다시 그려질 수 있는 경로가 **컨텍스트 하나만** 남는다.
+   */
+  const body = useMemo(
+    () => (
+      <Tbody>
+        {Array.from({ length: rowCount }, (_, i) => (
+          <Tr key={i}>
+            <CountingTd>row {i}</CountingTd>
+          </Tr>
+        ))}
+      </Tbody>
+    ),
+    [rowCount]
+  );
+  return (
+    <LogicianProvider>
+      <button type="button" onClick={() => setTick((t) => t + 1)}>
+        rerender
+      </button>
+      <span data-testid="tick">{tick}</span>
+      <TableContainer>
+        <Table>{body}</Table>
+      </TableContainer>
+    </LogicianProvider>
+  );
+};
+
+describe('table context identity', () => {
+  it('re-rendering the table owner does not re-render every cell', () => {
+    render(<Harness rowCount={40} />);
+    const afterMount = tdRenders;
+    expect(afterMount, '40행이 마운트되지 않았다').toBeGreaterThanOrEqual(40);
+
+    tdRenders = 0;
+    fireEvent.click(screen.getByText('rerender'));
+    expect(screen.getByTestId('tick')).toHaveTextContent('1');
+
+    // 스크롤 상태도 sticky 너비도 바뀌지 않았으므로 셀은 하나도 다시 그려질 이유가
+    // 없다. 컨텍스트 값이 리터럴이면 40개가 전부 다시 그려진다.
+    expect(
+      tdRenders,
+      '표 주인이 다시 그려졌다는 이유만으로 모든 셀이 다시 그려졌다 — ' +
+        '컨텍스트 값이 렌더마다 새 객체다'
+    ).toBe(0);
+  });
+
+  it('the cell count does not scale with row count on a parent re-render', () => {
+    const rerenderCost = (rowCount: number) => {
+      const view = render(<Harness rowCount={rowCount} />);
+      tdRenders = 0;
+      fireEvent.click(screen.getByText('rerender'));
+      const cost = tdRenders;
+      view.unmount();
+      return cost;
+    };
+    const small = rerenderCost(10);
+    const large = rerenderCost(100);
+
+    expect(
+      large,
+      `행이 10배인데 재렌더도 ${small} → ${large} 로 따라 늘었다 — 스크롤 비용이 행 수에 비례한다`
+    ).toBe(small);
+  });
+});

package/src/components/Table/stickyWidth.test.tsx

@@ -0,0 +1,138 @@
+import { ReactNode } from 'react';
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { LogicianProvider } from '../LogicianProvider';
+import { Table } from './Table';
+import { TableContainer } from './TableContainer';
+import { Tbody } from './Tbody';
+import { Td } from './Td';
+import { Th } from './Th';
+import { Thead } from './Thead';
+import { Tr } from './Tr';
+
+/**
+ * A column's width is one number, so it should be measured once — by the header.
+ *
+ * Before this, every cell measured itself and attached its own `ResizeObserver`.
+ * In a static table that is redundant; in a virtualised one it is the dominant
+ * cost of scrolling, because rows mount and unmount continuously and each mount
+ * forces a synchronous layout. Measured on a 12,000-row admin table (production
+ * build): 68 `getBoundingClientRect` calls and 28 observers created *per scroll
+ * step*, for three sticky columns whose widths never changed.
+ *
+ * These count the calls rather than assert on offsets, because the number of
+ * measurements is the thing that regressed and the thing a future change would
+ * silently undo.
+ */
+const counters = { gbcr: 0, observers: 0 };
+
+beforeEach(() => {
+  // jsdom 에는 없다 — Chakra 의 provider 가 부팅하면서 부른다.
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }));
+  counters.gbcr = 0;
+  counters.observers = 0;
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(
+    function (this: Element) {
+      counters.gbcr += 1;
+      return {
+        width: 120,
+        height: 40,
+        top: 0,
+        left: 0,
+        right: 120,
+        bottom: 40,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      } as DOMRect;
+    }
+  );
+  class CountingResizeObserver {
+    constructor() {
+      counters.observers += 1;
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', CountingResizeObserver);
+});
+
+const rows = (n: number) =>
+  Array.from({ length: n }, (_, i) => (
+    <Tr key={i}>
+      <Td isSticky stickyDirection="left" stickyIndex={0}>
+        row {i}
+      </Td>
+      <Td>other</Td>
+    </Tr>
+  ));
+
+/** 표 컴포넌트가 Chakra 위에 있어서 provider 없이는 렌더되지 않는다. */
+const inProvider = (ui: ReactNode) => <LogicianProvider>{ui}</LogicianProvider>;
+
+const withHeader = (rowCount: number) =>
+  inProvider(
+    <TableContainer>
+      <Table>
+        <Thead>
+          <Tr>
+            <Th isSticky stickyDirection="left" stickyIndex={0}>
+              name
+            </Th>
+            <Th>other</Th>
+          </Tr>
+        </Thead>
+        <Tbody>{rows(rowCount)}</Tbody>
+      </Table>
+    </TableContainer>
+  );
+
+describe('sticky column width — measured once, not once per row', () => {
+  it('one observer for the column, however many rows there are', () => {
+    render(withHeader(30));
+    expect(
+      counters.observers,
+      '한 열의 너비는 하나인데 행마다 관찰자를 달고 있다'
+    ).toBe(1);
+  });
+
+  it('adding rows does not add measurements', () => {
+    render(withHeader(5));
+    const withFive = counters.gbcr;
+    counters.gbcr = 0;
+    render(withHeader(50));
+    expect(
+      counters.gbcr,
+      '행이 10배가 됐는데 측정 횟수가 따라 늘었다 — 가상 스크롤에서 이게 스크롤 비용이 된다'
+    ).toBeLessThanOrEqual(withFive);
+  });
+
+  it('a table with no header row still gets a width', () => {
+    // 헤더가 없으면 아무도 재지 않아 오프셋이 전부 0이 된다. 그때는 첫 본문 셀이
+    // 대신 잰다 — 그래서 body 셀의 측정을 통째로 없애지 않았다.
+    render(
+      inProvider(
+        <TableContainer>
+          <Table>
+            <Tbody>{rows(20)}</Tbody>
+          </Table>
+        </TableContainer>
+      )
+    );
+    expect(
+      counters.gbcr,
+      '헤더 없는 표에서 아무도 너비를 재지 않았다'
+    ).toBeGreaterThan(0);
+  });
+});

package/src/components/Table/useRegisterStickyWidth.ts

@@ -0,0 +1,83 @@
+import { RefObject, useEffect } from 'react';
+
+import { StickyDirection } from './Table.styles';
+
+interface UseRegisterStickyWidthOptions {
+  isSticky: boolean;
+  direction: StickyDirection;
+  index: number;
+  register: (direction: StickyDirection, index: number, width: number) => void;
+  /**
+   * Whether some cell has already measured this column. Body cells use it to
+   * skip; header cells ignore it (they are the authority).
+   */
+  hasWidth: (direction: StickyDirection, index: number) => boolean;
+  /**
+   * `header` — one cell per column, mounted for the table's lifetime. It owns
+   * the measurement and keeps a `ResizeObserver` so the width follows later
+   * layout changes.
+   *
+   * `body` — one cell per column *per row*. It measures only when no width is
+   * known yet (a table with no header row) and never observes.
+   */
+  role: 'header' | 'body';
+}
+
+/**
+ * Keep a sticky column's measured width registered with the table context, so
+ * the cumulative sticky offsets stay correct across layout changes — a web-font
+ * swap that reflows the text, a window/sidebar resize, or the columns shrinking
+ * when the table goes from fitting its container to overflowing it. Without a
+ * live measurement the offsets are computed once from stale widths and the
+ * pinned columns visibly detach (a gap opens and neighbours collapse).
+ *
+ * **A column's width is one number, so it is measured once — by the header.**
+ * Every cell used to measure itself and attach its own `ResizeObserver`. In a
+ * static table that is merely redundant; in a virtualised one it is the
+ * dominant cost of scrolling, because rows mount and unmount continuously and
+ * each mount forces a synchronous layout.
+ *
+ * Measured on a 12,000-row admin table (production build, 10 scroll steps):
+ * 680 `getBoundingClientRect` calls and 280 `ResizeObserver`s created — 68
+ * measurements and 28 observers per scroll step, for three sticky columns whose
+ * widths never changed. `getBoundingClientRect` alone was 11.9% of profiled CPU.
+ *
+ * Body cells still measure when nothing else has: a table with sticky columns
+ * and no header row would otherwise get zero offsets. In that case the first
+ * body cell to mount supplies the width and the rest skip.
+ */
+export function useRegisterStickyWidth(
+  ref: RefObject<HTMLTableCellElement | null>,
+  {
+    isSticky,
+    direction,
+    index,
+    register,
+    hasWidth,
+    role,
+  }: UseRegisterStickyWidthOptions
+) {
+  useEffect(() => {
+    const node = ref.current;
+    if (!isSticky || !node) return;
+
+    if (role === 'body') {
+      // Header already measured this column (the usual case) — nothing to do,
+      // and crucially no observer to attach and tear down on every scroll.
+      if (hasWidth(direction, index)) return;
+      register(direction, index, node.getBoundingClientRect().width);
+      return;
+    }
+
+    register(direction, index, node.getBoundingClientRect().width);
+
+    if (typeof ResizeObserver === 'undefined') return;
+
+    const observer = new ResizeObserver(() => {
+      register(direction, index, node.getBoundingClientRect().width);
+    });
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [ref, isSticky, direction, index, register, hasWidth, role]);
+}