@rangka/client 0.0.1

package/src/widgets/components/table/CellRenderers.tsx

@@ -0,0 +1,83 @@
+import type { WidgetNode } from '@rangka/shared';
+import type { WidgetContext } from '../../context/types.js';
+import { getWidget } from '../../registry.js';
+import { flattenContext } from '../../context/types.js';
+import { parse, evaluate } from '../../expression/index.js';
+
+export function ColumnChildRenderer({ node, rowCtx }: { node: WidgetNode; rowCtx: WidgetContext }) {
+  const entry = getWidget(node.type);
+  if (!entry) return <span data-widget-error={`Unknown: ${node.type}`} />;
+
+  const Component = entry.component;
+  const flat = flattenContext(rowCtx);
+  const resolvedProps = resolveProps(node.props, flat);
+  const bindResult = resolveBindValue(node, rowCtx);
+
+  return (
+    <Component
+      props={resolvedProps}
+      bind={{ value: bindResult, setValue: undefined, meta: undefined }}
+      on={{}}
+      context={{
+        record: rowCtx.record,
+        model: rowCtx.model,
+        mode: rowCtx.mode,
+        index: rowCtx.index,
+      }}
+    />
+  );
+}
+
+export function CellValue({ col, row }: { col: WidgetNode; row: Record<string, unknown> }) {
+  const field = col.bind?.field;
+  if (!field) return null;
+  const value = row[field];
+  return <>{value != null ? String(value) : ''}</>;
+}
+
+function resolveProps(
+  props: Record<string, unknown> | undefined,
+  flat: Record<string, unknown>,
+): Record<string, unknown> {
+  if (!props) return {};
+  const resolved: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (typeof value === 'string' && value.includes('{{')) {
+      const trimmed = value.trim();
+      if (
+        trimmed.startsWith('{{') &&
+        trimmed.endsWith('}}') &&
+        !trimmed.slice(2, -2).includes('{{')
+      ) {
+        const ast = parse(trimmed);
+        resolved[key] = evaluate(ast, flat);
+      } else {
+        resolved[key] = value.replace(/\{\{(.+?)\}\}/g, (_m, expr: string) => {
+          const ast = parse(expr.trim());
+          return String(evaluate(ast, flat) ?? '');
+        });
+      }
+    } else {
+      resolved[key] = value;
+    }
+  }
+  return resolved;
+}
+
+function resolveBindValue(node: WidgetNode, ctx: WidgetContext): unknown {
+  if (!node.bind) return null;
+  if (node.bind.field) {
+    return ctx.record[node.bind.field] ?? null;
+  }
+  if (node.bind.expression) {
+    const flat = flattenContext(ctx);
+    const expr = node.bind.expression;
+    const trimmed = expr.trim();
+    if (trimmed.startsWith('{{') && trimmed.endsWith('}}')) {
+      const ast = parse(trimmed);
+      return evaluate(ast, flat);
+    }
+    return expr;
+  }
+  return null;
+}

package/src/widgets/components/table/TablePagination.tsx

@@ -0,0 +1,45 @@
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { Button } from '../../../components/ui/button.js';
+
+interface TablePaginationProps {
+  page: number;
+  pageSize: number;
+  total: number | undefined;
+  recordCount: number;
+  onPageChange: (page: number) => void;
+}
+
+export function TablePagination({ page, pageSize, total, recordCount, onPageChange }: TablePaginationProps) {
+  const start = (page - 1) * pageSize + 1;
+  const end = total != null ? Math.min(page * pageSize, total) : start + recordCount - 1;
+  const hasPrev = page > 1;
+  const hasNext = total != null ? end < total : recordCount >= pageSize;
+
+  return (
+    <div className="flex items-center justify-between border-t border-border px-5 py-2.5 text-sm">
+      <span className="text-muted-foreground tabular-nums">
+        {total != null ? `Showing ${start}\u2013${end} of ${total}` : `Page ${page}`}
+      </span>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="icon-sm"
+          disabled={!hasPrev}
+          onClick={() => onPageChange(page - 1)}
+          aria-label="Previous page"
+        >
+          <ChevronLeftIcon className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="icon-sm"
+          disabled={!hasNext}
+          onClick={() => onPageChange(page + 1)}
+          aria-label="Next page"
+        >
+          <ChevronRightIcon className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/widgets/components/table/TableToolbar.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  FilterIcon,
+  XIcon,
+  SearchIcon,
+} from 'lucide-react';
+import type { WidgetNode } from '@rangka/shared';
+import { Badge } from '../../../components/ui/badge.js';
+import { Button } from '../../../components/ui/button.js';
+import { Input } from '../../../components/ui/input.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../components/ui/popover.js';
+import { useModelMeta } from '../../../data/useModelMeta.js';
+import {
+  getOperatorsForType,
+  getDefaultOperator,
+  getOperatorSymbol,
+  getActiveFilters,
+  getLabelForField,
+} from './filter-operators.js';
+
+interface PageStore {
+  get(key: string): unknown;
+  set(key: string, value: unknown): void;
+  keys(): Iterable<string>;
+}
+
+interface TableToolbarProps {
+  model: string;
+  store: PageStore;
+  columns: WidgetNode[];
+  hasSearch: boolean;
+  hasFilters: boolean;
+}
+
+export function TableToolbar({ model, store, columns, hasSearch, hasFilters }: TableToolbarProps) {
+  const [searchInput, setSearchInput] = useState(() => {
+    const val = store.get(`$search.${model}`);
+    return val ? String(val) : '';
+  });
+  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchInput(value);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        store.set(`$search.${model}`, value || null);
+        store.set(`$page.${model}`, 1);
+      }, 300);
+    },
+    [model, store],
+  );
+
+  const activeFilters = getActiveFilters(store, model, columns);
+
+  return (
+    <div className="flex flex-col border-b border-border/50">
+      <div className="flex items-center gap-2 px-5 py-2">
+        {hasSearch && (
+          <div className="flex flex-1 items-center gap-2">
+            <SearchIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              placeholder="Search..."
+              className="flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+            />
+            {searchInput && (
+              <button
+                className="rounded-sm p-0.5 hover:bg-muted"
+                onClick={() => handleSearchChange('')}
+                aria-label="Clear search"
+              >
+                <XIcon className="h-3 w-3 text-muted-foreground" />
+              </button>
+            )}
+          </div>
+        )}
+        {hasFilters && <TableFilterPopover columns={columns} model={model} store={store} />}
+      </div>
+      {activeFilters.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 px-5 pb-2">
+          {activeFilters.map((f) => (
+            <Badge key={f.key} variant="secondary" className="gap-1 pr-1">
+              <span className="text-xs">
+                {f.label} {getOperatorSymbol(f.operator)} {f.displayValue}
+              </span>
+              <button
+                className="ml-1 rounded-sm p-0.5 hover:bg-muted"
+                onClick={() => {
+                  store.set(f.key, null);
+                  store.set(`$page.${model}`, 1);
+                }}
+                aria-label={`Remove ${f.label} filter`}
+              >
+                <XIcon className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Filter Popover ---
+
+interface FilterPopoverProps {
+  columns: WidgetNode[];
+  model: string;
+  store: PageStore;
+}
+
+function TableFilterPopover({ columns, model, store }: FilterPopoverProps) {
+  const [adding, setAdding] = useState(false);
+  const [selectedField, setSelectedField] = useState<string | null>(null);
+  const [selectedOperator, setSelectedOperator] = useState<string>('');
+  const [filterValue, setFilterValue] = useState('');
+  const [search, setSearch] = useState('');
+
+  const { modelMeta } = useModelMeta(model);
+
+  const getFieldType = useCallback(
+    (field: string): string => {
+      const meta = modelMeta?.fields.find((f) => f.name === field);
+      return meta?.type ?? 'string';
+    },
+    [modelMeta],
+  );
+
+  const filteredColumns = useMemo(() => {
+    if (!search) return columns.filter((col) => col.bind?.field);
+    const q = search.toLowerCase();
+    return columns.filter((col) => {
+      if (!col.bind?.field) return false;
+      const label = String(col.props?.label ?? col.bind.field).toLowerCase();
+      return label.includes(q);
+    });
+  }, [columns, search]);
+
+  const handleFieldSelect = (field: string) => {
+    setSelectedField(field);
+    setSelectedOperator(getDefaultOperator(getFieldType(field)));
+    setFilterValue('');
+    setSearch('');
+  };
+
+  const handleApply = () => {
+    if (!selectedField) return;
+    const operators = getOperatorsForType(getFieldType(selectedField));
+    const op = operators.find((o) => o.value === selectedOperator);
+    if (!op) return;
+    if (op.needsValue && !filterValue) return;
+
+    const suffix = selectedOperator === 'eq' ? '' : `__${selectedOperator}`;
+    const key = `$filter.${model}.${selectedField}${suffix}`;
+
+    let value: unknown = filterValue;
+    if (selectedOperator === 'empty') value = 'true';
+    else if (selectedOperator === 'not_empty') value = 'true';
+    else if (selectedOperator === 'eq' && getFieldType(selectedField) === 'boolean') value = 'true';
+    else if (selectedOperator === 'neq' && getFieldType(selectedField) === 'boolean')
+      value = 'false';
+
+    store.set(key, value);
+    store.set(`$page.${model}`, 1);
+    setAdding(false);
+    setSelectedField(null);
+    setSelectedOperator('');
+    setFilterValue('');
+  };
+
+  const handleBack = () => {
+    setSelectedField(null);
+    setSelectedOperator('');
+    setFilterValue('');
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setAdding(open);
+    if (!open) {
+      setSelectedField(null);
+      setSelectedOperator('');
+      setFilterValue('');
+      setSearch('');
+    }
+  };
+
+  const currentOperators = selectedField ? getOperatorsForType(getFieldType(selectedField)) : [];
+  const currentOp = currentOperators.find((o) => o.value === selectedOperator);
+
+  return (
+    <Popover open={adding} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs shrink-0">
+          <FilterIcon className="h-3.5 w-3.5" />
+          Filter
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-56 p-0" align="end">
+        {!selectedField ? (
+          <div className="flex flex-col">
+            <div className="flex items-center gap-2 border-b border-border/50 px-2.5 py-2">
+              <SearchIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search fields..."
+                className="flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground"
+                autoFocus
+              />
+            </div>
+            <div className="flex flex-col py-1 max-h-48 overflow-auto">
+              {filteredColumns.map((col) => {
+                const field = col.bind?.field;
+                if (!field) return null;
+                return (
+                  <button
+                    key={field}
+                    className="px-2.5 py-1.5 text-left text-xs hover:bg-muted transition-colors"
+                    onClick={() => handleFieldSelect(field)}
+                  >
+                    {String(col.props?.label ?? field)}
+                  </button>
+                );
+              })}
+              {filteredColumns.length === 0 && (
+                <p className="px-2.5 py-1.5 text-xs text-muted-foreground">No fields found</p>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col">
+            <div className="px-2.5 pt-2.5 pb-2">
+              <p className="text-xs font-semibold">{getLabelForField(columns, selectedField)}</p>
+            </div>
+            <div className="flex flex-col gap-2 px-2.5 pb-2.5">
+              <select
+                value={selectedOperator}
+                onChange={(e) => {
+                  setSelectedOperator(e.target.value);
+                  setFilterValue('');
+                }}
+                className="h-7 w-full rounded-none border border-border bg-transparent px-2 text-xs outline-none focus:border-ring"
+              >
+                {currentOperators.map((op) => (
+                  <option key={op.value} value={op.value}>
+                    {op.label}
+                  </option>
+                ))}
+              </select>
+              {currentOp?.needsValue && (
+                <Input
+                  value={filterValue}
+                  onChange={(e) => setFilterValue(e.target.value)}
+                  placeholder="Value..."
+                  className="h-7 text-xs"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') handleApply();
+                  }}
+                  autoFocus
+                />
+              )}
+            </div>
+            <div className="flex items-center justify-between border-t border-border/50 px-2.5 py-2">
+              <Button variant="ghost" size="xs" onClick={handleBack}>
+                Back
+              </Button>
+              <Button
+                variant="default"
+                size="xs"
+                onClick={handleApply}
+                disabled={currentOp?.needsValue ? !filterValue : false}
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/widgets/components/table/filter-operators.ts

@@ -0,0 +1,134 @@
+import type { WidgetNode } from '@rangka/shared';
+
+export interface OperatorOption {
+  value: string;
+  label: string;
+  needsValue: boolean;
+}
+
+export const STRING_OPERATORS: OperatorOption[] = [
+  { value: 'like', label: 'Contains', needsValue: true },
+  { value: 'eq', label: 'Equals', needsValue: true },
+  { value: 'neq', label: 'Not equals', needsValue: true },
+  { value: 'empty', label: 'Empty', needsValue: false },
+  { value: 'not_empty', label: 'Not empty', needsValue: false },
+];
+
+export const NUMERIC_OPERATORS: OperatorOption[] = [
+  { value: 'eq', label: 'Equals', needsValue: true },
+  { value: 'neq', label: 'Not equals', needsValue: true },
+  { value: 'gt', label: 'Greater than', needsValue: true },
+  { value: 'gte', label: 'Greater or equal', needsValue: true },
+  { value: 'lt', label: 'Less than', needsValue: true },
+  { value: 'lte', label: 'Less or equal', needsValue: true },
+  { value: 'empty', label: 'Empty', needsValue: false },
+  { value: 'not_empty', label: 'Not empty', needsValue: false },
+];
+
+export const DATE_OPERATORS: OperatorOption[] = [
+  { value: 'eq', label: 'Equals', needsValue: true },
+  { value: 'gt', label: 'After', needsValue: true },
+  { value: 'gte', label: 'On or after', needsValue: true },
+  { value: 'lt', label: 'Before', needsValue: true },
+  { value: 'lte', label: 'On or before', needsValue: true },
+  { value: 'empty', label: 'Empty', needsValue: false },
+  { value: 'not_empty', label: 'Not empty', needsValue: false },
+];
+
+export const BOOLEAN_OPERATORS: OperatorOption[] = [
+  { value: 'eq', label: 'Is true', needsValue: false },
+  { value: 'neq', label: 'Is false', needsValue: false },
+];
+
+export const ENUM_OPERATORS: OperatorOption[] = [
+  { value: 'eq', label: 'Equals', needsValue: true },
+  { value: 'neq', label: 'Not equals', needsValue: true },
+];
+
+export function getOperatorsForType(fieldType: string): OperatorOption[] {
+  switch (fieldType) {
+    case 'string':
+    case 'text':
+      return STRING_OPERATORS;
+    case 'int':
+    case 'decimal':
+    case 'money':
+      return NUMERIC_OPERATORS;
+    case 'date':
+    case 'datetime':
+      return DATE_OPERATORS;
+    case 'boolean':
+      return BOOLEAN_OPERATORS;
+    case 'enum':
+      return ENUM_OPERATORS;
+    default:
+      return STRING_OPERATORS;
+  }
+}
+
+export function getDefaultOperator(fieldType: string): string {
+  if (fieldType === 'string' || fieldType === 'text') return 'like';
+  return 'eq';
+}
+
+export function getOperatorSymbol(operator: string): string {
+  switch (operator) {
+    case 'eq':
+      return '=';
+    case 'neq':
+      return '\u2260';
+    case 'gt':
+      return '>';
+    case 'gte':
+      return '\u2265';
+    case 'lt':
+      return '<';
+    case 'lte':
+      return '\u2264';
+    case 'like':
+      return '\u2248';
+    case 'empty':
+      return 'is empty';
+    case 'not_empty':
+      return 'is not empty';
+    default:
+      return '=';
+  }
+}
+
+export function getActiveFilters(
+  store: { get(key: string): unknown; keys(): Iterable<string> },
+  model: string,
+  columns: WidgetNode[],
+): { key: string; field: string; operator: string; label: string; displayValue: string }[] {
+  const prefix = `$filter.${model}.`;
+  const results: {
+    key: string;
+    field: string;
+    operator: string;
+    label: string;
+    displayValue: string;
+  }[] = [];
+  for (const key of store.keys()) {
+    if (!key.startsWith(prefix)) continue;
+    const value = store.get(key);
+    if (value === null || value === undefined) continue;
+    const fieldPart = key.slice(prefix.length);
+    let operator = 'eq';
+    let field = fieldPart;
+    const suffixMatch = fieldPart.match(/__(\w+)$/);
+    if (suffixMatch) {
+      operator = suffixMatch[1];
+      field = fieldPart.slice(0, -suffixMatch[0].length);
+    }
+    const label = getLabelForField(columns, field);
+    const displayValue = operator === 'empty' || operator === 'not_empty' ? '' : String(value);
+    results.push({ key, field, operator, label, displayValue });
+  }
+  return results;
+}
+
+export function getLabelForField(columns: WidgetNode[], field: string): string {
+  const col = columns.find((c) => c.bind?.field === field);
+  return String(col?.props?.label ?? field);
+}

package/src/widgets/components/table/index.ts

@@ -0,0 +1,11 @@
+export { TableToolbar } from './TableToolbar.js';
+export { TablePagination } from './TablePagination.js';
+export { ColumnChildRenderer, CellValue } from './CellRenderers.js';
+export {
+  getOperatorsForType,
+  getDefaultOperator,
+  getOperatorSymbol,
+  getActiveFilters,
+  getLabelForField,
+} from './filter-operators.js';
+export type { OperatorOption } from './filter-operators.js';

package/src/widgets/condition/evaluator.ts

@@ -0,0 +1,57 @@
+import type { Condition } from '@rangka/shared';
+import { parse, evaluate } from '../expression/index.js';
+import type { EvalContext } from '../expression/index.js';
+
+export function evaluateCondition(condition: Condition, context: EvalContext): boolean {
+  const fieldValue = resolveFieldValue(condition.field, context);
+  const compareValue = resolveValue(condition.value, context);
+
+  switch (condition.operator) {
+    case 'eq':
+      return fieldValue == compareValue;
+    case 'neq':
+      return fieldValue != compareValue;
+    case 'in':
+      return Array.isArray(compareValue) && compareValue.includes(fieldValue);
+    case 'notIn':
+      return Array.isArray(compareValue) && !compareValue.includes(fieldValue);
+    case 'empty':
+      return fieldValue == null || fieldValue === '';
+    case 'notEmpty':
+      return fieldValue != null && fieldValue !== '';
+    case 'gt':
+      return Number(fieldValue) > Number(compareValue);
+    case 'lt':
+      return Number(fieldValue) < Number(compareValue);
+    case 'gte':
+      return Number(fieldValue) >= Number(compareValue);
+    case 'lte':
+      return Number(fieldValue) <= Number(compareValue);
+  }
+}
+
+export function evaluateConditions(
+  conditions: Condition | Condition[],
+  context: EvalContext,
+): boolean {
+  const list = Array.isArray(conditions) ? conditions : [conditions];
+  return list.every((c) => evaluateCondition(c, context));
+}
+
+function resolveFieldValue(field: string, context: EvalContext): unknown {
+  const parts = field.split('.');
+  let current: unknown = context;
+  for (const part of parts) {
+    if (current == null || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+function resolveValue(value: unknown, context: EvalContext): unknown {
+  if (typeof value === 'string' && value.includes('{{')) {
+    const ast = parse(value);
+    return evaluate(ast, context);
+  }
+  return value;
+}

package/src/widgets/condition/index.ts

@@ -0,0 +1 @@
+export { evaluateCondition, evaluateConditions } from './evaluator.js';