gridsmith-ui 0.17.3 → 0.19.0

package/README.md

@@ -1,10 +1,10 @@
 # gridsmith-ui
 
-98 React components with a CSS custom property theming engine, 14 chart components, and 5 icon packs.
+103 React components with a CSS custom property theming engine, 13 chart components, and 5 icon packs.
 
 ## Installation
 
-gridsmith-ui needs React 19. On a React 18 project, upgrade `react`, `react-dom`, `@types/react` and `@types/react-dom` to 19 first; installing with `--force` or `--legacy-peer-deps` gives an app that cannot run.
+gridsmith-ui needs React 19. On a React 18 project, upgrade `react`, `react-dom`, `@types/react` and `@types/react-dom` to 19 first; installing with `--force` or `--legacy-peer-deps` gives an app that cannot run. On React 18, `AppShell` and `PageContainer` stop with an error that says so.
 
 ```bash
 npm install gridsmith-ui
@@ -18,7 +18,7 @@ npm install recharts
 
 ### Heavy components (optional)
 
-Five components depend on large third-party libraries. They live in their own entry points so the main bundle stays small — install the library only if you use the component:
+Seven components depend on large third-party libraries. They live in six entry points of their own so the main bundle stays small — install the library only if you use the component:
 
 ```bash
 npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
@@ -28,18 +28,19 @@ npm install @tiptap/react @tiptap/pm @tiptap/starter-kit lowlight \
   @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header \
   @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list \
   @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-underline   # gridsmith-ui/editor
+npm install react-markdown remark-gfm                            # gridsmith-ui/chat
 npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities   # gridsmith-ui/kanban
 npm install @tanstack/react-table                                # gridsmith-ui/data-grid
 npm install @tanstack/react-virtual                              # gridsmith-ui/virtualized
 npm install react-resizable-panels                               # gridsmith-ui/resizable
 ```
 
-### Icon packs (optional)
+### Icon packs
 
-The `Icon` component uses `lucide-react` by default. Other packs are loaded on demand — install only what you need:
+The `Icon` component uses `lucide-react` by default, and every other pack falls back to it for a missing name, so always install it. Other packs are loaded on demand — install only what you need:
 
 ```bash
-# Default (recommended)
+# Default and fallback (required)
 npm install lucide-react
 
 # Alternative packs
@@ -58,11 +59,13 @@ Import the design tokens and Tailwind bindings in your CSS entry point:
 @import "gridsmith-ui/roots.css";
 @import "gridsmith-ui/tokens.css";
 @import "gridsmith-ui/tailwind.css";
+@source "../node_modules/gridsmith-ui/dist/*.js";
 ```
 
 - **roots.css** — the CSS custom property engine (L1 roots, L2 derived scales, L3 semantics)
-- **tokens.css** — default Precision Minimal preset values (optional: use `generate-tokens.ts` to customise)
+- **tokens.css** — default Precision Minimal preset values (a Gridsmith project imports the `tokens_css` from `get_tokens` called with `css: true`, saved as `gridsmith-tokens.css`, instead)
 - **tailwind.css** — maps `--ds-*` tokens to Tailwind utilities (`p-ds-4`, `text-2xs`, `opacity-disabled`)
+- **@source** — tells Tailwind to scan the compiled components; without it they render unstyled. It must come after every `@import`.
 
 For the fastest icon rendering on cold loads, call `preloadPack` in your entry point before `createRoot`:
 
@@ -75,13 +78,14 @@ preloadPack("lucide");
 
 | Import path | What it provides |
 |---|---|
-| `gridsmith-ui` | 97 components (actions, forms, data display, navigation, overlays, feedback, layout) |
-| `gridsmith-ui/charts` | 14 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook |
+| `gridsmith-ui` | 96 components (actions, forms, data display, navigation, overlays, feedback, layout) |
+| `gridsmith-ui/charts` | 13 chart components (Bar, Line, Area, Pie, Composite, Scatter, Radar, RadialBar, Funnel, Treemap, Sankey, Sparkline, ChartContainer) + `useChartColors` hook + `categoryKind()` |
 | `gridsmith-ui/editor` | `RichTextEditor` (requires the tiptap packages + `lowlight`) |
+| `gridsmith-ui/chat` | `MarkdownContent` for chat replies; pass it to `ChatMessageList`'s `renderContent` (requires `react-markdown` + `remark-gfm`) |
 | `gridsmith-ui/kanban` | `KanbanBoard` (requires `@dnd-kit/*`) |
 | `gridsmith-ui/data-grid` | `DataGrid` (requires `@tanstack/react-table`) |
 | `gridsmith-ui/virtualized` | `VirtualizedList` (requires `@tanstack/react-virtual`) |
-| `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` (requires `react-resizable-panels`) |
+| `gridsmith-ui/resizable` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`, `SplitView` (requires `react-resizable-panels`) |
 | `gridsmith-ui/icons` | `Icon`, `IconProvider`, `preloadPack` — 5 icon packs with two-phase loading |
 | `gridsmith-ui/utils` | `cn()` — className merge utility (clsx + tailwind-merge) |
 | `gridsmith-ui/roots.css` | CSS custom property engine |
@@ -94,10 +98,11 @@ preloadPack("lucide");
 import { Button, Card, Input, Table } from "gridsmith-ui";
 import { BarChart, LineChart } from "gridsmith-ui/charts";
 import { RichTextEditor } from "gridsmith-ui/editor";
+import { MarkdownContent } from "gridsmith-ui/chat";
 import { KanbanBoard } from "gridsmith-ui/kanban";
 import { DataGrid } from "gridsmith-ui/data-grid";
 import { VirtualizedList } from "gridsmith-ui/virtualized";
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "gridsmith-ui/resizable";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle, SplitView } from "gridsmith-ui/resizable";
 import { Icon, IconProvider } from "gridsmith-ui/icons";
 import { cn } from "gridsmith-ui/utils";
 ```
@@ -134,10 +139,11 @@ Wrap your app in `<IconProvider>` to select a pack:
 
 | Package | Required |
 |---------|----------|
-| `react` / `react-dom` | Yes (^18 or ^19) |
-| `lucide-react` | Optional (default icon pack) |
+| `react` / `react-dom` | Yes (^19) |
+| `lucide-react` | Yes (the default icon pack and every pack's fallback) |
 | `recharts` | Optional (required for `gridsmith-ui/charts`) |
 | `@tiptap/*`, `lowlight` | Optional (required for `gridsmith-ui/editor`) |
+| `react-markdown`, `remark-gfm` | Optional (required for `gridsmith-ui/chat`) |
 | `@dnd-kit/*` | Optional (required for `gridsmith-ui/kanban`) |
 | `@tanstack/react-table` | Optional (required for `gridsmith-ui/data-grid`) |
 | `@tanstack/react-virtual` | Optional (required for `gridsmith-ui/virtualized`) |

package/dist/charts.js

@@ -1,6 +1,6 @@
-import { Skeleton } from './chunk-Z63OSN64.js';
+import { TITLE_TEXT, Skeleton } from './chunk-NCIZQYXQ.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { cn, GLASS_SURFACE } from './chunk-4KVFH5KC.js';
+import { cn, GLASS_SURFACE } from './chunk-M2QRNBDQ.js';
 import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, Rectangle } from 'recharts';
 import { createPortal } from 'react-dom';
@@ -1720,7 +1720,7 @@ var Sparkline = forwardRef(function Sparkline2({
     )
   ] }) }) });
 });
-var CHART_TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]";
+var CHART_TITLE_CLASSES = TITLE_TEXT;
 function ChartContainer({
   height = "auto",
   title,