@keepkit/ui 0.25.0 → 0.26.1

package/dist/index.js

@@ -196,7 +196,11 @@ var DE_LABELS = {
   archiveScopeActive: "Aktiv",
   archiveScopeArchived: "Archiviert",
   archiveScopeAll: "Alle Elemente",
-  undoReorder: "Sortierung r\xFCckg\xE4ngig machen"
+  undoReorder: "Sortierung r\xFCckg\xE4ngig machen",
+  toolbarStart: "Sammlungsaktionen",
+  toolbarQuery: "Suchen und sortieren",
+  toolbarFilters: "Filter",
+  toolbarEnd: "Zus\xE4tzliche Aktionen"
 };
 
 // src/locales/en.ts
@@ -300,7 +304,11 @@ var EN_LABELS = {
   archiveScopeActive: "Active",
   archiveScopeArchived: "Archived",
   archiveScopeAll: "All items",
-  undoReorder: "Undo reorder"
+  undoReorder: "Undo reorder",
+  toolbarStart: "Collection actions",
+  toolbarQuery: "Search and sort",
+  toolbarFilters: "Filters",
+  toolbarEnd: "Additional actions"
 };
 
 // src/locales/es.ts
@@ -404,7 +412,11 @@ var ES_LABELS = {
   archiveScopeActive: "Activos",
   archiveScopeArchived: "Archivados",
   archiveScopeAll: "Todos los elementos",
-  undoReorder: "Deshacer ordenaci\xF3n"
+  undoReorder: "Deshacer ordenaci\xF3n",
+  toolbarStart: "Acciones de la colecci\xF3n",
+  toolbarQuery: "Buscar y ordenar",
+  toolbarFilters: "Filtros",
+  toolbarEnd: "Acciones adicionales"
 };
 
 // src/locales/fil.ts
@@ -508,7 +520,11 @@ var FIL_LABELS = {
   archiveScopeActive: "Aktibo",
   archiveScopeArchived: "Naka-archive",
   archiveScopeAll: "Lahat ng item",
-  undoReorder: "I-undo ang pag-aayos"
+  undoReorder: "I-undo ang pag-aayos",
+  toolbarStart: "Mga aksyon ng koleksyon",
+  toolbarQuery: "Maghanap at mag-ayos",
+  toolbarFilters: "Mga filter",
+  toolbarEnd: "Mga karagdagang aksyon"
 };
 
 // src/locales/fr.ts
@@ -612,7 +628,11 @@ var FR_LABELS = {
   archiveScopeActive: "Actifs",
   archiveScopeArchived: "Archiv\xE9s",
   archiveScopeAll: "Tous les \xE9l\xE9ments",
-  undoReorder: "Annuler le r\xE9ordonnancement"
+  undoReorder: "Annuler le r\xE9ordonnancement",
+  toolbarStart: "Actions de la collection",
+  toolbarQuery: "Recherche et tri",
+  toolbarFilters: "Filtres",
+  toolbarEnd: "Actions suppl\xE9mentaires"
 };
 
 // src/locales/id.ts
@@ -716,7 +736,11 @@ var ID_LABELS = {
   archiveScopeActive: "Aktif",
   archiveScopeArchived: "Diarsipkan",
   archiveScopeAll: "Semua item",
-  undoReorder: "Batalkan pengurutan"
+  undoReorder: "Batalkan pengurutan",
+  toolbarStart: "Tindakan koleksi",
+  toolbarQuery: "Cari dan urutkan",
+  toolbarFilters: "Filter",
+  toolbarEnd: "Tindakan tambahan"
 };
 
 // src/locales/it.ts
@@ -820,7 +844,11 @@ var IT_LABELS = {
   archiveScopeActive: "Attivi",
   archiveScopeArchived: "Archiviati",
   archiveScopeAll: "Tutti gli elementi",
-  undoReorder: "Annulla riordinamento"
+  undoReorder: "Annulla riordinamento",
+  toolbarStart: "Azioni della raccolta",
+  toolbarQuery: "Cerca e ordina",
+  toolbarFilters: "Filtri",
+  toolbarEnd: "Azioni aggiuntive"
 };
 
 // src/locales/ja.ts
@@ -924,7 +952,11 @@ var JA_LABELS = {
   archiveScopeActive: "\u4FDD\u5B58\u4E2D",
   archiveScopeArchived: "\u30A2\u30FC\u30AB\u30A4\u30D6\u6E08\u307F",
   archiveScopeAll: "\u3059\u3079\u3066",
-  undoReorder: "\u4E26\u3073\u66FF\u3048\u3092\u5143\u306B\u623B\u3059"
+  undoReorder: "\u4E26\u3073\u66FF\u3048\u3092\u5143\u306B\u623B\u3059",
+  toolbarStart: "\u30B3\u30EC\u30AF\u30B7\u30E7\u30F3\u306E\u64CD\u4F5C",
+  toolbarQuery: "\u691C\u7D22\u3068\u4E26\u3073\u66FF\u3048",
+  toolbarFilters: "\u7D5E\u308A\u8FBC\u307F",
+  toolbarEnd: "\u8FFD\u52A0\u306E\u64CD\u4F5C"
 };
 
 // src/locales/ko.ts
@@ -1028,7 +1060,11 @@ var KO_LABELS = {
   archiveScopeActive: "\uD65C\uC131",
   archiveScopeArchived: "\uBCF4\uAD00\uB428",
   archiveScopeAll: "\uBAA8\uB4E0 \uD56D\uBAA9",
-  undoReorder: "\uC815\uB82C \uC2E4\uD589 \uCDE8\uC18C"
+  undoReorder: "\uC815\uB82C \uC2E4\uD589 \uCDE8\uC18C",
+  toolbarStart: "\uCEEC\uB809\uC158 \uC791\uC5C5",
+  toolbarQuery: "\uAC80\uC0C9 \uBC0F \uC815\uB82C",
+  toolbarFilters: "\uD544\uD130",
+  toolbarEnd: "\uCD94\uAC00 \uC791\uC5C5"
 };
 
 // src/locales/ms.ts
@@ -1132,7 +1168,11 @@ var MS_LABELS = {
   archiveScopeActive: "Aktif",
   archiveScopeArchived: "Diarkibkan",
   archiveScopeAll: "Semua item",
-  undoReorder: "Buat asal susunan"
+  undoReorder: "Buat asal susunan",
+  toolbarStart: "Tindakan koleksi",
+  toolbarQuery: "Cari dan susun",
+  toolbarFilters: "Penapis",
+  toolbarEnd: "Tindakan tambahan"
 };
 
 // src/locales/pt-BR.ts
@@ -1236,7 +1276,11 @@ var PT_BR_LABELS = {
   archiveScopeActive: "Ativos",
   archiveScopeArchived: "Arquivados",
   archiveScopeAll: "Todos os itens",
-  undoReorder: "Desfazer reordena\xE7\xE3o"
+  undoReorder: "Desfazer reordena\xE7\xE3o",
+  toolbarStart: "A\xE7\xF5es da cole\xE7\xE3o",
+  toolbarQuery: "Pesquisar e ordenar",
+  toolbarFilters: "Filtros",
+  toolbarEnd: "A\xE7\xF5es adicionais"
 };
 
 // src/locales/ru.ts
@@ -1340,7 +1384,11 @@ var RU_LABELS = {
   archiveScopeActive: "\u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0435",
   archiveScopeArchived: "\u0412 \u0430\u0440\u0445\u0438\u0432\u0435",
   archiveScopeAll: "\u0412\u0441\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B",
-  undoReorder: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443"
+  undoReorder: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443",
+  toolbarStart: "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043A\u043E\u043B\u043B\u0435\u043A\u0446\u0438\u0438",
+  toolbarQuery: "\u041F\u043E\u0438\u0441\u043A \u0438 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0430",
+  toolbarFilters: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B",
+  toolbarEnd: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F"
 };
 
 // src/locales/th.ts
@@ -1444,7 +1492,11 @@ var TH_LABELS = {
   archiveScopeActive: "\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E2D\u0E22\u0E39\u0E48",
   archiveScopeArchived: "\u0E40\u0E01\u0E47\u0E1A\u0E16\u0E32\u0E27\u0E23\u0E41\u0E25\u0E49\u0E27",
   archiveScopeAll: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
-  undoReorder: "\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33\u0E01\u0E32\u0E23\u0E08\u0E31\u0E14\u0E40\u0E23\u0E35\u0E22\u0E07"
+  undoReorder: "\u0E40\u0E25\u0E34\u0E01\u0E17\u0E33\u0E01\u0E32\u0E23\u0E08\u0E31\u0E14\u0E40\u0E23\u0E35\u0E22\u0E07",
+  toolbarStart: "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E02\u0E2D\u0E07\u0E04\u0E2D\u0E25\u0E40\u0E25\u0E01\u0E0A\u0E31\u0E19",
+  toolbarQuery: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E41\u0E25\u0E30\u0E08\u0E31\u0E14\u0E40\u0E23\u0E35\u0E22\u0E07",
+  toolbarFilters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
+  toolbarEnd: "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21"
 };
 
 // src/locales/vi.ts
@@ -1548,7 +1600,11 @@ var VI_LABELS = {
   archiveScopeActive: "\u0110ang ho\u1EA1t \u0111\u1ED9ng",
   archiveScopeArchived: "\u0110\xE3 l\u01B0u tr\u1EEF",
   archiveScopeAll: "T\u1EA5t c\u1EA3 m\u1EE5c",
-  undoReorder: "Ho\xE0n t\xE1c s\u1EAFp x\u1EBFp"
+  undoReorder: "Ho\xE0n t\xE1c s\u1EAFp x\u1EBFp",
+  toolbarStart: "Thao t\xE1c b\u1ED9 s\u01B0u t\u1EADp",
+  toolbarQuery: "T\xECm ki\u1EBFm v\xE0 s\u1EAFp x\u1EBFp",
+  toolbarFilters: "B\u1ED9 l\u1ECDc",
+  toolbarEnd: "Thao t\xE1c b\u1ED5 sung"
 };
 
 // src/locales/zh-Hans.ts
@@ -1652,7 +1708,11 @@ var ZH_HANS_LABELS = {
   archiveScopeActive: "\u4FDD\u5B58\u4E2D",
   archiveScopeArchived: "\u5DF2\u5F52\u6863",
   archiveScopeAll: "\u5168\u90E8\u9879\u76EE",
-  undoReorder: "\u64A4\u9500\u6392\u5E8F"
+  undoReorder: "\u64A4\u9500\u6392\u5E8F",
+  toolbarStart: "\u96C6\u5408\u64CD\u4F5C",
+  toolbarQuery: "\u641C\u7D22\u548C\u6392\u5E8F",
+  toolbarFilters: "\u7B5B\u9009",
+  toolbarEnd: "\u5176\u4ED6\u64CD\u4F5C"
 };
 
 // src/locales/zh-Hant.ts
@@ -1756,7 +1816,11 @@ var ZH_HANT_LABELS = {
   archiveScopeActive: "\u4FDD\u5B58\u4E2D",
   archiveScopeArchived: "\u5DF2\u5C01\u5B58",
   archiveScopeAll: "\u6240\u6709\u9805\u76EE",
-  undoReorder: "\u5FA9\u539F\u6392\u5E8F"
+  undoReorder: "\u5FA9\u539F\u6392\u5E8F",
+  toolbarStart: "\u96C6\u5408\u64CD\u4F5C",
+  toolbarQuery: "\u641C\u5C0B\u8207\u6392\u5E8F",
+  toolbarFilters: "\u7BE9\u9078",
+  toolbarEnd: "\u5176\u4ED6\u64CD\u4F5C"
 };
 
 // src/locales/index.ts
@@ -3061,7 +3125,7 @@ function KeepUndo({ children, label, ...props }) {
 
 // src/features/collection/KeepCollection.tsx
 import { KeepErrorBoundary as KeepErrorBoundary2 } from "@keepkit/core/react";
-import { useEffect as useEffect10, useState as useState14 } from "react";
+import { useEffect as useEffect10, useId as useId3, useState as useState14 } from "react";
 
 // src/features/query/KeepActiveFiltersSummary.tsx
 import {
@@ -4151,6 +4215,7 @@ function KeepItemCardRoot({
   linkTargetAttribute,
   linkRel,
   highlightQuery,
+  cardVariant = "outlined",
   className,
   ...rootProps
 }) {
@@ -4292,6 +4357,7 @@ function KeepItemCardRoot({
       "data-state": view.itemState.error ? "error" : view.itemState.isSaved ? "saved" : "unsaved",
       "data-status": item.status ?? "available",
       "data-item-status": view.displayStatus,
+      "data-card-variant": cardVariant !== "outlined" ? cardVariant : void 0,
       "data-loading": view.itemState.isMutating ? "true" : void 0
     },
     linkedBody,
@@ -4778,7 +4844,7 @@ function hasActiveQueryFilters(query) {
 }
 
 // src/features/collection/KeepCollection.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function KeepCollection(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...collectionProps } = props;
   const content = /* @__PURE__ */ jsx21(KeepCollectionContent, { ...collectionProps });
@@ -4789,6 +4855,8 @@ function KeepCollectionContent({
   query = {},
   pageSize = 20,
   layout = "list",
+  toolbarVariant = "plain",
+  toolbarLayout = "flat",
   urlSync = false,
   urlAdapter,
   archiveScope,
@@ -4796,6 +4864,7 @@ function KeepCollectionContent({
   reorderable = false,
   onReorder,
   features,
+  slots,
   collectionLabels,
   renderItem,
   itemCardProps,
@@ -4839,6 +4908,59 @@ function KeepCollectionContent({
     showPinButton: itemCardProps?.showPinButton ?? view.enabled.pin,
     showArchiveButton: itemCardProps?.showArchiveButton ?? view.enabled.archive
   };
+  const toolbarId = useId3();
+  const structuredToolbar = toolbarLayout === "grouped" || toolbarVariant === "panel" || slots?.toolbarStart !== void 0 || slots?.toolbarEnd !== void 0;
+  const hasQueryControls = view.enabled.search || view.enabled.sort;
+  const hasFilterControls = view.enabled.tagFilter || view.enabled.collectionFilter || archiveScope !== void 0;
+  const queryControls = hasQueryControls ? /* @__PURE__ */ jsxs18(Fragment11, { children: [
+    view.enabled.search ? /* @__PURE__ */ jsx21(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
+    view.enabled.sort ? /* @__PURE__ */ jsx21(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null
+  ] }) : null;
+  const filterControls = hasFilterControls ? /* @__PURE__ */ jsxs18(Fragment11, { children: [
+    view.enabled.tagFilter ? /* @__PURE__ */ jsx21(KeepTagFilter, { query, value: view.activeTags[0], onValueChange: view.setTag }) : null,
+    view.enabled.collectionFilter ? /* @__PURE__ */ jsx21(
+      KeepCollectionFilter,
+      {
+        value: view.activeCollection,
+        onValueChange: view.setCollection,
+        collectionLabels
+      }
+    ) : null,
+    archiveScope !== void 0 ? /* @__PURE__ */ jsx21(
+      KeepArchiveScopeSelect,
+      {
+        value: view.archiveScope,
+        onValueChange: (next) => {
+          view.setArchiveScope(next);
+          onArchiveScopeChange?.(next);
+        }
+      }
+    ) : null
+  ] }) : null;
+  const toolbarStartLabel = useUiLabel("toolbarStart");
+  const toolbarQueryLabel = useUiLabel("toolbarQuery");
+  const toolbarFiltersLabel = useUiLabel("toolbarFilters");
+  const toolbarEndLabel = useUiLabel("toolbarEnd");
+  const toolbarStartContent = slots?.toolbarStart === void 0 ? null : resolveContent(slots.toolbarStart, view.list);
+  const toolbarEndContent = slots?.toolbarEnd === void 0 ? null : resolveContent(slots.toolbarEnd, view.list);
+  const hasToolbarContent = hasQueryControls || hasFilterControls || hasRenderableContent(toolbarStartContent) || hasRenderableContent(toolbarEndContent);
+  const renderToolbarGroup = (group, content, label) => {
+    if (!hasRenderableContent(content)) return null;
+    const labelId = `${toolbarId}-${group}`;
+    return /* @__PURE__ */ jsxs18("fieldset", { "data-keepkit": "collection-toolbar-group", "data-group": group, "aria-labelledby": labelId, children: [
+      /* @__PURE__ */ jsx21("legend", { id: labelId, "data-keepkit": "collection-toolbar-label", children: label }),
+      /* @__PURE__ */ jsx21("div", { "data-keepkit": "collection-toolbar-content", children: content })
+    ] });
+  };
+  const toolbar = !structuredToolbar ? /* @__PURE__ */ jsxs18("div", { children: [
+    queryControls,
+    filterControls
+  ] }) : !hasToolbarContent ? null : /* @__PURE__ */ jsxs18("div", { "data-keepkit": "collection-toolbar", "data-variant": toolbarVariant, "data-layout": toolbarLayout, children: [
+    renderToolbarGroup("toolbarStart", toolbarStartContent, toolbarStartLabel),
+    renderToolbarGroup("query", queryControls, toolbarQueryLabel),
+    renderToolbarGroup("filters", filterControls, toolbarFiltersLabel),
+    renderToolbarGroup("toolbarEnd", toolbarEndContent, toolbarEndLabel)
+  ] });
   return /* @__PURE__ */ jsxs18(
     "section",
     {
@@ -4846,33 +4968,13 @@ function KeepCollectionContent({
       className,
       "data-keepkit": "collection",
       "data-layout": layout,
+      "data-toolbar-variant": toolbarVariant !== "plain" ? toolbarVariant : void 0,
+      "data-toolbar-layout": toolbarLayout !== "flat" ? toolbarLayout : void 0,
       "aria-busy": view.list.isLoading || view.list.isMutating || rootProps["aria-busy"],
       "data-state": getCollectionState(view.list),
       "data-loading": view.list.isLoading || view.list.isMutating ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs18("div", { children: [
-          view.enabled.search ? /* @__PURE__ */ jsx21(KeepSearchInput, { value: view.searchValue, onValueChange: view.setSearchValue }) : null,
-          view.enabled.sort ? /* @__PURE__ */ jsx21(KeepSortSelect, { value: view.sortValue, onValueChange: view.setSortValue }) : null,
-          view.enabled.tagFilter ? /* @__PURE__ */ jsx21(KeepTagFilter, { query, value: view.activeTags[0], onValueChange: view.setTag }) : null,
-          view.enabled.collectionFilter ? /* @__PURE__ */ jsx21(
-            KeepCollectionFilter,
-            {
-              value: view.activeCollection,
-              onValueChange: view.setCollection,
-              collectionLabels
-            }
-          ) : null,
-          archiveScope !== void 0 ? /* @__PURE__ */ jsx21(
-            KeepArchiveScopeSelect,
-            {
-              value: view.archiveScope,
-              onValueChange: (next) => {
-                view.setArchiveScope(next);
-                onArchiveScopeChange?.(next);
-              }
-            }
-          ) : null
-        ] }),
+        toolbar,
         activeFilters === void 0 ? /* @__PURE__ */ jsx21(
           KeepActiveFiltersSummary,
           {
@@ -4921,6 +5023,9 @@ function getCollectionState(list) {
   if (list.isHydrated && list.items.length === 0) return "empty";
   return "ready";
 }
+function hasRenderableContent(content) {
+  return content !== null && content !== void 0 && content !== false && content !== true && content !== "";
+}
 
 // src/features/collection/KeepLayout.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -5027,7 +5132,7 @@ function useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError }) {
 }
 
 // src/features/editor/KeepNoteEditor.tsx
-import { Fragment as Fragment11, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -5046,7 +5151,7 @@ function KeepNoteEditor({
   const view = useKeepNoteEditor({ item, debounceMs, onSaved, onSaveError });
   const { error, isDirty, isSaving, note, setNote } = view.state;
   const contentChildren = asChild && isValidElement7(children) ? void 0 : children;
-  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs20(Fragment11, { children: [
+  const body = render ? render(view.state) : typeof contentChildren === "function" ? contentChildren(view.state) : contentChildren ?? /* @__PURE__ */ jsxs20(Fragment12, { children: [
     /* @__PURE__ */ jsxs20("label", { children: [
       label ?? view.labels.note,
       /* @__PURE__ */ jsx24(
@@ -5160,7 +5265,7 @@ function useKeepTagEditor({ item, onSaved, onSaveError }) {
 }
 
 // src/features/editor/KeepTagEditor.tsx
-import { Fragment as Fragment12, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -5171,7 +5276,7 @@ function KeepTagEditor({
 }) {
   const view = useKeepTagEditor({ item, onSaved, onSaveError });
   const { isSaving, tags } = view.state;
-  const body = render ? render(view.state) : /* @__PURE__ */ jsxs21(Fragment12, { children: [
+  const body = render ? render(view.state) : /* @__PURE__ */ jsxs21(Fragment13, { children: [
     /* @__PURE__ */ jsxs21("label", { children: [
       view.labels.tags,
       /* @__PURE__ */ jsx25(
@@ -5235,7 +5340,7 @@ function useKeepToastFeedback(showToast) {
 
 // src/features/navigation/KeepTourBar.tsx
 import { useKeepNavigator } from "@keepkit/core/react";
-import { useId as useId3 } from "react";
+import { useId as useId4 } from "react";
 
 // src/features/navigation/hooks/useKeepTourShortcuts.ts
 import { useEffect as useEffect13 } from "react";
@@ -5270,7 +5375,7 @@ function isEditableTarget(target) {
 }
 
 // src/features/navigation/KeepTourBar.tsx
-import { Fragment as Fragment13, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function KeepTourBar({
   navigation: providedNavigation,
   currentId,
@@ -5340,7 +5445,7 @@ function KeepTourBar({
       return resolvedPrev();
     }
   });
-  const body = /* @__PURE__ */ jsxs22(Fragment13, { children: [
+  const body = /* @__PURE__ */ jsxs22(Fragment14, { children: [
     showProgress ? /* @__PURE__ */ jsx26("span", { "data-keepkit": "tour-progress", "aria-live": "polite", children: progress ?? `${navigation.currentPosition ?? 0} / ${navigation.items.length}` }) : null,
     /* @__PURE__ */ jsx26(
       TourAction,
@@ -5350,7 +5455,7 @@ function KeepTourBar({
         onClick: resolvedPrevHref ? notifyPrevNavigation : resolvedPrev,
         "data-keep-action": "tour-prev",
         shortcut: showShortcutHint ? shortcutOptions?.prevKeys?.[0] ?? "K" : void 0,
-        preview: navigation.prevItem ? /* @__PURE__ */ jsxs22(Fragment13, { children: [
+        preview: navigation.prevItem ? /* @__PURE__ */ jsxs22(Fragment14, { children: [
           previousLabel,
           ": ",
           getItemTitle(navigation.prevItem)
@@ -5366,7 +5471,7 @@ function KeepTourBar({
         onClick: resolvedNextHref ? notifyNextNavigation : resolvedNext,
         "data-keep-action": "tour-next",
         shortcut: showShortcutHint ? shortcutOptions?.nextKeys?.[0] ?? "J" : void 0,
-        preview: navigation.nextItem ? /* @__PURE__ */ jsxs22(Fragment13, { children: [
+        preview: navigation.nextItem ? /* @__PURE__ */ jsxs22(Fragment14, { children: [
           nextItemLabel,
           ": ",
           getItemTitle(navigation.nextItem)
@@ -5385,8 +5490,8 @@ function KeepTourBar({
   );
 }
 function TourAction({ href, disabled = false, onClick, children, preview, shortcut, ...props }) {
-  const previewId = useId3();
-  const content = /* @__PURE__ */ jsxs22(Fragment13, { children: [
+  const previewId = useId4();
+  const content = /* @__PURE__ */ jsxs22(Fragment14, { children: [
     /* @__PURE__ */ jsx26("span", { "data-tour-label": "true", children }),
     shortcut ? /* @__PURE__ */ jsx26(KeepShortcutHint, { shortcut }) : null,
     preview ? /* @__PURE__ */ jsx26("small", { id: previewId, "data-tour-preview": "true", children: preview }) : null
@@ -5865,6 +5970,8 @@ import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function KeepWorkspace({
   preset = "standard",
   modules,
+  surface,
+  sectionGap,
   collectionProps,
   syncStatusProps,
   recoveryProps,
@@ -5893,38 +6000,64 @@ function KeepWorkspace({
     ...collectionProps,
     features: { ...view.collectionFeatures, ...collectionProps?.features }
   };
-  return /* @__PURE__ */ jsxs25("section", { ...props, className, "data-keepkit": "workspace", "data-preset": preset, children: [
-    resolveOptionalSlot(slots?.before, state),
-    view.modules.syncStatus ? resolveSlot(
-      slots?.syncStatus,
-      /* @__PURE__ */ jsx30(KeepSyncStatusBanner, { ...syncStatusProps, onResolveConflicts: view.openRecovery }),
-      state
-    ) : null,
-    resolveSlot(slots?.collection, /* @__PURE__ */ jsx30(KeepCollection, { ...resolvedCollectionProps }), state),
-    view.modules.backup || view.modules.stalePrune ? resolveSlot(
-      slots?.actions,
-      /* @__PURE__ */ jsxs25("div", { "data-keepkit": "workspace-actions", children: [
-        view.modules.stalePrune ? /* @__PURE__ */ jsx30(KeepPruneStaleButton, { ...stalePruneProps }) : null,
-        view.modules.backup ? /* @__PURE__ */ jsx30(KeepBackup, { ...backupProps }) : null
-      ] }),
-      state
-    ) : null,
-    view.modules.undo ? resolveSlot(slots?.undo, /* @__PURE__ */ jsx30(KeepUndo, { ...undoProps }), state) : null,
-    view.modules.recovery ? resolveSlot(
-      slots?.recovery,
-      /* @__PURE__ */ jsx30(
-        KeepSyncRecoveryDialog,
-        {
-          ...recoveryProps,
-          open: view.recoveryOpen,
-          onOpenChange: view.setRecoveryOpen
-        }
-      ),
-      state
-    ) : null,
-    resolveOptionalSlot(children, state),
-    resolveOptionalSlot(slots?.after, state)
-  ] });
+  const structuredRegions = surface !== void 0 && surface !== "plain";
+  const region = (name, content) => {
+    if (!structuredRegions) return content;
+    if (content === null || content === void 0 || content === false) return null;
+    const resolvedSurface = typeof surface === "string" ? surface : surface[name] ?? "plain";
+    return /* @__PURE__ */ jsx30("div", { "data-keepkit": "workspace-region", "data-region": name, "data-surface": resolvedSurface, children: content });
+  };
+  const before = resolveOptionalSlot(slots?.before, state);
+  const syncStatus = view.modules.syncStatus ? resolveSlot(
+    slots?.syncStatus,
+    /* @__PURE__ */ jsx30(KeepSyncStatusBanner, { ...syncStatusProps, onResolveConflicts: view.openRecovery }),
+    state
+  ) : null;
+  const collection = resolveSlot(slots?.collection, /* @__PURE__ */ jsx30(KeepCollection, { ...resolvedCollectionProps }), state);
+  const actions = view.modules.backup || view.modules.stalePrune ? resolveSlot(
+    slots?.actions,
+    /* @__PURE__ */ jsxs25("div", { "data-keepkit": "workspace-actions", children: [
+      view.modules.stalePrune ? /* @__PURE__ */ jsx30(KeepPruneStaleButton, { ...stalePruneProps }) : null,
+      view.modules.backup ? /* @__PURE__ */ jsx30(KeepBackup, { ...backupProps }) : null
+    ] }),
+    state
+  ) : null;
+  const undo = view.modules.undo ? resolveSlot(slots?.undo, /* @__PURE__ */ jsx30(KeepUndo, { ...undoProps }), state) : null;
+  const recovery = view.modules.recovery ? resolveSlot(
+    slots?.recovery,
+    /* @__PURE__ */ jsx30(
+      KeepSyncRecoveryDialog,
+      {
+        ...recoveryProps,
+        open: view.recoveryOpen,
+        onOpenChange: view.setRecoveryOpen
+      }
+    ),
+    state
+  ) : null;
+  const additionalContent = resolveOptionalSlot(children, state);
+  const after = resolveOptionalSlot(slots?.after, state);
+  return /* @__PURE__ */ jsxs25(
+    "section",
+    {
+      ...props,
+      className,
+      "data-keepkit": "workspace",
+      "data-preset": preset,
+      "data-surface": surface !== void 0 ? typeof surface === "string" ? surface : "custom" : void 0,
+      "data-section-gap": sectionGap,
+      children: [
+        region("before", before),
+        region("syncStatus", syncStatus),
+        region("collection", collection),
+        region("actions", actions),
+        region("undo", undo),
+        region("recovery", recovery),
+        region("children", additionalContent),
+        region("after", after)
+      ]
+    }
+  );
 }
 function resolveSlot(slot, fallback, state) {
   if (slot === void 0) return fallback;