@spree/dashboard-ui 1.0.0-beta.2 → 1.0.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -66,7 +66,7 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "flag-icons": "^7.5.0",
-    "lucide-react": "^1.14.0",
+    "lucide-react": "^1.47.0",
     "react-colorful": "^5.7.0",
     "react-day-picker": "^9.14.0",
     "recharts": "^3.8.1",

package/src/hooks/use-copy-to-clipboard.ts

@@ -7,8 +7,9 @@ interface UseCopyToClipboardOptions {
 
 /**
  * Wraps `navigator.clipboard.writeText` with a `copied` flag that flashes true
- * for `resetMs` after a successful copy. Failure (insecure context, denied
- * permissions) is swallowed; the flag stays false.
+ * for `resetMs` after a successful copy. `copy` resolves to whether it worked:
+ * it fails in insecure contexts or when permission is denied, and the flag
+ * then stays false.
  *
  * The reset timer is cleared on unmount so the component doesn't try to
  * `setState` after it's gone.
@@ -24,7 +25,7 @@ export function useCopyToClipboard({ resetMs = 1200 }: UseCopyToClipboardOptions
   }, [])
 
   const copy = useCallback(
-    async (value: string) => {
+    async (value: string): Promise<boolean> => {
       try {
         await navigator.clipboard.writeText(value)
         setCopied(true)
@@ -33,8 +34,9 @@ export function useCopyToClipboard({ resetMs = 1200 }: UseCopyToClipboardOptions
           setCopied(false)
           timerRef.current = null
         }, resetMs)
+        return true
       } catch {
-        // Clipboard API can fail in insecure contexts; ignore silently.
+        return false
       }
     },
     [resetMs],

package/src/spree/bulk-price-table.tsx

@@ -92,6 +92,10 @@ export interface BulkPriceTableProps {
   onTierAdd?: (rowId: string) => void
   /** Removes a tier row. */
   onTierRemove?: (rowId: string) => void
+  /** Why the last save was refused. Rendered above the grid rather than
+   *  toasted: this table lives in a dialog, and the toast viewport sits
+   *  below the overlay layer so nothing raised from in here is visible. */
+  error?: string | null
 
   // Optional state for the toolbar + pagination footer. Omitting all of these
   // hides the toolbar/pagination entirely (use for in-memory single-page lists).
@@ -125,6 +129,7 @@ export function BulkPriceTable({
   totalPages,
   onPageChange,
   isLoading,
+  error,
 }: BulkPriceTableProps) {
   const columns = useMemo<ColumnDef<BulkPriceRow>[]>(
     () => [
@@ -306,6 +311,14 @@ export function BulkPriceTable({
     // grid between them should run to the container's edges, the way a
     // table in a card does.
     <div className="flex h-full flex-col gap-3">
+      {error && (
+        <div
+          role="alert"
+          className="mx-3 shrink-0 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-destructive text-sm"
+        >
+          {error}
+        </div>
+      )}
       {showToolbar && (
         // Always-mounted toolbar. Conditionally rendering the search input
         // would unmount it whenever a deferred query refetches into the

package/src/spree/data-grid/cells.tsx

@@ -144,30 +144,26 @@ interface MoneyCellProps extends BaseCellProps {
   /** Canonical decimal string (`12.50`) coming back from the API, or
    *  `null`/blank for unset. */
   value: string | null
-  /** Receives the user's raw input — locale-formatted strings like
-   *  `"12,50"` are fine, the backend's `Spree::LocalizedNumber` does the
-   *  parsing. `null` only when the user explicitly blanks the field. */
+  /** Receives the user's raw, locale-formatted input (`"12,50"`). The caller
+   *  normalizes it to canonical and passes that back as `value`, so the cell
+   *  always shows what will be saved. `null` only when the user explicitly
+   *  blanks the field. */
   onChange: (next: string | null) => void
   /** Currency symbol rendered as a non-editable prefix (`$`, `€`, `kr`, …).
    *  Omit for a plain decimal cell with no prefix. */
   symbol?: string
   /**
    * Locale decimal separator used only for display (canonical `.` →
-   * locale char). Whatever the user types is shipped as-is; the
-   * backend handles thousands separators, grouped digits, and so on.
-   * Default `.`.
+   * locale char). Default `.`.
    */
   decimal?: string
 }
 
 /**
  * Editable money cell. Like `NumberCell` but keeps decimals (no truncation)
- * and renders a currency-symbol prefix. Mirrors the rails admin's
- * `edit_prices` bulk editor: format the API's canonical value with the
- * locale's decimal mark for display, but ship the user's raw input
- * untouched on save. `Spree::LocalizedNumber.parse` on the backend handles
- * locale-aware parsing (thousands separators, decimal comma, etc.) so the
- * SPA doesn't have to reimplement it.
+ * and renders a currency-symbol prefix. Formats the canonical value with the
+ * locale's decimal mark for display and hands the user's raw input to
+ * `onChange` for the caller to normalize.
  */
 export function MoneyCell({
   coords,
@@ -219,9 +215,7 @@ export function MoneyCell({
   })
 
   function commit() {
-    // Ship the user's raw input; the backend's `Spree::LocalizedNumber`
-    // handles locale-aware parsing. Empty string is the only "clear"
-    // signal we generate frontend-side.
+    // Empty string is the only "clear" signal we generate frontend-side.
     onChange(draft.trim() ? draft : null)
   }
 

package/src/spree/data-grid/data-grid.tsx

@@ -241,7 +241,11 @@ function DataGridShell<T>({
             className,
           )}
           aria-label={ariaLabel}
-          onBlurCapture={(e) => {
+          // Bubble phase, never capture: React dispatches the two phases from
+          // separate native listeners and renders queued updates between
+          // them, so clearing `editing` here first would re-render the cell
+          // out of edit mode before its own blur commits the typed value.
+          onBlur={(e) => {
             // A cell unmounting mid-commit is not the merchant leaving the
             // grid: `relatedTarget` is null there, and the dialog's focus
             // trap then claims the focus a frame later. Take it back on the
@@ -293,7 +297,7 @@ function DataGridShell<T>({
                     // The table-level classes zero this cell's own top and
                     // bottom borders: a border sits outside the padding box and
                     // the shadow inside, so leaving both draws two rules at rest.
-                    className="h-8 bg-muted px-3 text-left font-medium shadow-[inset_0_-1px_0_0_var(--border)]"
+                    className="h-8 bg-muted px-3 text-left font-medium text-nowrap shadow-[inset_0_-1px_0_0_var(--border)]"
                   >
                     {header.isPlaceholder
                       ? null

package/src/spree/fulfillment-item-list.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Thumbnail } from '../ui/thumbnail'
 import { PackageIcon } from './icons'
 
@@ -5,6 +6,9 @@ import { PackageIcon } from './icons'
  * One row of a fulfillment's item list, already joined to its line item by
  * the caller. The image and the price are optional: a surface that does not
  * expose them renders the name and the count alone.
+ *
+ * `priceSource` is a node because saying where a price came from means
+ * linking to it, and routing belongs to the app.
  */
 export type FulfillmentItemRowData = {
   key: string
@@ -12,6 +16,7 @@ export type FulfillmentItemRowData = {
   optionsText?: string | null
   thumbnailUrl?: string | null
   displayPrice?: string | null
+  priceSource?: ReactNode
   quantity: number
 }
 
@@ -35,14 +40,15 @@ function ItemRow({ row }: { row: FulfillmentItemRowData }) {
         )}
       </div>
 
-      <div className="shrink-0 whitespace-nowrap text-right text-muted-foreground text-sm">
+      <div className="min-w-0 shrink text-right text-muted-foreground text-sm">
         {row.displayPrice ? (
-          <span>
+          <span className="whitespace-nowrap">
             {row.displayPrice} × {row.quantity}
           </span>
         ) : (
-          <span>× {row.quantity}</span>
+          <span className="whitespace-nowrap">× {row.quantity}</span>
         )}
+        {row.priceSource && <div className="truncate text-xs">{row.priceSource}</div>}
       </div>
     </div>
   )

package/src/spree/icons.ts

@@ -53,6 +53,7 @@ export {
   FileArchiveIcon,
   FileAudioIcon,
   FileCodeIcon,
+  FileDownIcon,
   FileIcon,
   FileImageIcon,
   FileSpreadsheetIcon,
@@ -135,10 +136,12 @@ export {
   SlidersHorizontalIcon,
   SparklesIcon,
   SplitIcon,
+  SquareTextIcon,
   StarIcon,
   StoreIcon,
   StrikethroughIcon,
   SunIcon,
+  SwatchBookIcon,
   TableIcon,
   TagIcon,
   TagsIcon,

package/src/spree/metadata/metadata-card.tsx

@@ -22,7 +22,10 @@ export function MetadataCard({ metadata, title, emptyTitle, emptyDescription }:
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{title}</CardTitle>
+        <CardTitle>
+          <BracesIcon className="size-4" />
+          {title}
+        </CardTitle>
       </CardHeader>
       <CardContent>
         {entries.length === 0 ? (

package/src/spree/products/status-card.tsx

@@ -19,6 +19,7 @@ export function StatusCard<TFieldValues extends FieldValues>({
   control,
   name,
   title,
+  icon,
   label,
   options,
   disabled,
@@ -28,6 +29,7 @@ export function StatusCard<TFieldValues extends FieldValues>({
   control: Control<TFieldValues>
   name: Path<TFieldValues>
   title: string
+  icon?: React.ReactNode
   label: string
   options: StatusOption[]
   disabled?: boolean
@@ -42,7 +44,10 @@ export function StatusCard<TFieldValues extends FieldValues>({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{title}</CardTitle>
+        <CardTitle>
+          {icon}
+          {title}
+        </CardTitle>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
         <Field>

package/src/styles.css

@@ -153,7 +153,7 @@
      sheet rather than a surface floating above it, so its edge only has to
      suggest where the region ends. Used by `CardContent`'s frame; a dialog or
      the sheet itself must keep --border, or the shell loses its outline. */
-  --border-card: color-mix(in srgb, var(--border-base) 50%, transparent);
+  --border-card: color-mix(in srgb, var(--border-base) 60%, transparent);
   /* Dividers *inside* a container — card header/footer splits, dialog and
      sheet separators, table row rules.
 
@@ -171,9 +171,9 @@
      3.11:1 on the page ground, the lightest step that clears the minimum on
      both.
 
-     No form control uses this. Fields, selects, comboboxes, checkboxes and
-     radios all take `--border` with `--shadow-xs`, the same pair the outline
-     button wears, so every bordered control on a card reads as one family.
+     No form control uses this. Fields, selects and comboboxes take `--border`
+     with `--shadow-control`; checkboxes and radios, too small to carry that
+     lift, keep `--shadow-xs` like the outline button.
 
      A tinted fill on fields was tried and reverted. Disabled fields are
      `--muted`, so any resting tint either collides with that meaning or (as
@@ -430,10 +430,12 @@
      a card. Measured off a reference: the ground under a field's bottom edge
      recovers over about 2px and nothing spreads above it or to the sides, so
      this is purely directional, with no ambient layer. */
-  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  /* The same lift, under its Tailwind-conventional name. Points at the token
-     above rather than repeating the value, so the two cannot drift. */
-  --shadow-sm: var(--shadow-xs);
+  --shadow-xs: 0 0px 1px 0 rgb(0 0 0 / 0.05);
+  /* A form field's resting lift. Heavier than --shadow-xs and weighted to the
+     bottom edge only, so the field reads as a slightly raised well without a
+     tinted fill — the fill stays on the card colour (see --border-control). */
+  --shadow-control: 0 0.5px 1px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-nav: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
 
   /* Floating surfaces — menus, popovers, dialogs, sheets. Wide and faint
@@ -576,6 +578,36 @@
   }
 }
 
+@utility link {
+  /* The one treatment for an inline textual link — a link in prose, in help
+     text, inside an alert or an empty state. Colour rather than a permanent
+     underline, because the dashboard puts links inside dense body copy where
+     a rule under every one reads as noise; the underline arrives on hover so
+     the affordance is still there when the pointer looks for it.
+
+     NOT for links that are really something else: a table row, a breadcrumb,
+     a nav item, a card wrapped in an anchor, a button rendered as `<a>`.
+     Those carry their own treatment and `.link` would fight it.
+
+     `focus-visible` draws a ring rather than borrowing `focus-ring`'s border
+     +shadow: a text link has no border to recolour, so it needs an outline
+     that follows the text box instead. */
+  color: var(--link);
+  text-decoration-line: none;
+  text-underline-offset: 3px;
+  border-radius: var(--radius-sm);
+
+  &:hover {
+    color: var(--link-hover);
+    text-decoration-line: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+}
+
 @utility themed-scrollbar {
   /* Theme-aware thin scrollbar utility. Track is transparent, thumb uses
      CSS vars defined in :root and .dark, so it adapts to the active theme.

package/src/ui/checkbox.tsx

@@ -25,7 +25,7 @@ function Checkbox({
       disabled={disabled}
       name={name}
       className={cn(
-        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-[4px] border border-border bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
+        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-[4px] border border-border shadow-xs bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
         // The 16px box is the right *visual* size in a dense table, but on its
         // own it is a 16px target — under the 24px WCAG 2.2 asks for, on the
         // control every bulk action starts from. A pseudo-element extends the

package/src/ui/combobox.tsx

@@ -57,7 +57,7 @@ function ComboboxButtonTrigger({
       data-slot="combobox-button-trigger"
       data-size={size}
       className={cn(
-        "group/combobox-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[size=sm]:shadow-xs data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/combobox-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border shadow-control bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[size=sm]:shadow-control data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -295,7 +295,7 @@ function ComboboxChips({
         // resize lets the positioner follow the anchor smoothly; making it
         // instant jumps the open popup out from under the pointer, so the next
         // option click lands on nothing.
-        'flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-card text-foreground px-2.5 py-1.5 text-base transition-all duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:p-1.5',
+        'flex flex-wrap items-center gap-1.5 rounded-md border border-border shadow-control bg-card text-foreground px-2.5 py-1.5 text-base transition-all duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:p-1.5',
         className,
       )}
       {...props}

package/src/ui/input-group.tsx

@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group relative flex w-full min-w-0 items-center rounded-md border border-border bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:cursor-not-allowed has-disabled:text-muted-foreground has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        'group/input-group relative flex w-full min-w-0 items-center rounded-md border border-border shadow-control bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:cursor-not-allowed has-disabled:text-muted-foreground has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className,
       )}
       {...props}

package/src/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'block w-full min-w-0 min-h-8 rounded-md border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        'block w-full min-w-0 min-h-8 rounded-md border border-border shadow-control bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
         className,
       )}
       {...props}

package/src/ui/rich-text-editor.tsx

@@ -191,7 +191,7 @@ export function RichTextEditor({
         // in a form beside them without reading as a different kind of control.
         // `focus-within` rather than `focus`: the element that takes the caret
         // is Tiptap's inner contenteditable, not this wrapper.
-        'rounded-md border border-border bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'rounded-md border border-border shadow-control bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
         disabled && 'pointer-events-none bg-muted text-muted-foreground shadow-none',
         className,
       )}
@@ -252,7 +252,7 @@ function EditorToolbar({
   return (
     <div
       data-slot="rich-text-editor-toolbar"
-      className="flex items-center gap-0.5 border-b border-border px-2 py-1.5"
+      className="flex items-center gap-0.5 border-b border-border-subtle px-2 py-1.5"
     >
       <ToolbarButton
         active={toolbar.isBold}

package/src/ui/select.tsx

@@ -66,7 +66,7 @@ function SelectTrigger({
         // A row mixing a select with a popover trigger (the dashboard's channel
         // picker beside its date range) then reads as one set of controls
         // rather than two. The default size is a form field and stays flat.
-        "group/select-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=sm]:shadow-xs data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/select-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border shadow-control bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=sm]:shadow-control data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/ui/sidebar.tsx

@@ -421,13 +421,67 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
   )
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+/**
+ * Width of `element`'s vertical scrollbar in pixels — 0 while it does not
+ * overflow, and 0 wherever the platform overlays its scrollbars. A scrollbar
+ * appearing shrinks the content box, so observing the size catches it.
+ */
+function useScrollbarWidth(element: HTMLElement | null) {
+  const [width, setWidth] = React.useState(0)
+
+  React.useLayoutEffect(() => {
+    if (!element) return
+    const measure = () => setWidth(element.offsetWidth - element.clientWidth)
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    measure()
+    return () => observer.disconnect()
+  }, [element])
+
+  return width
+}
+
+function SidebarContent({ className, style, ref, ...props }: React.ComponentProps<'div'>) {
+  const [element, setElement] = React.useState<HTMLDivElement | null>(null)
+  const scrollbarWidth = useScrollbarWidth(element)
+
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setElement(node)
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref],
+  )
+
   return (
     <div
+      ref={setRefs}
       data-slot="sidebar-content"
       data-sidebar="content"
+      style={
+        { '--sidebar-scrollbar-width': `${scrollbarWidth}px`, ...style } as React.CSSProperties
+      }
       className={cn(
-        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 pt-3 overflow-auto group-data-[collapsible=icon]:overflow-visible',
+        // `scroll-fade` dissolves the rows into the header above and the pinned
+        // entries below as they scroll past. Its defaults suit a long page, not
+        // a rail: at most 40px of fade, easing out across the last 96px of
+        // scroll, which left a row sliced flat against Settings whenever the
+        // list was nearly at its end. A row-deep fade that holds until the
+        // final 1rem reads as a fade at every position; `pb-3` lets the last
+        // row come clear of it at the end.
+        //
+        // The icon rail scrolls too, with no scrollbar: a rail too narrow for
+        // one would otherwise let its icons run over the pinned entries and the
+        // account row. Its tooltips and hover menus are portalled, so nothing
+        // needs to escape the box.
+        'quiet-scrollbar scroll-fade [--scroll-fade-size:3rem] [--scroll-fade-reveal:1rem] flex min-h-0 flex-1 flex-col gap-0 pt-3 pb-3 overflow-auto group-data-[collapsible=icon]:no-scrollbar',
+        // A scrollbar would otherwise take its width out of the rows, leaving
+        // them short of the header and the pinned entries. It moves into the
+        // sidebar's own padding instead (up to 0.5rem), and anything wider
+        // comes out of the groups' end padding — so rows end in the same place
+        // whether the list scrolls or not.
+        '-me-[min(var(--sidebar-scrollbar-width),0.5rem)] **:data-[slot=sidebar-group]:pe-[calc(0.5rem_-_max(0px,var(--sidebar-scrollbar-width)_-_0.5rem))] group-data-[collapsible=icon]:**:data-[slot=sidebar-group]:pe-0',
         className,
       )}
       {...props}
@@ -654,7 +708,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>)
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'pointer-events-none flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md border border-sidebar-border px-1.5 text-[11px] font-medium text-sidebar-foreground/70 tabular-nums select-none',
+        'pointer-events-none flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md border border-sidebar-border bg-sidebar px-1.5 text-[11px] font-medium text-sidebar-foreground/70 tabular-nums select-none',
         'transition-colors duration-100 ease-out group-data-[collapsible=icon]:hidden',
         // Follows its own row: brighter under the pointer, full strength when
         // the item is the active one.

package/src/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'flex field-sizing-content min-h-16 w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive',
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-border shadow-control bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive',
         className,
       )}
       {...props}