torch-glare 2.5.5 → 2.6.0

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

@@ -1,157 +0,0 @@
-"use client";
-
-import { useId, useMemo, useState } from "react";
-import { cn } from "../../../utils/cn";
-import { Button } from "../../Button";
-import { ConclusionHeader } from "../../ConclusionHeader";
-import { FormBuilder } from "../../FormBuilder";
-import { CellContext } from "../../FormBuilder/context";
-import { FiltersContext, useDataViewsFilters } from "../context";
-import { collectFilterFields, renderFields } from "./children";
-import { Custom } from "./custom";
-import { Presets } from "./presets";
-import { Sync } from "./sync";
-import { toFormValues } from "./values";
-import type { FiltersProps } from "../types";
-
-/**
- * `DataViews.Filters` — the filter controls, written as a form.
- *
- * Three things to be clear about.
- *
- * **It does not filter.** It collects what the user asked for and calls `onValueChange`. Going and
- * fetching the matching rows is your job, almost certainly server-side. The rows on screen change
- * when you hand back different `rows` — never before.
- *
- * **The children are FormBuilder fields.** Not a config array describing fields — the fields
- * themselves, one JSX child each, exactly as any other form in this library is written. They
- * render through `CellContext` in `"bare"` mode: no `FieldSection` label row, no table borders,
- * errors as tooltips.
- *
- * **What each child means comes from the field, not from you.** `FormBuilder` stamps every field
- * with a `FieldKind` — see `fieldKindOf` — so a `MultiSelect` becomes a list of values, a `Slider`
- * a numeric range, a `DateRange` a date range. Nothing is inferred from the rows.
- *
- * There is no `value`/`onValueChange` here: the filters live in the root's query, and this reads
- * and writes them through `useDataViewsFilters()`. What leaves the component is `onQueryChange`.
- *
- * ```tsx
- * <DataViews.Filters>
- *   <FormBuilder.MultiSelect name="status" label="Status" options={STATUS} />
- *   <FormBuilder.Slider name="total" label="Total" range min={0} max={15000} step={100} />
- *   <DataViews.Filters.Presets for="total" items={[{ label: "Under $500", max: 500 }]} />
- * </DataViews.Filters>
- * ```
- */
-function FiltersRoot({
-  children,
-  title = "Filters",
-  description,
-  clearLabel = "Clear",
-  collapsible = true,
-  defaultOpen = true,
-  className,
-}: FiltersProps) {
-  const { filters, setFilters } = useDataViewsFilters();
-
-  const fields = useMemo(() => collectFilterFields(children), [children]);
-
-  const value = useMemo(
-    () => ({ filters, setFilters, filterFields: fields }),
-    [filters, setFilters, fields],
-  );
-
-  const values = useMemo(() => toFormValues(filters, fields), [filters, fields]);
-  const active = Object.keys(filters).length > 0;
-
-  const [open, setOpen] = useState(defaultOpen);
-  const bodyId = useId();
-  const isCollapsible = collapsible && title != null;
-  const shown = !isCollapsible || open;
-
-  return (
-    <FiltersContext.Provider value={value}>
-      <div
-        className={cn(
-          "flex shrink-0 flex-col gap-3 px-4 py-3",
-          "border-border-presentation-global-primary border-b",
-          className,
-        )}
-      >
-        {(title || active) && (
-          // `ConclusionHeader` renders a `<button>`, so Clear cannot live inside it — nesting a
-          // button in a button is invalid and swallows the inner click. They are siblings.
-          <div className="flex items-center gap-2">
-            {title != null &&
-              (isCollapsible ? (
-                <ConclusionHeader
-                  label={title}
-                  open={open}
-                  onOpenChange={setOpen}
-                  aria-controls={bodyId}
-                  className="flex-1"
-                />
-              ) : (
-                // Reading the colour from a token rather than a `text-white` literal is what lets
-                // the same controls sit in the dark rail and in the light content area.
-                <h3 className="text-content-presentation-global-primary min-w-0 truncate text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
-                  {title}
-                </h3>
-              ))}
-            {active && (
-              <Button
-                size="S"
-                variant="BorderStyle"
-                className="ms-auto"
-                onClick={() => setFilters({})}
-              >
-                {clearLabel}
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Below the header *row*, not inside it — that row is a flex line holding the header and
-            Clear as siblings, and the description belongs to the section, not beside the button. */}
-        {description != null && (
-          <p className="typography-body-small-regular text-content-presentation-global-primary">
-            {description}
-          </p>
-        )}
-
-        {/* `onSubmit` is required by FormBuilder but never reached — there is no submit button and
-            no Enter target. Filters emit as you touch them. */}
-        <FormBuilder onSubmit={() => {}} values={values} fieldDirection="vertical">
-          <Sync fields={fields} />
-          <CellContext.Provider value="bare">
-            {/* Same fold as `Panel.Section`: a 0fr→1fr grid row, and `inert` so a collapsed
-                filter's control leaves the tab order rather than staying focusable. */}
-            <div
-              id={bodyId}
-              inert={!shown}
-              aria-hidden={!shown}
-              className={cn(
-                "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
-                "motion-reduce:transition-none",
-                shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-              )}
-            >
-              <div className="overflow-hidden">
-                <div className="flex flex-wrap items-start gap-3">{renderFields(children)}</div>
-              </div>
-            </div>
-          </CellContext.Provider>
-        </FormBuilder>
-      </div>
-    </FiltersContext.Provider>
-  );
-}
-
-/**
- * The filter surface, assembled in one place. `Presets` and `Custom` are ours because FormBuilder
- * has no field for them; everything else you write is a FormBuilder field.
- */
-export const Filters = Object.assign(FiltersRoot, {
-  Presets,
-  Custom,
-});

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

@@ -1,4 +0,0 @@
-// The filter surface. `filters.tsx` assembles the compound; `children.tsx` is the walk that reads
-// your FormBuilder fields; `values.ts` is the pure mapping between `FilterState` and form values.
-export { Filters } from "./filters";
-export { collectFilterFields } from "./children";

package/apps/lib/components/DataViews/filters/labelled.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import React from "react";
-
-/** A label above a bare control, since `FieldSection` is exactly what "bare" removes. */
-export function Labelled({ label, children }: { label?: React.ReactNode; children: React.ReactNode }) {
-  return (
-    // `flex-1` is what makes a control fill the width it was given rather than sitting at its
-    // minimum with dead space beside it — one per line in the 260px rail, sharing the line evenly
-    // in anything wider. `min-w` stays as the floor that decides where the parent wraps.
-    <div className="flex min-w-[180px] flex-1 flex-col gap-1">
-      {label && (
-        <span className="typography-body-small-regular text-content-presentation-global-secondary">
-          {label}
-        </span>
-      )}
-      {children}
-    </div>
-  );
-}

package/apps/lib/components/DataViews/filters/presets.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import { useFormContext } from "react-hook-form";
-import { cn } from "../../../utils/cn";
-import type { FilterFieldDescriptor, NumberPreset } from "../../../utils/dataViews/types";
-import { useDataViewsFilters } from "../context";
-import { datePresets, numberPresets, toName } from "./values";
-import type { FilterPresetsProps } from "../types";
-
-/** Look up what `Filters` learned about a path, so a sibling control can target it. */
-function useDescriptor(path: string): FilterFieldDescriptor | undefined {
-  const { filterFields } = useDataViewsFilters();
-  return filterFields.find((f) => f.path === path);
-}
-
-
-/**
- * `DataViews.Filters.Presets` — named shortcuts for the field named in `for`.
- *
- * FormBuilder has no field for this, and it is not a filter of its own: it writes into a sibling's
- * value. Numeric presets fill the side they do not name from that slider's bounds, so
- * `{ label: "$5k+", min: 5000 }` means "5,000 to the top" rather than "5,000 to 100".
- */
-export function Presets({ for: path, items, className }: FilterPresetsProps) {
-  const form = useFormContext();
-  const field = useDescriptor(path);
-  const name = toName(path);
-
-  if (!field) return null;
-
-  const shortcuts =
-    field.kind === "date"
-      ? datePresets(items).map((preset) => ({
-          label: preset.label,
-          apply: () =>
-            form.setValue(name, {
-              from: preset.from ? new Date(preset.from) : undefined,
-              to: preset.to ? new Date(preset.to) : undefined,
-            }),
-        }))
-      : numberPresets(items).map((preset: NumberPreset) => ({
-          label: preset.label,
-          apply: () => form.setValue(name, [preset.min ?? field.min ?? 0, preset.max ?? field.max ?? 100]),
-        }));
-
-  if (shortcuts.length === 0) return null;
-
-  return (
-    <div className={cn("flex flex-wrap gap-1", className)}>
-      {shortcuts.map((preset) => (
-        <button
-          key={preset.label}
-          type="button"
-          onClick={preset.apply}
-          className={cn(
-            "typography-body-small-regular rounded-[4px] px-2 py-[2px] transition-colors",
-            "text-content-presentation-global-secondary hover:bg-background-presentation-action-hover",
-          )}
-        >
-          {preset.label}
-        </button>
-      ))}
-    </div>
-  );
-}

package/apps/lib/components/DataViews/filters/sync.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { useWatch } from "react-hook-form";
-import type { FilterFieldDescriptor } from "../../../utils/dataViews/types";
-import { useDataViewsFilters } from "../context";
-import { sameFilters, toFilterState } from "./values";
-
-/**
- * Pushes what the user typed back out as `onValueChange`.
- *
- * Debounced, and guarded by an equality check: without both, `watch` → emit → new `values` →
- * re-render is a loop that swallows keystrokes mid-type.
- */
-export function Sync({ fields }: { fields: readonly FilterFieldDescriptor[] }) {
-  const { setFilters, filters } = useDataViewsFilters();
-  const watched = useWatch();
-
-  // Read the current filters through a ref so the effect does not re-run just because the parent
-  // handed back a new (equal) object.
-  const latest = useRef(filters);
-  latest.current = filters;
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      // Merged onto the current state, not derived from scratch — these controls own only their
-      // own paths. Anything else (a `Filters.Custom` value, a key the caller supplied) survives.
-      const next = toFilterState(watched as Record<string, unknown>, fields, latest.current);
-      if (!sameFilters(next, latest.current)) setFilters(next);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [watched, fields, setFilters]);
-
-  return null;
-}

package/apps/lib/components/DataViews/filters/values.ts

@@ -1,173 +0,0 @@
-import type {
-  DatePreset,
-  FilterFieldDescriptor,
-  FilterState,
-  FilterValue,
-  NumberPreset,
-  Preset,
-} from "../../../utils/dataViews/types";
-
-/**
- * Translating between `FilterState` (what you receive) and react-hook-form values (what the
- * inputs speak). Pure functions, no React — the fiddly half of `Filters` is here so the component
- * itself stays readable, and so this is testable without rendering anything.
- */
-
-/**
- * RHF reads `.` in a field name as object nesting, so a filter on `customer.name` would arrive as
- * `{ customer: { name: … } }`. Names are escaped on the way in and unescaped on the way out.
- */
-export const toName = (path: string) => path.replace(/\./g, "__");
-
-const isRange = (v: FilterValue | undefined): v is Exclude<FilterValue, string[]> =>
-  !!v && !Array.isArray(v);
-
-/** `FilterState` → the values the inputs want. */
-export function toFormValues(
-  filters: FilterState,
-  fields: readonly FilterFieldDescriptor[],
-): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-
-  for (const field of fields) {
-    const value = filters[field.path];
-    const name = toName(field.path);
-
-    switch (field.kind) {
-      case "choice": {
-        const selected = Array.isArray(value) ? value : [];
-        out[name] = field.single ? (selected[0] ?? "") : selected;
-        break;
-      }
-      case "number": {
-        const lo = field.min ?? 0;
-        const hi = field.max ?? 100;
-        const range = isRange(value) && value.kind === "number" ? value : undefined;
-        out[name] = [range?.min ?? lo, range?.max ?? hi];
-        break;
-      }
-      case "date": {
-        const range = isRange(value) && value.kind === "date" ? value : undefined;
-        out[name] = {
-          from: range?.from ? new Date(range.from) : undefined,
-          to: range?.to ? new Date(range.to) : undefined,
-        };
-        break;
-      }
-      case "text":
-        out[name] = Array.isArray(value) ? (value[0] ?? "") : "";
-        break;
-    }
-  }
-
-  return out;
-}
-
-/**
- * `YYYY-MM-DD` in the **user's** timezone.
- *
- * `toISOString()` converts to UTC first, so someone east of UTC picking "today" in the calendar
- * would emit yesterday's date — an off-by-one-day filter that only reproduces in some timezones.
- */
-const iso = (d: unknown) => {
-  const date = d instanceof Date ? d : d ? new Date(String(d)) : null;
-  if (!date || Number.isNaN(date.getTime())) return undefined;
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-};
-
-/**
- * The inputs' values → `FilterState`.
- *
- * A control at its neutral position produces **no key at all** rather than an empty one. That
- * matters: the emitted query is a request to go and fetch, and `{ total: { min: 0, max: 100 } }`
- * when the slider has never been touched would narrow a query that the user never narrowed.
- *
- * `previous` is merged rather than replaced, and this is load-bearing: these `fields` own only
- * their own paths. `Filters.Custom` writes straight into `FilterState`, and a caller's initial
- * `filters` may carry keys no control was declared for. Rebuilding the state from `fields` alone
- * would silently drop both the moment any control changed.
- */
-export function toFilterState(
-  values: Record<string, unknown>,
-  fields: readonly FilterFieldDescriptor[],
-  previous: FilterState = {},
-): FilterState {
-  const owned = new Set(fields.map((f) => f.path));
-  const out: FilterState = {};
-  for (const [path, value] of Object.entries(previous)) {
-    if (!owned.has(path)) out[path] = value;
-  }
-
-  for (const field of fields) {
-    const raw = values[toName(field.path)];
-
-    switch (field.kind) {
-      case "choice": {
-        const selected =
-          field.single
-            ? raw
-              ? [String(raw)]
-              : []
-            : Array.isArray(raw)
-              ? raw.map(String)
-              : [];
-        if (selected.length > 0) out[field.path] = selected;
-        break;
-      }
-      case "number": {
-        if (!Array.isArray(raw)) break;
-        const lo = field.min ?? 0;
-        const hi = field.max ?? 100;
-        const [min, max] = raw as number[];
-        // Untouched means "no constraint", not "everything".
-        if (min === lo && max === hi) break;
-        out[field.path] = { kind: "number", min, max };
-        break;
-      }
-      case "date": {
-        const range = (raw ?? {}) as { from?: unknown; to?: unknown };
-        const from = iso(range.from);
-        const to = iso(range.to);
-        if (from || to) out[field.path] = { kind: "date", from, to };
-        break;
-      }
-      case "text": {
-        const text = typeof raw === "string" ? raw.trim() : "";
-        if (text) out[field.path] = [text];
-        break;
-      }
-    }
-  }
-
-  return out;
-}
-
-/**
- * Whether two filter states are the same. Used to break the `watch` → `onChange` → new `values`
- * → re-render loop that otherwise eats keystrokes: if nothing actually changed, nothing is
- * emitted.
- */
-export function sameFilters(a: FilterState, b: FilterState): boolean {
-  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
-  for (const key of keys) {
-    const x = a[key];
-    const y = b[key];
-    if (x === undefined || y === undefined) return false;
-    if (Array.isArray(x) !== Array.isArray(y)) return false;
-    if (Array.isArray(x) && Array.isArray(y)) {
-      if (x.length !== y.length || x.some((v, i) => v !== y[i])) return false;
-    } else if (JSON.stringify(x) !== JSON.stringify(y)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-/** The numeric shortcuts out of a mixed `presets` list. */
-export const numberPresets = (presets?: readonly Preset[]): NumberPreset[] =>
-  (presets ?? []).filter((p): p is NumberPreset => "min" in p || "max" in p);
-
-/** The date shortcuts out of a mixed `presets` list. */
-export const datePresets = (presets?: readonly Preset[]): DatePreset[] =>
-  (presets ?? []).filter((p): p is DatePreset => "from" in p || "to" in p);

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

@@ -1,220 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-import { Search as SearchIcon, Settings } from "lucide-react";
-import { cn } from "../../utils/cn";
-import { Button } from "../Button";
-import { TabSwitch, type TabSwitchOption } from "../TabSwitch";
-import { useDataViewsPanel, useDataViewsView } from "./context";
-import { markHeader } from "./slots";
-import type {
-  ActionsProps,
-  HeaderProps,
-  PanelToggleProps,
-  SearchProps,
-  ViewSwitchProps,
-} from "./types";
-
-/**
- * The bar above the views — 52px, black, always dark.
- *
- * `data-theme="dark"` is deliberate and scoped to the bar: it makes the child Buttons and the
- * view switcher resolve dark tokens so they read correctly against the black, even when the host
- * app runs light. It must not wrap the content below, which stays in the host theme.
- *
- * ```tsx
- * <DataViews.Header title="Orders">
- *   <DataViews.ViewSwitch />
- *   <DataViews.Search />
- *   <DataViews.Actions><Button>New</Button></DataViews.Actions>
- *   <DataViews.PanelToggle />
- * </DataViews.Header>
- * ```
- */
-export function Header({ title, children, className }: HeaderProps) {
-  return (
-    <div
-      data-theme="dark"
-      className={cn(
-        // 40px and no background of its own, per Figma's `Body-HeaderBar-1.0`. The bar has never
-        // needed one: the root shell already paints black behind it.
-        "flex h-[40px] w-full shrink-0 items-center gap-2 rounded-[12px]",
-        className,
-      )}
-    >
-      {title !== undefined && (
-        <>
-          {/* `min-w-0`, not `shrink-0`: the pill has to be able to give up width, or a long title
-              pushes the view switch, actions and panel toggle off the end of the bar. It yields
-              first and the title ellipsises instead. */}
-          <div className="flex h-9 min-w-0 items-center gap-2 rounded-[12px] border border-[#434446] bg-[#252729] px-[10px]">
-            <span className="truncate text-[28px] font-[510] uppercase leading-[1.19] text-white">
-              {title}
-            </span>
-          </div>
-          {/* `border/presentation/global/primary`, not the pill's `#434446` — the design uses two
-              different greys here, and the divider is the darker one. */}
-          <div className="h-5 w-px shrink-0 rounded-[4px] bg-[#2c2d2e]" />
-        </>
-      )}
-      {children}
-    </div>
-  );
-}
-
-markHeader(Header);
-
-/**
- * Switches between the views you rendered. The options come from the view registry, so this stays
- * in sync by construction — there is no list to keep updated.
- *
- * It takes the remaining width, which is what pushes `Actions` and the panel toggle to the end of
- * the bar. Renders nothing when fewer than two views are registered: a switcher with one option
- * is noise.
- *
- */
-export function ViewSwitch({ className }: ViewSwitchProps) {
-  const { views, view, setView } = useDataViewsView();
-
-  if (views.length < 2) return <div className="flex-1" />;
-
-  const options: TabSwitchOption[] = views.map((v) => ({
-    value: v.id,
-    label: v.label,
-    icon: v.icon,
-  }));
-
-  return (
-    <div className={cn("flex flex-1 items-center gap-2", className)}>
-      <TabSwitch theme="dark" options={options} value={view} onValueChange={setView} />
-    </div>
-  );
-}
-
-/**
- * The search box — an icon button that expands into a field.
- *
- * It only reports what was typed: typing puts a `search` in the query and `onQueryChange` is
- * where you go and fetch. DataViews never matches rows against this string.
- */
-export function Search({ placeholder = "Search...", className }: SearchProps) {
-  const { search, setSearch } = useDataViewsView();
-  const [open, setOpen] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const wrapRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (open) inputRef.current?.focus();
-  }, [open]);
-
-  const clearAndCollapse = () => {
-    setSearch("");
-    setOpen(false);
-  };
-
-  useEffect(() => {
-    if (!open) return;
-    const onDown = (e: MouseEvent) => {
-      if (wrapRef.current?.contains(e.target as Node)) return;
-      // Collapsing on an outside click would throw away an active query — only close when the
-      // field is empty.
-      if (!search) setOpen(false);
-    };
-    document.addEventListener("mousedown", onDown);
-    return () => document.removeEventListener("mousedown", onDown);
-  }, [open, search]);
-
-  if (!open) {
-    return (
-      <Button
-        variant="BluContStyle"
-        size="M"
-        buttonType="icon"
-        aria-label="Open search"
-        onClick={() => setOpen(true)}
-        className={cn(
-          "border-border-presentation-global-primary shrink-0 rounded-[6px] border",
-          className,
-        )}
-      >
-        <SearchIcon className="h-[18px] w-[18px]" />
-      </Button>
-    );
-  }
-
-  return (
-    <div
-      ref={wrapRef}
-      className={cn(
-        "relative flex h-[28px] w-[260px] shrink-0 items-center justify-center rounded-[6px]",
-        "border-border-presentation-state-focus bg-background-presentation-form-field-primary border px-1",
-        "shadow-[0_1px_6px_0_rgba(0,0,0,0.30)] transition-all duration-150 ease-in-out",
-        className,
-      )}
-    >
-      <input
-        ref={inputRef}
-        type="text"
-        size={1}
-        value={search}
-        placeholder={placeholder}
-        onChange={(e) => setSearch(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Escape") clearAndCollapse();
-        }}
-        className="placeholder:text-content-presentation-global-tertiary min-w-0 flex-1 bg-transparent text-[14px] leading-none text-white caret-[#1E7AFE] focus:outline-none"
-      />
-      <button
-        type="button"
-        aria-label="Clear search"
-        onClick={clearAndCollapse}
-        className="flex shrink-0 items-center justify-center self-stretch px-1"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325C11.6818 1.33325 14.6666 4.31802 14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666ZM7.99992 7.05712L6.1143 5.17149L5.17149 6.1143L7.05712 7.99992L5.17149 9.88552L6.1143 10.8283L7.99992 8.94272L9.88552 10.8283L10.8283 9.88552L8.94272 7.99992L10.8283 6.1143L9.88552 5.17149L7.99992 7.05712Z"
-            fill="white"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-}
-
-/**
- * A slot for your own buttons, so they line up with the rest of the header.
- *
- * The convention is `<Button variant="BluColStyle" size="M">` — the solid `#005ecc` Figma uses
- * for the bar's action. `Search` and `PanelToggle` beside it stay ghost on purpose: they are
- * toggles, and three solid pills on black would stop them reading as such. A toggle of your own
- * belongs here too, with `BluColStyle` for its on state.
- *
- * Not enforced. Cloning the children to force a variant would override a caller who deliberately
- * wants a destructive button here, and would fight their `className`.
- */
-export function Actions({ children, className }: ActionsProps) {
-  return <div className={cn("flex shrink-0 items-center gap-2", className)}>{children}</div>;
-}
-
-/**
- * Opens `DataViews.Panel`. It hides itself while the panel is open — the panel has its own close
- * control, so keeping this one visible would be a second way to do the same thing.
- */
-export function PanelToggle({ children, className }: PanelToggleProps) {
-  const { open, setOpen } = useDataViewsPanel();
-
-  if (open) return null;
-
-  return (
-    <Button
-      variant="BluContStyle"
-      size="M"
-      onClick={() => setOpen(true)}
-      aria-expanded={open}
-      className={cn("gap-[6px] rounded-[6px] px-[14px] text-[16px] font-[510]", className)}
-    >
-      <Settings className="h-[18px] w-[18px]" />
-      {children ?? "Filter & Config."}
-    </Button>
-  );
-}

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

@@ -1,5 +0,0 @@
-// DataViews' own hooks. The drag hook is not here: `TreeFolder` needs it too, and a shared
-// component cannot import from inside DataViews without inverting the dependency — it lives in
-// `lib/hooks/useDragDrop.tsx`.
-export { useActiveRow } from "./useActiveRow";
-export { useControllable } from "./useControllable";