@agent-native/core 0.82.0 → 0.84.0

package/corpus/templates/design/shared/board-objects.ts

@@ -38,9 +38,9 @@ export interface BoardObjectEntry {
     rotation?: number;
     z?: number;
   };
-  /** CSS fill colour (background). Defaults to theme primary tint when absent. */
+  /** CSS fill colour (background). Defaults to soft neutral gray when absent. */
   fill?: string;
-  /** CSS stroke colour (border). Defaults to theme primary stroke when absent. */
+  /** CSS stroke colour (border). Defaults to darker neutral gray when absent. */
   stroke?: string;
   /** Stroke width in pixels. */
   strokeWidth?: number;

package/corpus/templates/design/shared/code-layer.ts

@@ -299,6 +299,12 @@ export type CodeLayerTreeNodeType =
   | "group"
   | "component"
   | "shape"
+  | "ellipse"
+  | "vector"
+  | "line"
+  | "arrow"
+  | "polygon"
+  | "star"
   | "text"
   | "image"
   | "element";
@@ -1668,6 +1674,22 @@ function treeTypeForNode(node: CodeLayerNode): CodeLayerTreeNodeType {
     if (primitiveKind === "text") return "text";
     if (primitiveKind === "frame") return "frame";
     if (primitiveKind === "image") return "image";
+    if (
+      primitiveKind === "ellipse" ||
+      primitiveKind === "circle" ||
+      primitiveKind === "oval"
+    ) {
+      return "ellipse";
+    }
+    // SVG-based vector primitives each get their own type so the layers panel
+    // renders a true pen/line/arrow/polygon/star icon instead of falling
+    // through to the rectangle ("shape") glyph.
+    if (primitiveKind === "path") return "vector";
+    if (primitiveKind === "line") return "line";
+    if (primitiveKind === "arrow") return "arrow";
+    if (primitiveKind === "polygon") return "polygon";
+    if (primitiveKind === "star") return "star";
+    // rectangle/rect and anything else still classify as a generic shape.
     return "shape";
   }
   if (TEXT_LAYER_TAGS.has(node.tag)) return "text";
@@ -1716,11 +1738,12 @@ function compactCodeLayerTreeNodes(
       nextAncestors,
     );
     const compactedNode: CodeLayerTreeNode = { ...node, children };
-    const promotedNodes =
-      isCollapsibleDocumentShellNode(compactedNode, nodesById) &&
-      children.length > 0
-        ? children
-        : [compactedNode];
+    const promotedNodes = isCollapsibleDocumentShellNode(
+      compactedNode,
+      nodesById,
+    )
+      ? children
+      : [compactedNode];
 
     for (const promotedNode of promotedNodes) {
       if (siblingIds.has(promotedNode.id)) continue;
@@ -1794,6 +1817,25 @@ function capabilitiesFor(element: ParsedElement): EditCapability[] {
   return capabilities;
 }
 
+// Internal nodes of an <svg> (the <path>/<polygon>/<circle>/... geometry) are
+// rendering primitives, never selectable design layers. Projecting them adds a
+// meaningless expandable child to every pen vector / line / arrow / polygon /
+// star (and to any inline SVG icon). Treat the <svg> as a leaf: skip everything
+// that has an <svg> ancestor.
+function hasSvgAncestor(
+  element: ParsedElement,
+  elements: ParsedElement[],
+): boolean {
+  let parentIndex = element.parentIndex;
+  while (parentIndex !== undefined) {
+    const parent = elements[parentIndex];
+    if (!parent) break;
+    if (parent.tag === "svg") return true;
+    parentIndex = parent.parentIndex;
+  }
+  return false;
+}
+
 function buildProjection(
   html: string,
   source: CodeLayerSource,
@@ -1808,6 +1850,7 @@ function buildProjection(
 
   for (const element of elements) {
     if (NON_VISUAL_TAGS.has(element.tag)) continue;
+    if (hasSvgAncestor(element, elements)) continue;
     const nodeId = nodeIdFor(element, elements, source);
     nodeIdByElementIndex.set(element.index, nodeId);
   }
@@ -2038,9 +2081,10 @@ export function buildCodeLayerTree(
   const treeById = new Map<string, CodeLayerTreeNode>();
 
   for (const node of projection.nodes) {
+    const componentName = node.componentInstance?.name;
     treeById.set(node.id, {
       id: node.id,
-      name: node.layerName,
+      name: componentName ?? node.layerName,
       type: treeTypeForNode(node),
       tag: node.tag,
       selector: node.selector,

package/corpus/templates/design/shared/motion-compiler.ts

@@ -166,6 +166,33 @@ export function extractManagedMotionCss(html: string): string | null {
   return afterOpen.slice(0, closeMatch.index).trim();
 }
 
+/**
+ * Inject or replace the managed `<style data-agent-native-motion>` block in an
+ * HTML document. Inserts before `</head>` when no managed block exists, or at
+ * the top of the document when there is no `<head>`.
+ */
+export function injectManagedMotionCss(html: string, css: string): string {
+  const openRe = /<style\b(?=[^>]*\bdata-agent-native-motion\b)[^>]*>/i;
+  const openMatch = openRe.exec(html);
+  const block = `<style data-agent-native-motion>\n${css}\n</style>`;
+
+  if (openMatch) {
+    const bodyStart = openMatch.index + openMatch[0].length;
+    const afterOpen = html.slice(bodyStart);
+    const closeMatch = /<\s*\/\s*style\b[^>]*>/i.exec(afterOpen);
+    if (closeMatch) {
+      const closeEnd = bodyStart + closeMatch.index + closeMatch[0].length;
+      return html.slice(0, openMatch.index) + block + html.slice(closeEnd);
+    }
+  }
+
+  const headClose = html.lastIndexOf("</head>");
+  if (headClose !== -1) {
+    return html.slice(0, headClose) + block + "\n" + html.slice(headClose);
+  }
+  return block + "\n" + html;
+}
+
 /**
  * Return the djb2 hash of a CSS string — useful for verifying stored
  * `compiled_hash` values without re-compiling a full timeline.

package/corpus/templates/macros/app/components/DailyProgress.tsx

@@ -5,6 +5,7 @@ import {
   IconChartBar,
 } from "@tabler/icons-react";
 import { subDays } from "date-fns";
+import type { CSSProperties } from "react";
 import { useState, useEffect } from "react";
 import { Link } from "react-router";
 import {
@@ -56,6 +57,15 @@ interface DailyProgressProps {
   fat: number;
 }
 
+const chartTooltipContentStyle = {
+  backgroundColor: "hsl(var(--popover))",
+  border: "1px solid hsl(var(--border))",
+  borderRadius: "8px",
+  boxShadow: "0 4px 12px hsl(var(--foreground) / 0.12)",
+  color: "hsl(var(--popover-foreground))",
+  fontSize: "12px",
+} satisfies CSSProperties;
+
 export function DailyProgress({
   totalCalories,
   totalBurnedCalories,
@@ -105,7 +115,7 @@ export function DailyProgress({
   };
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.02] p-4 sm:p-5 backdrop-blur-sm">
+    <div className="relative overflow-hidden rounded-2xl border border-border bg-card p-4 sm:p-5">
       <div className="macros-summary-grid">
         {/* Left Side */}
         <div className="space-y-8 flex flex-col justify-center">
@@ -115,7 +125,7 @@ export function DailyProgress({
                 {t("daily.summary")}
               </p>
             </div>
-            <div className="px-3 py-1.5 rounded-full bg-white/[0.05] border border-white/[0.05] flex items-center">
+            <div className="px-3 py-1.5 rounded-full bg-muted/40 border border-border flex items-center">
               <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-widest leading-none">
                 {t("daily.goalWithValue", { value: goalCalories })}
               </span>
@@ -174,7 +184,7 @@ export function DailyProgress({
                 </span>
               </div>
             </div>
-            <div className="h-1.5 bg-white/[0.06] rounded-full overflow-hidden">
+            <div className="h-1.5 bg-muted rounded-full overflow-hidden">
               <div
                 className={cn(
                   "h-full transition-all duration-500 ease-out rounded-full",
@@ -194,7 +204,7 @@ export function DailyProgress({
               ].map((m) => (
                 <div
                   key={m.label}
-                  className="p-2.5 sm:p-3 rounded-xl bg-white/[0.03] border border-white/[0.04]"
+                  className="p-2.5 sm:p-3 rounded-xl bg-muted/30 border border-border"
                 >
                   <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1">
                     {m.label}
@@ -209,14 +219,14 @@ export function DailyProgress({
         </div>
 
         {/* Right Side: Charts */}
-        <div className="macros-summary-chart border-l border-white/[0.08] pl-8 flex-col justify-center transition-all duration-300">
+        <div className="macros-summary-chart border-l border-border pl-8 flex-col justify-center transition-all duration-300">
           <Tabs
             value={activeChart}
             onValueChange={setActiveChart}
             className="flex flex-col space-y-6"
           >
             <div className="flex items-center justify-between">
-              <TabsList className="bg-white/[0.04] border border-white/[0.08] h-8">
+              <TabsList className="bg-muted/40 border border-border h-8">
                 <TabsTrigger
                   value="weight"
                   className="gap-2 text-[10px] uppercase tracking-wider h-6 px-3"
@@ -237,7 +247,7 @@ export function DailyProgress({
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-8 px-2.5 text-[10px] uppercase tracking-widest text-muted-foreground/50 hover:text-foreground hover:bg-white/5 gap-2"
+                        className="h-8 px-2.5 text-[10px] uppercase tracking-widest text-muted-foreground/50 hover:text-foreground hover:bg-accent gap-2"
                       >
                         {t("daily.last30Days")}{" "}
                         <IconChartBar className="h-3.5 w-3.5" />
@@ -246,7 +256,7 @@ export function DailyProgress({
                   </TooltipTrigger>
                   <TooltipContent
                     side="bottom"
-                    className="bg-zinc-900 border-white/10 text-[10px] uppercase tracking-widest py-1.5 px-3"
+                    className="bg-popover border-border text-popover-foreground text-[10px] uppercase tracking-widest py-1.5 px-3"
                   >
                     {t("daily.viewFullAnalytics")}
                   </TooltipContent>
@@ -260,7 +270,7 @@ export function DailyProgress({
             >
               <div className="h-[140px] w-full">
                 {weightLoading ? (
-                  <Skeleton className="h-full w-full rounded-xl bg-white/[0.02]" />
+                  <Skeleton className="h-full w-full rounded-xl bg-muted" />
                 ) : weightHistory.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <LineChart
@@ -273,15 +283,10 @@ export function DailyProgress({
                         hide
                       />
                       <ChartTooltip
-                        contentStyle={{
-                          backgroundColor: "#09090b",
-                          border: "1px solid rgba(255,255,255,0.1)",
-                          borderRadius: "8px",
-                          boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-                          fontSize: "12px",
-                          color: "#fff",
+                        contentStyle={chartTooltipContentStyle}
+                        cursor={{
+                          stroke: "hsl(var(--muted-foreground) / 0.25)",
                         }}
-                        cursor={{ stroke: "rgba(255,255,255,0.1)" }}
                         formatter={(value: any, name: any) => [
                           `${value} lbs`,
                           name === "trendWeight"
@@ -292,34 +297,34 @@ export function DailyProgress({
                       <Line
                         type="monotone"
                         dataKey="weight"
-                        stroke="rgba(255,255,255,0.2)"
+                        stroke="hsl(var(--muted-foreground) / 0.35)"
                         strokeWidth={1}
                         dot={{
-                          fill: "rgba(255,255,255,0.2)",
+                          fill: "hsl(var(--muted-foreground) / 0.35)",
                           r: 2,
                         }}
                         activeDot={{
                           r: 4,
                           strokeWidth: 0,
-                          fill: "#fff",
+                          fill: "hsl(var(--foreground))",
                         }}
                       />
                       <Line
                         type="monotone"
                         dataKey="trendWeight"
-                        stroke="#fff"
+                        stroke="hsl(var(--foreground))"
                         strokeWidth={2}
                         dot={false}
                         activeDot={{
                           r: 4,
                           strokeWidth: 0,
-                          fill: "#fff",
+                          fill: "hsl(var(--foreground))",
                         }}
                       />
                     </LineChart>
                   </ResponsiveContainer>
                 ) : (
-                  <div className="h-full flex items-center justify-center border border-dashed border-white/[0.06] rounded-xl">
+                  <div className="h-full flex items-center justify-center border border-dashed border-border rounded-xl">
                     <p className="text-xs text-muted-foreground">
                       {t("daily.noWeightData")}
                     </p>
@@ -341,7 +346,7 @@ export function DailyProgress({
             >
               <div className="h-[140px] w-full">
                 {calorieLoading ? (
-                  <Skeleton className="h-full w-full rounded-xl bg-white/[0.02]" />
+                  <Skeleton className="h-full w-full rounded-xl bg-muted" />
                 ) : calorieHistory.length > 0 ? (
                   <ResponsiveContainer width="100%" height="100%">
                     <AreaChart
@@ -358,10 +363,14 @@ export function DailyProgress({
                         >
                           <stop
                             offset="5%"
-                            stopColor="#fff"
+                            stopColor="hsl(var(--foreground))"
                             stopOpacity={0.1}
                           />
-                          <stop offset="95%" stopColor="#fff" stopOpacity={0} />
+                          <stop
+                            offset="95%"
+                            stopColor="hsl(var(--foreground))"
+                            stopOpacity={0}
+                          />
                         </linearGradient>
                       </defs>
                       <XAxis dataKey="displayDate" hide />
@@ -370,15 +379,10 @@ export function DailyProgress({
                         hide
                       />
                       <ChartTooltip
-                        contentStyle={{
-                          backgroundColor: "#09090b",
-                          border: "1px solid rgba(255,255,255,0.1)",
-                          borderRadius: "8px",
-                          boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-                          fontSize: "12px",
-                          color: "#fff",
+                        contentStyle={chartTooltipContentStyle}
+                        cursor={{
+                          stroke: "hsl(var(--muted-foreground) / 0.25)",
                         }}
-                        cursor={{ stroke: "rgba(255,255,255,0.1)" }}
                         formatter={(value: any) => [
                           `${value} kcal`,
                           t("daily.netCalories"),
@@ -387,20 +391,20 @@ export function DailyProgress({
                       <Area
                         type="monotone"
                         dataKey="netCalories"
-                        stroke="#fff"
+                        stroke="hsl(var(--foreground))"
                         strokeWidth={2}
                         fillOpacity={1}
                         fill="url(#colorNet)"
                         activeDot={{
                           r: 4,
                           strokeWidth: 0,
-                          fill: "#fff",
+                          fill: "hsl(var(--foreground))",
                         }}
                       />
                     </AreaChart>
                   </ResponsiveContainer>
                 ) : (
-                  <div className="h-full flex items-center justify-center border border-dashed border-white/[0.06] rounded-xl">
+                  <div className="h-full flex items-center justify-center border border-dashed border-border rounded-xl">
                     <p className="text-xs text-muted-foreground">
                       {t("daily.noActivityData")}
                     </p>

package/corpus/templates/macros/app/components/ExerciseCard.tsx

@@ -26,7 +26,7 @@ export function ExerciseCard({
 }: ExerciseCardProps) {
   const t = useT();
   return (
-    <div className="group relative flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-xl bg-white/[0.02] border border-white/[0.08] hover:bg-white/[0.04] overflow-hidden">
+    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
       <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-orange-500/10 border border-orange-500/20">
         <IconFlame className="h-4 w-4 text-orange-400" />
       </div>
@@ -59,7 +59,7 @@ export function ExerciseCard({
               variant="ghost"
               size="icon"
               aria-label={t("common.editNamed", { name: exercise.name })}
-              className="h-9 w-9 md:h-7 md:w-7 text-muted-foreground/50 hover:text-foreground hover:bg-white/5"
+              className="h-9 w-9 text-muted-foreground/50 hover:bg-accent hover:text-foreground md:h-7 md:w-7"
               onClick={() => onEdit(exercise)}
             >
               <IconPencil className="h-4 w-4 md:h-3.5 md:w-3.5" />

package/corpus/templates/macros/app/components/MealCard.tsx

@@ -26,7 +26,7 @@ export function MealCard({
 }: MealCardProps) {
   const t = useT();
   return (
-    <div className="group relative flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-xl bg-white/[0.02] border border-white/[0.08] hover:bg-white/[0.04] overflow-hidden">
+    <div className="group relative flex items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
       <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
         <IconToolsKitchen2 className="h-4 w-4 text-emerald-400" />
       </div>
@@ -65,7 +65,7 @@ export function MealCard({
               variant="ghost"
               size="icon"
               aria-label={t("common.editNamed", { name: meal.name })}
-              className="h-9 w-9 md:h-7 md:w-7 text-muted-foreground/50 hover:text-foreground hover:bg-white/5"
+              className="h-9 w-9 text-muted-foreground/50 hover:bg-accent hover:text-foreground md:h-7 md:w-7"
               onClick={() => onEdit(meal)}
             >
               <IconPencil className="h-4 w-4 md:h-3.5 md:w-3.5" />

package/corpus/templates/macros/app/components/VoiceDictation.tsx

@@ -193,7 +193,7 @@ export function VoiceDictation({ currentDate }: VoiceDictationProps) {
     >
       {(state === "listening" || state === "processing") && (
         <div className="animate-in fade-in slide-in-from-bottom-2 duration-200">
-          <div className="bg-card/95 backdrop-blur-xl border border-white/10 rounded-2xl px-4 py-3 shadow-2xl max-w-[300px] md:max-w-[250px]">
+          <div className="max-w-[300px] rounded-2xl border border-border bg-card/95 px-4 py-3 shadow-2xl backdrop-blur-xl md:max-w-[250px]">
             {state === "listening" && (
               <div className="flex items-center gap-2">
                 <div className="flex gap-1">

package/corpus/templates/macros/app/components/WeeklyCaloriesChart.tsx

@@ -261,7 +261,7 @@ export function WeeklyCaloriesChart({
           />
           <Tooltip
             content={<CustomTooltip t={t} />}
-            cursor={{ fill: "rgba(255,255,255,0.03)" }}
+            cursor={{ fill: "hsl(var(--muted) / 0.5)" }}
           />
           <ReferenceLine
             y={weeklyGoal}

package/corpus/templates/macros/app/components/WeightCard.tsx

@@ -40,7 +40,7 @@ export function WeightCard({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   return (
-    <div className="group relative flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-xl bg-white/[0.02] border border-white/[0.08] hover:bg-white/[0.04]">
+    <div className="group relative flex items-center gap-3 rounded-xl border border-border bg-card p-3 hover:bg-accent/40 sm:gap-4 sm:p-4">
       <div className="flex items-center justify-center w-9 h-9 shrink-0 rounded-lg bg-blue-500/10 border border-blue-500/20">
         <IconScale className="h-4 w-4 text-blue-400" />
       </div>
@@ -71,7 +71,7 @@ export function WeightCard({
               aria-label={t("weight.editWeightLabel", {
                 weight: weight.weight,
               })}
-              className="h-9 w-9 md:h-7 md:w-7 text-muted-foreground/50 hover:text-foreground hover:bg-white/5"
+              className="h-9 w-9 text-muted-foreground/50 hover:bg-accent hover:text-foreground md:h-7 md:w-7"
               onClick={() => onEdit(weight)}
             >
               <IconPencil className="h-4 w-4 md:h-3.5 md:w-3.5" />

package/corpus/templates/macros/app/components/WeightTracker.tsx

@@ -73,7 +73,7 @@ export function WeightTracker({ currentDate }: WeightTrackerProps) {
         {isLoading && !hasOptimisticRows ? (
           <Skeleton className="h-16 w-full rounded-xl" />
         ) : !todayWeight ? (
-          <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-white/[0.02] border border-dashed border-white/[0.06]">
+          <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-muted/30 py-12 text-center">
             <div className="p-3 rounded-full bg-blue-500/10 mb-3">
               <IconScale className="h-5 w-5 text-blue-500/50" />
             </div>

package/corpus/templates/macros/app/components/layout/AppLayout.tsx

@@ -335,7 +335,7 @@ function SyncIndicator({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
   return (
     <div
       className={cn(
-        "pointer-events-none fixed bottom-10 start-4 z-50 flex h-8 items-center gap-2 rounded-full border border-white/[0.06] bg-muted/80 px-3 text-xs text-muted-foreground shadow-sm backdrop-blur-sm md:bottom-8",
+        "pointer-events-none fixed bottom-10 start-4 z-50 flex h-8 items-center gap-2 rounded-full border border-border bg-muted/80 px-3 text-xs text-muted-foreground shadow-sm backdrop-blur-sm md:bottom-8",
         sidebarCollapsed
           ? "md:start-[calc(3.5rem+1rem)]"
           : "md:start-[calc(14rem+1rem)]",

package/corpus/templates/macros/app/routes/_index.tsx

@@ -129,12 +129,12 @@ export default function IndexPage() {
           <Button
             variant="ghost"
             size="icon"
-            className="h-11 w-11 sm:h-8 sm:w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/5"
+            className="h-11 w-11 sm:h-8 sm:w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-accent"
             onClick={() => setDate(subDays(date, 1))}
           >
             <IconChevronLeft className="h-5 w-5 sm:h-4 sm:w-4 rtl:-scale-x-100" />
           </Button>
-          <div className="min-w-[140px] sm:min-w-[160px] text-center px-3 sm:px-4 py-2 rounded-full bg-white/[0.03] border border-white/[0.06]">
+          <div className="min-w-[140px] sm:min-w-[160px] text-center px-3 sm:px-4 py-2 rounded-full bg-card border border-border">
             <span className="text-sm font-medium text-foreground">
               {isSameDay(date, new Date())
                 ? t("entry.today")
@@ -144,7 +144,7 @@ export default function IndexPage() {
           <Button
             variant="ghost"
             size="icon"
-            className="h-11 w-11 sm:h-8 sm:w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/5 disabled:opacity-30"
+            className="h-11 w-11 sm:h-8 sm:w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-accent disabled:opacity-30"
             onClick={() => setDate(addDays(date, 1))}
             disabled={isSameDay(date, new Date())}
           >
@@ -197,7 +197,7 @@ export default function IndexPage() {
                   <Skeleton className="h-16 w-full rounded-xl" />
                 </>
               ) : meals.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-white/[0.02] border border-dashed border-white/[0.06]">
+                <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-card border border-dashed border-border">
                   <div className="p-3 rounded-full bg-emerald-500/10 mb-3">
                     <IconToolsKitchen2 className="h-5 w-5 text-emerald-500/50" />
                   </div>
@@ -255,7 +255,7 @@ export default function IndexPage() {
               {exercisesLoading && !hasOptimisticExercises ? (
                 <Skeleton className="h-16 w-full rounded-xl" />
               ) : exercises.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-white/[0.02] border border-dashed border-white/[0.06]">
+                <div className="flex flex-col items-center justify-center py-12 text-center rounded-2xl bg-card border border-dashed border-border">
                   <div className="p-3 rounded-full bg-orange-500/10 mb-3">
                     <IconBarbell className="h-5 w-5 text-orange-500/50" />
                   </div>

package/corpus/templates/macros/app/routes/analytics.tsx

@@ -54,7 +54,7 @@ export default function AnalyticsPage() {
         <IconCalendar className="w-3.5 h-3.5 me-1.5 sm:me-2 opacity-50" />
         <SelectValue placeholder={t("analytics.selectRange")} />
       </SelectTrigger>
-      <SelectContent className="bg-zinc-900 border-white/10">
+      <SelectContent className="bg-popover border-border text-popover-foreground">
         <SelectItem value="7">
           {t("analytics.lastDays", { count: 7 })}
         </SelectItem>

package/corpus/templates/macros/changelog/2026-06-30-dashboard-loading-and-chart-surfaces-now-use-theme-aware-col.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Dashboard loading and chart surfaces now use theme-aware colors in light and dark mode.

package/corpus/templates/mail/app/components/email/ComposeBubbleToolbar.tsx

@@ -306,11 +306,11 @@ export function ComposeBubbleToolbar({
                 setLinkUrl("");
               }
             }}
-            className="bg-transparent border-none outline-none text-white text-sm w-48 px-1 py-0.5 placeholder:text-gray-400"
+            className="bg-transparent border-none outline-none text-popover-foreground text-sm w-48 px-1 py-0.5 placeholder:text-muted-foreground"
           />
           <button
             onClick={handleSetLink}
-            className="text-xs text-blue-400 hover:text-blue-300 px-1.5 py-0.5 font-medium"
+            className="text-xs text-primary hover:text-primary/80 px-1.5 py-0.5 font-medium"
           >
             {t("mail.compose.apply")}
           </button>
@@ -319,8 +319,11 @@ export function ComposeBubbleToolbar({
         <div className="flex items-center gap-1 px-1">
           {isGenerating ? (
             <>
-              <IconLoader2 size={14} className="animate-spin text-gray-400" />
-              <span className="text-xs text-gray-400 px-1">
+              <IconLoader2
+                size={14}
+                className="animate-spin text-muted-foreground"
+              />
+              <span className="text-xs text-muted-foreground px-1">
                 {t("mail.compose.generating")}
               </span>
             </>
@@ -344,13 +347,13 @@ export function ComposeBubbleToolbar({
                     setAiPrompt("");
                   }
                 }}
-                className="bg-transparent border-none outline-none text-white text-sm w-52 px-1 py-0.5 placeholder:text-gray-400 resize-none leading-snug"
+                className="bg-transparent border-none outline-none text-popover-foreground text-sm w-52 px-1 py-0.5 placeholder:text-muted-foreground resize-none leading-snug"
               />
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
                     onClick={() => void handleAiAssist()}
-                    className="text-xs text-blue-400 hover:text-blue-300 px-1.5 py-0.5 font-medium shrink-0 self-end pb-1"
+                    className="text-xs text-primary hover:text-primary/80 px-1.5 py-0.5 font-medium shrink-0 self-end pb-1"
                   >
                     {t("mail.compose.generate")}
                   </button>
@@ -369,7 +372,7 @@ export function ComposeBubbleToolbar({
           {items.map((item, i) => {
             if ("type" in item && item.type === "divider") {
               return (
-                <div key={`d-${i}`} className="w-px h-5 bg-gray-600 mx-0.5" />
+                <div key={`d-${i}`} className="w-px h-5 bg-border mx-0.5" />
               );
             }
             const {
@@ -391,8 +394,8 @@ export function ComposeBubbleToolbar({
                     className={cn(
                       "p-1.5 rounded transition-colors",
                       active
-                        ? "bg-gray-600 text-white"
-                        : "text-gray-300 hover:bg-gray-700 hover:text-white",
+                        ? "bg-accent text-accent-foreground"
+                        : "text-popover-foreground/75 hover:bg-accent hover:text-accent-foreground",
                     )}
                   >
                     <Icon size={14} strokeWidth={2.5} />
@@ -402,7 +405,7 @@ export function ComposeBubbleToolbar({
               </Tooltip>
             );
           })}
-          <div className="w-px h-5 bg-gray-600 mx-0.5" />
+          <div className="w-px h-5 bg-border mx-0.5" />
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -412,7 +415,7 @@ export function ComposeBubbleToolbar({
                   setShowAiInput(true);
                   setShowLinkInput(false);
                 }}
-                className="p-1.5 rounded transition-colors text-gray-300 hover:bg-gray-700 hover:text-white"
+                className="p-1.5 rounded transition-colors text-popover-foreground/75 hover:bg-accent hover:text-accent-foreground"
               >
                 <IconPencil size={14} strokeWidth={2.5} />
               </button>

package/corpus/templates/mail/app/global.css

@@ -525,12 +525,13 @@
 .bubble-toolbar {
   display: flex;
   align-items: center;
-  background: hsl(0 0% 15%);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
   border-radius: 8px;
   padding: 4px;
   box-shadow:
     0 4px 20px rgb(0 0 0 / 0.25),
-    0 0 0 1px rgb(255 255 255 / 0.06);
+    0 0 0 1px hsl(var(--border));
 }
 
 /* ===== Slash Command Menu ===== */

package/corpus/templates/mail/changelog/2026-06-30-compose-floating-toolbars-now-use-theme-aware-colors-in-ligh.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Compose floating toolbars now use theme-aware colors in light and dark mode.