@agent-native/core 0.90.1 → 0.90.2

package/corpus/templates/assets/server/lib/image-processing.ts

@@ -1,5 +1,12 @@
 import sharp from "sharp";
 
+import type {
+  AspectRatio,
+  PresetSkeletonForegroundLayer,
+  PresetSkeletonSpec,
+} from "../../shared/api.js";
+import { aspectRatioValue } from "./preset-skeleton.js";
+
 export async function imageInfo(buffer: Buffer): Promise<{
   width: number | null;
   height: number | null;
@@ -81,6 +88,251 @@ export async function compositeLogo(input: {
     .toBuffer();
 }
 
+export async function renderBackground(input: {
+  spec: PresetSkeletonSpec;
+  size: { width: number; height: number };
+  backgroundAsset?: Buffer;
+}): Promise<Buffer> {
+  const { width, height } = input.size;
+  if (!input.backgroundAsset) {
+    throw new Error("Preset skeleton background image is missing.");
+  }
+  return sharp(input.backgroundAsset, { failOn: "none" })
+    .rotate()
+    .resize({ width, height, fit: "cover" })
+    .png()
+    .toBuffer();
+}
+
+export async function maskFromPlateAlpha(plate: Buffer): Promise<Buffer> {
+  return maskFromAlphaChannel({
+    image: plate,
+    transparentError:
+      "gpt-image-2 skeleton inpainting requires a background plate with transparent areas.",
+  });
+}
+
+export async function maskFromManualMaskAlpha(input: {
+  mask: Buffer;
+  plate: Buffer;
+}): Promise<Buffer> {
+  const plateMeta = await sharp(input.plate, { failOn: "none" }).metadata();
+  return maskFromAlphaChannel({
+    image: input.mask,
+    expectedSize: {
+      width: plateMeta.width ?? 0,
+      height: plateMeta.height ?? 0,
+    },
+    sizeError:
+      "Skeleton inpainting mask must be the same pixel size as the background plate.",
+    transparentError:
+      "Skeleton inpainting mask requires transparent areas to mark where the subject may be painted.",
+  });
+}
+
+async function maskFromAlphaChannel(input: {
+  image: Buffer;
+  expectedSize?: { width: number; height: number };
+  sizeError?: string;
+  transparentError: string;
+}): Promise<Buffer> {
+  const { data, info } = await sharp(input.image, { failOn: "none" })
+    .ensureAlpha()
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+  if (
+    input.expectedSize &&
+    (info.width !== input.expectedSize.width ||
+      info.height !== input.expectedSize.height)
+  ) {
+    throw new Error(input.sizeError ?? "Mask image dimensions are invalid.");
+  }
+  const mask = Buffer.alloc(info.width * info.height * 4);
+  let hasTransparentPixels = false;
+  for (let source = 0, target = 0; source < data.length; source += 4) {
+    const alpha = data[source + 3];
+    if (alpha < 255) hasTransparentPixels = true;
+    mask[target++] = 255;
+    mask[target++] = 255;
+    mask[target++] = 255;
+    mask[target++] = alpha;
+  }
+  if (!hasTransparentPixels) {
+    throw new Error(input.transparentError);
+  }
+  return sharp(mask, {
+    raw: {
+      width: info.width,
+      height: info.height,
+      channels: 4,
+    },
+  })
+    .png()
+    .toBuffer();
+}
+
+export async function applyPresetSkeleton(input: {
+  subject: Buffer;
+  spec: PresetSkeletonSpec;
+  canvasSize?: { width: number; height: number };
+  canvasAspectRatio?: AspectRatio;
+  backgroundAsset?: Buffer;
+  canonicalLogo?: Buffer;
+  foregroundAssets?: Record<string, Buffer>;
+}): Promise<Buffer> {
+  const subjectBase = sharp(input.subject, { failOn: "none" }).rotate();
+  const subjectMeta = await subjectBase.metadata();
+  const size =
+    input.canvasSize ??
+    canvasSizeFromAspectRatio({
+      aspectRatio: input.canvasAspectRatio,
+      baseWidth: subjectMeta.width ?? 1024,
+      baseHeight: subjectMeta.height ?? 1024,
+    });
+  const background = await renderBackground({
+    spec: input.spec,
+    size,
+    backgroundAsset: input.backgroundAsset,
+  });
+  const region = normalizeContentRegion(input.spec.contentRegion);
+  const subjectBox = {
+    left: Math.round(size.width * region.x),
+    top: Math.round(size.height * region.y),
+    width: Math.max(1, Math.round(size.width * region.w)),
+    height: Math.max(1, Math.round(size.height * region.h)),
+  };
+  const resizedSubject = await subjectBase
+    .resize({
+      width: subjectBox.width,
+      height: subjectBox.height,
+      fit: input.spec.contentMode === "cutout" ? "contain" : "cover",
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    })
+    .png()
+    .toBuffer();
+  const composites: sharp.OverlayOptions[] = [];
+  if (input.spec.contentMode === "cutout" && input.spec.dropShadow) {
+    composites.push({
+      input: contactShadowSvg(size, subjectBox),
+      top: 0,
+      left: 0,
+    });
+  }
+  composites.push({
+    input: resizedSubject,
+    top: subjectBox.top,
+    left: subjectBox.left,
+  });
+  composites.push(
+    ...(await foregroundCompositeLayers({
+      layers: input.spec.foreground ?? [],
+      canvasSize: size,
+      canonicalLogo: input.canonicalLogo,
+      foregroundAssets: input.foregroundAssets ?? {},
+    })),
+  );
+  return sharp(background, { failOn: "none" })
+    .composite(composites)
+    .png()
+    .toBuffer();
+}
+
+export function canvasSizeFromAspectRatio(input: {
+  aspectRatio?: AspectRatio;
+  baseWidth: number;
+  baseHeight: number;
+}): { width: number; height: number } {
+  const baseWidth = Math.max(1, input.baseWidth);
+  const baseHeight = Math.max(1, input.baseHeight);
+  if (!input.aspectRatio) return { width: baseWidth, height: baseHeight };
+  const requested = aspectRatioValue(input.aspectRatio);
+  const current = baseWidth / baseHeight;
+  if (Math.abs(requested - current) < 0.01) {
+    return { width: baseWidth, height: baseHeight };
+  }
+  if (requested > current) {
+    return {
+      width: Math.max(1, Math.round(baseHeight * requested)),
+      height: baseHeight,
+    };
+  }
+  return {
+    width: baseWidth,
+    height: Math.max(1, Math.round(baseWidth / requested)),
+  };
+}
+
+function normalizeContentRegion(region: PresetSkeletonSpec["contentRegion"]): {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+} {
+  if (!region) return { x: 0, y: 0, w: 1, h: 1 };
+  const x = clamp(region.x, 0, 1);
+  const y = clamp(region.y, 0, 1);
+  return {
+    x,
+    y,
+    w: clamp(region.w, 0.02, 1 - x),
+    h: clamp(region.h, 0.02, 1 - y),
+  };
+}
+
+async function foregroundCompositeLayers(input: {
+  layers: PresetSkeletonForegroundLayer[];
+  canvasSize: { width: number; height: number };
+  canonicalLogo?: Buffer;
+  foregroundAssets: Record<string, Buffer>;
+}): Promise<sharp.OverlayOptions[]> {
+  const overlays: sharp.OverlayOptions[] = [];
+  for (const layer of input.layers) {
+    const source =
+      layer.source === "canonicalLogo"
+        ? input.canonicalLogo
+        : input.foregroundAssets[layer.source.assetId];
+    if (!source) continue;
+    const targetWidth = Math.max(
+      1,
+      Math.round(input.canvasSize.width * clamp(layer.w, 0.02, 1)),
+    );
+    const buffer = await sharp(source, { failOn: "none" })
+      .rotate()
+      .resize({ width: targetWidth, fit: "inside", withoutEnlargement: true })
+      .png()
+      .toBuffer();
+    overlays.push({
+      input: buffer,
+      left: Math.round(input.canvasSize.width * clamp(layer.x, 0, 1)),
+      top: Math.round(input.canvasSize.height * clamp(layer.y, 0, 1)),
+    });
+  }
+  return overlays;
+}
+
+function contactShadowSvg(
+  canvasSize: { width: number; height: number },
+  subjectBox: { left: number; top: number; width: number; height: number },
+): Buffer {
+  const cx = subjectBox.left + subjectBox.width / 2;
+  const cy = subjectBox.top + subjectBox.height * 0.86;
+  const rx = Math.max(12, subjectBox.width * 0.28);
+  const ry = Math.max(6, subjectBox.height * 0.045);
+  const blur = Math.max(
+    6,
+    Math.min(canvasSize.width, canvasSize.height) * 0.018,
+  );
+  return Buffer.from(`<svg width="${canvasSize.width}" height="${canvasSize.height}" viewBox="0 0 ${canvasSize.width} ${canvasSize.height}" xmlns="http://www.w3.org/2000/svg">
+  <defs><filter id="shadow"><feGaussianBlur stdDeviation="${blur}"/></filter></defs>
+  <ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" fill="#000000" opacity="0.24" filter="url(#shadow)"/>
+</svg>`);
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
+}
+
 export function hasRasterImageSignature(
   mimeType: string,
   data: Uint8Array,

package/corpus/templates/assets/server/lib/preset-skeleton.ts

@@ -0,0 +1,137 @@
+import type {
+  AspectRatio,
+  PresetSkeletonForegroundLayer,
+  PresetSkeletonSpec,
+} from "../../shared/api.js";
+
+export function normalizePresetSkeletonSpec(
+  value: unknown,
+): PresetSkeletonSpec | null {
+  if (!value || typeof value !== "object") return null;
+  const raw = value as Record<string, unknown>;
+  const background = normalizeBackground(raw.background);
+  if (!background) return null;
+  const mask = normalizeMask(raw.mask);
+  const contentMode =
+    raw.contentMode === "fill" || raw.contentMode === "cutout"
+      ? raw.contentMode
+      : "fill";
+  const contentRegion = normalizeRegion(raw.contentRegion);
+  const foreground = Array.isArray(raw.foreground)
+    ? raw.foreground
+        .map(normalizeForegroundLayer)
+        .filter((layer): layer is PresetSkeletonForegroundLayer =>
+          Boolean(layer),
+        )
+        .slice(0, 8)
+    : undefined;
+  return {
+    background,
+    ...(mask ? { mask } : {}),
+    contentMode,
+    ...(contentRegion ? { contentRegion } : {}),
+    ...(raw.dropShadow === true ? { dropShadow: true } : {}),
+    ...(foreground?.length ? { foreground } : {}),
+  };
+}
+
+function normalizeMask(value: unknown): PresetSkeletonSpec["mask"] | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (record.type === "asset" && typeof record.assetId === "string") {
+    const assetId = record.assetId.trim();
+    return assetId ? { type: "asset", assetId } : null;
+  }
+  return null;
+}
+
+export function skeletonUsesCanonicalLogo(
+  spec: PresetSkeletonSpec | null | undefined,
+): boolean {
+  return Boolean(
+    spec?.foreground?.some((layer) => layer.source === "canonicalLogo"),
+  );
+}
+
+export function clampCutoutAspectRatio(input: {
+  aspectRatio: AspectRatio;
+  supported: readonly AspectRatio[];
+}): AspectRatio {
+  if (input.supported.includes(input.aspectRatio)) return input.aspectRatio;
+  const requested = aspectRatioValue(input.aspectRatio);
+  return [...input.supported].sort(
+    (left, right) =>
+      Math.abs(aspectRatioValue(left) - requested) -
+      Math.abs(aspectRatioValue(right) - requested),
+  )[0];
+}
+
+export function aspectRatioValue(aspectRatio: AspectRatio | string): number {
+  const [w, h] = String(aspectRatio)
+    .split(":")
+    .map((part) => Number(part));
+  return Number.isFinite(w) && Number.isFinite(h) && h > 0 ? w / h : 1;
+}
+
+function normalizeBackground(
+  value: unknown,
+): PresetSkeletonSpec["background"] | null {
+  if (!value || typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  if (record.type === "asset" && typeof record.assetId === "string") {
+    const assetId = record.assetId.trim();
+    return assetId ? { type: "asset", assetId } : null;
+  }
+  return null;
+}
+
+function normalizeForegroundLayer(
+  value: unknown,
+): PresetSkeletonForegroundLayer | null {
+  if (!value || typeof value !== "object") return null;
+  const raw = value as Record<string, unknown>;
+  let source: PresetSkeletonForegroundLayer["source"] | null = null;
+  if (raw.source === "canonicalLogo") {
+    source = "canonicalLogo";
+  } else if (
+    raw.source &&
+    typeof raw.source === "object" &&
+    typeof (raw.source as Record<string, unknown>).assetId === "string"
+  ) {
+    source = { assetId: (raw.source as { assetId: string }).assetId };
+  }
+  if (!source) return null;
+  return {
+    source,
+    x: clampNumber(raw.x, 0, 1, 0.78),
+    y: clampNumber(raw.y, 0, 1, 0.06),
+    w: clampNumber(raw.w, 0.02, 1, 0.16),
+  };
+}
+
+function normalizeRegion(value: unknown) {
+  if (!value || typeof value !== "object") return null;
+  const raw = value as Record<string, unknown>;
+  return {
+    x: clampNumber(raw.x, 0, 1, 0),
+    y: clampNumber(raw.y, 0, 1, 0),
+    w: clampNumber(raw.w, 0.02, 1, 1),
+    h: clampNumber(raw.h, 0.02, 1, 1),
+  };
+}
+
+function clampNumber(
+  value: unknown,
+  min: number,
+  max: number,
+  fallback: number,
+): number {
+  const numberValue =
+    typeof value === "number"
+      ? value
+      : typeof value === "string"
+        ? Number(value)
+        : Number.NaN;
+  if (!Number.isFinite(numberValue)) return fallback;
+  return Math.min(max, Math.max(min, numberValue));
+}

package/corpus/templates/assets/shared/api.ts

@@ -8,6 +8,7 @@ export const IMAGE_CATEGORIES = [
   "social",
   "campaign",
   "style-only",
+  "skeleton",
   "other",
 ] as const;
 
@@ -38,8 +39,29 @@ export const IMAGE_MODELS = [
   "gemini-3.1-flash-image-preview",
   "gemini-3-pro-image-preview",
   "gemini-2.5-flash-image",
+  "gpt-image-1",
+  "gpt-image-2",
 ] as const;
 
+// Per-model aspect-ratio constraints. Mirrors the image service catalog's
+// `supportedAspectRatios` (see the ai-services image-generation catalog). Models
+// omitted here accept the full ASPECT_RATIOS set. GPT image models map each
+// aspect ratio to a fixed OpenAI resolution and support only these three; other
+// ratios are rejected upstream with `unsupported_aspect_ratio`. Keep this in
+// sync with the catalog until the picker sources it dynamically from `/discover`.
+export const MODEL_ASPECT_RATIOS: Partial<
+  Record<ImageModel, readonly AspectRatio[]>
+> = {
+  "gpt-image-1": ["1:1", "2:3", "3:2"],
+  "gpt-image-2": ["1:1", "2:3", "3:2"],
+};
+
+export function supportedAspectRatiosForModel(
+  model: ImageModel,
+): readonly AspectRatio[] {
+  return MODEL_ASPECT_RATIOS[model] ?? ASPECT_RATIOS;
+}
+
 export const GENERATION_INTENTS = ["generate", "restyle", "edit"] as const;
 
 export const STYLE_STRENGTHS = ["subtle", "balanced", "strong"] as const;
@@ -79,6 +101,7 @@ export type ImageRole =
   | "product_reference"
   | "diagram_reference"
   | "video_reference"
+  | "background_reference"
   | "subject_reference"
   | "edit_target"
   | "generated";
@@ -120,6 +143,29 @@ export interface StyleBrief {
   doNot?: string[];
 }
 
+export type PresetSkeletonBackground = { type: "asset"; assetId: string };
+export type PresetSkeletonMask = { type: "asset"; assetId: string };
+
+export type PresetSkeletonForegroundSource =
+  | "canonicalLogo"
+  | { assetId: string };
+
+export interface PresetSkeletonForegroundLayer {
+  source: PresetSkeletonForegroundSource;
+  x: number;
+  y: number;
+  w: number;
+}
+
+export interface PresetSkeletonSpec {
+  background: PresetSkeletonBackground;
+  mask?: PresetSkeletonMask;
+  contentMode: "cutout" | "fill";
+  contentRegion?: { x: number; y: number; w: number; h: number };
+  dropShadow?: boolean;
+  foreground?: PresetSkeletonForegroundLayer[];
+}
+
 export interface ImageLibrarySummary {
   id: string;
   title: string;
@@ -130,6 +176,7 @@ export interface ImageLibrarySummary {
   canonicalLogoAssetId?: string | null;
   coverAssetId?: string | null;
   visibility?: string;
+  accessRole?: "owner" | "admin" | "editor" | "viewer";
   archivedAt?: string | null;
   createdAt?: string;
   updatedAt?: string;

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -361,7 +361,8 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
             <>
               <div className="px-3 py-3">
                 <Button
-                  className="w-full gap-1.5 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90"
+                  className="w-full gap-1.5"
+                  variant="outline"
                   size="sm"
                   asChild
                 >
@@ -563,7 +564,11 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   {t("navigation.desktopBody")}
                 </span>
               </div>
-              <CaptureInstallButton size="sm" className="shrink-0">
+              <CaptureInstallButton
+                variant="outline"
+                size="sm"
+                className="shrink-0"
+              >
                 Download
               </CaptureInstallButton>
               <Tooltip>

package/corpus/templates/clips/app/components/library/sort-menu.tsx

@@ -25,7 +25,7 @@ export function SortMenu({ value, onChange }: SortMenuProps) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-1.5 h-8">
+        <Button variant="outline" size="sm" className="gap-1.5 h-9">
           <IconArrowsSort className="h-3.5 w-3.5" />
           <span className="text-xs">{LABELS[value]}</span>
         </Button>