@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/design/app/components/design/inspector/saved-glsl-shader.tsx

@@ -0,0 +1,243 @@
+import {
+  callAction,
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { resolveCodeLayerTarget } from "@shared/code-layer";
+import {
+  listShaderMounts,
+  listShadersInHtml,
+  removeShaderFill,
+  removeShaderFromNode,
+} from "@shared/shader-fills";
+import { IconMinus, IconWaveSine } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { SectionIconButton } from "../edit-panel/inspector-controls";
+import {
+  InspectorGridCell,
+  InspectorPaintRow,
+} from "../edit-panel/inspector-grid";
+import type { ShaderEditorContext } from "../shader-source-coordination";
+import {
+  broadcastShaderMessage,
+  withShaderWriteLock,
+} from "../shader-source-coordination";
+
+type SourceFileResult = {
+  content?: string;
+  versionHash?: string;
+  fileId?: string;
+  updatedAt?: string;
+};
+
+export function findSavedGlslFill(context: ShaderEditorContext | undefined): {
+  id: string;
+  name: string;
+  nodeId: string;
+} | null {
+  const { content, nodeId, selector } = context ?? {};
+  if (!content || !nodeId || !content.includes("data-an-shader-fill"))
+    return null;
+  const resolved = selector
+    ? resolveCodeLayerTarget(content, { selector }).resolution
+    : null;
+  const authoredId =
+    resolved?.status === "resolved" && resolved.node
+      ? resolved.node.dataAttributes["data-agent-native-node-id"]
+      : undefined;
+  const mount = listShaderMounts(content).find(
+    (item) =>
+      (item.nodeId === nodeId || item.nodeId === authoredId) &&
+      item.mode === "fill",
+  );
+  if (!mount?.nodeId) return null;
+  const definition = listShadersInHtml(content).find(
+    (item) => item.id === mount.shaderId,
+  );
+  return {
+    id: mount.shaderId,
+    name: definition?.name ?? mount.shaderId,
+    nodeId: mount.nodeId,
+  };
+}
+
+function useSavedGlslSource(context: ShaderEditorContext) {
+  const enabled =
+    Boolean(context.designId && context.fileId) &&
+    context.content === undefined &&
+    context.editSource === undefined;
+  const query = useActionQuery<SourceFileResult>(
+    "read-source-file",
+    { designId: context.designId ?? "", fileId: context.fileId ?? "" },
+    { enabled },
+  );
+  const content =
+    context.content ?? (enabled ? query.data?.content : undefined);
+  const status: "ready" | "pending" | "unreadable" =
+    content !== undefined
+      ? "ready"
+      : query.isLoading
+        ? "pending"
+        : "unreadable";
+  const mounts = useMemo(
+    () => (status === "ready" ? listShaderMounts(content!) : []),
+    [content, status],
+  );
+  const definitions = useMemo(
+    () => (status === "ready" ? listShadersInHtml(content!) : []),
+    [content, status],
+  );
+  return { ...query, status, content, mounts, definitions };
+}
+
+export function useSavedGlslFill(context: ShaderEditorContext | undefined) {
+  const source = useSavedGlslSource(context ?? {});
+  return {
+    status: source.status,
+    fill:
+      source.status === "ready"
+        ? findSavedGlslFill({ ...context, content: source.content })
+        : null,
+  };
+}
+
+export function useRemoveSavedGlslShader(context: ShaderEditorContext) {
+  const t = useT();
+  const applyEdit = useActionMutation("apply-source-edit");
+  const [busy, setBusy] = useState(false);
+  const remove = async (mode: "fill" | "effect"): Promise<boolean> => {
+    if (!context.nodeId || !context.fileId) return false;
+    const nodeId = context.nodeId;
+    const transform = (html: string) => {
+      if (mode === "effect")
+        return removeShaderFromNode(html, nodeId, "effect");
+      const fill = findSavedGlslFill({ ...context, content: html });
+      if (!fill) return { html, errors: ["shader-fill-source-target-missing"] };
+      return removeShaderFill(html, fill.nodeId);
+    };
+    setBusy(true);
+    try {
+      if (context.editSource) {
+        const result = context.editSource(transform);
+        if (result.status === "failed") throw new Error(result.error);
+        if (result.status === "applied")
+          broadcastShaderMessage({ type: "glsl-shader-rescan" });
+        return true;
+      }
+      if (!context.designId) throw new Error("shader-source-file-required");
+      const { designId, fileId } = context;
+      return await withShaderWriteLock(fileId, async () => {
+        const source = await callAction<SourceFileResult>(
+          "read-source-file",
+          { designId, fileId },
+          { method: "GET" },
+        );
+        if (typeof source.content !== "string" || !source.versionHash)
+          throw new Error("shader-source-unavailable");
+        const changed = transform(source.content);
+        if (changed.errors.length) throw new Error(changed.errors[0]);
+        if (changed.html === source.content) return true;
+        const written = (await applyEdit.mutateAsync({
+          designId,
+          fileId,
+          edit: { kind: "full-replace", content: changed.html },
+          expectedVersionHash: source.versionHash,
+        })) as SourceFileResult;
+        context.onApplied?.(
+          fileId,
+          changed.html,
+          written.updatedAt,
+          source.content,
+        );
+        broadcastShaderMessage({ type: "glsl-shader-rescan" });
+        return true;
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("editPanel.shaders.saveFailed"),
+      );
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  return { remove, busy };
+}
+
+export function SavedGlslEffectRow({
+  context,
+}: {
+  context: ShaderEditorContext;
+}) {
+  const t = useT();
+  const source = useSavedGlslSource(context);
+  const { remove, busy } = useRemoveSavedGlslShader(context);
+  const mount = source.mounts.find(
+    (item) => item.nodeId === context.nodeId && item.mode === "effect",
+  );
+  if (!mount && source.status === "ready") return null;
+  if (!mount) {
+    return (
+      <InspectorPaintRow>
+        <InspectorGridCell span={28}>
+          {source.status === "pending" ? (
+            <Skeleton className="h-6 w-full" />
+          ) : (
+            <div role="alert" className="text-muted-foreground !text-[11px]">
+              {t("common.genericError")}
+            </div>
+          )}
+        </InspectorGridCell>
+      </InspectorPaintRow>
+    );
+  }
+  const definition = source.definitions.find(
+    (item) => item.id === mount.shaderId,
+  );
+  return (
+    <InspectorPaintRow>
+      <InspectorGridCell span={20}>
+        <div className="flex h-6 min-w-0 items-center gap-1.5 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 !text-[11px]">
+          <IconWaveSine className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1 truncate font-medium text-foreground">
+            {definition?.name ?? mount.shaderId}
+          </span>
+        </div>
+      </InspectorGridCell>
+      <InspectorGridCell span={4} className="flex justify-center" />
+      <InspectorGridCell span={4} className="flex justify-center">
+        <SectionIconButton
+          label={t("editPanel.shaders.removeShaderEffect")}
+          disabled={busy}
+          onClick={() =>
+            void remove("effect").then((removed) => {
+              if (removed) void source.refetch();
+            })
+          }
+        >
+          <IconMinus className="size-3.5" />
+        </SectionIconButton>
+      </InspectorGridCell>
+    </InspectorPaintRow>
+  );
+}
+
+export function useHasSavedGlslEffect(
+  context: ShaderEditorContext | undefined,
+): boolean {
+  const source = useSavedGlslSource(context ?? {});
+  return Boolean(
+    context?.nodeId &&
+    (source.content === undefined ||
+      source.mounts.some(
+        (item) => item.nodeId === context.nodeId && item.mode === "effect",
+      )),
+  );
+}

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -338,8 +338,21 @@ export function getBoardSurfaceRenderContent(html: string, darkScheme = false) {
 }
 
 function stripExecutableStaticPreviewContent(html: string) {
-  return html
-    .replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "") // i18n-ignore static-preview sanitizer regex, not visible UI copy
+  const manifests: string[] = [];
+  const stripped = html
+    .replace(
+      /<script\b([^>]*)>([\s\S]*?)<\/script\s*>/gi,
+      (_script, attributes: string, body: string) => {
+        if (
+          !/(?:^|\s)type\s*=\s*(?:"application\/x-agent-native-effects"|'application\/x-agent-native-effects'|application\/x-agent-native-effects)(?=\s|$)/i.test(
+            attributes,
+          )
+        )
+          return "";
+        const index = manifests.push(body) - 1;
+        return `<!--an-native-static-manifest-${index}-->`;
+      },
+    ) // i18n-ignore static-preview sanitizer regex, not visible UI copy
     .replace(/<script\b[^>]*\/?\s*>/gi, "")
     .replace(/<(iframe|object|audio|video)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, "") // i18n-ignore static-preview sanitizer regex, not visible UI copy
     .replace(/<(?:iframe|object|embed|audio|video|source)\b[^>]*\/?\s*>/gi, "")
@@ -357,6 +370,39 @@ function stripExecutableStaticPreviewContent(html: string) {
       ),
     )
     .replace(/\s+on[a-z][\w:-]*\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+  return stripped.replace(
+    /<!--an-native-static-manifest-(\d+)-->/g,
+    (_marker, index: string) => {
+      const body = manifests[Number(index)];
+      return body === undefined
+        ? ""
+        : `<script type="application/x-agent-native-effects">${body}</script>`;
+    },
+  );
+}
+
+function secureStaticPreviewDocument(html: string): string {
+  const nonce = crypto.randomUUID();
+  const policy = [
+    "default-src 'none'",
+    `script-src 'nonce-${nonce}'`,
+    "style-src 'unsafe-inline'",
+    "img-src https: data: blob:",
+    "font-src https: data:",
+    "connect-src 'none'",
+    "frame-src 'none'",
+    "object-src 'none'",
+    "base-uri 'none'",
+  ].join("; ");
+  const security = `<meta http-equiv="Content-Security-Policy" content="${policy}"><meta name="an-native-static-script-nonce" content="${nonce}">`;
+  if (/<head\b[^>]*>/i.test(html))
+    return html.replace(/<head\b[^>]*>/i, (head) => `${head}${security}`);
+  if (/<html\b[^>]*>/i.test(html))
+    return html.replace(
+      /<html\b[^>]*>/i,
+      (root) => `${root}<head>${security}</head>`,
+    );
+  return `<head>${security}</head>${html}`;
 }
 
 /** Absolutely placed top-level board objects with px geometry, in board coordinates. */
@@ -419,8 +465,10 @@ export function getBoardSurfaceStaticPreviewContent(args: {
   logicalGeometry: FrameGeometry;
   viewport: { width: number; height: number };
 }) {
-  const renderHtml = stripExecutableStaticPreviewContent(
-    getBoardSurfaceRenderContent(args.html, args.darkScheme),
+  const renderHtml = secureStaticPreviewDocument(
+    stripExecutableStaticPreviewContent(
+      getBoardSurfaceRenderContent(args.html, args.darkScheme),
+    ),
   );
   const width = Math.max(1, args.logicalGeometry.width);
   const height = Math.max(1, args.logicalGeometry.height);
@@ -429,7 +477,8 @@ export function getBoardSurfaceStaticPreviewContent(args: {
   const scale = Math.min(viewportWidth / width, viewportHeight / height);
   const offsetX = -args.logicalGeometry.x;
   const offsetY = -args.logicalGeometry.y;
-  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
+  const bodyTransform = scale === 1 ? "none" : `scale(${scale})`;
+  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:${bodyTransform}!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
   if (/<\/head\s*>/i.test(renderHtml)) {
     return injectDocumentMarkup(renderHtml, style, { target: "head" });
   }

package/corpus/templates/design/app/components/design/shader-source-coordination.ts

@@ -0,0 +1,66 @@
+export type ShaderSourceTransform = (html: string) => {
+  html: string;
+  errors: string[];
+};
+
+export type ShaderSourceEditResult =
+  | { status: "applied" | "unchanged" }
+  | { status: "failed"; error: string };
+
+export interface ShaderEditorContext {
+  designId?: string;
+  fileId?: string;
+  content?: string;
+  nodeId?: string;
+  selector?: string;
+  onApplied?: (
+    fileId: string,
+    content: string,
+    updatedAt?: string,
+    previousContent?: string,
+  ) => void;
+  editSource?: (transform: ShaderSourceTransform) => ShaderSourceEditResult;
+}
+
+// Source actions and editor-local writes share a file, so serialize their commits.
+const shaderWriteLocks = new Map<string, Promise<void>>();
+
+export function isShaderWriteInFlight(fileId: string | undefined): boolean {
+  return !!fileId && shaderWriteLocks.has(fileId);
+}
+
+export async function waitForShaderWriteToSettle(
+  fileId: string | undefined,
+): Promise<void> {
+  if (!fileId) return;
+  const pending = shaderWriteLocks.get(fileId);
+  if (pending) await pending;
+}
+
+export function withShaderWriteLock<T>(
+  fileId: string,
+  fn: () => Promise<T>,
+): Promise<T> {
+  const previous = shaderWriteLocks.get(fileId) ?? Promise.resolve();
+  const run = previous.then(fn);
+  const settleMarker = run.then(
+    () => undefined,
+    () => undefined,
+  );
+  shaderWriteLocks.set(fileId, settleMarker);
+  void settleMarker.finally(() => {
+    if (shaderWriteLocks.get(fileId) === settleMarker)
+      shaderWriteLocks.delete(fileId);
+  });
+  return run;
+}
+
+export function broadcastShaderMessage(message: Record<string, unknown>): void {
+  if (typeof document === "undefined") return;
+  for (const frame of document.querySelectorAll<HTMLIFrameElement>("iframe")) {
+    try {
+      frame.contentWindow?.postMessage(message, "*");
+      // coercion-ok: detached frames cannot receive an optional rescan notification; continue notifying live frames.
+    } catch {}
+  }
+}

package/corpus/templates/design/app/components/design/use-native-shader-approvals.ts

@@ -1,4 +1,4 @@
-import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useActionQuery, useSession } from "@agent-native/core/client/hooks";
 import { parseNativeEffectApprovalState } from "@shared/native-effect-trust";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
@@ -6,33 +6,51 @@ type ApprovalMessage =
   | { type: "native-shader-approvals"; status: "ready"; hashes: string[] }
   | { type: "native-shader-approvals"; status: "pending" | "unreadable" };
 
+const EMPTY_HASHES: readonly string[] = [];
+
 export function useNativeShaderApprovals({
   designId,
   fileId,
   enabled,
+  scope = "file",
 }: {
   designId: string | undefined;
   fileId: string | undefined;
   enabled: boolean;
+  scope?: "file" | "design";
 }) {
-  const active = enabled && Boolean(designId && fileId);
-  const query = useActionQuery(
+  const { session } = useSession();
+  const active =
+    enabled &&
+    Boolean(session?.email && designId && (scope === "design" || fileId));
+  const designQuery = useActionQuery(
+    "get-native-shader-approvals",
+    { designId: designId ?? "" },
+    { enabled: active && scope === "design" },
+  );
+  const fileQuery = useActionQuery(
     "get-shader",
     { format: "native-v2", source: { kind: "design-file", designId, fileId } },
-    { enabled: active },
+    { enabled: active && scope === "file" },
   );
-  const sourceKey = JSON.stringify([designId, fileId, active]);
+  const query = scope === "design" ? designQuery : fileQuery;
+  const sourceKey = JSON.stringify([designId, fileId, scope, active]);
   const frames = useRef({ sourceKey, items: new Set<HTMLIFrameElement>() });
   if (frames.current.sourceKey !== sourceKey)
     frames.current = { sourceKey, items: new Set() };
   const message = useMemo<ApprovalMessage>(() => {
+    if (!active) return { type: "native-shader-approvals", status: "pending" };
     if (query.error)
       return { type: "native-shader-approvals", status: "unreadable" };
     if (!query.data)
       return { type: "native-shader-approvals", status: "pending" };
     if (!("approvedDefinitionHashes" in query.data))
       return { type: "native-shader-approvals", status: "unreadable" };
-    if (query.data.designId !== designId || query.data.fileId !== fileId)
+    if (
+      query.data.designId !== designId ||
+      (scope === "file" &&
+        (!("fileId" in query.data) || query.data.fileId !== fileId))
+    )
       return { type: "native-shader-approvals", status: "pending" };
     try {
       const approvals = parseNativeEffectApprovalState({
@@ -47,7 +65,14 @@ export function useNativeShaderApprovals({
     } catch {
       return { type: "native-shader-approvals", status: "unreadable" };
     }
-  }, [designId, fileId, query.data, query.error]);
+  }, [active, designId, fileId, scope, query.data, query.error]);
+  const approvedHashesRef = useRef<readonly string[]>(EMPTY_HASHES);
+  const nextHashes = message.status === "ready" ? message.hashes : EMPTY_HASHES;
+  if (
+    approvedHashesRef.current.length !== nextHashes.length ||
+    approvedHashesRef.current.some((hash, index) => hash !== nextHashes[index])
+  )
+    approvedHashesRef.current = nextHashes;
   const syncFrame = useCallback(
     (frame: HTMLIFrameElement) => {
       if (!active) return;
@@ -63,5 +88,8 @@ export function useNativeShaderApprovals({
       else frame.contentWindow?.postMessage(message, "*");
     }
   }, [active, message]);
-  return syncFrame;
+  return {
+    syncFrame,
+    approvedDefinitionHashes: approvedHashesRef.current,
+  };
 }

package/corpus/templates/design/app/components/home/DesignHomeLibrary.tsx

@@ -2,6 +2,9 @@ import type { ReactNode } from "react";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
+const TAB_CLASS =
+  "h-auto px-0 py-0 text-lg leading-[27px] font-medium group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:text-muted-foreground";
+
 export type DesignHomeLibraryTab = "templates" | "recent";
 
 interface DesignHomeLibraryProps {
@@ -29,7 +32,7 @@ export function DesignHomeLibrary({
 
   return (
     <section
-      className="agent-prompt-home-library"
+      className="agent-prompt-home-library mx-auto w-full max-w-[63rem]"
       aria-label={labels.templates}
     >
       <Tabs
@@ -42,19 +45,19 @@ export function DesignHomeLibrary({
         }}
       >
         <div className="flex flex-wrap items-center justify-between gap-3">
-          <TabsList variant="line">
-            <TabsTrigger value="recent" className="flex-none">
-              {labels.recent}
-            </TabsTrigger>
+          <TabsList variant="line" className="gap-2 border-b-0">
             <TabsTrigger
               value="templates"
-              className="flex-none"
+              className={TAB_CLASS}
               onClick={() => {
                 if (activeValue === "templates") onValueChange("templates");
               }}
             >
               {labels.templates}
             </TabsTrigger>
+            <TabsTrigger value="recent" className={TAB_CLASS}>
+              {labels.recent}
+            </TabsTrigger>
           </TabsList>
           {activeValue === "recent" ? (
             <div className="flex w-full min-w-0 flex-wrap items-center justify-end gap-2 sm:w-auto">
@@ -65,8 +68,12 @@ export function DesignHomeLibrary({
             browseAll
           )}
         </div>
-        <TabsContent value="templates">{templates}</TabsContent>
-        <TabsContent value="recent">{recent}</TabsContent>
+        <TabsContent value="templates" className="mt-4">
+          {templates}
+        </TabsContent>
+        <TabsContent value="recent" className="mt-4">
+          {recent}
+        </TabsContent>
       </Tabs>
     </section>
   );

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

@@ -0,0 +1,50 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { GettingStartedCard } from "@agent-native/toolkit/app/onboarding";
+import { useMemo } from "react";
+import { Link } from "react-router";
+
+const GETTING_STARTED_STEP_KEYS = {
+  "create-design": "createDesign",
+  "add-brand": "addBrand",
+  "use-real-data": "useRealData",
+  "share-feedback": "shareFeedback",
+  "invite-teammate": "inviteTeammate",
+  "save-template": "saveTemplate",
+} as const;
+
+export function GettingStarted({ className }: { className?: string }) {
+  const t = useT();
+  const labels = useMemo(
+    () => ({
+      title: t("gettingStarted.title"),
+      progress: (completeCount: number, totalCount: number) =>
+        t("gettingStarted.progress", { completeCount, totalCount }),
+      collapse: t("gettingStarted.collapse"),
+      expand: t("gettingStarted.expand"),
+      completed: t("gettingStarted.completed"),
+      loadError: t("gettingStarted.loadError"),
+      retry: t("gettingStarted.retry"),
+    }),
+    [t],
+  );
+  const stepTitles = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(GETTING_STARTED_STEP_KEYS).map(([id, key]) => [
+          id,
+          t(`gettingStarted.steps.${key}`),
+        ]),
+      ),
+    [t],
+  );
+
+  return (
+    <GettingStartedCard
+      checklist="getting-started"
+      labels={labels}
+      stepTitles={stepTitles}
+      LinkComponent={Link}
+      className={className}
+    />
+  );
+}

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

@@ -14,6 +14,8 @@ import { IconComponents, IconHome, IconTemplate } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 
+import { GettingStarted } from "./GettingStarted";
+
 const COLLAPSE_KEY = "design.sidebar.collapsed";
 
 export function Sidebar() {
@@ -79,6 +81,7 @@ export function Sidebar() {
       items={items}
       footerContent={
         <>
+          {collapsed ? null : <GettingStarted className="mx-2 mb-2" />}
           <div className={collapsed ? "flex flex-col items-center" : undefined}>
             <BuilderCreditNotice compact showAtLimitOnly className="mb-2" />
           </div>