torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/DataViews/hooks/useActiveRow.ts

@@ -1,22 +0,0 @@
-"use client";
-
-import type { Row } from "../../../utils/dataViews/types";
-import { useDataViewsData, useDataViewsView } from "../context";
-
-/**
- * The row the inbox (or board, or tree) has open, ready to render in a detail pane. Returns
- * `null` when nothing is selected.
- *
- * ```tsx
- * function Detail() {
- *   const row = useActiveRow();
- *   return row ? <h2>{row.subject}</h2> : null;
- * }
- * ```
- */
-export function useActiveRow(): Row | null {
-  const { rows, getRowId } = useDataViewsData();
-  const { activeId } = useDataViewsView();
-  if (activeId === null) return null;
-  return rows.find((row, i) => getRowId(row, i) === activeId) ?? null;
-}

package/apps/lib/components/DataViews/hooks/useControllable.ts

@@ -1,52 +0,0 @@
-"use client";
-
-import { useCallback, useRef, useState } from "react";
-
-/**
- * One controlled/uncontrolled pair, written once.
- *
- * Pass `value` to control it; omit `value` to let the component keep its own. `onChange` fires
- * either way, so a consumer can observe without taking ownership.
- *
- * `set` accepts an updater, because the thing this now holds — the query — is patched rather than
- * replaced: changing a filter has to read the page it is resetting.
- */
-export function useControllable<T>(
-  value: T | undefined,
-  onChange: ((next: T) => void) | undefined,
-  fallback: T,
-): [T, (next: T | ((prev: T) => T)) => void] {
-  const [internal, setInternal] = useState<T>(fallback);
-
-  // `value !== undefined` decides the mode. Latch the first answer so a consumer that
-  // accidentally flips between the two gets a warning-free, stable component rather than
-  // React's "changing an uncontrolled input to controlled" class of bug.
-  const controlledRef = useRef(value !== undefined);
-  const isControlled = controlledRef.current;
-
-  const current = isControlled ? (value as T) : internal;
-
-  /**
-   * The value an updater builds on.
-   *
-   * Reset to `current` on every render, and advanced *synchronously* by `set` — so two patches in
-   * one tick chain instead of racing. Without that, restoring a saved view (which puts back the
-   * sort and the filters one after the other) silently drops the first: both would read the value
-   * from the last render, and the second would win.
-   */
-  const pendingRef = useRef(current);
-  pendingRef.current = current;
-
-  const set = useCallback(
-    (next: T | ((prev: T) => T)) => {
-      const resolved =
-        typeof next === "function" ? (next as (prev: T) => T)(pendingRef.current) : next;
-      pendingRef.current = resolved;
-      if (!controlledRef.current) setInternal(resolved);
-      onChange?.(resolved);
-    },
-    [onChange],
-  );
-
-  return [current, set];
-}

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

@@ -1,84 +0,0 @@
-// Enumerated, never `export *` — the same convention as `FormBuilder/index.ts`, so what this
-// folder offers is readable in one screen.
-//
-// Almost everything is reached through the compound root: `DataViews.Table`, `DataViews.Panel`,
-// `DataViews.Filters`, and so on. The loose exports below are the pieces you need when writing a
-// part of your own.
-
-export { DataViews } from "./data-views";
-
-// The query's wire format, both directions. A page needs the first two; a route handler that
-// serves one of these lists needs `parseQuery`.
-export { emptyQuery, parseQuery, queryToParams } from "../../utils/dataViews/query";
-
-// Reach into the component's state from inside a custom child — a detail pane, a bespoke filter,
-// a toolbar button that clears the selection.
-export {
-  useDataViewsData,
-  useDataViewsFilters,
-  useDataViewsPanel,
-  useDataViewsPanelTabs,
-  useDataViewsView,
-} from "./context";
-export { useActiveRow } from "./hooks";
-
-// Paint one field the way the views paint it, in your own layout.
-export { Cell } from "./cell";
-
-// A view of your own gets the loading state the built-in four get: read `loading` from
-// `useDataViewsData()` and lay these out in your own shape. There is no `Empty` counterpart —
-// nothing to show is shown as nothing.
-export { SkeletonBar, skeletonKeys } from "./states";
-
-// Wrapping a part in a component of your own — a preset panel, a project-standard header — hides
-// the marker the root recognises it by, so the wrapper has to carry the marker itself:
-//
-// ```tsx
-// const AppPanel = markPanel(function AppPanel() { return <DataViews.Panel>…</DataViews.Panel>; });
-// ```
-export { markHeader, markPanel, markView } from "./slots";
-export { resolveBadgeVariant } from "./badge";
-
-export type { ResolvedBadgeProps } from "./badge";
-export type {
-  DataContextValue,
-  FiltersContextValue,
-  PanelContextValue,
-  PanelTab,
-  PanelTabsContextValue,
-  RegisteredView,
-  ViewContextValue,
-} from "./context";
-export type * from "./types";
-
-// The vocabulary — the shapes **you** construct and hand in: a row, a field, the query, a tree of
-// nodes, a board's groups. They live in `utils/dataViews` because the route handler that serves
-// these lists imports them too, and are re-exported here so that one import line is enough:
-// every prop above is typed in terms of them.
-export type {
-  BadgeVariant,
-  ColumnColor,
-  ColumnState,
-  CurrencyOptions,
-  DataViewsQuery,
-  FieldConfig,
-  FieldType,
-  FilterFieldDescriptor,
-  FilterState,
-  FilterValue,
-  MoveIntent,
-  Path,
-  Preset,
-  Row,
-  RowGroup,
-  Sort,
-  TreeNode,
-} from "../../utils/dataViews/types";
-
-// Reading a value the way `Cell` reads it — dotted paths included — and the id rule the component
-// falls back to. A custom view or a `renderCell` that has to reach a second field needs these.
-export { defaultGetRowId, formatPathLabel, getByPath, getString } from "../../utils/dataViews/path";
-
-// The board's card body, so a card of your own — in the board or the tree's pane — is built from
-// the same pairs the built-in one uses.
-export { buildCardRows } from "./views/card-rows";

package/apps/lib/components/DataViews/panel/columns.tsx

@@ -1,153 +0,0 @@
-"use client";
-
-import React from "react";
-import { cn } from "../../../utils/cn";
-import { DragList, useDragDrop, useDragItem } from "../../../hooks/useDragDrop";
-import { formatPathLabel } from "../../../utils/dataViews/path";
-import type { ColumnState } from "../../../utils/dataViews/types";
-import { useDataViewsData, useDataViewsView } from "../context";
-import { DataViewsSwitch } from "./controls";
-import { Section } from "./section";
-import type { PanelColumnsProps } from "../types";
-
-/** The 2×3 grip dots on a draggable column row. Hand-drawn — there is no icon for this shape. */
-function GripDots() {
-  return (
-    <svg aria-hidden width="16" height="16" viewBox="0 0 16 16" className="text-white/60" fill="currentColor">
-      {[5.33, 9.33].flatMap((cx) =>
-        [3.33, 8, 12.67].map((cy) => <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r="1" />),
-      )}
-    </svg>
-  );
-}
-
-/** The insertion line shown between rows while dragging one. */
-function DropLine() {
-  return (
-    <div className="pointer-events-none relative h-0">
-      <div className="absolute -top-[1px] left-0 right-0 h-[2px] rounded-full bg-[#005ECC]" />
-    </div>
-  );
-}
-
-/**
- * `DataViews.Panel.Columns` — show/hide and reorder the columns.
- *
- * The column list is the root's, read and written through `useDataViewsView()` — this part takes
- * no `value`/`onValueChange` of its own. The root is what turns `columns` into the ordered
- * `visibleFields` every view paints from, so hiding a column here also retitles the board's cards. When `columns` has never been set, the list is seeded from
- * `fields` on first edit, so you are not forced to declare a redundant array to get this working.
- */
-export function Columns({
-  title = "Table Columns",
-  // Figma writes this line under the header; it is the section's own words, so it is the default
-  // rather than something every caller has to remember to pass.
-  description = "Show or hide columns in table view",
-  className,
-}: PanelColumnsProps) {
-  const { fields } = useDataViewsData();
-  const { columns, setColumns } = useDataViewsView();
-
-  // What the panel shows: the user's arrangement if there is one, otherwise the declared fields.
-  const current: ColumnState[] =
-    columns.length > 0
-      ? columns.slice()
-      : fields
-          .filter((f) => f.type !== "hidden")
-          .map((f) => ({
-            path: f.path,
-            label: f.label ?? formatPathLabel(f.path),
-            visible: f.visible !== false,
-          }));
-
-  // Rows are identified by path — the same key the table and every other view uses.
-  const ids = current.map((c) => c.path);
-
-  const { DndContext, contextProps, activeId, overId } = useDragDrop({
-    mode: "list",
-    onMove: ({ id, to }) => {
-      const from = ids.indexOf(id);
-      const target = ids.indexOf(String(to));
-      if (from < 0 || target < 0 || from === target) return;
-      const next = current.slice();
-      const [moved] = next.splice(from, 1);
-      next.splice(target, 0, moved);
-      setColumns(next);
-    },
-  });
-
-  const toggle = (path: string) =>
-    setColumns(current.map((c) => (c.path === path ? { ...c, visible: !c.visible } : c)));
-
-  return (
-    <Section title={title} description={description} className={className}>
-      <DndContext {...contextProps}>
-        <DragList ids={ids}>
-          <div data-theme="dark" className="flex flex-col gap-2">
-            {current.map((column, index) => (
-              <ColumnRow
-                key={`${column.path}-${index}`}
-                column={column}
-                onToggle={() => toggle(column.path)}
-                showDropLine={overId === column.path && activeId !== null && activeId !== column.path}
-              />
-            ))}
-          </div>
-        </DragList>
-      </DndContext>
-    </Section>
-  );
-}
-
-/**
- * One column row.
- *
- * A separate component because `useDragItem` is a hook, and a hook cannot be called inside the
- * `.map()` that paints the list.
- */
-function ColumnRow({
-  column,
-  onToggle,
-  showDropLine,
-}: {
-  column: ColumnState;
-  onToggle: () => void;
-  showDropLine: boolean;
-}) {
-  const { ref, handleProps, style, isDragging } = useDragItem(column.path);
-
-  return (
-    <React.Fragment>
-      {showDropLine && <DropLine />}
-      <div
-        ref={ref}
-        style={style}
-        {...handleProps}
-        className={cn(
-                // SB-Column-Item: a standalone #1C1D1F pill with a #252729 border, rounded hard
-                // on the trailing edge and softly on the leading one.
-                "flex cursor-grab items-center gap-2 rounded-e-[99px] rounded-s-[60px] border",
-                "border-[#252729] bg-[#1C1D1F] p-[8.8px] transition-colors active:cursor-grabbing",
-          isDragging ? "opacity-50" : "hover:bg-[#252729]",
-        )}
-      >
-        <span className="flex shrink-0 items-center justify-center">
-          <GripDots />
-        </span>
-        <span className="flex-1 text-[14px] text-white">{column.label}</span>
-        {/* Stop the switch from starting a drag: the row is the handle, and a press on the
-            toggle is not a press on the row. */}
-        <span
-          className="flex shrink-0 items-center"
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          <DataViewsSwitch
-            checked={column.visible}
-            onCheckedChange={onToggle}
-            aria-label={`Show ${column.label}`}
-          />
-        </span>
-      </div>
-    </React.Fragment>
-  );
-}

package/apps/lib/components/DataViews/panel/controls.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { cn } from "../../../utils/cn";
-import { Switch } from "../../Switch";
-
-/**
- * The form controls the settings rail is built from.
- *
- * The rail is wrapped in `data-theme="dark"`, so themed components resolve dark tokens on their
- * own. The literals below are the exceptions — values chosen against pure black in Figma that
- * sit outside the theme system entirely.
- */
-
-/** The bright-green checked track from the Figma Switcher-1.0 "On" state. */
-const SWITCH_GREEN = "data-[state=checked]:bg-[#0AC713] data-[state=checked]:border-[#0AC713]";
-
-export function DataViewsSwitch(props: React.ComponentProps<typeof Switch>) {
-  return <Switch {...props} className={cn(SWITCH_GREEN, props.className)} />;
-}
-
-/**
- * A radio row. The whole 32px row is the Radix item, so the label is part of the click target
- * rather than something you have to hit the 14px ring for.
- */
-export function DataViewRadio({
-  value,
-  label,
-  children,
-  className,
-}: {
-  value: string;
-  label?: string;
-  children?: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <RadioGroupPrimitive.Item
-      value={value}
-      className={cn(
-        "group flex h-[32px] w-full items-center gap-1.5 py-1 ps-2",
-        "cursor-pointer rounded-[8px] text-left outline-none transition-colors",
-        "hover:bg-background-presentation-action-contstyle-hover focus-visible:bg-background-presentation-action-contstyle-hover",
-        className,
-      )}
-    >
-      <span
-        className={cn(
-          "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
-          // Literals so the indicator stays dark inside the rail regardless of the host theme,
-          // matching the always-dark panel chrome. Unselected ring is the CheckBox-Primary border
-          // (#626467) over the BorderStyle fill; selected is the focus blue.
-          "border border-[#626467] bg-white/5 transition-colors",
-          "group-data-[state=checked]:border-transparent",
-          "group-data-[state=checked]:bg-[#0075FF]",
-        )}
-      >
-        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-          <span className="h-[6px] w-[6px] rounded-full bg-white" />
-        </RadioGroupPrimitive.Indicator>
-      </span>
-      <span className="typography-body-medium-regular text-content-presentation-global-primary flex-1">
-        {children ?? label}
-      </span>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-/**
- * A `#1C1D1F` pill holding a list of radio rows, with hairlines between them.
- *
- * The two `:has()` rules hide the hairline above and below the row being hovered, so the hover
- * highlight reads as one continuous block instead of being sliced by a line.
- */
-export function RadioGroup({
-  value,
-  onValueChange,
-  items,
-  className,
-}: {
-  value: string;
-  onValueChange: (value: string) => void;
-  items: readonly { value: string; label: string }[];
-  className?: string;
-}) {
-  return (
-    <RadioGroupPrimitive.Root
-      value={value}
-      onValueChange={onValueChange}
-      className={cn(
-        "flex flex-col space-y-0 rounded-[12px] bg-[#1C1D1F] p-1",
-        "[&>div:has(>[role=radio]:hover)>.dv-divider]:opacity-0",
-        "[&>div:has(>[role=radio]:hover)+div>.dv-divider]:opacity-0",
-        className,
-      )}
-    >
-      {items.map((item, i) => (
-        <div key={item.value}>
-          {i > 0 && <div className="dv-divider h-px bg-[#2C2D2E]" />}
-          <DataViewRadio value={item.value} label={item.label} />
-        </div>
-      ))}
-    </RadioGroupPrimitive.Root>
-  );
-}

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

@@ -1,3 +0,0 @@
-// The rail. `panel.tsx` assembles the compound surface; the rest is one component per file, the
-// same shape as `views/`.
-export { Panel } from "./panel";

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

@@ -1,164 +0,0 @@
-"use client";
-
-import React, { Children, useEffect, useMemo, useRef, useState } from "react";
-import { X } from "lucide-react";
-import { cn } from "../../../utils/cn";
-import { PanelTabsContext, useDataViewsPanel, type PanelTab } from "../context";
-import { markPanel } from "../slots";
-import { Columns } from "./columns";
-import { SavedViews } from "./saved-views";
-import { Section } from "./section";
-import { Sort } from "./sort";
-import { Tab, isTabElement } from "./tab";
-import type { PanelProps } from "../types";
-
-/**
- * `DataViews.Panel` — the settings rail, opened by `DataViews.PanelToggle`.
- *
- * Always dark: `data-theme="dark"` on the root makes the Buttons, Switches and Radios inside
- * resolve dark tokens against the black, even when the host app runs light. The width animates
- * from 0 so the content beside it reflows rather than being covered.
- *
- * Tabs, like views, exist because you rendered them: the strip is built from the `Panel.Tab`
- * children found here and disappears when there is only one.
- *
- * Open/closed lives on the root, because the toggle that drives it is in the header — this
- * component's sibling. Which tab is showing lives here, because nothing outside this rail cares.
- */
-function PanelRoot({ children, defaultTab, title, className }: PanelProps) {
-  const { open, setOpen } = useDataViewsPanel();
-
-  // Mount at width 0, then flip to the open width on the next frame so the transition has two
-  // values to animate between; on close, keep it mounted until the animation finishes.
-  const [mounted, setMounted] = useState(open);
-  const [expanded, setExpanded] = useState(false);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (open) {
-      if (closeTimer.current) clearTimeout(closeTimer.current);
-      setMounted(true);
-      const raf = requestAnimationFrame(() => requestAnimationFrame(() => setExpanded(true)));
-      return () => cancelAnimationFrame(raf);
-    }
-    setExpanded(false);
-    closeTimer.current = setTimeout(() => setMounted(false), 300);
-    return () => {
-      if (closeTimer.current) clearTimeout(closeTimer.current);
-    };
-  }, [open]);
-
-  const childArray = Children.toArray(children);
-  const tabElements = childArray.filter(isTabElement);
-  const loose = childArray.filter((n) => !isTabElement(n));
-
-  // Keyed on the tab identities rather than the (always-new) child array — same reasoning as the
-  // view registry in `data-views.tsx`.
-  const tabKey = tabElements.map((el) => `${el.props.value}|${el.props.label}`).join(",");
-  const tabs = useMemo<PanelTab[]>(
-    () =>
-      tabElements.map((el) => ({ value: el.props.value, label: el.props.label, icon: el.props.icon })),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on `tabKey`, see above
-    [tabKey],
-  );
-
-  const [currentTab, setTab] = useState(defaultTab ?? "");
-  const known = tabs.some((t) => t.value === currentTab);
-  const fallbackTab = tabs[0]?.value ?? "";
-  // A tab that stops being rendered falls back to the first, which also covers the first render
-  // when no `defaultTab` was given.
-  const activeTab = known ? currentTab : fallbackTab;
-
-  const value = useMemo(() => ({ tab: activeTab, setTab, tabs }), [activeTab, setTab, tabs]);
-
-  if (!mounted) return null;
-
-  return (
-    <PanelTabsContext.Provider value={value}>
-      <div
-        className={cn(
-          "shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out",
-          expanded ? "w-[260px]" : "w-0",
-        )}
-      >
-        <aside
-          data-theme="dark"
-          data-state={expanded ? "open" : "closed"}
-          className={cn(
-            "flex h-full w-[260px] flex-col overflow-hidden rounded-[16px] bg-black",
-            "transition-opacity duration-200 ease-in-out",
-            expanded ? "opacity-100" : "opacity-0",
-            className,
-          )}
-        >
-          <div className="flex items-center gap-2 px-3 py-3">
-            {tabs.length > 1 ? (
-              <div className="flex flex-1 items-center gap-[2px] rounded-[10px] bg-[#252729] p-[2px] shadow-[inset_0_0_5px_0_rgba(0,0,0,0.16)]">
-                {tabs.map((t) => {
-                  const active = t.value === activeTab;
-                  return (
-                    <button
-                      key={t.value}
-                      type="button"
-                      role="tab"
-                      aria-selected={active}
-                      onClick={() => setTab(t.value)}
-                      className={cn(
-                        "flex h-6 flex-1 items-center justify-center gap-1 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-white hover:bg-white/5",
-                      )}
-                    >
-                      {t.icon && (
-                        <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
-                          {t.icon}
-                        </span>
-                      )}
-                      {t.label}
-                    </button>
-                  );
-                })}
-              </div>
-            ) : (
-              <span className="flex-1 text-[18px] font-[510] leading-[1.32] tracking-[-0.01em] text-white">
-                {title ?? tabs[0]?.label ?? ""}
-              </span>
-            )}
-
-            <button
-              type="button"
-              aria-label="Close settings panel"
-              onClick={() => setOpen(false)}
-              className="hover:bg-background-presentation-state-negative-primary flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:text-white"
-            >
-              <X className="h-[18px] w-[18px]" />
-            </button>
-          </div>
-
-          <div className="h-px w-full bg-[#2C2D2E]" />
-
-          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-3 py-4">
-            {tabElements}
-            {loose}
-          </div>
-        </aside>
-      </div>
-    </PanelTabsContext.Provider>
-  );
-}
-
-
-markPanel(PanelRoot);
-
-/**
- * The rail's compound surface, assembled in one place so what it offers is readable at a glance.
- */
-export const Panel = Object.assign(PanelRoot, {
-  Tab,
-  Section,
-  Columns,
-  Sort,
-  SavedViews,
-});

package/apps/lib/components/DataViews/panel/saved-views.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Plus } from "lucide-react";
-import { Button } from "../../Button";
-import { useDataViewsFilters, useDataViewsView } from "../context";
-import { RadioGroup } from "./controls";
-import { Section } from "./section";
-import type { PanelSavedViewsProps } from "../types";
-
-/**
- * `DataViews.Panel.SavedViews` — pick a saved arrangement, or save the current one.
- *
- * Persistence is yours. `onSave` is handed the full snapshot — filters, sort and columns — which
- * is the part the old panel got wrong: its save callback took no arguments, so there was nothing
- * a host could actually store.
- */
-export function SavedViews({
-  title = "Saved View",
-  views = [],
-  onValueChange,
-  onSave,
-  saveLabel = "Save a New View",
-  className,
-}: PanelSavedViewsProps) {
-  const { sort, setSort, columns, setColumns } = useDataViewsView();
-  const { filters, setFilters } = useDataViewsFilters();
-  // Which view is selected is UI state like any other — the caller stores the snapshots, not the
-  // cursor into them.
-  const [active, setActive] = useState("");
-
-  /** Selecting a view is the other half of saving one: put back exactly what was stored. */
-  const restore = (id: string) => {
-    setActive(id);
-    const snapshot = views.find((v) => v.id === id)?.snapshot;
-    if (snapshot) {
-      setColumns(snapshot.columns);
-      setSort(snapshot.sort);
-      setFilters(snapshot.filters);
-    }
-    onValueChange?.(id);
-  };
-
-  return (
-    <Section title={title} className={className}>
-      {views.length > 0 && (
-        <RadioGroup
-          value={active}
-          onValueChange={restore}
-          items={views.map((v) => ({ value: v.id, label: v.label }))}
-        />
-      )}
-      {onSave && (
-        <Button
-          type="button"
-          variant="BorderStyle"
-          size="M"
-          className="w-full"
-          onClick={() => onSave({ filters, sort, columns })}
-        >
-          <Plus className="h-4 w-4" />
-          {saveLabel}
-        </Button>
-      )}
-    </Section>
-  );
-}