@openrails/contentkit-ui 0.0.0-stage → 0.68.1

package/dist/components/rendition-img.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, ReactNode } from 'react';
+import { DensityRange, Rendition } from '../client/rendition.js';
+export declare const DensityContext: import('react').Context<DensityRange>;
+export interface UseRenditionOptions {
+    /** Density range; default the provider's (2–3×). */
+    density?: DensityRange;
+}
+/**
+ * Picks a rendition for the element `ref` (a callback ref) is attached to: the narrowest at
+ * least its rendered width × density. It re-picks on resize (fullscreen,
+ * window changes), never steps down, and keeps the shown rendition until a
+ * wider one has loaded, so nothing flickers.
+ */
+export declare function useRendition<T extends Rendition, E extends HTMLElement = HTMLImageElement>(outputs: readonly T[] | null | undefined, o?: UseRenditionOptions): {
+    ref: import('react').Dispatch<import('react').SetStateAction<E | null>>;
+    rendition: T | undefined;
+    onLoad: () => void;
+};
+export interface RenditionImgProps extends Omit<ComponentProps<"img">, "src" | "srcSet" | "sizes" | "width" | "height"> {
+    outputs: readonly Rendition[] | null | undefined;
+    density?: DensityRange;
+    /** Rendered instead when there are no renditions or the image fails to load (a 404). */
+    fallback?: ReactNode;
+    /** A pulsing muted fill until the image has loaded. */
+    skeleton?: boolean;
+    /** object-fit of the image in its box. */
+    fit?: "cover" | "contain";
+}
+/**
+ * An `<img>` showing the rendition its rendered size × density needs (see
+ * useRendition), with a fallback for none or a failed load and an optional
+ * loading skeleton.
+ */
+export declare function RenditionImg({ outputs, density, onLoad, onError, alt, fallback, skeleton, fit, style, ...img }: RenditionImgProps): import('react').JSX.Element;

package/dist/components/rendition-img.js

@@ -0,0 +1,78 @@
+import { DEFAULT_DENSITY as e, densityFor as t, pickRendition as n, sortRenditions as r } from "../client/rendition.js";
+import { useReducedMotion as i } from "../react/inline-preview.js";
+import { createContext as a, useCallback as o, useContext as s, useEffect as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m } from "react/jsx-runtime";
+//#region src/components/rendition-img.tsx
+var h = a(e), g = typeof window > "u" ? c : l;
+function _(e, i = {}) {
+	let a = s(h), l = i.density ?? a, [p, m] = f(null), [_, v] = f(-1);
+	g(() => {
+		if (!p) return;
+		let e = () => v((e) => Math.max(e, p.getBoundingClientRect().width));
+		if (e(), typeof ResizeObserver != "function") return;
+		let t = new ResizeObserver(e);
+		return t.observe(p), () => t.disconnect();
+	}, [p]);
+	let y = u(() => r(e), [e]), b = _ >= 0 ? n(y, _, t(l)) : void 0, [x, S] = f(void 0), C = d(!1), w = x && y.some((e) => e.url === x.url) ? x : void 0;
+	c(() => {
+		if (!b || b.url === w?.url) return;
+		if (!w || !C.current) {
+			C.current = !1, S(b);
+			return;
+		}
+		if (b.w <= w.w) return;
+		let e = !0, t = new Image();
+		return t.onload = () => e && S(b), t.src = b.url, () => {
+			e = !1;
+		};
+	}, [b, w]);
+	let T = o(() => {
+		C.current = !0;
+	}, []);
+	return {
+		ref: m,
+		rendition: w ?? b,
+		onLoad: T
+	};
+}
+var v = { backgroundColor: "var(--ckui-muted, rgb(127 127 127 / 0.15))" }, y = "ckui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+function b({ outputs: e, density: t, onLoad: n, onError: a, alt: s = "", fallback: c, skeleton: l, fit: u, style: d, ...h }) {
+	let { ref: b, rendition: x, onLoad: S } = _(e, { density: t }), C = r(e)[0], w = x ?? C, T = i(), [E, D] = f(null), [O, k] = f(null), [A, j] = f(null), M = x ? w?.url : void 0;
+	g(() => {
+		A && M && A.complete && A.naturalWidth > 0 && k(M);
+	}, [A, M]);
+	let N = o((e) => {
+		b(e), j(e);
+	}, [b]);
+	if (!w || C && E === C.url) return /* @__PURE__ */ m(p, { children: c ?? null });
+	let P = l && O !== M;
+	return /* @__PURE__ */ m("img", {
+		...h,
+		ref: N,
+		alt: s,
+		src: M,
+		width: w.w,
+		height: w.h || void 0,
+		decoding: "async",
+		"data-rendition": x ? w.w : void 0,
+		"data-loading": P ? "" : void 0,
+		style: {
+			...u ? { objectFit: u } : {},
+			...P ? {
+				...v,
+				animation: T ? void 0 : y
+			} : {},
+			...d
+		},
+		onLoad: (e) => {
+			S(), M && k(M), n?.(e);
+		},
+		onError: (e) => {
+			C && D(C.url), a?.(e);
+		}
+	});
+}
+//#endregion
+export { h as DensityContext, b as RenditionImg, _ as useRendition };
+
+//# sourceMappingURL=rendition-img.js.map

package/dist/components/rendition-img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rendition-img.js","names":[],"sources":["../../src/components/rendition-img.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type ReactNode } from \"react\";\nimport { DEFAULT_DENSITY, densityFor, pickRendition, sortRenditions, type DensityRange, type Rendition } from \"../client/rendition.js\";\nimport { useReducedMotion } from \"../react/inline-preview.js\";\n\nexport const DensityContext = createContext<DensityRange>(DEFAULT_DENSITY);\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\nexport interface UseRenditionOptions {\n  /** Density range; default the provider's (2–3×). */\n  density?: DensityRange;\n}\n\n/**\n * Picks a rendition for the element `ref` (a callback ref) is attached to: the narrowest at\n * least its rendered width × density. It re-picks on resize (fullscreen,\n * window changes), never steps down, and keeps the shown rendition until a\n * wider one has loaded, so nothing flickers.\n */\nexport function useRendition<T extends Rendition, E extends HTMLElement = HTMLImageElement>(outputs: readonly T[] | null | undefined, o: UseRenditionOptions = {}) {\n  const provided = useContext(DensityContext);\n  const range = o.density ?? provided;\n  const [el, ref] = useState<E | null>(null);\n  // -1 until measured; a hidden element measures 0 and gets the narrowest.\n  const [width, setWidth] = useState(-1);\n  useIsoLayoutEffect(() => {\n    if (!el) return;\n    const measure = () => setWidth((w) => Math.max(w, el.getBoundingClientRect().width));\n    measure();\n    if (typeof ResizeObserver !== \"function\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [el]);\n  const sorted = useMemo(() => sortRenditions(outputs), [outputs]);\n  const want = width >= 0 ? pickRendition(sorted, width, densityFor(range)) : undefined;\n  const [shown, setShown] = useState<T | undefined>(undefined);\n  const loaded = useRef(false);\n  const current = shown && sorted.some((r) => r.url === shown.url) ? shown : undefined;\n  useEffect(() => {\n    if (!want || want.url === current?.url) return;\n    // First pick, a new set, or before anything loaded: show it now.\n    if (!current || !loaded.current) {\n      loaded.current = false;\n      setShown(want);\n      return;\n    }\n    if (want.w <= current.w) return;\n    let live = true;\n    const img = new Image();\n    img.onload = () => live && setShown(want);\n    img.src = want.url;\n    return () => {\n      live = false;\n    };\n  }, [want, current]);\n  const onLoad = useCallback(() => {\n    loaded.current = true;\n  }, []);\n  return { ref, rendition: current ?? want, onLoad };\n}\n\nexport interface RenditionImgProps extends Omit<ComponentProps<\"img\">, \"src\" | \"srcSet\" | \"sizes\" | \"width\" | \"height\"> {\n  outputs: readonly Rendition[] | null | undefined;\n  density?: DensityRange;\n  /** Rendered instead when there are no renditions or the image fails to load (a 404). */\n  fallback?: ReactNode;\n  /** A pulsing muted fill until the image has loaded. */\n  skeleton?: boolean;\n  /** object-fit of the image in its box. */\n  fit?: \"cover\" | \"contain\";\n}\n\nconst SKELETON: CSSProperties = { backgroundColor: \"var(--ckui-muted, rgb(127 127 127 / 0.15))\" };\nconst PULSE = \"ckui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\";\n\n/**\n * An `<img>` showing the rendition its rendered size × density needs (see\n * useRendition), with a fallback for none or a failed load and an optional\n * loading skeleton.\n */\nexport function RenditionImg({ outputs, density, onLoad, onError, alt = \"\", fallback, skeleton, fit, style, ...img }: RenditionImgProps) {\n  const { ref, rendition, onLoad: loaded } = useRendition(outputs, { density });\n  const first = sortRenditions(outputs)[0];\n  const r = rendition ?? first;\n  const reduced = useReducedMotion();\n  const [failed, setFailed] = useState<string | null>(null);\n  const [done, setDone] = useState<string | null>(null);\n  const [el, setEl] = useState<HTMLImageElement | null>(null);\n  const src = rendition ? r?.url : undefined;\n  // A cached image is complete before its load event; settle it before paint.\n  useIsoLayoutEffect(() => {\n    if (el && src && el.complete && el.naturalWidth > 0) setDone(src);\n  }, [el, src]);\n  const attach = useCallback(\n    (node: HTMLImageElement | null) => {\n      ref(node);\n      setEl(node);\n    },\n    [ref],\n  );\n  if (!r || (first && failed === first.url)) return <>{fallback ?? null}</>;\n  const loading = skeleton && done !== src;\n  return (\n    <img\n      {...img}\n      ref={attach}\n      alt={alt}\n      src={src}\n      width={r.w}\n      height={r.h || undefined}\n      decoding=\"async\"\n      data-rendition={rendition ? r.w : undefined}\n      data-loading={loading ? \"\" : undefined}\n      style={{ ...(fit ? { objectFit: fit } : {}), ...(loading ? { ...SKELETON, animation: reduced ? undefined : PULSE } : {}), ...style }}\n      onLoad={(e) => {\n        loaded();\n        if (src) setDone(src);\n        onLoad?.(e);\n      }}\n      onError={(e) => {\n        if (first) setFailed(first.url);\n        onError?.(e);\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/slot-editor.d.ts

@@ -0,0 +1,95 @@
+import { AspectRatio } from '../client/aspect.js';
+import { ReactElement, ReactNode } from 'react';
+import { ContentKitClient } from '../client/client.js';
+import { CropSource } from '../client/image.js';
+import { ContentKitErrorHandler } from '../react/context.js';
+import { PublicPreset } from '../client/public.js';
+import { UseSlotCrop, UseSlotImage } from '../react/slot.js';
+import { FileInfo, ReadResult, RefBody } from '../client/generated/wire.js';
+export interface SlotEditorProps {
+    /** The item that owns the upload. */
+    item: RefBody;
+    /** The upload path, e.g. "cover" or "avatar". */
+    path: string;
+    /** The public preset showing the upload: children draw it, saves refetch it. */
+    image?: PublicPreset | null;
+    client?: ContentKitClient;
+    /** An editor read of the item from the host; otherwise fetched. */
+    read?: ReadResult | null;
+    /** Called with the processed upload after every save, null after a removal. */
+    onChange?: (file: FileInfo | null) => void;
+    /** Every failure (load, decode, save or render); default the provider's. */
+    onError?: ContentKitErrorHandler;
+    /** The output's "W:H"; default the preset's aspect, else "1:1". */
+    aspect?: AspectRatio;
+    /** The narrowest edit the server accepts (the preset's Image.MinWidth). */
+    minWidth?: number;
+    /** "reject" refuses animated images before uploading (the preset's Image.Animation). */
+    animation?: "reject";
+    /** Crops narrower than this many source pixels get a sharpness warning; default the preset's widest, else 512. */
+    targetWidth?: number;
+    /** Round crop mask; default aspect 1. */
+    round?: boolean;
+    /** Crop dialog title; default by aspect (avatar / cover). */
+    title?: ReactNode;
+    /** `accept` of the file input. Default "image/*". */
+    accept?: string;
+    disabled?: boolean;
+    /** Offers Remove (a remove op) once the path has an upload; default false. */
+    removable?: boolean;
+    /** Replaces decodeImage (tests). */
+    decode?: (file: File) => Promise<CropSource>;
+    /** Triggers and the image, e.g. `<SlotEditMenu />`, or anything using useSlotEditor(). */
+    children?: ReactNode;
+}
+export interface SlotEditorState {
+    image: UseSlotImage;
+    crop: UseSlotCrop;
+    /** The path has an upload. */
+    has: boolean;
+    busy: boolean;
+    disabled: boolean;
+    /** A failure outside the dialog (unreadable file, read failure), localized. */
+    error?: string;
+    /** Opens the file picker. */
+    choose: () => void;
+    /** Opens a file for cropping (drop targets). */
+    pick: (file: File) => void;
+    /** Re-crops the kept upload; only when crop.canRecrop. */
+    recrop: () => void;
+    /** Remove is offered (SlotEditorProps.removable). */
+    removable: boolean;
+    /** Removes the upload; only when removable. */
+    remove: () => void;
+}
+/** The editor state of the enclosing SlotEditor. */
+export declare function useSlotEditor(): SlotEditorState;
+/**
+ * An image upload's pick → crop → save and re-crop flow without layout: it renders a
+ * hidden file input and the crop dialog, and its children draw the image and
+ * triggers (SlotEditMenu, or custom ones through useSlotEditor).
+ */
+export declare function SlotEditor(p: SlotEditorProps): import('react').JSX.Element;
+export interface SlotEditMenuProps {
+    /** Accessible name and text; default "Change" (or "Upload" when empty). */
+    label?: string;
+    /** Shows only the icon; the label becomes its aria-label. */
+    iconOnly?: boolean;
+    /**
+     * The trigger element (Base UI `render`), e.g. `<button className="…" />`
+     * styled by the host; it receives the icon and label unless it has children.
+     * Default: the kit's outline button.
+     */
+    render?: ReactElement<Record<string, unknown>>;
+    className?: string;
+    align?: "start" | "center" | "end";
+}
+/**
+ * One trigger for a SlotEditor: it picks a file, or, once the path has an
+ * upload, opens a Change / Edit crop / Remove menu (each when available).
+ */
+export declare function SlotEditMenu({ label, iconOnly, render, className, align }: SlotEditMenuProps): import('react').JSX.Element;
+/** The SlotEditor's error outside the dialog (unreadable file, read failure), if any. */
+export declare function SlotEditError({ className }: {
+    className?: string;
+}): import('react').JSX.Element | null;

package/dist/components/slot-editor.js

@@ -0,0 +1,182 @@
+import { toContentKitError as e } from "../client/errors.js";
+import { ratio as t } from "../client/aspect.js";
+import { useMessages as n } from "../i18n/context.js";
+import { useScopeProps as r } from "../scope.js";
+import { useContentKitClient as i, useErrorReporter as a } from "../react/context.js";
+import { useSlotCrop as o, useSlotImage as s } from "../react/slot.js";
+import { Button as c } from "../ui/button.js";
+import { ImageCropDialog as l } from "./image-crop-dialog.js";
+import { DropdownMenu as u, DropdownMenuContent as d, DropdownMenuItem as f, DropdownMenuTrigger as p } from "../ui/dropdown-menu.js";
+import { createContext as m, useContext as h, useEffect as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { cn as S } from "cn";
+import { Alert02Icon as C, Camera01Icon as w, CropIcon as T, Delete02Icon as E, ImageUpload01Icon as D, Loading03Icon as O } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as k } from "@hugeicons/react";
+import { Button as A } from "@base-ui/react/button";
+//#region src/components/slot-editor.tsx
+var j = m(null);
+function M() {
+	let e = h(j);
+	if (!e) throw Error("useSlotEditor must be used inside <SlotEditor>");
+	return e;
+}
+function N(r) {
+	let { t: c, error: u } = n(), d = i(r.client), f = a(r.onError), p = s({
+		client: d,
+		ref: r.item,
+		path: r.path,
+		image: r.image,
+		read: r.read
+	});
+	g(() => void (p.error && f(p.error, "slot.load")), [p.error, f]);
+	let m = r.aspect ?? p.aspect, h = _(r.onChange);
+	h.current = r.onChange;
+	let y = o({
+		client: d,
+		ref: r.item,
+		path: r.path,
+		file: p.file,
+		aspect: m,
+		animation: r.animation,
+		decode: r.decode,
+		onError: f,
+		onSaved: (e) => {
+			p.set(e), p.reload(), h.current?.(e);
+		}
+	}), S = _(null), [C, w] = v(!1), [T, E] = v(), D = y.status === "decoding" || y.status === "saving" || C, O = !!r.disabled || D, k = r.round ?? t(m) === 1, A = r.targetWidth ?? p.renditions.at(-1)?.w ?? 512, M = y.status === "error" && !y.source ? u(y.error) : p.error ? u(p.error) : T ? u(T) : void 0, N = async () => {
+		w(!0), E(void 0);
+		try {
+			p.file && await d.media.commit(r.item, [{
+				op: "remove",
+				path: p.file.path
+			}]), p.set(null), p.reload(), h.current?.(null);
+		} catch (t) {
+			E(e(t)), f(t, "slot.remove");
+		} finally {
+			w(!1);
+		}
+	}, P = {
+		image: p,
+		crop: y,
+		has: !!p.file,
+		busy: D,
+		disabled: O,
+		error: M,
+		choose: () => !O && S.current?.click(),
+		pick: (e) => !O && void y.pick(e),
+		recrop: () => !O && void y.recrop(),
+		removable: !!r.removable,
+		remove: () => !O && !!r.removable && void N()
+	};
+	return /* @__PURE__ */ x(j.Provider, {
+		value: P,
+		children: [
+			r.children,
+			/* @__PURE__ */ b("input", {
+				ref: S,
+				type: "file",
+				accept: r.accept ?? "image/*",
+				hidden: !0,
+				"data-ckui": "file",
+				onChange: (e) => {
+					let t = e.target.files?.[0];
+					e.target.value = "", t && y.pick(t);
+				}
+			}),
+			/* @__PURE__ */ b(l, {
+				open: "source" in y && !!y.source,
+				onOpenChange: (e) => !e && y.cancel(),
+				source: "source" in y ? y.source ?? null : null,
+				aspect: m,
+				round: k,
+				initialEdit: "edit" in y && y.mode === "recrop" ? y.edit : void 0,
+				targetWidth: A,
+				minWidth: r.minWidth,
+				title: r.title ?? c(k ? "crop.avatarTitle" : "crop.coverTitle"),
+				busy: y.status === "saving",
+				progress: y.status === "saving" ? y.progress : void 0,
+				rendering: y.status === "saving" && y.rendering,
+				error: y.status === "error" && y.source ? u(y.error) : void 0,
+				onEditChange: y.setEdit,
+				onConfirm: (e) => void y.save(e)
+			})
+		]
+	});
+}
+function P({ label: e, iconOnly: t, render: i, className: a, align: o = "end" }) {
+	let { t: s } = n(), l = M(), m = r(), h = e ?? (l.has ? s("common.change") : s("common.upload")), g = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(k, {
+		icon: l.busy ? O : w,
+		size: 16,
+		strokeWidth: 2,
+		"data-icon": "inline-start",
+		className: l.busy ? "animate-spin" : void 0
+	}), !t && h] }), _ = {
+		render: i ?? /* @__PURE__ */ b(c, {
+			variant: "outline",
+			size: t ? "icon-sm" : "sm",
+			...m,
+			className: S(m.className, a),
+			style: m.style
+		}),
+		disabled: l.disabled,
+		title: h,
+		"aria-label": t ? h : void 0,
+		"data-ckui": "slot-edit",
+		"data-busy": l.busy || void 0,
+		className: i ? a : void 0
+	};
+	return l.has && (l.crop.canRecrop || l.removable) ? /* @__PURE__ */ x(u, { children: [/* @__PURE__ */ b(p, {
+		..._,
+		children: g
+	}), /* @__PURE__ */ x(d, {
+		align: o,
+		children: [
+			/* @__PURE__ */ x(f, {
+				onClick: l.choose,
+				"data-ckui": "change",
+				children: [/* @__PURE__ */ b(k, {
+					icon: D,
+					strokeWidth: 2
+				}), s("common.change")]
+			}),
+			l.crop.canRecrop && /* @__PURE__ */ x(f, {
+				onClick: l.recrop,
+				"data-ckui": "edit-crop",
+				children: [/* @__PURE__ */ b(k, {
+					icon: T,
+					strokeWidth: 2
+				}), s("common.editCrop")]
+			}),
+			l.removable && /* @__PURE__ */ x(f, {
+				onClick: l.remove,
+				"data-ckui": "remove",
+				children: [/* @__PURE__ */ b(k, {
+					icon: E,
+					strokeWidth: 2
+				}), s("common.remove")]
+			})
+		]
+	})] }) : /* @__PURE__ */ b(A, {
+		..._,
+		onClick: l.choose,
+		children: g
+	});
+}
+function F({ className: e }) {
+	let { error: t } = M(), n = r();
+	return t ? /* @__PURE__ */ x("p", {
+		role: "alert",
+		"data-ckui": "slot-error",
+		...n,
+		className: S(n.className, "flex items-center gap-1.5 text-xs text-destructive", e),
+		children: [/* @__PURE__ */ b(k, {
+			icon: C,
+			strokeWidth: 2,
+			className: "size-3.5 shrink-0"
+		}), t]
+	}) : null;
+}
+//#endregion
+export { F as SlotEditError, P as SlotEditMenu, N as SlotEditor, M as useSlotEditor };
+
+//# sourceMappingURL=slot-editor.js.map

package/dist/components/slot-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-editor.js","names":[],"sources":["../../src/components/slot-editor.tsx"],"sourcesContent":["import { ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Alert02Icon, Camera01Icon, CropIcon, Delete02Icon, ImageUpload01Icon, Loading03Icon } from \"@hugeicons/core-free-icons\";\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { createContext, useContext, useEffect, useRef, useState, type ReactElement, type ReactNode } from \"react\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport type { CropSource } from \"../client/image.js\";\nimport { toContentKitError, type ContentKitError } from \"../client/errors.js\";\nimport { useContentKitClient, useErrorReporter, type ContentKitErrorHandler } from \"../react/context.js\";\nimport { useScopeProps } from \"../scope.js\";\nimport type { PublicPreset } from \"../client/public.js\";\nimport { useSlotCrop, useSlotImage, type UseSlotCrop, type UseSlotImage } from \"../react/slot.js\";\nimport type { FileInfo, ReadResult, RefBody } from \"../client/generated/wire.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"#ckui/ui/dropdown-menu\";\nimport { ImageCropDialog } from \"./image-crop-dialog.js\";\n\nexport interface SlotEditorProps {\n  /** The item that owns the upload. */\n  item: RefBody;\n  /** The upload path, e.g. \"cover\" or \"avatar\". */\n  path: string;\n  /** The public preset showing the upload: children draw it, saves refetch it. */\n  image?: PublicPreset | null;\n  client?: ContentKitClient;\n  /** An editor read of the item from the host; otherwise fetched. */\n  read?: ReadResult | null;\n  /** Called with the processed upload after every save, null after a removal. */\n  onChange?: (file: FileInfo | null) => void;\n  /** Every failure (load, decode, save or render); default the provider's. */\n  onError?: ContentKitErrorHandler;\n  /** The output's \"W:H\"; default the preset's aspect, else \"1:1\". */\n  aspect?: AspectRatio;\n  /** The narrowest edit the server accepts (the preset's Image.MinWidth). */\n  minWidth?: number;\n  /** \"reject\" refuses animated images before uploading (the preset's Image.Animation). */\n  animation?: \"reject\";\n  /** Crops narrower than this many source pixels get a sharpness warning; default the preset's widest, else 512. */\n  targetWidth?: number;\n  /** Round crop mask; default aspect 1. */\n  round?: boolean;\n  /** Crop dialog title; default by aspect (avatar / cover). */\n  title?: ReactNode;\n  /** `accept` of the file input. Default \"image/*\". */\n  accept?: string;\n  disabled?: boolean;\n  /** Offers Remove (a remove op) once the path has an upload; default false. */\n  removable?: boolean;\n  /** Replaces decodeImage (tests). */\n  decode?: (file: File) => Promise<CropSource>;\n  /** Triggers and the image, e.g. `<SlotEditMenu />`, or anything using useSlotEditor(). */\n  children?: ReactNode;\n}\n\nexport interface SlotEditorState {\n  image: UseSlotImage;\n  crop: UseSlotCrop;\n  /** The path has an upload. */\n  has: boolean;\n  busy: boolean;\n  disabled: boolean;\n  /** A failure outside the dialog (unreadable file, read failure), localized. */\n  error?: string;\n  /** Opens the file picker. */\n  choose: () => void;\n  /** Opens a file for cropping (drop targets). */\n  pick: (file: File) => void;\n  /** Re-crops the kept upload; only when crop.canRecrop. */\n  recrop: () => void;\n  /** Remove is offered (SlotEditorProps.removable). */\n  removable: boolean;\n  /** Removes the upload; only when removable. */\n  remove: () => void;\n}\n\nconst Ctx = createContext<SlotEditorState | null>(null);\n\n/** The editor state of the enclosing SlotEditor. */\nexport function useSlotEditor(): SlotEditorState {\n  const s = useContext(Ctx);\n  if (!s) throw new Error(\"useSlotEditor must be used inside <SlotEditor>\");\n  return s;\n}\n\n/**\n * An image upload's pick → crop → save and re-crop flow without layout: it renders a\n * hidden file input and the crop dialog, and its children draw the image and\n * triggers (SlotEditMenu, or custom ones through useSlotEditor).\n */\nexport function SlotEditor(p: SlotEditorProps) {\n  const { t, error: errorText } = useMessages();\n  const client = useContentKitClient(p.client);\n  const report = useErrorReporter(p.onError);\n  const image = useSlotImage({ client, ref: p.item, path: p.path, image: p.image, read: p.read });\n  useEffect(() => void (image.error && report(image.error, \"slot.load\")), [image.error, report]);\n  const aspect = p.aspect ?? image.aspect;\n  const onChange = useRef(p.onChange);\n  onChange.current = p.onChange;\n  const crop = useSlotCrop({\n    client,\n    ref: p.item,\n    path: p.path,\n    file: image.file,\n    aspect,\n    animation: p.animation,\n    decode: p.decode,\n    onError: report,\n    onSaved: (f) => {\n      image.set(f);\n      image.reload();\n      onChange.current?.(f);\n    },\n  });\n  const input = useRef<HTMLInputElement>(null);\n  const [removing, setRemoving] = useState(false);\n  const [removeError, setRemoveError] = useState<ContentKitError>();\n  const busy = crop.status === \"decoding\" || crop.status === \"saving\" || removing;\n  const disabled = !!p.disabled || busy;\n  const round = p.round ?? ratio(aspect) === 1;\n  const target = p.targetWidth ?? image.renditions.at(-1)?.w ?? 512;\n  const error =\n    crop.status === \"error\" && !crop.source\n      ? errorText(crop.error)\n      : image.error\n        ? errorText(image.error)\n        : removeError\n          ? errorText(removeError)\n          : undefined;\n  const remove = async () => {\n    setRemoving(true);\n    setRemoveError(undefined);\n    try {\n      if (image.file) await client.media.commit(p.item, [{ op: \"remove\", path: image.file.path }]);\n      image.set(null);\n      image.reload();\n      onChange.current?.(null);\n    } catch (e) {\n      setRemoveError(toContentKitError(e));\n      report(e, \"slot.remove\");\n    } finally {\n      setRemoving(false);\n    }\n  };\n  const state: SlotEditorState = {\n    image,\n    crop,\n    has: !!image.file,\n    busy,\n    disabled,\n    error,\n    choose: () => !disabled && input.current?.click(),\n    pick: (f) => !disabled && void crop.pick(f),\n    recrop: () => !disabled && void crop.recrop(),\n    removable: !!p.removable,\n    remove: () => !disabled && !!p.removable && void remove(),\n  };\n  return (\n    <Ctx.Provider value={state}>\n      {p.children}\n      <input\n        ref={input}\n        type=\"file\"\n        accept={p.accept ?? \"image/*\"}\n        hidden\n        data-ckui=\"file\"\n        onChange={(e) => {\n          const f = e.target.files?.[0];\n          e.target.value = \"\";\n          if (f) void crop.pick(f);\n        }}\n      />\n      <ImageCropDialog\n        open={\"source\" in crop && !!crop.source}\n        onOpenChange={(o) => !o && crop.cancel()}\n        source={\"source\" in crop ? (crop.source ?? null) : null}\n        aspect={aspect}\n        round={round}\n        initialEdit={\"edit\" in crop && crop.mode === \"recrop\" ? crop.edit : undefined}\n        targetWidth={target}\n        minWidth={p.minWidth}\n        title={p.title ?? t(round ? \"crop.avatarTitle\" : \"crop.coverTitle\")}\n        busy={crop.status === \"saving\"}\n        progress={crop.status === \"saving\" ? crop.progress : undefined}\n        rendering={crop.status === \"saving\" && crop.rendering}\n        error={crop.status === \"error\" && crop.source ? errorText(crop.error) : undefined}\n        onEditChange={crop.setEdit}\n        onConfirm={(e) => void crop.save(e)}\n      />\n    </Ctx.Provider>\n  );\n}\n\nexport interface SlotEditMenuProps {\n  /** Accessible name and text; default \"Change\" (or \"Upload\" when empty). */\n  label?: string;\n  /** Shows only the icon; the label becomes its aria-label. */\n  iconOnly?: boolean;\n  /**\n   * The trigger element (Base UI `render`), e.g. `<button className=\"…\" />`\n   * styled by the host; it receives the icon and label unless it has children.\n   * Default: the kit's outline button.\n   */\n  render?: ReactElement<Record<string, unknown>>;\n  className?: string;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * One trigger for a SlotEditor: it picks a file, or, once the path has an\n * upload, opens a Change / Edit crop / Remove menu (each when available).\n */\nexport function SlotEditMenu({ label, iconOnly, render, className, align = \"end\" }: SlotEditMenuProps) {\n  const { t } = useMessages();\n  const s = useSlotEditor();\n  const scope = useScopeProps();\n  const name = label ?? (s.has ? t(\"common.change\") : t(\"common.upload\"));\n  const content = (\n    <>\n      <HugeiconsIcon icon={s.busy ? Loading03Icon : Camera01Icon} size={16} strokeWidth={2} data-icon=\"inline-start\" className={s.busy ? \"animate-spin\" : undefined} />\n      {!iconOnly && name}\n    </>\n  );\n  // The kit's button carries the style scope itself: no wrapper to break host layouts.\n  const trigger = render ?? <Button variant=\"outline\" size={iconOnly ? \"icon-sm\" : \"sm\"} {...scope} className={cn(scope.className, className)} style={scope.style} />;\n  const props = {\n    render: trigger,\n    disabled: s.disabled,\n    title: name,\n    \"aria-label\": iconOnly ? name : undefined,\n    \"data-ckui\": \"slot-edit\",\n    \"data-busy\": s.busy || undefined,\n    className: render ? className : undefined,\n  };\n  if (!(s.has && (s.crop.canRecrop || s.removable))) {\n    return (\n      <ButtonPrimitive {...props} onClick={s.choose}>\n        {content}\n      </ButtonPrimitive>\n    );\n  }\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger {...props}>{content}</DropdownMenuTrigger>\n      <DropdownMenuContent align={align}>\n        <DropdownMenuItem onClick={s.choose} data-ckui=\"change\">\n          <HugeiconsIcon icon={ImageUpload01Icon} strokeWidth={2} />\n          {t(\"common.change\")}\n        </DropdownMenuItem>\n        {s.crop.canRecrop && (\n          <DropdownMenuItem onClick={s.recrop} data-ckui=\"edit-crop\">\n            <HugeiconsIcon icon={CropIcon} strokeWidth={2} />\n            {t(\"common.editCrop\")}\n          </DropdownMenuItem>\n        )}\n        {s.removable && (\n          <DropdownMenuItem onClick={s.remove} data-ckui=\"remove\">\n            <HugeiconsIcon icon={Delete02Icon} strokeWidth={2} />\n            {t(\"common.remove\")}\n          </DropdownMenuItem>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/** The SlotEditor's error outside the dialog (unreadable file, read failure), if any. */\nexport function SlotEditError({ className }: { className?: string }) {\n  const { error } = useSlotEditor();\n  const scope = useScopeProps();\n  if (!error) return null;\n  return (\n    <p role=\"alert\" data-ckui=\"slot-error\" {...scope} className={cn(scope.className, \"flex items-center gap-1.5 text-xs text-destructive\", className)}>\n      <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className=\"size-3.5 shrink-0\" />\n      {error}\n    </p>\n  );\n}\n"],"mappings":"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"}

package/dist/components/slot-image.d.ts

@@ -0,0 +1,23 @@
+import { AspectRatio } from '../client/aspect.js';
+import { ComponentProps, ReactNode } from 'react';
+import { PublicPreset } from '../client/public.js';
+import { DensityRange } from '../client/rendition.js';
+export interface SlotImageProps extends Omit<ComponentProps<"img">, "src" | "srcSet" | "sizes" | "width" | "height"> {
+    /** The item's published renditions; without any, the fallback shows. */
+    image?: PublicPreset | null;
+    /** Density range for picking the width; default the provider's (2–3×). */
+    density?: DensityRange;
+    round?: boolean;
+    /** Width / height of the box; default the preset's aspect. */
+    aspect?: AspectRatio;
+    /** Shown without an image (or when it fails to load); default a muted box with an icon. */
+    fallback?: ReactNode;
+    /** A pulsing fill until the image has loaded. */
+    skeleton?: boolean;
+    /** How the image fills the box. Default "cover". */
+    fit?: "cover" | "contain";
+    /** Accessible name of the empty state. */
+    emptyLabel?: string;
+}
+/** A public image preset's file, in a box at its aspect, at the width its rendered width × density needs. */
+export declare function SlotImage({ image, density, round, aspect, fallback, skeleton, fit, emptyLabel, className, alt, style, onError, ...img }: SlotImageProps): import('react').JSX.Element;

package/dist/components/slot-image.js

@@ -0,0 +1,48 @@
+import { RenditionImg as e } from "./rendition-img.js";
+import { publicRenditions as t } from "../client/public.js";
+import { ratio as n } from "../client/aspect.js";
+import { ContentKitUiRoot as r } from "../scope.js";
+import { createElement as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { cn as s } from "cn";
+import { Image01Icon as c, UserIcon as l } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as u } from "@hugeicons/react";
+//#region src/components/slot-image.tsx
+function d({ image: d, density: f, round: p, aspect: m, fallback: h, skeleton: g, fit: _ = "cover", emptyLabel: v, className: y, alt: b = "", style: x, onError: S, ...C }) {
+	let w = t(d), [T, E] = a(null), D = w[0]?.url ?? "", O = w.length > 0 && T !== D, k = n(m ?? d?.aspect) ?? 1;
+	return /* @__PURE__ */ o(r, {
+		className: s("relative overflow-hidden bg-muted", p ? "rounded-full" : "rounded-lg", y),
+		style: {
+			aspectRatio: String(k),
+			...x
+		},
+		"data-ckui": "slot-image",
+		"data-empty": O ? void 0 : "",
+		children: O ? /* @__PURE__ */ i(e, {
+			...C,
+			key: D,
+			outputs: w,
+			density: f,
+			alt: b,
+			skeleton: g,
+			fit: _,
+			className: "absolute inset-0 size-full",
+			onError: (e) => {
+				E(D), S?.(e);
+			}
+		}) : h ?? /* @__PURE__ */ o("div", {
+			role: v ? "img" : void 0,
+			"aria-label": v,
+			className: "absolute inset-0 flex items-center justify-center text-muted-foreground/70",
+			children: /* @__PURE__ */ o(u, {
+				icon: p ? l : c,
+				strokeWidth: 1.5,
+				className: "size-1/3 max-h-10 max-w-10"
+			})
+		})
+	});
+}
+//#endregion
+export { d as SlotImage };
+
+//# sourceMappingURL=slot-image.js.map

package/dist/components/slot-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-image.js","names":[],"sources":["../../src/components/slot-image.tsx"],"sourcesContent":["import { ratio, type AspectRatio } from \"../client/aspect.js\";\nimport { Image01Icon, UserIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useState, type ComponentProps, type ReactNode } from \"react\";\nimport { publicRenditions, type PublicPreset } from \"../client/public.js\";\nimport type { DensityRange } from \"../client/rendition.js\";\nimport { RenditionImg } from \"./rendition-img.js\";\nimport { ContentKitUiRoot } from \"../scope.js\";\n\nexport interface SlotImageProps extends Omit<ComponentProps<\"img\">, \"src\" | \"srcSet\" | \"sizes\" | \"width\" | \"height\"> {\n  /** The item's published renditions; without any, the fallback shows. */\n  image?: PublicPreset | null;\n  /** Density range for picking the width; default the provider's (2–3×). */\n  density?: DensityRange;\n  round?: boolean;\n  /** Width / height of the box; default the preset's aspect. */\n  aspect?: AspectRatio;\n  /** Shown without an image (or when it fails to load); default a muted box with an icon. */\n  fallback?: ReactNode;\n  /** A pulsing fill until the image has loaded. */\n  skeleton?: boolean;\n  /** How the image fills the box. Default \"cover\". */\n  fit?: \"cover\" | \"contain\";\n  /** Accessible name of the empty state. */\n  emptyLabel?: string;\n}\n\n/** A public image preset's file, in a box at its aspect, at the width its rendered width × density needs. */\nexport function SlotImage({ image, density, round, aspect, fallback, skeleton, fit = \"cover\", emptyLabel, className, alt = \"\", style, onError, ...img }: SlotImageProps) {\n  const outputs = publicRenditions(image);\n  const [failed, setFailed] = useState<string | null>(null);\n  const key = outputs[0]?.url ?? \"\";\n  const has = outputs.length > 0 && failed !== key;\n  const a = ratio(aspect ?? image?.aspect) ?? 1;\n  return (\n    <ContentKitUiRoot\n      className={cn(\"relative overflow-hidden bg-muted\", round ? \"rounded-full\" : \"rounded-lg\", className)}\n      style={{ aspectRatio: String(a), ...style }}\n      data-ckui=\"slot-image\"\n      data-empty={has ? undefined : \"\"}\n    >\n      {has ? (\n        <RenditionImg\n          {...img}\n          key={key}\n          outputs={outputs}\n          density={density}\n          alt={alt}\n          skeleton={skeleton}\n          fit={fit}\n          className=\"absolute inset-0 size-full\"\n          onError={(e) => {\n            setFailed(key);\n            onError?.(e);\n          }}\n        />\n      ) : (\n        (fallback ?? (\n          <div role={emptyLabel ? \"img\" : undefined} aria-label={emptyLabel} className=\"absolute inset-0 flex items-center justify-center text-muted-foreground/70\">\n            <HugeiconsIcon icon={round ? UserIcon : Image01Icon} strokeWidth={1.5} className=\"size-1/3 max-h-10 max-w-10\" />\n          </div>\n        ))\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,EAAU,EAAE,UAAO,YAAS,UAAO,WAAQ,aAAU,aAAU,SAAM,SAAS,eAAY,cAAW,SAAM,IAAI,UAAO,YAAS,GAAG,KAAuB;CACvK,IAAM,IAAU,EAAiB,CAAK,GAChC,CAAC,GAAQ,KAAa,EAAwB,IAAI,GAClD,IAAM,EAAQ,EAAE,EAAE,OAAO,IACzB,IAAM,EAAQ,SAAS,KAAK,MAAW,GACvC,IAAI,EAAM,KAAU,GAAO,MAAM,KAAK;CAC5C,OACE,kBAAC,GAAD;EACE,WAAW,EAAG,qCAAqC,IAAQ,iBAAiB,cAAc,CAAS;EACnG,OAAO;GAAE,aAAa,OAAO,CAAC;GAAG,GAAG;EAAM;EAC1C,aAAU;EACV,cAAY,IAAM,KAAA,IAAY;EAE7B,UAAA,IACC,kBAAC,GAAD;GACE,GAAI;GACC;GACI;GACA;GACJ;GACK;GACL;GACL,WAAU;GACV,UAAU,MAAM;IAEd,AADA,EAAU,CAAG,GACb,IAAU,CAAC;GACb;EACD,CAAA,IAEA,KACC,kBAAC,OAAD;GAAK,MAAM,IAAa,QAAQ,KAAA;GAAW,cAAY;GAAY,WAAU;GAC3E,UAAA,kBAAC,GAAD;IAAe,MAAM,IAAQ,IAAW;IAAa,aAAa;IAAK,WAAU;GAA8B,CAAA;EAC5G,CAAA;CAGO,CAAA;AAEtB"}

package/dist/components/slot-upload.d.ts

@@ -0,0 +1,41 @@
+import { AspectRatio } from '../client/aspect.js';
+import { ReactNode } from 'react';
+import { ContentKitClient } from '../client/client.js';
+import { CropSource } from '../client/image.js';
+import { PublicPreset } from '../client/public.js';
+import { FileInfo, ReadResult, RefBody } from '../client/generated/wire.js';
+export interface SlotUploadProps {
+    /** The item that owns the upload. */
+    item: RefBody;
+    /** The upload path; default "avatar" or "cover". */
+    path?: string;
+    /** The public preset showing it. */
+    image?: PublicPreset | null;
+    client?: ContentKitClient;
+    /** An editor read of the item from the host; otherwise fetched. */
+    read?: ReadResult | null;
+    /** Called with the processed upload after every save, null after a removal. */
+    onChange?: (file: FileInfo | null) => void;
+    /** The output's "W:H"; default the preset's aspect, else "1:1" (avatar) or "3:1" (cover). */
+    aspect?: AspectRatio;
+    /** The narrowest edit the server accepts (the preset's Image.MinWidth). */
+    minWidth?: number;
+    /** "reject" refuses animated images before uploading. */
+    animation?: "reject";
+    /** Crops narrower than this many source pixels get a sharpness warning; default 512 (avatar) or 3000 (cover). */
+    targetWidth?: number;
+    /** `accept` of the file input. Default "image/*". */
+    accept?: string;
+    disabled?: boolean;
+    /** Offers Remove once set; default true for avatars, false for covers. */
+    removable?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+    /** Replaces decodeImage (tests). */
+    decode?: (file: File) => Promise<CropSource>;
+}
+/** Round 1:1 avatar field: image, label, hint, Change / Edit crop, crop dialog, progress, errors. For custom layouts use SlotEditor. */
+export declare function AvatarUpload(p: SlotUploadProps): import('react').JSX.Element;
+/** Wide cover field at the preset's aspect (e.g. 3:1), with drop-to-upload. For custom layouts use SlotEditor. */
+export declare function CoverUpload(p: SlotUploadProps): import('react').JSX.Element;