torch-glare 2.1.4 → 2.1.7

package/apps/lib/components/DataViews/DataViewsConfigPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Fragment, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   X,
   Settings as SettingsIcon,

package/apps/lib/components/DataViews/DataViewsLayout.tsx

@@ -7,6 +7,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ElementType,
   type ReactNode,
 } from "react";
 import { List, LayoutGrid, Inbox as InboxIcon, Network } from "lucide-react";
@@ -61,6 +62,12 @@ export type DataViewsLayoutProps = {
   addNewLabel?: string;
 
   inboxItemHref?: (item: DynamicRecord, id: any) => string;
+  /**
+   * Component used to render inbox item links when `inboxItemHref` is set.
+   * Defaults to a plain `<a>` (full-page navigation). Pass your router's link
+   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
+   */
+  inboxLinkComponent?: ElementType;
   inboxSelectedId?: any;
   inboxRenderDetail?: (item: DynamicRecord | null) => ReactNode;
 
@@ -108,6 +115,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
       onAddNew,
       addNewLabel,
       inboxItemHref,
+      inboxLinkComponent,
       inboxSelectedId,
       inboxRenderDetail,
       searchValue,
@@ -276,6 +284,7 @@ export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
                     onFilterChange={setFilterState}
                     showFilters={false}
                     itemHref={inboxItemHref}
+                    linkComponent={inboxLinkComponent}
                     selectedItemId={inboxSelectedId}
                     renderDetail={inboxRenderDetail}
                   />

package/apps/lib/components/DataViews/FilterPanel.tsx

@@ -222,7 +222,8 @@ export function FilterPanel({
               <Badge
                 {...countBadge}
                 label={String(totalFilters)}
-                className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+                showIcon={false}
+                className="h-5 w-5 min-w-0 justify-center rounded-full p-0 text-xs"
                 size="XS"
               />
             )}
@@ -270,9 +271,9 @@ export function FilterPanel({
             <Badge
               {...countBadge}
               label={String(totalFilters)}
-              className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+              showIcon={false}
+              className="h-5 w-5 min-w-0 justify-center rounded-full p-0 text-xs"
               size="XS"
-
             />
           )}
         </div>

package/apps/lib/components/DataViews/InboxView.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ElementType,
+  type ReactNode,
+} from "react";
 import { Badge } from "../Badge";
 import { FilterPanel } from "./FilterPanel";
 import {
@@ -57,6 +63,12 @@ export type InboxViewProps = {
   onFilterChange?: (filters: FilterState) => void;
   showFilters?: boolean;
   itemHref?: (item: DynamicRecord, id: any) => string;
+  /**
+   * Component used to render each item's link when `itemHref` is set. Defaults
+   * to a plain `<a>` (full-page navigation). Pass your router's link
+   * (e.g. Next.js `Link`, React Router `Link`) for client-side navigation.
+   */
+  linkComponent?: ElementType;
   selectedItemId?: any;
   renderDetail?: (item: DynamicRecord | null) => ReactNode;
 };
@@ -100,6 +112,7 @@ export function InboxView({
   onFilterChange,
   showFilters = true,
   itemHref,
+  linkComponent,
   selectedItemId,
   renderDetail,
 }: InboxViewProps) {
@@ -350,6 +363,7 @@ export function InboxView({
                 selected={selected}
                 onSelect={() => handleSelectItem(item)}
                 href={itemHref?.(item, itemId)}
+                linkComponent={linkComponent}
               />
             );
           })}

package/apps/lib/components/Drawer.tsx

@@ -114,6 +114,12 @@ const DrawerContent = React.forwardRef<
           )}
         >
           <div
+            // The content surface is always light (#F0F0F0) regardless of the
+            // page theme, so pin a light theme here. This makes theme-aware
+            // content tokens (DrawerTitle/Description and any consumer content)
+            // resolve to their dark-on-light values instead of following a dark
+            // page theme (which would render white-on-light = invisible).
+            data-theme="light"
             className={cn(
               "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1.5 bg-[#F0F0F0] min-h-0",
               framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
@@ -148,14 +154,18 @@ const DrawerHeader = ({
 DrawerHeader.displayName = "DrawerHeader";
 
 const drawerHeaderPane = cva(
-  "flex items-center gap-2 rounded-[14px] border p-2 bg-[#131415] border-[#2C2D2E] shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+  // Dark pill. Force any DrawerTitle/Description inside it back to light text
+  // (their defaults are dark for the light content surface).
+  "flex items-center gap-2 rounded-[14px] border p-2 bg-[#131415] border-[#2C2D2E] shadow-[0_0_32px_2px_rgba(0,0,0,0.05)] [&_[data-slot=drawer-title]]:text-white [&_[data-slot=drawer-description]]:text-[#9FA0A1]",
 );
 
 const DrawerHeaderTitle = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn(drawerHeaderPane(), className)} {...props} />
+  // Dark surface — pin a dark theme so any buttons/content inside resolve their
+  // theme tokens for dark (the surrounding content surface is data-theme=light).
+  <div data-theme="dark" className={cn(drawerHeaderPane(), className)} {...props} />
 );
 DrawerHeaderTitle.displayName = "DrawerHeaderTitle";
 
@@ -164,6 +174,7 @@ const DrawerHeaderActions = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
+    data-theme="dark"
     className={cn(drawerHeaderPane(), "justify-end", className)}
     {...props}
   />
@@ -358,8 +369,12 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
+    data-slot="drawer-title"
+    // Dark text by default — the title usually sits on the light content
+    // surface. Inside the dark DrawerHeaderTitle pill it is flipped back to
+    // white via a descendant selector on `drawerHeaderPane`.
     className={cn(
-      "typography-display-medium-medium uppercase text-white leading-none",
+      "typography-display-medium-medium uppercase text-content-presentation-global-primary leading-none",
       className,
     )}
     {...props}
@@ -373,7 +388,11 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn("typography-body-small-regular text-[#9FA0A1]", className)}
+    data-slot="drawer-description"
+    className={cn(
+      "typography-body-small-regular text-content-presentation-action-light-secondary",
+      className,
+    )}
     {...props}
   />
 ));

package/dist/bin/index.js

@@ -20,7 +20,8 @@ program
 program
     .command("add [component]")
     .description("Add a component interactively or install a specified one")
-    .action((component) => add(component));
+    .option("-f, --force", "Overwrite the component if it already exists")
+    .action((component, options) => add(component, !!options.force));
 program
     .command("hook [hook]")
     .description("Add a hook interactively or install a specified one")

package/dist/bin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../cli/bin/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,aAAa,CAAC;KACnB,WAAW,CAAC,2CAA2C,CAAC;KACxD,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;AAE9B,OAAO;KACJ,OAAO,CAAC,iBAAiB,CAAC;KAC1B,WAAW,CAAC,0DAA0D,CAAC;KACvE,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;AAEzC,OAAO;KACJ,OAAO,CAAC,aAAa,CAAC;KACtB,WAAW,CAAC,qDAAqD,CAAC;KAClE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;AAEhD,OAAO;KACJ,OAAO,CAAC,iBAAiB,CAAC;KAC1B,WAAW,CAAC,uDAAuD,CAAC;KACpE,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC;AAE5D,OAAO;KACJ,OAAO,CAAC,aAAa,CAAC;KACtB,WAAW,CAAC,sDAAsD,CAAC;KACnE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AAEnC,OAAO;KACJ,OAAO,CAAC,qBAAqB,CAAC;KAC9B,WAAW,CAAC,yDAAyD,CAAC;KACtE,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,IAAI,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;AAEhE,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,6BAA6B,CAAC;KAC1C,MAAM,CAAC,GAAG,EAAE,CAAC,yBAAyB,EAAE,CAAC,CAAC;AAE7C,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,kDAAkD,CAAC;KAC/D,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;AAE5B,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../cli/bin/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,aAAa,CAAC;KACnB,WAAW,CAAC,2CAA2C,CAAC;KACxD,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;AAE9B,OAAO;KACJ,OAAO,CAAC,iBAAiB,CAAC;KAC1B,WAAW,CAAC,0DAA0D,CAAC;KACvE,MAAM,CAAC,aAAa,EAAE,8CAA8C,CAAC;KACrE,MAAM,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AAEnE,OAAO;KACJ,OAAO,CAAC,aAAa,CAAC;KACtB,WAAW,CAAC,qDAAqD,CAAC;KAClE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,IAAI,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;AAEhD,OAAO;KACJ,OAAO,CAAC,iBAAiB,CAAC;KAC1B,WAAW,CAAC,uDAAuD,CAAC;KACpE,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC;AAE5D,OAAO;KACJ,OAAO,CAAC,aAAa,CAAC;KACtB,WAAW,CAAC,sDAAsD,CAAC;KACnE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AAEnC,OAAO;KACJ,OAAO,CAAC,qBAAqB,CAAC;KAC9B,WAAW,CAAC,yDAAyD,CAAC;KACtE,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,IAAI,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;AAEhE,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,6BAA6B,CAAC;KAC1C,MAAM,CAAC,GAAG,EAAE,CAAC,yBAAyB,EAAE,CAAC,CAAC;AAE7C,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,kDAAkD,CAAC;KAC/D,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;AAE5B,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC"}

package/docs/components/data-views-layout.md

@@ -11,7 +11,22 @@ keywords: [data-views, layout, table, kanban, inbox, tree, multi-view, filter, s
 
 ## Installation
 
-The component is part of `torch-glare`. It depends on `@radix-ui/react-slider`, `react-day-picker`, `lucide-react`, and `vaul` (all already vendored by the library). No extra install needed.
+```bash
+npx torch-glare@latest add DataViews
+```
+
+The CLI transitively installs everything DataViews imports — the sibling views,
+the `DataViewCard` layout, the `useDataViewsState` hook, the `dataViews` utils,
+and the `TreeFolder` component — plus the 3rd-party deps it uses
+(`@radix-ui/react-slider`, `react-day-picker`, `lucide-react`, `vaul`).
+
+> **Badge version:** DataViews uses the current Badge API
+> (`color` / `badgeStyle` / `showIcon`). If your project vendored an older
+> `Badge.tsx` (with `variant` / `isSelected`), refresh it with
+> `npx torch-glare@latest add Badge --force` and migrate call sites
+> (`variant=` → `color=`, `isSelected`+`onUnselect` → `isClosable`+`onClose`).
+> The Badge also needs `mapping-color-system-v4` tokens
+> (`--background-presentation-badge-{color}-{subtle|solid}`) in your CSS.
 
 ## Import
 
@@ -140,6 +155,8 @@ Inbox auto-detects `isRead`, `isStarred`, `hasAttachment`, `priority`. Override
 | `views` | `ViewVisibility` | all on (tree auto) | Per-view toggle: `{ table?, kanban?, inbox?, tree? }`. Omitted keys default to `true` (Tree auto-hides without hierarchy). |
 | `kanbanGroupBy` | `string` | `"status"` | Dot-path to the field used for Kanban columns. |
 | `inboxConfig` | `InboxConfig` | auto-detected | Map of starred/read/attachment/priority field paths for Inbox. |
+| `inboxItemHref` | `(item, id) => string` | — | When set, each Inbox row becomes a link to the returned href. |
+| `inboxLinkComponent` | `ElementType` | `"a"` | Component used to render Inbox item links when `inboxItemHref` is set. Pass your router's link (Next.js `Link`, React Router `Link`) for client-side navigation; defaults to a plain `<a>` (full-page nav). |
 | `treeConfig` | `TreeConfig` | auto-detected | `childrenField`, `parentField`, `idField`, `nodeLabel`, `defaultExpanded`. |
 | `filterState` | `FilterState` | uncontrolled | Controlled filter state. Pair with `onFilterChange`. |
 | `onFilterChange` | `(state: FilterState) => void` | — | Fires when any filter changes. When provided, the layout is controlled. |