@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to `@timbal-ai/timbal-react` are documented here.
 
 ## [Unreleased]
 
+## [1.5.0] — 2026-06-26
+
+### Added
+
+- **`Kanban` board primitive** (`src/ui/kanban.tsx`) — A fully-featured, highly accessible Kanban board with column customization, drag-and-drop capabilities powered by `@dnd-kit`, and a read-only mode for static board rendering.
+- **App density system** (`src/app/layout/app-density-context.tsx`, `src/design/app-density.ts`) — Context-driven density controls supporting "standard" and "compact" layouts. Compact mode cascades tighter padding, smaller text, and lower default heights to descendant components (pages, charts, tables).
+- **Advanced filtering** (`src/app/data/FilterDropdown.tsx`, `src/app/data/FilterField.tsx`) — Rich multi-level filter dropdowns with searchable sub-menus and filter fields for complex data querying.
+- **Site/Marketing primitives** (`src/site/`) — A brand new `./site` subpath export containing five high-quality interactive and marketing-grade components:
+  - **`Magnetic`** — magnetic hover effect that pulls elements toward the cursor.
+  - **`Marquee`** — high-performance, infinite scrolling marquee.
+  - **`Parallax`** — scroll-driven parallax container with custom speed factors.
+  - **`Reveal`** — scroll or entrance fade-in reveal with custom directions and delays.
+  - **`TextReveal`** — character-by-character or word-by-word scroll-reveal animations.
+
 ## [1.4.0] — 2026-06-05
 
 ### Added

package/README.md

@@ -342,12 +342,26 @@ function MyShell() {
 To inset a main column that follows the sidebar as it collapses, use `AppShell`, which wires the tracking automatically:
 
 ```tsx
-import { AppShell, StudioSidebar } from "@timbal-ai/timbal-react";
+import { AppShell, StudioSidebar, useAppShellNav } from "@timbal-ai/timbal-react";
+
+// Rendered inside AppShell, so it can read the shell's mobile-nav controls and
+// wire the drawer. The sidebar already closes itself on selection (mobile).
+function Sidebar({ agent, onSelect }: { agent: string; onSelect: (id: string) => void }) {
+  const nav = useAppShellNav();
+  return (
+    <StudioSidebar
+      selectedId={agent}
+      onSelect={onSelect}
+      mobileOpen={nav.open}
+      onMobileOpenChange={nav.setOpen}
+    />
+  );
+}
 
 function MyShell() {
   const [agent, setAgent] = useState("agent-a");
   return (
-    <AppShell sidebar={<StudioSidebar selectedId={agent} onSelect={setAgent} />}>
+    <AppShell sidebar={<Sidebar agent={agent} onSelect={setAgent} />}>
       {/* main content insets + animates with the sidebar */}
     </AppShell>
   );
@@ -961,6 +975,7 @@ import { controlClass, overlaySurfaceClass, overlayItemClass } from "@timbal-ai/
 - **Layout / disclosure:** `Accordion` · `AccordionItem` · `AccordionTrigger` · `AccordionContent` · `Separator` · `AspectRatio`
 - **Input chrome:** `InputGroup` (+ addon/control/text) · `Spinner`
 - **More primitives:** `AvatarGroup` (overflow stack) · `Stepper` (wizard progress) · `Timeline` (event rail) · `Rating` (stars) · `NumberField` (stepper input) · `TagInput` (chips) · `Banner` (page notice) · `CopyButton` · `Snippet` (code + copy) · `CircularProgress` (SVG ring) — all dependency-free, on the shared tokens / control surface
+- **`Kanban`** (drag-and-drop board) — accessible columns + cards on `@dnd-kit` (pointer **and** keyboard sensors, cross-column moves, empty-column drop zones, drag overlay). Controlled (`columns` + `onColumnsChange`) or uncontrolled (`defaultColumns`); `onMove` reports `{ card, from, to }`. Variants: `density`, column `tone`, `cardVariant`. Requires the peer deps `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`.
 
 **Motion is built in.** Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Select, Tooltip, Toast, NavigationMenu, and Accordion / Collapsible animate out of the box (fade / zoom / slide / height). The animation engine is **inlined in `styles.css`** — no `tailwindcss-animate` / `tw-animate-css` dependency and no consumer config. Duration flows from any `duration-*` utility (`--tw-duration`, default 150ms). When composing a custom overlay, reuse `overlayAnimationClass` rather than adding another animation library.
 
@@ -1045,7 +1060,6 @@ Compose a data UI with a **floating** copilot — main content stays full width:
 ```tsx
 import {
   AppShell,
-  AppShellTopbar,
   AppCopilotProvider,
   AppChatPanel,
   Page,
@@ -1057,7 +1071,7 @@ export function OperationsApp() {
     <AppCopilotProvider value={{ page: "Operations", tab: "overview" }}>
       <AppShell
         sidebar={<StudioSidebar /* … */ />}
-        topbar={<AppShellTopbar actions={<ModeToggle />} />}
+        topbar={<div className="flex justify-end p-4"><ModeToggle /></div>}
         chat={
           <AppChatPanel workforceId="your-workforce-id" />
         }