@softov/scena 0.1.2

package/dist/ui/control/TextField.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import { Checks } from './Checks.js';
+import { ControlLabel, ControlHint, ControlError } from './_field-parts.js';
+import './TextField.css';
+// function getClearId(id?: string, label?: string): string {
+//   const base = id ?? label ?? Math.random().toString(16).slice(2, 8);
+//   return base.replace(/[^a-zA-Z0-9_-]/g, '');
+// }
+// Bidirectional: pushes user input through useWriteBack('value'). When
+// `value` resolved from a DataBinding, the write-back lands in the store
+// and the next render reflects it. When `value` was a literal, write-back
+// silently no-ops and the field keeps its internal state.
+export function TextField({ 
+// id: idProps,
+value, defaultValue, placeholder, label, type = 'text', disabled, readOnly, multiline, rows = 3, min, max, checks, weight, hint, error, required, typeTag, onChange: onChangeProp, }) {
+    // const id = `oo-${getClearId(idProps, label)}`;
+    const id = useId();
+    const writeValue = useWriteBack('value');
+    const [internal, setInternal] = useState(value ?? defaultValue ?? '');
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function onChange(e) {
+        const next = e.currentTarget.value;
+        setInternal(next);
+        writeValue(next);
+        onChangeProp?.(next);
+    }
+    const wrapperStyle = weightStyle(weight);
+    return (_jsxs("label", { className: "oo-field", htmlFor: id, style: wrapperStyle, children: [_jsx(ControlLabel, { label: label, required: required, typeTag: typeTag }), _jsx(ControlHint, { text: hint }), _jsx("div", { className: "oo-control", children: multiline ? (_jsx("textarea", { id: id, className: "oo-textarea", value: internal, placeholder: placeholder, disabled: disabled, readOnly: readOnly, rows: rows, onChange: onChange })) : (_jsx("input", { id: id, className: "oo-input", type: type, value: internal, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, min: type === 'number' ? min : undefined, max: type === 'number' ? max : undefined })) }), _jsx(ControlError, { text: error }), _jsx(Checks, { checks: checks })] }));
+}

package/dist/ui/control/_field-parts.css

@@ -0,0 +1,102 @@
+.oo-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--oo-spacing-xs);
+}
+
+/* Field chrome shared by controls. The base .oo-field / .oo-field__label live
+   in the control CSS; these are the additions for required / type / hint /
+   error so every control renders the same field metadata. */
+
+.oo-field__label {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--oo-spacing-xs);
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-text);
+  font-weight: 600;
+}
+.oo-field__required {
+  color: var(--oo-color-danger);
+  font-size: var(--oo-font-size-xs);
+  font-weight: 700;
+}
+.oo-field__type {
+  color: var(--oo-color-muted);
+  font-family: var(--oo-font-mono);
+  font-size: var(--oo-font-size-xs);
+}
+.oo-field__hint {
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-muted);
+  line-height: 1.5;
+}
+.oo-field__error {
+  font-size: var(--oo-font-size-xs);
+  color: var(--oo-color-danger);
+  line-height: 1.4;
+}
+
+
+.oo-input,
+.oo-textarea {
+  width: 100%;
+}
+
+
+.oo-textarea {
+  resize: vertical;
+}
+
+.oo-control {
+  position: relative;
+  border-radius: var(--input-border-radius);
+  padding: 1px;
+}
+
+/* Loading state */
+.oo-form[data-loading='true'] {
+  pointer-events: none;
+}
+
+/* Moving light around input/select borders */
+.oo-form[data-loading='true'] .oo-control {
+  background:
+    conic-gradient(from var(--oo-angle),
+      rgb(var(--load-border)) 0deg,
+      rgb(var(--load-border)) 70deg,
+      rgb(var(--load-accent) / 0.25) 95deg,
+      rgb(var(--load-accent-2)) 120deg,
+      rgb(var(--load-accent) / 0.25) 145deg,
+      rgb(var(--load-border)) 180deg,
+      rgb(var(--load-border)) 360deg);
+  animation: oo-border-orbit 1.4s linear infinite;
+}
+
+.oo-form[data-loading='true'] .oo-control::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  z-index: -1;
+  border-radius: 14px;
+  background:
+    conic-gradient(from var(--oo-angle),
+      transparent,
+      rgb(var(--load-accent) / 0.32),
+      transparent 35%);
+  filter: blur(8px);
+  opacity: 0.65;
+  animation: oo-border-orbit 1.4s linear infinite;
+}
+
+@property --oo-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes oo-border-orbit {
+  to {
+    --oo-angle: 360deg;
+  }
+}

package/dist/ui/control/_field-parts.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import './_field-parts.css';
+export interface ControlLabelProps {
+    label?: string;
+    required?: boolean;
+    typeTag?: string;
+    extra?: ReactNode;
+}
+export declare function ControlLabel({ label, required, typeTag, extra }: ControlLabelProps): import("react").JSX.Element | null;
+export declare function ControlHint({ text }: {
+    text?: string;
+}): import("react").JSX.Element | null;
+export declare function ControlError({ text }: {
+    text?: string;
+}): import("react").JSX.Element | null;

package/dist/ui/control/_field-parts.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './_field-parts.css';
+export function ControlLabel({ label, required, typeTag, extra }) {
+    if (!label && !extra)
+        return null;
+    return (_jsxs("span", { className: "oo-field__label", children: [label, required ? _jsx("span", { className: "oo-field__required", children: "*" }) : null, typeTag ? _jsx("span", { className: "oo-field__type", children: typeTag }) : null, extra] }));
+}
+export function ControlHint({ text }) {
+    if (!text)
+        return null;
+    return _jsx("span", { className: "oo-field__hint", children: text });
+}
+export function ControlError({ text }) {
+    if (!text)
+        return null;
+    return _jsx("span", { className: "oo-field__error", children: text });
+}

package/dist/ui/control/catalog.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDefinition } from '../../types/component-registry.js';
+export declare const CATALOG_CONTROLS_MAP: ComponentDefinition[];

package/dist/ui/control/catalog.js

@@ -0,0 +1,10 @@
+// Catalog registration for control components (dynamic import — no eager load).
+export const CATALOG_CONTROLS_MAP = [
+    { component: 'Button', category: 'inline', renderer: { kind: 'react', load: () => import('./Button.js').then((m) => ({ default: m.Button })) } },
+    { component: 'TextField', category: 'inline', renderer: { kind: 'react', load: () => import('./TextField.js').then((m) => ({ default: m.TextField })) } },
+    { component: 'CheckBox', category: 'inline', renderer: { kind: 'react', load: () => import('./CheckBox.js').then((m) => ({ default: m.CheckBox })) } },
+    { component: 'ChoicePicker', category: 'inline', renderer: { kind: 'react', load: () => import('./ChoicePicker.js').then((m) => ({ default: m.ChoicePicker })) } },
+    { component: 'Slider', category: 'inline', renderer: { kind: 'react', load: () => import('./Slider.js').then((m) => ({ default: m.Slider })) } },
+    { component: 'DateTimeInput', category: 'inline', renderer: { kind: 'react', load: () => import('./DateTimeInput.js').then((m) => ({ default: m.DateTimeInput })) } },
+    { component: 'LocaleToggle', category: 'inline', renderer: { kind: 'react', load: () => import('./LocaleToggle.js').then((m) => ({ default: m.LocaleToggle })) } },
+];

package/dist/ui/control/index.d.ts

@@ -0,0 +1,13 @@
+export { Button } from './Button.js';
+export { ReloadButton } from './ReloadButton.js';
+export type { ReloadButtonProps } from './ReloadButton.js';
+export { TextField } from './TextField.js';
+export { CheckBox } from './CheckBox.js';
+export { ChoicePicker } from './ChoicePicker.js';
+export type { ChoiceOption } from './ChoicePicker.js';
+export { Slider } from './Slider.js';
+export { DateTimeInput } from './DateTimeInput.js';
+export { Checks } from './Checks.js';
+export type { CheckRuleResolved, ChecksProps } from './Checks.js';
+export { LocaleToggle } from './LocaleToggle.js';
+export type { LocaleToggleProps, LocaleToggleDisplay } from './LocaleToggle.js';

package/dist/ui/control/index.js

@@ -0,0 +1,11 @@
+// Direct-React re-exports for the control components. The catalog registration
+// (dynamic-import) lives in ../catalog.ts so booting never loads these.
+export { Button } from './Button.js';
+export { ReloadButton } from './ReloadButton.js';
+export { TextField } from './TextField.js';
+export { CheckBox } from './CheckBox.js';
+export { ChoicePicker } from './ChoicePicker.js';
+export { Slider } from './Slider.js';
+export { DateTimeInput } from './DateTimeInput.js';
+export { Checks } from './Checks.js';
+export { LocaleToggle } from './LocaleToggle.js';

package/dist/ui/data/DataTable.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface DataColumn {
+    key: string;
+    label?: ReactNode;
+    width?: string;
+    align?: 'left' | 'right';
+}
+export type DataRow = Record<string, unknown>;
+export interface DataTableProps {
+    columns: DataColumn[];
+    rows: DataRow[];
+    rowKey?: string;
+    caption?: ReactNode;
+    selectedKey?: string | null;
+    onSelect?: (row: DataRow) => void;
+    onActivate?: (row: DataRow) => void;
+    emptyState?: ReactNode;
+}
+export declare function DataTable({ columns, rows, rowKey, caption, selectedKey, onSelect, onActivate, emptyState, }: DataTableProps): import("react").JSX.Element;

package/dist/ui/data/DataTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Listable } from './Listable.js';
+function formatCell(value) {
+    if (value == null)
+        return '';
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+}
+export function DataTable({ columns, rows, rowKey = 'id', caption, selectedKey, onSelect, onActivate, emptyState, }) {
+    const cols = columns.map((c) => ({
+        key: c.key,
+        label: c.label ?? c.key,
+        width: c.width,
+        align: c.align,
+        sortable: true,
+        render: (row) => formatCell(row[c.key]),
+    }));
+    return (_jsx(Listable, { items: rows, columns: cols, getKey: (row) => String(row[rowKey] ?? ''), title: caption, selectedKey: selectedKey, onSelect: onSelect, onActivate: onActivate, emptyState: emptyState }));
+}

package/dist/ui/data/Filter.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { WhereOp } from '../../types/query.js';
+export interface FilterField {
+    field: string;
+    label?: string;
+    op?: WhereOp;
+    value?: unknown;
+}
+export interface FilterProps {
+    namespace: string;
+    fields?: FilterField[];
+}
+export declare function Filter({ namespace, fields }: FilterProps): ReactNode;

package/dist/ui/data/Filter.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useScena } from '../../react/ScenaProvider.js';
+import { useStore } from '../../react/hooks/useStore.js';
+import { useI18n } from '../../react/hooks/useI18n.js';
+// Generic search + filter bar bound to a resource's query. Writes `q` and
+// `where[]` into `$/<ns>/query` (resetting page); the provider re-resolves the
+// view (server params or client-applied).
+export function Filter({ namespace, fields }) {
+    const scena = useScena();
+    const { t } = useI18n('query');
+    const query = useStore(`$/${namespace}/query`);
+    const where = query?.where ?? [];
+    const setQuery = (patch) => scena.store.set(`$/${namespace}/query`, {
+        ...(query ?? { page: 1, pageSize: 50 }),
+        ...patch,
+        page: 1,
+    });
+    const valueOf = (f) => f.value ?? true;
+    const isOn = (f) => where.some((w) => w.field === f.field && w.value === valueOf(f));
+    const toggle = (f) => {
+        const rest = where.filter((w) => w.field !== f.field);
+        const next = isOn(f)
+            ? rest
+            : [...rest, { field: f.field, op: f.op ?? 'eq', value: valueOf(f) }];
+        setQuery({ where: next });
+    };
+    return (_jsxs("div", { style: wrap, children: [_jsx("input", { style: input, placeholder: t('search', 'Search…'), value: query?.q ?? '', onChange: (e) => setQuery({ q: e.currentTarget.value }) }), fields?.length ? (_jsx("div", { style: chips, children: fields.map((f) => (_jsx("button", { type: "button", style: { ...chip, ...(isOn(f) ? chipOn : {}) }, onClick: () => toggle(f), children: f.label ?? f.field }, f.field))) })) : null] }));
+}
+const wrap = { display: 'flex', flexDirection: 'column', gap: 6, padding: 8 };
+const input = {
+    boxSizing: 'border-box',
+    width: '100%',
+    padding: '6px 8px',
+    background: 'var(--oo-color-canvas, #16181d)',
+    border: '1px solid var(--oo-color-border, #2b2f37)',
+    borderRadius: 4,
+    outline: 'none',
+    fontSize: 13,
+    color: 'var(--oo-color-text, #e6e8eb)',
+};
+const chips = { display: 'flex', flexWrap: 'wrap', gap: 4 };
+const chip = {
+    appearance: 'none',
+    border: '1px solid var(--oo-color-border, #2b2f37)',
+    background: 'none',
+    borderRadius: 999,
+    padding: '2px 8px',
+    fontSize: 11,
+    cursor: 'pointer',
+    color: 'var(--oo-color-muted, #8a8f98)',
+};
+const chipOn = {
+    color: '#fff',
+    background: 'var(--oo-color-accent, #4c7fff)',
+    borderColor: 'var(--oo-color-accent, #4c7fff)',
+};

package/dist/ui/data/List.css

@@ -0,0 +1,16 @@
+.oo-list {
+  display: flex;
+  gap: var(--oo-list-gap, var(--oo-spacing-sm));
+  padding: var(--oo-list-padding, 0);
+  box-sizing: border-box;
+}
+.oo-list[data-direction='vertical'] {
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.oo-list[data-direction='horizontal'] {
+  flex-direction: row;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

package/dist/ui/data/List.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type StyleAlign } from '../_utils.js';
+import './List.css';
+export type ListDirection = 'vertical' | 'horizontal';
+export interface ListProps {
+    children?: ReactNode;
+    direction?: ListDirection;
+    align?: StyleAlign;
+    weight?: number;
+    gap?: number | string;
+    padding?: number | string;
+    maxHeight?: number | string;
+    style?: CSSProperties;
+}
+export declare function List({ children, direction, align, weight, gap, padding, maxHeight, style, }: ListProps): import("react").JSX.Element;

package/dist/ui/data/List.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mapAlign, weightStyle } from '../_utils.js';
+import './List.css';
+// Vertical (or horizontal) scrolling container. a2ui spec children may be a
+// static id array OR a dynamic `{path, componentId}` — both arrive here as a
+// resolved ReactNode array because ViewMount.resolveProp expands
+// DynamicChildList upstream. List itself stays a thin container.
+export function List({ children, direction = 'vertical', align = 'stretch', weight, gap, padding, maxHeight, style, }) {
+    const inlineStyle = {
+        alignItems: mapAlign(align),
+        ...(gap !== undefined ? { gap } : null),
+        ...(padding !== undefined ? { padding } : null),
+        ...(maxHeight !== undefined ? { maxHeight } : null),
+        ...weightStyle(weight),
+        ...style,
+    };
+    return (_jsx("div", { className: "oo-list", "data-direction": direction, style: inlineStyle, children: children }));
+}

package/dist/ui/data/Listable.css

@@ -0,0 +1,245 @@
+.oo-listable {
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
+  min-height: 0;
+  outline: none;
+  user-select: none;
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-fg);
+
+  /*
+   * A size container, so a column can reposition its cells from a stylesheet
+   * instead of from JS.
+   *
+   * The same list renders in a 300px sidebar and in `main` at 1200px, so a
+   * viewport media query would be wrong in both places at once. `@container`
+   * asks the only question that matters — how wide is this list — and answers
+   * it during a resize drag without a render:
+   *
+   *   .ticket-title { grid-column: 2; }
+   *   @container (max-width: 520px) {
+   *     .ticket-title { grid-column: 1 / -1; grid-row: 2; }
+   *   }
+   *
+   * `inline-size` rather than `size`: containing block size in both axes
+   * would require the list to have a height independent of its rows, which is
+   * exactly what a list of unknown length does not have.
+   */
+  container-type: inline-size;
+  container-name: oo-listable;
+}
+.oo-listable:focus-visible {
+  outline: 1px solid var(--oo-color-accent);
+  outline-offset: -1px;
+}
+
+.oo-listable__header {
+  flex: 0 0 auto;
+  padding: var(--oo-spacing-sm);
+  border-bottom: 1px solid var(--oo-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+}
+.oo-listable__title {
+  margin: 0;
+  font-size: var(--oo-font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--oo-color-muted);
+}
+
+.oo-listable__rows {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* In table mode, the rows container IS the parent grid. Head-row and each
+ * data-row are subgrids that inherit these columns — so `auto` and
+ * `minmax(0,1fr)` sizing is shared across the header and the rows.
+ * --oo-listable-template is set inline from JSX.
+ */
+.oo-listable[data-mode='table'] .oo-listable__rows {
+  display: grid;
+  grid-template-columns: var(--oo-listable-template);
+  grid-auto-rows: max-content;
+  align-content: start;
+}
+
+.oo-listable__empty {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--oo-color-muted);
+  font-size: var(--oo-font-size-xs);
+  padding: var(--oo-spacing-md);
+}
+
+/* ── Table mode ──────────────────────────────────────────────────────── */
+
+.oo-listable__head-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--oo-color-canvas);
+  border-bottom: 1px solid var(--oo-color-border);
+}
+
+.oo-listable__head-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  font-size: var(--oo-font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--oo-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+.oo-listable__head-cell[data-align='right'] {
+  justify-content: flex-end;
+}
+.oo-listable__head-cell[data-sortable='true'] {
+  cursor: pointer;
+}
+.oo-listable__head-cell[data-sortable='true']:hover {
+  color: var(--oo-color-fg);
+}
+.oo-listable__head-cell[data-sorted] {
+  color: var(--oo-color-fg);
+}
+
+.oo-listable__head-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oo-listable__sort-arrow {
+  font-size: 9px;
+  line-height: 1;
+}
+
+.oo-listable__row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: stretch;
+  border-bottom: 1px solid var(--oo-color-border);
+  cursor: default;
+}
+
+.oo-listable__cell {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  font-size: var(--oo-font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.oo-listable__cell[data-align='right'] {
+  justify-content: flex-end;
+}
+
+/* ── List (stacked) mode ─────────────────────────────────────────────── */
+
+.oo-listable__stack {
+  display: flex;
+  /* flex-direction: column; */
+  flex-direction: row;
+  align-items: start;
+  flex-grow: 0;
+  justify-content: space-between;
+  /* gap: 2px; */
+  gap: 6px;
+  padding: 6px 12px;
+  /* border-bottom: 1px solid var(--oo-color-border); */
+  cursor: default;
+}
+
+/* ── List (common) mode ─────────────────────────────────────────────── */
+
+.oo-listable__item:nth-child(even) {
+  background: rgba(0, 0, 0, 0.02);
+}
+.oo-listable__item:hover {
+  color: var(--oo-color-text);
+  background: var(--oo-color-hover);
+}
+.oo-listable__item[data-selected='true'] {
+  color: var(--oo-color-text);
+  background: var(--oo-color-hover);
+  box-shadow: inset 2px 0 0 var(--oo-color-accent);
+}
+
+/* ── List (stacked) mode ─────────────────────────────────────────────── */
+.oo-listable__list-cell {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.oo-listable__list-label {
+  flex: 0 0 auto;
+  min-width: 64px;
+  font-size: 10px;
+  color: var(--oo-color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.oo-listable__list-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Track widths interpolate, so the columns either side of a moved cell close
+ * and open smoothly even though the cell itself teleports. Two conditions, and
+ * both are on the caller: the track COUNT has to hold across the change, and
+ * each track has to keep its type - px to px, fr to fr. `0` to `minmax(0,1fr)`
+ * is a type change and snaps. */
+.oo-listable[data-mode='table'] .oo-listable__rows {
+  transition: grid-template-columns 160ms ease;
+}
+
+/* The cell's own paint. Not position - that is discrete - but a cell arriving
+ * in a new slot reads as placed rather than teleported if its colour settles
+ * rather than cuts. */
+.oo-listable__cell,
+.oo-listable__head-cell {
+  transition: color 140ms ease, background-color 140ms ease, opacity 140ms ease;
+}
+
+/* Not during a splitter drag. `containerWidth` changes every frame there, so
+ * each frame restarts the transition and the grid trails the pointer by the
+ * full duration - the exact lag the transition exists to hide. `oo-resizing`
+ * is on <html> for the length of a drag (ShellSplitter.tsx:67, and
+ * useSurfaceResize.ts:143). */
+html.oo-resizing .oo-listable[data-mode='table'] .oo-listable__rows {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oo-listable[data-mode='table'] .oo-listable__rows,
+  .oo-listable__cell,
+  .oo-listable__head-cell {
+    transition: none;
+  }
+}