@jungherz-de/notionkit-elements 1.0.1 → 1.2.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 (90) hide show
  1. package/README.md +11 -11
  2. package/dist/components/nk-ai-input-row.js +1 -1
  3. package/dist/components/nk-ai-msg.js +1 -1
  4. package/dist/components/nk-ai-thread.js +1 -1
  5. package/dist/components/nk-app.js +1 -1
  6. package/dist/components/nk-avatar-group.js +1 -1
  7. package/dist/components/nk-banner.js +1 -1
  8. package/dist/components/nk-block-host.js +1 -1
  9. package/dist/components/nk-board-view.js +1 -1
  10. package/dist/components/nk-breadcrumb.js +1 -1
  11. package/dist/components/nk-btn.js +1 -1
  12. package/dist/components/nk-callout.js +1 -1
  13. package/dist/components/nk-check.js +9 -3
  14. package/dist/components/nk-cmdk.js +1 -1
  15. package/dist/components/nk-code.js +1 -1
  16. package/dist/components/nk-comment.js +1 -1
  17. package/dist/components/nk-comments.js +1 -1
  18. package/dist/components/nk-danger-zone.js +1 -1
  19. package/dist/components/nk-database.js +1 -1
  20. package/dist/components/nk-divider.js +1 -1
  21. package/dist/components/nk-emoji-picker.js +1 -1
  22. package/dist/components/nk-empty.js +1 -1
  23. package/dist/components/nk-field.js +45 -7
  24. package/dist/components/nk-fields.js +22 -0
  25. package/dist/components/nk-filter-bar.js +1 -1
  26. package/dist/components/nk-heading.js +1 -1
  27. package/dist/components/nk-input.js +2 -2
  28. package/dist/components/nk-kbd.js +1 -1
  29. package/dist/components/nk-member-list.js +1 -1
  30. package/dist/components/nk-member-row.js +1 -1
  31. package/dist/components/nk-mention.js +1 -1
  32. package/dist/components/nk-menu-item.js +1 -1
  33. package/dist/components/nk-menu.js +1 -1
  34. package/dist/components/nk-modal.js +1 -1
  35. package/dist/components/nk-model-card.js +1 -1
  36. package/dist/components/nk-page-actions.js +1 -1
  37. package/dist/components/nk-page-cover.js +1 -1
  38. package/dist/components/nk-page-title.js +1 -1
  39. package/dist/components/nk-page.js +1 -1
  40. package/dist/components/nk-pop.js +1 -1
  41. package/dist/components/nk-profile-row.js +1 -1
  42. package/dist/components/nk-progress.js +1 -1
  43. package/dist/components/nk-quote.js +1 -1
  44. package/dist/components/nk-radio.js +9 -3
  45. package/dist/components/nk-section-label.js +1 -1
  46. package/dist/components/nk-segmented.js +1 -1
  47. package/dist/components/nk-select.js +6 -3
  48. package/dist/components/nk-settings-pane.js +1 -1
  49. package/dist/components/nk-settings-user.js +1 -1
  50. package/dist/components/nk-sidebar.js +1 -1
  51. package/dist/components/nk-skeleton.js +1 -1
  52. package/dist/components/nk-slider.js +1 -1
  53. package/dist/components/nk-stat.js +1 -1
  54. package/dist/components/nk-stats.js +1 -1
  55. package/dist/components/nk-switch.js +32 -4
  56. package/dist/components/nk-synced.js +1 -1
  57. package/dist/components/nk-tab-bar-item.js +83 -0
  58. package/dist/components/nk-tab-bar.js +83 -0
  59. package/dist/components/nk-tab.js +1 -1
  60. package/dist/components/nk-table-view.js +1 -1
  61. package/dist/components/nk-tabs.js +1 -1
  62. package/dist/components/nk-tag.js +1 -1
  63. package/dist/components/nk-template-btn.js +1 -1
  64. package/dist/components/nk-textarea.js +2 -2
  65. package/dist/components/nk-theme-toggle.js +1 -1
  66. package/dist/components/nk-toast.js +1 -1
  67. package/dist/components/nk-todo.js +1 -1
  68. package/dist/components/nk-toggle.js +1 -1
  69. package/dist/components/nk-topbar.js +1 -1
  70. package/dist/components/nk-tree-item.js +1 -1
  71. package/dist/components/nk-tree.js +1 -1
  72. package/dist/components/nk-workspace-switcher.js +1 -1
  73. package/dist/components/shared/base-EVtzqKmc.js +347 -0
  74. package/dist/notionkit-elements.esm.js +311 -21
  75. package/dist/notionkit-elements.js +313 -20
  76. package/dist/notionkit-elements.min.js +1 -1
  77. package/package.json +3 -3
  78. package/src/base.js +31 -1
  79. package/src/components/forms/nk-check.js +8 -2
  80. package/src/components/forms/nk-field.js +44 -6
  81. package/src/components/forms/nk-fields.js +21 -0
  82. package/src/components/forms/nk-input.js +1 -1
  83. package/src/components/forms/nk-radio.js +8 -2
  84. package/src/components/forms/nk-select.js +5 -2
  85. package/src/components/forms/nk-switch.js +31 -3
  86. package/src/components/forms/nk-textarea.js +1 -1
  87. package/src/components/shell/nk-tab-bar-item.js +82 -0
  88. package/src/components/shell/nk-tab-bar.js +82 -0
  89. package/src/index.js +3 -0
  90. package/dist/components/shared/base-6gEcoatG.js +0 -317
package/dist/notionkit-elements.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var NotionKitElements = (function (exports) {
2
2
  'use strict';
3
3
 
4
- // NotionKit v1.1.1 – Constructable Stylesheet
4
+ // NotionKit v1.3.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-* …
@@ -9,7 +9,7 @@ var NotionKitElements = (function (exports) {
9
9
 
10
10
  // … and everything else, in two pieces around where they were.
11
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}";
12
- const componentsTail = ".nk-body{margin:0;min-height:100vh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}.nk-app{display:flex;height:100vh;overflow:hidden}.nk-sidebar{width:var(--nk-sidebar-width);min-width:var(--nk-sidebar-width);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:11px;font-weight:500;letter-spacing:.02em;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-secondary);font-size:13px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:45px;display:flex;align-items:center;padding:0 12px;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-secondary);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-secondary);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{border:1px solid var(--nk-border-strong);font-size:13px;padding:3px 10px}.nk-theme-toggle{font-size:15px;width:30px;height:28px;padding:0}.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-secondary);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-page{max-width:760px;margin:0 auto;padding:0 64px 120px}.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=icon]),.nk-page-icon{font-size:64px;line-height:1;margin-top:-42px;cursor:pointer;user-select:none;display:inline-block}.nk-page-title{font-size:40px;font-weight:700;margin:8px 0 4px;outline:0;letter-spacing:-.01em}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-page p.lead{font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:22px;font-weight:600;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:14px 16px;margin:16px 0;line-height:1.55;font-size:14.5px}.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);font-size:14.5px;line-height:1.55}.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 ::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-tag-orange-text)}.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-tag-orange-text)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);margin-bottom:0;font-size:13.5px}.nk-db-tab{padding:6px 10px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;display:flex;align-items:center;gap:6px}.nk-db-tab:hover{color:var(--nk-text)}.nk-db-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);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-tertiary);padding:8px 10px;border-bottom:1px solid var(--nk-border);font-size:13px;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:5px;font-size:12px}.nk-table td{padding:7px 10px;border-bottom:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.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 .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 10px;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-block;padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:450;line-height:1.6}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tag-blue-bg);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-tag-blue-text);border-radius:3px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px}.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-tertiary)}.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:12.5px;color:var(--nk-text-tertiary);margin-top:2px;line-height:1.45}.nk-field .f-control,.nk-field ::slotted(.f-control){flex-shrink:0}.nk-input,.nk-select,.nk-textarea{font-family:inherit;font-size:13.5px;color:var(--nk-text);background:var(--nk-bg);border:1px solid var(--nk-border-strong);border-radius:var(--nk-radius);padding:5px 10px;outline:0;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:var(--nk-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-textarea.wide{width:100%}.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:13.5px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:5px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px}.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:0 0;color:var(--nk-text);border-color:var(--nk-border-strong)}.nk-btn.secondary:hover{background:var(--nk-bg-hover)}.nk-btn.danger{background:0 0;color:var(--nk-danger);border-color:var(--nk-border-strong)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,transparent)}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:3px 9px;font-size:12.5px}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-check{display:flex;align-items:center;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)}.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:12.5px;color:var(--nk-text-tertiary);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 ::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 .m-mail{font-size:12px;color:var(--nk-text-tertiary)}.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);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(960px,92vw);height:min(640px,86vh);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:230px;min-width:230px;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:13.5px}.nk-settings-user .mail{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-settings-nav .nk-tree-item{min-height:27px}.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 48px 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:520px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:16px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--nk-border);margin-bottom:20px}.nk-settings-pane>h3{font-size:13px;font-weight:600;margin:26px 0 10px}.nk-settings-pane ::slotted(h2){font-size:16px;font-weight:600;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 12px!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:13px;font-weight:600;padding:0!important;margin:26px 0 10px!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:13px;color:var(--nk-text);background:var(--nk-bg-callout);border:none;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:5px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;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:11.5px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:5px 9px 2px}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh;z-index:110;opacity:0;pointer-events:none;transition:opacity .18s}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{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:11px;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:11.5px;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:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:13.5px;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-tertiary);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:11.5px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=delta].up){color:var(--nk-tag-green-text)}.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:13px;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:13px;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-banner{display:flex;align-items:center;gap:10px;font-size:13.5px;border-radius:8px;padding:9px 14px;margin-bottom:8px}.nk-banner.info{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-banner.success{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-banner.warning{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.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 ::slotted(.mini-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 ::slotted(.mini-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-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:12.5px;margin-bottom:12px}.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:12.5px;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:13.5px;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-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);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:11.5px;color:var(--nk-text-tertiary);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{outline:0;font-family:var(--nk-font);font-size:14px;line-height:1.6;color:var(--nk-text);min-height:60px;padding:4px 2px}.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-block-host .ProseMirror h1{font-size:30px;font-weight:600;letter-spacing:-.01em;margin:24px 0 6px}.nk-block-host .ProseMirror h2{font-size:22px;font-weight:600;margin:20px 0 6px}.nk-block-host .ProseMirror h3{font-size:17px;font-weight:600;margin:16px 0 4px}.nk-block-host .ProseMirror p{margin:0}.nk-block-host .ProseMirror ol,.nk-block-host .ProseMirror ul{padding-left:24px;margin:4px 0}.nk-block-host .ProseMirror ul{list-style:disc}.nk-block-host .ProseMirror ol{list-style:decimal}.nk-block-host .ProseMirror li{margin:2px 0}.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:3px;user-select:none}.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.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-block-host .ProseMirror 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{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{text-decoration:line-through;color:var(--nk-text-tertiary)}.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 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{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{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{background:0 0;color:inherit;padding:0;font-size:inherit}.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.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:13.5px;color:var(--nk-text)}.nk-slash-menu-label{font-size:11px;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:11.5px;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-page{padding:0 24px 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:6vh}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}}@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 */";
12
+ const componentsTail = ".nk-body{margin:0;min-height:100vh;font-family:var(--nk-font);font-size:14px;background:var(--nk-bg);color:var(--nk-text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}.nk-app{display:flex;height:100vh;overflow:hidden}.nk-sidebar{width:var(--nk-sidebar-width);min-width:var(--nk-sidebar-width);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:11px;font-weight:500;letter-spacing:.02em;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-secondary);font-size:13px}.nk-sidebar-footer .nk-tree-item{min-height:26px}.nk-main{flex:1;display:flex;flex-direction:column;min-width:0}.nk-topbar{height:45px;display:flex;align-items:center;padding:0 12px;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-secondary);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-secondary);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{border:1px solid var(--nk-border-strong);font-size:13px;padding:3px 10px}.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;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));background:var(--nk-bg-sidebar);border-top:1px solid var(--nk-border)}.nk-tab-bar.always{display:flex}.nk-tab-bar.floating{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));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;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-secondary);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-page{max-width:760px;margin:0 auto;padding:0 64px 120px}.nk-page ::slotted(.nk-page-icon),.nk-page ::slotted([slot=icon]),.nk-page-icon{font-size:64px;line-height:1;margin-top:-42px;cursor:pointer;user-select:none;display:inline-block}.nk-page-title{font-size:40px;font-weight:700;margin:8px 0 4px;outline:0;letter-spacing:-.01em}.nk-page-meta{color:var(--nk-text-tertiary);font-size:13px;margin-bottom:24px;display:flex;gap:16px}.nk-page p.lead{font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px}.nk-page ::slotted(p.lead){font-size:16px;line-height:1.6;color:var(--nk-text-secondary);margin-bottom:20px!important}.nk-heading{font-size:22px;font-weight:600;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:14px 16px;margin:16px 0;line-height:1.55;font-size:14.5px}.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);font-size:14.5px;line-height:1.55}.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 ::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-tag-orange-text)}.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-tag-orange-text)}.nk-database{margin:12px 0 8px}.nk-db-tabs{display:flex;gap:2px;border-bottom:1px solid var(--nk-border);margin-bottom:0;font-size:13.5px}.nk-db-tab{padding:6px 10px;cursor:pointer;color:var(--nk-text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;user-select:none;display:flex;align-items:center;gap:6px}.nk-db-tab:hover{color:var(--nk-text)}.nk-db-tab.active{color:var(--nk-text);border-bottom-color:var(--nk-text);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-tertiary);padding:8px 10px;border-bottom:1px solid var(--nk-border);font-size:13px;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:5px;font-size:12px}.nk-table td{padding:7px 10px;border-bottom:1px solid var(--nk-border);white-space:nowrap;vertical-align:middle}.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 .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 10px;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-block;padding:1px 8px;border-radius:10px;font-size:12.5px;font-weight:450;line-height:1.6}.nk-tag.blue{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-tag.green{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-tag.orange{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.nk-tag.purple{background:var(--nk-tag-purple-bg);color:var(--nk-tag-purple-text)}.nk-progress{width:110px;height:6px;border-radius:3px;background:var(--nk-tag-blue-bg);overflow:hidden;display:inline-block}.nk-progress>i{display:block;height:100%;background:var(--nk-tag-blue-text);border-radius:3px}.nk-progress-label{font-size:12px;color:var(--nk-text-tertiary);margin-left:7px}.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-tertiary)}.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:12.5px;color:var(--nk-text-tertiary);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}.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%}.nk-field.compact,.nk-fields>.nk-field{padding:0;gap:4px}.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:13.5px;color:var(--nk-text);background:var(--nk-bg);border:1px solid var(--nk-border-strong);border-radius:var(--nk-radius);padding:5px 10px;outline:0;transition:border-color .15s,box-shadow .15s;min-width:210px}.nk-input:focus,.nk-select:focus,.nk-textarea:focus{border-color:var(--nk-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--nk-accent) 25%,transparent)}.nk-input::placeholder,.nk-textarea::placeholder{color:var(--nk-text-tertiary)}.nk-input.wide,.nk-select.wide,.nk-textarea.wide{width:100%}.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:13.5px;font-weight:500;border-radius:var(--nk-radius);cursor:pointer;padding:5px 12px;border:1px solid transparent;transition:background .15s,border-color .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px}.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:0 0;color:var(--nk-text);border-color:var(--nk-border-strong)}.nk-btn.secondary:hover{background:var(--nk-bg-hover)}.nk-btn.danger{background:0 0;color:var(--nk-danger);border-color:var(--nk-border-strong)}.nk-btn.danger:hover{background:color-mix(in srgb,var(--nk-danger) 8%,transparent)}.nk-btn.danger-solid{background:var(--nk-danger);color:var(--nk-on-accent)}.nk-btn.danger-solid:hover{opacity:.88}.nk-btn.small{padding:3px 9px;font-size:12.5px}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:center;gap:8px;font-size:14px;cursor:pointer}.nk-switch-label:has(.nk-switch:disabled){cursor:not-allowed;color:var(--nk-text-tertiary)}.nk-check{display:flex;align-items:center;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)}.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:12.5px;color:var(--nk-text-tertiary);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 ::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 .m-mail{font-size:12px;color:var(--nk-text-tertiary)}.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);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(960px,92vw);height:min(640px,86vh);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:230px;min-width:230px;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:13.5px}.nk-settings-user .mail{font-size:11.5px;color:var(--nk-text-tertiary)}.nk-settings-nav .nk-tree-item{min-height:27px}.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 48px 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:520px}.nk-settings-pane.active{display:block}.nk-settings-pane>h2{font-size:16px;font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--nk-border);margin-bottom:20px}.nk-settings-pane>h3{font-size:13px;font-weight:600;margin:26px 0 10px}.nk-settings-pane ::slotted(h2){font-size:16px;font-weight:600;border:0;border-bottom:1px solid var(--nk-border);padding:0 0 12px!important;margin:0 0 20px!important}.nk-settings-pane ::slotted(h3){font-size:13px;font-weight:600;padding:0!important;margin:26px 0 10px!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:13px;color:var(--nk-text);background:var(--nk-bg-callout);border:none;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:5px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;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:11.5px;color:var(--nk-text-tertiary)}.nk-menu-item.danger{color:var(--nk-danger)}.nk-menu-sep{border-top:1px solid var(--nk-border);margin:5px 4px}.nk-menu-label{font-size:11px;color:var(--nk-text-tertiary);padding:5px 9px 2px}.nk-cmdk-backdrop{position:fixed;inset:0;background:var(--nk-scrim-soft);display:flex;justify-content:center;align-items:flex-start;padding-top:14vh;z-index:110;opacity:0;pointer-events:none;transition:opacity .18s}.nk-cmdk-backdrop.open{opacity:1;pointer-events:auto}.nk-cmdk{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:11px;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:11.5px;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:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--nk-text);color:var(--nk-bg);padding:8px 16px;border-radius:8px;font-size:13.5px;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-tertiary);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:11.5px;margin-top:3px}.nk-stat .s-delta.up,.nk-stat ::slotted(.s-delta.up),.nk-stat ::slotted([slot=delta].up){color:var(--nk-tag-green-text)}.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:13px;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:13px;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-banner{display:flex;align-items:center;gap:10px;font-size:13.5px;border-radius:8px;padding:9px 14px;margin-bottom:8px}.nk-banner.info{background:var(--nk-tag-blue-bg);color:var(--nk-tag-blue-text)}.nk-banner.success{background:var(--nk-tag-green-bg);color:var(--nk-tag-green-text)}.nk-banner.warning{background:var(--nk-tag-orange-bg);color:var(--nk-tag-orange-text)}.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 ::slotted(.mini-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 ::slotted(.mini-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-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:12.5px;margin-bottom:12px}.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:12.5px;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:13.5px;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-actions{display:flex;gap:4px;margin-top:6px}.nk-ai-actions button{font-family:inherit;font-size:11.5px;color:var(--nk-text-tertiary);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:11.5px;color:var(--nk-text-tertiary);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{outline:0;font-family:var(--nk-font);font-size:14px;line-height:1.6;color:var(--nk-text);min-height:60px;padding:4px 2px}.nk-block-host .ProseMirror>*+*{margin-top:6px}.nk-block-host .ProseMirror h1{font-size:30px;font-weight:600;letter-spacing:-.01em;margin:24px 0 6px}.nk-block-host .ProseMirror h2{font-size:22px;font-weight:600;margin:20px 0 6px}.nk-block-host .ProseMirror h3{font-size:17px;font-weight:600;margin:16px 0 4px}.nk-block-host .ProseMirror p{margin:0}.nk-block-host .ProseMirror ol,.nk-block-host .ProseMirror ul{padding-left:24px;margin:4px 0}.nk-block-host .ProseMirror ul{list-style:disc}.nk-block-host .ProseMirror ol{list-style:decimal}.nk-block-host .ProseMirror li{margin:2px 0}.nk-block-host .ProseMirror li::marker{color:var(--nk-text-tertiary)}.nk-block-host .ProseMirror ul[data-type=taskList]{list-style:none;padding-left:2px}.nk-block-host .ProseMirror ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}.nk-block-host .ProseMirror ul[data-type=taskList] li>label{flex-shrink:0;margin-top:3px;user-select:none}.nk-block-host .ProseMirror ul[data-type=taskList] li>div{flex:1;min-width:0}.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-block-host .ProseMirror 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{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{text-decoration:line-through;color:var(--nk-text-tertiary)}.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 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{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{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{background:0 0;color:inherit;padding:0;font-size:inherit}.nk-block-host .ProseMirror hr{border:none;border-top:1px solid var(--nk-border);margin:20px 0}.nk-block-host .ProseMirror a{color:var(--nk-accent);text-decoration:underline;text-underline-offset:2px}.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:13.5px;color:var(--nk-text)}.nk-slash-menu-label{font-size:11px;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:11.5px;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-page{padding:0 24px 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:6vh}.nk-cmdk{width:min(560px,96vw)}.nk-stats{flex-wrap:wrap}}@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 */";
13
13
 
14
14
  const componentsCss = componentsHead + componentsTail;
15
15
  const css = componentsHead + tokensCss + componentsTail;
@@ -161,6 +161,12 @@ var NotionKitElements = (function (exports) {
161
161
 
162
162
  connectedCallback() {
163
163
  if (!this._initialized) {
164
+ // A framework may have set properties on the instance before the
165
+ // definition arrived (hybrids binds checked="${bool}" as a property
166
+ // while the element is still a plain HTMLElement). Such an own property
167
+ // shadows the accessor on the prototype for good; re-apply it through
168
+ // the setter so the attribute – and with it render() – sees the value.
169
+ this._upgradeOwnProperties();
164
170
  this._initialized = true;
165
171
 
166
172
  // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
@@ -211,6 +217,18 @@ var NotionKitElements = (function (exports) {
211
217
  this._wrapper?.setAttribute('data-theme', theme);
212
218
  }
213
219
 
220
+ _upgradeOwnProperties() {
221
+ for (const key of Object.keys(this)) {
222
+ if (key.startsWith('_')) continue;
223
+ let proto = Object.getPrototypeOf(this), desc;
224
+ while (proto && proto !== HTMLElement.prototype && !(desc = Object.getOwnPropertyDescriptor(proto, key))) proto = Object.getPrototypeOf(proto);
225
+ if (!desc?.set) continue;
226
+ const value = this[key];
227
+ delete this[key];
228
+ this[key] = value;
229
+ }
230
+ }
231
+
214
232
  /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
215
233
  render() {}
216
234
 
@@ -292,9 +310,21 @@ var NotionKitElements = (function (exports) {
292
310
  checkValidity() { return this._internals.checkValidity(); }
293
311
  reportValidity() { return this._internals.reportValidity(); }
294
312
 
313
+ connectedCallback() {
314
+ const first = !this._initialized;
315
+ super.connectedCallback();
316
+ // A `disabled` attribute in the markup fires formDisabledCallback on
317
+ // parse or upgrade – before the first connect, when nothing is rendered
318
+ // yet. The state was remembered below; apply it now that render() ran.
319
+ if (first && this._formDisabled) this.onFormDisabled(true);
320
+ }
321
+
295
322
  formResetCallback() { this.resetValue(); }
296
323
  formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
297
- formDisabledCallback(disabled) { this.onFormDisabled(disabled); }
324
+ formDisabledCallback(disabled) {
325
+ this._formDisabled = disabled;
326
+ if (this._initialized) this.onFormDisabled(disabled);
327
+ }
298
328
 
299
329
  /** Subclasses override. */
300
330
  resetValue() {}
@@ -442,7 +472,7 @@ var NotionKitElements = (function (exports) {
442
472
 
443
473
  _forward(attr) {
444
474
  if (BOOLEANS$1.includes(attr)) {
445
- this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
475
+ this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
446
476
  return;
447
477
  }
448
478
  const v = this.getAttribute(attr);
@@ -545,7 +575,7 @@ var NotionKitElements = (function (exports) {
545
575
 
546
576
  _forward(attr) {
547
577
  if (BOOLEANS.includes(attr)) {
548
- this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
578
+ this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
549
579
  return;
550
580
  }
551
581
  const v = this.getAttribute(attr);
@@ -627,7 +657,7 @@ var NotionKitElements = (function (exports) {
627
657
  // MutationObserver keeps the copy in step when a framework swaps them; the
628
658
  // empty string is a valid value; the live selection survives a rebuild.
629
659
  class NkSelect extends NkFormElement {
630
- static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'aria-label']; }
660
+ static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
631
661
  static get observesLightDom() { return true; }
632
662
 
633
663
  render() {
@@ -645,9 +675,10 @@ var NotionKitElements = (function (exports) {
645
675
  name ? this._select.setAttribute('name', name) : this._select.removeAttribute('name');
646
676
  const label = this.getAttribute('aria-label');
647
677
  label ? this._select.setAttribute('aria-label', label) : this._select.removeAttribute('aria-label');
648
- this._select.disabled = this.getBoolAttr('disabled');
678
+ this._select.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
649
679
  this._select.required = this.getBoolAttr('required');
650
680
  this._select.classList.toggle('compact', this.getBoolAttr('compact'));
681
+ this._select.classList.toggle('wide', this.getBoolAttr('wide'));
651
682
  }
652
683
 
653
684
  projectLightDom() {
@@ -738,6 +769,8 @@ var NotionKitElements = (function (exports) {
738
769
  set required(v) { this.setBoolAttr('required', v); }
739
770
  get compact() { return this.getBoolAttr('compact'); }
740
771
  set compact(v) { this.setBoolAttr('compact', v); }
772
+ get wide() { return this.getBoolAttr('wide'); }
773
+ set wide(v) { this.setBoolAttr('wide', v); }
741
774
  }
742
775
 
743
776
  customElements.define('nk-select', NkSelect);
@@ -745,14 +778,28 @@ var NotionKitElements = (function (exports) {
745
778
  // <nk-switch name="notify" checked></nk-switch>
746
779
  // → <button class="nk-switch" role="switch" aria-checked="true">
747
780
  // notionkit.css styles the state through [aria-checked]; the toggling is here.
781
+ //
782
+ // <nk-switch checked>Waiting</nk-switch> (or text="Waiting")
783
+ // → <label class="nk-switch-label"><button class="nk-switch" …></button><span>Waiting</span></label>
784
+ // Visible text beside the switch, for several switches in one row where no
785
+ // nk-field row names them. Without text the label wrapper is layout-
786
+ // transparent (display: contents), so the bare button stays the bare button.
748
787
  class NkSwitch extends NkFormElement {
749
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
788
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label', 'text']; }
750
789
 
751
790
  render() {
791
+ this._row = this.createElement('label', ['nk-switch-label']);
752
792
  this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
793
+ this._text = document.createElement('span');
794
+ this._slot = document.createElement('slot');
795
+ this._textNode = document.createTextNode('');
796
+ this._slot.appendChild(this._textNode);
797
+ this._text.appendChild(this._slot);
798
+ this._row.append(this._btn, this._text);
753
799
  this._defaultChecked = this.getBoolAttr('checked');
754
800
  this._apply();
755
- this._wrapper.appendChild(this._btn);
801
+ this._syncText();
802
+ this._wrapper.appendChild(this._row);
756
803
  this._syncFormValue();
757
804
  }
758
805
 
@@ -763,13 +810,24 @@ var NotionKitElements = (function (exports) {
763
810
  label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
764
811
  }
765
812
 
813
+ _syncText() {
814
+ this._textNode.data = this.getAttribute('text') ?? '';
815
+ const hasText = !!(this.getAttribute('text') || this._slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim()));
816
+ this._text.hidden = !hasText;
817
+ this._row.style.display = hasText ? '' : 'contents';
818
+ }
819
+
766
820
  setupEvents() {
767
821
  this._onClick = () => this.toggle();
822
+ this._onSlot = () => this._syncText();
768
823
  this._btn.addEventListener('click', this._onClick);
824
+ this._slot.addEventListener('slotchange', this._onSlot);
825
+ this._syncText();
769
826
  }
770
827
 
771
828
  teardownEvents() {
772
829
  this._btn?.removeEventListener('click', this._onClick);
830
+ this._slot?.removeEventListener('slotchange', this._onSlot);
773
831
  }
774
832
 
775
833
  toggle() {
@@ -779,8 +837,9 @@ var NotionKitElements = (function (exports) {
779
837
  this.dispatchEvent(new Event('change', { bubbles: true }));
780
838
  }
781
839
 
782
- onAttributeChanged() {
840
+ onAttributeChanged(name) {
783
841
  if (!this._btn) return;
842
+ if (name === 'text') { this._syncText(); return; }
784
843
  this._apply();
785
844
  this._syncFormValue();
786
845
  }
@@ -804,6 +863,8 @@ var NotionKitElements = (function (exports) {
804
863
  set name(v) { this.setAttribute('name', v); }
805
864
  get value() { return this.getAttribute('value') || 'on'; }
806
865
  set value(v) { this.setAttribute('value', v); }
866
+ get text() { return this.getAttribute('text'); }
867
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
807
868
  }
808
869
 
809
870
  customElements.define('nk-switch', NkSwitch);
@@ -811,15 +872,18 @@ var NotionKitElements = (function (exports) {
811
872
  // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
812
873
  // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
813
874
  class NkCheck extends NkFormElement {
814
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
875
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'indeterminate', 'required']; }
815
876
 
816
877
  render() {
817
878
  const label = this.createElement('label', ['nk-check']);
818
879
  this._input = this.createElement('input', [], { type: 'checkbox' });
880
+ const slot = document.createElement('slot');
881
+ this._text = document.createTextNode('');
882
+ slot.appendChild(this._text);
819
883
  this._apply();
820
884
  this._defaultChecked = this.getBoolAttr('checked');
821
885
  label.appendChild(this._input);
822
- label.appendChild(document.createElement('slot'));
886
+ label.appendChild(slot);
823
887
  this._wrapper.appendChild(label);
824
888
  this._syncFormValue();
825
889
  }
@@ -832,6 +896,7 @@ var NotionKitElements = (function (exports) {
832
896
  const name = this.getAttribute('name');
833
897
  name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
834
898
  this._input.value = this.getAttribute('value') || 'on';
899
+ if (this._text) this._text.data = this.getAttribute('text') ?? '';
835
900
  }
836
901
 
837
902
  setupEvents() {
@@ -876,6 +941,8 @@ var NotionKitElements = (function (exports) {
876
941
  set disabled(v) { this.setBoolAttr('disabled', v); }
877
942
  get name() { return this.getAttribute('name'); }
878
943
  set name(v) { this.setAttribute('name', v); }
944
+ get text() { return this.getAttribute('text'); }
945
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
879
946
  get value() { return this.getAttribute('value') || 'on'; }
880
947
  set value(v) { this.setAttribute('value', v); }
881
948
  }
@@ -911,17 +978,20 @@ var NotionKitElements = (function (exports) {
911
978
  }
912
979
 
913
980
  class NkRadio extends NkFormElement {
914
- static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
981
+ static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'text', 'required']; }
915
982
 
916
983
  render() {
917
984
  const label = this.createElement('label', ['nk-check']);
918
985
  this._input = this.createElement('input', [], { type: 'radio' });
986
+ const slot = document.createElement('slot');
987
+ this._text = document.createTextNode('');
988
+ slot.appendChild(this._text);
919
989
  // `name` on the inner input is inert (it is alone in its tree); it stays
920
990
  // as a devtools courtesy. The group above is the real one.
921
991
  this._apply();
922
992
  this._defaultChecked = this.getBoolAttr('checked');
923
993
  label.appendChild(this._input);
924
- label.appendChild(document.createElement('slot'));
994
+ label.appendChild(slot);
925
995
  this._wrapper.appendChild(label);
926
996
  this._syncFormValue();
927
997
  // Elements upgrade in document order, so the last `checked` one in the
@@ -937,6 +1007,7 @@ var NotionKitElements = (function (exports) {
937
1007
  const name = this.getAttribute('name');
938
1008
  name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
939
1009
  this._input.value = this.getAttribute('value') || '';
1010
+ if (this._text) this._text.data = this.getAttribute('text') ?? '';
940
1011
  }
941
1012
 
942
1013
  setupEvents() {
@@ -1033,6 +1104,8 @@ var NotionKitElements = (function (exports) {
1033
1104
  set disabled(v) { this.setBoolAttr('disabled', v); }
1034
1105
  get name() { return this.getAttribute('name'); }
1035
1106
  set name(v) { this.setAttribute('name', v); }
1107
+ get text() { return this.getAttribute('text'); }
1108
+ set text(v) { v == null ? this.removeAttribute('text') : this.setAttribute('text', v); }
1036
1109
  get value() { return this.getAttribute('value') || ''; }
1037
1110
  set value(v) { this.setAttribute('value', v); }
1038
1111
  }
@@ -1128,11 +1201,19 @@ var NotionKitElements = (function (exports) {
1128
1201
  // <div class="f-control">…</div></div>
1129
1202
  // Rich label / description content goes through slot="label" / slot="desc"
1130
1203
  // (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
1204
+ //
1205
+ // `stacked` puts the label above a full-width control, `compact` shrinks the
1206
+ // label and drops the row padding; inside <nk-fields> both are on by
1207
+ // default. A stacked field sets `wide` on its nk-input / nk-textarea /
1208
+ // nk-select, since the stylesheet's `.nk-field.stacked .nk-input` cannot
1209
+ // reach into the control's shadow root.
1210
+ const WIDE = ['nk-input', 'nk-textarea', 'nk-select'];
1211
+
1131
1212
  class NkField extends NkElement {
1132
- static get observedAttributes() { return ['label', 'desc']; }
1213
+ static get observedAttributes() { return ['label', 'desc', 'stacked', 'compact']; }
1133
1214
 
1134
1215
  render() {
1135
- const field = this.createElement('div', ['nk-field']);
1216
+ this._field = this.createElement('div', ['nk-field']);
1136
1217
  const text = document.createElement('div');
1137
1218
  this._label = this.createElement('div', ['f-label']);
1138
1219
  const labelSlot = this.createElement('slot', [], { name: 'label' });
@@ -1143,21 +1224,51 @@ var NotionKitElements = (function (exports) {
1143
1224
  text.appendChild(labelSlot);
1144
1225
  text.appendChild(descSlot);
1145
1226
  const control = this.createElement('div', ['f-control']);
1146
- control.appendChild(document.createElement('slot'));
1147
- field.appendChild(text);
1148
- field.appendChild(control);
1149
- this._wrapper.appendChild(field);
1227
+ this._slot = document.createElement('slot');
1228
+ control.appendChild(this._slot);
1229
+ this._field.appendChild(text);
1230
+ this._field.appendChild(control);
1231
+ this._wrapper.appendChild(this._field);
1232
+ this._widened = new Set();
1150
1233
  this._sync();
1151
1234
  }
1152
1235
 
1236
+ setupEvents() {
1237
+ this._onSlot = () => this._syncWide();
1238
+ this._slot.addEventListener('slotchange', this._onSlot);
1239
+ this._sync();
1240
+ }
1241
+
1242
+ teardownEvents() {
1243
+ this._slot?.removeEventListener('slotchange', this._onSlot);
1244
+ }
1245
+
1153
1246
  onAttributeChanged() { this._sync(); }
1154
1247
 
1248
+ get stacked() { return this.getBoolAttr('stacked') || !!this.closest('nk-fields'); }
1249
+ set stacked(v) { this.setBoolAttr('stacked', v); }
1250
+ get compact() { return this.getBoolAttr('compact') || !!this.closest('nk-fields'); }
1251
+ set compact(v) { this.setBoolAttr('compact', v); }
1252
+
1155
1253
  _sync() {
1156
1254
  if (!this._label) return;
1157
1255
  this._label.textContent = this.getAttribute('label') || '';
1158
1256
  const desc = this.getAttribute('desc');
1159
1257
  this._desc.textContent = desc || '';
1160
1258
  this._desc.style.display = desc ? '' : 'none';
1259
+ this._field.classList.toggle('stacked', this.stacked);
1260
+ this._field.classList.toggle('compact', this.compact);
1261
+ this._syncWide();
1262
+ }
1263
+
1264
+ _syncWide() {
1265
+ if (!this._slot) return;
1266
+ const stacked = this.stacked;
1267
+ for (const el of this._slot.assignedElements()) {
1268
+ if (!WIDE.includes(el.localName)) continue;
1269
+ if (stacked && !el.hasAttribute('wide')) { el.setAttribute('wide', ''); this._widened.add(el); }
1270
+ else if (!stacked && this._widened.has(el)) { el.removeAttribute('wide'); this._widened.delete(el); }
1271
+ }
1161
1272
  }
1162
1273
 
1163
1274
  get label() { return this.getAttribute('label'); }
@@ -1168,6 +1279,25 @@ var NotionKitElements = (function (exports) {
1168
1279
 
1169
1280
  customElements.define('nk-field', NkField);
1170
1281
 
1282
+ // <nk-fields>
1283
+ // <nk-field label="Name"><nk-input name="name"></nk-input></nk-field>
1284
+ // <nk-field label="Email"><nk-input name="email"></nk-input></nk-field>
1285
+ // </nk-fields>
1286
+ // → <div class="nk-fields">…</div>
1287
+ // A grid of short fields side by side, wrapping as the width allows. Every
1288
+ // nk-field inside renders itself stacked and compact (12px label above a
1289
+ // full-width control) – the class markup does the same through
1290
+ // `.nk-fields > .nk-field`, which cannot cross the shadow boundary here.
1291
+ class NkFields extends NkElement {
1292
+ render() {
1293
+ const grid = this.createElement('div', ['nk-fields']);
1294
+ grid.appendChild(document.createElement('slot'));
1295
+ this._wrapper.appendChild(grid);
1296
+ }
1297
+ }
1298
+
1299
+ customElements.define('nk-fields', NkFields);
1300
+
1171
1301
  // <nk-tag color="blue">Text</nk-tag> — modifier class .blue becomes color="blue"
1172
1302
  const COLORS$1 = ['blue', 'green', 'orange', 'purple'];
1173
1303
 
@@ -2180,6 +2310,166 @@ var NotionKitElements = (function (exports) {
2180
2310
 
2181
2311
  customElements.define('nk-theme-toggle', NkThemeToggle);
2182
2312
 
2313
+ // <nk-tab-bar value="inbox">
2314
+ // <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
2315
+ // <nk-tab-bar-item icon="📥" value="inbox">Inbox</nk-tab-bar-item>
2316
+ // <nk-tab-bar-item icon="☰" drawer>More</nk-tab-bar-item>
2317
+ // </nk-tab-bar>
2318
+ // → <nav class="nk-tab-bar">…</nav>
2319
+ //
2320
+ // The thumb-reachable twin of the sidebar for phones and installed PWAs. As
2321
+ // the last child of <nk-app> it is slotted into .nk-main below the scrolling
2322
+ // page, so it never moves and needs no bottom padding anywhere. The
2323
+ // stylesheet hides it above 860px – there the sidebar is the navigation –
2324
+ // and shows it below; `always` shows it at every width (previews, phone
2325
+ // frames), `floating` makes it a capsule. Exactly one item is `active`; a
2326
+ // `drawer` item opens the sidebar instead of becoming active.
2327
+ class NkTabBar extends NkElement {
2328
+ static get observedAttributes() { return ['value', 'always', 'floating', 'label']; }
2329
+
2330
+ render() {
2331
+ this._bar = this.createElement('nav', ['nk-tab-bar']);
2332
+ this._slot = document.createElement('slot');
2333
+ this._bar.appendChild(this._slot);
2334
+ this._wrapper.appendChild(this._bar);
2335
+ this._syncBar();
2336
+ this._sync();
2337
+ }
2338
+
2339
+ get items() { return [...this.querySelectorAll(':scope > nk-tab-bar-item')]; }
2340
+
2341
+ // Attribute access only: on the first connect the children are in the DOM
2342
+ // but not yet upgraded, so their accessors do not exist.
2343
+ _valueOf(item) { return item.getAttribute('value') ?? item.getAttribute('label') ?? item.textContent.trim(); }
2344
+
2345
+ _syncBar() {
2346
+ this._bar.classList.toggle('always', this.getBoolAttr('always'));
2347
+ this._bar.classList.toggle('floating', this.getBoolAttr('floating'));
2348
+ const label = this.getAttribute('label');
2349
+ label ? this._bar.setAttribute('aria-label', label) : this._bar.removeAttribute('aria-label');
2350
+ }
2351
+
2352
+ _sync() {
2353
+ const items = this.items.filter(i => !i.hasAttribute('drawer'));
2354
+ if (!items.length) return;
2355
+ let value = this.getAttribute('value');
2356
+ if (value === null || !items.some(i => this._valueOf(i) === value)) {
2357
+ const preset = items.find(i => i.hasAttribute('active')) || items[0];
2358
+ value = this._valueOf(preset);
2359
+ }
2360
+ for (const item of items) {
2361
+ if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
2362
+ }
2363
+ this._value = value;
2364
+ }
2365
+
2366
+ setupEvents() {
2367
+ this._onSlot = () => this._sync();
2368
+ this._slot.addEventListener('slotchange', this._onSlot);
2369
+ this._sync();
2370
+ }
2371
+
2372
+ teardownEvents() {
2373
+ this._slot?.removeEventListener('slotchange', this._onSlot);
2374
+ }
2375
+
2376
+ onAttributeChanged(name) {
2377
+ if (name !== 'value') { this._syncBar(); return; }
2378
+ const before = this._value;
2379
+ this._sync();
2380
+ if (this._value !== before) this.emit('nk-change', { value: this._value });
2381
+ }
2382
+
2383
+ get value() { return this._value ?? this.getAttribute('value'); }
2384
+ set value(v) { this.setAttribute('value', v); }
2385
+ get always() { return this.getBoolAttr('always'); }
2386
+ set always(v) { this.setBoolAttr('always', v); }
2387
+ get floating() { return this.getBoolAttr('floating'); }
2388
+ set floating(v) { this.setBoolAttr('floating', v); }
2389
+ }
2390
+
2391
+ customElements.define('nk-tab-bar', NkTabBar);
2392
+
2393
+ // <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
2394
+ // → <button class="nk-tab-bar-item active" type="button">
2395
+ // <span class="icon">📥</span><span class="label">Inbox</span></button>
2396
+ //
2397
+ // One destination of <nk-tab-bar>. A click emits nk-select (cancelable);
2398
+ // inside a bar it then moves the bar's `value`, standalone it sets its own
2399
+ // `active`. With `href` it navigates afterwards, with `drawer` it opens the
2400
+ // nearest <nk-sidebar> as a drawer instead of becoming active – the usual
2401
+ // fifth item ("More"). The icon is an attribute or a `slot="icon"` node.
2402
+ class NkTabBarItem extends NkElement {
2403
+ static get observedAttributes() { return ['icon', 'label', 'value', 'href', 'active', 'disabled', 'drawer']; }
2404
+
2405
+ render() {
2406
+ this._btn = this.createElement('button', ['nk-tab-bar-item'], { type: 'button' });
2407
+ this._iconSlot = this.createElement('slot', [], { name: 'icon' });
2408
+ this._icon = this.createElement('span', ['icon'], { 'aria-hidden': 'true' });
2409
+ this._iconSlot.appendChild(this._icon);
2410
+ this._label = this.createElement('span', ['label']);
2411
+ this._labelSlot = document.createElement('slot');
2412
+ this._labelText = document.createTextNode('');
2413
+ this._labelSlot.appendChild(this._labelText);
2414
+ this._label.appendChild(this._labelSlot);
2415
+ this._btn.append(this._iconSlot, this._label);
2416
+ this._wrapper.appendChild(this._btn);
2417
+ this._sync();
2418
+ }
2419
+
2420
+ _sync() {
2421
+ this._icon.textContent = this.getAttribute('icon') ?? '';
2422
+ this._labelText.data = this.getAttribute('label') ?? '';
2423
+ const active = this.getBoolAttr('active');
2424
+ this._btn.classList.toggle('active', active);
2425
+ active ? this._btn.setAttribute('aria-current', 'page') : this._btn.removeAttribute('aria-current');
2426
+ this._btn.disabled = this.getBoolAttr('disabled');
2427
+ const href = this.getAttribute('href');
2428
+ href ? this._btn.setAttribute('data-href', href) : this._btn.removeAttribute('data-href');
2429
+ }
2430
+
2431
+ setupEvents() {
2432
+ this._onClick = () => this.select();
2433
+ this._btn.addEventListener('click', this._onClick);
2434
+ }
2435
+
2436
+ teardownEvents() {
2437
+ this._btn?.removeEventListener('click', this._onClick);
2438
+ }
2439
+
2440
+ select() {
2441
+ if (this.getBoolAttr('disabled')) return;
2442
+ const href = this.getAttribute('href');
2443
+ const ok = this.emit('nk-select', { value: this.value, label: this.label, href, item: this, drawer: this.getBoolAttr('drawer') });
2444
+ if (!ok) return;
2445
+ if (this.getBoolAttr('drawer')) {
2446
+ const sidebar = this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar');
2447
+ sidebar?.toggle?.();
2448
+ return;
2449
+ }
2450
+ const bar = this.closest('nk-tab-bar');
2451
+ if (bar) bar.value = this.value;
2452
+ else this.setBoolAttr('active', true);
2453
+ if (href) location.assign(href);
2454
+ }
2455
+
2456
+ onAttributeChanged() { this._sync(); }
2457
+ focus(o) { this._btn?.focus(o); }
2458
+
2459
+ get value() { return this.getAttribute('value') ?? this.label; }
2460
+ set value(v) { this.setAttribute('value', v); }
2461
+ get label() { return this.getAttribute('label') ?? this.textContent.trim(); }
2462
+ set label(v) { this.setAttribute('label', v); }
2463
+ get active() { return this.getBoolAttr('active'); }
2464
+ set active(v) { this.setBoolAttr('active', v); }
2465
+ get disabled() { return this.getBoolAttr('disabled'); }
2466
+ set disabled(v) { this.setBoolAttr('disabled', v); }
2467
+ get drawer() { return this.getBoolAttr('drawer'); }
2468
+ set drawer(v) { this.setBoolAttr('drawer', v); }
2469
+ }
2470
+
2471
+ customElements.define('nk-tab-bar-item', NkTabBarItem);
2472
+
2183
2473
  // <nk-page icon="🚀" cover>
2184
2474
  // <nk-page-title>NotionKit MVP</nk-page-title>
2185
2475
  // <nk-page-actions>…</nk-page-actions>
@@ -4662,6 +4952,7 @@ var NotionKitElements = (function (exports) {
4662
4952
  exports.NkEmojiPicker = NkEmojiPicker;
4663
4953
  exports.NkEmpty = NkEmpty;
4664
4954
  exports.NkField = NkField;
4955
+ exports.NkFields = NkFields;
4665
4956
  exports.NkFilterBar = NkFilterBar;
4666
4957
  exports.NkFormElement = NkFormElement;
4667
4958
  exports.NkHeading = NkHeading;
@@ -4696,6 +4987,8 @@ var NotionKitElements = (function (exports) {
4696
4987
  exports.NkSwitch = NkSwitch;
4697
4988
  exports.NkSynced = NkSynced;
4698
4989
  exports.NkTab = NkTab;
4990
+ exports.NkTabBar = NkTabBar;
4991
+ exports.NkTabBarItem = NkTabBarItem;
4699
4992
  exports.NkTableView = NkTableView;
4700
4993
  exports.NkTabs = NkTabs;
4701
4994
  exports.NkTag = NkTag;