@openrails/contentkit-ui 0.72.0 → 0.74.0

package/dist/components/notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.js","names":[],"sources":["../../src/components/notifications.tsx"],"sourcesContent":["import { Popover } from \"@base-ui/react/popover\";\nimport { Notification01Icon, RefreshIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cn } from \"cn\";\nimport { useEffect, useId, useRef, useState, type ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../appearance.js\";\nimport type { ContentKitClient } from \"../client/client.js\";\nimport type { Item } from \"../client/generated/wire.js\";\nimport { useMessages } from \"../i18n/context.js\";\nimport { useErrorReporter, type ContentKitErrorHandler } from \"../react/context.js\";\nimport { useNotificationUnread, useNotifications, type UseNotificationsOptions } from \"../react/notifications.js\";\nimport { useContentScope } from \"../react/use-resource.js\";\nimport { ContentKitUiRoot, useScopeProps } from \"../scope.js\";\nimport { Badge } from \"#ckui/ui/badge\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { ErrorLine, RelativeTime, useAction } from \"./social/parts.js\";\n\nexport interface NotificationInboxProps {\n  /** Host-owned rendering for every kind, including unknown future kinds. */\n  renderItem: (item: Item) => ReactNode;\n  /** Domain actions/links; the inbox itself never executes a source's workflow. */\n  renderActions?: (item: Item) => ReactNode;\n  client?: ContentKitClient;\n  pageSize?: number;\n  initialFilter?: \"all\" | \"unread\" | \"archived\";\n  refreshInterval?: UseNotificationsOptions[\"refreshInterval\"];\n  onSignIn?: () => void;\n  onError?: ContentKitErrorHandler;\n  appearance?: ContentKitUiAppearance;\n  className?: string;\n}\n\n/** A user inbox with cursor pagination and independent local read state. */\nexport function NotificationInbox({ renderItem, renderActions, client, pageSize, initialFilter = \"all\", refreshInterval, onSignIn, onError, appearance, className }: NotificationInboxProps) {\n  const { t } = useMessages();\n  const heading = useId();\n  const [filter, setFilter] = useState(initialFilter);\n  const inbox = useNotifications({ client, pageSize, unread: filter === \"unread\", dismissed: filter === \"archived\", refreshInterval });\n  const { onSignIn: providerSignIn } = useContentScope(client);\n  const signIn = onSignIn ?? providerSignIn;\n  const filterButton = useRef<HTMLButtonElement>(null);\n  const report = useErrorReporter(onError);\n  useEffect(() => {\n    if (inbox.error) report(inbox.error, \"notifications.load\");\n  }, [inbox.error, report]);\n  return (\n    <ContentKitUiRoot appearance={appearance} className={cn(\"grid gap-4 text-sm\", className)} data-ckui=\"notification-inbox\" role=\"region\" aria-labelledby={heading}>\n      <header className=\"flex items-center justify-between gap-3\">\n        <h2 id={heading} className=\"text-base font-semibold\">{t(\"notifications.title\")}</h2>\n        {!inbox.signedOut && <Button size=\"icon-sm\" variant=\"ghost\" aria-label={t(\"notifications.refresh\")} disabled={inbox.loading} onClick={inbox.reload}><HugeiconsIcon icon={RefreshIcon} strokeWidth={2} /></Button>}\n      </header>\n      {inbox.signedOut ? (\n        <div className=\"grid justify-items-start gap-3 py-4 text-muted-foreground\">\n          <p>{t(\"notifications.signInHint\")}</p>\n          {signIn && <Button variant=\"outline\" onClick={signIn}>{t(\"notifications.signIn\")}</Button>}\n        </div>\n      ) : <>\n        <div className=\"flex gap-1\" role=\"group\" aria-label={t(\"notifications.filter\")}>\n          {([\"all\", \"unread\", \"archived\"] as const).map((value) => <Button key={value} ref={filter === value ? filterButton : undefined} size=\"sm\" variant={filter === value ? \"secondary\" : \"ghost\"} aria-pressed={filter === value} onClick={() => setFilter(value)}>{t(`notifications.${value}`)}</Button>)}\n        </div>\n        {inbox.error && <div className=\"grid justify-items-start gap-2\"><ErrorLine>{t(\"notifications.loadFailed\")}</ErrorLine><Button size=\"sm\" variant=\"outline\" onClick={inbox.reload}>{t(\"common.retry\")}</Button></div>}\n        {inbox.loading && !inbox.items.length ? <div role=\"status\" aria-label={t(\"notifications.loading\")} className=\"grid gap-3\"><Skeleton className=\"h-20 w-full\" /><Skeleton className=\"h-20 w-full\" /></div> : !inbox.items.length && !inbox.error ? <p role=\"status\" className=\"py-8 text-center text-muted-foreground\">{t(filter === \"unread\" ? \"notifications.emptyUnread\" : \"notifications.empty\")}</p> : (\n          <ul className=\"grid divide-y divide-border overflow-hidden rounded-lg border border-border\" aria-busy={inbox.loading}>\n            {inbox.items.map((item) => <NotificationRow key={item.id} item={item} renderItem={renderItem} renderActions={renderActions} onRead={async (id, read) => { const item = await inbox.setRead(id, read); if (filter === \"unread\" && read) filterButton.current?.focus(); return item; }} onDismiss={async (id, dismissed) => { const item = await inbox.setDismissed(id, dismissed); filterButton.current?.focus(); return item; }} onError={onError} />)}\n          </ul>\n        )}\n        {inbox.hasMore && <Button variant=\"outline\" disabled={inbox.loadingMore || inbox.loading} onClick={() => void inbox.loadMore()}>{t(inbox.loadingMore ? \"notifications.loading\" : \"notifications.loadMore\")}</Button>}\n      </>}\n    </ContentKitUiRoot>\n  );\n}\n\nfunction NotificationRow({ item, renderItem, renderActions, onRead, onDismiss, onError }: Pick<NotificationInboxProps, \"renderItem\" | \"renderActions\" | \"onError\"> & { item: Item; onRead: (id: string, read: boolean) => Promise<Item>; onDismiss: (id: string, dismissed: boolean) => Promise<Item> }) {\n  const { t } = useMessages();\n  const read = useAction(\"notifications.read\", onError);\n  const dismiss = useAction(\"notifications.dismiss\", onError);\n  const label = useId();\n  const status = item.status === \"open\" ? t(\"notifications.open\") : item.status === \"resolved\" ? t(\"notifications.resolved\") : item.status === \"dismissed\" ? t(\"notifications.dismissed\") : undefined;\n  return (\n    <li className={cn(\"grid gap-3 p-4\", !item.read_at && \"bg-primary/5\")} data-ckui=\"notification-item\" data-unread={!item.read_at}>\n      <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n        {!item.read_at && <Badge variant=\"secondary\">{t(\"notifications.unread\")}</Badge>}\n        {status && <Badge variant={item.status === \"open\" ? \"outline\" : \"secondary\"}>{status}</Badge>}\n        <RelativeTime at={item.created_at} />\n      </div>\n      <div id={label} className=\"min-w-0 break-words\">{renderItem(item)}</div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {renderActions?.(item)}\n        <Button size=\"sm\" variant=\"ghost\" aria-describedby={label} disabled={read.pending || dismiss.pending} onClick={() => void read.run(() => onRead(item.id, !item.read_at))}>{t(item.read_at ? \"notifications.markUnread\" : \"notifications.markRead\")}</Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-describedby={label} disabled={read.pending || dismiss.pending} onClick={() => void dismiss.run(() => onDismiss(item.id, !item.dismissed_at))}>{t(item.dismissed_at ? \"notifications.restore\" : \"notifications.dismiss\")}</Button>\n      </div>\n      <ErrorLine error={read.error ?? dismiss.error} />\n    </li>\n  );\n}\n\nexport interface NotificationBellProps extends NotificationInboxProps {\n  /** Unread indicator refresh. Default 30 seconds while the page is visible. */\n  unreadRefreshInterval?: UseNotificationsOptions[\"refreshInterval\"];\n}\n\n/** A keyboard-accessible inbox popover. Its dot means unread items exist, not a guessed count. */\nexport function NotificationBell({ appearance, className, unreadRefreshInterval, ...inbox }: NotificationBellProps) {\n  const { t } = useMessages();\n  const unread = useNotificationUnread({ client: inbox.client, refreshInterval: unreadRefreshInterval });\n  const scope = useScopeProps(appearance);\n  const report = useErrorReporter(inbox.onError);\n  useEffect(() => {\n    if (unread.error) report(unread.error, \"notifications.load\");\n  }, [unread.error, report]);\n  return (\n    <Popover.Root onOpenChange={(open) => { if (open) unread.reload(); }}>\n      <ContentKitUiRoot appearance={appearance} className={cn(\"inline-flex\", className)} data-ckui=\"notification-bell\">\n        <Popover.Trigger render={<Button variant=\"ghost\" size=\"icon\" />} aria-label={t(unread.unread ? \"notifications.unreadLabel\" : \"notifications.title\")} className=\"relative\">\n          <HugeiconsIcon icon={Notification01Icon} strokeWidth={2} />\n          {unread.unread && <span className=\"absolute right-1.5 top-1.5 size-2 rounded-full bg-primary ring-2 ring-background\" aria-hidden=\"true\" data-ckui=\"notification-unread\" />}\n        </Popover.Trigger>\n      </ContentKitUiRoot>\n      <Popover.Portal>\n        <Popover.Positioner {...scope} className={cn(scope.className, \"z-50\")} sideOffset={8} align=\"end\">\n          <Popover.Popup className=\"max-h-[min(80vh,40rem)] w-[min(26rem,calc(100vw-2rem))] overflow-auto rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none\" aria-label={t(\"notifications.title\")}>\n            <NotificationInbox {...inbox} appearance={appearance} />\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -23,7 +23,10 @@ export { UserCommentStanding, useUserCommentStandingAccess, type UserCommentStan
 export { PollManager, pollState, usePollManagerAccess, type PollManagerProps } from './components/admin/poll-manager.js';
 export { PostManager, postStatus, usePostManagerAccess, type PostEditorProps, type PostManagerProps, type PostStatus } from './components/admin/post-manager.js';
 export { TaxonomyManager, slugify, useTaxonomyManagerAccess, type TaxonomyKind, type TaxonomyManagerProps, type TaxonomyRelation, } from './components/admin/taxonomy-manager.js';
+export { MediaItemPanel, type MediaItemPanelProps } from './components/admin/media-item-panel.js';
+export { UploadQueue, type UploadQueueProps } from './components/admin/upload-queue.js';
 export { NoAccess, Pager, useConfirm, type AdminFlowProps, type AdminRouteProps, type ConfirmOptions, type ContentKitGuard } from './components/admin/shell.js';
 export type { AdminNavigation, ContentKitAuth, StaffAccess, StaffArea } from './react/admin.js';
 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';