@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/shared/color-utils.ts

@@ -0,0 +1,180 @@
+export interface RgbaColor {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export interface HslaColor {
+  h: number;
+  s: number;
+  l: number;
+  a: number;
+}
+
+const RGB_PATTERN =
+  /^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+%?))?\s*\)$/i;
+const HSL_PATTERN =
+  /^hsla?\(\s*([0-9.]+)(?:deg)?\s*,\s*([0-9.]+)%\s*,\s*([0-9.]+)%(?:\s*,\s*([0-9.]+%?))?\s*\)$/i;
+
+export function parseCssColor(value: string): RgbaColor | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  if (trimmed.startsWith("#")) return hexToRgba(trimmed);
+
+  const rgb = trimmed.match(RGB_PATTERN);
+  if (rgb) {
+    return normalizeRgba({
+      r: Number(rgb[1]),
+      g: Number(rgb[2]),
+      b: Number(rgb[3]),
+      a: parseAlpha(rgb[4]),
+    });
+  }
+
+  const hsl = trimmed.match(HSL_PATTERN);
+  if (hsl) {
+    return hslToRgba({
+      h: Number(hsl[1]),
+      s: Number(hsl[2]),
+      l: Number(hsl[3]),
+      a: parseAlpha(hsl[4]),
+    });
+  }
+
+  return null;
+}
+
+export function hexToRgba(value: string): RgbaColor | null {
+  const raw = value.trim().replace(/^#/, "");
+  const expanded =
+    raw.length === 3 || raw.length === 4
+      ? raw
+          .split("")
+          .map((char) => `${char}${char}`)
+          .join("")
+      : raw;
+
+  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(expanded)) return null;
+
+  const r = Number.parseInt(expanded.slice(0, 2), 16);
+  const g = Number.parseInt(expanded.slice(2, 4), 16);
+  const b = Number.parseInt(expanded.slice(4, 6), 16);
+  const alphaHex = expanded.slice(6, 8);
+  const a = alphaHex ? Number.parseInt(alphaHex, 16) / 255 : 1;
+  return normalizeRgba({ r, g, b, a });
+}
+
+export function rgbaToHex(color: RgbaColor, includeAlpha = false): string {
+  const normalized = normalizeRgba(color);
+  const alpha = includeAlpha
+    ? channelToHex(Math.round(normalized.a * 255))
+    : "";
+  return `#${channelToHex(normalized.r)}${channelToHex(normalized.g)}${channelToHex(normalized.b)}${alpha}`;
+}
+
+export function rgbaToCss(color: RgbaColor): string {
+  const normalized = normalizeRgba(color);
+  if (normalized.a >= 1) return rgbaToHex(normalized);
+  return `rgba(${normalized.r}, ${normalized.g}, ${normalized.b}, ${trimNumber(normalized.a)})`;
+}
+
+export function rgbaToHsl(color: RgbaColor): HslaColor {
+  const normalized = normalizeRgba(color);
+  const r = normalized.r / 255;
+  const g = normalized.g / 255;
+  const b = normalized.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const l = (max + min) / 2;
+
+  let h = 0;
+  let s = 0;
+
+  if (delta !== 0) {
+    s = delta / (1 - Math.abs(2 * l - 1));
+    if (max === r) h = ((g - b) / delta) % 6;
+    if (max === g) h = (b - r) / delta + 2;
+    if (max === b) h = (r - g) / delta + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+
+  return {
+    h: Math.round(h),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+    a: normalized.a,
+  };
+}
+
+export function hslToRgba(color: HslaColor): RgbaColor {
+  const h = ((color.h % 360) + 360) % 360;
+  const s = clamp(color.s, 0, 100) / 100;
+  const l = clamp(color.l, 0, 100) / 100;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - chroma / 2;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h < 60) [r, g, b] = [chroma, x, 0];
+  else if (h < 120) [r, g, b] = [x, chroma, 0];
+  else if (h < 180) [r, g, b] = [0, chroma, x];
+  else if (h < 240) [r, g, b] = [0, x, chroma];
+  else if (h < 300) [r, g, b] = [x, 0, chroma];
+  else [r, g, b] = [chroma, 0, x];
+
+  return normalizeRgba({
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+    a: color.a,
+  });
+}
+
+export function normalizeRgba(color: RgbaColor): RgbaColor {
+  return {
+    r: Math.round(clamp(color.r, 0, 255)),
+    g: Math.round(clamp(color.g, 0, 255)),
+    b: Math.round(clamp(color.b, 0, 255)),
+    a: clamp(color.a, 0, 1),
+  };
+}
+
+export function opacityToAlpha(opacity: number): number {
+  return clamp(opacity, 0, 100) / 100;
+}
+
+export function alphaToOpacity(alpha: number): number {
+  return Math.round(clamp(alpha, 0, 1) * 100);
+}
+
+export function withColorOpacity(color: RgbaColor, opacity: number): RgbaColor {
+  return normalizeRgba({ ...color, a: opacityToAlpha(opacity) });
+}
+
+function parseAlpha(value: string | undefined): number {
+  if (!value) return 1;
+  if (value.endsWith("%")) return Number(value.slice(0, -1)) / 100;
+  return Number(value);
+}
+
+function channelToHex(value: number): string {
+  return Math.round(clamp(value, 0, 255))
+    .toString(16)
+    .padStart(2, "0");
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
+}
+
+function trimNumber(value: number): string {
+  return Number(value.toFixed(3)).toString();
+}

package/corpus/templates/design/shared/generation-session.ts

@@ -0,0 +1,61 @@
+import type { AssignedCanvasRegion } from "./canvas-math";
+
+export type DesignGenerationSessionStatus =
+  | "planning"
+  | "generating"
+  | "review"
+  | "done"
+  | "cancelled";
+
+export type DesignGenerationFrameStatus =
+  | "queued"
+  | "thinking"
+  | "writing"
+  | "done"
+  | "error";
+
+export type DesignGenerationFrameRole = "screen" | "variant";
+
+export interface DesignGenerationFrame {
+  frameId: string;
+  agentId: string;
+  agentName: string;
+  agentColor: string;
+  region: AssignedCanvasRegion;
+  role: DesignGenerationFrameRole;
+  variantOf?: string;
+  status: DesignGenerationFrameStatus;
+  step?: string;
+  progress?: number;
+}
+
+export interface DesignGenerationSession {
+  id: string;
+  designId: string;
+  status: DesignGenerationSessionStatus;
+  designSystemId?: string;
+  prompt: string;
+  contextRefs: string[];
+  frames: DesignGenerationFrame[];
+}
+
+export interface AgentCanvasPresence {
+  kind: "agent";
+  agentId: string;
+  name: string;
+  color: string;
+  frameId: string;
+  cursor: { x: number; y: number };
+  status: DesignGenerationFrameStatus;
+  step?: string;
+  progress?: number;
+}
+
+export function designGenerationSessionKey(designId: string): string {
+  return `design-generation-session:${designId}`;
+}
+
+export function clampGenerationProgress(progress: number | undefined): number {
+  if (!Number.isFinite(progress)) return 0;
+  return Math.max(0, Math.min(1, progress ?? 0));
+}

package/corpus/templates/design/shared/html-content.ts

@@ -0,0 +1,21 @@
+export function isProbablyHtmlDocumentContent(content: string): boolean {
+  const trimmed = content.trimStart();
+  if (!trimmed) return true;
+  if (trimmed.startsWith("<")) return true;
+  return false;
+}
+
+export function shouldUseLiveFileContent({
+  liveContent,
+  storedContent,
+  fileType,
+}: {
+  liveContent: string;
+  storedContent: string;
+  fileType: string;
+}): boolean {
+  if (liveContent === storedContent) return true;
+  if (fileType.toLowerCase() !== "html") return true;
+  if (!isProbablyHtmlDocumentContent(storedContent)) return true;
+  return isProbablyHtmlDocumentContent(liveContent);
+}

package/corpus/templates/design/shared/pen-path.ts

@@ -0,0 +1,207 @@
+export interface PenPoint {
+  x: number;
+  y: number;
+}
+
+export interface PenNode {
+  point: PenPoint;
+  handleIn?: PenPoint;
+  handleOut?: PenPoint;
+}
+
+export interface PenPath {
+  nodes: PenNode[];
+  closed: boolean;
+}
+
+export interface PenGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const MIN_PATH_SIZE = 12;
+
+export function createCornerNode(point: PenPoint): PenNode {
+  return { point: { ...point } };
+}
+
+export function createSmoothNode(anchor: PenPoint, handleOut: PenPoint) {
+  return {
+    point: { ...anchor },
+    handleIn: mirrorPoint(anchor, handleOut),
+    handleOut: { ...handleOut },
+  };
+}
+
+export function appendPenNode(path: PenPath | null, node: PenNode): PenPath {
+  return {
+    nodes: [...(path?.nodes ?? []), clonePenNode(node)],
+    closed: false,
+  };
+}
+
+export function clonePenPath(path: PenPath): PenPath {
+  return {
+    nodes: path.nodes.map(clonePenNode),
+    closed: path.closed,
+  };
+}
+
+export function closePenPath(path: PenPath): PenPath {
+  return {
+    nodes: path.nodes.map(clonePenNode),
+    closed: path.nodes.length > 1,
+  };
+}
+
+export function constrainPointTo45Degrees(
+  origin: PenPoint,
+  point: PenPoint,
+): PenPoint {
+  const dx = point.x - origin.x;
+  const dy = point.y - origin.y;
+  const distance = Math.hypot(dx, dy);
+  if (distance === 0) return { ...point };
+
+  const angle = Math.atan2(dy, dx);
+  const snappedAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
+  return {
+    x: origin.x + Math.cos(snappedAngle) * distance,
+    y: origin.y + Math.sin(snappedAngle) * distance,
+  };
+}
+
+export function isPenCloseTarget(
+  path: PenPath | null,
+  point: PenPoint,
+  hitRadius: number,
+) {
+  const start = path?.nodes[0]?.point;
+  if (!start || (path?.nodes.length ?? 0) < 2) return false;
+  return Math.hypot(point.x - start.x, point.y - start.y) <= hitRadius;
+}
+
+export function getPenPathGeometry(path: PenPath): PenGeometry {
+  const points = path.nodes.flatMap((node) =>
+    [node.point, node.handleIn, node.handleOut].filter(isPenPoint),
+  );
+  if (points.length === 0) {
+    return { x: 0, y: 0, width: MIN_PATH_SIZE, height: MIN_PATH_SIZE };
+  }
+
+  const left = Math.min(...points.map((point) => point.x));
+  const top = Math.min(...points.map((point) => point.y));
+  const right = Math.max(...points.map((point) => point.x));
+  const bottom = Math.max(...points.map((point) => point.y));
+  return {
+    x: left,
+    y: top,
+    width: Math.max(MIN_PATH_SIZE, right - left),
+    height: Math.max(MIN_PATH_SIZE, bottom - top),
+  };
+}
+
+export function serializePenPath(path: PenPath): string {
+  const [first, ...rest] = path.nodes;
+  if (!first) return "";
+
+  const commands = [`M ${formatPoint(first.point)}`];
+  rest.forEach((node, index) => {
+    const previous = path.nodes[index];
+    commands.push(serializeSegment(previous, node));
+  });
+
+  if (path.closed && path.nodes.length > 1) {
+    commands.push(serializeSegment(path.nodes[path.nodes.length - 1], first));
+    commands.push("Z");
+  }
+
+  return commands.join(" ");
+}
+
+export function offsetPenPath(path: PenPath, offset: PenPoint): PenPath {
+  return transformPenPath(path, (point) => ({
+    x: point.x - offset.x,
+    y: point.y - offset.y,
+  }));
+}
+
+export function translatePenPath(
+  path: PenPath,
+  dx: number,
+  dy: number,
+): PenPath {
+  return transformPenPath(path, (point) => ({
+    x: point.x + dx,
+    y: point.y + dy,
+  }));
+}
+
+export function scalePenPathToGeometry(
+  path: PenPath,
+  origin: PenGeometry,
+  next: PenGeometry,
+): PenPath {
+  const scaleX = next.width / Math.max(1, origin.width);
+  const scaleY = next.height / Math.max(1, origin.height);
+  return transformPenPath(path, (point) => ({
+    x: next.x + (point.x - origin.x) * scaleX,
+    y: next.y + (point.y - origin.y) * scaleY,
+  }));
+}
+
+function serializeSegment(from: PenNode, to: PenNode) {
+  const c1 = from.handleOut ?? from.point;
+  const c2 = to.handleIn ?? to.point;
+  if (samePoint(c1, from.point) && samePoint(c2, to.point)) {
+    return `L ${formatPoint(to.point)}`;
+  }
+  return `C ${formatPoint(c1)} ${formatPoint(c2)} ${formatPoint(to.point)}`;
+}
+
+function transformPenPath(
+  path: PenPath,
+  transform: (point: PenPoint) => PenPoint,
+): PenPath {
+  return {
+    nodes: path.nodes.map((node) => ({
+      point: transform(node.point),
+      handleIn: node.handleIn ? transform(node.handleIn) : undefined,
+      handleOut: node.handleOut ? transform(node.handleOut) : undefined,
+    })),
+    closed: path.closed,
+  };
+}
+
+function clonePenNode(node: PenNode): PenNode {
+  return {
+    point: { ...node.point },
+    handleIn: node.handleIn ? { ...node.handleIn } : undefined,
+    handleOut: node.handleOut ? { ...node.handleOut } : undefined,
+  };
+}
+
+function mirrorPoint(anchor: PenPoint, point: PenPoint): PenPoint {
+  return {
+    x: anchor.x - (point.x - anchor.x),
+    y: anchor.y - (point.y - anchor.y),
+  };
+}
+
+function formatPoint(point: PenPoint) {
+  return `${roundCoord(point.x)} ${roundCoord(point.y)}`;
+}
+
+function roundCoord(value: number) {
+  return Math.round(value * 10) / 10;
+}
+
+function samePoint(a: PenPoint, b: PenPoint) {
+  return a.x === b.x && a.y === b.y;
+}
+
+function isPenPoint(point: PenPoint | undefined): point is PenPoint {
+  return !!point;
+}