@dispatchcms/next 0.0.7 → 0.0.9

package/README.md

@@ -148,3 +148,18 @@ export default async function PreviewPage({
 ```
 
 In the CMS, set **Site URL** in Site settings to your site’s base URL (e.g. `https://yoursite.com`). The preview link will use that URL plus `/preview?token=...`.
+
+## Images
+
+An image field is a URL until an editor crops it, then `{ url, crop }` with a unit rectangle (`x`, `y`, `width`, `height` in `0…1`). The original file is unchanged. Wrap the image in a sized `overflow-hidden` frame and spread `imageProps` onto the `<img>`:
+
+```tsx
+import { imageProps } from "@dispatchcms/next";
+
+const photo = imageProps(entry.data.hero);
+photo ? (
+  <div className="relative h-64 w-full overflow-hidden">
+    <img src={photo.src} alt="" style={photo.style} />
+  </div>
+) : null;
+```

package/dist/index.d.mts

@@ -22,5 +22,25 @@ declare function getEntries(collection: string, siteKey?: string): Promise<Entry
 declare function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null>;
 /** Draft or published entry. The token is the secret; no site key is required. */
 declare function getEntryByPreviewToken(token: string): Promise<Entry | null>;
+type ImageCrop = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Styles for an <img> inside a sized overflow:hidden frame — shows only the cropped region. */
+declare function imageProps(value: unknown): {
+    src: string;
+    crop: ImageCrop;
+    style: {
+        position: "absolute";
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        maxWidth: "none";
+        maxHeight: "none";
+    };
+} | null;
 
-export { type DispatchConfig, type Entry, getConfig, getEntries, getEntry, getEntryByPreviewToken, initDispatch };
+export { type DispatchConfig, type Entry, type ImageCrop, getConfig, getEntries, getEntry, getEntryByPreviewToken, imageProps, initDispatch };

package/dist/index.d.ts

@@ -22,5 +22,25 @@ declare function getEntries(collection: string, siteKey?: string): Promise<Entry
 declare function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null>;
 /** Draft or published entry. The token is the secret; no site key is required. */
 declare function getEntryByPreviewToken(token: string): Promise<Entry | null>;
+type ImageCrop = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Styles for an <img> inside a sized overflow:hidden frame — shows only the cropped region. */
+declare function imageProps(value: unknown): {
+    src: string;
+    crop: ImageCrop;
+    style: {
+        position: "absolute";
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        maxWidth: "none";
+        maxHeight: "none";
+    };
+} | null;
 
-export { type DispatchConfig, type Entry, getConfig, getEntries, getEntry, getEntryByPreviewToken, initDispatch };
+export { type DispatchConfig, type Entry, type ImageCrop, getConfig, getEntries, getEntry, getEntryByPreviewToken, imageProps, initDispatch };

package/dist/index.js

@@ -24,6 +24,7 @@ __export(index_exports, {
   getEntries: () => getEntries,
   getEntry: () => getEntry,
   getEntryByPreviewToken: () => getEntryByPreviewToken,
+  imageProps: () => imageProps,
   initDispatch: () => initDispatch
 });
 module.exports = __toCommonJS(index_exports);
@@ -85,12 +86,57 @@ async function getEntryByPreviewToken(token) {
   }
   return await res.json();
 }
+function clampCropSide(n, fallback) {
+  return typeof n === "number" && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;
+}
+function readCrop(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return { x: 0, y: 0, width: 1, height: 1 };
+  }
+  const row = value;
+  let x = clampCropSide(row.x, 0);
+  let y = clampCropSide(row.y, 0);
+  let width = clampCropSide(row.width, 1);
+  let height = clampCropSide(row.height, 1);
+  width = Math.max(0.05, Math.min(width, 1 - x));
+  height = Math.max(0.05, Math.min(height, 1 - y));
+  return { x, y, width, height };
+}
+function imageProps(value) {
+  let src = "";
+  let crop = { x: 0, y: 0, width: 1, height: 1 };
+  if (typeof value === "string") {
+    src = value;
+  } else if (value && typeof value === "object" && !Array.isArray(value)) {
+    const row = value;
+    if (typeof row.url !== "string") return null;
+    src = row.url;
+    if (row.crop != null) crop = readCrop(row.crop);
+  } else {
+    return null;
+  }
+  if (!src) return null;
+  return {
+    src,
+    crop,
+    style: {
+      position: "absolute",
+      left: `${-crop.x / crop.width * 100}%`,
+      top: `${-crop.y / crop.height * 100}%`,
+      width: `${1 / crop.width * 100}%`,
+      height: `${1 / crop.height * 100}%`,
+      maxWidth: "none",
+      maxHeight: "none"
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getConfig,
   getEntries,
   getEntry,
   getEntryByPreviewToken,
+  imageProps,
   initDispatch
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/client.ts"],"sourcesContent":["export type { Entry, DispatchConfig } from \"./client\";\nexport {\n  initDispatch,\n  getConfig,\n  getEntries,\n  getEntry,\n  getEntryByPreviewToken,\n} from \"./client\";\n","export type Entry = {\n  id: string;\n  created_at: string;\n  published_at: string | null;\n  updated_at: string;\n  site_id: string;\n  collection: string;\n  title: string;\n  slug: string | null;\n  data: Record<string, unknown>;\n  sort_order: number;\n  published: boolean;\n};\n\nconst DISPATCH_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport type DispatchConfig = {\n  siteKey: string;\n};\n\nlet config: DispatchConfig | null = null;\n\nexport function initDispatch(options: DispatchConfig): void {\n  config = { siteKey: options.siteKey };\n}\n\nexport function getConfig(): { siteKey: string } {\n  const envKey = typeof process !== \"undefined\" ? process.env?.NEXT_PUBLIC_DISPATCH_SITE_KEY : undefined;\n  const siteKey = config?.siteKey ?? (typeof envKey === \"string\" ? envKey : undefined);\n  if (!siteKey || typeof siteKey !== \"string\") {\n    throw new Error(\"Dispatch site key is required. Call initDispatch({ siteKey }) or set NEXT_PUBLIC_DISPATCH_SITE_KEY.\");\n  }\n  return { siteKey };\n}\n\nexport async function getEntries(collection: string, siteKey?: string): Promise<Entry[]> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entries: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry[];\n}\n\nexport async function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (res.status === 404) {\n    return null;\n  }\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entry: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\n/** Draft or published entry. The token is the secret; no site key is required. */\nexport async function getEntryByPreviewToken(token: string): Promise<Entry | null> {\n  if (!token?.trim()) return null;\n  const url = `${DISPATCH_API_BASE}/api/preview?token=${encodeURIComponent(token.trim())}`;\n  const res = await fetch(url);\n  if (res.status === 404) return null;\n  if (!res.ok) {\n    throw new Error(`Failed to fetch preview: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACcA,IAAM,oBAAoB;AAM1B,IAAI,SAAgC;AAE7B,SAAS,aAAa,SAA+B;AAC1D,WAAS,EAAE,SAAS,QAAQ,QAAQ;AACtC;AAEO,SAAS,YAAiC;AAC/C,QAAM,SAAS,OAAO,YAAY,cAAc,QAAQ,KAAK,gCAAgC;AAC7F,QAAM,UAAU,QAAQ,YAAY,OAAO,WAAW,WAAW,SAAS;AAC1E,MAAI,CAAC,WAAW,OAAO,YAAY,UAAU;AAC3C,UAAM,IAAI,MAAM,qGAAqG;AAAA,EACvH;AACA,SAAO,EAAE,QAAQ;AACnB;AAEA,eAAsB,WAAW,YAAoB,SAAoC;AACvF,QAAM,EAAE,SAAS,IAAI,IAAI,UAAU;AACnC,QAAM,cAAc,WAAW;AAC/B,QAAM,MAAM,GAAG,iBAAiB,gBAAgB,mBAAmB,UAAU,CAAC;AAC9E,QAAM,MAAM,MAAM,MAAM,KAAK;AAAA,IAC3B,SAAS,EAAE,cAAc,YAAY;AAAA,EACvC,CAAC;AACD,MAAI,CAAC,IAAI,IAAI;AACX,QAAI,IAAI,WAAW,KAAK;AACtB,YAAM,IAAI,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAM,IAAI,MAAM,4BAA4B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC5E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;AAEA,eAAsB,SAAS,YAAoB,MAAc,SAAyC;AACxG,QAAM,EAAE,SAAS,IAAI,IAAI,UAAU;AACnC,QAAM,cAAc,WAAW;AAC/B,QAAM,MAAM,GAAG,iBAAiB,gBAAgB,mBAAmB,UAAU,CAAC,IAAI,mBAAmB,IAAI,CAAC;AAC1G,QAAM,MAAM,MAAM,MAAM,KAAK;AAAA,IAC3B,SAAS,EAAE,cAAc,YAAY;AAAA,EACvC,CAAC;AACD,MAAI,IAAI,WAAW,KAAK;AACtB,WAAO;AAAA,EACT;AACA,MAAI,CAAC,IAAI,IAAI;AACX,QAAI,IAAI,WAAW,KAAK;AACtB,YAAM,IAAI,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAM,IAAI,MAAM,0BAA0B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC1E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;AAGA,eAAsB,uBAAuB,OAAsC;AACjF,MAAI,CAAC,OAAO,KAAK,EAAG,QAAO;AAC3B,QAAM,MAAM,GAAG,iBAAiB,sBAAsB,mBAAmB,MAAM,KAAK,CAAC,CAAC;AACtF,QAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,MAAI,IAAI,WAAW,IAAK,QAAO;AAC/B,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,IAAI,MAAM,4BAA4B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC5E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/client.ts"],"sourcesContent":["export type { Entry, DispatchConfig, ImageCrop } from \"./client\";\nexport {\n  initDispatch,\n  getConfig,\n  getEntries,\n  getEntry,\n  getEntryByPreviewToken,\n  imageProps,\n} from \"./client\";\n","export type Entry = {\n  id: string;\n  created_at: string;\n  published_at: string | null;\n  updated_at: string;\n  site_id: string;\n  collection: string;\n  title: string;\n  slug: string | null;\n  data: Record<string, unknown>;\n  sort_order: number;\n  published: boolean;\n};\n\nconst DISPATCH_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport type DispatchConfig = {\n  siteKey: string;\n};\n\nlet config: DispatchConfig | null = null;\n\nexport function initDispatch(options: DispatchConfig): void {\n  config = { siteKey: options.siteKey };\n}\n\nexport function getConfig(): { siteKey: string } {\n  const envKey = typeof process !== \"undefined\" ? process.env?.NEXT_PUBLIC_DISPATCH_SITE_KEY : undefined;\n  const siteKey = config?.siteKey ?? (typeof envKey === \"string\" ? envKey : undefined);\n  if (!siteKey || typeof siteKey !== \"string\") {\n    throw new Error(\"Dispatch site key is required. Call initDispatch({ siteKey }) or set NEXT_PUBLIC_DISPATCH_SITE_KEY.\");\n  }\n  return { siteKey };\n}\n\nexport async function getEntries(collection: string, siteKey?: string): Promise<Entry[]> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entries: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry[];\n}\n\nexport async function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (res.status === 404) {\n    return null;\n  }\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entry: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\n/** Draft or published entry. The token is the secret; no site key is required. */\nexport async function getEntryByPreviewToken(token: string): Promise<Entry | null> {\n  if (!token?.trim()) return null;\n  const url = `${DISPATCH_API_BASE}/api/preview?token=${encodeURIComponent(token.trim())}`;\n  const res = await fetch(url);\n  if (res.status === 404) return null;\n  if (!res.ok) {\n    throw new Error(`Failed to fetch preview: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\nexport type ImageCrop = { x: number; y: number; width: number; height: number };\n\nfunction clampCropSide(n: number, fallback: number) {\n  return typeof n === \"number\" && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;\n}\n\nfunction readCrop(value: unknown): ImageCrop {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) {\n    return { x: 0, y: 0, width: 1, height: 1 };\n  }\n  const row = value as Record<string, unknown>;\n  let x = clampCropSide(row.x as number, 0);\n  let y = clampCropSide(row.y as number, 0);\n  let width = clampCropSide(row.width as number, 1);\n  let height = clampCropSide(row.height as number, 1);\n  width = Math.max(0.05, Math.min(width, 1 - x));\n  height = Math.max(0.05, Math.min(height, 1 - y));\n  return { x, y, width, height };\n}\n\n/** Styles for an <img> inside a sized overflow:hidden frame — shows only the cropped region. */\nexport function imageProps(value: unknown): {\n  src: string;\n  crop: ImageCrop;\n  style: {\n    position: \"absolute\";\n    left: string;\n    top: string;\n    width: string;\n    height: string;\n    maxWidth: \"none\";\n    maxHeight: \"none\";\n  };\n} | null {\n  let src = \"\";\n  let crop: ImageCrop = { x: 0, y: 0, width: 1, height: 1 };\n  if (typeof value === \"string\") {\n    src = value;\n  } else if (value && typeof value === \"object\" && !Array.isArray(value)) {\n    const row = value as Record<string, unknown>;\n    if (typeof row.url !== \"string\") return null;\n    src = row.url;\n    if (row.crop != null) crop = readCrop(row.crop);\n  } else {\n    return null;\n  }\n  if (!src) return null;\n  return {\n    src,\n    crop,\n    style: {\n      position: \"absolute\",\n      left: `${(-crop.x / crop.width) * 100}%`,\n      top: `${(-crop.y / crop.height) * 100}%`,\n      width: `${(1 / crop.width) * 100}%`,\n      height: `${(1 / crop.height) * 100}%`,\n      maxWidth: \"none\",\n      maxHeight: \"none\",\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -55,11 +55,56 @@ async function getEntryByPreviewToken(token) {
   }
   return await res.json();
 }
+function clampCropSide(n, fallback) {
+  return typeof n === "number" && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;
+}
+function readCrop(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return { x: 0, y: 0, width: 1, height: 1 };
+  }
+  const row = value;
+  let x = clampCropSide(row.x, 0);
+  let y = clampCropSide(row.y, 0);
+  let width = clampCropSide(row.width, 1);
+  let height = clampCropSide(row.height, 1);
+  width = Math.max(0.05, Math.min(width, 1 - x));
+  height = Math.max(0.05, Math.min(height, 1 - y));
+  return { x, y, width, height };
+}
+function imageProps(value) {
+  let src = "";
+  let crop = { x: 0, y: 0, width: 1, height: 1 };
+  if (typeof value === "string") {
+    src = value;
+  } else if (value && typeof value === "object" && !Array.isArray(value)) {
+    const row = value;
+    if (typeof row.url !== "string") return null;
+    src = row.url;
+    if (row.crop != null) crop = readCrop(row.crop);
+  } else {
+    return null;
+  }
+  if (!src) return null;
+  return {
+    src,
+    crop,
+    style: {
+      position: "absolute",
+      left: `${-crop.x / crop.width * 100}%`,
+      top: `${-crop.y / crop.height * 100}%`,
+      width: `${1 / crop.width * 100}%`,
+      height: `${1 / crop.height * 100}%`,
+      maxWidth: "none",
+      maxHeight: "none"
+    }
+  };
+}
 export {
   getConfig,
   getEntries,
   getEntry,
   getEntryByPreviewToken,
+  imageProps,
   initDispatch
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/client.ts"],"sourcesContent":["export type Entry = {\n  id: string;\n  created_at: string;\n  published_at: string | null;\n  updated_at: string;\n  site_id: string;\n  collection: string;\n  title: string;\n  slug: string | null;\n  data: Record<string, unknown>;\n  sort_order: number;\n  published: boolean;\n};\n\nconst DISPATCH_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport type DispatchConfig = {\n  siteKey: string;\n};\n\nlet config: DispatchConfig | null = null;\n\nexport function initDispatch(options: DispatchConfig): void {\n  config = { siteKey: options.siteKey };\n}\n\nexport function getConfig(): { siteKey: string } {\n  const envKey = typeof process !== \"undefined\" ? process.env?.NEXT_PUBLIC_DISPATCH_SITE_KEY : undefined;\n  const siteKey = config?.siteKey ?? (typeof envKey === \"string\" ? envKey : undefined);\n  if (!siteKey || typeof siteKey !== \"string\") {\n    throw new Error(\"Dispatch site key is required. Call initDispatch({ siteKey }) or set NEXT_PUBLIC_DISPATCH_SITE_KEY.\");\n  }\n  return { siteKey };\n}\n\nexport async function getEntries(collection: string, siteKey?: string): Promise<Entry[]> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entries: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry[];\n}\n\nexport async function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (res.status === 404) {\n    return null;\n  }\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entry: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\n/** Draft or published entry. The token is the secret; no site key is required. */\nexport async function getEntryByPreviewToken(token: string): Promise<Entry | null> {\n  if (!token?.trim()) return null;\n  const url = `${DISPATCH_API_BASE}/api/preview?token=${encodeURIComponent(token.trim())}`;\n  const res = await fetch(url);\n  if (res.status === 404) return null;\n  if (!res.ok) {\n    throw new Error(`Failed to fetch preview: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n"],"mappings":";AAcA,IAAM,oBAAoB;AAM1B,IAAI,SAAgC;AAE7B,SAAS,aAAa,SAA+B;AAC1D,WAAS,EAAE,SAAS,QAAQ,QAAQ;AACtC;AAEO,SAAS,YAAiC;AAC/C,QAAM,SAAS,OAAO,YAAY,cAAc,QAAQ,KAAK,gCAAgC;AAC7F,QAAM,UAAU,QAAQ,YAAY,OAAO,WAAW,WAAW,SAAS;AAC1E,MAAI,CAAC,WAAW,OAAO,YAAY,UAAU;AAC3C,UAAM,IAAI,MAAM,qGAAqG;AAAA,EACvH;AACA,SAAO,EAAE,QAAQ;AACnB;AAEA,eAAsB,WAAW,YAAoB,SAAoC;AACvF,QAAM,EAAE,SAAS,IAAI,IAAI,UAAU;AACnC,QAAM,cAAc,WAAW;AAC/B,QAAM,MAAM,GAAG,iBAAiB,gBAAgB,mBAAmB,UAAU,CAAC;AAC9E,QAAM,MAAM,MAAM,MAAM,KAAK;AAAA,IAC3B,SAAS,EAAE,cAAc,YAAY;AAAA,EACvC,CAAC;AACD,MAAI,CAAC,IAAI,IAAI;AACX,QAAI,IAAI,WAAW,KAAK;AACtB,YAAM,IAAI,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAM,IAAI,MAAM,4BAA4B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC5E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;AAEA,eAAsB,SAAS,YAAoB,MAAc,SAAyC;AACxG,QAAM,EAAE,SAAS,IAAI,IAAI,UAAU;AACnC,QAAM,cAAc,WAAW;AAC/B,QAAM,MAAM,GAAG,iBAAiB,gBAAgB,mBAAmB,UAAU,CAAC,IAAI,mBAAmB,IAAI,CAAC;AAC1G,QAAM,MAAM,MAAM,MAAM,KAAK;AAAA,IAC3B,SAAS,EAAE,cAAc,YAAY;AAAA,EACvC,CAAC;AACD,MAAI,IAAI,WAAW,KAAK;AACtB,WAAO;AAAA,EACT;AACA,MAAI,CAAC,IAAI,IAAI;AACX,QAAI,IAAI,WAAW,KAAK;AACtB,YAAM,IAAI,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAM,IAAI,MAAM,0BAA0B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC1E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;AAGA,eAAsB,uBAAuB,OAAsC;AACjF,MAAI,CAAC,OAAO,KAAK,EAAG,QAAO;AAC3B,QAAM,MAAM,GAAG,iBAAiB,sBAAsB,mBAAmB,MAAM,KAAK,CAAC,CAAC;AACtF,QAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,MAAI,IAAI,WAAW,IAAK,QAAO;AAC/B,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,IAAI,MAAM,4BAA4B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AAAA,EAC5E;AACA,SAAQ,MAAM,IAAI,KAAK;AACzB;","names":[]}
+{"version":3,"sources":["../src/client.ts"],"sourcesContent":["export type Entry = {\n  id: string;\n  created_at: string;\n  published_at: string | null;\n  updated_at: string;\n  site_id: string;\n  collection: string;\n  title: string;\n  slug: string | null;\n  data: Record<string, unknown>;\n  sort_order: number;\n  published: boolean;\n};\n\nconst DISPATCH_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport type DispatchConfig = {\n  siteKey: string;\n};\n\nlet config: DispatchConfig | null = null;\n\nexport function initDispatch(options: DispatchConfig): void {\n  config = { siteKey: options.siteKey };\n}\n\nexport function getConfig(): { siteKey: string } {\n  const envKey = typeof process !== \"undefined\" ? process.env?.NEXT_PUBLIC_DISPATCH_SITE_KEY : undefined;\n  const siteKey = config?.siteKey ?? (typeof envKey === \"string\" ? envKey : undefined);\n  if (!siteKey || typeof siteKey !== \"string\") {\n    throw new Error(\"Dispatch site key is required. Call initDispatch({ siteKey }) or set NEXT_PUBLIC_DISPATCH_SITE_KEY.\");\n  }\n  return { siteKey };\n}\n\nexport async function getEntries(collection: string, siteKey?: string): Promise<Entry[]> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entries: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry[];\n}\n\nexport async function getEntry(collection: string, slug: string, siteKey?: string): Promise<Entry | null> {\n  const { siteKey: key } = getConfig();\n  const resolvedKey = siteKey ?? key;\n  const url = `${DISPATCH_API_BASE}/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(slug)}`;\n  const res = await fetch(url, {\n    headers: { \"X-Site-Key\": resolvedKey },\n  });\n  if (res.status === 404) {\n    return null;\n  }\n  if (!res.ok) {\n    if (res.status === 401) {\n      throw new Error(\"Invalid or missing site key\");\n    }\n    throw new Error(`Failed to fetch entry: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\n/** Draft or published entry. The token is the secret; no site key is required. */\nexport async function getEntryByPreviewToken(token: string): Promise<Entry | null> {\n  if (!token?.trim()) return null;\n  const url = `${DISPATCH_API_BASE}/api/preview?token=${encodeURIComponent(token.trim())}`;\n  const res = await fetch(url);\n  if (res.status === 404) return null;\n  if (!res.ok) {\n    throw new Error(`Failed to fetch preview: ${res.status} ${res.statusText}`);\n  }\n  return (await res.json()) as Entry;\n}\n\nexport type ImageCrop = { x: number; y: number; width: number; height: number };\n\nfunction clampCropSide(n: number, fallback: number) {\n  return typeof n === \"number\" && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;\n}\n\nfunction readCrop(value: unknown): ImageCrop {\n  if (!value || typeof value !== \"object\" || Array.isArray(value)) {\n    return { x: 0, y: 0, width: 1, height: 1 };\n  }\n  const row = value as Record<string, unknown>;\n  let x = clampCropSide(row.x as number, 0);\n  let y = clampCropSide(row.y as number, 0);\n  let width = clampCropSide(row.width as number, 1);\n  let height = clampCropSide(row.height as number, 1);\n  width = Math.max(0.05, Math.min(width, 1 - x));\n  height = Math.max(0.05, Math.min(height, 1 - y));\n  return { x, y, width, height };\n}\n\n/** Styles for an <img> inside a sized overflow:hidden frame — shows only the cropped region. */\nexport function imageProps(value: unknown): {\n  src: string;\n  crop: ImageCrop;\n  style: {\n    position: \"absolute\";\n    left: string;\n    top: string;\n    width: string;\n    height: string;\n    maxWidth: \"none\";\n    maxHeight: \"none\";\n  };\n} | null {\n  let src = \"\";\n  let crop: ImageCrop = { x: 0, y: 0, width: 1, height: 1 };\n  if (typeof value === \"string\") {\n    src = value;\n  } else if (value && typeof value === \"object\" && !Array.isArray(value)) {\n    const row = value as Record<string, unknown>;\n    if (typeof row.url !== \"string\") return null;\n    src = row.url;\n    if (row.crop != null) crop = readCrop(row.crop);\n  } else {\n    return null;\n  }\n  if (!src) return null;\n  return {\n    src,\n    crop,\n    style: {\n      position: \"absolute\",\n      left: `${(-crop.x / crop.width) * 100}%`,\n      top: `${(-crop.y / crop.height) * 100}%`,\n      width: `${(1 / crop.width) * 100}%`,\n      height: `${(1 / crop.height) * 100}%`,\n      maxWidth: \"none\",\n      maxHeight: \"none\",\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dispatchcms/next",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Fetch published entries from a Dispatch CMS in Next.js",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,6 +12,11 @@
       "require": "./dist/index.js"
     }
   },
+  "scripts": {
+    "build": "tsup",
+    "test": "tsx test/client.cache.test.ts && tsx test/image-props.test.ts",
+    "test:manual": "tsx test/getPage.test.ts"
+  },
   "devDependencies": {
     "@types/node": "^22.20.1",
     "next": "^16.3.0",
@@ -31,10 +36,5 @@
   "license": "MIT",
   "peerDependencies": {
     "next": ">=16.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "test": "tsx test/client.cache.test.ts",
-    "test:manual": "tsx test/getPage.test.ts"
   }
-}
+}

package/src/client.ts

@@ -79,3 +79,65 @@ export async function getEntryByPreviewToken(token: string): Promise<Entry | nul
   }
   return (await res.json()) as Entry;
 }
+
+export type ImageCrop = { x: number; y: number; width: number; height: number };
+
+function clampCropSide(n: number, fallback: number) {
+  return typeof n === "number" && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;
+}
+
+function readCrop(value: unknown): ImageCrop {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return { x: 0, y: 0, width: 1, height: 1 };
+  }
+  const row = value as Record<string, unknown>;
+  let x = clampCropSide(row.x as number, 0);
+  let y = clampCropSide(row.y as number, 0);
+  let width = clampCropSide(row.width as number, 1);
+  let height = clampCropSide(row.height as number, 1);
+  width = Math.max(0.05, Math.min(width, 1 - x));
+  height = Math.max(0.05, Math.min(height, 1 - y));
+  return { x, y, width, height };
+}
+
+/** Styles for an <img> inside a sized overflow:hidden frame — shows only the cropped region. */
+export function imageProps(value: unknown): {
+  src: string;
+  crop: ImageCrop;
+  style: {
+    position: "absolute";
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    maxWidth: "none";
+    maxHeight: "none";
+  };
+} | null {
+  let src = "";
+  let crop: ImageCrop = { x: 0, y: 0, width: 1, height: 1 };
+  if (typeof value === "string") {
+    src = value;
+  } else if (value && typeof value === "object" && !Array.isArray(value)) {
+    const row = value as Record<string, unknown>;
+    if (typeof row.url !== "string") return null;
+    src = row.url;
+    if (row.crop != null) crop = readCrop(row.crop);
+  } else {
+    return null;
+  }
+  if (!src) return null;
+  return {
+    src,
+    crop,
+    style: {
+      position: "absolute",
+      left: `${(-crop.x / crop.width) * 100}%`,
+      top: `${(-crop.y / crop.height) * 100}%`,
+      width: `${(1 / crop.width) * 100}%`,
+      height: `${(1 / crop.height) * 100}%`,
+      maxWidth: "none",
+      maxHeight: "none",
+    },
+  };
+}

package/src/index.ts

@@ -1,8 +1,9 @@
-export type { Entry, DispatchConfig } from "./client";
+export type { Entry, DispatchConfig, ImageCrop } from "./client";
 export {
   initDispatch,
   getConfig,
   getEntries,
   getEntry,
   getEntryByPreviewToken,
+  imageProps,
 } from "./client";

package/test/image-props.test.ts

@@ -0,0 +1,22 @@
+import { imageProps } from "../src/index";
+import assert from "node:assert/strict";
+
+const url = "https://cdn.example/a.jpg";
+
+const plain = imageProps(url);
+assert(plain?.src === url && plain.crop.width === 1 && plain.crop.height === 1, "plain url");
+assert(plain?.style.left === "0%" && plain.style.top === "0%", "full crop origin");
+assert(plain?.style.width === "100%" && plain.style.height === "100%", "full crop size");
+
+const cropped = imageProps({ url, crop: { x: 0.2, y: 0.1, width: 0.5, height: 0.4 } });
+assert(cropped?.src === url, "crop src");
+assert(cropped?.crop.x === 0.2 && cropped.crop.width === 0.5, "crop rect");
+assert(cropped?.style.left === "-40%" && cropped.style.top === "-25%", "crop offset");
+assert(cropped?.style.width === "200%" && cropped.style.height === "250%", "crop scale");
+
+const legacyFocus = imageProps({ url, focus: { x: 0.2, y: 0.8 } });
+assert(legacyFocus?.src === url && legacyFocus.crop.width === 1, "legacy focus becomes full frame");
+
+assert(imageProps(null) === null && imageProps("") === null && imageProps({}) === null, "bad input");
+
+console.log("image-props: ok");