@agent-native/core 0.90.1 → 0.90.3

package/corpus/templates/design/app/components/design/edit-panel/style-change-types.ts

@@ -0,0 +1,118 @@
+import {
+  getBreakpointOverrideState,
+  type BreakpointOverrideState,
+} from "@shared/breakpoint-media";
+import type { InteractionState } from "@shared/interaction-states";
+
+import type { MotionKeyframeCssProperty } from "../inspector";
+
+/**
+ * PF12: gesture-lifecycle metadata threaded alongside a style commit.
+ *
+ * - "preview": a live, in-progress tick (a ScrubInput scrub sample or a
+ *   DesignColorPicker drag tick) — cheap to show in the live iframe preview,
+ *   but must NOT trigger the expensive source commit (projection parse + HTML
+ *   patch + history entry) on every tick.
+ * - "commit" (or omitted, for callers that don't pass meta at all): the
+ *   gesture's authoritative final value — exactly one per gesture — which
+ *   DOES trigger the full source commit. Omitting meta entirely preserves
+ *   prior behavior (treated as "commit") for every non-scrub/color call site.
+ *
+ * - `interactionState`: set on EVERY style commit (regardless of `phase`)
+ *   while the inspector's element interaction-state selector
+ *   (`InteractionStatePanel`) has a non-default state active — see
+ *   `shared/interaction-states.ts` for the persisted format. Omitted (or
+ *   `undefined`) means "commit to the element's normal inline style /
+ *   class", exactly like today. This is a PHASE-2 CONTRACT: EditPanel only
+ *   attaches the field, it never calls the shared upsert helpers itself —
+ *   DesignEditor's `onStyleChange`/`onStylesChange` handlers must branch on
+ *   `meta.interactionState` and, when present, route the commit through
+ *   `upsertStateStyle` / `upsertStateStyles` (targeting `activeContent` +
+ *   the selected element's `sourceId` as the node id) instead of the normal
+ *   inline-style patch path, then re-derive the forced-preview twins with
+ *   `duplicateStatePreviewRules` before persisting — all as ONE history
+ *   step, same as any other single style commit today.
+ *
+ * - `breakpointReset`: set ONLY on the synthetic commit fired by a
+ *   `BreakpointOverrideIndicator`'s reset button (see `breakpointContext` on
+ *   `EditPanelProps`). Means "clear this property's override at
+ *   `maxWidthPx`, don't write a new value" — the accompanying `value`
+ *   argument on `onStyleChange`/`onStylesChange` is the CURRENT (base or
+ *   wider-scope) value the field falls back to displaying, not a value to
+ *   persist. CONTRACT: DesignEditor's handlers must branch on
+ *   `meta.breakpointReset` and, when present, call
+ *   `removeBreakpointMediaDeclaration` (or clear the matching max-width
+ *   utility class — whichever persistence layer
+ *   `getBreakpointOverrideState` reported the override on) for `property` at
+ *   `maxWidthPx`, instead of writing `value` through the normal inline-style
+ *   /  managed-breakpoint-block commit path.
+ */
+export interface StyleChangeMeta {
+  phase?: "preview" | "commit";
+  interactionState?: InteractionState;
+  breakpointReset?: { property: string; maxWidthPx: number };
+}
+
+export type StyleChangeHandler = (
+  property: string,
+  value: string,
+  meta?: StyleChangeMeta,
+) => void;
+
+export type StylesChangeHandler = (
+  styles: Record<string, string>,
+  meta?: StyleChangeMeta,
+) => void;
+
+/**
+ * Per-render bundle the style-section components below use to render the
+ * motion keyframe diamond next to a field — precomputed once in `EditPanel`
+ * from `motionKeyframeState`/`onToggleMotionKeyframe` so each section only
+ * needs to know its own field's CSS property name. `undefined` (the whole
+ * bundle, or `hasTimeline: false`) means "render no diamonds" — sections
+ * check this before rendering `MotionKeyframeDiamond` at all.
+ */
+export interface MotionKeyframeFieldContext {
+  hasTimeline: boolean;
+  keyframedProperties: readonly string[];
+  onToggle?: (cssProperty: MotionKeyframeCssProperty) => void;
+}
+
+/**
+ * Per-render bundle the style-section components below use to render the
+ * breakpoint override indicator next to a field — precomputed once in
+ * `EditPanel` from `breakpointContext`. `undefined` means "render no
+ * indicators" (feature off or editing the base frame).
+ */
+export interface BreakpointOverrideFieldContext {
+  nodeId: string | undefined;
+  breakpointWidths: readonly number[];
+  baseWidthPx: number;
+  activeWidthPx: number | null;
+  html: string;
+  onReset: (property: string, maxWidthPx: number) => void;
+}
+
+/**
+ * Resolve a single property's override state against
+ * `BreakpointOverrideFieldContext`, or `undefined` when the feature is off /
+ * there's no stable node id for the current selection. Thin wrapper around
+ * `getBreakpointOverrideState` so call sites don't repeat the
+ * className/nodeId/html plumbing at every field.
+ */
+export function resolveBreakpointOverride(
+  ctx: BreakpointOverrideFieldContext | undefined,
+  className: string,
+  property: string,
+): BreakpointOverrideState | undefined {
+  if (!ctx || !ctx.nodeId || ctx.activeWidthPx == null) return undefined;
+  return getBreakpointOverrideState({
+    className,
+    html: ctx.html,
+    nodeId: ctx.nodeId,
+    property,
+    breakpointWidths: ctx.breakpointWidths,
+    baseWidthPx: ctx.baseWidthPx,
+    activeWidthPx: ctx.activeWidthPx,
+  });
+}

package/corpus/templates/design/app/components/design/edit-panel/style-options.ts

@@ -0,0 +1,88 @@
+export function parseNumericValue(value: string): number {
+  return parseFloat(value) || 0;
+}
+
+export function sidesAreLinked(values: {
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}) {
+  return (
+    parseNumericValue(values.top || "0") ===
+      parseNumericValue(values.right || "0") &&
+    parseNumericValue(values.top || "0") ===
+      parseNumericValue(values.bottom || "0") &&
+    parseNumericValue(values.top || "0") ===
+      parseNumericValue(values.left || "0")
+  );
+}
+
+export const ALIGN_SELF_OPTIONS = [
+  { value: "auto", key: "auto" },
+  { value: "flex-start", key: "start" },
+  { value: "center", key: "center" },
+  { value: "flex-end", key: "end" },
+  { value: "stretch", key: "stretch" },
+  { value: "baseline", key: "baseline" },
+] as const;
+// Inside is a real `border` (draws inset from the box edge by definition).
+// Outside and center are both implemented as CSS `outline`, which always
+// paints just outside the border-box edge — `outline-offset` then pushes it
+// further out (outside, offset 0) or pulls it back by half its own width so
+// it straddles the edge (center, offset -width/2). See readStrokeOutlinePosition
+// for how a persisted outline is read back into one of these three options.
+export const STROKE_POSITION_OPTIONS = [
+  { value: "inside", key: "inside" },
+  { value: "outside", key: "outside" },
+  { value: "center", key: "center" },
+] as const;
+export const BLEND_MODE_OPTIONS = [
+  { value: "normal", label: "Normal" },
+  { value: "multiply", label: "Multiply" },
+  { value: "screen", label: "Screen" },
+  { value: "overlay", label: "Overlay" },
+  { value: "darken", label: "Darken" },
+  { value: "lighten", label: "Lighten" },
+  { value: "color-dodge", label: "Color dodge" }, // i18n-ignore design blend mode label
+  { value: "color-burn", label: "Color burn" }, // i18n-ignore design blend mode label
+  { value: "hard-light", label: "Hard light" }, // i18n-ignore design blend mode label
+  { value: "soft-light", label: "Soft light" }, // i18n-ignore design blend mode label
+  { value: "difference", label: "Difference" },
+  { value: "exclusion", label: "Exclusion" },
+  { value: "hue", label: "Hue" },
+  { value: "saturation", label: "Saturation" },
+  { value: "color", label: "Color" },
+  { value: "luminosity", label: "Luminosity" },
+] as const;
+
+/**
+ * Resolve a CSS line-height value to a unitless ratio for display/editing.
+ * When the browser returns a px-computed value (e.g. "19.2px" for line-height
+ * 1.2 on a 16px font), divide by the font-size to recover the unitless ratio.
+ * Falls back to 1.2 when the value cannot be parsed.
+ */
+export function resolveLineHeight(
+  lineHeight: string | undefined,
+  fontSize: string | undefined,
+): number {
+  const lh = lineHeight?.trim() || "";
+  if (!lh || lh === "normal") return 1.2;
+  if (lh.endsWith("px")) {
+    const lhPx = parseFloat(lh);
+    const fsPx = parseFloat(fontSize || "");
+    if (Number.isFinite(lhPx) && Number.isFinite(fsPx) && fsPx > 0) {
+      return Math.round((lhPx / fsPx) * 100) / 100;
+    }
+  }
+  const numeric = parseFloat(lh);
+  return Number.isFinite(numeric) && numeric > 0 ? numeric : 1.2;
+}
+
+export function optionValue<T extends readonly { value: string }[]>(
+  options: T,
+  value: string | undefined,
+  fallback: T[number]["value"],
+) {
+  return options.some((option) => option.value === value) ? value! : fallback;
+}

package/corpus/templates/design/app/components/design/edit-panel/transform-helpers.ts

@@ -0,0 +1,100 @@
+// Matches a 2D rotate()/rotateZ() with any CSS angle unit (not rotateX/Y/3d).
+const ROTATE_FN_PATTERN =
+  /rotate[Zz]?\(\s*([+-]?[\d.]+(?:e[+-]?\d+)?)(deg|rad|turn|grad)?\s*\)/i;
+
+export function parseRotationValue(transform: string | undefined): number {
+  if (!transform || transform === "none") return 0;
+  const match = transform.match(ROTATE_FN_PATTERN);
+  if (match) {
+    const value = Number(match[1]);
+    if (Number.isFinite(value)) {
+      const unit = (match[2] || "deg").toLowerCase();
+      const deg =
+        unit === "rad"
+          ? value * (180 / Math.PI)
+          : unit === "turn"
+            ? value * 360
+            : unit === "grad"
+              ? value * 0.9
+              : value;
+      return Math.round(deg * 10) / 10;
+    }
+  }
+  // Fallback for rotate3d()/matrix()/skew composites: read the 2D rotation
+  // component off the resolved matrix so the panel doesn't report 0.
+  if (typeof DOMMatrixReadOnly !== "undefined") {
+    try {
+      const m = new DOMMatrixReadOnly(transform);
+      return Math.round(((Math.atan2(m.b, m.a) * 180) / Math.PI) * 10) / 10;
+    } catch {
+      // Unparseable transform — fall through to 0.
+    }
+  }
+  return 0;
+}
+
+/**
+ * Parse a CSS `scale` property value (e.g. "-1 1", "1", "none") into two
+ * numeric components [scaleX, scaleY]. Defaults both axes to 1 when absent
+ * or unparseable, matching the CSS initial value.
+ */
+export function parseScaleValue(value: string | undefined): [number, number] {
+  if (!value || value === "none") return [1, 1];
+  const parts = value.trim().split(/\s+/);
+  const x = Number(parts[0]);
+  const y = parts.length > 1 ? Number(parts[1]) : x;
+  return [Number.isFinite(x) ? x : 1, Number.isFinite(y) ? y : 1];
+}
+
+/**
+ * Normalize an angle in degrees into the (-180, 180] range the inspector
+ * displays and commits (design-tool convention: 270° reads as -90°, a full
+ * 360° turn reads as 0°). Exported for tests.
+ */
+export function normalizeRotationDegrees(degrees: number): number {
+  if (!Number.isFinite(degrees)) return 0;
+  let normalized = degrees % 360;
+  if (normalized > 180) normalized -= 360;
+  else if (normalized <= -180) normalized += 360;
+  return Object.is(normalized, -0) ? 0 : normalized;
+}
+
+/** Exported for tests. */
+export function mergeRotationValue(
+  transform: string | undefined,
+  degrees: number,
+) {
+  // Round first, then normalize, so a rounded -179.96 → -180 still lands
+  // inside (-180, 180] as +180.
+  const normalizedDegrees = normalizeRotationDegrees(
+    Math.round(degrees * 10) / 10,
+  );
+  const nextRotate = `rotate(${normalizedDegrees}deg)`;
+  if (!transform || transform === "none") return nextRotate;
+  // Replace an existing rotate()/rotateZ() in ANY unit so we don't append a
+  // second rotate() (which would compound, e.g. "rotate(0.5turn) rotate(30deg)").
+  if (ROTATE_FN_PATTERN.test(transform)) {
+    return transform.replace(ROTATE_FN_PATTERN, nextRotate);
+  }
+  return `${transform} ${nextRotate}`;
+}
+
+/**
+ * Replace or remove a translateX/translateY function within an existing
+ * transform string while preserving all other transform functions (rotate,
+ * scale, skew, etc.). Pass `null` as `value` to strip the function.
+ */
+export function mergeTranslateFunction(
+  transform: string | undefined,
+  axis: "X" | "Y",
+  value: string | null,
+): string {
+  const pattern =
+    axis === "X" ? /translateX\([^)]*\)/g : /translateY\([^)]*\)/g;
+  const base = (!transform || transform === "none" ? "" : transform)
+    .replace(pattern, "")
+    .trim();
+  if (value === null) return base || "none";
+  const fn = `translate${axis}(${value})`;
+  return base ? `${fn} ${base}` : fn;
+}

package/corpus/templates/design/app/components/design/edit-panel/typography-helpers.ts

@@ -0,0 +1,117 @@
+export const FONT_FAMILY_OPTIONS = [
+  { value: "inherit", key: "inherit" },
+  { value: "sans-serif", key: "sansSerif" },
+  { value: "serif", key: "serif" },
+  { value: "monospace", key: "monospace" },
+  { value: "'Inter', sans-serif", key: "inter" },
+  { value: "'Poppins', sans-serif", key: "poppins" },
+  { value: "'Playfair Display', serif", key: "playfairDisplay" },
+  { value: "'JetBrains Mono', monospace", key: "jetBrainsMono" },
+] as const;
+
+export const FONT_WEIGHT_OPTIONS = [
+  { value: "100", key: "thin" },
+  { value: "200", key: "extraLight" },
+  { value: "300", key: "light" },
+  { value: "400", key: "regular" },
+  { value: "500", key: "medium" },
+  { value: "600", key: "semiBold" },
+  { value: "700", key: "bold" },
+  { value: "800", key: "extraBold" },
+  { value: "900", key: "black" },
+] as const;
+
+export type TextResizeMode = "auto-width" | "auto-height" | "fixed";
+
+function cleanFontFamilyName(value: string): string {
+  const trimmed = value.trim();
+  if (
+    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+    (trimmed.startsWith("'") && trimmed.endsWith("'"))
+  ) {
+    return trimmed.slice(1, -1).trim();
+  }
+  return trimmed;
+}
+
+export function splitFontFamilyList(value: string | undefined): string[] {
+  const raw = value?.trim();
+  if (!raw) return [];
+
+  const families: string[] = [];
+  let token = "";
+  let quote: '"' | "'" | null = null;
+
+  for (let i = 0; i < raw.length; i += 1) {
+    const char = raw[i];
+    if ((char === '"' || char === "'") && raw[i - 1] !== "\\") {
+      if (quote === char) quote = null;
+      else if (!quote) quote = char;
+      token += char;
+      continue;
+    }
+    if (char === "," && !quote) {
+      const cleaned = cleanFontFamilyName(token);
+      if (cleaned) families.push(cleaned);
+      token = "";
+      continue;
+    }
+    token += char;
+  }
+
+  const cleaned = cleanFontFamilyName(token);
+  if (cleaned) families.push(cleaned);
+  return families;
+}
+
+function normalizeFontFamilyName(value: string): string {
+  return cleanFontFamilyName(value).replace(/\s+/g, " ").toLowerCase();
+}
+
+function normalizeFontFamilyStack(value: string): string {
+  return splitFontFamilyList(value).map(normalizeFontFamilyName).join(",");
+}
+
+export function displayFontFamilyName(value: string | undefined): string {
+  const first = splitFontFamilyList(value)[0];
+  if (!first) return "Sans Serif"; // i18n-ignore design generic font label
+
+  const normalized = normalizeFontFamilyName(first);
+  if (normalized === "sans-serif") {
+    return "Sans Serif"; // i18n-ignore design generic font label
+  }
+  if (normalized === "serif") return "Serif"; // i18n-ignore design generic font label
+  if (normalized === "monospace") {
+    return "Monospace"; // i18n-ignore design generic font label
+  }
+  if (normalized === "system-ui" || normalized === "-apple-system") {
+    return "System UI"; // i18n-ignore design generic font label
+  }
+  if (normalized === "blinkmacsystemfont") {
+    return "Apple System"; // i18n-ignore design generic font label
+  }
+  return first;
+}
+
+export function resolveFontFamilySelectValue(
+  value: string | undefined,
+): string {
+  const raw = value?.trim();
+  if (!raw) return "sans-serif";
+
+  const normalizedStack = normalizeFontFamilyStack(raw);
+  const exactOption = FONT_FAMILY_OPTIONS.find(
+    (option) => normalizeFontFamilyStack(option.value) === normalizedStack,
+  );
+  if (exactOption) return exactOption.value;
+
+  const firstFamily = normalizeFontFamilyName(
+    splitFontFamilyList(raw)[0] ?? "",
+  );
+  const firstFamilyOption = FONT_FAMILY_OPTIONS.find(
+    (option) =>
+      normalizeFontFamilyName(splitFontFamilyList(option.value)[0] ?? "") ===
+      firstFamily,
+  );
+  return firstFamilyOption?.value ?? raw;
+}