@jungherz-de/notionkit-elements 1.6.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +15 -15
  2. package/dist/components/nk-bookmark.js +69 -0
  3. package/dist/components/nk-btn.js +29 -3
  4. package/dist/components/nk-cmdk.js +1 -1
  5. package/dist/components/nk-copy-field.js +88 -0
  6. package/dist/components/nk-database.js +14 -5
  7. package/dist/components/nk-filter-bar.js +57 -36
  8. package/dist/components/nk-image-picker.js +130 -0
  9. package/dist/components/nk-menu-item.js +10 -6
  10. package/dist/components/nk-menu.js +86 -1
  11. package/dist/components/nk-modal.js +1 -1
  12. package/dist/components/nk-peek.js +122 -0
  13. package/dist/components/nk-segmented.js +19 -0
  14. package/dist/components/nk-sheet.js +97 -0
  15. package/dist/components/nk-sidebar.js +15 -36
  16. package/dist/components/nk-steps.js +61 -0
  17. package/dist/components/shared/{focus-DXrK9oLe.js → focus-BNAChOXO.js} +12 -4
  18. package/dist/notionkit-elements.esm.js +786 -95
  19. package/dist/notionkit-elements.js +791 -94
  20. package/dist/notionkit-elements.min.js +1 -1
  21. package/package.json +6 -6
  22. package/src/components/content/nk-bookmark.js +67 -0
  23. package/src/components/data/nk-database.js +14 -5
  24. package/src/components/data/nk-filter-bar.js +57 -36
  25. package/src/components/forms/nk-btn.js +29 -3
  26. package/src/components/forms/nk-copy-field.js +86 -0
  27. package/src/components/forms/nk-image-picker.js +128 -0
  28. package/src/components/overlays/nk-menu-item.js +10 -6
  29. package/src/components/overlays/nk-menu.js +86 -1
  30. package/src/components/overlays/nk-peek.js +120 -0
  31. package/src/components/overlays/nk-sheet.js +95 -0
  32. package/src/components/page/nk-segmented.js +19 -0
  33. package/src/components/page/nk-steps.js +59 -0
  34. package/src/components/shell/nk-sidebar.js +15 -36
  35. package/src/index.js +10 -0
  36. package/src/util/focus.js +11 -3
package/dist/notionkit-elements.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var NotionKitElements = (function (exports) {
2
2
  'use strict';
3
3
 
4
- // NotionKit v1.6.0 – Constructable Stylesheet
4
+ // NotionKit v1.8.0 – Constructable Stylesheet
5
5
  // Auto-generated by build-styles-js.mjs – do not edit manually.
6
6
 
7
7
  // The :root and [data-theme="dark"] blocks that declare --nk-* …
8
- const tokensCss = ":root{color-scheme:light;--nk-bg:#ffffff;--nk-bg-sidebar:#f9f8f7;--nk-bg-hover:rgba(55,53,47,0.06);--nk-bg-active:rgba(55,53,47,0.08);--nk-bg-callout:#f0efed;--nk-bg-code:#f7f6f3;--nk-bg-card:#ffffff;--nk-bg-input:rgba(242,241,238,0.6);--nk-text:#2c2c2b;--nk-text-secondary:#7d7a75;--nk-text-tertiary:#91918e;--nk-text-sidebar:#5f5e5b;--nk-border:rgba(28,19,1,0.11);--nk-border-strong:rgba(27,21,0,0.19);--nk-accent:#2383e2;--nk-on-accent:#ffffff;--nk-danger:#cd3c3a;--nk-tag-gray-bg:#e3e2e0;--nk-tag-gray-text:#32302c;--nk-tag-brown-bg:#eee0da;--nk-tag-brown-text:#442a1e;--nk-tag-orange-bg:#fadec9;--nk-tag-orange-text:#49290e;--nk-tag-yellow-bg:#fdecc8;--nk-tag-yellow-text:#402c1b;--nk-tag-green-bg:#dbeddb;--nk-tag-green-text:#1c3829;--nk-tag-blue-bg:#d3e5ef;--nk-tag-blue-text:#183347;--nk-tag-purple-bg:#e8deee;--nk-tag-purple-text:#412454;--nk-tag-pink-bg:#f5e0e9;--nk-tag-pink-text:#4c2337;--nk-tag-red-bg:#ffe2dd;--nk-tag-red-text:#5d1715;--nk-tint-gray:#f1f1ef;--nk-color-gray:#787774;--nk-tint-brown:#f4eeee;--nk-color-brown:#9f6b53;--nk-tint-orange:#fbecdd;--nk-color-orange:#d9730d;--nk-tint-yellow:#fbf3db;--nk-color-yellow:#cb912f;--nk-tint-green:#edf3ec;--nk-color-green:#448361;--nk-tint-blue:#e7f3f8;--nk-color-blue:#337ea9;--nk-tint-purple:#f8f3fc;--nk-color-purple:#9065b0;--nk-tint-pink:#fcf1f6;--nk-color-pink:#c14c8a;--nk-tint-red:#fdebec;--nk-color-red:#cd3c3a;--nk-decor-purple:#9065b0;--nk-decor-blue:#529cca;--nk-decor-orange:#d9730d;--nk-scrim:rgba(15,15,15,0.6);--nk-scrim-soft:rgba(15,15,15,0.5);--nk-sidebar-width:260px;--nk-tab-bar-height:58px;--nk-radius:6px;--nk-font:ui-sans-serif,-apple-system,\"Segoe UI\",Inter,Helvetica,Arial,sans-serif;--nk-font-mono:ui-monospace,\"SF Mono\",Menlo,Consolas,monospace;--nk-shadow-menu:rgba(15,15,15,0.05) 0px 0px 0px 1px,rgba(15,15,15,0.1) 0px 3px 6px,rgba(15,15,15,0.2) 0px 9px 24px;--nk-shadow-card:0 1px 2px rgba(0,0,0,0.04);--nk-shadow-btn:inset 0 0 0 1px rgba(15,15,15,0.1),0 1px 2px rgba(15,15,15,0.1);--nk-shadow-knob:0 1px 2px rgba(0,0,0,0.2);--nk-shadow-segment:0 1px 2px rgba(0,0,0,0.08)}[data-theme=dark]{color-scheme:dark;--nk-bg:#191919;--nk-bg-sidebar:#202020;--nk-bg-hover:rgba(255,255,255,0.055);--nk-bg-active:rgba(255,255,255,0.08);--nk-bg-callout:#252525;--nk-bg-code:#202020;--nk-bg-card:#202020;--nk-bg-input:rgba(255,255,255,0.055);--nk-text:rgba(255,255,255,0.81);--nk-text-secondary:rgba(255,255,255,0.46);--nk-text-tertiary:rgba(255,255,255,0.32);--nk-text-sidebar:rgba(255,255,255,0.62);--nk-border:rgba(255,255,255,0.094);--nk-border-strong:rgba(255,255,255,0.16);--nk-accent:#529CCA;--nk-danger:#df5452;--nk-tag-gray-bg:#373737;--nk-tag-gray-text:rgba(255,255,255,0.85);--nk-tag-brown-bg:#603b2c;--nk-tag-brown-text:rgba(255,255,255,0.85);--nk-tag-orange-bg:#854c1d;--nk-tag-orange-text:rgba(255,255,255,0.85);--nk-tag-yellow-bg:#89632a;--nk-tag-yellow-text:rgba(255,255,255,0.85);--nk-tag-green-bg:#2b593f;--nk-tag-green-text:rgba(255,255,255,0.85);--nk-tag-blue-bg:#28456c;--nk-tag-blue-text:rgba(255,255,255,0.85);--nk-tag-purple-bg:#492f64;--nk-tag-purple-text:rgba(255,255,255,0.85);--nk-tag-pink-bg:#69314c;--nk-tag-pink-text:rgba(255,255,255,0.85);--nk-tag-red-bg:#6e3630;--nk-tag-red-text:rgba(255,255,255,0.85);--nk-tint-gray:#252525;--nk-color-gray:#9b9b9b;--nk-tint-brown:#2e2724;--nk-color-brown:#ba856f;--nk-tint-orange:#36291f;--nk-color-orange:#c77d48;--nk-tint-yellow:#372e20;--nk-color-yellow:#ca8f3d;--nk-tint-green:#242b26;--nk-color-green:#529e72;--nk-tint-blue:#1f282d;--nk-color-blue:#5e87c9;--nk-tint-purple:#2a2430;--nk-color-purple:#9d68d3;--nk-tint-pink:#2e2328;--nk-color-pink:#d15796;--nk-tint-red:#332523;--nk-color-red:#df5452;--nk-shadow-menu:rgba(15,15,15,0.2) 0px 0px 0px 1px,rgba(15,15,15,0.4) 0px 3px 6px,rgba(15,15,15,0.6) 0px 9px 24px;--nk-shadow-card:none;--nk-shadow-btn:inset 0 0 0 1px rgba(255,255,255,0.1),0 1px 2px rgba(0,0,0,0.3)}";
8
+ const tokensCss = ":root{color-scheme:light;--nk-bg: #ffffff;--nk-bg-sidebar: #f9f8f7;--nk-bg-hover: rgba(55,53,47,.06);--nk-bg-active: rgba(55,53,47,.08);--nk-bg-callout: #f0efed;--nk-bg-code: #f7f6f3;--nk-bg-card: #ffffff;--nk-bg-input: rgba(242,241,238,.6);--nk-text: #2c2c2b;--nk-text-secondary: #7d7a75;--nk-text-tertiary: #91918e;--nk-text-sidebar: #5f5e5b;--nk-border: rgba(28,19,1,.11);--nk-border-strong: rgba(27,21,0,.19);--nk-accent: #2383e2;--nk-on-accent: #ffffff;--nk-danger: #cd3c3a;--nk-tag-gray-bg: #e3e2e0;--nk-tag-gray-text: #32302c;--nk-tag-brown-bg: #eee0da;--nk-tag-brown-text: #442a1e;--nk-tag-orange-bg: #fadec9;--nk-tag-orange-text: #49290e;--nk-tag-yellow-bg: #fdecc8;--nk-tag-yellow-text: #402c1b;--nk-tag-green-bg: #dbeddb;--nk-tag-green-text: #1c3829;--nk-tag-blue-bg: #d3e5ef;--nk-tag-blue-text: #183347;--nk-tag-purple-bg: #e8deee;--nk-tag-purple-text: #412454;--nk-tag-pink-bg: #f5e0e9;--nk-tag-pink-text: #4c2337;--nk-tag-red-bg: #ffe2dd;--nk-tag-red-text: #5d1715;--nk-tint-gray: #f1f1ef;--nk-color-gray: #787774;--nk-tint-brown: #f4eeee;--nk-color-brown: #9f6b53;--nk-tint-orange: #fbecdd;--nk-color-orange: #d9730d;--nk-tint-yellow: #fbf3db;--nk-color-yellow: #cb912f;--nk-tint-green: #edf3ec;--nk-color-green: #448361;--nk-tint-blue: #e7f3f8;--nk-color-blue: #337ea9;--nk-tint-purple: #f8f3fc;--nk-color-purple: #9065b0;--nk-tint-pink: #fcf1f6;--nk-color-pink: #c14c8a;--nk-tint-red: #fdebec;--nk-color-red: #cd3c3a;--nk-decor-purple: #9065b0;--nk-decor-blue: #529cca;--nk-decor-orange: #d9730d;--nk-scrim: rgba(15,15,15,.6);--nk-scrim-soft: rgba(15,15,15,.5);--nk-sidebar-width: 260px;--nk-tab-bar-height: 58px;--nk-radius: 6px;--nk-font: ui-sans-serif, -apple-system, \"Segoe UI\", Inter, Helvetica, Arial, sans-serif;--nk-font-mono: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;--nk-shadow-menu: rgba(15,15,15,.05) 0px 0px 0px 1px, rgba(15,15,15,.1) 0px 3px 6px, rgba(15,15,15,.2) 0px 9px 24px;--nk-shadow-card: 0 1px 2px rgba(0,0,0,.04);--nk-shadow-btn: inset 0 0 0 1px rgba(15,15,15,.1), 0 1px 2px rgba(15,15,15,.1);--nk-shadow-knob: 0 1px 2px rgba(0,0,0,.2);--nk-shadow-segment: 0 1px 2px rgba(0,0,0,.08)}[data-theme=dark]{color-scheme:dark;--nk-bg: #191919;--nk-bg-sidebar: #202020;--nk-bg-hover: rgba(255,255,255,.055);--nk-bg-active: rgba(255,255,255,.08);--nk-bg-callout: #252525;--nk-bg-code: #202020;--nk-bg-card: #202020;--nk-bg-input: rgba(255,255,255,.055);--nk-text: rgba(255,255,255,.81);--nk-text-secondary: rgba(255,255,255,.46);--nk-text-tertiary: rgba(255,255,255,.32);--nk-text-sidebar: rgba(255,255,255,.62);--nk-border: rgba(255,255,255,.094);--nk-border-strong: rgba(255,255,255,.16);--nk-accent: #529CCA;--nk-danger: #df5452;--nk-tag-gray-bg: #373737;--nk-tag-gray-text: rgba(255,255,255,.85);--nk-tag-brown-bg: #603b2c;--nk-tag-brown-text: rgba(255,255,255,.85);--nk-tag-orange-bg: #854c1d;--nk-tag-orange-text: rgba(255,255,255,.85);--nk-tag-yellow-bg: #89632a;--nk-tag-yellow-text: rgba(255,255,255,.85);--nk-tag-green-bg: #2b593f;--nk-tag-green-text: rgba(255,255,255,.85);--nk-tag-blue-bg: #28456c;--nk-tag-blue-text: rgba(255,255,255,.85);--nk-tag-purple-bg: #492f64;--nk-tag-purple-text: rgba(255,255,255,.85);--nk-tag-pink-bg: #69314c;--nk-tag-pink-text: rgba(255,255,255,.85);--nk-tag-red-bg: #6e3630;--nk-tag-red-text: rgba(255,255,255,.85);--nk-tint-gray: #252525;--nk-color-gray: #9b9b9b;--nk-tint-brown: #2e2724;--nk-color-brown: #ba856f;--nk-tint-orange: #36291f;--nk-color-orange: #c77d48;--nk-tint-yellow: #372e20;--nk-color-yellow: #ca8f3d;--nk-tint-green: #242b26;--nk-color-green: #529e72;--nk-tint-blue: #1f282d;--nk-color-blue: #5e87c9;--nk-tint-purple: #2a2430;--nk-color-purple: #9d68d3;--nk-tint-pink: #2e2328;--nk-color-pink: #d15796;--nk-tint-red: #332523;--nk-color-red: #df5452;--nk-shadow-menu: rgba(15,15,15,.2) 0px 0px 0px 1px, rgba(15,15,15,.4) 0px 3px 6px, rgba(15,15,15,.6) 0px 9px 24px;--nk-shadow-card: none;--nk-shadow-btn: inset 0 0 0 1px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.3)}";
9
9
 
10
10
  // … and everything else, in two pieces around where they were.
11
- const componentsHead = "[class*=nk-],[class*=nk-] *,[class*=nk-] ::after,[class*=nk-] ::before,[class*=nk-]::after,[class*=nk-]::before{box-sizing:border-box}[class*=nk-] :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,ul,ol,li){margin:0;padding:0}[class*=nk-] :where(ul,ol){list-style:none}:where(button,input,select,textarea)[class*=nk-],[class*=nk-] :where(button,input,select,textarea,option,optgroup,fieldset,legend){margin:0;padding:0}[class*=nk-][hidden]:not([hidden=until-found i]){display:none!important}::slotted([hidden]:not([hidden=until-found i])){display:none!important}";
12
- const componentsTail = ".nk-body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:auto;transition:background .25s,color .25s}.nk-app{display:flex;height:100vh;height:100dvh;overflow:hidden}.nk-sidebar{width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));min-width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));padding-left:env(safe-area-inset-left,0);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s}.nk-workspace{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:6px 8px 2px;border-radius:var(--nk-radius);cursor:pointer;font-weight:500;user-select:none}.nk-workspace:hover{background:var(--nk-bg-hover)}.nk-workspace .avatar,.nk-workspace ::slotted(.avatar),.nk-workspace ::slotted([slot=avatar]){width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-workspace .chev{margin-left:auto;color:var(--nk-text-tertiary);font-size:11px}.nk-sidebar-scroll{flex:1;overflow-y:auto;padding:4px 8px 16px}.nk-sidebar-scroll::-webkit-scrollbar{width:8px}.nk-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:4px}.nk-section-label{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--nk-text-tertiary);padding:14px 10px 4px;display:flex;justify-content:space-between;align-items:center}.nk-section-label .plus{cursor:pointer;border-radius:4px;padding:0 4px;font-size:13px;opacity:0;transition:opacity .15s}.nk-section-label:hover .plus{opacity:1}.nk-section-label .plus:hover{background:var(--nk-bg-hover)}.nk-sidebar-footer{padding:8px;border-top:1px solid var(--nk-border);color:var(--nk-text-sidebar);font-size:14px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:44px;display:flex;align-items:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:8px;flex-shrink:0}.nk-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px}.nk-breadcrumb .crumb,.nk-breadcrumb ::slotted(.crumb){padding:2px 6px;border-radius:4px;cursor:pointer;color:var(--nk-text-sidebar);display:flex;align-items:center;gap:5px}.nk-breadcrumb .crumb:hover{background:var(--nk-bg-hover)}a.crumb{text-decoration:none}.nk-breadcrumb .crumb.current,.nk-breadcrumb ::slotted(.crumb.current){color:var(--nk-text)}.nk-breadcrumb .sep{color:var(--nk-text-tertiary);font-size:12px}.nk-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:4px}.nk-topbar-btn{padding:4px 8px;border-radius:var(--nk-radius);cursor:pointer;color:var(--nk-text-sidebar);font-size:14px;user-select:none;border:none;background:0 0;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn ::slotted(svg),.nk-topbar-btn svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{font-size:14px;padding:4px 8px}.nk-topbar-actions ::slotted(.nk-topbar-meta),.nk-topbar-meta{padding:4px 8px;font-size:12px;color:var(--nk-text-tertiary);white-space:nowrap}.nk-theme-toggle{font-size:15px;width:30px;height:28px;padding:0}.nk-tab-bar{display:none;flex:none;align-items:stretch;gap:2px;position:sticky;bottom:0;z-index:30;box-sizing:border-box;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)));padding:6px max(4px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.fixed{position:fixed;left:0;right:0;bottom:0}.nk-tab-bar-spacer{display:none;flex:none;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)))}.nk-tab-bar.always.fixed+.nk-tab-bar-spacer{display:block}.nk-tab-bar.floating{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:var(--nk-tab-bar-height);padding:6px;border:1px solid var(--nk-border);border-radius:16px;box-shadow:var(--nk-shadow-menu)}.nk-tab-bar-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border:none;border-radius:var(--nk-radius);background:0 0;font-family:inherit;font-size:10.5px;line-height:1.2;color:var(--nk-text-secondary);text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.nk-tab-bar-item:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-tab-bar-item.active{color:var(--nk-accent)}.nk-tab-bar-item:disabled{opacity:.5;cursor:not-allowed}.nk-tab-bar-item .icon,.nk-tab-bar-item ::slotted([slot=icon]){font-size:20px;line-height:1}.nk-tab-bar-item .label,.nk-tab-bar-item ::slotted(.label){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-tree-item{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border-radius:var(--nk-radius);cursor:pointer;user-select:none;color:var(--nk-text-sidebar);position:relative;min-height:28px}.nk-tree-item:hover{background:var(--nk-bg-hover)}.nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-tree-item.compact{min-height:26px}.nk-tree-item .icon,.nk-tree-item ::slotted(.icon),.nk-tree-item ::slotted([slot=icon]){font-size:15px;width:20px;text-align:center;flex-shrink:0}.nk-tree-item .label,.nk-tree-item ::slotted(.label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-tree-item .actions{margin-left:auto;display:none;gap:2px;color:var(--nk-text-tertiary)}.nk-tree-item:hover .actions{display:flex}.nk-tree-item .actions span{padding:0 3px;border-radius:3px;font-size:12px}.nk-tree-item .actions span:hover{background:var(--nk-bg-active)}.nk-tree-children{margin-left:14px;border-left:1px solid var(--nk-border);padding-left:4px;overflow:hidden}.nk-tree-children.collapsed{display:none}.nk-toggle-arrow{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--nk-text-tertiary);border-radius:3px;transition:transform .15s}.nk-toggle-arrow.open{transform:rotate(90deg)}.nk-kbd-hint{margin-left:auto;display:flex;gap:3px;align-items:center}.nk-kbd{font-family:inherit;font-size:10.5px;background:var(--nk-bg-callout);border:1px solid var(--nk-border-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px}.nk-page-scroll{flex:1;overflow-y:auto}.nk-page-scroll::-webkit-scrollbar{width:10px}.nk-page-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-cover{height:200px;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--nk-decor-purple) 35%,transparent),transparent 55%),radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--nk-decor-blue) 35%,transparent),transparent 55%),radial-gradient(ellipse at 60% 90%,color-mix(in srgb,var(--nk-decor-orange) 25%,transparent),transparent 55%),var(--nk-bg-callout)}.nk-cover ::slotted(img),.nk-cover>img{display:block;width:100%;height:100%;object-fit:cover}.nk-page{max-width:760px;margin:0 auto;padding:24px max(64px,env(safe-area-inset-right,0px)) 120px max(64px,env(safe-area-inset-left,0px));font-size:16px;line-height:1.5}.nk-page.full{max-width:none}.nk-page.small{font-size:14px}.nk-cover+.nk-page,.nk-page.covered{padding-top:0}.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=icon]),.nk-page-icon{font-size:64px;line-height:1;margin-top:0;cursor:pointer;user-select:none;display:inline-block}.nk-cover+.nk-page .nk-page-icon,.nk-cover+.nk-page ::slotted(.nk-page-icon),.nk-cover+.nk-page ::slotted([slot=icon]),.nk-page.covered .nk-page-icon,.nk-page.covered ::slotted(.nk-page-icon),.nk-page.covered ::slotted([slot=icon]){margin-top:-42px}.nk-page-title{font-size:40px;font-weight:700;line-height:1.2;margin:8px 0 4px;outline:0;letter-spacing:0}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-props{display:flex;flex-direction:column;margin-bottom:20px;font-size:14px;line-height:1.5}.nk-prop{display:flex;align-items:flex-start;min-width:0}.nk-prop .p-name{flex:0 0 160px;min-width:0;min-height:34px;padding:0 6px;display:flex;align-items:center;gap:6px;overflow:hidden;border-radius:var(--nk-radius);color:var(--nk-text-secondary);white-space:nowrap;user-select:none}.nk-prop .p-icon,.nk-prop ::slotted([slot=icon]){width:16px;flex-shrink:0;text-align:center;font-size:13px}.nk-prop .p-value{flex:1 1 auto;min-width:0;min-height:34px;padding:5px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;border-radius:var(--nk-radius);overflow-wrap:anywhere}.nk-prop .p-name:hover,.nk-prop .p-value:hover{background:var(--nk-bg-hover)}.nk-page p.lead{font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:1.5em;font-weight:600;line-height:1.3;margin:32px 0 10px;display:flex;align-items:center;gap:8px}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:16px 16px 16px 12px;margin:16px 0;line-height:1.5}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=icon]){font-size:17px}.nk-todo{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.nk-todo input[type=checkbox]{appearance:none;width:16px;height:16px;margin-top:3px;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;flex-shrink:0;position:relative;background:var(--nk-bg)}.nk-todo input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-todo input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-todo input:checked+span{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-todo input:disabled{opacity:.5;cursor:not-allowed}.nk-toggle{margin:6px 0}.nk-toggle summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--nk-radius);font-weight:500;user-select:none}.nk-toggle summary::-webkit-details-marker{display:none}.nk-toggle summary:hover{background:var(--nk-bg-hover)}.nk-toggle summary::before{content:\"▸\";color:var(--nk-text-tertiary);font-size:11px;transition:transform .15s;display:inline-block}.nk-toggle[open] summary::before{transform:rotate(90deg)}.nk-toggle .toggle-body,.nk-toggle ::slotted(.toggle-body){padding:4px 0 8px 26px;color:var(--nk-text-secondary);line-height:1.55}.nk-divider{border:none;border-top:1px solid var(--nk-border);margin:24px 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:16px 0;color:var(--nk-text-secondary);line-height:1.5}.nk-quote .q-cite{display:block;margin-top:6px;font-size:12.5px;color:var(--nk-text-tertiary)}.nk-mention{display:inline-flex;align-items:center;gap:4px;padding:0 4px;border-radius:4px;font-weight:500;cursor:pointer;white-space:nowrap}.nk-mention:hover{background:var(--nk-bg-hover)}.nk-mention.person{color:var(--nk-text)}.nk-mention.person .mini-avatar,.nk-mention.person .nk-avatar,.nk-mention.person ::slotted(.mini-avatar),.nk-mention.person ::slotted([slot=avatar]){width:16px;height:16px;border-radius:50%;color:var(--nk-on-accent);font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.nk-mention.page{color:var(--nk-text-secondary);text-decoration:underline;text-decoration-color:var(--nk-border-strong);text-underline-offset:2px}.nk-mention.date{color:var(--nk-color-orange)}.nk-inline-code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-code{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:20px 24px;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;margin:14px 0;overflow-x:auto;color:var(--nk-text-secondary);white-space:pre;position:relative}.nk-code .lang{position:absolute;top:6px;right:10px;font-size:11px;color:var(--nk-text-tertiary);font-family:var(--nk-font)}.nk-code .tag,.nk-code ::slotted(.tag){color:var(--nk-accent)}.nk-code .attr,.nk-code ::slotted(.attr){color:var(--nk-color-orange)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;align-items:center;padding:0 0 6px;margin-bottom:0;font-size:14px}.nk-db-tab{padding:4px 8px;cursor:pointer;color:var(--nk-text-secondary);border-radius:var(--nk-radius);user-select:none;line-height:20px;display:flex;align-items:center;gap:6px}.nk-db-tab:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-db-tab.active{color:var(--nk-text);background:var(--nk-bg-active);font-weight:500}.nk-db-tab .badge,.nk-db-tab ::slotted(.badge){background:var(--nk-bg-callout);border-radius:8px;font-size:11px;padding:0 6px;color:var(--nk-text-tertiary)}.nk-table-wrap{overflow-x:auto}.nk-table{width:100%;border-collapse:collapse;font-size:14px}.nk-table th{text-align:left;font-weight:400;color:var(--nk-text-secondary);height:36px;padding:0 8px;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);font-size:14px;white-space:nowrap;user-select:none;cursor:pointer}.nk-table th:hover{background:var(--nk-bg-hover)}.nk-table th .th-icon,.nk-table th ::slotted(.th-icon){margin-right:6px;font-size:13px;color:var(--nk-text-tertiary)}.nk-table td{height:36px;padding:6px 8px;line-height:1.5;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table td:last-child,.nk-table th:last-child{border-right:none}.nk-table td.wrap,.nk-table.wrap td{white-space:normal;vertical-align:top}.nk-table tbody tr:hover{background:var(--nk-bg-hover)}.nk-table .row-title{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}.nk-table .row-title:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary)}.nk-table .date-cell{color:var(--nk-text-secondary)}.nk-table .num{text-align:right;font-variant-numeric:tabular-nums}.nk-table .person-cell{display:flex;align-items:center;gap:6px;color:var(--nk-text-secondary)}.nk-table .person-cell .mini-avatar,.nk-table .person-cell ::slotted(.mini-avatar){width:20px;height:20px;border-radius:50%;font-size:10px;color:var(--nk-on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:600}.nk-new-row,.nk-table .new-row{color:var(--nk-text-tertiary);cursor:pointer;padding:8px;display:flex;align-items:center;gap:7px;font-size:14px}.nk-new-row:hover,.nk-table .new-row:hover{background:var(--nk-bg-hover)}.nk-tag{display:inline-flex;align-items:center;max-width:100%;height:20px;padding:0 6px;border-radius:3px;font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.gray{background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.brown{background:var(--nk-tag-brown-bg);color:var(--nk-tag-brown-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.yellow{background:var(--nk-tag-yellow-bg);color:var(--nk-tag-yellow-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-tag.pink{background:var(--nk-tag-pink-bg);color:var(--nk-tag-pink-text)}.nk-tag.red{background:var(--nk-tag-red-bg);color:var(--nk-tag-red-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tint-blue);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-color-blue);border-radius:3px}.nk-progress.wide{width:100%;flex:1 1 60px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px;white-space:nowrap}.nk-list{display:flex;flex-direction:column;font-size:14px}.nk-list-item{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;min-height:36px;padding:4px 6px;border-bottom:1px solid var(--nk-border);color:inherit;text-decoration:none;cursor:pointer}.nk-list-item:hover{background:var(--nk-bg-hover)}.nk-list ::slotted(.nk-list-item:last-child),.nk-list-item.last,.nk-list>.nk-list-item:last-child{border-bottom:none}.nk-list-item .l-icon,.nk-list-item ::slotted([slot=icon]){width:20px;flex-shrink:0;text-align:center;font-size:15px}.nk-list-item .l-title,.nk-list-item ::slotted(.l-title){flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-list-item .l-meta,.nk-list-item ::slotted(.l-meta){flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--nk-text-secondary);white-space:nowrap}.nk-board{display:none;gap:12px;padding:14px 2px;overflow-x:auto}.nk-board.active{display:flex}.nk-board-col{min-width:220px;width:220px;flex-shrink:0}.nk-board-col-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13.5px;font-weight:500}.nk-board-col-header .count{color:var(--nk-text-tertiary);font-weight:400}.nk-card{background:var(--nk-bg-card);border:1px solid var(--nk-border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--nk-shadow-card);transition:border-color .15s}.nk-card:hover{border-color:var(--nk-border-strong)}.nk-card .card-title,.nk-card ::slotted(.card-title){font-weight:500;margin-bottom:7px;display:flex;gap:6px;align-items:center}.nk-card .card-meta,.nk-card ::slotted(.card-meta){display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--nk-text-secondary)}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0}.nk-field .f-label,.nk-field ::slotted(.f-label),.nk-field ::slotted([slot=label]){font-size:14px}.nk-field .f-desc,.nk-field ::slotted(.f-desc),.nk-field ::slotted([slot=desc]){font-size:12px;color:var(--nk-text-secondary);margin-top:2px;line-height:1.45}.nk-field .f-control,.nk-field ::slotted(.f-control){flex-shrink:0}.nk-field.stacked,.nk-fields>.nk-field{flex-direction:column;align-items:stretch;gap:6px;min-width:0}.nk-field.stacked .f-control,.nk-field.stacked .nk-input,.nk-field.stacked .nk-select,.nk-field.stacked .nk-textarea,.nk-fields>.nk-field .f-control,.nk-fields>.nk-field .nk-input,.nk-fields>.nk-field .nk-select,.nk-fields>.nk-field .nk-textarea{width:100%;min-width:0}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px;min-width:0}.nk-field.compact .f-label,.nk-field.compact ::slotted([slot=label]),.nk-fields>.nk-field .f-label,.nk-fields>.nk-field ::slotted([slot=label]){font-size:12px;color:var(--nk-text-tertiary)}.nk-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px;padding:9px 0}.nk-fields>.nk-field{min-width:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:5px 10px;outline:0;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:hover,.nk-select:hover,.nk-textarea:hover{border-color:var(--nk-border-strong)}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:color-mix(in srgb,var(--nk-accent) 60%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 30%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-select.wide,.nk-textarea.wide{width:100%;min-width:0}.nk-input[type=date],.nk-input[type=datetime-local],.nk-input[type=month],.nk-input[type=time]{appearance:none}.nk-input::-webkit-date-and-time-value{text-align:start;min-height:1lh}.nk-select.compact{min-width:120px}.nk-textarea{resize:vertical;min-height:70px;line-height:1.5}.nk-select{appearance:none;cursor:pointer;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--nk-text-tertiary) 50%),linear-gradient(135deg,var(--nk-text-tertiary) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 10px) 55%;background-size:4px 4px;background-repeat:no-repeat}.nk-btn{font-family:inherit;font-size:14px;line-height:20px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:3px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.nk-btn ::slotted(svg),.nk-btn svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-btn.primary{background:var(--nk-accent);color:var(--nk-on-accent)}.nk-btn.primary:hover{opacity:.88}.nk-btn.secondary{background:var(--nk-bg-card);color:var(--nk-text);box-shadow:var(--nk-shadow-btn)}.nk-btn.secondary:hover{background:color-mix(in srgb,var(--nk-bg-card),var(--nk-text) 6%)}.nk-btn.danger{background:var(--nk-bg-card);color:var(--nk-danger);box-shadow:var(--nk-shadow-btn)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,var(--nk-bg-card))}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:1px 8px;font-size:13px;line-height:20px}a.nk-btn{text-decoration:none}.nk-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nk-switch{position:relative;width:34px;height:20px;flex-shrink:0;appearance:none;border:none;cursor:pointer;border-radius:20px;background:var(--nk-border-strong);transition:background .2s}.nk-switch::after{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--nk-on-accent);transition:transform .2s;box-shadow:var(--nk-shadow-knob)}.nk-switch:checked,.nk-switch[aria-checked=true]{background:var(--nk-accent)}.nk-switch:checked::after,.nk-switch[aria-checked=true]::after{transform:translateX(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-switch-label{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label>.nk-switch{font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 20px)/ 2))}.nk-switch-label>span{padding-top:max(0px,calc((20px - 1lh)/ 2))}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:14px;cursor:pointer}.nk-check input{appearance:none;width:16px;height:16px;flex-shrink:0;border:1.4px solid var(--nk-border-strong);border-radius:3px;cursor:pointer;position:relative;background:var(--nk-bg);font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 16px)/ 2))}.nk-check input[type=radio]{border-radius:50%}.nk-check input:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-check input:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:10.5px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-check input[type=radio]:checked::after{content:\"●\";font-size:7px}.nk-check input:disabled{opacity:.5;cursor:not-allowed}.nk-check input:disabled+*{opacity:.6}.nk-slider{width:210px;accent-color:var(--nk-accent);cursor:pointer}.nk-slider-value{font-size:12.5px;color:var(--nk-text-tertiary);margin-top:3px}.nk-profile-row{display:flex;align-items:center;gap:14px;padding:8px 0}.nk-profile-row .big-avatar,.nk-profile-row ::slotted(.big-avatar),.nk-profile-row ::slotted([slot=avatar]){width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;display:flex;align-items:flex-start;gap:11px;transition:border-color .15s,background .15s}.nk-model-card:hover{background:var(--nk-bg-hover)}.nk-model-card.selected{border-color:var(--nk-accent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-model-card .m-radio{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:2px;border:1.4px solid var(--nk-border-strong);position:relative}.nk-model-card.selected .m-radio{border-color:var(--nk-accent)}.nk-model-card.selected .m-radio::after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--nk-accent)}.nk-model-card .m-name,.nk-model-card ::slotted(.m-name),.nk-model-card ::slotted([slot=title]){font-weight:500;font-size:14px;display:flex;align-items:center;gap:7px}.nk-model-card .m-desc,.nk-model-card ::slotted(.m-desc),.nk-model-card ::slotted([slot=desc]){font-size:12px;color:var(--nk-text-secondary);margin-top:2px;line-height:1.45}.nk-danger-zone{border:1px solid color-mix(in srgb,var(--nk-danger) 40%,transparent);border-radius:8px;padding:14px 16px;margin-top:26px}.nk-danger-zone .dz-title{color:var(--nk-danger);font-weight:600;font-size:13px;margin-bottom:8px}.nk-member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--nk-border)}.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-list>.nk-member-row:last-child,.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row .nk-avatar,.nk-member-row ::slotted(.mini-avatar),.nk-member-row ::slotted([slot=avatar]){width:28px;height:28px;border-radius:50%;color:var(--nk-on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.nk-member-row>:has(> .m-mail){min-width:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-member-row .nk-select{min-width:120px;margin-left:auto}.nk-member-row ::slotted([slot=role]){margin-left:auto}.nk-modal-backdrop{position:fixed;inset:0;background:var(--nk-scrim);padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(1150px,92vw);height:min(715px,86vh);max-width:100%;max-height:100%;background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);display:flex;overflow:hidden;transform:scale(.98) translateY(6px);transition:transform .2s}.nk-modal-backdrop.open .nk-modal{transform:scale(1) translateY(0)}.nk-settings-nav{width:240px;min-width:240px;background:var(--nk-bg-sidebar);border-right:1px solid var(--nk-border);padding:10px 8px;overflow-y:auto;flex-shrink:0}.nk-settings-user{display:flex;align-items:center;gap:9px;padding:6px 10px 12px;margin-bottom:4px}.nk-settings-user .avatar,.nk-settings-user ::slotted(.avatar),.nk-settings-user ::slotted([slot=avatar]){width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}.nk-settings-user .name{font-weight:500;font-size:14px}.nk-settings-user .mail{font-size:12px;color:var(--nk-text-secondary)}.nk-settings-nav .nk-tree-item{min-height:28px}.nk-settings-nav .nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-settings-content{flex:1;overflow-y:auto;padding:36px 60px 80px;min-width:0}.nk-settings-content::-webkit-scrollbar{width:10px}.nk-settings-content::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-settings-pane{display:none;max-width:800px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:20px}.nk-settings-pane>h3{font-size:16px;font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--nk-border);margin:30px 0 12px}.nk-settings-pane ::slotted(h2){font-size:22px;font-weight:600;line-height:1.3;padding:0!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:16px;font-weight:500;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 8px!important;margin:30px 0 12px!important}.nk-pop{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:10px;width:296px}.nk-emoji-search{width:100%;font-family:inherit;font-size:14px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:6px 10px;outline:0;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid ::slotted(span),.nk-emoji-grid span{font-size:18px;text-align:center;padding:4px 0;border-radius:5px;cursor:pointer;user-select:none}.nk-emoji-grid span:hover{background:var(--nk-bg-hover)}.nk-emoji-cats{display:flex;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nk-border)}.nk-emoji-cats span{font-size:14px;padding:3px 7px;border-radius:5px;cursor:pointer;color:var(--nk-text-tertiary);filter:grayscale(1);opacity:.6}.nk-emoji-cats span.active,.nk-emoji-cats span:hover{filter:none;opacity:1;background:var(--nk-bg-hover)}.nk-menu{padding:5px;width:230px}.nk-menu-item{display:flex;align-items:center;gap:9px;padding:4px 8px;min-height:28px;border-radius:5px;cursor:pointer;font-size:14px;user-select:none}.nk-menu-item:hover{background:var(--nk-bg-hover)}.nk-menu-item .m-icon,.nk-menu-item ::slotted(.m-icon),.nk-menu-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-menu-item .m-shortcut,.nk-menu-item ::slotted(.m-shortcut){margin-left:auto;font-size:12px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-item>.nk-switch{margin-left:auto}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:5px 8px 2px}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding:max(14vh,env(safe-area-inset-top,0px)) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);z-index:110;opacity:0;pointer-events:none;transition:opacity .18s}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{max-width:100%;width:min(560px,92vw);background:var(--nk-bg);border-radius:12px;box-shadow:var(--nk-shadow-menu);overflow:hidden;transform:scale(.98);transition:transform .18s}.nk-cmdk-backdrop.open .nk-cmdk{transform:scale(1)}.nk-cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nk-border)}.nk-cmdk-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:16px;color:var(--nk-text)}.nk-cmdk-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-cmdk-list{max-height:320px;overflow-y:auto;padding:6px}.nk-cmdk-group{font-size:12px;color:var(--nk-text-tertiary);padding:8px 10px 3px}.nk-cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;user-select:none}.nk-cmdk-item.selected{background:var(--nk-bg-active)}.nk-cmdk-item .m-icon,.nk-cmdk-item ::slotted(.m-icon),.nk-cmdk-item ::slotted([slot=icon]){width:17px;text-align:center;font-size:14px}.nk-cmdk-item .m-shortcut,.nk-cmdk-item ::slotted(.m-shortcut){margin-left:auto;font-size:12px;color:var(--nk-text-tertiary)}.nk-cmdk-empty{padding:30px;text-align:center;color:var(--nk-text-tertiary);font-size:13.5px}.nk-cmdk-footer{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--nk-border);font-size:11.5px;color:var(--nk-text-tertiary)}.nk-toast{position:fixed;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));left:50%;transform:translateX(-50%) translateY(80px);z-index:120;width:max-content;max-width:calc(100% - 32px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:12px 0}.nk-g-item>h4{font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.nk-g-item ::slotted(h4){font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px!important}.nk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);font-size:14px}.nk-tab{padding:7px 11px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}.nk-tab:hover{color:var(--nk-text)}.nk-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-tab-panel{padding:12px 2px;color:var(--nk-text-secondary);line-height:1.55;font-size:14px}.nk-template-btn{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:8px 12px;cursor:pointer;margin-bottom:6px;text-align:left}.nk-template-btn:hover{background:var(--nk-bg-hover)}.nk-stats{display:flex;gap:10px}.nk-stat{flex:1;border:1px solid var(--nk-border);border-radius:8px;padding:12px 14px}.nk-stat .s-label,.nk-stat ::slotted(.s-label),.nk-stat ::slotted([slot=label]){font-size:12px;color:var(--nk-text-secondary);margin-bottom:4px}.nk-stat .s-value,.nk-stat ::slotted(.s-value),.nk-stat ::slotted([slot=value]){font-size:22px;font-weight:600;letter-spacing:-.01em}.nk-stat .s-delta,.nk-stat ::slotted(.s-delta),.nk-stat ::slotted([slot=delta]){font-size:12px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=delta].up){color:var(--nk-color-green)}.nk-stat .s-delta.down,.nk-stat ::slotted(.s-delta.down),.nk-stat ::slotted([slot=delta].down){color:var(--nk-danger)}.nk-synced{border:1.5px solid color-mix(in srgb,var(--nk-danger) 55%,transparent);border-radius:8px;padding:12px 14px;position:relative;margin:8px 0}.nk-synced .synced-badge{position:absolute;top:-9px;right:10px;font-size:11px;background:var(--nk-danger);color:var(--nk-on-accent);border-radius:8px;padding:1px 8px}.nk-segmented{display:inline-flex;background:var(--nk-bg-callout);border-radius:7px;padding:2px}.nk-segmented button{font-family:inherit;font-size:14px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:14px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button.active),.nk-segmented button.active{background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-segmented.wrap{flex-wrap:wrap}.nk-segmented.scroll{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nk-segmented.scroll::-webkit-scrollbar{display:none}.nk-segmented.scroll ::slotted(button),.nk-segmented.scroll button{flex-shrink:0;white-space:nowrap}.nk-banner{display:flex;align-items:center;gap:10px;font-size:14px;border-radius:8px;padding:10px 14px;margin-bottom:8px;color:var(--nk-text)}.nk-banner.info{background:var(--nk-tint-blue)}.nk-banner.success{background:var(--nk-tint-green)}.nk-banner.warning{background:var(--nk-tint-yellow)}.nk-banner.danger{background:var(--nk-tint-red)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=action]){margin-left:auto;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group .nk-avatar,.nk-avatar-group ::slotted(.mini-avatar),.nk-avatar-group ::slotted(.nk-avatar){width:26px;height:26px;border-radius:50%;color:var(--nk-on-accent);font-size:10.5px;font-weight:600;border:2px solid var(--nk-bg);display:flex;align-items:center;justify-content:center;margin-left:-7px}.nk-avatar-group .mini-avatar:first-child,.nk-avatar-group .nk-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child),.nk-avatar-group ::slotted(.nk-avatar:first-child){margin-left:0}.nk-avatar-group .more,.nk-avatar-group ::slotted(.more){background:var(--nk-bg-callout);color:var(--nk-text-secondary)}.nk-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;overflow:hidden;vertical-align:middle;font-size:10px;font-weight:600;line-height:1;color:var(--nk-on-accent);user-select:none;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));object-fit:cover}.nk-avatar.small{width:20px;height:20px;font-size:9px}.nk-avatar.large{width:32px;height:32px;font-size:12px}.nk-avatar.xlarge{width:56px;height:56px;font-size:20px}.nk-avatar.square{border-radius:4px}.nk-avatar ::slotted(img),.nk-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.nk-avatar.gray{background:var(--nk-color-gray)}.nk-avatar.brown{background:var(--nk-color-brown)}.nk-avatar.orange{background:var(--nk-color-orange)}.nk-avatar.yellow{background:var(--nk-color-yellow)}.nk-avatar.green{background:var(--nk-color-green)}.nk-avatar.blue{background:var(--nk-color-blue)}.nk-avatar.purple{background:var(--nk-color-purple)}.nk-avatar.pink{background:var(--nk-color-pink)}.nk-avatar.red{background:var(--nk-color-red)}.nk-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:12px 0}.nk-panel{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border:1px solid var(--nk-border);border-radius:10px;background:var(--nk-bg-card);box-shadow:var(--nk-shadow-card);font-size:14px;line-height:1.5;color:inherit;text-decoration:none;text-align:left}:is(a,button).nk-panel{cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}:is(a,button).nk-panel:hover{border-color:var(--nk-border-strong)}.nk-panel>h3{font-size:14px;font-weight:600;line-height:1.4}.nk-panel ::slotted(h3){font-size:14px;font-weight:600;line-height:1.4;margin:0!important}.nk-panel>p{font-size:13px;color:var(--nk-text-secondary)}.nk-panel ::slotted(p){font-size:13px;color:var(--nk-text-secondary);margin:0!important}.nk-panel>.nk-cover{flex:none;height:64px;margin:-14px -16px 2px;border-radius:9px 9px 0 0}.nk-panel>.nk-page-icon{font-size:28px}.nk-panel>.nk-cover+.nk-page-icon{margin-top:-24px}.nk-skeleton{border-radius:5px;margin-bottom:10px;background:linear-gradient(90deg,var(--nk-bg-callout) 25%,var(--nk-bg-hover) 50%,var(--nk-bg-callout) 75%);background-size:200% 100%;animation:1.6s infinite nk-shimmer}@keyframes nk-shimmer{to{background-position:-200% 0}}.nk-empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--nk-border-strong);border-radius:10px;color:var(--nk-text-tertiary)}.nk-empty .e-icon,.nk-empty ::slotted(.e-icon),.nk-empty ::slotted([slot=icon]){font-size:30px;margin-bottom:8px}.nk-empty .e-title,.nk-empty ::slotted(.e-title),.nk-empty ::slotted([slot=title]){font-weight:500;color:var(--nk-text-secondary);margin-bottom:3px;font-size:14px}.nk-empty .e-desc,.nk-empty ::slotted(.e-desc),.nk-empty ::slotted([slot=desc]){font-size:13px;margin-bottom:12px}.nk-empty .e-actions,.nk-empty ::slotted(.e-actions){display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:8px 0 8px 8px}.nk-comment{display:flex;gap:9px;margin-bottom:14px}.nk-comment .mini-avatar,.nk-comment ::slotted(.mini-avatar),.nk-comment ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;color:var(--nk-on-accent);flex-shrink:0;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-comment .c-head,.nk-comment ::slotted(.c-head){font-size:12px;color:var(--nk-text-tertiary);margin-bottom:2px}.nk-comment .c-head b{color:var(--nk-text);font-weight:600}.nk-comment .c-body,.nk-comment ::slotted(.c-body){font-size:14px;line-height:1.5}.nk-comment-input{display:flex;gap:8px;align-items:center;margin-top:4px}.nk-comment-input input{min-width:0;flex:1}.nk-ai-thread{display:flex;flex-direction:column;gap:14px}.nk-ai-msg{display:flex;gap:9px}.nk-ai-msg .mini-avatar,.nk-ai-msg ::slotted(.mini-avatar),.nk-ai-msg ::slotted([slot=avatar]){width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--nk-bg-callout)}.nk-ai-msg.user .mini-avatar,.nk-ai-msg.user ::slotted(.mini-avatar),.nk-ai-msg.user ::slotted([slot=avatar]){background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:9.5px;font-weight:600}.nk-ai-msg .a-body,.nk-ai-msg ::slotted(.a-body){font-size:14px;line-height:1.55;padding-top:2px}.nk-ai-msg .a-name,.nk-ai-msg ::slotted(.a-name){font-size:12px;font-weight:600;margin-bottom:2px}.nk-ai-msg .a-name span{color:var(--nk-text-tertiary);font-weight:400}.nk-ai-msg.user.bubble{justify-content:flex-end}.nk-ai-msg.bubble .a-body,.nk-ai-msg.bubble ::slotted(.a-body){max-width:85%;padding:6px 12px;border-radius:16px;background:var(--nk-bg-callout)}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:0 0;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions ::slotted(button:hover),.nk-ai-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:14px;border:1px solid var(--nk-border-strong);border-radius:10px;padding:8px 12px}.nk-ai-input-row:focus-within{border-color:var(--nk-accent)}.nk-ai-input-row input{flex:1;border:none;outline:0;background:0 0;font-family:inherit;font-size:14px;color:var(--nk-text);min-width:0}.nk-ai-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-ai-send{border:none;background:var(--nk-accent);color:var(--nk-on-accent);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;flex-shrink:0}.nk-block-host{position:relative;border-radius:var(--nk-radius);margin:8px 0;padding:2px 0 2px 2px;transition:background .15s,box-shadow .15s}.nk-block-host:hover{background:var(--nk-bg-hover)}.nk-block-host:focus-within{background:0 0;box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host.nk-drop-target{box-shadow:0 -2px 0 0 var(--nk-accent);background:0 0}.nk-block-host .nk-block-handle,.nk-block-host ::slotted(.nk-block-handle){position:absolute;left:-26px;top:4px;width:18px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--nk-text-tertiary);font-size:13px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none}.nk-block-host:hover .nk-block-handle{opacity:1}.nk-block-host .nk-block-actions{position:absolute;display:flex;gap:1px;z-index:2;opacity:0;transition:opacity .15s;pointer-events:none}.nk-block-host .nk-block-actions.show{opacity:1;pointer-events:auto}.nk-block-host .nk-block-actions ::slotted(button),.nk-block-host .nk-block-actions button{width:20px;height:22px;padding:0;border:none;border-radius:4px;background:0 0;color:var(--nk-text-tertiary);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.nk-block-host .nk-block-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-block-host .nk-block-actions .drag{cursor:grab}.nk-block-host .nk-block-actions .drag:active{cursor:grabbing}.nk-block-host .ProseMirror,.nk-prose{font-family:var(--nk-font);line-height:1.5;color:var(--nk-text);overflow-wrap:break-word}.nk-block-host .ProseMirror{outline:0;min-height:60px;padding:4px 2px}.nk-block-host .ProseMirror>*+*,.nk-prose>*+*{margin-top:6px}.nk-block-host .ProseMirror h1,.nk-prose h1{font-size:1.875em;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:32px 0 4px}.nk-block-host .ProseMirror h2,.nk-prose h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:24px 0 4px}.nk-block-host .ProseMirror h3,.nk-prose h3{font-size:1.25em;font-weight:600;line-height:1.3;margin:16px 0 2px}.nk-block-host .ProseMirror :is(h4,h5,h6),.nk-prose :is(h4,h5,h6){font-size:1em;font-weight:600;margin:12px 0 0}.nk-block-host .ProseMirror>:first-child,.nk-prose>:first-child{margin-top:0}.nk-block-host .ProseMirror>:last-child,.nk-prose>:last-child{margin-bottom:0}.nk-prose p:empty::before{content:\"\";display:inline-block}.nk-block-host .ProseMirror :is(strong,b),.nk-prose :is(strong,b){font-weight:600}.nk-block-host .ProseMirror :is(ul,ol),.nk-prose :is(ul,ol){padding-left:24px;margin:4px 0}.nk-block-host .ProseMirror ul,.nk-prose ul{list-style:disc}.nk-block-host .ProseMirror ol,.nk-prose ol{list-style:decimal}.nk-block-host .ProseMirror li,.nk-prose li{margin:2px 0}.nk-block-host .ProseMirror li::marker,.nk-prose li::marker{color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror ul[data-type=taskList],.nk-prose ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-block-host .ProseMirror ul[data-type=taskList] li,.nk-prose ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-block-host .ProseMirror ul[data-type=taskList] li>label,.nk-prose ul[data-type=taskList] li>label{flex-shrink:0;margin-top:max(0px,calc((1lh - 16px)/ 2));user-select:none}.nk-block-host .ProseMirror ul[data-type=taskList] li>div,.nk-prose ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox],.nk-prose ul[data-type=taskList] input[type=checkbox]{appearance:none;width:16px;height:16px;margin:0;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;position:relative;background:var(--nk-bg);display:block}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked,.nk-prose ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked::after,.nk-prose ul[data-type=taskList] input[type=checkbox]:checked::after{content:\"✓\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-block-host .ProseMirror li[data-checked=true]>div,.nk-prose li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror blockquote,.nk-prose blockquote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:12px 0;color:var(--nk-text-secondary)}.nk-block-host .ProseMirror code,.nk-prose code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-block-host .ProseMirror pre,.nk-prose pre{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:16px 20px;margin:12px 0;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;color:var(--nk-text-secondary);overflow-x:auto}.nk-block-host .ProseMirror pre code,.nk-prose pre code{background:0 0;color:inherit;padding:0;font-size:inherit}.nk-block-host .ProseMirror hr,.nk-prose hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-block-host .ProseMirror a,.nk-prose a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-prose img{max-width:100%;height:auto}.nk-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;margin:12px 0}.nk-prose :is(th,td){padding:6px 10px;border:1px solid var(--nk-border);text-align:left;vertical-align:top}.nk-prose th{font-weight:600}.nk-block-host .ProseMirror-gapcursor::after{border-top-color:var(--nk-text)}.nk-block-host .ProseMirror .ProseMirror-selectednode{background:color-mix(in srgb,var(--nk-accent) 8%,transparent)}.nk-block-host .ProseMirror-selectednode{box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 35%,transparent);border-radius:3px}.nk-block-host .ProseMirror ::selection{background:color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host .ProseMirror .is-empty::before,.nk-block-host .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--nk-text-tertiary);float:left;height:0;pointer-events:none}.nk-block-host .bn-container{font-family:var(--nk-font);color:var(--nk-text);background:0 0}.nk-block-host .bn-editor{padding:4px 2px}.nk-block-host .bn-block-content{font-size:14px;line-height:1.6}.nk-block-host .bn-side-menu{color:var(--nk-text-tertiary)}.nk-block-host .bn-drag-handle{border-radius:4px}.nk-block-host .bn-drag-handle:hover{background:var(--nk-bg-hover)}.nk-block-host .novel-editor{font-family:var(--nk-font);color:var(--nk-text)}.nk-block-host .novel-prose{max-width:none}.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box,.nk-slash-menu{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:6px;width:280px;max-height:320px;overflow-y:auto;font-family:var(--nk-font);font-size:14px;color:var(--nk-text)}.nk-slash-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:6px 9px 2px}.nk-slash-item{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:5px;cursor:pointer;user-select:none}.nk-slash-item.selected,.nk-slash-item:hover{background:var(--nk-bg-hover)}.nk-slash-item .m-icon,.nk-slash-item ::slotted(.m-icon){width:28px;height:28px;flex-shrink:0;border-radius:4px;background:var(--nk-bg-callout);border:1px solid var(--nk-border);display:flex;align-items:center;justify-content:center;font-size:15px}.nk-slash-item .m-desc{font-size:12px;color:var(--nk-text-tertiary)}.nk-bubble-menu{display:flex;align-items:center;gap:2px;background:var(--nk-bg);border-radius:8px;box-shadow:var(--nk-shadow-menu);padding:4px}.nk-bubble-menu button{font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button){font-family:inherit;font-size:13px;border:none;background:0 0;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button:hover),.nk-bubble-menu button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu ::slotted(button.active),.nk-bubble-menu button.active{color:var(--nk-accent)}@media (max-width:860px){.nk-sidebar{display:none}.nk-tab-bar{display:flex}.nk-tab-bar.fixed+.nk-tab-bar-spacer{display:block}.nk-page{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom:80px}.nk-settings-nav{width:60px;min-width:60px}.nk-settings-nav .label,.nk-settings-nav .nk-section-label,.nk-settings-user .u-text{display:none}.nk-settings-content{padding:24px}.nk-cmdk-backdrop{padding-top:max(6vh,env(safe-area-inset-top,0px))}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}.nk-breadcrumb{min-width:0}.nk-breadcrumb ::slotted(.crumb:not(:last-child)),.nk-breadcrumb ::slotted(.sep),.nk-breadcrumb>.crumb:not(:last-child),.nk-breadcrumb>.sep,.nk-topbar-actions ::slotted(.nk-topbar-meta),.nk-topbar-meta{display:none}.nk-breadcrumb ::slotted(.crumb:last-child),.nk-breadcrumb>.crumb:last-child{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-topbar-actions{flex-shrink:0}.nk-field{flex-wrap:wrap;row-gap:6px}.nk-field .f-control,.nk-field ::slotted(.f-control){max-width:100%;min-width:0}.nk-input,.nk-select,.nk-slider,.nk-textarea{max-width:100%}.nk-prop{flex-direction:column;align-items:stretch}.nk-prop .p-name{flex:none;min-height:26px}.nk-prop .p-value{min-height:30px;padding:3px 6px 7px}:root:has(.nk-tab-bar:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + max(6px,env(safe-area-inset-bottom,0px)) + 6px)}:root:has(.nk-tab-bar.floating:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + 24px + env(safe-area-inset-bottom,0px))}}@media (prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]::after,[class*=nk-]::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}}\n/*# sourceMappingURL=notionkit.min.css.map */";
11
+ const componentsHead = "[class*=nk-],[class*=nk-] *,[class*=nk-]:before,[class*=nk-]:after,[class*=nk-] *:before,[class*=nk-] *:after{box-sizing:border-box}[class*=nk-] :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,ul,ol,li){margin:0;padding:0}[class*=nk-] :where(ul,ol){list-style:none}[class*=nk-] :where(button,input,select,textarea,option,optgroup,fieldset,legend),:where(button,input,select,textarea)[class*=nk-]{margin:0;padding:0}[class*=nk-][hidden]:not([hidden=until-found i]){display:none!important}::slotted([hidden]:not([hidden=\"until-found\" i])){display:none!important}";
12
+ const componentsTail = ".nk-body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:auto;transition:background .25s ease,color .25s ease}.nk-app{display:flex;height:100vh;height:100dvh;overflow:hidden}.nk-sidebar{width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));min-width:calc(var(--nk-sidebar-width) + env(safe-area-inset-left,0px));padding-left:env(safe-area-inset-left,0px);background:var(--nk-bg-sidebar);display:flex;flex-direction:column;border-right:1px solid var(--nk-border);transition:background .25s ease}.nk-workspace{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:6px 8px 2px;border-radius:var(--nk-radius);cursor:pointer;font-weight:500;user-select:none}.nk-workspace:hover{background:var(--nk-bg-hover)}.nk-workspace .avatar,.nk-workspace ::slotted(.avatar),.nk-workspace ::slotted([slot=\"avatar\"]){width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-workspace .chev{margin-left:auto;color:var(--nk-text-tertiary);font-size:11px}.nk-sidebar-scroll{flex:1;overflow-y:auto;padding:4px 8px 16px}.nk-sidebar-scroll::-webkit-scrollbar{width:8px}.nk-sidebar-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:4px}.nk-section-label{font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--nk-text-tertiary);padding:14px 10px 4px;display:flex;justify-content:space-between;align-items:center}.nk-section-label .plus{cursor:pointer;border-radius:4px;padding:0 4px;font-size:13px;opacity:0;transition:opacity .15s}.nk-section-label:hover .plus{opacity:1}.nk-section-label .plus:hover{background:var(--nk-bg-hover)}.nk-sidebar-footer{padding:8px;border-top:1px solid var(--nk-border);color:var(--nk-text-sidebar);font-size:14px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:59;background:var(--nk-scrim-soft)}.nk-sidebar-toggle{display:none}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:44px;display:flex;align-items:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));gap:8px;flex-shrink:0}.nk-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px}.nk-breadcrumb .crumb,.nk-breadcrumb ::slotted(.crumb){padding:2px 6px;border-radius:4px;cursor:pointer;color:var(--nk-text-sidebar);display:flex;align-items:center;gap:5px}.nk-breadcrumb .crumb:hover{background:var(--nk-bg-hover)}a.crumb{text-decoration:none}.nk-breadcrumb .crumb.current,.nk-breadcrumb ::slotted(.crumb.current){color:var(--nk-text)}.nk-breadcrumb .sep{color:var(--nk-text-tertiary);font-size:12px}.nk-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:4px}.nk-topbar-btn{padding:4px 8px;border-radius:var(--nk-radius);cursor:pointer;color:var(--nk-text-sidebar);font-size:14px;user-select:none;border:none;background:transparent;font-family:inherit}.nk-topbar-btn:hover{background:var(--nk-bg-hover)}.nk-topbar-btn svg,.nk-topbar-btn ::slotted(svg){width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-share-btn{font-size:14px;padding:4px 8px}.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){padding:4px 8px;font-size:12px;color:var(--nk-text-tertiary);white-space:nowrap}.nk-theme-toggle{font-size:15px;width:30px;height:28px;padding:0}.nk-tab-bar{display:none;flex:none;align-items:stretch;gap:2px;position:sticky;bottom:0;z-index:30;box-sizing:border-box;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)));padding:6px max(4px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.fixed{position:fixed;left:0;right:0;bottom:0}.nk-tab-bar-spacer{display:none;flex:none;height:calc(var(--nk-tab-bar-height) - 6px + max(6px,env(safe-area-inset-bottom,0px)))}.nk-tab-bar.always.fixed+.nk-tab-bar-spacer{display:block}.nk-tab-bar.floating{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));height:var(--nk-tab-bar-height);padding:6px;border:1px solid var(--nk-border);border-radius:16px;box-shadow:var(--nk-shadow-menu)}.nk-tab-bar-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:10.5px;line-height:1.2;color:var(--nk-text-secondary);text-decoration:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.nk-tab-bar-item:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-tab-bar-item.active{color:var(--nk-accent)}.nk-tab-bar-item:disabled{opacity:.5;cursor:not-allowed}.nk-tab-bar-item .icon,.nk-tab-bar-item ::slotted([slot=\"icon\"]){font-size:20px;line-height:1}.nk-tab-bar-item .label,.nk-tab-bar-item ::slotted(.label){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-tree-item{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 10px;border-radius:var(--nk-radius);cursor:pointer;user-select:none;color:var(--nk-text-sidebar);position:relative;min-height:var(--_nk-row, 28px)}.nk-tree-item:hover{background:var(--nk-bg-hover)}.nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-tree-item.compact{min-height:26px}.nk-tree-item .icon,.nk-tree-item ::slotted(.icon),.nk-tree-item ::slotted([slot=\"icon\"]){font-size:15px;width:20px;text-align:center;flex-shrink:0}.nk-tree-item .label,.nk-tree-item ::slotted(.label){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-tree-item .actions{margin-left:auto;display:none;gap:2px;color:var(--nk-text-tertiary)}.nk-tree-item:hover .actions{display:flex}.nk-tree-item .actions span{padding:0 3px;border-radius:3px;font-size:12px}.nk-tree-item .actions span:hover{background:var(--nk-bg-active)}.nk-tree-children{margin-left:14px;border-left:1px solid var(--nk-border);padding-left:4px;overflow:hidden}.nk-tree-children.collapsed{display:none}.nk-toggle-arrow{width:16px;height:16px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--nk-text-tertiary);border-radius:3px;transition:transform .15s}.nk-toggle-arrow.open{transform:rotate(90deg)}.nk-kbd-hint{margin-left:auto;display:flex;gap:3px;align-items:center}.nk-kbd{font-family:inherit;font-size:10.5px;background:var(--nk-bg-callout);border:1px solid var(--nk-border-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px}.nk-page-scroll{flex:1;overflow-y:auto}.nk-page-scroll::-webkit-scrollbar{width:10px}.nk-page-scroll::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-cover{height:200px;background:radial-gradient(ellipse at 20% 40%,color-mix(in srgb,var(--nk-decor-purple) 35%,transparent),transparent 55%),radial-gradient(ellipse at 80% 20%,color-mix(in srgb,var(--nk-decor-blue) 35%,transparent),transparent 55%),radial-gradient(ellipse at 60% 90%,color-mix(in srgb,var(--nk-decor-orange) 25%,transparent),transparent 55%),var(--nk-bg-callout)}.nk-cover>img,.nk-cover ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-page{max-width:760px;margin:0 auto;padding:24px max(64px,env(safe-area-inset-right,0px)) 120px max(64px,env(safe-area-inset-left,0px));font-size:16px;line-height:1.5}.nk-page.full{max-width:none}.nk-page.small{font-size:14px}.nk-cover+.nk-page,.nk-page.covered{padding-top:0}.nk-page-icon,.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=\"icon\"]){font-size:64px;line-height:1;margin-top:0;cursor:pointer;user-select:none;display:inline-block}.nk-cover+.nk-page .nk-page-icon,.nk-cover+.nk-page ::slotted(.nk-page-icon),.nk-cover+.nk-page ::slotted([slot=\"icon\"]),.nk-page.covered .nk-page-icon,.nk-page.covered ::slotted(.nk-page-icon),.nk-page.covered ::slotted([slot=\"icon\"]){margin-top:-42px}.nk-page-title{font-size:var(--_nk-title, 40px);font-weight:700;line-height:1.2;margin:8px 0 4px;outline:none;letter-spacing:0}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-props{display:flex;flex-direction:column;margin:0 0 20px;font-size:14px;line-height:1.5}.nk-prop{display:flex;align-items:flex-start;min-width:0}.nk-prop .p-name{flex:0 0 160px;min-width:0;min-height:34px;padding:0 6px;display:flex;align-items:center;gap:6px;overflow:hidden;border-radius:var(--nk-radius);color:var(--nk-text-secondary);white-space:nowrap;user-select:none}.nk-prop .p-icon,.nk-prop ::slotted([slot=\"icon\"]){width:16px;flex-shrink:0;text-align:center;font-size:13px}.nk-prop .p-value{flex:1 1 auto;min-width:0;min-height:34px;padding:5px 8px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;border-radius:var(--nk-radius);overflow-wrap:anywhere}.nk-prop .p-name:hover,.nk-prop .p-value:hover{background:var(--nk-bg-hover)}.nk-page p.lead{font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:1em;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:1.5em;font-weight:600;line-height:1.3;margin:32px 0 10px;display:flex;align-items:center;gap:8px}.nk-callout{display:flex;gap:10px;align-items:flex-start;background:var(--nk-bg-callout);border-radius:var(--nk-radius);padding:16px 16px 16px 12px;margin:16px 0;line-height:1.5}.nk-callout .c-icon,.nk-callout ::slotted(.c-icon),.nk-callout ::slotted([slot=\"icon\"]){font-size:17px}.nk-bookmark{display:flex;min-width:0;margin:8px 0;overflow:hidden;border:1px solid var(--nk-border);border-radius:var(--nk-radius);color:var(--nk-text);text-decoration:none;transition:background .12s ease}.nk-bookmark:hover{background:var(--nk-bg-hover)}.nk-bookmark .bm-text{flex:1 1 0;min-width:0;padding:12px 14px 14px;font-size:14px;line-height:20px}.nk-bookmark .bm-title{display:block;min-height:24px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-bookmark .bm-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:32px;font-size:12px;line-height:16px;color:var(--nk-text-secondary)}.nk-bookmark .bm-url{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;line-height:16px;white-space:nowrap}.nk-bookmark .bm-url>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.nk-bookmark .bm-favicon{flex:none;width:16px;height:16px}.nk-bookmark .bm-cover{position:relative;flex:0 0 33%;max-width:240px}.nk-bookmark .bm-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.nk-todo{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.nk-todo input[type=checkbox]{appearance:none;width:16px;height:16px;margin-top:3px;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;flex-shrink:0;position:relative;background:var(--nk-bg)}.nk-todo input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-todo input[type=checkbox]:checked:after{content:\"\\2713\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-todo input:checked+span{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-todo input:disabled{opacity:.5;cursor:not-allowed}.nk-toggle{margin:6px 0}.nk-toggle summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--nk-radius);font-weight:500;user-select:none}.nk-toggle summary::-webkit-details-marker{display:none}.nk-toggle summary:hover{background:var(--nk-bg-hover)}.nk-toggle summary:before{content:\"\\25b8\";color:var(--nk-text-tertiary);font-size:11px;transition:transform .15s;display:inline-block}.nk-toggle[open] summary:before{transform:rotate(90deg)}.nk-toggle .toggle-body,.nk-toggle ::slotted(.toggle-body){padding:4px 0 8px 26px;color:var(--nk-text-secondary);line-height:1.55}.nk-divider{border:none;border-top:1px solid var(--nk-border);margin:24px 0}.nk-quote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:16px 0;color:var(--nk-text-secondary);line-height:1.5}.nk-quote .q-cite{display:block;margin-top:6px;font-size:12.5px;color:var(--nk-text-tertiary)}.nk-mention{display:inline-flex;align-items:center;gap:4px;padding:0 4px;border-radius:4px;font-weight:500;cursor:pointer;white-space:nowrap}.nk-mention:hover{background:var(--nk-bg-hover)}.nk-mention.person{color:var(--nk-text)}.nk-mention.person .mini-avatar,.nk-mention.person .nk-avatar,.nk-mention.person ::slotted(.mini-avatar),.nk-mention.person ::slotted([slot=\"avatar\"]){width:16px;height:16px;border-radius:50%;color:var(--nk-on-accent);font-size:8.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.nk-mention.page{color:var(--nk-text-secondary);text-decoration:underline;text-decoration-color:var(--nk-border-strong);text-underline-offset:2px}.nk-mention.date{color:var(--nk-color-orange)}.nk-inline-code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-code{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:20px 24px;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;margin:14px 0;overflow-x:auto;color:var(--nk-text-secondary);white-space:pre;position:relative}.nk-code .lang{position:absolute;top:6px;right:10px;font-size:11px;color:var(--nk-text-tertiary);font-family:var(--nk-font)}.nk-code .tag,.nk-code ::slotted(.tag){color:var(--nk-accent)}.nk-code .attr,.nk-code ::slotted(.attr){color:var(--nk-color-orange)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;align-items:center;padding:0 0 6px;margin-bottom:0;font-size:14px}.nk-db-tab{padding:4px 8px;cursor:pointer;color:var(--nk-text-secondary);border-radius:var(--nk-radius);user-select:none;line-height:20px;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.nk-db-tab:hover{color:var(--nk-text);background:var(--nk-bg-hover)}.nk-db-tab.active{color:var(--nk-text);background:var(--nk-bg-active);font-weight:500}.nk-db-tab.add{color:var(--nk-text-tertiary)}.nk-db-tab .badge,.nk-db-tab ::slotted(.badge){background:var(--nk-bg-callout);border-radius:8px;font-size:11px;padding:0 6px;color:var(--nk-text-tertiary)}.nk-db-toolbar{display:flex;align-items:center;gap:8px;min-width:0;padding-bottom:6px}.nk-db-toolbar>.nk-db-tabs{flex:1 1 auto;min-width:0;padding-bottom:0;overflow-x:auto;scrollbar-width:none}.nk-db-toolbar>.nk-db-tabs::-webkit-scrollbar{display:none}.nk-db-toolbar .tools{flex:none;display:flex;align-items:center;gap:4px;margin-left:auto}.nk-db-tool{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;border:none;border-radius:var(--nk-radius);background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-db-tool:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-db-tool.active{color:var(--nk-accent)}.nk-filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 0 8px}.nk-filter-pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--nk-border-strong);border-radius:12px;background:transparent;font-family:inherit;font-size:13px;line-height:1;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer;user-select:none}.nk-filter-pill:hover{background:var(--nk-bg-hover)}.nk-filter-pill.active{color:var(--nk-accent);border-color:color-mix(in srgb,var(--nk-accent) 35%,transparent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-filter-pill.add{border-color:transparent;color:var(--nk-text-tertiary)}.nk-filter-pill.add:hover{color:var(--nk-text-secondary)}.nk-filter-pill button{padding:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer}.nk-filter-pill .fp-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border-radius:50%;font-size:13px}.nk-filter-pill .fp-remove:hover{background:color-mix(in srgb,currentColor 15%,transparent)}.nk-table-wrap{overflow-x:auto}.nk-table{width:100%;border-collapse:collapse;font-size:14px}.nk-table th{text-align:left;font-weight:400;color:var(--nk-text-secondary);height:36px;padding:0 8px;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);font-size:14px;white-space:nowrap;user-select:none;cursor:pointer}.nk-table th:hover{background:var(--nk-bg-hover)}.nk-table th .th-icon,.nk-table th ::slotted(.th-icon){margin-right:6px;font-size:13px;color:var(--nk-text-tertiary)}.nk-table td{height:36px;padding:6px 8px;line-height:1.5;border-bottom:1px solid var(--nk-border);border-right:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.nk-table th:last-child,.nk-table td:last-child{border-right:none}.nk-table.wrap td,.nk-table td.wrap{white-space:normal;vertical-align:top}.nk-table tbody tr:hover{background:var(--nk-bg-hover)}.nk-table .row-title{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer}.nk-table .row-title:hover{text-decoration:underline;text-decoration-color:var(--nk-text-tertiary)}.nk-table .date-cell{color:var(--nk-text-secondary)}.nk-table .num{text-align:right;font-variant-numeric:tabular-nums}.nk-table .person-cell{display:flex;align-items:center;gap:6px;color:var(--nk-text-secondary)}.nk-table .person-cell .mini-avatar,.nk-table .person-cell ::slotted(.mini-avatar){width:20px;height:20px;border-radius:50%;font-size:10px;color:var(--nk-on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:600}.nk-new-row,.nk-table .new-row{color:var(--nk-text-tertiary);cursor:pointer;padding:8px;display:flex;align-items:center;gap:7px;font-size:14px}.nk-new-row:hover,.nk-table .new-row:hover{background:var(--nk-bg-hover)}.nk-tag{display:inline-flex;align-items:center;max-width:100%;height:20px;padding:0 6px;border-radius:3px;font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.gray{background:var(--nk-tag-gray-bg);color:var(--nk-tag-gray-text)}.nk-tag.brown{background:var(--nk-tag-brown-bg);color:var(--nk-tag-brown-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.yellow{background:var(--nk-tag-yellow-bg);color:var(--nk-tag-yellow-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-tag.pink{background:var(--nk-tag-pink-bg);color:var(--nk-tag-pink-text)}.nk-tag.red{background:var(--nk-tag-red-bg);color:var(--nk-tag-red-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tint-blue);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-color-blue);border-radius:3px}.nk-progress.wide{width:100%;flex:1 1 60px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px;white-space:nowrap}.nk-list{display:flex;flex-direction:column;font-size:14px}.nk-list-item{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;min-height:36px;padding:4px 6px;border-bottom:1px solid var(--nk-border);color:inherit;text-decoration:none;cursor:pointer}.nk-list-item:hover{background:var(--nk-bg-hover)}.nk-list>.nk-list-item:last-child,.nk-list ::slotted(.nk-list-item:last-child),.nk-list-item.last{border-bottom:none}.nk-list-item .l-icon,.nk-list-item ::slotted([slot=\"icon\"]){width:20px;flex-shrink:0;text-align:center;font-size:15px}.nk-list-item .l-title,.nk-list-item ::slotted(.l-title){flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-list-item .l-meta,.nk-list-item ::slotted(.l-meta){flex:none;display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--nk-text-secondary);white-space:nowrap}.nk-board{display:none;gap:12px;padding:14px 2px;overflow-x:auto}.nk-board.active{display:flex}.nk-board-col{min-width:220px;width:220px;flex-shrink:0}.nk-board-col-header{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13.5px;font-weight:500}.nk-board-col-header .count{color:var(--nk-text-tertiary);font-weight:400}.nk-card{background:var(--nk-bg-card);border:1px solid var(--nk-border);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--nk-shadow-card);transition:border-color .15s}.nk-card:hover{border-color:var(--nk-border-strong)}.nk-card .card-title,.nk-card ::slotted(.card-title){font-weight:500;margin-bottom:7px;display:flex;gap:6px;align-items:center}.nk-card .card-meta,.nk-card ::slotted(.card-meta){display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--nk-text-secondary)}.nk-field{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0}.nk-field .f-label,.nk-field ::slotted(.f-label),.nk-field ::slotted([slot=\"label\"]){font-size:14px}.nk-field .f-desc,.nk-field ::slotted(.f-desc),.nk-field ::slotted([slot=\"desc\"]){font-size:12px;color:var(--nk-text-secondary);margin-top:2px;line-height:1.45}.nk-field .f-control,.nk-field ::slotted(.f-control){flex-shrink:0}.nk-field.stacked,.nk-fields>.nk-field{flex-direction:column;align-items:stretch;gap:6px;min-width:0}.nk-field.stacked .f-control,.nk-fields>.nk-field .f-control{width:100%;min-width:0}.nk-field.stacked .nk-input,.nk-field.stacked .nk-textarea,.nk-field.stacked .nk-select,.nk-fields>.nk-field .nk-input,.nk-fields>.nk-field .nk-textarea,.nk-fields>.nk-field .nk-select{width:100%;min-width:0}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px;min-width:0}.nk-field.compact .f-label,.nk-field.compact ::slotted([slot=\"label\"]),.nk-fields>.nk-field .f-label,.nk-fields>.nk-field ::slotted([slot=\"label\"]){font-size:12px;color:var(--nk-text-tertiary)}.nk-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px;padding:9px 0}.nk-fields>.nk-field{min-width:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:5px 10px;outline:none;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:hover,.nk-select:hover,.nk-textarea:hover{border-color:var(--nk-border-strong)}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:color-mix(in srgb,var(--nk-accent) 60%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 30%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-textarea.wide,.nk-select.wide{width:100%;min-width:0}.nk-input[type=date],.nk-input[type=time],.nk-input[type=datetime-local],.nk-input[type=month]{appearance:none}.nk-input::-webkit-date-and-time-value{text-align:start;min-height:1lh}.nk-select.compact{min-width:120px}.nk-textarea{resize:vertical;min-height:70px;line-height:1.5}.nk-select{appearance:none;cursor:pointer;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--nk-text-tertiary) 50%),linear-gradient(135deg,var(--nk-text-tertiary) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 10px) 55%;background-size:4px 4px;background-repeat:no-repeat}.nk-copy-field{display:flex;align-items:center;gap:2px;min-width:210px;max-width:100%;padding:0 3px 0 10px;font-size:14px;line-height:20px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius)}.nk-copy-field.wide{width:100%;min-width:0}.nk-copy-field.wrap{align-items:flex-start}.nk-copy-field .cf-value{flex:1 1 auto;min-width:0;padding:5px 6px 5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.nk-copy-field.mono .cf-value{font-family:var(--nk-font-mono);font-size:13px}.nk-copy-field.wrap .cf-value{white-space:pre-wrap;overflow-wrap:anywhere}.nk-copy-field .cf-btn{flex:none;height:24px;margin:3px 0;padding:0 8px;border:none;border-radius:4px;background:transparent;font-family:inherit;font-size:13px;color:var(--nk-text-secondary);white-space:nowrap;cursor:pointer}.nk-copy-field .cf-btn:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-copy-field .cf-btn.copied{color:var(--nk-color-green)}.nk-btn{font-family:inherit;font-size:14px;line-height:20px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:3px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.nk-btn svg,.nk-btn ::slotted(svg){width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nk-btn.primary{background:var(--nk-accent);color:var(--nk-on-accent)}.nk-btn.primary:hover{opacity:.88}.nk-btn.secondary{background:var(--nk-bg-card);color:var(--nk-text);box-shadow:var(--nk-shadow-btn)}.nk-btn.secondary:hover{background:color-mix(in srgb,var(--nk-bg-card),var(--nk-text) 6%)}.nk-btn.danger{background:var(--nk-bg-card);color:var(--nk-danger);box-shadow:var(--nk-shadow-btn)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,var(--nk-bg-card))}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:1px 8px;font-size:13px;line-height:20px}a.nk-btn{text-decoration:none}.nk-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.nk-switch{position:relative;width:34px;height:20px;flex-shrink:0;appearance:none;border:none;cursor:pointer;border-radius:20px;background:var(--nk-border-strong);transition:background .2s}.nk-switch:after{content:\"\";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--nk-on-accent);transition:transform .2s;box-shadow:var(--nk-shadow-knob)}.nk-switch:checked,.nk-switch[aria-checked=true]{background:var(--nk-accent)}.nk-switch:checked:after,.nk-switch[aria-checked=true]:after{transform:translate(14px)}.nk-switch:disabled{opacity:.5;cursor:not-allowed}.nk-switch-label{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label>.nk-switch{font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 20px)/2))}.nk-switch-label>span{padding-top:max(0px,calc((20px - 1lh)/2))}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:14px;cursor:pointer}.nk-check input{appearance:none;width:16px;height:16px;flex-shrink:0;border:1.4px solid var(--nk-border-strong);border-radius:3px;cursor:pointer;position:relative;background:var(--nk-bg);font-size:inherit;line-height:inherit;margin-top:max(0px,calc((1lh - 16px)/2))}.nk-check input[type=radio]{border-radius:50%}.nk-check input:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-check input:checked:after{content:\"\\2713\";color:var(--nk-on-accent);font-size:10.5px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-check input[type=radio]:checked:after{content:\"\\25cf\";font-size:7px}.nk-check input:disabled{opacity:.5;cursor:not-allowed}.nk-check input:disabled+*{opacity:.6}.nk-slider{width:210px;accent-color:var(--nk-accent);cursor:pointer}.nk-slider-value{font-size:12.5px;color:var(--nk-text-tertiary);margin-top:3px}.nk-profile-row{display:flex;align-items:center;gap:14px;padding:8px 0}.nk-profile-row .big-avatar,.nk-profile-row ::slotted(.big-avatar),.nk-profile-row ::slotted([slot=\"avatar\"]){width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.nk-profile-row .big-avatar>img{display:block;width:100%;height:100%;object-fit:cover}.nk-profile-row .big-avatar.square,.nk-profile-row ::slotted(.big-avatar.square){border-radius:8px}.nk-profile-row .pr-actions{display:flex;flex-direction:column;gap:6px}.nk-profile-row .pr-remove{color:var(--nk-text-tertiary)}.nk-model-card{border:1px solid var(--nk-border-strong);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;display:flex;align-items:flex-start;gap:11px;transition:border-color .15s,background .15s}.nk-model-card:hover{background:var(--nk-bg-hover)}.nk-model-card.selected{border-color:var(--nk-accent);background:color-mix(in srgb,var(--nk-accent) 6%,transparent)}.nk-model-card .m-radio{width:15px;height:15px;border-radius:50%;flex-shrink:0;margin-top:2px;border:1.4px solid var(--nk-border-strong);position:relative}.nk-model-card.selected .m-radio{border-color:var(--nk-accent)}.nk-model-card.selected .m-radio:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--nk-accent)}.nk-model-card .m-name,.nk-model-card ::slotted(.m-name),.nk-model-card ::slotted([slot=\"title\"]){font-weight:500;font-size:14px;display:flex;align-items:center;gap:7px}.nk-model-card .m-desc,.nk-model-card ::slotted(.m-desc),.nk-model-card ::slotted([slot=\"desc\"]){font-size:12px;color:var(--nk-text-secondary);margin-top:2px;line-height:1.45}.nk-danger-zone{border:1px solid color-mix(in srgb,var(--nk-danger) 40%,transparent);border-radius:8px;padding:14px 16px;margin-top:26px}.nk-danger-zone .dz-title{color:var(--nk-danger);font-weight:600;font-size:13px;margin-bottom:8px}.nk-member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--nk-border)}.nk-member-list>.nk-member-row:last-child,.nk-member-list ::slotted(.nk-member-row:last-child),.nk-member-row.last{border-bottom:none}.nk-member-row .mini-avatar,.nk-member-row .nk-avatar,.nk-member-row ::slotted(.mini-avatar),.nk-member-row ::slotted([slot=\"avatar\"]){width:28px;height:28px;border-radius:50%;color:var(--nk-on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}.nk-member-row>:has(>.m-mail){min-width:0}.nk-member-row .m-mail{font-size:12px;color:var(--nk-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nk-member-row .nk-select{min-width:120px;margin-left:auto}.nk-member-row ::slotted([slot=\"role\"]){margin-left:auto}.nk-modal-backdrop{position:fixed;inset:0;background:var(--nk-scrim);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.nk-modal-backdrop.open{opacity:1;pointer-events:auto}.nk-modal{width:min(1150px,92vw);height:min(715px,86vh);max-width:100%;max-height:100%;background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);display:flex;overflow:hidden;transform:scale(.98) translateY(6px);transition:transform .2s ease}.nk-modal-backdrop.open .nk-modal{transform:scale(1) translateY(0)}.nk-settings-nav{width:240px;min-width:240px;background:var(--nk-bg-sidebar);border-right:1px solid var(--nk-border);padding:10px 8px;overflow-y:auto;flex-shrink:0}.nk-settings-user{display:flex;align-items:center;gap:9px;padding:6px 10px 12px;margin-bottom:4px}.nk-settings-user .avatar,.nk-settings-user ::slotted(.avatar),.nk-settings-user ::slotted([slot=\"avatar\"]){width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}.nk-settings-user .name{font-weight:500;font-size:14px}.nk-settings-user .mail{font-size:12px;color:var(--nk-text-secondary)}.nk-settings-nav .nk-tree-item{min-height:28px}.nk-settings-nav .nk-tree-item.active{background:var(--nk-bg-active);color:var(--nk-text);font-weight:500}.nk-settings-content{flex:1;overflow-y:auto;padding:36px 60px 80px;min-width:0}.nk-settings-content::-webkit-scrollbar{width:10px}.nk-settings-content::-webkit-scrollbar-thumb{background:var(--nk-border-strong);border-radius:5px;border:2px solid var(--nk-bg)}.nk-settings-pane{display:none;max-width:800px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:20px}.nk-settings-pane>h3{font-size:16px;font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--nk-border);margin:30px 0 12px}.nk-settings-pane ::slotted(h2){font-size:22px;font-weight:600;line-height:1.3;padding:0!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:16px;font-weight:500;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 8px!important;margin:30px 0 12px!important}.nk-pop{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:10px;width:296px}.nk-emoji-search{width:100%;font-family:inherit;font-size:14px;color:var(--nk-text);background:var(--nk-bg-input);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:6px 10px;outline:none;margin-bottom:8px}.nk-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.nk-emoji-grid span,.nk-emoji-grid ::slotted(span){font-size:18px;text-align:center;padding:4px 0;border-radius:5px;cursor:pointer;user-select:none}.nk-emoji-grid span:hover{background:var(--nk-bg-hover)}.nk-emoji-cats{display:flex;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nk-border)}.nk-emoji-cats span{font-size:14px;padding:3px 7px;border-radius:5px;cursor:pointer;color:var(--nk-text-tertiary);filter:grayscale(1);opacity:.6}.nk-emoji-cats span.active,.nk-emoji-cats span:hover{filter:none;opacity:1;background:var(--nk-bg-hover)}.nk-menu{padding:5px;width:230px}.nk-menu-item{display:flex;align-items:center;gap:9px;padding:4px 8px;min-height:var(--_nk-row, 28px);border-radius:5px;cursor:pointer;font-size:14px;user-select:none}.nk-menu-item:hover{background:var(--nk-bg-hover)}.nk-menu-item .m-icon,.nk-menu-item ::slotted(.m-icon),.nk-menu-item ::slotted([slot=\"icon\"]){width:17px;text-align:center;font-size:14px}.nk-menu-item .m-shortcut,.nk-menu-item ::slotted(.m-shortcut){margin-left:auto;font-size:12px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-item>.nk-switch{margin-left:auto}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:5px 8px 2px}.nk-pop.floating{z-index:60;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}.nk-pop.floating.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding:max(14vh,env(safe-area-inset-top,0px)) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);z-index:110;opacity:0;pointer-events:none;transition:opacity .18s ease}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{max-width:100%;width:min(560px,92vw);background:var(--nk-bg);border-radius:12px;box-shadow:var(--nk-shadow-menu);overflow:hidden;transform:scale(.98);transition:transform .18s ease}.nk-cmdk-backdrop.open .nk-cmdk{transform:scale(1)}.nk-cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nk-border)}.nk-cmdk-input-row input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:16px;color:var(--nk-text)}.nk-cmdk-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-cmdk-list{max-height:320px;overflow-y:auto;padding:6px}.nk-cmdk-group{font-size:12px;color:var(--nk-text-tertiary);padding:8px 10px 3px}.nk-cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;user-select:none}.nk-cmdk-item.selected{background:var(--nk-bg-active)}.nk-cmdk-item .m-icon,.nk-cmdk-item ::slotted(.m-icon),.nk-cmdk-item ::slotted([slot=\"icon\"]){width:17px;text-align:center;font-size:14px}.nk-cmdk-item .m-shortcut,.nk-cmdk-item ::slotted(.m-shortcut){margin-left:auto;font-size:12px;color:var(--nk-text-tertiary)}.nk-cmdk-empty{padding:30px;text-align:center;color:var(--nk-text-tertiary);font-size:13.5px}.nk-cmdk-footer{display:flex;gap:14px;padding:8px 16px;border-top:1px solid var(--nk-border);font-size:11.5px;color:var(--nk-text-tertiary)}.nk-sheet-backdrop{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:flex-end;padding-top:max(24px,env(safe-area-inset-top,0px));background:var(--nk-scrim-soft);opacity:0;transition:opacity .2s ease,display .25s allow-discrete}.nk-sheet-backdrop.open{display:flex;opacity:1}@starting-style{.nk-sheet-backdrop.open{opacity:0}}.nk-sheet{--_nk-row: 40px;width:100%;max-width:640px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:6px max(10px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:var(--nk-bg);color:var(--nk-text);border-radius:14px 14px 0 0;box-shadow:var(--nk-shadow-menu);translate:0 100%;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-sheet-backdrop.open .nk-sheet{translate:0 0}@starting-style{.nk-sheet-backdrop.open .nk-sheet{translate:0 100%}}.nk-sheet .sh-grabber,.nk-sheet ::slotted(.sh-grabber){width:36px;height:4px;margin:4px auto 10px;border-radius:2px;background:var(--nk-border-strong)}.nk-sheet .sh-title,.nk-sheet ::slotted(.sh-title){font-size:14px;font-weight:600;text-align:center;padding:0 8px 10px}.nk-peek-backdrop{position:fixed;inset:0;z-index:50;display:none;pointer-events:none;transition:background-color .2s ease,display .25s allow-discrete}.nk-peek-backdrop.open{display:block}.nk-peek{--_nk-title: 32px;position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);display:flex;flex-direction:column;pointer-events:auto;outline:none;background:var(--nk-bg);color:var(--nk-text);box-shadow:var(--nk-shadow-menu);translate:100% 0;transition:translate .25s cubic-bezier(.2,.8,.2,1)}.nk-peek-backdrop.open .nk-peek{translate:0 0}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:100% 0}}.nk-peek .pk-bar{flex:none;display:flex;align-items:center;gap:2px;height:44px;padding:0 12px}.nk-peek .pk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 48px 64px;font-size:16px;line-height:1.5}.nk-toast{position:fixed;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));left:50%;transform:translate(-50%) translateY(80px);z-index:120;width:max-content;max-width:calc(100% - 32px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:14px;opacity:0;transition:all .3s ease;pointer-events:none;box-shadow:var(--nk-shadow-menu);display:flex;gap:8px;align-items:center}.nk-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.nk-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px 32px;margin:12px 0}.nk-g-item>h4{font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.nk-g-item ::slotted(h4){font-size:12px;font-weight:500;color:var(--nk-text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px!important}.nk-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);font-size:14px}.nk-tab{padding:7px 11px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none}.nk-tab:hover{color:var(--nk-text)}.nk-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);font-weight:500}.nk-tab-panel{padding:12px 2px;color:var(--nk-text-secondary);line-height:1.55;font-size:14px}.nk-template-btn{display:flex;align-items:center;gap:8px;width:100%;font-family:inherit;font-size:14px;color:var(--nk-text-secondary);background:var(--nk-bg-callout);border:none;border-radius:var(--nk-radius);padding:8px 12px;cursor:pointer;margin-bottom:6px;text-align:left}.nk-template-btn:hover{background:var(--nk-bg-hover)}.nk-stats{display:flex;gap:10px}.nk-stat{flex:1;border:1px solid var(--nk-border);border-radius:8px;padding:12px 14px}.nk-stat .s-label,.nk-stat ::slotted(.s-label),.nk-stat ::slotted([slot=\"label\"]){font-size:12px;color:var(--nk-text-secondary);margin-bottom:4px}.nk-stat .s-value,.nk-stat ::slotted(.s-value),.nk-stat ::slotted([slot=\"value\"]){font-size:22px;font-weight:600;letter-spacing:-.01em}.nk-stat .s-delta,.nk-stat ::slotted(.s-delta),.nk-stat ::slotted([slot=\"delta\"]){font-size:12px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=\"delta\"].up){color:var(--nk-color-green)}.nk-stat .s-delta.down,.nk-stat ::slotted(.s-delta.down),.nk-stat ::slotted([slot=\"delta\"].down){color:var(--nk-danger)}.nk-synced{border:1.5px solid color-mix(in srgb,var(--nk-danger) 55%,transparent);border-radius:8px;padding:12px 14px;position:relative;margin:8px 0}.nk-synced .synced-badge{position:absolute;top:-9px;right:10px;font-size:11px;background:var(--nk-danger);color:var(--nk-on-accent);border-radius:8px;padding:1px 8px}.nk-segmented{display:inline-flex;background:var(--nk-bg-callout);border-radius:7px;padding:2px}.nk-segmented button{font-family:inherit;font-size:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px;border-radius:5px;cursor:pointer}.nk-segmented ::slotted(button){font-family:inherit;font-size:14px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 12px!important;border-radius:5px;cursor:pointer}.nk-segmented button.active,.nk-segmented ::slotted(button.active){background:var(--nk-bg);color:var(--nk-text);font-weight:500;box-shadow:var(--nk-shadow-segment)}.nk-segmented.wrap{flex-wrap:wrap}.nk-segmented.scroll{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nk-segmented.scroll::-webkit-scrollbar{display:none}.nk-segmented.scroll button,.nk-segmented.scroll ::slotted(button){flex-shrink:0;white-space:nowrap}.nk-banner{display:flex;align-items:center;gap:10px;font-size:14px;border-radius:8px;padding:10px 14px;margin-bottom:8px;color:var(--nk-text)}.nk-banner.info{background:var(--nk-tint-blue)}.nk-banner.success{background:var(--nk-tint-green)}.nk-banner.warning{background:var(--nk-tint-yellow)}.nk-banner.danger{background:var(--nk-tint-red)}.nk-banner .b-action,.nk-banner ::slotted(.b-action),.nk-banner ::slotted([slot=\"action\"]){margin-left:auto;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.nk-avatar-group{display:flex}.nk-avatar-group .mini-avatar,.nk-avatar-group .nk-avatar,.nk-avatar-group ::slotted(.mini-avatar),.nk-avatar-group ::slotted(.nk-avatar){width:26px;height:26px;border-radius:50%;color:var(--nk-on-accent);font-size:10.5px;font-weight:600;border:2px solid var(--nk-bg);display:flex;align-items:center;justify-content:center;margin-left:-7px}.nk-avatar-group .mini-avatar:first-child,.nk-avatar-group .nk-avatar:first-child,.nk-avatar-group ::slotted(.mini-avatar:first-child),.nk-avatar-group ::slotted(.nk-avatar:first-child){margin-left:0}.nk-avatar-group .more,.nk-avatar-group ::slotted(.more){background:var(--nk-bg-callout);color:var(--nk-text-secondary)}.nk-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;overflow:hidden;vertical-align:middle;font-size:10px;font-weight:600;line-height:1;color:var(--nk-on-accent);user-select:none;background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));object-fit:cover}.nk-avatar.small{width:20px;height:20px;font-size:9px}.nk-avatar.large{width:32px;height:32px;font-size:12px}.nk-avatar.xlarge{width:56px;height:56px;font-size:20px}.nk-avatar.square{border-radius:4px}.nk-avatar>img,.nk-avatar ::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.nk-avatar.gray{background:var(--nk-color-gray)}.nk-avatar.brown{background:var(--nk-color-brown)}.nk-avatar.orange{background:var(--nk-color-orange)}.nk-avatar.yellow{background:var(--nk-color-yellow)}.nk-avatar.green{background:var(--nk-color-green)}.nk-avatar.blue{background:var(--nk-color-blue)}.nk-avatar.purple{background:var(--nk-color-purple)}.nk-avatar.pink{background:var(--nk-color-pink)}.nk-avatar.red{background:var(--nk-color-red)}.nk-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:12px 0}.nk-panel{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px;border:1px solid var(--nk-border);border-radius:10px;background:var(--nk-bg-card);box-shadow:var(--nk-shadow-card);font-size:14px;line-height:1.5;color:inherit;text-decoration:none;text-align:left}:is(a,button).nk-panel{cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}:is(a,button).nk-panel:hover{border-color:var(--nk-border-strong)}.nk-panel>h3{font-size:14px;font-weight:600;line-height:1.4}.nk-panel ::slotted(h3){font-size:14px;font-weight:600;line-height:1.4;margin:0!important}.nk-panel>p{font-size:13px;color:var(--nk-text-secondary)}.nk-panel ::slotted(p){font-size:13px;color:var(--nk-text-secondary);margin:0!important}.nk-panel>.nk-cover{flex:none;height:64px;margin:-14px -16px 2px;border-radius:9px 9px 0 0}.nk-panel>.nk-page-icon{font-size:28px}.nk-panel>.nk-cover+.nk-page-icon{margin-top:-24px}.nk-skeleton{border-radius:5px;margin-bottom:10px;background:linear-gradient(90deg,var(--nk-bg-callout) 25%,var(--nk-bg-hover) 50%,var(--nk-bg-callout) 75%);background-size:200% 100%;animation:nk-shimmer 1.6s infinite}@keyframes nk-shimmer{to{background-position:-200% 0}}.nk-empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--nk-border-strong);border-radius:10px;color:var(--nk-text-tertiary)}.nk-empty .e-icon,.nk-empty ::slotted(.e-icon),.nk-empty ::slotted([slot=\"icon\"]){font-size:30px;margin-bottom:8px}.nk-empty .e-title,.nk-empty ::slotted(.e-title),.nk-empty ::slotted([slot=\"title\"]){font-weight:500;color:var(--nk-text-secondary);margin-bottom:3px;font-size:14px}.nk-empty .e-desc,.nk-empty ::slotted(.e-desc),.nk-empty ::slotted([slot=\"desc\"]){font-size:13px;margin-bottom:12px}.nk-empty .e-actions,.nk-empty ::slotted(.e-actions){display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.nk-steps{display:flex;flex-direction:column;margin:8px 0;padding:0;list-style:none;font-size:14px}.nk-step{position:relative;display:flex;align-items:flex-start;gap:10px;padding-bottom:14px;line-height:20px;color:var(--nk-text-tertiary)}.nk-step:last-child{padding-bottom:0}.nk-step:not(:last-child):after{content:\"\";position:absolute;left:10px;top:24px;bottom:4px;width:1px;background:var(--nk-border)}.nk-step .st-mark{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--nk-border-strong);background:var(--nk-bg);font-size:11px;font-weight:600;line-height:1}.nk-step .st-desc{display:block;font-size:12px;line-height:18px;color:var(--nk-text-tertiary);font-weight:400}.nk-step.done{color:var(--nk-text-secondary)}.nk-step.done .st-mark{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text);border-color:transparent}.nk-step.current{color:var(--nk-text);font-weight:500}.nk-step.current .st-mark{border-color:var(--nk-accent);color:var(--nk-accent)}.nk-comments{border-left:1px solid var(--nk-border);padding:4px 0 4px 18px;margin:8px 0 8px 8px}.nk-comment{display:flex;gap:9px;margin-bottom:14px}.nk-comment .mini-avatar,.nk-comment ::slotted(.mini-avatar),.nk-comment ::slotted([slot=\"avatar\"]){width:24px;height:24px;border-radius:50%;color:var(--nk-on-accent);flex-shrink:0;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}.nk-comment .c-head,.nk-comment ::slotted(.c-head){font-size:12px;color:var(--nk-text-tertiary);margin-bottom:2px}.nk-comment .c-head b{color:var(--nk-text);font-weight:600}.nk-comment .c-body,.nk-comment ::slotted(.c-body){font-size:14px;line-height:1.5}.nk-comment-input{display:flex;gap:8px;align-items:center;margin-top:4px}.nk-comment-input input{min-width:0;flex:1}.nk-ai-thread{display:flex;flex-direction:column;gap:14px}.nk-ai-msg{display:flex;gap:9px}.nk-ai-msg .mini-avatar,.nk-ai-msg ::slotted(.mini-avatar),.nk-ai-msg ::slotted([slot=\"avatar\"]){width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--nk-bg-callout)}.nk-ai-msg.user .mini-avatar,.nk-ai-msg.user ::slotted(.mini-avatar),.nk-ai-msg.user ::slotted([slot=\"avatar\"]){background:linear-gradient(135deg,var(--nk-decor-purple),var(--nk-decor-blue));color:var(--nk-on-accent);font-size:9.5px;font-weight:600}.nk-ai-msg .a-body,.nk-ai-msg ::slotted(.a-body){font-size:14px;line-height:1.55;padding-top:2px}.nk-ai-msg .a-name,.nk-ai-msg ::slotted(.a-name){font-size:12px;font-weight:600;margin-bottom:2px}.nk-ai-msg .a-name span{color:var(--nk-text-tertiary);font-weight:400}.nk-ai-msg.user.bubble{justify-content:flex-end}.nk-ai-msg.bubble .a-body,.nk-ai-msg.bubble ::slotted(.a-body){max-width:85%;padding:6px 12px;border-radius:16px;background:var(--nk-bg-callout)}.nk-ai-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px;cursor:pointer}.nk-ai-actions ::slotted(button){font-family:inherit;font-size:12px;color:var(--nk-text-secondary);background:transparent;border:1px solid var(--nk-border);border-radius:5px;padding:2px 8px!important;cursor:pointer}.nk-ai-actions button:hover,.nk-ai-actions ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-ai-input-row{display:flex;align-items:center;gap:8px;margin-top:14px;border:1px solid var(--nk-border-strong);border-radius:10px;padding:8px 12px}.nk-ai-input-row:focus-within{border-color:var(--nk-accent)}.nk-ai-input-row input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--nk-text);min-width:0}.nk-ai-input-row input::placeholder{color:var(--nk-text-tertiary)}.nk-ai-send{border:none;background:var(--nk-accent);color:var(--nk-on-accent);border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;flex-shrink:0}.nk-block-host{position:relative;border-radius:var(--nk-radius);margin:8px 0;padding:2px 0 2px 2px;transition:background .15s,box-shadow .15s}.nk-block-host:hover{background:var(--nk-bg-hover)}.nk-block-host:focus-within{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host.nk-drop-target{box-shadow:0 -2px 0 0 var(--nk-accent);background:transparent}.nk-block-host .nk-block-handle,.nk-block-host ::slotted(.nk-block-handle){position:absolute;left:-26px;top:4px;width:18px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--nk-text-tertiary);font-size:13px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none}.nk-block-host:hover .nk-block-handle{opacity:1}.nk-block-host .nk-block-actions{position:absolute;display:flex;gap:1px;z-index:2;opacity:0;transition:opacity .15s;pointer-events:none}.nk-block-host .nk-block-actions.show{opacity:1;pointer-events:auto}.nk-block-host .nk-block-actions button,.nk-block-host .nk-block-actions ::slotted(button){width:20px;height:22px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--nk-text-tertiary);font-family:inherit;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.nk-block-host .nk-block-actions button:hover{background:var(--nk-bg-hover);color:var(--nk-text)}.nk-block-host .nk-block-actions .drag{cursor:grab}.nk-block-host .nk-block-actions .drag:active{cursor:grabbing}.nk-prose,.nk-block-host .ProseMirror{font-family:var(--nk-font);line-height:1.5;color:var(--nk-text);overflow-wrap:break-word}.nk-block-host .ProseMirror{outline:none;min-height:60px;padding:4px 2px}.nk-prose>*+*,.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-prose h1,.nk-block-host .ProseMirror h1{font-size:1.875em;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:32px 0 4px}.nk-prose h2,.nk-block-host .ProseMirror h2{font-size:1.5em;font-weight:600;line-height:1.3;margin:24px 0 4px}.nk-prose h3,.nk-block-host .ProseMirror h3{font-size:1.25em;font-weight:600;line-height:1.3;margin:16px 0 2px}.nk-prose :is(h4,h5,h6),.nk-block-host .ProseMirror :is(h4,h5,h6){font-size:1em;font-weight:600;margin:12px 0 0}.nk-prose>:first-child,.nk-block-host .ProseMirror>:first-child{margin-top:0}.nk-prose>:last-child,.nk-block-host .ProseMirror>:last-child{margin-bottom:0}.nk-prose p:empty:before{content:\"\";display:inline-block}.nk-prose :is(strong,b),.nk-block-host .ProseMirror :is(strong,b){font-weight:600}.nk-prose :is(ul,ol),.nk-block-host .ProseMirror :is(ul,ol){padding-left:24px;margin:4px 0}.nk-prose ul,.nk-block-host .ProseMirror ul{list-style:disc}.nk-prose ol,.nk-block-host .ProseMirror ol{list-style:decimal}.nk-prose li,.nk-block-host .ProseMirror li{margin:2px 0}.nk-prose li::marker,.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-prose ul[data-type=taskList],.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-prose ul[data-type=taskList] li,.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-prose ul[data-type=taskList] li>label,.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:max(0px,calc((1lh - 16px)/2));user-select:none}.nk-prose ul[data-type=taskList] li>div,.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.nk-prose ul[data-type=taskList] input[type=checkbox],.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]{appearance:none;width:16px;height:16px;margin:0;border:1.4px solid var(--nk-border-strong);border-radius:2px;cursor:pointer;position:relative;background:var(--nk-bg);display:block}.nk-prose ul[data-type=taskList] input[type=checkbox]:checked,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked{background:var(--nk-accent);border-color:var(--nk-accent)}.nk-prose ul[data-type=taskList] input[type=checkbox]:checked:after,.nk-block-host .ProseMirror ul[data-type=taskList] input[type=checkbox]:checked:after{content:\"\\2713\";color:var(--nk-on-accent);font-size:11px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.nk-prose li[data-checked=true]>div,.nk-block-host .ProseMirror li[data-checked=true]>div{text-decoration:line-through;color:var(--nk-text-tertiary)}.nk-prose blockquote,.nk-block-host .ProseMirror blockquote{border-left:3px solid var(--nk-text);padding:2px 0 2px 14px;margin:12px 0;color:var(--nk-text-secondary)}.nk-prose code,.nk-block-host .ProseMirror code{font-family:var(--nk-font-mono);font-size:85%;color:var(--nk-danger);background:color-mix(in srgb,var(--nk-danger) 8%,transparent);border-radius:4px;padding:1px 5px}.nk-prose pre,.nk-block-host .ProseMirror pre{background:var(--nk-bg-code);border:1px solid var(--nk-border);border-radius:var(--nk-radius);padding:16px 20px;margin:12px 0;font-family:var(--nk-font-mono);font-size:13px;line-height:1.6;color:var(--nk-text-secondary);overflow-x:auto}.nk-prose pre code,.nk-block-host .ProseMirror pre code{background:none;color:inherit;padding:0;font-size:inherit}.nk-prose hr,.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-prose a,.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.nk-prose img{max-width:100%;height:auto}.nk-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;margin:12px 0}.nk-prose :is(th,td){padding:6px 10px;border:1px solid var(--nk-border);text-align:left;vertical-align:top}.nk-prose th{font-weight:600}.nk-block-host .ProseMirror-gapcursor:after{border-top-color:var(--nk-text)}.nk-block-host .ProseMirror .ProseMirror-selectednode{background:color-mix(in srgb,var(--nk-accent) 8%,transparent)}.nk-block-host .ProseMirror-selectednode{box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 35%,transparent);border-radius:3px}.nk-block-host .ProseMirror ::selection{background:color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-block-host .ProseMirror p.is-editor-empty:first-child:before,.nk-block-host .ProseMirror .is-empty:before{content:attr(data-placeholder);color:var(--nk-text-tertiary);float:left;height:0;pointer-events:none}.nk-block-host .bn-container{font-family:var(--nk-font);color:var(--nk-text);background:transparent}.nk-block-host .bn-editor{padding:4px 2px}.nk-block-host .bn-block-content{font-size:14px;line-height:1.6}.nk-block-host .bn-side-menu{color:var(--nk-text-tertiary)}.nk-block-host .bn-drag-handle{border-radius:4px}.nk-block-host .bn-drag-handle:hover{background:var(--nk-bg-hover)}.nk-block-host .novel-editor{font-family:var(--nk-font);color:var(--nk-text)}.nk-block-host .novel-prose{max-width:none}.nk-slash-menu,.nk-block-host .bn-suggestion-menu,.nk-block-host .tippy-box{background:var(--nk-bg);border-radius:10px;box-shadow:var(--nk-shadow-menu);padding:6px;width:280px;max-height:320px;overflow-y:auto;font-family:var(--nk-font);font-size:14px;color:var(--nk-text)}.nk-slash-menu-label{font-size:12px;color:var(--nk-text-tertiary);padding:6px 9px 2px}.nk-slash-item{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:5px;cursor:pointer;user-select:none}.nk-slash-item:hover,.nk-slash-item.selected{background:var(--nk-bg-hover)}.nk-slash-item .m-icon,.nk-slash-item ::slotted(.m-icon){width:28px;height:28px;flex-shrink:0;border-radius:4px;background:var(--nk-bg-callout);border:1px solid var(--nk-border);display:flex;align-items:center;justify-content:center;font-size:15px}.nk-slash-item .m-desc{font-size:12px;color:var(--nk-text-tertiary)}.nk-bubble-menu{display:flex;align-items:center;gap:2px;background:var(--nk-bg);border-radius:8px;box-shadow:var(--nk-shadow-menu);padding:4px}.nk-bubble-menu button{font-family:inherit;font-size:13px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 8px;border-radius:5px;cursor:pointer}.nk-bubble-menu ::slotted(button){font-family:inherit;font-size:13px;border:none;background:transparent;color:var(--nk-text-secondary);padding:4px 8px!important;border-radius:5px;cursor:pointer}.nk-bubble-menu button:hover,.nk-bubble-menu ::slotted(button:hover){background:var(--nk-bg-hover);color:var(--nk-text)}.nk-bubble-menu button.active,.nk-bubble-menu ::slotted(button.active){color:var(--nk-accent)}@media(max-width:860px){.nk-sidebar{display:none;position:fixed;inset:0 auto 0 0;z-index:60;transform:translate(-100%);transition:background .25s ease,transform .24s cubic-bezier(.2,.8,.25,1),display .24s allow-discrete}.nk-sidebar.open{display:flex;transform:none}@starting-style{.nk-sidebar.open{transform:translate(-100%)}}.nk-sidebar-backdrop{opacity:0;transition:opacity .24s ease,display .24s allow-discrete}.nk-sidebar-backdrop.open{display:block;opacity:1}@starting-style{.nk-sidebar-backdrop.open{opacity:0}}.nk-sidebar-toggle{display:inline-flex}.nk-tab-bar{display:flex}.nk-tab-bar.fixed+.nk-tab-bar-spacer{display:block}.nk-page{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));padding-bottom:80px}.nk-settings-nav{width:60px;min-width:60px}.nk-settings-nav .label,.nk-settings-nav .nk-section-label,.nk-settings-user .u-text{display:none}.nk-settings-content{padding:24px}.nk-cmdk-backdrop{padding-top:max(6vh,env(safe-area-inset-top,0px))}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}.nk-breadcrumb{min-width:0}.nk-breadcrumb>.crumb:not(:last-child),.nk-breadcrumb ::slotted(.crumb:not(:last-child)),.nk-breadcrumb>.sep,.nk-breadcrumb ::slotted(.sep),.nk-topbar-meta,.nk-topbar-actions ::slotted(.nk-topbar-meta){display:none}.nk-breadcrumb>.crumb:last-child,.nk-breadcrumb ::slotted(.crumb:last-child){display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nk-topbar-actions{flex-shrink:0}.nk-field{flex-wrap:wrap;row-gap:6px}.nk-field .f-control,.nk-field ::slotted(.f-control){max-width:100%;min-width:0}.nk-input,.nk-select,.nk-textarea,.nk-slider{max-width:100%}.nk-prop{flex-direction:column;align-items:stretch}.nk-prop .p-name{flex:none;min-height:26px}.nk-prop .p-value{min-height:30px;padding:3px 6px 7px}.nk-pop.sheet{position:fixed!important;inset:auto 0 0!important;width:auto!important;transform:none!important;z-index:100;--_nk-row: 40px;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:14px 14px 0 0;padding:6px max(8px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 0 0 100vmax var(--nk-scrim-soft),var(--nk-shadow-menu)}.nk-pop.sheet:before{content:\"\";display:block;width:36px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--nk-border-strong)}.nk-pop.sheet.floating{translate:0 100%;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}.nk-pop.sheet.floating.open{translate:0 0;transition:opacity .2s ease,translate .25s cubic-bezier(.2,.8,.2,1),visibility 0s}.nk-peek-backdrop{pointer-events:auto}.nk-peek-backdrop.open{background-color:var(--nk-scrim-soft)}@starting-style{.nk-peek-backdrop.open{background-color:transparent}}.nk-peek{--_nk-title: 28px;top:auto;left:0;width:auto;max-height:92dvh;border-radius:14px 14px 0 0;translate:0 100%}.nk-peek-backdrop.open .nk-peek{translate:0 0}@starting-style{.nk-peek-backdrop.open .nk-peek{translate:0 100%}}.nk-peek:before{content:\"\";flex:none;width:36px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--nk-border-strong)}.nk-peek .pk-bar{height:40px;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}.nk-peek .pk-body{padding:0 max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}:root:has(.nk-tab-bar:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + max(6px,env(safe-area-inset-bottom,0px)) + 6px)}:root:has(.nk-tab-bar.floating:not([hidden])) .nk-toast{bottom:calc(var(--nk-tab-bar-height) + 24px + env(safe-area-inset-bottom,0px))}}@media(prefers-reduced-motion:reduce){.nk-skeleton{animation:none;background:var(--nk-bg-callout)}[class*=nk-],[class*=nk-]:before,[class*=nk-]:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n/*# sourceMappingURL=notionkit.min.css.map */\n";
13
13
 
14
14
  const componentsCss = componentsHead + componentsTail;
15
15
  const css = componentsHead + tokensCss + componentsTail;
@@ -369,13 +369,16 @@ var NotionKitElements = (function (exports) {
369
369
  // <nk-btn variant="primary" small>Save</nk-btn> → <button class="nk-btn primary small">
370
370
  // <nk-btn href="/docs" variant="secondary">Docs</nk-btn> → <a class="nk-btn secondary">
371
371
  // <nk-btn variant="topbar">⭐</nk-btn> → <button class="nk-topbar-btn">
372
+ // <nk-btn variant="tool" active>Filter</nk-btn> → <button class="nk-db-tool active"> (slot="tools" of nk-database)
373
+ // <nk-btn variant="sidebar" aria-label="Menu">☰</nk-btn> → <button class="nk-topbar-btn nk-sidebar-toggle">:
374
+ // shown on phones only, it opens the page's <nk-sidebar> as a drawer.
372
375
  //
373
376
  // Modifier classes become attributes. A slotted <svg> is sized by the
374
377
  // `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
375
378
  const VARIANTS$1 = ['primary', 'secondary', 'danger', 'danger-solid', 'topbar', 'share'];
376
379
 
377
380
  class NkBtn extends NkElement {
378
- static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label']; }
381
+ static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label', 'aria-haspopup', 'active']; }
379
382
 
380
383
  render() {
381
384
  this._build();
@@ -403,13 +406,22 @@ var NotionKitElements = (function (exports) {
403
406
  else el.setAttribute('aria-disabled', disabled ? 'true' : 'false');
404
407
  const title = this.getAttribute('title');
405
408
  title ? el.setAttribute('title', title) : el.removeAttribute('title');
406
- const label = this.getAttribute('aria-label');
407
- label ? el.setAttribute('aria-label', label) : el.removeAttribute('aria-label');
409
+ // The accessible name and the popup hint belong on the button itself.
410
+ for (const name of ['aria-label', 'aria-haspopup']) {
411
+ const v = this.getAttribute(name);
412
+ v ? el.setAttribute(name, v) : el.removeAttribute(name);
413
+ }
414
+ if (this.getAttribute('variant') === 'sidebar') el.setAttribute('aria-expanded', this._sidebar()?.open ? 'true' : 'false');
415
+ else el.removeAttribute('aria-expanded');
408
416
  }
409
417
 
418
+ /** The sidebar the ☰ opens: the one in its own app, else the page's. */
419
+ _sidebar() { return this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar'); }
420
+
410
421
  setupEvents() {
411
422
  this._onClick = (e) => {
412
423
  if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
424
+ if (this.getAttribute('variant') === 'sidebar') { this._sidebar()?.toggle?.(); return; }
413
425
  // A button inside a shadow root is not a submit button of the outer
414
426
  // form; forward the intent to the form the host sits in.
415
427
  const type = this.getAttribute('type');
@@ -418,11 +430,17 @@ var NotionKitElements = (function (exports) {
418
430
  if (form) type === 'submit' ? form.requestSubmit() : form.reset();
419
431
  }
420
432
  };
433
+ // The ☰ says whether its drawer is open, however the drawer closed.
434
+ this._onToggle = (e) => {
435
+ if (this.getAttribute('variant') === 'sidebar' && e.target === this._sidebar()) this._btn.setAttribute('aria-expanded', e.detail.open ? 'true' : 'false');
436
+ };
421
437
  this._btn.addEventListener('click', this._onClick);
438
+ document.addEventListener('nk-toggle', this._onToggle);
422
439
  }
423
440
 
424
441
  teardownEvents() {
425
442
  this._btn?.removeEventListener('click', this._onClick);
443
+ document.removeEventListener('nk-toggle', this._onToggle);
426
444
  }
427
445
 
428
446
  onAttributeChanged(name) {
@@ -432,7 +450,11 @@ var NotionKitElements = (function (exports) {
432
450
  this._build();
433
451
  break;
434
452
  case 'variant':
453
+ this._btn.className = this._computeClasses().join(' ');
454
+ this._applyState(this._btn);
455
+ break;
435
456
  case 'small':
457
+ case 'active':
436
458
  this._btn.className = this._computeClasses().join(' ');
437
459
  break;
438
460
  case 'type':
@@ -447,6 +469,8 @@ var NotionKitElements = (function (exports) {
447
469
  const variant = this.getAttribute('variant');
448
470
  if (variant === 'topbar') return ['nk-topbar-btn'];
449
471
  if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
472
+ if (variant === 'sidebar') return ['nk-topbar-btn', 'nk-sidebar-toggle'];
473
+ if (variant === 'tool') return this.getBoolAttr('active') ? ['nk-db-tool', 'active'] : ['nk-db-tool'];
450
474
  const classes = ['nk-btn'];
451
475
  if (VARIANTS$1.includes(variant)) classes.push(variant);
452
476
  if (this.getBoolAttr('small')) classes.push('small');
@@ -458,6 +482,8 @@ var NotionKitElements = (function (exports) {
458
482
 
459
483
  get variant() { return this.getAttribute('variant'); }
460
484
  set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
485
+ get active() { return this.getBoolAttr('active'); }
486
+ set active(v) { this.setBoolAttr('active', v); }
461
487
  get small() { return this.getBoolAttr('small'); }
462
488
  set small(v) { this.setBoolAttr('small', v); }
463
489
  get disabled() { return this.getBoolAttr('disabled'); }
@@ -1714,42 +1740,12 @@ var NotionKitElements = (function (exports) {
1714
1740
  //
1715
1741
  // The host is display:contents so the <aside> is a direct flex child of
1716
1742
  // .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
1717
- // aside; `open` brings it back as an off-canvas drawer (position only – the
1718
- // look is still the stylesheet's).
1719
- //
1720
- // The drawer slides and the scrim fades without a line of JavaScript:
1721
- // `display` transitions with transition-behavior: allow-discrete (the old
1722
- // value is held for the whole duration, so closing animates too) and
1723
- // @starting-style gives the first frame after display: none its start
1724
- // values. `position: fixed` lives on the plain .nk-sidebar, not on the open
1725
- // state – while closing, the aside is still displayed and must not fall
1726
- // back into the flow. Browsers without either feature switch hard, as
1727
- // before; prefers-reduced-motion switches hard on purpose.
1728
- const drawerSheet = new CSSStyleSheet();
1729
- drawerSheet.replaceSync(`
1730
- .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
1731
- @media (max-width: 860px) {
1732
- .nk-sidebar {
1733
- position: fixed; inset: 0 auto 0 0; z-index: 60;
1734
- transform: translateX(-100%);
1735
- transition: background .25s ease, transform .24s cubic-bezier(.2, .8, .25, 1), display .24s;
1736
- transition-behavior: allow-discrete;
1737
- }
1738
- :host([open]) .nk-sidebar { display: flex; transform: none; }
1739
- @starting-style { :host([open]) .nk-sidebar { transform: translateX(-100%); } }
1740
- .nk-sidebar-backdrop {
1741
- opacity: 0;
1742
- transition: opacity .24s ease, display .24s;
1743
- transition-behavior: allow-discrete;
1744
- }
1745
- :host([open]) .nk-sidebar-backdrop { display: block; opacity: 1; }
1746
- @starting-style { :host([open]) .nk-sidebar-backdrop { opacity: 0; } }
1747
- }
1748
- @media (prefers-reduced-motion: reduce) { .nk-sidebar, .nk-sidebar-backdrop { transition: none; } }
1749
- `);
1750
-
1743
+ // aside; `open` brings it back as a drawer over the page. The drawer is the
1744
+ // stylesheet's since NotionKit 1.7.0 (.nk-sidebar.open, .nk-sidebar-backdrop
1745
+ // .open) – the sidebar slides and the scrim fades by the same rules as the
1746
+ // class markup; the element toggles the two classes. <nk-btn variant="sidebar">
1747
+ // in the topbar is the ☰ that opens it.
1751
1748
  class NkSidebar extends NkElement {
1752
- static get hostStyles() { return drawerSheet; }
1753
1749
  static get observedAttributes() { return ['open']; }
1754
1750
 
1755
1751
  render() {
@@ -1766,6 +1762,13 @@ var NotionKitElements = (function (exports) {
1766
1762
  this._wrapper.appendChild(this._backdrop);
1767
1763
  this._wrapper.appendChild(this._aside);
1768
1764
  this._syncFooter();
1765
+ this._syncOpen();
1766
+ }
1767
+
1768
+ _syncOpen() {
1769
+ const open = this.getBoolAttr('open');
1770
+ this._aside.classList.toggle('open', open);
1771
+ this._backdrop.classList.toggle('open', open);
1769
1772
  }
1770
1773
 
1771
1774
  _syncFooter() {
@@ -1792,7 +1795,9 @@ var NotionKitElements = (function (exports) {
1792
1795
  }
1793
1796
 
1794
1797
  onAttributeChanged(name) {
1795
- if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
1798
+ if (name !== 'open') return;
1799
+ this._syncOpen();
1800
+ this.emit('nk-toggle', { open: this.getBoolAttr('open') });
1796
1801
  }
1797
1802
 
1798
1803
  show() { this.setBoolAttr('open', true); }
@@ -3007,6 +3012,9 @@ var NotionKitElements = (function (exports) {
3007
3012
  // → <div class="nk-segmented">…</div> with .active on the chosen button.
3008
3013
  // The buttons stay in the light DOM (their look comes from the ::slotted
3009
3014
  // twins); the element sets type/role, moves .active and submits the value.
3015
+ // With `scroll` the chosen option is kept in view – after the first layout,
3016
+ // on every change and when the row's width changes – by scrolling the row
3017
+ // alone, never the page, by a relative distance, so right-to-left works too.
3010
3018
  const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
3011
3019
 
3012
3020
  class NkSegmented extends NkFormElement {
@@ -3050,6 +3058,19 @@ var NotionKitElements = (function (exports) {
3050
3058
  }
3051
3059
  this._value = value;
3052
3060
  this.setFormValue(value);
3061
+ this._reveal(this._revealed ? 'smooth' : 'instant');
3062
+ }
3063
+
3064
+ /** Scrolls the row the least distance that shows the chosen button whole. */
3065
+ _reveal(behavior) {
3066
+ if (!this.getBoolAttr('scroll') || !this._box?.clientWidth) return;
3067
+ const btn = this.buttons.find(b => b.classList.contains('active'));
3068
+ if (!btn) return;
3069
+ const row = this._box.getBoundingClientRect(), r = btn.getBoundingClientRect(), pad = 8;
3070
+ const delta = r.left < row.left ? r.left - row.left - pad : r.right > row.right ? r.right - row.right + pad : 0;
3071
+ const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
3072
+ if (delta) this._box.scrollBy({ left: delta, behavior: smooth ? 'smooth' : 'instant' });
3073
+ this._revealed = true;
3053
3074
  }
3054
3075
 
3055
3076
  setupEvents() {
@@ -3073,6 +3094,8 @@ var NotionKitElements = (function (exports) {
3073
3094
  this._slot.addEventListener('slotchange', this._onSlot);
3074
3095
  this.addEventListener('click', this._onClick);
3075
3096
  this.addEventListener('keydown', this._onKey);
3097
+ this._resize = new ResizeObserver(() => this._reveal('instant'));
3098
+ this._resize.observe(this._box);
3076
3099
  this._sync();
3077
3100
  }
3078
3101
 
@@ -3080,6 +3103,7 @@ var NotionKitElements = (function (exports) {
3080
3103
  this._slot?.removeEventListener('slotchange', this._onSlot);
3081
3104
  this.removeEventListener('click', this._onClick);
3082
3105
  this.removeEventListener('keydown', this._onKey);
3106
+ this._resize?.disconnect();
3083
3107
  }
3084
3108
 
3085
3109
  _choose(value) {
@@ -3685,9 +3709,10 @@ var NotionKitElements = (function (exports) {
3685
3709
 
3686
3710
  customElements.define('nk-panel', NkPanel);
3687
3711
 
3688
- // Overlay plumbing shared by nk-modal and nk-cmdk: body scroll lock with a
3689
- // refcount, and `inert` on everything outside the overlay so focus and
3690
- // assistive technology stay inside – nested shadow roots included.
3712
+ // Overlay plumbing shared by nk-modal, nk-sheet, nk-cmdk and nk-menu: body
3713
+ // scroll lock with a refcount, `inert` on everything outside the overlay so
3714
+ // focus and assistive technology stay inside – nested shadow roots included –
3715
+ // and the focused element behind shadow hosts, to return focus to.
3691
3716
  let locks = 0, previousOverflow = '';
3692
3717
 
3693
3718
  function lockScroll() {
@@ -3718,6 +3743,13 @@ var NotionKitElements = (function (exports) {
3718
3743
  return () => { for (const c of made) c.inert = false; };
3719
3744
  }
3720
3745
 
3746
+ /** The focused element itself, looking into shadow roots (document.activeElement stops at the host). */
3747
+ function deepActiveElement() {
3748
+ let el = document.activeElement;
3749
+ while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement;
3750
+ return el;
3751
+ }
3752
+
3721
3753
  /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
3722
3754
  function firstFocusable(root) {
3723
3755
  const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
@@ -3731,6 +3763,547 @@ var NotionKitElements = (function (exports) {
3731
3763
  return walk(root);
3732
3764
  }
3733
3765
 
3766
+ // <nk-sheet id="more" title="More">
3767
+ // <nk-tree manual>
3768
+ // <nk-section-label>Favourites</nk-section-label>
3769
+ // <nk-tree-item icon="🚀">NotionKit MVP</nk-tree-item>
3770
+ // </nk-tree>
3771
+ // </nk-sheet>
3772
+ // → <div class="nk-sheet-backdrop open"><div class="nk-sheet" role="dialog">
3773
+ // <div class="sh-grabber"></div><div class="sh-title">More</div>…</div></div>
3774
+ //
3775
+ // A bottom sheet (NotionKit 1.7.0) with nk-modal's contract: show(), close()
3776
+ // and toggle(), Escape and the backdrop close it, focus moves in and back
3777
+ // out, the page behind is scroll-locked and inert. It lies above the tab
3778
+ // bar; rows inside are 40px high. `title` is the heading shown under the
3779
+ // grabber and the dialog's name, never a tooltip – see NkElement.takeTitle().
3780
+ // Choosing a row does not close the sheet – the app decides (nk-select
3781
+ // bubbles out). Put the element directly under <body>: a transformed
3782
+ // ancestor would trap the fixed backdrop.
3783
+ class NkSheet extends NkElement {
3784
+ static get observedAttributes() { return ['open', 'title']; }
3785
+
3786
+ render() {
3787
+ this.takeTitle();
3788
+ this._backdrop = this.createElement('div', ['nk-sheet-backdrop']);
3789
+ this._backdrop.inert = true;
3790
+ this._box = this.createElement('div', ['nk-sheet'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
3791
+ this._heading = this.createElement('div', ['sh-title'], { id: 'title' });
3792
+ this._box.append(this.createElement('div', ['sh-grabber']), this._heading, document.createElement('slot'));
3793
+ this._backdrop.appendChild(this._box);
3794
+ this._wrapper.appendChild(this._backdrop);
3795
+ this._syncTitle();
3796
+ this._syncOpen();
3797
+ }
3798
+
3799
+ _syncTitle() {
3800
+ const text = this._titleText || '';
3801
+ this._heading.textContent = text;
3802
+ this._heading.hidden = !text;
3803
+ if (text) this._box.setAttribute('aria-labelledby', 'title');
3804
+ else this._box.removeAttribute('aria-labelledby');
3805
+ }
3806
+
3807
+ _syncOpen() {
3808
+ const open = this.getBoolAttr('open');
3809
+ this._backdrop.classList.toggle('open', open);
3810
+ this._backdrop.inert = !open;
3811
+ if (open === this._wasOpen) return;
3812
+ this._wasOpen = open;
3813
+ if (open) {
3814
+ this._returnFocus = deepActiveElement();
3815
+ lockScroll();
3816
+ this._undoInert = inertOutside(this);
3817
+ requestAnimationFrame(() => (firstFocusable(this) || this._box).focus({ preventScroll: true }));
3818
+ } else {
3819
+ unlockScroll();
3820
+ this._undoInert?.(); this._undoInert = null;
3821
+ const back = this._returnFocus;
3822
+ if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
3823
+ this._returnFocus = null;
3824
+ }
3825
+ }
3826
+
3827
+ setupEvents() {
3828
+ this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
3829
+ this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
3830
+ this._backdrop.addEventListener('click', this._onBackdrop);
3831
+ document.addEventListener('keydown', this._onKey);
3832
+ }
3833
+
3834
+ teardownEvents() {
3835
+ this._backdrop?.removeEventListener('click', this._onBackdrop);
3836
+ document.removeEventListener('keydown', this._onKey);
3837
+ if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
3838
+ }
3839
+
3840
+ onAttributeChanged(name, oldValue, value) {
3841
+ if (name === 'title') { if (this.takeTitle(value)) this._syncTitle(); return; }
3842
+ this._syncOpen();
3843
+ this.emit('nk-toggle', { open: this.getBoolAttr('open') });
3844
+ }
3845
+
3846
+ show() { this.setBoolAttr('open', true); }
3847
+ close() { this.setBoolAttr('open', false); }
3848
+ toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
3849
+
3850
+ get open() { return this.getBoolAttr('open'); }
3851
+ set open(v) { this.setBoolAttr('open', v); }
3852
+ get title() { return this._titleText ?? ''; }
3853
+ set title(v) { this._titleText = v == null ? '' : String(v); if (this._initialized) this._syncTitle(); }
3854
+ }
3855
+
3856
+ customElements.define('nk-sheet', NkSheet);
3857
+
3858
+ // <nk-steps label="Connect your own model" current="2"
3859
+ // steps="Choose a provider, Enter the API key, Test the connection"></nk-steps>
3860
+ // steps.steps = [{ label: 'Choose a provider', desc: 'Anthropic' }, 'Enter the API key', …];
3861
+ // → <ol class="nk-steps" aria-label="…">
3862
+ // <li class="nk-step done"><span class="st-mark">✓</span><span>Choose a provider<span class="st-desc">Anthropic</span></span></li>
3863
+ // <li class="nk-step current" aria-current="step"><span class="st-mark">2</span><span>Enter the API key</span></li>
3864
+ // <li class="nk-step"><span class="st-mark">3</span><span>Test the connection</span></li></ol>
3865
+ // A setup in a few steps (NotionKit 1.7.0). `current` counts from 1; the
3866
+ // steps before it are done, one past the last marks all of them done. The
3867
+ // `steps` attribute is a comma-separated list; the property also takes
3868
+ // { label, desc } objects for a line under the label.
3869
+ class NkSteps extends NkElement {
3870
+ static get observedAttributes() { return ['steps', 'current', 'label']; }
3871
+
3872
+ render() {
3873
+ this._list = this.createElement('ol', ['nk-steps']);
3874
+ this._wrapper.appendChild(this._list);
3875
+ this._sync();
3876
+ }
3877
+
3878
+ _items() {
3879
+ if (this._steps) return this._steps;
3880
+ return (this.getAttribute('steps') || '').split(',').map(s => s.trim()).filter(Boolean);
3881
+ }
3882
+
3883
+ _sync() {
3884
+ const label = this.getAttribute('label');
3885
+ if (label) this._list.setAttribute('aria-label', label); else this._list.removeAttribute('aria-label');
3886
+ const current = this.current;
3887
+ this._list.replaceChildren(...this._items().map((step, i) => {
3888
+ const n = i + 1, { label: text, desc } = typeof step === 'object' && step ? step : { label: String(step) };
3889
+ const li = this.createElement('li', ['nk-step']);
3890
+ li.classList.toggle('done', n < current);
3891
+ li.classList.toggle('current', n === current);
3892
+ if (n === current) li.setAttribute('aria-current', 'step');
3893
+ const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
3894
+ mark.textContent = n < current ? '✓' : String(n);
3895
+ const body = document.createElement('span');
3896
+ body.textContent = text ?? '';
3897
+ if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
3898
+ li.append(mark, body);
3899
+ return li;
3900
+ }));
3901
+ }
3902
+
3903
+ onAttributeChanged() { this._sync(); }
3904
+
3905
+ get steps() { return this._items(); }
3906
+ set steps(v) { this._steps = Array.isArray(v) ? v : null; if (this._list) this._sync(); }
3907
+ get current() { const n = parseInt(this.getAttribute('current'), 10); return Number.isFinite(n) ? n : 1; }
3908
+ set current(v) { this.setAttribute('current', String(v)); }
3909
+ /** Moves on to the next step; returns the new current step. */
3910
+ next() { this.current = Math.min(this.current + 1, this._items().length + 1); return this.current; }
3911
+ }
3912
+
3913
+ customElements.define('nk-steps', NkSteps);
3914
+
3915
+ // <nk-bookmark href="https://notionkit.jungherz.com" title="NotionKit" desc="…"
3916
+ // favicon="favicon.svg" cover="og.jpg"></nk-bookmark>
3917
+ // → <a class="nk-bookmark" href="…" target="_blank" rel="noopener">
3918
+ // <span class="bm-text"><span class="bm-title">…</span><span class="bm-desc">…</span>
3919
+ // <span class="bm-url"><img class="bm-favicon"><span>…</span></span></span>
3920
+ // <span class="bm-cover"><img></span></a>
3921
+ // Notion's link block (NotionKit 1.8.0), filled from what you know of the
3922
+ // page: og:title, og:description, og:image. `title` is the heading, never a
3923
+ // tooltip – see NkElement.takeTitle(); without it the host name stands in.
3924
+ // The address shown is `href`, or `url` where it should read differently. A
3925
+ // part without a value is left out, not hidden – the stylesheet gives the
3926
+ // description its own display. Opens in a new tab unless `target` says so.
3927
+ class NkBookmark extends NkElement {
3928
+ static get observedAttributes() { return ['href', 'title', 'desc', 'favicon', 'cover', 'target', 'url']; }
3929
+
3930
+ render() {
3931
+ this.takeTitle();
3932
+ this._a = this.createElement('a', ['nk-bookmark']);
3933
+ this._wrapper.appendChild(this._a);
3934
+ this._sync();
3935
+ }
3936
+
3937
+ _sync() {
3938
+ if (!this._a) return;
3939
+ const href = this.getAttribute('href') || '';
3940
+ this._a.setAttribute('href', href);
3941
+ const target = this.getAttribute('target') || '_blank';
3942
+ this._a.setAttribute('target', target);
3943
+ if (target === '_blank') this._a.setAttribute('rel', 'noopener'); else this._a.removeAttribute('rel');
3944
+ let host = href;
3945
+ try { host = new URL(href, location.href).host; } catch { /* keep the text */ }
3946
+
3947
+ const text = this.createElement('span', ['bm-text']);
3948
+ const title = this.createElement('span', ['bm-title']);
3949
+ title.textContent = this._titleText || host;
3950
+ text.appendChild(title);
3951
+ const desc = this.getAttribute('desc');
3952
+ if (desc) { const d = this.createElement('span', ['bm-desc']); d.textContent = desc; text.appendChild(d); }
3953
+ const url = this.createElement('span', ['bm-url']);
3954
+ const favicon = this.getAttribute('favicon');
3955
+ if (favicon) url.appendChild(this.createElement('img', ['bm-favicon'], { src: favicon, alt: '' }));
3956
+ const address = document.createElement('span');
3957
+ address.textContent = this.getAttribute('url') || href;
3958
+ url.appendChild(address);
3959
+ text.appendChild(url);
3960
+ const parts = [text];
3961
+ const cover = this.getAttribute('cover');
3962
+ if (cover) { const c = this.createElement('span', ['bm-cover']); c.appendChild(this.createElement('img', [], { src: cover, alt: '' })); parts.push(c); }
3963
+ this._a.replaceChildren(...parts);
3964
+ }
3965
+
3966
+ onAttributeChanged(name, _old, value) {
3967
+ if (name === 'title' && !this.takeTitle(value)) return;
3968
+ this._sync();
3969
+ }
3970
+
3971
+ focus(o) { this._a?.focus(o); }
3972
+ get title() { return this._titleText ?? ''; }
3973
+ set title(v) { this._titleText = v == null ? '' : String(v); this._sync(); }
3974
+ get href() { return this.getAttribute('href') || ''; }
3975
+ set href(v) { this.setAttribute('href', v); }
3976
+ }
3977
+
3978
+ customElements.define('nk-bookmark', NkBookmark);
3979
+
3980
+ // <nk-copy-field value="https://monahilft.notionkit.app"></nk-copy-field>
3981
+ // <nk-copy-field value="ntn_4f2…" secret mono></nk-copy-field>
3982
+ // → <div class="nk-copy-field mono"><span class="cf-value">…</span>
3983
+ // <button class="cf-btn">Show</button><button class="cf-btn">Copy</button></div>
3984
+ // A value to take along – a link, an address, a key (NotionKit 1.8.0). Copy
3985
+ // writes it to the clipboard and says "Copied" in green for a moment; where
3986
+ // the clipboard is not allowed, the value is shown and selected instead, for
3987
+ // ⌘C. `secret` masks it behind a Show/Hide toggle; Copy still copies the
3988
+ // real value. `value` set as a property is not reflected, so a key never
3989
+ // lands in the markup. Fires nk-action { action: 'copy', value, ok }. The
3990
+ // texts are attributes: copy-label, copied-label, show-label, hide-label.
3991
+ class NkCopyField extends NkElement {
3992
+ static get observedAttributes() { return ['value', 'mono', 'wrap', 'wide', 'secret', 'copy-label', 'copied-label', 'show-label', 'hide-label']; }
3993
+
3994
+ render() {
3995
+ this._val ??= this.getAttribute('value') ?? '';
3996
+ this._box = this.createElement('div', ['nk-copy-field']);
3997
+ this._text = this.createElement('span', ['cf-value']);
3998
+ this._show = this.createElement('button', ['cf-btn'], { type: 'button' });
3999
+ this._copy = this.createElement('button', ['cf-btn'], { type: 'button' });
4000
+ this._box.append(this._text, this._copy);
4001
+ this._wrapper.appendChild(this._box);
4002
+ this._sync();
4003
+ }
4004
+
4005
+ _sync() {
4006
+ if (!this._box) return;
4007
+ for (const m of ['mono', 'wrap', 'wide']) this._box.classList.toggle(m, this.getBoolAttr(m));
4008
+ const secret = this.getBoolAttr('secret');
4009
+ this._text.textContent = secret && !this._revealed ? '•'.repeat(Math.min(this._val.length, 24)) : this._val;
4010
+ // Not `hidden`: .cf-btn sets no display of its own that could lose to it,
4011
+ // but a button that is not there cannot be tabbed to either.
4012
+ if (secret && !this._show.isConnected) this._copy.before(this._show);
4013
+ if (!secret) this._show.remove();
4014
+ this._show.textContent = this._revealed ? (this.getAttribute('hide-label') || 'Hide') : (this.getAttribute('show-label') || 'Show');
4015
+ this._show.setAttribute('aria-pressed', String(!!this._revealed));
4016
+ this._copy.textContent = this._copied ? (this.getAttribute('copied-label') || 'Copied') : (this.getAttribute('copy-label') || 'Copy');
4017
+ this._copy.classList.toggle('copied', !!this._copied);
4018
+ }
4019
+
4020
+ setupEvents() {
4021
+ this._onCopy = () => this.copy();
4022
+ this._onShow = () => { this._revealed = !this._revealed; this._sync(); };
4023
+ this._copy.addEventListener('click', this._onCopy);
4024
+ this._show.addEventListener('click', this._onShow);
4025
+ }
4026
+
4027
+ teardownEvents() {
4028
+ this._copy?.removeEventListener('click', this._onCopy);
4029
+ this._show?.removeEventListener('click', this._onShow);
4030
+ clearTimeout(this._timer);
4031
+ }
4032
+
4033
+ onAttributeChanged(name, _old, value) {
4034
+ if (name === 'value') this._val = value ?? '';
4035
+ this._sync();
4036
+ }
4037
+
4038
+ /** Copies the value; resolves to whether the clipboard took it. */
4039
+ async copy() {
4040
+ const value = this._val;
4041
+ let ok = true;
4042
+ try { await navigator.clipboard.writeText(value); } catch { ok = false; }
4043
+ if (ok) {
4044
+ this._copied = true;
4045
+ clearTimeout(this._timer);
4046
+ this._timer = setTimeout(() => { this._copied = false; this._sync(); }, 1500);
4047
+ } else {
4048
+ this._revealed = true;
4049
+ }
4050
+ this._sync();
4051
+ if (!ok) getSelection()?.selectAllChildren(this._text);
4052
+ this.emit('nk-action', { action: 'copy', value, ok });
4053
+ return ok;
4054
+ }
4055
+
4056
+ get value() { return this._val ?? this.getAttribute('value') ?? ''; }
4057
+ set value(v) { this._val = v == null ? '' : String(v); this._sync(); }
4058
+ get secret() { return this.getBoolAttr('secret'); }
4059
+ set secret(v) { this.setBoolAttr('secret', v); }
4060
+ }
4061
+
4062
+ customElements.define('nk-copy-field', NkCopyField);
4063
+
4064
+ // <nk-image-picker initials="MK" label="Profile picture"></nk-image-picker>
4065
+ // <nk-image-picker square initials="M" max="256" type="image/png"></nk-image-picker>
4066
+ // → <div class="nk-profile-row"><div class="big-avatar">MK | <img></div>
4067
+ // <div class="pr-actions"><button class="nk-btn secondary small">Upload image</button>
4068
+ // <button class="nk-btn secondary small pr-remove">Remove</button><input type="file" hidden></div></div>
4069
+ //
4070
+ // A picture for a person or a workspace (NotionKit 1.8.0): the profile row
4071
+ // with its actions, round – or `square`, a workspace icon. Ported from
4072
+ // GlassKit Elements' glk-image-picker: the file goes through
4073
+ // createImageBitmap with imageOrientation 'from-image' – the EXIF rotation
4074
+ // of a phone photo without a library – onto a canvas no larger than `max`
4075
+ // (default 512), out as `type` (default image/jpeg, on white; image/png
4076
+ // keeps transparency) at `quality` (0.82). The file input is hidden and
4077
+ // opened from a real button, and cleared after every pick, so the same file
4078
+ // can be chosen again. Not form-associated: listen to nk-change and upload
4079
+ // the data URL. `src` set as a property is not reflected, so megabytes of
4080
+ // data URL never land in the DOM.
4081
+ // Events: nk-change { dataUrl, width, height, size } after a pick, and on
4082
+ // remove with an empty dataUrl; nk-error { message, name } when the
4083
+ // file cannot be decoded (HEIC outside Safari, a broken file).
4084
+ // Texts: choose-label, change-label, remove-label; label names the group.
4085
+
4086
+ function dataUrlBytes(url) {
4087
+ const b64 = url.slice(url.indexOf(',') + 1);
4088
+ const padding = b64.endsWith('==') ? 2 : b64.endsWith('=') ? 1 : 0;
4089
+ return Math.floor((b64.length * 3) / 4) - padding;
4090
+ }
4091
+
4092
+ class NkImagePicker extends NkElement {
4093
+ static get observedAttributes() { return ['src', 'initials', 'square', 'label', 'max', 'type', 'quality', 'accept', 'choose-label', 'change-label', 'remove-label']; }
4094
+
4095
+ render() {
4096
+ this._src ??= this.getAttribute('src') || '';
4097
+ this._row = this.createElement('div', ['nk-profile-row'], { role: 'group' });
4098
+ this._avatar = this.createElement('div', ['big-avatar']);
4099
+ const actions = this.createElement('div', ['pr-actions']);
4100
+ this._choose = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button' });
4101
+ this._remove = this.createElement('button', ['nk-btn', 'secondary', 'small', 'pr-remove'], { type: 'button' });
4102
+ this._input = this.createElement('input', [], { type: 'file', tabindex: '-1' });
4103
+ this._input.hidden = true;
4104
+ actions.append(this._choose, this._remove, this._input);
4105
+ this._row.append(this._avatar, actions);
4106
+ this._wrapper.appendChild(this._row);
4107
+ this._sync();
4108
+ }
4109
+
4110
+ get _max() { return Math.max(1, Math.floor(Number(this.getAttribute('max'))) || 512); }
4111
+ get _type() { return this.getAttribute('type') || 'image/jpeg'; }
4112
+ get _quality() { const q = Number(this.getAttribute('quality')); return this.hasAttribute('quality') && q >= 0 && q <= 1 ? q : 0.82; }
4113
+
4114
+ _sync() {
4115
+ if (!this._row) return;
4116
+ this._avatar.classList.toggle('square', this.getBoolAttr('square'));
4117
+ if (!this._src) {
4118
+ this._img = null;
4119
+ this._avatar.textContent = this.getAttribute('initials') || '';
4120
+ } else if (!this._img || this._img.getAttribute('src') !== this._src) {
4121
+ this._img = this.createElement('img', [], { src: this._src, alt: '' });
4122
+ this._avatar.replaceChildren(this._img);
4123
+ }
4124
+ const label = this.getAttribute('label');
4125
+ if (label) this._row.setAttribute('aria-label', label); else this._row.removeAttribute('aria-label');
4126
+ this._choose.textContent = this._src ? (this.getAttribute('change-label') || 'Change image') : (this.getAttribute('choose-label') || 'Upload image');
4127
+ this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
4128
+ this._remove.hidden = !this._src;
4129
+ this._input.accept = this.getAttribute('accept') || 'image/*';
4130
+ }
4131
+
4132
+ async _pick(file) {
4133
+ if (!file) return;
4134
+ try {
4135
+ const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
4136
+ const scale = Math.min(1, this._max / Math.max(bitmap.width, bitmap.height));
4137
+ const canvas = document.createElement('canvas');
4138
+ canvas.width = Math.max(1, Math.round(bitmap.width * scale));
4139
+ canvas.height = Math.max(1, Math.round(bitmap.height * scale));
4140
+ const ctx = canvas.getContext('2d');
4141
+ if (this._type === 'image/jpeg') {
4142
+ // JPEG has no alpha; without this a transparent PNG comes out on black.
4143
+ ctx.fillStyle = '#fff';
4144
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
4145
+ }
4146
+ ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
4147
+ bitmap.close();
4148
+ const dataUrl = canvas.toDataURL(this._type, this._quality);
4149
+ this.src = dataUrl;
4150
+ this.emit('nk-change', { dataUrl, width: canvas.width, height: canvas.height, size: dataUrlBytes(dataUrl) });
4151
+ } catch (error) {
4152
+ this.emit('nk-error', { message: error?.message || String(error), name: file.name });
4153
+ }
4154
+ }
4155
+
4156
+ setupEvents() {
4157
+ this._onChoose = () => this._input.click();
4158
+ this._onChange = (e) => { const file = e.target.files?.[0]; e.target.value = ''; this._pick(file); };
4159
+ this._onRemove = () => {
4160
+ this.src = '';
4161
+ this._choose.focus(); // the remove button just went away under the focus
4162
+ this.emit('nk-change', { dataUrl: '', width: 0, height: 0, size: 0 });
4163
+ };
4164
+ this._choose.addEventListener('click', this._onChoose);
4165
+ this._input.addEventListener('change', this._onChange);
4166
+ this._remove.addEventListener('click', this._onRemove);
4167
+ }
4168
+
4169
+ teardownEvents() {
4170
+ this._choose?.removeEventListener('click', this._onChoose);
4171
+ this._input?.removeEventListener('change', this._onChange);
4172
+ this._remove?.removeEventListener('click', this._onRemove);
4173
+ }
4174
+
4175
+ onAttributeChanged(name, _old, value) {
4176
+ if (name === 'src') this._src = value || '';
4177
+ this._sync();
4178
+ }
4179
+
4180
+ /** Opens the file dialog, as the button does. */
4181
+ choose() { this._input?.click(); }
4182
+ get src() { return this._src ?? this.getAttribute('src') ?? ''; }
4183
+ set src(v) { this._src = v || ''; this._sync(); }
4184
+ get square() { return this.getBoolAttr('square'); }
4185
+ set square(v) { this.setBoolAttr('square', v); }
4186
+ }
4187
+
4188
+ customElements.define('nk-image-picker', NkImagePicker);
4189
+
4190
+ // <nk-peek id="peek" label="Database Table-View">
4191
+ // <nk-btn slot="actions" variant="topbar" aria-label="Open as page"><svg …></svg></nk-btn>
4192
+ // <nk-page-title>🗃️ Database Table-View</nk-page-title>
4193
+ // <nk-props>…</nk-props>
4194
+ // <div class="nk-prose">…</div>
4195
+ // <nk-comments>…</nk-comments>
4196
+ // </nk-peek>
4197
+ // → <div class="nk-peek-backdrop open"><aside class="nk-peek" role="dialog">
4198
+ // <div class="pk-bar"><button class="nk-topbar-btn">»</button>…actions…</div>
4199
+ // <div class="pk-body">…</div></aside></div>
4200
+ //
4201
+ // Notion's side peek (NotionKit 1.8.0): a row beside the table, which stays
4202
+ // usable – no scrim, nothing inert. show() slides it in and moves focus to
4203
+ // it; », Escape and a click elsewhere on the page close it, and Escape and »
4204
+ // hand focus back. A click that calls show() again – on another row – only
4205
+ // swaps the content, and clicks inside other overlays (a menu opened from
4206
+ // the peek) leave it open. Below 860px it is a bottom sheet over a dimmed
4207
+ // page; there it is modal: the page is inert and scroll-locked, the dimmed
4208
+ // page takes the tap that closes it. Put it directly under <body>.
4209
+ const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
4210
+ const OVERLAYS = new Set(['nk-menu', 'nk-pop', 'nk-modal', 'nk-sheet', 'nk-cmdk', 'nk-toast']);
4211
+ const OVERLAY_CLASSES = ['nk-pop', 'nk-modal-backdrop', 'nk-sheet-backdrop', 'nk-cmdk-backdrop'];
4212
+ const phone = () => matchMedia('(max-width: 860px)').matches;
4213
+
4214
+ class NkPeek extends NkElement {
4215
+ static get observedAttributes() { return ['open', 'label', 'close-label']; }
4216
+
4217
+ render() {
4218
+ this._backdrop = this.createElement('div', ['nk-peek-backdrop']);
4219
+ this._box = this.createElement('aside', ['nk-peek'], { role: 'dialog', tabindex: '-1' });
4220
+ const bar = this.createElement('div', ['pk-bar']);
4221
+ this._close = this.createElement('button', ['nk-topbar-btn'], { type: 'button' });
4222
+ this._close.innerHTML = CLOSE_ICON;
4223
+ bar.append(this._close, this.createElement('slot', [], { name: 'actions' }));
4224
+ const body = this.createElement('div', ['pk-body']);
4225
+ body.appendChild(document.createElement('slot'));
4226
+ this._box.append(bar, body);
4227
+ this._backdrop.appendChild(this._box);
4228
+ this._wrapper.appendChild(this._backdrop);
4229
+ this._syncLabels();
4230
+ this._syncOpen();
4231
+ }
4232
+
4233
+ _syncLabels() {
4234
+ const label = this.getAttribute('label');
4235
+ if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
4236
+ this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
4237
+ }
4238
+
4239
+ _syncOpen() {
4240
+ const open = this.getBoolAttr('open');
4241
+ this._backdrop.classList.toggle('open', open);
4242
+ if (open === this._wasOpen) return;
4243
+ this._wasOpen = open;
4244
+ if (open) {
4245
+ this._returnFocus = deepActiveElement();
4246
+ if (phone()) {
4247
+ this._modal = true;
4248
+ this._box.setAttribute('aria-modal', 'true');
4249
+ lockScroll();
4250
+ this._undoInert = inertOutside(this);
4251
+ }
4252
+ requestAnimationFrame(() => this._box.focus({ preventScroll: true }));
4253
+ } else {
4254
+ if (this._modal) { this._modal = false; this._box.removeAttribute('aria-modal'); unlockScroll(); this._undoInert?.(); this._undoInert = null; }
4255
+ const active = deepActiveElement();
4256
+ const inside = active && (this.contains(active) || this._shadow.contains(active) || active === document.body);
4257
+ const back = this._returnFocus;
4258
+ this._returnFocus = null;
4259
+ if (inside && back?.isConnected && typeof back.focus === 'function') back.focus({ preventScroll: true });
4260
+ }
4261
+ }
4262
+
4263
+ setupEvents() {
4264
+ this._onClose = () => this.close();
4265
+ this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
4266
+ this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
4267
+ // Bubble phase, after the page's own handlers: a click that showed the
4268
+ // peek again (another row) must not close it.
4269
+ this._onOutside = (e) => {
4270
+ if (!this.getBoolAttr('open') || this._shownAt >= e.timeStamp) return;
4271
+ const path = e.composedPath();
4272
+ if (path.includes(this)) return;
4273
+ if (path.some(n => n.nodeType === 1 && (OVERLAYS.has(n.localName) || OVERLAY_CLASSES.some(c => n.classList.contains(c))))) return;
4274
+ this.close();
4275
+ };
4276
+ this._close.addEventListener('click', this._onClose);
4277
+ this._backdrop.addEventListener('click', this._onBackdrop);
4278
+ document.addEventListener('keydown', this._onKey);
4279
+ document.addEventListener('click', this._onOutside);
4280
+ }
4281
+
4282
+ teardownEvents() {
4283
+ this._close?.removeEventListener('click', this._onClose);
4284
+ this._backdrop?.removeEventListener('click', this._onBackdrop);
4285
+ document.removeEventListener('keydown', this._onKey);
4286
+ document.removeEventListener('click', this._onOutside);
4287
+ if (this._modal) { this._modal = false; unlockScroll(); this._undoInert?.(); this._undoInert = null; }
4288
+ this._wasOpen = false;
4289
+ }
4290
+
4291
+ onAttributeChanged(name) {
4292
+ if (name !== 'open') { this._syncLabels(); return; }
4293
+ this._syncOpen();
4294
+ this.emit('nk-toggle', { open: this.getBoolAttr('open') });
4295
+ }
4296
+
4297
+ show() { this._shownAt = performance.now(); this.setBoolAttr('open', true); }
4298
+ close() { this.setBoolAttr('open', false); }
4299
+ toggle() { this.getBoolAttr('open') ? this.close() : this.show(); }
4300
+
4301
+ get open() { return this.getBoolAttr('open'); }
4302
+ set open(v) { v ? this.show() : this.close(); }
4303
+ }
4304
+
4305
+ customElements.define('nk-peek', NkPeek);
4306
+
3734
4307
  // <nk-modal id="settings">
3735
4308
  // <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>
3736
4309
  // <nk-settings-pane name="profile" group="Account" icon="👤" label="My profile" title="My profile" active>…</nk-settings-pane>
@@ -4193,12 +4766,78 @@ var NotionKitElements = (function (exports) {
4193
4766
  // </nk-menu>
4194
4767
  // → <div class="nk-pop nk-menu" role="menu">…</div>
4195
4768
  // ↑↓ move between items, Enter selects, nk-select bubbles from the item.
4769
+ //
4770
+ // <nk-menu floating sheet> is a menu over the page (NotionKit 1.7.0): it
4771
+ // fades in like the palette when `open` is set and is a bottom sheet on a
4772
+ // phone. The host becomes the fixed box you position – show(anchor) puts it
4773
+ // under the anchor, right edges aligned (align="start": left edges). A tap
4774
+ // outside closes it and reaches nothing else; Escape and a chosen item
4775
+ // close it too, a switch row does not. Opened from the keyboard, focus moves
4776
+ // to the first item; closing returns it to where it was.
4777
+ const floatSheet = new CSSStyleSheet();
4778
+ floatSheet.replaceSync(`:host([floating]) { display: block; position: fixed; z-index: 60; pointer-events: none; }`);
4779
+
4780
+ /** The border box of an element, or of the first descendant with one (display: contents hosts). */
4781
+ function boxOf(el) {
4782
+ if (el.getClientRects().length) return el.getBoundingClientRect();
4783
+ for (const child of [...(el.shadowRoot?.children ?? []), ...el.children]) {
4784
+ const r = boxOf(child);
4785
+ if (r.width || r.height) return r;
4786
+ }
4787
+ return el.getBoundingClientRect();
4788
+ }
4789
+
4196
4790
  class NkMenu extends NkElement {
4791
+ static get hostStyles() { return floatSheet; }
4792
+ static get observedAttributes() { return ['floating', 'sheet', 'open', 'align']; }
4793
+
4197
4794
  render() {
4198
4795
  this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
4199
4796
  this._box.appendChild(document.createElement('slot'));
4200
4797
  this._wrapper.appendChild(this._box);
4798
+ this._syncMode();
4799
+ }
4800
+
4801
+ _syncMode() {
4802
+ this._box.classList.toggle('floating', this.getBoolAttr('floating'));
4803
+ this._box.classList.toggle('sheet', this.getBoolAttr('sheet'));
4804
+ this._box.classList.toggle('open', this.getBoolAttr('open'));
4805
+ }
4806
+
4807
+ onAttributeChanged(name) {
4808
+ this._syncMode();
4809
+ if (name !== 'open') return;
4810
+ const open = this.getBoolAttr('open');
4811
+ // aria-expanded belongs on the control itself, inside a host such as <nk-btn>.
4812
+ if (this._anchor) (this._anchor.shadowRoot?.querySelector('button, a[href]') ?? this._anchor).setAttribute('aria-expanded', String(open));
4813
+ if (open) {
4814
+ this._returnFocus = deepActiveElement();
4815
+ if (this._returnFocus?.matches(':focus-visible')) requestAnimationFrame(() => this.focusFirst());
4816
+ document.addEventListener('click', this._onOutside, true);
4817
+ } else {
4818
+ document.removeEventListener('click', this._onOutside, true);
4819
+ const back = this._returnFocus;
4820
+ this._returnFocus = null;
4821
+ if (back?.isConnected && this.contains(document.activeElement)) back.focus({ preventScroll: true });
4822
+ }
4823
+ this.emit('nk-toggle', { open });
4824
+ }
4825
+
4826
+ /** Opens under `anchor` (any element, display: contents hosts included). */
4827
+ show(anchor) {
4828
+ if (anchor) {
4829
+ this._anchor = anchor;
4830
+ const r = boxOf(anchor);
4831
+ this.style.top = `${r.bottom + 6}px`;
4832
+ if (this.getAttribute('align') === 'start') { this.style.left = `${r.left}px`; this.style.right = ''; }
4833
+ else { this.style.right = `${Math.max(8, innerWidth - r.right)}px`; this.style.left = ''; }
4834
+ }
4835
+ this.setBoolAttr('open', true);
4201
4836
  }
4837
+ close() { this.setBoolAttr('open', false); }
4838
+ toggle(anchor) { this.getBoolAttr('open') ? this.close() : this.show(anchor); }
4839
+ get open() { return this.getBoolAttr('open'); }
4840
+ set open(v) { this.setBoolAttr('open', v); }
4202
4841
 
4203
4842
  get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
4204
4843
 
@@ -4217,9 +4856,27 @@ var NotionKitElements = (function (exports) {
4217
4856
  }
4218
4857
  };
4219
4858
  this.addEventListener('keydown', this._onKey);
4859
+ // Floating: outside taps close and go nowhere else; Escape and a chosen item close.
4860
+ this._onOutside = (e) => {
4861
+ const path = e.composedPath();
4862
+ if (path.includes(this) || (this._anchor && path.includes(this._anchor))) return;
4863
+ e.preventDefault(); e.stopPropagation();
4864
+ this.close();
4865
+ };
4866
+ // Captured, so a menu inside a modal or sheet closes before they do.
4867
+ this._onEscape = (e) => { if (e.key === 'Escape' && this.getBoolAttr('floating') && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
4868
+ this._onSelect = () => { if (this.getBoolAttr('floating')) this.close(); };
4869
+ document.addEventListener('keydown', this._onEscape, true);
4870
+ this.addEventListener('nk-select', this._onSelect);
4871
+ if (this.getBoolAttr('open')) document.addEventListener('click', this._onOutside, true);
4220
4872
  }
4221
4873
 
4222
- teardownEvents() { this.removeEventListener('keydown', this._onKey); }
4874
+ teardownEvents() {
4875
+ this.removeEventListener('keydown', this._onKey);
4876
+ document.removeEventListener('keydown', this._onEscape, true);
4877
+ this.removeEventListener('nk-select', this._onSelect);
4878
+ document.removeEventListener('click', this._onOutside, true);
4879
+ }
4223
4880
 
4224
4881
  /** Focuses the first item (called by a popover when it opens). */
4225
4882
  focusFirst() { this.items[0]?.focus(); }
@@ -4231,10 +4888,12 @@ var NotionKitElements = (function (exports) {
4231
4888
  // <nk-menu-item type="separator"></nk-menu-item> <nk-menu-item type="label">Danger</nk-menu-item>
4232
4889
  // <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
4233
4890
  // <nk-menu-item type="switch" icon="🔡" value="small" checked>Small text</nk-menu-item>
4891
+ // <nk-menu-item type="check" icon="◉" value="open" checked>Status: Open</nk-menu-item>
4234
4892
  // → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
4235
4893
  // A switch item carries a .nk-switch on the right, as "Small text" does in
4236
- // Notion's page menu: a click flips `checked` and fires nk-change { value,
4237
- // checked } instead of nk-select, so the menu around it stays open.
4894
+ // Notion's page menu; a check item a ✓ where the shortcut stands, as in a
4895
+ // filter menu. A click on either flips `checked` and fires nk-change
4896
+ // { value, checked } instead of nk-select, so the menu around it stays open.
4238
4897
  class NkMenuItem extends NkElement {
4239
4898
  static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled', 'checked']; }
4240
4899
 
@@ -4250,7 +4909,8 @@ var NotionKitElements = (function (exports) {
4250
4909
  el.appendChild(document.createElement('slot'));
4251
4910
  } else {
4252
4911
  const isSwitch = type === 'switch';
4253
- el = this.createElement('div', ['nk-menu-item'], { role: isSwitch ? 'menuitemcheckbox' : 'menuitem', tabindex: '-1' });
4912
+ this._check = type === 'check';
4913
+ el = this.createElement('div', ['nk-menu-item'], { role: isSwitch || this._check ? 'menuitemcheckbox' : 'menuitem', tabindex: '-1' });
4254
4914
  this._icon = this.createElement('span', ['m-icon']);
4255
4915
  const iconSlot = this.createElement('slot', [], { name: 'icon' });
4256
4916
  iconSlot.appendChild(this._icon);
@@ -4275,10 +4935,11 @@ var NotionKitElements = (function (exports) {
4275
4935
  this._shortcut.style.display = sc ? '' : 'none';
4276
4936
  this._el.classList.toggle('danger', this.getBoolAttr('danger'));
4277
4937
  this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
4278
- if (this._switch) {
4938
+ if (this._switch || this._check) {
4279
4939
  const on = this.getBoolAttr('checked') ? 'true' : 'false';
4280
4940
  this._el.setAttribute('aria-checked', on);
4281
- this._switch.setAttribute('aria-checked', on);
4941
+ if (this._switch) this._switch.setAttribute('aria-checked', on);
4942
+ if (this._check) { this._shortcut.textContent = on === 'true' ? '✓' : ''; this._shortcut.style.display = ''; }
4282
4943
  }
4283
4944
  }
4284
4945
 
@@ -4291,7 +4952,7 @@ var NotionKitElements = (function (exports) {
4291
4952
 
4292
4953
  select() {
4293
4954
  if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
4294
- if (this._switch) {
4955
+ if (this._switch || this._check) {
4295
4956
  this.checked = !this.checked;
4296
4957
  this.emit('nk-change', { value: this.value, checked: this.checked, item: this });
4297
4958
  return;
@@ -4579,16 +5240,24 @@ var NotionKitElements = (function (exports) {
4579
5240
  // </nk-database>
4580
5241
  // db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
4581
5242
  // db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
4582
- // → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
5243
+ // <nk-btn slot="tools" variant="tool">Filter</nk-btn> … sit right of the tabs,
5244
+ // <nk-filter-bar slot="filters"> under them (NotionKit 1.7.0's toolbar).
5245
+ // → <div class="nk-database"><div class="nk-db-toolbar"><div class="nk-db-tabs">…</div>
5246
+ // <div class="tools">…</div></div>…filters…active view…</div>
4583
5247
  // The tabs come from the child views; data is pushed into every view.
4584
5248
  class NkDatabase extends NkElement {
4585
5249
  static get observedAttributes() { return ['view', 'add-view']; }
4586
5250
 
4587
5251
  render() {
4588
5252
  this._box = this.createElement('div', ['nk-database']);
5253
+ this._toolbar = this.createElement('div', ['nk-db-toolbar']);
4589
5254
  this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
5255
+ const tools = this.createElement('div', ['tools']);
5256
+ this._toolsSlot = this.createElement('slot', [], { name: 'tools' });
5257
+ tools.appendChild(this._toolsSlot);
5258
+ this._toolbar.append(this._tabs, tools);
4590
5259
  this._slot = document.createElement('slot');
4591
- this._box.append(this._tabs, this._slot);
5260
+ this._box.append(this._toolbar, this.createElement('slot', [], { name: 'filters' }), this._slot);
4592
5261
  this._wrapper.appendChild(this._box);
4593
5262
  this._columns = []; this._rows = [];
4594
5263
  this._sync();
@@ -4616,12 +5285,11 @@ var NotionKitElements = (function (exports) {
4616
5285
  v.setData?.(this._columns, this._rows);
4617
5286
  }
4618
5287
  if (this.getBoolAttr('add-view')) {
4619
- const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
4620
- add.style.color = 'var(--nk-text-tertiary)';
5288
+ const add = this.createElement('span', ['nk-db-tab', 'add'], { role: 'button', 'data-add': '', tabindex: '0' });
4621
5289
  add.textContent = '＋';
4622
5290
  this._tabs.appendChild(add);
4623
5291
  }
4624
- this._tabs.style.display = views.length ? '' : 'none';
5292
+ this._toolbar.hidden = !views.length && !this._toolsSlot.assignedElements().length;
4625
5293
  this._current = current;
4626
5294
  }
4627
5295
 
@@ -4643,6 +5311,7 @@ var NotionKitElements = (function (exports) {
4643
5311
  this._tabs.addEventListener('click', this._onClick);
4644
5312
  this._tabs.addEventListener('keydown', this._onKey);
4645
5313
  this._slot.addEventListener('slotchange', this._onSlot);
5314
+ this._toolsSlot.addEventListener('slotchange', this._onSlot);
4646
5315
  this._sync();
4647
5316
  }
4648
5317
 
@@ -4650,6 +5319,7 @@ var NotionKitElements = (function (exports) {
4650
5319
  this._tabs?.removeEventListener('click', this._onClick);
4651
5320
  this._tabs?.removeEventListener('keydown', this._onKey);
4652
5321
  this._slot?.removeEventListener('slotchange', this._onSlot);
5322
+ this._toolsSlot?.removeEventListener('slotchange', this._onSlot);
4653
5323
  }
4654
5324
 
4655
5325
  onAttributeChanged(name) {
@@ -5088,61 +5758,77 @@ var NotionKitElements = (function (exports) {
5088
5758
 
5089
5759
  customElements.define('nk-list-view', NkListView);
5090
5760
 
5091
- // <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
5092
- // bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
5093
- // Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
5094
- // filter / sort buttons fire nk-action, chips remove on ×, search and chip
5095
- // changes fire nk-change { filters, search }. The wrapper is layout only.
5761
+ // <nk-filter-bar add no-filter no-sort></nk-filter-bar>
5762
+ // bar.filters = [{ key: 'status', value: 'done', op: 'is-not', label: 'Status: Open' }];
5763
+ // The filters in effect as NotionKit's filter pills (1.7.0), no inline style:
5764
+ // → <div class="nk-filter-row">[Filter][Sort]
5765
+ // <span class="nk-filter-pill active"><button>Status: Open</button><button class="fp-remove">×</button></span>…
5766
+ // <button class="nk-filter-pill add">＋ Filter</button> …slot… [search]</div>
5767
+ // Filter and Sort are .nk-db-tool buttons (hide them with no-filter / no-sort
5768
+ // when the database toolbar carries its own); they fire nk-action. A pill's
5769
+ // label fires nk-action { action: 'edit', index, filter }, the add pill
5770
+ // nk-action { action: 'add' } – each with the clicked button as `anchor`, to
5771
+ // open a menu under it. × removes the filter; every change to filters or
5772
+ // search fires nk-change { filters, search }. In slot="filters" of
5773
+ // <nk-database> the row sits right under the view tabs. The texts are
5774
+ // attributes, for other languages: filter-label, sort-label, add-label,
5775
+ // remove-label (the × reads "<remove-label>: <pill>") and placeholder.
5096
5776
  class NkFilterBar extends NkElement {
5097
- static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
5777
+ static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value', 'add', 'add-label', 'filter-label', 'sort-label', 'remove-label']; }
5098
5778
 
5099
5779
  render() {
5100
- this._bar = document.createElement('div');
5101
- this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
5102
- this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
5103
- this._filterBtn.textContent = '⚲ Filter';
5104
- this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
5105
- this._sortBtn.textContent = '↕ Sort';
5106
- this._chips = document.createElement('span');
5107
- this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
5780
+ this._row = this.createElement('div', ['nk-filter-row']);
5781
+ this._filterBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'filter' });
5782
+ this._sortBtn = this.createElement('button', ['nk-db-tool'], { type: 'button', 'data-action': 'sort' });
5783
+ this._pillStart = document.createComment('pills');
5784
+ this._addBtn = this.createElement('button', ['nk-filter-pill', 'add'], { type: 'button', 'data-action': 'add' });
5108
5785
  this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
5109
- this._input.style.marginLeft = 'auto';
5110
- this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
5111
- this._wrapper.appendChild(this._bar);
5786
+ this._row.append(this._filterBtn, this._sortBtn, this._pillStart, this._addBtn, document.createElement('slot'), this._input);
5787
+ this._wrapper.appendChild(this._row);
5112
5788
  this._filters = [];
5113
5789
  this._sync();
5114
5790
  }
5115
5791
 
5116
5792
  _sync() {
5117
- this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
5118
- this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
5119
- this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
5793
+ this._filterBtn.textContent = this.getAttribute('filter-label') || 'Filter';
5794
+ this._filterBtn.hidden = this.getBoolAttr('no-filter');
5795
+ this._filterBtn.classList.toggle('active', this._filters.length > 0);
5796
+ this._sortBtn.textContent = this.getAttribute('sort-label') || 'Sort';
5797
+ this._sortBtn.hidden = this.getBoolAttr('no-sort');
5798
+ this._addBtn.textContent = this.getAttribute('add-label') || '＋ Filter';
5799
+ this._addBtn.hidden = !this.getBoolAttr('add');
5800
+ this._input.hidden = !this.getBoolAttr('search');
5120
5801
  this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
5121
5802
  if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
5122
- this._chips.replaceChildren();
5123
- this._filters.forEach((f, i) => {
5124
- const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
5125
- chip.style.cursor = 'pointer';
5126
- chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
5127
- chip.title = 'Remove filter';
5128
- this._chips.appendChild(chip);
5129
- });
5803
+ for (const old of this._row.querySelectorAll('[data-pill]')) old.remove();
5804
+ const removeLabel = this.getAttribute('remove-label') || 'Remove filter';
5805
+ this._pillStart.after(...this._filters.map((f, i) => {
5806
+ const pill = this.createElement('span', ['nk-filter-pill', 'active'], { 'data-pill': i });
5807
+ const label = this.createElement('button', [], { type: 'button', 'data-edit': i });
5808
+ label.textContent = f.label ?? `${f.key}: ${f.value}`;
5809
+ const remove = this.createElement('button', ['fp-remove'], { type: 'button', 'data-remove': i, 'aria-label': `${removeLabel}: ${label.textContent}` });
5810
+ remove.textContent = '×';
5811
+ pill.append(label, remove);
5812
+ return pill;
5813
+ }));
5130
5814
  }
5131
5815
 
5132
5816
  setupEvents() {
5133
5817
  this._onClick = (e) => {
5818
+ const remove = e.target.closest('[data-remove]');
5819
+ if (remove) { this._filters.splice(Number(remove.dataset.remove), 1); this._sync(); this._emitChange(); return; }
5820
+ const edit = e.target.closest('[data-edit]');
5821
+ if (edit) { const index = Number(edit.dataset.edit); this.emit('nk-action', { action: 'edit', index, filter: this._filters[index], anchor: edit }); return; }
5134
5822
  const btn = e.target.closest('[data-action]');
5135
- if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
5136
- const chip = e.target.closest('[data-index]');
5137
- if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
5823
+ if (btn) this.emit('nk-action', { action: btn.dataset.action, anchor: btn });
5138
5824
  };
5139
5825
  this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
5140
- this._bar.addEventListener('click', this._onClick);
5826
+ this._row.addEventListener('click', this._onClick);
5141
5827
  this._input.addEventListener('input', this._onInput);
5142
5828
  }
5143
5829
 
5144
5830
  teardownEvents() {
5145
- this._bar?.removeEventListener('click', this._onClick);
5831
+ this._row?.removeEventListener('click', this._onClick);
5146
5832
  this._input?.removeEventListener('input', this._onInput);
5147
5833
  clearTimeout(this._debounce);
5148
5834
  }
@@ -5151,13 +5837,18 @@ var NotionKitElements = (function (exports) {
5151
5837
  onAttributeChanged() { this._sync(); }
5152
5838
 
5153
5839
  get filters() { return this._filters; }
5154
- set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
5840
+ set filters(v) { this._filters = Array.isArray(v) ? v : []; if (this._row) this._sync(); }
5155
5841
  get value() { return this._input?.value ?? ''; }
5156
5842
  set value(v) { if (this._input) this._input.value = v ?? ''; }
5157
- /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
5843
+ /**
5844
+ * Applies filters and search to rows: a filter keeps rows where row[key]
5845
+ * equals value – or differs from it with op: 'is-not'; the search looks
5846
+ * for the text in every string field (a person's name).
5847
+ */
5158
5848
  apply(rows) {
5159
5849
  const q = this.value.trim().toLowerCase();
5160
- return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
5850
+ return rows.filter(r => this._filters.every(f => (f.op === 'is-not' ? r[f.key] !== f.value : r[f.key] === f.value))
5851
+ && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
5161
5852
  }
5162
5853
  }
5163
5854
 
@@ -5400,6 +6091,7 @@ var NotionKitElements = (function (exports) {
5400
6091
  exports.NkBanner = NkBanner;
5401
6092
  exports.NkBlockHost = NkBlockHost;
5402
6093
  exports.NkBoardView = NkBoardView;
6094
+ exports.NkBookmark = NkBookmark;
5403
6095
  exports.NkBreadcrumb = NkBreadcrumb;
5404
6096
  exports.NkBtn = NkBtn;
5405
6097
  exports.NkCallout = NkCallout;
@@ -5408,6 +6100,7 @@ var NotionKitElements = (function (exports) {
5408
6100
  exports.NkCode = NkCode;
5409
6101
  exports.NkComment = NkComment;
5410
6102
  exports.NkComments = NkComments;
6103
+ exports.NkCopyField = NkCopyField;
5411
6104
  exports.NkDangerZone = NkDangerZone;
5412
6105
  exports.NkDatabase = NkDatabase;
5413
6106
  exports.NkDivider = NkDivider;
@@ -5419,6 +6112,7 @@ var NotionKitElements = (function (exports) {
5419
6112
  exports.NkFilterBar = NkFilterBar;
5420
6113
  exports.NkFormElement = NkFormElement;
5421
6114
  exports.NkHeading = NkHeading;
6115
+ exports.NkImagePicker = NkImagePicker;
5422
6116
  exports.NkInput = NkInput;
5423
6117
  exports.NkKbd = NkKbd;
5424
6118
  exports.NkListView = NkListView;
@@ -5435,6 +6129,7 @@ var NotionKitElements = (function (exports) {
5435
6129
  exports.NkPageTitle = NkPageTitle;
5436
6130
  exports.NkPanel = NkPanel;
5437
6131
  exports.NkPanels = NkPanels;
6132
+ exports.NkPeek = NkPeek;
5438
6133
  exports.NkPop = NkPop;
5439
6134
  exports.NkProfileRow = NkProfileRow;
5440
6135
  exports.NkProgress = NkProgress;
@@ -5447,11 +6142,13 @@ var NotionKitElements = (function (exports) {
5447
6142
  exports.NkSelect = NkSelect;
5448
6143
  exports.NkSettingsPane = NkSettingsPane;
5449
6144
  exports.NkSettingsUser = NkSettingsUser;
6145
+ exports.NkSheet = NkSheet;
5450
6146
  exports.NkSidebar = NkSidebar;
5451
6147
  exports.NkSkeleton = NkSkeleton;
5452
6148
  exports.NkSlider = NkSlider;
5453
6149
  exports.NkStat = NkStat;
5454
6150
  exports.NkStats = NkStats;
6151
+ exports.NkSteps = NkSteps;
5455
6152
  exports.NkSwitch = NkSwitch;
5456
6153
  exports.NkSynced = NkSynced;
5457
6154
  exports.NkTab = NkTab;