@openrails/contentkit-ui 0.98.4 → 0.98.5

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.
package/README.md CHANGED
@@ -319,17 +319,24 @@ Plain-text entities sit directly below the cover, followed by other metadata.
319
319
  metadata={{ languages: false, traits: ["colored"], duration: false }} />
320
320
  ```
321
321
 
322
- Set `grid={{ minCardWidth: 240, mobileColumns: 2, maxColumns: 10 }}` for covers in a fluid
323
- grid: two columns on small screens, then as many columns as the available
324
- width supports. This is supported by card grids, daily releases, Popular and
325
- `ContentRail` previews; an unconfigured rail remains horizontal. `maxColumns`
326
- is optional: omit it for no desktop column ceiling. Other apps keep their
327
- existing layout by default.
328
-
329
- `minCardWidth` also accepts a CSS length. For example,
330
- `grid={{ minCardWidth: "clamp(240px, calc((100% - 9rem) / 10), 360px)" }}`
331
- keeps the early narrow-screen columns, grows covers toward 360px, and then
332
- adds columns on ultrawide displays without a ceiling.
322
+ Card grids use **width-driven tiling**: preserve roughly the same apparent
323
+ card size as the container grows, adding or removing columns to use the
324
+ available space. The application supplies its card-width target; ContentKit
325
+ UI derives the column count. Cards may grow slightly to fill each row.
326
+
327
+ For example, `grid={{ minCardWidth: 280, mobileColumns: 2 }}` keeps two columns
328
+ on small screens and a stable 280 CSS-pixel minimum on desktop, with no column
329
+ ceiling. This shared behavior applies to card grids, daily releases, Popular
330
+ and `ContentRail` grid previews; an unconfigured rail remains horizontal.
331
+
332
+ Use a stable CSS-pixel width for ordinary listing cards. `maxColumns` is an
333
+ explicit opt-in for surfaces that intentionally cap their columns.
334
+ `minCardWidth` also accepts CSS lengths for application-specific layouts.
335
+
336
+ Custom page-thumbnail or media grids can use the same primitive: call
337
+ `cardGridLayout({ minCardWidth: 280, mobileColumns: 2 })` and apply its
338
+ `className` and `style` to a `ContentKitUiRoot`. This keeps their track widths,
339
+ gaps and responsive behavior identical to content-card lists.
333
340
 
334
341
  `ContentGrid` and `ContentListing` take `locked`: `show` (default) marks the
335
342
  cards the reader doesn't open, `hide` leaves them out, and `collapse` lists
@@ -1,5 +1,5 @@
1
1
  export { ContentCard, OwnerChip, PostCard, lockLabel, type CardMetadata, type ContentCardProps, type PostCardProps } from './card.js';
2
- export { CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardGridLayout, type CardListProps, type ContentRailProps, type LockedCards } from './grid.js';
2
+ export { cardGridLayout, CardGrid, ContentGrid, ContentHistory, ContentRail, SearchResults, type CardGridLayout, type CardListProps, type ContentRailProps, type LockedCards } from './grid.js';
3
3
  export { DailyReleases, type DailyReleasesProps } from './daily-releases.js';
4
4
  export { PopularContentGrid, type PopularContentGridProps } from './popular.js';
5
5
  export { SearchBox, type SearchBoxProps } from './search.js';
package/dist/index.js CHANGED
@@ -49,25 +49,25 @@ import { GroupBanner as ue, GroupImageEditor as de, MembershipBox as fe } from "
49
49
  import { GroupEditor as pe, GroupMergeDialog as me } from "./components/groups/editor.js";
50
50
  import { GroupMembers as he, MembershipEditor as ge } from "./components/groups/memberships.js";
51
51
  import { ContentCard as _e, OwnerChip as ve, PostCard as ye, lockLabel as be } from "./components/content/card.js";
52
- import { CardGrid as xe, ContentGrid as Se, ContentHistory as Ce, ContentRail as we, SearchResults as Te } from "./components/content/grid.js";
53
- import { DailyReleases as Ee } from "./components/content/daily-releases.js";
54
- import { PopularContentGrid as De } from "./components/content/popular.js";
55
- import { SearchBox as Oe } from "./components/content/search.js";
56
- import { ContentFilterSettings as ke, ReleaseDateIndex as Ae } from "./components/content/filters.js";
57
- import { ReaderSettings as je } from "./components/content/reader-settings.js";
58
- import { ContentListing as Me, sortLabel as Ne } from "./components/content/listing.js";
59
- import { ReaderManifestEditor as Pe } from "./components/admin/reader-manifest.js";
60
- import { MediaItemPanel as Fe, VideoMediaEditor as Ie, videoPaths as Le } from "./components/admin/media-item-panel.js";
61
- import { AccessEditor as Re, ContentDetailsEditor as ze, ContentSections as Be, SegmentsEditor as Ve, VersionCover as He, VersionsEditor as Ue, versionLabel as We } from "./components/content/editors.js";
62
- import { ReaderStats as Ge } from "./components/content/reader-stats.js";
63
- import { VersionDownloadButton as Ke } from "./components/content/download-button.js";
64
- import { ContentEditor as qe, ContentManager as Je, contentStatus as Ye, useContentManagerAccess as Xe } from "./components/admin/content-manager.js";
65
- import { GroupManager as Ze, useGroupManagerAccess as Qe } from "./components/admin/group-manager.js";
66
- import { PollManager as $e, pollState as et, usePollManagerAccess as tt } from "./components/admin/poll-manager.js";
67
- import { StatsDashboard as nt } from "./components/admin/stats-dashboard.js";
68
- import { ContentAdmin as rt } from "./components/admin/content-admin.js";
69
- import { UserCommentStanding as it, useUserCommentStandingAccess as at } from "./components/admin/user-comment-standing.js";
70
- import { UploadQueue as ot } from "./components/admin/upload-queue.js";
71
- import { NotificationBell as st, NotificationInbox as ct } from "./components/notifications.js";
72
- import { BillingNotification as lt, billingNotificationAction as ut, isBillingNotification as dt } from "./components/billing-notification.js";
73
- export { Re as AccessEditor, O as AvatarUpload, z as BanNotice, q as BannedWords, lt as BillingNotification, xe as CardGrid, B as CommentBanDialog, V as CommentBans, Y as CommentModeration, H as Comments, rt as ContentAdmin, _e as ContentCard, ze as ContentDetailsEditor, qe as ContentEditor, ke as ContentFilterSettings, Se as ContentGrid, Ce as ContentHistory, l as ContentKitUiProvider, c as ContentKitUiRoot, Me as ContentListing, Je as ContentManager, we as ContentRail, Be as ContentSections, k as CoverUpload, Ee as DailyReleases, e as DensityContext, u as EncodeProgress, U as FavoriteButton, Z as GroupAvatar, ue as GroupBanner, Q as GroupCover, ne as GroupDirectory, pe as GroupEditor, re as GroupHeader, de as GroupImageEditor, $ as GroupLink, Ze as GroupManager, he as GroupMembers, me as GroupMergeDialog, ee as GroupPicker, N as HoverPreview, J as IPBans, p as ImageCropDialog, P as LazyMount, j as MediaFolderEditor, E as MediaGallery, Fe as MediaItemPanel, F as MediaReadinessNotice, fe as MembershipBox, ge as MembershipEditor, I as NoAccess, st as NotificationBell, ct as NotificationInbox, le as OfferFields, ve as OwnerChip, L as Pager, ae as Paywall, G as Poll, K as PollEditor, $e as PollManager, De as PopularContentGrid, ye as PostCard, W as ReactionButtons, Pe as ReaderManifestEditor, je as ReaderSettings, Ge as ReaderStats, Ae as ReleaseDateIndex, t as RenditionImg, Oe as SearchBox, Te as SearchResults, Ve as SegmentsEditor, h as SlotEditError, g as SlotEditMenu, _ as SlotEditor, m as SlotImage, A as SortableList, C as SpriteFrame, nt as StatsDashboard, ot as UploadQueue, it as UserCommentStanding, He as VersionCover, Ke as VersionDownloadButton, oe as VersionPicker, Ue as VersionsEditor, Ie as VideoMediaEditor, D as VideoMiniPlayer, w as VideoPlayer, y as VideoPoster, b as VideoPosterPicker, ut as billingNotificationAction, Ye as contentStatus, r as createTranslator, i as defaultMessages, a as defineMessages, M as describeRules, d as encodeLabel, ie as formatAttribute, f as formatRemaining, x as formatTime, dt as isBillingNotification, te as labelOf, be as lockLabel, S as playerButtonClass, et as pollState, se as priceLabel, T as qualityLabel, o as resolveMessages, Ne as sortLabel, X as useCommentModerationAccess, R as useConfirm, Xe as useContentManagerAccess, Qe as useGroupManagerAccess, s as useMessages, tt as usePollManagerAccess, n as useRendition, v as useSlotEditor, at as useUserCommentStandingAccess, ce as useVersionMenuItems, We as versionLabel, Le as videoPaths };
52
+ import { CardGrid as xe, ContentGrid as Se, ContentHistory as Ce, ContentRail as we, SearchResults as Te, cardGridLayout as Ee } from "./components/content/grid.js";
53
+ import { DailyReleases as De } from "./components/content/daily-releases.js";
54
+ import { PopularContentGrid as Oe } from "./components/content/popular.js";
55
+ import { SearchBox as ke } from "./components/content/search.js";
56
+ import { ContentFilterSettings as Ae, ReleaseDateIndex as je } from "./components/content/filters.js";
57
+ import { ReaderSettings as Me } from "./components/content/reader-settings.js";
58
+ import { ContentListing as Ne, sortLabel as Pe } from "./components/content/listing.js";
59
+ import { ReaderManifestEditor as Fe } from "./components/admin/reader-manifest.js";
60
+ import { MediaItemPanel as Ie, VideoMediaEditor as Le, videoPaths as Re } from "./components/admin/media-item-panel.js";
61
+ import { AccessEditor as ze, ContentDetailsEditor as Be, ContentSections as Ve, SegmentsEditor as He, VersionCover as Ue, VersionsEditor as We, versionLabel as Ge } from "./components/content/editors.js";
62
+ import { ReaderStats as Ke } from "./components/content/reader-stats.js";
63
+ import { VersionDownloadButton as qe } from "./components/content/download-button.js";
64
+ import { ContentEditor as Je, ContentManager as Ye, contentStatus as Xe, useContentManagerAccess as Ze } from "./components/admin/content-manager.js";
65
+ import { GroupManager as Qe, useGroupManagerAccess as $e } from "./components/admin/group-manager.js";
66
+ import { PollManager as et, pollState as tt, usePollManagerAccess as nt } from "./components/admin/poll-manager.js";
67
+ import { StatsDashboard as rt } from "./components/admin/stats-dashboard.js";
68
+ import { ContentAdmin as it } from "./components/admin/content-admin.js";
69
+ import { UserCommentStanding as at, useUserCommentStandingAccess as ot } from "./components/admin/user-comment-standing.js";
70
+ import { UploadQueue as st } from "./components/admin/upload-queue.js";
71
+ import { NotificationBell as ct, NotificationInbox as lt } from "./components/notifications.js";
72
+ import { BillingNotification as ut, billingNotificationAction as dt, isBillingNotification as ft } from "./components/billing-notification.js";
73
+ export { ze as AccessEditor, O as AvatarUpload, z as BanNotice, q as BannedWords, ut as BillingNotification, xe as CardGrid, B as CommentBanDialog, V as CommentBans, Y as CommentModeration, H as Comments, it as ContentAdmin, _e as ContentCard, Be as ContentDetailsEditor, Je as ContentEditor, Ae as ContentFilterSettings, Se as ContentGrid, Ce as ContentHistory, l as ContentKitUiProvider, c as ContentKitUiRoot, Ne as ContentListing, Ye as ContentManager, we as ContentRail, Ve as ContentSections, k as CoverUpload, De as DailyReleases, e as DensityContext, u as EncodeProgress, U as FavoriteButton, Z as GroupAvatar, ue as GroupBanner, Q as GroupCover, ne as GroupDirectory, pe as GroupEditor, re as GroupHeader, de as GroupImageEditor, $ as GroupLink, Qe as GroupManager, he as GroupMembers, me as GroupMergeDialog, ee as GroupPicker, N as HoverPreview, J as IPBans, p as ImageCropDialog, P as LazyMount, j as MediaFolderEditor, E as MediaGallery, Ie as MediaItemPanel, F as MediaReadinessNotice, fe as MembershipBox, ge as MembershipEditor, I as NoAccess, ct as NotificationBell, lt as NotificationInbox, le as OfferFields, ve as OwnerChip, L as Pager, ae as Paywall, G as Poll, K as PollEditor, et as PollManager, Oe as PopularContentGrid, ye as PostCard, W as ReactionButtons, Fe as ReaderManifestEditor, Me as ReaderSettings, Ke as ReaderStats, je as ReleaseDateIndex, t as RenditionImg, ke as SearchBox, Te as SearchResults, He as SegmentsEditor, h as SlotEditError, g as SlotEditMenu, _ as SlotEditor, m as SlotImage, A as SortableList, C as SpriteFrame, rt as StatsDashboard, st as UploadQueue, at as UserCommentStanding, Ue as VersionCover, qe as VersionDownloadButton, oe as VersionPicker, We as VersionsEditor, Le as VideoMediaEditor, D as VideoMiniPlayer, w as VideoPlayer, y as VideoPoster, b as VideoPosterPicker, dt as billingNotificationAction, Ee as cardGridLayout, Xe as contentStatus, r as createTranslator, i as defaultMessages, a as defineMessages, M as describeRules, d as encodeLabel, ie as formatAttribute, f as formatRemaining, x as formatTime, ft as isBillingNotification, te as labelOf, be as lockLabel, S as playerButtonClass, tt as pollState, se as priceLabel, T as qualityLabel, o as resolveMessages, Pe as sortLabel, X as useCommentModerationAccess, R as useConfirm, Ze as useContentManagerAccess, $e as useGroupManagerAccess, s as useMessages, nt as usePollManagerAccess, n as useRendition, v as useSlotEditor, ot as useUserCommentStandingAccess, ce as useVersionMenuItems, Ge as versionLabel, Re as videoPaths };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openrails/contentkit-ui",
3
- "version": "0.98.4",
3
+ "version": "0.98.5",
4
4
  "description": "ContentKit in the browser: client, React hooks and styled components for media, uploads and content URLs.",
5
5
  "type": "module",
6
6
  "license": "MIT",