npm - @agent-native/core - Versions diffs - 0.83.0 → 0.84.1 - Mend

@agent-native/core 0.83.0 → 0.84.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (508) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

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