@agent-native/core 0.80.8 → 0.80.9

package/src/templates/default/app/global.css

@@ -8,63 +8,63 @@
 
 :root {
   --background: 0 0% 100%;
-  --foreground: 220 10% 10%;
+  --foreground: 0 0% 10%;
   --card: 0 0% 100%;
-  --card-foreground: 220 10% 10%;
+  --card-foreground: 0 0% 10%;
   --popover: 0 0% 100%;
-  --popover-foreground: 220 10% 10%;
-  --primary: 220 10% 15%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 220 10% 95%;
-  --secondary-foreground: 220 10% 15%;
-  --muted: 220 10% 95%;
-  --muted-foreground: 220 5% 45%;
-  --accent: 220 10% 95%;
-  --accent-foreground: 220 10% 15%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 10% 90%;
-  --input: 220 10% 90%;
-  --ring: 220 10% 40%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
   --radius: 0.5rem;
-  --sidebar-background: 220 10% 97%;
-  --sidebar-foreground: 220 5% 45%;
-  --sidebar-primary: 220 10% 15%;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 220 10% 95%;
-  --sidebar-accent-foreground: 220 10% 15%;
-  --sidebar-border: 220 10% 90%;
-  --sidebar-ring: 220 10% 40%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
 }
 
 .dark {
-  --background: 220 6% 6%;
+  --background: 0 0% 13%;
   --foreground: 0 0% 90%;
-  --card: 220 5% 6%;
+  --card: 0 0% 15%;
   --card-foreground: 0 0% 90%;
-  --popover: 220 5% 6%;
+  --popover: 0 0% 15%;
   --popover-foreground: 0 0% 90%;
   --primary: 0 0% 75%;
-  --primary-foreground: 220 6% 6%;
-  --secondary: 220 4% 12%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
   --secondary-foreground: 0 0% 90%;
-  --muted: 220 4% 10%;
-  --muted-foreground: 220 4% 60%;
-  --accent: 220 4% 13%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
   --destructive: 0 63% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 220 4% 14%;
-  --input: 220 4% 14%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
   --ring: 0 0% 60%;
   --radius: 0.5rem;
-  --sidebar-background: 220 6% 4%;
-  --sidebar-foreground: 220 4% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
   --sidebar-primary: 0 0% 75%;
-  --sidebar-primary-foreground: 220 6% 6%;
-  --sidebar-accent: 220 4% 10%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
   --sidebar-accent-foreground: 0 0% 90%;
-  --sidebar-border: 220 4% 10%;
+  --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 60%;
 }
 

package/corpus/templates/design/app/components/design/VariantGrid.tsx

@@ -1,189 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconCheck } from "@tabler/icons-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-interface Variant {
-  id: string;
-  label: string;
-  content: string;
-}
-
-interface VariantGridProps {
-  variants: Variant[];
-  selectedId?: string;
-  onSelect: (id: string) => void;
-  onUse: (id: string) => void;
-  compact?: boolean;
-}
-
-export function VariantGrid({
-  variants,
-  selectedId,
-  onSelect,
-  onUse,
-  compact = false,
-}: VariantGridProps) {
-  const t = useT();
-  const [hoveredId, setHoveredId] = useState<string | null>(null);
-  const [internalSelectedId, setInternalSelectedId] = useState<
-    string | undefined
-  >(selectedId);
-  const activeSelectedId = selectedId ?? internalSelectedId;
-  const previewScale = compact ? 0.36 : 0.5;
-  const previewSize = `${100 / previewScale}%`;
-
-  // The same grid renders both in the full editor and in compact MCP App
-  // embeds, so it needs to wrap instead of squeezing previews into slivers.
-  const gridClass = compact
-    ? variants.length <= 1
-      ? "grid-cols-1"
-      : variants.length === 2
-        ? "grid-cols-1 min-[520px]:grid-cols-2"
-        : variants.length === 3
-          ? "grid-cols-1 min-[520px]:grid-cols-2 min-[820px]:grid-cols-3"
-          : "grid-cols-1 min-[520px]:grid-cols-2 min-[880px]:grid-cols-3"
-    : variants.length <= 1
-      ? "grid-cols-1"
-      : variants.length === 2
-        ? "grid-cols-1 sm:grid-cols-2"
-        : variants.length === 3
-          ? "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
-          : "grid-cols-1 sm:grid-cols-2";
-
-  return (
-    <div
-      className={cn(
-        "flex h-full w-full flex-col overflow-y-auto bg-background",
-        compact ? "p-3" : "p-3 sm:p-4 lg:p-6",
-      )}
-    >
-      <div
-        className={cn(
-          "grid min-h-0 flex-1 gap-3 sm:gap-4",
-          compact
-            ? "auto-rows-[minmax(190px,1fr)]"
-            : "auto-rows-[minmax(260px,1fr)]",
-          gridClass,
-        )}
-      >
-        {variants.map((variant) => {
-          const isSelected = activeSelectedId === variant.id;
-          const isHovered = hoveredId === variant.id;
-          const showAction = isSelected || isHovered;
-          const selectVariant = () => {
-            setInternalSelectedId(variant.id);
-            onSelect(variant.id);
-          };
-
-          return (
-            <div
-              key={variant.id}
-              className="flex flex-col gap-2"
-              onMouseEnter={() => setHoveredId(variant.id)}
-              onMouseLeave={() => setHoveredId(null)}
-            >
-              {/* Preview frame */}
-              <div
-                onClick={selectVariant}
-                onKeyDown={(event) => {
-                  if (event.key !== "Enter" && event.key !== " ") return;
-                  event.preventDefault();
-                  selectVariant();
-                }}
-                role="button"
-                tabIndex={0}
-                aria-label={t("home.designPreview")}
-                className={cn(
-                  "relative flex-1 cursor-pointer overflow-hidden rounded-lg border-2 bg-muted/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                  isSelected
-                    ? "border-primary"
-                    : "border-transparent hover:border-muted-foreground/30",
-                )}
-              >
-                {/* Scaled iframe preview */}
-                <iframe
-                  srcDoc={wrapContent(variant.content)}
-                  className="pointer-events-none h-full w-full origin-top-left"
-                  style={{
-                    width: previewSize,
-                    height: previewSize,
-                    transform: `scale(${previewScale})`,
-                  }}
-                  sandbox="allow-scripts"
-                  title={variant.label}
-                />
-
-                {/* Selection indicator */}
-                {isSelected && (
-                  <div className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary">
-                    <IconCheck className="h-3 w-3 text-primary-foreground" />
-                  </div>
-                )}
-
-                {/* Commit action appears after hover or selection, including touch. */}
-                {showAction && (
-                  <div className="absolute inset-0 flex items-center justify-center bg-black/40">
-                    <Button
-                      size="sm"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onUse(variant.id);
-                      }}
-                      aria-label={t("designEditor.useThisDirection")}
-                    >
-                      {t("designEditor.useThisDirection")}
-                    </Button>
-                  </div>
-                )}
-              </div>
-
-              {/* Label */}
-              <span
-                className={cn(
-                  "text-center text-xs",
-                  isSelected
-                    ? "font-medium text-foreground"
-                    : "text-muted-foreground",
-                )}
-              >
-                {variant.label}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-/** Prepare generated HTML for the iframe preview without changing full docs. */
-function wrapContent(content: string): string {
-  const previewStyle = `<style data-agent-native-preview>
-    *, *::before, *::after { box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; }
-    body { margin: 0; background: #fff; }
-  </style>`;
-  const trimmed = content.trim();
-
-  if (/<!doctype\s+html|<html[\s>]/i.test(trimmed)) {
-    if (/<\/head>/i.test(trimmed)) {
-      return trimmed.replace(/<\/head>/i, `${previewStyle}</head>`);
-    }
-    return trimmed.replace(
-      /<html([^>]*)>/i, // i18n-ignore HTML parser regex, not UI copy
-      `<html$1><head>${previewStyle}</head>`,
-    );
-  }
-
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  ${previewStyle}
-</head>
-<body>${trimmed}</body>
-</html>`;
-}

package/corpus/templates/design/app/components/design/VariantHandoffCard.tsx

@@ -1,115 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import type { StandalonePick } from "@/hooks/use-variant-flow";
-
-interface VariantHandoffCardProps {
-  pick: StandalonePick;
-  onDismiss: () => void;
-}
-
-/**
- * Shown after a pick (or dismiss) when the editor was opened from a link-only
- * host (CLI / Codex / Claude Code) that can't relay the choice over a chat
- * bridge. The card owns the clipboard write so its "Copied" state stays
- * truthful even when the browser blocks programmatic copy.
- */
-export function VariantHandoffCard({
-  pick,
-  onDismiss,
-}: VariantHandoffCardProps) {
-  const t = useT();
-  const [copied, setCopied] = useState(false);
-
-  const writeClipboard = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(pick.text);
-      return true;
-    } catch {
-      return false;
-    }
-  }, [pick.text]);
-
-  // Auto-copy on mount, but reflect what actually happened: if the browser
-  // blocks the write, leave the button on "Copy summary" so the user knows to
-  // copy (or select) it themselves.
-  useEffect(() => {
-    let active = true;
-    void writeClipboard().then((ok) => {
-      if (active) setCopied(ok);
-    });
-    return () => {
-      active = false;
-    };
-  }, [writeClipboard]);
-
-  const onCopyClick = async () => {
-    const ok = await writeClipboard();
-    setCopied(ok);
-    toast[ok ? "success" : "info"](
-      ok
-        ? t("designEditor.summaryCopied")
-        : t("designEditor.selectSummaryToCopy"),
-    );
-  };
-
-  return (
-    <div className="absolute inset-0 z-40 grid place-items-center bg-background/80 p-4 backdrop-blur-sm">
-      <div className="w-full max-w-md rounded-xl border border-border bg-card p-5 shadow-lg">
-        <div className="flex items-center gap-2.5">
-          <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary">
-            <IconCheck className="h-3.5 w-3.5 text-primary-foreground" />
-          </span>
-          <div className="min-w-0">
-            <div className="text-sm font-medium leading-tight">
-              {pick.heading}
-            </div>
-            {pick.label && (
-              <div className="truncate text-xs text-muted-foreground">
-                “{pick.label}”
-              </div>
-            )}
-          </div>
-        </div>
-
-        <p className="mt-3 text-sm text-muted-foreground">
-          {t("designEditor.variantHandoffHelp")}
-        </p>
-
-        <Textarea
-          readOnly
-          value={pick.text}
-          className="mt-3 h-28 resize-none border-border/70 bg-muted/40 font-mono text-[11px] leading-relaxed"
-          onFocus={(event) => event.currentTarget.select()}
-        />
-
-        <div className="mt-3 flex justify-end gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="cursor-pointer"
-            onClick={onDismiss}
-          >
-            {t("designEditor.dismiss")}
-          </Button>
-          <Button
-            size="sm"
-            className="cursor-pointer gap-1.5"
-            onClick={onCopyClick}
-          >
-            {copied ? (
-              <IconCheck className="h-3.5 w-3.5" />
-            ) : (
-              <IconCopy className="h-3.5 w-3.5" />
-            )}
-            {copied ? t("designEditor.copied") : t("designEditor.copySummary")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}