@openrails/contentkit-ui 0.88.0 → 0.89.0

package/dist/components/content/reader-stats.js

@@ -4,44 +4,62 @@ import { Skeleton as n } from "../../ui/skeleton.js";
 import { contentError as r } from "../social/parts.js";
 import { labelOf as i } from "../groups/parts.js";
 import { useMyStats as a } from "../../react/stats.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { cn as c } from "cn";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as l } from "cn";
 //#region src/components/content/reader-stats.tsx
-function l({ labels: l, client: u, appearance: d, className: f }) {
-	let p = e(), { t: m } = p, h = a({ client: u }), g = (e) => /* @__PURE__ */ o(t, {
-		appearance: d,
-		className: c("grid gap-3 text-sm", f),
+function u({ labels: u, completedLabels: d, kinds: f, tiers: p, showDislikes: m = !0, client: h, appearance: g, className: _ }) {
+	let v = e(), { t: y } = v, b = a({ client: h }), x = (e) => /* @__PURE__ */ s(t, {
+		appearance: g,
+		className: l("grid gap-3 text-sm", _),
 		"data-ckui": "reader-stats",
 		children: e
 	});
-	if (h.error) return g(/* @__PURE__ */ o("p", {
+	if (b.error) return x(/* @__PURE__ */ s("p", {
 		role: "alert",
 		className: "text-destructive",
-		children: r(p, h.error)
+		children: r(v, b.error)
 	}));
-	if (!h.data) return h.loading ? g(/* @__PURE__ */ o(n, { className: "h-16 w-full" })) : null;
-	let _ = [
-		...Object.entries(h.data.completed).map(([e, t]) => [m("myStats.completed", { kind: i(l, e) }), t]),
-		[m("myStats.comments"), h.data.comments],
-		[m("myStats.likes"), h.data.comment_likes],
-		[m("myStats.dislikes"), h.data.comment_dislikes]
+	if (!b.data) return b.loading ? x(/* @__PURE__ */ s(n, { className: "h-16 w-full" })) : null;
+	let S = b.data, C = (e) => e === void 0 ? "—" : new Intl.NumberFormat(v.language).format(e), w = 86400, T = 30 * w, E = (e) => {
+		if (e === void 0) return "—";
+		let t = e < T ? "day" : "month", n = Math.max(+(e > 0), Math.floor(e / (t === "day" ? w : T)));
+		return new Intl.NumberFormat(v.language, {
+			style: "unit",
+			unit: t,
+			unitDisplay: "long"
+		}).format(n);
+	}, D = f ?? Object.keys(S.completed), O = p ?? Object.keys(S.access_seconds ?? {}), k = D.some((e) => S.completed[e] === void 0) || O.some((e) => S.access_seconds?.[e] === void 0), A = [
+		...O.map((e) => [
+			y("myStats.accessFor", { tier: i(u, e) }),
+			E(S.access_seconds?.[e]),
+			y("myStats.accessDescription")
+		]),
+		...D.map((e) => [d?.[e] ?? y("myStats.completed", { kind: i(u, e) }), C(S.completed[e])]),
+		[y("myStats.comments"), C(S.comments)],
+		[y("myStats.likes"), C(S.comment_likes)],
+		...m ? [[y("myStats.dislikes"), C(S.comment_dislikes)]] : []
 	];
-	return g(/* @__PURE__ */ o("dl", {
-		className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
-		children: _.map(([e, t]) => /* @__PURE__ */ s("div", {
-			className: "grid gap-0.5 rounded-lg border border-border p-3",
+	return x(/* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("dl", {
+		className: l("grid grid-cols-2 gap-3", A.length === 4 ? "lg:grid-cols-4" : "sm:grid-cols-3 lg:grid-cols-5"),
+		children: A.map(([e, t, n]) => /* @__PURE__ */ c("div", {
+			className: "grid gap-1 rounded-lg border border-border p-4",
 			"data-ckui": "reader-stat",
-			children: [/* @__PURE__ */ o("dt", {
+			title: n,
+			children: [/* @__PURE__ */ s("dt", {
 				className: "text-xs text-muted-foreground",
 				children: e
-			}), /* @__PURE__ */ o("dd", {
-				className: "text-lg font-semibold tabular-nums",
+			}), /* @__PURE__ */ s("dd", {
+				className: "text-xl font-semibold tabular-nums",
 				children: t
 			})]
 		}, e))
-	}));
+	}), k ? /* @__PURE__ */ s("p", {
+		className: "text-xs text-muted-foreground",
+		role: "status",
+		children: y("myStats.unavailable")
+	}) : null] }));
 }
 //#endregion
-export { l as ReaderStats };
+export { u as ReaderStats };
 
 //# sourceMappingURL=reader-stats.js.map

package/dist/components/content/reader-stats.js.map

@@ -1 +1 @@
-{"version":3,"file":"reader-stats.js","names":[],"sources":["../../../src/components/content/reader-stats.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useMyStats } from \"../../react/stats.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { labelOf, type Labels } from \"../groups/parts.js\";\nimport { contentError } from \"../social/parts.js\";\n\nexport interface ReaderStatsProps {\n  /** Display names of content kinds by identifier. */\n  labels?: Labels;\n  client?: ContentKitClient;\n  appearance?: ContentKitUiAppearance;\n  className?: string;\n}\n\n/** The signed-in reader's activity: contents finished per kind, their comments and the reactions those received. Nothing signed out. */\nexport function ReaderStats({ labels, client, appearance, className }: ReaderStatsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const s = useMyStats({ client });\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-3 text-sm\", className)} data-ckui=\"reader-stats\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (s.error) return root(<p role=\"alert\" className=\"text-destructive\">{contentError(m, s.error)}</p>);\n  if (!s.data) return s.loading ? root(<Skeleton className=\"h-16 w-full\" />) : null;\n  const stats: [string, number][] = [\n    ...Object.entries(s.data.completed).map(([kind, n]): [string, number] => [t(\"myStats.completed\", { kind: labelOf(labels, kind) }), n]),\n    [t(\"myStats.comments\"), s.data.comments],\n    [t(\"myStats.likes\"), s.data.comment_likes],\n    [t(\"myStats.dislikes\"), s.data.comment_dislikes],\n  ];\n  return root(\n    <dl className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n      {stats.map(([label, n]) => (\n        <div key={label} className=\"grid gap-0.5 rounded-lg border border-border p-3\" data-ckui=\"reader-stat\">\n          <dt className=\"text-xs text-muted-foreground\">{label}</dt>\n          <dd className=\"text-lg font-semibold tabular-nums\">{n}</dd>\n        </div>\n      ))}\n    </dl>,\n  );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,EAAY,EAAE,WAAQ,WAAQ,eAAY,gBAA+B;CACvF,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAI,EAAW,EAAE,UAAO,CAAC,GACzB,KAAQ,MACZ,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,sBAAsB,CAAS;EAAG,aAAU;EACjG;CACe,CAAA;CAEpB,IAAI,EAAE,OAAO,OAAO,EAAK,kBAAC,KAAD;EAAG,MAAK;EAAQ,WAAU;EAAoB,UAAA,EAAa,GAAG,EAAE,KAAK;CAAK,CAAA,CAAC;CACpG,IAAI,CAAC,EAAE,MAAM,OAAO,EAAE,UAAU,EAAK,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA,CAAC,IAAI;CAC7E,IAAM,IAA4B;EAChC,GAAG,OAAO,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,KAAK,CAAC,GAAM,OAAyB,CAAC,EAAE,qBAAqB,EAAE,MAAM,EAAQ,GAAQ,CAAI,EAAE,CAAC,GAAG,CAAC,CAAC;EACrI,CAAC,EAAE,kBAAkB,GAAG,EAAE,KAAK,QAAQ;EACvC,CAAC,EAAE,eAAe,GAAG,EAAE,KAAK,aAAa;EACzC,CAAC,EAAE,kBAAkB,GAAG,EAAE,KAAK,gBAAgB;CACjD;CACA,OAAO,EACL,kBAAC,MAAD;EAAI,WAAU;EACX,UAAA,EAAM,KAAK,CAAC,GAAO,OAClB,kBAAC,OAAD;GAAiB,WAAU;GAAmD,aAAU;GAAxF,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IAAiC,UAAA;GAAU,CAAA,GACzD,kBAAC,MAAD;IAAI,WAAU;IAAsC,UAAA;GAAM,CAAA,CACvD;EAHK,GAAA,CAGL,CACN;CACC,CAAA,CACN;AACF"}
+{"version":3,"file":"reader-stats.js","names":[],"sources":["../../../src/components/content/reader-stats.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { useMyStats } from \"../../react/stats.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { labelOf, type Labels } from \"../groups/parts.js\";\nimport { contentError } from \"../social/parts.js\";\n\nexport interface ReaderStatsProps {\n  /** Display names of content kinds and access tiers by identifier. */\n  labels?: Labels;\n  /** Complete labels for finished-content counts, e.g. {gallery: \"Galleries read\"}. */\n  completedLabels?: Labels;\n  /** Content kinds to show, including an unavailable placeholder. Default: returned kinds. */\n  kinds?: readonly string[];\n  /** Access tiers to show, including an unavailable placeholder. Default: returned tiers. */\n  tiers?: readonly string[];\n  /** Include received dislikes. Defaults to true. */\n  showDislikes?: boolean;\n  client?: ContentKitClient;\n  appearance?: ContentKitUiAppearance;\n  className?: string;\n}\n\n/** The signed-in reader's activity and elapsed tier access. Nothing signed out. */\nexport function ReaderStats({ labels, completedLabels, kinds, tiers, showDislikes = true, client, appearance, className }: ReaderStatsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const s = useMyStats({ client });\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-3 text-sm\", className)} data-ckui=\"reader-stats\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (s.error) return root(<p role=\"alert\" className=\"text-destructive\">{contentError(m, s.error)}</p>);\n  if (!s.data) return s.loading ? root(<Skeleton className=\"h-16 w-full\" />) : null;\n  const data = s.data;\n  const number = (value: number | undefined) => value === undefined ? \"—\" : new Intl.NumberFormat(m.language).format(value);\n  const daySeconds = 24 * 60 * 60;\n  const monthSeconds = 30 * daySeconds;\n  const tenure = (seconds: number | undefined) => {\n    if (seconds === undefined) return \"—\";\n    const unit = seconds < monthSeconds ? \"day\" : \"month\";\n    const count = Math.max(seconds > 0 ? 1 : 0, Math.floor(seconds / (unit === \"day\" ? daySeconds : monthSeconds)));\n    return new Intl.NumberFormat(m.language, { style: \"unit\", unit, unitDisplay: \"long\" }).format(count);\n  };\n  const showKinds = kinds ?? Object.keys(data.completed);\n  const showTiers = tiers ?? Object.keys(data.access_seconds ?? {});\n  const unavailable = showKinds.some((kind) => data.completed[kind] === undefined) || showTiers.some((tier) => data.access_seconds?.[tier] === undefined);\n  const stats: [string, string, string?][] = [\n    ...showTiers.map((tier): [string, string, string] => [t(\"myStats.accessFor\", { tier: labelOf(labels, tier) }), tenure(data.access_seconds?.[tier]), t(\"myStats.accessDescription\")]),\n    ...showKinds.map((kind): [string, string] => [completedLabels?.[kind] ?? t(\"myStats.completed\", { kind: labelOf(labels, kind) }), number(data.completed[kind])]),\n    [t(\"myStats.comments\"), number(data.comments)],\n    [t(\"myStats.likes\"), number(data.comment_likes)],\n    ...(showDislikes ? [[t(\"myStats.dislikes\"), number(data.comment_dislikes)] as [string, string]] : []),\n  ];\n  return root(\n    <>\n      <dl className={cn(\"grid grid-cols-2 gap-3\", stats.length === 4 ? \"lg:grid-cols-4\" : \"sm:grid-cols-3 lg:grid-cols-5\")}>\n        {stats.map(([label, value, description]) => (\n          <div key={label} className=\"grid gap-1 rounded-lg border border-border p-4\" data-ckui=\"reader-stat\" title={description}>\n            <dt className=\"text-xs text-muted-foreground\">{label}</dt>\n            <dd className=\"text-xl font-semibold tabular-nums\">{value}</dd>\n          </div>\n        ))}\n      </dl>\n      {unavailable ? <p className=\"text-xs text-muted-foreground\" role=\"status\">{t(\"myStats.unavailable\")}</p> : null}\n    </>,\n  );\n}\n"],"mappings":";;;;;;;;;AA4BA,SAAgB,EAAY,EAAE,WAAQ,oBAAiB,UAAO,UAAO,kBAAe,IAAM,WAAQ,eAAY,gBAA+B;CAC3I,IAAM,IAAI,EAAY,GAChB,EAAE,SAAM,GACR,IAAI,EAAW,EAAE,UAAO,CAAC,GACzB,KAAQ,MACZ,kBAAC,GAAD;EAA8B;EAAY,WAAW,EAAG,sBAAsB,CAAS;EAAG,aAAU;EACjG;CACe,CAAA;CAEpB,IAAI,EAAE,OAAO,OAAO,EAAK,kBAAC,KAAD;EAAG,MAAK;EAAQ,WAAU;EAAoB,UAAA,EAAa,GAAG,EAAE,KAAK;CAAK,CAAA,CAAC;CACpG,IAAI,CAAC,EAAE,MAAM,OAAO,EAAE,UAAU,EAAK,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA,CAAC,IAAI;CAC7E,IAAM,IAAO,EAAE,MACT,KAAU,MAA8B,MAAU,KAAA,IAAY,MAAM,IAAI,KAAK,aAAa,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAK,GAClH,IAAa,OACb,IAAe,KAAK,GACpB,KAAU,MAAgC;EAC9C,IAAI,MAAY,KAAA,GAAW,OAAO;EAClC,IAAM,IAAO,IAAU,IAAe,QAAQ,SACxC,IAAQ,KAAK,IAAI,MAAU,IAAW,KAAK,MAAM,KAAW,MAAS,QAAQ,IAAa,EAAa,CAAC;EAC9G,OAAO,IAAI,KAAK,aAAa,EAAE,UAAU;GAAE,OAAO;GAAQ;GAAM,aAAa;EAAO,CAAC,CAAC,CAAC,OAAO,CAAK;CACrG,GACM,IAAY,KAAS,OAAO,KAAK,EAAK,SAAS,GAC/C,IAAY,KAAS,OAAO,KAAK,EAAK,kBAAkB,CAAC,CAAC,GAC1D,IAAc,EAAU,MAAM,MAAS,EAAK,UAAU,OAAU,KAAA,CAAS,KAAK,EAAU,MAAM,MAAS,EAAK,iBAAiB,OAAU,KAAA,CAAS,GAChJ,IAAqC;EACzC,GAAG,EAAU,KAAK,MAAmC;GAAC,EAAE,qBAAqB,EAAE,MAAM,EAAQ,GAAQ,CAAI,EAAE,CAAC;GAAG,EAAO,EAAK,iBAAiB,EAAK;GAAG,EAAE,2BAA2B;EAAC,CAAC;EACnL,GAAG,EAAU,KAAK,MAA2B,CAAC,IAAkB,MAAS,EAAE,qBAAqB,EAAE,MAAM,EAAQ,GAAQ,CAAI,EAAE,CAAC,GAAG,EAAO,EAAK,UAAU,EAAK,CAAC,CAAC;EAC/J,CAAC,EAAE,kBAAkB,GAAG,EAAO,EAAK,QAAQ,CAAC;EAC7C,CAAC,EAAE,eAAe,GAAG,EAAO,EAAK,aAAa,CAAC;EAC/C,GAAI,IAAe,CAAC,CAAC,EAAE,kBAAkB,GAAG,EAAO,EAAK,gBAAgB,CAAC,CAAqB,IAAI,CAAC;CACrG;CACA,OAAO,EACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EAAI,WAAW,EAAG,0BAA0B,EAAM,WAAW,IAAI,mBAAmB,+BAA+B;EAChH,UAAA,EAAM,KAAK,CAAC,GAAO,GAAO,OACzB,kBAAC,OAAD;GAAiB,WAAU;GAAiD,aAAU;GAAc,OAAO;GAA3G,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IAAiC,UAAA;GAAU,CAAA,GACzD,kBAAC,MAAD;IAAI,WAAU;IAAsC,UAAA;GAAU,CAAA,CAC3D;EAHK,GAAA,CAGL,CACN;CACC,CAAA,GACH,IAAc,kBAAC,KAAD;EAAG,WAAU;EAAgC,MAAK;EAAU,UAAA,EAAE,qBAAqB;CAAK,CAAA,IAAI,IAC3G,EAAA,CAAA,CACJ;AACF"}

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export type { AdminNavigation, ContentKitAuth, StaffAccess, StaffArea } from './
 export { createTranslator, defaultMessages, defineMessages, resolveMessages, type MessageKey, type MessageVars, type Translator, type ContentKitUiMessageBundle, type ContentKitUiMessages, type ContentKitUiTranslate, } from './i18n/messages.js';
 export { useMessages } from './i18n/context.js';
 export { NotificationInbox, NotificationBell, type NotificationInboxProps, type NotificationBellProps } from './components/notifications.js';
+export { BillingNotification, isBillingNotification, billingNotificationAction, type BillingNotificationActions, type BillingNotificationAction } from './components/billing-notification.js';