@saastro/studio 0.3.4 → 0.4.0

package/dist/{chunk-WBTB3A3Y.js → chunk-5EXFBVC2.js}

@@ -3,7 +3,7 @@ import {
   injectVersionMetaTag,
   injectVisibilityStyle,
   readVisibilityConfigSync
-} from "./chunk-RKHQDJVM.js";
+} from "./chunk-IPVMSMB4.js";
 
 // src/vite/index.ts
 import { promises as fs } from "node:fs";
@@ -1284,4 +1284,4 @@ async function loadTsx(path) {
 export {
   studioAutoWrap
 };
-//# sourceMappingURL=chunk-WBTB3A3Y.js.map
+//# sourceMappingURL=chunk-5EXFBVC2.js.map

package/dist/chunk-FLFH5RVH.js

@@ -0,0 +1,10 @@
+// src/helpers/editable-image.ts
+function editableImage(fieldPrefix) {
+  if (!fieldPrefix) return {};
+  return { "data-saastro": `img:${fieldPrefix}` };
+}
+
+export {
+  editableImage
+};
+//# sourceMappingURL=chunk-FLFH5RVH.js.map

package/dist/chunk-FLFH5RVH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/helpers/editable-image.ts"],"sourcesContent":["import type { EditableAttrs } from './types.js'\n\n/**\n * Image marker — drop on `<img>` elements so Studio can offer an\n * image picker on click without leaving the preview.\n *\n * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.\n */\nexport function editableImage(fieldPrefix: string | undefined): EditableAttrs {\n  if (!fieldPrefix) return {}\n  return { 'data-saastro': `img:${fieldPrefix}` }\n}\n"],"mappings":";AAQO,SAAS,cAAc,aAAgD;AAC5E,MAAI,CAAC,YAAa,QAAO,CAAC;AAC1B,SAAO,EAAE,gBAAgB,OAAO,WAAW,GAAG;AAChD;","names":[]}

package/dist/{chunk-RKHQDJVM.js → chunk-IPVMSMB4.js}

@@ -1,6 +1,6 @@
 // src/vite/meta-tag.ts
 var STUDIO_PROTOCOL_VERSION = "2";
-var PACKAGE_VERSION = "0.3.4".length > 0 ? "0.3.4" : "0.0.0+unknown";
+var PACKAGE_VERSION = "0.4.0".length > 0 ? "0.4.0" : "0.0.0+unknown";
 var META_TAGS = [
   `<meta name="saastro:studio-version" content="${STUDIO_PROTOCOL_VERSION}">`,
   `<meta name="saastro:studio-package" content="${PACKAGE_VERSION}">`
@@ -68,4 +68,4 @@ export {
   buildVisibilityStyleTag,
   injectVisibilityStyle
 };
-//# sourceMappingURL=chunk-RKHQDJVM.js.map
+//# sourceMappingURL=chunk-IPVMSMB4.js.map

package/dist/{chunk-SPY66EPD.js → chunk-S5K6H6MF.js}

@@ -1,6 +1,6 @@
 import {
   studioAutoWrap
-} from "./chunk-WBTB3A3Y.js";
+} from "./chunk-5EXFBVC2.js";
 
 // src/integration/index.ts
 function saastro(options = {}) {
@@ -25,4 +25,4 @@ function saastro(options = {}) {
 export {
   saastro
 };
-//# sourceMappingURL=chunk-SPY66EPD.js.map
+//# sourceMappingURL=chunk-S5K6H6MF.js.map

package/dist/editable-image-B4UdcCKi.d.ts

@@ -0,0 +1,13 @@
+interface EditableAttrs {
+    [key: string]: string;
+}
+
+/**
+ * Image marker — drop on `<img>` elements so Studio can offer an
+ * image picker on click without leaving the preview.
+ *
+ * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.
+ */
+declare function editableImage(fieldPrefix: string | undefined): EditableAttrs;
+
+export { type EditableAttrs as E, editableImage as e };

package/dist/image/index.d.ts

@@ -0,0 +1,78 @@
+export { e as editableImage } from '../editable-image-B4UdcCKi.js';
+
+type SrcKind = 'repo' | 'r2' | 'remote';
+interface CfTransformOpts {
+    width: number;
+    /** 1–100; default 80. */
+    quality?: number;
+    format?: 'auto';
+    fit?: 'cover' | 'contain' | 'scale-down';
+}
+interface BuildImageInput {
+    /** Original content string: `/images/...` (repo) or `https://media.saastro.io/...` (R2). */
+    src: string;
+    /** srcset breakpoints in px. */
+    widths: number[];
+    /** 1–100; default 80. */
+    quality?: number;
+    fit?: CfTransformOpts['fit'];
+    /** false ⇒ dev / no-CF-edge ⇒ emit the raw src (no transformation). */
+    optimize: boolean;
+    /** Override the media host (default `media.saastro.io`). */
+    mediaHost?: string;
+}
+interface BuildImageResult {
+    /** Element-level src — ALWAYS the original string (the Studio overlay reads this back). */
+    rawSrc: string;
+    /** Width-keyed transformed URLs for `<source srcset>`, or null when not optimizing/transformable. */
+    srcset: string | null;
+    /** Largest transformed URL — for the `<img>` src when the image is NOT editable. */
+    optimizedSrc: string | null;
+    kind: SrcKind;
+}
+interface CfImageUrlOpts {
+    /** Target width in px. */
+    width: number;
+    /** 1–100; default 80. */
+    quality?: number;
+    fit?: CfTransformOpts['fit'];
+    /** Override the media host (default `media.saastro.io`). */
+    mediaHost?: string;
+    /** false ⇒ return the raw src (dev / no CF edge). Default true. */
+    optimize?: boolean;
+}
+
+/** Canonical Saastro media (R2 custom domain). Override per-tenant via `mediaHost`. */
+declare const DEFAULT_MEDIA_HOST = "media.saastro.io";
+declare const DEFAULT_WIDTHS: readonly number[];
+declare const DEFAULT_QUALITY = 80;
+/**
+ * Classify a content image string by where its bytes live:
+ *  - 'repo'   → a `public/` asset referenced root-relative (`/images/...`)
+ *  - 'r2'     → a Saastro media-library upload on the media host
+ *  - 'remote' → any other absolute URL (third-party) → never transformed
+ */
+declare function classifySrc(src: string, mediaHost?: string): SrcKind;
+declare function isTransformable(src: string): boolean;
+/**
+ * Build the element-level `src` plus a transformed `srcset` for a content image.
+ * When `optimize` is false (dev / no CF edge) or the source isn't transformable
+ * (svg/gif/remote), returns the raw src with no srcset so the caller renders a
+ * plain `<img>` — identical to today's behavior, nothing breaks.
+ */
+declare function buildImage(input: BuildImageInput): BuildImageResult;
+/**
+ * Single optimized URL for ONE image — for CSS backgrounds
+ * (`background-image: url(...)`), inline styles, `<meta>` og:image, etc. —
+ * anywhere a `srcset` doesn't apply. Returns the raw src unchanged for
+ * non-transformable sources (svg/gif/remote) or when `optimize` is false, so
+ * it's always safe to drop in.
+ *
+ * Dev-gating note: this is a PURE helper — it can't read `import.meta.env.DEV`
+ * (it runs from the compiled runtime, not the consumer's Vite context). In an
+ * `.astro` file, gate it yourself so local dev serves the raw bytes:
+ *   const bg = cfImageUrl(src, { width: 1920, optimize: !import.meta.env.DEV })
+ */
+declare function cfImageUrl(src: string, opts: CfImageUrlOpts): string;
+
+export { type BuildImageInput, type BuildImageResult, type CfImageUrlOpts, type CfTransformOpts, DEFAULT_MEDIA_HOST, DEFAULT_QUALITY, DEFAULT_WIDTHS, type SrcKind, buildImage, cfImageUrl, classifySrc, isTransformable };

package/dist/image/index.js

@@ -0,0 +1,75 @@
+import {
+  editableImage
+} from "../chunk-FLFH5RVH.js";
+
+// src/image/cf-image.ts
+var DEFAULT_MEDIA_HOST = "media.saastro.io";
+var DEFAULT_WIDTHS = [480, 768, 1024, 1536, 2048];
+var DEFAULT_QUALITY = 80;
+var NO_TRANSFORM_EXT = /\.(svg|gif|ico|avif)$/i;
+function classifySrc(src, mediaHost = DEFAULT_MEDIA_HOST) {
+  if (src.startsWith("/")) return "repo";
+  try {
+    const u = new URL(src);
+    return u.host === mediaHost ? "r2" : "remote";
+  } catch {
+    return "repo";
+  }
+}
+function isTransformable(src) {
+  const path = src.split(/[?#]/)[0] ?? src;
+  return !NO_TRANSFORM_EXT.test(path);
+}
+function cfOptions(o) {
+  const parts = [
+    `width=${o.width}`,
+    `format=${o.format ?? "auto"}`,
+    `quality=${o.quality ?? DEFAULT_QUALITY}`
+  ];
+  if (o.fit) parts.push(`fit=${o.fit}`);
+  return parts.join(",");
+}
+function cfRepoUrl(src, o) {
+  return `/cdn-cgi/image/${cfOptions(o)}${src}`;
+}
+function cfR2Url(src, o) {
+  const u = new URL(src);
+  return `https://${u.host}/cdn-cgi/image/${cfOptions(o)}${u.pathname}`;
+}
+function buildImage(input) {
+  const mediaHost = input.mediaHost ?? DEFAULT_MEDIA_HOST;
+  const kind = classifySrc(input.src, mediaHost);
+  const canTransform = input.optimize && kind !== "remote" && isTransformable(input.src);
+  if (!canTransform) {
+    return { rawSrc: input.src, srcset: null, optimizedSrc: null, kind };
+  }
+  const quality = input.quality ?? DEFAULT_QUALITY;
+  const widths = input.widths.length > 0 ? input.widths : [...DEFAULT_WIDTHS];
+  const toUrl = (w) => {
+    const o = { width: w, quality, fit: input.fit };
+    return kind === "r2" ? cfR2Url(input.src, o) : cfRepoUrl(input.src, o);
+  };
+  const srcset = widths.map((w) => `${toUrl(w)} ${w}w`).join(", ");
+  const largest = widths[widths.length - 1];
+  const optimizedSrc = toUrl(largest);
+  return { rawSrc: input.src, srcset, optimizedSrc, kind };
+}
+function cfImageUrl(src, opts) {
+  if (opts.optimize === false) return src;
+  const mediaHost = opts.mediaHost ?? DEFAULT_MEDIA_HOST;
+  const kind = classifySrc(src, mediaHost);
+  if (kind === "remote" || !isTransformable(src)) return src;
+  const o = { width: opts.width, quality: opts.quality, fit: opts.fit };
+  return kind === "r2" ? cfR2Url(src, o) : cfRepoUrl(src, o);
+}
+export {
+  DEFAULT_MEDIA_HOST,
+  DEFAULT_QUALITY,
+  DEFAULT_WIDTHS,
+  buildImage,
+  cfImageUrl,
+  classifySrc,
+  editableImage,
+  isTransformable
+};
+//# sourceMappingURL=index.js.map

package/dist/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/image/cf-image.ts"],"sourcesContent":["import type {\n  SrcKind,\n  CfTransformOpts,\n  BuildImageInput,\n  BuildImageResult,\n  CfImageUrlOpts,\n} from './types.js'\n\n/** Canonical Saastro media (R2 custom domain). Override per-tenant via `mediaHost`. */\nexport const DEFAULT_MEDIA_HOST = 'media.saastro.io'\nexport const DEFAULT_WIDTHS: readonly number[] = [480, 768, 1024, 1536, 2048]\nexport const DEFAULT_QUALITY = 80\n\n/** Vector/animated/already-optimal formats CF can't meaningfully resize/recode → serve raw. */\nconst NO_TRANSFORM_EXT = /\\.(svg|gif|ico|avif)$/i\n\n/**\n * Classify a content image string by where its bytes live:\n *  - 'repo'   → a `public/` asset referenced root-relative (`/images/...`)\n *  - 'r2'     → a Saastro media-library upload on the media host\n *  - 'remote' → any other absolute URL (third-party) → never transformed\n */\nexport function classifySrc(src: string, mediaHost: string = DEFAULT_MEDIA_HOST): SrcKind {\n  if (src.startsWith('/')) return 'repo'\n  try {\n    const u = new URL(src)\n    return u.host === mediaHost ? 'r2' : 'remote'\n  } catch {\n    // relative path without a leading slash → treat as a repo asset\n    return 'repo'\n  }\n}\n\nexport function isTransformable(src: string): boolean {\n  const path = src.split(/[?#]/)[0] ?? src\n  return !NO_TRANSFORM_EXT.test(path)\n}\n\nfunction cfOptions(o: CfTransformOpts): string {\n  const parts = [\n    `width=${o.width}`,\n    `format=${o.format ?? 'auto'}`,\n    `quality=${o.quality ?? DEFAULT_QUALITY}`,\n  ]\n  if (o.fit) parts.push(`fit=${o.fit}`)\n  return parts.join(',')\n}\n\n/** Repo asset → root-relative; CF intercepts `/cdn-cgi/image/*` at the zone edge. */\nfunction cfRepoUrl(src: string, o: CfTransformOpts): string {\n  return `/cdn-cgi/image/${cfOptions(o)}${src}`\n}\n\n/** R2 media → transform on the media host where the object + R2 binding live. */\nfunction cfR2Url(src: string, o: CfTransformOpts): string {\n  const u = new URL(src)\n  return `https://${u.host}/cdn-cgi/image/${cfOptions(o)}${u.pathname}`\n}\n\n/**\n * Build the element-level `src` plus a transformed `srcset` for a content image.\n * When `optimize` is false (dev / no CF edge) or the source isn't transformable\n * (svg/gif/remote), returns the raw src with no srcset so the caller renders a\n * plain `<img>` — identical to today's behavior, nothing breaks.\n */\nexport function buildImage(input: BuildImageInput): BuildImageResult {\n  const mediaHost = input.mediaHost ?? DEFAULT_MEDIA_HOST\n  const kind = classifySrc(input.src, mediaHost)\n  const canTransform = input.optimize && kind !== 'remote' && isTransformable(input.src)\n\n  if (!canTransform) {\n    return { rawSrc: input.src, srcset: null, optimizedSrc: null, kind }\n  }\n\n  const quality = input.quality ?? DEFAULT_QUALITY\n  const widths = input.widths.length > 0 ? input.widths : [...DEFAULT_WIDTHS]\n  const toUrl = (w: number): string => {\n    const o: CfTransformOpts = { width: w, quality, fit: input.fit }\n    return kind === 'r2' ? cfR2Url(input.src, o) : cfRepoUrl(input.src, o)\n  }\n\n  const srcset = widths.map((w) => `${toUrl(w)} ${w}w`).join(', ')\n  const largest = widths[widths.length - 1]!\n  const optimizedSrc = toUrl(largest)\n  return { rawSrc: input.src, srcset, optimizedSrc, kind }\n}\n\n/**\n * Single optimized URL for ONE image — for CSS backgrounds\n * (`background-image: url(...)`), inline styles, `<meta>` og:image, etc. —\n * anywhere a `srcset` doesn't apply. Returns the raw src unchanged for\n * non-transformable sources (svg/gif/remote) or when `optimize` is false, so\n * it's always safe to drop in.\n *\n * Dev-gating note: this is a PURE helper — it can't read `import.meta.env.DEV`\n * (it runs from the compiled runtime, not the consumer's Vite context). In an\n * `.astro` file, gate it yourself so local dev serves the raw bytes:\n *   const bg = cfImageUrl(src, { width: 1920, optimize: !import.meta.env.DEV })\n */\nexport function cfImageUrl(src: string, opts: CfImageUrlOpts): string {\n  if (opts.optimize === false) return src\n  const mediaHost = opts.mediaHost ?? DEFAULT_MEDIA_HOST\n  const kind = classifySrc(src, mediaHost)\n  if (kind === 'remote' || !isTransformable(src)) return src\n  const o: CfTransformOpts = { width: opts.width, quality: opts.quality, fit: opts.fit }\n  return kind === 'r2' ? cfR2Url(src, o) : cfRepoUrl(src, o)\n}\n"],"mappings":";;;;;AASO,IAAM,qBAAqB;AAC3B,IAAM,iBAAoC,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AACrE,IAAM,kBAAkB;AAG/B,IAAM,mBAAmB;AAQlB,SAAS,YAAY,KAAa,YAAoB,oBAA6B;AACxF,MAAI,IAAI,WAAW,GAAG,EAAG,QAAO;AAChC,MAAI;AACF,UAAM,IAAI,IAAI,IAAI,GAAG;AACrB,WAAO,EAAE,SAAS,YAAY,OAAO;AAAA,EACvC,QAAQ;AAEN,WAAO;AAAA,EACT;AACF;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,OAAO,IAAI,MAAM,MAAM,EAAE,CAAC,KAAK;AACrC,SAAO,CAAC,iBAAiB,KAAK,IAAI;AACpC;AAEA,SAAS,UAAU,GAA4B;AAC7C,QAAM,QAAQ;AAAA,IACZ,SAAS,EAAE,KAAK;AAAA,IAChB,UAAU,EAAE,UAAU,MAAM;AAAA,IAC5B,WAAW,EAAE,WAAW,eAAe;AAAA,EACzC;AACA,MAAI,EAAE,IAAK,OAAM,KAAK,OAAO,EAAE,GAAG,EAAE;AACpC,SAAO,MAAM,KAAK,GAAG;AACvB;AAGA,SAAS,UAAU,KAAa,GAA4B;AAC1D,SAAO,kBAAkB,UAAU,CAAC,CAAC,GAAG,GAAG;AAC7C;AAGA,SAAS,QAAQ,KAAa,GAA4B;AACxD,QAAM,IAAI,IAAI,IAAI,GAAG;AACrB,SAAO,WAAW,EAAE,IAAI,kBAAkB,UAAU,CAAC,CAAC,GAAG,EAAE,QAAQ;AACrE;AAQO,SAAS,WAAW,OAA0C;AACnE,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,OAAO,YAAY,MAAM,KAAK,SAAS;AAC7C,QAAM,eAAe,MAAM,YAAY,SAAS,YAAY,gBAAgB,MAAM,GAAG;AAErF,MAAI,CAAC,cAAc;AACjB,WAAO,EAAE,QAAQ,MAAM,KAAK,QAAQ,MAAM,cAAc,MAAM,KAAK;AAAA,EACrE;AAEA,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,SAAS,MAAM,OAAO,SAAS,IAAI,MAAM,SAAS,CAAC,GAAG,cAAc;AAC1E,QAAM,QAAQ,CAAC,MAAsB;AACnC,UAAM,IAAqB,EAAE,OAAO,GAAG,SAAS,KAAK,MAAM,IAAI;AAC/D,WAAO,SAAS,OAAO,QAAQ,MAAM,KAAK,CAAC,IAAI,UAAU,MAAM,KAAK,CAAC;AAAA,EACvE;AAEA,QAAM,SAAS,OAAO,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI;AAC/D,QAAM,UAAU,OAAO,OAAO,SAAS,CAAC;AACxC,QAAM,eAAe,MAAM,OAAO;AAClC,SAAO,EAAE,QAAQ,MAAM,KAAK,QAAQ,cAAc,KAAK;AACzD;AAcO,SAAS,WAAW,KAAa,MAA8B;AACpE,MAAI,KAAK,aAAa,MAAO,QAAO;AACpC,QAAM,YAAY,KAAK,aAAa;AACpC,QAAM,OAAO,YAAY,KAAK,SAAS;AACvC,MAAI,SAAS,YAAY,CAAC,gBAAgB,GAAG,EAAG,QAAO;AACvD,QAAM,IAAqB,EAAE,OAAO,KAAK,OAAO,SAAS,KAAK,SAAS,KAAK,KAAK,IAAI;AACrF,SAAO,SAAS,OAAO,QAAQ,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;AAC3D;","names":[]}

package/dist/index.d.ts

@@ -1,12 +1,9 @@
 import saastro from './integration/index.js';
 export { SaastroStudioOptions } from './integration/index.js';
+import { E as EditableAttrs, e as editableImage } from './editable-image-B4UdcCKi.js';
 import 'astro';
 import './types-DlrT0PDc.js';
 
-interface EditableAttrs {
-    [key: string]: string;
-}
-
 /**
  * Section marker — drop on the root element of a component that
  * receives `fieldPrefix`. Lets the Studio overlay hover/select/drag
@@ -16,14 +13,6 @@ interface EditableAttrs {
  */
 declare function editableSection(fieldPrefix: string | undefined): EditableAttrs;
 
-/**
- * Image marker — drop on `<img>` elements so Studio can offer an
- * image picker on click without leaving the preview.
- *
- * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.
- */
-declare function editableImage(fieldPrefix: string | undefined): EditableAttrs;
-
 /**
  * Slot marker — used for discrete named edits within a section
  * (e.g. a CTA label inside a hero). `fieldPrefix` scopes the slot
@@ -74,4 +63,4 @@ declare const studioEditable: {
     readonly arrayItem: typeof editableArrayItem;
 };
 
-export { type EditableAttrs, saastro as default, editableArrayItem, editableImage, editableSection, editableSlot, saastro, studioEditable };
+export { EditableAttrs, saastro as default, editableArrayItem, editableImage, editableSection, editableSlot, saastro, studioEditable };

package/dist/index.js

@@ -1,8 +1,11 @@
 import {
   saastro
-} from "./chunk-SPY66EPD.js";
-import "./chunk-WBTB3A3Y.js";
-import "./chunk-RKHQDJVM.js";
+} from "./chunk-S5K6H6MF.js";
+import "./chunk-5EXFBVC2.js";
+import "./chunk-IPVMSMB4.js";
+import {
+  editableImage
+} from "./chunk-FLFH5RVH.js";
 
 // src/helpers/editable-section.ts
 function editableSection(fieldPrefix) {
@@ -10,12 +13,6 @@ function editableSection(fieldPrefix) {
   return { "data-saastro": `sec:${fieldPrefix}` };
 }
 
-// src/helpers/editable-image.ts
-function editableImage(fieldPrefix) {
-  if (!fieldPrefix) return {};
-  return { "data-saastro": `img:${fieldPrefix}` };
-}
-
 // src/helpers/editable-slot.ts
 function editableSlot(fieldPrefix, slotName) {
   if (!fieldPrefix || !slotName) return {};

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/helpers/editable-section.ts","../src/helpers/editable-image.ts","../src/helpers/editable-slot.ts","../src/helpers/editable-array-item.ts","../src/index.ts"],"sourcesContent":["import type { EditableAttrs } from './types.js'\n\n/**\n * Section marker — drop on the root element of a component that\n * receives `fieldPrefix`. Lets the Studio overlay hover/select/drag\n * the whole section.\n *\n * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.\n */\nexport function editableSection(fieldPrefix: string | undefined): EditableAttrs {\n  if (!fieldPrefix) return {}\n  return { 'data-saastro': `sec:${fieldPrefix}` }\n}\n","import type { EditableAttrs } from './types.js'\n\n/**\n * Image marker — drop on `<img>` elements so Studio can offer an\n * image picker on click without leaving the preview.\n *\n * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.\n */\nexport function editableImage(fieldPrefix: string | undefined): EditableAttrs {\n  if (!fieldPrefix) return {}\n  return { 'data-saastro': `img:${fieldPrefix}` }\n}\n","import type { EditableAttrs } from './types.js'\n\n/**\n * Slot marker — used for discrete named edits within a section\n * (e.g. a CTA label inside a hero). `fieldPrefix` scopes the slot\n * to its parent component; `slotName` is the local identifier.\n *\n * Returns empty object when either argument is falsy — safe to spread unconditionally.\n */\nexport function editableSlot(\n  fieldPrefix: string | undefined,\n  slotName: string,\n): EditableAttrs {\n  if (!fieldPrefix || !slotName) return {}\n  return { 'data-saastro': `slot:${fieldPrefix}.${slotName}` }\n}\n","import type { EditableAttrs } from './types.js'\n\n/**\n * Array-item marker — used on each rendered item inside a `.map(...)`\n * over repeatable content (pricing plans, testimonials, feature cards).\n * Studio uses this to select/duplicate/reorder individual items.\n *\n * Format: `arr:{arrPath}[{index}]` — brackets follow JS/TS convention\n * (lodash, JSON Pointer) and avoid ambiguity with numeric literal keys.\n *\n * Returns empty object when fieldPrefix is falsy or index is negative/non-finite.\n */\nexport function editableArrayItem(\n  fieldPrefix: string | undefined,\n  index: number,\n): EditableAttrs {\n  if (!fieldPrefix || index < 0 || !Number.isFinite(index)) return {}\n  return { 'data-saastro': `arr:${fieldPrefix}[${index}]` }\n}\n","/**\n * @saastro/studio — build-time instrumentation for Saastro Studio.\n *\n * This package provides:\n * - **Astro Integration** (default export): `saastro({ autoWrap: true })` —\n *   registers the Vite plugin through Astro's own pipeline so ordering against\n *   the `.astro` compiler is deterministic on cold builds.\n * - **Editable helpers**: `editableSection`, `editableImage`, `editableSlot`,\n *   `editableArrayItem` + the `studioEditable` namespace.\n * - **Vite plugin** (separate entry, back-compat): `@saastro/studio/vite`.\n *\n * NOTE: This package is the *runtime instrumentation* installed in Astro\n * sites. The Studio editor UI lives at hub.saastro.io and is NOT part of this\n * package.\n *\n * @saastro/studio and @saastro/cms are peer packages — neither depends on the\n * other.\n */\n\nimport saastro from './integration/index.js'\n\nexport default saastro\nexport { saastro }\nexport type { SaastroStudioOptions } from './integration/index.js'\n\nexport type { EditableAttrs } from './helpers/types.js'\nexport { editableSection } from './helpers/editable-section.js'\nexport { editableImage } from './helpers/editable-image.js'\nexport { editableSlot } from './helpers/editable-slot.js'\nexport { editableArrayItem } from './helpers/editable-array-item.js'\n\nimport { editableSection } from './helpers/editable-section.js'\nimport { editableImage } from './helpers/editable-image.js'\nimport { editableSlot } from './helpers/editable-slot.js'\nimport { editableArrayItem } from './helpers/editable-array-item.js'\n\n/**\n * Convenience namespace — all four helpers grouped under one object.\n */\nexport const studioEditable = {\n  section: editableSection,\n  image: editableImage,\n  slot: editableSlot,\n  arrayItem: editableArrayItem,\n} as const\n"],"mappings":";;;;;;;AASO,SAAS,gBAAgB,aAAgD;AAC9E,MAAI,CAAC,YAAa,QAAO,CAAC;AAC1B,SAAO,EAAE,gBAAgB,OAAO,WAAW,GAAG;AAChD;;;ACJO,SAAS,cAAc,aAAgD;AAC5E,MAAI,CAAC,YAAa,QAAO,CAAC;AAC1B,SAAO,EAAE,gBAAgB,OAAO,WAAW,GAAG;AAChD;;;ACFO,SAAS,aACd,aACA,UACe;AACf,MAAI,CAAC,eAAe,CAAC,SAAU,QAAO,CAAC;AACvC,SAAO,EAAE,gBAAgB,QAAQ,WAAW,IAAI,QAAQ,GAAG;AAC7D;;;ACHO,SAAS,kBACd,aACA,OACe;AACf,MAAI,CAAC,eAAe,QAAQ,KAAK,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO,CAAC;AAClE,SAAO,EAAE,gBAAgB,OAAO,WAAW,IAAI,KAAK,IAAI;AAC1D;;;ACGA,IAAO,cAAQ;AAkBR,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AACb;","names":[]}
+{"version":3,"sources":["../src/helpers/editable-section.ts","../src/helpers/editable-slot.ts","../src/helpers/editable-array-item.ts","../src/index.ts"],"sourcesContent":["import type { EditableAttrs } from './types.js'\n\n/**\n * Section marker — drop on the root element of a component that\n * receives `fieldPrefix`. Lets the Studio overlay hover/select/drag\n * the whole section.\n *\n * Returns empty object when fieldPrefix is falsy — safe to spread unconditionally.\n */\nexport function editableSection(fieldPrefix: string | undefined): EditableAttrs {\n  if (!fieldPrefix) return {}\n  return { 'data-saastro': `sec:${fieldPrefix}` }\n}\n","import type { EditableAttrs } from './types.js'\n\n/**\n * Slot marker — used for discrete named edits within a section\n * (e.g. a CTA label inside a hero). `fieldPrefix` scopes the slot\n * to its parent component; `slotName` is the local identifier.\n *\n * Returns empty object when either argument is falsy — safe to spread unconditionally.\n */\nexport function editableSlot(\n  fieldPrefix: string | undefined,\n  slotName: string,\n): EditableAttrs {\n  if (!fieldPrefix || !slotName) return {}\n  return { 'data-saastro': `slot:${fieldPrefix}.${slotName}` }\n}\n","import type { EditableAttrs } from './types.js'\n\n/**\n * Array-item marker — used on each rendered item inside a `.map(...)`\n * over repeatable content (pricing plans, testimonials, feature cards).\n * Studio uses this to select/duplicate/reorder individual items.\n *\n * Format: `arr:{arrPath}[{index}]` — brackets follow JS/TS convention\n * (lodash, JSON Pointer) and avoid ambiguity with numeric literal keys.\n *\n * Returns empty object when fieldPrefix is falsy or index is negative/non-finite.\n */\nexport function editableArrayItem(\n  fieldPrefix: string | undefined,\n  index: number,\n): EditableAttrs {\n  if (!fieldPrefix || index < 0 || !Number.isFinite(index)) return {}\n  return { 'data-saastro': `arr:${fieldPrefix}[${index}]` }\n}\n","/**\n * @saastro/studio — build-time instrumentation for Saastro Studio.\n *\n * This package provides:\n * - **Astro Integration** (default export): `saastro({ autoWrap: true })` —\n *   registers the Vite plugin through Astro's own pipeline so ordering against\n *   the `.astro` compiler is deterministic on cold builds.\n * - **Editable helpers**: `editableSection`, `editableImage`, `editableSlot`,\n *   `editableArrayItem` + the `studioEditable` namespace.\n * - **Vite plugin** (separate entry, back-compat): `@saastro/studio/vite`.\n *\n * NOTE: This package is the *runtime instrumentation* installed in Astro\n * sites. The Studio editor UI lives at hub.saastro.io and is NOT part of this\n * package.\n *\n * @saastro/studio and @saastro/cms are peer packages — neither depends on the\n * other.\n */\n\nimport saastro from './integration/index.js'\n\nexport default saastro\nexport { saastro }\nexport type { SaastroStudioOptions } from './integration/index.js'\n\nexport type { EditableAttrs } from './helpers/types.js'\nexport { editableSection } from './helpers/editable-section.js'\nexport { editableImage } from './helpers/editable-image.js'\nexport { editableSlot } from './helpers/editable-slot.js'\nexport { editableArrayItem } from './helpers/editable-array-item.js'\n\nimport { editableSection } from './helpers/editable-section.js'\nimport { editableImage } from './helpers/editable-image.js'\nimport { editableSlot } from './helpers/editable-slot.js'\nimport { editableArrayItem } from './helpers/editable-array-item.js'\n\n/**\n * Convenience namespace — all four helpers grouped under one object.\n */\nexport const studioEditable = {\n  section: editableSection,\n  image: editableImage,\n  slot: editableSlot,\n  arrayItem: editableArrayItem,\n} as const\n"],"mappings":";;;;;;;;;;AASO,SAAS,gBAAgB,aAAgD;AAC9E,MAAI,CAAC,YAAa,QAAO,CAAC;AAC1B,SAAO,EAAE,gBAAgB,OAAO,WAAW,GAAG;AAChD;;;ACHO,SAAS,aACd,aACA,UACe;AACf,MAAI,CAAC,eAAe,CAAC,SAAU,QAAO,CAAC;AACvC,SAAO,EAAE,gBAAgB,QAAQ,WAAW,IAAI,QAAQ,GAAG;AAC7D;;;ACHO,SAAS,kBACd,aACA,OACe;AACf,MAAI,CAAC,eAAe,QAAQ,KAAK,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO,CAAC;AAClE,SAAO,EAAE,gBAAgB,OAAO,WAAW,IAAI,KAAK,IAAI;AAC1D;;;ACGA,IAAO,cAAQ;AAkBR,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AACb;","names":[]}

package/dist/integration/index.js

@@ -1,8 +1,8 @@
 import {
   saastro
-} from "../chunk-SPY66EPD.js";
-import "../chunk-WBTB3A3Y.js";
-import "../chunk-RKHQDJVM.js";
+} from "../chunk-S5K6H6MF.js";
+import "../chunk-5EXFBVC2.js";
+import "../chunk-IPVMSMB4.js";
 export {
   saastro as default
 };

package/dist/middleware/index.js

@@ -1,7 +1,7 @@
 import {
   injectVersionMetaTag,
   injectVisibilityStyle
-} from "../chunk-RKHQDJVM.js";
+} from "../chunk-IPVMSMB4.js";
 
 // src/middleware/index.ts
 var HTML_RE = /text\/html/i;

package/dist/vite/index.js

@@ -1,7 +1,7 @@
 import {
   studioAutoWrap
-} from "../chunk-WBTB3A3Y.js";
-import "../chunk-RKHQDJVM.js";
+} from "../chunk-5EXFBVC2.js";
+import "../chunk-IPVMSMB4.js";
 export {
   studioAutoWrap as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saastro/studio",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Build-time instrumentation for Saastro Studio — Vite plugin + editable helpers for Astro sites managed by Saastro Hub",
   "license": "MIT",
   "author": "SAASTRO",
@@ -37,10 +37,16 @@
     "./middleware": {
       "types": "./dist/middleware/index.d.ts",
       "import": "./dist/middleware/index.js"
-    }
+    },
+    "./image": {
+      "types": "./dist/image/index.d.ts",
+      "import": "./dist/image/index.js"
+    },
+    "./Img.astro": "./src/Img.astro"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/Img.astro"
   ],
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0",

package/src/Img.astro

@@ -0,0 +1,124 @@
+---
+/**
+ * <Img> — edge-optimized, Studio-editable image for Saastro CMS sites.
+ *
+ * - Optimizes via Cloudflare Image Transformations (`/cdn-cgi/image/...`) at the
+ *   zone edge — webp/avif + responsive srcset, no Sharp (works on SSR/Workers).
+ * - Handles BOTH a repo asset (`/images/...`, transformed root-relative on the
+ *   site's own zone) AND an R2 media-library upload (`https://media.saastro.io/...`,
+ *   transformed on the media host).
+ * - Stays EDITABLE: when `fieldPrefix` is set, the `<img>` carries the RAW src +
+ *   the Studio marker (`editableImage`), while the optimized candidates live on
+ *   `<source srcset>`. The overlay reads/writes the raw `<img src>` → round-trips
+ *   cleanly into content (it must never see a `/cdn-cgi/image/...` URL).
+ * - Degrades gracefully: in `astro dev`, on localhost, with `raw`, or for
+ *   svg/gif/remote sources, emits a plain `<img>` (identical to today).
+ *
+ * Ships with @saastro/studio (consumed via the `./Img.astro` export). The marker
+ * helper `editableImage` is native to this package; the raw-src requirement is
+ * dictated by the Hub overlay (apps/hub-react/src/server/studio/overlay-script.ts).
+ */
+import { buildImage, editableImage, DEFAULT_WIDTHS } from '@saastro/studio/image'
+
+interface Props {
+  /** `/images/...` (repo) or `https://media.saastro.io/...` (R2). */
+  src: string
+  alt: string
+  width?: number
+  height?: number
+  /** Responsive `sizes`; default `100vw`. */
+  sizes?: string
+  /** srcset breakpoints (px); default [480,768,1024,1536,2048]. */
+  widths?: number[]
+  quality?: number
+  fit?: 'cover' | 'contain' | 'scale-down'
+  loading?: 'lazy' | 'eager'
+  fetchpriority?: 'high' | 'low' | 'auto'
+  decoding?: 'async' | 'sync' | 'auto'
+  /** Studio editability: emits `data-saastro="img:<fieldPrefix>"`. */
+  fieldPrefix?: string
+  class?: string
+  /** Force-disable CF transforms for this instance (serve the raw src). */
+  raw?: boolean
+  /** Override the media host (default `media.saastro.io`). */
+  mediaHost?: string
+  [key: string]: unknown
+}
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  sizes = '100vw',
+  widths,
+  quality = 80,
+  fit,
+  loading = 'lazy',
+  fetchpriority,
+  decoding = 'async',
+  fieldPrefix,
+  class: className,
+  raw = false,
+  mediaHost,
+  ...rest
+} = Astro.props
+
+// Only emit /cdn-cgi/image URLs where a CF edge will actually serve them.
+// `import.meta.env.DEV` is statically true in `astro dev` (no edge there);
+// the host check is a belt-and-suspenders guard for `astro preview` /
+// `wrangler dev`; PUBLIC_SAASTRO_IMG_RAW is a per-environment kill switch.
+const isDev = import.meta.env.DEV === true
+const reqHost = Astro.request.headers.get('host') ?? ''
+const isLocalHost = /^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?$/.test(reqHost)
+const forceRaw = import.meta.env.PUBLIC_SAASTRO_IMG_RAW === '1'
+const optimize = !isDev && !isLocalHost && !forceRaw && !raw
+
+const img = buildImage({
+  src,
+  widths: widths ?? [...DEFAULT_WIDTHS],
+  quality,
+  fit,
+  optimize,
+  mediaHost,
+})
+
+const editAttrs = editableImage(fieldPrefix)
+const isEditable = !!fieldPrefix
+---
+
+{
+  img.srcset ? (
+    <picture>
+      {/* One <source>: `format=auto` already negotiates avif/webp/jpeg at the
+          edge, so a single transformed srcset is enough. */}
+      <source srcset={img.srcset} sizes={sizes} />
+      <img
+        src={isEditable ? img.rawSrc : (img.optimizedSrc ?? img.rawSrc)}
+        alt={alt}
+        width={width}
+        height={height}
+        sizes={sizes}
+        loading={loading}
+        fetchpriority={fetchpriority}
+        decoding={decoding}
+        class={className}
+        {...editAttrs}
+        {...rest}
+      />
+    </picture>
+  ) : (
+    <img
+      src={img.rawSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={loading}
+      fetchpriority={fetchpriority}
+      decoding={decoding}
+      class={className}
+      {...editAttrs}
+      {...rest}
+    />
+  )
+}