torch-glare 2.1.2 → 2.1.3

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

@@ -1,57 +1,26 @@
 "use client";
 
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Switch } from "../Switch";
-import { cn } from "../../utils/cn";
+import { DataViewRadio } from "./DataViewRadio";
 
 /**
  * DataViews config-panel form controls.
  *
- * These are intentionally NOT shared library components. The panel chrome is
- * always-dark (Figma `Cun` = #000000) and hardcodes Figma hex values, which
- * conflicts with the design-system token / `data-theme` convention used by the
- * public components. They live colocated with the panel so the always-dark
- * Figma styling stays internal to DataViews. Not re-exported from index.ts.
+ * The config panel is wrapped in `data-theme="dark"`, so theme-aware
+ * components (DataViewRadio, Switch) render in dark mode automatically. The
+ * green-checked Switch hex is the only thing this panel still hardcodes
+ * because it sits outside the theme system.
  */
 
 /**
- * Saved View / Default Sort radio row, built from the raw Radix primitive to
- * match Figma node 1612:30021. The shared <Radio>/<Label> components impose
- * their own circle size, color tokens, line-height reset and wrapper flex
- * layout that fight this panel's always-dark Figma spec, so the row is
- * hand-built here instead.
- *
- * The whole row IS the Radix Item, so the entire area (circle + label +
- * padding) is one click target. The circle/label are non-interactive visuals.
+ * Saved View / Default Sort radio row.
  *
+ * Thin wrapper around the reusable {@link DataViewRadio} so the config panel
+ * keeps a stable name. The whole row IS the Radix Item, so the entire area
+ * (circle + label + padding) is one click target.
  */
 export function RadioRow({ value, label }: { value: string; label: string }) {
-  return (
-    <RadioGroupPrimitive.Item
-      value={value}
-      className={cn(
-        "group flex w-full items-center gap-1.5 py-1 pl-2",
-        "cursor-pointer rounded-[8px] text-left outline-none transition-colors",
-        "hover:bg-white/[0.04] focus-visible:bg-white/[0.04]",
-      )}
-    >
-      <span
-        className={cn(
-          "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
-          "border border-[#626467] bg-[rgba(255,255,255,0.05)] transition-colors",
-          "group-data-[state=checked]:border-transparent",
-          "group-data-[state=checked]:bg-[#005ECC]",
-        )}
-      >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-          <span className="h-[6px] w-[6px] rounded-full bg-white" />
-        </RadioGroupPrimitive.Indicator>
-      </span>
-      <span className="text-[14px] font-normal leading-[1.475] text-white">
-        {label}
-      </span>
-    </RadioGroupPrimitive.Item>
-  );
+  return <DataViewRadio value={value} label={label} />;
 }
 
 // Shared <Switch> with the bright-green checked track (#0AC713) from the Figma

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

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react";
 import type {
   DynamicRecord,
   ViewConfig,
@@ -10,7 +10,7 @@ import type {
   FilterState,
   FilterValue,
   TreeConfig,
-} from "./types"
+} from "./types";
 import {
   applyMove,
   autoDetectTreeShape,
@@ -20,31 +20,34 @@ import {
   initialExpansion,
   pruneTree,
   type TreeNode,
-} from "../../utils/dataViews/treeUtils"
-import { getByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils"
-import { visibleFields } from "../../utils/dataViews/fieldUtils"
-import { renderField } from "./fieldRenderers"
-import { renderDetailView } from "../../utils/dataViews/nestedDataUtils"
-import { useIsMobile } from "../../hooks/useIsMobile"
-import { TableView } from "./TableView"
-import { FilterPanel } from "./FilterPanel"
-import { TreeSidebar } from "./tree/TreeSidebar"
-import { TreeDrawer, TreeDrawerTrigger } from "./tree/TreeDrawer"
-import { Table2, FileText } from "lucide-react"
-import { cn } from "../../utils/cn"
+} from "../../utils/dataViews/treeUtils";
+import {
+  getByPath,
+  matchesFilterValues,
+} from "../../utils/dataViews/pathUtils";
+import { visibleFields } from "../../utils/dataViews/fieldUtils";
+import { renderField } from "./fieldRenderers";
+import { useIsMobile } from "../../hooks/useIsMobile";
+import { TableView } from "./TableView";
+import { FilterPanel } from "./FilterPanel";
+import { TreeSidebar } from "./tree/TreeSidebar";
+import { TreeDrawer, TreeDrawerTrigger } from "./tree/TreeDrawer";
+import { Card, CardContent, CardHeader } from "../Card";
+import { Table2, LayoutGrid } from "lucide-react";
+import { cn } from "../../utils/cn";
 
 export type TreeViewProps = {
-  data: DynamicRecord[]
-  columns?: DynamicColumnConfig[]
-  fields: FieldConfig[]
-  config: ViewConfig
-  treeConfig?: TreeConfig
-  onDataUpdate?: (data: DynamicRecord[]) => void
-  filters?: DynamicFilterConfig[]
-  filterState?: FilterState
-  onFilterChange?: (filters: FilterState) => void
-  showFilters?: boolean
-}
+  data: DynamicRecord[];
+  columns?: DynamicColumnConfig[];
+  fields: FieldConfig[];
+  config: ViewConfig;
+  treeConfig?: TreeConfig;
+  onDataUpdate?: (data: DynamicRecord[]) => void;
+  filters?: DynamicFilterConfig[];
+  filterState?: FilterState;
+  onFilterChange?: (filters: FilterState) => void;
+  showFilters?: boolean;
+};
 
 export function TreeView({
   data,
@@ -58,108 +61,118 @@ export function TreeView({
   onFilterChange,
   showFilters = true,
 }: TreeViewProps) {
-  const isMobile = useIsMobile()
-  const [internalFilters, setInternalFilters] = useState<FilterState>({})
-  const activeFilters = externalFilterState ?? internalFilters
+  const isMobile = useIsMobile();
+  const [internalFilters, setInternalFilters] = useState<FilterState>({});
+  const activeFilters = externalFilterState ?? internalFilters;
 
   const resolvedTree = useMemo(
     () => autoDetectTreeShape(data, treeConfig ?? {}),
     [data, treeConfig],
-  )
+  );
 
   const display = useMemo(
     () => visibleFields(fields).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
     [fields],
-  )
+  );
 
   const labelField: FieldConfig = useMemo(() => {
-    const path = resolvedTree.nodeLabel
+    const path = resolvedTree.nodeLabel;
     if (path) {
-      const f = fields.find((x) => x.path === path)
-      if (f) return f
-      return { path, label: path, type: "text" }
+      const f = fields.find((x) => x.path === path);
+      if (f) return f;
+      return { path, label: path, type: "text" };
     }
-    return display[0] ?? { path: resolvedTree.idField, type: "text" }
-  }, [resolvedTree, fields, display])
+    return display[0] ?? { path: resolvedTree.idField, type: "text" };
+  }, [resolvedTree, fields, display]);
 
   const fullForest = useMemo(
     () => buildTree(data, resolvedTree),
     [data, resolvedTree],
-  )
+  );
 
-  const filterEntries = useMemo(() => Object.entries(activeFilters), [activeFilters])
+  const filterEntries = useMemo(
+    () => Object.entries(activeFilters),
+    [activeFilters],
+  );
 
   const visibleForest: TreeNode[] = useMemo(() => {
-    if (filterEntries.length === 0) return fullForest
+    if (filterEntries.length === 0) return fullForest;
     return pruneTree(fullForest, (record) =>
-      filterEntries.every(([path, value]) => matchesFilterValues(record, path, value)),
-    )
-  }, [fullForest, filterEntries])
+      filterEntries.every(([path, value]) =>
+        matchesFilterValues(record, path, value),
+      ),
+    );
+  }, [fullForest, filterEntries]);
 
   const [expanded, setExpanded] = useState<Set<string>>(() =>
     initialExpansion(fullForest, resolvedTree.defaultExpanded),
-  )
+  );
 
   useEffect(() => {
-    setExpanded(initialExpansion(fullForest, resolvedTree.defaultExpanded))
-  }, [fullForest, resolvedTree.defaultExpanded])
+    setExpanded(initialExpansion(fullForest, resolvedTree.defaultExpanded));
+  }, [fullForest, resolvedTree.defaultExpanded]);
 
-  const [selectedId, setSelectedId] = useState<string | null>(() =>
-    fullForest[0]?.id ?? null,
-  )
+  const [selectedId, setSelectedId] = useState<string | null>(
+    () => fullForest[0]?.id ?? null,
+  );
 
   useEffect(() => {
     if (selectedId && !findNodeById(visibleForest, selectedId)) {
-      setSelectedId(visibleForest[0]?.id ?? null)
+      setSelectedId(visibleForest[0]?.id ?? null);
     }
-  }, [visibleForest, selectedId])
+  }, [visibleForest, selectedId]);
 
-  const selectedNode = selectedId ? findNodeById(visibleForest, selectedId) : null
+  const selectedNode = selectedId
+    ? findNodeById(visibleForest, selectedId)
+    : null;
   const recordsForRightPane = useMemo(
     () => (selectedNode ? flatten(selectedNode) : []),
     [selectedNode],
-  )
+  );
 
   const toggle = (id: string) =>
     setExpanded((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
 
   const handleFilterChange = (path: string, value: FilterValue) => {
-    const next: FilterState = { ...activeFilters, [path]: value }
-    if (onFilterChange) onFilterChange(next)
-    else setInternalFilters(next)
-  }
+    const next: FilterState = { ...activeFilters, [path]: value };
+    if (onFilterChange) onFilterChange(next);
+    else setInternalFilters(next);
+  };
   const clearAllFilters = () => {
-    if (onFilterChange) onFilterChange({})
-    else setInternalFilters({})
-  }
+    if (onFilterChange) onFilterChange({});
+    else setInternalFilters({});
+  };
 
-  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
-  type RightPaneMode = "table" | "details"
+  type RightPaneMode = "table" | "card";
   const [rightPaneMode, setRightPaneMode] = useState<RightPaneMode>(
-    treeConfig?.defaultRightPane ?? "table",
-  )
+    // "details" is a deprecated alias of "card".
+    treeConfig?.defaultRightPane === "details"
+      ? "card"
+      : (treeConfig?.defaultRightPane ?? "table"),
+  );
 
-  const dndEnabled = treeConfig?.dndEnabled !== false && !!onDataUpdate
+  const dndEnabled = treeConfig?.dndEnabled !== false && !!onDataUpdate;
 
   const handleMove = ({
     dragIds,
     parentId,
     index,
   }: {
-    dragIds: string[]
-    parentId: string | null
-    index: number
+    dragIds: string[];
+    parentId: string | null;
+    index: number;
   }) => {
-    if (!onDataUpdate) return
-    const next = applyMove(data, resolvedTree, { dragIds, parentId, index })
-    onDataUpdate(next)
-  }
+    if (!onDataUpdate) return;
+    const next = applyMove(data, resolvedTree, { dragIds, parentId, index });
+    onDataUpdate(next);
+  };
 
   const treeContent = (
     <TreeSidebar
@@ -170,29 +183,25 @@ export function TreeView({
       dndEnabled={dndEnabled}
       onToggle={toggle}
       onSelect={(id) => {
-        setSelectedId(id)
-        if (isMobile) setDrawerOpen(false)
+        setSelectedId(id);
+        if (isMobile) setDrawerOpen(false);
       }}
       onMove={handleMove}
     />
-  )
-
-  const filtersEnabled = showFilters && config.showFilters !== false
+  );
 
-  const fallbackColumns: DynamicColumnConfig[] = columns ?? fields.map((f, i) => ({
-    id: f.path,
-    label: f.label ?? f.path,
-    visible: f.visible !== false && f.type !== "hidden",
-    order: f.order ?? i,
-  }))
+  const filtersEnabled = showFilters && config.showFilters !== false;
 
   return (
-    <div className="flex h-full bg-background-presentation-body-primary">
+    <div className="flex h-full gap-2">
       {!isMobile && (
-        <div className="w-64 border-r border-border-presentation-global-primary bg-background-presentation-body-overlay-primary flex flex-col">
+        <div className="w-64 rounded-[16px] border border-border-presentation-global-primary bg-background-presentation-form-base overflow-hidden flex flex-col">
           <div className="px-3 py-2 border-b border-border-presentation-global-primary">
-            <span className="text-xs font-semibold text-content-presentation-global-secondary uppercase tracking-wide">
-              Tree
+            <span
+              style={{ fontFeatureSettings: "'cv05' on" }}
+              className="typography-display-medium-medium uppercase text-content-presentation-global-primary"
+            >
+              categories
             </span>
           </div>
           <div className="flex-1 overflow-hidden">{treeContent}</div>
@@ -210,50 +219,67 @@ export function TreeView({
         />
       )}
 
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <div className="flex items-center gap-2 px-3 py-2 border-b border-border-presentation-global-primary bg-background-presentation-body-primary">
-          {isMobile && <TreeDrawerTrigger onClick={() => setDrawerOpen(true)} />}
-
-          <div className="flex items-center gap-1 rounded-md border border-border-presentation-global-primary bg-background-presentation-body-overlay-primary p-0.5">
-            <button
-              type="button"
-              onClick={() => setRightPaneMode("table")}
-              aria-label="Table mode"
-              aria-pressed={rightPaneMode === "table"}
-              className={cn(
-                "inline-flex items-center gap-1 px-2 py-1 rounded text-xs",
-                rightPaneMode === "table"
-                  ? "bg-content-presentation-action-primary text-white"
-                  : "text-content-presentation-global-secondary hover:text-content-presentation-global-primary",
-              )}
+      <div className="flex-1 flex flex-col overflow-hidden rounded-[16px] border border-border-presentation-global-primary bg-background-presentation-form-base">
+        <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border-presentation-global-primary bg-background-presentation-form-base">
+          <div className="flex items-center gap-2 min-w-0">
+            {isMobile && (
+              <TreeDrawerTrigger onClick={() => setDrawerOpen(true)} />
+            )}
+            <span
+              style={{ fontFeatureSettings: "'cv05' on" }}
+              className="typography-display-medium-medium uppercase text-content-presentation-global-primary truncate"
             >
-              <Table2 className="h-3.5 w-3.5" />
-              Table
-            </button>
-            <button
-              type="button"
-              onClick={() => setRightPaneMode("details")}
-              aria-label="Details mode"
-              aria-pressed={rightPaneMode === "details"}
-              className={cn(
-                "inline-flex items-center gap-1 px-2 py-1 rounded text-xs",
-                rightPaneMode === "details"
-                  ? "bg-content-presentation-action-primary text-white"
-                  : "text-content-presentation-global-secondary hover:text-content-presentation-global-primary",
-              )}
-            >
-              <FileText className="h-3.5 w-3.5" />
-              Details
-            </button>
+              {selectedNode
+                ? String(getByPath(selectedNode.record, labelField.path) ?? "Items")
+                : "Items"}
+            </span>
+            <div className="h-6 w-px bg-border-presentation-global-primary shrink-0" />
+            <span className="text-sm text-content-presentation-global-secondary truncate">
+              {selectedNode
+                ? `${recordsForRightPane.length} record${recordsForRightPane.length === 1 ? "" : "s"}`
+                : "Select an item"}
+            </span>
           </div>
 
-          <span className="ml-auto text-sm text-content-presentation-global-secondary truncate">
-            {selectedNode
-              ? rightPaneMode === "table"
-                ? `${recordsForRightPane.length} record${recordsForRightPane.length === 1 ? "" : "s"}`
-                : `1 record`
-              : "Select an item"}
-          </span>
+          {/* Segmented switcher — same style as the main view switcher
+              (DataViewsHeader): #252729 track, white active pill, divider
+              between two inactive tabs only. */}
+          <div className="flex items-center gap-[2px] rounded-[10px] bg-background-presentation-body-primary p-[2px] shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)] shrink-0">
+            {(
+              [
+                { id: "table", label: "List", icon: <Table2 /> },
+                { id: "card", label: "Cards", icon: <LayoutGrid /> },
+              ] as const
+            ).map((tab, idx) => {
+              const active = rightPaneMode === tab.id;
+              const prevActive = idx > 0 && rightPaneMode === "table";
+              const showDivider = idx > 0 && !active && !prevActive;
+              return (
+                <div key={tab.id} className="flex items-center">
+                  {showDivider && (
+                    <div className="mx-[3px] h-3 w-px bg-[#434446]" />
+                  )}
+                  <button
+                    type="button"
+                    aria-label={`${tab.label} mode`}
+                    aria-pressed={active}
+                    onClick={() => setRightPaneMode(tab.id)}
+                    className={cn(
+                      "flex h-6 items-center gap-[6px] rounded-[8px] px-3 text-[14px] font-[510] leading-none transition-all duration-200 ease-in-out",
+                      active
+                        ? "bg-white text-black shadow-[0_0_10px_2px_rgba(0,0,0,0.25)]"
+                        : "bg-transparent text-content-presentation-global-primary hover:bg-white/5",
+                    )}
+                  >
+                    <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
+                      {tab.icon}
+                    </span>
+                    <span className="max-w-[80px] truncate">{tab.label}</span>
+                  </button>
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         <div className="flex-1 overflow-hidden">
@@ -268,16 +294,15 @@ export function TreeView({
                 filters={filterConfig}
                 filterState={activeFilters}
                 onFilterChange={(next) => {
-                  if (onFilterChange) onFilterChange(next)
-                  else setInternalFilters(next)
+                  if (onFilterChange) onFilterChange(next);
+                  else setInternalFilters(next);
                 }}
                 showFilters={false}
               />
             ) : (
-              <DetailsBody
-                node={selectedNode}
+              <CardGrid
+                records={recordsForRightPane}
                 fields={fields}
-                columns={fallbackColumns}
                 labelField={labelField}
               />
             )
@@ -295,69 +320,73 @@ export function TreeView({
         </TreeDrawer>
       )}
     </div>
-  )
+  );
 }
 
-function DetailsBody({
-  node,
+/**
+ * Card mode for the Tree right pane: renders the same record set as Table
+ * mode, one library <Card> per record. The label field is the card header;
+ * the remaining visible fields are key/value rows in the card body.
+ */
+function CardGrid({
+  records,
   fields,
-  columns,
   labelField,
 }: {
-  node: TreeNode
-  fields: FieldConfig[]
-  columns: DynamicColumnConfig[]
-  labelField: FieldConfig
+  records: DynamicRecord[];
+  fields: FieldConfig[];
+  labelField: FieldConfig;
 }) {
-  const record = node.record
-  const labelValue = getByPath(record, labelField.path)
-  const displayFields = visibleFields(fields)
+  const bodyFields = visibleFields(fields)
     .filter((f) => f.path !== labelField.path)
-    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 
-  return (
-    <div className="h-full overflow-y-auto p-6 bg-background-presentation-body-primary">
-      <div className="max-w-3xl mx-auto space-y-6">
-        <div className="space-y-1">
-          <div className="text-xs uppercase tracking-wide text-content-presentation-global-tertiary">
-            {labelField.label ?? labelField.path}
-          </div>
-          <h2 className="text-2xl font-semibold text-content-presentation-global-primary">
-            {renderField(labelValue, labelField, record)}
-          </h2>
-        </div>
+  if (records.length === 0) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-content-presentation-global-tertiary">
+        No records.
+      </div>
+    );
+  }
 
-        {displayFields.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-2 border-b border-border-presentation-global-primary">
-            {displayFields.map((f) => {
-              const value = getByPath(record, f.path)
-              if (value == null) return null
-              return (
-                <div key={f.path} className="space-y-1">
-                  <dt className="text-xs font-medium uppercase tracking-wide text-content-presentation-global-tertiary">
-                    {f.label ?? f.path}
-                  </dt>
-                  <dd className="text-sm text-content-presentation-global-primary">
-                    {renderField(value, f, record)}
-                  </dd>
+  return (
+    <div className="h-full overflow-y-auto p-4 bg-background-presentation-body-primary">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {records.map((record, idx) => {
+          const labelValue = getByPath(record, labelField.path);
+          return (
+            <Card key={record.id ?? idx} className="overflow-hidden">
+              <CardHeader className="pb-2">
+                <div className="text-xs uppercase tracking-wide text-content-presentation-global-tertiary">
+                  {labelField.label ?? labelField.path}
                 </div>
-              )
-            })}
-          </div>
-        )}
-
-        <div>
-          {renderDetailView(
-            record,
-            columns.filter((c) => c.visible),
-            (value, column, row) => {
-              const f = fields.find((x) => x.path === column.id)
-              if (f) return renderField(value, f, row)
-              return <span>{String(value ?? "")}</span>
-            },
-          )}
-        </div>
+                <div className="text-base font-semibold text-content-presentation-global-primary">
+                  {renderField(labelValue, labelField, record)}
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-2 pt-0">
+                {bodyFields.map((f) => {
+                  const value = getByPath(record, f.path);
+                  if (value == null) return null;
+                  return (
+                    <div
+                      key={f.path}
+                      className="flex items-center justify-between gap-3 text-sm"
+                    >
+                      <span className="text-content-presentation-global-tertiary">
+                        {f.label ?? f.path}
+                      </span>
+                      <span className="text-content-presentation-global-primary text-right">
+                        {renderField(value, f, record)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </CardContent>
+            </Card>
+          );
+        })}
       </div>
     </div>
-  )
+  );
 }

package/apps/lib/components/DataViews/index.ts

@@ -10,9 +10,15 @@ export type { KanbanViewProps } from "./KanbanView"
 export { InboxView } from "./InboxView"
 export type { InboxViewProps } from "./InboxView"
 
+export { InboxViewCard } from "./InboxViewCard"
+export type { InboxViewCardProps } from "./InboxViewCard"
+
 export { TreeView } from "./TreeView"
 export type { TreeViewProps } from "./TreeView"
 
+export { DataViewRadio } from "./DataViewRadio"
+export type { DataViewRadioProps } from "./DataViewRadio"
+
 export { FilterPanel } from "./FilterPanel"
 export { SettingsPanel } from "./SettingsPanel"
 export { DataViewsHeader } from "./DataViewsHeader"