@dispatchcms/react 0.0.8 → 0.0.9

package/README.md

@@ -127,13 +127,17 @@ export default function PostPage({ slug }) {
 
 ## Images
 
-An image field is a URL until an editor drags a point, then `{ url, focus }`. `imageProps` reads both. It only changes which part of the photo stays in view when your frame crops it.
+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/react";
 
 const photo = imageProps(entry.data.hero);
-photo ? <img src={photo.src} alt="" className="h-full w-full" style={photo.style} /> : null
+photo ? (
+  <div className="relative h-64 w-full overflow-hidden">
+    <img src={photo.src} alt="" style={photo.style} />
+  </div>
+) : null;
 ```
 
 ## License

package/dist/index.d.mts

@@ -39,12 +39,25 @@ type UseEntriesResult = {
 };
 declare function useEntries(collection: string | undefined): UseEntriesResult;
 
+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: {
-        objectFit: "cover";
-        objectPosition: string;
+        position: "absolute";
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        maxWidth: "none";
+        maxHeight: "none";
     };
 } | null;
 
-export { DispatchProvider, type Entry, type UseEntriesResult, type UseEntryResult, imageProps, useDispatchContext, useEntries, useEntry };
+export { DispatchProvider, type Entry, type ImageCrop, type UseEntriesResult, type UseEntryResult, imageProps, useDispatchContext, useEntries, useEntry };

package/dist/index.d.ts

@@ -39,12 +39,25 @@ type UseEntriesResult = {
 };
 declare function useEntries(collection: string | undefined): UseEntriesResult;
 
+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: {
-        objectFit: "cover";
-        objectPosition: string;
+        position: "absolute";
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        maxWidth: "none";
+        maxHeight: "none";
     };
 } | null;
 
-export { DispatchProvider, type Entry, type UseEntriesResult, type UseEntryResult, imageProps, useDispatchContext, useEntries, useEntry };
+export { DispatchProvider, type Entry, type ImageCrop, type UseEntriesResult, type UseEntryResult, imageProps, useDispatchContext, useEntries, useEntry };

package/dist/index.js

@@ -172,26 +172,49 @@ function useEntries(collection) {
 }
 
 // src/index.ts
+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 x = 0.5;
-  let y = 0.5;
+  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.focus && typeof row.focus === "object" && !Array.isArray(row.focus)) {
-      const focus = row.focus;
-      if (typeof focus.x === "number" && Number.isFinite(focus.x)) x = Math.min(1, Math.max(0, focus.x));
-      if (typeof focus.y === "number" && Number.isFinite(focus.y)) y = Math.min(1, Math.max(0, focus.y));
-    }
+    if (row.crop != null) crop = readCrop(row.crop);
   } else {
     return null;
   }
   if (!src) return null;
-  return { src, style: { objectFit: "cover", objectPosition: `${x * 100}% ${y * 100}%` } };
+  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 = {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/context.tsx","../src/config.ts","../src/hooks.ts"],"sourcesContent":["export type { Entry } from \"./types\";\nexport { DispatchProvider, useDispatchContext } from \"./context\";\nexport { useEntry, useEntries } from \"./hooks\";\nexport type { UseEntryResult, UseEntriesResult } from \"./hooks\";\n\n// ponytail: percentage object-position. Measure the image against the frame if a subject still clips.\nexport function imageProps(value: unknown): {\n  src: string;\n  style: { objectFit: \"cover\"; objectPosition: string };\n} | null {\n  let src = \"\";\n  let x = 0.5;\n  let y = 0.5;\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.focus && typeof row.focus === \"object\" && !Array.isArray(row.focus)) {\n      const focus = row.focus as Record<string, unknown>;\n      if (typeof focus.x === \"number\" && Number.isFinite(focus.x)) x = Math.min(1, Math.max(0, focus.x));\n      if (typeof focus.y === \"number\" && Number.isFinite(focus.y)) y = Math.min(1, Math.max(0, focus.y));\n    }\n  } else {\n    return null;\n  }\n  if (!src) return null;\n  return { src, style: { objectFit: \"cover\", objectPosition: `${x * 100}% ${y * 100}%` } };\n}\n","\"use client\";\n\nimport React, { createContext, useContext } from \"react\";\nimport { getApiBase } from \"./config\";\n\ntype DispatchContextValue = {\n  siteKey: string | null;\n  apiBase: string;\n};\n\nconst DispatchContext = createContext<DispatchContextValue | null>(null);\n\nexport function useDispatchContext(): DispatchContextValue | null {\n  return useContext(DispatchContext);\n}\n\ntype DispatchProviderProps = {\n  siteKey?: string | null;\n  apiBase?: string;\n  children?: unknown;\n};\n\nexport function DispatchProvider({\n  siteKey = null,\n  apiBase = getApiBase(),\n  children,\n}: DispatchProviderProps) {\n  const value: DispatchContextValue = {\n    siteKey: siteKey?.trim() || null,\n    apiBase,\n  };\n\n  if (!value.siteKey) {\n    if (typeof console !== \"undefined\" && console.warn) {\n      console.warn(\n        \"[Dispatch] No siteKey provided. Pass siteKey to DispatchProvider. Hooks will return empty/error state.\"\n      );\n    }\n  }\n\n  return (\n    <DispatchContext.Provider value={value}>\n      {children as React.ReactNode}\n    </DispatchContext.Provider>\n  );\n}\n","const DEFAULT_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport function getApiBase(): string {\n  return DEFAULT_API_BASE;\n}\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { Entry } from \"./types\";\nimport { useDispatchContext } from \"./context\";\n\nexport type UseEntryResult = {\n  entry: Entry | null;\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntry(collection: string | undefined, slug: string | undefined): UseEntryResult {\n  const ctx = useDispatchContext();\n  const [entry, setEntry] = useState<Entry | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim() || !slug?.trim()) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntry(null);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}/${encodeURIComponent(slug.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (res.status === 404) {\n          setEntry(null);\n          setIsLoading(false);\n          return;\n        }\n        if (!res.ok) {\n          setEntry(null);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntry(data as Entry);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntry(null);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, slug, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entry, isLoading, error };\n}\n\nexport type UseEntriesResult = {\n  entries: Entry[];\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntries(collection: string | undefined): UseEntriesResult {\n  const ctx = useDispatchContext();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim()) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntries([]);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (!res.ok) {\n          setEntries([]);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntries(Array.isArray(data) ? data : []);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntries([]);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entries, isLoading, error };\n}\n"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/context.tsx","../src/config.ts","../src/hooks.ts"],"sourcesContent":["export type { Entry } from \"./types\";\nexport { DispatchProvider, useDispatchContext } from \"./context\";\nexport { useEntry, useEntries } from \"./hooks\";\nexport type { UseEntryResult, UseEntriesResult } from \"./hooks\";\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","\"use client\";\n\nimport React, { createContext, useContext } from \"react\";\nimport { getApiBase } from \"./config\";\n\ntype DispatchContextValue = {\n  siteKey: string | null;\n  apiBase: string;\n};\n\nconst DispatchContext = createContext<DispatchContextValue | null>(null);\n\nexport function useDispatchContext(): DispatchContextValue | null {\n  return useContext(DispatchContext);\n}\n\ntype DispatchProviderProps = {\n  siteKey?: string | null;\n  apiBase?: string;\n  children?: unknown;\n};\n\nexport function DispatchProvider({\n  siteKey = null,\n  apiBase = getApiBase(),\n  children,\n}: DispatchProviderProps) {\n  const value: DispatchContextValue = {\n    siteKey: siteKey?.trim() || null,\n    apiBase,\n  };\n\n  if (!value.siteKey) {\n    if (typeof console !== \"undefined\" && console.warn) {\n      console.warn(\n        \"[Dispatch] No siteKey provided. Pass siteKey to DispatchProvider. Hooks will return empty/error state.\"\n      );\n    }\n  }\n\n  return (\n    <DispatchContext.Provider value={value}>\n      {children as React.ReactNode}\n    </DispatchContext.Provider>\n  );\n}\n","const DEFAULT_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport function getApiBase(): string {\n  return DEFAULT_API_BASE;\n}\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { Entry } from \"./types\";\nimport { useDispatchContext } from \"./context\";\n\nexport type UseEntryResult = {\n  entry: Entry | null;\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntry(collection: string | undefined, slug: string | undefined): UseEntryResult {\n  const ctx = useDispatchContext();\n  const [entry, setEntry] = useState<Entry | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim() || !slug?.trim()) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntry(null);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}/${encodeURIComponent(slug.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (res.status === 404) {\n          setEntry(null);\n          setIsLoading(false);\n          return;\n        }\n        if (!res.ok) {\n          setEntry(null);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntry(data as Entry);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntry(null);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, slug, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entry, isLoading, error };\n}\n\nexport type UseEntriesResult = {\n  entries: Entry[];\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntries(collection: string | undefined): UseEntriesResult {\n  const ctx = useDispatchContext();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim()) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntries([]);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (!res.ok) {\n          setEntries([]);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntries(Array.isArray(data) ? data : []);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntries([]);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entries, isLoading, error };\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/index.mjs

@@ -143,26 +143,49 @@ function useEntries(collection) {
 }
 
 // src/index.ts
+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 x = 0.5;
-  let y = 0.5;
+  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.focus && typeof row.focus === "object" && !Array.isArray(row.focus)) {
-      const focus = row.focus;
-      if (typeof focus.x === "number" && Number.isFinite(focus.x)) x = Math.min(1, Math.max(0, focus.x));
-      if (typeof focus.y === "number" && Number.isFinite(focus.y)) y = Math.min(1, Math.max(0, focus.y));
-    }
+    if (row.crop != null) crop = readCrop(row.crop);
   } else {
     return null;
   }
   if (!src) return null;
-  return { src, style: { objectFit: "cover", objectPosition: `${x * 100}% ${y * 100}%` } };
+  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 {
   DispatchProvider,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/context.tsx","../src/config.ts","../src/hooks.ts","../src/index.ts"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext } from \"react\";\nimport { getApiBase } from \"./config\";\n\ntype DispatchContextValue = {\n  siteKey: string | null;\n  apiBase: string;\n};\n\nconst DispatchContext = createContext<DispatchContextValue | null>(null);\n\nexport function useDispatchContext(): DispatchContextValue | null {\n  return useContext(DispatchContext);\n}\n\ntype DispatchProviderProps = {\n  siteKey?: string | null;\n  apiBase?: string;\n  children?: unknown;\n};\n\nexport function DispatchProvider({\n  siteKey = null,\n  apiBase = getApiBase(),\n  children,\n}: DispatchProviderProps) {\n  const value: DispatchContextValue = {\n    siteKey: siteKey?.trim() || null,\n    apiBase,\n  };\n\n  if (!value.siteKey) {\n    if (typeof console !== \"undefined\" && console.warn) {\n      console.warn(\n        \"[Dispatch] No siteKey provided. Pass siteKey to DispatchProvider. Hooks will return empty/error state.\"\n      );\n    }\n  }\n\n  return (\n    <DispatchContext.Provider value={value}>\n      {children as React.ReactNode}\n    </DispatchContext.Provider>\n  );\n}\n","const DEFAULT_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport function getApiBase(): string {\n  return DEFAULT_API_BASE;\n}\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { Entry } from \"./types\";\nimport { useDispatchContext } from \"./context\";\n\nexport type UseEntryResult = {\n  entry: Entry | null;\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntry(collection: string | undefined, slug: string | undefined): UseEntryResult {\n  const ctx = useDispatchContext();\n  const [entry, setEntry] = useState<Entry | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim() || !slug?.trim()) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntry(null);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}/${encodeURIComponent(slug.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (res.status === 404) {\n          setEntry(null);\n          setIsLoading(false);\n          return;\n        }\n        if (!res.ok) {\n          setEntry(null);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntry(data as Entry);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntry(null);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, slug, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entry, isLoading, error };\n}\n\nexport type UseEntriesResult = {\n  entries: Entry[];\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntries(collection: string | undefined): UseEntriesResult {\n  const ctx = useDispatchContext();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim()) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntries([]);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (!res.ok) {\n          setEntries([]);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntries(Array.isArray(data) ? data : []);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntries([]);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entries, isLoading, error };\n}\n","export type { Entry } from \"./types\";\nexport { DispatchProvider, useDispatchContext } from \"./context\";\nexport { useEntry, useEntries } from \"./hooks\";\nexport type { UseEntryResult, UseEntriesResult } from \"./hooks\";\n\n// ponytail: percentage object-position. Measure the image against the frame if a subject still clips.\nexport function imageProps(value: unknown): {\n  src: string;\n  style: { objectFit: \"cover\"; objectPosition: string };\n} | null {\n  let src = \"\";\n  let x = 0.5;\n  let y = 0.5;\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.focus && typeof row.focus === \"object\" && !Array.isArray(row.focus)) {\n      const focus = row.focus as Record<string, unknown>;\n      if (typeof focus.x === \"number\" && Number.isFinite(focus.x)) x = Math.min(1, Math.max(0, focus.x));\n      if (typeof focus.y === \"number\" && Number.isFinite(focus.y)) y = Math.min(1, Math.max(0, focus.y));\n    }\n  } else {\n    return null;\n  }\n  if (!src) return null;\n  return { src, style: { objectFit: \"cover\", objectPosition: `${x * 100}% ${y * 100}%` } };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/context.tsx","../src/config.ts","../src/hooks.ts","../src/index.ts"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext } from \"react\";\nimport { getApiBase } from \"./config\";\n\ntype DispatchContextValue = {\n  siteKey: string | null;\n  apiBase: string;\n};\n\nconst DispatchContext = createContext<DispatchContextValue | null>(null);\n\nexport function useDispatchContext(): DispatchContextValue | null {\n  return useContext(DispatchContext);\n}\n\ntype DispatchProviderProps = {\n  siteKey?: string | null;\n  apiBase?: string;\n  children?: unknown;\n};\n\nexport function DispatchProvider({\n  siteKey = null,\n  apiBase = getApiBase(),\n  children,\n}: DispatchProviderProps) {\n  const value: DispatchContextValue = {\n    siteKey: siteKey?.trim() || null,\n    apiBase,\n  };\n\n  if (!value.siteKey) {\n    if (typeof console !== \"undefined\" && console.warn) {\n      console.warn(\n        \"[Dispatch] No siteKey provided. Pass siteKey to DispatchProvider. Hooks will return empty/error state.\"\n      );\n    }\n  }\n\n  return (\n    <DispatchContext.Provider value={value}>\n      {children as React.ReactNode}\n    </DispatchContext.Provider>\n  );\n}\n","const DEFAULT_API_BASE = \"https://dispatch-cms.vercel.app\";\n\nexport function getApiBase(): string {\n  return DEFAULT_API_BASE;\n}\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { Entry } from \"./types\";\nimport { useDispatchContext } from \"./context\";\n\nexport type UseEntryResult = {\n  entry: Entry | null;\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntry(collection: string | undefined, slug: string | undefined): UseEntryResult {\n  const ctx = useDispatchContext();\n  const [entry, setEntry] = useState<Entry | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim() || !slug?.trim()) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntry(null);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntry(null);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}/${encodeURIComponent(slug.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (res.status === 404) {\n          setEntry(null);\n          setIsLoading(false);\n          return;\n        }\n        if (!res.ok) {\n          setEntry(null);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntry(data as Entry);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntry(null);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, slug, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entry, isLoading, error };\n}\n\nexport type UseEntriesResult = {\n  entries: Entry[];\n  isLoading: boolean;\n  error?: string;\n};\n\nexport function useEntries(collection: string | undefined): UseEntriesResult {\n  const ctx = useDispatchContext();\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!collection?.trim()) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(undefined);\n      return;\n    }\n\n    if (!ctx?.siteKey) {\n      setEntries([]);\n      setIsLoading(false);\n      setError(\"Missing site key\");\n      return;\n    }\n\n    let cancelled = false;\n    setEntries([]);\n    setError(undefined);\n    setIsLoading(true);\n\n    const url = `${ctx.apiBase}/api/content/${encodeURIComponent(collection.trim())}`;\n    fetch(url, {\n      headers: { \"X-Site-Key\": ctx.siteKey },\n    })\n      .then((res) => {\n        if (cancelled) return;\n        if (!res.ok) {\n          setEntries([]);\n          setIsLoading(false);\n          setError(\"Failed to load\");\n          return;\n        }\n        return res.json();\n      })\n      .then((data) => {\n        if (cancelled || data == null) return;\n        setEntries(Array.isArray(data) ? data : []);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        if (cancelled) return;\n        setEntries([]);\n        setIsLoading(false);\n        setError(\"Failed to load\");\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [collection, ctx?.siteKey, ctx?.apiBase]);\n\n  return { entries, isLoading, error };\n}\n","export type { Entry } from \"./types\";\nexport { DispatchProvider, useDispatchContext } from \"./context\";\nexport { useEntry, useEntries } from \"./hooks\";\nexport type { UseEntryResult, UseEntriesResult } from \"./hooks\";\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/react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React hooks and provider for Dispatch CMS entries",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/index.ts

@@ -3,28 +3,64 @@ export { DispatchProvider, useDispatchContext } from "./context";
 export { useEntry, useEntries } from "./hooks";
 export type { UseEntryResult, UseEntriesResult } from "./hooks";
 
-// ponytail: percentage object-position. Measure the image against the frame if a subject still clips.
+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;
-  style: { objectFit: "cover"; objectPosition: string };
+  crop: ImageCrop;
+  style: {
+    position: "absolute";
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    maxWidth: "none";
+    maxHeight: "none";
+  };
 } | null {
   let src = "";
-  let x = 0.5;
-  let y = 0.5;
+  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.focus && typeof row.focus === "object" && !Array.isArray(row.focus)) {
-      const focus = row.focus as Record<string, unknown>;
-      if (typeof focus.x === "number" && Number.isFinite(focus.x)) x = Math.min(1, Math.max(0, focus.x));
-      if (typeof focus.y === "number" && Number.isFinite(focus.y)) y = Math.min(1, Math.max(0, focus.y));
-    }
+    if (row.crop != null) crop = readCrop(row.crop);
   } else {
     return null;
   }
   if (!src) return null;
-  return { src, style: { objectFit: "cover", objectPosition: `${x * 100}% ${y * 100}%` } };
+  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",
+    },
+  };
 }