@keepkit/ui 0.23.1 → 0.24.0

package/README.md

@@ -57,6 +57,16 @@ 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）を使えます。
+`KeepWorkspace`はこれらのプリミティブを一つにまとめ、`basic`、`standard`、`management`、`sync`のプリセットを提供します。`createKeepKit()`を利用する場合は同じ実装を`keep.Workspace`から型付きで利用できます。`modules`、`slots`、子コンポーネントごとのpropsで部分的に差し替えられます。
+
+```tsx
+const keep = createKeepKit<ArticleMeta>({ storage, locale: "ja" });
+
+<keep.Provider>
+  <keep.Workspace preset="sync" collectionProps={{ layout: "auto" }} />
+</keep.Provider>;
+```
+一覧の標準カードで必要な機能だけを有効化する場合は、`features={{ pin: true, archive: true, tags: false }}`を指定できます。`pin` / `archive` はカード操作ボタン、`tags` はカード内のタグ表示を切り替えます。タグフィルターは`tagFilter`、タグ編集は`KeepTagEditor`で個別に制御でき、`itemCardProps`の明示指定が`features`より優先されます。
 `KeepCollection`は検索語と選択タグを`KeepActiveFiltersSummary`のチップとして表示し、個別解除と「すべての条件をクリア」を提供します。`activeFilters`でこの領域を差し替えられます。標準の`KeepList` / `KeepCollection`は、全件0件の`empty-storage`と絞り込み結果0件の`empty-filtered`を区別し、後者では`onClearFilters`付きの解除ボタンを表示します。
 `KeepItemCard`は`href`、`onOpen`、`linkTarget`、`linkComponent`に対応し、保存アイテムから詳細ページへ遷移できます。非公開・期限切れ等の`status`を持つアイテムは自動的にリンクを無効化します。`KeepBackup`はJSONのエクスポート、merge / replaceインポート、結果件数、容量エラー表示を提供します。
 `KeepTourBar`（alias: `KeepNavigator`）は進行度、前へ・次へ、一覧へ戻る操作をURLまたはコールバックで提供します。前後ボタンには隣接アイテム名のプレビューが付き、`getItemTitle`で表示名を差し替えられます。`keyboardShortcuts`を指定するとJ/Kまたは]/[で巡回でき、`useKeepTourShortcuts`ではキーと動作を個別に差し替えられます。`KeepReorderableList`はドラッグ操作と矢印キーによる並び替えを提供し、ドラッグ中の挿入位置を表示します。
@@ -93,7 +103,7 @@ const onFeedback = useKeepToastFeedback(toast);
 <KeepKitProvider storage={storage} onFeedback={onFeedback}>{children}</KeepKitProvider>;
 ```
 
-v0.23.1ではTailwind CSS v4との統合、ホストテーマ変数との衝突回避、CSS cascade layer対応を追加しました。保存直後の`KeepSavePopover`自動編集、`KeepQuickEditorState.saveStatus`、`KeepItemCard.Save` / `KeepItemCard.Remove`、管理モード向け`KeepBulkActions`、通知からのコレクション再訪導線も引き続き利用できます。
+v0.24.0では`KeepWorkspace`と型付きの`keep.Workspace`を追加しました。Tailwind CSS v4との統合、ホストテーマ変数との衝突回避、CSS cascade layer対応も引き続き利用できます。保存直後の`KeepSavePopover`自動編集、`KeepQuickEditorState.saveStatus`、`KeepItemCard.Save` / `KeepItemCard.Remove`、管理モード向け`KeepBulkActions`、通知からのコレクション再訪導線も引き続き利用できます。
 Phase 4の状態UIとして`KeepItemStatusBadge`、`KeepStaleNotice`、`KeepPruneStaleButton`、`KeepSyncStatusBanner`、`KeepSyncRecoveryDialog`を利用できます。`import "@keepkit/ui/theme.css"`でテーマCSSを有効にできます。
 
 ### Tailwind／shadcnテーマ
@@ -184,6 +194,16 @@ 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.
+`KeepWorkspace` composes these primitives into `basic`, `standard`, `management`, and `sync` presets. `createKeepKit()` exposes the same implementation as a typed `keep.Workspace`. Override individual areas through `modules`, `slots`, and child-component props.
+
+```tsx
+const keep = createKeepKit<ArticleMeta>({ storage, locale: "en" });
+
+<keep.Provider>
+  <keep.Workspace preset="sync" collectionProps={{ layout: "auto" }} />
+</keep.Provider>;
+```
+Enable only the standard card features you need with `features={{ pin: true, archive: true, tags: false }}`. `pin` and `archive` toggle card action buttons, while `tags` controls tag display inside cards. Tag filtering remains independently controlled by `tagFilter`, tag editing by `KeepTagEditor`, and explicit `itemCardProps` values take precedence over `features`.
 `KeepCollection` renders the current search and tag filters as `KeepActiveFiltersSummary` chips with individual removal and a “Clear all filters” action. Replace that area with the `activeFilters` slot. Default `KeepList` / `KeepCollection` output distinguishes `empty-storage` from `empty-filtered`; the filtered state includes a reset button when `onClearFilters` is provided.
 
 The opt-in theme adds neutral borders, surfaces, shadows, focus treatment, and decorative action icons without changing accessible names. Target individual controls with `data-keep-action`, or override `--keep-icon-size`, `--keep-control-gap`, `--keep-shadow`, `--keep-success`, and `--keep-warning`. Consumers that omit the CSS keep the headless markup, and `KeepButton icons` continues to take precedence over the built-in icon.
@@ -217,7 +237,7 @@ const onFeedback = useKeepToastFeedback(toast);
 <KeepKitProvider storage={storage} onFeedback={onFeedback}>{children}</KeepKitProvider>;
 ```
 
-In v0.23.1, Tailwind CSS v4 integration, host-theme isolation, and cascade-layer support are included. `KeepSavePopover` post-save editing, `KeepQuickEditorState.saveStatus`, `KeepItemCard.Save` / `KeepItemCard.Remove`, management-mode `KeepBulkActions`, and notification-driven return to the collection remain available.
+v0.24.0 adds `KeepWorkspace` and the typed `keep.Workspace`. Tailwind CSS v4 integration, host-theme isolation, and cascade-layer support remain available. `KeepSavePopover` post-save editing, `KeepQuickEditorState.saveStatus`, `KeepItemCard.Save` / `KeepItemCard.Remove`, management-mode `KeepBulkActions`, and notification-driven return to the collection remain available.
 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

@@ -273,6 +273,8 @@ type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HT
     onRemoved?: (item: KeepItem<TMeta>) => void;
     onRetry?: (item: KeepItem<TMeta>) => void | Promise<void>;
     showSaveButton?: boolean;
+    showPinButton?: boolean;
+    showArchiveButton?: boolean;
     saveButtonLabels?: KeepButtonLabels;
     asChild?: boolean;
     href?: string | ((item: KeepItem<TMeta>) => string | undefined);
@@ -297,7 +299,7 @@ type KeepItemCardSkeletonProps = Omit<HTMLAttributes<HTMLElement>, "children"> &
     layout?: KeepLayoutPreset;
 };
 /** A low-dependency item presentation primitive with composable card parts. */
-declare function KeepItemCardRoot<TMeta = Record<string, unknown>>({ item, title, getTitle, getImageProps, imageComponent: ImageComponent, renderImage, renderTags, showTags, showSavedAt, collectionLabels, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, onRetry, showSaveButton, saveButtonLabels, asChild, href: hrefOption, onOpen, linkTarget, linkComponent: LinkComponent, linkTargetAttribute, linkRel, highlightQuery, className, ...rootProps }: KeepItemCardProps<TMeta>): react.JSX.Element;
+declare function KeepItemCardRoot<TMeta = Record<string, unknown>>({ item, title, getTitle, getImageProps, imageComponent: ImageComponent, renderImage, renderTags, showTags, showSavedAt, collectionLabels, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, onRetry, showSaveButton, showPinButton, showArchiveButton, saveButtonLabels, asChild, href: hrefOption, onOpen, linkTarget, linkComponent: LinkComponent, linkTargetAttribute, linkRel, highlightQuery, className, ...rootProps }: KeepItemCardProps<TMeta>): react.JSX.Element;
 declare function KeepItemCardMedia({ children, fallback, ...props }: KeepItemCardMediaProps): react.JSX.Element;
 declare function KeepItemCardContent({ children, ...props }: KeepItemCardContentProps): react.JSX.Element;
 declare function KeepItemCardTitle({ as, children, ...props }: KeepItemCardTitleProps): react.DetailedReactHTMLElement<{
@@ -641,7 +643,7 @@ type KeepListProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLEl
 /** A list primitive with built-in loading, empty, error, and removal states. */
 declare function KeepList<TMeta = Record<string, unknown>>(props: KeepListProps<TMeta>): react.JSX.Element;
 
-type KeepCollectionFeature = "search" | "sort" | "pagination" | "tagFilter" | "collectionFilter" | "bulkActions";
+type KeepCollectionFeature = "search" | "sort" | "pagination" | "tagFilter" | "collectionFilter" | "bulkActions" | "tags" | "pin" | "archive";
 type KeepLayoutPreset = "list" | "grid" | "compact" | "auto";
 type KeepCollectionProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
     query?: KeepListQuery<TMeta>;
@@ -1039,6 +1041,39 @@ type KeepSyncStatusBannerProps = Omit<HTMLAttributes<HTMLElement>, "children"> &
 /** Announces synchronization failures and exposes retry or conflict-recovery entry points. */
 declare function KeepSyncStatusBanner({ onRetry, onResolveConflicts, children, className, ...props }: KeepSyncStatusBannerProps): react.JSX.Element | null;
 
+type KeepWorkspacePreset = "basic" | "standard" | "management" | "sync";
+type KeepWorkspaceModule = "syncStatus" | "undo" | "recovery" | "backup" | "stalePrune";
+type KeepWorkspaceState = {
+    preset: KeepWorkspacePreset;
+    modules: Readonly<Record<KeepWorkspaceModule, boolean>>;
+    recoveryOpen: boolean;
+    setRecoveryOpen: (open: boolean) => void;
+};
+type KeepWorkspaceContent = ReactNode | RenderProp<KeepWorkspaceState>;
+type KeepWorkspaceSlots = {
+    before?: KeepWorkspaceContent;
+    syncStatus?: KeepWorkspaceContent;
+    collection?: KeepWorkspaceContent;
+    actions?: KeepWorkspaceContent;
+    undo?: KeepWorkspaceContent;
+    recovery?: KeepWorkspaceContent;
+    after?: KeepWorkspaceContent;
+};
+type KeepWorkspaceProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    preset?: KeepWorkspacePreset;
+    modules?: Partial<Record<KeepWorkspaceModule, boolean>>;
+    collectionProps?: KeepCollectionProps<TMeta>;
+    syncStatusProps?: KeepSyncStatusBannerProps;
+    recoveryProps?: KeepSyncRecoveryDialogProps<TMeta>;
+    backupProps?: KeepBackupProps<TMeta>;
+    undoProps?: KeepUndoProps;
+    stalePruneProps?: KeepPruneStaleButtonProps;
+    slots?: KeepWorkspaceSlots;
+    children?: KeepWorkspaceContent;
+};
+/** Composes the standard collection, management, and sync primitives into one customizable workspace. */
+declare function KeepWorkspace<TMeta = Record<string, unknown>>({ preset, modules, collectionProps, syncStatusProps, recoveryProps, backupProps, undoProps, stalePruneProps, slots, children, className, ...props }: KeepWorkspaceProps<TMeta>): react.JSX.Element;
+
 declare const keepThemeNames: readonly ["default", "ocean", "forest", "sunset", "lavender", "compact", "minimal", "rounded", "high-contrast", "dark"];
 type KeepThemeName = (typeof keepThemeNames)[number];
 type KeepThemeMode = "light" | "dark" | "system";
@@ -1096,6 +1131,7 @@ type KeepKit<TMeta = Record<string, unknown>> = {
     Button: ComponentType<KeepButtonProps<TMeta>>;
     Backup: ComponentType<KeepBackupProps<TMeta>>;
     Collection: ComponentType<KeepCollectionProps<TMeta>>;
+    Workspace: ComponentType<KeepWorkspaceProps<TMeta>>;
     useContext: () => ReturnType<typeof useKeepContext<TMeta>>;
     useItem: (item?: KeepItemInput<TMeta>) => ReturnType<typeof useKeepItem<TMeta>>;
     useList: (query?: KeepListQuery<TMeta>) => ReturnType<typeof useKeepList<TMeta>>;
@@ -1105,4 +1141,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, KeepActiveFiltersSummary, type KeepActiveFiltersSummaryProps, type KeepActiveFiltersSummaryState, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepArchiveButton, type KeepArchiveButtonProps, type KeepArchiveButtonState, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionControlProps, type KeepCollectionFeature, KeepCollectionFilter, type KeepCollectionOption, type KeepCollectionProps, KeepCollectionSelect, type KeepDisplayStatus, KeepEmptyState, type KeepEmptyStateProps, type KeepEmptyStateVariant, KeepHighlight, type KeepHighlightProps, type KeepImageProps, KeepItemCard, type KeepItemCardActionSlotProps, type KeepItemCardActionsProps, type KeepItemCardBadgeProps, type KeepItemCardContentProps, type KeepItemCardLinkProps, type KeepItemCardMediaProps, type KeepItemCardProps, type KeepItemCardRemoveProps, type KeepItemCardSaveProps, KeepItemCardSkeleton, type KeepItemCardSkeletonProps, type KeepItemCardState, type KeepItemCardTagsProps, type KeepItemCardTitleProps, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNavigator, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPinButton, type KeepPinButtonProps, type KeepPinButtonState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, KeepQuickEditor, type KeepQuickEditorProps, type KeepQuickEditorState, type KeepReorderableItemState, KeepReorderableList, type KeepReorderableListProps, KeepSavePopover, type KeepSavePopoverProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepShortcutHint, type KeepShortcutHintProps, 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 KeepToastFeedbackOptions, type KeepToastHandler, KeepTourBar, type KeepTourBarProps, type KeepTourShortcutsOptions, type KeepUiFeedbackEvent, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, chainedFunction, composeRefs, createKeepKit, createNextPagesRouterAdapter, createSlot, getKeepLocaleLabels, highlightText, isAllSelected, keepThemeNames, mergeProps, toggleSelectAll, useKeepQuickEditor, useKeepToastFeedback, useKeepTourShortcuts, useKeepUiLabels, useKeepUrlSync };
+export { type CreateKeepKitOptions, KeepActiveFiltersSummary, type KeepActiveFiltersSummaryProps, type KeepActiveFiltersSummaryState, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepArchiveButton, type KeepArchiveButtonProps, type KeepArchiveButtonState, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionControlProps, type KeepCollectionFeature, KeepCollectionFilter, type KeepCollectionOption, type KeepCollectionProps, KeepCollectionSelect, type KeepDisplayStatus, KeepEmptyState, type KeepEmptyStateProps, type KeepEmptyStateVariant, KeepHighlight, type KeepHighlightProps, type KeepImageProps, KeepItemCard, type KeepItemCardActionSlotProps, type KeepItemCardActionsProps, type KeepItemCardBadgeProps, type KeepItemCardContentProps, type KeepItemCardLinkProps, type KeepItemCardMediaProps, type KeepItemCardProps, type KeepItemCardRemoveProps, type KeepItemCardSaveProps, KeepItemCardSkeleton, type KeepItemCardSkeletonProps, type KeepItemCardState, type KeepItemCardTagsProps, type KeepItemCardTitleProps, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNavigator, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPinButton, type KeepPinButtonProps, type KeepPinButtonState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, KeepQuickEditor, type KeepQuickEditorProps, type KeepQuickEditorState, type KeepReorderableItemState, KeepReorderableList, type KeepReorderableListProps, KeepSavePopover, type KeepSavePopoverProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepShortcutHint, type KeepShortcutHintProps, 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 KeepToastFeedbackOptions, type KeepToastHandler, KeepTourBar, type KeepTourBarProps, type KeepTourShortcutsOptions, type KeepUiFeedbackEvent, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, KeepWorkspace, type KeepWorkspaceModule, type KeepWorkspacePreset, type KeepWorkspaceProps, type KeepWorkspaceSlots, type KeepWorkspaceState, type RenderProp, chainedFunction, composeRefs, createKeepKit, createNextPagesRouterAdapter, createSlot, getKeepLocaleLabels, highlightText, isAllSelected, keepThemeNames, mergeProps, toggleSelectAll, useKeepQuickEditor, useKeepToastFeedback, useKeepTourShortcuts, useKeepUiLabels, useKeepUrlSync };

package/dist/index.js

@@ -3521,6 +3521,9 @@ function useKeepCollection({
     tagFilter: false,
     collectionFilter: false,
     bulkActions: false,
+    tags: true,
+    pin: false,
+    archive: false,
     ...features
   };
   const [searchValue, setSearchValue] = useState9(query.search?.query ?? "");
@@ -3994,6 +3997,8 @@ function KeepItemCardRoot({
   onRemoved,
   onRetry,
   showSaveButton = true,
+  showPinButton = false,
+  showArchiveButton = false,
   saveButtonLabels,
   asChild = false,
   href: hrefOption,
@@ -4072,6 +4077,8 @@ function KeepItemCardRoot({
   const error = view.itemState.error ? /* @__PURE__ */ jsx16("p", { role: "alert", children: getErrorMessage3(view.itemState.error, view.labels.error) }) : null;
   const actions = view.statusLabel ? /* @__PURE__ */ jsx16(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs14(Fragment8, { children: [
     showSaveButton ? /* @__PURE__ */ jsx16(KeepItemCardSave, {}) : null,
+    showPinButton ? /* @__PURE__ */ jsx16(KeepItemCardPin, {}) : null,
+    showArchiveButton ? /* @__PURE__ */ jsx16(KeepItemCardArchive, {}) : null,
     /* @__PURE__ */ jsx16(KeepItemCardRemove, {})
   ] });
   const compoundValue = {
@@ -4494,6 +4501,12 @@ function KeepCollectionContent({
   ...rootProps
 }) {
   const view = useKeepCollection({ query, pageSize, urlSync, urlAdapter, features });
+  const resolvedItemCardProps = {
+    ...itemCardProps,
+    showTags: itemCardProps?.showTags ?? view.enabled.tags,
+    showPinButton: itemCardProps?.showPinButton ?? view.enabled.pin,
+    showArchiveButton: itemCardProps?.showArchiveButton ?? view.enabled.archive
+  };
   return /* @__PURE__ */ jsxs17(
     "section",
     {
@@ -4533,7 +4546,7 @@ function KeepCollectionContent({
           {
             query: view.resolvedQuery,
             renderItem,
-            itemCardProps,
+            itemCardProps: resolvedItemCardProps,
             layout,
             loading,
             renderLoading,
@@ -5532,9 +5545,128 @@ function KeepSyncStatusBanner({
   );
 }
 
+// src/features/workspace/hooks/useKeepWorkspace.ts
+import { useCallback as useCallback9, useState as useState17 } from "react";
+var PRESET_MODULES = {
+  basic: { syncStatus: false, undo: false, recovery: false, backup: false, stalePrune: false },
+  standard: { syncStatus: false, undo: true, recovery: false, backup: false, stalePrune: false },
+  management: { syncStatus: false, undo: true, recovery: false, backup: true, stalePrune: true },
+  sync: { syncStatus: true, undo: true, recovery: true, backup: false, stalePrune: false }
+};
+var PRESET_COLLECTION_FEATURES = {
+  basic: { search: false, sort: false, pagination: false },
+  standard: {},
+  management: { tagFilter: true, collectionFilter: true, bulkActions: true, pin: true, archive: true },
+  sync: {}
+};
+function useKeepWorkspace({
+  preset,
+  modules,
+  recoveryOpen,
+  onRecoveryOpenChange,
+  onResolveConflicts
+}) {
+  const [internalRecoveryOpen, setInternalRecoveryOpen] = useState17(false);
+  const resolvedModules = { ...PRESET_MODULES[preset], ...modules };
+  const setRecoveryOpen = useCallback9(
+    (open) => {
+      if (recoveryOpen === void 0) setInternalRecoveryOpen(open);
+      onRecoveryOpenChange?.(open);
+    },
+    [onRecoveryOpenChange, recoveryOpen]
+  );
+  const openRecovery = useCallback9(() => {
+    onResolveConflicts?.();
+    setRecoveryOpen(true);
+  }, [onResolveConflicts, setRecoveryOpen]);
+  return {
+    preset,
+    modules: resolvedModules,
+    collectionFeatures: PRESET_COLLECTION_FEATURES[preset],
+    recoveryOpen: recoveryOpen ?? internalRecoveryOpen,
+    setRecoveryOpen,
+    openRecovery
+  };
+}
+
+// src/features/workspace/KeepWorkspace.tsx
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+function KeepWorkspace({
+  preset = "standard",
+  modules,
+  collectionProps,
+  syncStatusProps,
+  recoveryProps,
+  backupProps,
+  undoProps,
+  stalePruneProps,
+  slots,
+  children,
+  className,
+  ...props
+}) {
+  const view = useKeepWorkspace({
+    preset,
+    modules,
+    recoveryOpen: recoveryProps?.open,
+    onRecoveryOpenChange: recoveryProps?.onOpenChange,
+    onResolveConflicts: syncStatusProps?.onResolveConflicts
+  });
+  const state = {
+    preset: view.preset,
+    modules: view.modules,
+    recoveryOpen: view.recoveryOpen,
+    setRecoveryOpen: view.setRecoveryOpen
+  };
+  const resolvedCollectionProps = {
+    ...collectionProps,
+    features: { ...view.collectionFeatures, ...collectionProps?.features }
+  };
+  return /* @__PURE__ */ jsxs24("section", { ...props, className, "data-keepkit": "workspace", "data-preset": preset, children: [
+    resolveOptionalSlot(slots?.before, state),
+    view.modules.syncStatus ? resolveSlot(
+      slots?.syncStatus,
+      /* @__PURE__ */ jsx29(KeepSyncStatusBanner, { ...syncStatusProps, onResolveConflicts: view.openRecovery }),
+      state
+    ) : null,
+    resolveSlot(slots?.collection, /* @__PURE__ */ jsx29(KeepCollection, { ...resolvedCollectionProps }), state),
+    view.modules.backup || view.modules.stalePrune ? resolveSlot(
+      slots?.actions,
+      /* @__PURE__ */ jsxs24("div", { "data-keepkit": "workspace-actions", children: [
+        view.modules.stalePrune ? /* @__PURE__ */ jsx29(KeepPruneStaleButton, { ...stalePruneProps }) : null,
+        view.modules.backup ? /* @__PURE__ */ jsx29(KeepBackup, { ...backupProps }) : null
+      ] }),
+      state
+    ) : null,
+    view.modules.undo ? resolveSlot(slots?.undo, /* @__PURE__ */ jsx29(KeepUndo, { ...undoProps }), state) : null,
+    view.modules.recovery ? resolveSlot(
+      slots?.recovery,
+      /* @__PURE__ */ jsx29(
+        KeepSyncRecoveryDialog,
+        {
+          ...recoveryProps,
+          open: view.recoveryOpen,
+          onOpenChange: view.setRecoveryOpen
+        }
+      ),
+      state
+    ) : null,
+    resolveOptionalSlot(children, state),
+    resolveOptionalSlot(slots?.after, state)
+  ] });
+}
+function resolveSlot(slot, fallback, state) {
+  if (slot === void 0) return fallback;
+  return resolveContent(slot, state);
+}
+function resolveOptionalSlot(slot, state) {
+  if (slot === void 0) return null;
+  return resolveContent(slot, state);
+}
+
 // src/foundation/theme.tsx
 import { isValidElement as isValidElement9 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var keepThemeNames = [
   "default",
   "ocean",
@@ -5593,7 +5725,7 @@ function KeepThemeProvider({
       throw new Error("KeepThemeProvider with asChild requires a single React element child.");
     return createSlot(children, rootProps);
   }
-  return /* @__PURE__ */ jsx29("div", { ...rootProps, children });
+  return /* @__PURE__ */ jsx30("div", { ...rootProps, children });
 }
 
 // src/index.tsx
@@ -5617,7 +5749,7 @@ import {
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter
 } from "@keepkit/core/storage";
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function KeepKitProvider({
   labels,
   locale,
@@ -5637,7 +5769,7 @@ function KeepKitProvider({
   children,
   ...providerProps
 }) {
-  return /* @__PURE__ */ jsx30(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(KeepUiProvider, { labels, locale, labelResolver, onFeedback, children: /* @__PURE__ */ jsx31(
     KeepThemeProvider,
     {
       theme,
@@ -5651,10 +5783,10 @@ function KeepKitProvider({
       className: themeClassName,
       style: themeStyle,
       asChild: themeAsChild,
-      children: /* @__PURE__ */ jsxs24(CoreKeepProvider, { ...providerProps, children: [
-        /* @__PURE__ */ jsx30(KeepSyncFeedbackObserver, {}),
+      children: /* @__PURE__ */ jsxs25(CoreKeepProvider, { ...providerProps, children: [
+        /* @__PURE__ */ jsx31(KeepSyncFeedbackObserver, {}),
         children,
-        /* @__PURE__ */ jsx30(KeepAnnouncements, {})
+        /* @__PURE__ */ jsx31(KeepAnnouncements, {})
       ] })
     }
   ) });
@@ -5681,7 +5813,7 @@ function createKeepKit(options = {}) {
   } = options;
   const coreKit = createCoreKeepKit(coreOptions);
   return {
-    Provider: (props) => /* @__PURE__ */ jsx30(
+    Provider: (props) => /* @__PURE__ */ jsx31(
       KeepKitProvider,
       {
         ...coreOptions,
@@ -5702,9 +5834,9 @@ function createKeepKit(options = {}) {
         ...props
       }
     ),
-    Button: (props) => /* @__PURE__ */ jsx30(KeepButton, { ...props }),
-    Backup: (props) => /* @__PURE__ */ jsx30(KeepBackup, { ...props }),
-    Collection: (props) => /* @__PURE__ */ jsx30(
+    Button: (props) => /* @__PURE__ */ jsx31(KeepButton, { ...props }),
+    Backup: (props) => /* @__PURE__ */ jsx31(KeepBackup, { ...props }),
+    Collection: (props) => /* @__PURE__ */ jsx31(
       KeepCollection,
       {
         ...props,
@@ -5715,6 +5847,20 @@ function createKeepKit(options = {}) {
         }
       }
     ),
+    Workspace: (props) => /* @__PURE__ */ jsx31(
+      KeepWorkspace,
+      {
+        ...props,
+        collectionProps: {
+          ...props.collectionProps,
+          itemCardProps: {
+            ...getTitle ? { getTitle } : {},
+            ...getImageProps ? { getImageProps } : {},
+            ...props.collectionProps?.itemCardProps
+          }
+        }
+      }
+    ),
     useContext: () => coreKit.useContext(),
     useItem: (item) => coreKit.useItem(item),
     useList: (query) => coreKit.useList(query),
@@ -5768,6 +5914,7 @@ export {
   KeepTourBar,
   KeepUiProvider,
   KeepUndo,
+  KeepWorkspace,
   LocalStorageAdapter,
   LocalStorageSyncQueueAdapter,
   SyncStorageAdapter,