@agent-native/core 0.117.1 → 0.118.0

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1926,16 +1926,6 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       if (pos.indexOf("e") !== -1) handle.style.right = "-34px";
       selectionOverlay.appendChild(handle);
     });
-    var button = document.createElement("span");
-    button.setAttribute("data-agent-native-rotate-handle", "top-center");
-    button.style.cssText =
-      "position:absolute;left:50%;transform:translateX(-50%);top:-22px;" +
-      "width:16px;height:16px;pointer-events:auto;" +
-      "display:flex;align-items:center;justify-content:center;" +
-      "border-radius:999px;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.3);" +
-      "cursor:grab;user-select:none;font-size:10px;line-height:1;color:#333;";
-    button.textContent = "↻";
-    selectionOverlay.appendChild(button);
   })();
   var spacingOverlay = document.createElement("div");
   spacingOverlay.setAttribute("data-agent-native-spacing-overlay", "");
@@ -1943,6 +1933,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     "position:absolute;inset:0;display:none;pointer-events:none;";
   selectionOverlay.appendChild(spacingOverlay);
   document.body.appendChild(selectionOverlay);
+  if (readOnly) setSelectionOverlayResizeChromeVisible(false);
 
   // ── Gradient edit overlay (in-iframe parity for MultiScreenCanvas's
   // GradientEditOverlay) ──────────────────────────────────────────────────
@@ -2179,7 +2170,21 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   ): void {
     var color = chromeColorForElement(el);
     var contrast = chromeContrastColorForElement(el);
-    overlay.style.borderColor = color;
+    var softChrome =
+      overlay.getAttribute("data-agent-native-soft-chrome") === "true";
+    overlay.style.borderColor = softChrome
+      ? "color-mix(in srgb," + color + " 64%,transparent)"
+      : color;
+    if (softChrome) {
+      overlay.style.background =
+        "color-mix(in srgb," + color + " 5%,transparent)";
+    } else if (
+      overlay === highlightOverlay ||
+      overlay.getAttribute("data-agent-native-edit-overlay") ===
+        "multi-selection"
+    ) {
+      overlay.style.background = "transparent";
+    }
     overlay
       .querySelectorAll(
         "[data-agent-native-edit-handle],[data-agent-native-edit-overlay='multi-selection-handle']",
@@ -2191,6 +2196,19 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       });
   }
 
+  function setHighlightOverlayStyle(style: "default" | "soft"): void {
+    highlightOverlayStyle = style;
+    if (style === "soft") {
+      highlightOverlay.setAttribute("data-agent-native-soft-chrome", "true");
+    } else {
+      highlightOverlay.removeAttribute("data-agent-native-soft-chrome");
+    }
+    if (hoveredEl && hoveredEl !== selectedEl) {
+      applyElementOverlayChrome(highlightOverlay, hoveredEl);
+    }
+    applyEditorChromeScale();
+  }
+
   function applySelectionChrome(el: Element | null): void {
     applyElementOverlayChrome(selectionOverlay, el);
   }
@@ -2231,6 +2249,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
 
   var selectedEl: Element | null = null;
   var hoveredEl: Element | null = null;
+  var highlightOverlayStyle: "default" | "soft" = "default";
   type NodeHtmlPreviewSession = {
     proposalId: string;
     originalElement: Element;
@@ -2526,12 +2545,17 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     scalePassiveSelectionOverlay(overlay);
   }
 
-  function makePassiveSelectionOverlay(): HTMLElement {
+  function makePassiveSelectionOverlay(style: "default" | "soft"): HTMLElement {
     var overlay = document.createElement("div");
     overlay.setAttribute("data-agent-native-edit-overlay", "multi-selection");
+    if (style === "soft") {
+      overlay.setAttribute("data-agent-native-soft-chrome", "true");
+    }
     overlay.style.cssText =
-      "position:fixed;pointer-events:none;z-index:99996;border:1.5px solid var(--design-editor-accent-color);background:transparent;display:none;box-sizing:border-box;";
-    appendPassiveSelectionHandles(overlay);
+      style === "soft"
+        ? "position:fixed;pointer-events:none;z-index:99996;border:1px solid color-mix(in srgb,var(--design-editor-accent-color) 64%,transparent);background:color-mix(in srgb,var(--design-editor-accent-color) 5%,transparent);display:none;box-sizing:border-box;"
+        : "position:fixed;pointer-events:none;z-index:99996;border:1.5px solid var(--design-editor-accent-color);background:transparent;display:none;box-sizing:border-box;";
+    if (style !== "soft") appendPassiveSelectionHandles(overlay);
     document.body.appendChild(overlay);
     return overlay;
   }
@@ -2540,7 +2564,9 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     var sx = chromeScaleX();
     var sy = chromeScaleY();
     var line = chromeLineScale();
-    overlay.style.borderWidth = 1.5 * line + "px";
+    var softChrome =
+      overlay.getAttribute("data-agent-native-soft-chrome") === "true";
+    overlay.style.borderWidth = (softChrome ? 1 : 1.5) * line + "px";
     overlay
       .querySelectorAll(
         "[data-agent-native-edit-overlay='multi-selection-handle']",
@@ -2557,7 +2583,10 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       });
   }
 
-  function setPassiveSelectionElements(elements: Element[]): void {
+  function setPassiveSelectionElements(
+    elements: Element[],
+    style: "default" | "soft" = "default",
+  ): void {
     passiveSelectionEls = elements.filter(function (el, index, all) {
       return (
         el &&
@@ -2568,7 +2597,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     });
     removePassiveSelectionOverlays();
     passiveSelectionEls.forEach(function (el) {
-      var overlay = makePassiveSelectionOverlay();
+      var overlay = makePassiveSelectionOverlay(style);
       passiveSelectionOverlays.push(overlay);
       positionOverlay(overlay, el);
     });
@@ -3939,11 +3968,10 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     var sx = chromeScaleX();
     var sy = chromeScaleY();
     var line = chromeLineScale();
-    // Figma parity: the hover outline is visibly thinner than the selection
-    // outline — hover is a light "you could select this" hint, selection is
-    // the stronger confirmed-state chrome. Matches the overview canvas's
-    // hover (1 * chromeScale) vs selection (1.5 * chromeScale) ratio.
-    highlightOverlay.style.borderWidth = 1 * line + "px";
+    // Keep hover and the corresponding selection outline visually identical.
+    // Soft responsive peers intentionally use the lighter outline treatment.
+    highlightOverlay.style.borderWidth =
+      (highlightOverlayStyle === "soft" ? 1 : 1.5) * line + "px";
     parentAutoLayoutOverlay.style.borderWidth = 1 * line + "px";
     selectionOverlay.style.borderWidth = 1.5 * line + "px";
     marqueeSelectionOverlay.style.borderWidth = 1 * line + "px";
@@ -6046,6 +6074,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startSpacingDrag(key, e) {
+    if (readOnly) return;
     if (spacingDrag) {
       stopNativeInteraction(e);
       return;
@@ -8374,6 +8403,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     gestureElParam?: Element,
     pointerStartParam?: { clientX: number; clientY: number },
   ) {
+    if (readOnly) return;
     var gestureEl = gestureElParam || selectedEl;
     if (!gestureEl) return;
     if (isLayerInteractionBlocked(gestureEl)) return;
@@ -9546,6 +9576,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startResize(handle, e) {
+    if (readOnly) return;
     if (!selectedEl) return;
     if (isLayerInteractionBlocked(selectedEl)) return;
     e.preventDefault();
@@ -9834,6 +9865,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startRotate(e) {
+    if (readOnly) return;
     if (!selectedEl) return;
     if (isLayerInteractionBlocked(selectedEl)) return;
     e.preventDefault();
@@ -9980,7 +10012,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
         shieldOverlay.setPointerCapture(e.pointerId);
       } catch (_err) {}
     }
-    if (!e.altKey) {
+    if (!readOnly && !e.altKey) {
       postCrossScreenDrag("start", dragTarget, e);
     }
     var startX = e.clientX;
@@ -10006,6 +10038,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       postElementSelect(selectedEl, ev);
     }
     function onMove(ev) {
+      if (readOnly) return;
       if (Math.hypot(ev.clientX - startX, ev.clientY - startY) <= 3) return;
       clearPendingShieldDrag();
       didStartDrag = true;
@@ -10036,7 +10069,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     function onUp(ev) {
       clearPendingShieldDrag();
       if (didStartDrag) return;
-      if (!e.altKey) {
+      if (!readOnly && !e.altKey) {
         postCrossScreenDrag("cancel");
       }
       if (ev) stopNativeInteraction(ev);
@@ -10058,6 +10091,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   selectionOverlay.addEventListener(
     "mousedown",
     function (e) {
+      if (readOnly) return;
       var spacingKey =
         e.target &&
         e.target.getAttribute &&
@@ -11164,9 +11198,13 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
         if (activeTextEditEl) {
           activeTextEditEl.blur();
         }
-        clearRuntimeSelection();
-        shieldOverlay.style.pointerEvents = "none";
+        clearPendingShieldDrag();
+        cancelActiveBridgeDrag();
+        setSelectionOverlayResizeChromeVisible(false);
+        // Keep the shield active so the viewer can select and inspect layers.
+        shieldOverlay.style.pointerEvents = "auto";
       } else {
+        setSelectionOverlayResizeChromeVisible(true);
         shieldOverlay.style.pointerEvents = "auto";
       }
       return;
@@ -11504,7 +11542,13 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
           } catch (_err) {}
         }
       });
-      setPassiveSelectionElements(passiveTargets);
+      setPassiveSelectionElements(
+        passiveTargets,
+        e.data.passiveSelectionStyle === "soft" ? "soft" : "default",
+      );
+      setHighlightOverlayStyle(
+        e.data.passiveSelectionStyle === "soft" ? "soft" : "default",
+      );
       return;
     }
     if (e.data.type === "select-element") {
@@ -11579,6 +11623,9 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       return;
     }
     if (e.data.type === "hover-element") {
+      if (e.data.hoverStyle === "soft" || e.data.hoverStyle === "default") {
+        setHighlightOverlayStyle(e.data.hoverStyle);
+      }
       var hoverCandidates: string[] = [];
       if (Array.isArray(e.data.selectorCandidates)) {
         e.data.selectorCandidates.forEach(function (selector) {

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -137,6 +137,8 @@ export interface MultiScreenCanvasProps {
   /** Lets every live frame receive native pointer interaction while the
    * overview camera and frame chrome remain available. */
   interactMode?: boolean;
+  /** Viewer mode keeps selection/inspection available without edit chrome. */
+  readOnly?: boolean;
   activeScreenHasHoveredChild?: boolean;
   hoveredChildScreenId?: string | null;
   directlyHoveredScreenId?: string | null;

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -8,14 +8,6 @@ import {
   EmbeddedApp,
   type EmbeddedAppRef,
 } from "@agent-native/core/embedding/react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@agent-native/toolkit/ui/command";
 import {
   IconApps,
   IconCheck,
@@ -33,6 +25,14 @@ import { toast } from "sonner";
 import { TemplatePreview } from "@/components/templates/TemplatePreview";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   Popover,

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

@@ -8,7 +8,7 @@ import {
   IconPencil,
   IconTemplate,
   IconPalette,
-  IconBrain,
+  IconHierarchy2,
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
@@ -32,7 +32,7 @@ const navItems = [
     labelKey: "navigation.designSystems",
     href: "/design-systems",
   },
-  { icon: IconBrain, labelKey: "navigation.agent", href: "/agent" },
+  { icon: IconHierarchy2, labelKey: "navigation.agent", href: "/agent" },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 

package/corpus/templates/design/app/components/ui/command.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/command";

package/corpus/templates/design/app/components/ui/toolkit-provider.tsx

@@ -2,11 +2,16 @@ import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
 import type { ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
 
 const components: ToolkitComponents = {
   Button: Button as ToolkitComponents["Button"],
 };
 
 export function AppToolkitProvider({ children }: { children: ReactNode }) {
-  return <ToolkitProvider components={components}>{children}</ToolkitProvider>;
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
 }

package/corpus/templates/design/app/design-system.ts

@@ -0,0 +1,3 @@
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+
+export const designSystem = defineDesignSystem({});

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

@@ -113,7 +113,7 @@
   --muted-foreground: 0 0% 60%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 96%;
-  --destructive: 0 63% 51%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -12,8 +12,8 @@ export interface NavigationState {
   designSystemId?: string;
   templateId?: string;
   editorView?: "single" | "overview";
-  inspectorTab?: "design" | "comments" | "tweaks" | "extensions";
-  inspector?: "design" | "comments" | "tweaks" | "extensions";
+  inspectorTab?: "design" | "comments" | "tweaks" | "code" | "extensions";
+  inspector?: "design" | "comments" | "tweaks" | "code" | "extensions";
   leftPanel?:
     | "file"
     | "agent"
@@ -54,8 +54,8 @@ export interface DesignEditorCommand {
   designId: string;
   editorView?: "single" | "overview";
   viewMode?: "single" | "overview";
-  inspectorTab?: "design" | "comments" | "tweaks" | "extensions";
-  inspector?: "design" | "comments" | "tweaks" | "extensions";
+  inspectorTab?: "design" | "comments" | "tweaks" | "code" | "extensions";
+  inspector?: "design" | "comments" | "tweaks" | "code" | "extensions";
   leftPanel?:
     | "file"
     | "agent"
@@ -118,10 +118,11 @@ function normalizeEditorView(
 
 function normalizeInspectorTab(
   value: unknown,
-): "design" | "comments" | "tweaks" | "extensions" | undefined {
+): "design" | "comments" | "tweaks" | "code" | "extensions" | undefined {
   return value === "design" ||
     value === "comments" ||
     value === "tweaks" ||
+    value === "code" ||
     value === "extensions"
     ? value
     : undefined;

package/corpus/templates/design/app/root.tsx

@@ -13,7 +13,7 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client/navigation";
 import { getThemeInitScript } from "@agent-native/core/client/ui";
-import { IconBrain, IconSun, IconMoon } from "@tabler/icons-react";
+import { IconHierarchy2, IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { useCallback, useState } from "react";
@@ -138,7 +138,7 @@ function DesignCommandMenu({
     >
       <CommandMenu.Group heading={t("root.commandActions")}>
         <CommandMenu.Item onSelect={() => navigate("/agent")}>
-          <IconBrain size={16} />
+          <IconHierarchy2 size={16} />
           {t("root.openAgent")}
         </CommandMenu.Item>
         <CommandMenu.Item onSelect={() => {}}>

package/corpus/templates/design/changelog/2026-07-22-design-owners-can-keep-editing-their-designs-after-switching.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Design owners can keep editing their designs after switching workspaces

package/corpus/templates/design/changelog/2026-07-22-inspector-tabs-keep-their-text-labels-at-narrow-widths.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Inspector tabs keep their text labels at narrow widths

package/corpus/templates/design/changelog/2026-07-22-manage-agent-navigation-now-uses-the-connected-nodes-icon.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Manage agent navigation now uses the connected-nodes icon.

package/corpus/templates/design/changelog/2026-07-22-narrow-breakpoint-previews-keep-their-device-labels-readable.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Narrow breakpoint previews keep their device labels readable

package/corpus/templates/design/changelog/2026-07-22-removed-the-draft-status-chip-from-the-design-editor.md

@@ -0,0 +1,6 @@
+---
+type: removed
+date: 2026-07-22
+---
+
+Removed the Draft status chip from the design editor.

package/corpus/templates/design/changelog/2026-07-22-responsive-breakpoint-controls-stay-within-narrow-sidebars.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Responsive breakpoint controls stay within narrow sidebars

package/corpus/templates/design/changelog/2026-07-22-responsive-peers-now-use-a-softer-selection-highlight-withou.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Responsive peers now use a softer selection highlight without resize handles.

package/corpus/templates/design/changelog/2026-07-22-rotate-from-context-menu.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Rotate selected elements from the canvas context menu with an instant-open menu.

package/corpus/templates/design/changelog/2026-07-22-the-selection-outline-now-stays-attached-while-moving-screen.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+The selection outline now stays attached while moving screens

package/corpus/templates/design/changelog/2026-07-22-view-only-designs-now-support-figma-style-layer-inspection-w.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+View-only designs now support Figma-style layer inspection without edit handles or drag controls

package/corpus/templates/design/server/db/index.ts

@@ -24,6 +24,10 @@ registerShareableResource({
   },
   getDb,
   publicAccessRole: publicDesignAccessRole,
+  // A design remains owned by its creator when they switch active orgs. The
+  // design URL and owner identity are the authority for this resource; org
+  // membership still scopes org visibility and explicit shares.
+  ownerAccessIgnoresOrg: true,
 });
 
 registerShareableResource({

package/corpus/templates/dispatch/.agents/skills/agent-native-toolkit/SKILL.md

@@ -47,6 +47,34 @@ Before creating an app-local version of repeated workspace or agent UI:
 Use public package exports at runtime. Published source and ejection manifests
 are discovery and ownership-transfer mechanisms, not private runtime APIs.
 
+## Design-System Boundary
+
+Every app keeps an explicit design-system seam in `app/design-system.ts` using
+`defineDesignSystem` from `@agent-native/toolkit/design-system`, and supplies it
+to `ToolkitProvider`. The semantic contract contains:
+
+- nine leaf components: `ActionButton`, `IconButton`, `TextField`, `TextArea`,
+  `Spinner`, `Skeleton`, `Status`, `Surface`, and `Avatar`
+- eight behavior components: `Tooltip`, `Menu`, `Popover`, `Dialog`, `Picker`,
+  `Checkbox`, `Switch`, and `Tabs`
+
+These are semantic contracts, not styling contracts. An adapter may use
+Tailwind/shadcn, MUI-style theme providers, React Aria, CSS modules, CSS-in-JS,
+or another React design system. Do not assume CVA, utility classes, or even a
+`className`; behavior adapters may supply their overlay and focus
+implementation wholesale while honoring portal, focus-restoration, keyboard,
+dismissal, ARIA, and z-index interoperability.
+
+Pages, routes, and domain components import ordinary controls through the app's
+local adapter layer, usually `@/components/ui/*`. They must not import
+`@agent-native/toolkit/ui/*` directly. Toolkit feature exports are still the
+right home for shared workspace behavior; their presentation flows through the
+registered semantic components, feature controller, and product-level slots.
+
+Customer adapter packages are normal npm packages imported explicitly by the
+app. Never auto-detect them or load React components from JSON. Run the adapter
+against `@agent-native/toolkit/conformance` in customer CI before adopting it.
+
 ## Settings Direction
 
 Durable settings belong in the Settings app or a registered settings route. The
@@ -59,6 +87,12 @@ quick controls and deep links such as:
 - `/settings/usage`
 - `/settings/apps/:appId`
 
+The shared Account section is the canonical profile surface at
+`/settings#account`. It owns the editable display name and existing avatar
+control through the authenticated `get-user-profile` and `update-user-profile`
+actions. Shared workspace chrome such as `OrgSwitcher` should link to this
+surface rather than creating an app-local profile page.
+
 When adding a new API key, OAuth grant, provider connection, model selector, app
 preference, notification preference, or usage/billing surface, register it as a
 settings tab or app settings panel first. Only add sidebar UI when it is needed
@@ -107,8 +141,9 @@ in the moment of agent use.
 When adding or refactoring one of these areas:
 
 1. Search existing framework and template code for duplicated UI or actions.
-2. Decide the shared contract: data shape, action API, React component/hook, and
-   app adapter points.
+2. Decide the shared contract: data shape, action API, feature-level headless
+   controller, default view, semantic components, and product-level render
+   slots.
 3. Keep shared data provider-agnostic and scoped by auth/sharing rules.
 4. Expose the same capability to the UI and agent through actions or documented
    client helpers.
@@ -119,6 +154,12 @@ When adding or refactoring one of these areas:
    ship readable source plus a complete ejection unit so apps can take ownership
    of the smallest feature when needed. See `customizing-agent-native` for the
    configure → compose → eject → propose seam ladder.
+8. Keep one controller as the source of truth for the default and custom render
+   paths. A custom design must not fork actions, analytics, async state, or
+   accessibility behavior.
+9. Verify the default adapter and at least one non-Tailwind adapter with the
+   conformance kit, including focus and portal stacking across mixed overlay
+   implementations.
 
 ## Related Skills