cursedbelt 5.25.0 → 5.26.0

package/src/react/components/DataTable/types.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ReactNode } from 'react';
 import type { FieldOption } from '../FieldInput.js';
 
 // Re-exported so the DataTable subtree (cells, card view) is self-contained — a column's
@@ -58,6 +59,70 @@ export interface ColDef<TRow = Record<string, unknown>> {
   /** Display-only formatter for table/card cells — may differ from the edit input.
    *  The base `text` renderer uses it; custom renderers may read it too. */
   displayValue?: (value: unknown, row: TRow) => string;
+  /**
+   * Draw this column's cell yourself — `(row) => <StarRating … />`. Wins over `type` in every
+   * view the table has (grid, tablet list, phone card, card view), because it is read in the one
+   * seam they all pass through (`CellRenderer`).
+   *
+   * 🔴 Why (forge task 2302): the only other route to app JSX in a cell was
+   * `registerCellRenderer(type, …)`, a GLOBAL registry keyed by a string — one entry per
+   * column per app, a name to collide on, and a renderer that cannot close over the component
+   * state it needs (apps/music's star rating writes back through the list's `onRate`). A
+   * render function is the shape of that need. `type` still decides the edit field and, unless
+   * `align` or `meta.numeric` says otherwise, the alignment.
+   */
+  render?: (row: TRow) => ReactNode;
+  /**
+   * Hide this column when the TABLE (its container, not the viewport) is narrower than:
+   * `'sm'` 42rem · `'md'` 56rem · `'lg'` 72rem. The header cell and the body cells go
+   * together, so a label never sits over another column's values. The column collapses to zero
+   * width rather than leaving the table, so rows that span it stay true (see `HIDE_BELOW_CLASS`).
+   *
+   * 🔴 Why (forge task 2302): the table's own narrow answer is `mobileCards`, which re-renders
+   * every loaded row as a card or a compact list — right for a record table, wrong for a
+   * five-thousand-row track list whose narrow form is the SAME rows with fewer columns. With
+   * `mobileCards={false}` this is how the grid sheds its least important columns instead.
+   * Container-sized, like the tiers, so a table in a narrow pane on a wide screen sheds them too.
+   * Applies to the grid; the card tiers already choose their own fields.
+   */
+  hideBelow?: 'sm' | 'md' | 'lg';
+  /**
+   * A header click on this column starts DESCENDING — for columns where "most" is the
+   * interesting end (plays, rating, date added, length). Sorting a play count ascending first
+   * is right for nobody.
+   */
+  sortDescFirst?: boolean;
+  /**
+   * Draw this column BEFORE the row-selection checkbox — a drag handle, which leads the row in
+   * every product that has both (Notion's ⋮⋮, Linear's grip). Leading columns keep their order
+   * among themselves, and are never the frozen column under `stickyFirstColumn`. Grid only.
+   *
+   * 🔴 Why (forge task 2302): apps/music's grab handle is the row's first cell by the owner's
+   * own draft (2026-09-18) — the thing that says "pick this up" sits at the edge the hand comes
+   * from, with the checkbox beside it. The selection column was always first, so a list that had
+   * both could not keep that order.
+   */
+  leading?: boolean;
+}
+
+/**
+ * Attributes and handlers for ONE body row — `DataTable`'s `getRowProps`. `data-*` included,
+ * which is what a browser test addresses a windowed row by.
+ */
+export type DataTableRowProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'dangerouslySetInnerHTML'> & {
+  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+};
+
+/**
+ * `DataTable`'s `selectAll` — the header box, owned by the caller. See the prop doc.
+ */
+export interface DataTableSelectAll {
+  checked: boolean | 'indeterminate';
+  /** The box's accessible name AND its tooltip — say what a press will do. */
+  label: string;
+  /** `true` from an unchecked or indeterminate box, `false` from a checked one. */
+  onChange: (next: boolean) => void;
+  disabled?: boolean;
 }
 
 /** The view modes a page can switch a dataset between (table rows vs. card grid). */
@@ -96,3 +161,48 @@ export function resolveColumnAlign<TRow>(col: ColDef<TRow>): 'left' | 'right' {
   if (col.meta?.numeric === true) return 'right';
   return NUMERIC_CELL_TYPES.has(col.type) ? 'right' : 'left';
 }
+
+/**
+ * `DataTable`'s `serverWindow` — the loaded rows are `[start, start + data.length)` of a
+ * result set of `total` rows the server holds. See the prop's doc for why each part is there.
+ */
+export interface DataTableServerWindow {
+  /** The row number of `data[0]` within the whole result set. */
+  start: number;
+  /** How many rows the query matches — what the spacer and the scrollbar describe. */
+  total: number;
+  /** The viewport is within `reachRows` of the END of the loaded window, and there is more. */
+  onReachEnd?: () => void;
+  /** The viewport is within `reachRowsUp` of the START of a window that does not begin at 0. */
+  onReachStart?: () => void;
+  /** The viewport came to REST wholly outside the window; the argument is its first row. */
+  onNeedWindow?: (firstVisibleRow: number) => void;
+  /** Default 20 — generous, because the page has to arrive before the reader does. */
+  reachRows?: number;
+  /** Default 8 — tighter, so a reveal landing near a window's top does not cascade upward. */
+  reachRowsUp?: number;
+  /** How long the scroll must be still before `onNeedWindow` fires. Default 120 ms. */
+  settleMs?: number;
+  /**
+   * Every row's height in px — FIXED, never measured (see the prop doc for why). Defaults to
+   * `virtualize.estimateRowHeight`, else the density's row (44, or 36 compact). Cells must fit
+   * it: truncate, do not wrap.
+   */
+  rowHeight?: number;
+}
+
+/** `DataTable`'s imperative handle (`handleRef`). */
+export interface DataTableHandle {
+  /** The box that scrolls — `null` until mounted, or when the table has no rows to show. */
+  readonly scrollElement: HTMLDivElement | null;
+  /**
+   * Scroll a row number over the WHOLE result set (a `serverWindow` row, loaded or not) into view.
+   * `align` defaults to `center`, `behavior` to `auto`. Returns the `scrollTop` it asked
+   * for — what a caller telling its own scrolls from the reader's compares against — or
+   * `null` when the table is not virtualized or not mounted.
+   */
+  scrollToIndex(
+    index: number,
+    options?: { align?: 'start' | 'center' | 'end' | 'auto'; behavior?: 'auto' | 'smooth' },
+  ): number | null;
+}

package/src/react/components/DataTable/virtualize.spec.tsx

@@ -10,11 +10,15 @@
  * spacer rows that keep a `<table>`'s column grid intact, the absolute zebra index, the
  * measurement hooks, and that leaving the prop off changes nothing at all.
  */
-import { afterEach, describe, expect, test } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
 import { cleanup, render, screen } from '@testing-library/react';
-import { DataTable } from './DataTable.js';
+import { DataTable, preloadDataTableParts } from './DataTable.js';
 import type { ColDef } from './types.js';
 
+// The toolbar, pager and row menu are lazy (forge task 2309); loaded here, they draw on the
+// first render, as these specs query them. `lazyPart.spec.tsx` covers the lazy path itself.
+beforeAll(preloadDataTableParts);
+
 afterEach(cleanup);
 
 interface Row extends Record<string, unknown> {
@@ -108,3 +112,35 @@ describe('virtualize', () => {
     expect(screen.getByText(/no results/i)).toBeTruthy();
   });
 });
+
+describe('serverWindow (forge task 2300)', () => {
+  // The window arithmetic itself is `e2e/table-window.spec.ts`'s — happy-dom lays nothing out.
+  const windowed = (start: number, loaded: number, total: number) =>
+    render(
+      <DataTable<Row>
+        columns={COLUMNS}
+        data={Array.from({ length: loaded }, (_, i) => ({ id: `r${start + i}`, name: `Row ${start + i}` }))}
+        getRowId={(r) => r.id}
+        serverWindow={{ start, total, rowHeight: 50 }}
+      />,
+    );
+
+  test('🔴 the spacer is sized from the SERVER total, not from the hundred rows loaded', () => {
+    windowed(0, 100, 5000);
+    const spacer = bodyRows().find((tr) => tr.getAttribute('aria-hidden') === 'true');
+    // 5,000 rows at 50px each = 250,000px; the loaded 100 would be 5,000.
+    expect(Number.parseFloat((spacer as HTMLElement).style.height)).toBeGreaterThan(240_000);
+  });
+
+  test('🔴 an empty window over a non-empty result set is NOT the empty state', () => {
+    // A scrollbar dragged past the loaded rows can briefly hold none of them; "No results"
+    // there would be a lie about a 5,000-row list.
+    windowed(4000, 0, 5000);
+    expect(screen.queryByText(/no results/i)).toBeNull();
+  });
+
+  test('it turns pagination off, like virtualize', () => {
+    windowed(0, 100, 5000);
+    expect(screen.queryByRole('button', { name: /next page|previous page/i })).toBeNull();
+  });
+});

package/src/react/components/auth/SignInCard.spec.tsx

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, mock, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { SignInCard } from './SignInCard.js';
+
+afterEach(cleanup);
+
+describe('SignInCard', () => {
+  test('names the app, says what it is, and the button signs in', () => {
+    const onSignIn = mock(() => {});
+    const { getByRole, getByText, queryByRole } = render(
+      <SignInCard title='Music' subtitle='Your library, wherever you are.' onSignIn={onSignIn} />,
+    );
+    expect(getByRole('heading', { name: 'Music' })).not.toBeNull();
+    expect(getByText('Your library, wherever you are.')).not.toBeNull();
+    // No refusal, no warning — the card is quiet until there is something to say.
+    expect(queryByRole('status')).toBeNull();
+    fireEvent.click(getByRole('button', { name: 'Sign in' }));
+    expect(onSignIn).toHaveBeenCalledTimes(1);
+  });
+
+  test('a refusal is a warning above the button, headed by default', () => {
+    const { getByRole, getByText } = render(
+      <SignInCard title='Family' onSignIn={() => {}} refusal='This account has no access here.' />,
+    );
+    const warning = getByRole('status');
+    expect(warning.textContent).toContain('That sign-in did not go through');
+    expect(getByText('This account has no access here.')).not.toBeNull();
+    // The warning comes BEFORE the button in reading order.
+    const button = getByRole('button', { name: 'Sign in' });
+    expect(warning.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  test('a disabled reason disables the button instead of hiding it', () => {
+    const onSignIn = mock(() => {});
+    const { getByRole } = render(
+      <SignInCard title='Music' onSignIn={onSignIn} disabledReason='Signing in needs a connection' />,
+    );
+    const button = getByRole('button', { name: 'Sign in' }) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+    fireEvent.click(button);
+    expect(onSignIn).not.toHaveBeenCalled();
+  });
+
+  test('renders on the aurora front door', () => {
+    const { container } = render(<SignInCard title='Vault' onSignIn={() => {}} />);
+    expect(container.querySelector('.cb-aurora')).not.toBeNull();
+  });
+});

package/src/react/components/auth/SignInCard.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+import { Alert } from '../Alert.js';
+import { Button } from '../Button.js';
+import { AuthCard } from './AuthCard.js';
+
+export interface SignInCardProps {
+  /** The app's name — the card's heading. */
+  title: ReactNode;
+  /** One line on what the app is, under the heading. */
+  subtitle?: ReactNode;
+  /** Brand mark above the heading. */
+  logo?: ReactNode;
+  /** What the button does — a single-sign-on app passes `() => startSsoSignIn()`. */
+  onSignIn: () => void;
+  /**
+   * Why the last attempt came back here (a refused grant, an app the account has no
+   * access to). Rendered as a warning above the button; nothing when absent. A
+   * cursedauth app passes `takeSsoError()` read once at mount.
+   */
+  refusal?: ReactNode;
+  /** The warning's heading. Default "That sign-in did not go through". */
+  refusalTitle?: ReactNode;
+  /** The navigation has started — the button spins and cannot be pressed twice. */
+  busy?: boolean;
+  /**
+   * Signing in cannot work right now — the button is disabled and this is its
+   * tooltip (a control that cannot work is visible with the reason, never hidden).
+   */
+  disabledReason?: string;
+  /** Button label. Default "Sign in". */
+  label?: ReactNode;
+  /** Button tooltip. Default "Sign in with your account". */
+  tooltip?: string;
+  /** Anything the app must say between the warning and the button. */
+  children?: ReactNode;
+  /** A line under the card, outside it. */
+  footer?: ReactNode;
+}
+
+/**
+ * The fleet's signed-out front door: {@link AuthCard}'s aurora page chrome, an
+ * optional refusal {@link Alert}, and one full-width primary button.
+ *
+ * Seven apps drew this card by hand — the same aurora, the same glass box, the same
+ * button — each with its own radius, padding, blur and its own idea of how a refused
+ * sign-in looks (a bare red line in two, a warning box in one, nothing in the rest).
+ * The owner, 2026-09-28: *"General components like containers and cards should not
+ * be hand made and should all be using standardized versions in cb."*
+ *
+ * It knows nothing about HOW signing in works — `onSignIn` and `refusal` are the
+ * app's — so it has no dependency on cursedauth and a password app can use it too.
+ */
+export function SignInCard({
+  title,
+  subtitle,
+  logo,
+  onSignIn,
+  refusal,
+  refusalTitle = 'That sign-in did not go through',
+  busy = false,
+  disabledReason,
+  label = 'Sign in',
+  tooltip = 'Sign in with your account',
+  children,
+  footer,
+}: SignInCardProps) {
+  return (
+    <AuthCard aurora title={title} subtitle={subtitle} logo={logo} footer={footer}>
+      <div className='flex flex-col gap-4'>
+        {refusal ? (
+          <Alert tone='warning' title={refusalTitle}>
+            {refusal}
+          </Alert>
+        ) : null}
+        {children}
+        <Button
+          className='w-full'
+          variant='primary'
+          loading={busy}
+          disabled={disabledReason !== undefined}
+          tooltip={disabledReason ?? tooltip}
+          tooltipMobile={disabledReason ? 'icon' : 'off'}
+          onClick={onSignIn}
+        >
+          {label}
+        </Button>
+      </div>
+    </AuthCard>
+  );
+}

package/src/react/components/auth/index.ts

@@ -31,6 +31,7 @@ export {
   type SetInitialPasswordProps,
   type SetInitialPasswordValues,
 } from './SetInitialPassword.js';
+export { SignInCard, type SignInCardProps } from './SignInCard.js';
 export { SignupForm, type SignupFormProps, type SignupValues } from './SignupForm.js';
 export { TotpEntry, type TotpEntryProps, type TotpValues } from './TotpEntry.js';
 export type { AuthError, AuthErrorMapper, AuthNavProps, AuthSubmitHandler } from './types.js';

package/src/react/index.ts

@@ -254,6 +254,7 @@ export {
   isEmptyFilterQuery,
   isRowDrag,
   nextSortStack,
+  preloadDataTableParts,
   readRowDrag,
   type RowDragPayload,
   rowDragTypes,
@@ -287,6 +288,10 @@ export {
   type TableToolbarProps,
   type TableViewMode,
   TableViewToggle,
+  type DataTableHandle,
+  type DataTableRowProps,
+  type DataTableSelectAll,
+  type DataTableServerWindow,
   type TableViewToggleProps,
   ViewOptionsMenu,
   type ViewOptionsMenuProps,

package/src/styles-areas/analytics.css

@@ -18,17 +18,20 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 132 candidate(s).
+ * 148 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @xl:block @xl:hidden [&_svg]:size-3");
-@source inline("[overflow-wrap:anywhere] active:cursor-grabbing appearance appearance-none");
-@source inline("bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/40 bg-muted/50");
-@source inline("border-0 border-accent-solid border-accent/60 border-field-error border-l border-r cursor-grab");
-@source inline("cursor-not-allowed data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
+@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl:[&>*]:hidden");
+@source inline("@max-2xl:border-0 @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:w-0! @max-4xl:[&>*]:hidden");
+@source inline("@max-4xl:border-0 @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:w-0! @max-6xl:[&>*]:hidden");
+@source inline("@max-6xl:border-0 @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:w-0! @xl:block @xl:hidden");
+@source inline("[&>*]:hidden [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing appearance");
+@source inline("appearance-none bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/40");
+@source inline("bg-muted/50 border-0 border-accent-solid border-accent/60 border-field-error border-l border-r");
+@source inline("cursor-grab cursor-not-allowed data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
 @source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
 @source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
 @source inline("data-[state=closed]:slide-out-to-bottom data-[state=closed]:slide-out-to-left");

package/src/styles-areas/core.css

@@ -15,7 +15,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 713 candidate(s).
+ * 715 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -51,12 +51,13 @@
 @source inline("border-b-2 border-b-[7px] border-b-current border-border border-border-strong border-border/60");
 @source inline("border-collapse border-current border-destructive/30 border-destructive/40 border-destructive/50");
 @source inline("border-field-border border-success/30 border-success/40 border-success/50 border-t");
-@source inline("border-transparent border-warning/30 border-warning/40 border-warning/50 border-x-4");
-@source inline("border-x-transparent bot bottom bottom-0 break break-all break-words c ca cap capitalize co com");
-@source inline("contain container content contents cursor cursor-col-resize cursor-default cursor-ew-resize");
-@source inline("cursor-pointer cursor-row-resize d dark dark:bg-card-overlay dark:bg-card-raised");
-@source inline("dark:bg-gray-800 data data-[disabled]:hover:bg-border data-[disabled]:opacity-50");
-@source inline("data-[disabled]:pointer-events-none data-[interactive=true]:duration-[var(--duration-base)]");
+@source inline("border-tone-sky-fg/30 border-tone-slate-fg/30 border-transparent border-warning/30");
+@source inline("border-warning/40 border-warning/50 border-x-4 border-x-transparent bot bottom bottom-0 break");
+@source inline("break-all break-words c ca cap capitalize co com contain container content contents cursor");
+@source inline("cursor-col-resize cursor-default cursor-ew-resize cursor-pointer cursor-row-resize d dark");
+@source inline("dark:bg-card-overlay dark:bg-card-raised dark:bg-gray-800 data data-[disabled]:hover:bg-border");
+@source inline("data-[disabled]:opacity-50 data-[disabled]:pointer-events-none");
+@source inline("data-[interactive=true]:duration-[var(--duration-base)]");
 @source inline("data-[interactive=true]:ease-[var(--ease-out)] data-[interactive=true]:hover:-translate-y-0.5");
 @source inline("data-[interactive=true]:hover:border-border-strong data-[interactive=true]:hover:shadow-overlay");
 @source inline("data-[interactive=true]:transition-all data-[placeholder]:text-muted-foreground");

package/src/styles-areas/data-table.css

@@ -18,16 +18,19 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 128 candidate(s).
+ * 144 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @xl:block @xl:hidden [&_svg]:size-3");
-@source inline("[overflow-wrap:anywhere] active:cursor-grabbing appearance appearance-none");
-@source inline("bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50 border-0");
-@source inline("border-accent-solid border-accent/60 border-field-error border-l border-r cursor-grab");
+@source inline("-m-1 -mt-2 -mt-6 -mx-1 -my-2.5 -my-3 @3xl:block @3xl:hidden @max-2xl:[&>*]:hidden");
+@source inline("@max-2xl:border-0 @max-2xl:min-w-0! @max-2xl:p-0! @max-2xl:w-0! @max-4xl:[&>*]:hidden");
+@source inline("@max-4xl:border-0 @max-4xl:min-w-0! @max-4xl:p-0! @max-4xl:w-0! @max-6xl:[&>*]:hidden");
+@source inline("@max-6xl:border-0 @max-6xl:min-w-0! @max-6xl:p-0! @max-6xl:w-0! @xl:block @xl:hidden");
+@source inline("[&>*]:hidden [&_svg]:size-3 [overflow-wrap:anywhere] active:cursor-grabbing appearance");
+@source inline("appearance-none bg-[var(--cb-frozen-bg)] bg-card/95 bg-gradient-to-t bg-muted/30 bg-muted/50");
+@source inline("border-0 border-accent-solid border-accent/60 border-field-error border-l border-r cursor-grab");
 @source inline("cursor-not-allowed data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
 @source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
 @source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");

package/src/styles-utilities.css

@@ -1708,6 +1708,18 @@
       border-color: color-mix(in oklab, var(--success) 50%, transparent);
     }
   }
+  .border-tone-sky-fg\/30 {
+    border-color: var(--tone-sky-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--tone-sky-fg) 30%, transparent);
+    }
+  }
+  .border-tone-slate-fg\/30 {
+    border-color: var(--tone-slate-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--tone-slate-fg) 30%, transparent);
+    }
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -4158,6 +4170,51 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+  @container (width < 72rem) {
+    .\@max-6xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-6xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-6xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-6xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
+  @container (width < 56rem) {
+    .\@max-4xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-4xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-4xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-4xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
+  @container (width < 42rem) {
+    .\@max-2xl\:w-0\! {
+      width: 0px !important;
+    }
+    .\@max-2xl\:min-w-0\! {
+      min-width: 0px !important;
+    }
+    .\@max-2xl\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .\@max-2xl\:p-0\! {
+      padding: 0px !important;
+    }
+  }
   @container (width >= 32rem) {
     .\@lg\:col-span-6 {
       grid-column: span 6 / span 6;
@@ -4486,9 +4543,27 @@
   .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
     display: none;
   }
+  .\[\&\>\*\]\:hidden > * {
+    display: none;
+  }
   .\[\&\>\*\]\:min-w-0 > * {
     min-width: 0px;
   }
+  @container (width < 72rem) {
+    .\@max-6xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
+  @container (width < 56rem) {
+    .\@max-4xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
+  @container (width < 42rem) {
+    .\@max-2xl\:\[\&\>\*\]\:hidden > * {
+      display: none;
+    }
+  }
   .\[\&\>\:first-child\]\:w-\[var\(--cb-sidebar-side\)\] > :first-child {
     width: var(--cb-sidebar-side);
   }