@openrails/contentkit-ui 0.98.0 → 0.98.3

package/README.md

@@ -51,7 +51,7 @@ const urls = createContentURLs({ routes: { video: "watch", gallery: "g" }, langu
   onChange={(change) => queryClient.invalidateQueries({ queryKey: ["media", change.ref.id] })}
   onError={(error, { operation }) => report(operation, error)}
 >
-  <ContentKitUiProvider appearance={{ theme: "inherit" }} language={lang} density={[2, 3]}>
+  <ContentKitUiProvider appearance={{ theme: "inherit" }} language={lang} density={[1, 3]}>
     <App />
   </ContentKitUiProvider>
 </ContentKitProvider>;
@@ -123,7 +123,7 @@ operation. This does not change the operation's result or its authentication.
 - **`ContentKitUiProvider`**: `appearance` (`theme`
   `light`/`dark`/`auto`/`inherit`, `variables` as `--ckui-*`), `language`
   (loads its built-in bundle), `messages` (bundles over it), `t` (host
-  translate hook), `density` (default `[2, 3]`), `inlinePreview` (default true).
+  translate hook), `density` (default `[1, 3]`), `inlinePreview` (default true).
 
 ## Hooks
 
@@ -319,11 +319,12 @@ Plain-text entities sit directly below the cover, followed by other metadata.
   metadata={{ languages: false, traits: ["colored"], duration: false }} />
 ```
 
-Set `grid={{ minCardWidth: 320, mobileColumns: 2 }}` for large covers in a fluid
+Set `grid={{ minCardWidth: 240, mobileColumns: 2, maxColumns: 10 }}` for covers in a fluid
 grid: two columns on small screens, then as many columns as the available
 width supports. This is supported by card grids, daily releases, Popular and
-`ContentRail` previews; an unconfigured rail remains horizontal. There is no
-desktop column ceiling, and other apps keep their existing layout by default.
+`ContentRail` previews; an unconfigured rail remains horizontal. `maxColumns`
+is optional: omit it for no desktop column ceiling. Other apps keep their
+existing layout by default.
 
 `ContentGrid` and `ContentListing` take `locked`: `show` (default) marks the
 cards the reader doesn't open, `hide` leaves them out, and `collapse` lists

package/dist/client/rendition.d.ts

@@ -5,7 +5,7 @@ export interface Rendition {
     h?: number;
     url: string;
 }
-/** Device-pixel density range renditions target: even 1× screens get 2×, 3× phones 3×. */
+/** Device-pixel density range renditions target: native density, up to 3×. */
 export type DensityRange = readonly [min: number, max: number];
 export declare const DEFAULT_DENSITY: DensityRange;
 /** devicePixelRatio clamped into range. */

package/dist/client/rendition.js

@@ -1,5 +1,5 @@
 //#region src/client/rendition.ts
-var e = [2, 3];
+var e = [1, 3];
 function t(t = e, n = typeof devicePixelRatio == "number" ? devicePixelRatio : 1) {
 	return Math.min(t[1], Math.max(t[0], n || 1));
 }

package/dist/client/rendition.js.map

@@ -1 +1 @@
-{"version":3,"file":"rendition.js","names":[],"sources":["../../src/client/rendition.ts"],"sourcesContent":["/** One rendered width of an image, e.g. a public preset's file at one of its widths. */\nexport interface Rendition {\n  w: number;\n  /** Its height when known (the preset's aspect). */\n  h?: number;\n  url: string;\n}\n\n/** Device-pixel density range renditions target: even 1× screens get 2×, 3× phones 3×. */\nexport type DensityRange = readonly [min: number, max: number];\n\nexport const DEFAULT_DENSITY: DensityRange = [2, 3];\n\n/** devicePixelRatio clamped into range. */\nexport function densityFor(range: DensityRange = DEFAULT_DENSITY, dpr = typeof devicePixelRatio === \"number\" ? devicePixelRatio : 1): number {\n  return Math.min(range[1], Math.max(range[0], dpr || 1));\n}\n\n/** Renditions with a URL and width, narrowest first. */\nexport function sortRenditions<T extends Rendition>(outputs: readonly T[] | null | undefined): T[] {\n  return [...(outputs ?? [])].filter((o) => o.url && o.w > 0).sort((a, b) => a.w - b.w);\n}\n\n/**\n * The narrowest rendition at least cssWidth × density device pixels wide\n * (the widest when none is), e.g. 400 CSS px at 2× picks ≥ 800 px.\n */\nexport function pickRendition<T extends Rendition>(outputs: readonly T[] | null | undefined, cssWidth: number, density = densityFor()): T | undefined {\n  const sorted = sortRenditions(outputs);\n  const want = cssWidth * density;\n  return sorted.find((o) => o.w >= want) ?? sorted.at(-1);\n}\n"],"mappings":";AAWA,IAAa,IAAgC,CAAC,GAAG,CAAC;AAGlD,SAAgB,EAAW,IAAsB,GAAiB,IAAM,OAAO,oBAAqB,WAAW,mBAAmB,GAAW;CAC3I,OAAO,KAAK,IAAI,EAAM,IAAI,KAAK,IAAI,EAAM,IAAI,KAAO,CAAC,CAAC;AACxD;AAGA,SAAgB,EAAoC,GAA+C;CACjG,OAAO,CAAC,GAAI,KAAW,CAAC,CAAE,CAAC,CAAC,QAAQ,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC;AACtF;AAMA,SAAgB,EAAmC,GAA0C,GAAkB,IAAU,EAAW,GAAkB;CACpJ,IAAM,IAAS,EAAe,CAAO,GAC/B,IAAO,IAAW;CACxB,OAAO,EAAO,MAAM,MAAM,EAAE,KAAK,CAAI,KAAK,EAAO,GAAG,EAAE;AACxD"}
+{"version":3,"file":"rendition.js","names":[],"sources":["../../src/client/rendition.ts"],"sourcesContent":["/** One rendered width of an image, e.g. a public preset's file at one of its widths. */\nexport interface Rendition {\n  w: number;\n  /** Its height when known (the preset's aspect). */\n  h?: number;\n  url: string;\n}\n\n/** Device-pixel density range renditions target: native density, up to 3×. */\nexport type DensityRange = readonly [min: number, max: number];\n\nexport const DEFAULT_DENSITY: DensityRange = [1, 3];\n\n/** devicePixelRatio clamped into range. */\nexport function densityFor(range: DensityRange = DEFAULT_DENSITY, dpr = typeof devicePixelRatio === \"number\" ? devicePixelRatio : 1): number {\n  return Math.min(range[1], Math.max(range[0], dpr || 1));\n}\n\n/** Renditions with a URL and width, narrowest first. */\nexport function sortRenditions<T extends Rendition>(outputs: readonly T[] | null | undefined): T[] {\n  return [...(outputs ?? [])].filter((o) => o.url && o.w > 0).sort((a, b) => a.w - b.w);\n}\n\n/**\n * The narrowest rendition at least cssWidth × density device pixels wide\n * (the widest when none is), e.g. 400 CSS px at 2× picks ≥ 800 px.\n */\nexport function pickRendition<T extends Rendition>(outputs: readonly T[] | null | undefined, cssWidth: number, density = densityFor()): T | undefined {\n  const sorted = sortRenditions(outputs);\n  const want = cssWidth * density;\n  return sorted.find((o) => o.w >= want) ?? sorted.at(-1);\n}\n"],"mappings":";AAWA,IAAa,IAAgC,CAAC,GAAG,CAAC;AAGlD,SAAgB,EAAW,IAAsB,GAAiB,IAAM,OAAO,oBAAqB,WAAW,mBAAmB,GAAW;CAC3I,OAAO,KAAK,IAAI,EAAM,IAAI,KAAK,IAAI,EAAM,IAAI,KAAO,CAAC,CAAC;AACxD;AAGA,SAAgB,EAAoC,GAA+C;CACjG,OAAO,CAAC,GAAI,KAAW,CAAC,CAAE,CAAC,CAAC,QAAQ,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC;AACtF;AAMA,SAAgB,EAAmC,GAA0C,GAAkB,IAAU,EAAW,GAAkB;CACpJ,IAAM,IAAS,EAAe,CAAO,GAC/B,IAAO,IAAW;CACxB,OAAO,EAAO,MAAM,MAAM,EAAE,KAAK,CAAI,KAAK,EAAO,GAAG,EAAE;AACxD"}

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

@@ -1,14 +1,17 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Card, CardAccess, Chip as EntityChip } from '../../client/generated/wire.js';
+import { ContentKitClient } from '../../client/client.js';
 import { Translator } from '../../i18n/messages.js';
 import { GroupLike, Labels } from '../groups/parts.js';
 export interface ContentCardProps {
     card: Card;
+    /** Overrides the provider's client for this card's public media configuration. */
+    client?: ContentKitClient;
     /** The card's link; default its canonical path. */
     href?: (card: Card) => string | undefined;
     /** Before the card's link is followed: a click signal. */
     onOpen?: (card: Card) => void;
-    /** Cover shape: "portrait" (3:4, readers) or "landscape" (16:9, players). Default portrait. */
+    /** Fallback cover shape when the server declares no preset aspect. Default portrait (3:4). */
     shape?: "portrait" | "landscape";
     /** A CSS aspect ratio overriding shape, such as "182 / 260". */
     aspectRatio?: CSSProperties["aspectRatio"];
@@ -24,6 +27,8 @@ export interface ContentCardProps {
     filterEntity?: (entity: EntityChip, kind: string) => boolean;
     /** Bordered chips (default) or plain linked text. */
     entityStyle?: "chips" | "text";
+    /** One inline list (default), or a separate row for each group kind. */
+    entityLayout?: "inline" | "rows";
     /** Metadata fields to show; omitted fields keep their defaults. */
     metadata?: CardMetadata;
     /** Show like and favorite totals. Default true. */
@@ -52,7 +57,7 @@ export interface CardMetadata {
 /** Why a card is locked, in words (its price when it is on sale); null when it opens. */
 export declare function lockLabel(m: Translator, a: CardAccess, tiers?: readonly string[], labels?: Labels): string | null;
 /** One content in a listing: cover (a video the reader opens previews over it on hover), title, version, groups, counts, the reader's progress and why it is locked; what its kind's locked view hides is absent. */
-export declare function ContentCard({ card, href, onOpen, shape, aspectRatio, titlePosition, loadMedia, groupKinds, chips, filterEntity, entityStyle, metadata, showCounts, tiers, labels, owner, ownerHref, decorate, children, className }: ContentCardProps): import('react').JSX.Element;
+export declare function ContentCard({ card, client, href, onOpen, shape, aspectRatio, titlePosition, loadMedia, groupKinds, chips, filterEntity, entityStyle, entityLayout, metadata, showCounts, tiers, labels, owner, ownerHref, decorate, children, className }: ContentCardProps): import('react').JSX.Element;
 /** The group that owns a content (a channel): its avatar and name, linking to its page. */
 export declare function OwnerChip({ group, href, className, loadMedia }: {
     group: GroupLike;
@@ -60,7 +65,7 @@ export declare function OwnerChip({ group, href, className, loadMedia }: {
     className?: string;
     loadMedia?: boolean;
 }): import('react').JSX.Element;
-export interface PostCardProps extends Omit<ContentCardProps, "shape" | "aspectRatio" | "titlePosition" | "chips" | "groupKinds" | "filterEntity" | "entityStyle" | "metadata"> {
+export interface PostCardProps extends Omit<ContentCardProps, "shape" | "aspectRatio" | "titlePosition" | "chips" | "groupKinds" | "filterEntity" | "entityStyle" | "entityLayout" | "metadata"> {
     /** Above the title: the post's channel or author; default its owner group's chip. */
     byline?: ReactNode;
 }