@agent-native/core 0.81.1 → 0.81.2

package/corpus/templates/design/actions/apply-design-token-edit.ts

@@ -10,7 +10,11 @@ import {
   INLINE_DEFAULT_CAPABILITIES,
   hasCapability,
 } from "../shared/design-source-capabilities.js";
-import { resolveTweaksToCssVars } from "../shared/resolve-tweaks.js";
+import {
+  isSafeCssTokenValue,
+  isSafeCssVarName,
+  resolveTweaksToCssVars,
+} from "../shared/resolve-tweaks.js";
 
 // ---------------------------------------------------------------------------
 // Token-edit patch schema (mirrors preview-design-token-edit)
@@ -23,17 +27,20 @@ const tokenEditSchema = z.object({
     .startsWith("--")
     // The token name is spliced raw into a `:root { … }` rule, so constrain it
     // to a safe CSS custom-property ident (leading "--" plus ident chars only).
-    .regex(
-      /^--[-_a-zA-Z0-9]+$/,
+    .refine(
+      isSafeCssVarName,
       "cssVar must be a valid CSS custom property name (-- followed by letters, digits, hyphens, or underscores).",
     )
     .describe("CSS custom property to edit"),
   /** New value string, e.g. "#3B82F6" or "0.75rem". */
   value: z
     .string()
-    // The value is spliced raw into the `:root { … }` block; reject characters
-    // that could terminate the rule (`}`) or break out of a `<style>` (`<`).
-    .refine((v) => !/[}<]/.test(v), 'Token value may not contain "}" or "<".')
+    // The value is rendered into CSS custom-property declarations; reject
+    // declaration terminators and style-tag breakout characters.
+    .refine(
+      isSafeCssTokenValue,
+      'Token value may not contain ";", "{", "}", "<", ">", CSS comments, or control characters.',
+    )
     .describe("New value for the token"),
 });
 

package/corpus/templates/design/actions/import-design-tokens.ts

@@ -17,7 +17,11 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
-import { resolveTweaksToCssVars } from "../shared/resolve-tweaks.js";
+import {
+  isSafeCssTokenValue,
+  isSafeCssVarName,
+  resolveTweaksToCssVars,
+} from "../shared/resolve-tweaks.js";
 
 type ImportedTokenType =
   | "color"
@@ -174,10 +178,6 @@ function normalizeValue(value: string): string {
     .trim();
 }
 
-function isSafeTokenValue(value: string): boolean {
-  return value.length > 0 && value.length <= 300 && !/[}<]/.test(value);
-}
-
 function tokenVar(prefix: string, key: string): string {
   if (key.startsWith("--")) return key;
   const stem = toKebab(key);
@@ -224,7 +224,7 @@ function parseNamedLines(
 
       const label = match[1].replace(/\*\*/g, "").trim();
       const value = normalizeValue(match[2]);
-      if (!isSafeTokenValue(value)) continue;
+      if (!isSafeCssTokenValue(value)) continue;
 
       const lower = label.toLowerCase();
       let cssVar: string | null = null;
@@ -261,7 +261,7 @@ function uniqueTokenList(tokens: ImportedDesignToken[]): ImportedDesignToken[] {
 
   for (const token of tokens) {
     if (!/^--[-_a-zA-Z0-9]+$/.test(token.cssVar)) continue;
-    if (!isSafeTokenValue(token.value)) continue;
+    if (!isSafeCssTokenValue(token.value)) continue;
     const previous = byVar.get(token.cssVar);
     byVar.set(token.cssVar, token);
     if (!previous && !/^--color-imported-\d+$/.test(token.cssVar)) {
@@ -404,7 +404,11 @@ export default defineAction({
     }
 
     const { filesAnalyzed, tokens } = tokensFromFiles(importFiles);
-    if (tokens.length === 0) {
+    const safeTokens = tokens.filter(
+      (token) =>
+        isSafeCssVarName(token.cssVar) && isSafeCssTokenValue(token.value),
+    );
+    if (safeTokens.length === 0) {
       return {
         designId,
         source,
@@ -452,7 +456,7 @@ export default defineAction({
         : {};
     const nextSelections = { ...prevSelections };
 
-    for (const token of tokens) {
+    for (const token of safeTokens) {
       const tweakId = cssVarToTweakId.get(token.cssVar);
       nextSelections[tweakId ?? token.cssVar] = token.value;
     }
@@ -464,7 +468,7 @@ export default defineAction({
         ? (prevData.tokenImportSources as Record<string, string>)
         : {};
     const tokenImportSources = { ...previousSources };
-    for (const token of tokens) {
+    for (const token of safeTokens) {
       tokenImportSources[token.cssVar] =
         token.source === "CSS variables" || token.source === "Colors"
           ? sourceLabel
@@ -484,7 +488,7 @@ export default defineAction({
         {
           source,
           sourceLabel,
-          tokenCount: tokens.length,
+          tokenCount: safeTokens.length,
           filesAnalyzed,
           importedAt: now,
         },
@@ -500,10 +504,10 @@ export default defineAction({
     return {
       designId,
       source,
-      importedCount: tokens.length,
+      importedCount: safeTokens.length,
       skippedCount: importFiles.length - filesAnalyzed.length,
       filesAnalyzed,
-      tokens,
+      tokens: safeTokens,
       resolvedCssVars: resolveTweaksToCssVars(tweaks, nextSelections),
       deepLink: designDeepLink(designId),
     };

package/corpus/templates/design/actions/preview-design-token-edit.ts

@@ -3,7 +3,11 @@ import { resolveAccess } from "@agent-native/core/sharing";
 import { z } from "zod";
 
 import "../server/db/index.js"; // ensure registerShareableResource runs
-import { resolveTweaksToCssVars } from "../shared/resolve-tweaks.js";
+import {
+  isSafeCssTokenValue,
+  isSafeCssVarName,
+  resolveTweaksToCssVars,
+} from "../shared/resolve-tweaks.js";
 
 // ---------------------------------------------------------------------------
 // Token-edit patch schema
@@ -11,9 +15,22 @@ import { resolveTweaksToCssVars } from "../shared/resolve-tweaks.js";
 
 const tokenEditSchema = z.object({
   /** The CSS custom property to update, e.g. "--primary-color". */
-  cssVar: z.string().startsWith("--").describe("CSS custom property to edit"),
+  cssVar: z
+    .string()
+    .startsWith("--")
+    .refine(
+      isSafeCssVarName,
+      "cssVar must be a valid CSS custom property name (-- followed by letters, digits, hyphens, or underscores).",
+    )
+    .describe("CSS custom property to edit"),
   /** New value string, e.g. "#3B82F6" or "0.75rem". */
-  value: z.string().describe("New value for the token"),
+  value: z
+    .string()
+    .refine(
+      isSafeCssTokenValue,
+      'Token value may not contain ";", "{", "}", "<", ">", CSS comments, or control characters.',
+    )
+    .describe("New value for the token"),
 });
 
 // ---------------------------------------------------------------------------

package/corpus/templates/design/actions/run-design-audit.ts

@@ -196,13 +196,20 @@ export function checkTapTargets(html: string): A11yFinding[] {
   const findings: A11yFinding[] = [];
   // Heuristic: buttons/links with explicit tiny size classes (h-4, h-5, w-4, w-5, size-4, size-5)
   // and no explicit larger override or sr-only are flagged.
-  const interactivePattern = /<(?:button|a)\b[^>]*>/gi;
+  const interactivePattern =
+    /<(button|a|input|select|textarea)\b[^>]*(?:\/>|>)/gi;
   const tinyPattern = /\b(?:h|w|size)-[345]\b/;
   const largePattern = /\b(?:h|w|size)-(?:[6-9]|[1-9]\d)/;
   const srOnlyPattern = /\bsr-only\b/;
   let idx = 0;
   for (const m of html.matchAll(interactivePattern)) {
     const tag = m[0];
+    const tagName = (m[1] ?? "button").toLowerCase();
+    const typeMatch = tag.match(/\btype\s*=\s*(?:"([^"]*?)"|'([^']*?)')/i);
+    if (tagName === "input") {
+      const type = (typeMatch?.[1] ?? typeMatch?.[2] ?? "text").toLowerCase();
+      if (type === "hidden") continue;
+    }
     if (
       tinyPattern.test(tag) &&
       !largePattern.test(tag) &&
@@ -217,7 +224,7 @@ export function checkTapTargets(html: string): A11yFinding[] {
         detail:
           "Minimum recommended tap target size is 44×44 px (WCAG 2.5.5). Consider increasing padding or size.",
         nodeId: extractNodeId(tag),
-        selector: extractSelector(tag, "button"),
+        selector: extractSelector(tag, tagName),
         wcag: "2.5.5",
         fixAvailable: true,
       });

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -755,6 +755,7 @@ export function DesignColorPicker({
 
   const [mode, setMode] = useState<DesignColorMode>("hex");
   const [hexDraft, setHexDraft] = useState(() => toDisplayHex(color));
+  const hexDraftRef = useRef(hexDraft);
   const [open, setOpen] = useState(false);
   const [picking, setPicking] = useState(false);
   const skipNextHexBlurCommitRef = useRef(false);
@@ -814,7 +815,9 @@ export function DesignColorPicker({
     : null;
 
   useEffect(() => {
-    setHexDraft(toDisplayHex(color));
+    const nextHex = toDisplayHex(color);
+    hexDraftRef.current = nextHex;
+    setHexDraft(nextHex);
   }, [color.r, color.g, color.b]);
 
   // The local override (the user's explicit paint-type click) persists for the
@@ -863,17 +866,20 @@ export function DesignColorPicker({
   };
 
   const commitHex = () => {
-    const parsed = parseCssColor(`#${hexDraft.replace(/^#/, "")}`);
+    const currentDraft = hexDraftRef.current;
+    const parsed = parseCssColor(`#${currentDraft.replace(/^#/, "")}`);
     if (!parsed) {
-      setHexDraft(toDisplayHex(activeGradient ? fieldColor : color));
+      const reverted = toDisplayHex(activeGradient ? fieldColor : color);
+      hexDraftRef.current = reverted;
+      setHexDraft(reverted);
       return;
     }
     if (activeGradient) {
-      const hexIncludesAlpha = hasHexAlpha(hexDraft);
+      const hexIncludesAlpha = hasHexAlpha(currentDraft);
       emitStopColor(hexIncludesAlpha ? parsed : { ...parsed, a: fieldColor.a });
       return;
     }
-    const hexIncludesAlpha = hasHexAlpha(hexDraft);
+    const hexIncludesAlpha = hasHexAlpha(currentDraft);
     const nextOpacity = hexIncludesAlpha
       ? alphaToOpacity(parsed.a)
       : effectiveOpacity;
@@ -1080,7 +1086,10 @@ export function DesignColorPicker({
           aria-label={copy.hex}
           spellCheck={false}
           className="h-6 min-w-0 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] tabular-nums uppercase"
-          onChange={(e) => setHexDraft(e.target.value)}
+          onChange={(e) => {
+            hexDraftRef.current = e.target.value;
+            setHexDraft(e.target.value);
+          }}
           onFocus={(e) => e.target.select()}
           onKeyDown={(e) => {
             if (e.key === "Enter") {
@@ -1090,7 +1099,9 @@ export function DesignColorPicker({
               e.currentTarget.blur();
             }
             if (e.key === "Escape") {
-              setHexDraft(toDisplayHex(color));
+              const reverted = toDisplayHex(color);
+              hexDraftRef.current = reverted;
+              setHexDraft(reverted);
               skipNextHexBlurCommitRef.current = true;
               e.currentTarget.blur();
             }
@@ -1978,16 +1989,21 @@ function ScrubbyNumberInput({
   compact?: boolean;
 }) {
   const [draft, setDraft] = useState<string>(() => String(value));
+  const draftRef = useRef(draft);
   const skipBlurRef = useRef(false);
 
   useEffect(() => {
-    setDraft(String(value));
+    const nextDraft = String(value);
+    draftRef.current = nextDraft;
+    setDraft(nextDraft);
   }, [value]);
 
   const commit = () => {
-    const parsed = Number(draft);
+    const parsed = Number(draftRef.current);
     if (!Number.isFinite(parsed)) {
-      setDraft(String(value));
+      const reverted = String(value);
+      draftRef.current = reverted;
+      setDraft(reverted);
       return;
     }
     onChange(clamp(parsed, min, max));
@@ -2007,7 +2023,10 @@ function ScrubbyNumberInput({
         compact && "border-0 shadow-none focus-visible:ring-0",
         className,
       )}
-      onChange={(e) => setDraft(e.target.value)}
+      onChange={(e) => {
+        draftRef.current = e.target.value;
+        setDraft(e.target.value);
+      }}
       onFocus={(e) => e.target.select()}
       onKeyDown={(e) => {
         if (e.key === "Enter") {
@@ -2017,21 +2036,23 @@ function ScrubbyNumberInput({
           e.currentTarget.blur();
         }
         if (e.key === "Escape") {
-          setDraft(String(value));
+          const reverted = String(value);
+          draftRef.current = reverted;
+          setDraft(reverted);
           skipBlurRef.current = true;
           e.currentTarget.blur();
         }
         if (e.key === "ArrowUp") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          const parsed = Number(draft);
+          const parsed = Number(draftRef.current);
           const base = Number.isFinite(parsed) ? parsed : value;
           onChange(clamp(base + step, min, max));
         }
         if (e.key === "ArrowDown") {
           e.preventDefault();
           const step = e.shiftKey ? 10 : 1;
-          const parsed = Number(draft);
+          const parsed = Number(draftRef.current);
           const base = Number.isFinite(parsed) ? parsed : value;
           onChange(clamp(base - step, min, max));
         }

package/corpus/templates/design/app/components/design/inspector/ImageFillControls.tsx

@@ -238,6 +238,14 @@ export function parseImageFillCss(
   return { url, fit };
 }
 
+export function mergeImageFitDraft(
+  value: ImageFillValue,
+  urlDraft: string,
+  fit: ImageFitMode,
+): ImageFillValue {
+  return { ...value, url: urlDraft.trim(), fit };
+}
+
 // ─── Component ─────────────────────────────────────────────────────────────────
 
 export interface ImageFillControlsProps {
@@ -255,13 +263,15 @@ export function ImageFillControls({
 }: ImageFillControlsProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [urlDraft, setUrlDraft] = useState(value.url);
+  const urlDraftRef = useRef(value.url);
 
   useEffect(() => {
+    urlDraftRef.current = value.url;
     setUrlDraft(value.url);
   }, [value.url]);
 
   const commitUrl = () => {
-    onChange({ ...value, url: urlDraft.trim() });
+    onChange({ ...value, url: urlDraftRef.current.trim() });
   };
 
   const handleFilePick = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -338,7 +348,10 @@ export function ImageFillControls({
           aria-label={"Image URL" /* i18n-ignore */}
           spellCheck={false}
           className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
-          onChange={(event) => setUrlDraft(event.target.value)}
+          onChange={(event) => {
+            urlDraftRef.current = event.target.value;
+            setUrlDraft(event.target.value);
+          }}
           onBlur={commitUrl}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
@@ -378,7 +391,11 @@ export function ImageFillControls({
       {/* ── Fit mode dropdown ─────────────────────────────────────────────── */}
       <Select
         value={value.fit}
-        onValueChange={(v) => onChange({ ...value, fit: v as ImageFitMode })}
+        onValueChange={(v) =>
+          onChange(
+            mergeImageFitDraft(value, urlDraftRef.current, v as ImageFitMode),
+          )
+        }
         disabled={disabled}
       >
         <SelectTrigger