@agent-native/core 0.83.0 → 0.84.0

package/corpus/core/src/styles/rich-markdown-editor.css

@@ -333,11 +333,12 @@
   display: flex;
   align-items: center;
   border-radius: 6px;
-  background: hsl(0 0% 15%);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
   padding: 3px;
   box-shadow:
     0 4px 16px rgb(0 0 0 / 0.25),
-    0 0 0 1px rgb(255 255 255 / 0.06);
+    0 0 0 1px hsl(var(--border));
 }
 
 .an-rich-md-bubble-items,
@@ -351,7 +352,7 @@
   padding: 3px 6px;
   border-radius: 4px;
   font-size: 12px;
-  color: rgb(255 255 255 / 0.76);
+  color: hsl(var(--popover-foreground) / 0.76);
   background: none;
   border: none;
   cursor: pointer;
@@ -359,20 +360,20 @@
 }
 
 .an-rich-md-bubble-button:hover {
-  background: rgb(255 255 255 / 0.12);
-  color: white;
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
 }
 
 .an-rich-md-bubble-button--active {
-  background: rgb(255 255 255 / 0.18);
-  color: white;
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
 }
 
 .an-rich-md-bubble-divider {
   width: 1px;
   height: 16px;
   margin: 0 2px;
-  background: rgb(255 255 255 / 0.2);
+  background: hsl(var(--border));
 }
 
 .an-rich-md-link-editor {
@@ -384,7 +385,7 @@
   border: none;
   outline: none;
   background: transparent;
-  color: white;
+  color: hsl(var(--popover-foreground));
   font-size: 12px;
   padding: 2px 4px;
 }
@@ -392,7 +393,7 @@
 .an-rich-md-link-editor button {
   border: none;
   background: none;
-  color: #60a5fa;
+  color: hsl(var(--primary));
   cursor: pointer;
   font-size: 11px;
   font-weight: 500;

package/corpus/templates/analytics/app/components/dashboard/CumulativeNetChart.tsx

@@ -12,6 +12,11 @@ import {
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  chartAxisStroke,
+  chartGridStroke,
+  chartTooltipContentStyle,
+} from "@/lib/chart-theme";
 
 interface CumulativeNetChartProps {
   title: string;
@@ -78,14 +83,14 @@ export function CumulativeNetChart({
                 </defs>
                 <XAxis
                   dataKey="day"
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
                   tickFormatter={formatDate}
                 />
                 <YAxis
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
@@ -93,17 +98,12 @@ export function CumulativeNetChart({
                 />
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="#27272a"
+                  stroke={chartGridStroke}
                   vertical={false}
                 />
-                <ReferenceLine y={0} stroke="#52525b" strokeWidth={1} />
+                <ReferenceLine y={0} stroke={chartAxisStroke} strokeWidth={1} />
                 <Tooltip
-                  contentStyle={{
-                    backgroundColor: "#09090b",
-                    border: "1px solid #27272a",
-                    borderRadius: "8px",
-                    color: "#fafafa",
-                  }}
+                  contentStyle={chartTooltipContentStyle}
                   labelFormatter={formatDate}
                   formatter={(value: any) => [
                     `$${Number(value).toLocaleString(undefined, { maximumFractionDigits: 0 })}`,

package/corpus/templates/analytics/app/components/dashboard/RevenueChart.tsx

@@ -10,6 +10,11 @@ import {
 } from "recharts";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  chartAxisStroke,
+  chartGridStroke,
+  chartTooltipContentStyle,
+} from "@/lib/chart-theme";
 
 const data = [
   { name: "Jan", total: 1200 },
@@ -49,13 +54,13 @@ export function RevenueChart() {
               </defs>
               <XAxis
                 dataKey="name"
-                stroke="#52525b"
+                stroke={chartAxisStroke}
                 fontSize={12}
                 tickLine={false}
                 axisLine={false}
               />
               <YAxis
-                stroke="#52525b"
+                stroke={chartAxisStroke}
                 fontSize={12}
                 tickLine={false}
                 axisLine={false}
@@ -63,17 +68,12 @@ export function RevenueChart() {
               />
               <CartesianGrid
                 strokeDasharray="3 3"
-                stroke="#27272a"
+                stroke={chartGridStroke}
                 vertical={false}
               />
               <Tooltip
-                contentStyle={{
-                  backgroundColor: "#09090b",
-                  border: "1px solid #27272a",
-                  borderRadius: "8px",
-                  color: "#fafafa",
-                }}
-                itemStyle={{ color: "#38bdf8" }}
+                contentStyle={chartTooltipContentStyle}
+                itemStyle={{ color: "var(--brand-blue)" }}
               />
               <Area
                 type="monotone"

package/corpus/templates/analytics/app/components/dashboard/RevenueComparisonChart.tsx

@@ -14,6 +14,7 @@ import {
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import { chartAxisStroke, chartGridStroke } from "@/lib/chart-theme";
 
 interface RevenueComparisonChartProps {
   title: string;
@@ -42,7 +43,7 @@ const formatDate = (value: string) => {
 function CustomTooltip({ active, payload, label }: any) {
   if (!active || !payload?.length) return null;
   return (
-    <div className="rounded-lg border border-border bg-[#09090b] px-3 py-2 text-xs text-foreground shadow-lg">
+    <div className="rounded-lg border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-lg">
       <p className="mb-1 font-medium">{formatDate(label)}</p>
       {payload.map((entry: any) => (
         <p
@@ -94,19 +95,19 @@ export function RevenueComparisonChart({
               <ComposedChart data={chartData}>
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="#27272a"
+                  stroke={chartGridStroke}
                   vertical={false}
                 />
                 <XAxis
                   dataKey="day"
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
                   tickFormatter={formatDate}
                 />
                 <YAxis
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
@@ -116,7 +117,7 @@ export function RevenueComparisonChart({
                     return `$${v}`;
                   }}
                 />
-                <ReferenceLine y={0} stroke="#52525b" strokeWidth={1} />
+                <ReferenceLine y={0} stroke={chartAxisStroke} strokeWidth={1} />
                 <Tooltip content={<CustomTooltip />} />
                 <Legend
                   wrapperStyle={{ fontSize: "12px", paddingTop: "8px" }}

package/corpus/templates/analytics/app/components/dashboard/TimeSeriesChart.tsx

@@ -11,6 +11,11 @@ import {
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  chartAxisStroke,
+  chartGridStroke,
+  chartTooltipContentStyle,
+} from "@/lib/chart-theme";
 
 interface TimeSeriesChartProps {
   title: string;
@@ -75,14 +80,14 @@ export function TimeSeriesChart({
                 </defs>
                 <XAxis
                   dataKey={xKey}
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
                   tickFormatter={formatXLabel}
                 />
                 <YAxis
-                  stroke="#52525b"
+                  stroke={chartAxisStroke}
                   fontSize={12}
                   tickLine={false}
                   axisLine={false}
@@ -90,16 +95,11 @@ export function TimeSeriesChart({
                 />
                 <CartesianGrid
                   strokeDasharray="3 3"
-                  stroke="#27272a"
+                  stroke={chartGridStroke}
                   vertical={false}
                 />
                 <Tooltip
-                  contentStyle={{
-                    backgroundColor: "#09090b",
-                    border: "1px solid #27272a",
-                    borderRadius: "8px",
-                    color: "#fafafa",
-                  }}
+                  contentStyle={chartTooltipContentStyle}
                   labelFormatter={formatXLabel}
                 />
                 <Area

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

@@ -191,6 +191,10 @@
   overflow: visible;
 }
 
+.analytics-chat-panel .agent-composer-area--hero {
+  padding-inline: 1rem;
+}
+
 .analytics-chat-panel [data-agent-empty-state="centered"] .agent-composer-area {
   width: 100%;
   max-width: min(760px, 90%);

package/corpus/templates/analytics/app/lib/chart-theme.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from "react";
+
+export const chartAxisStroke = "hsl(var(--muted-foreground))";
+export const chartGridStroke = "hsl(var(--border))";
+export const chartTooltipCursorStroke = "hsl(var(--muted-foreground) / 0.25)";
+export const chartTooltipCursorFill = "hsl(var(--muted) / 0.5)";
+
+export const chartTooltipContentStyle = {
+  backgroundColor: "hsl(var(--popover))",
+  border: "1px solid hsl(var(--border))",
+  borderRadius: "8px",
+  color: "hsl(var(--popover-foreground))",
+} satisfies CSSProperties;

package/corpus/templates/analytics/app/pages/adhoc/_shared/KpiChart.tsx

@@ -24,6 +24,13 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {
+  chartAxisStroke,
+  chartGridStroke,
+  chartTooltipContentStyle,
+  chartTooltipCursorFill,
+  chartTooltipCursorStroke,
+} from "@/lib/chart-theme";
 
 import { formatDate } from "./format";
 
@@ -122,31 +129,28 @@ export function KpiChart({
                 <BarChart data={data}>
                   <CartesianGrid
                     strokeDasharray="3 3"
-                    stroke="#27272a"
+                    stroke={chartGridStroke}
                     vertical={false}
                   />
                   <XAxis
                     dataKey="period"
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatDate}
                   />
                   <YAxis
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatY}
                   />
                   <Tooltip
-                    cursor={{ fill: "rgba(255,255,255,0.06)" }}
+                    cursor={{ fill: chartTooltipCursorFill }}
                     contentStyle={{
-                      backgroundColor: "#09090b",
-                      border: "1px solid #27272a",
-                      borderRadius: "8px",
-                      color: "#fafafa",
+                      ...chartTooltipContentStyle,
                       fontSize: "12px",
                     }}
                     labelFormatter={formatDate}
@@ -172,31 +176,28 @@ export function KpiChart({
                 <LineChart data={data}>
                   <CartesianGrid
                     strokeDasharray="3 3"
-                    stroke="#27272a"
+                    stroke={chartGridStroke}
                     vertical={false}
                   />
                   <XAxis
                     dataKey="period"
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatDate}
                   />
                   <YAxis
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatY}
                   />
                   <Tooltip
-                    cursor={{ stroke: "rgba(255,255,255,0.15)" }}
+                    cursor={{ stroke: chartTooltipCursorStroke }}
                     contentStyle={{
-                      backgroundColor: "#09090b",
-                      border: "1px solid #27272a",
-                      borderRadius: "8px",
-                      color: "#fafafa",
+                      ...chartTooltipContentStyle,
                       fontSize: "12px",
                     }}
                     labelFormatter={formatDate}
@@ -240,31 +241,28 @@ export function KpiChart({
                   </defs>
                   <CartesianGrid
                     strokeDasharray="3 3"
-                    stroke="#27272a"
+                    stroke={chartGridStroke}
                     vertical={false}
                   />
                   <XAxis
                     dataKey="period"
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatDate}
                   />
                   <YAxis
-                    stroke="#52525b"
+                    stroke={chartAxisStroke}
                     fontSize={11}
                     tickLine={false}
                     axisLine={false}
                     tickFormatter={formatY}
                   />
                   <Tooltip
-                    cursor={{ stroke: "rgba(255,255,255,0.15)" }}
+                    cursor={{ stroke: chartTooltipCursorStroke }}
                     contentStyle={{
-                      backgroundColor: "#09090b",
-                      border: "1px solid #27272a",
-                      borderRadius: "8px",
-                      color: "#fafafa",
+                      ...chartTooltipContentStyle,
                       fontSize: "12px",
                     }}
                     labelFormatter={formatDate}

package/corpus/templates/analytics/changelog/2026-06-30-dashboard-charts-now-use-theme-aware-tooltip-and-grid-colors.md

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

package/corpus/templates/analytics/changelog/2026-06-30-fixed-ask-composer-spacing-so-the-chat-field-has-a-comfortab.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Fixed Ask composer spacing so the chat field has a comfortable side inset.

package/corpus/templates/calendar/AGENTS.md

@@ -12,6 +12,10 @@ Detailed event, availability, booking, storage, and UI rules live in
 - Never hardcode API keys, tokens, webhook URLs, signing secrets, private Builder/internal data, customer data, or credential-looking literals. Use secrets/OAuth/runtime configuration and obvious placeholders in examples.
 - Use actions for events, availability, booking links, settings, navigation,
   Google Calendar connection, and sharing. Do not bypass app access checks.
+- Use `connect-google-calendar` when the user asks to connect or reconnect
+  Google Calendar. Return its link to the user; do not `fetch`
+  `/_agent-native/google/auth-url` from the agent backend because that route
+  requires the signed-in browser session.
 - In dev, call actions with `pnpm action <name>`; in production, use native
   tools. The action schema is authoritative.
 - Use the current date from runtime context, not a visible calendar date, when

package/corpus/templates/calendar/actions/connect-google-calendar.ts

@@ -0,0 +1,80 @@
+import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server";
+import { z } from "zod";
+
+const CONNECT_PATH = "/_agent-native/google/auth-url";
+const ADD_ACCOUNT_PATH = "/_agent-native/google/add-account/auth-url";
+
+function normalizeReturnPath(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+  try {
+    const url = new URL(value, "https://calendar.agent-native.local");
+    if (url.origin !== "https://calendar.agent-native.local") {
+      return undefined;
+    }
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return undefined;
+  }
+}
+
+export default defineAction({
+  description:
+    "Create a user-clickable Google Calendar OAuth link. Use this when the user asks to connect or reconnect Google Calendar. Do not fetch the returned URL as an API; the signed-in user must open it in their browser.",
+  schema: z.object({
+    addAccount: z
+      .boolean()
+      .optional()
+      .describe(
+        "Use true only when adding another Google Calendar account to an already connected Calendar workspace.",
+      ),
+    returnPath: z
+      .string()
+      .optional()
+      .describe(
+        "Optional same-origin Calendar path to return to after the Google OAuth flow.",
+      ),
+  }),
+  http: { method: "GET" },
+  readOnly: true,
+  parallelSafe: true,
+  run: async (args) => {
+    const owner = getRequestUserEmail();
+    if (!owner) {
+      throw new Error("Sign in to Calendar before connecting Google Calendar.");
+    }
+
+    const path = args.addAccount ? ADD_ACCOUNT_PATH : CONNECT_PATH;
+    const params = new URLSearchParams({ redirect: "1" });
+    if (!args.addAccount) params.set("calendar", "1");
+
+    const returnPath = normalizeReturnPath(args.returnPath);
+    if (returnPath) params.set("return", returnPath);
+
+    const url = `${path}?${params.toString()}`;
+    const label = args.addAccount
+      ? "Add Google Calendar account"
+      : "Connect Google Calendar";
+    return {
+      provider: "google_calendar",
+      url,
+      label,
+      markdown: `[${label}](${url})`,
+      message:
+        "Open this link in the signed-in Calendar browser session to connect Google Calendar. Do not fetch it from the agent backend.",
+      requiresUserGesture: true,
+    };
+  },
+  link: ({ result }) => {
+    const url =
+      result && typeof result === "object"
+        ? (result as { url?: unknown }).url
+        : null;
+    if (typeof url !== "string" || !url) return null;
+    return {
+      url,
+      label: "Connect Google Calendar",
+      view: "settings",
+    };
+  },
+});

package/corpus/templates/calendar/changelog/2026-06-30-calendar-now-gives-the-agent-a-safe-google-connection-link-i.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-30
+---
+
+Calendar now gives the agent a safe Google connection link instead of surfacing a raw auth error.

package/corpus/templates/calendar/server/plugins/agent-chat.ts

@@ -70,6 +70,7 @@ const INITIAL_TOOL_NAMES = [
   "find-a-time",
   "search-people",
   "navigate",
+  "connect-google-calendar",
   "list-booking-links",
   "create-booking-link",
   "update-booking-link",
@@ -111,6 +112,7 @@ Provider-specific Calendar actions are shortcuts, not limits. If a first-class a
 - \`pnpm action navigate --view=calendar --date=YYYY-MM-DD\` — Navigate to a specific date
 - \`pnpm action navigate --view=availability\` — Show availability settings
 - \`pnpm action navigate --view=booking-links\` — Show booking links
+- \`pnpm action connect-google-calendar\` — Create a user-clickable Google Calendar OAuth link. Use this when the user asks to connect or reconnect Google Calendar. Do not fetch \`/_agent-native/google/auth-url\` yourself; OAuth must be opened by the signed-in user in their browser.
 - \`pnpm action update-calendar-visual-preferences --colorMode multi\` — Color the local app UI by meeting type without modifying Google Calendar events
 - \`pnpm action update-calendar-visual-preferences --colorMode single --singleColor '#5B9BD5'\` — Use one local display color for the user's Google events
 - \`pnpm action check-availability --date YYYY-MM-DD --duration 60\` — Check free slots
@@ -125,6 +127,8 @@ Use \`create-event\` or \`update-event --colorId 1..11\` when the user wants one
 ## Google Connection Check
 Before answering schedule questions, run view-screen first for context, then use list-events for the requested date range even if the user is currently on Settings, Booking Links, or another non-calendar page. Do not infer a Google Calendar connection problem just because the current page is Settings. Only ask the user to reconnect Google if list-events or the explicit Google status reports an auth/connection error.
 
+When the user explicitly asks you to connect or reconnect Google Calendar, call \`connect-google-calendar\` and give them the returned link. Do not call raw HTTP/fetch/web-request against \`/_agent-native/google/auth-url\`; that route depends on the user's browser session and will return 401 from the agent backend.
+
 For relationship-history or frequency questions such as "who have I met at Adobe?" or "how often do I meet with Mattel?", prefer the raw Google Calendar API through provider-api-request so you can choose the exact timeMin/timeMax, q, calendarId, maxResults, and pageToken behavior. Stage large paginated results before analysis. Do not conclude there are no recurring meetings from the visible range or from a convenience action alone.
 
 ## Context Awareness

package/corpus/templates/content/app/components/editor/BubbleToolbar.tsx

@@ -301,11 +301,11 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                 setLinkUrl("");
               }
             }}
-            className="bg-transparent border-none outline-none text-white text-sm w-40 sm:w-48 px-1 py-1 placeholder:text-gray-400"
+            className="bg-transparent border-none outline-none text-popover-foreground text-sm w-40 sm:w-48 px-1 py-1 placeholder:text-muted-foreground"
           />
           <button
             onClick={handleSetLink}
-            className="text-xs text-blue-400 hover:text-blue-300 px-2 py-1.5 font-medium"
+            className="text-xs text-primary hover:text-primary/80 px-2 py-1.5 font-medium"
           >
             {t("editor.apply")}
           </button>
@@ -318,7 +318,7 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
           {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 {
@@ -340,8 +340,8 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                     className={cn(
                       "p-2 rounded",
                       isActive()
-                        ? "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={16} strokeWidth={2.5} />

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

@@ -1537,10 +1537,10 @@ audio.media-block__content {
   flex-direction: column;
   gap: 0.18rem;
   max-width: 22rem;
-  border: 0;
+  border: 1px solid hsl(var(--border));
   border-radius: 8px;
-  background: hsl(0 0% 15%);
-  color: white;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
   padding: 0.6rem 0.75rem;
   box-shadow: 0 10px 24px hsl(0 0% 0% / 0.22);
 }
@@ -2218,12 +2218,13 @@ audio.media-block__content {
 .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));
 }
 
 /* ===== Inline comment highlights ===== */

package/corpus/templates/content/changelog/2026-06-30-editor-floating-toolbars-now-use-theme-aware-colors-in-light.md

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

package/corpus/templates/design/.agents/skills/visual-edit/SKILL.md

@@ -65,9 +65,14 @@ For one-shot agent setup, ask for JSON and keep the long-running bridge open in
 a second terminal if the user needs live updates:
 
 ```bash
-npx @agent-native/core@latest design connect --url http://localhost:5173 --root . --json
+npx @agent-native/core@latest design connect --url http://localhost:5173 --root .
+curl http://127.0.0.1:7331/manifest.json
 ```
 
+Do not use `--json` for an editable session. `--json`, `--once`, and
+`--dry-run` print the manifest and exit, so Design will fall back to a
+non-editable live iframe as soon as it tries to refresh the snapshot.
+
 ## Action Flow
 
 1. Register or refresh the bridge in Design: