@bettercms-ai/kit 1.0.0 → 2.0.0

package/{controls → dist/controls}/location.js

@@ -1,10 +1,11 @@
 import { cn } from "../lib/cn.js";
 import { isObj } from "../lib/path.js";
 import { Input } from "../ui/input.js";
+import { TEXT_FOCUS } from "./text.js";
 import * as React from "react";
-import { IconExternalLink, IconMapPin } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/kit/controls/location.tsx
+import { IconExternalLink, IconMapPin } from "@tabler/icons-react";
+//#region src/controls/location.tsx
 /**
 * LOCATION — the geopoint field (DESIGN 8.21), V2 GeoControl fitted to what prod stores.
 *
@@ -98,43 +99,65 @@ function LocationControl({ field, value, onChange, readOnly, id, invalid }) {
 		lng: value.lng
 	} : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("overflow-hidden rounded-kit-lg border", invalid ? "border-[var(--kit-field-invalid)]" : "border-kit-line"),
-		children: [/* @__PURE__ */ jsx("div", {
+		className: cn("overflow-hidden rounded-kit-lg border border-kit-line", invalid && "border-[var(--kit-field-invalid)]"),
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "relative h-28 overflow-hidden bg-kit-subtle",
-			style: {
-				backgroundImage: "linear-gradient(var(--kit-line-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--kit-line-subtle) 1px, transparent 1px)",
-				backgroundSize: "16px 16px"
-			},
-			children: shown ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-				className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-full flex-col items-center",
-				"aria-hidden": true,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "flex size-7 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse shadow-kit-md",
-					children: /* @__PURE__ */ jsx(IconMapPin, {
-						className: "size-4",
-						stroke: 1.5
-					})
-				}), /* @__PURE__ */ jsx("span", { className: "size-2 -translate-y-0.5 rotate-45 bg-kit-inverse" })]
-			}), /* @__PURE__ */ jsxs("a", {
-				href: `https://www.openstreetmap.org/?mlat=${shown.lat}&mlon=${shown.lng}#map=15/${shown.lat}/${shown.lng}`,
-				target: "_blank",
-				rel: "noreferrer noopener",
-				className: "absolute bottom-2 right-2 flex items-center gap-1 rounded-kit-md bg-kit-surface/90 px-1.5 py-0.5 font-kit-mono text-kit-2xs tabular-nums text-kit-fg-2 shadow-kit-xs outline-none hover:text-kit-fg focus-visible:outline-2 focus-visible:outline-kit-focus-ring",
-				"aria-label": `Open ${shown.lat.toFixed(4)}, ${shown.lng.toFixed(4)} on OpenStreetMap (new tab)`,
-				children: [
-					shown.lat.toFixed(4),
-					", ",
-					shown.lng.toFixed(4),
-					/* @__PURE__ */ jsx(IconExternalLink, {
-						className: "size-3",
-						stroke: 1.5,
-						"aria-hidden": true
-					})
-				]
-			})] }) : /* @__PURE__ */ jsx("p", {
-				className: "absolute inset-0 flex items-center justify-center text-kit-xs text-kit-fg-3",
-				children: "No coordinates yet"
-			})
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 opacity-80",
+					style: {
+						backgroundImage: "linear-gradient(var(--kit-line-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--kit-line-subtle) 1px, transparent 1px)",
+						backgroundSize: "24px 24px"
+					}
+				}),
+				/* @__PURE__ */ jsxs("svg", {
+					className: "absolute inset-0 size-full text-kit-line-strong",
+					viewBox: "0 0 400 112",
+					preserveAspectRatio: "none",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("path", {
+						d: "M0 76 C80 60 120 100 200 78 S320 40 400 60",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "6"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "M140 0 L170 112",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "3"
+					})]
+				}),
+				shown ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-full flex-col items-center",
+					"aria-hidden": true,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex size-7 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse shadow-kit-md",
+						children: /* @__PURE__ */ jsx(IconMapPin, {
+							className: "size-4",
+							stroke: 1.5
+						})
+					}), /* @__PURE__ */ jsx("span", { className: "size-2 -translate-y-0.5 rotate-45 bg-kit-inverse" })]
+				}), /* @__PURE__ */ jsxs("a", {
+					href: `https://www.openstreetmap.org/?mlat=${shown.lat}&mlon=${shown.lng}#map=15/${shown.lat}/${shown.lng}`,
+					target: "_blank",
+					rel: "noreferrer noopener",
+					className: cn("tabular-nums absolute bottom-2 right-2 rounded-kit-md bg-kit-surface/90 px-1.5 py-0.5 font-kit-mono text-kit-2xs text-kit-fg-2 shadow-kit-xs", "flex items-center gap-1 hover:text-kit-fg"),
+					"aria-label": `Open ${shown.lat.toFixed(4)}, ${shown.lng.toFixed(4)} on OpenStreetMap (new tab)`,
+					children: [
+						shown.lat.toFixed(4),
+						", ",
+						shown.lng.toFixed(4),
+						/* @__PURE__ */ jsx(IconExternalLink, {
+							className: "size-3",
+							stroke: 1.5,
+							"aria-hidden": true
+						})
+					]
+				})] }) : /* @__PURE__ */ jsx("p", {
+					className: "absolute inset-0 flex items-center justify-center text-kit-xs text-kit-fg-3",
+					children: "No coordinates yet"
+				})
+			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-2 p-2",
 			children: [
@@ -145,7 +168,8 @@ function LocationControl({ field, value, onChange, readOnly, id, invalid }) {
 					placeholder: "Label, e.g. Head office",
 					"aria-label": `${field.title} label`,
 					leading: /* @__PURE__ */ jsx(IconMapPin, { stroke: 1.5 }),
-					onChange: (e) => update({ label: e.target.value })
+					onChange: (e) => update({ label: e.target.value }),
+					className: TEXT_FOCUS
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "grid grid-cols-2 gap-2",
@@ -192,6 +216,6 @@ function LocationControl({ field, value, onChange, readOnly, id, invalid }) {
 	});
 }
 //#endregion
-export { LocationControl };
+export { LocationControl, locationFromDraft };
 
 //# sourceMappingURL=location.js.map

package/dist/controls/location.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"location.js","names":[],"sources":["../../src/controls/location.tsx"],"sourcesContent":["/**\n * LOCATION — the geopoint field (DESIGN 8.21), V2 GeoControl fitted to what prod stores.\n *\n * Value (backend reference-validation `location`, the classic LocationField): `{ lat, lng, label? }`, lat −90…90 and\n * lng −180…180, finite numbers; null when empty. Keys the stored object carries beyond those are kept.\n *\n * A coordinate is written only when it is whole: both numbers, in range. Until then the field says what is missing\n * (\"Add the longitude too\") and keeps the stored value, because the backend refuses half a coordinate. Emptying all\n * three boxes clears the value. Pasting \"44.0582, -121.3153\" into either box fills both.\n *\n * The card above the inputs shows the pin and the coordinates, with a link that opens them on OpenStreetMap; it\n * draws no map tiles (no vendor, key or bundle).\n */\nimport * as React from \"react\";\nimport { IconExternalLink, IconMapPin } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { isObj } from \"../lib/path\";\nimport type { ControlProps } from \"../types\";\nimport { Input } from \"../ui/input\";\nimport { TEXT_FOCUS } from \"./text\";\n\ninterface Draft {\n  lat: string;\n  lng: string;\n  label: string;\n}\nconst num = (v: unknown) => (typeof v === \"number\" && Number.isFinite(v) ? String(v) : \"\");\nconst draftOf = (v: unknown): Draft => (isObj(v) ? { lat: num(v.lat), lng: num(v.lng), label: typeof v.label === \"string\" ? v.label : \"\" } : { lat: \"\", lng: \"\", label: \"\" });\nconst PAIR = /^\\s*(-?\\d+(?:\\.\\d+)?)\\s*[,;\\s]\\s*(-?\\d+(?:\\.\\d+)?)\\s*$/;\n\n/** The value a draft writes, or the reason it can't be written yet. */\nexport function locationFromDraft(d: Draft, prev: unknown): { ok: true; value: Record<string, unknown> | null } | { ok: false; reason: string } {\n  const lat = d.lat.trim();\n  const lng = d.lng.trim();\n  const label = d.label.trim();\n  if (!lat && !lng && !label) return { ok: true, value: null };\n  if (!lat || !lng) return { ok: false, reason: !lat && !lng ? \"Add a latitude and a longitude to save this location.\" : !lat ? \"Add the latitude too: a location needs both.\" : \"Add the longitude too: a location needs both.\" };\n  const la = Number(lat);\n  const lo = Number(lng);\n  if (!Number.isFinite(la) || Math.abs(la) > 90) return { ok: false, reason: \"Latitude must be a number from −90 to 90.\" };\n  if (!Number.isFinite(lo) || Math.abs(lo) > 180) return { ok: false, reason: \"Longitude must be a number from −180 to 180.\" };\n  const out: Record<string, unknown> = { ...(isObj(prev) ? prev : {}), lat: la, lng: lo };\n  if (label) out.label = label;\n  else delete out.label;\n  return { ok: true, value: out };\n}\n\nexport function LocationControl({ field, value, onChange, readOnly, id, invalid }: ControlProps) {\n  const [draft, setDraft] = React.useState<Draft>(() => draftOf(value));\n  const [seen, setSeen] = React.useState(value);\n  const [mine, setMine] = React.useState<unknown>(undefined);\n  // a value set from elsewhere (undo, another editor) replaces the draft; our own writes keep what the author typed\n  if (value !== seen) {\n    setSeen(value);\n    if (value !== mine) setDraft(draftOf(value));\n  }\n  const result = locationFromDraft(draft, value);\n  const reasonId = `${id}-reason`;\n\n  const update = (patch: Partial<Draft>) => {\n    const next = { ...draft, ...patch };\n    setDraft(next);\n    const r = locationFromDraft(next, value);\n    if (!r.ok) return;\n    const same = JSON.stringify(r.value) === JSON.stringify(value ?? null);\n    if (same) return;\n    setMine(r.value);\n    onChange(r.value);\n  };\n  const coordinate = (key: \"lat\" | \"lng\") => (e: React.ChangeEvent<HTMLInputElement>) => {\n    const pair = PAIR.exec(e.target.value);\n    update(pair ? { lat: pair[1], lng: pair[2] } : ({ [key]: e.target.value } as Partial<Draft>));\n  };\n\n  const shown = isObj(value) && typeof value.lat === \"number\" && typeof value.lng === \"number\" ? { lat: value.lat, lng: value.lng } : null;\n  return (\n    <div className={cn(\"overflow-hidden rounded-kit-lg border border-kit-line\", invalid && \"border-[var(--kit-field-invalid)]\")}>\n      <div className=\"relative h-28 overflow-hidden bg-kit-subtle\">\n        {/* V2 `.grid-lines` (styles/index.css:1026), inlined: the dash has no such utility */}\n        <div\n          className=\"absolute inset-0 opacity-80\"\n          style={{ backgroundImage: \"linear-gradient(var(--kit-line-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--kit-line-subtle) 1px, transparent 1px)\", backgroundSize: \"24px 24px\" }}\n        />\n        <svg className=\"absolute inset-0 size-full text-kit-line-strong\" viewBox=\"0 0 400 112\" preserveAspectRatio=\"none\" aria-hidden>\n          <path d=\"M0 76 C80 60 120 100 200 78 S320 40 400 60\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"6\" />\n          <path d=\"M140 0 L170 112\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" />\n        </svg>\n        {shown ? (\n          <>\n            <div className=\"absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-full flex-col items-center\" aria-hidden>\n              <span className=\"flex size-7 items-center justify-center rounded-full bg-kit-inverse text-kit-fg-inverse shadow-kit-md\">\n                <IconMapPin className=\"size-4\" stroke={1.5} />\n              </span>\n              <span className=\"size-2 -translate-y-0.5 rotate-45 bg-kit-inverse\" />\n            </div>\n            <a\n              href={`https://www.openstreetmap.org/?mlat=${shown.lat}&mlon=${shown.lng}#map=15/${shown.lat}/${shown.lng}`}\n              target=\"_blank\"\n              rel=\"noreferrer noopener\"\n              className={cn(\"tabular-nums absolute bottom-2 right-2 rounded-kit-md bg-kit-surface/90 px-1.5 py-0.5 font-kit-mono text-kit-2xs text-kit-fg-2 shadow-kit-xs\", \"flex items-center gap-1 hover:text-kit-fg\")}\n              aria-label={`Open ${shown.lat.toFixed(4)}, ${shown.lng.toFixed(4)} on OpenStreetMap (new tab)`}\n            >\n              {shown.lat.toFixed(4)}, {shown.lng.toFixed(4)}\n              <IconExternalLink className=\"size-3\" stroke={1.5} aria-hidden />\n            </a>\n          </>\n        ) : (\n          <p className=\"absolute inset-0 flex items-center justify-center text-kit-xs text-kit-fg-3\">No coordinates yet</p>\n        )}\n      </div>\n      <div className=\"flex flex-col gap-2 p-2\">\n        <Input\n          id={id}\n          value={draft.label}\n          readOnly={readOnly}\n          placeholder=\"Label, e.g. Head office\"\n          aria-label={`${field.title} label`}\n          leading={<IconMapPin stroke={1.5} />}\n          onChange={(e) => update({ label: e.target.value })}\n          className={TEXT_FOCUS}\n        />\n        <div className=\"grid grid-cols-2 gap-2\">\n          <Input\n            id={`${id}-lat`}\n            size=\"sm\"\n            inputMode=\"decimal\"\n            value={draft.lat}\n            readOnly={readOnly}\n            aria-label={`${field.title} latitude`}\n            aria-invalid={(!result.ok && /latitude/i.test(result.reason)) || undefined}\n            aria-describedby={!result.ok ? reasonId : undefined}\n            placeholder=\"−90 to 90\"\n            onChange={coordinate(\"lat\")}\n            leading={<span className=\"text-kit-2xs\">Lat</span>}\n          />\n          <Input\n            id={`${id}-lng`}\n            size=\"sm\"\n            inputMode=\"decimal\"\n            value={draft.lng}\n            readOnly={readOnly}\n            aria-label={`${field.title} longitude`}\n            aria-invalid={(!result.ok && /longitude/i.test(result.reason)) || undefined}\n            aria-describedby={!result.ok ? reasonId : undefined}\n            placeholder=\"−180 to 180\"\n            onChange={coordinate(\"lng\")}\n            leading={<span className=\"text-kit-2xs\">Long</span>}\n          />\n        </div>\n        {!result.ok ? (\n          <p id={reasonId} role=\"status\" className=\"text-kit-xs text-kit-warning-fg\">\n            {result.reason}\n          </p>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/{controls → dist/controls}/media-register.js

@@ -1,7 +1,7 @@
 import { ARRAY_CONTROLS } from "../engine/array.js";
 import { CONTROLS } from "../engine/kit-field.js";
 import { FileControl, GalleryControl, ImageControl, VideoControl } from "./media.js";
-//#region src/kit/controls/media-register.ts
+//#region src/controls/media-register.ts
 /** Lane C4: the media controls in the engine's dispatch tables (one line per type; merge with other lanes by line). */
 CONTROLS.image = ImageControl;
 CONTROLS.file = FileControl;

package/dist/controls/media-register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-register.js","names":[],"sources":["../../src/controls/media-register.ts"],"sourcesContent":["/** Lane C4: the media controls in the engine's dispatch tables (one line per type; merge with other lanes by line). */\nimport { CONTROLS } from \"../engine/kit-field\";\nimport { ARRAY_CONTROLS } from \"../engine/array\";\nimport { FileControl, GalleryControl, ImageControl, VideoControl } from \"./media\";\n\nCONTROLS.image = ImageControl;\nCONTROLS.file = FileControl;\nCONTROLS.video = VideoControl;\nARRAY_CONTROLS.gallery = GalleryControl;\n"],"mappings":";;;;;AAKA,SAAS,QAAQ;AACjB,SAAS,OAAO;AAChB,SAAS,QAAQ;AACjB,eAAe,UAAU"}

package/{controls → dist/controls}/media-services.d.ts

@@ -24,6 +24,12 @@ declare module "../context" {
          * "url"). Such an image never becomes an object, so alt text and focal point stay with the media asset.
          */
         imageStoresUrl?: (path: FieldPath) => boolean;
+        /**
+         * True where an image keeps its address and alt text only (a native image block's `src` / `alt`): the details
+         * popover edits the alt text and says the rest is not kept there, instead of offering a crop, focal point or file
+         * name that would not be saved.
+         */
+        imageAltOnly?: (path: FieldPath) => boolean;
         /**
          * A React hook (called on every render, so the provided function must stay the same): what the media library knows
          * about a stored image or file (its name, pixel size, byte size, alt text). Absent or unknown → the caption shows

package/{controls → dist/controls}/media.d.ts

@@ -7,8 +7,9 @@
  * (media-services.ts): the kit never imports a feature, and a missing service is named in words, never faked.
  *
  * Kit deviations from V2, each because of what the backend stores (adapters/values.ts):
- *  - no "Crop for this placement" dropdown: `imageToProd` cannot store a crop preset (it becomes a pixel rect only with
- *    the asset's size, and never reads back as the preset), so the dock would refuse every write that carried one;
+ *  - "Crop for this placement" is V2's five-crop dropdown, stored as the rect prod keeps (cut from the picture's own size,
+ *    centred on the focal point); a stored rect reads back as its preset when the size is known, and is kept as it is
+ *    otherwise. With no size yet, the dropdown waits, and says why;
  *  - a picked asset's width / height / size are read for the caption, never written into the value (prod rebuilds the
  *    value from url, id, name, altText and focal; the rest would be refused);
  *  - where the host stores the URL string only (`imageStoresUrl`, the dock's top-level image props) the value stays a
@@ -19,9 +20,11 @@
  *    refuses a half-typed address.
  */
 import * as React from "react";
+import { type V2ImageCrop } from "../adapters/values";
+import type { ProdImageCrop } from "../adapters/prod-types";
 import { type KitMediaAsset, type KitServices } from "../context";
 import type { ControlProps } from "../types";
-/** The image value the kit edits (V2 ImageValue, minus what prod cannot store: crop, caption, width, height, size). */
+/** The image value the kit edits (V2 ImageValue, minus what prod cannot store: caption, width, height, size). */
 export interface ImageValue {
     url: string;
     alt?: string;
@@ -30,6 +33,8 @@ export interface ImageValue {
         x: number;
         y: number;
     };
+    /** This placement's crop, as prod stores it (0–1 edges of the picture). Absent: the whole picture. */
+    crop?: ProdImageCrop | V2ImageCrop;
     name?: string;
     id?: string;
     [key: string]: unknown;
@@ -54,9 +59,34 @@ export declare function useUpload(accept: string, kind: string, onDone: (a: KitM
     setError: React.Dispatch<React.SetStateAction<string | null>>;
     run: ((files: File[]) => void) | undefined;
 };
+/**
+ * How a preview frames a picture of any shape: the frame follows the picture's ratio between square and 2:1, and the
+ * picture fits inside it WHOLE, filling the frame's width or height (a portrait is boxed at the sides, a panorama above
+ * and below, on the checker). With no known size (still loading, or an SVG with no intrinsic size) the frame is 16:9
+ * and the picture is contained. Before 2026-10-16 every picture was cropped to a fixed 16:9 (`object-cover`).
+ */
+export declare function frameFit(size: {
+    w: number;
+    h: number;
+} | undefined): {
+    frame: number;
+    image: number | null;
+    fill: "width" | "height" | "contain";
+};
+declare const CUSTOM_CROP = "custom";
+/** The crop a value shows: its preset, a stored rect read against the picture's size, or a rect that is none of them. */
+export declare function cropChoice(crop: ImageValue["crop"], size?: {
+    w: number;
+    h: number;
+}): V2ImageCrop | typeof CUSTOM_CROP;
+/** The value with `choice` cut from the picture (centred on its focal point), or with no crop for Original. */
+export declare function withCrop(v: ImageValue, choice: V2ImageCrop, size: {
+    w: number;
+    h: number;
+}): ImageValue;
 export declare function ImageControl({ field, value, onChange: write, readOnly, id, path }: ControlProps): import("react/jsx-runtime").JSX.Element;
 /** An array of images: a sortable grid of tiles with a dashed "Add images" tile last (hidden at `max`). */
-export declare function GalleryControl({ value, onChange, readOnly, field, id }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function GalleryControl({ value, onChange, readOnly, field, id, path }: ControlProps): import("react/jsx-runtime").JSX.Element;
 export declare function FileControl({ value, onChange, readOnly, id }: ControlProps): import("react/jsx-runtime").JSX.Element;
 export declare const videoProvider: (url: string) => "Link" | "" | "YouTube" | "Vimeo" | "Loom" | "MP4";
 export declare const youTubeId: (url: string) => string | undefined;
@@ -71,3 +101,4 @@ export declare function VideoPreview({ url, poster, title }: {
  * until then the field keeps the saved value and says why under the input.
  */
 export declare function VideoControl({ field, value, onChange, readOnly, id, onBlur }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export {};