@agent-native/core 0.79.27 → 0.80.0

package/corpus/templates/design/shared/shader-safety.ts

@@ -0,0 +1,137 @@
+/**
+ * shader-safety.ts
+ *
+ * Pure utility helpers for the GPU shader-effects feature.
+ * No imports from @paper-design/shaders-react — safe to use anywhere.
+ */
+
+// ---------------------------------------------------------------------------
+// Reduced-motion detection
+// ---------------------------------------------------------------------------
+
+/**
+ * Check if the user prefers reduced motion.
+ * Safe to call SSR (returns false on the server).
+ */
+export function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// ---------------------------------------------------------------------------
+// WebGL availability check (memoized)
+// ---------------------------------------------------------------------------
+
+let _webGLAvailable: boolean | null = null;
+
+/**
+ * Check if WebGL is available in the current browser environment.
+ * Safe to call SSR (returns false on the server).
+ * Result is cached after the first call.
+ */
+export function isWebGLAvailable(): boolean {
+  if (typeof window === "undefined") return false;
+  if (_webGLAvailable !== null) return _webGLAvailable;
+
+  try {
+    const canvas = document.createElement("canvas");
+    const ctx =
+      canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    _webGLAvailable = ctx !== null;
+  } catch {
+    _webGLAvailable = false;
+  }
+
+  return _webGLAvailable;
+}
+
+// ---------------------------------------------------------------------------
+// Per-artboard WebGL context counter
+// ---------------------------------------------------------------------------
+
+/**
+ * Browsers support ~8-16 WebGL contexts per page; we cap at this value per
+ * artboard to stay well within that limit.
+ */
+export const MAX_SHADERS_PER_ARTBOARD = 5;
+
+const _shaderCounts = new Map<string, number>();
+
+/**
+ * Register a shader instance for an artboard.
+ * Returns true if the instance is within budget, false if over limit.
+ */
+export function registerShaderInstance(artboardId: string): boolean {
+  const current = _shaderCounts.get(artboardId) ?? 0;
+  const next = current + 1;
+  _shaderCounts.set(artboardId, next);
+  return next <= MAX_SHADERS_PER_ARTBOARD;
+}
+
+/**
+ * Unregister a shader instance when the component unmounts.
+ */
+export function unregisterShaderInstance(artboardId: string): void {
+  const current = _shaderCounts.get(artboardId) ?? 0;
+  const next = Math.max(0, current - 1);
+  if (next === 0) {
+    _shaderCounts.delete(artboardId);
+  } else {
+    _shaderCounts.set(artboardId, next);
+  }
+}
+
+/**
+ * Get current shader instance count for an artboard.
+ */
+export function getShaderCount(artboardId: string): number {
+  return _shaderCounts.get(artboardId) ?? 0;
+}
+
+// ---------------------------------------------------------------------------
+// Fallback CSS gradient
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a fallback CSS linear-gradient from a colors array.
+ * Used when WebGL is unavailable or the context limit is hit.
+ *
+ * Examples:
+ *   buildFallbackGradient(["#e0eaff", "#241d9a", "#f75092"])
+ *   → "linear-gradient(135deg, #e0eaff, #241d9a, #f75092)"
+ *
+ *   buildFallbackGradient(["#241d9a"], "#e0eaff")
+ *   → "linear-gradient(135deg, #e0eaff, #241d9a)"
+ *
+ *   buildFallbackGradient(["#241d9a"])
+ *   → "#241d9a"
+ */
+export function buildFallbackGradient(
+  colors: string[],
+  colorBack?: string,
+): string {
+  const stops = colorBack ? [colorBack, ...colors] : [...colors];
+
+  if (stops.length === 1) {
+    return stops[0];
+  }
+
+  return `linear-gradient(135deg, ${stops.join(", ")})`;
+}
+
+// ---------------------------------------------------------------------------
+// Speed resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the effective animation speed.
+ * Returns 0 if the user prefers reduced motion or animated is false.
+ * NOT a React hook — just a pure function.
+ */
+export function resolveShaderSpeed(
+  requestedSpeed: number,
+  animated: boolean,
+): number {
+  if (!animated || prefersReducedMotion()) return 0;
+  return requestedSpeed;
+}

package/corpus/templates/design/shared/source-mode.ts

@@ -0,0 +1,237 @@
+export const DESIGN_SOURCE_TYPES = ["inline", "localhost", "fusion"] as const;
+
+export type DesignSourceType = (typeof DESIGN_SOURCE_TYPES)[number];
+
+export const DESIGN_BRIDGE_OPERATIONS = [
+  "select",
+  "resolveNodeToFile",
+  "readFile",
+  "applyEdit",
+  "writeFile",
+  "captureSnapshot",
+  "captureState",
+] as const;
+
+export type DesignBridgeOperation = (typeof DESIGN_BRIDGE_OPERATIONS)[number];
+
+export type DesignBridgeOperationStatus = "available" | "planned" | "disabled";
+
+export interface DesignBridgeCapability {
+  operation: DesignBridgeOperation;
+  status: DesignBridgeOperationStatus;
+  reason?: string;
+}
+
+export interface LocalhostDesignRoute {
+  id: string;
+  path: string;
+  title: string;
+  sourceFile?: string;
+  sourceKind?: "react-router" | "html" | "manual";
+  screenshotUrl?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface LocalhostDesignRouteManifest {
+  version: 1;
+  sourceType: "localhost";
+  devServerUrl: string;
+  rootPath?: string;
+  routes: LocalhostDesignRoute[];
+  generatedAt: string;
+}
+
+export interface LocalhostDesignConnectionConfig {
+  id: string;
+  sourceType: "localhost";
+  name: string;
+  devServerUrl: string;
+  bridgeUrl?: string;
+  rootPath?: string;
+  routeManifest: LocalhostDesignRouteManifest;
+  capabilities: DesignBridgeCapability[];
+  status: "connected" | "detected" | "manual" | "error";
+  lastSeenAt?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface InlineDesignSource {
+  sourceType: "inline";
+  designId?: string;
+  fileId?: string;
+  filename?: string;
+  revision?: string;
+}
+
+export interface LocalhostDesignSource {
+  sourceType: "localhost";
+  connectionId: string;
+  routeId?: string;
+  path?: string;
+  url?: string;
+  bridgeUrl?: string;
+  revision?: string;
+}
+
+export interface FusionDesignSource {
+  sourceType: "fusion";
+  externalId?: string;
+  url?: string;
+  revision?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export type DesignSourceDescriptor =
+  | InlineDesignSource
+  | LocalhostDesignSource
+  | FusionDesignSource;
+
+export interface FlowCanvasSnapshotRef {
+  id: string;
+  sourceType: DesignSourceType;
+  capturedAt: string;
+  imageUrl?: string;
+  stateUrl?: string;
+  contentHash?: string;
+  width?: number;
+  height?: number;
+}
+
+export interface FlowCanvasArtboard {
+  id: string;
+  title: string;
+  sourceType: DesignSourceType;
+  source: DesignSourceDescriptor;
+  routeId?: string;
+  path?: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  snapshot?: FlowCanvasSnapshotRef;
+  metadata?: Record<string, unknown>;
+}
+
+export interface FlowCanvasEdge {
+  id: string;
+  fromArtboardId: string;
+  toArtboardId: string;
+  trigger?: string;
+  derivedFrom?: {
+    operation: "captureState" | "captureSnapshot" | "manual";
+    sourceNodeId?: string;
+    selector?: string;
+  };
+  metadata?: Record<string, unknown>;
+}
+
+export type DesignBridgeRequest =
+  | {
+      operation: "select";
+      source: DesignSourceDescriptor;
+      selector?: string;
+      nodeId?: string;
+    }
+  | {
+      operation: "resolveNodeToFile";
+      source: DesignSourceDescriptor;
+      selector?: string;
+      nodeId?: string;
+    }
+  | {
+      operation: "readFile";
+      source: DesignSourceDescriptor;
+      path: string;
+    }
+  | {
+      operation: "applyEdit";
+      source: DesignSourceDescriptor;
+      path: string;
+      edit: {
+        kind: "replace" | "instruction";
+        search?: string;
+        replacement?: string;
+        instruction?: string;
+      };
+    }
+  | {
+      operation: "writeFile";
+      source: DesignSourceDescriptor;
+      path: string;
+      content: string;
+    }
+  | {
+      operation: "captureSnapshot" | "captureState";
+      source: DesignSourceDescriptor;
+      routeId?: string;
+      path?: string;
+    };
+
+export interface DesignBridgeResponse<T = unknown> {
+  ok: boolean;
+  operation: DesignBridgeOperation;
+  data?: T;
+  error?: string;
+}
+
+export function isDesignSourceType(value: unknown): value is DesignSourceType {
+  return (
+    typeof value === "string" &&
+    (DESIGN_SOURCE_TYPES as readonly string[]).includes(value)
+  );
+}
+
+export function normalizeDesignSourceType(
+  value: unknown,
+): DesignSourceType | null {
+  if (isDesignSourceType(value)) return value;
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase();
+  if (
+    normalized === "design-file" ||
+    normalized === "inline-html" ||
+    normalized === "sql" ||
+    normalized === "snapshot"
+  ) {
+    return "inline";
+  }
+  if (
+    normalized === "local" ||
+    normalized === "local-file" ||
+    normalized === "localhost" ||
+    normalized === "dev-server"
+  ) {
+    return "localhost";
+  }
+  if (normalized === "fusion" || normalized === "remote-url") {
+    return "fusion";
+  }
+  return null;
+}
+
+export function makeLocalhostRouteId(path: string): string {
+  const normalized = path.trim() || "/";
+  if (normalized === "/") return "route-root";
+  const slug = normalized
+    .replace(/^\/+/, "")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .toLowerCase();
+  return slug ? `route-${slug}` : "route-wildcard";
+}
+
+export function titleFromRoutePath(path: string): string {
+  const normalized = path.trim();
+  if (!normalized || normalized === "/") return "Home";
+  if (normalized === "/*" || normalized === "*") return "Wildcard";
+  return (
+    normalized
+      .replace(/^\/+/, "")
+      .replace(/[:$]/g, "")
+      .replace(/[-_/]+/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+      .replace(/\b\w/g, (char) => char.toUpperCase()) || "Screen"
+  );
+}

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

@@ -17,6 +17,8 @@ import {
   IconMessageCircle,
   IconSettings,
   IconForms,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarLeftExpand,
 } from "@tabler/icons-react";
 import { useState, useRef, useEffect, type MouseEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
@@ -41,6 +43,8 @@ import { useCreateForm } from "@/hooks/use-forms";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 
+const SIDEBAR_COLLAPSE_KEY = "forms.sidebar.collapsed";
+
 export function Sidebar() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -55,6 +59,15 @@ export function Sidebar() {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const isMobile = useIsMobile();
   const [mobileOpen, setMobileOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState<boolean>(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.localStorage.getItem(SIDEBAR_COLLAPSE_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const effectiveCollapsed = collapsed && !isMobile;
 
   useEffect(() => {
     if (popoverOpen) {
@@ -63,6 +76,15 @@ export function Sidebar() {
     }
   }, [popoverOpen]);
 
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(SIDEBAR_COLLAPSE_KEY, collapsed ? "1" : "0");
+    } catch {
+      // Ignore storage failures; the in-memory preference still works.
+    }
+  }, [collapsed]);
+
   function handleSkip() {
     setPopoverOpen(false);
     const tempId = crypto.randomUUID().replace(/-/g, "").slice(0, 10);
@@ -170,10 +192,113 @@ export function Sidebar() {
     </PopoverContent>
   );
 
-  const sidebarContent = (
+  const sidebarContent = effectiveCollapsed ? (
+    <div className="agent-layout-left-drawer flex h-screen w-12 min-w-0 shrink-0 flex-col items-center overflow-hidden border-e border-border bg-muted/30 py-2 transition-[width] duration-200 ease-out">
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => setCollapsed(false)}
+              className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground/55 transition-colors hover:bg-accent/50 hover:text-muted-foreground"
+              aria-label={t("sidebar.expandSidebar")}
+            >
+              <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            {t("sidebar.expandSidebar")}
+          </TooltipContent>
+        </Tooltip>
+
+        <nav className="mt-1 flex min-h-0 flex-1 flex-col items-center gap-1 overflow-y-auto">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                to="/ask"
+                onClick={navigateHomeChat}
+                aria-label={t("navigation.askForms")}
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  location.pathname === "/ask" || location.pathname === "/"
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                )}
+              >
+                <IconMessageCircle className="h-4 w-4" />
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {t("navigation.askForms")}
+            </TooltipContent>
+          </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                to="/forms"
+                aria-label={t("navigation.allForms")}
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  location.pathname.startsWith("/forms")
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                )}
+              >
+                <IconForms className="h-4 w-4" />
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {t("navigation.allForms")}
+            </TooltipContent>
+          </Tooltip>
+
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("sidebar.newForm")}
+                    className="flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                  >
+                    <IconPlus className="h-4 w-4" />
+                  </button>
+                </PopoverTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                {t("sidebar.newForm")}
+              </TooltipContent>
+            </Tooltip>
+            {newFormPopover}
+          </Popover>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Link
+                to="/settings"
+                aria-label={t("navigation.settings")}
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                  location.pathname === "/settings"
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+                )}
+              >
+                <IconSettings className="h-4 w-4" />
+              </Link>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {t("navigation.settings")}
+            </TooltipContent>
+          </Tooltip>
+        </nav>
+      </TooltipProvider>
+    </div>
+  ) : (
     <div
       className={cn(
-        "agent-layout-left-drawer flex h-screen w-60 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-muted/30",
+        "agent-layout-left-drawer flex h-screen w-60 min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-muted/30 transition-[width] duration-200 ease-out",
         isMobile && "w-full",
       )}
     >
@@ -185,7 +310,7 @@ export function Sidebar() {
               <button
                 type="button"
                 aria-label={t("sidebar.openAskFullScreen")}
-                className="flex min-w-0 items-center gap-2 rounded-md text-base font-semibold tracking-tight text-foreground transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="flex min-w-0 items-center gap-2 rounded-md text-base font-semibold tracking-tight text-muted-foreground/80 transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 onClick={toggleLogoView}
               >
                 <img
@@ -218,6 +343,24 @@ export function Sidebar() {
             <IconX size={18} />
           </Button>
         )}
+        {!isMobile && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground/55 hover:bg-accent/50 hover:text-muted-foreground"
+                onClick={() => setCollapsed(true)}
+                aria-label={t("sidebar.collapseSidebar")}
+              >
+                <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {t("sidebar.collapseSidebar")}
+            </TooltipContent>
+          </Tooltip>
+        )}
       </div>
 
       <ScrollArea className="min-h-0 min-w-0 flex-1">
@@ -267,7 +410,7 @@ export function Sidebar() {
       </ScrollArea>
 
       {/* Pinned nav + footer */}
-      <div className="shrink-0 border-t border-border px-3 py-1.5">
+      <div className="shrink-0 px-3 py-1.5">
         <Link
           to="/settings"
           onClick={() => isMobile && setMobileOpen(false)}
@@ -284,12 +427,12 @@ export function Sidebar() {
       </div>
 
       {/* Tools */}
-      <div className="shrink-0 border-t border-border px-1.5 py-1.5">
+      <div className="shrink-0 px-1.5 py-1.5">
         <ExtensionsSidebarSection />
       </div>
 
       {/* Footer */}
-      <div className="shrink-0 space-y-2 border-t border-border px-3 py-2">
+      <div className="shrink-0 space-y-2 px-3 py-2">
         <OrgSwitcher />
         <DevDatabaseLink />
         <div className="flex items-center gap-2">

package/corpus/templates/forms/app/i18n/ar-SA.ts

@@ -43,6 +43,8 @@ const messages = {
     suggestionExport: "صدر الردود إلى CSV",
   },
   sidebar: {
+    collapseSidebar: "طي الشريط الجانبي",
+    expandSidebar: "توسيع الشريط الجانبي",
     formGenerationStale:
       "يستغرق إنشاء النموذج وقتا أطول من المتوقع. يمكنك المحاولة مرة أخرى.",
     untitledForm: "نموذج بلا عنوان",

package/corpus/templates/forms/app/i18n/de-DE.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "Antworten als CSV exportieren",
   },
   sidebar: {
+    collapseSidebar: "Seitenleiste einklappen",
+    expandSidebar: "Seitenleiste erweitern",
     formGenerationStale:
       "Die Formularerstellung dauert langer als erwartet. Du kannst es erneut versuchen.",
     untitledForm: "Unbenanntes Formular",

package/corpus/templates/forms/app/i18n/en-US.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "Export responses to CSV",
   },
   sidebar: {
+    collapseSidebar: "Collapse sidebar",
+    expandSidebar: "Expand sidebar",
     formGenerationStale:
       "Form generation is taking longer than expected. You can try again.",
     untitledForm: "Untitled Form",

package/corpus/templates/forms/app/i18n/es-ES.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "Exportar respuestas a CSV",
   },
   sidebar: {
+    collapseSidebar: "Contraer barra lateral",
+    expandSidebar: "Expandir barra lateral",
     formGenerationStale:
       "La generacion del formulario tarda mas de lo esperado. Puedes intentarlo otra vez.",
     untitledForm: "Formulario sin titulo",

package/corpus/templates/forms/app/i18n/fr-FR.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "Exporter les reponses en CSV",
   },
   sidebar: {
+    collapseSidebar: "Réduire la barre latérale",
+    expandSidebar: "Développer la barre latérale",
     formGenerationStale:
       "La generation du formulaire prend plus de temps que prevu. Vous pouvez reessayer.",
     untitledForm: "Formulaire sans titre",

package/corpus/templates/forms/app/i18n/hi-IN.ts

@@ -43,6 +43,8 @@ const messages = {
     suggestionExport: "Responses को CSV में export करें",
   },
   sidebar: {
+    collapseSidebar: "साइडबार समेटें",
+    expandSidebar: "साइडबार फैलाएं",
     formGenerationStale:
       "Form generation उम्मीद से ज्यादा समय ले रहा है। आप फिर कोशिश कर सकते हैं।",
     untitledForm: "शीर्षक रहित प्रपत्र",

package/corpus/templates/forms/app/i18n/ja-JP.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "回答を CSV にエクスポート",
   },
   sidebar: {
+    collapseSidebar: "サイドバーを折りたたむ",
+    expandSidebar: "サイドバーを展開",
     formGenerationStale:
       "フォーム生成に予想より時間がかかっています。もう一度試せます。",
     untitledForm: "無題のフォーム",

package/corpus/templates/forms/app/i18n/ko-KR.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "응답을 CSV로 내보내기",
   },
   sidebar: {
+    collapseSidebar: "사이드바 접기",
+    expandSidebar: "사이드바 펼치기",
     formGenerationStale:
       "양식 생성이 예상보다 오래 걸립니다. 다시 시도할 수 있습니다.",
     untitledForm: "제목 없는 양식",

package/corpus/templates/forms/app/i18n/pt-BR.ts

@@ -44,6 +44,8 @@ const messages = {
     suggestionExport: "Exportar respostas para CSV",
   },
   sidebar: {
+    collapseSidebar: "Recolher barra lateral",
+    expandSidebar: "Expandir barra lateral",
     formGenerationStale:
       "A geracao do formulario esta demorando mais que o esperado. Voce pode tentar de novo.",
     untitledForm: "Formulario sem titulo",