torch-glare 2.4.4 → 2.5.0

package/docs/components/kanban-view.md

@@ -1,135 +0,0 @@
----
-title: KanbanView
-description: Standalone kanban board view for DataViews — groups records into columns by a field and renders each as a card. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
-group: Data Display
-keywords: [data-views, kanban-view, kanban, board, columns, group-by, cards, composable, dynamic-data, fields]
----
-
-# KanbanView
-
-> The board renderer behind `DataViewsLayout`'s "Board" tab. It groups records into columns by `groupByField` and renders each record as a card. In tab mode the layout renders it for you; render it directly only in **Composable Mode**.
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this component's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add KanbanView
-```
-
-`add` also copies any components, hooks, and utilities that `KanbanView` depends on.
-
-## Import
-
-Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
-
-```tsx
-import { KanbanView } from "@/components/KanbanView";
-```
-
-## When to use it directly
-
-| Situation | Use |
-|---|---|
-| You want the standard tabbed multi-view UI | `DataViewsLayout` with `views={{ kanban: true }}` — it mounts `KanbanView` for you. |
-| You want a custom layout (e.g. kanban beside a table) | Render `KanbanView` directly with state from `useDataViewsState`. |
-
-## Composable Mode example
-
-`KanbanView` groups by the `groupByField` path — every distinct value becomes a
-column. Column colors are assigned deterministically, or per-value via the
-field's `kanbanVariants`.
-
-```tsx
-import { KanbanView } from "@/components/KanbanView";
-import { useDataViewsState } from "@/hooks/useDataViewsState";
-import type { FieldConfig } from "@/components/FieldConfig";
-
-const tasks = [
-  { id: 1, title: "Spec API", status: "Todo", assignee: "Ada" },
-  { id: 2, title: "Build UI", status: "In Progress", assignee: "Linus" },
-  { id: 3, title: "Ship", status: "Done", assignee: "Grace" },
-]
-
-const fields: FieldConfig[] = [
-  { path: "title", type: "text" },
-  {
-    path: "status",
-    type: "enum-badge",
-    kanbanVariants: {
-      Todo: { label: "To Do", color: "gray" },
-      "In Progress": { label: "In Progress", color: "blue" },
-      Done: { label: "Done", color: "green" },
-    },
-  },
-  { path: "assignee", type: "text" },
-]
-
-function TaskBoard() {
-  const state = useDataViewsState({ data: tasks, fields })
-  return (
-    <KanbanView
-      data={state.flatItems}
-      fields={state.resolvedFields}
-      config={state.config}
-      groupByField="status"
-      titleField="title"
-    />
-  )
-}
-```
-
-### Column header actions
-
-Pass `onColumnAction` to show an overflow (⋯) button on each column header. When
-omitted the button is hidden.
-
-```tsx
-<KanbanView
-  data={state.flatItems}
-  fields={state.resolvedFields}
-  config={state.config}
-  groupByField="status"
-  onColumnAction={(columnId) => openColumnMenu(columnId)}
-/>
-```
-
-## API Reference
-
-### `KanbanViewProps`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `data` | `DynamicRecord[]` | — (required) | Records to group into columns. Pass `state.flatItems` in composable mode. |
-| `fields` | `FieldConfig[]` | — (required) | Field map controlling card content. Pass `state.resolvedFields`. |
-| `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
-| `groupByField` | `string` | `"status"` | Dot-path to the field whose distinct values become columns. |
-| `titleField` | `string` | first visible non-group field | Dot-path of the field rendered as the card title. |
-| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides. Usually derived from `fields`. |
-| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when a card moves between columns (updates the group-by value). |
-| `onColumnAction` | `(columnId: string) => void` | `undefined` | Click handler for the column header overflow button. When omitted, the button is hidden. |
-
-Per-column colors come from each field's `kanbanVariants` map
-(`{ [value]: { label?, color? } }`). Available `color` keys: `gray`, `purple`,
-`orange`, `blue`, `green`, `red`. See
-[`DataViewsLayout`](./data-views-layout.md#fieldconfig) for the full
-`FieldConfig` shape.
-
-## Accessibility
-
-- Cards are keyboard-focusable; the column overflow button is a real `<button>`.
-- Card titles use semantic heading markup within each [`DataViewCard`](./card.md).
-
-## Theming
-
-Uses `*-presentation-*` tokens plus a small set of deeply-saturated column-header
-fills matched to `glare-torch-mode` raw tokens. Control the scheme via the
-parent `DataViewsLayout`'s `theme`.
-
-## Related
-
-- [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
-- [`TableView`](./table-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — sibling views
-- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)

package/docs/components/table-view.md

@@ -1,141 +0,0 @@
----
-title: TableView
-description: Standalone table view for DataViews — sortable columns, row selection, and an integrated filter panel. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
-group: Data Display
-keywords: [data-views, table-view, table, sortable, columns, selection, filter, composable, dynamic-data, fields]
----
-
-# TableView
-
-> The table renderer behind `DataViewsLayout`'s "List" tab. In tab mode the layout renders it for you. Render it directly only in **Composable Mode** (custom layouts), wiring it with `useDataViewsState`.
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this component's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add TableView
-```
-
-`add` also copies any components, hooks, and utilities that `TableView` depends on.
-
-## Import
-
-Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
-
-```tsx
-import { TableView } from "@/components/TableView";
-```
-
-## When to use it directly
-
-| Situation | Use |
-|---|---|
-| You want the standard tabbed multi-view UI | `DataViewsLayout` — it mounts `TableView` for you. Don't render this yourself. |
-| You want a custom layout (e.g. table beside a kanban) | Render `TableView` directly with state from `useDataViewsState`. |
-| You only ever need a table and nothing else | Render `TableView` directly, or just use the simpler [`Table`](./table.md) / [`DataTable`](./data-table.md). |
-
-## Composable Mode example
-
-`TableView` is controlled — it does not own field detection or config. Pull those from `useDataViewsState` (which auto-detects fields and columns from your data) and pass them down.
-
-```tsx
-import { TableView } from "@/components/TableView";
-import { useDataViewsState } from "@/hooks/useDataViewsState";
-import type { FieldConfig } from "@/components/FieldConfig";
-
-const employees = [
-  { id: 1, name: "Ada Lovelace", role: "Engineer", salary: 120000, joinDate: "2024-04-12" },
-  { id: 2, name: "Linus Torvalds", role: "Engineer", salary: 145000, joinDate: "2023-09-01" },
-]
-
-const fields: FieldConfig[] = [
-  { path: "name", label: "Name", type: "text" },
-  { path: "role", type: "text", filterable: true },
-  { path: "salary", type: "currency", currency: "USD" },
-  { path: "joinDate", type: "date-format", dateFormat: "YYYY-MM-DD" },
-]
-
-function EmployeesTable() {
-  const state = useDataViewsState({ data: employees, fields })
-  return (
-    <TableView
-      data={state.flatItems}
-      fields={state.resolvedFields}
-      config={state.config}
-      onSortChange={(sortBy, sortOrder) =>
-        state.setConfig({ ...state.config, sortBy, sortOrder })
-      }
-      filterState={state.filterState}
-      onFilterChange={state.setFilterState}
-    />
-  )
-}
-```
-
-### Hide the inline filter panel
-
-```tsx
-<TableView
-  data={state.flatItems}
-  fields={state.resolvedFields}
-  config={state.config}
-  showFilters={false}
-/>
-```
-
-### Controlled sorting
-
-`TableView` does not sort internally — it calls `onSortChange` and reads the
-active sort from `config.sortBy` / `config.sortOrder`. Wire it to your config
-state (or your backend) to make headers interactive.
-
-```tsx
-<TableView
-  data={rows}
-  fields={fields}
-  config={{ defaultView: "table", sortBy: "name", sortOrder: "asc" }}
-  onSortChange={(sortBy, sortOrder) => refetch({ sortBy, sortOrder })}
-/>
-```
-
-## API Reference
-
-### `TableViewProps`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `data` | `DynamicRecord[]` | — (required) | Flat array of rows to render. In composable mode pass `state.flatItems`. |
-| `fields` | `FieldConfig[]` | — (required) | Field map controlling which columns render and how cells format. Pass `state.resolvedFields` for auto-detected fields. |
-| `config` | `ViewConfig` | — (required) | View config. `sortBy` / `sortOrder` drive the active sort indicator. |
-| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides (visibility/order). Usually derived from `fields`. |
-| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when row data changes (e.g. inline selection). |
-| `onSortChange` | `(sortBy: string, sortOrder: "asc" \| "desc") => void` | `undefined` | Fires on header click. When omitted, headers are not sortable. |
-| `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
-| `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
-| `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. When provided, the view is controlled. |
-| `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
-
-`DynamicColumnConfig`, `DynamicFilterConfig`, `FilterState`, and `FieldConfig`
-share the same shapes documented in
-[`DataViewsLayout`](./data-views-layout.md#api-reference).
-
-## Accessibility
-
-- Built on the accessible [`Table`](./table.md) primitive (semantic `<table>` markup, sortable headers).
-- Row selection uses `TableCheckbox` with proper labelling.
-- Filter checkboxes carry labels and `htmlFor` linkage.
-
-## Theming
-
-Uses only `*-presentation-*` design tokens. Wrap with `ThemeProvider` or pass a
-`theme` to the parent `DataViewsLayout` to control the color scheme.
-
-## Related
-
-- [`DataViewsLayout`](./data-views-layout.md) — the tabbed multi-view container that renders this for you
-- [`KanbanView`](./kanban-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — the sibling views
-- [`Table`](./table.md) / [`DataTable`](./data-table.md) — lower-level table components
-- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)

package/docs/components/tree-view.md

@@ -1,147 +0,0 @@
----
-title: TreeView
-description: Standalone hierarchical tree view for DataViews — a sidebar tree of nodes with a right pane (table or card) for the selected node. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
-group: Data Display
-keywords: [data-views, tree-view, tree, hierarchy, nested, sidebar, parent-child, children, composable, dynamic-data]
----
-
-# TreeView
-
-> The tree renderer behind `DataViewsLayout`'s "Tree" tab. It builds a hierarchy from your records (via a `children[]` array or a `parentId` reference) and shows a sidebar tree with a right pane for the selected node. In tab mode the layout renders it for you — and auto-hides the Tree tab when no hierarchy is detected. Render it directly only in **Composable Mode**.
-
-## Installation
-
-TORCH Glare is a copy-in library: the CLI copies this component's source into your project
-(you do **not** install it from the npm package). Run `init` once, then `add`:
-
-```bash
-npx torch-glare@latest init
-npx torch-glare@latest add TreeView
-```
-
-`add` also copies any components, hooks, and utilities that `TreeView` depends on.
-
-## Import
-
-Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
-
-```tsx
-import { TreeView } from "@/components/TreeView";
-```
-
-## When to use it directly
-
-| Situation | Use |
-|---|---|
-| You want the standard tabbed multi-view UI | `DataViewsLayout` — the Tree tab appears automatically when hierarchy is detected. |
-| You want a custom layout with an always-on tree | Render `TreeView` directly with state from `useDataViewsState`. |
-| You want a file/folder tree without the data-grid pane | Use [`TreeFolder`](./tree-drop-down.md) or [`TreeSubLayout`](./tree-sub-layout.md) instead. |
-
-## Hierarchy detection
-
-`TreeView` auto-detects shape from your data. Override with `treeConfig`:
-
-- **Nested** — each record carries a `children: []` array.
-- **Flat / adjacency list** — each record carries a `parentId` (or similar) pointing at its parent's id.
-
-```tsx
-// nested
-const departments = [
-  { id: 1, name: "Engineering", children: [
-    { id: 2, name: "Platform" },
-    { id: 3, name: "Product" },
-  ]},
-]
-
-// flat
-const rows = [
-  { id: 1, name: "Engineering", parentId: null },
-  { id: 2, name: "Platform", parentId: 1 },
-]
-```
-
-## Composable Mode example
-
-```tsx
-import { TreeView } from "@/components/TreeView";
-import { useDataViewsState } from "@/hooks/useDataViewsState";
-import type { FieldConfig } from "@/components/FieldConfig";
-import type { TreeConfig } from "@/components/TreeConfig";
-
-const fields: FieldConfig[] = [
-  { path: "name", type: "text" },
-  { path: "headcount", type: "number" },
-]
-
-const treeConfig: TreeConfig = {
-  childrenField: "children",
-  nodeLabel: "name",
-  defaultExpanded: "roots",      // "all" | "roots" | "none"
-  defaultRightPane: "table",     // "table" | "card"
-}
-
-function OrgTree() {
-  const state = useDataViewsState({ data: departments, fields, treeConfig })
-  return (
-    <TreeView
-      data={state.items}
-      fields={state.resolvedFields}
-      config={state.config}
-      treeConfig={treeConfig}
-    />
-  )
-}
-```
-
-## API Reference
-
-### `TreeViewProps`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `data` | `DynamicRecord[]` | — (required) | Records to build the hierarchy from. Pass `state.items` (nested) in composable mode. |
-| `fields` | `FieldConfig[]` | — (required) | Field map for the right-pane table/card. Pass `state.resolvedFields`. |
-| `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
-| `treeConfig` | `TreeConfig` | auto-detected | Hierarchy + expansion + right-pane config (see below). |
-| `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides for the right-pane table. |
-| `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when nodes move (drag-and-drop reparent), if `dndEnabled`. |
-| `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
-| `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
-| `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. |
-| `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
-
-### `TreeConfig`
-
-```ts
-type TreeConfig = {
-  childrenField?: string      // nested mode: array property holding children
-  parentField?: string        // flat mode: property pointing at the parent id
-  idField?: string            // id property (default "id")
-  orderField?: string         // optional ordering within siblings
-  nodeLabel?: string          // which field labels each tree node
-  defaultExpanded?: "all" | "roots" | "none"
-  defaultRightPane?: "table" | "card"   // "details" accepted as a deprecated alias of "card"
-  dndEnabled?: boolean        // enable drag-and-drop reparenting
-}
-```
-
-See [`DataViewsLayout`](./data-views-layout.md#fieldconfig) for `FieldConfig`,
-`FilterState`, and related shapes.
-
-## Accessibility
-
-- Tree rows expose `role="treeitem"` with `aria-expanded` and `aria-selected`.
-- On mobile the sidebar collapses into a drawer with a labelled trigger.
-- The right-pane table inherits [`TableView`](./table-view.md)'s accessibility.
-
-## Theming
-
-Uses only `*-presentation-*` design tokens. Control the scheme via the parent
-`DataViewsLayout`'s `theme`.
-
-## Related
-
-- [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
-- [`TableView`](./table-view.md) · [`KanbanView`](./kanban-view.md) · [`InboxView`](./inbox-view.md) — sibling views
-- [`TreeFolder`](./tree-drop-down.md) / [`TreeSubLayout`](./tree-sub-layout.md) — non-grid tree navigation
-- [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)

package/docs/how-to/data-views-from-backend-response.md

@@ -1,194 +0,0 @@
----
-title: Render a backend response with DataViews
-description: Recipes for turning common backend JSON shapes into a DataViewsLayout — flat lists, nested hierarchies, inbox/message shapes, and server-driven filtering.
-group: how-to
-keywords: [data-views, recipes, backend, json, api, flat, nested, hierarchy, inbox, server-side, filtering, pagination, how-to]
----
-
-# Render a backend response with DataViews
-
-The goal of [`DataViewsLayout`](../components/data-views-layout.md) is "one
-backend response → many UI shapes." This guide maps the JSON shapes you get
-back from an API to the props that turn them into a working view.
-
-## TL;DR
-
-```tsx
-import { DataViewsLayout } from "@/components/DataViewsLayout";
-
-// the simplest possible case — just pass the array
-<DataViewsLayout title="Records" data={await api.get("/records")} />
-```
-
-Everything below is about refining that default for specific shapes.
-
-## Recipe 1 — Flat list of objects
-
-The most common API response. Pass it straight in; every primitive field
-becomes a column and the Table/Kanban/Inbox tabs all work. The Tree tab
-auto-hides because there's no hierarchy.
-
-```tsx
-// GET /employees → [{ id, name, role, salary, joinDate }, ...]
-<DataViewsLayout title="Employees" data={employees} />
-```
-
-Add a declarative `fields` map when you want typed rendering (currencies,
-badges, dates) and filters:
-
-```tsx
-import type { FieldConfig } from "@/components/FieldConfig";
-
-const fields: FieldConfig[] = [
-  { path: "name", label: "Name", type: "text" },
-  { path: "role", type: "text", filterable: true },
-  { path: "salary", type: "currency", currency: "USD", filterable: true },
-  { path: "joinDate", type: "date-format", dateFormat: "YYYY-MM-DD" },
-]
-
-<DataViewsLayout title="Employees" data={employees} fields={fields} />
-```
-
-## Recipe 2 — Status field → Kanban board
-
-When a record has a status-like field, group it into a board. Use
-`enum-badge` + `kanbanVariants` to color each column.
-
-```tsx
-// GET /tasks → [{ id, title, status: "Todo" | "In Progress" | "Done" }, ...]
-const fields: FieldConfig[] = [
-  { path: "title", type: "text" },
-  {
-    path: "status",
-    type: "enum-badge",
-    kanbanVariants: {
-      Todo: { label: "To Do", color: "gray" },
-      "In Progress": { label: "In Progress", color: "blue" },
-      Done: { label: "Done", color: "green" },
-    },
-  },
-]
-
-<DataViewsLayout
-  title="Tasks"
-  data={tasks}
-  fields={fields}
-  views={{ table: true, kanban: true }}
-  kanbanGroupBy="status"
-/>
-```
-
-## Recipe 3 — Nested objects (dot-paths)
-
-APIs often nest related data. Reference it with dot-paths — no flattening
-needed.
-
-```tsx
-// GET /orders → [{ id, total, customer: { name, email } }, ...]
-const fields: FieldConfig[] = [
-  { path: "id", label: "Order #", type: "number" },
-  { path: "customer.name", label: "Customer", type: "text" },
-  { path: "customer.email", label: "Email", type: "link", linkType: "mailto" },
-  { path: "total", type: "currency", currency: "USD" },
-]
-
-<DataViewsLayout title="Orders" data={orders} fields={fields} />
-```
-
-## Recipe 4 — Hierarchy (nested `children[]` or flat `parentId`)
-
-When records form a tree, the Tree tab appears automatically. Both shapes work:
-
-```tsx
-// Nested: GET /departments → [{ id, name, children: [...] }]
-<DataViewsLayout
-  data={departments}
-  treeConfig={{ childrenField: "children", nodeLabel: "name", defaultExpanded: "roots" }}
-/>
-
-// Flat / adjacency list: GET /nodes → [{ id, name, parentId }]
-<DataViewsLayout
-  data={nodes}
-  treeConfig={{ parentField: "parentId", idField: "id", nodeLabel: "name" }}
-/>
-```
-
-## Recipe 5 — Message/inbox shape
-
-For mailbox-like data, the Inbox view auto-detects `isRead`, `isStarred`,
-`hasAttachment`, and `priority`. Map title/preview/date with `inboxConfig`.
-
-```tsx
-// GET /messages → [{ id, subject, from: { name }, isRead, isStarred, sentAt }]
-<DataViewsLayout
-  data={messages}
-  views={{ inbox: true }}
-  inboxConfig={{ titlePath: "subject", previewPath: "from.name", dateField: "sentAt" }}
-/>
-```
-
-## Recipe 6 — Server-driven filtering & pagination
-
-Make the layout controlled: hold `filterState` yourself and refetch when it
-changes. This keeps the URL/server as the source of truth.
-
-```tsx
-import { useState, useEffect } from "react"
-import type { FilterState } from "@/components/FilterState";
-
-function ServerDriven() {
-  const [rows, setRows] = useState([])
-  const [filterState, setFilterState] = useState<FilterState>({})
-
-  useEffect(() => {
-    api.get("/records", { params: { filters: filterState } }).then(setRows)
-  }, [filterState])
-
-  return (
-    <DataViewsLayout
-      data={rows}
-      fields={fields}
-      filterState={filterState}
-      onFilterChange={setFilterState}
-    />
-  )
-}
-```
-
-## Recipe 7 — Custom layout (composable mode)
-
-When tabs aren't what you want — e.g. a table beside a kanban — bypass
-`DataViewsLayout` and compose the views with `useDataViewsState`.
-
-```tsx
-import { KanbanView } from "@/components/KanbanView";
-import { TableView } from "@/components/TableView";
-import { useDataViewsState } from "@/hooks/useDataViewsState";
-
-function SplitScreen({ data, fields }) {
-  const state = useDataViewsState({ data, fields })
-  return (
-    <div className="grid grid-cols-2 gap-4 h-screen">
-      <TableView data={state.flatItems} fields={state.resolvedFields} config={state.config} showFilters={false} />
-      <KanbanView data={state.flatItems} fields={state.resolvedFields} config={state.config} groupByField="status" />
-    </div>
-  )
-}
-```
-
-See each view's reference: [TableView](../components/table-view.md) ·
-[KanbanView](../components/kanban-view.md) ·
-[InboxView](../components/inbox-view.md) ·
-[TreeView](../components/tree-view.md).
-
-## Gotchas
-
-- **Empty `data`** → all views render their empty state; pass `isLoading` upstream if you fetch async.
-- **Tree tab missing?** No hierarchy was detected. Supply `treeConfig` explicitly or check your `childrenField` / `parentField`.
-- **Unwanted filters?** The panel auto-detects filterable text fields with few unique values (e.g. `id`, `name`). Set `filterable: false` on a field to exclude it. For a field with many options, set `filterVariant: "searchable-select"` to render a searchable dropdown instead of a long checkbox list.
-- **Saved Views don't persist** in tab mode — that's a known limitation documented in [`DataViewsConfigPanel`](../components/data-views-config-panel.md). Use composable mode for real persistence.
-
-## Related
-
-- [`DataViewsLayout`](../components/data-views-layout.md) — full prop reference
-- [`DataViewsConfigPanel`](../components/data-views-config-panel.md) — settings/filters panel