@actuate-media/cms-admin 0.68.0 → 0.69.1

package/src/views/Pages/PagesListView.tsx

@@ -412,8 +412,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           the design's `.page-hdr` / `.hdr-r` layout. */}
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div className="flex flex-col gap-1">
-          <h1 className="text-foreground">Pages</h1>
-          <p className="text-muted-foreground text-sm">
+          <h1 className="text-[var(--txt)]">Pages</h1>
+          <p className="text-sm text-[var(--sub)]">
             {treeMode
               ? `${grandTotal} page${grandTotal === 1 ? '' : 's'} total`
               : `${grandTotal} page${grandTotal === 1 ? '' : 's'} · organized by tags`}
@@ -422,7 +422,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         <button
           type="button"
           onClick={() => onNavigate('/pages/new')}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
         >
           <Plus className="h-3.5 w-3.5" aria-hidden />
           New page
@@ -433,7 +433,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       <div className="flex flex-wrap items-center gap-2">
         <div className="relative max-w-sm flex-1">
           <Search
-            className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]"
             aria-hidden
           />
           <input
@@ -442,7 +442,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             onChange={(e) => setSearch(e.target.value)}
             aria-label="Search pages"
             placeholder="Search pages…"
-            className="border-border bg-card text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-primary/30 w-full rounded-lg border py-2 pr-3 pl-9 text-sm shadow-sm focus:ring-2 focus:outline-none"
+            className="focus:border-primary focus:ring-primary/30 w-full rounded-lg border border-[var(--bdr)] bg-[var(--card)] py-2 pr-3 pl-9 text-sm text-[var(--txt)] shadow-sm placeholder:text-[var(--sub)] focus:ring-2 focus:outline-none"
           />
         </div>
 
@@ -479,7 +479,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
         <ViewModeToggle mode={viewMode} onChange={changeViewMode} />
 
-        <span className="text-muted-foreground ml-auto text-sm tabular-nums">
+        <span className="ml-auto text-sm text-[var(--sub)] tabular-nums">
           {treeMode
             ? treeFiltersActive
               ? `${treeRows.length} result${treeRows.length === 1 ? '' : 's'}`
@@ -492,7 +492,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           with the page hierarchy) */}
       {!treeMode && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-muted-foreground text-[10px] font-medium tracking-wider uppercase">
+          <span className="text-[10px] font-medium tracking-wider text-[var(--sub)] uppercase">
             Tags
           </span>
           {tags.map((t) => (
@@ -509,7 +509,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             <button
               type="button"
               onClick={() => setSelectedTags(new Set())}
-              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
+              className="inline-flex items-center gap-1 text-xs text-[var(--sub)] hover:text-[var(--txt)]"
             >
               <X className="h-3 w-3" aria-hidden />
               Clear tags
@@ -543,7 +543,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
       )}
 
       {/* Table card */}
-      <div className="bg-card border-border overflow-hidden rounded-xl border shadow-sm">
+      <div className="overflow-hidden rounded-xl border border-[var(--bdr)] bg-[var(--card)] shadow-sm">
         {treeMode ? (
           <PagesTreeTable
             rows={treeRows}
@@ -579,15 +579,15 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   <col style={{ width: '80px' }} />
                   <col style={{ width: '110px' }} />
                 </colgroup>
-                <thead className="border-border bg-muted/40 border-b">
-                  <tr className="text-muted-foreground text-xs">
+                <thead className="bg-muted/40 border-b border-[var(--bdr)]">
+                  <tr className="text-xs text-[var(--sub)]">
                     <th scope="col" className="px-3 py-2.5 text-left">
                       <input
                         type="checkbox"
                         aria-label="Select all pages on this page"
                         checked={allOnPageSelected}
                         onChange={(e) => toggleAllOnPage(e.target.checked)}
-                        className="border-border accent-primary rounded"
+                        className="accent-primary rounded border-[var(--bdr)]"
                       />
                     </th>
                     <th
@@ -668,7 +668,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   {!loading && error && (
                     <tr>
                       <td colSpan={8} className="px-3 py-12 text-center">
-                        <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
+                        <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
                         <button
                           onClick={() => setRefreshToken((t) => t + 1)}
                           className="text-primary text-sm hover:underline"
@@ -779,8 +779,8 @@ function SortHeader({
     <button
       type="button"
       onClick={() => onSort(field)}
-      className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
-        active ? 'text-foreground' : 'text-muted-foreground'
+      className={`inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors hover:text-[var(--txt)] ${
+        active ? 'text-[var(--txt)]' : 'text-[var(--sub)]'
       }`}
     >
       <span>{label}</span>
@@ -849,12 +849,12 @@ function FilterSelect({
   options: { value: string; label: string }[]
 }) {
   return (
-    <label className="text-foreground inline-flex items-center gap-1.5 text-sm">
-      <span className="text-muted-foreground">{label}:</span>
+    <label className="inline-flex items-center gap-1.5 text-sm text-[var(--txt)]">
+      <span className="text-[var(--sub)]">{label}:</span>
       <select
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="border-border bg-card text-foreground focus:border-primary focus:ring-primary/30 rounded-lg border px-2.5 py-1.5 text-sm shadow-sm focus:ring-2 focus:outline-none"
+        className="focus:border-primary focus:ring-primary/30 rounded-lg border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-sm text-[var(--txt)] shadow-sm focus:ring-2 focus:outline-none"
       >
         {options.map((o) => (
           <option key={o.value} value={o.value}>
@@ -882,12 +882,12 @@ function GroupBlock({
   return (
     <>
       {showHeader && (
-        <tr className="bg-muted/30 border-border border-b">
+        <tr className="bg-muted/30 border-b border-[var(--bdr)]">
           <td colSpan={8} className="px-3 py-2">
-            <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
+            <span className="inline-flex items-center gap-2 text-xs font-medium tracking-wider text-[var(--txt)] uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
-              <span className="text-muted-foreground tabular-nums">{count}</span>
+              <span className="text-[var(--sub)] tabular-nums">{count}</span>
             </span>
           </td>
         </tr>
@@ -934,19 +934,19 @@ function BulkActionBar({
 }) {
   return (
     <div className="border-primary/30 bg-primary/5 flex flex-wrap items-center gap-2 rounded-lg border px-4 py-2">
-      <span className="text-foreground text-sm font-medium">{count} selected</span>
+      <span className="text-sm font-medium text-[var(--txt)]">{count} selected</span>
       <div className="bg-border h-4 w-px" aria-hidden />
       <button
         type="button"
         onClick={onPublish}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Publish
       </button>
       <button
         type="button"
         onClick={onDraft}
-        className="text-foreground hover:bg-accent rounded-md px-2 py-1 text-sm transition-colors"
+        className="rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
       >
         Move to draft
       </button>
@@ -965,7 +965,7 @@ function BulkActionBar({
       <button
         type="button"
         onClick={onClear}
-        className="text-muted-foreground hover:text-foreground ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+        className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--sub)] transition-colors hover:text-[var(--txt)]"
       >
         <X className="h-3.5 w-3.5" aria-hidden />
         Clear
@@ -988,7 +988,7 @@ function TagMenu({
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
-          className="text-foreground hover:bg-accent inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)]"
         >
           {label}
           <ChevronDown className="h-3 w-3" aria-hidden />
@@ -998,16 +998,16 @@ function TagMenu({
         <DropdownMenu.Content
           align="start"
           sideOffset={4}
-          className="border-border bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border p-1 shadow-md"
+          className="bg-popover z-50 max-h-64 w-44 overflow-auto rounded-lg border border-[var(--bdr)] p-1 shadow-md"
         >
           {tags.length === 0 ? (
-            <div className="text-muted-foreground px-2 py-1.5 text-xs">No tags yet</div>
+            <div className="px-2 py-1.5 text-xs text-[var(--sub)]">No tags yet</div>
           ) : (
             tags.map((t) => (
               <DropdownMenu.Item
                 key={t.slug}
                 onSelect={() => onPick(t.slug)}
-                className="text-foreground focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none"
+                className="focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--txt)] outline-none"
               >
                 <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(t.color ?? 'gray')}`} />
                 {t.name}
@@ -1039,8 +1039,8 @@ function PageRow({
 }) {
   return (
     <tr
-      className={`border-border hover:bg-muted/30 group border-b transition-colors last:border-b-0 ${
-        selected ? 'bg-primary/5' : ''
+      className={`group border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
+        selected ? 'bg-[var(--acc-l)]' : ''
       }`}
     >
       <td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
@@ -1049,17 +1049,17 @@ function PageRow({
           aria-label={`Select "${page.title}"`}
           checked={selected}
           onChange={onSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </td>
       <td className="px-3 py-3">
         <button type="button" onClick={onOpen} className="flex w-full items-center gap-3 text-left">
           <span aria-hidden className="bg-muted block h-9 w-9 shrink-0 rounded-md" />
           <span className="min-w-0">
-            <span className="text-foreground group-hover:text-primary block truncate text-sm font-medium">
+            <span className="block truncate text-sm font-medium text-[var(--txt)] group-hover:text-[var(--acc)]">
               {page.title}
             </span>
-            <span className="text-muted-foreground block truncate text-xs">{page.path}</span>
+            <span className="block truncate text-xs text-[var(--sub)]">{page.path}</span>
           </span>
         </button>
       </td>
@@ -1070,17 +1070,17 @@ function PageRow({
         <div className="flex items-center gap-2">
           <span
             aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
+            className="bg-muted inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium text-[var(--sub)]"
           >
             {page.authorInitials}
           </span>
-          <span className="text-foreground truncate text-sm">{page.authorName}</span>
+          <span className="truncate text-sm text-[var(--txt)]">{page.authorName}</span>
         </div>
       </td>
       <td className="px-3 py-3">
         <PostStatusBadge status={page.status} />
       </td>
-      <td className="text-muted-foreground px-3 py-3 text-sm tabular-nums">
+      <td className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums">
         {formatDateShort(page.lastModified)}
       </td>
       <td className="px-3 py-3">
@@ -1117,7 +1117,7 @@ function LoadingRows() {
   return (
     <>
       {Array.from({ length: 8 }).map((_, i) => (
-        <tr key={i} className="border-border border-b last:border-b-0">
+        <tr key={i} className="border-b border-[var(--bdr)] last:border-b-0">
           {Array.from({ length: 8 }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
@@ -1141,10 +1141,10 @@ function EmptyRow({
   return (
     <tr>
       <td colSpan={8} className="px-3 py-16 text-center">
-        <div className="text-foreground mb-2 text-sm font-medium">
+        <div className="mb-2 text-sm font-medium text-[var(--txt)]">
           {filtersActive ? 'No pages match your filters' : 'No pages yet'}
         </div>
-        <div className="text-muted-foreground mb-4 text-sm">
+        <div className="mb-4 text-sm text-[var(--sub)]">
           {filtersActive
             ? 'Try clearing the search, tags, or status filter above.'
             : 'Create your first page to get started.'}
@@ -1184,8 +1184,8 @@ function PaginationFooter({
   const start = total === 0 ? 0 : (page - 1) * pageSize + 1
   const end = Math.min(total, page * pageSize)
   return (
-    <div className="border-border flex items-center justify-between border-t px-4 py-3 text-sm">
-      <span className="text-muted-foreground tabular-nums">
+    <div className="flex items-center justify-between border-t border-[var(--bdr)] px-4 py-3 text-sm">
+      <span className="text-[var(--sub)] tabular-nums">
         {start}–{end} of {total} page{total === 1 ? '' : 's'}
       </span>
       <nav className="flex items-center gap-1" aria-label="Pages pagination">
@@ -1194,7 +1194,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.max(1, page - 1))}
           disabled={page === 1}
           aria-label="Previous page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronLeft className="h-4 w-4" aria-hidden />
         </button>
@@ -1203,7 +1203,7 @@ function PaginationFooter({
             <span
               key={`gap-${idx}`}
               aria-hidden
-              className="text-muted-foreground inline-flex h-8 w-8 items-center justify-center text-sm"
+              className="inline-flex h-8 w-8 items-center justify-center text-sm text-[var(--sub)]"
             >
               …
             </span>
@@ -1216,7 +1216,7 @@ function PaginationFooter({
               className={`inline-flex h-8 w-8 items-center justify-center rounded-md text-sm tabular-nums transition-colors ${
                 p === page
                   ? 'bg-primary text-primary-foreground'
-                  : 'border-border bg-background text-foreground hover:bg-accent border'
+                  : 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] hover:bg-[var(--acc-l)]'
               }`}
             >
               {p}
@@ -1228,7 +1228,7 @@ function PaginationFooter({
           onClick={() => onPage(Math.min(totalPages, page + 1))}
           disabled={page === totalPages}
           aria-label="Next page"
-          className="border-border bg-background text-foreground hover:bg-accent inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--bdr)] bg-[var(--bg)] text-[var(--txt)] transition-colors hover:bg-[var(--acc-l)] disabled:cursor-not-allowed disabled:opacity-40"
         >
           <ChevronRight className="h-4 w-4" aria-hidden />
         </button>

package/src/views/Pages/PagesTreeTable.tsx

@@ -82,7 +82,7 @@ export function PagesTreeTable({
                 aria-label="Select all visible pages"
                 checked={allSelected}
                 onChange={(e) => onToggleAll(e.target.checked)}
-                className="border-border accent-primary rounded"
+                className="accent-primary rounded border-[var(--bdr)]"
               />
             </th>
             <th scope="col" className={`${TH_CLASS} min-w-[280px]`}>
@@ -113,8 +113,11 @@ export function PagesTreeTable({
           {!loading && error && (
             <tr>
               <td colSpan={8} className="px-3 py-12 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
-                <button onClick={onRetry} className="text-primary text-sm hover:underline">
+                <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
+                <button
+                  onClick={onRetry}
+                  className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+                >
                   Try again
                 </button>
               </td>
@@ -123,10 +126,10 @@ export function PagesTreeTable({
           {!loading && !error && rows.length === 0 && (
             <tr>
               <td colSpan={8} className="px-3 py-16 text-center">
-                <div className="text-foreground mb-2 text-sm font-medium">
+                <div className="mb-2 text-sm font-medium text-[var(--txt)]">
                   {flattened ? 'No pages match your filters' : 'No pages yet'}
                 </div>
-                <div className="text-muted-foreground mb-4 text-sm">
+                <div className="mb-4 text-sm text-[var(--sub)]">
                   {flattened
                     ? 'Try clearing the search or status filter above.'
                     : 'Create your first page to get started.'}
@@ -135,7 +138,7 @@ export function PagesTreeTable({
                   <button
                     type="button"
                     onClick={onClearFilters}
-                    className="text-primary text-sm hover:underline"
+                    className="text-primary rounded-sm text-sm hover:underline focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                   >
                     Clear filters
                   </button>
@@ -143,7 +146,7 @@ export function PagesTreeTable({
                   <button
                     type="button"
                     onClick={onNewPage}
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
                   >
                     <Plus className="h-3.5 w-3.5" aria-hidden />
                     New page
@@ -208,7 +211,7 @@ function TreeRow({
           aria-label={`Select "${page.title}"`}
           checked={isSelected}
           onChange={onToggleSelect}
-          className="border-border accent-primary rounded"
+          className="accent-primary rounded border-[var(--bdr)]"
         />
       </td>
       <td className="px-3 align-middle">

package/src/views/SEO.tsx

@@ -18,6 +18,7 @@ import {
 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
+import { parseRouteQuery } from '../router/index.js'
 import { ErrorBoundary } from '../components/ErrorBoundary.js'
 import { fetchSeoOverview, runSeoAudit } from '../lib/seo-service.js'
 import { fetchPlanInfo, type PlanInfo } from '../lib/plan.js'
@@ -62,7 +63,7 @@ function readUrlState(): UrlState {
   if (typeof window === 'undefined') {
     return { tab: null, entityType: null, entityId: null, issueId: null }
   }
-  const params = new URLSearchParams(window.location.search)
+  const params = parseRouteQuery(window.location.search)
   return {
     tab: params.get('tab'),
     entityType: params.get('entityType'),

package/src/views/ScriptTags.tsx

@@ -139,7 +139,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
             <span className="text-destructive flex-1 text-sm">{error}</span>
             <button
               onClick={refetch}
-              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors"
+              className="border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
             >
               Retry
             </button>
@@ -148,8 +148,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
 
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <h1 className="text-foreground mb-1">Script Tags</h1>
-            <p className="text-muted-foreground text-sm">
+            <h1 className="mb-1 text-[var(--txt)]">Script Tags</h1>
+            <p className="text-sm text-[var(--sub)]">
               Manage tracking codes, analytics, and custom scripts injected into your site
             </p>
             {tags.length > 0 && (
@@ -171,7 +171,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
           <button
             type="button"
             onClick={() => setSelection({ mode: 'new' })}
-            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
           >
             <Plus className="h-4 w-4" />
             New Script
@@ -182,45 +182,35 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
       <SplitPaneLayout>
         <SplitPaneList className="p-3 pt-0 pr-6 sm:p-4 sm:pt-0 sm:pr-8">
           {tags.length === 0 && !error ? (
-            <div className="border-border bg-card rounded-lg border p-12 text-center">
-              <Code2 className="text-muted-foreground mx-auto mb-3 h-10 w-10" />
-              <h3 className="text-foreground text-sm font-medium">No script tags yet</h3>
-              <p className="text-muted-foreground mt-1 text-sm">
+            <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)] p-12 text-center">
+              <Code2 className="mx-auto mb-3 h-10 w-10 text-[var(--sub)]" />
+              <h3 className="text-sm font-medium text-[var(--txt)]">No script tags yet</h3>
+              <p className="mt-1 text-sm text-[var(--sub)]">
                 Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel.
               </p>
               <button
                 type="button"
                 onClick={() => setSelection({ mode: 'new' })}
-                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
               >
                 <Plus className="h-4 w-4" />
                 Add Your First Script
               </button>
             </div>
           ) : (
-            <div className="border-border bg-card overflow-hidden rounded-lg border">
+            <div className="overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
               <table className="w-full text-sm" aria-label="Script tags">
                 <thead>
-                  <tr className="border-border bg-muted border-b">
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Script
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Location
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
+                  <tr className="bg-muted border-b border-[var(--bdr)]">
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Script</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Location</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">
                       Priority
                     </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">Scope</th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Consent
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-center font-medium">
-                      Active
-                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
-                      Updated
-                    </th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Scope</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Consent</th>
+                    <th className="px-4 py-3 text-center font-medium text-[var(--sub)]">Active</th>
+                    <th className="px-4 py-3 text-left font-medium text-[var(--sub)]">Updated</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -229,8 +219,8 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                     return (
                       <tr
                         key={tag.id}
-                        className={`border-border cursor-pointer border-b transition-colors last:border-0 ${
-                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-muted'
+                        className={`cursor-pointer border-b border-[var(--bdr)] transition-colors last:border-0 ${
+                          isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'
                         }`}
                         onClick={() => toggleRow(tag)}
                       >
@@ -242,29 +232,29 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                               toggleRow(tag)
                             }}
                             aria-expanded={isSelected}
-                            className="text-foreground hover:text-primary text-left font-medium"
+                            className="text-left font-medium text-[var(--txt)] hover:text-[var(--acc)]"
                           >
                             {tag.name}
                           </button>
                         </td>
                         <td className="px-4 py-[11px]">
                           <span
-                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`}
+                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-[var(--txt)]'}`}
                           >
                             {PLACEMENT_LABELS[tag.placement] ?? tag.placement}
                           </span>
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-center font-mono">
+                        <td className="px-4 py-[11px] text-center font-mono text-[var(--sub)]">
                           {tag.priority}
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px]">{scopeLabel(tag)}</td>
+                        <td className="px-4 py-[11px] text-[var(--sub)]">{scopeLabel(tag)}</td>
                         <td className="px-4 py-[11px]">
                           {tag.consentCategory && tag.consentCategory !== 'none' ? (
                             <span className="rounded-[5px] border border-[var(--bdr)] bg-[var(--bg)] px-1.5 py-0.5 text-[11px] text-[var(--sub)]">
                               {CONSENT_LABELS[tag.consentCategory] ?? tag.consentCategory}
                             </span>
                           ) : (
-                            <span className="text-muted-foreground text-xs">—</span>
+                            <span className="text-xs text-[var(--sub)]">—</span>
                           )}
                         </td>
                         <td
@@ -278,7 +268,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
                             aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
                           />
                         </td>
-                        <td className="text-muted-foreground px-4 py-[11px] text-xs">
+                        <td className="px-4 py-[11px] text-xs text-[var(--sub)]">
                           {formatUpdated(tag.updatedAt)}
                         </td>
                       </tr>

package/src/views/Settings.tsx

@@ -13,6 +13,7 @@ import {
 } from 'lucide-react'
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { toast } from 'sonner'
+import { parseRouteQuery } from '../router/index.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
@@ -35,6 +36,9 @@ export interface SettingsProps {
   /** Initial tab when arriving without a `?tab=` query param (e.g. via the
    * legacy `/users` or `/api-keys` routes). */
   initialTab?: string
+  /** Router path including the query string (e.g. `/users?selected=<id>`).
+   * Forwarded to embedded tab views so their deep links keep working. */
+  currentPath?: string
 }
 
 /**
@@ -48,7 +52,7 @@ const GLOBAL_SAVE_TABS = new Set(['layout'])
 
 function readSettingsTabFromUrl(): string | null {
   if (typeof window === 'undefined') return null
-  return new URLSearchParams(window.location.search).get('tab')
+  return parseRouteQuery(window.location.search).get('tab')
 }
 
 export function Settings({
@@ -56,6 +60,7 @@ export function Settings({
   onNavigate,
   session,
   initialTab = 'general',
+  currentPath,
 }: SettingsProps = {}) {
   const { data, loading, error, refetch } = useApiData<any>('/globals/settings')
 
@@ -329,7 +334,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="users">
-          <UsersView onNavigate={onNavigate} embedded />
+          <UsersView onNavigate={onNavigate} embedded currentPath={currentPath} />
         </Tabs.Content>
 
         <Tabs.Content value="api-keys">

package/src/views/Users.tsx

@@ -22,8 +22,9 @@ import {
   Check,
   SlidersHorizontal,
 } from 'lucide-react'
-import { useState, useMemo, useCallback, type FormEvent } from 'react'
+import { useState, useMemo, useCallback, useEffect, useRef, type FormEvent } from 'react'
 import { toast } from 'sonner'
+import { parseRouteQuery } from '../router/index.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { Button } from '../components/ui/Button.js'
@@ -675,9 +676,12 @@ const ROLE_PILLS: Array<'All' | 'Owner' | 'Admin' | 'Editor' | 'Viewer'> = [
 export interface UsersProps {
   onNavigate?: (path: string) => void
   embedded?: boolean
+  /** Router path including the query string. `?selected=<userId>` (written by
+   * the command palette) opens that member's detail drawer once the list loads. */
+  currentPath?: string
 }
 
-export function Users({ embedded = false }: UsersProps = {}) {
+export function Users({ embedded = false, currentPath }: UsersProps = {}) {
   const members = useApiData<ApiMember[]>('/users?pageSize=200')
   const invites = useApiData<ApiInvite[]>('/invites')
   const stats = useApiData<ApiStats>('/users/stats')
@@ -702,6 +706,23 @@ export function Users({ embedded = false }: UsersProps = {}) {
     review.refetch()
   }, [members, invites, stats, review])
 
+  // Deep link from the command palette (`/users?selected=<id>`): open the
+  // member's detail drawer once the list loads. Each query value is handled
+  // once, so closing the drawer isn't overridden on refetch; ids that don't
+  // match a loaded member are ignored.
+  const selectedUserId = useMemo(() => {
+    const source = currentPath ?? (typeof window !== 'undefined' ? window.location.search : '')
+    return parseRouteQuery(source).get('selected')
+  }, [currentPath])
+  const handledSelectedRef = useRef<string | null>(null)
+  useEffect(() => {
+    if (!selectedUserId || members.loading) return
+    if (handledSelectedRef.current === selectedUserId) return
+    if (!(members.data ?? []).some((m) => m.id === selectedUserId)) return
+    handledSelectedRef.current = selectedUserId
+    setDetailUserId(selectedUserId)
+  }, [selectedUserId, members.loading, members.data])
+
   const currentUserRole = useMemo(
     () => (members.data ?? []).find((m) => m.isCurrentUser)?.roleName ?? null,
     [members.data],