@agent-native/core 0.168.10 → 0.168.12

package/corpus/templates/clips/desktop/src/tailwind.css

@@ -0,0 +1,282 @@
+/**
+ * Tailwind + shadcn/ui for the Clips tray app.
+ *
+ * Deliberately imports `theme` and `utilities` but NOT `preflight`. The tray
+ * predates this layer: `styles.css` hand-styles every overlay (pill, bubble,
+ * toolbar, countdown, onboarding) against unreset browser defaults, so
+ * preflight's reset would silently break all of them. Surfaces move onto
+ * Tailwind one at a time; when the last hand-written rule is gone, swap these
+ * two imports for plain `@import "tailwindcss"` and delete this comment.
+ */
+/* Layer order decides who wins, and it has to be declared before the imports.
+   `styles.css` is unlayered CSS, and unlayered always beats a layer — including
+   bare element rules like `button { font-size: inherit }`, which would quietly
+   defeat every `text-sm` on a shadcn Button. Pulling it into `legacy` puts it
+   below `utilities` so Tailwind can do its job, while keeping the tray's own
+   cascade intact for the surfaces still using it. */
+@layer legacy, theme, utilities;
+
+@import "./styles.css" layer(legacy);
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "tw-animate-css";
+
+@source "./**/*.{ts,tsx}";
+
+/**
+ * The parts of preflight a Tailwind-era surface cannot live without, scoped to
+ * subtrees marked `data-tw-surface` so the hand-written tray surfaces keep the
+ * UA defaults their CSS was written against.
+ *
+ * Every rule here exists because a shadcn component assumes preflight already
+ * ran. Skipping it cost us, in order: phantom UA margins under headings, the
+ * native grey `ButtonFace` box behind `ghost` variants, `currentColor` borders
+ * painting black instead of a hairline, and icons riding ~2px high because an
+ * un-reset `svg` is an inline box on a text baseline. If a shadcn primitive
+ * looks subtly wrong here, suspect this list before editing the primitive.
+ *
+ * In `theme` so every utility still wins. Portaled shadcn content (popover and
+ * select) carries the attribute itself, since it renders outside the subtree.
+ */
+@layer theme {
+  [data-tw-surface] :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote) {
+    margin: 0;
+  }
+
+  /* Icons are laid out as boxes, not as glyphs on a baseline. Without this an
+     `svg` stays `display: inline` and sits ~2px above the centre of whatever
+     flex row is meant to be centring it — visible on every checkmark, chevron,
+     and button icon. */
+  [data-tw-surface] :is(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+
+  /* Tailwind's `border` utility sets width only — preflight is what gives every
+     element a default border COLOR. Without it a bare `border` (shadcn's
+     popover and select content, among others) falls back to `currentColor` and
+     paints a hard near-black rule instead of a hairline. */
+  [data-tw-surface],
+  [data-tw-surface] *,
+  [data-tw-surface] *::before,
+  [data-tw-surface] *::after {
+    border-color: hsl(var(--ui-border));
+  }
+
+  [data-tw-surface] :is(button, input, optgroup, select, textarea) {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  [data-tw-surface] :is(button, [role="button"]) {
+    cursor: pointer;
+  }
+
+  [data-tw-surface] :is(button, input, select, textarea):disabled {
+    cursor: not-allowed;
+  }
+
+  [data-tw-surface] :is(input, textarea)::placeholder {
+    color: hsl(var(--ui-muted-foreground));
+    opacity: 1;
+  }
+
+  /* The remainder of preflight, ported in one pass rather than discovered one
+     bug at a time. Headings keep UA size/weight without this, lists keep their
+     markers and indent, links keep browser blue — each of which would read as
+     a broken shadcn component rather than a missing reset. */
+  [data-tw-surface] :is(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  [data-tw-surface] :is(dl, dd, hr, pre, fieldset, legend) {
+    margin: 0;
+    padding: 0;
+  }
+
+  [data-tw-surface] :is(ol, ul, menu) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  [data-tw-surface] a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  [data-tw-surface] :is(code, kbd, samp, pre) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 1em;
+  }
+
+  [data-tw-surface] hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  [data-tw-surface] table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  [data-tw-surface] :is(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  [data-tw-surface] textarea {
+    resize: vertical;
+  }
+
+  [data-tw-surface] summary {
+    display: list-item;
+  }
+
+  [data-tw-surface] [hidden]:not([hidden="until-found"]) {
+    display: none !important;
+  }
+}
+
+/* The tray follows the OS, so dark mode is a media query rather than the web
+   app's `.dark` class. Both resolve the same token names. */
+@custom-variant dark (@media (prefers-color-scheme: dark));
+
+/**
+ * shadcn/ui semantic tokens, expressed as HSL triplets as in the web app's
+ * `app/global.css` so a primitive copied between the two renders the same.
+ * The values are the tray's own palette — a menu-bar window sits on the
+ * desktop, not on a page, so it stays slightly darker and flatter than web.
+ *
+ * Every token is `--ui-`-prefixed because this block is UNLAYERED and legacy
+ * `styles.css` (layered) defines full-color tokens under the bare names —
+ * an unprefixed `--border: 0 0% 90%` here would beat legacy's full-color
+ * `--border` and expand its 27 `var(--border)` borders to an invalid
+ * color. Only tailwind.css maps these into Tailwind's namespace.
+ */
+:root {
+  --ui-background: 0 0% 100%;
+  --ui-foreground: 0 0% 9%;
+  --ui-card: 0 0% 100%;
+  --ui-card-foreground: 0 0% 9%;
+  --ui-popover: 0 0% 100%;
+  --ui-popover-foreground: 0 0% 9%;
+  --ui-primary: 0 0% 10%;
+  --ui-primary-foreground: 0 0% 100%;
+  --ui-secondary: 0 0% 97%;
+  --ui-secondary-foreground: 0 0% 10%;
+  --ui-muted: 0 0% 96%;
+  --ui-muted-foreground: 0 0% 45%;
+  --ui-accent: 0 0% 94%;
+  --ui-accent-foreground: 0 0% 10%;
+  --ui-destructive: 0 72% 51%;
+  --ui-destructive-foreground: 0 0% 98%;
+  --ui-border: 0 0% 90%;
+  --ui-input: 0 0% 87%;
+  --ui-ring: 0 0% 40%;
+  /* macOS convention for an engaged switch, and the one accent the tray uses. */
+  --ui-success: 142 71% 45%;
+  /* Reserved for "there is something new here" — the Settings dot, nothing else. */
+  --ui-info: 217 91% 55%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ui-background: 0 0% 13%;
+    --ui-foreground: 0 0% 96%;
+    --ui-card: 0 0% 15%;
+    --ui-card-foreground: 0 0% 96%;
+    --ui-popover: 0 0% 15%;
+    --ui-popover-foreground: 0 0% 96%;
+    --ui-primary: 0 0% 96%;
+    --ui-primary-foreground: 0 0% 10%;
+    --ui-secondary: 0 0% 18%;
+    --ui-secondary-foreground: 0 0% 96%;
+    --ui-muted: 0 0% 16%;
+    --ui-muted-foreground: 0 0% 64%;
+    --ui-accent: 0 0% 20%;
+    --ui-accent-foreground: 0 0% 96%;
+    --ui-destructive: 0 72% 58%;
+    --ui-destructive-foreground: 0 0% 98%;
+    --ui-border: 0 0% 24%;
+    --ui-input: 0 0% 32%;
+    --ui-ring: 0 0% 60%;
+    --ui-success: 142 60% 52%;
+    --ui-info: 217 91% 65%;
+  }
+}
+
+@theme inline {
+  /**
+   * Absolute, not rem. The tray sets `:root { font-size: 13px }`, so every
+   * rem-based Tailwind scale silently computed ~19% small against it —
+   * `text-xs` landed at 9.75px and `h-8` at 26px, which is what made control
+   * typography look off next to the px-based rest of the app. Pinning these to
+   * px makes the utility scale mean the same thing here as in the web app.
+   */
+  --spacing: 4px;
+  /* Softer than shadcn's 8px default: a 32px-tall control wants ~10px to read
+     as the rounded pill the rest of this product uses. */
+  --radius: 10px;
+
+  /* One scale, anchored on the tray's 13px baseline. `text-base` is body copy,
+     `text-sm` is every in-row control, `text-xs` is the grounding line. */
+  --text-2xs: 10px;
+  --text-2xs--line-height: 1.4;
+  --text-xs: 11px;
+  --text-xs--line-height: 1.45;
+  --text-sm: 12px;
+  --text-sm--line-height: 1.4;
+  --text-base: 13px;
+  --text-base--line-height: 1.45;
+  --text-lg: 15px;
+  --text-lg--line-height: 1.35;
+  --text-xl: 17px;
+  --text-xl--line-height: 1.3;
+  --text-2xl: 20px;
+  --text-2xl--line-height: 1.2;
+
+  --color-border: hsl(var(--ui-border));
+  --color-input: hsl(var(--ui-input));
+  --color-ring: hsl(var(--ui-ring));
+  --color-background: hsl(var(--ui-background));
+  --color-foreground: hsl(var(--ui-foreground));
+
+  --color-primary: hsl(var(--ui-primary));
+  --color-primary-foreground: hsl(var(--ui-primary-foreground));
+
+  --color-secondary: hsl(var(--ui-secondary));
+  --color-secondary-foreground: hsl(var(--ui-secondary-foreground));
+
+  --color-destructive: hsl(var(--ui-destructive));
+  --color-destructive-foreground: hsl(var(--ui-destructive-foreground));
+
+  --color-muted: hsl(var(--ui-muted));
+  --color-muted-foreground: hsl(var(--ui-muted-foreground));
+
+  --color-accent: hsl(var(--ui-accent));
+  --color-accent-foreground: hsl(var(--ui-accent-foreground));
+
+  --color-popover: hsl(var(--ui-popover));
+  --color-popover-foreground: hsl(var(--ui-popover-foreground));
+
+  --color-card: hsl(var(--ui-card));
+  --color-card-foreground: hsl(var(--ui-card-foreground));
+
+  --color-success: hsl(var(--ui-success));
+  --color-info: hsl(var(--ui-info));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}

package/corpus/templates/clips/desktop/tsconfig.json

@@ -12,7 +12,10 @@
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]

package/corpus/templates/clips/desktop/vite.config.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
@@ -77,7 +78,12 @@ function resolveSentryEnvironment(): string {
 //   still picks up `.rs` / `tauri.conf.json` / `capabilities/*.json`
 //   changes and rebuilds the app.
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": resolve(root, "src"),
+    },
+  },
   clearScreen: false,
   define: {
     __CLIPS_DESKTOP_SENTRY_DSN__: JSON.stringify(resolveSentryDsn()),

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -48,26 +48,51 @@ export function useOpenMobileSidebar() {
 const BARE_PREFIXES = ["/present/"];
 
 /**
- * Routes where the page renders its own toolbar instead of the global Header.
- * The Header is hidden so the page can supply richer custom chrome (e.g.
- * DesignEditor mode/zoom/device, shared ExtensionViewer / ExtensionsListPage
- * chrome). The editor owns its agent surface inside its Figma-style left rail.
+ * Routes where the page renders its own toolbar instead of the global Header
+ * on a standalone page. Embedded app surfaces keep the global shell so the
+ * host-provided chat rail can still be reopened from the app header.
  */
 const EDITOR_PREFIXES = ["/design/", "/visual-edit/", "/extensions"];
 
+type DesignLayoutMode = "host-bare" | "standalone-editor" | "app-shell";
+
+function resolveDesignLayoutMode(input: {
+  builderHostEmbed: boolean;
+  embedded: boolean;
+  hasSession: boolean;
+  isDesignEditor: boolean;
+}): DesignLayoutMode {
+  if (
+    input.builderHostEmbed ||
+    (input.isDesignEditor && !input.hasSession && !input.embedded)
+  ) {
+    return "host-bare";
+  }
+  if (input.isDesignEditor && !input.embedded) return "standalone-editor";
+  return "app-shell";
+}
+
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
   const t = useT();
   const { session } = useSession();
   const hasSession = Boolean(session?.email);
+  const builderHostEmbed = isBuilderHostEmbed();
   // The shell canvas is embedded without a session, so this cannot be the token
   // check alone or it renders Design's own nav inside Builder.
-  const embedded = isBuilderHostEmbed() || isEmbedAuthActive();
+  const embedded = builderHostEmbed || isEmbedAuthActive();
   useNavigationState(hasSession);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
   const isDesignEditor = isDesignEditorRoute(location.pathname);
-  const showMobileTopBar = !isDesignEditor;
+  const layoutMode = resolveDesignLayoutMode({
+    builderHostEmbed,
+    embedded,
+    hasSession,
+    isDesignEditor,
+  });
+  const standaloneEditor = layoutMode === "standalone-editor";
+  const showMobileTopBar = !standaloneEditor;
   const browserTabId = getBrowserTabId();
   const {
     link: detectedFigmaComposerLink,
@@ -109,11 +134,10 @@ export function Layout({ children }: LayoutProps) {
     return <>{children}</>;
   }
 
-  const hideHeader = EDITOR_PREFIXES.some((p) =>
-    location.pathname.startsWith(p),
-  );
+  const hideHeader =
+    !embedded && EDITOR_PREFIXES.some((p) => location.pathname.startsWith(p));
 
-  if (embedded || (isDesignEditor && !hasSession)) {
+  if (layoutMode === "host-bare") {
     return (
       <HeaderActionsProvider>
         <MobileSidebarContext.Provider value={null}>
@@ -132,7 +156,7 @@ export function Layout({ children }: LayoutProps) {
     );
   }
 
-  if (isDesignEditor) {
+  if (layoutMode === "standalone-editor") {
     return (
       <HeaderActionsProvider>
         <MobileSidebarContext.Provider value={null}>
@@ -151,7 +175,7 @@ export function Layout({ children }: LayoutProps) {
   return (
     <HeaderActionsProvider>
       <MobileSidebarContext.Provider
-        value={isDesignEditor ? null : openMobileSidebar}
+        value={standaloneEditor ? null : openMobileSidebar}
       >
         <AgentSidebar
           position="right"
@@ -178,13 +202,13 @@ export function Layout({ children }: LayoutProps) {
           }
         >
           <div className="agent-layout-shell flex h-dvh w-full overflow-hidden bg-background text-foreground">
-            {!isDesignEditor && mobileSidebarOpen && (
+            {!standaloneEditor && mobileSidebarOpen && (
               <div
                 className="fixed inset-0 z-40 bg-black/50 md:hidden"
                 onClick={() => setMobileSidebarOpen(false)}
               />
             )}
-            {!isDesignEditor && (
+            {!standaloneEditor && (
               <div
                 className={cn(
                   "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none motion-reduce:transition-none",

package/dist/collab/awareness.d.ts

@@ -62,11 +62,11 @@ export declare const postAwareness: import("h3").EventHandlerWithFetch<import("h
     error: string;
     states?: undefined;
 } | {
+    error?: undefined;
     states: {
         clientId: number;
         state: string;
     }[];
-    error?: undefined;
 }>>;
 /**
  * GET /_agent-native/collab/:docId/users
@@ -77,9 +77,9 @@ export declare const getActiveUsers: import("h3").EventHandlerWithFetch<import("
     error: string;
     users?: undefined;
 } | {
+    error?: undefined;
     users: {
         clientId: number;
         lastSeen: number;
     }[];
-    error?: undefined;
 }>>;

package/dist/collab/routes.d.ts

@@ -26,8 +26,8 @@ export declare const getCollabState: import("h3").EventHandlerWithFetch<import("
  * Body: { update: string (base64), requestSource?: string }
  */
 export declare const postCollabUpdate: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/notifications/routes.d.ts

@@ -11,14 +11,14 @@
  *   DELETE /_agent-native/notifications/:id         — delete
  */
 export declare function createNotificationsHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<"" | import("./types.js").Notification[] | {
+    error?: undefined;
     count: number;
     updated?: undefined;
-    error?: undefined;
     ok?: undefined;
 } | {
+    error?: undefined;
     count?: undefined;
     updated: number;
-    error?: undefined;
     ok?: undefined;
 } | {
     count?: undefined;
@@ -26,8 +26,8 @@ export declare function createNotificationsHandler(): import("h3").EventHandlerW
     error: string;
     ok?: undefined;
 } | {
+    error?: undefined;
     count?: undefined;
     updated?: undefined;
-    error?: undefined;
     ok: boolean;
 }>>;

package/dist/progress/routes.d.ts

@@ -15,6 +15,6 @@ export declare function createProgressHandler(): import("h3").EventHandlerWithFe
     error: string;
     ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
+    error?: undefined;
 }>>;

package/dist/resources/handlers.d.ts

@@ -48,8 +48,8 @@ export declare function handleUpdateResource(event: any): Promise<import("./stor
 }>;
 /** DELETE /_agent-native/resources/:id — delete a resource */
 export declare function handleDeleteResource(event: any): Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/server/action-routes.js

@@ -1,4 +1,4 @@
-import { createError, defineEventHandler, setResponseStatus, setResponseHeader, getMethod, getQuery, getHeader, getRequestURL, } from "h3";
+import { createError, defineEventHandler, setResponseStatus, setResponseHeader, getMethod, getQuery, getHeader, } from "h3";
 import { verifyA2ATokenWithClaims } from "../a2a-claims.js";
 import { isActionContractError, isAgentActionStopError } from "../action.js";
 import { isTransientDatabaseError } from "../db/client.js";
@@ -15,6 +15,7 @@ import { getAllowedCorsOrigin as resolveAllowedCorsOrigin, readCorsAllowedOrigin
 import { resolveEmbedSessionFromRequest, resolvedEmbedCapabilityScope, } from "./embed-session.js";
 import { getHttpRequestTelemetryId } from "./http-response-telemetry.js";
 import { consumeOneTimeJti } from "./identity-sso-store.js";
+import { getForwardedRequestOrigin } from "./request-origin.js";
 function requiredClientCompatibilityVersion() {
     const configured = typeof __AGENT_NATIVE_CLIENT_COMPATIBILITY_VERSION__ === "string"
         ? __AGENT_NATIVE_CLIENT_COMPATIBILITY_VERSION__
@@ -410,7 +411,7 @@ export function mountActionRoutes(nitroApp, actions, options) {
                 timezone,
                 browserSessionId,
                 clientPlatform,
-                requestOrigin: getRequestURL(event).origin,
+                requestOrigin: getForwardedRequestOrigin(event),
                 // Captured here because this is the last layer that still holds
                 // the h3 event; everything below reads it off the request store.
                 isLoopbackRequest: isLoopbackRequest(event),

package/dist/server/request-origin.d.ts

@@ -1,4 +1,10 @@
 import { type H3Event } from "h3";
+/**
+ * Browser-visible origin from proxy-forwarded headers. Unlike `getOrigin()`,
+ * this ignores OAuth callback and configured-public-origin overrides so action
+ * CSRF checks match the Referer the browser actually sent.
+ */
+export declare function getForwardedRequestOrigin(event: H3Event): string;
 /**
  * Reject cross-site POSTs. Cookies are `SameSite=None; Secure` over HTTPS so
  * the browser would otherwise attach the session to a forged form submission

package/dist/server/request-origin.js

@@ -1,4 +1,16 @@
 import { getRequestHeader } from "h3";
+/**
+ * Browser-visible origin from proxy-forwarded headers. Unlike `getOrigin()`,
+ * this ignores OAuth callback and configured-public-origin overrides so action
+ * CSRF checks match the Referer the browser actually sent.
+ */
+export function getForwardedRequestOrigin(event) {
+    const headerHost = getRequestHeader(event, "x-forwarded-host") ||
+        getRequestHeader(event, "host");
+    const isProd = process.env.NODE_ENV === "production";
+    const headerProto = getRequestHeader(event, "x-forwarded-proto") || (isProd ? "https" : "http");
+    return `${headerProto}://${headerHost ?? "localhost"}`;
+}
 function isLoopbackHost(host) {
     return host.startsWith("localhost:") || host.startsWith("127.0.0.1:");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.168.10",
+  "version": "0.168.12",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {