torch-glare-mcp 1.2.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/docs/components/inbox-view.md +150 -0
  2. package/docs/components/kanban-view.md +125 -0
  3. package/docs/components/table-view.md +131 -0
  4. package/docs/components/tree-view.md +136 -0
  5. package/docs/how-to/data-views-from-backend-response.md +191 -0
  6. package/docs/llms-manifest.json +407 -78
  7. package/package.json +1 -1
package/docs/components/inbox-view.md ADDED
@@ -0,0 +1,150 @@
1
+ ---
2
+ title: InboxView
3
+ description: Standalone inbox/list view for DataViews — a master list with read/starred/priority states and an optional detail pane. Use inside DataViewsLayout (tab mode) or directly in Composable Mode.
4
+ group: Data Display
5
+ keywords: [data-views, inbox-view, inbox, list, master-detail, read, starred, priority, attachment, composable, dynamic-data]
6
+ ---
7
+
8
+ # InboxView
9
+
10
+ > The inbox renderer behind `DataViewsLayout`'s "Inbox" tab. It renders records as a scannable list with read / starred / priority / attachment affordances, plus an optional detail pane. In tab mode the layout renders it for you; render it directly only in **Composable Mode**.
11
+
12
+ ## Installation
13
+
14
+ Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Badge`, `Button`, `Avatar`, `Card`, `Divider`, and `TabFormItem` components plus `lucide-react`.
15
+
16
+ ## Import
17
+
18
+ ```tsx
19
+ import { InboxView, useDataViewsState } from "torch-glare"
20
+ import type { InboxViewProps, InboxConfig, FieldConfig } from "torch-glare"
21
+ ```
22
+
23
+ ## When to use it directly
24
+
25
+ | Situation | Use |
26
+ |---|---|
27
+ | You want the standard tabbed multi-view UI | `DataViewsLayout` with `views={{ inbox: true }}` — it mounts `InboxView` for you. |
28
+ | You want a custom master-detail layout | Render `InboxView` directly with state from `useDataViewsState`, and supply `renderDetail`. |
29
+
30
+ ## Field auto-detection
31
+
32
+ InboxView auto-detects these record fields and maps them to UI affordances.
33
+ Override any of them with `inboxConfig`.
34
+
35
+ | Detected field | Affordance |
36
+ |---|---|
37
+ | `isRead` | Read/unread weight |
38
+ | `isStarred` | Star toggle |
39
+ | `hasAttachment` | Paperclip icon |
40
+ | `priority` | Priority flag |
41
+
42
+ ## Composable Mode example
43
+
44
+ ```tsx
45
+ import { InboxView, useDataViewsState } from "torch-glare"
46
+ import type { FieldConfig, InboxConfig } from "torch-glare"
47
+
48
+ const messages = [
49
+ { id: 1, subject: "Welcome", from: { name: "Ada" }, isRead: false, isStarred: true, sentAt: "2024-06-01" },
50
+ { id: 2, subject: "Invoice", from: { name: "Billing" }, isRead: true, hasAttachment: true, sentAt: "2024-06-02" },
51
+ ]
52
+
53
+ const fields: FieldConfig[] = [
54
+ { path: "subject", type: "text" },
55
+ { path: "from.name", label: "From", type: "text" },
56
+ { path: "sentAt", type: "date-format", dateFormat: "YYYY-MM-DD" },
57
+ ]
58
+
59
+ const inboxConfig: InboxConfig = {
60
+ titlePath: "subject",
61
+ previewPath: "from.name",
62
+ dateField: "sentAt",
63
+ }
64
+
65
+ function Mailbox() {
66
+ const state = useDataViewsState({ data: messages, fields })
67
+ const [selectedId, setSelectedId] = useState<number | null>(null)
68
+ return (
69
+ <InboxView
70
+ data={state.flatItems}
71
+ fields={state.resolvedFields}
72
+ config={state.config}
73
+ inboxConfig={inboxConfig}
74
+ selectedItemId={selectedId}
75
+ renderDetail={(item) =>
76
+ item ? <MessageDetail message={item} /> : <Empty />
77
+ }
78
+ />
79
+ )
80
+ }
81
+ ```
82
+
83
+ ### Link rows to routes (framework-agnostic)
84
+
85
+ `itemHref` turns each row into a link. The underlying card renders a plain `<a>`
86
+ by default, so it works in any framework.
87
+
88
+ ```tsx
89
+ <InboxView
90
+ data={state.flatItems}
91
+ fields={state.resolvedFields}
92
+ config={state.config}
93
+ itemHref={(item, id) => `/messages/${id}`}
94
+ />
95
+ ```
96
+
97
+ ## API Reference
98
+
99
+ ### `InboxViewProps`
100
+
101
+ | Prop | Type | Default | Description |
102
+ |---|---|---|---|
103
+ | `data` | `DynamicRecord[]` | — (required) | Records to render as list items. Pass `state.flatItems`. |
104
+ | `fields` | `FieldConfig[]` | — (required) | Field map controlling list-item content. Pass `state.resolvedFields`. |
105
+ | `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
106
+ | `inboxConfig` | `InboxConfig` | auto-detected | Overrides for which record paths map to title/preview/avatar/date/read/starred/attachment/priority. |
107
+ | `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides. Usually derived from `fields`. |
108
+ | `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when item data changes (e.g. toggling read/starred). |
109
+ | `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
110
+ | `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
111
+ | `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. |
112
+ | `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
113
+ | `itemHref` | `(item: DynamicRecord, id: any) => string` | `undefined` | When set, each row becomes a link to the returned href. |
114
+ | `selectedItemId` | `any` | `undefined` | Id of the currently selected row (drives the detail pane + highlight). |
115
+ | `renderDetail` | `(item: DynamicRecord \| null) => ReactNode` | `undefined` | Renders the right-hand detail pane for the selected item. |
116
+
117
+ ### `InboxConfig`
118
+
119
+ ```ts
120
+ type InboxConfig = {
121
+ starredField?: string
122
+ readField?: string
123
+ attachmentField?: string
124
+ priorityField?: string
125
+ titlePath?: string
126
+ previewPath?: string
127
+ avatarPath?: string
128
+ dateField?: string
129
+ }
130
+ ```
131
+
132
+ See [`DataViewsLayout`](./data-views-layout.md#fieldconfig) for `FieldConfig`,
133
+ `FilterState`, and related shapes.
134
+
135
+ ## Accessibility
136
+
137
+ - The all/starred/priority switcher uses [`TabFormItem`](./tab-form-item.md) (full keyboard support).
138
+ - Star/archive/delete actions are real `<button>`s with accessible labels.
139
+ - Avatars fall back to initials via [`Avatar`](./avatar.md).
140
+
141
+ ## Theming
142
+
143
+ Uses only `*-presentation-*` design tokens. Control the scheme via the parent
144
+ `DataViewsLayout`'s `theme`.
145
+
146
+ ## Related
147
+
148
+ - [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
149
+ - [`TableView`](./table-view.md) · [`KanbanView`](./kanban-view.md) · [`TreeView`](./tree-view.md) — sibling views
150
+ - [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)
package/docs/components/kanban-view.md ADDED
@@ -0,0 +1,125 @@
1
+ ---
2
+ title: KanbanView
3
+ 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.
4
+ group: Data Display
5
+ keywords: [data-views, kanban-view, kanban, board, columns, group-by, cards, composable, dynamic-data, fields]
6
+ ---
7
+
8
+ # KanbanView
9
+
10
+ > 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**.
11
+
12
+ ## Installation
13
+
14
+ Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Button` component, the `DataViewCard` layout, and `lucide-react`.
15
+
16
+ ## Import
17
+
18
+ ```tsx
19
+ import { KanbanView, useDataViewsState } from "torch-glare"
20
+ import type { KanbanViewProps, FieldConfig } from "torch-glare"
21
+ ```
22
+
23
+ ## When to use it directly
24
+
25
+ | Situation | Use |
26
+ |---|---|
27
+ | You want the standard tabbed multi-view UI | `DataViewsLayout` with `views={{ kanban: true }}` — it mounts `KanbanView` for you. |
28
+ | You want a custom layout (e.g. kanban beside a table) | Render `KanbanView` directly with state from `useDataViewsState`. |
29
+
30
+ ## Composable Mode example
31
+
32
+ `KanbanView` groups by the `groupByField` path — every distinct value becomes a
33
+ column. Column colors are assigned deterministically, or per-value via the
34
+ field's `kanbanVariants`.
35
+
36
+ ```tsx
37
+ import { KanbanView, useDataViewsState } from "torch-glare"
38
+ import type { FieldConfig } from "torch-glare"
39
+
40
+ const tasks = [
41
+ { id: 1, title: "Spec API", status: "Todo", assignee: "Ada" },
42
+ { id: 2, title: "Build UI", status: "In Progress", assignee: "Linus" },
43
+ { id: 3, title: "Ship", status: "Done", assignee: "Grace" },
44
+ ]
45
+
46
+ const fields: FieldConfig[] = [
47
+ { path: "title", type: "text" },
48
+ {
49
+ path: "status",
50
+ type: "enum-badge",
51
+ kanbanVariants: {
52
+ Todo: { label: "To Do", color: "gray" },
53
+ "In Progress": { label: "In Progress", color: "blue" },
54
+ Done: { label: "Done", color: "green" },
55
+ },
56
+ },
57
+ { path: "assignee", type: "text" },
58
+ ]
59
+
60
+ function TaskBoard() {
61
+ const state = useDataViewsState({ data: tasks, fields })
62
+ return (
63
+ <KanbanView
64
+ data={state.flatItems}
65
+ fields={state.resolvedFields}
66
+ config={state.config}
67
+ groupByField="status"
68
+ titleField="title"
69
+ />
70
+ )
71
+ }
72
+ ```
73
+
74
+ ### Column header actions
75
+
76
+ Pass `onColumnAction` to show an overflow (⋯) button on each column header. When
77
+ omitted the button is hidden.
78
+
79
+ ```tsx
80
+ <KanbanView
81
+ data={state.flatItems}
82
+ fields={state.resolvedFields}
83
+ config={state.config}
84
+ groupByField="status"
85
+ onColumnAction={(columnId) => openColumnMenu(columnId)}
86
+ />
87
+ ```
88
+
89
+ ## API Reference
90
+
91
+ ### `KanbanViewProps`
92
+
93
+ | Prop | Type | Default | Description |
94
+ |---|---|---|---|
95
+ | `data` | `DynamicRecord[]` | — (required) | Records to group into columns. Pass `state.flatItems` in composable mode. |
96
+ | `fields` | `FieldConfig[]` | — (required) | Field map controlling card content. Pass `state.resolvedFields`. |
97
+ | `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
98
+ | `groupByField` | `string` | `"status"` | Dot-path to the field whose distinct values become columns. |
99
+ | `titleField` | `string` | first visible non-group field | Dot-path of the field rendered as the card title. |
100
+ | `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides. Usually derived from `fields`. |
101
+ | `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when a card moves between columns (updates the group-by value). |
102
+ | `onColumnAction` | `(columnId: string) => void` | `undefined` | Click handler for the column header overflow button. When omitted, the button is hidden. |
103
+
104
+ Per-column colors come from each field's `kanbanVariants` map
105
+ (`{ [value]: { label?, color? } }`). Available `color` keys: `gray`, `purple`,
106
+ `orange`, `blue`, `green`, `red`. See
107
+ [`DataViewsLayout`](./data-views-layout.md#fieldconfig) for the full
108
+ `FieldConfig` shape.
109
+
110
+ ## Accessibility
111
+
112
+ - Cards are keyboard-focusable; the column overflow button is a real `<button>`.
113
+ - Card titles use semantic heading markup within each [`DataViewCard`](./card.md).
114
+
115
+ ## Theming
116
+
117
+ Uses `*-presentation-*` tokens plus a small set of deeply-saturated column-header
118
+ fills matched to `glare-torch-mode` raw tokens. Control the scheme via the
119
+ parent `DataViewsLayout`'s `theme`.
120
+
121
+ ## Related
122
+
123
+ - [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
124
+ - [`TableView`](./table-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — sibling views
125
+ - [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)
package/docs/components/table-view.md ADDED
@@ -0,0 +1,131 @@
1
+ ---
2
+ title: TableView
3
+ 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.
4
+ group: Data Display
5
+ keywords: [data-views, table-view, table, sortable, columns, selection, filter, composable, dynamic-data, fields]
6
+ ---
7
+
8
+ # TableView
9
+
10
+ > 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`.
11
+
12
+ ## Installation
13
+
14
+ Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It depends on the shared `Card`, `Checkbox`, and `Table` components plus the colocated `FilterPanel`.
15
+
16
+ ## Import
17
+
18
+ ```tsx
19
+ import { TableView, useDataViewsState } from "torch-glare"
20
+ import type { TableViewProps, FieldConfig } from "torch-glare"
21
+ ```
22
+
23
+ ## When to use it directly
24
+
25
+ | Situation | Use |
26
+ |---|---|
27
+ | You want the standard tabbed multi-view UI | `DataViewsLayout` — it mounts `TableView` for you. Don't render this yourself. |
28
+ | You want a custom layout (e.g. table beside a kanban) | Render `TableView` directly with state from `useDataViewsState`. |
29
+ | You only ever need a table and nothing else | Render `TableView` directly, or just use the simpler [`Table`](./table.md) / [`DataTable`](./data-table.md). |
30
+
31
+ ## Composable Mode example
32
+
33
+ `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.
34
+
35
+ ```tsx
36
+ import { TableView, useDataViewsState } from "torch-glare"
37
+ import type { FieldConfig } from "torch-glare"
38
+
39
+ const employees = [
40
+ { id: 1, name: "Ada Lovelace", role: "Engineer", salary: 120000, joinDate: "2024-04-12" },
41
+ { id: 2, name: "Linus Torvalds", role: "Engineer", salary: 145000, joinDate: "2023-09-01" },
42
+ ]
43
+
44
+ const fields: FieldConfig[] = [
45
+ { path: "name", label: "Name", type: "text" },
46
+ { path: "role", type: "text", filterable: true },
47
+ { path: "salary", type: "currency", currency: "USD" },
48
+ { path: "joinDate", type: "date-format", dateFormat: "YYYY-MM-DD" },
49
+ ]
50
+
51
+ function EmployeesTable() {
52
+ const state = useDataViewsState({ data: employees, fields })
53
+ return (
54
+ <TableView
55
+ data={state.flatItems}
56
+ fields={state.resolvedFields}
57
+ config={state.config}
58
+ onSortChange={(sortBy, sortOrder) =>
59
+ state.setConfig({ ...state.config, sortBy, sortOrder })
60
+ }
61
+ filterState={state.filterState}
62
+ onFilterChange={state.setFilterState}
63
+ />
64
+ )
65
+ }
66
+ ```
67
+
68
+ ### Hide the inline filter panel
69
+
70
+ ```tsx
71
+ <TableView
72
+ data={state.flatItems}
73
+ fields={state.resolvedFields}
74
+ config={state.config}
75
+ showFilters={false}
76
+ />
77
+ ```
78
+
79
+ ### Controlled sorting
80
+
81
+ `TableView` does not sort internally — it calls `onSortChange` and reads the
82
+ active sort from `config.sortBy` / `config.sortOrder`. Wire it to your config
83
+ state (or your backend) to make headers interactive.
84
+
85
+ ```tsx
86
+ <TableView
87
+ data={rows}
88
+ fields={fields}
89
+ config={{ defaultView: "table", sortBy: "name", sortOrder: "asc" }}
90
+ onSortChange={(sortBy, sortOrder) => refetch({ sortBy, sortOrder })}
91
+ />
92
+ ```
93
+
94
+ ## API Reference
95
+
96
+ ### `TableViewProps`
97
+
98
+ | Prop | Type | Default | Description |
99
+ |---|---|---|---|
100
+ | `data` | `DynamicRecord[]` | — (required) | Flat array of rows to render. In composable mode pass `state.flatItems`. |
101
+ | `fields` | `FieldConfig[]` | — (required) | Field map controlling which columns render and how cells format. Pass `state.resolvedFields` for auto-detected fields. |
102
+ | `config` | `ViewConfig` | — (required) | View config. `sortBy` / `sortOrder` drive the active sort indicator. |
103
+ | `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides (visibility/order). Usually derived from `fields`. |
104
+ | `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when row data changes (e.g. inline selection). |
105
+ | `onSortChange` | `(sortBy: string, sortOrder: "asc" \| "desc") => void` | `undefined` | Fires on header click. When omitted, headers are not sortable. |
106
+ | `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
107
+ | `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
108
+ | `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. When provided, the view is controlled. |
109
+ | `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
110
+
111
+ `DynamicColumnConfig`, `DynamicFilterConfig`, `FilterState`, and `FieldConfig`
112
+ share the same shapes documented in
113
+ [`DataViewsLayout`](./data-views-layout.md#api-reference).
114
+
115
+ ## Accessibility
116
+
117
+ - Built on the accessible [`Table`](./table.md) primitive (semantic `<table>` markup, sortable headers).
118
+ - Row selection uses `TableCheckbox` with proper labelling.
119
+ - Filter checkboxes carry labels and `htmlFor` linkage.
120
+
121
+ ## Theming
122
+
123
+ Uses only `*-presentation-*` design tokens. Wrap with `ThemeProvider` or pass a
124
+ `theme` to the parent `DataViewsLayout` to control the color scheme.
125
+
126
+ ## Related
127
+
128
+ - [`DataViewsLayout`](./data-views-layout.md) — the tabbed multi-view container that renders this for you
129
+ - [`KanbanView`](./kanban-view.md) · [`InboxView`](./inbox-view.md) · [`TreeView`](./tree-view.md) — the sibling views
130
+ - [`Table`](./table.md) / [`DataTable`](./data-table.md) — lower-level table components
131
+ - [How-to: Render a backend response with DataViews](../how-to/data-views-from-backend-response.md)
package/docs/components/tree-view.md ADDED
@@ -0,0 +1,136 @@
1
+ ---
2
+ title: TreeView
3
+ 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.
4
+ group: Data Display
5
+ keywords: [data-views, tree-view, tree, hierarchy, nested, sidebar, parent-child, children, composable, dynamic-data]
6
+ ---
7
+
8
+ # TreeView
9
+
10
+ > 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**.
11
+
12
+ ## Installation
13
+
14
+ Part of `torch-glare`. Ships with the `DataViews` folder when you run `npx torch-glare add DataViews` — no separate install. It reuses the sibling `TableView`, the `Card` component, a colocated tree sidebar/drawer, and `lucide-react`.
15
+
16
+ ## Import
17
+
18
+ ```tsx
19
+ import { TreeView, useDataViewsState } from "torch-glare"
20
+ import type { TreeViewProps, TreeConfig, FieldConfig } from "torch-glare"
21
+ ```
22
+
23
+ ## When to use it directly
24
+
25
+ | Situation | Use |
26
+ |---|---|
27
+ | You want the standard tabbed multi-view UI | `DataViewsLayout` — the Tree tab appears automatically when hierarchy is detected. |
28
+ | You want a custom layout with an always-on tree | Render `TreeView` directly with state from `useDataViewsState`. |
29
+ | You want a file/folder tree without the data-grid pane | Use [`TreeFolder`](./tree-drop-down.md) or [`TreeSubLayout`](./tree-sub-layout.md) instead. |
30
+
31
+ ## Hierarchy detection
32
+
33
+ `TreeView` auto-detects shape from your data. Override with `treeConfig`:
34
+
35
+ - **Nested** — each record carries a `children: []` array.
36
+ - **Flat / adjacency list** — each record carries a `parentId` (or similar) pointing at its parent's id.
37
+
38
+ ```tsx
39
+ // nested
40
+ const departments = [
41
+ { id: 1, name: "Engineering", children: [
42
+ { id: 2, name: "Platform" },
43
+ { id: 3, name: "Product" },
44
+ ]},
45
+ ]
46
+
47
+ // flat
48
+ const rows = [
49
+ { id: 1, name: "Engineering", parentId: null },
50
+ { id: 2, name: "Platform", parentId: 1 },
51
+ ]
52
+ ```
53
+
54
+ ## Composable Mode example
55
+
56
+ ```tsx
57
+ import { TreeView, useDataViewsState } from "torch-glare"
58
+ import type { FieldConfig, TreeConfig } from "torch-glare"
59
+
60
+ const fields: FieldConfig[] = [
61
+ { path: "name", type: "text" },
62
+ { path: "headcount", type: "number" },
63
+ ]
64
+
65
+ const treeConfig: TreeConfig = {
66
+ childrenField: "children",
67
+ nodeLabel: "name",
68
+ defaultExpanded: "roots", // "all" | "roots" | "none"
69
+ defaultRightPane: "table", // "table" | "card"
70
+ }
71
+
72
+ function OrgTree() {
73
+ const state = useDataViewsState({ data: departments, fields, treeConfig })
74
+ return (
75
+ <TreeView
76
+ data={state.items}
77
+ fields={state.resolvedFields}
78
+ config={state.config}
79
+ treeConfig={treeConfig}
80
+ />
81
+ )
82
+ }
83
+ ```
84
+
85
+ ## API Reference
86
+
87
+ ### `TreeViewProps`
88
+
89
+ | Prop | Type | Default | Description |
90
+ |---|---|---|---|
91
+ | `data` | `DynamicRecord[]` | — (required) | Records to build the hierarchy from. Pass `state.items` (nested) in composable mode. |
92
+ | `fields` | `FieldConfig[]` | — (required) | Field map for the right-pane table/card. Pass `state.resolvedFields`. |
93
+ | `config` | `ViewConfig` | — (required) | View config from `useDataViewsState`. |
94
+ | `treeConfig` | `TreeConfig` | auto-detected | Hierarchy + expansion + right-pane config (see below). |
95
+ | `columns` | `DynamicColumnConfig[]` | `undefined` | Explicit column overrides for the right-pane table. |
96
+ | `onDataUpdate` | `(data: DynamicRecord[]) => void` | `undefined` | Called when nodes move (drag-and-drop reparent), if `dndEnabled`. |
97
+ | `filters` | `DynamicFilterConfig[]` | `undefined` | Explicit filter definitions. Usually inferred from `filterable` fields. |
98
+ | `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
99
+ | `onFilterChange` | `(filters: FilterState) => void` | `undefined` | Fires when a filter changes. |
100
+ | `showFilters` | `boolean` | `true` | Show the integrated filter panel. |
101
+
102
+ ### `TreeConfig`
103
+
104
+ ```ts
105
+ type TreeConfig = {
106
+ childrenField?: string // nested mode: array property holding children
107
+ parentField?: string // flat mode: property pointing at the parent id
108
+ idField?: string // id property (default "id")
109
+ orderField?: string // optional ordering within siblings
110
+ nodeLabel?: string // which field labels each tree node
111
+ defaultExpanded?: "all" | "roots" | "none"
112
+ defaultRightPane?: "table" | "card" // "details" accepted as a deprecated alias of "card"
113
+ dndEnabled?: boolean // enable drag-and-drop reparenting
114
+ }
115
+ ```
116
+
117
+ See [`DataViewsLayout`](./data-views-layout.md#fieldconfig) for `FieldConfig`,
118
+ `FilterState`, and related shapes.
119
+
120
+ ## Accessibility
121
+
122
+ - Tree rows expose `role="treeitem"` with `aria-expanded` and `aria-selected`.
123
+ - On mobile the sidebar collapses into a drawer with a labelled trigger.
124
+ - The right-pane table inherits [`TableView`](./table-view.md)'s accessibility.
125
+
126
+ ## Theming
127
+
128
+ Uses only `*-presentation-*` design tokens. Control the scheme via the parent
129
+ `DataViewsLayout`'s `theme`.
130
+
131
+ ## Related
132
+
133
+ - [`DataViewsLayout`](./data-views-layout.md) — the tabbed container that renders this for you
134
+ - [`TableView`](./table-view.md) · [`KanbanView`](./kanban-view.md) · [`InboxView`](./inbox-view.md) — sibling views
135
+ - [`TreeFolder`](./tree-drop-down.md) / [`TreeSubLayout`](./tree-sub-layout.md) — non-grid tree navigation
136
+ - [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 ADDED
@@ -0,0 +1,191 @@
1
+ ---
2
+ title: Render a backend response with DataViews
3
+ description: Recipes for turning common backend JSON shapes into a DataViewsLayout — flat lists, nested hierarchies, inbox/message shapes, and server-driven filtering.
4
+ group: how-to
5
+ keywords: [data-views, recipes, backend, json, api, flat, nested, hierarchy, inbox, server-side, filtering, pagination, how-to]
6
+ ---
7
+
8
+ # Render a backend response with DataViews
9
+
10
+ The goal of [`DataViewsLayout`](../components/data-views-layout.md) is "one
11
+ backend response → many UI shapes." This guide maps the JSON shapes you get
12
+ back from an API to the props that turn them into a working view.
13
+
14
+ ## TL;DR
15
+
16
+ ```tsx
17
+ import { DataViewsLayout } from "torch-glare"
18
+
19
+ // the simplest possible case — just pass the array
20
+ <DataViewsLayout title="Records" data={await api.get("/records")} />
21
+ ```
22
+
23
+ Everything below is about refining that default for specific shapes.
24
+
25
+ ## Recipe 1 — Flat list of objects
26
+
27
+ The most common API response. Pass it straight in; every primitive field
28
+ becomes a column and the Table/Kanban/Inbox tabs all work. The Tree tab
29
+ auto-hides because there's no hierarchy.
30
+
31
+ ```tsx
32
+ // GET /employees → [{ id, name, role, salary, joinDate }, ...]
33
+ <DataViewsLayout title="Employees" data={employees} />
34
+ ```
35
+
36
+ Add a declarative `fields` map when you want typed rendering (currencies,
37
+ badges, dates) and filters:
38
+
39
+ ```tsx
40
+ import type { FieldConfig } from "torch-glare"
41
+
42
+ const fields: FieldConfig[] = [
43
+ { path: "name", label: "Name", type: "text" },
44
+ { path: "role", type: "text", filterable: true },
45
+ { path: "salary", type: "currency", currency: "USD", filterable: true },
46
+ { path: "joinDate", type: "date-format", dateFormat: "YYYY-MM-DD" },
47
+ ]
48
+
49
+ <DataViewsLayout title="Employees" data={employees} fields={fields} />
50
+ ```
51
+
52
+ ## Recipe 2 — Status field → Kanban board
53
+
54
+ When a record has a status-like field, group it into a board. Use
55
+ `enum-badge` + `kanbanVariants` to color each column.
56
+
57
+ ```tsx
58
+ // GET /tasks → [{ id, title, status: "Todo" | "In Progress" | "Done" }, ...]
59
+ const fields: FieldConfig[] = [
60
+ { path: "title", type: "text" },
61
+ {
62
+ path: "status",
63
+ type: "enum-badge",
64
+ kanbanVariants: {
65
+ Todo: { label: "To Do", color: "gray" },
66
+ "In Progress": { label: "In Progress", color: "blue" },
67
+ Done: { label: "Done", color: "green" },
68
+ },
69
+ },
70
+ ]
71
+
72
+ <DataViewsLayout
73
+ title="Tasks"
74
+ data={tasks}
75
+ fields={fields}
76
+ views={{ table: true, kanban: true }}
77
+ kanbanGroupBy="status"
78
+ />
79
+ ```
80
+
81
+ ## Recipe 3 — Nested objects (dot-paths)
82
+
83
+ APIs often nest related data. Reference it with dot-paths — no flattening
84
+ needed.
85
+
86
+ ```tsx
87
+ // GET /orders → [{ id, total, customer: { name, email } }, ...]
88
+ const fields: FieldConfig[] = [
89
+ { path: "id", label: "Order #", type: "number" },
90
+ { path: "customer.name", label: "Customer", type: "text" },
91
+ { path: "customer.email", label: "Email", type: "link", linkType: "mailto" },
92
+ { path: "total", type: "currency", currency: "USD" },
93
+ ]
94
+
95
+ <DataViewsLayout title="Orders" data={orders} fields={fields} />
96
+ ```
97
+
98
+ ## Recipe 4 — Hierarchy (nested `children[]` or flat `parentId`)
99
+
100
+ When records form a tree, the Tree tab appears automatically. Both shapes work:
101
+
102
+ ```tsx
103
+ // Nested: GET /departments → [{ id, name, children: [...] }]
104
+ <DataViewsLayout
105
+ data={departments}
106
+ treeConfig={{ childrenField: "children", nodeLabel: "name", defaultExpanded: "roots" }}
107
+ />
108
+
109
+ // Flat / adjacency list: GET /nodes → [{ id, name, parentId }]
110
+ <DataViewsLayout
111
+ data={nodes}
112
+ treeConfig={{ parentField: "parentId", idField: "id", nodeLabel: "name" }}
113
+ />
114
+ ```
115
+
116
+ ## Recipe 5 — Message/inbox shape
117
+
118
+ For mailbox-like data, the Inbox view auto-detects `isRead`, `isStarred`,
119
+ `hasAttachment`, and `priority`. Map title/preview/date with `inboxConfig`.
120
+
121
+ ```tsx
122
+ // GET /messages → [{ id, subject, from: { name }, isRead, isStarred, sentAt }]
123
+ <DataViewsLayout
124
+ data={messages}
125
+ views={{ inbox: true }}
126
+ inboxConfig={{ titlePath: "subject", previewPath: "from.name", dateField: "sentAt" }}
127
+ />
128
+ ```
129
+
130
+ ## Recipe 6 — Server-driven filtering & pagination
131
+
132
+ Make the layout controlled: hold `filterState` yourself and refetch when it
133
+ changes. This keeps the URL/server as the source of truth.
134
+
135
+ ```tsx
136
+ import { useState, useEffect } from "react"
137
+ import type { FilterState } from "torch-glare"
138
+
139
+ function ServerDriven() {
140
+ const [rows, setRows] = useState([])
141
+ const [filterState, setFilterState] = useState<FilterState>({})
142
+
143
+ useEffect(() => {
144
+ api.get("/records", { params: { filters: filterState } }).then(setRows)
145
+ }, [filterState])
146
+
147
+ return (
148
+ <DataViewsLayout
149
+ data={rows}
150
+ fields={fields}
151
+ filterState={filterState}
152
+ onFilterChange={setFilterState}
153
+ />
154
+ )
155
+ }
156
+ ```
157
+
158
+ ## Recipe 7 — Custom layout (composable mode)
159
+
160
+ When tabs aren't what you want — e.g. a table beside a kanban — bypass
161
+ `DataViewsLayout` and compose the views with `useDataViewsState`.
162
+
163
+ ```tsx
164
+ import { TableView, KanbanView, useDataViewsState } from "torch-glare"
165
+
166
+ function SplitScreen({ data, fields }) {
167
+ const state = useDataViewsState({ data, fields })
168
+ return (
169
+ <div className="grid grid-cols-2 gap-4 h-screen">
170
+ <TableView data={state.flatItems} fields={state.resolvedFields} config={state.config} showFilters={false} />
171
+ <KanbanView data={state.flatItems} fields={state.resolvedFields} config={state.config} groupByField="status" />
172
+ </div>
173
+ )
174
+ }
175
+ ```
176
+
177
+ See each view's reference: [TableView](../components/table-view.md) ·
178
+ [KanbanView](../components/kanban-view.md) ·
179
+ [InboxView](../components/inbox-view.md) ·
180
+ [TreeView](../components/tree-view.md).
181
+
182
+ ## Gotchas
183
+
184
+ - **Empty `data`** → all views render their empty state; pass `isLoading` upstream if you fetch async.
185
+ - **Tree tab missing?** No hierarchy was detected. Supply `treeConfig` explicitly or check your `childrenField` / `parentField`.
186
+ - **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.
187
+
188
+ ## Related
189
+
190
+ - [`DataViewsLayout`](../components/data-views-layout.md) — full prop reference
191
+ - [`DataViewsConfigPanel`](../components/data-views-config-panel.md) — settings/filters panel
package/docs/llms-manifest.json CHANGED
@@ -31,141 +31,470 @@
31
31
  "buttons": {
32
32
  "count": 6,
33
33
  "items": [
34
- { "name": "Button", "version": "1.1.15", "documented": true },
35
- { "name": "ActionButton", "version": "1.1.15", "documented": true },
36
- { "name": "LinkButton", "version": "1.1.15", "documented": true },
37
- { "name": "LoginButton", "version": "1.1.15", "documented": true },
38
- { "name": "ButtonGroup", "version": "1.1.15", "documented": true },
39
- { "name": "ToggleButton", "version": "1.1.15", "documented": true }
34
+ {
35
+ "name": "Button",
36
+ "version": "1.1.15",
37
+ "documented": true
38
+ },
39
+ {
40
+ "name": "ActionButton",
41
+ "version": "1.1.15",
42
+ "documented": true
43
+ },
44
+ {
45
+ "name": "LinkButton",
46
+ "version": "1.1.15",
47
+ "documented": true
48
+ },
49
+ {
50
+ "name": "LoginButton",
51
+ "version": "1.1.15",
52
+ "documented": true
53
+ },
54
+ {
55
+ "name": "ButtonGroup",
56
+ "version": "1.1.15",
57
+ "documented": true
58
+ },
59
+ {
60
+ "name": "ToggleButton",
61
+ "version": "1.1.15",
62
+ "documented": true
63
+ }
40
64
  ]
41
65
  },
42
66
  "forms": {
43
67
  "count": 18,
44
68
  "items": [
45
- { "name": "Input", "version": "1.1.15", "documented": true },
46
- { "name": "InputField", "version": "1.1.15", "documented": true },
47
- { "name": "Textarea", "version": "1.1.15", "documented": true },
48
- { "name": "Checkbox", "version": "1.1.15", "documented": true },
49
- { "name": "LabeledCheckBox", "version": "1.1.15", "documented": true },
50
- { "name": "Radio", "version": "1.1.15", "documented": true },
51
- { "name": "LabeledRadio", "version": "1.1.15", "documented": true },
52
- { "name": "RadioCard", "version": "1.1.15", "documented": true },
53
- { "name": "Select", "version": "1.1.15", "documented": true },
54
- { "name": "SimpleSelect", "version": "1.1.15", "documented": true },
55
- { "name": "Switch", "version": "1.1.15", "documented": true },
56
- { "name": "Toggle", "version": "1.1.15", "documented": true },
57
- { "name": "SearchField", "version": "1.1.15", "documented": true },
58
- { "name": "InputOTP", "version": "1.1.15", "documented": true },
59
- { "name": "Form", "version": "1.1.15", "documented": true },
60
- { "name": "TabFormItem", "version": "1.1.15", "documented": true },
61
- { "name": "FormStepper", "version": "2.1.1", "documented": true },
62
- { "name": "Stepper", "version": "2.1.1", "documented": true }
69
+ {
70
+ "name": "Input",
71
+ "version": "1.1.15",
72
+ "documented": true
73
+ },
74
+ {
75
+ "name": "InputField",
76
+ "version": "1.1.15",
77
+ "documented": true
78
+ },
79
+ {
80
+ "name": "Textarea",
81
+ "version": "1.1.15",
82
+ "documented": true
83
+ },
84
+ {
85
+ "name": "Checkbox",
86
+ "version": "1.1.15",
87
+ "documented": true
88
+ },
89
+ {
90
+ "name": "LabeledCheckBox",
91
+ "version": "1.1.15",
92
+ "documented": true
93
+ },
94
+ {
95
+ "name": "Radio",
96
+ "version": "1.1.15",
97
+ "documented": true
98
+ },
99
+ {
100
+ "name": "LabeledRadio",
101
+ "version": "1.1.15",
102
+ "documented": true
103
+ },
104
+ {
105
+ "name": "RadioCard",
106
+ "version": "1.1.15",
107
+ "documented": true
108
+ },
109
+ {
110
+ "name": "Select",
111
+ "version": "1.1.15",
112
+ "documented": true
113
+ },
114
+ {
115
+ "name": "SimpleSelect",
116
+ "version": "1.1.15",
117
+ "documented": true
118
+ },
119
+ {
120
+ "name": "Switch",
121
+ "version": "1.1.15",
122
+ "documented": true
123
+ },
124
+ {
125
+ "name": "Toggle",
126
+ "version": "1.1.15",
127
+ "documented": true
128
+ },
129
+ {
130
+ "name": "SearchField",
131
+ "version": "1.1.15",
132
+ "documented": true
133
+ },
134
+ {
135
+ "name": "InputOTP",
136
+ "version": "1.1.15",
137
+ "documented": true
138
+ },
139
+ {
140
+ "name": "Form",
141
+ "version": "1.1.15",
142
+ "documented": true
143
+ },
144
+ {
145
+ "name": "TabFormItem",
146
+ "version": "1.1.15",
147
+ "documented": true
148
+ },
149
+ {
150
+ "name": "FormStepper",
151
+ "version": "2.1.1",
152
+ "documented": true
153
+ },
154
+ {
155
+ "name": "Stepper",
156
+ "version": "2.1.1",
157
+ "documented": true
158
+ }
63
159
  ]
64
160
  },
65
161
  "layout": {
66
162
  "count": 7,
67
163
  "items": [
68
- { "name": "Card", "version": "1.1.15", "documented": true },
69
- { "name": "CNLayout", "version": "1.1.15", "documented": true },
70
- { "name": "FieldSection", "version": "1.1.15", "documented": true },
71
- { "name": "SectionBlock", "version": "1.1.22", "documented": true },
72
- { "name": "TreeSubLayout", "version": "1.1.15", "documented": true },
73
- { "name": "Divider", "version": "1.1.15", "documented": true },
74
- { "name": "ScrollArea", "version": "1.1.15", "documented": true }
164
+ {
165
+ "name": "Card",
166
+ "version": "1.1.15",
167
+ "documented": true
168
+ },
169
+ {
170
+ "name": "CNLayout",
171
+ "version": "1.1.15",
172
+ "documented": true
173
+ },
174
+ {
175
+ "name": "FieldSection",
176
+ "version": "1.1.15",
177
+ "documented": true
178
+ },
179
+ {
180
+ "name": "SectionBlock",
181
+ "version": "1.1.22",
182
+ "documented": true
183
+ },
184
+ {
185
+ "name": "TreeSubLayout",
186
+ "version": "1.1.15",
187
+ "documented": true
188
+ },
189
+ {
190
+ "name": "Divider",
191
+ "version": "1.1.15",
192
+ "documented": true
193
+ },
194
+ {
195
+ "name": "ScrollArea",
196
+ "version": "1.1.15",
197
+ "documented": true
198
+ }
75
199
  ]
76
200
  },
77
201
  "dataDisplay": {
78
- "count": 11,
202
+ "count": 16,
79
203
  "items": [
80
- { "name": "Badge", "version": "1.1.15", "documented": true },
81
- { "name": "BadgeField", "version": "1.1.15", "documented": true },
82
- { "name": "CountBadge", "version": "1.1.15", "documented": true },
83
- { "name": "Avatar", "version": "1.1.15", "documented": true },
84
- { "name": "Table", "version": "1.1.15", "documented": true },
85
- { "name": "DataTable", "version": "1.1.15", "documented": true },
86
- { "name": "TreeDropDown", "version": "1.1.15", "documented": true },
87
- { "name": "Skeleton", "version": "1.1.15", "documented": true },
88
- { "name": "Timeline", "version": "2.1.1", "documented": true },
89
- { "name": "Breadcrumb", "version": "1.1.15", "documented": true },
90
- { "name": "DataViewsConfigPanel", "version": "2.1.2", "documented": true }
204
+ {
205
+ "name": "Avatar",
206
+ "version": "1.1.15",
207
+ "documented": true
208
+ },
209
+ {
210
+ "name": "Badge",
211
+ "version": "1.1.15",
212
+ "documented": true
213
+ },
214
+ {
215
+ "name": "BadgeField",
216
+ "version": "1.1.15",
217
+ "documented": true
218
+ },
219
+ {
220
+ "name": "Breadcrumb",
221
+ "version": "1.1.15",
222
+ "documented": true
223
+ },
224
+ {
225
+ "name": "CountBadge",
226
+ "version": "1.1.15",
227
+ "documented": true
228
+ },
229
+ {
230
+ "name": "DataTable",
231
+ "version": "1.1.15",
232
+ "documented": true
233
+ },
234
+ {
235
+ "name": "DataViewsConfigPanel",
236
+ "version": "2.1.2",
237
+ "documented": true
238
+ },
239
+ {
240
+ "name": "DataViewsLayout",
241
+ "version": "2.1.4",
242
+ "documented": true
243
+ },
244
+ {
245
+ "name": "InboxView",
246
+ "version": "2.1.4",
247
+ "documented": true
248
+ },
249
+ {
250
+ "name": "KanbanView",
251
+ "version": "2.1.4",
252
+ "documented": true
253
+ },
254
+ {
255
+ "name": "Skeleton",
256
+ "version": "1.1.15",
257
+ "documented": true
258
+ },
259
+ {
260
+ "name": "Table",
261
+ "version": "1.1.15",
262
+ "documented": true
263
+ },
264
+ {
265
+ "name": "TableView",
266
+ "version": "2.1.4",
267
+ "documented": true
268
+ },
269
+ {
270
+ "name": "Timeline",
271
+ "version": "2.1.1",
272
+ "documented": true
273
+ },
274
+ {
275
+ "name": "TreeDropDown",
276
+ "version": "1.1.15",
277
+ "documented": true
278
+ },
279
+ {
280
+ "name": "TreeView",
281
+ "version": "2.1.4",
282
+ "documented": true
283
+ }
91
284
  ]
92
285
  },
93
286
  "overlays": {
94
287
  "count": 7,
95
288
  "items": [
96
- { "name": "Dialog", "version": "1.1.15", "documented": true },
97
- { "name": "AlertDialog", "version": "1.1.15", "documented": true },
98
- { "name": "Drawer", "version": "1.1.15", "documented": true },
99
- { "name": "Popover", "version": "1.1.15", "documented": true },
100
- { "name": "Tooltip", "version": "1.1.15", "documented": true },
101
- { "name": "DropdownMenu", "version": "1.1.15", "documented": true },
102
- { "name": "ProfileMenu", "version": "1.1.15", "documented": true }
289
+ {
290
+ "name": "Dialog",
291
+ "version": "1.1.15",
292
+ "documented": true
293
+ },
294
+ {
295
+ "name": "AlertDialog",
296
+ "version": "1.1.15",
297
+ "documented": true
298
+ },
299
+ {
300
+ "name": "Drawer",
301
+ "version": "1.1.15",
302
+ "documented": true
303
+ },
304
+ {
305
+ "name": "Popover",
306
+ "version": "1.1.15",
307
+ "documented": true
308
+ },
309
+ {
310
+ "name": "Tooltip",
311
+ "version": "1.1.15",
312
+ "documented": true
313
+ },
314
+ {
315
+ "name": "DropdownMenu",
316
+ "version": "1.1.15",
317
+ "documented": true
318
+ },
319
+ {
320
+ "name": "ProfileMenu",
321
+ "version": "1.1.15",
322
+ "documented": true
323
+ }
103
324
  ]
104
325
  },
105
326
  "dateTime": {
106
327
  "count": 4,
107
328
  "items": [
108
- { "name": "Calendar", "version": "1.1.15", "documented": true },
109
- { "name": "DatePicker", "version": "1.1.15", "documented": true },
110
- { "name": "SlideDatePicker", "version": "1.1.15", "documented": true },
111
- { "name": "IosDatePicker", "version": "experimental", "documented": false }
329
+ {
330
+ "name": "Calendar",
331
+ "version": "1.1.15",
332
+ "documented": true
333
+ },
334
+ {
335
+ "name": "DatePicker",
336
+ "version": "1.1.15",
337
+ "documented": true
338
+ },
339
+ {
340
+ "name": "SlideDatePicker",
341
+ "version": "1.1.15",
342
+ "documented": true
343
+ },
344
+ {
345
+ "name": "IosDatePicker",
346
+ "version": "experimental",
347
+ "documented": false
348
+ }
112
349
  ]
113
350
  },
114
351
  "feedback": {
115
352
  "count": 4,
116
353
  "items": [
117
- { "name": "Toast", "version": "1.1.15", "documented": true },
118
- { "name": "SpinLoading", "version": "1.1.15", "documented": true },
119
- { "name": "PasswordLevel", "version": "1.1.15", "documented": true },
120
- { "name": "FieldHint", "version": "1.1.15", "documented": true }
354
+ {
355
+ "name": "Toast",
356
+ "version": "1.1.15",
357
+ "documented": true
358
+ },
359
+ {
360
+ "name": "SpinLoading",
361
+ "version": "1.1.15",
362
+ "documented": true
363
+ },
364
+ {
365
+ "name": "PasswordLevel",
366
+ "version": "1.1.15",
367
+ "documented": true
368
+ },
369
+ {
370
+ "name": "FieldHint",
371
+ "version": "1.1.15",
372
+ "documented": true
373
+ }
121
374
  ]
122
375
  },
123
376
  "labels": {
124
377
  "count": 4,
125
378
  "items": [
126
- { "name": "Label", "version": "1.1.15", "documented": true },
127
- { "name": "LabelField", "version": "1.1.15", "documented": true },
128
- { "name": "InnerLabelField", "version": "1.1.15", "documented": true },
129
- { "name": "TransparentLabel", "version": "1.1.15", "documented": true }
379
+ {
380
+ "name": "Label",
381
+ "version": "1.1.15",
382
+ "documented": true
383
+ },
384
+ {
385
+ "name": "LabelField",
386
+ "version": "1.1.15",
387
+ "documented": true
388
+ },
389
+ {
390
+ "name": "InnerLabelField",
391
+ "version": "1.1.15",
392
+ "documented": true
393
+ },
394
+ {
395
+ "name": "TransparentLabel",
396
+ "version": "1.1.15",
397
+ "documented": true
398
+ }
130
399
  ]
131
400
  },
132
401
  "advanced": {
133
402
  "count": 5,
134
403
  "items": [
135
- { "name": "Charts", "version": "experimental", "documented": false },
136
- { "name": "Command", "version": "experimental", "documented": false },
137
- { "name": "ImageAttachment", "version": "1.1.15", "documented": true },
138
- { "name": "ActionsGroup", "version": "1.1.15", "documented": true },
139
- { "name": "TextEditor", "version": "1.1.15", "documented": true }
404
+ {
405
+ "name": "Charts",
406
+ "version": "experimental",
407
+ "documented": false
408
+ },
409
+ {
410
+ "name": "Command",
411
+ "version": "experimental",
412
+ "documented": false
413
+ },
414
+ {
415
+ "name": "ImageAttachment",
416
+ "version": "1.1.15",
417
+ "documented": true
418
+ },
419
+ {
420
+ "name": "ActionsGroup",
421
+ "version": "1.1.15",
422
+ "documented": true
423
+ },
424
+ {
425
+ "name": "TextEditor",
426
+ "version": "1.1.15",
427
+ "documented": true
428
+ }
140
429
  ]
141
430
  }
142
431
  },
143
432
  "hooks": {
144
433
  "count": 4,
145
434
  "items": [
146
- { "name": "useActiveTreeItem", "version": "1.1.15", "documented": false },
147
- { "name": "useClickOutside", "version": "1.1.15", "documented": false },
148
- { "name": "useResize", "version": "1.1.15", "documented": false },
149
- { "name": "useTagSelection", "version": "1.1.15", "documented": false }
435
+ {
436
+ "name": "useActiveTreeItem",
437
+ "version": "1.1.15",
438
+ "documented": false
439
+ },
440
+ {
441
+ "name": "useClickOutside",
442
+ "version": "1.1.15",
443
+ "documented": false
444
+ },
445
+ {
446
+ "name": "useResize",
447
+ "version": "1.1.15",
448
+ "documented": false
449
+ },
450
+ {
451
+ "name": "useTagSelection",
452
+ "version": "1.1.15",
453
+ "documented": false
454
+ }
150
455
  ]
151
456
  },
152
457
  "providers": {
153
458
  "count": 1,
154
459
  "items": [
155
- { "name": "ThemeProvider", "version": "1.1.15", "documented": false }
460
+ {
461
+ "name": "ThemeProvider",
462
+ "version": "1.1.15",
463
+ "documented": false
464
+ }
156
465
  ]
157
466
  },
158
467
  "plugins": {
159
468
  "count": 4,
160
469
  "items": [
161
- { "name": "mappingColorSystem", "version": "1.0.0", "documented": false },
162
- { "name": "mappingColorSystemV4", "version": "4.0.0", "documented": false },
163
- { "name": "torchMode", "version": "1.0.0", "documented": false },
164
- { "name": "typography", "version": "1.0.0", "documented": false }
470
+ {
471
+ "name": "mappingColorSystem",
472
+ "version": "1.0.0",
473
+ "documented": false
474
+ },
475
+ {
476
+ "name": "mappingColorSystemV4",
477
+ "version": "4.0.0",
478
+ "documented": false
479
+ },
480
+ {
481
+ "name": "torchMode",
482
+ "version": "1.0.0",
483
+ "documented": false
484
+ },
485
+ {
486
+ "name": "typography",
487
+ "version": "1.0.0",
488
+ "documented": false
489
+ }
165
490
  ]
166
491
  },
167
492
  "themes": {
168
- "modes": ["light", "dark", "default"],
493
+ "modes": [
494
+ "light",
495
+ "dark",
496
+ "default"
497
+ ],
169
498
  "variants": {
170
499
  "button": [
171
500
  "PrimeStyle",
@@ -197,4 +526,4 @@
197
526
  "discord": "https://discord.gg/torch-glare",
198
527
  "email": "support@torchcorp.com"
199
528
  }
200
- }
529
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "torch-glare-mcp",
3
- "version": "1.2.1",
3
+ "version": "1.3.0",
4
4
  "description": "MCP server for TORCH Glare component library — gives AI assistants full access to component docs, API references, code examples, and design system info",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",