@keepkit/ui 0.13.0 → 0.14.0

package/README.md

@@ -56,8 +56,9 @@ function SavedArticles() {
 
 `keep.Collection`は検索、ソート、ページング、loading / empty / error、ARIA live通知を標準で提供します。検索は既定で300msデバウンスされます。`features={{ tagFilter: true, bulkActions: true }}`でタグフィルターと一括操作も有効にできます。個別の`KeepList`、`KeepSearchInput`、`KeepSortSelect`、`KeepPagination`、`KeepItemCheckbox`、`KeepTagEditor`などは高度なレイアウト用に利用できます。`KeepBulkActions`はrender propsで操作UIを差し替えられ、`isAllSelected` / `toggleSelectAll`で表示中アイテムを一括操作できます。`KeepNoteEditor`は既定300msのデバウンス保存に対応し、`debounceMs={0}`でフォーム送信のみへ戻せます。通知領域だけを明示的に置く場合は`KeepAnnouncer`（`KeepAnnouncements`のalias）を使えます。
 `KeepItemCard`は`href`、`onOpen`、`linkTarget`、`linkComponent`に対応し、保存アイテムから詳細ページへ遷移できます。非公開・期限切れ等の`status`を持つアイテムは自動的にリンクを無効化します。`KeepBackup`はJSONのエクスポート、merge / replaceインポート、結果件数、容量エラー表示を提供します。
+外部URLの詳細リンクには`target="_blank"`と`rel="noreferrer"`が既定で補完され、利用できないカードには`aria-disabled="true"`と`data-item-status`が付与されます。同期競合ダイアログではローカルとリモートの更新日時・メモを並べて確認できます。
 
-v0.13.0では`KeepCollection urlSync layout="list" | "grid" | "compact"`、`KeepBulkActions selectionScope="page" | "query" | "all"`、`KeepUndo`を利用できます。`createNextPagesRouterAdapter`はNext.js Pages Router用の注入adapterです。`locale`は英語、日本語、韓国語、中国語簡体字・繁体字、タイ語、フランス語、スペイン語、ポルトガル語、イタリア語、ドイツ語、ロシア語、フィリピン語、ベトナム語、インドネシア語、マレー語の16言語に対応し、`labels`で上書きできます。認証付き同期は`createAuthenticatedSyncKit`から利用できます。
+v0.14.0では`KeepCollection urlSync layout="list" | "grid" | "compact"`、`KeepBulkActions selectionScope="page" | "query" | "all"`、`KeepUndo`を利用できます。`createNextPagesRouterAdapter`はNext.js Pages Router用の注入adapterです。`locale`は英語、日本語、韓国語、中国語簡体字・繁体字、タイ語、フランス語、スペイン語、ポルトガル語、イタリア語、ドイツ語、ロシア語、フィリピン語、ベトナム語、インドネシア語、マレー語の16言語に対応し、`labels`で上書きできます。認証付き同期は`createAuthenticatedSyncKit`から利用できます。
 Phase 4の状態UIとして`KeepItemStatusBadge`、`KeepStaleNotice`、`KeepPruneStaleButton`、`KeepSyncStatusBanner`、`KeepSyncRecoveryDialog`を利用できます。`import "@keepkit/ui/theme.css"`でテーマCSSを有効にできます。
 
 ### Tailwind／shadcnテーマ
@@ -142,8 +143,9 @@ function SavedArticles() {
 
 `keep.Collection` includes search, sorting, pagination, loading/empty/error states, and polite live announcements. Search is debounced by 300ms by default. Enable `features={{ tagFilter: true, bulkActions: true }}` for tag filtering and bulk operations. Use the individual `KeepList`, `KeepSearchInput`, `KeepSortSelect`, `KeepPagination`, `KeepItemCheckbox`, and `KeepTagEditor` primitives when you need a custom layout. `KeepBulkActions` supports render props and exposes `isAllSelected` / `toggleSelectAll` for visible-item selection. `KeepNoteEditor` auto-saves dirty notes after 300ms by default; set `debounceMs={0}` to use form submission only. Mount `KeepAnnouncer` (`KeepAnnouncements` alias) when you need the live region explicitly.
 `KeepItemCard` accepts `href`, `onOpen`, `linkTarget`, and `linkComponent` for detail-page navigation. Links are disabled for unavailable `status` values such as private or expired. `KeepBackup` provides JSON export, merge/replace import, result counts, and quota-error messaging.
+External detail URLs receive `target="_blank"` and `rel="noreferrer"` defaults. Unavailable cards expose `aria-disabled="true"` and normalized `data-item-status` values, and the sync recovery dialog compares local and remote updated dates and notes side by side.
 
-In v0.13.0, use `KeepCollection urlSync` with `layout="list" | "grid" | "compact"`, `KeepBulkActions selectionScope="page" | "query" | "all"`, and `KeepUndo`. `createNextPagesRouterAdapter` is the injected adapter for Next.js Pages Router. `locale` includes complete dictionaries for 16 built-in locales; `labels` overrides individual entries. Authenticated sync is available through `createAuthenticatedSyncKit`.
+In v0.14.0, use `KeepCollection urlSync` with `layout="list" | "grid" | "compact"`, `KeepBulkActions selectionScope="page" | "query" | "all"`, and `KeepUndo`. `createNextPagesRouterAdapter` is the injected adapter for Next.js Pages Router. `locale` includes complete dictionaries for 16 built-in locales; `labels` overrides individual entries. Authenticated sync is available through `createAuthenticatedSyncKit`.
 Phase 4 adds `KeepItemStatusBadge`, `KeepStaleNotice`, `KeepPruneStaleButton`, `KeepSyncStatusBanner`, and `KeepSyncRecoveryDialog` for unavailable items, sync failures, conflict resolution, and backup recovery. Import `@keepkit/ui/theme.css` or `@keepkit/ui/tailwind.css` for the opt-in theme layer.
 
 ### Tailwind and shadcn theme

package/dist/index.d.ts

@@ -211,9 +211,10 @@ type KeepItemCheckboxProps<TMeta = Record<string, unknown>> = Omit<InputHTMLAttr
 declare function KeepItemCheckbox<TMeta = Record<string, unknown>>({ item, checked, label, onCheckedChange, "aria-label": ariaLabel, ...props }: KeepItemCheckboxProps<TMeta>): react.JSX.Element;
 
 type KeepItemStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
-    status?: KeepItemStatus;
+    status?: KeepItemStatus | "restricted";
     label?: ReactNode;
 };
+type KeepDisplayStatus = "available" | "expired" | "removed" | "restricted";
 /** Displays the normalized availability state of a saved item. */
 declare function KeepItemStatusBadge({ status, label, className, ...props }: KeepItemStatusBadgeProps): react.JSX.Element;
 
@@ -221,8 +222,8 @@ type KeepLayoutProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
     layout?: KeepLayoutPreset;
     children?: ReactNode;
 };
-/** A CSS-free layout wrapper with responsive grid presets and data attributes for host styling. */
-declare function KeepLayout({ layout, children, style, ...props }: KeepLayoutProps): react.JSX.Element;
+/** A style-free layout wrapper with a stable preset attribute for host or theme CSS. */
+declare function KeepLayout({ layout, children, ...props }: KeepLayoutProps): react.JSX.Element;
 
 type KeepNoteEditorState<TMeta = Record<string, unknown>> = {
     item: KeepItem<TMeta>;
@@ -432,7 +433,7 @@ type KeepThemeProviderProps = {
 /** Scopes KeepKit tokens and opt-in component styles to one subtree. */
 declare function KeepThemeProvider({ children, theme, mode, density, radius, accentColor, highContrast, reducedMotion, variables, style, className, asChild, ...props }: KeepThemeProviderProps): react.JSX.Element;
 
-type KeepUiLabelKey = "save" | "saved" | "remove" | "loading" | "saving" | "syncing" | "error" | "allTags" | "tags" | "filterTags" | "note" | "saveNote" | "noItems" | "loadingItems" | "errorItems" | "search" | "sort" | "newest" | "oldest" | "savedNewest" | "savedOldest" | "updatedNewest" | "updatedOldest" | "previousPage" | "nextPage" | "pagination" | "page" | "selectItems" | "selectedCount" | "deleteSelected" | "tagsToApply" | "applyTags" | "savedMessage" | "removedMessage" | "undo" | "undoAvailable" | "selectionScope" | "currentPage" | "searchResults" | "allItems" | "statusAvailable" | "noteSavedMessage" | "exportData" | "importData" | "importMode" | "merge" | "replace" | "importedCount" | "failedCount" | "storageQuotaError" | "statusExpired" | "statusRemoved" | "statusDeleted" | "statusPrivate" | "statusUnknown" | "retry" | "removeFromList" | "pruneStale" | "retrySync" | "resolveSync" | "keepLocal" | "useServer" | "manualMerge" | "close" | "backupRecovery" | "backupRecoveryDescription" | "syncPending" | "syncSynced" | "syncConflict";
+type KeepUiLabelKey = "save" | "saved" | "remove" | "loading" | "saving" | "syncing" | "error" | "allTags" | "tags" | "filterTags" | "note" | "saveNote" | "noItems" | "loadingItems" | "errorItems" | "search" | "sort" | "newest" | "oldest" | "savedNewest" | "savedOldest" | "updatedNewest" | "updatedOldest" | "previousPage" | "nextPage" | "pagination" | "page" | "selectItems" | "selectedCount" | "deleteSelected" | "tagsToApply" | "applyTags" | "savedMessage" | "removedMessage" | "undo" | "undoAvailable" | "selectionScope" | "currentPage" | "searchResults" | "allItems" | "localVersion" | "remoteVersion" | "updatedAt" | "statusAvailable" | "noteSavedMessage" | "exportData" | "importData" | "importMode" | "merge" | "replace" | "importedCount" | "failedCount" | "storageQuotaError" | "statusExpired" | "statusRemoved" | "statusDeleted" | "statusPrivate" | "statusUnknown" | "retry" | "removeFromList" | "pruneStale" | "retrySync" | "resolveSync" | "keepLocal" | "useServer" | "manualMerge" | "close" | "backupRecovery" | "backupRecoveryDescription" | "syncPending" | "syncSynced" | "syncConflict";
 type KeepUiLabels = Partial<Record<KeepUiLabelKey, string>>;
 type KeepUiLocaleLabels = Record<KeepUiLabelKey, string>;
 
@@ -491,4 +492,4 @@ type KeepKit<TMeta = Record<string, unknown>> = {
 /** Create one typed application API for the core and standard UI layer. */
 declare function createKeepKit<TMeta = Record<string, unknown>>(options?: CreateKeepKitOptions<TMeta>): KeepKit<TMeta>;
 
-export { type CreateKeepKitOptions, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardLinkProps, type KeepItemCardProps, type KeepItemCardState, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStaleNotice, type KeepStaleNoticeProps, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepSyncRecoveryDialog, type KeepSyncRecoveryDialogProps, KeepSyncStatusBanner, type KeepSyncStatusBannerProps, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepThemeDensity, type KeepThemeMode, type KeepThemeName, KeepThemeProvider, type KeepThemeProviderProps, type KeepThemeRadius, type KeepThemeVariables, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, createKeepKit, createNextPagesRouterAdapter, getKeepLocaleLabels, isAllSelected, toggleSelectAll, useKeepUiLabels, useKeepUrlSync };
+export { type CreateKeepKitOptions, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, type KeepDisplayStatus, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardLinkProps, type KeepItemCardProps, type KeepItemCardState, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStaleNotice, type KeepStaleNoticeProps, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepSyncRecoveryDialog, type KeepSyncRecoveryDialogProps, KeepSyncStatusBanner, type KeepSyncStatusBannerProps, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepThemeDensity, type KeepThemeMode, type KeepThemeName, KeepThemeProvider, type KeepThemeProviderProps, type KeepThemeRadius, type KeepThemeVariables, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, createKeepKit, createNextPagesRouterAdapter, getKeepLocaleLabels, isAllSelected, toggleSelectAll, useKeepUiLabels, useKeepUrlSync };

package/dist/index.js

@@ -55,6 +55,9 @@ var DE_LABELS = {
   currentPage: "Aktuelle Seite",
   searchResults: "Aktuelle Suchergebnisse",
   allItems: "Alle gespeicherten Elemente",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Aktualisiert",
   statusAvailable: "Verf\xFCgbar",
   noteSavedMessage: "Notiz gespeichert.",
   exportData: "JSON exportieren",
@@ -128,6 +131,9 @@ var EN_LABELS = {
   currentPage: "Current page",
   searchResults: "Current search results",
   allItems: "All saved items",
+  localVersion: "Local",
+  remoteVersion: "Remote",
+  updatedAt: "Updated",
   statusAvailable: "Available",
   noteSavedMessage: "Note saved.",
   exportData: "Export JSON",
@@ -201,6 +207,9 @@ var ES_LABELS = {
   currentPage: "P\xE1gina actual",
   searchResults: "Resultados de b\xFAsqueda actuales",
   allItems: "Todos los elementos guardados",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Actualizado",
   statusAvailable: "Disponible",
   noteSavedMessage: "Nota guardada.",
   exportData: "Exportar JSON",
@@ -274,6 +283,9 @@ var FIL_LABELS = {
   currentPage: "Kasalukuyang pahina",
   searchResults: "Kasalukuyang resulta ng paghahanap",
   allItems: "Lahat ng naka-save na item",
+  localVersion: "Lokal",
+  remoteVersion: "Remote",
+  updatedAt: "Na-update",
   statusAvailable: "Available",
   noteSavedMessage: "Na-save ang tala.",
   exportData: "I-export ang JSON",
@@ -347,6 +359,9 @@ var FR_LABELS = {
   currentPage: "Page actuelle",
   searchResults: "R\xE9sultats de recherche actuels",
   allItems: "Tous les \xE9l\xE9ments enregistr\xE9s",
+  localVersion: "Local",
+  remoteVersion: "Distant",
+  updatedAt: "Mis \xE0 jour",
   statusAvailable: "Disponible",
   noteSavedMessage: "Note enregistr\xE9e.",
   exportData: "Exporter JSON",
@@ -420,6 +435,9 @@ var ID_LABELS = {
   currentPage: "Halaman saat ini",
   searchResults: "Hasil pencarian saat ini",
   allItems: "Semua item tersimpan",
+  localVersion: "Lokal",
+  remoteVersion: "Server",
+  updatedAt: "Diperbarui",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Catatan tersimpan.",
   exportData: "Ekspor JSON",
@@ -493,6 +511,9 @@ var IT_LABELS = {
   currentPage: "Pagina corrente",
   searchResults: "Risultati di ricerca correnti",
   allItems: "Tutti gli elementi salvati",
+  localVersion: "Locale",
+  remoteVersion: "Server",
+  updatedAt: "Aggiornato",
   statusAvailable: "Disponibile",
   noteSavedMessage: "Nota salvata.",
   exportData: "Esporta JSON",
@@ -566,6 +587,9 @@ var JA_LABELS = {
   currentPage: "\u8868\u793A\u4E2D\u306E\u30DA\u30FC\u30B8",
   searchResults: "\u73FE\u5728\u306E\u691C\u7D22\u7D50\u679C\u5168\u4F53",
   allItems: "\u3059\u3079\u3066\u306E\u4FDD\u5B58\u30A2\u30A4\u30C6\u30E0",
+  localVersion: "\u30ED\u30FC\u30AB\u30EB",
+  remoteVersion: "\u30EA\u30E2\u30FC\u30C8",
+  updatedAt: "\u66F4\u65B0\u65E5\u6642",
   statusAvailable: "\u5229\u7528\u53EF\u80FD",
   noteSavedMessage: "\u30E1\u30E2\u3092\u4FDD\u5B58\u3057\u307E\u3057\u305F\u3002",
   exportData: "JSON\u3092\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8",
@@ -639,6 +663,9 @@ var KO_LABELS = {
   currentPage: "\uD604\uC7AC \uD398\uC774\uC9C0",
   searchResults: "\uD604\uC7AC \uAC80\uC0C9 \uACB0\uACFC \uC804\uCCB4",
   allItems: "\uBAA8\uB4E0 \uC800\uC7A5 \uD56D\uBAA9",
+  localVersion: "\uB85C\uCEEC",
+  remoteVersion: "\uC6D0\uACA9",
+  updatedAt: "\uC5C5\uB370\uC774\uD2B8 \uC2DC\uAC04",
   statusAvailable: "\uC0AC\uC6A9 \uAC00\uB2A5",
   noteSavedMessage: "\uBA54\uBAA8\uB97C \uC800\uC7A5\uD588\uC2B5\uB2C8\uB2E4.",
   exportData: "JSON \uB0B4\uBCF4\uB0B4\uAE30",
@@ -712,6 +739,9 @@ var MS_LABELS = {
   currentPage: "Halaman semasa",
   searchResults: "Hasil carian semasa",
   allItems: "Semua item yang disimpan",
+  localVersion: "Tempatan",
+  remoteVersion: "Pelayan",
+  updatedAt: "Dikemas kini",
   statusAvailable: "Tersedia",
   noteSavedMessage: "Nota disimpan.",
   exportData: "Eksport JSON",
@@ -785,6 +815,9 @@ var PT_BR_LABELS = {
   currentPage: "P\xE1gina atual",
   searchResults: "Resultados da pesquisa atual",
   allItems: "Todos os itens salvos",
+  localVersion: "Local",
+  remoteVersion: "Servidor",
+  updatedAt: "Atualizado",
   statusAvailable: "Dispon\xEDvel",
   noteSavedMessage: "Nota salva.",
   exportData: "Exportar JSON",
@@ -858,6 +891,9 @@ var RU_LABELS = {
   currentPage: "\u0422\u0435\u043A\u0443\u0449\u0430\u044F \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
   searchResults: "\u0422\u0435\u043A\u0443\u0449\u0438\u0435 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u043F\u043E\u0438\u0441\u043A\u0430",
   allItems: "\u0412\u0441\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B",
+  localVersion: "\u041B\u043E\u043A\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  remoteVersion: "\u0421\u0435\u0440\u0432\u0435\u0440\u043D\u0430\u044F \u0432\u0435\u0440\u0441\u0438\u044F",
+  updatedAt: "\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043E",
   statusAvailable: "\u0414\u043E\u0441\u0442\u0443\u043F\u0435\u043D",
   noteSavedMessage: "\u0417\u0430\u043C\u0435\u0442\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0430.",
   exportData: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON",
@@ -931,6 +967,9 @@ var TH_LABELS = {
   currentPage: "\u0E2B\u0E19\u0E49\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   searchResults: "\u0E1C\u0E25\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19",
   allItems: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+  localVersion: "\u0E43\u0E19\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07",
+  remoteVersion: "\u0E23\u0E30\u0E22\u0E30\u0E44\u0E01\u0E25",
+  updatedAt: "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E40\u0E21\u0E37\u0E48\u0E2D",
   statusAvailable: "\u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19",
   noteSavedMessage: "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E22\u0E48\u0E2D\u0E41\u0E25\u0E49\u0E27",
   exportData: "\u0E2A\u0E48\u0E07\u0E2D\u0E2D\u0E01 JSON",
@@ -1004,6 +1043,9 @@ var VI_LABELS = {
   currentPage: "Trang hi\u1EC7n t\u1EA1i",
   searchResults: "K\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm hi\u1EC7n t\u1EA1i",
   allItems: "T\u1EA5t c\u1EA3 m\u1EE5c \u0111\xE3 l\u01B0u",
+  localVersion: "C\u1EE5c b\u1ED9",
+  remoteVersion: "M\xE1y ch\u1EE7",
+  updatedAt: "\u0110\xE3 c\u1EADp nh\u1EADt",
   statusAvailable: "Kh\u1EA3 d\u1EE5ng",
   noteSavedMessage: "\u0110\xE3 l\u01B0u ghi ch\xFA.",
   exportData: "Xu\u1EA5t JSON",
@@ -1077,6 +1119,9 @@ var ZH_HANS_LABELS = {
   currentPage: "\u5F53\u524D\u9875",
   searchResults: "\u5F53\u524D\u5168\u90E8\u641C\u7D22\u7ED3\u679C",
   allItems: "\u5168\u90E8\u5DF2\u4FDD\u5B58\u9879\u76EE",
+  localVersion: "\u672C\u5730",
+  remoteVersion: "\u8FDC\u7A0B",
+  updatedAt: "\u66F4\u65B0\u65F6\u95F4",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5907\u6CE8\u5DF2\u4FDD\u5B58\u3002",
   exportData: "\u5BFC\u51FAJSON",
@@ -1150,6 +1195,9 @@ var ZH_HANT_LABELS = {
   currentPage: "\u76EE\u524D\u9801\u9762",
   searchResults: "\u76EE\u524D\u5168\u90E8\u641C\u5C0B\u7D50\u679C",
   allItems: "\u6240\u6709\u5DF2\u5132\u5B58\u9805\u76EE",
+  localVersion: "\u672C\u6A5F",
+  remoteVersion: "\u9060\u7AEF",
+  updatedAt: "\u66F4\u65B0\u6642\u9593",
   statusAvailable: "\u53EF\u7528",
   noteSavedMessage: "\u5099\u8A3B\u5DF2\u5132\u5B58\u3002",
   exportData: "\u532F\u51FAJSON",
@@ -1661,9 +1709,19 @@ import { useState as useState3 } from "react";
 // src/KeepItemStatusBadge.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
-  const resolvedStatus = status === "available" ? "available" : status;
-  const statusLabel = useUiLabel(getStatusLabelKey(resolvedStatus));
-  return /* @__PURE__ */ jsx7("span", { ...props, className, "data-keepkit": "status-badge", "data-status": resolvedStatus, children: label ?? statusLabel });
+  const resolvedStatus = getDisplayStatus(status);
+  const statusLabel = useUiLabel(getStatusLabelKey(status));
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      ...props,
+      className,
+      "data-keepkit": "status-badge",
+      "data-status": status,
+      "data-item-status": resolvedStatus,
+      children: label ?? statusLabel
+    }
+  );
 }
 function getStatusLabelKey(status) {
   switch (status) {
@@ -1676,10 +1734,19 @@ function getStatusLabelKey(status) {
     case "deleted":
       return "statusDeleted";
     case "private":
+      return "statusPrivate";
     case "unknown":
-      return status === "private" ? "statusPrivate" : "statusUnknown";
+      return "statusUnknown";
+    case "restricted":
+      return "statusPrivate";
   }
 }
+function getDisplayStatus(status) {
+  if (status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
 
 // src/KeepStaleNotice.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1810,6 +1877,10 @@ function KeepItemCard({
   const imageProps = getImageProps?.(item, resolvedTitle);
   const href = typeof hrefOption === "function" ? hrefOption(item) : hrefOption;
   const isAvailable = item.status === void 0 || item.status === "available";
+  const displayStatus = getDisplayStatus2(item.status);
+  const isExternalLink = href ? isExternalHref(href) : false;
+  const resolvedLinkTarget = linkTargetAttribute ?? (isExternalLink ? "_blank" : void 0);
+  const resolvedLinkRel = linkRel ?? (isExternalLink ? "noreferrer" : void 0);
   const statusLabelKey = item.status && item.status !== "available" ? getStatusLabelKey2(item.status) : "statusUnknown";
   const unavailableLabel = useUiLabel(statusLabelKey);
   const tagsLabel = useUiLabel("tags");
@@ -1818,8 +1889,8 @@ function KeepItemCard({
     if (!href || !isAvailable) return content;
     const linkProps = {
       href,
-      target: linkTargetAttribute,
-      rel: linkRel,
+      target: resolvedLinkTarget,
+      rel: resolvedLinkRel,
       onClick: (event) => onOpen?.(item, event),
       children: content
     };
@@ -1835,7 +1906,7 @@ function KeepItemCard({
   }
   const body = render ? render(state) : typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
     imageProps ? renderImage?.({ ...imageProps, alt: imageAlt ?? imageProps.alt }, item) ?? (ImageComponent ? /* @__PURE__ */ jsx9(ImageComponent, { ...imageProps, alt: imageAlt ?? imageProps.alt }) : /* @__PURE__ */ jsx9("img", { ...imageProps, alt: imageAlt ?? imageProps.alt })) : null,
-    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? renderLink(resolvedTitle) : resolvedTitle }),
+    /* @__PURE__ */ jsx9("h3", { children: linkTarget === "title" ? isAvailable ? renderLink(resolvedTitle) : href ? /* @__PURE__ */ jsx9("span", { "aria-disabled": "true", "data-link-disabled": "true", children: resolvedTitle }) : resolvedTitle : resolvedTitle }),
     showSavedAt ? /* @__PURE__ */ jsxs5("div", { "data-card-meta": true, children: [
       /* @__PURE__ */ jsxs5("span", { children: [
         savedAtLabel,
@@ -1857,7 +1928,7 @@ function KeepItemCard({
     ) : null,
     !statusLabel ? /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => void handleRemove(), disabled: itemState.isMutating, children: removeLabel ?? removeActionLabel }) : null
   ] });
-  const linkedBody = linkTarget === "card" ? renderLink(body) : body;
+  const linkedBody = linkTarget === "card" && isAvailable ? renderLink(body) : body;
   return renderRoot(
     asChild,
     isValidElement2(children) ? children : void 0,
@@ -1866,8 +1937,10 @@ function KeepItemCard({
       className,
       "data-keepkit": "card",
       "aria-busy": itemState.isMutating || rootProps["aria-busy"],
+      "aria-disabled": rootProps["aria-disabled"] ?? (!isAvailable ? "true" : void 0),
       "data-state": itemState.error ? "error" : itemState.isSaved ? "saved" : "unsaved",
       "data-status": item.status ?? "available",
+      "data-item-status": displayStatus,
       "data-loading": itemState.isMutating ? "true" : void 0
     },
     linkedBody,
@@ -1888,6 +1961,15 @@ function getStatusLabelKey2(status) {
       return "statusUnknown";
   }
 }
+function getDisplayStatus2(status) {
+  if (status === void 0 || status === "available") return "available";
+  if (status === "expired") return "expired";
+  if (status === "removed") return "removed";
+  return "restricted";
+}
+function isExternalHref(href) {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href);
+}
 function formatSavedAt(timestamp) {
   return new Date(timestamp).toISOString().slice(0, 10);
 }
@@ -1936,6 +2018,7 @@ function KeepListContent({
       ...rootProps,
       className,
       "data-keepkit": "list",
+      "data-layout": layout,
       "aria-busy": state.isLoading || rootProps["aria-busy"],
       "data-state": getListState(state),
       "data-loading": state.isLoading ? "true" : void 0
@@ -1956,16 +2039,9 @@ function getListBody(state, options) {
   if (state.isHydrated && state.items.length === 0) return resolveContent(options.empty, state);
   if (typeof options.children === "function") return options.children(state);
   if (options.children !== void 0 && !isValidElement3(options.children)) return options.children;
-  return /* @__PURE__ */ jsx10(
-    "ul",
-    {
-      "data-layout": options.layout,
-      style: options.layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : options.layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" },
-      children: state.items.map(
-        (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx10("ul", { "data-layout": options.layout, children: state.items.map(
+    (item) => options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(KeepItemCard, { item, ...options.itemCardProps }) }, item.id)
+  ) });
 }
 
 // src/KeepTagFilter.tsx
@@ -2315,6 +2391,7 @@ function KeepCollectionContent({
       ...rootProps,
       className,
       "data-keepkit": "collection",
+      "data-layout": layout,
       "aria-busy": list.isLoading || list.isMutating || rootProps["aria-busy"],
       "data-state": getCollectionState(list),
       "data-loading": list.isLoading || list.isMutating ? "true" : void 0,
@@ -2387,9 +2464,8 @@ function getCollectionState(list) {
 
 // src/KeepLayout.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-function KeepLayout({ layout = "list", children, style, ...props }) {
-  const layoutStyle = layout === "grid" ? { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))" } : layout === "compact" ? { display: "grid", gap: "0.5rem", gridTemplateColumns: "repeat(auto-fit, minmax(12rem, 1fr))" } : { display: "flex", flexDirection: "column", gap: "1rem" };
-  return /* @__PURE__ */ jsx14("div", { ...props, style: { ...layoutStyle, ...style }, "data-keepkit": "layout", "data-layout": layout, children });
+function KeepLayout({ layout = "list", children, ...props }) {
+  return /* @__PURE__ */ jsx14("div", { ...props, "data-keepkit": "layout", "data-layout": layout, children });
 }
 
 // src/KeepNoteEditor.tsx
@@ -2541,6 +2617,10 @@ function KeepSyncRecoveryDialog({
   const keepLocalLabel = useUiLabel("keepLocal");
   const useServerLabel = useUiLabel("useServer");
   const manualMergeLabel = useUiLabel("manualMerge");
+  const localVersionLabel = useUiLabel("localVersion");
+  const remoteVersionLabel = useUiLabel("remoteVersion");
+  const updatedAtLabel = useUiLabel("updatedAt");
+  const noteLabel = useUiLabel("note");
   const backupRecoveryLabel = useUiLabel("backupRecovery");
   const backupRecoveryDescription = useUiLabel("backupRecoveryDescription");
   const errorLabel = useUiLabel("error");
@@ -2579,6 +2659,8 @@ function KeepSyncRecoveryDialog({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "keepkit-sync-recovery-title",
+      "aria-describedby": error ? "keepkit-sync-recovery-error" : void 0,
+      "aria-busy": busyId !== void 0,
       "data-keepkit": "sync-recovery",
       "data-state": conflictList.length > 0 ? "conflict" : "error",
       "data-loading": busyId !== void 0 ? "true" : void 0,
@@ -2592,6 +2674,28 @@ function KeepSyncRecoveryDialog({
           /* @__PURE__ */ jsx16("p", { children: conflictLabel }),
           conflictList.map((conflict) => /* @__PURE__ */ jsxs10("article", { "data-conflict-id": conflict.id, children: [
             /* @__PURE__ */ jsx16("h3", { children: getMetaTitle(conflict.operation.item?.meta) ?? conflict.id }),
+            /* @__PURE__ */ jsxs10("div", { "data-conflict-preview": true, children: [
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.operation.item,
+                  heading: localVersionLabel,
+                  updatedAtLabel,
+                  noteLabel,
+                  side: "local"
+                }
+              ),
+              /* @__PURE__ */ jsx16(
+                ConflictPreview,
+                {
+                  item: conflict.remote,
+                  heading: remoteVersionLabel,
+                  updatedAtLabel,
+                  noteLabel,
+                  side: "remote"
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxs10("div", { children: [
               /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "local"), disabled: busyId !== void 0, children: keepLocalLabel }),
               /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => void resolve(conflict, "remote"), disabled: busyId !== void 0, children: useServerLabel }),
@@ -2612,11 +2716,35 @@ function KeepSyncRecoveryDialog({
           /* @__PURE__ */ jsx16("p", { children: backupRecoveryDescription }),
           backup ?? (showBackupControls ? /* @__PURE__ */ jsx16(KeepBackup, {}) : null)
         ] }) : null,
-        error ? /* @__PURE__ */ jsx16("p", { role: "alert", children: error instanceof Error ? error.message : errorLabel }) : null
+        error ? /* @__PURE__ */ jsx16("p", { id: "keepkit-sync-recovery-error", role: "alert", "aria-live": "assertive", children: error instanceof Error ? error.message : errorLabel }) : null
       ]
     }
   );
 }
+function ConflictPreview({
+  item,
+  heading,
+  updatedAtLabel,
+  noteLabel,
+  side
+}) {
+  return /* @__PURE__ */ jsxs10("article", { "data-conflict-version": side, "aria-label": heading, children: [
+    /* @__PURE__ */ jsx16("h4", { children: heading }),
+    /* @__PURE__ */ jsxs10("dl", { children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: updatedAtLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item ? /* @__PURE__ */ jsx16("time", { dateTime: new Date(item.updatedAt).toISOString(), children: formatConflictDate(item.updatedAt) }) : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx16("dt", { children: noteLabel }),
+        /* @__PURE__ */ jsx16("dd", { children: item?.note || "\u2014" })
+      ] })
+    ] })
+  ] });
+}
+function formatConflictDate(timestamp) {
+  return new Date(timestamp).toISOString().slice(0, 10);
+}
 
 // src/KeepSyncStatusBanner.tsx
 import { useKeepContext as useKeepContext4 } from "@keepkit/core/react";