npm - @burdenoff/microfe-theculturepost - Versions diffs - 2026.704.2 → 2026.705.2 - Mend

@burdenoff/microfe-theculturepost 2026.704.2 → 2026.705.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/theculturepost/components/CreateStoryDialog.js CHANGED Viewed

@@ -1,177 +1,353 @@
-import { FILE_FOLDERS as e } from "../hooks/useFiles.js";
-import { formatEnumLabel as t } from "../utils/formatters.js";
-import { useTcpCreateStory as n, useTcpTopics as r } from "../hooks/useTcpApi.js";
+import { cn as e } from "../utils/cn.js";
+import { FILE_FOLDERS as t, uploadImageToFiles as n } from "../hooks/useFiles.js";
+import { formatEnumLabel as r } from "../utils/formatters.js";
+import { useTcpCreateStory as ee, useTcpTopics as te } from "../hooks/useTcpApi.js";
 import "../hooks/index.js";
 import { slugify as i } from "../utils/slug.js";
-import { describeError as ee, notify as te } from "../lib/toast.js";
-import { FileUploadField as a } from "./FileUploadField.js";
-import { TagInput as o } from "./TagInput.js";
-import { useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Button as u, Input as d, Label as f, ResponsiveDialog as ne, ResponsiveDialogContent as p, ResponsiveDialogDescription as m, ResponsiveDialogFooter as h, ResponsiveDialogHeader as g, ResponsiveDialogTitle as re, Select as _, SelectContent as v, SelectItem as y, SelectTrigger as b, SelectValue as x, Textarea as S } from "@burdenoff/fe-libs/ui";
+import { describeError as a, notify as o } from "../lib/toast.js";
+import { TagInput as s } from "./TagInput.js";
+import { useRef as c, useState as l } from "react";
+import { CheckCircle2 as u, FileCheck2 as d, Loader2 as f, UploadCloud as p, X as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Button as v, Input as y, Label as b, ResponsiveDialog as x, ResponsiveDialogContent as S, ResponsiveDialogDescription as C, ResponsiveDialogFooter as w, ResponsiveDialogHeader as T, ResponsiveDialogTitle as E, Select as D, SelectContent as O, SelectItem as ne, SelectTrigger as k, SelectValue as A, Textarea as j } from "@burdenoff/fe-libs/ui";
 //#region src/theculturepost/components/CreateStoryDialog.tsx
-var C = [
+var re = [
 	"ARTICLE",
 	"ESSAY",
 	"EXPLAINER",
 	"ORAL_HISTORY",
 	"PHOTO_STORY",
 	"TIMELINE"
-];
-function w({ open: w, onOpenChange: T, topicId: E, onCreated: ie }) {
-	let D = n(), O = r({ pagination: { limit: 100 } }), [k, A] = s(""), [j, M] = s(""), [N, P] = s(!1), [F, I] = s(""), [L, R] = s(""), [z, B] = s("ARTICLE"), [V, H] = s(E ?? ""), [U, W] = s([]), [G, K] = s([]), [q, J] = s(""), [Y, X] = s(null), [Z, Q] = s(null), $ = N ? j : i(k), ae = () => {
-		A(""), M(""), P(!1), I(""), R(""), B("ARTICLE"), H(E ?? ""), W([]), K([]), J(""), X(null), Q(null);
+], M = 200, N = 25;
+function ie({ coverFileId: r, onUploaded: ee, onCleared: te }) {
+	let i = c(null), [s, u] = l(!1), [h, y] = l(!1), [b, x] = l(null), [S, C] = l(null), w = async (e) => {
+		if (!e.type.startsWith("image/")) {
+			o.error("Unsupported file", "Please choose an image (JPG or PNG).");
+			return;
+		}
+		if (e.size > N * 1024 * 1024) {
+			o.error("File too large", `Please choose an image under ${N} MB.`);
+			return;
+		}
+		u(!0);
+		try {
+			let r = await n(e, t.covers);
+			x(r.url), C(r.name), ee(r.id), o.success("Cover uploaded", r.name);
+		} catch (e) {
+			o.error("Upload failed", a(e));
+		} finally {
+			u(!1);
+		}
+	}, T = (e) => {
+		let t = e.target.files?.[0];
+		e.target.value = "", t && w(t);
+	}, E = (e) => {
+		if (e.preventDefault(), y(!1), s) return;
+		let t = e.dataTransfer.files?.[0];
+		t && w(t);
+	}, D = () => {
+		x(null), C(null), te();
+	}, O = /* @__PURE__ */ g("input", {
+		ref: i,
+		type: "file",
+		accept: "image/*",
+		className: "sr-only",
+		onChange: T,
+		disabled: s,
+		"aria-label": "Upload cover image"
+	});
+	return b ? /* @__PURE__ */ _("div", {
+		className: "relative overflow-hidden rounded-2xl border border-border-seam",
+		children: [
+			O,
+			/* @__PURE__ */ g("img", {
+				src: b,
+				alt: "Cover preview",
+				className: "max-h-52 w-full object-cover"
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "absolute right-2 top-2 flex gap-1.5",
+				children: [/* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: () => i.current?.click(),
+					className: "rounded-full bg-bg-canvas/85 px-2.5 py-1 text-xs font-medium text-text-primary backdrop-blur-sm hover:bg-bg-canvas",
+					children: "Replace"
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: D,
+					"aria-label": "Remove cover",
+					className: "rounded-full bg-bg-canvas/85 p-1.5 text-text-primary backdrop-blur-sm hover:bg-bg-canvas",
+					children: /* @__PURE__ */ g(m, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				})]
+			})
+		]
+	}) : r ? /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-between gap-2 rounded-2xl border border-border-seam bg-bg-surface px-3 py-2.5 text-sm",
+		children: [
+			O,
+			/* @__PURE__ */ _("span", {
+				className: "inline-flex min-w-0 items-center gap-2 text-text-primary",
+				children: [/* @__PURE__ */ g(d, {
+					className: "h-4 w-4 shrink-0 text-status-success-text",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ g("span", {
+					className: "truncate",
+					children: S ?? "Cover selected"
+				})]
+			}),
+			/* @__PURE__ */ g("button", {
+				type: "button",
+				onClick: D,
+				"aria-label": "Remove cover",
+				className: "text-text-tertiary hover:text-text-primary",
+				children: /* @__PURE__ */ g(m, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	}) : /* @__PURE__ */ _("div", {
+		onDragOver: (e) => {
+			e.preventDefault(), s || y(!0);
+		},
+		onDragLeave: (e) => {
+			e.preventDefault(), y(!1);
+		},
+		onDrop: E,
+		className: e("rounded-2xl border-2 border-dashed px-4 py-6 text-center transition-colors", h ? "border-accent bg-[var(--color-accent-soft)]" : "border-border-seam bg-bg-sunken/40"),
+		children: [
+			O,
+			s ? /* @__PURE__ */ _("div", {
+				className: "flex items-center justify-center gap-2 text-sm text-text-secondary",
+				children: [/* @__PURE__ */ g(f, {
+					className: "h-5 w-5 animate-spin",
+					"aria-hidden": "true"
+				}), " Uploading cover…"]
+			}) : /* @__PURE__ */ _("div", {
+				className: "flex flex-col items-center justify-center gap-3 sm:flex-row",
+				children: [
+					/* @__PURE__ */ g(p, {
+						className: "h-8 w-8 text-accent",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ g("p", {
+						className: "text-sm text-text-secondary",
+						children: "Drag and drop an image here, or"
+					}),
+					/* @__PURE__ */ g(v, {
+						type: "button",
+						size: "sm",
+						onClick: () => i.current?.click(),
+						children: "Upload cover"
+					})
+				]
+			}),
+			/* @__PURE__ */ _("p", {
+				className: "mt-3 text-xs text-text-tertiary",
+				children: [
+					"Recommended: 16:9 ratio, min 1200×675px. JPG or PNG, up to ",
+					N,
+					" MB."
+				]
+			})
+		]
+	});
+}
+function P({ open: e, onOpenChange: t, topicId: n, onCreated: c }) {
+	let d = ee(), p = te({ pagination: { limit: 100 } }), [m, N] = l(""), [P, F] = l(""), [ae, I] = l(!1), [L, R] = l(""), [z, B] = l(""), [V, oe] = l("ARTICLE"), [H, U] = l(n ?? ""), [W, G] = l([]), [K, q] = l([]), [J, Y] = l(""), [X, Z] = l(null), [se, Q] = l(null), [ce, le] = l(0), $ = ae ? P : i(m), ue = () => {
+		N(""), F(""), I(!1), R(""), B(""), oe("ARTICLE"), U(n ?? ""), G([]), q([]), Y(""), Z(null), Q(null), le((e) => e + 1);
 	};
-	return /* @__PURE__ */ c(ne, {
-		open: w,
-		onOpenChange: T,
-		children: /* @__PURE__ */ l(p, {
-			className: "sm:max-w-lg",
+	return /* @__PURE__ */ g(x, {
+		open: e,
+		onOpenChange: t,
+		children: /* @__PURE__ */ _(S, {
+			className: "sm:max-w-3xl",
 			children: [
-				/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ c(re, { children: "Draft a story" }), /* @__PURE__ */ c(m, { children: "Begin a new piece — it enters the editorial lifecycle as a draft you can refine and publish later." })] }),
-				/* @__PURE__ */ l("div", {
-					className: "flex max-h-[62vh] flex-col gap-4 overflow-y-auto py-2",
+				/* @__PURE__ */ _(T, { children: [/* @__PURE__ */ g(E, {
+					className: "font-display",
+					children: "Draft a story"
+				}), /* @__PURE__ */ g(C, { children: "Begin a new piece — it enters the editorial lifecycle as a draft you can refine and publish later." })] }),
+				/* @__PURE__ */ _("div", {
+					className: "flex max-h-[64vh] flex-col gap-5 overflow-y-auto py-2",
 					children: [
-						/* @__PURE__ */ l("div", {
-							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, { children: "Cover image" }), /* @__PURE__ */ c(a, {
-								folder: e.covers,
-								accept: "image/*",
-								label: "Upload cover",
-								hint: "A hero image for the story. PNG or JPG, up to 25 MB.",
-								fileId: Y,
-								onUploaded: X,
-								onCleared: () => X(null)
-							})]
-						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ _("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-title",
-								children: "Title"
-							}), /* @__PURE__ */ c(d, {
-								id: "story-title",
-								value: k,
-								onChange: (e) => A(e.target.value),
-								placeholder: "e.g. The Weavers of the Coromandel Coast"
-							})]
+							children: [/* @__PURE__ */ g(b, { children: "Cover image" }), /* @__PURE__ */ g(ie, {
+								coverFileId: X,
+								onUploaded: Z,
+								onCleared: () => Z(null)
+							}, ce)]
 						}),
-						/* @__PURE__ */ l("div", {
-							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-slug",
-								children: "URL slug"
-							}), /* @__PURE__ */ c(d, {
-								id: "story-slug",
-								value: $,
-								onChange: (e) => {
-									P(!0), M(i(e.target.value));
-								},
-								placeholder: "the-weavers-of-the-coromandel-coast"
+						/* @__PURE__ */ _("div", {
+							className: "grid gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(b, {
+									htmlFor: "story-title",
+									children: "Title"
+								}), /* @__PURE__ */ g(y, {
+									id: "story-title",
+									value: m,
+									onChange: (e) => N(e.target.value),
+									placeholder: "e.g. The Weavers of the Coromandel Coast"
+								})]
+							}), /* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [
+									/* @__PURE__ */ g(b, {
+										htmlFor: "story-slug",
+										children: "URL slug"
+									}),
+									/* @__PURE__ */ _("div", {
+										className: "relative",
+										children: [/* @__PURE__ */ g(y, {
+											id: "story-slug",
+											value: $,
+											onChange: (e) => {
+												I(!0), F(i(e.target.value));
+											},
+											placeholder: "the-weavers-of-the-coromandel-coast",
+											className: $ ? "pr-9" : void 0
+										}), $ && /* @__PURE__ */ g(u, {
+											className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-status-success-text",
+											"aria-hidden": "true"
+										})]
+									}),
+									/* @__PURE__ */ g("p", {
+										className: "text-xs text-text-tertiary",
+										children: "Auto-derived from the title — used in the story’s URL, so keep it unique."
+									})
+								]
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
-							className: "grid grid-cols-2 gap-3",
-							children: [/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ _("div", {
+							className: "grid gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ _("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ c(f, { children: "Format" }), /* @__PURE__ */ l(_, {
-									value: z,
-									onValueChange: (e) => B(e),
-									children: [/* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(x, {}) }), /* @__PURE__ */ c(v, { children: C.map((e) => /* @__PURE__ */ c(y, {
+								children: [/* @__PURE__ */ g(b, { children: "Format" }), /* @__PURE__ */ _(D, {
+									value: V,
+									onValueChange: (e) => oe(e),
+									children: [/* @__PURE__ */ g(k, { children: /* @__PURE__ */ g(A, {}) }), /* @__PURE__ */ g(O, { children: re.map((e) => /* @__PURE__ */ g(ne, {
 										value: e,
-										children: t(e)
+										children: r(e)
 									}, e)) })]
 								})]
-							}), /* @__PURE__ */ l("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "grid gap-1.5",
-								children: [/* @__PURE__ */ c(f, {
+								children: [/* @__PURE__ */ g(b, {
 									htmlFor: "story-reading",
 									children: "Reading time (min)"
-								}), /* @__PURE__ */ c(d, {
+								}), /* @__PURE__ */ g(y, {
 									id: "story-reading",
 									type: "number",
 									min: 0,
-									value: q,
-									onChange: (e) => J(e.target.value),
+									value: J,
+									onChange: (e) => Y(e.target.value),
 									placeholder: "Optional"
 								})]
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ _("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, { children: "Topic" }), /* @__PURE__ */ l(_, {
-								value: V,
-								onValueChange: H,
-								children: [/* @__PURE__ */ c(b, { children: /* @__PURE__ */ c(x, { placeholder: "Choose a topic (optional)" }) }), /* @__PURE__ */ c(v, { children: (O.data?.items ?? []).map((e) => /* @__PURE__ */ c(y, {
+							children: [/* @__PURE__ */ g(b, { children: "Topic" }), /* @__PURE__ */ _(D, {
+								value: H,
+								onValueChange: U,
+								children: [/* @__PURE__ */ g(k, { children: /* @__PURE__ */ g(A, { placeholder: "Choose a topic (optional)" }) }), /* @__PURE__ */ g(O, { children: (p.data?.items ?? []).map((e) => /* @__PURE__ */ g(ne, {
 									value: e.id,
 									children: e.name
 								}, e.id)) })]
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ _("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-summary",
-								children: "Summary"
-							}), /* @__PURE__ */ c(S, {
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ g(b, {
+									htmlFor: "story-summary",
+									children: "Summary"
+								}), /* @__PURE__ */ _("span", {
+									className: "text-xs tabular-nums text-text-tertiary",
+									children: [
+										L.length,
+										"/",
+										M
+									]
+								})]
+							}), /* @__PURE__ */ g(j, {
 								id: "story-summary",
-								value: F,
-								onChange: (e) => I(e.target.value),
+								value: L,
+								onChange: (e) => R(e.target.value.slice(0, M)),
+								maxLength: M,
 								placeholder: "A short standfirst that introduces the story.",
 								rows: 2
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ _("div", {
 							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-body",
-								children: "Body"
-							}), /* @__PURE__ */ c(S, {
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ g(b, {
+									htmlFor: "story-body",
+									children: "Body"
+								}), /* @__PURE__ */ _("span", {
+									className: "text-xs tabular-nums text-text-tertiary",
+									children: [
+										z.length,
+										" ",
+										z.length === 1 ? "character" : "characters"
+									]
+								})]
+							}), /* @__PURE__ */ g(j, {
 								id: "story-body",
-								value: L,
-								onChange: (e) => R(e.target.value),
+								value: z,
+								onChange: (e) => B(e.target.value),
 								placeholder: "Write the story… (line breaks are preserved)",
 								rows: 5
 							})]
 						}),
-						/* @__PURE__ */ l("div", {
-							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-langs",
-								children: "Languages"
-							}), /* @__PURE__ */ c(o, {
-								id: "story-langs",
-								value: U,
-								onChange: W,
-								placeholder: "e.g. English, Tamil…",
-								preserveCase: !0
-							})]
-						}),
-						/* @__PURE__ */ l("div", {
-							className: "grid gap-1.5",
-							children: [/* @__PURE__ */ c(f, {
-								htmlFor: "story-tags",
-								children: "Tags"
-							}), /* @__PURE__ */ c(o, {
-								id: "story-tags",
-								value: G,
-								onChange: K,
-								placeholder: "Add tags…"
+						/* @__PURE__ */ _("div", {
+							className: "grid gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(b, {
+									htmlFor: "story-langs",
+									children: "Languages"
+								}), /* @__PURE__ */ g(s, {
+									id: "story-langs",
+									value: W,
+									onChange: G,
+									placeholder: "e.g. English, Tamil…",
+									preserveCase: !0
+								})]
+							}), /* @__PURE__ */ _("div", {
+								className: "grid gap-1.5",
+								children: [/* @__PURE__ */ g(b, {
+									htmlFor: "story-tags",
+									children: "Tags"
+								}), /* @__PURE__ */ g(s, {
+									id: "story-tags",
+									value: K,
+									onChange: q,
+									placeholder: "Add tags…"
+								})]
 							})]
 						}),
-						Z && /* @__PURE__ */ c("p", {
+						se && /* @__PURE__ */ g("p", {
 							className: "text-sm text-status-error-text",
-							children: Z
+							children: se
 						})
 					]
 				}),
-				/* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(u, {
+				/* @__PURE__ */ _(w, { children: [/* @__PURE__ */ g(v, {
 					variant: "outline",
-					onClick: () => T(!1),
+					onClick: () => t(!1),
 					children: "Cancel"
-				}), /* @__PURE__ */ c(u, {
+				}), /* @__PURE__ */ g(v, {
 					onClick: async () => {
-						if (!k.trim()) {
+						if (!m.trim()) {
 							Q("A title is required.");
 							return;
 						}
@@ -180,31 +356,34 @@ function w({ open: w, onOpenChange: T, topicId: E, onCreated: ie }) {
 							return;
 						}
 						try {
-							let e = await D.mutateAsync({
-								title: k.trim(),
+							let e = await d.mutateAsync({
+								title: m.trim(),
 								slug: $,
-								summary: F.trim() || null,
-								body: L.trim() || null,
-								format: z,
-								topicId: V || null,
-								languages: U.length ? U : null,
-								tags: G.length ? G : null,
-								readingMins: q ? Number(q) : null,
-								coverFileId: Y
+								summary: L.trim() || null,
+								body: z.trim() || null,
+								format: V,
+								topicId: H || null,
+								languages: W.length ? W : null,
+								tags: K.length ? K : null,
+								readingMins: J ? Number(J) : null,
+								coverFileId: X
 							});
-							te.success("Story created", e.title), T(!1), ae(), ie?.(e);
+							o.success("Story created", e.title), t(!1), ue(), c?.(e);
 						} catch (e) {
-							Q(ee(e));
+							Q(a(e));
 						}
 					},
-					disabled: D.isPending,
-					children: "Create story"
+					disabled: d.isPending,
+					children: d.isPending ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(f, {
+						className: "mr-1.5 h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}), " Creating…"] }) : "Create story"
 				})] })
 			]
 		})
 	});
 }
 //#endregion
-export { w as CreateStoryDialog };
+export { P as CreateStoryDialog };
 //# sourceMappingURL=CreateStoryDialog.js.map

package/dist/theculturepost/components/CreateStoryDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateStoryDialog.js","names":[],"sources":["../../../src/theculturepost/components/CreateStoryDialog.tsx"],"sourcesContent":["/*\n CreateStoryDialog — draft a new story.\n * @module theculturepost/components\n \n Writes `tcpCreateStory`. Slug auto-derives from the title (editable). New\n * stories begin at the start of the editorial lifecycle (IDEA/DRAFT on the svc).\n /\n\nimport { useState } from 'react';\nimport {\n Button,\n Input,\n Label,\n Textarea,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { TagInput } from './TagInput';\nimport { FileUploadField } from './FileUploadField';\nimport { useTcpCreateStory, useTcpTopics, FILE_FOLDERS } from '../hooks';\nimport { slugify } from '../utils/slug';\nimport { formatEnumLabel } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { TcpStory, TcpStoryFormat } from '../types';\n\nconst FORMATS: TcpStoryFormat[] = [\n 'ARTICLE',\n 'ESSAY',\n 'EXPLAINER',\n 'ORAL_HISTORY',\n 'PHOTO_STORY',\n 'TIMELINE',\n];\n\ninterface CreateStoryDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /* Pre-select a topic (e.g. from a topic detail page). /\n topicId?: string;\n onCreated?: (story: TcpStory) => void;\n}\n\nexport function CreateStoryDialog({\n open,\n onOpenChange,\n topicId,\n onCreated,\n}: CreateStoryDialogProps) {\n const createStory = useTcpCreateStory();\n const topicsQuery = useTcpTopics({ pagination: { limit: 100 } });\n\n const [title, setTitle] = useState('');\n const [slug, setSlug] = useState('');\n const [slugTouched, setSlugTouched] = useState(false);\n const [summary, setSummary] = useState('');\n const [body, setBody] = useState('');\n const [format, setFormat] = useState<TcpStoryFormat>('ARTICLE');\n const [pickedTopic, setPickedTopic] = useState(topicId ?? '');\n const [languages, setLanguages] = useState<string[]>([]);\n const [tags, setTags] = useState<string[]>([]);\n const [readingMins, setReadingMins] = useState('');\n const [coverFileId, setCoverFileId] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n\n const effectiveSlug = slugTouched ? slug : slugify(title);\n\n const reset = () => {\n setTitle('');\n setSlug('');\n setSlugTouched(false);\n setSummary('');\n setBody('');\n setFormat('ARTICLE');\n setPickedTopic(topicId ?? '');\n setLanguages([]);\n setTags([]);\n setReadingMins('');\n setCoverFileId(null);\n setError(null);\n };\n\n const submit = async () => {\n if (!title.trim()) {\n setError('A title is required.');\n return;\n }\n if (!effectiveSlug) {\n setError('A URL slug is required.');\n return;\n }\n try {\n const created = await createStory.mutateAsync({\n title: title.trim(),\n slug: effectiveSlug,\n summary: summary.trim() \|\| null,\n body: body.trim() \|\| null,\n format,\n topicId: pickedTopic \|\| null,\n languages: languages.length ? languages : null,\n tags: tags.length ? tags : null,\n readingMins: readingMins ? Number(readingMins) : null,\n coverFileId,\n });\n notify.success('Story created', created.title);\n onOpenChange(false);\n reset();\n onCreated?.(created);\n } catch (err) {\n setError(describeError(err));\n }\n };\n\n return (\n <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n <ResponsiveDialogContent className=\"sm:max-w-lg\">\n <ResponsiveDialogHeader>\n <ResponsiveDialogTitle>Draft a story</ResponsiveDialogTitle>\n <ResponsiveDialogDescription>\n Begin a new piece — it enters the editorial lifecycle as a draft you can refine and\n publish later.\n </ResponsiveDialogDescription>\n </ResponsiveDialogHeader>\n\n <div className=\"flex max-h-[62vh] flex-col gap-4 overflow-y-auto py-2\">\n <div className=\"grid gap-1.5\">\n <Label>Cover image</Label>\n <FileUploadField\n folder={FILE_FOLDERS.covers}\n accept=\"image/\"\n label=\"Upload cover\"\n hint=\"A hero image for the story. PNG or JPG, up to 25 MB.\"\n fileId={coverFileId}\n onUploaded={setCoverFileId}\n onCleared={() => setCoverFileId(null)}\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-title\">Title</Label>\n <Input\n id=\"story-title\"\n value={title}\n onChange={(e) => setTitle(e.target.value)}\n placeholder=\"e.g. The Weavers of the Coromandel Coast\"\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-slug\">URL slug</Label>\n <Input\n id=\"story-slug\"\n value={effectiveSlug}\n onChange={(e) => {\n setSlugTouched(true);\n setSlug(slugify(e.target.value));\n }}\n placeholder=\"the-weavers-of-the-coromandel-coast\"\n />\n </div>\n <div className=\"grid grid-cols-2 gap-3\">\n <div className=\"grid gap-1.5\">\n <Label>Format</Label>\n <Select value={format} onValueChange={(v) => setFormat(v as TcpStoryFormat)}>\n <SelectTrigger>\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {FORMATS.map((f) => (\n <SelectItem key={f} value={f}>\n {formatEnumLabel(f)}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-reading\">Reading time (min)</Label>\n <Input\n id=\"story-reading\"\n type=\"number\"\n min={0}\n value={readingMins}\n onChange={(e) => setReadingMins(e.target.value)}\n placeholder=\"Optional\"\n />\n </div>\n </div>\n <div className=\"grid gap-1.5\">\n <Label>Topic</Label>\n <Select value={pickedTopic} onValueChange={setPickedTopic}>\n <SelectTrigger>\n <SelectValue placeholder=\"Choose a topic (optional)\" />\n </SelectTrigger>\n <SelectContent>\n {(topicsQuery.data?.items ?? []).map((topic) => (\n <SelectItem key={topic.id} value={topic.id}>\n {topic.name}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-summary\">Summary</Label>\n <Textarea\n id=\"story-summary\"\n value={summary}\n onChange={(e) => setSummary(e.target.value)}\n placeholder=\"A short standfirst that introduces the story.\"\n rows={2}\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-body\">Body</Label>\n <Textarea\n id=\"story-body\"\n value={body}\n onChange={(e) => setBody(e.target.value)}\n placeholder=\"Write the story… (line breaks are preserved)\"\n rows={5}\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-langs\">Languages</Label>\n <TagInput\n id=\"story-langs\"\n value={languages}\n onChange={setLanguages}\n placeholder=\"e.g. English, Tamil…\"\n preserveCase\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-tags\">Tags</Label>\n <TagInput id=\"story-tags\" value={tags} onChange={setTags} placeholder=\"Add tags…\" />\n </div>\n {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n </div>\n\n <ResponsiveDialogFooter>\n <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n Cancel\n </Button>\n <Button onClick={submit} disabled={createStory.isPending}>\n Create story\n </Button>\n </ResponsiveDialogFooter>\n </ResponsiveDialogContent>\n </ResponsiveDialog>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreateStoryDialog.js","names":[],"sources":["../../../src/theculturepost/components/CreateStoryDialog.tsx"],"sourcesContent":["/*\n CreateStoryDialog — draft a new story.\n * @module theculturepost/components\n \n Writes `tcpCreateStory`. A wide, two-column composer that mirrors the editorial\n * \"Draft a story\" surface: a real drag-and-drop cover dropzone (uploads to\n * wspace-files-svc and keeps the returned `coverFileId`), a title with an\n * auto-derived URL slug + uniqueness hint, char counters on summary/body, and\n * chip multiselects for languages/tags. New stories begin at the start of the\n * editorial lifecycle (IDEA/DRAFT on the svc). Every field maps to a real\n * `TcpCreateStoryInput` field — no bookmarks, no fabricated metadata.\n /\n\nimport { useRef, useState, type ChangeEvent, type DragEvent } from 'react';\nimport { UploadCloud, Loader2, X, CheckCircle2, FileCheck2 } from 'lucide-react';\nimport {\n Button,\n Input,\n Label,\n Textarea,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n ResponsiveDialog,\n ResponsiveDialogContent,\n ResponsiveDialogHeader,\n ResponsiveDialogTitle,\n ResponsiveDialogDescription,\n ResponsiveDialogFooter,\n} from '@burdenoff/fe-libs/ui';\nimport { TagInput } from './TagInput';\nimport { cn } from '../utils/cn';\nimport { useTcpCreateStory, useTcpTopics, uploadImageToFiles, FILE_FOLDERS } from '../hooks';\nimport { slugify } from '../utils/slug';\nimport { formatEnumLabel } from '../utils/formatters';\nimport { notify, describeError } from '../lib/toast';\nimport type { TcpStory, TcpStoryFormat } from '../types';\n\nconst FORMATS: TcpStoryFormat[] = [\n 'ARTICLE',\n 'ESSAY',\n 'EXPLAINER',\n 'ORAL_HISTORY',\n 'PHOTO_STORY',\n 'TIMELINE',\n];\n\nconst SUMMARY_MAX = 200;\nconst COVER_MAX_MB = 25;\n\n// ---------------------------------------------------------------------------\n// Cover dropzone (real drag-and-drop → wspace-files-svc)\n// ---------------------------------------------------------------------------\n\ninterface CoverDropzoneProps {\n coverFileId: string \| null;\n onUploaded: (fileId: string) => void;\n onCleared: () => void;\n}\n\nfunction CoverDropzone({ coverFileId, onUploaded, onCleared }: CoverDropzoneProps) {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const [uploading, setUploading] = useState(false);\n const [dragActive, setDragActive] = useState(false);\n const [previewUrl, setPreviewUrl] = useState<string \| null>(null);\n const [fileName, setFileName] = useState<string \| null>(null);\n\n const handleFile = async (file: File) => {\n if (!file.type.startsWith('image/')) {\n notify.error('Unsupported file', 'Please choose an image (JPG or PNG).');\n return;\n }\n if (file.size > COVER_MAX_MB 1024 * 1024) {\n notify.error('File too large', `Please choose an image under ${COVER_MAX_MB} MB.`);\n return;\n }\n setUploading(true);\n try {\n const uploaded = await uploadImageToFiles(file, FILE_FOLDERS.covers);\n setPreviewUrl(uploaded.url);\n setFileName(uploaded.name);\n onUploaded(uploaded.id);\n notify.success('Cover uploaded', uploaded.name);\n } catch (err) {\n notify.error('Upload failed', describeError(err));\n } finally {\n setUploading(false);\n }\n };\n\n const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0];\n event.target.value = '';\n if (file) void handleFile(file);\n };\n\n const onDrop = (event: DragEvent<HTMLDivElement>) => {\n event.preventDefault();\n setDragActive(false);\n if (uploading) return;\n const file = event.dataTransfer.files?.[0];\n if (file) void handleFile(file);\n };\n\n const clear = () => {\n setPreviewUrl(null);\n setFileName(null);\n onCleared();\n };\n\n const hiddenInput = (\n <input\n ref={inputRef}\n type=\"file\"\n accept=\"image/\"\n className=\"sr-only\"\n onChange={onInputChange}\n disabled={uploading}\n aria-label=\"Upload cover image\"\n />\n );\n\n // Uploaded image preview\n if (previewUrl) {\n return (\n <div className=\"relative overflow-hidden rounded-2xl border border-border-seam\">\n {hiddenInput}\n <img src={previewUrl} alt=\"Cover preview\" className=\"max-h-52 w-full object-cover\" />\n <div className=\"absolute right-2 top-2 flex gap-1.5\">\n <button\n type=\"button\"\n onClick={() => inputRef.current?.click()}\n className=\"rounded-full bg-bg-canvas/85 px-2.5 py-1 text-xs font-medium text-text-primary backdrop-blur-sm hover:bg-bg-canvas\"\n >\n Replace\n </button>\n <button\n type=\"button\"\n onClick={clear}\n aria-label=\"Remove cover\"\n className=\"rounded-full bg-bg-canvas/85 p-1.5 text-text-primary backdrop-blur-sm hover:bg-bg-canvas\"\n >\n <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n </button>\n </div>\n </div>\n );\n }\n\n // Cover set but no local preview (defensive)\n if (coverFileId) {\n return (\n <div className=\"flex items-center justify-between gap-2 rounded-2xl border border-border-seam bg-bg-surface px-3 py-2.5 text-sm\">\n {hiddenInput}\n <span className=\"inline-flex min-w-0 items-center gap-2 text-text-primary\">\n <FileCheck2 className=\"h-4 w-4 shrink-0 text-status-success-text\" aria-hidden=\"true\" />\n <span className=\"truncate\">{fileName ?? 'Cover selected'}</span>\n </span>\n <button\n type=\"button\"\n onClick={clear}\n aria-label=\"Remove cover\"\n className=\"text-text-tertiary hover:text-text-primary\"\n >\n <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n </button>\n </div>\n );\n }\n\n // Empty dropzone\n return (\n <div\n onDragOver={(event) => {\n event.preventDefault();\n if (!uploading) setDragActive(true);\n }}\n onDragLeave={(event) => {\n event.preventDefault();\n setDragActive(false);\n }}\n onDrop={onDrop}\n className={cn(\n 'rounded-2xl border-2 border-dashed px-4 py-6 text-center transition-colors',\n dragActive\n ? 'border-accent bg-[var(--color-accent-soft)]'\n : 'border-border-seam bg-bg-sunken/40'\n )}\n >\n {hiddenInput}\n {uploading ? (\n <div className=\"flex items-center justify-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"h-5 w-5 animate-spin\" aria-hidden=\"true\" /> Uploading cover…\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-3 sm:flex-row\">\n <UploadCloud className=\"h-8 w-8 text-accent\" aria-hidden=\"true\" />\n <p className=\"text-sm text-text-secondary\">Drag and drop an image here, or</p>\n <Button type=\"button\" size=\"sm\" onClick={() => inputRef.current?.click()}>\n Upload cover\n </Button>\n </div>\n )}\n <p className=\"mt-3 text-xs text-text-tertiary\">\n Recommended: 16:9 ratio, min 1200×675px. JPG or PNG, up to {COVER_MAX_MB} MB.\n </p>\n </div>\n );\n}\n\n// ---------------------------------------------------------------------------\n// Dialog\n// ---------------------------------------------------------------------------\n\ninterface CreateStoryDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /* Pre-select a topic (e.g. from a topic detail page). /\n topicId?: string;\n onCreated?: (story: TcpStory) => void;\n}\n\nexport function CreateStoryDialog({\n open,\n onOpenChange,\n topicId,\n onCreated,\n}: CreateStoryDialogProps) {\n const createStory = useTcpCreateStory();\n const topicsQuery = useTcpTopics({ pagination: { limit: 100 } });\n\n const [title, setTitle] = useState('');\n const [slug, setSlug] = useState('');\n const [slugTouched, setSlugTouched] = useState(false);\n const [summary, setSummary] = useState('');\n const [body, setBody] = useState('');\n const [format, setFormat] = useState<TcpStoryFormat>('ARTICLE');\n const [pickedTopic, setPickedTopic] = useState(topicId ?? '');\n const [languages, setLanguages] = useState<string[]>([]);\n const [tags, setTags] = useState<string[]>([]);\n const [readingMins, setReadingMins] = useState('');\n const [coverFileId, setCoverFileId] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n // Bumped on reset to force the cover dropzone to drop its local preview state.\n const [resetNonce, setResetNonce] = useState(0);\n\n const effectiveSlug = slugTouched ? slug : slugify(title);\n\n const reset = () => {\n setTitle('');\n setSlug('');\n setSlugTouched(false);\n setSummary('');\n setBody('');\n setFormat('ARTICLE');\n setPickedTopic(topicId ?? '');\n setLanguages([]);\n setTags([]);\n setReadingMins('');\n setCoverFileId(null);\n setError(null);\n setResetNonce((n) => n + 1);\n };\n\n const submit = async () => {\n if (!title.trim()) {\n setError('A title is required.');\n return;\n }\n if (!effectiveSlug) {\n setError('A URL slug is required.');\n return;\n }\n try {\n const created = await createStory.mutateAsync({\n title: title.trim(),\n slug: effectiveSlug,\n summary: summary.trim() \|\| null,\n body: body.trim() \|\| null,\n format,\n topicId: pickedTopic \|\| null,\n languages: languages.length ? languages : null,\n tags: tags.length ? tags : null,\n readingMins: readingMins ? Number(readingMins) : null,\n coverFileId,\n });\n notify.success('Story created', created.title);\n onOpenChange(false);\n reset();\n onCreated?.(created);\n } catch (err) {\n setError(describeError(err));\n }\n };\n\n return (\n <ResponsiveDialog open={open} onOpenChange={onOpenChange}>\n <ResponsiveDialogContent className=\"sm:max-w-3xl\">\n <ResponsiveDialogHeader>\n <ResponsiveDialogTitle className=\"font-display\">Draft a story</ResponsiveDialogTitle>\n <ResponsiveDialogDescription>\n Begin a new piece — it enters the editorial lifecycle as a draft you can refine and\n publish later.\n </ResponsiveDialogDescription>\n </ResponsiveDialogHeader>\n\n <div className=\"flex max-h-[64vh] flex-col gap-5 overflow-y-auto py-2\">\n {/ Cover image /}\n <div className=\"grid gap-1.5\">\n <Label>Cover image</Label>\n <CoverDropzone\n key={resetNonce}\n coverFileId={coverFileId}\n onUploaded={setCoverFileId}\n onCleared={() => setCoverFileId(null)}\n />\n </div>\n\n {/ Title + slug /}\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-title\">Title</Label>\n <Input\n id=\"story-title\"\n value={title}\n onChange={(e) => setTitle(e.target.value)}\n placeholder=\"e.g. The Weavers of the Coromandel Coast\"\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-slug\">URL slug</Label>\n <div className=\"relative\">\n <Input\n id=\"story-slug\"\n value={effectiveSlug}\n onChange={(e) => {\n setSlugTouched(true);\n setSlug(slugify(e.target.value));\n }}\n placeholder=\"the-weavers-of-the-coromandel-coast\"\n className={effectiveSlug ? 'pr-9' : undefined}\n />\n {effectiveSlug && (\n <CheckCircle2\n className=\"pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-status-success-text\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n <p className=\"text-xs text-text-tertiary\">\n Auto-derived from the title — used in the story’s URL, so keep it unique.\n </p>\n </div>\n </div>\n\n {/ Format + reading time /}\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <div className=\"grid gap-1.5\">\n <Label>Format</Label>\n <Select value={format} onValueChange={(v) => setFormat(v as TcpStoryFormat)}>\n <SelectTrigger>\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {FORMATS.map((f) => (\n <SelectItem key={f} value={f}>\n {formatEnumLabel(f)}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-reading\">Reading time (min)</Label>\n <Input\n id=\"story-reading\"\n type=\"number\"\n min={0}\n value={readingMins}\n onChange={(e) => setReadingMins(e.target.value)}\n placeholder=\"Optional\"\n />\n </div>\n </div>\n\n {/ Topic /}\n <div className=\"grid gap-1.5\">\n <Label>Topic</Label>\n <Select value={pickedTopic} onValueChange={setPickedTopic}>\n <SelectTrigger>\n <SelectValue placeholder=\"Choose a topic (optional)\" />\n </SelectTrigger>\n <SelectContent>\n {(topicsQuery.data?.items ?? []).map((topic) => (\n <SelectItem key={topic.id} value={topic.id}>\n {topic.name}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n\n {/ Summary /}\n <div className=\"grid gap-1.5\">\n <div className=\"flex items-center justify-between gap-2\">\n <Label htmlFor=\"story-summary\">Summary</Label>\n <span className=\"text-xs tabular-nums text-text-tertiary\">\n {summary.length}/{SUMMARY_MAX}\n </span>\n </div>\n <Textarea\n id=\"story-summary\"\n value={summary}\n onChange={(e) => setSummary(e.target.value.slice(0, SUMMARY_MAX))}\n maxLength={SUMMARY_MAX}\n placeholder=\"A short standfirst that introduces the story.\"\n rows={2}\n />\n </div>\n\n {/ Body /}\n <div className=\"grid gap-1.5\">\n <div className=\"flex items-center justify-between gap-2\">\n <Label htmlFor=\"story-body\">Body</Label>\n <span className=\"text-xs tabular-nums text-text-tertiary\">\n {body.length} {body.length === 1 ? 'character' : 'characters'}\n </span>\n </div>\n <Textarea\n id=\"story-body\"\n value={body}\n onChange={(e) => setBody(e.target.value)}\n placeholder=\"Write the story… (line breaks are preserved)\"\n rows={5}\n />\n </div>\n\n {/ Languages + tags */}\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-langs\">Languages</Label>\n <TagInput\n id=\"story-langs\"\n value={languages}\n onChange={setLanguages}\n placeholder=\"e.g. English, Tamil…\"\n preserveCase\n />\n </div>\n <div className=\"grid gap-1.5\">\n <Label htmlFor=\"story-tags\">Tags</Label>\n <TagInput id=\"story-tags\" value={tags} onChange={setTags} placeholder=\"Add tags…\" />\n </div>\n </div>\n\n {error && <p className=\"text-sm text-status-error-text\">{error}</p>}\n </div>\n\n <ResponsiveDialogFooter>\n <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n Cancel\n </Button>\n <Button onClick={submit} disabled={createStory.isPending}>\n {createStory.isPending ? (\n <>\n <Loader2 className=\"mr-1.5 h-4 w-4 animate-spin\" aria-hidden=\"true\" /> Creating…\n </>\n ) : (\n 'Create story'\n )}\n </Button>\n </ResponsiveDialogFooter>\n </ResponsiveDialogContent>\n </ResponsiveDialog>\n );\n}\n"],"mappings":"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"}