@svgrid/enterprise 3.1.8 → 3.1.10

package/dist/fields/viewbar/ColorPanel.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  /**
+   * The view bar's "Color": no colors, the option colors of a single select,
+   * or conditions in order, each with its own color (the first match colors
+   * the row's header).
+   */
+  import { panelFocus } from './panel-focus'
+  import { filterKindOf, newCondition, operatorsFor, defaultValue, type FieldCondition, type FilterOp } from '../filter-model'
+  import { fieldColumns } from '../grid-access'
+  import { BRIGHT } from '../palette'
+  import type { ColorSetting } from '../view-model'
+  import ConditionValue from './ConditionValue.svelte'
+
+  let { ctrl, setting, onChange }: { ctrl: any; setting: ColorSetting; onChange: (s: ColorSetting) => void } = $props()
+
+  const selects = $derived(fieldColumns(ctrl).filter((c) => c.fieldType === 'singleSelect'))
+  const columns = $derived(fieldColumns(ctrl).filter((c) => filterKindOf(c.def)))
+  const rules = $derived(setting.mode === 'conditions' ? setting.rules : [])
+
+  function mode(m: ColorSetting['mode']) {
+    if (m === 'none') return onChange({ mode: 'none' })
+    if (m === 'field') return selects[0] ? onChange({ mode: 'field', field: selects[0].field }) : undefined
+    onChange({ mode: 'conditions', rules: rules.length ? rules : [] })
+  }
+  function setRules(next: Array<{ color: string; condition: FieldCondition }>) {
+    onChange({ mode: 'conditions', rules: next })
+  }
+  function addRule() {
+    const c = columns[0]
+    const condition = c && newCondition(c.id, c.def)
+    if (!condition) return
+    setRules([...rules, { color: BRIGHT[rules.length % BRIGHT.length]!.value, condition }])
+  }
+  const put = (i: number, r: { color: string; condition: FieldCondition } | null) =>
+    setRules(r ? rules.map((x, j) => (j === i ? r : x)) : rules.filter((_, j) => j !== i))
+  function changeOp(c: FieldCondition, op: FilterOp): FieldCondition {
+    return { ...c, op, value: defaultValue(c.kind, op) }
+  }
+</script>
+
+<div class="sv-fvb-panel sv-fvb-panel-wide sv-fcolor" use:panelFocus>
+  <div class="sv-fcolor-modes" role="radiogroup" aria-label="Color rows">
+    {#each [['none', 'None'], ['field', 'Select field'], ['conditions', 'Conditions']] as [m, label] (m)}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={setting.mode === m}
+        class="sv-fcolor-mode"
+        class:is-on={setting.mode === m}
+        disabled={m === 'field' && !selects.length}
+        onclick={() => mode(m as ColorSetting['mode'])}>{label}</button
+      >
+    {/each}
+  </div>
+
+  {#if setting.mode === 'field'}
+    <p class="sv-fvb-title">Color records the same as a single select field</p>
+    <select class="sv-fvb-select" aria-label="Select field" value={setting.field} onchange={(e) => onChange({ mode: 'field', field: (e.currentTarget as HTMLSelectElement).value })}>
+      {#each selects as s (s.id)}<option value={s.field}>{s.header}</option>{/each}
+    </select>
+  {:else if setting.mode === 'conditions'}
+    <p class="sv-fvb-title">Color records that match a condition; the first match wins</p>
+    {#each rules as r, i (i)}
+      {@const col = columns.find((x) => x.id === r.condition.column)}
+      <div class="sv-fcolor-row">
+        <label class="sv-fcolor-swatch" style:background={r.color} title="Color">
+          <select aria-label="Color" value={r.color} onchange={(e) => put(i, { ...r, color: (e.currentTarget as HTMLSelectElement).value })}>
+            {#each BRIGHT as b (b.value)}<option value={b.value}>{b.label}</option>{/each}
+          </select>
+        </label>
+        <select
+          class="sv-fvb-select"
+          aria-label="Field"
+          value={r.condition.column}
+          onchange={(e) => {
+            const c = columns.find((x) => x.id === (e.currentTarget as HTMLSelectElement).value)
+            const condition = c && newCondition(c.id, c.def)
+            if (condition) put(i, { ...r, condition })
+          }}
+        >
+          {#each columns as x (x.id)}<option value={x.id}>{x.header}</option>{/each}
+        </select>
+        <select class="sv-fvb-select" aria-label="Operator" value={r.condition.op} onchange={(e) => put(i, { ...r, condition: changeOp(r.condition, (e.currentTarget as HTMLSelectElement).value as FilterOp) })}>
+          {#each operatorsFor(r.condition.kind) as o (o.op)}<option value={o.op}>{o.label}</option>{/each}
+        </select>
+        <span class="sv-fcolor-value">
+          {#if col}<ConditionValue column={col} condition={r.condition} onChange={(value) => put(i, { ...r, condition: { ...r.condition, value } })} />{/if}
+        </span>
+        <button type="button" class="sv-fvb-icon-btn" aria-label="Remove condition" onclick={() => put(i, null)}>
+          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+        </button>
+      </div>
+    {/each}
+    <div class="sv-fvb-foot">
+      <button type="button" class="sv-fvb-text-btn" onclick={addRule}>+ Add condition</button>
+    </div>
+  {:else}
+    <p class="sv-fvb-empty">Rows are not colored</p>
+  {/if}
+</div>
+
+<style>
+  .sv-fcolor { width: 560px; max-width: 100%; }
+  .sv-fcolor-modes { display: inline-flex; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; padding: 2px; margin-bottom: 8px; }
+  .sv-fcolor-mode { border: 0; border-radius: 6px; padding: 3px 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
+  .sv-fcolor-mode.is-on { background: color-mix(in srgb, var(--sg-accent, #2563eb) 14%, transparent); color: var(--sg-fg, #0f172a); }
+  .sv-fcolor-mode:disabled { opacity: 0.45; cursor: default; }
+  .sv-fcolor-row { display: grid; grid-template-columns: 24px 130px 120px minmax(0, 1fr) 28px; gap: 6px; align-items: start; margin: 6px 0; }
+  .sv-fcolor-row > :global(*) { min-width: 0; }
+  .sv-fcolor-swatch { position: relative; width: 22px; height: 22px; margin-top: 3px; border-radius: 6px; cursor: pointer; }
+  .sv-fcolor-swatch select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+</style>

package/dist/fields/viewbar/ColorPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ColorSetting } from '../view-model.js';
+type $$ComponentProps = {
+    ctrl: any;
+    setting: ColorSetting;
+    onChange: (s: ColorSetting) => void;
+};
+declare const ColorPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorPanel = ReturnType<typeof ColorPanel>;
+export default ColorPanel;

package/dist/fields/viewbar/ConditionValue.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  /**
+   * A filter condition's value, in the control its field and operator call
+   * for: a text box, a number, an option (or several, as pills), a person,
+   * checked / unchecked, a day relative to today or a date, a span of days.
+   */
+  import { ME, type DateSpan, type DateTarget, type FieldCondition } from '../filter-model'
+  import type { FieldColumn } from '../grid-access'
+  import { fieldPropsOf, originalColumn } from '../registry.svelte'
+  import { getFieldUsers } from '../sources.svelte'
+  import { textOn } from '../palette'
+
+  let { column, condition, onChange }: { column: FieldColumn; condition: FieldCondition; onChange: (value: unknown) => void } = $props()
+
+  type Choice = { value: string; label: string; color?: string }
+  const choices = $derived.by<Choice[]>(() => {
+    // "Me" first: whoever is signed in when the filter runs, so one view serves everyone.
+    if (column.fieldType === 'user' || column.fieldType === 'createdBy' || column.fieldType === 'lastModifiedBy')
+      return [{ value: ME, label: 'Me' }, ...getFieldUsers().map((u) => ({ value: u.id, label: u.name }))]
+    const p = fieldPropsOf(originalColumn(column.def)) as { options?: Array<{ value: string; color?: string }> }
+    return (p.options ?? []).map((o) => ({ value: o.value, label: o.value, ...(o.color ? { color: o.color } : {}) }))
+  })
+  const many = $derived(condition.kind === 'multi' || (condition.kind === 'select' && condition.op !== 'is' && condition.op !== 'isNot'))
+  const picked = $derived(new Set(Array.isArray(condition.value) ? (condition.value as string[]) : []))
+  function toggle(v: string) {
+    const next = new Set(picked)
+    if (next.has(v)) next.delete(v)
+    else next.add(v)
+    onChange([...next])
+  }
+
+  const DAYS: ReadonlyArray<{ value: DateTarget['mode']; label: string }> = [
+    { value: 'today', label: 'today' },
+    { value: 'tomorrow', label: 'tomorrow' },
+    { value: 'yesterday', label: 'yesterday' },
+    { value: 'oneWeekAgo', label: 'one week ago' },
+    { value: 'oneWeekFromNow', label: 'one week from now' },
+    { value: 'oneMonthAgo', label: 'one month ago' },
+    { value: 'oneMonthFromNow', label: 'one month from now' },
+    { value: 'exactDate', label: 'exact date' },
+  ]
+  const SPANS: ReadonlyArray<{ value: DateSpan['span']; label: string }> = [
+    { value: 'pastWeek', label: 'the past week' },
+    { value: 'pastMonth', label: 'the past month' },
+    { value: 'pastYear', label: 'the past year' },
+    { value: 'nextWeek', label: 'the next week' },
+    { value: 'nextMonth', label: 'the next month' },
+    { value: 'nextYear', label: 'the next year' },
+    { value: 'pastDays', label: 'the past number of days' },
+    { value: 'nextDays', label: 'the next number of days' },
+  ]
+  const target = $derived((condition.value ?? { mode: 'today' }) as DateTarget & { date?: string })
+  const span = $derived((condition.value ?? { span: 'pastWeek' }) as DateSpan)
+  const textValue = $derived(typeof condition.value === 'string' || typeof condition.value === 'number' ? String(condition.value) : '')
+</script>
+
+{#if condition.op === 'isEmpty' || condition.op === 'isNotEmpty'}
+  <span class="sv-fcv-none"></span>
+{:else if condition.kind === 'checkbox'}
+  <label class="sv-fcv-check">
+    <input type="checkbox" checked={condition.value !== false} onchange={(e) => onChange((e.currentTarget as HTMLInputElement).checked)} />
+    {condition.value !== false ? 'checked' : 'unchecked'}
+  </label>
+{:else if condition.kind === 'select' && !many}
+  <select class="sv-fvb-select" aria-label="Value" value={String(condition.value ?? '')} onchange={(e) => onChange((e.currentTarget as HTMLSelectElement).value)}>
+    <option value="" disabled>Select an option</option>
+    {#each choices as c (c.value)}<option value={c.value}>{c.label}</option>{/each}
+  </select>
+{:else if many}
+  <div class="sv-fcv-pills" role="group" aria-label="Values">
+    {#each choices as c (c.value)}
+      <button
+        type="button"
+        class="sv-fcv-pill"
+        class:is-on={picked.has(c.value)}
+        aria-pressed={picked.has(c.value)}
+        style:--pill={c.color ?? 'var(--sg-accent, #2563eb)'}
+        style:--pill-fg={c.color ? textOn(c.color) : '#fff'}
+        onclick={() => toggle(c.value)}>{c.label}</button
+      >
+    {:else}
+      <span class="sv-fcv-empty">No options</span>
+    {/each}
+  </div>
+{:else if condition.kind === 'date' && condition.op === 'isWithin'}
+  <span class="sv-fcv-pair">
+    <select
+      class="sv-fvb-select"
+      aria-label="Span"
+      value={span.span}
+      onchange={(e) => onChange({ span: (e.currentTarget as HTMLSelectElement).value, ...(span.days ? { days: span.days } : {}) })}
+    >
+      {#each SPANS as s (s.value)}<option value={s.value}>{s.label}</option>{/each}
+    </select>
+    {#if span.span === 'pastDays' || span.span === 'nextDays'}
+      <input
+        class="sv-fvb-input sv-fcv-days"
+        type="number"
+        min="1"
+        aria-label="Days"
+        value={span.days ?? ''}
+        oninput={(e) => onChange({ span: span.span, days: Number((e.currentTarget as HTMLInputElement).value) })}
+      />
+    {/if}
+  </span>
+{:else if condition.kind === 'date'}
+  <span class="sv-fcv-pair">
+    <select
+      class="sv-fvb-select"
+      aria-label="Day"
+      value={target.mode}
+      onchange={(e) => {
+        const mode = (e.currentTarget as HTMLSelectElement).value
+        onChange(mode === 'exactDate' ? { mode, date: target.date ?? '' } : { mode })
+      }}
+    >
+      {#each DAYS as d (d.value)}<option value={d.value}>{d.label}</option>{/each}
+    </select>
+    {#if target.mode === 'exactDate'}
+      <input
+        class="sv-fvb-input"
+        type="date"
+        aria-label="Date"
+        value={target.date ?? ''}
+        oninput={(e) => onChange({ mode: 'exactDate', date: (e.currentTarget as HTMLInputElement).value })}
+      />
+    {/if}
+  </span>
+{:else}
+  <input
+    class="sv-fvb-input"
+    type="text"
+    inputmode={condition.kind === 'number' ? 'decimal' : undefined}
+    placeholder="Enter a value"
+    aria-label="Value"
+    value={textValue}
+    oninput={(e) => onChange((e.currentTarget as HTMLInputElement).value)}
+  />
+{/if}
+
+<style>
+  .sv-fcv-none { display: block; }
+  .sv-fcv-check { display: inline-flex; align-items: center; gap: 6px; }
+  .sv-fcv-pair { display: flex; gap: 6px; min-width: 0; }
+  .sv-fcv-days { width: 70px; }
+  .sv-fcv-pills { display: flex; flex-wrap: wrap; gap: 4px; }
+  .sv-fcv-pill {
+    border: 1px solid var(--sg-border, #cbd5e1); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 12px;
+    background: transparent; color: inherit; cursor: pointer;
+  }
+  .sv-fcv-pill.is-on { background: var(--pill); border-color: var(--pill); color: var(--pill-fg); }
+  .sv-fcv-empty { color: var(--sg-muted, #64748b); font-size: 12px; }
+</style>

package/dist/fields/viewbar/ConditionValue.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+   * A filter condition's value, in the control its field and operator call
+   * for: a text box, a number, an option (or several, as pills), a person,
+   * checked / unchecked, a day relative to today or a date, a span of days.
+   */
+import { type FieldCondition } from '../filter-model.js';
+import type { FieldColumn } from '../grid-access.js';
+type $$ComponentProps = {
+    column: FieldColumn;
+    condition: FieldCondition;
+    onChange: (value: unknown) => void;
+};
+declare const ConditionValue: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConditionValue = ReturnType<typeof ConditionValue>;
+export default ConditionValue;

package/dist/fields/viewbar/FieldIcon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  /** A field's type icon, as the header and the field editor show it. */
+  import { getFieldType } from '../registry.svelte'
+
+  let { column, size = 14 }: { column: { fieldType?: string }; size?: number } = $props()
+
+  // A column without a field type: a plain "text" mark.
+  const TEXT = 'M5 7h14M5 12h10M5 17h7'
+  const path = $derived((column.fieldType && getFieldType(column.fieldType)?.icon) || TEXT)
+</script>
+
+<svg class="sv-fvb-field-icon" viewBox="0 0 24 24" width={size} height={size} aria-hidden="true"
+  ><path d={path} fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" /></svg
+>
+
+<style>
+  .sv-fvb-field-icon { flex: none; color: var(--sg-muted, #64748b); }
+</style>

package/dist/fields/viewbar/FieldIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    column: {
+        fieldType?: string;
+    };
+    size?: number;
+};
+declare const FieldIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldIcon = ReturnType<typeof FieldIcon>;
+export default FieldIcon;

package/dist/fields/viewbar/FilterPanel.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  /**
+   * The view bar's "Filter": "Where [field] [operator] [value]" rows joined
+   * by "and" or "or", and condition groups one level deep. Each change
+   * filters the grid at once; a condition without a value yet is left out.
+   *
+   * With `onChange` it edits `value` instead of the grid's filter: an alert
+   * rule's condition is written with it, inside the rule's dialog.
+   */
+  import { panelFocus } from './panel-focus'
+  import {
+    defaultValue,
+    filterKindOf,
+    isGroup,
+    newCondition,
+    operatorsFor,
+    type FieldCondition,
+    type FieldConditionGroup,
+    type FieldFilter,
+    type FilterOp,
+  } from '../filter-model'
+  import { fieldColumns } from '../grid-access'
+  import ConditionValue from './ConditionValue.svelte'
+
+  let {
+    ctrl,
+    api,
+    value,
+    onChange,
+    title = 'In this view, show records',
+    empty = 'No filter conditions are applied to this view',
+  }: {
+    ctrl: any
+    api?: any
+    /** With `onChange`: the filter shown, in place of the grid's. */
+    value?: FieldFilter | null
+    onChange?: (filter: FieldFilter) => void
+    title?: string
+    empty?: string
+  } = $props()
+
+  const columns = $derived(fieldColumns(ctrl).filter((c) => filterKindOf(c.def)))
+  const filter = $derived.by<FieldFilter>(() => {
+    const f = (onChange ? value : ctrl.advancedFilter) as FieldFilter | null | undefined
+    return f?.kind === 'fieldFilter' ? f : { kind: 'fieldFilter', conjunction: 'and', conditions: [] }
+  })
+
+  function save(next: FieldFilter) {
+    if (onChange) return onChange(next)
+    if (next.conditions.length) api.setAdvancedFilter(next)
+    else api.clearAdvancedFilter()
+  }
+  const first = () => columns[0]
+  function addCondition(groupAt?: number) {
+    const c = first()
+    if (!c) return
+    const cond = newCondition(c.id, c.def)
+    if (!cond) return
+    const conditions = [...filter.conditions]
+    if (groupAt == null) conditions.push(cond)
+    else {
+      const g = conditions[groupAt] as FieldConditionGroup
+      conditions[groupAt] = { ...g, conditions: [...g.conditions, cond] }
+    }
+    save({ ...filter, conditions })
+  }
+  function addGroup() {
+    const c = first()
+    const cond = c && newCondition(c.id, c.def)
+    if (!cond) return
+    save({ ...filter, conditions: [...filter.conditions, { conjunction: 'and', conditions: [cond] }] })
+  }
+  /** Replace (or with null remove) a condition, at the top level or in a group. */
+  function put(at: number, inner: number | null, next: FieldCondition | null) {
+    const conditions = [...filter.conditions]
+    if (inner == null) {
+      if (next) conditions[at] = next
+      else conditions.splice(at, 1)
+    } else {
+      const g = conditions[at] as FieldConditionGroup
+      const list = [...g.conditions]
+      if (next) list[inner] = next
+      else list.splice(inner, 1)
+      if (list.length) conditions[at] = { ...g, conditions: list }
+      else conditions.splice(at, 1)
+    }
+    save({ ...filter, conditions })
+  }
+  function setConjunction(at: number | null, conj: 'and' | 'or') {
+    if (at == null) return save({ ...filter, conjunction: conj })
+    const conditions = [...filter.conditions]
+    conditions[at] = { ...(conditions[at] as FieldConditionGroup), conjunction: conj }
+    save({ ...filter, conditions })
+  }
+
+  // A panel in a popover takes focus when it opens; one inside a dialog does not.
+  function takeFocus(node: HTMLElement, on: boolean) {
+    return on ? panelFocus(node) : undefined
+  }
+
+  function changeField(c: FieldCondition, columnId: string): FieldCondition {
+    const col = columns.find((x) => x.id === columnId)
+    return (col && newCondition(col.id, col.def)) || c
+  }
+  /** A new operator keeps the value when it takes the same shape of value. */
+  function changeOp(c: FieldCondition, op: FilterOp): FieldCondition {
+    const shape = (o: FilterOp) =>
+      c.kind === 'date' ? (o === 'isWithin' ? 'span' : 'day') : c.kind === 'select' ? (o === 'is' || o === 'isNot' ? 'one' : 'many') : 'same'
+    const keep = shape(op) === shape(c.op) && op !== 'isEmpty' && op !== 'isNotEmpty'
+    return { ...c, op, value: keep && c.value !== undefined ? c.value : defaultValue(c.kind, op) }
+  }
+</script>
+
+{#snippet row(c: FieldCondition, index: number, conj: 'and' | 'or', setConj: (v: 'and' | 'or') => void, at: number, inner: number | null)}
+  {@const col = columns.find((x) => x.id === c.column)}
+  <div class="sv-ff-row">
+    <span class="sv-ff-conj">
+      {#if index === 0}
+        Where
+      {:else if index === 1}
+        <select class="sv-fvb-select" aria-label="Join conditions with" value={conj} onchange={(e) => setConj((e.currentTarget as HTMLSelectElement).value as 'and' | 'or')}>
+          <option value="and">and</option>
+          <option value="or">or</option>
+        </select>
+      {:else}
+        {conj}
+      {/if}
+    </span>
+    <select class="sv-fvb-select" aria-label="Field" value={c.column} onchange={(e) => put(at, inner, changeField(c, (e.currentTarget as HTMLSelectElement).value))}>
+      {#each columns as x (x.id)}<option value={x.id}>{x.header}</option>{/each}
+    </select>
+    <select class="sv-fvb-select" aria-label="Operator" value={c.op} onchange={(e) => put(at, inner, changeOp(c, (e.currentTarget as HTMLSelectElement).value as FilterOp))}>
+      {#each operatorsFor(c.kind) as o (o.op)}<option value={o.op}>{o.label}</option>{/each}
+    </select>
+    <span class="sv-ff-value">
+      {#if col}<ConditionValue column={col} condition={c} onChange={(value) => put(at, inner, { ...c, value })} />{/if}
+    </span>
+    <button type="button" class="sv-fvb-icon-btn" aria-label="Remove condition" title="Remove condition" onclick={() => put(at, inner, null)}>
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
+  </div>
+{/snippet}
+
+<div class="sv-fvb-panel sv-fvb-panel-wide sv-ff" class:is-inline={!!onChange} use:takeFocus={!onChange}>
+  {#if filter.conditions.length}
+    {#if title}<p class="sv-fvb-title">{title}</p>{/if}
+    {#each filter.conditions as c, i (i)}
+      {#if isGroup(c)}
+        {@const g = c}
+        <div class="sv-ff-row">
+          <span class="sv-ff-conj">
+            {#if i === 0}Where{:else if i === 1}
+              <select class="sv-fvb-select" aria-label="Join conditions with" value={filter.conjunction} onchange={(e) => setConjunction(null, (e.currentTarget as HTMLSelectElement).value as 'and' | 'or')}>
+                <option value="and">and</option>
+                <option value="or">or</option>
+              </select>
+            {:else}{filter.conjunction}{/if}
+          </span>
+          <div class="sv-ff-group">
+            {#each g.conditions as inner, j (j)}
+              {@render row(inner, j, g.conjunction, (v) => setConjunction(i, v), i, j)}
+            {/each}
+            <button type="button" class="sv-fvb-text-btn" onclick={() => addCondition(i)}>+ Add condition</button>
+          </div>
+        </div>
+      {:else}
+        {@render row(c, i, filter.conjunction, (v) => setConjunction(null, v), i, null)}
+      {/if}
+    {/each}
+  {:else}
+    <p class="sv-fvb-empty">{empty}</p>
+  {/if}
+  <div class="sv-fvb-foot">
+    <button type="button" class="sv-fvb-text-btn" onclick={() => addCondition()}>+ Add condition</button>
+    <button type="button" class="sv-fvb-text-btn" onclick={addGroup}>+ Add condition group</button>
+  </div>
+</div>
+
+<style>
+  .sv-ff { width: 700px; max-width: 100%; }
+  .sv-ff.is-inline { width: auto; }
+  .sv-ff-row { display: grid; grid-template-columns: 64px 140px 130px minmax(0, 1fr) 28px; gap: 6px; align-items: start; margin: 6px 0; }
+  .sv-ff-row > :global(*) { min-width: 0; }
+  .sv-ff-conj { padding-top: 5px; color: var(--sg-muted, #64748b); }
+  .sv-ff-value { min-width: 0; }
+  .sv-ff-group {
+    grid-column: 2 / -1; padding: 4px 8px; border-radius: 8px;
+    background: color-mix(in srgb, var(--sg-fg, #0f172a) 4%, transparent);
+    border: 1px solid var(--sg-border, #e2e8f0);
+  }
+  .sv-ff-group .sv-ff-row { grid-template-columns: 56px 120px 120px minmax(0, 1fr) 28px; }
+</style>

package/dist/fields/viewbar/FilterPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type FieldFilter } from '../filter-model.js';
+type $$ComponentProps = {
+    ctrl: any;
+    api?: any;
+    /** With `onChange`: the filter shown, in place of the grid's. */
+    value?: FieldFilter | null;
+    onChange?: (filter: FieldFilter) => void;
+    title?: string;
+    empty?: string;
+};
+declare const FilterPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type FilterPanel = ReturnType<typeof FilterPanel>;
+export default FilterPanel;

package/dist/fields/viewbar/GanttPanel.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * "Customize timeline": the fields a Gantt view draws with - when a record
+   * starts and ends, the percent field its bar fills with, and the link field
+   * naming the records it waits for (drawn as arrows). Each change shows at
+   * once and is kept in the view.
+   */
+  import { panelFocus } from './panel-focus'
+  import { dateColumns, dependencyColumns, progressColumns, type FieldView } from '../view-model'
+
+  type Settings = Pick<FieldView, 'dateField' | 'endField' | 'progressField' | 'dependencyField'>
+  let { ctrl, view, onChange }: { ctrl: any; view: Settings; onChange: (next: Settings) => void } = $props()
+
+  const dates = $derived(dateColumns(ctrl))
+  const progress = $derived(progressColumns(ctrl))
+  const deps = $derived(dependencyColumns(ctrl))
+  const valueOf = (e: Event) => (e.currentTarget as HTMLSelectElement).value || undefined
+  const set = (key: keyof Settings, e: Event) => onChange({ ...view, [key]: valueOf(e) })
+</script>
+
+<div class="sv-fvb-panel sv-fgantt-panel" use:panelFocus>
+  <p class="sv-fvb-title">Timeline</p>
+  <label class="sv-fgantt-field">
+    <span>Start date</span>
+    <select class="sv-fvb-select" value={view.dateField} onchange={(e) => set('dateField', e)}>
+      {#each dates as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  <label class="sv-fgantt-field">
+    <span>End date</span>
+    <select class="sv-fvb-select" value={view.endField ?? ''} onchange={(e) => set('endField', e)}>
+      <option value="">None (a milestone)</option>
+      {#each dates.filter((c) => c.id !== view.dateField) as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  <label class="sv-fgantt-field">
+    <span>Progress</span>
+    <select class="sv-fvb-select" value={view.progressField ?? ''} onchange={(e) => set('progressField', e)} disabled={!progress.length}>
+      <option value="">None</option>
+      {#each progress as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  <label class="sv-fgantt-field">
+    <span>Depends on</span>
+    <select class="sv-fvb-select" value={view.dependencyField ?? ''} onchange={(e) => set('dependencyField', e)} disabled={!deps.length}>
+      <option value="">None</option>
+      {#each deps as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  {#if !deps.length}
+    <p class="sv-fgantt-hint">Arrows between records come from a link field to this same table.</p>
+  {/if}
+</div>
+
+<style>
+  .sv-fgantt-panel { display: flex; flex-direction: column; gap: 10px; min-width: 280px; }
+  .sv-fgantt-field { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; }
+  .sv-fgantt-field > span { color: var(--sg-muted, #64748b); }
+  .sv-fgantt-hint { margin: 0; max-width: 280px; font-size: 12px; color: var(--sg-muted, #64748b); }
+</style>

package/dist/fields/viewbar/GanttPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type FieldView } from '../view-model.js';
+type Settings = Pick<FieldView, 'dateField' | 'endField' | 'progressField' | 'dependencyField'>;
+type $$ComponentProps = {
+    ctrl: any;
+    view: Settings;
+    onChange: (next: Settings) => void;
+};
+declare const GanttPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type GanttPanel = ReturnType<typeof GanttPanel>;
+export default GanttPanel;