@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/src/components/filter-builder/README.md

@@ -0,0 +1,47 @@
+# filter-builder
+
+Constructor de filtros combinados: condiciones (campo · operador · valor) en grupos que se cumplen con **Y** (todas) u **O** (alguna), anidables hasta `maxDepth` niveles.
+- **Combinador:** el interruptor Y/O es un control segmentado con un indicador que se desliza (.45 s), y los conectores entre condiciones ruedan a la letra nueva.
+- **Añadir y quitar:** una condición o un grupo nuevo entra con blur, con su campo enfocado; uno que se quita se pliega.
+- **Valor según el tipo:** el control sigue el tipo del campo (texto, número, fecha, lista, sí/no) y el operador decide cuántos valores pide («entre» pide dos). Un número que no lo es se sacude.
+
+Cada cambio entrega una copia del filtro (`onChange`) y la frase que lo lee («Mostrar donde Estado es Activo y (Monto mayor que 100 o VIP es sí).»).
+
+La lógica pura está en `core/filter.ts` y se exporta: `matchesFilter(registro, filtro, campos)` aplica el filtro a tus datos (texto sin mayúsculas ni tildes, fechas por día, condiciones incompletas no filtran) y `describeFilter(filtro, campos)` lo escribe en español.
+
+## HTML / Astro
+
+```html
+<mk-filter-builder class="mk-filter-builder" fields='[
+  {"key":"estado","label":"Estado","type":"select","options":[{"value":"activo","label":"Activo"},{"value":"pausado","label":"Pausado"}]},
+  {"key":"monto","label":"Monto","type":"number"},
+  {"key":"alta","label":"Fecha de alta","type":"date"},
+  {"key":"cliente","label":"Cliente"}]'></mk-filter-builder>
+```
+
+## React
+
+```tsx
+const [filter, setFilter] = useState<FilterGroup>();
+<FilterBuilder fields={FIELDS} value={filter} onChange={setFilter} />
+const visible = rows.filter((row) => !filter || matchesFilter(row, filter, FIELDS));
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+| `fields` | `fields` (JSON) | — | `{ key, label, type?, options? }[]`; `type`: `text`, `number`, `date`, `select`, `boolean`. |
+| `value` | `value` (JSON) | grupo vacío | `{ id, combinator: 'and' \| 'or', rules: [...] }`. |
+| `maxDepth` | `max-depth` | `2` | Niveles de grupos (2: grupos dentro del principal). |
+| `label` | `label` | `'Filtros'` | Nombre accesible. |
+| `summary` | `summary` | `true` | La frase bajo el constructor. |
+| `onChange(filter)` | — | — | Cada cambio (una copia). |
+
+## Operadores
+
+Texto: contiene, no contiene, es, no es, empieza por, termina en, está vacío, no está vacío. Número: igual a, distinto de, mayor que, mayor o igual que, menor que, menor o igual que, entre, vacío. Fecha: es el, antes del, después del, entre, vacío. Lista: es, no es, vacío. Sí/no: es sí, es no.
+
+## API y eventos
+
+`setValue(filter)`, `clear()`, `value`, `summary`, `destroy()`. Evento `mk:change` con `{ value, summary }`. Con movimiento reducido todo cambia sin animación.

package/src/components/filter-builder/element.ts

@@ -0,0 +1,34 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createFilterBuilder, type FilterBuilderInstance } from './engine';
+import type { FilterField, FilterGroup } from '../../core/filter';
+
+/**
+ * <mk-filter-builder class="mk-filter-builder"
+ *   fields='[{"key":"estado","label":"Estado","type":"select","options":[{"value":"activo","label":"Activo"}]},{"key":"monto","label":"Monto","type":"number"}]'>
+ * </mk-filter-builder>
+ * Emits mk:change ({value, summary}).
+ */
+export class MkFilterBuilderElement extends MkElement<FilterBuilderInstance> {
+  static options: Record<string, OptionType> = { fields: 'json', value: 'json', maxDepth: 'number', label: 'string', summary: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createFilterBuilder(this, options as { fields?: FilterField[] });
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'value' && next) {
+      try {
+        this.instance.setValue(JSON.parse(next) as FilterGroup);
+      } catch {
+        // Malformed JSON: keep the current filter.
+      }
+    } else super.attributeChangedCallback(name, previous, next);
+  }
+
+  get value() {
+    return this.instance?.value ?? null;
+  }
+}
+
+export const defineFilterBuilder = () => defineElement('mk-filter-builder', MkFilterBuilderElement);

package/src/components/filter-builder/engine.ts

@@ -0,0 +1,365 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import {
+  cloneFilter, describeFilter, emptyFilter, filterId, isGroup, newRule, operatorOf, operatorsFor, typeOf,
+  type FilterField, type FilterGroup, type FilterNode, type FilterRule,
+} from '../../core/filter';
+import { blurIn, collapse, press, rollDigits, shake } from '../../motion/micro';
+import { slideIndicator } from '../../motion/indicator';
+
+/*
+ * Filter builder: conditions (field · operator · value) in groups combined
+ * with Y (all) or O (any), nested up to maxDepth. The Y/O switch is a
+ * segmented control whose indicator slides (.45 s, signature) while the
+ * connectors between the conditions roll to the new letter; a new condition or
+ * group drops in out of a blur (y −20, blur 16) with its field focused; a
+ * removed one folds away (height to 0, blur). The value control follows the
+ * field's type (text, number, date, a list, yes/no) and the operator's arity
+ * ("entre" takes two); a number that is not one shakes. Every change reports
+ * a copy of the filter (onChange) and the sentence that reads it.
+ */
+
+export interface FilterBuilderOptions {
+  /** The fields to filter by (without them the builder stays inert). */
+  fields?: FilterField[];
+  value?: FilterGroup;
+  /** Levels of groups (default 2: groups inside the main one). */
+  maxDepth?: number;
+  /** Accessible name (default 'Filtros'). */
+  label?: string;
+  /** The sentence under the builder (default true). */
+  summary?: boolean;
+  onChange?: (filter: FilterGroup) => void;
+}
+
+export interface FilterBuilderInstance extends Instance {
+  setValue(filter: FilterGroup): void;
+  clear(): void;
+  readonly value: FilterGroup;
+  readonly summary: string;
+}
+
+const CLOSE = '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M7 7l10 10M17 7L7 17"/></svg>';
+const COMBINATOR = { and: { short: 'Y', long: 'todas las condiciones', connector: 'y' }, or: { short: 'O', long: 'alguna condición', connector: 'o' } } as const;
+
+const el = <K extends keyof HTMLElementTagNameMap>(tag: K, attrs: Record<string, string> = {}, text?: string) => {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, value);
+  if (text !== undefined) element.textContent = text;
+  return element;
+};
+
+export function createFilterBuilder(root: HTMLElement | null, options: FilterBuilderOptions = {}): FilterBuilderInstance {
+  if (!root || !options.fields?.length) return inert({ setValue() {}, clear() {}, value: emptyFilter(), summary: '' });
+  registerMotion();
+  const scope = createScope();
+  const fields = options.fields;
+  const maxDepth = Number.isFinite(options.maxDepth) && options.maxDepth! >= 1 ? Math.floor(options.maxDepth!) : 2;
+  let model: FilterGroup = options.value ? cloneFilter(options.value) : emptyFilter();
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+
+  const tree = el('div', { 'data-mk-fb-tree': '', role: 'group', 'aria-label': options.label ?? 'Filtros' });
+  const summary = el('p', { 'data-mk-fb-summary': '', 'aria-live': 'polite' });
+  summary.hidden = options.summary === false;
+  root.append(tree, summary);
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    tree.remove();
+    summary.remove();
+  });
+  scope.attr(root, 'data-mk-ready', '');
+
+  const fieldOf = (key: string) => fields.find((field) => field.key === key);
+  /** The node with `id` and the group holding it. */
+  const find = (id: string, group: FilterGroup = model, parent: FilterGroup | null = null): { node: FilterNode; parent: FilterGroup | null } | null => {
+    if (group.id === id) return { node: group, parent };
+    for (const node of group.rules) {
+      if (node.id === id) return { node, parent: group };
+      if (isGroup(node)) {
+        const found = find(id, node, group);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  const describe = () => {
+    const text = describeFilter(model, fields);
+    summary.textContent = text ? `Mostrar donde ${text}.` : 'Sin filtros: se muestra todo.';
+  };
+  const emit = () => {
+    describe();
+    options.onChange?.(cloneFilter(model));
+    root.dispatchEvent(new CustomEvent('mk:change', { bubbles: true, detail: { value: cloneFilter(model), summary: describeFilter(model, fields) } }));
+  };
+
+  // ── Value controls ───────────────────────────────────────────────────────
+  const valueControl = (rule: FilterRule, index: 0 | 1) => {
+    const field = fieldOf(rule.field);
+    const type = typeOf(field);
+    const current = Array.isArray(rule.value) ? rule.value[index] : rule.value;
+    let control: HTMLInputElement | HTMLSelectElement;
+    if (type === 'select') {
+      control = el('select');
+      control.append(el('option', { value: '' }, 'Elige…'), ...(field?.options ?? []).map((option) => el('option', { value: option.value }, option.label)));
+    } else {
+      control = el('input');
+      control.type = type === 'number' ? 'text' : type === 'date' ? 'date' : 'text';
+      if (type === 'number') control.inputMode = 'decimal';
+      control.placeholder = type === 'number' ? '0' : 'Valor';
+    }
+    control.dataset.mkFbValue = String(index);
+    control.setAttribute('aria-label', index === 1 ? 'Hasta' : operatorOf(field, rule.operator).arity === 2 ? 'Desde' : 'Valor');
+    control.value = current === null || current === undefined ? '' : String(current);
+    return control;
+  };
+
+  const fillValues = (row: HTMLElement, rule: FilterRule) => {
+    const host = row.querySelector<HTMLElement>('[data-mk-fb-values]')!;
+    const { arity } = operatorOf(fieldOf(rule.field), rule.operator);
+    host.replaceChildren();
+    if (arity === 0) return;
+    host.append(valueControl(rule, 0));
+    if (arity === 2) host.append(el('span', { 'data-mk-fb-and': '', 'aria-hidden': 'true' }, 'y'), valueControl(rule, 1));
+  };
+
+  const fillOperators = (row: HTMLElement, rule: FilterRule) => {
+    const select = row.querySelector<HTMLSelectElement>('[data-mk-fb-operator]')!;
+    select.replaceChildren(...operatorsFor(fieldOf(rule.field)).map((operator) => el('option', { value: operator.id }, operator.label)));
+    select.value = rule.operator;
+  };
+
+  const ruleRow = (rule: FilterRule) => {
+    const row = el('div', { 'data-mk-fb-rule': '', 'data-id': rule.id, role: 'group', 'aria-label': 'Condición' });
+    const field = el('select', { 'data-mk-fb-field': '', 'aria-label': 'Campo' });
+    field.append(...fields.map((candidate) => el('option', { value: candidate.key }, candidate.label)));
+    field.value = rule.field;
+    const operator = el('select', { 'data-mk-fb-operator': '', 'aria-label': 'Operador' });
+    const values = el('span', { 'data-mk-fb-values': '' });
+    const remove = el('button', { type: 'button', 'data-mk-fb-remove': '', 'aria-label': 'Quitar condición' });
+    remove.innerHTML = CLOSE;
+    row.append(field, operator, values, remove);
+    fillOperators(row, rule);
+    fillValues(row, rule);
+    return row;
+  };
+
+  const connector = (group: FilterGroup) => el('span', { 'data-mk-fb-connector': '', 'aria-hidden': 'true' }, COMBINATOR[group.combinator].connector);
+
+  const groupBox = (group: FilterGroup, depth: number): HTMLElement => {
+    const box = el('div', { 'data-mk-fb-group': '', 'data-id': group.id, 'data-depth': String(depth), role: 'group', 'aria-label': depth ? 'Grupo de condiciones' : 'Condiciones' });
+    const head = el('div', { 'data-mk-fb-head': '' });
+    const switcher = el('div', { 'data-mk-fb-combinator': '', role: 'radiogroup', 'aria-label': 'Cumplir' });
+    const indicator = el('span', { 'data-mk-fb-indicator': '', 'aria-hidden': 'true' });
+    switcher.append(indicator);
+    for (const kind of ['and', 'or'] as const) {
+      const option = el('button', { type: 'button', role: 'radio', 'data-combinator': kind, 'aria-checked': String(group.combinator === kind), 'aria-label': COMBINATOR[kind].long }, COMBINATOR[kind].short);
+      option.tabIndex = group.combinator === kind ? 0 : -1;
+      switcher.append(option);
+    }
+    const caption = el('span', { 'data-mk-fb-caption': '' }, `Cumplir ${COMBINATOR[group.combinator].long}`);
+    head.append(switcher, caption);
+    if (depth > 0) {
+      const removeGroup = el('button', { type: 'button', 'data-mk-fb-remove-group': '', 'aria-label': 'Quitar grupo' });
+      removeGroup.innerHTML = CLOSE;
+      head.append(removeGroup);
+    }
+    const rules = el('div', { 'data-mk-fb-rules': '' });
+    group.rules.forEach((node, i) => {
+      if (i) rules.append(connector(group));
+      rules.append(isGroup(node) ? groupBox(node, depth + 1) : ruleRow(node));
+    });
+    const actions = el('div', { 'data-mk-fb-actions': '' });
+    actions.append(el('button', { type: 'button', 'data-mk-fb-add-rule': '' }, '+ Condición'));
+    // A group at depth d holds another while it stays within maxDepth levels.
+    if (depth + 1 < maxDepth) actions.append(el('button', { type: 'button', 'data-mk-fb-add-group': '' }, '+ Grupo'));
+    box.append(head, rules, actions);
+    return box;
+  };
+
+  /** The indicator of every switch sits under its chosen option. */
+  const placeIndicators = (immediate: boolean) => {
+    for (const switcher of tree.querySelectorAll<HTMLElement>('[data-mk-fb-combinator]')) {
+      const chosen = switcher.querySelector<HTMLElement>('[aria-checked="true"]');
+      keep(slideIndicator(switcher.querySelector<HTMLElement>('[data-mk-fb-indicator]')!, chosen, { immediate }));
+    }
+  };
+
+  const render = () => {
+    tree.replaceChildren(groupBox(model, 0));
+    placeIndicators(true);
+    describe();
+  };
+
+  const boxOf = (id: string) => tree.querySelector<HTMLElement>(`[data-mk-fb-group][data-id="${id}"]`);
+  const rowOf = (id: string) => tree.querySelector<HTMLElement>(`[data-mk-fb-rule][data-id="${id}"]`);
+  const ruleOf = (element: Element) => find(element.closest<HTMLElement>('[data-mk-fb-rule]')!.dataset.id!)!.node as FilterRule;
+
+  const add = (group: FilterGroup, node: FilterNode) => {
+    const box = boxOf(group.id)!;
+    const rules = box.querySelector<HTMLElement>(':scope > [data-mk-fb-rules]')!;
+    group.rules.push(node);
+    const depth = Number(box.dataset.depth);
+    const element = isGroup(node) ? groupBox(node, depth + 1) : ruleRow(node);
+    const parts: HTMLElement[] = [];
+    if (group.rules.length > 1) {
+      const link = connector(group);
+      rules.append(link);
+      parts.push(link);
+    }
+    rules.append(element);
+    parts.push(element);
+    if (isGroup(node)) placeIndicators(true);
+    keep(blurIn(parts, { from: 'rise', stagger: 0.04 }));
+    element.querySelector<HTMLElement>('select, input')?.focus();
+    emit();
+  };
+
+  const removeNode = (id: string) => {
+    const found = find(id);
+    if (!found?.parent) return;
+    const { parent } = found;
+    const element = tree.querySelector<HTMLElement>(`[data-id="${id}"]`)!;
+    const index = parent.rules.findIndex((node) => node.id === id);
+    parent.rules.splice(index, 1);
+    // The connector before it (or after it, for the first) goes too.
+    const link = (element.previousElementSibling?.matches('[data-mk-fb-connector]') ? element.previousElementSibling : element.nextElementSibling?.matches('[data-mk-fb-connector]') ? element.nextElementSibling : null) as HTMLElement | null;
+    const box = boxOf(parent.id)!;
+    const focusAfter = box.querySelector<HTMLElement>(':scope > [data-mk-fb-actions] button');
+    const gone = () => {
+      element.remove();
+      link?.remove();
+    };
+    if (reduced()) gone();
+    else {
+      keep(collapse(element, { onComplete: gone }));
+      if (link) keep(collapse(link));
+    }
+    focusAfter?.focus();
+    emit();
+  };
+
+  const setCombinator = (group: FilterGroup, kind: 'and' | 'or') => {
+    if (group.combinator === kind) return;
+    group.combinator = kind;
+    const box = boxOf(group.id)!;
+    const switcher = box.querySelector<HTMLElement>(':scope > [data-mk-fb-head] [data-mk-fb-combinator]')!;
+    for (const option of switcher.querySelectorAll<HTMLElement>('[role="radio"]')) {
+      const on = option.dataset.combinator === kind;
+      option.setAttribute('aria-checked', String(on));
+      option.tabIndex = on ? 0 : -1;
+    }
+    keep(slideIndicator(switcher.querySelector<HTMLElement>('[data-mk-fb-indicator]')!, switcher.querySelector<HTMLElement>('[aria-checked="true"]')));
+    box.querySelector<HTMLElement>(':scope > [data-mk-fb-head] [data-mk-fb-caption]')!.textContent = `Cumplir ${COMBINATOR[kind].long}`;
+    const links = [...box.querySelectorAll<HTMLElement>(':scope > [data-mk-fb-rules] > [data-mk-fb-connector]')];
+    links.forEach((link, i) => {
+      if (reduced()) link.textContent = COMBINATOR[kind].connector;
+      else keep(gsap.delayedCall(i * 0.03, () => keep(rollDigits(link, COMBINATOR[kind].connector, kind === 'or' ? 1 : -1, 0.3))));
+    });
+    emit();
+  };
+
+  scope.on(tree, 'click', (event) => {
+    const target = event.target as Element | null;
+    const button = target?.closest<HTMLElement>('button');
+    if (!button || !tree.contains(button)) return;
+    const box = button.closest<HTMLElement>('[data-mk-fb-group]')!;
+    const group = find(box.dataset.id!)!.node as FilterGroup;
+    if (button.matches('[data-combinator]')) return setCombinator(group, button.dataset.combinator as 'and' | 'or');
+    keep(press(button));
+    if (button.matches('[data-mk-fb-add-rule]')) add(group, newRule(fields[0]!));
+    else if (button.matches('[data-mk-fb-add-group]')) add(group, { id: filterId(), combinator: 'and', rules: [newRule(fields[0]!)] });
+    else if (button.matches('[data-mk-fb-remove]')) removeNode(button.closest<HTMLElement>('[data-mk-fb-rule]')!.dataset.id!);
+    else if (button.matches('[data-mk-fb-remove-group]')) removeNode(box.dataset.id!);
+  });
+  // Arrows move the Y/O choice, like radios.
+  scope.on(tree, 'keydown', (event) => {
+    const key = event as KeyboardEvent;
+    const option = (key.target as Element | null)?.closest<HTMLElement>('[data-combinator]');
+    if (!option || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key.key)) return;
+    key.preventDefault();
+    const group = find(option.closest<HTMLElement>('[data-mk-fb-group]')!.dataset.id!)!.node as FilterGroup;
+    const next = group.combinator === 'and' ? 'or' : 'and';
+    setCombinator(group, next);
+    option.parentElement!.querySelector<HTMLElement>(`[data-combinator="${next}"]`)!.focus();
+  });
+  scope.on(tree, 'change', (event) => {
+    const target = event.target as HTMLElement;
+    const row = target.closest<HTMLElement>('[data-mk-fb-rule]');
+    if (!row) return;
+    const rule = ruleOf(row);
+    if (target.matches('[data-mk-fb-field]')) {
+      const fresh = newRule(fieldOf((target as HTMLSelectElement).value)!);
+      rule.field = fresh.field;
+      rule.operator = fresh.operator;
+      rule.value = fresh.value;
+      fillOperators(row, rule);
+      fillValues(row, rule);
+      const values = row.querySelector<HTMLElement>('[data-mk-fb-values]')!;
+      if (values.children.length && !reduced()) keep(blurIn([...values.children], { from: 'soft', stagger: 0.03 }));
+    } else if (target.matches('[data-mk-fb-operator]')) {
+      const before = operatorOf(fieldOf(rule.field), rule.operator).arity;
+      rule.operator = (target as HTMLSelectElement).value;
+      const after = operatorOf(fieldOf(rule.field), rule.operator).arity;
+      if (before !== after) {
+        rule.value = after === 2 ? [Array.isArray(rule.value) ? rule.value[0] : (rule.value ?? null), null] : after === 1 ? (Array.isArray(rule.value) ? rule.value[0] : (rule.value ?? null)) : null;
+        fillValues(row, rule);
+        const values = row.querySelector<HTMLElement>('[data-mk-fb-values]')!;
+        if (values.children.length && !reduced()) keep(blurIn([...values.children], { from: 'soft', stagger: 0.03 }));
+      }
+    } else if (target.matches('[data-mk-fb-value]') && target instanceof HTMLSelectElement) {
+      rule.value = target.value || null;
+    } else return;
+    emit();
+  });
+  scope.on(tree, 'input', (event) => {
+    const target = event.target as HTMLElement;
+    if (!(target instanceof HTMLInputElement) || !target.matches('[data-mk-fb-value]')) return;
+    const rule = ruleOf(target);
+    const field = fieldOf(rule.field);
+    const text = target.value;
+    const number = typeOf(field) === 'number';
+    const parsed = number ? (text.trim() === '' ? null : Number(text.replace(',', '.'))) : text;
+    if (number && parsed !== null && Number.isNaN(parsed)) target.setAttribute('aria-invalid', 'true');
+    else target.removeAttribute('aria-invalid');
+    const value = number && (parsed === null || Number.isNaN(parsed as number)) ? null : (parsed as string | number | null);
+    if (Array.isArray(rule.value)) rule.value[target.dataset.mkFbValue === '1' ? 1 : 0] = value;
+    else rule.value = value;
+    emit();
+  });
+  scope.on(tree, 'focusout', (event) => {
+    const target = event.target as HTMLElement;
+    if (target.getAttribute('aria-invalid') === 'true') keep(shake(target));
+  });
+
+  render();
+
+  return {
+    setValue(next) {
+      if (scope.disposed) return;
+      model = cloneFilter(next);
+      render();
+    },
+    clear() {
+      model = emptyFilter(model.combinator);
+      render();
+      emit();
+    },
+    get value() {
+      return cloneFilter(model);
+    },
+    get summary() {
+      return describeFilter(model, fields);
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/filter-builder/filter-builder.css

@@ -0,0 +1,231 @@
+/* filter-builder — the main group bare, nested groups as 16 px cards on surface-2 with an accent rail; each condition a
+   wrapping row of 12 px controls on surface-3; the Y/O switch a 10 px segmented control whose indicator slides; small
+   round connectors ("y" / "o") between the conditions; the sentence that reads the filter under it. */
+.mk-filter-builder,
+mk-filter-builder {
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--mk-text);
+}
+
+[data-mk-fb-group] {
+  display: grid;
+  gap: 0.6rem;
+  min-width: 0;
+}
+
+[data-mk-fb-group]:not([data-depth='0']) {
+  padding: 0.75rem;
+  border-radius: 16px;
+  background: var(--mk-surface-2);
+  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mk-accent) 60%, transparent);
+}
+
+[data-mk-fb-head] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+[data-mk-fb-combinator] {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-fb-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--mk-shadow-color, #000) 18%, transparent);
+  pointer-events: none;
+}
+
+[data-mk-fb-combinator] [role='radio'] {
+  position: relative;
+  z-index: 1;
+  min-width: 2.25rem;
+  height: 1.9rem;
+  padding: 0 0.6rem;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+[data-mk-fb-combinator] [role='radio'][aria-checked='true'] {
+  color: var(--mk-text);
+}
+
+[data-mk-fb-caption] {
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+}
+
+[data-mk-fb-rules] {
+  display: grid;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+[data-mk-fb-rule] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+[data-mk-fb-rule] :is(select, input) {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 0 0.7rem;
+  border: 0;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.875rem;
+  outline: none;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-fb-rule] select {
+  max-width: 100%;
+  padding-right: 1.9rem;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right 0.55rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  cursor: pointer;
+}
+
+[data-mk-fb-rule] input {
+  width: 9rem;
+}
+
+[data-mk-fb-rule] :is(select, input):focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-fb-rule] input[aria-invalid='true'] {
+  box-shadow: 0 0 0 2px var(--mk-error, #c62828);
+}
+
+[data-mk-fb-values] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+[data-mk-fb-and] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-fb-remove],
+[data-mk-fb-remove-group] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+}
+
+[data-mk-fb-remove-group] {
+  margin-left: auto;
+}
+
+:is([data-mk-fb-remove], [data-mk-fb-remove-group]):hover {
+  background: color-mix(in srgb, var(--mk-error, #c62828) 12%, transparent);
+  color: var(--mk-error, #c62828);
+}
+
+[data-mk-fb-connector] {
+  justify-self: start;
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.6rem;
+  height: 1.4rem;
+  padding: 0 0.35rem;
+  border-radius: 999px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+[data-mk-fb-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+[data-mk-fb-actions] button {
+  height: 2.1rem;
+  padding: 0 0.8rem;
+  border: 1px dashed var(--mk-outline);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+[data-mk-fb-actions] button:hover {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+:is([data-mk-fb-actions] button, [data-mk-fb-remove], [data-mk-fb-remove-group], [data-mk-fb-combinator] [role='radio']):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-fb-summary] {
+  margin: 0;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+@media (max-width: 480px) {
+  [data-mk-fb-rule] :is(select, input) {
+    flex: 1 1 8rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-fb-combinator] [role='radio'],
+  [data-mk-fb-actions] button,
+  [data-mk-fb-rule] :is(select, input) {
+    transition: none;
+  }
+}