@mevdragon/vidfarm-devcli 0.18.0 → 0.19.0

package/dist/src/primitive-registry.js

@@ -110,6 +110,58 @@ const removeBackgroundImagePayloadSchema = z.preprocess((raw) => {
     source_image_url: z.string().url(),
     output_format: z.enum(["png", "jpeg", "webp"]).default("webp")
 }));
+// Transparent-capable output only (jpeg has no alpha) for the chroma-key routes.
+const alphaOutputFormatSchema = z.enum(["png", "webp"]).default("png");
+const greenscreenRemoveBackgroundPayloadSchema = z.preprocess((raw) => {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return raw;
+    const p = raw;
+    return {
+        ...p,
+        source_image_url: p.source_image_url ?? p.image_url ?? p.imageUrl ?? p.url,
+        key_color: p.key_color ?? p.keyColor ?? p.background_color ?? p.backgroundColor ?? p.color,
+        tolerance: p.tolerance ?? p.threshold,
+        softness: p.softness ?? p.feather,
+        despill: p.despill ?? p.spill_suppression ?? p.spillSuppression
+    };
+}, z.object({
+    source_image_url: z.string().url(),
+    // The background color to key out. Green by default; pass white/#FFFFFF,
+    // blue, or any hex/rgb/named color to key a different flat background.
+    key_color: z.string().min(1).max(64).default("#00FF00"),
+    // Base similarity radius (0..1). Larger = more aggressive removal.
+    tolerance: z.coerce.number().min(0).max(1).default(0.3),
+    // Feather band beyond `tolerance` for soft anti-aliased edges (0..1).
+    softness: z.coerce.number().min(0).max(1).default(0.1),
+    // Suppress residual key-color fringe on the subject's edges.
+    despill: z.boolean().default(true),
+    output_format: alphaOutputFormatSchema
+}));
+const mediaOverlayPayloadSchema = z.preprocess((raw) => {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw))
+        return raw;
+    const p = raw;
+    return {
+        ...p,
+        key_color: p.key_color ?? p.keyColor ?? p.background_color ?? p.backgroundColor,
+        tolerance: p.tolerance ?? p.threshold,
+        softness: p.softness ?? p.feather,
+        despill: p.despill ?? p.spill_suppression ?? p.spillSuppression,
+        prompt_attachments: p.prompt_attachments ?? p.promptAttachments ?? p.reference_attachments
+    };
+}, z.object({
+    provider: imageProviderSchema.optional(),
+    model: z.string().min(1).optional(),
+    prompt: z.string().min(3).max(8000),
+    prompt_attachments: z.array(z.string().url()).max(16).default([]),
+    aspect_ratio: aspectRatioSchema,
+    image_size: imageSizeSchema,
+    key_color: z.string().min(1).max(64).default("#00FF00"),
+    tolerance: z.coerce.number().min(0).max(1).default(0.3),
+    softness: z.coerce.number().min(0).max(1).default(0.1),
+    despill: z.boolean().default(true),
+    output_format: alphaOutputFormatSchema
+}));
 const renderHtmlImagePayloadSchema = z.object({
     width: z.number().int().min(16).max(4096).default(1080),
     height: z.number().int().min(16).max(4096).default(1920),
@@ -634,6 +686,8 @@ const PRIMITIVE_IMAGE_EDIT_ID = "primitive:image_edit";
 const PRIMITIVE_IMAGE_INPAINT_ID = "primitive:image_inpaint";
 const PRIMITIVE_IMAGE_RENDER_HTML_ID = "primitive:image_render_html";
 const PRIMITIVE_IMAGE_REMOVE_BACKGROUND_ID = "primitive:image_remove_background";
+const PRIMITIVE_IMAGE_REMOVE_BACKGROUND_GREENSCREEN_ID = "primitive:image_remove_background_greenscreen";
+const PRIMITIVE_MEDIA_OVERLAY_ID = "primitive:media_overlay";
 const PRIMITIVE_VIDEO_GENERATE_ID = "primitive:video_generate";
 const PRIMITIVE_VIDEO_RENDER_SLIDES_ID = "primitive:video_render_slides";
 const PRIMITIVE_VIDEO_NORMALIZE_ID = "primitive:video_normalize";
@@ -963,6 +1017,172 @@ const imageRemoveBackgroundPrimitive = definePrimitive({
         }
     }
 });
+const imageRemoveBackgroundGreenscreenPrimitive = definePrimitive({
+    id: PRIMITIVE_IMAGE_REMOVE_BACKGROUND_GREENSCREEN_ID,
+    kind: "image_remove_background_greenscreen",
+    operations: {
+        run: {
+            description: "Cheap local chroma-key background removal. Drops a flat, solid key-color background (green screen by default; pass key_color for white/blue/any flat fill) to a transparent PNG/WebP cut-out using sharp — no third-party API, compute only. Ideal for images you generated on a controlled solid background; for arbitrary photos with a messy background use image_remove_background (RapidAPI matting) instead.",
+            inputSchema: greenscreenRemoveBackgroundPayloadSchema,
+            workflow: "run"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = greenscreenRemoveBackgroundPayloadSchema.parse(input);
+            const sourceUrl = payload.source_image_url;
+            ctx.logger.progress(0.2, "Downloading source image for chroma key", { sourceUrl });
+            const source = await fetchRemoteBinary(sourceUrl, "image/png");
+            ctx.logger.progress(0.5, "Keying out background", { keyColor: payload.key_color });
+            const keyed = await chromaKeyRemoveBackground(source.bytes, {
+                keyColor: payload.key_color,
+                tolerance: payload.tolerance,
+                softness: payload.softness,
+                despill: payload.despill,
+                outputFormat: payload.output_format
+            });
+            const stored = await storePrimitiveImage(ctx, {
+                key: `output.${keyed.contentType === "image/webp" ? "webp" : "png"}`,
+                bytes: keyed.bytes,
+                contentType: keyed.contentType,
+                metadata: {
+                    primitive: "image_remove_background_greenscreen",
+                    source_image_url: sourceUrl,
+                    key_color: payload.key_color,
+                    tolerance: payload.tolerance,
+                    softness: payload.softness,
+                    despill: payload.despill,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            });
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.GREENSCREEN_CHROMA_KEY_COST_USD,
+                costCenterSlug: "greenscreen_chroma_key",
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "remove-background-greenscreen",
+                    source_image_url: sourceUrl,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    output_key: stored.key
+                }
+            });
+            ctx.logger.progress(1, "Chroma-key background removal complete");
+            return {
+                progress: 1,
+                output: {
+                    ...buildImagePrimitiveOutput({
+                        fileUrl: stored.url,
+                        contentType: keyed.contentType,
+                        derivedFromUrl: sourceUrl,
+                        files: compactUrls([stored.url])
+                    }),
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            };
+        }
+    }
+});
+const mediaOverlayPrimitive = definePrimitive({
+    id: PRIMITIVE_MEDIA_OVERLAY_ID,
+    kind: "media_overlay",
+    operations: {
+        run: {
+            description: "Create a transparent-background media overlay in ONE job: generate an AI image of the subject on a forced flat key-color background (using the caller's own BYOK image keys), then chroma-key that background out to a ready-to-composite transparent PNG/WebP. This is the go-to way to mint 'Vox-style' floating illustrations, props, icons, or cut-out characters to animate over a composition — prefer it over generate-then-manually-remove.",
+            inputSchema: mediaOverlayPayloadSchema,
+            workflow: "run",
+            providerHint: "openai"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = mediaOverlayPayloadSchema.parse(input);
+            const provider = payload.provider ?? "openai";
+            const model = payload.model ?? defaultImageModelForProvider(provider);
+            const keyRgb = parseKeyColor(payload.key_color);
+            const keyLabel = describeKeyColor(payload.key_color, keyRgb);
+            const augmentedPrompt = buildOverlayGenerationPrompt(payload.prompt, payload.key_color, keyLabel);
+            ctx.logger.progress(0.12, "Generating overlay subject on flat key-color background", { provider, model, keyColor: payload.key_color });
+            const generated = await ctx.providers.generateImage({
+                provider,
+                model,
+                prompt: augmentedPrompt,
+                promptAttachments: payload.prompt_attachments,
+                aspectRatio: payload.aspect_ratio,
+                imageSize: payload.image_size
+            });
+            // Keep the raw key-color frame as an artifact for debugging / re-keying at
+            // different tolerances without paying for a second generation.
+            const normalizedSource = await normalizePrimitiveImageOutput(generated.bytes, "png");
+            const sourceStored = await storePrimitiveImage(ctx, {
+                key: "source-greenscreen.png",
+                bytes: normalizedSource.bytes,
+                contentType: normalizedSource.contentType,
+                metadata: {
+                    primitive: "media_overlay",
+                    stage: "greenscreen_source",
+                    prompt: payload.prompt,
+                    key_color: payload.key_color,
+                    revised_prompt: generated.revisedPrompt
+                }
+            });
+            ctx.logger.progress(0.62, "Keying out background", { keyColor: payload.key_color });
+            const keyed = await chromaKeyRemoveBackground(generated.bytes, {
+                keyColor: payload.key_color,
+                tolerance: payload.tolerance,
+                softness: payload.softness,
+                despill: payload.despill,
+                outputFormat: payload.output_format
+            });
+            const stored = await storePrimitiveImage(ctx, {
+                key: `output.${keyed.contentType === "image/webp" ? "webp" : "png"}`,
+                bytes: keyed.bytes,
+                contentType: keyed.contentType,
+                metadata: {
+                    primitive: "media_overlay",
+                    stage: "transparent_overlay",
+                    prompt: payload.prompt,
+                    provider,
+                    model,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    revised_prompt: generated.revisedPrompt
+                }
+            });
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.MEDIA_OVERLAY_COST_USD,
+                costCenterSlug: "media_overlay",
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "create-media-overlay",
+                    prompt: payload.prompt,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction,
+                    output_key: stored.key,
+                    greenscreen_source_key: sourceStored.key
+                }
+            });
+            ctx.logger.progress(1, "Media overlay ready");
+            return {
+                progress: 1,
+                output: {
+                    ...buildImagePrimitiveOutput({
+                        fileUrl: stored.url,
+                        contentType: keyed.contentType,
+                        revisedPrompt: generated.revisedPrompt,
+                        files: compactUrls([stored.url, sourceStored.url])
+                    }),
+                    greenscreen_source_url: sourceStored.url,
+                    key_color: payload.key_color,
+                    keyed_fraction: keyed.keyedFraction
+                }
+            };
+        }
+    }
+});
 const videoGeneratePrimitive = definePrimitive({
     id: PRIMITIVE_VIDEO_GENERATE_ID,
     kind: "video_generate",
@@ -1285,13 +1505,58 @@ const videoDownloadPrimitive = definePrimitive({
                     upstream_source: lookup.source ?? null
                 }
             });
+            // Re-host a DURABLE poster so the frontend never depends on the ephemeral
+            // third-party `lookup.thumbnail` URL. Prefer extracting a frame from the
+            // MP4 we just stored (works even when the provider gives no thumbnail);
+            // fall back to re-hosting the provider thumbnail bytes. Best-effort.
+            let durableThumbnailUrl = null;
+            ctx.logger.progress(0.7, "Extracting thumbnail frame");
+            try {
+                const frame = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_extract_frame",
+                    payload: { source_video_url: storedVideo.url, at_ms: 1000, output_format: "jpeg" },
+                    outputKey: "thumbnail.jpg"
+                });
+                durableThumbnailUrl = frame.publicUrl;
+            }
+            catch (error) {
+                ctx.logger.progress(0.75, "Thumbnail frame extraction skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            if (!durableThumbnailUrl && lookup.thumbnail) {
+                try {
+                    const remoteThumb = await fetchRemoteBinary(lookup.thumbnail, "image/jpeg");
+                    const thumbContentType = remoteThumb.contentType.startsWith("image/") ? remoteThumb.contentType : "image/jpeg";
+                    const storedThumb = await storePrimitiveImage(ctx, {
+                        key: "thumbnail.jpg",
+                        bytes: remoteThumb.bytes,
+                        contentType: thumbContentType,
+                        metadata: {
+                            primitive: "video_download",
+                            operation: "download-video",
+                            source_url: sourceUrl,
+                            rehosted_from: lookup.thumbnail
+                        }
+                    });
+                    durableThumbnailUrl = storedThumb.url;
+                }
+                catch (error) {
+                    ctx.logger.progress(0.78, "Thumbnail re-host skipped", {
+                        error: error instanceof Error ? error.message : String(error)
+                    });
+                }
+            }
             const manifest = {
                 primitive: "video_download",
                 operation: "download-video",
                 sourceUrl,
                 sourceHost,
                 title: lookup.title ?? null,
-                thumbnail: lookup.thumbnail ?? null,
+                // Raw ephemeral third-party thumbnail (kept for provenance) plus the
+                // durable re-hosted poster the finalizer/frontend should actually use.
+                thumbnail: durableThumbnailUrl ?? lookup.thumbnail ?? null,
+                rawThumbnail: lookup.thumbnail ?? null,
                 duration: lookup.duration ?? null,
                 source: lookup.source ?? null,
                 selectedMedia: {
@@ -1336,19 +1601,22 @@ const videoDownloadPrimitive = definePrimitive({
             });
             ctx.logger.progress(1, "Video download complete", {
                 videoUrl: storedVideo.url,
-                sourceHost
+                sourceHost,
+                thumbnailUrl: durableThumbnailUrl
             });
             return {
                 progress: 1,
                 output: {
-                    files: compactUrls([storedVideo.url, manifestArtifact?.url]),
+                    files: compactUrls([storedVideo.url, durableThumbnailUrl, manifestArtifact?.url]),
                     sourceUrl,
                     sourceHost,
                     videoUrl: storedVideo.url,
                     sourceVideoUrl: storedVideo.url,
                     primary_file_url: storedVideo.url,
                     title: lookup.title ?? null,
-                    thumbnail: lookup.thumbnail ?? null,
+                    // Durable re-hosted poster (falls back to the raw provider thumbnail).
+                    thumbnailUrl: durableThumbnailUrl ?? lookup.thumbnail ?? null,
+                    thumbnail: durableThumbnailUrl ?? lookup.thumbnail ?? null,
                     duration: lookup.duration ?? null,
                     selectedMediaUrl: selectedMedia.url,
                     manifest: manifestArtifact
@@ -2824,6 +3092,8 @@ class PrimitiveRegistry {
         [imageInpaintPrimitive.id, imageInpaintPrimitive],
         [imageRenderHtmlPrimitive.id, imageRenderHtmlPrimitive],
         [imageRemoveBackgroundPrimitive.id, imageRemoveBackgroundPrimitive],
+        [imageRemoveBackgroundGreenscreenPrimitive.id, imageRemoveBackgroundGreenscreenPrimitive],
+        [mediaOverlayPrimitive.id, mediaOverlayPrimitive],
         [videoGeneratePrimitive.id, videoGeneratePrimitive],
         [videoRenderSlidesPrimitive.id, videoRenderSlidesPrimitive],
         [mediaDedupePrimitive.id, mediaDedupePrimitive],
@@ -3017,6 +3287,141 @@ async function normalizePrimitiveImageOutput(bytes, format) {
         contentType: "image/png"
     };
 }
+function clampByte(value) {
+    const n = Math.round(Number.isFinite(value) ? value : 0);
+    return Math.max(0, Math.min(255, n));
+}
+const NAMED_KEY_COLORS = {
+    green: [0, 255, 0],
+    lime: [0, 255, 0],
+    "chroma-green": [0, 177, 64],
+    "chromakey-green": [0, 177, 64],
+    white: [255, 255, 255],
+    black: [0, 0, 0],
+    blue: [0, 0, 255],
+    "chroma-blue": [0, 71, 187],
+    "chromakey-blue": [0, 71, 187],
+    red: [255, 0, 0],
+    magenta: [255, 0, 255],
+    cyan: [0, 255, 255],
+    gray: [128, 128, 128],
+    grey: [128, 128, 128]
+};
+// Parse a key color from hex (#rgb / #rrggbb), rgb()/rgba() triples, or a small
+// set of named colors. Throws on anything unrecognized so a typo surfaces
+// instead of silently keying out the wrong color.
+function parseKeyColor(value) {
+    const raw = value.trim().toLowerCase();
+    const named = NAMED_KEY_COLORS[raw];
+    if (named) {
+        return { r: named[0], g: named[1], b: named[2] };
+    }
+    const rgbMatch = raw.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (rgbMatch) {
+        return { r: clampByte(Number(rgbMatch[1])), g: clampByte(Number(rgbMatch[2])), b: clampByte(Number(rgbMatch[3])) };
+    }
+    let hex = raw.startsWith("#") ? raw.slice(1) : raw;
+    if (/^[0-9a-f]{3}$/.test(hex)) {
+        hex = hex.split("").map((ch) => ch + ch).join("");
+    }
+    if (/^[0-9a-f]{6}$/.test(hex)) {
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16)
+        };
+    }
+    throw new Error(`Unrecognized key_color "${value}". Use a hex value (e.g. #00FF00), an rgb(...) triple, or a named color (green/white/blue/black).`);
+}
+// A plain-English label for the key color so the image-generation prompt can
+// tell the model exactly which flat background to paint.
+function describeKeyColor(raw, rgb) {
+    const named = raw.trim().toLowerCase();
+    if (/green|lime/.test(named))
+        return "chroma green";
+    if (/blue/.test(named))
+        return "chroma blue";
+    if (named === "white" || (rgb.r > 240 && rgb.g > 240 && rgb.b > 240))
+        return "solid white";
+    if (named === "black" || (rgb.r < 15 && rgb.g < 15 && rgb.b < 15))
+        return "solid black";
+    if (rgb.g > rgb.r && rgb.g > rgb.b)
+        return "chroma green";
+    if (rgb.b > rgb.r && rgb.b > rgb.g)
+        return "chroma blue";
+    return "flat solid";
+}
+function buildOverlayGenerationPrompt(subject, keyHex, keyLabel) {
+    return [
+        subject.trim(),
+        "",
+        `BACKGROUND REQUIREMENT (critical for clean keying): render ONLY the subject, fully in frame, on a completely flat, uniform, evenly-lit ${keyLabel} background (target color ${keyHex}). The background must be one single solid ${keyLabel} fill — absolutely NO gradient, NO vignette, NO cast shadows or reflections on the background, and NO ${keyLabel} tones anywhere on the subject itself (avoid ${keyLabel} clothing, props, or rim light). Do not add any border, frame, text, or watermark. Give the subject clean, crisp edges against the ${keyLabel} so it can be cut out to a transparent PNG.`
+    ].join("\n");
+}
+// Local chroma-key background removal. Distance-thresholds every pixel against
+// the key color: within `tolerance` becomes fully transparent, a `softness`
+// feather band anti-aliases the edge, and (for chromatic keys) a classic
+// despill clamps the key's dominant channel so no colored fringe survives.
+async function chromaKeyRemoveBackground(source, options) {
+    const key = parseKeyColor(options.keyColor);
+    const buffer = Buffer.isBuffer(source) ? source : Buffer.from(source);
+    const { data, info } = await sharp(buffer).ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+    const channels = info.channels;
+    const maxDist = Math.sqrt(3) * 255;
+    const inner = Math.max(0, options.tolerance) * maxDist;
+    const outer = Math.max(inner + 1e-6, (options.tolerance + Math.max(0, options.softness)) * maxDist);
+    const keyChannels = [key.r, key.g, key.b];
+    const keyChroma = Math.max(...keyChannels) - Math.min(...keyChannels);
+    // Only despill chromatic keys (green/blue/etc.); white/gray/black have no hue
+    // fringe to suppress and clamping them would tint the subject.
+    const doDespill = options.despill && keyChroma >= 40;
+    const dominant = keyChannels.indexOf(Math.max(...keyChannels));
+    let keyedPixels = 0;
+    const totalPixels = info.width * info.height;
+    for (let i = 0; i < data.length; i += channels) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const baseAlpha = channels === 4 ? data[i + 3] : 255;
+        const dr = r - key.r;
+        const dg = g - key.g;
+        const db = b - key.b;
+        const dist = Math.sqrt(dr * dr + dg * dg + db * db);
+        let alpha;
+        if (dist <= inner) {
+            alpha = 0;
+            keyedPixels++;
+        }
+        else if (dist >= outer) {
+            alpha = baseAlpha;
+        }
+        else {
+            const t = (dist - inner) / (outer - inner);
+            alpha = Math.round(baseAlpha * t);
+        }
+        if (doDespill && alpha > 0) {
+            if (dominant === 1)
+                data[i + 1] = Math.min(g, Math.max(r, b));
+            else if (dominant === 0)
+                data[i] = Math.min(r, Math.max(g, b));
+            else
+                data[i + 2] = Math.min(b, Math.max(r, g));
+        }
+        if (channels === 4)
+            data[i + 3] = alpha;
+    }
+    const encoded = sharp(data, { raw: { width: info.width, height: info.height, channels } });
+    const bytes = options.outputFormat === "webp"
+        ? await encoded.webp({ quality: 92, alphaQuality: 100 }).toBuffer()
+        : await encoded.png().toBuffer();
+    return {
+        bytes,
+        contentType: options.outputFormat === "webp" ? "image/webp" : "image/png",
+        width: info.width,
+        height: info.height,
+        keyedFraction: totalPixels > 0 ? keyedPixels / totalPixels : 0
+    };
+}
 async function recordPrimitiveProviderBilling(ctx, generated, kind) {
     if (!Number.isFinite(generated.usageCostUsd) || generated.usageCostUsd <= 0) {
         return;

package/dist/src/reskin/agency-page.js

@@ -74,7 +74,7 @@ export function renderReskinAgency(input = { userId: null, currentAccountId: nul
 .rk-agency-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
 .rk-agency-head-copy{display:grid;gap:4px;min-width:0}
 .rk-agency-head-cta{display:flex;align-items:center;gap:12px;flex:none}
-.rk-agency-hint{font-size:13px;color:var(--rk-text-muted);white-space:nowrap}
+.rk-agency-hint{font-size:13px;color:var(--rk-text-muted);white-space:normal;overflow-wrap:anywhere}
 @media(max-width:760px){.rk-agency-head{grid-template-columns:1fr}.rk-agency-head-cta{flex-wrap:wrap}}
 
 .rk-agency-panel{background:var(--rk-bg-section);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);padding:24px}

package/dist/src/reskin/calendar-page.js

@@ -161,7 +161,7 @@ export function renderReskinCalendar(input = DEFAULT_INPUT) {
 
 /* two-column shell: channel rail left, compact month board right */
 .rk-calendar-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
-@media(max-width:960px){.rk-calendar-shell{grid-template-columns:1fr}}
+@media(max-width:1000px){.rk-calendar-shell{grid-template-columns:1fr}}
 
 /* ── channel rail ── */
 .rk-calendar-rail{display:grid;gap:10px;background:#fff;border:1px solid var(--rk-border);
@@ -210,6 +210,7 @@ export function renderReskinCalendar(input = DEFAULT_INPUT) {
 .rk-calendar-monthnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .rk-calendar-month{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);letter-spacing:-.02em;color:var(--rk-ink);min-width:7.4rem;text-align:center}
 .rk-calendar-navbtn{width:32px;height:32px;padding:0;font-size:14px;line-height:1}
+@media(hover:none){.rk-calendar-navbtn{width:40px;height:40px}}
 .rk-calendar-today-btn{margin-left:2px;padding:5px 11px;font-size:12.5px}
 .rk-calendar-sync{font-size:12px;font-weight:600;color:var(--rk-text-muted);margin-left:4px}
 .rk-calendar-sync.is-error{color:var(--rk-red)}