@agent-native/core 0.82.0 → 0.84.0

package/corpus/templates/design/app/components/design/QuestionFlow.tsx

@@ -346,7 +346,7 @@ function OptionButton({
           <span className="sr-only">{option.description}</span>
         )}
         {option.preview && (
-          <span className="mt-2 block max-h-36 overflow-auto whitespace-pre-wrap rounded-md border border-border/60 bg-background/70 px-2 py-1.5 font-mono text-[11px] leading-4 text-muted-foreground">
+          <span className="mt-2 block max-h-36 overflow-auto whitespace-pre-wrap rounded-md border border-border/60 bg-background/70 px-2 py-1.5 font-mono !text-[11px] leading-4 text-muted-foreground">
             {option.preview}
           </span>
         )}

package/corpus/templates/design/app/components/design/ReviewPanel.tsx

@@ -23,15 +23,13 @@
 import { useActionMutation } from "@agent-native/core/client";
 import {
   IconAlertCircle,
-  IconAlertTriangle,
   IconArrowsLeftRight,
   IconCheck,
   IconChevronDown,
   IconChevronRight,
-  IconInfoCircle,
   IconRefresh,
   IconShieldCheck,
-  IconWand,
+  IconTool,
 } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -131,24 +129,20 @@ export interface ReviewPanelProps {
 
 interface SeverityConfig {
   dot: string;
-  icon: React.ElementType;
   label: string;
 }
 
 const SEVERITY_CONFIG: Record<A11ySeverity, SeverityConfig> = {
   error: {
     dot: "bg-destructive",
-    icon: IconAlertCircle,
     label: "Error",
   },
   warning: {
     dot: "bg-amber-400",
-    icon: IconAlertTriangle,
     label: "Warning",
   },
   info: {
     dot: "bg-blue-400",
-    icon: IconInfoCircle,
     label: "Info",
   },
 };
@@ -194,7 +188,6 @@ function FindingRow({
   onFixApplied?: (finding: A11yFinding, result?: ReviewFixResult) => void;
 }) {
   const cfg = SEVERITY_CONFIG[finding.severity];
-  const Icon = cfg.icon;
   const [expanded, setExpanded] = useState(false);
   const hasDetail = !!(finding.detail ?? finding.wcag);
 
@@ -246,8 +239,10 @@ function FindingRow({
   return (
     <div
       className={cn(
-        "group rounded px-2 py-1.5 transition-colors",
-        onClick ? "cursor-pointer hover:bg-accent/60" : "cursor-default",
+        "group rounded-[5px] px-2 py-1.5 transition-colors",
+        onClick
+          ? "cursor-pointer hover:bg-[var(--design-editor-layer-hover-color)]"
+          : "cursor-default",
       )}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}
@@ -257,28 +252,15 @@ function FindingRow({
       }}
       aria-label={finding.message}
     >
-      <div className="flex items-start gap-2">
-        {/* Severity dot */}
+      <div className="flex items-start gap-2.5">
         <span
           className={cn("mt-[5px] size-1.5 shrink-0 rounded-full", cfg.dot)}
           aria-hidden="true"
         />
 
-        {/* Message + expand toggle */}
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-1">
-            <Icon
-              className={cn(
-                "size-3.5 shrink-0",
-                finding.severity === "error"
-                  ? "text-destructive"
-                  : finding.severity === "warning"
-                    ? "text-amber-500"
-                    : "text-blue-500",
-              )}
-              aria-hidden="true"
-            />
-            <span className="truncate text-[11px] text-foreground leading-snug">
+          <div className="flex min-h-5 items-center gap-1">
+            <span className="truncate !text-[11px] font-medium leading-snug text-foreground">
               {finding.message}
             </span>
             {hasDetail && (
@@ -301,16 +283,15 @@ function FindingRow({
             )}
           </div>
 
-          {/* WCAG badge */}
-          {finding.wcag && (
-            <span className="text-[10px] text-muted-foreground/60">
-              WCAG {finding.wcag}
+          {(finding.wcag || expanded) && (
+            <span className="text-[10px] capitalize text-muted-foreground/55">
+              {cfg.label}
+              {finding.wcag ? ` · WCAG ${finding.wcag}` : ""}
             </span>
           )}
 
-          {/* Expanded detail */}
           {expanded && finding.detail && (
-            <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
+            <p className="mt-1 !text-[11px] leading-snug text-muted-foreground">
               {finding.detail}
             </p>
           )}
@@ -337,7 +318,7 @@ function FindingRow({
                 "h-5 shrink-0 gap-1 px-1.5 text-[10px]",
                 fixStatus === "error"
                   ? "text-destructive hover:text-destructive"
-                  : "text-muted-foreground hover:text-foreground",
+                  : "text-muted-foreground opacity-0 hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
               )}
               title={
                 fixStatus === "error"
@@ -349,7 +330,7 @@ function FindingRow({
               {fixStatus === "pending" ? (
                 <IconRefresh className="size-3 animate-spin" />
               ) : (
-                <IconWand className="size-3" />
+                <IconTool className="size-3" />
               )}
               {fixStatus === "error" ? "Retry" : "Fix"}
             </Button>
@@ -368,7 +349,6 @@ function A11ySection({
   loading,
   auditedAt,
   auditError,
-  onRunAudit,
   onFindingClick,
   fixSource,
   onFixApplied,
@@ -377,7 +357,6 @@ function A11ySection({
   loading?: boolean;
   auditedAt?: string | null;
   auditError?: string | null;
-  onRunAudit?: () => void;
   onFindingClick?: (finding: A11yFinding) => void;
   fixSource?: ReviewFixSource;
   onFixApplied?: (finding: A11yFinding, result?: ReviewFixResult) => void;
@@ -388,20 +367,38 @@ function A11ySection({
 
   const hasFindings = findings.length > 0;
   const notRun = !auditedAt && !loading && !auditError && !hasFindings;
+  const statusLabel = loading
+    ? "Scanning..."
+    : auditError
+      ? "Could not scan"
+      : notRun
+        ? "Not checked"
+        : hasFindings
+          ? `${findings.length} ${findings.length === 1 ? "issue" : "issues"}`
+          : "No issues";
 
   return (
     <section aria-labelledby="review-a11y-heading">
-      {/* Section header */}
-      <div className="flex h-7 items-center justify-between">
+      <div className="flex h-7 items-center justify-between gap-2">
         <div className="flex items-center gap-1.5">
           <IconShieldCheck className="size-3.5 text-muted-foreground" />
           <span
             id="review-a11y-heading"
-            className="text-[11px] font-semibold text-foreground"
+            className="!text-[11px] font-semibold text-foreground"
           >
             Accessibility
           </span>
-          {hasFindings && (
+          <span
+            className={cn(
+              "rounded px-1 py-0.5 text-[10px] font-medium text-muted-foreground/65",
+              !loading && !auditError && !notRun && !hasFindings
+                ? "text-emerald-500"
+                : "",
+            )}
+          >
+            {statusLabel}
+          </span>
+          {hasFindings ? (
             <div className="flex items-center gap-1">
               {errors.length > 0 && (
                 <Badge
@@ -428,73 +425,46 @@ function A11ySection({
                 </Badge>
               )}
             </div>
-          )}
+          ) : null}
         </div>
-
-        {/* Run audit button */}
-        {onRunAudit && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            disabled={loading}
-            onClick={onRunAudit}
-            className="h-6 gap-1 rounded-md px-1.5 text-[10px] text-muted-foreground hover:text-foreground"
-          >
-            {loading ? (
-              <IconRefresh className="size-3 animate-spin" />
-            ) : (
-              <IconRefresh className="size-3" />
-            )}
-            {loading ? "Running…" : "Run"}
-          </Button>
-        )}
       </div>
 
-      <Separator />
-
       <div className="py-1">
-        {/* Error state */}
         {auditError && (
-          <div className="flex min-h-7 items-center gap-2 rounded-[5px] px-2">
+          <div className="flex min-h-7 items-center gap-2 rounded-[5px] px-2 text-muted-foreground">
             <IconAlertCircle className="size-3.5 shrink-0 text-destructive" />
-            <span className="text-[11px] text-muted-foreground">
-              {auditError}
-            </span>
+            <span className="!text-[11px]">{auditError}</span>
           </div>
         )}
 
-        {/* Not yet run */}
         {notRun && (
-          <div className="flex h-7 items-center gap-2 rounded-[5px] px-2 text-muted-foreground/55">
-            <IconShieldCheck className="size-3.5 shrink-0" />
-            <span className="truncate text-[11px]">Audit not run</span>
+          <div className="flex h-7 items-center rounded-[5px] px-2 text-muted-foreground/55">
+            <span className="truncate !text-[11px]">
+              Run a quick accessibility check.
+            </span>
           </div>
         )}
 
-        {/* Loading */}
         {loading && !hasFindings && (
           <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconRefresh className="size-3.5 animate-spin text-muted-foreground/50" />
-            <span className="text-[11px] text-muted-foreground/60">
+            <span className="!text-[11px] text-muted-foreground/60">
               Scanning…
             </span>
           </div>
         )}
 
-        {/* All clear */}
         {!loading && !auditError && !notRun && !hasFindings && (
           <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconCheck className="size-3.5 text-emerald-500" />
-            <span className="text-[11px] text-muted-foreground">
+            <span className="!text-[11px] text-muted-foreground">
               No issues found.
             </span>
           </div>
         )}
 
-        {/* Findings list */}
         {hasFindings && (
-          <div className="space-y-0.5">
+          <div className="flex flex-col gap-0.5">
             {[...errors, ...warnings, ...infos].map((finding) => (
               <FindingRow
                 key={finding.id}
@@ -507,7 +477,6 @@ function A11ySection({
           </div>
         )}
 
-        {/* Audit timestamp */}
         {auditedAt && (
           <p className="mt-1 px-2 text-[10px] text-muted-foreground/40">
             Last audited{" "}
@@ -565,7 +534,7 @@ function DiffRow({ entry }: { entry: VisualDiffEntry }) {
       >
         {cfg.label}
       </Badge>
-      <span className="truncate text-[11px] text-foreground leading-snug">
+      <span className="truncate !text-[11px] text-foreground leading-snug">
         {entry.description ?? entry.id}
       </span>
     </div>
@@ -592,6 +561,10 @@ function VisualDiffSection({
   const hasDiff = diff.length > 0;
   const hasVersions = versionOptions.length > 0;
   const noVersionsSelected = !baseVersionId && !compareVersionId;
+  const shouldRender =
+    hasVersions || hasDiff || loading || !!diffError || !noVersionsSelected;
+
+  if (!shouldRender) return null;
 
   return (
     <section aria-labelledby="review-diff-heading">
@@ -599,7 +572,7 @@ function VisualDiffSection({
         <IconArrowsLeftRight className="size-3.5 text-muted-foreground" />
         <span
           id="review-diff-heading"
-          className="text-[11px] font-semibold text-foreground"
+          className="!text-[11px] font-semibold text-foreground"
         >
           Visual diff
         </span>
@@ -613,10 +586,7 @@ function VisualDiffSection({
         )}
       </div>
 
-      <Separator />
-
       <div className="space-y-1.5 py-1">
-        {/* Version selectors */}
         {hasVersions && (
           <div className="flex items-center gap-1.5">
             <span className="shrink-0 text-[10px] text-muted-foreground/70">
@@ -638,11 +608,10 @@ function VisualDiffSection({
           </div>
         )}
 
-        {/* States */}
         {diffError && (
           <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconAlertCircle className="size-3.5 shrink-0 text-destructive" />
-            <span className="text-[11px] text-muted-foreground">
+            <span className="!text-[11px] text-muted-foreground">
               {diffError}
             </span>
           </div>
@@ -651,14 +620,14 @@ function VisualDiffSection({
         {loading && (
           <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconRefresh className="size-3.5 animate-spin text-muted-foreground/50" />
-            <span className="text-[11px] text-muted-foreground/60">
+            <span className="!text-[11px] text-muted-foreground/60">
               Comparing…
             </span>
           </div>
         )}
 
         {!loading && !diffError && noVersionsSelected && !hasDiff && (
-          <div className="flex h-7 items-center rounded-[5px] px-2 text-[11px] text-muted-foreground/55">
+          <div className="flex h-7 items-center rounded-[5px] px-2 !text-[11px] text-muted-foreground/55">
             {hasVersions ? "Choose versions to diff" : "No versions yet"}
           </div>
         )}
@@ -666,15 +635,14 @@ function VisualDiffSection({
         {!loading && !diffError && !noVersionsSelected && !hasDiff && (
           <div className="flex h-7 items-center gap-2 rounded-[5px] px-2">
             <IconCheck className="size-3.5 text-emerald-500" />
-            <span className="text-[11px] text-muted-foreground">
+            <span className="!text-[11px] text-muted-foreground">
               No structural changes detected.
             </span>
           </div>
         )}
 
-        {/* Diff rows */}
         {hasDiff && (
-          <div className="space-y-0.5">
+          <div className="flex flex-col gap-0.5">
             {diff.map((entry) => (
               <DiffRow key={entry.id} entry={entry} />
             ))}
@@ -704,7 +672,6 @@ export function ReviewPanel({
   auditLoading,
   auditedAt,
   auditError,
-  onRunAudit,
   visualDiff = [],
   versionOptions = [],
   baseVersionId,
@@ -717,9 +684,17 @@ export function ReviewPanel({
   onFixApplied,
   className,
 }: ReviewPanelProps) {
+  const showDiffSection =
+    versionOptions.length > 0 ||
+    visualDiff.length > 0 ||
+    diffLoading ||
+    !!diffError ||
+    !!baseVersionId ||
+    !!compareVersionId;
+
   return (
     <div
-      className={cn("flex flex-col gap-2 text-[11px]", className)}
+      className={cn("flex flex-col gap-1 !text-[11px]", className)}
       data-testid="review-panel"
     >
       <A11ySection
@@ -727,21 +702,25 @@ export function ReviewPanel({
         loading={auditLoading}
         auditedAt={auditedAt}
         auditError={auditError}
-        onRunAudit={onRunAudit}
         onFindingClick={onFindingClick}
         fixSource={fixSource}
         onFixApplied={onFixApplied}
       />
 
-      <VisualDiffSection
-        diff={visualDiff}
-        versionOptions={versionOptions}
-        baseVersionId={baseVersionId}
-        compareVersionId={compareVersionId}
-        onVersionChange={onVersionChange}
-        loading={diffLoading}
-        diffError={diffError}
-      />
+      {showDiffSection ? (
+        <>
+          <Separator />
+          <VisualDiffSection
+            diff={visualDiff}
+            versionOptions={versionOptions}
+            baseVersionId={baseVersionId}
+            compareVersionId={compareVersionId}
+            onVersionChange={onVersionChange}
+            loading={diffLoading}
+            diffError={diffError}
+          />
+        </>
+      ) : null}
     </div>
   );
 }

package/corpus/templates/design/app/components/design/StatesPanel.tsx

@@ -271,7 +271,7 @@ export function StatesPanel({
       {/* ── Responsive breakpoints ── */}
       <section aria-label="Breakpoints">
         <div className="mb-1 flex items-center justify-between">
-          <span className="text-[11px] font-medium text-muted-foreground">
+          <span className="!text-[11px] font-medium text-muted-foreground">
             Responsive
           </span>
           {onAddBreakpoint && (
@@ -346,7 +346,7 @@ export function StatesPanel({
       {/* ── Design states ── */}
       <section aria-label="Design states">
         <div className="mb-1 flex items-center justify-between">
-          <span className="text-[11px] font-medium text-muted-foreground">
+          <span className="!text-[11px] font-medium text-muted-foreground">
             States
           </span>
           <div className="flex items-center gap-0.5">
@@ -461,7 +461,7 @@ export function StatesPanel({
 
         {/* Empty state (no user-created states yet) */}
         {!isLoading && states.length === 0 && !isAdding && (
-          <div className="mt-1 flex h-7 items-center rounded-[5px] px-2 text-[11px] text-muted-foreground/55">
+          <div className="mt-1 flex h-7 items-center rounded-[5px] px-2 !text-[11px] text-muted-foreground/55">
             No saved states
           </div>
         )}
@@ -480,7 +480,7 @@ export function StatesPanel({
               value={newStateName}
               onChange={(e) => setNewStateName(e.target.value)}
               placeholder="State name…"
-              className="h-6 min-w-0 flex-1 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
+              className="h-6 min-w-0 flex-1 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 !text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
               onKeyDown={(e) => {
                 if (e.key === "Escape") {
                   setIsAdding(false);
@@ -491,7 +491,7 @@ export function StatesPanel({
             <Button
               type="submit"
               size="sm"
-              className="h-6 cursor-pointer px-2 text-[11px]"
+              className="h-6 cursor-pointer px-2 !text-[11px]"
               disabled={!newStateName.trim() || createState.isPending}
             >
               Add
@@ -500,7 +500,7 @@ export function StatesPanel({
               type="button"
               variant="ghost"
               size="sm"
-              className="h-6 cursor-pointer px-2 text-[11px]"
+              className="h-6 cursor-pointer px-2 !text-[11px]"
               onClick={() => {
                 setIsAdding(false);
                 setNewStateName("");

package/corpus/templates/design/app/components/design/TokensPanel.tsx

@@ -200,7 +200,7 @@ function TokenRow({
       {/* Friendly name */}
       <button
         type="button"
-        className="min-w-0 flex-1 cursor-pointer truncate bg-transparent p-0 text-left text-[11px] text-foreground"
+        className="min-w-0 flex-1 cursor-pointer truncate bg-transparent p-0 text-left !text-[11px] text-foreground"
         onClick={onStartEdit}
         aria-label={`Edit ${token.name}`}
         title={token.name}
@@ -220,7 +220,7 @@ function TokenRow({
             if (e.key === "Escape") onCancelEdit();
           }}
           onBlur={onCommit}
-          className="h-5 w-24 px-1 py-0 text-[11px] font-mono"
+          className="h-5 w-24 px-1 py-0 !text-[11px] font-mono md:!text-[11px]"
         />
       ) : (
         <button
@@ -360,7 +360,7 @@ function NewTokenPopover({ onAdd }: NewTokenPopoverProps) {
           type="button"
           variant="ghost"
           size="sm"
-          className="h-6 cursor-pointer gap-1 px-2 text-[11px] text-muted-foreground hover:text-foreground"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px] text-muted-foreground hover:text-foreground"
         >
           <IconPlus className="size-3" />
           {t("designEditor.tokens.newToken")}
@@ -375,7 +375,7 @@ function NewTokenPopover({ onAdd }: NewTokenPopoverProps) {
             <Input
               value={cssVar}
               onChange={(e) => setCssVar(e.target.value)}
-              className="h-6 font-mono text-[11px]"
+              className="h-6 font-mono !text-[11px] md:!text-[11px]"
               placeholder="--my-token"
             />
           </div>
@@ -386,13 +386,13 @@ function NewTokenPopover({ onAdd }: NewTokenPopoverProps) {
             <Input
               value={value}
               onChange={(e) => setValue(e.target.value)}
-              className="h-6 font-mono text-[11px]"
+              className="h-6 font-mono !text-[11px] md:!text-[11px]"
               placeholder="#3B82F6"
             />
           </div>
           <Button
             type="button"
-            className="h-7 w-full cursor-pointer text-[11px]"
+            className="h-7 w-full cursor-pointer !text-[11px]"
             onClick={handleAdd}
             disabled={!cssVar || !value}
           >
@@ -506,7 +506,7 @@ function ImportTokensPopover({
       <PopoverContent align="end" className="w-72 p-3 text-[12px]">
         <div className="space-y-3">
           <div className="space-y-1">
-            <p className="text-[11px] font-medium text-foreground">
+            <p className="!text-[11px] font-medium text-foreground">
               {t("designEditor.tokens.importTitle")}
             </p>
             <p className="text-[10px] leading-snug text-muted-foreground">
@@ -575,11 +575,11 @@ function ImportTokensPopover({
               value={text}
               onChange={(event) => setText(event.target.value)}
               placeholder={t("designEditor.tokens.pastePlaceholder")}
-              className="min-h-24 resize-none font-mono text-[11px]"
+              className="min-h-24 resize-none font-mono !text-[11px]"
             />
             <Button
               type="button"
-              className="h-7 w-full cursor-pointer text-[11px]"
+              className="h-7 w-full cursor-pointer !text-[11px]"
               disabled={isPending || !text.trim()}
               onClick={() => void runImport(() => onImportText(text))}
             >
@@ -720,7 +720,7 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
       <div className="flex items-center justify-between border-b border-border/60 px-3 py-2">
         <div className="flex items-center gap-1.5">
           <IconCode className="size-3.5 text-muted-foreground/60" />
-          <span className="text-[11px] font-semibold text-foreground">
+          <span className="!text-[11px] font-semibold text-foreground">
             {t("designEditor.tokens.title")}
           </span>
           {tokenCount > 0 && (
@@ -772,7 +772,7 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
         {!isLoading && groups.length === 0 && (
           <div className="flex flex-col items-center gap-2 px-4 py-8 text-center">
             <IconPalette className="size-6 text-muted-foreground/30" />
-            <p className="text-[11px] leading-snug text-muted-foreground/60">
+            <p className="!text-[11px] leading-snug text-muted-foreground/60">
               {t("designEditor.tokens.empty")}
             </p>
             <p className="text-[10px] text-muted-foreground/40">

package/corpus/templates/design/app/components/design/TweaksPanel.tsx

@@ -58,7 +58,7 @@ export function TweaksPanelContent({
       ) : (
         <div className="flex flex-col items-center gap-2 py-6 text-center">
           <IconAdjustmentsHorizontal className="size-5 text-muted-foreground/40" />
-          <p className="text-[11px] leading-snug text-muted-foreground/70">
+          <p className="!text-[11px] leading-snug text-muted-foreground/70">
             {t("designEditor.noTweakControls")}
           </p>
           {onRequestTweaks && (
@@ -66,7 +66,7 @@ export function TweaksPanelContent({
               type="button"
               variant="outline"
               size="sm"
-              className="h-6 cursor-pointer border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2.5 text-[11px] text-foreground shadow-none hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0"
+              className="h-6 cursor-pointer border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2.5 !text-[11px] text-foreground shadow-none hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0"
               onClick={(e) => onRequestTweaks(e.currentTarget)}
             >
               <IconPlus className="size-3" />
@@ -153,7 +153,7 @@ export function TweaksPanel({
             type="button"
             onMouseDown={(e) => e.stopPropagation()}
             onClick={() => setCollapsed((c) => !c)}
-            className="cursor-pointer text-[11px] font-semibold text-foreground hover:text-foreground/80"
+            className="cursor-pointer !text-[11px] font-semibold text-foreground hover:text-foreground/80"
           >
             {t("designEditor.tweaks")}
           </button>
@@ -225,7 +225,9 @@ function TweakControl({
   if (tweak.type === "toggle") {
     return (
       <div className="flex h-6 items-center justify-between gap-1.5">
-        <span className="text-[11px] text-muted-foreground">{tweak.label}</span>
+        <span className="!text-[11px] text-muted-foreground">
+          {tweak.label}
+        </span>
         <Switch
           checked={!!value}
           onCheckedChange={(checked) => onChange(checked)}
@@ -237,7 +239,7 @@ function TweakControl({
 
   return (
     <div className="space-y-1">
-      <span className="text-[11px] text-muted-foreground">{tweak.label}</span>
+      <span className="!text-[11px] text-muted-foreground">{tweak.label}</span>
 
       {((tweak.type as string) === "color-swatch" ||
         (tweak.type as string) === "color-swatches") && (
@@ -271,7 +273,7 @@ function TweakControl({
               key={opt.value}
               onClick={() => onChange(opt.value)}
               className={cn(
-                "flex flex-1 cursor-pointer items-center justify-center px-2 text-[11px] font-medium transition-colors",
+                "flex flex-1 cursor-pointer items-center justify-center px-2 !text-[11px] font-medium transition-colors",
                 value === opt.value
                   ? "bg-accent text-foreground"
                   : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
@@ -302,7 +304,7 @@ function TweakControl({
                   onValueChange={([v]) => onChange(v)}
                   className="flex-1"
                 />
-                <span className="min-w-[2ch] text-right text-[11px] tabular-nums text-muted-foreground">
+                <span className="min-w-[2ch] text-right !text-[11px] tabular-nums text-muted-foreground">
                   {sliderValue}
                   {tweak.unit ??
                     (tweak.cssVar?.toLowerCase().includes("radius")