@exxatdesignux/ui 0.2.16 → 0.2.18

package/template/components/brand-color-picker.tsx

@@ -0,0 +1,344 @@
+"use client"
+
+/**
+ * BrandColorPicker — single-anchor palette popover.
+ *
+ * Why "one anchor per family" instead of 16 shades:
+ *   The product theme system derives **all** chrome tints (sidebar bg, accent,
+ *   secondary, muted, hover, ring, etc.) from a single `--custom-product-brand-color`
+ *   variable using OKLCH `from var(…)` formulas. Letting users pick a specific
+ *   shade (Pink 500 vs Pink 700) was misleading because the renderer
+ *   re-tints everything anyway. One anchor per family is what actually maps
+ *   to product reality: "this product is the blue one", not "this product is
+ *   Blue 750".
+ *
+ * Layout:
+ *   - Header: preview chip + family label + hex + optional Reset link.
+ *   - Body: 10 anchor tiles (one per palette family), 5 across, 2 rows.
+ *     Each tile carries a small "used by X" pip overlay when another product
+ *     already claims that anchor — see `usedBy`.
+ *   - Footer: always-visible Custom hex / CSS input for off-palette brands.
+ *
+ * `usedBy` is a `{ [anchorHex]: productLabel }` map. Callers compute it from
+ * the active brand registry / overrides so users can see at a glance that
+ * picking Pink would clash with another product. The pip uses the same color
+ * as the anchor on a contrasting background, with a tooltip naming the
+ * product.
+ */
+
+import * as React from "react"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Tip } from "@/components/ui/tip"
+import {
+  EXXAT_PALETTE_BY_FAMILY,
+  type ExxatPaletteFamilyId,
+  type ExxatPaletteSwatch,
+} from "@/lib/exxat-palette"
+import { cn } from "@/lib/utils"
+
+/** Anchor shade — `500` is the canonical "true" tone for each palette family. */
+const ANCHOR_SHADE = "500"
+
+/**
+ * Palette families that are **brand-color candidates** for the picker.
+ *
+ * Excludes `sapphireGrayBlack` and `neutral` because both are gray-scale
+ * families (chroma ≈ 0.005–0.04) intended for UI text / borders, not for
+ * product identity. When the theme chrome formula
+ * (`oklch(from var(--custom-product-brand-color) 0.965 0.018 h)`) is fed a
+ * near-gray colour, the resulting tint is visually indistinguishable from
+ * white — which is what the user was hitting with "Sapphire doesn't apply
+ * like the rest of the colours". The Custom hex input still accepts any CSS
+ * colour, so off-palette greys remain reachable.
+ */
+const BRAND_FAMILY_IDS: ReadonlyArray<ExxatPaletteFamilyId> = [
+  "exxatPink",
+  "exxatBlue",
+  "exxatIndigo",
+  "purple",
+  "teal",
+  "green",
+  "orange",
+  "red",
+]
+
+/**
+ * Resolved anchor list — one swatch per **brand** palette family at
+ * `ANCHOR_SHADE`. Kept as a module constant so multiple picker instances share
+ * the same array identity (cheap referential equality for downstream memo).
+ */
+export const BRAND_PICKER_ANCHORS: ReadonlyArray<ExxatPaletteSwatch> =
+  EXXAT_PALETTE_BY_FAMILY.filter(family => BRAND_FAMILY_IDS.includes(family.id)).flatMap(
+    family => family.swatches.filter(swatch => swatch.shade === ANCHOR_SHADE),
+  )
+
+/** Find the anchor whose stored value matches `value` (hex or OKLCH). */
+function findAnchor(value: string | null | undefined): ExxatPaletteSwatch | undefined {
+  if (!value) return undefined
+  const v = value.trim().toLowerCase()
+  if (!v) return undefined
+  return BRAND_PICKER_ANCHORS.find(
+    s => s.hex.toLowerCase() === v || s.oklch.toLowerCase() === v,
+  )
+}
+
+export interface BrandColorPickerProps {
+  /** Current brand color (any CSS color — palette OKLCH, hex, or free text). */
+  value: string
+  /** Fired when the user selects a palette swatch or commits a custom value. */
+  onChange: (value: string) => void
+  /**
+   * Optional registry / theme default. When provided and different from
+   * `value`, the popover surfaces a "Reset" link in the header that calls
+   * `onChange(defaultValue)`.
+   */
+  defaultValue?: string
+  /**
+   * Anchors already claimed by other products. Key by lower-case hex **or**
+   * lower-case OKLCH string (both forms checked). The matching tile shows a
+   * small pip + tooltip naming the product.
+   */
+  usedBy?: Readonly<Record<string, string>>
+  /** Trigger id — wire to a `<label htmlFor>` so the field stays accessible. */
+  id?: string
+  className?: string
+}
+
+export function BrandColorPicker({
+  value,
+  onChange,
+  defaultValue,
+  usedBy,
+  id,
+  className,
+}: BrandColorPickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const matchedAnchor = React.useMemo(() => findAnchor(value), [value])
+  const [customDraft, setCustomDraft] = React.useState(value)
+
+  React.useEffect(() => {
+    setCustomDraft(value)
+  }, [value])
+
+  const triggerLabel =
+    matchedAnchor?.familyLabel ?? (value?.trim() ? value : "Choose color")
+  const previewColor = value?.trim() || "transparent"
+  const showReset = Boolean(
+    defaultValue && value?.trim() && defaultValue.trim() !== value.trim(),
+  )
+
+  const handleSelectSwatch = (swatch: ExxatPaletteSwatch) => {
+    onChange(swatch.oklch)
+    setOpen(false)
+  }
+
+  const handleApplyCustom = () => {
+    const next = customDraft.trim()
+    if (!next || next === value.trim()) return
+    onChange(next)
+    setOpen(false)
+  }
+
+  /** Match `swatch` against the `usedBy` map (case-insensitive, hex or OKLCH). */
+  const claimedBy = React.useCallback(
+    (swatch: ExxatPaletteSwatch): string | undefined => {
+      if (!usedBy) return undefined
+      const hex = swatch.hex.toLowerCase()
+      const oklch = swatch.oklch.toLowerCase()
+      for (const [key, label] of Object.entries(usedBy)) {
+        const k = key.toLowerCase()
+        if (k === hex || k === oklch) return label
+      }
+      return undefined
+    },
+    [usedBy],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          className={cn("h-9 w-full justify-start gap-2 px-2.5 font-normal", className)}
+        >
+          <span
+            aria-hidden="true"
+            className="inline-flex size-5 shrink-0 rounded-full border border-border"
+            style={{ background: previewColor }}
+          />
+          <span className="min-w-0 flex-1 truncate text-left text-sm">{triggerLabel}</span>
+          <i className="fa-light fa-chevron-down text-xs text-muted-foreground" aria-hidden="true" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={6}
+        // 5 tiles × ~3.25rem + paddings ≈ 18rem. Clamp on tiny viewports.
+        className="w-[min(20rem,calc(100vw-1.5rem))] p-0"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between gap-3 border-b border-border px-3 py-2">
+          <div className="flex min-w-0 items-center gap-2">
+            <span
+              aria-hidden="true"
+              className="inline-flex size-5 shrink-0 rounded-full border border-border"
+              style={{ background: previewColor }}
+            />
+            <div className="min-w-0">
+              <p className="truncate text-xs font-medium text-foreground">
+                {matchedAnchor?.familyLabel ?? "Custom color"}
+              </p>
+              <p className="truncate font-mono text-[10px] uppercase text-muted-foreground">
+                {matchedAnchor?.hex ?? value?.trim() ?? "—"}
+              </p>
+            </div>
+          </div>
+          {showReset ? (
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              className="h-7 px-2 text-xs"
+              onClick={() => {
+                if (defaultValue) onChange(defaultValue)
+              }}
+            >
+              Reset
+            </Button>
+          ) : null}
+        </div>
+
+        {/* Body — one anchor per brand family, 4 across (8 → symmetric 4×2). */}
+        <div
+          className="grid grid-cols-4 gap-1.5 p-3"
+          role="listbox"
+          aria-label="Brand color palette"
+        >
+          {BRAND_PICKER_ANCHORS.map(swatch => {
+            const selected =
+              matchedAnchor?.family === swatch.family && matchedAnchor.shade === swatch.shade
+            const claim = claimedBy(swatch)
+            const tipBody = (
+              <span className="flex flex-col">
+                <span>{swatch.familyLabel}</span>
+                <span className="text-[11px] text-muted-foreground">{swatch.hex}</span>
+                {claim ? (
+                  <span className="mt-0.5 text-[11px] text-foreground">
+                    Used by {claim}
+                  </span>
+                ) : null}
+              </span>
+            )
+            return (
+              <Tip key={`${swatch.family}-${swatch.shade}`} label={tipBody}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  aria-label={
+                    claim
+                      ? `${swatch.familyLabel} (${swatch.hex}) — used by ${claim}`
+                      : `${swatch.familyLabel} (${swatch.hex})`
+                  }
+                  onClick={() => handleSelectSwatch(swatch)}
+                  className={cn(
+                    "group relative flex flex-col items-center gap-1 rounded-md px-1 py-1.5",
+                    "transition-transform hover:scale-[1.03]",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover",
+                    selected && "bg-accent/40",
+                  )}
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "relative inline-flex size-8 shrink-0 rounded-full border border-black/10",
+                      selected &&
+                        "ring-2 ring-ring ring-offset-2 ring-offset-popover",
+                    )}
+                    style={{ background: swatch.hex }}
+                  >
+                    {selected ? (
+                      <i
+                        className="fa-solid fa-check absolute inset-0 m-auto text-[10px] text-white drop-shadow-[0_0_2px_rgba(0,0,0,0.6)]"
+                        aria-hidden="true"
+                      />
+                    ) : null}
+                    {claim ? (
+                      // Pip indicates this anchor is already claimed by
+                      // another product. Sits at the top-right of the
+                      // swatch, contrasting ring for legibility on any
+                      // background.
+                      <span
+                        aria-hidden="true"
+                        className="absolute -right-0.5 -top-0.5 inline-flex size-3 items-center justify-center rounded-full bg-background ring-1 ring-border"
+                      >
+                        <span
+                          className="size-2 rounded-full"
+                          style={{ background: swatch.hex }}
+                        />
+                      </span>
+                    ) : null}
+                  </span>
+                  <span
+                    className={cn(
+                      "max-w-full truncate text-[10px] leading-none text-muted-foreground",
+                      selected && "text-foreground",
+                    )}
+                  >
+                    {swatch.familyLabel}
+                  </span>
+                </button>
+              </Tip>
+            )
+          })}
+        </div>
+
+        {/* Footer — custom hex / CSS input (always visible) */}
+        <div className="space-y-1.5 border-t border-border px-3 py-2">
+          <label
+            htmlFor={`${id ?? "brand-color"}-custom`}
+            className="text-[11px] font-medium text-muted-foreground"
+          >
+            Custom (hex / rgb / oklch)
+          </label>
+          <div className="flex gap-2">
+            <span
+              aria-hidden="true"
+              className="inline-flex size-9 shrink-0 rounded-md border border-border"
+              style={{ background: customDraft.trim() || "transparent" }}
+            />
+            <Input
+              id={`${id ?? "brand-color"}-custom`}
+              value={customDraft}
+              onChange={event => setCustomDraft(event.target.value)}
+              placeholder="#E31C79"
+              autoComplete="off"
+              className="font-mono text-xs"
+              onKeyDown={event => {
+                if (event.key === "Enter") {
+                  event.preventDefault()
+                  handleApplyCustom()
+                }
+              }}
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              disabled={!customDraft.trim() || customDraft.trim() === value.trim()}
+              onClick={handleApplyCustom}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/template/components/compliance-list-view.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import * as React from "react"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 import {
   COMPLIANCE_STATUS_BADGE_CLASS,
   COMPLIANCE_STATUS_ICON,
@@ -10,43 +10,6 @@ import {
 } from "@/lib/list-status-badges"
 import type { ComplianceItem } from "@/lib/mock/compliance"
 
-function ComplianceListRow({
-  row,
-  onRowActivate,
-}: {
-  row: ComplianceItem
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  return (
-    <li>
-      <ListPageBoardCard
-        layout="row"
-        rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-        onClick={onRowActivate ? () => onRowActivate(row) : undefined}
-        rowEnd={
-          <div className="flex shrink-0 items-center gap-2">
-            <ListHubStatusBadge
-              surface="board"
-              label={COMPLIANCE_STATUS_LABEL[row.status]}
-              tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-              icon={COMPLIANCE_STATUS_ICON[row.status]}
-            />
-            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-          </div>
-        }
-      >
-        <div className="space-y-0.5">
-          <p className="text-sm font-semibold text-foreground">{row.title}</p>
-          <p className="text-xs text-muted-foreground">
-            {row.category} · Due {row.dueDate}
-          </p>
-          <p className="text-xs text-muted-foreground">Owner: {row.owner}</p>
-        </div>
-      </ListPageBoardCard>
-    </li>
-  )
-}
-
 export function ComplianceListView({
   rows,
   onRowActivate,
@@ -54,19 +17,38 @@ export function ComplianceListView({
   rows: ComplianceItem[]
   onRowActivate?: (row: ComplianceItem) => void
 }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No compliance items match your filters.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {rows.map(row => (
-        <ComplianceListRow key={row.id} row={row} onRowActivate={onRowActivate} />
-      ))}
-    </ul>
+    <DataRowList<ComplianceItem>
+      rows={rows}
+      getRowId={row => row.id}
+      emptyState="No compliance items match your filters."
+      ariaLabel="Compliance items"
+      renderRow={row => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+          onClick={onRowActivate ? () => onRowActivate(row) : undefined}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={COMPLIANCE_STATUS_LABEL[row.status]}
+                tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
+                icon={COMPLIANCE_STATUS_ICON[row.status]}
+              />
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            </div>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="text-sm font-semibold text-foreground">{row.title}</p>
+            <p className="text-xs text-muted-foreground">
+              {row.category} · Due {row.dueDate}
+            </p>
+            <p className="text-xs text-muted-foreground">Owner: {row.owner}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
   )
 }

package/template/components/compliance-table.tsx

@@ -374,6 +374,10 @@ export const ComplianceTable = React.forwardRef<
     openPropertiesDrawer: () => {
       tableState.setSheetOpen(true)
     },
+  // `tableState` is freshly returned each render by useTableState; depending on
+  // it would re-create the imperative handle on every render. Only the React
+  // setter is needed (and is referentially stable).
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [tableState.setSheetOpen])
 
   const complianceBoardGroupKey = COMPLIANCE_BOARD_GROUP_OPTIONS.some(