@cahyo-dimas/freeday 1.7.1 → 1.9.0

package/adapters/vue/components/FdyTable.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts" generic="Row extends object">
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
+import {
+  cellValue,
+  cellText,
+  distinctValues,
+  filterRows,
+  sortRows,
+  paginate,
+  pageWindow,
+} from '../../core/table-model.js';
+import type {
+  FdyTableColumn,
+  FdySortState,
+  FdyColumnFilter,
+  FdyFilterMap,
+  FdyPageState,
+} from '../../core/table-model';
+import FdyTableFilter from './FdyTableFilter.vue';
+
+// A controlled Vue data table over freeday's `.fdy-datatable` / `.fdy-table*` / `.fdy-filter*` /
+// `.fdy-pagination__*` classes. Unlike the freeday-table.js enhancer (which snapshots static rows
+// and fights a framework's patcher), this reads `rows` as the source of truth on every render, so
+// it is safe over a `v-for` bound to reactive data. Two modes:
+//   • Client mode (no `page` prop): the component sorts/filters (and paginates when `pageSize` is
+//     set) over the full `rows`. `sort`/`filters` are controlled when provided, else internal.
+//   • Server mode (`page` prop present): `rows` are rendered exactly as given (the server already
+//     sorted/filtered/paged); the sort headers, filters and pager only emit intent
+//     (`update:sort` / `update:filters` / `update:page`) for the caller to feed back into its query.
+// Column filters (text/enum/number/date) apply live; in server mode, debounce the emit if needed.
+
+const props = defineProps<{
+  columns: ReadonlyArray<FdyTableColumn<Row>>;
+  rows: ReadonlyArray<Row>;
+  rowKey: (row: Row) => string | number;
+  /** Controlled sort. Provide (even as null) to own sorting; omit for internal client sort. */
+  sort?: FdySortState | null;
+  /** Controlled filter map keyed by column key. Provide to own filtering; omit for internal. */
+  filters?: FdyFilterMap;
+  /** Server pagination state (0-based index). Presence switches the table into server mode. */
+  page?: FdyPageState;
+  /** Client-side page size when `page` is absent; 0/undefined = render all rows (no pager). */
+  pageSize?: number;
+  loading?: boolean;
+  emptyText?: string;
+  ariaLabel?: string;
+  /** Opt in to row activation: rows become focusable and emit `row-activate` on click/Enter/Space. */
+  rowActivatable?: boolean;
+  /** Per-row class hook, e.g. to mark a selected row. */
+  rowClass?: (row: Row) => string | undefined;
+}>();
+
+const emit = defineEmits<{
+  'update:sort': [sort: FdySortState | null];
+  'update:filters': [filters: FdyFilterMap];
+  'update:page': [page: FdyPageState];
+  /** A row was activated (click, or Enter/Space while the row itself is focused). */
+  'row-activate': [row: Row];
+}>();
+
+const internalSort: Ref<FdySortState | null> = ref(null);
+const internalFilters: Ref<FdyFilterMap> = ref({});
+const internalPageIndex: Ref<number> = ref(0);
+
+const serverPaged: ComputedRef<boolean> = computed((): boolean => props.page != null);
+const sortControlled: ComputedRef<boolean> = computed((): boolean => serverPaged.value || props.sort !== undefined);
+const filtersControlled: ComputedRef<boolean> = computed((): boolean => serverPaged.value || props.filters !== undefined);
+
+const effectiveSort: ComputedRef<FdySortState | null> = computed((): FdySortState | null =>
+  sortControlled.value ? (props.sort ?? null) : internalSort.value,
+);
+const effectiveFilters: ComputedRef<FdyFilterMap> = computed((): FdyFilterMap =>
+  filtersControlled.value ? (props.filters ?? {}) : internalFilters.value,
+);
+
+// Enum options: explicit (server mode) or the distinct values across the current rows (client mode).
+const enumOptionsMap: ComputedRef<Record<string, ReadonlyArray<string>>> = computed(
+  (): Record<string, ReadonlyArray<string>> => {
+    const out: Record<string, ReadonlyArray<string>> = {};
+    for (const col of props.columns) {
+      if (col.filter === 'enum') out[col.key] = col.options ?? distinctValues(props.rows, col);
+    }
+    return out;
+  },
+);
+
+const filteredSorted: ComputedRef<Row[]> = computed((): Row[] => {
+  if (serverPaged.value) return props.rows.slice();
+  const filtered: Row[] = filterRows(props.rows, props.columns, effectiveFilters.value);
+  return sortRows(filtered, props.columns, effectiveSort.value);
+});
+const totalCount: ComputedRef<number> = computed((): number =>
+  serverPaged.value ? (props.page as FdyPageState).total : filteredSorted.value.length,
+);
+const displayRows: ComputedRef<Row[]> = computed((): Row[] => {
+  if (serverPaged.value) return props.rows.slice();
+  if (props.pageSize && props.pageSize > 0) return paginate(filteredSorted.value, internalPageIndex.value, props.pageSize);
+  return filteredSorted.value;
+});
+
+const pageSizeEff: ComputedRef<number> = computed((): number =>
+  serverPaged.value ? (props.page as FdyPageState).size : (props.pageSize ?? 0),
+);
+const currentPage1: ComputedRef<number> = computed((): number =>
+  (serverPaged.value ? (props.page as FdyPageState).index : internalPageIndex.value) + 1,
+);
+const totalPages: ComputedRef<number> = computed((): number =>
+  pageSizeEff.value > 0 ? Math.max(1, Math.ceil(totalCount.value / pageSizeEff.value)) : 1,
+);
+const hasPager: ComputedRef<boolean> = computed((): boolean => pageSizeEff.value > 0 && totalPages.value > 1);
+const pages: ComputedRef<Array<number | 'ellipsis'>> = computed((): Array<number | 'ellipsis'> =>
+  pageWindow(currentPage1.value, totalPages.value),
+);
+const rangeFrom: ComputedRef<number> = computed((): number =>
+  totalCount.value === 0 ? 0 : (currentPage1.value - 1) * pageSizeEff.value + 1,
+);
+const rangeTo: ComputedRef<number> = computed((): number =>
+  totalCount.value === 0 ? 0 : rangeFrom.value - 1 + displayRows.value.length,
+);
+
+// Client mode: keep the page in range when a filter shrinks the row set.
+watch(totalPages, (tp: number): void => {
+  if (!serverPaged.value && internalPageIndex.value > tp - 1) internalPageIndex.value = Math.max(0, tp - 1);
+});
+
+function ariaSortOf(col: FdyTableColumn<Row>): 'ascending' | 'descending' | undefined {
+  const s: FdySortState | null = effectiveSort.value;
+  if (s === null || s.key !== col.key) return undefined;
+  return s.dir === 'asc' ? 'ascending' : 'descending';
+}
+function onSort(col: FdyTableColumn<Row>): void {
+  if (col.sortable !== true) return;
+  const cur: FdySortState | null = effectiveSort.value;
+  const next: FdySortState =
+    cur !== null && cur.key === col.key
+      ? { key: col.key, dir: cur.dir === 'asc' ? 'desc' : 'asc' }
+      : { key: col.key, dir: 'asc' };
+  if (sortControlled.value) emit('update:sort', next);
+  else {
+    internalSort.value = next;
+    internalPageIndex.value = 0;
+  }
+}
+function onFilterChange(col: FdyTableColumn<Row>, filter: FdyColumnFilter | null): void {
+  const nextMap: FdyFilterMap = { ...effectiveFilters.value };
+  if (filter === null) delete nextMap[col.key];
+  else nextMap[col.key] = filter;
+  if (filtersControlled.value) emit('update:filters', nextMap);
+  else {
+    internalFilters.value = nextMap;
+    internalPageIndex.value = 0;
+  }
+}
+function goTo(page1: number): void {
+  const clamped: number = Math.min(Math.max(1, page1), totalPages.value);
+  const index0: number = clamped - 1;
+  if (serverPaged.value) {
+    const p: FdyPageState = props.page as FdyPageState;
+    emit('update:page', { index: index0, size: p.size, total: p.total });
+  } else {
+    internalPageIndex.value = index0;
+  }
+}
+
+function cellClass(col: FdyTableColumn<Row>): string | undefined {
+  return col.mono === true ? 'fdy-mono' : undefined;
+}
+function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefined {
+  return col.align !== undefined ? { textAlign: col.align } : undefined;
+}
+
+function rowClasses(row: Row): Array<string | undefined> {
+  return [props.rowClass?.(row), props.rowActivatable === true ? 'fdy-table__row--activatable' : undefined];
+}
+function onRowClick(row: Row): void {
+  if (props.rowActivatable === true) emit('row-activate', row);
+}
+// Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+// event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
+// stopPropagation, matching the pattern consumers hand-roll today.
+function onRowKeydown(e: KeyboardEvent, row: Row): void {
+  if (props.rowActivatable !== true || e.target !== e.currentTarget) return;
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  e.preventDefault();
+  emit('row-activate', row);
+}
+</script>
+
+<template>
+  <div class="fdy-datatable">
+    <div v-if="$slots.toolbar" class="fdy-table-toolbar">
+      <slot name="toolbar" />
+    </div>
+
+    <div class="fdy-table-scroll">
+      <table class="fdy-table" :aria-label="ariaLabel">
+        <thead>
+          <tr>
+            <th v-for="col in columns" :key="col.key" scope="col" :style="alignStyle(col)" :aria-sort="ariaSortOf(col)">
+              <button
+                v-if="col.sortable"
+                type="button"
+                class="fdy-table__sortbtn"
+                @click="onSort(col)"
+              >{{ col.label }}</button>
+              <template v-else>{{ col.label }}</template>
+              <FdyTableFilter
+                v-if="col.filter"
+                :label="col.label"
+                :type="col.filter"
+                :filter="effectiveFilters[col.key]"
+                :options="enumOptionsMap[col.key] ?? []"
+                @change="onFilterChange(col, $event)"
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="columns.length" class="fdy-table__state" role="status">Loading…</td>
+          </tr>
+          <tr v-else-if="displayRows.length === 0">
+            <td :colspan="columns.length" class="fdy-table__state">
+              <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
+            </td>
+          </tr>
+          <tr
+            v-for="row in displayRows"
+            v-else
+            :key="rowKey(row)"
+            :class="rowClasses(row)"
+            :tabindex="rowActivatable ? 0 : undefined"
+            @click="onRowClick(row)"
+            @keydown="onRowKeydown($event, row)"
+          >
+            <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
+              <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="hasPager" class="fdy-table-footer">
+      <span class="fdy-table-footer__info">Showing {{ rangeFrom }}–{{ rangeTo }} of {{ totalCount }}</span>
+      <nav aria-label="Pagination">
+        <ul class="fdy-pagination__list">
+          <li>
+            <button
+              type="button"
+              class="fdy-pagination__link"
+              aria-label="Previous page"
+              :disabled="currentPage1 === 1"
+              @click="goTo(currentPage1 - 1)"
+            >‹</button>
+          </li>
+          <li v-for="(p, i) in pages" :key="typeof p === 'number' ? p : `gap-${i}`">
+            <span v-if="p === 'ellipsis'" class="fdy-pagination__ellipsis">…</span>
+            <span v-else-if="p === currentPage1" class="fdy-pagination__link" aria-current="page">{{ p }}</span>
+            <button v-else type="button" class="fdy-pagination__link" :aria-label="`Go to page ${p}`" @click="goTo(p)">{{ p }}</button>
+          </li>
+          <li>
+            <button
+              type="button"
+              class="fdy-pagination__link"
+              aria-label="Next page"
+              :disabled="currentPage1 === totalPages"
+              @click="goTo(currentPage1 + 1)"
+            >›</button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>

package/adapters/vue/components/FdyTableFilter.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+import { isFilterActive } from '../../core/table-model.js';
+import type { FdyColumnFilter, FdyColumnFilterType } from '../../core/table-model';
+
+// Internal to FdyTable: one column's header funnel button + its type-aware filter popover
+// (text / enum / number / date) over freeday's `.fdy-table__filterbtn` + `.fdy-filter*` classes.
+// Reuses usePopover so the panel escapes the table's `overflow:hidden` via the top layer. Purely
+// controlled — it renders the current `filter` and emits the next one (or null to clear); the
+// parent owns where that goes (client state or an `update:filters` emit). Not exported.
+
+const props = defineProps<{
+  label: string;
+  type: FdyColumnFilterType;
+  filter: FdyColumnFilter | undefined;
+  /** Distinct values for an enum filter (computed by the parent over the full row set). */
+  options: ReadonlyArray<string>;
+}>();
+
+const emit = defineEmits<{
+  /** The next filter for this column, or null to clear it. */
+  change: [filter: FdyColumnFilter | null];
+}>();
+
+const rootEl: Ref<HTMLSpanElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLDivElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+
+usePopover(panelEl, triggerEl, open);
+
+const active: ComputedRef<boolean> = computed((): boolean => isFilterActive(props.filter));
+
+// Typed reads of the current filter for the inputs (fall back to the empty shape per type).
+const textValue: ComputedRef<string> = computed((): string =>
+  props.filter?.type === 'text' ? props.filter.text : '',
+);
+const enumValues: ComputedRef<ReadonlyArray<string>> = computed((): ReadonlyArray<string> =>
+  props.filter?.type === 'enum' ? props.filter.values : [],
+);
+const numMin: ComputedRef<string> = computed((): string =>
+  props.filter?.type === 'number' && props.filter.min !== null ? String(props.filter.min) : '',
+);
+const numMax: ComputedRef<string> = computed((): string =>
+  props.filter?.type === 'number' && props.filter.max !== null ? String(props.filter.max) : '',
+);
+const dateFrom: ComputedRef<string> = computed((): string =>
+  props.filter?.type === 'date' && props.filter.from !== null ? props.filter.from : '',
+);
+const dateTo: ComputedRef<string> = computed((): string =>
+  props.filter?.type === 'date' && props.filter.to !== null ? props.filter.to : '',
+);
+
+function apply(next: FdyColumnFilter): void {
+  emit('change', isFilterActive(next) ? next : null);
+}
+function parseNum(v: string): number | null {
+  const t: string = v.trim();
+  if (t === '') return null;
+  const n: number = Number(t);
+  return Number.isNaN(n) ? null : n;
+}
+function onText(e: Event): void {
+  apply({ type: 'text', text: (e.target as HTMLInputElement).value });
+}
+function onEnumToggle(value: string, checked: boolean): void {
+  const set: string[] = enumValues.value.filter((v: string): boolean => v !== value);
+  if (checked) set.push(value);
+  apply({ type: 'enum', values: set });
+}
+function onNumber(which: 'min' | 'max', e: Event): void {
+  const v: number | null = parseNum((e.target as HTMLInputElement).value);
+  apply({
+    type: 'number',
+    min: which === 'min' ? v : parseNum(numMin.value),
+    max: which === 'max' ? v : parseNum(numMax.value),
+  });
+}
+function onDate(which: 'from' | 'to', e: Event): void {
+  const v: string = (e.target as HTMLInputElement).value;
+  const val: string | null = v === '' ? null : v;
+  apply({
+    type: 'date',
+    from: which === 'from' ? val : (dateFrom.value || null),
+    to: which === 'to' ? val : (dateTo.value || null),
+  });
+}
+
+function toggle(): void {
+  open.value = !open.value;
+}
+function close(returnFocus: boolean): void {
+  open.value = false;
+  if (returnFocus) triggerEl.value?.focus();
+}
+function reset(): void {
+  emit('change', null);
+  close(true);
+}
+
+// Dismiss on outside pointer or Escape while open.
+function onDocPointerDown(e: MouseEvent): void {
+  const t: EventTarget | null = e.target;
+  if (rootEl.value !== null && t instanceof Node && !rootEl.value.contains(t) && !panelEl.value?.contains(t)) {
+    close(false);
+  }
+}
+function onDocKeydown(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && open.value) close(true);
+}
+watch(open, (isOpen: boolean): void => {
+  if (isOpen) {
+    document.addEventListener('mousedown', onDocPointerDown);
+    document.addEventListener('keydown', onDocKeydown);
+  } else {
+    document.removeEventListener('mousedown', onDocPointerDown);
+    document.removeEventListener('keydown', onDocKeydown);
+  }
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+  document.removeEventListener('keydown', onDocKeydown);
+});
+</script>
+
+<template>
+  <span ref="rootEl" class="fdy-table__filterwrap">
+    <button
+      ref="triggerEl"
+      type="button"
+      :class="active ? 'fdy-table__filterbtn is-active' : 'fdy-table__filterbtn'"
+      aria-haspopup="dialog"
+      :aria-pressed="active"
+      :aria-expanded="open"
+      :aria-label="`Filter ${label}`"
+      @click.stop="toggle"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M3 5h18l-7 8v5l-4 2v-7z" />
+      </svg>
+    </button>
+
+    <div ref="panelEl" class="fdy-filter" popover="manual" :hidden="!open" role="dialog" :aria-label="`Filter ${label}`">
+      <template v-if="type === 'text'">
+        <div class="fdy-filter__title">Contains text</div>
+        <input class="fdy-input" type="search" placeholder="Contains…" :value="textValue" @input="onText" />
+      </template>
+
+      <template v-else-if="type === 'enum'">
+        <div class="fdy-filter__title">Show values</div>
+        <div class="fdy-filter__list">
+          <label v-for="val in options" :key="val" class="fdy-filter__check">
+            <input
+              type="checkbox"
+              class="fdy-checkbox"
+              :checked="enumValues.includes(val)"
+              @change="onEnumToggle(val, ($event.target as HTMLInputElement).checked)"
+            />
+            {{ val }}
+          </label>
+        </div>
+      </template>
+
+      <template v-else-if="type === 'number'">
+        <div class="fdy-filter__title">Value range</div>
+        <div class="fdy-filter__range">
+          <input class="fdy-input" type="text" inputmode="numeric" placeholder="Min" :value="numMin" @input="onNumber('min', $event)" />
+          <span aria-hidden="true">–</span>
+          <input class="fdy-input" type="text" inputmode="numeric" placeholder="Max" :value="numMax" @input="onNumber('max', $event)" />
+        </div>
+      </template>
+
+      <template v-else-if="type === 'date'">
+        <div class="fdy-filter__title">Date range</div>
+        <div class="fdy-filter__range">
+          <input class="fdy-input" type="date" aria-label="From" :value="dateFrom" @input="onDate('from', $event)" />
+          <span aria-hidden="true">–</span>
+          <input class="fdy-input" type="date" aria-label="To" :value="dateTo" @input="onDate('to', $event)" />
+        </div>
+      </template>
+
+      <div class="fdy-filter__foot">
+        <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--sm" @click="reset">Reset</button>
+        <button type="button" class="fdy-btn fdy-btn--sm" @click="close(true)">Close</button>
+      </div>
+    </div>
+  </span>
+</template>

package/adapters/vue/index.d.ts

@@ -21,6 +21,22 @@ export { default as FdyCascade } from './components/FdyCascade.vue';
 export type { CascadeNode } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
 export { default as FdyChart } from './components/FdyChart.vue';
+export { default as FdyTable } from './components/FdyTable.vue';
+export { default as FdyModal } from './components/FdyModal.vue';
+export { default as FdyDrawer } from './components/FdyDrawer.vue';
+
+/** Controlled data-table types (shared, framework-agnostic core). */
+export type {
+  FdyTableColumn,
+  FdySortState,
+  FdySortDir,
+  FdyColumnType,
+  FdyColumnAlign,
+  FdyColumnFilterType,
+  FdyColumnFilter,
+  FdyFilterMap,
+  FdyPageState,
+} from '../core/table-model';
 
 /** One data series for the cartesian chart types (line / area / multi-series & stacked bar). */
 export interface FdyChartSeries {

package/adapters/vue/index.js

@@ -6,3 +6,6 @@ export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
 export { default as FdyChart } from './components/FdyChart.vue';
+export { default as FdyTable } from './components/FdyTable.vue';
+export { default as FdyModal } from './components/FdyModal.vue';
+export { default as FdyDrawer } from './components/FdyDrawer.vue';

package/dist/freeday.bundle.css

@@ -915,6 +915,7 @@ a { color: var(--color-primary); }
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
 .fdy-drawer__close:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-drawer__body{flex:1;min-height:0;overflow:auto;padding:var(--space-4);}
+.fdy-drawer__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
 /* Symmetric enter AND exit on the native <dialog>: @starting-style animates the entry;
  * the overlay/display allow-discrete transitions keep the panel painted through the exit so
  * it slides back out on close (not just in). prefers-reduced-motion is honored by the global
@@ -1210,7 +1211,18 @@ a { color: var(--color-primary); }
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* Monospace data — ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
+   or inline (`<span class="fdy-mono">`), not just numeric columns. */
+.fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
+/* Numeric cells are mono + right-aligned. Kept self-contained (not composed from .fdy-mono)
+   so existing single-class markup keeps working. */
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
+/* Loading / empty state cell (FdyTable spans it across all columns). */
+.fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}
@@ -1234,7 +1246,8 @@ a { color: var(--color-primary); }
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
 
-/* Column filter — funnel button injected into a filterable <th> */
+/* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
+.fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
 .fdy-table__filterbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:var(--space-1);padding:0;vertical-align:middle;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;}
 .fdy-table__filterbtn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-table__filterbtn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}

package/dist/freeday.css

@@ -570,6 +570,7 @@ a { color: var(--color-primary); }
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
 .fdy-drawer__close:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-drawer__body{flex:1;min-height:0;overflow:auto;padding:var(--space-4);}
+.fdy-drawer__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
 /* Symmetric enter AND exit on the native <dialog>: @starting-style animates the entry;
  * the overlay/display allow-discrete transitions keep the panel painted through the exit so
  * it slides back out on close (not just in). prefers-reduced-motion is honored by the global
@@ -865,7 +866,18 @@ a { color: var(--color-primary); }
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* Monospace data — ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
+   or inline (`<span class="fdy-mono">`), not just numeric columns. */
+.fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
+/* Numeric cells are mono + right-aligned. Kept self-contained (not composed from .fdy-mono)
+   so existing single-class markup keeps working. */
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
+/* Loading / empty state cell (FdyTable spans it across all columns). */
+.fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}
@@ -889,7 +901,8 @@ a { color: var(--color-primary); }
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
 
-/* Column filter — funnel button injected into a filterable <th> */
+/* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
+.fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
 .fdy-table__filterbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:var(--space-1);padding:0;vertical-align:middle;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;}
 .fdy-table__filterbtn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-table__filterbtn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/drawer.css

@@ -13,6 +13,7 @@
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
 .fdy-drawer__close:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-drawer__body{flex:1;min-height:0;overflow:auto;padding:var(--space-4);}
+.fdy-drawer__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
 /* Symmetric enter AND exit on the native <dialog>: @starting-style animates the entry;
  * the overlay/display allow-discrete transitions keep the panel painted through the exit so
  * it slides back out on close (not just in). prefers-reduced-motion is honored by the global

package/src/components/table.css

@@ -7,7 +7,18 @@
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* Monospace data — ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
+   or inline (`<span class="fdy-mono">`), not just numeric columns. */
+.fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
+/* Numeric cells are mono + right-aligned. Kept self-contained (not composed from .fdy-mono)
+   so existing single-class markup keeps working. */
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
+/* Loading / empty state cell (FdyTable spans it across all columns). */
+.fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}
@@ -31,7 +42,8 @@
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
 
-/* Column filter — funnel button injected into a filterable <th> */
+/* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
+.fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
 .fdy-table__filterbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:var(--space-1);padding:0;vertical-align:middle;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;}
 .fdy-table__filterbtn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-table__filterbtn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}