@dloizides/ui-media 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.4.0
+
+- KEFI-PEOPLE-1 T10d "Organizer people editor: anchored photo in the package": new `AnchoredPhoto` (`uri`, `anchor`, `framing`, `style`, `accessibilityLabel`, `testID`) paints a contained, framed photo anchored to the centre or bottom of its parent box. RN-web's Image ignores `object-position`, so the photo is sized to its measured aspect (`useImageAspectRatio`, exported) and placed by flexbox. Pure `resolveAnchoredPhotoLayout` exported. Moved out of kefi-web `PersonPhoto`.
+
+## 0.3.0
+
+- KEFI-PEOPLE-1 T10b "Organizer people editor: ui-media adoption gaps" (backwards compatible):
+  - `ImagePickerButton` / `useImageUpload` take a second generic `TResult` (default `void`): `upload` returns `Promise<TResult>` and the new `onUploaded(result)` receives it once the slot is `done`. A throwing `onUploaded` does not flip the slot to error.
+  - `PhotoFramingEditor` gains `anchor?: PhotoAnchor` (`center` default | `bottom`); `renderPreview` now also receives `anchor` and `objectPosition` (`center bottom` for kefi-landings `.amb-photo` cut-outs). New exports `PhotoAnchor`, `resolvePhotoAnchor`, `PhotoAnchorLayout`.
+
 ## 0.2.0
 
 - KEFI-PEOPLE-1 T12 "Organizer people editor: shared photo framing": `PHOTO_FRAMING_BOUNDS`,

package/dist/framing.d.mts

@@ -2,12 +2,11 @@ import { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/fr
 export { DEFAULT_PHOTO_FRAMING, PHOTO_FRAMING_BOUNDS, PhotoFraming, PhotoFramingInput, clampFraming, isDefaultFraming } from '@dloizides/site-template-kit/framing';
 
 /**
- * Photo framing: the `{x, y, scale}` an organiser sets on a performer card.
+ * Photo framing: the `{x, y, scale}` an editor sets on a photo card.
  *
  * The bounds, default, clamp and identity check come from
- * `@dloizides/site-template-kit/framing` — the same module the kefi-landings
- * renderer builds its `--photo-tf` CSS from (KEFI-PEOPLE-1 T12 "Organizer people
- * editor: shared photo framing"). One copy, so the editor can never offer a value
+ * `@dloizides/site-template-kit/framing` — the same module the static landing
+ * renderer builds its `--photo-tf` CSS from. One copy, so the editor can never offer a value
  * the landing page would silently clamp away.
  *
  * That subpath imports nothing (no ajv, no JSON Schema), so this file stays
@@ -32,21 +31,16 @@ type PhotoFramingTransform = [
 ];
 declare const framingToTransform: (framing: PhotoFraming) => PhotoFramingTransform;
 
-/**
- * The seven controls of the framing editor. An `as const` object rather than a
- * TS `const enum`: a const enum shipped in a .d.ts cannot be read by consumers
- * compiled with `isolatedModules` (every Expo / Babel portal).
- */
-declare const FramingAction: {
-    readonly ZoomIn: "zoomIn";
-    readonly ZoomOut: "zoomOut";
-    readonly MoveUp: "moveUp";
-    readonly MoveDown: "moveDown";
-    readonly MoveLeft: "moveLeft";
-    readonly MoveRight: "moveRight";
-    readonly Reset: "reset";
-};
-type FramingAction = (typeof FramingAction)[keyof typeof FramingAction];
+/** The seven controls of the framing editor. */
+declare const enum FramingAction {
+    ZoomIn = "zoomIn",
+    ZoomOut = "zoomOut",
+    MoveUp = "moveUp",
+    MoveDown = "moveDown",
+    MoveLeft = "moveLeft",
+    MoveRight = "moveRight",
+    Reset = "reset"
+}
 
 /** How far one press moves or zooms. */
 interface PhotoFramingSteps {

package/dist/framing.d.ts

@@ -2,12 +2,11 @@ import { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/fr
 export { DEFAULT_PHOTO_FRAMING, PHOTO_FRAMING_BOUNDS, PhotoFraming, PhotoFramingInput, clampFraming, isDefaultFraming } from '@dloizides/site-template-kit/framing';
 
 /**
- * Photo framing: the `{x, y, scale}` an organiser sets on a performer card.
+ * Photo framing: the `{x, y, scale}` an editor sets on a photo card.
  *
  * The bounds, default, clamp and identity check come from
- * `@dloizides/site-template-kit/framing` — the same module the kefi-landings
- * renderer builds its `--photo-tf` CSS from (KEFI-PEOPLE-1 T12 "Organizer people
- * editor: shared photo framing"). One copy, so the editor can never offer a value
+ * `@dloizides/site-template-kit/framing` — the same module the static landing
+ * renderer builds its `--photo-tf` CSS from. One copy, so the editor can never offer a value
  * the landing page would silently clamp away.
  *
  * That subpath imports nothing (no ajv, no JSON Schema), so this file stays
@@ -32,21 +31,16 @@ type PhotoFramingTransform = [
 ];
 declare const framingToTransform: (framing: PhotoFraming) => PhotoFramingTransform;
 
-/**
- * The seven controls of the framing editor. An `as const` object rather than a
- * TS `const enum`: a const enum shipped in a .d.ts cannot be read by consumers
- * compiled with `isolatedModules` (every Expo / Babel portal).
- */
-declare const FramingAction: {
-    readonly ZoomIn: "zoomIn";
-    readonly ZoomOut: "zoomOut";
-    readonly MoveUp: "moveUp";
-    readonly MoveDown: "moveDown";
-    readonly MoveLeft: "moveLeft";
-    readonly MoveRight: "moveRight";
-    readonly Reset: "reset";
-};
-type FramingAction = (typeof FramingAction)[keyof typeof FramingAction];
+/** The seven controls of the framing editor. */
+declare const enum FramingAction {
+    ZoomIn = "zoomIn",
+    ZoomOut = "zoomOut",
+    MoveUp = "moveUp",
+    MoveDown = "moveDown",
+    MoveLeft = "moveLeft",
+    MoveRight = "moveRight",
+    Reset = "reset"
+}
 
 /** How far one press moves or zooms. */
 interface PhotoFramingSteps {

package/dist/framing.js

@@ -10,30 +10,31 @@ var framingToTransform = (framing) => [
 ];
 
 // src/framing/FramingAction.ts
-var FramingAction = {
-  ZoomIn: "zoomIn",
-  ZoomOut: "zoomOut",
-  MoveUp: "moveUp",
-  MoveDown: "moveDown",
-  MoveLeft: "moveLeft",
-  MoveRight: "moveRight",
-  Reset: "reset"
-};
+var FramingAction = /* @__PURE__ */ ((FramingAction2) => {
+  FramingAction2["ZoomIn"] = "zoomIn";
+  FramingAction2["ZoomOut"] = "zoomOut";
+  FramingAction2["MoveUp"] = "moveUp";
+  FramingAction2["MoveDown"] = "moveDown";
+  FramingAction2["MoveLeft"] = "moveLeft";
+  FramingAction2["MoveRight"] = "moveRight";
+  FramingAction2["Reset"] = "reset";
+  return FramingAction2;
+})(FramingAction || {});
 
 // src/framing/stepFraming.ts
 var PHOTO_FRAMING_STEPS = Object.freeze({ offsetPct: 5, scale: 0.1 });
 var PRECISION = 1e3;
 var round = (n) => Math.round(n * PRECISION) / PRECISION;
 var DIRECTIONS = {
-  [FramingAction.ZoomIn]: [0, 0, 1],
-  [FramingAction.ZoomOut]: [0, 0, -1],
-  [FramingAction.MoveUp]: [0, -1, 0],
-  [FramingAction.MoveDown]: [0, 1, 0],
-  [FramingAction.MoveLeft]: [-1, 0, 0],
-  [FramingAction.MoveRight]: [1, 0, 0]
+  ["zoomIn" /* ZoomIn */]: [0, 0, 1],
+  ["zoomOut" /* ZoomOut */]: [0, 0, -1],
+  ["moveUp" /* MoveUp */]: [0, -1, 0],
+  ["moveDown" /* MoveDown */]: [0, 1, 0],
+  ["moveLeft" /* MoveLeft */]: [-1, 0, 0],
+  ["moveRight" /* MoveRight */]: [1, 0, 0]
 };
 function stepFraming(current, action, steps = PHOTO_FRAMING_STEPS) {
-  if (action === FramingAction.Reset) return framing.DEFAULT_PHOTO_FRAMING;
+  if (action === "reset" /* Reset */) return framing.DEFAULT_PHOTO_FRAMING;
   const base = framing.clampFraming(current);
   const [dx, dy, ds] = DIRECTIONS[action];
   return framing.clampFraming({

package/dist/framing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/framing/photoFraming.ts","../src/framing/FramingAction.ts","../src/framing/stepFraming.ts"],"names":["DEFAULT_PHOTO_FRAMING","clampFraming"],"mappings":";;;;;AAiCO,IAAM,kBAAA,GAAqB,CAAC,OAAA,KAAiD;AAAA,EAClF,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,KAAA,EAAO,OAAA,CAAQ,KAAA;AACnB;;;AChCO,IAAM,aAAA,GAAgB;AAAA,EAC3B,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA,EACX,KAAA,EAAO;AACT;;;ACDO,IAAM,mBAAA,GAAyC,OAAO,MAAA,CAAO,EAAE,WAAW,CAAA,EAAG,KAAA,EAAO,KAAK;AAGhG,IAAM,SAAA,GAAY,GAAA;AAClB,IAAM,QAAQ,CAAC,CAAA,KAAsB,KAAK,KAAA,CAAM,CAAA,GAAI,SAAS,CAAA,GAAI,SAAA;AAKjE,IAAM,UAAA,GAAoE;AAAA,EACxE,CAAC,aAAA,CAAc,MAAM,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAChC,CAAC,aAAA,CAAc,OAAO,GAAG,CAAC,CAAA,EAAG,GAAG,EAAE,CAAA;AAAA,EAClC,CAAC,aAAA,CAAc,MAAM,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,CAAA;AAAA,EACjC,CAAC,aAAA,CAAc,QAAQ,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAClC,CAAC,aAAA,CAAc,QAAQ,GAAG,CAAC,EAAA,EAAI,GAAG,CAAC,CAAA;AAAA,EACnC,CAAC,aAAA,CAAc,SAAS,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC;AACrC,CAAA;AAMO,SAAS,WAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EACb;AACd,EAAA,IAAI,MAAA,KAAW,aAAA,CAAc,KAAA,EAAO,OAAOA,6BAAA;AAC3C,EAAA,MAAM,IAAA,GAAOC,qBAAa,OAAO,CAAA;AACjC,EAAA,MAAM,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA,GAAI,WAAW,MAAM,CAAA;AACtC,EAAA,OAAOA,oBAAA,CAAa;AAAA,IAClB,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,OAAO,KAAA,CAAM,IAAA,CAAK,KAAA,GAAQ,EAAA,GAAK,MAAM,KAAK;AAAA,GAC3C,CAAA;AACH;AAGO,SAAS,cAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EAClB;AACT,EAAA,MAAM,IAAA,GAAOA,qBAAa,OAAO,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,IAAA,EAAM,MAAA,EAAQ,KAAK,CAAA;AAC5C,EAAA,OAAO,IAAA,CAAK,CAAA,KAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,MAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,KAAA,KAAU,IAAA,CAAK,KAAA;AACvE","file":"framing.js","sourcesContent":["/**\n * Photo framing: the `{x, y, scale}` an organiser sets on a performer card.\n *\n * The bounds, default, clamp and identity check come from\n * `@dloizides/site-template-kit/framing` — the same module the kefi-landings\n * renderer builds its `--photo-tf` CSS from (KEFI-PEOPLE-1 T12 \"Organizer people\n * editor: shared photo framing\"). One copy, so the editor can never offer a value\n * the landing page would silently clamp away.\n *\n * That subpath imports nothing (no ajv, no JSON Schema), so this file stays\n * framework-free: it backs the `@dloizides/ui-media/framing` subpath.\n */\nimport type { PhotoFraming } from '@dloizides/site-template-kit/framing';\n\nexport {\n  PHOTO_FRAMING_BOUNDS,\n  DEFAULT_PHOTO_FRAMING,\n  clampFraming,\n  isDefaultFraming,\n} from '@dloizides/site-template-kit/framing';\nexport type { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/framing';\n\n/**\n * An RN `transform` array. Percent translates are relative to the element\n * itself on RN-web, matching the landing page's CSS `translate(x%, y%) scale(s)`.\n * Typed locally so this module stays free of a react-native import.\n */\nexport type PhotoFramingTransform = [\n  { translateX: `${number}%` },\n  { translateY: `${number}%` },\n  { scale: number },\n];\n\nexport const framingToTransform = (framing: PhotoFraming): PhotoFramingTransform => [\n  { translateX: `${framing.x}%` },\n  { translateY: `${framing.y}%` },\n  { scale: framing.scale },\n];\n","/**\n * The seven controls of the framing editor. An `as const` object rather than a\n * TS `const enum`: a const enum shipped in a .d.ts cannot be read by consumers\n * compiled with `isolatedModules` (every Expo / Babel portal).\n */\nexport const FramingAction = {\n  ZoomIn: 'zoomIn',\n  ZoomOut: 'zoomOut',\n  MoveUp: 'moveUp',\n  MoveDown: 'moveDown',\n  MoveLeft: 'moveLeft',\n  MoveRight: 'moveRight',\n  Reset: 'reset',\n} as const;\n\nexport type FramingAction = (typeof FramingAction)[keyof typeof FramingAction];\n","import { FramingAction } from './FramingAction';\nimport type { PhotoFraming, PhotoFramingInput } from './photoFraming';\nimport { DEFAULT_PHOTO_FRAMING, clampFraming } from './photoFraming';\n\n/** How far one press moves or zooms. */\nexport interface PhotoFramingSteps {\n  /** Nudge per press, % of the card. */\n  offsetPct: number;\n  /** Zoom per press, as a scale delta. */\n  scale: number;\n}\n\nexport const PHOTO_FRAMING_STEPS: PhotoFramingSteps = Object.freeze({ offsetPct: 5, scale: 0.1 });\n\n/** Three decimals, the same precision the landing page writes into its CSS. */\nconst PRECISION = 1000;\nconst round = (n: number): number => Math.round(n * PRECISION) / PRECISION;\n\ntype MoveAction = Exclude<FramingAction, typeof FramingAction.Reset>;\n\n/** [x, y, scale] direction of each non-reset action. */\nconst DIRECTIONS: Record<MoveAction, readonly [number, number, number]> = {\n  [FramingAction.ZoomIn]: [0, 0, 1],\n  [FramingAction.ZoomOut]: [0, 0, -1],\n  [FramingAction.MoveUp]: [0, -1, 0],\n  [FramingAction.MoveDown]: [0, 1, 0],\n  [FramingAction.MoveLeft]: [-1, 0, 0],\n  [FramingAction.MoveRight]: [1, 0, 0],\n};\n\n/**\n * Applies one control press. The result is always clamped and rounded, so ten\n * presses of +0.1 land on exactly 2, not 1.9999999999999998.\n */\nexport function stepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): PhotoFraming {\n  if (action === FramingAction.Reset) return DEFAULT_PHOTO_FRAMING;\n  const base = clampFraming(current);\n  const [dx, dy, ds] = DIRECTIONS[action];\n  return clampFraming({\n    x: round(base.x + dx * steps.offsetPct),\n    y: round(base.y + dy * steps.offsetPct),\n    scale: round(base.scale + ds * steps.scale),\n  });\n}\n\n/** False when the press would change nothing (at a bound, or reset on the default). */\nexport function canStepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): boolean {\n  const base = clampFraming(current);\n  const next = stepFraming(base, action, steps);\n  return next.x !== base.x || next.y !== base.y || next.scale !== base.scale;\n}\n"]}
+{"version":3,"sources":["../src/framing/photoFraming.ts","../src/framing/FramingAction.ts","../src/framing/stepFraming.ts"],"names":["FramingAction","DEFAULT_PHOTO_FRAMING","clampFraming"],"mappings":";;;;;AAgCO,IAAM,kBAAA,GAAqB,CAAC,OAAA,KAAiD;AAAA,EAClF,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,KAAA,EAAO,OAAA,CAAQ,KAAA;AACnB;;;ACnCO,IAAW,aAAA,qBAAAA,cAAAA,KAAX;AACL,EAAAA,eAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,eAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,eAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,eAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,eAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,eAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,eAAA,OAAA,CAAA,GAAQ,OAAA;AAPQ,EAAA,OAAAA,cAAAA;AAAA,CAAA,EAAA,aAAA,IAAA,EAAA;;;ACWX,IAAM,mBAAA,GAAyC,OAAO,MAAA,CAAO,EAAE,WAAW,CAAA,EAAG,KAAA,EAAO,KAAK;AAGhG,IAAM,SAAA,GAAY,GAAA;AAClB,IAAM,QAAQ,CAAC,CAAA,KAAsB,KAAK,KAAA,CAAM,CAAA,GAAI,SAAS,CAAA,GAAI,SAAA;AAKjE,IAAM,UAAA,GAAoE;AAAA,EACxE,CAAA,QAAA,gBAAwB,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAChC,CAAA,SAAA,iBAAyB,CAAC,CAAA,EAAG,GAAG,EAAE,CAAA;AAAA,EAClC,CAAA,QAAA,gBAAwB,CAAC,CAAA,EAAG,IAAI,CAAC,CAAA;AAAA,EACjC,CAAA,UAAA,kBAA0B,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAClC,CAAA,UAAA,kBAA0B,CAAC,EAAA,EAAI,GAAG,CAAC,CAAA;AAAA,EACnC,CAAA,WAAA,mBAA2B,CAAC,CAAA,EAAG,GAAG,CAAC;AACrC,CAAA;AAMO,SAAS,WAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EACb;AACd,EAAA,IAAI,gCAAgC,OAAOC,6BAAA;AAC3C,EAAA,MAAM,IAAA,GAAOC,qBAAa,OAAO,CAAA;AACjC,EAAA,MAAM,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA,GAAI,WAAW,MAAM,CAAA;AACtC,EAAA,OAAOA,oBAAA,CAAa;AAAA,IAClB,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,OAAO,KAAA,CAAM,IAAA,CAAK,KAAA,GAAQ,EAAA,GAAK,MAAM,KAAK;AAAA,GAC3C,CAAA;AACH;AAGO,SAAS,cAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EAClB;AACT,EAAA,MAAM,IAAA,GAAOA,qBAAa,OAAO,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,IAAA,EAAM,MAAA,EAAQ,KAAK,CAAA;AAC5C,EAAA,OAAO,IAAA,CAAK,CAAA,KAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,MAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,KAAA,KAAU,IAAA,CAAK,KAAA;AACvE","file":"framing.js","sourcesContent":["/**\n * Photo framing: the `{x, y, scale}` an editor sets on a photo card.\n *\n * The bounds, default, clamp and identity check come from\n * `@dloizides/site-template-kit/framing` — the same module the static landing\n * renderer builds its `--photo-tf` CSS from. One copy, so the editor can never offer a value\n * the landing page would silently clamp away.\n *\n * That subpath imports nothing (no ajv, no JSON Schema), so this file stays\n * framework-free: it backs the `@dloizides/ui-media/framing` subpath.\n */\nimport type { PhotoFraming } from '@dloizides/site-template-kit/framing';\n\nexport {\n  PHOTO_FRAMING_BOUNDS,\n  DEFAULT_PHOTO_FRAMING,\n  clampFraming,\n  isDefaultFraming,\n} from '@dloizides/site-template-kit/framing';\nexport type { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/framing';\n\n/**\n * An RN `transform` array. Percent translates are relative to the element\n * itself on RN-web, matching the landing page's CSS `translate(x%, y%) scale(s)`.\n * Typed locally so this module stays free of a react-native import.\n */\nexport type PhotoFramingTransform = [\n  { translateX: `${number}%` },\n  { translateY: `${number}%` },\n  { scale: number },\n];\n\nexport const framingToTransform = (framing: PhotoFraming): PhotoFramingTransform => [\n  { translateX: `${framing.x}%` },\n  { translateY: `${framing.y}%` },\n  { scale: framing.scale },\n];\n","/** The seven controls of the framing editor. */\nexport const enum FramingAction {\n  ZoomIn = 'zoomIn',\n  ZoomOut = 'zoomOut',\n  MoveUp = 'moveUp',\n  MoveDown = 'moveDown',\n  MoveLeft = 'moveLeft',\n  MoveRight = 'moveRight',\n  Reset = 'reset',\n}\n","import { FramingAction } from './FramingAction';\nimport type { PhotoFraming, PhotoFramingInput } from './photoFraming';\nimport { DEFAULT_PHOTO_FRAMING, clampFraming } from './photoFraming';\n\n/** How far one press moves or zooms. */\nexport interface PhotoFramingSteps {\n  /** Nudge per press, % of the card. */\n  offsetPct: number;\n  /** Zoom per press, as a scale delta. */\n  scale: number;\n}\n\nexport const PHOTO_FRAMING_STEPS: PhotoFramingSteps = Object.freeze({ offsetPct: 5, scale: 0.1 });\n\n/** Three decimals, the same precision the landing page writes into its CSS. */\nconst PRECISION = 1000;\nconst round = (n: number): number => Math.round(n * PRECISION) / PRECISION;\n\ntype MoveAction = Exclude<FramingAction, FramingAction.Reset>;\n\n/** [x, y, scale] direction of each non-reset action. */\nconst DIRECTIONS: Record<MoveAction, readonly [number, number, number]> = {\n  [FramingAction.ZoomIn]: [0, 0, 1],\n  [FramingAction.ZoomOut]: [0, 0, -1],\n  [FramingAction.MoveUp]: [0, -1, 0],\n  [FramingAction.MoveDown]: [0, 1, 0],\n  [FramingAction.MoveLeft]: [-1, 0, 0],\n  [FramingAction.MoveRight]: [1, 0, 0],\n};\n\n/**\n * Applies one control press. The result is always clamped and rounded, so ten\n * presses of +0.1 land on exactly 2, not 1.9999999999999998.\n */\nexport function stepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): PhotoFraming {\n  if (action === FramingAction.Reset) return DEFAULT_PHOTO_FRAMING;\n  const base = clampFraming(current);\n  const [dx, dy, ds] = DIRECTIONS[action];\n  return clampFraming({\n    x: round(base.x + dx * steps.offsetPct),\n    y: round(base.y + dy * steps.offsetPct),\n    scale: round(base.scale + ds * steps.scale),\n  });\n}\n\n/** False when the press would change nothing (at a bound, or reset on the default). */\nexport function canStepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): boolean {\n  const base = clampFraming(current);\n  const next = stepFraming(base, action, steps);\n  return next.x !== base.x || next.y !== base.y || next.scale !== base.scale;\n}\n"]}

package/dist/framing.mjs

@@ -9,30 +9,31 @@ var framingToTransform = (framing) => [
 ];
 
 // src/framing/FramingAction.ts
-var FramingAction = {
-  ZoomIn: "zoomIn",
-  ZoomOut: "zoomOut",
-  MoveUp: "moveUp",
-  MoveDown: "moveDown",
-  MoveLeft: "moveLeft",
-  MoveRight: "moveRight",
-  Reset: "reset"
-};
+var FramingAction = /* @__PURE__ */ ((FramingAction2) => {
+  FramingAction2["ZoomIn"] = "zoomIn";
+  FramingAction2["ZoomOut"] = "zoomOut";
+  FramingAction2["MoveUp"] = "moveUp";
+  FramingAction2["MoveDown"] = "moveDown";
+  FramingAction2["MoveLeft"] = "moveLeft";
+  FramingAction2["MoveRight"] = "moveRight";
+  FramingAction2["Reset"] = "reset";
+  return FramingAction2;
+})(FramingAction || {});
 
 // src/framing/stepFraming.ts
 var PHOTO_FRAMING_STEPS = Object.freeze({ offsetPct: 5, scale: 0.1 });
 var PRECISION = 1e3;
 var round = (n) => Math.round(n * PRECISION) / PRECISION;
 var DIRECTIONS = {
-  [FramingAction.ZoomIn]: [0, 0, 1],
-  [FramingAction.ZoomOut]: [0, 0, -1],
-  [FramingAction.MoveUp]: [0, -1, 0],
-  [FramingAction.MoveDown]: [0, 1, 0],
-  [FramingAction.MoveLeft]: [-1, 0, 0],
-  [FramingAction.MoveRight]: [1, 0, 0]
+  ["zoomIn" /* ZoomIn */]: [0, 0, 1],
+  ["zoomOut" /* ZoomOut */]: [0, 0, -1],
+  ["moveUp" /* MoveUp */]: [0, -1, 0],
+  ["moveDown" /* MoveDown */]: [0, 1, 0],
+  ["moveLeft" /* MoveLeft */]: [-1, 0, 0],
+  ["moveRight" /* MoveRight */]: [1, 0, 0]
 };
 function stepFraming(current, action, steps = PHOTO_FRAMING_STEPS) {
-  if (action === FramingAction.Reset) return DEFAULT_PHOTO_FRAMING;
+  if (action === "reset" /* Reset */) return DEFAULT_PHOTO_FRAMING;
   const base = clampFraming(current);
   const [dx, dy, ds] = DIRECTIONS[action];
   return clampFraming({

package/dist/framing.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/framing/photoFraming.ts","../src/framing/FramingAction.ts","../src/framing/stepFraming.ts"],"names":[],"mappings":";;;;AAiCO,IAAM,kBAAA,GAAqB,CAAC,OAAA,KAAiD;AAAA,EAClF,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,KAAA,EAAO,OAAA,CAAQ,KAAA;AACnB;;;AChCO,IAAM,aAAA,GAAgB;AAAA,EAC3B,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA,EACX,KAAA,EAAO;AACT;;;ACDO,IAAM,mBAAA,GAAyC,OAAO,MAAA,CAAO,EAAE,WAAW,CAAA,EAAG,KAAA,EAAO,KAAK;AAGhG,IAAM,SAAA,GAAY,GAAA;AAClB,IAAM,QAAQ,CAAC,CAAA,KAAsB,KAAK,KAAA,CAAM,CAAA,GAAI,SAAS,CAAA,GAAI,SAAA;AAKjE,IAAM,UAAA,GAAoE;AAAA,EACxE,CAAC,aAAA,CAAc,MAAM,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAChC,CAAC,aAAA,CAAc,OAAO,GAAG,CAAC,CAAA,EAAG,GAAG,EAAE,CAAA;AAAA,EAClC,CAAC,aAAA,CAAc,MAAM,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,CAAA;AAAA,EACjC,CAAC,aAAA,CAAc,QAAQ,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAClC,CAAC,aAAA,CAAc,QAAQ,GAAG,CAAC,EAAA,EAAI,GAAG,CAAC,CAAA;AAAA,EACnC,CAAC,aAAA,CAAc,SAAS,GAAG,CAAC,CAAA,EAAG,GAAG,CAAC;AACrC,CAAA;AAMO,SAAS,WAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EACb;AACd,EAAA,IAAI,MAAA,KAAW,aAAA,CAAc,KAAA,EAAO,OAAO,qBAAA;AAC3C,EAAA,MAAM,IAAA,GAAO,aAAa,OAAO,CAAA;AACjC,EAAA,MAAM,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA,GAAI,WAAW,MAAM,CAAA;AACtC,EAAA,OAAO,YAAA,CAAa;AAAA,IAClB,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,OAAO,KAAA,CAAM,IAAA,CAAK,KAAA,GAAQ,EAAA,GAAK,MAAM,KAAK;AAAA,GAC3C,CAAA;AACH;AAGO,SAAS,cAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EAClB;AACT,EAAA,MAAM,IAAA,GAAO,aAAa,OAAO,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,IAAA,EAAM,MAAA,EAAQ,KAAK,CAAA;AAC5C,EAAA,OAAO,IAAA,CAAK,CAAA,KAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,MAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,KAAA,KAAU,IAAA,CAAK,KAAA;AACvE","file":"framing.mjs","sourcesContent":["/**\n * Photo framing: the `{x, y, scale}` an organiser sets on a performer card.\n *\n * The bounds, default, clamp and identity check come from\n * `@dloizides/site-template-kit/framing` — the same module the kefi-landings\n * renderer builds its `--photo-tf` CSS from (KEFI-PEOPLE-1 T12 \"Organizer people\n * editor: shared photo framing\"). One copy, so the editor can never offer a value\n * the landing page would silently clamp away.\n *\n * That subpath imports nothing (no ajv, no JSON Schema), so this file stays\n * framework-free: it backs the `@dloizides/ui-media/framing` subpath.\n */\nimport type { PhotoFraming } from '@dloizides/site-template-kit/framing';\n\nexport {\n  PHOTO_FRAMING_BOUNDS,\n  DEFAULT_PHOTO_FRAMING,\n  clampFraming,\n  isDefaultFraming,\n} from '@dloizides/site-template-kit/framing';\nexport type { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/framing';\n\n/**\n * An RN `transform` array. Percent translates are relative to the element\n * itself on RN-web, matching the landing page's CSS `translate(x%, y%) scale(s)`.\n * Typed locally so this module stays free of a react-native import.\n */\nexport type PhotoFramingTransform = [\n  { translateX: `${number}%` },\n  { translateY: `${number}%` },\n  { scale: number },\n];\n\nexport const framingToTransform = (framing: PhotoFraming): PhotoFramingTransform => [\n  { translateX: `${framing.x}%` },\n  { translateY: `${framing.y}%` },\n  { scale: framing.scale },\n];\n","/**\n * The seven controls of the framing editor. An `as const` object rather than a\n * TS `const enum`: a const enum shipped in a .d.ts cannot be read by consumers\n * compiled with `isolatedModules` (every Expo / Babel portal).\n */\nexport const FramingAction = {\n  ZoomIn: 'zoomIn',\n  ZoomOut: 'zoomOut',\n  MoveUp: 'moveUp',\n  MoveDown: 'moveDown',\n  MoveLeft: 'moveLeft',\n  MoveRight: 'moveRight',\n  Reset: 'reset',\n} as const;\n\nexport type FramingAction = (typeof FramingAction)[keyof typeof FramingAction];\n","import { FramingAction } from './FramingAction';\nimport type { PhotoFraming, PhotoFramingInput } from './photoFraming';\nimport { DEFAULT_PHOTO_FRAMING, clampFraming } from './photoFraming';\n\n/** How far one press moves or zooms. */\nexport interface PhotoFramingSteps {\n  /** Nudge per press, % of the card. */\n  offsetPct: number;\n  /** Zoom per press, as a scale delta. */\n  scale: number;\n}\n\nexport const PHOTO_FRAMING_STEPS: PhotoFramingSteps = Object.freeze({ offsetPct: 5, scale: 0.1 });\n\n/** Three decimals, the same precision the landing page writes into its CSS. */\nconst PRECISION = 1000;\nconst round = (n: number): number => Math.round(n * PRECISION) / PRECISION;\n\ntype MoveAction = Exclude<FramingAction, typeof FramingAction.Reset>;\n\n/** [x, y, scale] direction of each non-reset action. */\nconst DIRECTIONS: Record<MoveAction, readonly [number, number, number]> = {\n  [FramingAction.ZoomIn]: [0, 0, 1],\n  [FramingAction.ZoomOut]: [0, 0, -1],\n  [FramingAction.MoveUp]: [0, -1, 0],\n  [FramingAction.MoveDown]: [0, 1, 0],\n  [FramingAction.MoveLeft]: [-1, 0, 0],\n  [FramingAction.MoveRight]: [1, 0, 0],\n};\n\n/**\n * Applies one control press. The result is always clamped and rounded, so ten\n * presses of +0.1 land on exactly 2, not 1.9999999999999998.\n */\nexport function stepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): PhotoFraming {\n  if (action === FramingAction.Reset) return DEFAULT_PHOTO_FRAMING;\n  const base = clampFraming(current);\n  const [dx, dy, ds] = DIRECTIONS[action];\n  return clampFraming({\n    x: round(base.x + dx * steps.offsetPct),\n    y: round(base.y + dy * steps.offsetPct),\n    scale: round(base.scale + ds * steps.scale),\n  });\n}\n\n/** False when the press would change nothing (at a bound, or reset on the default). */\nexport function canStepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): boolean {\n  const base = clampFraming(current);\n  const next = stepFraming(base, action, steps);\n  return next.x !== base.x || next.y !== base.y || next.scale !== base.scale;\n}\n"]}
+{"version":3,"sources":["../src/framing/photoFraming.ts","../src/framing/FramingAction.ts","../src/framing/stepFraming.ts"],"names":["FramingAction"],"mappings":";;;;AAgCO,IAAM,kBAAA,GAAqB,CAAC,OAAA,KAAiD;AAAA,EAClF,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,UAAA,EAAY,CAAA,EAAG,OAAA,CAAQ,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,EAC9B,EAAE,KAAA,EAAO,OAAA,CAAQ,KAAA;AACnB;;;ACnCO,IAAW,aAAA,qBAAAA,cAAAA,KAAX;AACL,EAAAA,eAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,eAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,eAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,eAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,eAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,eAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,eAAA,OAAA,CAAA,GAAQ,OAAA;AAPQ,EAAA,OAAAA,cAAAA;AAAA,CAAA,EAAA,aAAA,IAAA,EAAA;;;ACWX,IAAM,mBAAA,GAAyC,OAAO,MAAA,CAAO,EAAE,WAAW,CAAA,EAAG,KAAA,EAAO,KAAK;AAGhG,IAAM,SAAA,GAAY,GAAA;AAClB,IAAM,QAAQ,CAAC,CAAA,KAAsB,KAAK,KAAA,CAAM,CAAA,GAAI,SAAS,CAAA,GAAI,SAAA;AAKjE,IAAM,UAAA,GAAoE;AAAA,EACxE,CAAA,QAAA,gBAAwB,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAChC,CAAA,SAAA,iBAAyB,CAAC,CAAA,EAAG,GAAG,EAAE,CAAA;AAAA,EAClC,CAAA,QAAA,gBAAwB,CAAC,CAAA,EAAG,IAAI,CAAC,CAAA;AAAA,EACjC,CAAA,UAAA,kBAA0B,CAAC,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,EAClC,CAAA,UAAA,kBAA0B,CAAC,EAAA,EAAI,GAAG,CAAC,CAAA;AAAA,EACnC,CAAA,WAAA,mBAA2B,CAAC,CAAA,EAAG,GAAG,CAAC;AACrC,CAAA;AAMO,SAAS,WAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EACb;AACd,EAAA,IAAI,gCAAgC,OAAO,qBAAA;AAC3C,EAAA,MAAM,IAAA,GAAO,aAAa,OAAO,CAAA;AACjC,EAAA,MAAM,CAAC,EAAA,EAAI,EAAA,EAAI,EAAE,CAAA,GAAI,WAAW,MAAM,CAAA;AACtC,EAAA,OAAO,YAAA,CAAa;AAAA,IAClB,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,GAAG,KAAA,CAAM,IAAA,CAAK,CAAA,GAAI,EAAA,GAAK,MAAM,SAAS,CAAA;AAAA,IACtC,OAAO,KAAA,CAAM,IAAA,CAAK,KAAA,GAAQ,EAAA,GAAK,MAAM,KAAK;AAAA,GAC3C,CAAA;AACH;AAGO,SAAS,cAAA,CACd,OAAA,EACA,MAAA,EACA,KAAA,GAA2B,mBAAA,EAClB;AACT,EAAA,MAAM,IAAA,GAAO,aAAa,OAAO,CAAA;AACjC,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,IAAA,EAAM,MAAA,EAAQ,KAAK,CAAA;AAC5C,EAAA,OAAO,IAAA,CAAK,CAAA,KAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,MAAM,IAAA,CAAK,CAAA,IAAK,IAAA,CAAK,KAAA,KAAU,IAAA,CAAK,KAAA;AACvE","file":"framing.mjs","sourcesContent":["/**\n * Photo framing: the `{x, y, scale}` an editor sets on a photo card.\n *\n * The bounds, default, clamp and identity check come from\n * `@dloizides/site-template-kit/framing` — the same module the static landing\n * renderer builds its `--photo-tf` CSS from. One copy, so the editor can never offer a value\n * the landing page would silently clamp away.\n *\n * That subpath imports nothing (no ajv, no JSON Schema), so this file stays\n * framework-free: it backs the `@dloizides/ui-media/framing` subpath.\n */\nimport type { PhotoFraming } from '@dloizides/site-template-kit/framing';\n\nexport {\n  PHOTO_FRAMING_BOUNDS,\n  DEFAULT_PHOTO_FRAMING,\n  clampFraming,\n  isDefaultFraming,\n} from '@dloizides/site-template-kit/framing';\nexport type { PhotoFraming, PhotoFramingInput } from '@dloizides/site-template-kit/framing';\n\n/**\n * An RN `transform` array. Percent translates are relative to the element\n * itself on RN-web, matching the landing page's CSS `translate(x%, y%) scale(s)`.\n * Typed locally so this module stays free of a react-native import.\n */\nexport type PhotoFramingTransform = [\n  { translateX: `${number}%` },\n  { translateY: `${number}%` },\n  { scale: number },\n];\n\nexport const framingToTransform = (framing: PhotoFraming): PhotoFramingTransform => [\n  { translateX: `${framing.x}%` },\n  { translateY: `${framing.y}%` },\n  { scale: framing.scale },\n];\n","/** The seven controls of the framing editor. */\nexport const enum FramingAction {\n  ZoomIn = 'zoomIn',\n  ZoomOut = 'zoomOut',\n  MoveUp = 'moveUp',\n  MoveDown = 'moveDown',\n  MoveLeft = 'moveLeft',\n  MoveRight = 'moveRight',\n  Reset = 'reset',\n}\n","import { FramingAction } from './FramingAction';\nimport type { PhotoFraming, PhotoFramingInput } from './photoFraming';\nimport { DEFAULT_PHOTO_FRAMING, clampFraming } from './photoFraming';\n\n/** How far one press moves or zooms. */\nexport interface PhotoFramingSteps {\n  /** Nudge per press, % of the card. */\n  offsetPct: number;\n  /** Zoom per press, as a scale delta. */\n  scale: number;\n}\n\nexport const PHOTO_FRAMING_STEPS: PhotoFramingSteps = Object.freeze({ offsetPct: 5, scale: 0.1 });\n\n/** Three decimals, the same precision the landing page writes into its CSS. */\nconst PRECISION = 1000;\nconst round = (n: number): number => Math.round(n * PRECISION) / PRECISION;\n\ntype MoveAction = Exclude<FramingAction, FramingAction.Reset>;\n\n/** [x, y, scale] direction of each non-reset action. */\nconst DIRECTIONS: Record<MoveAction, readonly [number, number, number]> = {\n  [FramingAction.ZoomIn]: [0, 0, 1],\n  [FramingAction.ZoomOut]: [0, 0, -1],\n  [FramingAction.MoveUp]: [0, -1, 0],\n  [FramingAction.MoveDown]: [0, 1, 0],\n  [FramingAction.MoveLeft]: [-1, 0, 0],\n  [FramingAction.MoveRight]: [1, 0, 0],\n};\n\n/**\n * Applies one control press. The result is always clamped and rounded, so ten\n * presses of +0.1 land on exactly 2, not 1.9999999999999998.\n */\nexport function stepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): PhotoFraming {\n  if (action === FramingAction.Reset) return DEFAULT_PHOTO_FRAMING;\n  const base = clampFraming(current);\n  const [dx, dy, ds] = DIRECTIONS[action];\n  return clampFraming({\n    x: round(base.x + dx * steps.offsetPct),\n    y: round(base.y + dy * steps.offsetPct),\n    scale: round(base.scale + ds * steps.scale),\n  });\n}\n\n/** False when the press would change nothing (at a bound, or reset on the default). */\nexport function canStepFraming(\n  current: PhotoFramingInput | null | undefined,\n  action: FramingAction,\n  steps: PhotoFramingSteps = PHOTO_FRAMING_STEPS,\n): boolean {\n  const base = clampFraming(current);\n  const next = stepFraming(base, action, steps);\n  return next.x !== base.x || next.y !== base.y || next.scale !== base.scale;\n}\n"]}

package/dist/index.d.mts

@@ -4,19 +4,15 @@ import React from 'react';
 import { ButtonVariant } from '@dloizides/ui-buttons';
 import { PhotoFramingInput, PhotoFraming } from '@dloizides/site-template-kit/framing';
 export { DEFAULT_PHOTO_FRAMING, PHOTO_FRAMING_BOUNDS, PhotoFraming, PhotoFramingInput, clampFraming, isDefaultFraming } from '@dloizides/site-template-kit/framing';
+import { StyleProp, ViewStyle } from 'react-native';
 
-/**
- * The four states of an image upload slot (KEFI-PEOPLE-1 design board "upload
- * slot"). An `as const` object, not a `const enum`, so Babel / isolatedModules
- * consumers can read it from the published .d.ts.
- */
-declare const ImagePickerStatus: {
-    readonly Idle: "idle";
-    readonly Uploading: "uploading";
-    readonly Error: "error";
-    readonly Done: "done";
-};
-type ImagePickerStatus = (typeof ImagePickerStatus)[keyof typeof ImagePickerStatus];
+/** The four states of an image upload slot. */
+declare const enum ImagePickerStatus {
+    Idle = "idle",
+    Uploading = "uploading",
+    Error = "error",
+    Done = "done"
+}
 
 /**
  * ImagePickerButton — one upload slot: pick an image, hand it to the consumer's
@@ -42,8 +38,11 @@ interface ImagePickerLabels {
     /** Accessibility hint for the button: "Opens a file picker to choose an image". */
     hint: string;
 }
-interface ImagePickerButtonProps<TFile = File> {
-    upload: (file: TFile) => Promise<void>;
+interface ImagePickerButtonProps<TFile = File, TResult = void> {
+    /** Consumer transport; whatever it resolves with (e.g. the stored URL) goes to `onUploaded`. */
+    upload: (file: TFile) => Promise<TResult>;
+    /** Called with `upload`'s result once the slot is `done`. */
+    onUploaded?: (result: TResult) => void;
     labels: ImagePickerLabels;
     testID: string;
     /** Defaults to the browser file dialog. Native consumers pass their own picker. */
@@ -64,7 +63,7 @@ interface PickerView {
 }
 /** Pure status -> copy/variant mapping (unit-tested; the component only paints it). */
 declare function resolvePickerView(status: ImagePickerStatus, labels: ImagePickerLabels): PickerView;
-declare function ImagePickerButton<TFile = File>({ upload, labels, testID, pickFile, accept, hasImage, onError, disabled, }: ImagePickerButtonProps<TFile>): React.ReactElement;
+declare function ImagePickerButton<TFile = File, TResult = void>({ upload, onUploaded, labels, testID, pickFile, accept, hasImage, onError, disabled, }: ImagePickerButtonProps<TFile, TResult>): React.ReactElement;
 
 declare const DEFAULT_IMAGE_ACCEPT = "image/*";
 /**
@@ -72,9 +71,11 @@ declare const DEFAULT_IMAGE_ACCEPT = "image/*";
  * where there is no DOM (native) — a native consumer passes its own `pickFile`.
  */
 declare function pickWebImage(accept?: string): Promise<File | null>;
-interface UseImageUploadOptions<TFile> {
+interface UseImageUploadOptions<TFile, TResult = void> {
     /** Consumer-owned transport. Resolve = stored; reject = error state. No network code lives here. */
-    upload: (file: TFile) => Promise<void>;
+    upload: (file: TFile) => Promise<TResult>;
+    /** Given what `upload` resolved with (e.g. the stored URL), once the slot is `done`. */
+    onUploaded?: (result: TResult) => void;
     /** Picks one file; `null` means the user cancelled. */
     pickFile: () => Promise<TFile | null>;
     /** Start in `done` when the slot already holds an image. */
@@ -92,7 +93,25 @@ interface ImageUploadState {
  * done or error back to uploading on the next pick. A cancelled pick leaves the
  * state as it was, so cancelling "Replace" does not wipe a finished upload.
  */
-declare function useImageUpload<TFile>({ upload, pickFile, hasImage, onError, }: UseImageUploadOptions<TFile>): ImageUploadState;
+declare function useImageUpload<TFile, TResult = void>({ upload, pickFile, hasImage, onError, onUploaded, }: UseImageUploadOptions<TFile, TResult>): ImageUploadState;
+
+/**
+ * Where the photo sits inside its frame. `Bottom` is for cut-out portraits
+ * (`object-fit: contain; object-position: center bottom`): feet on the floor of
+ * the card.
+ */
+declare const enum PhotoAnchor {
+    Center = "center",
+    Bottom = "bottom"
+}
+interface PhotoAnchorLayout {
+    /** Applied to the editor's preview column: where the consumer's card sits vertically. */
+    justifyContent: 'center' | 'flex-end';
+    /** CSS `object-position` the consumer spreads onto its `<img>` / RN-web image. */
+    objectPosition: 'center center' | 'center bottom';
+}
+/** Pure anchor -> layout mapping (unit-tested; the editor only applies it). */
+declare function resolvePhotoAnchor(anchor: PhotoAnchor): PhotoAnchorLayout;
 
 /** Name + hint of one control. `label` is the full phrase ("Move photo up"). */
 interface FramingActionLabel {
@@ -114,6 +133,10 @@ interface PhotoFramingPreviewArgs {
     framing: PhotoFraming;
     /** Ready to spread onto the photo: `style={{ transform }}`. */
     transform: PhotoFramingTransform;
+    /** The editor's `anchor` prop (default `center`). */
+    anchor: PhotoAnchor;
+    /** CSS `object-position` for that anchor, ready for the photo's style. */
+    objectPosition: string;
 }
 interface PhotoFramingEditorProps {
     /** Stored framing; clamped before use, so raw config is safe to pass. */
@@ -128,10 +151,12 @@ interface PhotoFramingEditorProps {
     /** Override the default arrow / plus / minus glyphs (e.g. with ui-icons). */
     renderGlyph?: (action: FramingAction, color: string, size: number) => React.ReactNode;
     disabled?: boolean;
+    /** Where the photo sits in the preview. `bottom` for cut-out portraits. Default `center`. */
+    anchor?: PhotoAnchor;
 }
 
 /**
- * PhotoFramingEditor — the KEFI-PEOPLE-1 "A2" framing screen: a live preview of
+ * PhotoFramingEditor — a photo framing screen: a live preview of
  * the consumer's own card (render prop) beside a zoom stepper and a position
  * d-pad. The value is `{x, y, scale}`, clamped to PHOTO_FRAMING_BOUNDS, the same
  * rules the public landing page applies — the preview is what ships.
@@ -140,6 +165,47 @@ interface PhotoFramingEditorProps {
  * LAYOUT_COLLAPSE_BREAKPOINT up they sit side by side.
  */
 
-declare const PhotoFramingEditor: ({ value, onChange, renderPreview, labels, testID, steps, renderGlyph, disabled, }: PhotoFramingEditorProps) => React.ReactElement;
+declare const PhotoFramingEditor: ({ value, onChange, renderPreview, labels, testID, steps, renderGlyph, disabled, anchor, }: PhotoFramingEditorProps) => React.ReactElement;
+
+/**
+ * AnchoredPhoto — a contained photo that fills its parent box, framed by a
+ * `{x, y, scale}` value and anchored to the centre or the bottom edge.
+ *
+ * Why not `object-position`: RN-web's Image paints a centred background image,
+ * so `center bottom` has no effect. Instead the image is sized to its own aspect
+ * ratio (measured with `Image.getSize`) and pushed down by flexbox. The framing
+ * transform sits on a full-box layer, so its percentages mean the same as the
+ * CSS `translate(x%, y%) scale(s)` a static page applies to its `<img>`.
+ *
+ * The parent owns the box (aspect, radius, background, empty state); this renders
+ * only the photo layer. No strings of its own: `accessibilityLabel` is a prop.
+ */
+
+interface AnchoredPhotoProps {
+    uri: string;
+    /** `bottom` for cut-out portraits. Default `center`. */
+    anchor?: PhotoAnchor;
+    /** Stored or live framing; clamped before use, so raw config is safe. */
+    framing?: PhotoFramingInput | null;
+    /** Extra style for the full-box frame layer. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel: string;
+    testID?: string;
+}
+declare const AnchoredPhoto: ({ uri, anchor, framing, style, accessibilityLabel, testID, }: AnchoredPhotoProps) => React.ReactElement;
+
+declare function useImageAspectRatio(uri: string): number | null;
+
+interface AnchoredPhotoLayout {
+    /** Main-axis placement of the photo inside its full-box frame. */
+    justifyContent: PhotoAnchorLayout['justifyContent'];
+    /**
+     * `null` = fill the box (size unknown yet, image stays centred by `contain`);
+     * a number = size the image to that width / height so the frame can anchor it.
+     */
+    aspectRatio: number | null;
+}
+/** Pure anchor + measured aspect -> layout (unit-tested; AnchoredPhoto only paints it). */
+declare function resolveAnchoredPhotoLayout(anchor: PhotoAnchor, aspectRatio: number | null): AnchoredPhotoLayout;
 
-export { DEFAULT_IMAGE_ACCEPT, FramingAction, type FramingActionLabel, ImagePickerButton, type ImagePickerButtonProps, type ImagePickerLabels, ImagePickerStatus, type ImageUploadState, PhotoFramingEditor, type PhotoFramingEditorProps, type PhotoFramingLabels, type PhotoFramingPreviewArgs, PhotoFramingSteps, PhotoFramingTransform, type PickerView, type UseImageUploadOptions, pickWebImage, resolvePickerView, useImageUpload };
+export { AnchoredPhoto, type AnchoredPhotoLayout, type AnchoredPhotoProps, DEFAULT_IMAGE_ACCEPT, FramingAction, type FramingActionLabel, ImagePickerButton, type ImagePickerButtonProps, type ImagePickerLabels, ImagePickerStatus, type ImageUploadState, PhotoAnchor, type PhotoAnchorLayout, PhotoFramingEditor, type PhotoFramingEditorProps, type PhotoFramingLabels, type PhotoFramingPreviewArgs, PhotoFramingSteps, PhotoFramingTransform, type PickerView, type UseImageUploadOptions, pickWebImage, resolveAnchoredPhotoLayout, resolvePhotoAnchor, resolvePickerView, useImageAspectRatio, useImageUpload };

package/dist/index.d.ts

@@ -4,19 +4,15 @@ import React from 'react';
 import { ButtonVariant } from '@dloizides/ui-buttons';
 import { PhotoFramingInput, PhotoFraming } from '@dloizides/site-template-kit/framing';
 export { DEFAULT_PHOTO_FRAMING, PHOTO_FRAMING_BOUNDS, PhotoFraming, PhotoFramingInput, clampFraming, isDefaultFraming } from '@dloizides/site-template-kit/framing';
+import { StyleProp, ViewStyle } from 'react-native';
 
-/**
- * The four states of an image upload slot (KEFI-PEOPLE-1 design board "upload
- * slot"). An `as const` object, not a `const enum`, so Babel / isolatedModules
- * consumers can read it from the published .d.ts.
- */
-declare const ImagePickerStatus: {
-    readonly Idle: "idle";
-    readonly Uploading: "uploading";
-    readonly Error: "error";
-    readonly Done: "done";
-};
-type ImagePickerStatus = (typeof ImagePickerStatus)[keyof typeof ImagePickerStatus];
+/** The four states of an image upload slot. */
+declare const enum ImagePickerStatus {
+    Idle = "idle",
+    Uploading = "uploading",
+    Error = "error",
+    Done = "done"
+}
 
 /**
  * ImagePickerButton — one upload slot: pick an image, hand it to the consumer's
@@ -42,8 +38,11 @@ interface ImagePickerLabels {
     /** Accessibility hint for the button: "Opens a file picker to choose an image". */
     hint: string;
 }
-interface ImagePickerButtonProps<TFile = File> {
-    upload: (file: TFile) => Promise<void>;
+interface ImagePickerButtonProps<TFile = File, TResult = void> {
+    /** Consumer transport; whatever it resolves with (e.g. the stored URL) goes to `onUploaded`. */
+    upload: (file: TFile) => Promise<TResult>;
+    /** Called with `upload`'s result once the slot is `done`. */
+    onUploaded?: (result: TResult) => void;
     labels: ImagePickerLabels;
     testID: string;
     /** Defaults to the browser file dialog. Native consumers pass their own picker. */
@@ -64,7 +63,7 @@ interface PickerView {
 }
 /** Pure status -> copy/variant mapping (unit-tested; the component only paints it). */
 declare function resolvePickerView(status: ImagePickerStatus, labels: ImagePickerLabels): PickerView;
-declare function ImagePickerButton<TFile = File>({ upload, labels, testID, pickFile, accept, hasImage, onError, disabled, }: ImagePickerButtonProps<TFile>): React.ReactElement;
+declare function ImagePickerButton<TFile = File, TResult = void>({ upload, onUploaded, labels, testID, pickFile, accept, hasImage, onError, disabled, }: ImagePickerButtonProps<TFile, TResult>): React.ReactElement;
 
 declare const DEFAULT_IMAGE_ACCEPT = "image/*";
 /**
@@ -72,9 +71,11 @@ declare const DEFAULT_IMAGE_ACCEPT = "image/*";
  * where there is no DOM (native) — a native consumer passes its own `pickFile`.
  */
 declare function pickWebImage(accept?: string): Promise<File | null>;
-interface UseImageUploadOptions<TFile> {
+interface UseImageUploadOptions<TFile, TResult = void> {
     /** Consumer-owned transport. Resolve = stored; reject = error state. No network code lives here. */
-    upload: (file: TFile) => Promise<void>;
+    upload: (file: TFile) => Promise<TResult>;
+    /** Given what `upload` resolved with (e.g. the stored URL), once the slot is `done`. */
+    onUploaded?: (result: TResult) => void;
     /** Picks one file; `null` means the user cancelled. */
     pickFile: () => Promise<TFile | null>;
     /** Start in `done` when the slot already holds an image. */
@@ -92,7 +93,25 @@ interface ImageUploadState {
  * done or error back to uploading on the next pick. A cancelled pick leaves the
  * state as it was, so cancelling "Replace" does not wipe a finished upload.
  */
-declare function useImageUpload<TFile>({ upload, pickFile, hasImage, onError, }: UseImageUploadOptions<TFile>): ImageUploadState;
+declare function useImageUpload<TFile, TResult = void>({ upload, pickFile, hasImage, onError, onUploaded, }: UseImageUploadOptions<TFile, TResult>): ImageUploadState;
+
+/**
+ * Where the photo sits inside its frame. `Bottom` is for cut-out portraits
+ * (`object-fit: contain; object-position: center bottom`): feet on the floor of
+ * the card.
+ */
+declare const enum PhotoAnchor {
+    Center = "center",
+    Bottom = "bottom"
+}
+interface PhotoAnchorLayout {
+    /** Applied to the editor's preview column: where the consumer's card sits vertically. */
+    justifyContent: 'center' | 'flex-end';
+    /** CSS `object-position` the consumer spreads onto its `<img>` / RN-web image. */
+    objectPosition: 'center center' | 'center bottom';
+}
+/** Pure anchor -> layout mapping (unit-tested; the editor only applies it). */
+declare function resolvePhotoAnchor(anchor: PhotoAnchor): PhotoAnchorLayout;
 
 /** Name + hint of one control. `label` is the full phrase ("Move photo up"). */
 interface FramingActionLabel {
@@ -114,6 +133,10 @@ interface PhotoFramingPreviewArgs {
     framing: PhotoFraming;
     /** Ready to spread onto the photo: `style={{ transform }}`. */
     transform: PhotoFramingTransform;
+    /** The editor's `anchor` prop (default `center`). */
+    anchor: PhotoAnchor;
+    /** CSS `object-position` for that anchor, ready for the photo's style. */
+    objectPosition: string;
 }
 interface PhotoFramingEditorProps {
     /** Stored framing; clamped before use, so raw config is safe to pass. */
@@ -128,10 +151,12 @@ interface PhotoFramingEditorProps {
     /** Override the default arrow / plus / minus glyphs (e.g. with ui-icons). */
     renderGlyph?: (action: FramingAction, color: string, size: number) => React.ReactNode;
     disabled?: boolean;
+    /** Where the photo sits in the preview. `bottom` for cut-out portraits. Default `center`. */
+    anchor?: PhotoAnchor;
 }
 
 /**
- * PhotoFramingEditor — the KEFI-PEOPLE-1 "A2" framing screen: a live preview of
+ * PhotoFramingEditor — a photo framing screen: a live preview of
  * the consumer's own card (render prop) beside a zoom stepper and a position
  * d-pad. The value is `{x, y, scale}`, clamped to PHOTO_FRAMING_BOUNDS, the same
  * rules the public landing page applies — the preview is what ships.
@@ -140,6 +165,47 @@ interface PhotoFramingEditorProps {
  * LAYOUT_COLLAPSE_BREAKPOINT up they sit side by side.
  */
 
-declare const PhotoFramingEditor: ({ value, onChange, renderPreview, labels, testID, steps, renderGlyph, disabled, }: PhotoFramingEditorProps) => React.ReactElement;
+declare const PhotoFramingEditor: ({ value, onChange, renderPreview, labels, testID, steps, renderGlyph, disabled, anchor, }: PhotoFramingEditorProps) => React.ReactElement;
+
+/**
+ * AnchoredPhoto — a contained photo that fills its parent box, framed by a
+ * `{x, y, scale}` value and anchored to the centre or the bottom edge.
+ *
+ * Why not `object-position`: RN-web's Image paints a centred background image,
+ * so `center bottom` has no effect. Instead the image is sized to its own aspect
+ * ratio (measured with `Image.getSize`) and pushed down by flexbox. The framing
+ * transform sits on a full-box layer, so its percentages mean the same as the
+ * CSS `translate(x%, y%) scale(s)` a static page applies to its `<img>`.
+ *
+ * The parent owns the box (aspect, radius, background, empty state); this renders
+ * only the photo layer. No strings of its own: `accessibilityLabel` is a prop.
+ */
+
+interface AnchoredPhotoProps {
+    uri: string;
+    /** `bottom` for cut-out portraits. Default `center`. */
+    anchor?: PhotoAnchor;
+    /** Stored or live framing; clamped before use, so raw config is safe. */
+    framing?: PhotoFramingInput | null;
+    /** Extra style for the full-box frame layer. */
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel: string;
+    testID?: string;
+}
+declare const AnchoredPhoto: ({ uri, anchor, framing, style, accessibilityLabel, testID, }: AnchoredPhotoProps) => React.ReactElement;
+
+declare function useImageAspectRatio(uri: string): number | null;
+
+interface AnchoredPhotoLayout {
+    /** Main-axis placement of the photo inside its full-box frame. */
+    justifyContent: PhotoAnchorLayout['justifyContent'];
+    /**
+     * `null` = fill the box (size unknown yet, image stays centred by `contain`);
+     * a number = size the image to that width / height so the frame can anchor it.
+     */
+    aspectRatio: number | null;
+}
+/** Pure anchor + measured aspect -> layout (unit-tested; AnchoredPhoto only paints it). */
+declare function resolveAnchoredPhotoLayout(anchor: PhotoAnchor, aspectRatio: number | null): AnchoredPhotoLayout;
 
-export { DEFAULT_IMAGE_ACCEPT, FramingAction, type FramingActionLabel, ImagePickerButton, type ImagePickerButtonProps, type ImagePickerLabels, ImagePickerStatus, type ImageUploadState, PhotoFramingEditor, type PhotoFramingEditorProps, type PhotoFramingLabels, type PhotoFramingPreviewArgs, PhotoFramingSteps, PhotoFramingTransform, type PickerView, type UseImageUploadOptions, pickWebImage, resolvePickerView, useImageUpload };
+export { AnchoredPhoto, type AnchoredPhotoLayout, type AnchoredPhotoProps, DEFAULT_IMAGE_ACCEPT, FramingAction, type FramingActionLabel, ImagePickerButton, type ImagePickerButtonProps, type ImagePickerLabels, ImagePickerStatus, type ImageUploadState, PhotoAnchor, type PhotoAnchorLayout, PhotoFramingEditor, type PhotoFramingEditorProps, type PhotoFramingLabels, type PhotoFramingPreviewArgs, PhotoFramingSteps, PhotoFramingTransform, type PickerView, type UseImageUploadOptions, pickWebImage, resolveAnchoredPhotoLayout, resolvePhotoAnchor, resolvePickerView, useImageAspectRatio, useImageUpload };