@openrails/contentkit-ui 0.89.0 → 0.89.2

package/dist/components/content/filters.js

@@ -11,75 +11,55 @@ import { useContext as f, useId as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { cn as _ } from "cn";
 //#region src/components/content/filters.tsx
-function v(d) {
-	let v = e(), { t: y } = v, b = p(), x = f(n), S = u({
-		language: d.language,
-		client: d.client
-	}), C = c("filters.save", d.onError), w = (e) => /* @__PURE__ */ h(t, {
-		appearance: d.appearance,
-		className: _("grid gap-3 text-sm", d.className),
+function v(r) {
+	let d = e(), { t: v } = d, y = p(), b = f(n), x = u({
+		language: r.language,
+		client: r.client
+	}), S = c("filters.save", r.onError), C = (e) => /* @__PURE__ */ h(t, {
+		appearance: r.appearance,
+		className: _("grid gap-3 text-sm", r.className),
 		"data-ckui": "content-filters",
 		children: e
 	});
-	if (x?.viewer === null) return w(/* @__PURE__ */ h("p", {
+	if (b?.viewer === null) return C(/* @__PURE__ */ h("p", {
 		className: "text-muted-foreground",
-		children: y("contents.filtersSignedOut")
+		children: v("contents.filtersSignedOut")
 	}));
-	if (!S.filters) return S.error ? w(/* @__PURE__ */ h(o, { children: s(v, S.error) })) : w(/* @__PURE__ */ h(a, { className: "h-24 w-full" }));
-	let T = S.filters;
-	return !T.filters.length && d.includeDeleted === !1 ? null : w(/* @__PURE__ */ g(m, { children: [
-		T.filters.length ? /* @__PURE__ */ h("ul", {
+	if (!x.filters) return x.error ? C(/* @__PURE__ */ h(o, { children: s(d, x.error) })) : C(/* @__PURE__ */ h(a, { className: "h-24 w-full" }));
+	let w = x.filters;
+	return !w.filters.length && r.includeDeleted === !1 ? null : C(/* @__PURE__ */ g(m, { children: [
+		w.filters.length ? /* @__PURE__ */ h("ul", {
 			className: "grid divide-y divide-border rounded-lg border border-border",
-			children: T.filters.map((e) => /* @__PURE__ */ g("li", {
+			children: w.filters.map((e) => /* @__PURE__ */ g("li", {
 				className: "flex flex-wrap items-center gap-3 p-3",
 				"data-ckui": "content-filter",
 				"data-slug": e.group.slug,
 				"data-visible": e.visible,
-				children: [
-					/* @__PURE__ */ h(l, {
-						id: `${b}-${e.group.id}`,
-						checked: e.visible,
-						disabled: C.pending,
-						onCheckedChange: (t) => void C.run(() => S.setVisible(e.group.id, t))
-					}),
-					/* @__PURE__ */ h(i, {
-						htmlFor: `${b}-${e.group.id}`,
-						className: "min-w-0 flex-1",
-						children: e.label || e.group.name
-					}),
-					/* @__PURE__ */ h("span", {
-						className: "text-xs text-muted-foreground",
-						children: y(e.visible ? "contents.shown" : "contents.hidden")
-					}),
-					e.overridden && /* @__PURE__ */ h(r, {
-						size: "xs",
-						variant: "ghost",
-						disabled: C.pending,
-						onClick: () => void C.run(() => S.save({
-							filters: T.filters.filter((t) => t.overridden && t.group.id !== e.group.id).map((e) => ({
-								group_id: e.group.id,
-								visible: e.visible
-							})),
-							include_deleted: T.include_deleted
-						})),
-						children: y("contents.useDefault")
-					})
-				]
+				children: [/* @__PURE__ */ h(l, {
+					id: `${y}-${e.group.id}`,
+					checked: e.visible,
+					disabled: S.pending,
+					onCheckedChange: (t) => void S.run(() => x.setVisible(e.group.id, t))
+				}), /* @__PURE__ */ h(i, {
+					htmlFor: `${y}-${e.group.id}`,
+					className: "min-w-0 flex-1",
+					children: e.label || e.group.name
+				})]
 			}, e.group.id))
 		}) : null,
-		d.includeDeleted !== !1 && /* @__PURE__ */ g("div", {
+		r.includeDeleted !== !1 && /* @__PURE__ */ g("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ h(l, {
-				id: `${b}-deleted`,
-				checked: T.include_deleted,
-				disabled: C.pending,
-				onCheckedChange: (e) => void C.run(() => S.setIncludeDeleted(e))
+				id: `${y}-deleted`,
+				checked: w.include_deleted,
+				disabled: S.pending,
+				onCheckedChange: (e) => void S.run(() => x.setIncludeDeleted(e))
 			}), /* @__PURE__ */ h(i, {
-				htmlFor: `${b}-deleted`,
-				children: y("contents.includeDeleted")
+				htmlFor: `${y}-deleted`,
+				children: v("contents.includeDeleted")
 			})]
 		}),
-		/* @__PURE__ */ h(o, { error: C.error })
+		/* @__PURE__ */ h(o, { error: S.error })
 	] }));
 }
 function y({ query: n = {}, selected: i, onSelect: c, client: l, className: u, appearance: f }) {

package/dist/components/content/filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters.js","names":[],"sources":["../../../src/components/content/filters.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useId } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ReleaseDatesQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentFilters, useReleaseDates } from \"../../react/discovery.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { Switch } from \"#ckui/ui/switch\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\n\nexport interface ContentFilterSettingsProps {\n  /** Labels and group names in this language; default the provider's. */\n  language?: string;\n  /** Offer listing deleted content the reader holds. Default true. */\n  includeDeleted?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The signed-in reader's content filters: show or hide each configured group, and go back to its default. */\nexport function ContentFilterSettings(p: ContentFilterSettingsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const id = useId();\n  const ctx = useContext(ContentKitContext);\n  const f = useContentFilters({ language: p.language, client: p.client });\n  const save = useAction(\"filters.save\", p.onError);\n  const root = (children: React.ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-filters\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (ctx?.viewer === null) return root(<p className=\"text-muted-foreground\">{t(\"contents.filtersSignedOut\")}</p>);\n  if (!f.filters) {\n    if (f.error) return root(<ErrorLine>{contentError(m, f.error)}</ErrorLine>);\n    return root(<Skeleton className=\"h-24 w-full\" />);\n  }\n  const filters = f.filters;\n  if (!filters.filters.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {filters.filters.length ? (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {filters.filters.map((x) => (\n            <li key={x.group.id} className=\"flex flex-wrap items-center gap-3 p-3\" data-ckui=\"content-filter\" data-slug={x.group.slug} data-visible={x.visible}>\n              <Switch id={`${id}-${x.group.id}`} checked={x.visible} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setVisible(x.group.id, v))} />\n              <Label htmlFor={`${id}-${x.group.id}`} className=\"min-w-0 flex-1\">\n                {x.label || x.group.name}\n              </Label>\n              <span className=\"text-xs text-muted-foreground\">{t(x.visible ? \"contents.shown\" : \"contents.hidden\")}</span>\n              {x.overridden && (\n                <Button\n                  size=\"xs\"\n                  variant=\"ghost\"\n                  disabled={save.pending}\n                  onClick={() =>\n                    void save.run(() =>\n                      f.save({\n                        filters: filters.filters.filter((y) => y.overridden && y.group.id !== x.group.id).map((y) => ({ group_id: y.group.id, visible: y.visible })),\n                        include_deleted: filters.include_deleted,\n                      }),\n                    )\n                  }\n                >\n                  {t(\"contents.useDefault\")}\n                </Button>\n              )}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {p.includeDeleted !== false && (\n        <div className=\"flex items-center gap-3\">\n          <Switch id={`${id}-deleted`} checked={filters.include_deleted} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setIncludeDeleted(v))} />\n          <Label htmlFor={`${id}-deleted`}>{t(\"contents.includeDeleted\")}</Label>\n        </div>\n      )}\n      <ErrorLine error={save.error} />\n    </>,\n  );\n}\n\nexport interface ReleaseDateIndexProps {\n  /** Which contents count: the listing's filters. */\n  query?: ReleaseDatesQuery;\n  /** The bucket chosen (a day YYYY-MM-DD or month YYYY-MM): list with released_on set to it. */\n  selected?: string;\n  onSelect?: (date: string) => void;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The release date index: per month or day, newest first, how many contents and how many free. */\nexport function ReleaseDateIndex({ query = {}, selected, onSelect, client, className, appearance }: ReleaseDateIndexProps) {\n  const m = useMessages();\n  const { t } = m;\n  const dates = useReleaseDates(query, { client });\n  const label = (date: string) => {\n    const [y, mo, d] = date.split(\"-\").map(Number);\n    const at = new Date(Date.UTC(y!, (mo ?? 1) - 1, d ?? 1));\n    return new Intl.DateTimeFormat(m.language, d ? { dateStyle: \"medium\", timeZone: \"UTC\" } : { year: \"numeric\", month: \"long\", timeZone: \"UTC\" }).format(at);\n  };\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 text-sm\", className)} data-ckui=\"release-dates\">\n      {dates.loading && !dates.items.length ? (\n        <Skeleton className=\"h-24 w-full\" />\n      ) : dates.error && !dates.items.length ? (\n        <ErrorLine>{contentError(m, dates.error)}</ErrorLine>\n      ) : !dates.items.length ? (\n        <p className=\"text-muted-foreground\">{t(\"contents.noDates\")}</p>\n      ) : (\n        <ul className=\"grid gap-1\">\n          {dates.items.map((d) => (\n            <li key={d.date}>\n              <button\n                type=\"button\"\n                aria-pressed={selected === d.date}\n                className={cn(\"flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-start hover:bg-muted\", selected === d.date && \"bg-muted font-medium\")}\n                onClick={() => onSelect?.(d.date)}\n                data-ckui=\"release-date\"\n                data-date={d.date}\n              >\n                <span>{label(d.date)}</span>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {m.plural(\"contents.items\", d.count)}\n                  {d.free < d.count && ` · ${m.plural(\"contents.free\", d.free)}`}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      {dates.hasMore && (\n        <Button variant=\"outline\" size=\"sm\" className=\"justify-self-center\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n          {t(\"contents.loadMore\")}\n        </Button>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"filters.js","names":[],"sources":["../../../src/components/content/filters.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport { useContext, useId } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { ReleaseDatesQuery } from \"../../client/discovery.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentFilters, useReleaseDates } from \"../../react/discovery.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { Switch } from \"#ckui/ui/switch\";\nimport { contentError, ErrorLine, useAction } from \"../social/parts.js\";\n\nexport interface ContentFilterSettingsProps {\n  /** Labels and group names in this language; default the provider's. */\n  language?: string;\n  /** Offer listing deleted content the reader holds. Default true. */\n  includeDeleted?: boolean;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The signed-in reader's content filters: show or hide each configured group. */\nexport function ContentFilterSettings(p: ContentFilterSettingsProps) {\n  const m = useMessages();\n  const { t } = m;\n  const id = useId();\n  const ctx = useContext(ContentKitContext);\n  const f = useContentFilters({ language: p.language, client: p.client });\n  const save = useAction(\"filters.save\", p.onError);\n  const root = (children: React.ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-3 text-sm\", p.className)} data-ckui=\"content-filters\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (ctx?.viewer === null) return root(<p className=\"text-muted-foreground\">{t(\"contents.filtersSignedOut\")}</p>);\n  if (!f.filters) {\n    if (f.error) return root(<ErrorLine>{contentError(m, f.error)}</ErrorLine>);\n    return root(<Skeleton className=\"h-24 w-full\" />);\n  }\n  const filters = f.filters;\n  if (!filters.filters.length && p.includeDeleted === false) return null;\n  return root(\n    <>\n      {filters.filters.length ? (\n        <ul className=\"grid divide-y divide-border rounded-lg border border-border\">\n          {filters.filters.map((x) => (\n            <li key={x.group.id} className=\"flex flex-wrap items-center gap-3 p-3\" data-ckui=\"content-filter\" data-slug={x.group.slug} data-visible={x.visible}>\n              <Switch id={`${id}-${x.group.id}`} checked={x.visible} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setVisible(x.group.id, v))} />\n              <Label htmlFor={`${id}-${x.group.id}`} className=\"min-w-0 flex-1\">\n                {x.label || x.group.name}\n              </Label>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n      {p.includeDeleted !== false && (\n        <div className=\"flex items-center gap-3\">\n          <Switch id={`${id}-deleted`} checked={filters.include_deleted} disabled={save.pending} onCheckedChange={(v) => void save.run(() => f.setIncludeDeleted(v))} />\n          <Label htmlFor={`${id}-deleted`}>{t(\"contents.includeDeleted\")}</Label>\n        </div>\n      )}\n      <ErrorLine error={save.error} />\n    </>,\n  );\n}\n\nexport interface ReleaseDateIndexProps {\n  /** Which contents count: the listing's filters. */\n  query?: ReleaseDatesQuery;\n  /** The bucket chosen (a day YYYY-MM-DD or month YYYY-MM): list with released_on set to it. */\n  selected?: string;\n  onSelect?: (date: string) => void;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** The release date index: per month or day, newest first, how many contents and how many free. */\nexport function ReleaseDateIndex({ query = {}, selected, onSelect, client, className, appearance }: ReleaseDateIndexProps) {\n  const m = useMessages();\n  const { t } = m;\n  const dates = useReleaseDates(query, { client });\n  const label = (date: string) => {\n    const [y, mo, d] = date.split(\"-\").map(Number);\n    const at = new Date(Date.UTC(y!, (mo ?? 1) - 1, d ?? 1));\n    return new Intl.DateTimeFormat(m.language, d ? { dateStyle: \"medium\", timeZone: \"UTC\" } : { year: \"numeric\", month: \"long\", timeZone: \"UTC\" }).format(at);\n  };\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-2 text-sm\", className)} data-ckui=\"release-dates\">\n      {dates.loading && !dates.items.length ? (\n        <Skeleton className=\"h-24 w-full\" />\n      ) : dates.error && !dates.items.length ? (\n        <ErrorLine>{contentError(m, dates.error)}</ErrorLine>\n      ) : !dates.items.length ? (\n        <p className=\"text-muted-foreground\">{t(\"contents.noDates\")}</p>\n      ) : (\n        <ul className=\"grid gap-1\">\n          {dates.items.map((d) => (\n            <li key={d.date}>\n              <button\n                type=\"button\"\n                aria-pressed={selected === d.date}\n                className={cn(\"flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-start hover:bg-muted\", selected === d.date && \"bg-muted font-medium\")}\n                onClick={() => onSelect?.(d.date)}\n                data-ckui=\"release-date\"\n                data-date={d.date}\n              >\n                <span>{label(d.date)}</span>\n                <span className=\"text-xs text-muted-foreground tabular-nums\">\n                  {m.plural(\"contents.items\", d.count)}\n                  {d.free < d.count && ` · ${m.plural(\"contents.free\", d.free)}`}\n                </span>\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n      {dates.hasMore && (\n        <Button variant=\"outline\" size=\"sm\" className=\"justify-self-center\" disabled={dates.loadingMore} onClick={() => void dates.loadMore()}>\n          {t(\"contents.loadMore\")}\n        </Button>\n      )}\n    </ContentKitUiRoot>\n  );\n}\n"],"mappings":"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"}

package/dist/components/content/index.d.ts

@@ -1,6 +1,7 @@
 export { ContentCard, OwnerChip, PostCard, lockLabel, type ContentCardProps, type PostCardProps } from './card.js';
 export { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardListProps, type ContentRailProps, type LockedCards } from './grid.js';
 export { SearchBox, type SearchBoxProps } from './search.js';
+export { ReaderSettings, type ReaderSettingsProps } from './reader-settings.js';
 export { ContentFilterSettings, ReleaseDateIndex, type ContentFilterSettingsProps, type ReleaseDateIndexProps } from './filters.js';
 export { ContentListing, sortLabel, type ContentListingProps } from './listing.js';
 export { Paywall, VersionPicker, priceLabel, useVersionMenuItems, type PaywallProps, type VersionMenuOptions, type VersionPickerProps } from './paywall.js';

package/dist/components/content/reader-settings.d.ts

@@ -0,0 +1,19 @@
+import { ContentKitUiAppearance } from '../../appearance.js';
+import { ContentKitClient } from '../../client/client.js';
+import { ContentKitErrorHandler } from '../../react/context.js';
+export interface ReaderSettingsProps {
+    languages: readonly {
+        value: string;
+        label: string;
+    }[];
+    /** The current language, controlled by the host. */
+    language: string;
+    /** The host applies its own route and preference changes. */
+    onLanguageChange: (language: string) => void;
+    client?: ContentKitClient;
+    onError?: ContentKitErrorHandler;
+    className?: string;
+    appearance?: ContentKitUiAppearance;
+}
+/** One reader-settings dialog for language and the signed-in reader's filters. */
+export declare function ReaderSettings(p: ReaderSettingsProps): import('react').JSX.Element;

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

@@ -0,0 +1,95 @@
+import { useMessages as e } from "../../i18n/context.js";
+import { AppearanceContext as t, ContentKitUiRoot as n } from "../../scope.js";
+import { ContentKitContext as r } from "../../react/context.js";
+import { Button as i } from "../../ui/button.js";
+import { Dialog as a, DialogContent as o, DialogDescription as s, DialogHeader as c, DialogTitle as l, DialogTrigger as u } from "../../ui/dialog.js";
+import { Label as d } from "../../ui/label.js";
+import { Select as f, SelectContent as p, SelectItem as m, SelectTrigger as h, SelectValue as g } from "../../ui/select.js";
+import { useContentFilters as _ } from "../../react/discovery.js";
+import { ContentFilterSettings as v } from "./filters.js";
+import { useContext as y, useId as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Settings01Icon as C } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as w } from "@hugeicons/react";
+//#region src/components/content/reader-settings.tsx
+function T(_) {
+	let { t: v } = e(), T = b(), D = y(r)?.viewer, O = y(t), k = _.appearance ?? O;
+	return /* @__PURE__ */ x(t.Provider, {
+		value: k,
+		children: /* @__PURE__ */ x(n, {
+			className: _.className,
+			appearance: k,
+			"data-ckui": "reader-settings",
+			children: /* @__PURE__ */ S(a, { children: [/* @__PURE__ */ S(u, {
+				render: /* @__PURE__ */ x(i, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					"aria-label": v("readerSettings.title"),
+					"data-ckui": "reader-settings-trigger"
+				}),
+				children: [/* @__PURE__ */ x(w, {
+					icon: C,
+					strokeWidth: 2,
+					className: "size-4",
+					"aria-hidden": !0
+				}), /* @__PURE__ */ x("span", { children: _.language.toUpperCase() })]
+			}), /* @__PURE__ */ S(o, {
+				className: "max-h-[calc(100dvh-2rem)] overflow-y-auto",
+				children: [
+					/* @__PURE__ */ S(c, { children: [/* @__PURE__ */ x(l, { children: v("readerSettings.title") }), /* @__PURE__ */ x(s, {
+						className: "sr-only",
+						children: v("readerSettings.description")
+					})] }),
+					/* @__PURE__ */ S("div", {
+						className: "grid gap-3",
+						children: [/* @__PURE__ */ x(d, {
+							htmlFor: `${T}-language`,
+							children: v("listing.language")
+						}), /* @__PURE__ */ S(f, {
+							value: _.language,
+							onValueChange: (e) => {
+								e && e !== _.language && _.onLanguageChange(e);
+							},
+							children: [/* @__PURE__ */ x(h, {
+								id: `${T}-language`,
+								className: "w-full",
+								children: /* @__PURE__ */ x(g, { children: _.languages.find((e) => e.value === _.language)?.label ?? _.language })
+							}), /* @__PURE__ */ x(p, { children: _.languages.map((e) => /* @__PURE__ */ x(m, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						})]
+					}),
+					D != null && /* @__PURE__ */ x(E, {
+						language: _.language,
+						client: _.client,
+						onError: _.onError
+					})
+				]
+			})] })
+		})
+	});
+}
+function E(t) {
+	let { t: n } = e(), r = b(), { filters: i } = _({
+		language: t.language,
+		client: t.client
+	});
+	return i?.filters.length === 0 ? null : /* @__PURE__ */ S("section", {
+		"aria-labelledby": r,
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ x("h3", {
+			id: r,
+			className: "font-medium",
+			children: n("readerSettings.filters")
+		}), /* @__PURE__ */ x(v, {
+			...t,
+			includeDeleted: !1
+		})]
+	});
+}
+//#endregion
+export { T as ReaderSettings };
+
+//# sourceMappingURL=reader-settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reader-settings.js","names":[],"sources":["../../../src/components/content/reader-settings.tsx"],"sourcesContent":["import { Settings01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useContext, useId } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport { useMessages } from \"../../i18n/context.js\";\nimport { ContentKitContext, type ContentKitErrorHandler } from \"../../react/context.js\";\nimport { useContentFilters } from \"../../react/discovery.js\";\nimport { AppearanceContext, ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from \"#ckui/ui/dialog\";\nimport { Label } from \"#ckui/ui/label\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"#ckui/ui/select\";\nimport { ContentFilterSettings } from \"./filters.js\";\n\nexport interface ReaderSettingsProps {\n  languages: readonly { value: string; label: string }[];\n  /** The current language, controlled by the host. */\n  language: string;\n  /** The host applies its own route and preference changes. */\n  onLanguageChange: (language: string) => void;\n  client?: ContentKitClient;\n  onError?: ContentKitErrorHandler;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** One reader-settings dialog for language and the signed-in reader's filters. */\nexport function ReaderSettings(p: ReaderSettingsProps) {\n  const { t } = useMessages();\n  const id = useId();\n  const viewer = useContext(ContentKitContext)?.viewer;\n  const inheritedAppearance = useContext(AppearanceContext);\n  const appearance = p.appearance ?? inheritedAppearance;\n  return (\n    <AppearanceContext.Provider value={appearance}>\n      <ContentKitUiRoot className={p.className} appearance={appearance} data-ckui=\"reader-settings\">\n        <Dialog>\n          <DialogTrigger render={<Button type=\"button\" variant=\"ghost\" size=\"sm\" aria-label={t(\"readerSettings.title\")} data-ckui=\"reader-settings-trigger\" />}>\n            <HugeiconsIcon icon={Settings01Icon} strokeWidth={2} className=\"size-4\" aria-hidden />\n            <span>{p.language.toUpperCase()}</span>\n          </DialogTrigger>\n          <DialogContent className=\"max-h-[calc(100dvh-2rem)] overflow-y-auto\">\n            <DialogHeader>\n              <DialogTitle>{t(\"readerSettings.title\")}</DialogTitle>\n              <DialogDescription className=\"sr-only\">{t(\"readerSettings.description\")}</DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-3\">\n              <Label htmlFor={`${id}-language`}>{t(\"listing.language\")}</Label>\n              <Select value={p.language} onValueChange={(value) => { if (value && value !== p.language) p.onLanguageChange(value); }}>\n                <SelectTrigger id={`${id}-language`} className=\"w-full\">\n                  <SelectValue>{p.languages.find((item) => item.value === p.language)?.label ?? p.language}</SelectValue>\n                </SelectTrigger>\n                <SelectContent>\n                  {p.languages.map((item) => <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>)}\n                </SelectContent>\n              </Select>\n            </div>\n            {viewer != null && <ReaderFilters language={p.language} client={p.client} onError={p.onError} />}\n          </DialogContent>\n        </Dialog>\n      </ContentKitUiRoot>\n    </AppearanceContext.Provider>\n  );\n}\n\nfunction ReaderFilters(p: Pick<ReaderSettingsProps, \"language\" | \"client\" | \"onError\">) {\n  const { t } = useMessages();\n  const id = useId();\n  const { filters } = useContentFilters({ language: p.language, client: p.client });\n  if (filters?.filters.length === 0) return null;\n  return (\n    <section aria-labelledby={id} className=\"grid gap-3\">\n      <h3 id={id} className=\"font-medium\">{t(\"readerSettings.filters\")}</h3>\n      <ContentFilterSettings {...p} includeDeleted={false} />\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA4BA,SAAgB,EAAe,GAAwB;CACrD,IAAM,EAAE,SAAM,EAAY,GACpB,IAAK,EAAM,GACX,IAAS,EAAW,CAAiB,CAAC,EAAE,QACxC,IAAsB,EAAW,CAAiB,GAClD,IAAa,EAAE,cAAc;CACnC,OACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;EACjC,UAAA,kBAAC,GAAD;GAAkB,WAAW,EAAE;GAAuB;GAAY,aAAU;GAC1E,UAAA,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAe,QAAQ,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,cAAY,EAAE,sBAAsB;KAAG,aAAU;IAA2B,CAAA;IAAnJ,UAAA,CACE,kBAAC,GAAD;KAAe,MAAM;KAAgB,aAAa;KAAG,WAAU;KAAS,eAAA;IAAa,CAAA,GACrF,kBAAC,QAAD,EAAA,UAAO,EAAE,SAAS,YAAY,EAAQ,CAAA,CACzB;GACf,CAAA,GAAA,kBAAC,GAAD;IAAe,WAAU;IAAzB,UAAA;KACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAc,EAAE,sBAAsB,EAAe,CAAA,GACrD,kBAAC,GAAD;MAAmB,WAAU;MAAW,UAAA,EAAE,4BAA4B;KAAqB,CAAA,CAC/E,EAAA,CAAA;KACd,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,GAAD;OAAO,SAAS,GAAG,EAAG;OAAa,UAAA,EAAE,kBAAkB;MAAS,CAAA,GAChE,kBAAC,GAAD;OAAQ,OAAO,EAAE;OAAU,gBAAgB,MAAU;QAAE,AAAI,KAAS,MAAU,EAAE,YAAU,EAAE,iBAAiB,CAAK;OAAG;OAArH,UAAA,CACE,kBAAC,GAAD;QAAe,IAAI,GAAG,EAAG;QAAY,WAAU;QAC7C,UAAA,kBAAC,GAAD,EAAA,UAAc,EAAE,UAAU,MAAM,MAAS,EAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAsB,CAAA;OACzF,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAE,UAAU,KAAK,MAAS,kBAAC,GAAD;QAA6B,OAAO,EAAK;QAAQ,UAAA,EAAK;OAAkB,GAAvD,EAAK,KAAkD,CAAC,EACvF,CAAA,CACT;MACL,CAAA,CAAA;;KACJ,KAAU,QAAQ,kBAAC,GAAD;MAAe,UAAU,EAAE;MAAU,QAAQ,EAAE;MAAQ,SAAS,EAAE;KAAU,CAAA;IAClF;GACT,CAAA,CAAA,EAAA,CAAA;EACQ,CAAA;CACQ,CAAA;AAEhC;AAEA,SAAS,EAAc,GAAiE;CACtF,IAAM,EAAE,SAAM,EAAY,GACpB,IAAK,EAAM,GACX,EAAE,eAAY,EAAkB;EAAE,UAAU,EAAE;EAAU,QAAQ,EAAE;CAAO,CAAC;CAEhF,OADI,GAAS,QAAQ,WAAW,IAAU,OAExC,kBAAC,WAAD;EAAS,mBAAiB;EAAI,WAAU;EAAxC,UAAA,CACE,kBAAC,MAAD;GAAQ;GAAI,WAAU;GAAe,UAAA,EAAE,wBAAwB;EAAM,CAAA,GACrE,kBAAC,GAAD;GAAuB,GAAI;GAAG,gBAAgB;EAAQ,CAAA,CAC/C;;AAEb"}

package/dist/components/content/search.d.ts

@@ -16,6 +16,8 @@ export interface SearchBoxProps {
     labels?: Labels;
     /** The reader's recent searches while the box is empty. Default true. */
     recent?: boolean;
+    /** Header-wide dropdown under the nearest header/banner; default stays inline. */
+    presentation?: "inline" | "header";
     client?: ContentKitClient;
     className?: string;
     appearance?: ContentKitUiAppearance;