webcake-ui-kit 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -48,8 +48,10 @@
     "./WkSpinner": "./src/components/spinner/Spinner.vue",
     "./WkSwitch": "./src/components/switch/Switch.vue",
     "./WkSwitchGroup": "./src/components/switch-group/SwitchGroup.vue",
+    "./WkTable": "./src/components/table/Table.vue",
     "./WkTabs": "./src/components/tabs/Tabs.vue",
     "./WkTag": "./src/components/tag/Tag.vue",
+    "./WkTextarea": "./src/components/textarea/Textarea.vue",
     "./WkToggle": "./src/components/toggle/Toggle.vue",
     "./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
     "./WkTooltip": "./src/components/tooltip/Tooltip.vue",

package/src/components/button/button.css

@@ -224,6 +224,7 @@
   color: var(--primary-brand-fg);
   height: fit-content;
   padding: 0;
+  border: none;
 }
 
 .ui-btn--link:hover,

package/src/components/checkbox/checkbox.css

@@ -40,6 +40,7 @@
   transition:
     background-color 0.12s ease,
     border-color 0.12s ease;
+  inset: 0;
 }
 
 .ui-checkbox__input:checked + .ui-checkbox__box,

package/src/components/dropdown/Dropdown.vue

@@ -21,7 +21,7 @@
         <slot></slot>
       </span>
     </template>
-    <DropdownMenuItems v-if="hasItems" :items="items" @select="onItemSelect" />
+    <DropdownMenuItems v-if="hasItems" :items="items" :value="value" @select="onItemSelect" />
     <slot v-else name="overlay"></slot>
   </Menu>
 </template>
@@ -71,6 +71,10 @@ export default {
       default: function () {
         return []
       }
+    },
+    value: {
+      type: [String, Array],
+      default: null
     }
   },
   emits: ['change', 'update:modelValue', 'open', 'close', 'select'],

package/src/components/dropdown/DropdownMenuItems.vue

@@ -7,12 +7,7 @@
       <!-- Group: non-clickable label + flat children -->
       <div v-else-if="item._type === 'group'" class="ui-dropdown-items__group">
         <div class="ui-dropdown-items__group-label" :title="item.title || undefined">
-          <component
-            :is="item.icon"
-            v-if="item.icon && isComponent(item.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
           <span :style="item.color ? { color: item.color } : undefined">{{ item.label }}</span>
         </div>
         <div
@@ -21,21 +16,18 @@
           class="ui-dropdown-items__item"
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled,
-            'ui-dropdown-items__item--destructive': child.destructive
+            'ui-dropdown-items__item--destructive': child.destructive,
+            'ui-dropdown-items__item--active': isActive(child.key)
           }"
           :title="child.title || undefined"
           @click="onItemClick(child)"
         >
-          <component
-            :is="child.icon"
-            v-if="child.icon && isComponent(child.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -49,12 +41,7 @@
           }"
           :title="item.title || undefined"
         >
-          <component
-            :is="item.icon"
-            v-if="item.icon && isComponent(item.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
             item.label
           }}</span>
@@ -65,21 +52,18 @@
           class="ui-dropdown-items__item ui-dropdown-items__item--sub"
           :class="{
             'ui-dropdown-items__item--disabled': child.disabled || item.disabled,
-            'ui-dropdown-items__item--destructive': child.destructive
+            'ui-dropdown-items__item--destructive': child.destructive,
+            'ui-dropdown-items__item--active': isActive(child.key)
           }"
           :title="child.title || undefined"
           @click="onItemClick(child, item)"
         >
-          <component
-            :is="child.icon"
-            v-if="child.icon && isComponent(child.icon)"
-            class="ui-dropdown-items__icon"
-            :color="item.colorIcon"
-          />
+          <component :is="child.icon" v-if="child.icon && isComponent(child.icon)" :size="20" :color="item.colorIcon" />
           <span class="ui-dropdown-items__label" :style="child.color ? { color: child.color } : undefined">{{
             child.label
           }}</span>
           <span v-if="child.extra" class="ui-dropdown-items__extra">{{ child.extra }}</span>
+          <WkiCheck v-if="isActive(child.key)" :size="16" color="var(--muted-fg)" />
         </div>
       </div>
 
@@ -89,27 +73,26 @@
         class="ui-dropdown-items__item"
         :class="{
           'ui-dropdown-items__item--disabled': item.disabled,
-          'ui-dropdown-items__item--destructive': item.destructive
+          'ui-dropdown-items__item--destructive': item.destructive,
+          'ui-dropdown-items__item--active': isActive(item.key)
         }"
         :title="item.title || undefined"
         @click="onItemClick(item)"
       >
-        <component
-          :is="item.icon"
-          v-if="item.icon && isComponent(item.icon)"
-          class="ui-dropdown-items__icon"
-          :color="item.colorIcon"
-        />
+        <component :is="item.icon" v-if="item.icon && isComponent(item.icon)" :size="20" :color="item.colorIcon" />
         <span class="ui-dropdown-items__label" :style="item.color ? { color: item.color } : undefined">{{
           item.label
         }}</span>
         <span v-if="item.extra" class="ui-dropdown-items__extra">{{ item.extra }}</span>
+        <WkiCheck v-if="isActive(item.key)" :size="16" color="var(--muted-fg)" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import WkiCheck from '../../icons/Check.vue'
+
 function skipReactive(val) {
   if (val && typeof val === 'object' && !val.__v_skip) {
     val.__v_skip = true
@@ -119,12 +102,18 @@ function skipReactive(val) {
 export default {
   name: 'DropdownMenuItems',
 
+  components: { WkiCheck },
+
   props: {
     items: {
       type: Array,
       default: function () {
         return []
       }
+    },
+    value: {
+      type: [String, Array],
+      default: null
     }
   },
 
@@ -162,6 +151,11 @@ export default {
     isComponent(val) {
       return val !== null && typeof val === 'object'
     },
+    isActive(key) {
+      if (this.value === null || this.value === undefined) return false
+      if (Array.isArray(this.value)) return this.value.indexOf(key) !== -1
+      return this.value === key
+    },
     onItemClick(item, parentItem) {
       if (item.disabled || (parentItem && parentItem.disabled)) return
       this.$emit('select', item.key)

package/src/components/dropdown/dropdown-menu-items.css

@@ -37,6 +37,11 @@
   background: var(--accent-bg);
 }
 
+.ui-dropdown-items__item--active {
+  background: var(--accent-2);
+  font-weight: var(--paragraph-medium-font-weight);
+}
+
 .ui-dropdown-items__item--disabled {
   opacity: 0.4;
   cursor: not-allowed;

package/src/components/empty/Empty.vue

@@ -5,10 +5,10 @@
         <slot name="media"></slot>
       </div>
       <div v-if="hasTextBlock" class="ui-empty__text">
-        <Typography v-if="hasTitle" variant="paragraph" weight="medium">
+        <Typography v-if="hasTitle" class="ui-empty__title" variant="paragraph-regular" weight="medium">
           <slot name="title">{{ title }}</slot>
         </Typography>
-        <Typography v-if="hasDescription" variant="paragraph-small" weight="regular">
+        <Typography v-if="hasDescription" class="ui-empty__description" variant="paragraph-small" weight="regular">
           <slot name="description">{{ description }}</slot>
         </Typography>
       </div>

package/src/components/table/Table.vue

@@ -0,0 +1,441 @@
+<template>
+  <div
+    :class="['ui-table', bordered && 'ui-table--bordered', hasVerticalScroll && 'ui-table--scroll-y']"
+    :style="containerStyle"
+  >
+    <table class="ui-table__table" :style="tableStyle">
+      <colgroup>
+        <col v-if="hasSelection" class="ui-table__col ui-table__col--selection" />
+        <col v-for="col in columns" :key="colKey(col)" :style="colStyle(col)" />
+      </colgroup>
+      <thead class="ui-table__head">
+        <tr
+          :class="['ui-table__row', 'ui-table__row--head', scrollbarWidth > 0 && 'ui-table__row--has-scrollbar']"
+          :style="{ height: toCssSize(headerHeight) }"
+        >
+          <th
+            v-if="hasSelection"
+            class="ui-table__cell ui-table__th ui-table__cell--selection"
+            :style="headCellStyle(0)"
+          >
+            <WkCheckbox :checked="allSelected" :disabled="!rows.length" @change="onToggleAll" />
+          </th>
+          <th
+            v-for="(col, i) in columns"
+            :key="colKey(col)"
+            :class="[
+              'ui-table__cell',
+              'ui-table__th',
+              `ui-table__cell--${alignOf(col)}`,
+              isSortable(col) && 'ui-table__th--sortable'
+            ]"
+            :style="headCellStyle(hasSelection ? i + 1 : i, col)"
+            :tabindex="isSortable(col) ? 0 : undefined"
+            :aria-sort="ariaSort(col)"
+            @click="onHeaderClick(col)"
+            @keydown.enter.prevent="onHeaderClick(col)"
+            @keydown.space.prevent="onHeaderClick(col)"
+            v-bind="customHeader ? customHeader(col, i) : {}"
+          >
+            <span class="ui-table__th-inner">
+              <slot name="headerCell" :column="col">{{ col.title }}</slot>
+              <span
+                v-if="isSortable(col)"
+                :class="['ui-table__sort', sortStateOf(col) ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
+                aria-hidden="true"
+              >
+                <WkiArrowUp v-if="sortStateOf(col) === 'ascend'" :size="16" />
+                <WkiArrowDown v-else-if="sortStateOf(col) === 'descend'" :size="16" />
+                <WkiArrowDownUp v-else :size="16" />
+              </span>
+            </span>
+          </th>
+          <th
+            v-if="scrollbarWidth > 0"
+            class="ui-table__th--scrollbar"
+            :style="{ width: scrollbarWidth + 'px' }"
+            aria-hidden="true"
+          />
+        </tr>
+      </thead>
+      <tbody class="ui-table__body" :style="bodyStyle" @scroll="onBodyScroll">
+        <tr v-if="!rows.length" class="ui-table__row ui-table__row--empty">
+          <td class="ui-table__cell ui-table__empty-cell" :colspan="totalColumns">
+            <slot name="emptyText">
+              <WkEmpty :title="emptyText" />
+            </slot>
+          </td>
+        </tr>
+        <template v-else>
+          <!-- Top spacer reserves the height of the rows scrolled out above the window. -->
+          <tr v-if="isVirtual" class="ui-table__spacer" :style="{ height: topSpacerHeight + 'px' }" aria-hidden="true">
+            <td class="ui-table__spacer-cell" :colspan="totalColumns" />
+          </tr>
+          <tr
+            v-for="(record, i) in renderRows"
+            :key="getRowKey(record, rowIndex(i))"
+            :class="[
+              'ui-table__row',
+              'ui-table__row--body',
+              isSelected(record, rowIndex(i)) && 'ui-table__row--selected'
+            ]"
+            :style="{ height: toCssSize(rowHeight) }"
+            v-bind="customRow ? customRow(record, rowIndex(i)) : {}"
+            @click="hasSelection ? onRowClick(record, rowIndex(i), $event) : undefined"
+          >
+            <td
+              v-if="hasSelection"
+              class="ui-table__cell ui-table__td ui-table__cell--selection"
+              @click.stop="onSelectionCellClick(record, rowIndex(i), $event)"
+            >
+              <WkCheckbox :checked="isSelected(record, rowIndex(i))" />
+            </td>
+            <td
+              v-for="col in columns"
+              :key="colKey(col)"
+              :class="[
+                'ui-table__cell',
+                'ui-table__td',
+                `ui-table__cell--${alignOf(col)}`,
+                col.ellipsis && 'ui-table__cell--ellipsis'
+              ]"
+              :style="colStyle(col)"
+            >
+              <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="rowIndex(i)">{{
+                cellText(col, record)
+              }}</slot>
+            </td>
+          </tr>
+          <!-- Bottom spacer reserves the height of the rows below the window. -->
+          <tr
+            v-if="isVirtual"
+            class="ui-table__spacer"
+            :style="{ height: bottomSpacerHeight + 'px' }"
+            aria-hidden="true"
+          >
+            <td class="ui-table__spacer-cell" :colspan="totalColumns" />
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import WkCheckbox from '../checkbox/Checkbox.vue'
+import WkEmpty from '../empty/Empty.vue'
+import WkiArrowUp from '../../icons/ArrowUp.vue'
+import WkiArrowDown from '../../icons/ArrowDown.vue'
+import WkiArrowDownUp from '../../icons/ArrowDownUp.vue'
+import { toCssSize } from '../../utils/common'
+import { computeVirtualWindow } from '../../utils/virtualScroll'
+
+function defaultCompare(a, b) {
+  if (a == null && b == null) return 0
+  if (a == null) return -1
+  if (b == null) return 1
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a).localeCompare(String(b))
+}
+
+export default {
+  name: 'Table',
+  components: { WkCheckbox, WkEmpty, WkiArrowUp, WkiArrowDown, WkiArrowDownUp },
+  props: {
+    // Column descriptors: { title, dataIndex, key?, width?, align?, sorter?, ellipsis? }
+    columns: { type: Array, default: () => [] },
+    // Row records. Each record should expose a stable key (see rowKey).
+    dataSource: { type: Array, default: () => [] },
+    // How to derive a row's key: a record field name, or a function (record) => key.
+    rowKey: { type: [String, Function], default: 'key' },
+    // Outer border + vertical column dividers.
+    bordered: { type: Boolean, default: false },
+    // Render a leading checkbox column for row selection.
+    rowSelection: { type: Boolean, default: false },
+    // Controlled selection — array of selected row keys.
+    selectedRowKeys: { type: Array, default: () => [] },
+    // Placeholder shown when dataSource is empty.
+    emptyText: { type: String, default: 'No data' },
+    // Fixed scroll viewport: { x, y } as px (number) or any CSS size (string).
+    // x sets the table min-width (horizontal scroll); y caps the body height (vertical scroll + sticky header).
+    scroll: { type: Object, default: null },
+    // Fixed overall height of the table viewport (px number or CSS size). Enables vertical scroll + sticky header.
+    height: { type: [Number, String], default: null },
+    rowHeight: { type: [Number, String], default: 39 },
+    headerHeight: { type: [Number, String], default: 39 },
+    customRow: { type: Function, default: null },
+    customHeader: { type: Function, default: null },
+    // Virtualize the body: render only the rows visible in the viewport (+ overscan).
+    // Requires a vertical-scroll viewport (height or scroll.y) and a numeric rowHeight.
+    virtual: { type: Boolean, default: false },
+    // Extra rows rendered above and below the viewport to cushion fast scrolling.
+    overscan: { type: Number, default: 8 }
+  },
+  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change'],
+  data() {
+    return {
+      sortField: null,
+      sortOrder: null,
+      internalSelected: this.selectedRowKeys.slice(),
+      scrollbarWidth: 0,
+      colWidths: [],
+      lastClickedIndex: null,
+      scrollTop: 0,
+      containerHeight: 0,
+      rafId: null,
+      toCssSize
+    }
+  },
+  computed: {
+    hasSelection() {
+      return !!this.rowSelection
+    },
+    totalColumns() {
+      return this.columns.length + (this.hasSelection ? 1 : 0)
+    },
+    rows() {
+      const data = this.dataSource.slice()
+      if (!this.sortField || !this.sortOrder) return data
+      const col = this.columns.find(c => this.fieldOf(c) === this.sortField)
+      if (!col || !col.sorter) return data
+      const cmp =
+        typeof col.sorter === 'function' ? col.sorter : (a, b) => defaultCompare(a[this.sortField], b[this.sortField])
+      data.sort(cmp)
+      if (this.sortOrder === 'descend') data.reverse()
+      return data
+    },
+    allSelected() {
+      if (!this.rows.length) return false
+      return this.rows.every((record, index) => this.internalSelected.includes(this.getRowKey(record, index)))
+    },
+    hasVerticalScroll() {
+      return this.height != null || !!(this.scroll && this.scroll.y != null)
+    },
+    containerStyle() {
+      const scroll = this.scroll || {}
+      return scroll.x != null ? { overflowX: 'auto' } : {}
+    },
+    bodyStyle() {
+      const scroll = this.scroll || {}
+      if (this.height != null) return { height: toCssSize(this.height) }
+      if (scroll.y != null) return { maxHeight: toCssSize(scroll.y) }
+      return {}
+    },
+    tableStyle() {
+      const scroll = this.scroll || {}
+      return scroll.x != null ? { minWidth: toCssSize(scroll.x) } : {}
+    },
+    // Numeric row height — virtualization needs a fixed px value. String sizes are
+    // parsed (e.g. '40px' -> 40); anything unparseable falls back to the prop default.
+    rowHeightPx() {
+      if (typeof this.rowHeight === 'number') return this.rowHeight
+      const parsed = parseFloat(this.rowHeight)
+      return Number.isFinite(parsed) ? parsed : 39
+    },
+    // Virtualization is only meaningful inside a bounded, scrollable viewport.
+    isVirtual() {
+      return this.virtual && this.hasVerticalScroll && this.rows.length > 0
+    },
+    virtualWindow() {
+      return computeVirtualWindow({
+        scrollTop: this.scrollTop,
+        rowHeight: this.rowHeightPx,
+        containerHeight: this.containerHeight,
+        total: this.rows.length,
+        overscan: this.overscan
+      })
+    },
+    // Rows actually committed to the DOM: a slice when virtual, otherwise everything.
+    renderRows() {
+      if (!this.isVirtual) return this.rows
+      return this.rows.slice(this.virtualWindow.startIndex, this.virtualWindow.endIndex)
+    },
+    topSpacerHeight() {
+      return this.isVirtual ? this.virtualWindow.offsetY : 0
+    },
+    bottomSpacerHeight() {
+      if (!this.isVirtual) return 0
+      const rendered = this.renderRows.length * this.rowHeightPx
+      return Math.max(0, this.virtualWindow.totalHeight - this.virtualWindow.offsetY - rendered)
+    }
+  },
+  watch: {
+    selectedRowKeys(next) {
+      this.internalSelected = (next || []).slice()
+    }
+  },
+  mounted() {
+    this.$nextTick(this.syncScrollbarGutter)
+    window.addEventListener('resize', this.onResize)
+  },
+  updated() {
+    this.$nextTick(this.syncScrollbarGutter)
+  },
+  // Declare both teardown hooks: Vue 2.7 fires beforeDestroy, Vue 3.4 fires beforeUnmount.
+  // The runtime that doesn't recognize a hook simply ignores it.
+  beforeUnmount() {
+    this.teardown()
+  },
+  methods: {
+    teardown() {
+      window.removeEventListener('resize', this.onResize)
+      if (this.rafId != null) {
+        cancelAnimationFrame(this.rafId)
+        this.rafId = null
+      }
+    },
+    onResize() {
+      this.syncScrollbarGutter()
+    },
+    onBodyScroll(e) {
+      const top = e.target.scrollTop
+      // Coalesce bursts of scroll events into a single state update per frame so we
+      // re-slice at most once per repaint — keeps 10k+ rows smooth.
+      if (this.rafId != null) return
+      this.rafId = requestAnimationFrame(() => {
+        this.rafId = null
+        this.scrollTop = top
+      })
+    },
+    // Absolute index of a rendered row within the full (sorted) dataset.
+    rowIndex(i) {
+      return this.isVirtual ? this.virtualWindow.startIndex + i : i
+    },
+    syncScrollbarGutter() {
+      if (!this.$el) return
+      const body = this.$el.querySelector('.ui-table__body')
+      this.scrollbarWidth = body && this.hasVerticalScroll ? body.offsetWidth - body.clientWidth : 0
+      if (body && this.hasVerticalScroll) {
+        this.containerHeight = body.clientHeight
+      }
+
+      if (this.hasVerticalScroll) {
+        const firstRow = this.$el.querySelector('.ui-table__row--body')
+        if (firstRow) {
+          const cells = Array.from(firstRow.children)
+          const widths = cells.map(c => c.getBoundingClientRect().width)
+          const changed =
+            widths.length !== this.colWidths.length ||
+            widths.some((w, i) => Math.abs(w - (this.colWidths[i] || 0)) > 0.1)
+          if (changed) {
+            this.colWidths = widths
+          }
+        } else if (this.colWidths.length) {
+          this.colWidths = []
+        }
+      } else if (this.colWidths.length) {
+        this.colWidths = []
+      }
+    },
+    headCellStyle(index, col = null) {
+      if (this.hasVerticalScroll && this.colWidths[index] !== undefined) {
+        return { width: `${this.colWidths[index]}px` }
+      }
+      return col ? this.colStyle(col) : {}
+    },
+    fieldOf(col) {
+      return col.dataIndex != null ? col.dataIndex : col.key
+    },
+    colKey(col) {
+      return col.key != null ? col.key : col.dataIndex
+    },
+    colStyle(col) {
+      if (col.width == null) return {}
+      return { width: typeof col.width === 'number' ? `${col.width}px` : col.width }
+    },
+    alignOf(col) {
+      return ['left', 'right', 'center'].includes(col.align) ? col.align : 'left'
+    },
+    cellText(col, record) {
+      const field = this.fieldOf(col)
+      return field != null ? record[field] : ''
+    },
+    isSortable(col) {
+      return !!col.sorter
+    },
+    sortStateOf(col) {
+      return this.sortField === this.fieldOf(col) ? this.sortOrder : null
+    },
+    ariaSort(col) {
+      const state = this.sortStateOf(col)
+      if (state === 'ascend') return 'ascending'
+      if (state === 'descend') return 'descending'
+      return undefined
+    },
+    onHeaderClick(col) {
+      if (!this.isSortable(col)) return
+      const field = this.fieldOf(col)
+      let order
+      if (this.sortField !== field) {
+        order = 'ascend'
+      } else {
+        order = this.sortOrder === 'ascend' ? 'descend' : this.sortOrder === 'descend' ? null : 'ascend'
+      }
+      this.sortField = order ? field : null
+      this.sortOrder = order
+      const payload = { field: this.sortField, order }
+      this.$emit('sort-change', payload)
+      this.$emit('change', { sorter: payload })
+    },
+    getRowKey(record, index) {
+      if (typeof this.rowKey === 'function') return this.rowKey(record)
+      const key = record[this.rowKey]
+      return key != null ? key : index
+    },
+    isSelected(record, index) {
+      return this.internalSelected.includes(this.getRowKey(record, index))
+    },
+    emitSelection() {
+      const keys = this.internalSelected.slice()
+      const selectedRows = this.dataSource.filter((record, index) => keys.includes(this.getRowKey(record, index)))
+      this.$emit('update:selectedRowKeys', keys)
+      this.$emit('selection-change', keys, selectedRows)
+    },
+    handleSelection(record, index, checked, e) {
+      const isShiftKey = e && e.shiftKey
+
+      if (isShiftKey && this.lastClickedIndex != null) {
+        // Shift+click: select range from lastClickedIndex to current index
+        const start = Math.min(this.lastClickedIndex, index)
+        const end = Math.max(this.lastClickedIndex, index)
+        const rangeKeys = []
+        for (let i = start; i <= end; i++) {
+          rangeKeys.push(this.getRowKey(this.rows[i], i))
+        }
+        // Merge with existing selection (union)
+        const set = new Set(this.internalSelected)
+        rangeKeys.forEach(k => set.add(k))
+        this.internalSelected = Array.from(set)
+      } else {
+        // Normal click / Cmd+click: toggle individual row
+        const key = this.getRowKey(record, index)
+        const set = this.internalSelected.filter(k => k !== key)
+        if (checked) set.push(key)
+        this.internalSelected = set
+      }
+      this.lastClickedIndex = index
+      this.emitSelection()
+    },
+    onSelectionCellClick(record, index, e) {
+      // Click on the checkbox <td> — MouseEvent has modifier keys
+      const currentlySelected = this.isSelected(record, index)
+      this.handleSelection(record, index, !currentlySelected, e)
+    },
+    onRowClick(record, index, e) {
+      // Click on the row body — handle Shift/Cmd selection
+      const isMetaKey = e.metaKey || e.ctrlKey
+      const isShiftKey = e.shiftKey
+      if (!isMetaKey && !isShiftKey) return
+      const key = this.getRowKey(record, index)
+      const currentlySelected = this.internalSelected.includes(key)
+      this.handleSelection(record, index, !currentlySelected, e)
+    },
+    onToggleAll(checked) {
+      this.internalSelected = checked ? this.rows.map((record, index) => this.getRowKey(record, index)) : []
+      this.emitSelection()
+    }
+  }
+}
+</script>
+
+<style src="./table.css" scoped></style>

package/src/components/table/table.css

@@ -0,0 +1,216 @@
+.ui-table {
+  width: 100%;
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+}
+
+.ui-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.ui-table__col--selection {
+  width: 1%;
+}
+
+/* ---------- Cells ---------- */
+.ui-table__cell {
+  padding: var(--spacing-xs);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ui-table__cell--right {
+  text-align: right;
+}
+
+.ui-table__cell--center {
+  text-align: center;
+}
+
+.ui-table__cell--ellipsis {
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ui-table__cell--selection {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+/* ---------- Header ---------- */
+.ui-table__th {
+  background: var(--secondary-bg);
+  font-weight: var(--paragraph-medium-font-weight);
+  white-space: nowrap;
+}
+
+.ui-table__th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  max-width: 100%;
+}
+
+.ui-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.ui-table__th--sortable:hover {
+  background: var(--accent-2);
+}
+
+.ui-table__th--sortable:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--focus-ring);
+}
+
+.ui-table__sort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--muted-fg);
+}
+
+.ui-table__sort--inactive {
+  opacity: 0.5;
+}
+
+.ui-table__sort--active {
+  opacity: 1;
+  color: var(--primary-fg);
+}
+
+/* ---------- Body ---------- */
+.ui-table__td {
+  background: var(--primary-bg);
+  font-weight: var(--paragraph-font-weight);
+}
+
+.ui-table__row--body {
+  transition: background-color 0.12s ease;
+}
+
+.ui-table__row--body:hover .ui-table__td {
+  background: var(--accent-bg);
+}
+
+.ui-table__row--selected .ui-table__td {
+  background: var(--secondary-bg);
+}
+
+/* ---------- Empty ---------- */
+.ui-table__empty-cell {
+  padding: var(--spacing-3xl) var(--spacing-xs);
+  text-align: center;
+}
+
+/* ---------- Bordered ---------- */
+.ui-table--bordered {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+  overflow: hidden;
+}
+
+.ui-table--bordered .ui-table__cell {
+  border-right: 1px solid var(--border-primary);
+}
+
+.ui-table--bordered .ui-table__cell:last-child {
+  border-right: none;
+}
+
+/* With a scrollbar spacer present, the last real header column is second-to-last. */
+.ui-table--bordered .ui-table__row--has-scrollbar .ui-table__cell:nth-last-child(2) {
+  border-right: none;
+}
+
+.ui-table--bordered .ui-table__row--body:last-child .ui-table__td {
+  border-bottom: none;
+}
+
+/* ---------- Scroll viewport (fixed header, scrollable body) ---------- */
+.ui-table--scroll-y .ui-table__table,
+.ui-table--scroll-y .ui-table__head,
+.ui-table--scroll-y .ui-table__body {
+  display: block;
+}
+
+/*
+ * Switch to separate borders in scroll mode so each cell owns its border width precisely.
+ * border-collapse: collapse splits shared borders by 0.5px, which causes the scrollbar
+ * spacer <th> to be off by 1px. separate + border-spacing: 0 is visually identical
+ * (cells only have border-bottom and border-right, never border-top/left) but width-exact.
+ */
+.ui-table--scroll-y .ui-table__table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* Each row becomes its own fixed-layout table so header and body columns line up. */
+.ui-table--scroll-y .ui-table__row {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* The body is the actual scroll area; the header above it stays put. */
+.ui-table--scroll-y .ui-table__body {
+  overflow-y: auto;
+}
+
+.ui-table__body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ui-table__body::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 3px;
+}
+
+.ui-table--scroll-y .ui-table__head {
+  overflow: hidden;
+}
+
+.ui-table__th--scrollbar {
+  padding: 0;
+  border: none;
+  background: var(--secondary-bg);
+  border-bottom: 1px solid var(--border-primary);
+  box-sizing: border-box;
+}
+
+.ui-table--scroll-y .ui-table__cell--selection {
+  width: 44px;
+}
+
+/* ---------- Virtual scroll spacers ---------- */
+/*
+ * Spacer rows reserve the scroll height of the off-window rows. They must paint
+ * nothing (no border/padding/background) so the row-height math stays exact, and
+ * are display:block so their inline height is honored verbatim inside the
+ * block-level scrolling tbody (the real rows are display:table; table-layout:fixed).
+ */
+.ui-table__spacer {
+  display: block;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.ui-table__spacer-cell {
+  padding: 0;
+  border: none;
+}

package/src/components/tag/tag.css

@@ -1,7 +1,7 @@
 .ui-tag {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-6);
   padding: var(--spacing-3xs) var(--spacing-xs);
   border-radius: var(--rounded-lg);
   font-family: var(--font-family-body);
@@ -35,6 +35,10 @@
 /* — sizes — */
 /* sm: mini font, 6px radius, 2px 8px padding — same as base */
 
+.ui-tag--sm {
+  gap: var(--spacing-2xs);
+}
+
 .ui-tag--md {
   border-radius: var(--radius);
   font-size: var(--paragraph-small-font-size);

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,111 @@
+<template>
+  <span
+    :class="[
+      'ui-textarea',
+      `ui-textarea--size-${size}`,
+      `ui-textarea--round-${roundness}`,
+      error && 'ui-textarea--error',
+      disabled && 'ui-textarea--disabled',
+      $attrs.class
+    ]"
+  >
+    <textarea
+      ref="textarea"
+      class="ui-textarea__field"
+      :class="{ 'ui-textarea__field--no-resize': !resizable || autosize }"
+      :value="currentValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :name="name"
+      :rows="rows"
+      :maxlength="maxLength"
+      v-bind="{ ...$attrs, class: undefined }"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    ></textarea>
+    <span v-if="showCounter" class="ui-textarea__counter"
+      >{{ charCount }}<template v-if="maxLength !== undefined"> / {{ maxLength }}</template></span
+    >
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Textarea',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'mini'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
+    },
+    value: { type: [String, Number], default: '' },
+    modelValue: { type: [String, Number], default: undefined },
+    placeholder: { type: String, default: '' },
+    name: { type: String, default: '' },
+    rows: { type: [String, Number], default: 3 },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    resizable: { type: Boolean, default: true },
+    autosize: { type: Boolean, default: false },
+    showCount: { type: Boolean, default: false },
+    maxLength: { type: Number, default: undefined }
+  },
+  emits: ['input', 'change', 'update:modelValue', 'focus', 'blur'],
+  computed: {
+    currentValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value
+    },
+    charCount() {
+      return String(this.currentValue).length
+    },
+    showCounter() {
+      return this.showCount || this.maxLength !== undefined
+    }
+  },
+  watch: {
+    currentValue() {
+      this.$nextTick(this.resize)
+    }
+  },
+  mounted() {
+    this.$nextTick(this.resize)
+  },
+  methods: {
+    focus() {
+      if (this.$refs.textarea) this.$refs.textarea.focus()
+    },
+    blur() {
+      if (this.$refs.textarea) this.$refs.textarea.blur()
+    },
+    resize() {
+      if (!this.autosize || !this.$refs.textarea) return
+      const el = this.$refs.textarea
+      el.style.height = 'auto'
+      el.style.height = el.scrollHeight + 'px'
+    },
+    onInput(e) {
+      const next = e.target.value
+      this.$emit('input', next)
+      this.$emit('update:modelValue', next)
+      this.$emit('change', next, e)
+    },
+    onFocus(e) {
+      this.$emit('focus', e.target.value, e)
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value, e)
+    }
+  }
+}
+</script>
+
+<style src="./textarea.css" scoped></style>

package/src/components/textarea/textarea.css

@@ -0,0 +1,121 @@
+.ui-textarea {
+  display: block;
+  width: 100%;
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+  box-sizing: border-box;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+/* Roundness — Round uses an 18px corner for both sizes; Default tracks size. */
+.ui-textarea--round-default.ui-textarea--size-default {
+  border-radius: var(--rounded-xl);
+}
+
+.ui-textarea--round-default.ui-textarea--size-mini {
+  border-radius: var(--radius);
+}
+
+.ui-textarea--round-round {
+  border-radius: var(--radius-18);
+}
+
+/* Focus (interactive) — wrapper highlights when the field is focused. */
+.ui-textarea:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus-ring);
+}
+
+/* Error (logical) — red border, no base shadow. */
+.ui-textarea--error {
+  border-color: var(--destructive-border);
+  box-shadow: none;
+}
+
+.ui-textarea--error:focus-within {
+  border-color: var(--destructive-border);
+  box-shadow: var(--shadow-focus-ring-error);
+}
+
+/* Disabled — visual only; cursor handled by the inner field. */
+.ui-textarea--disabled {
+  opacity: 0.5;
+}
+
+.ui-textarea--disabled:focus-within {
+  border-color: var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* The native textarea — strips browser chrome and inherits typography. */
+.ui-textarea__counter {
+  display: block;
+  text-align: right;
+  padding: 0 var(--spacing-xs) var(--spacing-xs);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  color: var(--muted-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.ui-textarea--size-mini .ui-textarea__counter {
+  padding: 0 var(--spacing-6) var(--spacing-6);
+}
+
+.ui-textarea__field {
+  display: block;
+  width: 100%;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.ui-textarea__field--no-resize {
+  resize: none;
+}
+
+.ui-textarea--size-default .ui-textarea__field {
+  min-height: 60px;
+  padding: var(--spacing-xs);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+}
+
+.ui-textarea--size-mini .ui-textarea__field {
+  min-height: 48px;
+  padding: var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
+/* Round nudges the text off the larger corner (matches Figma insets). */
+.ui-textarea--round-round.ui-textarea--size-default .ui-textarea__field {
+  padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+}
+
+.ui-textarea--round-round.ui-textarea--size-mini .ui-textarea__field {
+  padding: var(--spacing-10) var(--spacing-xs) var(--spacing-xs) var(--spacing-10);
+}
+
+.ui-textarea__field::placeholder {
+  color: var(--muted-fg);
+  opacity: 1;
+}
+
+.ui-textarea__field:disabled {
+  cursor: not-allowed;
+}

package/src/components/typography/Typography.vue

@@ -75,8 +75,7 @@ export default {
     },
     color: {
       type: String,
-      default: '',
-      validator: v => COLORS.indexOf(v) !== -1
+      default: ''
     },
     align: {
       type: String,
@@ -95,7 +94,10 @@ export default {
     },
     rootStyle() {
       if (!this.color) return null
-      return { '--ui-typography-color': 'var(--' + this.color + ')' }
+      if (COLORS.includes(this.color)) {
+        return { '--ui-typography-color': 'var(--' + this.color + ')' }
+      }
+      return { '--ui-typography-color': this.color }
     }
   }
 }

package/src/floating/focus-mixin.js

@@ -28,6 +28,11 @@ export default {
         document.contains &&
         document.contains(t)
       ) {
+        // Skip restore if the user has already focused another element (e.g. clicked a different input
+        // while the close animation was running). Only restore when focus fell back to body/html,
+        // which happens when the floating panel itself held focus and then disappeared.
+        const active = document.activeElement
+        if (active && active !== document.body && active !== document.documentElement) return
         t.focus()
       }
     }

package/src/icons/ClippingMask.vue

@@ -0,0 +1,56 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.4203 4.82946C18.1574 4.82946 22.0111 8.68328 22.0112 13.4203C22.0112 18.1574 18.1574 22.0112 13.4203 22.0112C8.68326 22.0111 4.82946 18.1574 4.82946 13.4203C4.82951 8.68331 8.6833 4.82951 13.4203 4.82946ZM15.6194 14.8406C15.6194 15.2707 15.2707 15.6194 14.8406 15.6194H6.74129C7.66689 18.4238 10.3101 20.4535 13.4203 20.4536C17.2986 20.4536 20.4536 17.2986 20.4536 13.4203C20.4535 10.3102 18.4238 7.6669 15.6194 6.74129V14.8406ZM6.5558 11.9183C6.44868 12.4033 6.38705 12.9044 6.38704 13.4203C6.38704 13.6365 6.39852 13.8504 6.41785 14.0618H8.69932L6.5558 11.9183ZM7.93057 9.03147C7.62082 9.41901 7.35486 9.84227 7.13102 10.2911L10.9018 14.0618H12.9609L7.93057 9.03147ZM10.2911 7.13103C9.84223 7.35488 9.41836 7.62013 9.0308 7.92991L14.0618 12.9609V10.9018L10.2911 7.13103ZM13.4203 6.38705C12.9044 6.38706 12.4033 6.44869 11.9183 6.5558L14.0618 8.69933V6.41719C13.8504 6.39786 13.6365 6.38705 13.4203 6.38705Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 12.6415C3.19754 12.6417 3.54637 12.9904 3.54642 13.4203V14.0618H4.28705L4.2924 14.1254C4.32931 14.607 4.40392 15.0769 4.51271 15.535L4.5328 15.6194H2.76763C2.33755 15.6194 1.98883 15.2707 1.98883 14.8406V13.4203C1.98888 12.9903 2.33758 12.6415 2.76763 12.6415Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 9.0904C3.19751 9.09056 3.54632 9.4393 3.54642 9.8692V11.2895C3.54642 11.7195 3.19757 12.0681 2.76763 12.0683C2.33755 12.0683 1.98883 11.7196 1.98883 11.2895V9.8692C1.98893 9.4392 2.33761 9.0904 2.76763 9.0904Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.76763 5.53928C3.19748 5.53944 3.54627 5.88823 3.54642 6.31808V7.73906C3.54626 8.16891 3.19748 8.5177 2.76763 8.51786C2.33764 8.51786 1.98899 8.16901 1.98883 7.73906V6.31808C1.98899 5.88813 2.33764 5.53928 2.76763 5.53928Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.18794 1.98884C4.61793 1.98894 4.96673 2.33762 4.96673 2.76763C4.96658 3.19752 4.61783 3.54632 4.18794 3.54643H3.54642V4.18795C3.54632 4.61784 3.19751 4.96659 2.76763 4.96674C2.33761 4.96674 1.98893 4.61794 1.98883 4.18795V2.76763C1.98883 2.33755 2.33755 1.98884 2.76763 1.98884H4.18794Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.8406 1.98884C15.2707 1.98884 15.6194 2.33755 15.6194 2.76763V4.53281L15.535 4.51272C15.0769 4.40392 14.607 4.32932 14.1254 4.29241L14.0618 4.28705V3.54643H13.4203C12.9904 3.54638 12.6417 3.19755 12.6415 2.76763C12.6415 2.33759 12.9903 1.98889 13.4203 1.98884H14.8406Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.73905 1.98884C8.169 1.989 8.51785 2.33765 8.51785 2.76763C8.51769 3.19748 8.1689 3.54627 7.73905 3.54643H6.31807C5.88822 3.54628 5.53943 3.19749 5.53928 2.76763C5.53928 2.33765 5.88812 1.98899 6.31807 1.98884H7.73905Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.2895 1.98884C11.7196 1.98884 12.0683 2.33755 12.0683 2.76763C12.0681 3.19758 11.7195 3.54643 11.2895 3.54643H9.86919C9.4393 3.54632 9.09055 3.19751 9.09039 2.76763C9.09039 2.33762 9.4392 1.98895 9.86919 1.98884H11.2895Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'GenerateImage',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1736,4 +1736,5 @@ export { default as WkiLayersDown } from './LayersDown.vue'
 export { default as WkiLayersUpToTop } from './LayersUpToTop.vue'
 export { default as WkiLayersDownToBottom } from './LayersDownToBottom.vue'
 export { default as WkiGeneratePrompt } from './GeneratePrompt.vue'
+export { default as WkiClippingMask } from './ClippingMask.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/index.js

@@ -31,8 +31,10 @@ export { default as WkSlider } from './components/slider/Slider.vue'
 export { default as WkSpinner } from './components/spinner/Spinner.vue'
 export { default as WkSwitch } from './components/switch/Switch.vue'
 export { default as WkSwitchGroup } from './components/switch-group/SwitchGroup.vue'
+export { default as WkTable } from './components/table/Table.vue'
 export { default as WkTabs } from './components/tabs/Tabs.vue'
 export { default as WkTag } from './components/tag/Tag.vue'
+export { default as WkTextarea } from './components/textarea/Textarea.vue'
 export { default as WkToggle } from './components/toggle/Toggle.vue'
 export { default as WkToggleGroup } from './components/toggle-group/ToggleGroup.vue'
 export { default as WkTooltip } from './components/tooltip/Tooltip.vue'

package/src/styles/border_radius.css

@@ -7,6 +7,7 @@
   --radius-10: 10px;
   --radius-12: 12px;
   --radius-16: 16px;
+  --radius-18: 18px;
   --radius-24: 24px;
   --radius-infinite: 9999px;
 

package/src/utils/common.js

@@ -0,0 +1,4 @@
+export const toCssSize = v => {
+  if (v == null) return undefined
+  return typeof v === 'number' ? `${v}px` : v
+}

package/src/utils/virtualScroll.js

@@ -0,0 +1,37 @@
+/**
+ * Framework-agnostic virtual-scroll window calculator.
+ *
+ * Given the current scroll position and a fixed row height, returns the slice of
+ * rows that should be rendered (plus an overscan buffer) and the vertical offset
+ * needed to position them. Kept as a pure function — no Vue, no DOM — so it works
+ * under both Vue 2.7 and Vue 3.4 Options API (the library bans the Composition API)
+ * and can be unit-tested in isolation.
+ *
+ * @param {Object}  o
+ * @param {number}  o.scrollTop        Current scrollTop of the scroll container (px).
+ * @param {number}  o.rowHeight        Fixed height of a single row (px).
+ * @param {number}  o.containerHeight  Visible height of the scroll viewport (px).
+ * @param {number}  o.total            Total number of rows in the dataset.
+ * @param {number}  o.overscan         Extra rows rendered above/below the viewport.
+ * @returns {{ startIndex: number, endIndex: number, offsetY: number,
+ *            totalHeight: number, visibleCount: number }}
+ */
+export function computeVirtualWindow({ scrollTop, rowHeight, containerHeight, total, overscan }) {
+  const rh = rowHeight > 0 ? rowHeight : 0
+  const over = overscan > 0 ? overscan : 0
+  const count = total > 0 ? total : 0
+
+  // Rows that fit in the viewport. Guard rowHeight=0 to avoid Infinity/NaN.
+  const visibleCount = rh > 0 ? Math.max(1, Math.ceil(containerHeight / rh)) : count
+
+  const startIndex = rh > 0 ? Math.max(0, Math.floor(scrollTop / rh) - over) : 0
+  const endIndex = Math.min(count, startIndex + visibleCount + over * 2)
+
+  return {
+    startIndex,
+    endIndex,
+    offsetY: startIndex * rh,
+    totalHeight: count * rh,
+    visibleCount
+  }
+}