@keepkit/ui 0.25.0 → 0.26.2

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
@@ -2076,11 +2140,12 @@ function getErrorMessage(error) {
 import {
   cloneElement,
   createContext as createContext2,
+  Fragment,
   isValidElement,
   useContext as useContext2,
   useMemo as useMemo2
 } from "react";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
 var KeepSearchQueryContext = createContext2(void 0);
 function KeepSearchQueryProvider({ query, children }) {
   return /* @__PURE__ */ jsx3(KeepSearchQueryContext.Provider, { value: query, children });
@@ -2117,7 +2182,7 @@ function highlightText(text, query) {
   }
   if (lastIndex === 0) return text;
   if (lastIndex < text.length) parts.push(text.slice(lastIndex));
-  return /* @__PURE__ */ jsx3(Fragment, { children: parts });
+  return /* @__PURE__ */ jsx3(Fragment2, { children: parts });
 }
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -2148,6 +2213,15 @@ function sortToValue(sort) {
 function resolveContent(content, state) {
   return typeof content === "function" ? content(state) : content;
 }
+function hasRenderableContent(content) {
+  if (content === null || content === void 0 || typeof content === "boolean") return false;
+  if (typeof content === "string") return content.length > 0;
+  if (Array.isArray(content)) return content.some(hasRenderableContent);
+  if (isValidElement(content) && content.type === Fragment) {
+    return hasRenderableContent(content.props.children);
+  }
+  return true;
+}
 function composeRefs(...refs) {
   return (value) => {
     for (const ref of refs) {
@@ -2354,7 +2428,7 @@ function getItemLabel(item) {
 }
 
 // src/features/actions/KeepBulkActions.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function KeepBulkActions({
   query,
   selectedIds: controlledSelectedIds,
@@ -2377,7 +2451,7 @@ function KeepBulkActions({
     controlledScope,
     onSelectionScopeChange
   });
-  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  const body = render ? render(state) : typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3("fieldset", { children: [
       /* @__PURE__ */ jsx5("legend", { children: labels.selectItems }),
       /* @__PURE__ */ jsxs3("label", { children: [
@@ -2495,7 +2569,7 @@ function useKeepButton({ item, labels, icons, children }) {
 }
 
 // src/features/actions/KeepButton.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function KeepButton({
   labels,
   icons,
@@ -2540,7 +2614,7 @@ function KeepButton({
     const label = state.error ? labels?.error ?? view.labels.error : state.isMutating ? labels?.loading ?? view.labels.loading : state.isSaved ? labels?.saved ?? view.labels.saved : labels?.unsaved ?? view.labels.save;
     if (!icons) return label;
     const icon = state.error ? icons.error : state.isMutating ? icons.loading : state.isSaved ? icons.remove ?? icons.saved : icons.save;
-    return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
       renderIcon(icon, iconClassName),
       showLabel && !iconOnly ? label : null
     ] });
@@ -2568,7 +2642,7 @@ function KeepButton({
     unsavedAriaLabel: labels?.unsavedAriaLabel ?? props.unsavedAriaLabel
   };
   if (!view.customStateLabel) return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps });
-  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment3, { children: getStateContent(state) }) });
+  return /* @__PURE__ */ jsx6(CoreKeepButton, { ...sharedProps, children: (state) => /* @__PURE__ */ jsx6(Fragment4, { children: getStateContent(state) }) });
 }
 function renderIcon(icon, className) {
   if (typeof icon === "function") return createElement(icon, { "aria-hidden": true, className });
@@ -2593,7 +2667,7 @@ import {
   useRef as useRef4,
   useState as useState3
 } from "react";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function useKeepQuickEditor(item, options = {}) {
   const { debounceMs = 300, onSaved, onSaveError } = options;
   const itemState = useKeepItem3(item);
@@ -2750,7 +2824,7 @@ function KeepQuickEditorView({
     if (event.key === "Tab") trapFocus(event, focusScopeRef?.current ?? rootRef.current);
   };
   const statusMessage = state.saveStatus === "dirty" ? unsavedChangesLabel : state.saveStatus === "saving" ? savingLabel : state.saveStatus === "saved" ? savedLabel : state.saveStatus === "error" ? getErrorMessage2(state.error, errorLabel) : null;
-  const body = typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+  const body = typeof children === "function" ? children(state) : children ?? /* @__PURE__ */ jsxs5(Fragment5, { children: [
     /* @__PURE__ */ jsxs5("label", { children: [
       noteLabel,
       /* @__PURE__ */ jsx7("textarea", { value: state.note, onChange: (event) => state.setNote(event.currentTarget.value) })
@@ -3061,14 +3135,14 @@ 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 {
   isValidElement as isValidElement2,
   useRef as useRef6
 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function KeepActiveFiltersSummary({
   query,
   search: providedSearch,
@@ -3129,7 +3203,7 @@ function KeepActiveFiltersSummary({
     removeTag: (tag) => onTagChange?.(tag)
   };
   const contentChildren = asChild && isElement(children) ? void 0 : children;
-  const body = typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? (hasFilters ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+  const body = typeof contentChildren === "function" ? contentChildren(state) : contentChildren ?? (hasFilters ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
     /* @__PURE__ */ jsx10("span", { "data-active-filters-label": "true", children: activeFiltersLabel }),
     /* @__PURE__ */ jsxs8("ul", { "data-active-filters-list": "true", children: [
       search ? /* @__PURE__ */ jsxs8("li", { "data-filter-kind": "search", children: [
@@ -3512,7 +3586,7 @@ function getVisiblePages(currentPage, pageCount, maxPageButtons) {
 }
 
 // src/features/query/query-controls.tsx
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function KeepSearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -3548,7 +3622,7 @@ function KeepSortSelect({
   ...props
 }) {
   const view = useKeepSortSelect({ controlledValue, defaultValue, onValueChange });
-  const options = children ?? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+  const options = children ?? /* @__PURE__ */ jsxs12(Fragment7, { children: [
     /* @__PURE__ */ jsx14("option", { value: "updatedAt:desc", children: view.labels.updatedNewest }),
     /* @__PURE__ */ jsx14("option", { value: "updatedAt:asc", children: view.labels.updatedOldest }),
     /* @__PURE__ */ jsx14("option", { value: "savedAt:desc", children: view.labels.savedNewest }),
@@ -3805,7 +3879,7 @@ function getDisplayStatus(status) {
 }
 
 // src/features/item/KeepItemStatusBadge.tsx
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeepItemStatusBadge({ status = "available", label, className, ...props }) {
   const view = useKeepItemStatusBadge(status);
   return /* @__PURE__ */ jsxs13(
@@ -3842,15 +3916,15 @@ function StatusIcon({ name }) {
       focusable: "false",
       children: [
         name === "check" ? /* @__PURE__ */ jsx15("path", { d: "m5 12 4 4L19 6" }) : null,
-        name === "clock" ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+        name === "clock" ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
           /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "8" }),
           /* @__PURE__ */ jsx15("path", { d: "M12 7v5l3 2" })
         ] }) : null,
-        name === "ban" ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+        name === "ban" ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
           /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "8" }),
           /* @__PURE__ */ jsx15("path", { d: "m6.5 6.5 11 11" })
         ] }) : null,
-        name === "lock" ? /* @__PURE__ */ jsxs13(Fragment7, { children: [
+        name === "lock" ? /* @__PURE__ */ jsxs13(Fragment8, { children: [
           /* @__PURE__ */ jsx15("rect", { x: "5", y: "10", width: "14", height: "10", rx: "2" }),
           /* @__PURE__ */ jsx15("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
         ] }) : null
@@ -4111,7 +4185,7 @@ function getDisplayStatus2(status) {
 }
 
 // src/features/item/KeepItemCard.tsx
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var KeepItemCardContext = createContext3(null);
 function useKeepItemCardCompound(part) {
   const context = useContext3(KeepItemCardContext);
@@ -4151,6 +4225,7 @@ function KeepItemCardRoot({
   linkTargetAttribute,
   linkRel,
   highlightQuery,
+  cardVariant = "outlined",
   className,
   ...rootProps
 }) {
@@ -4226,8 +4301,8 @@ function KeepItemCardRoot({
     /* @__PURE__ */ jsx17("time", { dateTime: new Date(item.savedAt).toISOString(), children: formatSavedAt(item.savedAt) })
   ] }) : null;
   const error = view.itemState.error ? /* @__PURE__ */ jsx17("p", { role: "alert", children: getErrorMessage3(view.itemState.error, view.labels.error) }) : null;
-  const actions = view.statusLabel ? /* @__PURE__ */ jsx17(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs15(Fragment8, { children: [
-    showEditButton ? /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  const actions = view.statusLabel ? /* @__PURE__ */ jsx17(KeepStaleNotice, { item, onRetry, onRemoved }) : /* @__PURE__ */ jsxs15(Fragment9, { children: [
+    showEditButton ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
       /* @__PURE__ */ jsx17(
         "button",
         {
@@ -4273,7 +4348,7 @@ function KeepItemCardRoot({
     saveAriaLabel: `${view.labels.remove} ${String(view.resolvedTitle)}`,
     renderText: (content) => /* @__PURE__ */ jsx17(KeepHighlight, { query: searchQuery, children: content })
   };
-  const defaultBody = /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  const defaultBody = /* @__PURE__ */ jsxs15(Fragment9, { children: [
     /* @__PURE__ */ jsx17(KeepItemCardMedia, {}),
     /* @__PURE__ */ jsx17(KeepItemCardContent, {}),
     /* @__PURE__ */ jsx17(KeepItemCardActions, {})
@@ -4292,6 +4367,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,
@@ -4305,7 +4381,7 @@ function KeepItemCardMedia({ children, fallback, ...props }) {
 }
 function KeepItemCardContent({ children, ...props }) {
   const context = useKeepItemCardCompound("Content");
-  return /* @__PURE__ */ jsx17("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs15(Fragment8, { children: [
+  return /* @__PURE__ */ jsx17("div", { ...props, "data-keep-card-part": "content", children: children === void 0 ? /* @__PURE__ */ jsxs15(Fragment9, { children: [
     /* @__PURE__ */ jsx17(KeepItemCardTitle, {}),
     context.meta,
     /* @__PURE__ */ jsx17(KeepItemCardTags, {}),
@@ -4420,7 +4496,7 @@ function getErrorMessage3(error, fallback) {
 
 // src/features/status/KeepEmptyState.tsx
 import { isValidElement as isValidElement5 } from "react";
-import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function KeepEmptyState({
   title,
   description,
@@ -4439,7 +4515,7 @@ function KeepEmptyState({
   );
   const clearLabel = useUiLabel("clearFilters");
   const contentChildren = asChild && isValidElement5(children) ? void 0 : children;
-  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment9, { children: [
+  const body = contentChildren ?? /* @__PURE__ */ jsxs16(Fragment10, { children: [
     /* @__PURE__ */ jsx18("h2", { children: title ?? defaultTitle }),
     description ?? /* @__PURE__ */ jsx18("p", { children: defaultDescription }),
     action ?? (resolvedVariant === "empty-filtered" && onClearFilters ? /* @__PURE__ */ jsx18("button", { type: "button", "data-keep-action": "clear-filters", onClick: onClearFilters, children: clearLabel }) : null)
@@ -4644,7 +4720,7 @@ function KeepReorderableList({
 }
 
 // src/features/collection/KeepList.tsx
-import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function KeepList(props) {
   const { fallback, onBoundaryError, boundaryResetKey, ...listProps } = props;
   const content = /* @__PURE__ */ jsx20(KeepListContent, { ...listProps });
@@ -4729,7 +4805,7 @@ function getListBody(state, options) {
   if (state.isLoading && !state.isHydrated) {
     if (options.loading !== void 0) return resolveContent(options.loading, state);
     const count = Number.isFinite(options.loadingCount) ? Math.max(0, Math.floor(options.loadingCount)) : 6;
-    return /* @__PURE__ */ jsxs17(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs17(Fragment11, { children: [
       /* @__PURE__ */ jsx20("span", { role: "status", "data-keepkit": "loading-label", children: options.loadingLabel }),
       /* @__PURE__ */ jsx20("ul", { "data-keepkit": "skeleton-list", "data-layout": options.layout, children: Array.from({ length: count }, (_, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: Static loading placeholders never reorder.
@@ -4758,7 +4834,7 @@ function getListBody(state, options) {
           await options.reorder(orderedIds);
           await options.onReorder?.(orderedIds);
         },
-        renderItem: (item, reorderState) => /* @__PURE__ */ jsxs17(Fragment10, { children: [
+        renderItem: (item, reorderState) => /* @__PURE__ */ jsxs17(Fragment11, { children: [
           /* @__PURE__ */ jsx20("button", { type: "button", ...reorderState.dragHandleProps, children: "\u2195" }),
           options.renderItem ? options.renderItem(item, state) : /* @__PURE__ */ jsx20(KeepItemCard, { item, ...options.itemCardProps })
         ] }),
@@ -4778,7 +4854,7 @@ function hasActiveQueryFilters(query) {
 }
 
 // src/features/collection/KeepCollection.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment12, 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 +4865,8 @@ function KeepCollectionContent({
   query = {},
   pageSize = 20,
   layout = "list",
+  toolbarVariant = "plain",
+  toolbarLayout = "flat",
   urlSync = false,
   urlAdapter,
   archiveScope,
@@ -4796,6 +4874,7 @@ function KeepCollectionContent({
   reorderable = false,
   onReorder,
   features,
+  slots,
   collectionLabels,
   renderItem,
   itemCardProps,
@@ -4839,6 +4918,68 @@ 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(Fragment12, { 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(Fragment12, { 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,
+        role: "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 +4987,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,
           {
@@ -5027,7 +5148,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 Fragment13, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function KeepNoteEditor({
   item,
   label,
@@ -5046,7 +5167,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(Fragment13, { children: [
     /* @__PURE__ */ jsxs20("label", { children: [
       label ?? view.labels.note,
       /* @__PURE__ */ jsx24(
@@ -5160,7 +5281,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 Fragment14, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function KeepTagEditor({
   item,
   availableTags = [],
@@ -5171,7 +5292,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(Fragment14, { children: [
     /* @__PURE__ */ jsxs21("label", { children: [
       view.labels.tags,
       /* @__PURE__ */ jsx25(
@@ -5235,7 +5356,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 +5391,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 Fragment15, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function KeepTourBar({
   navigation: providedNavigation,
   currentId,
@@ -5340,7 +5461,7 @@ function KeepTourBar({
       return resolvedPrev();
     }
   });
-  const body = /* @__PURE__ */ jsxs22(Fragment13, { children: [
+  const body = /* @__PURE__ */ jsxs22(Fragment15, { 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 +5471,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(Fragment15, { children: [
           previousLabel,
           ": ",
           getItemTitle(navigation.prevItem)
@@ -5366,7 +5487,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(Fragment15, { children: [
           nextItemLabel,
           ": ",
           getItemTitle(navigation.nextItem)
@@ -5385,8 +5506,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(Fragment15, { 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 +5986,8 @@ import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function KeepWorkspace({
   preset = "standard",
   modules,
+  surface,
+  sectionGap,
   collectionProps,
   syncStatusProps,
   recoveryProps,
@@ -5893,38 +6016,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 (!hasRenderableContent(content)) 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;