@jungherz-de/notionkit-elements 1.0.0

package/dist/notionkit-elements.js

@@ -0,0 +1,4718 @@
+var NotionKitElements = (function (exports) {
+  'use strict';
+
+  // NotionKit v1.1.1 – Constructable Stylesheet
+  // Auto-generated by build-styles-js.mjs – do not edit manually.
+
+  // The :root and [data-theme="dark"] blocks that declare --nk-* …
+  const tokensCss = ":root{color-scheme:light;--nk-bg:#ffffff;--nk-bg-sidebar:#f7f6f3;--nk-bg-hover:rgba(0,0,0,0.045);--nk-bg-active:rgba(0,0,0,0.06);--nk-bg-callout:#f1f1ef;--nk-bg-code:#f7f6f3;--nk-bg-card:#ffffff;--nk-text:#37352f;--nk-text-secondary:rgba(55,53,47,0.65);--nk-text-tertiary:rgba(55,53,47,0.45);--nk-border:rgba(55,53,47,0.09);--nk-border-strong:rgba(55,53,47,0.16);--nk-accent:#2383e2;--nk-on-accent:#ffffff;--nk-danger:#eb5757;--nk-tag-blue-bg:#e7f3f8;--nk-tag-blue-text:#337ea9;--nk-tag-green-bg:#edf3ec;--nk-tag-green-text:#448361;--nk-tag-orange-bg:#fbecdd;--nk-tag-orange-text:#d9730d;--nk-tag-purple-bg:#f6f3f9;--nk-tag-purple-text:#9065b0;--nk-decor-purple:#9065b0;--nk-decor-blue:#529cca;--nk-decor-orange:#d9730d;--nk-scrim:rgba(15,15,15,0.6);--nk-scrim-soft:rgba(15,15,15,0.5);--nk-sidebar-width:260px;--nk-radius:6px;--nk-font:ui-sans-serif,-apple-system,\"Segoe UI\",Inter,Helvetica,Arial,sans-serif;--nk-font-mono:ui-monospace,\"SF Mono\",Menlo,Consolas,monospace;--nk-shadow-menu:rgba(15,15,15,0.05) 0px 0px 0px 1px,rgba(15,15,15,0.1) 0px 3px 6px,rgba(15,15,15,0.2) 0px 9px 24px;--nk-shadow-card:0 1px 2px rgba(0,0,0,0.04);--nk-shadow-knob:0 1px 2px rgba(0,0,0,0.2);--nk-shadow-segment:0 1px 2px rgba(0,0,0,0.08)}[data-theme=dark]{color-scheme:dark;--nk-bg:#191919;--nk-bg-sidebar:#202020;--nk-bg-hover:rgba(255,255,255,0.055);--nk-bg-active:rgba(255,255,255,0.08);--nk-bg-callout:#252525;--nk-bg-code:#202020;--nk-bg-card:#202020;--nk-text:rgba(255,255,255,0.81);--nk-text-secondary:rgba(255,255,255,0.46);--nk-text-tertiary:rgba(255,255,255,0.28);--nk-border:rgba(255,255,255,0.094);--nk-border-strong:rgba(255,255,255,0.16);--nk-accent:#529CCA;--nk-tag-blue-bg:#133040;--nk-tag-blue-text:#529CCA;--nk-tag-green-bg:#173B2C;--nk-tag-green-text:#4DAB9A;--nk-tag-orange-bg:#40291B;--nk-tag-orange-text:#FFA344;--nk-tag-purple-bg:#2E2440;--nk-tag-purple-text:#9A6DD7;--nk-shadow-menu:rgba(15,15,15,0.2) 0px 0px 0px 1px,rgba(15,15,15,0.4) 0px 3px 6px,rgba(15,15,15,0.6) 0px 9px 24px;--nk-shadow-card:none}";
+
+  // … and everything else, in two pieces around where they were.
+  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}";
+  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 */";
+
+  const componentsCss = componentsHead + componentsTail;
+  const css = componentsHead + tokensCss + componentsTail;
+
+  const nkSheet = new CSSStyleSheet();
+  nkSheet.replaceSync(css);
+
+  const tokensSheet = new CSSStyleSheet();
+  tokensSheet.replaceSync(tokensCss);
+
+  const componentsSheet = new CSSStyleSheet();
+  componentsSheet.replaceSync(componentsCss);
+
+  // ============================================================
+  // NotionKit Elements – base classes
+  //
+  // Every <nk-*> element is a thin shell around the markup notionkit.css already
+  // styles. The shadow root adopts the *components* half of that stylesheet and
+  // nothing else; the element ships no visual CSS of its own.
+  // ============================================================
+
+  // ── Design tokens ──
+  // The shadow roots deliberately adopt componentsSheet only. The full sheet
+  // would bring the :root / [data-theme] token blocks along, and those match the
+  // .nk-wrapper below — every --nk-* token would then be re-declared inside each
+  // shadow root, where a matching rule always beats an inherited value. A page's
+  // own `:root { --nk-accent: … }` would never arrive.
+  //
+  // So the token defaults go on the document once, and every shadow root
+  // inherits them like any other custom property. They sit in a cascade layer so
+  // an ordinary (unlayered) brand stylesheet — and notionkit.css itself, if the
+  // page loads it — wins over them, no matter the load order.
+
+  const TOKENS_INJECTED = '__nkDefaultTokensInjected';
+
+  function injectDefaultTokens() {
+    if (typeof document === 'undefined') return;              // SSR / non-DOM
+    if (globalThis[TOKENS_INJECTED]) return;                   // another bundle copy did it
+    globalThis[TOKENS_INJECTED] = true;
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`@layer notionkit-defaults { ${tokensCss} }`);
+    // Append — never assign — so an app's own adopted sheets survive.
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  }
+
+  injectDefaultTokens();
+
+  // ── Global theme sync ──
+  // data-theme on <html> is the only source of truth. One MutationObserver
+  // mirrors it onto every registered instance; no element sets a theme itself.
+
+  const instances = new Set();
+
+  function getCurrentTheme() {
+    return document.documentElement.getAttribute('data-theme') || 'light';
+  }
+
+  function syncAllThemes() {
+    const theme = getCurrentTheme();
+    for (const instance of instances) instance._syncTheme(theme);
+  }
+
+  if (typeof window !== 'undefined' && typeof MutationObserver !== 'undefined') {
+    new MutationObserver(syncAllThemes).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+  }
+
+  // ── Host stylesheets ──
+  // Layout plumbing only: how the host box participates in the outer layout, and
+  // that `hidden` keeps working. :host([hidden]) has a higher specificity than
+  // :host, so it wins regardless of order. The wrapper is layout-transparent.
+
+  const hostSheets = new Map();
+
+  function hostSheetFor(display) {
+    let sheet = hostSheets.get(display);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      sheet.replaceSync(`
+      :host { display: ${display}; }
+      :host([hidden]) { display: none; }
+      .nk-wrapper { display: contents; }
+    `);
+      hostSheets.set(display, sheet);
+    }
+    return sheet;
+  }
+
+  // ── Base class ──
+
+  class NkElement extends HTMLElement {
+
+    /**
+     * How the host takes part in the outer layout. Default 'contents': the host
+     * generates no box, so the inner .nk-* element sits in the parent's layout
+     * exactly where the class markup would – a button stays inline, a sidebar
+     * is a direct flex child of the app, a tree row and its children box are
+     * siblings. That is what makes the pixel parity with the class markup hold.
+     * Consequence: style the parent or the tokens, not the host; `hidden` on
+     * the host still works. Override with 'block' / 'inline-block' only when a
+     * host box is genuinely needed.
+     */
+    static get display() { return 'contents'; }
+
+    /**
+     * Optional CSSStyleSheet with component-specific host rules, adopted after
+     * the shared sheets. Positioning and sizing of the host only — never colour,
+     * spacing or typography; those belong to notionkit.css.
+     */
+    static get hostStyles() { return null; }
+
+    /**
+     * Opt in when the component *copies* light-DOM children into its shadow tree
+     * (options, breadcrumb crumbs). A MutationObserver then calls
+     * projectLightDom() again whenever those children change, so a framework
+     * that swaps them keeps the rendered element in step. Components that merely
+     * *slot* their children use `slotchange` instead.
+     */
+    static get observesLightDom() { return false; }
+
+    /** What the light-DOM observer watches. Drop `subtree` for shallow copies. */
+    static get lightDomObserverInit() {
+      return { childList: true, subtree: true, characterData: true, attributes: true };
+    }
+
+    /**
+     * 'named' (default) or 'manual'. Manual assignment lets a component route
+     * light-DOM nodes itself – text nodes into a label slot, nested elements
+     * into a children slot – so <nk-tree-item icon="🏠">Home</nk-tree-item>
+     * reads naturally. With 'manual' the component calls assignSlots() on
+     * every childList change.
+     */
+    static get slotAssignment() { return 'named'; }
+
+    static get observedAttributes() { return []; }
+
+    constructor() {
+      super();
+      this._initialized = false;
+      this._shadow = this.attachShadow({ mode: 'open', slotAssignment: this.constructor.slotAssignment });
+      const sheets = [componentsSheet, hostSheetFor(this.constructor.display)];
+      const extra = this.constructor.hostStyles;
+      if (extra) sheets.push(extra);
+      this._shadow.adoptedStyleSheets = sheets;
+    }
+
+    connectedCallback() {
+      if (!this._initialized) {
+        this._initialized = true;
+
+        // The wrapper mirrors data-theme from <html> so [data-theme]-keyed
+        // component rules apply inside the root. Token *values* need no
+        // mirroring — they inherit.
+        this._wrapper = document.createElement('div');
+        this._wrapper.className = 'nk-wrapper';
+        this._wrapper.setAttribute('data-theme', getCurrentTheme());
+        this._shadow.appendChild(this._wrapper);
+
+        this.render();
+      } else {
+        this._wrapper.setAttribute('data-theme', getCurrentTheme());
+      }
+
+      // Everything below runs on every connect, not just the first. Moving an
+      // element in the DOM disconnects and reconnects it, and disconnectedCallback
+      // tears all of this down — without re-arming it here a moved element would
+      // keep its markup but silently stop reacting.
+      this.setupEvents();
+      instances.add(this);
+
+      if (this.constructor.observesLightDom) {
+        this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+        this._lightDomObserver.observe(this, this.constructor.lightDomObserverInit);
+      }
+      if (this.constructor.slotAssignment === 'manual') {
+        this.assignSlots();
+        this._slotObserver ??= new MutationObserver(() => this.assignSlots());
+        this._slotObserver.observe(this, { childList: true });
+      }
+    }
+
+    disconnectedCallback() {
+      instances.delete(this);
+      this._lightDomObserver?.disconnect();
+      this._slotObserver?.disconnect();
+      this.teardownEvents();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!this._initialized) return;
+      if (oldValue === newValue) return;
+      this.onAttributeChanged(name, oldValue, newValue);
+    }
+
+    _syncTheme(theme) {
+      this._wrapper?.setAttribute('data-theme', theme);
+    }
+
+    /** Subclasses override to build the inner DOM inside this._wrapper. Runs once. */
+    render() {}
+
+    /** Subclasses override to attach event listeners. Runs on every connect. */
+    setupEvents() {}
+
+    /** Subclasses override to remove event listeners. Runs on every disconnect. */
+    teardownEvents() {}
+
+    /** Subclasses override to react to attribute changes after render(). */
+    onAttributeChanged(name, oldValue, newValue) {}
+
+    /**
+     * Subclasses that set observesLightDom override this to (re-)copy their
+     * light-DOM children into the shadow tree. Runs on every change to those
+     * children, so it has to be safe to call repeatedly.
+     */
+    projectLightDom() {}
+
+    /** Components with manual slot assignment override this. */
+    assignSlots() {}
+
+    /**
+     * Escape hatch: re-copy the light-DOM children now. The observer covers the
+     * ordinary cases; this is for the ones it cannot see, so nobody has to reach
+     * into element.shadowRoot.
+     */
+    refresh() { this.projectLightDom(); if (this.constructor.slotAssignment === 'manual') this.assignSlots(); }
+
+    // ── Utilities ──
+
+    getBoolAttr(name) {
+      return this.hasAttribute(name);
+    }
+
+    setBoolAttr(name, value) {
+      if (value) this.setAttribute(name, '');
+      else this.removeAttribute(name);
+    }
+
+    createElement(tag, classes = [], attrs = {}) {
+      const el = document.createElement(tag);
+      if (classes.length) el.classList.add(...classes);
+      for (const [key, val] of Object.entries(attrs)) {
+        if (val !== null && val !== undefined && val !== false) el.setAttribute(key, val === true ? '' : val);
+      }
+      return el;
+    }
+
+    /** Dispatches a composed, bubbling CustomEvent — the nk-* event contract. */
+    emit(eventName, detail = null) {
+      return this.dispatchEvent(new CustomEvent(eventName, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      }));
+    }
+  }
+
+  // ── Form-associated base class ──
+  // ElementInternals gives the element a place in the surrounding <form>:
+  // FormData, reset, validation and :disabled through <fieldset>.
+
+  class NkFormElement extends NkElement {
+
+    static formAssociated = true;
+
+    constructor() {
+      super();
+      this._internals = this.attachInternals();
+    }
+
+    get form() { return this._internals.form; }
+    get validationMessage() { return this._internals.validationMessage; }
+    get validity() { return this._internals.validity; }
+    get willValidate() { return this._internals.willValidate; }
+
+    checkValidity() { return this._internals.checkValidity(); }
+    reportValidity() { return this._internals.reportValidity(); }
+
+    formResetCallback() { this.resetValue(); }
+    formStateRestoreCallback(state, mode) { this.restoreValue(state, mode); }
+    formDisabledCallback(disabled) { this.onFormDisabled(disabled); }
+
+    /** Subclasses override. */
+    resetValue() {}
+    restoreValue(state, mode) {}
+    onFormDisabled(disabled) {}
+
+    setFormValue(value, state) {
+      this._internals.setFormValue(value, state);
+    }
+
+    setValidity(flags, message, anchor) {
+      this._internals.setValidity(flags, message, anchor);
+    }
+
+    /** Mirrors the native control's validity onto the host, so required works. */
+    syncValidityFrom(control) {
+      if (!control) return;
+      if (control.validity.valid) this._internals.setValidity({});
+      else this._internals.setValidity(control.validity, control.validationMessage, control);
+    }
+  }
+
+  // <nk-btn variant="primary" small>Save</nk-btn>   →  <button class="nk-btn primary small">
+  // <nk-btn href="/docs" variant="secondary">Docs</nk-btn>  →  <a class="nk-btn secondary">
+  // <nk-btn variant="topbar">⭐</nk-btn>  →  <button class="nk-topbar-btn">
+  //
+  // Modifier classes become attributes. A slotted <svg> is sized by the
+  // `.nk-btn ::slotted(svg)` twin; pass the icon itself, never wrapped.
+  const VARIANTS$1 = ['primary', 'secondary', 'danger', 'danger-solid', 'topbar', 'share'];
+
+  class NkBtn extends NkElement {
+    static get observedAttributes() { return ['variant', 'small', 'disabled', 'type', 'href', 'title', 'aria-label']; }
+
+    render() {
+      this._build();
+    }
+
+    _build() {
+      const href = this.getAttribute('href');
+      const el = href ? this.createElement('a', [], { href }) : this.createElement('button', [], { type: this.getAttribute('type') || 'button' });
+      el.className = this._computeClasses().join(' ');
+      el.appendChild(document.createElement('slot'));
+      this._applyState(el);
+      if (this._btn) {
+        this._btn.removeEventListener('click', this._onClick);
+        this._btn.replaceWith(el);
+      } else {
+        this._wrapper.appendChild(el);
+      }
+      this._btn = el;
+      if (this._onClick) el.addEventListener('click', this._onClick);
+    }
+
+    _applyState(el) {
+      const disabled = this.getBoolAttr('disabled');
+      if (el.tagName === 'BUTTON') el.disabled = disabled;
+      else el.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+      const title = this.getAttribute('title');
+      title ? el.setAttribute('title', title) : el.removeAttribute('title');
+      const label = this.getAttribute('aria-label');
+      label ? el.setAttribute('aria-label', label) : el.removeAttribute('aria-label');
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        if (this.getBoolAttr('disabled')) { e.preventDefault(); e.stopPropagation(); return; }
+        // A button inside a shadow root is not a submit button of the outer
+        // form; forward the intent to the form the host sits in.
+        const type = this.getAttribute('type');
+        if (type === 'submit' || type === 'reset') {
+          const form = this.closest('form');
+          if (form) type === 'submit' ? form.requestSubmit() : form.reset();
+        }
+      };
+      this._btn.addEventListener('click', this._onClick);
+    }
+
+    teardownEvents() {
+      this._btn?.removeEventListener('click', this._onClick);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._btn) return;
+      switch (name) {
+        case 'href':
+          this._build();
+          break;
+        case 'variant':
+        case 'small':
+          this._btn.className = this._computeClasses().join(' ');
+          break;
+        case 'type':
+          if (this._btn.tagName === 'BUTTON') this._btn.setAttribute('type', this.getAttribute('type') || 'button');
+          break;
+        default:
+          this._applyState(this._btn);
+      }
+    }
+
+    _computeClasses() {
+      const variant = this.getAttribute('variant');
+      if (variant === 'topbar') return ['nk-topbar-btn'];
+      if (variant === 'share') return ['nk-topbar-btn', 'nk-share-btn'];
+      const classes = ['nk-btn'];
+      if (VARIANTS$1.includes(variant)) classes.push(variant);
+      if (this.getBoolAttr('small')) classes.push('small');
+      return classes;
+    }
+
+    focus(options) { this._btn?.focus(options); }
+    click() { this._btn?.click(); }
+
+    get variant() { return this.getAttribute('variant'); }
+    set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+    get small() { return this.getBoolAttr('small'); }
+    set small(v) { this.setBoolAttr('small', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get type() { return this.getAttribute('type') || 'button'; }
+    set type(v) { this.setAttribute('type', v); }
+    get href() { return this.getAttribute('href'); }
+    set href(v) { v ? this.setAttribute('href', v) : this.removeAttribute('href'); }
+  }
+
+  customElements.define('nk-btn', NkBtn);
+
+  // <nk-input name="title" value="…" placeholder="…" wide></nk-input>  →  <input class="nk-input wide">
+  // Takes part in the surrounding <form> through ElementInternals.
+  const FORWARDED$2 = ['type', 'placeholder', 'name', 'min', 'max', 'step', 'autocomplete', 'pattern', 'maxlength', 'minlength', 'inputmode', 'list', 'aria-label'];
+  const BOOLEANS$1 = ['required', 'disabled', 'readonly'];
+
+  class NkInput extends NkFormElement {
+    static get observedAttributes() { return ['value', 'wide', ...FORWARDED$2, ...BOOLEANS$1]; }
+
+    render() {
+      this._input = this.createElement('input', ['nk-input']);
+      for (const attr of FORWARDED$2) this._forward(attr);
+      for (const attr of BOOLEANS$1) this._forward(attr);
+      this._input.value = this.getAttribute('value') ?? '';
+      this._defaultValue = this._input.value;
+      this._syncWide();
+      this._wrapper.appendChild(this._input);
+      this._syncFormValue();
+    }
+
+    _forward(attr) {
+      if (BOOLEANS$1.includes(attr)) {
+        this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+        return;
+      }
+      const v = this.getAttribute(attr);
+      if (v === null) this._input.removeAttribute(attr);
+      else this._input.setAttribute(attr, v);
+    }
+
+    _syncWide() {
+      this._input.classList.toggle('wide', this.getBoolAttr('wide'));
+    }
+
+    setupEvents() {
+      this._onInput = () => {
+        this._syncFormValue();
+        this.emit('nk-input', { value: this._input.value, name: this.name });
+      };
+      this._onChange = () => {
+        this._syncFormValue();
+        this.emit('nk-change', { value: this._input.value, name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._input.addEventListener('input', this._onInput);
+      this._input.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('input', this._onInput);
+      this._input?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._input) return;
+      if (name === 'value') { this._input.value = this.getAttribute('value') ?? ''; this._syncFormValue(); return; }
+      if (name === 'wide') { this._syncWide(); return; }
+      this._forward(name);
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      this.setFormValue(this._input.value);
+      this.syncValidityFrom(this._input);
+    }
+
+    resetValue() {
+      this._input.value = this.getAttribute('value') ?? '';
+      this._syncFormValue();
+    }
+
+    restoreValue(state) {
+      if (typeof state === 'string') { this._input.value = state; this._syncFormValue(); }
+    }
+
+    onFormDisabled(disabled) {
+      this._input.disabled = disabled || this.getBoolAttr('disabled');
+    }
+
+    focus(options) { this._input?.focus(options); }
+    blur() { this._input?.blur(); }
+    select() { this._input?.select(); }
+
+    get value() { return this._input?.value ?? (this.getAttribute('value') ?? ''); }
+    set value(v) {
+      if (this._input) { this._input.value = v ?? ''; this._syncFormValue(); }
+      else this.setAttribute('value', v ?? '');
+    }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get type() { return this.getAttribute('type') || 'text'; }
+    set type(v) { this.setAttribute('type', v); }
+    get placeholder() { return this.getAttribute('placeholder'); }
+    set placeholder(v) { this.setAttribute('placeholder', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get required() { return this.getBoolAttr('required'); }
+    set required(v) { this.setBoolAttr('required', v); }
+    get readonly() { return this.getBoolAttr('readonly'); }
+    set readonly(v) { this.setBoolAttr('readonly', v); }
+    get wide() { return this.getBoolAttr('wide'); }
+    set wide(v) { this.setBoolAttr('wide', v); }
+  }
+
+  customElements.define('nk-input', NkInput);
+
+  // <nk-textarea name="bio" rows="3" wide>Text</nk-textarea>  →  <textarea class="nk-textarea wide">
+  // The initial value is the `value` attribute, or the element's text content.
+  const FORWARDED$1 = ['placeholder', 'name', 'rows', 'maxlength', 'minlength', 'autocomplete', 'aria-label'];
+  const BOOLEANS = ['required', 'disabled', 'readonly'];
+
+  class NkTextarea extends NkFormElement {
+    static get observedAttributes() { return ['value', 'wide', ...FORWARDED$1, ...BOOLEANS]; }
+
+    render() {
+      this._input = this.createElement('textarea', ['nk-textarea']);
+      for (const attr of [...FORWARDED$1, ...BOOLEANS]) this._forward(attr);
+      this._input.value = this.getAttribute('value') ?? this.textContent.trim();
+      this._syncWide();
+      this._wrapper.appendChild(this._input);
+      this._syncFormValue();
+    }
+
+    _forward(attr) {
+      if (BOOLEANS.includes(attr)) {
+        this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+        return;
+      }
+      const v = this.getAttribute(attr);
+      if (v === null) this._input.removeAttribute(attr);
+      else this._input.setAttribute(attr, v);
+    }
+
+    _syncWide() { this._input.classList.toggle('wide', this.getBoolAttr('wide')); }
+
+    setupEvents() {
+      this._onInput = () => {
+        this._syncFormValue();
+        this.emit('nk-input', { value: this._input.value, name: this.name });
+      };
+      this._onChange = () => {
+        this._syncFormValue();
+        this.emit('nk-change', { value: this._input.value, name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._input.addEventListener('input', this._onInput);
+      this._input.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('input', this._onInput);
+      this._input?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._input) return;
+      if (name === 'value') { this._input.value = this.getAttribute('value') ?? ''; this._syncFormValue(); return; }
+      if (name === 'wide') { this._syncWide(); return; }
+      this._forward(name);
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      this.setFormValue(this._input.value);
+      this.syncValidityFrom(this._input);
+    }
+
+    resetValue() {
+      this._input.value = this.getAttribute('value') ?? this.textContent.trim();
+      this._syncFormValue();
+    }
+
+    restoreValue(state) {
+      if (typeof state === 'string') { this._input.value = state; this._syncFormValue(); }
+    }
+
+    onFormDisabled(disabled) { this._input.disabled = disabled || this.getBoolAttr('disabled'); }
+
+    focus(options) { this._input?.focus(options); }
+    blur() { this._input?.blur(); }
+
+    get value() { return this._input?.value ?? (this.getAttribute('value') ?? ''); }
+    set value(v) {
+      if (this._input) { this._input.value = v ?? ''; this._syncFormValue(); }
+      else this.setAttribute('value', v ?? '');
+    }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get required() { return this.getBoolAttr('required'); }
+    set required(v) { this.setBoolAttr('required', v); }
+    get wide() { return this.getBoolAttr('wide'); }
+    set wide(v) { this.setBoolAttr('wide', v); }
+  }
+
+  customElements.define('nk-textarea', NkTextarea);
+
+  // <nk-select name="role" value="editor">
+  //   <option value="viewer">Viewer</option>
+  //   <option value="editor">Editor</option>
+  // </nk-select>
+  //
+  // The light-DOM <option>s are copied into the shadow <select>. A
+  // MutationObserver keeps the copy in step when a framework swaps them; the
+  // empty string is a valid value; the live selection survives a rebuild.
+  class NkSelect extends NkFormElement {
+    static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'aria-label']; }
+    static get observesLightDom() { return true; }
+
+    render() {
+      this._select = this.createElement('select', ['nk-select']);
+      this._forwardAll();
+      this._wrapper.appendChild(this._select);
+      this._defaultValue = this.getAttribute('value');
+      // Children may not be parsed yet when connectedCallback runs.
+      this.projectLightDom();
+      requestAnimationFrame(() => this.projectLightDom());
+    }
+
+    _forwardAll() {
+      const name = this.getAttribute('name');
+      name ? this._select.setAttribute('name', name) : this._select.removeAttribute('name');
+      const label = this.getAttribute('aria-label');
+      label ? this._select.setAttribute('aria-label', label) : this._select.removeAttribute('aria-label');
+      this._select.disabled = this.getBoolAttr('disabled');
+      this._select.required = this.getBoolAttr('required');
+      this._select.classList.toggle('compact', this.getBoolAttr('compact'));
+    }
+
+    projectLightDom() {
+      if (!this._select) return;
+      // The options are pure data — the clones carry no listeners — so skipping
+      // an unchanged rebuild is safe, and it keeps an open dropdown from
+      // snapping shut on light-DOM churn elsewhere.
+      const nodes = [...this.children].filter(n => n.matches('option, optgroup'));
+      const signature = nodes.map(n => n.outerHTML).join('');
+      if (signature === this._optionSignature) return;
+      this._optionSignature = signature;
+
+      // innerHTML = '' drops the selection; remember it first. selectedIndex -1
+      // means "nothing selected", which is not an option whose value is "".
+      const previous = this._select.selectedIndex >= 0 ? this._select.value : null;
+
+      this._select.innerHTML = '';
+      for (const node of nodes) this._select.appendChild(node.cloneNode(true));
+
+      // Keep the live selection when it survived; otherwise the value attribute;
+      // otherwise the browser default (first option / `selected`).
+      if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+      this._syncFormValue();
+    }
+
+    /** Selects `value` if an option carries it, and reports whether it did. */
+    _applyValue(value) {
+      if (value === null) return false;
+      if (![...this._select.options].some(o => o.value === value)) return false;
+      this._select.value = value;
+      return true;
+    }
+
+    setupEvents() {
+      this._onChange = () => {
+        this._syncFormValue();
+        this.emit('nk-change', { value: this._select.value, name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._select.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._select?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._select) return;
+      if (name === 'value') {
+        this._applyValue(this.getAttribute('value'));
+        this._syncFormValue();
+        return;
+      }
+      this._forwardAll();
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      this.setFormValue(this._select.value);
+      this.syncValidityFrom(this._select);
+    }
+
+    resetValue() {
+      if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
+      this._syncFormValue();
+    }
+
+    restoreValue(state) {
+      if (typeof state === 'string') { this._applyValue(state); this._syncFormValue(); }
+    }
+
+    onFormDisabled(disabled) { this._select.disabled = disabled || this.getBoolAttr('disabled'); }
+
+    focus(options) { this._select?.focus(options); }
+
+    get value() { return this._select?.value ?? ''; }
+    set value(v) {
+      if (this._select) { this._select.value = v; this._syncFormValue(); }
+      else this.setAttribute('value', v);
+    }
+    get selectedIndex() { return this._select?.selectedIndex ?? -1; }
+    get options() { return this._select?.options ?? []; }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get required() { return this.getBoolAttr('required'); }
+    set required(v) { this.setBoolAttr('required', v); }
+    get compact() { return this.getBoolAttr('compact'); }
+    set compact(v) { this.setBoolAttr('compact', v); }
+  }
+
+  customElements.define('nk-select', NkSelect);
+
+  // <nk-switch name="notify" checked></nk-switch>
+  // → <button class="nk-switch" role="switch" aria-checked="true">
+  // notionkit.css styles the state through [aria-checked]; the toggling is here.
+  class NkSwitch extends NkFormElement {
+    static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'label']; }
+
+    render() {
+      this._btn = this.createElement('button', ['nk-switch'], { type: 'button', role: 'switch' });
+      this._defaultChecked = this.getBoolAttr('checked');
+      this._apply();
+      this._wrapper.appendChild(this._btn);
+      this._syncFormValue();
+    }
+
+    _apply() {
+      this._btn.setAttribute('aria-checked', this.getBoolAttr('checked') ? 'true' : 'false');
+      this._btn.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      const label = this.getAttribute('label');
+      label ? this._btn.setAttribute('aria-label', label) : this._btn.removeAttribute('aria-label');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.toggle();
+      this._btn.addEventListener('click', this._onClick);
+    }
+
+    teardownEvents() {
+      this._btn?.removeEventListener('click', this._onClick);
+    }
+
+    toggle() {
+      if (this.getBoolAttr('disabled') || this._formDisabled) return;
+      this.checked = !this.checked;
+      this.emit('nk-change', { checked: this.checked, value: this.getAttribute('value') || 'on', name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    onAttributeChanged() {
+      if (!this._btn) return;
+      this._apply();
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      const val = this.getAttribute('value') || 'on';
+      this.setFormValue(this.getBoolAttr('checked') ? val : null, this.getBoolAttr('checked') ? 'checked' : 'unchecked');
+    }
+
+    resetValue() { this.setBoolAttr('checked', this._defaultChecked); }
+    restoreValue(state) { if (state === 'checked' || state === 'unchecked') this.setBoolAttr('checked', state === 'checked'); }
+    onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+    focus(options) { this._btn?.focus(options); }
+
+    get checked() { return this.getBoolAttr('checked'); }
+    set checked(v) { this.setBoolAttr('checked', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get value() { return this.getAttribute('value') || 'on'; }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-switch', NkSwitch);
+
+  // <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
+  // → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
+  class NkCheck extends NkFormElement {
+    static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'indeterminate', 'required']; }
+
+    render() {
+      const label = this.createElement('label', ['nk-check']);
+      this._input = this.createElement('input', [], { type: 'checkbox' });
+      this._apply();
+      this._defaultChecked = this.getBoolAttr('checked');
+      label.appendChild(this._input);
+      label.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(label);
+      this._syncFormValue();
+    }
+
+    _apply() {
+      this._input.checked = this.getBoolAttr('checked');
+      this._input.indeterminate = this.getBoolAttr('indeterminate');
+      this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      this._input.required = this.getBoolAttr('required');
+      const name = this.getAttribute('name');
+      name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
+      this._input.value = this.getAttribute('value') || 'on';
+    }
+
+    setupEvents() {
+      this._onChange = () => {
+        this._syncing = true;
+        this.setBoolAttr('checked', this._input.checked);
+        this.removeAttribute('indeterminate');
+        this._syncing = false;
+        this._syncFormValue();
+        this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._input.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged() {
+      if (this._syncing || !this._input) return;
+      this._apply();
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      this.setFormValue(this._input.checked ? this._input.value : null, this._input.checked ? 'checked' : 'unchecked');
+      this.syncValidityFrom(this._input);
+    }
+
+    resetValue() { this.setBoolAttr('checked', this._defaultChecked); }
+    restoreValue(state) { if (state === 'checked' || state === 'unchecked') this.setBoolAttr('checked', state === 'checked'); }
+    onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+    focus(options) { this._input?.focus(options); }
+
+    get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+    set checked(v) { this.setBoolAttr('checked', v); }
+    get indeterminate() { return this.getBoolAttr('indeterminate'); }
+    set indeterminate(v) { this.setBoolAttr('indeterminate', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get value() { return this.getAttribute('value') || 'on'; }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-check', NkCheck);
+
+  // <nk-radio name="style" value="concise" checked>Concise</nk-radio>
+  // → <label class="nk-check"><input type="radio"> Concise</label>
+  //
+  // ── Grouping ──
+  // Every <nk-radio> keeps its <input type="radio"> in its own shadow root, and
+  // native radio grouping works per tree — it does not reach across shadow
+  // boundaries. Two <nk-radio name="x"> would therefore both stay checked. So
+  // the group is kept here, following the native definition: same `name`,
+  // same containing tree, same form owner. One tab stop per group, arrow keys
+  // move within it (wrapping, skipping disabled), and select as they go.
+
+  const ARROW_KEYS = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+
+  /** Form owner, also for a peer that has not been upgraded yet. */
+  function ownerForm(el) {
+    return (el.form !== undefined ? el.form : el.closest('form')) ?? null;
+  }
+
+  /** Only the selected radio is a tab stop; arrow keys move within the group. */
+  function syncGroupTabIndex(group) {
+    const enabled = group.filter(el => !el.disabled);
+    if (!enabled.length) return;
+    const focusable = enabled.find(el => el.checked) || enabled[0];
+    for (const el of group) {
+      if (el._input) el._input.tabIndex = el === focusable ? 0 : -1;
+    }
+  }
+
+  class NkRadio extends NkFormElement {
+    static get observedAttributes() { return ['checked', 'disabled', 'name', 'value', 'required']; }
+
+    render() {
+      const label = this.createElement('label', ['nk-check']);
+      this._input = this.createElement('input', [], { type: 'radio' });
+      // `name` on the inner input is inert (it is alone in its tree); it stays
+      // as a devtools courtesy. The group above is the real one.
+      this._apply();
+      this._defaultChecked = this.getBoolAttr('checked');
+      label.appendChild(this._input);
+      label.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(label);
+      this._syncFormValue();
+      // Elements upgrade in document order, so the last `checked` one in the
+      // markup wins the group — the same outcome native radios produce.
+      if (this._input.checked) this._uncheckPeers();
+      syncGroupTabIndex(this._group());
+    }
+
+    _apply() {
+      this._input.checked = this.getBoolAttr('checked');
+      this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      this._input.required = this.getBoolAttr('required');
+      const name = this.getAttribute('name');
+      name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
+      this._input.value = this.getAttribute('value') || '';
+    }
+
+    setupEvents() {
+      this._onChange = () => this._applyChange();
+      this._onKeyDown = (e) => {
+        const dir = ARROW_KEYS[e.key];
+        if (!dir || e.ctrlKey || e.metaKey || e.altKey) return;
+        const group = this._group().filter(el => !el.disabled);
+        if (group.length < 2) return;
+        e.preventDefault();
+        const next = group[(group.indexOf(this) + dir + group.length) % group.length];
+        next._input.focus();
+        next._input.checked = true;
+        next._applyChange();
+      };
+      this._input.addEventListener('change', this._onChange);
+      this._input.addEventListener('keydown', this._onKeyDown);
+      syncGroupTabIndex(this._group());
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('change', this._onChange);
+      this._input?.removeEventListener('keydown', this._onKeyDown);
+    }
+
+    /** Shared by user change and arrow-key selection, so both look identical. */
+    _applyChange() {
+      if (this._input.checked) this._uncheckPeers();
+      this._syncing = true;
+      this.setBoolAttr('checked', this._input.checked);
+      this._syncing = false;
+      this._syncFormValue();
+      syncGroupTabIndex(this._group());
+      this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    /** Same name, same tree, same form owner — in document order, this element included. */
+    _group() {
+      const name = this.getAttribute('name');
+      const root = this.getRootNode();
+      if (!name || typeof root?.querySelectorAll !== 'function') return [this];
+      const form = ownerForm(this);
+      return [...root.querySelectorAll('nk-radio')].filter(
+        el => el.getAttribute('name') === name && ownerForm(el) === form
+      );
+    }
+
+    _uncheckPeers() {
+      for (const el of this._group()) {
+        if (el !== this && el.checked) el.checked = false;
+      }
+    }
+
+    onAttributeChanged(name) {
+      if (this._syncing || !this._input) return;
+      this._apply();
+      if (name === 'checked' && this._input.checked) this._uncheckPeers();
+      this._syncFormValue();
+      syncGroupTabIndex(this._group());
+    }
+
+    _syncFormValue() {
+      const val = this.getAttribute('value') || '';
+      this.setFormValue(this._input.checked ? val : null, this._input.checked ? 'checked' : 'unchecked');
+      this.syncValidityFrom(this._input);
+    }
+
+    resetValue() {
+      this._input.checked = this._defaultChecked;
+      this.setBoolAttr('checked', this._defaultChecked);
+      this._syncFormValue();
+      syncGroupTabIndex(this._group());
+    }
+
+    restoreValue(state) {
+      if (state === 'checked') this.checked = true;
+    }
+
+    onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); syncGroupTabIndex(this._group()); }
+
+    focus(options) { this._input?.focus(options); }
+
+    get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+    set checked(v) {
+      if (this._input) this._input.checked = v;
+      // Also covers the case where the attribute is already present, so
+      // setBoolAttr stays silent and onAttributeChanged never runs.
+      if (v) this._uncheckPeers();
+      this.setBoolAttr('checked', v);
+      if (this._input) { this._syncFormValue(); syncGroupTabIndex(this._group()); }
+    }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get value() { return this.getAttribute('value') || ''; }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-radio', NkRadio);
+
+  // <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
+  // → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>
+  const FORWARDED = ['name', 'min', 'max', 'step', 'aria-label'];
+
+  class NkSlider extends NkFormElement {
+    static get observedAttributes() { return ['value', 'disabled', 'show-value', 'unit', ...FORWARDED]; }
+
+    render() {
+      this._input = this.createElement('input', ['nk-slider'], { type: 'range' });
+      this._out = this.createElement('div', ['nk-slider-value']);
+      this._apply();
+      this._input.value = this.getAttribute('value') ?? this._input.value;
+      this._defaultValue = this._input.value;
+      this._wrapper.appendChild(this._input);
+      this._wrapper.appendChild(this._out);
+      this._syncOut();
+      this._syncFormValue();
+    }
+
+    _apply() {
+      for (const attr of FORWARDED) {
+        const v = this.getAttribute(attr);
+        v === null ? this._input.removeAttribute(attr) : this._input.setAttribute(attr, v);
+      }
+      this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      this._out.style.display = this.getBoolAttr('show-value') ? '' : 'none';
+    }
+
+    _syncOut() {
+      this._out.textContent = `${this._input.value}${this.getAttribute('unit') || ''}`;
+    }
+
+    setupEvents() {
+      this._onInput = () => {
+        this._syncOut();
+        this._syncFormValue();
+        this.emit('nk-input', { value: Number(this._input.value), name: this.name });
+      };
+      this._onChange = () => {
+        this._syncFormValue();
+        this.emit('nk-change', { value: Number(this._input.value), name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._input.addEventListener('input', this._onInput);
+      this._input.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('input', this._onInput);
+      this._input?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._input) return;
+      if (name === 'value') this._input.value = this.getAttribute('value') ?? '';
+      else this._apply();
+      this._syncOut();
+      this._syncFormValue();
+    }
+
+    _syncFormValue() { this.setFormValue(this._input.value); }
+    resetValue() { this._input.value = this._defaultValue; this._syncOut(); this._syncFormValue(); }
+    restoreValue(state) { if (typeof state === 'string') { this._input.value = state; this._syncOut(); this._syncFormValue(); } }
+    onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+    focus(options) { this._input?.focus(options); }
+
+    get value() { return Number(this._input?.value ?? this.getAttribute('value')); }
+    set value(v) {
+      if (this._input) { this._input.value = v; this._syncOut(); this._syncFormValue(); }
+      else this.setAttribute('value', v);
+    }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get showValue() { return this.getBoolAttr('show-value'); }
+    set showValue(v) { this.setBoolAttr('show-value', v); }
+  }
+
+  customElements.define('nk-slider', NkSlider);
+
+  // <nk-field label="Display name" desc="Shown next to your comments">
+  //   <nk-input value="Marcel"></nk-input>
+  // </nk-field>
+  // → <div class="nk-field"><div><div class="f-label">…</div><div class="f-desc">…</div></div>
+  //                         <div class="f-control">…</div></div>
+  // Rich label / description content goes through slot="label" / slot="desc"
+  // (twins `.nk-field ::slotted([slot="label"])` etc. in notionkit.css).
+  class NkField extends NkElement {
+    static get observedAttributes() { return ['label', 'desc']; }
+
+    render() {
+      const field = this.createElement('div', ['nk-field']);
+      const text = document.createElement('div');
+      this._label = this.createElement('div', ['f-label']);
+      const labelSlot = this.createElement('slot', [], { name: 'label' });
+      labelSlot.appendChild(this._label);
+      this._desc = this.createElement('div', ['f-desc']);
+      const descSlot = this.createElement('slot', [], { name: 'desc' });
+      descSlot.appendChild(this._desc);
+      text.appendChild(labelSlot);
+      text.appendChild(descSlot);
+      const control = this.createElement('div', ['f-control']);
+      control.appendChild(document.createElement('slot'));
+      field.appendChild(text);
+      field.appendChild(control);
+      this._wrapper.appendChild(field);
+      this._sync();
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    _sync() {
+      if (!this._label) return;
+      this._label.textContent = this.getAttribute('label') || '';
+      const desc = this.getAttribute('desc');
+      this._desc.textContent = desc || '';
+      this._desc.style.display = desc ? '' : 'none';
+    }
+
+    get label() { return this.getAttribute('label'); }
+    set label(v) { this.setAttribute('label', v); }
+    get desc() { return this.getAttribute('desc'); }
+    set desc(v) { v == null ? this.removeAttribute('desc') : this.setAttribute('desc', v); }
+  }
+
+  customElements.define('nk-field', NkField);
+
+  // <nk-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue"
+  const COLORS$1 = ['blue', 'green', 'orange', 'purple'];
+
+  class NkTag extends NkElement {
+    static get observedAttributes() { return ['color']; }
+
+    render() {
+      this._tag = this.createElement('span', this._computeClasses());
+      this._tag.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._tag);
+    }
+
+    onAttributeChanged() {
+      if (this._tag) this._tag.className = this._computeClasses().join(' ');
+    }
+
+    _computeClasses() {
+      const classes = ['nk-tag'];
+      const color = this.getAttribute('color');
+      if (COLORS$1.includes(color)) classes.push(color);
+      return classes;
+    }
+
+    get color() { return this.getAttribute('color'); }
+    set color(v) { v ? this.setAttribute('color', v) : this.removeAttribute('color'); }
+  }
+
+  customElements.define('nk-tag', NkTag);
+
+  // <nk-progress value="72" label="72%"></nk-progress>
+  // The bar is `.nk-progress > i` — a child combinator, so both nodes live here.
+  class NkProgress extends NkElement {
+    static get observedAttributes() { return ['value', 'max', 'label']; }
+
+    render() {
+      this._bar = this.createElement('span', ['nk-progress'], { role: 'progressbar' });
+      this._fill = document.createElement('i');
+      this._bar.appendChild(this._fill);
+      this._label = this.createElement('span', ['nk-progress-label']);
+      this._wrapper.appendChild(this._bar);
+      this._wrapper.appendChild(this._label);
+      this._sync();
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    _sync() {
+      if (!this._bar) return;
+      const max = Number(this.getAttribute('max')) || 100;
+      const value = Math.min(max, Math.max(0, Number(this.getAttribute('value')) || 0));
+      this._fill.style.width = `${(value / max) * 100}%`;
+      this._bar.setAttribute('aria-valuenow', value);
+      this._bar.setAttribute('aria-valuemin', 0);
+      this._bar.setAttribute('aria-valuemax', max);
+      const label = this.getAttribute('label');
+      this._label.textContent = label ?? '';
+      this._label.style.display = label === null ? 'none' : '';
+    }
+
+    get value() { return Number(this.getAttribute('value')) || 0; }
+    set value(v) { this.setAttribute('value', v); }
+    get max() { return Number(this.getAttribute('max')) || 100; }
+    set max(v) { this.setAttribute('max', v); }
+    get label() { return this.getAttribute('label'); }
+    set label(v) { v == null ? this.removeAttribute('label') : this.setAttribute('label', v); }
+  }
+
+  customElements.define('nk-progress', NkProgress);
+
+  // <nk-callout icon="💡">text</nk-callout>
+  // <nk-callout><span slot="icon">📌</span>text</nk-callout>
+  // The .c-icon rule has ::slotted(.c-icon) / ::slotted([slot="icon"]) twins in
+  // notionkit.css – those size an icon passed in from the light DOM. Pass the
+  // icon node itself, never wrapped: ::slotted() only matches the assigned node.
+  class NkCallout extends NkElement {
+    static get observedAttributes() { return ['icon']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-callout']);
+      this._icon = this.createElement('span', ['c-icon']);
+      const iconSlot = this.createElement('slot', [], { name: 'icon' });
+      iconSlot.appendChild(this._icon);
+      const body = document.createElement('div');
+      body.appendChild(document.createElement('slot'));
+      this._box.appendChild(iconSlot);
+      this._box.appendChild(body);
+      this._wrapper.appendChild(this._box);
+      this._syncIcon();
+    }
+
+    onAttributeChanged() { this._syncIcon(); }
+
+    _syncIcon() {
+      if (this._icon) this._icon.textContent = this.getAttribute('icon') || '💡';
+    }
+
+    get icon() { return this.getAttribute('icon'); }
+    set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+  }
+
+  customElements.define('nk-callout', NkCallout);
+
+  // <nk-divider></nk-divider>  →  <hr class="nk-divider">
+  class NkDivider extends NkElement {
+    render() {
+      this._wrapper.appendChild(this.createElement('hr', ['nk-divider']));
+    }
+  }
+
+  customElements.define('nk-divider', NkDivider);
+
+  // <nk-heading level="2">Section</nk-heading>  →  <h2 class="nk-heading">
+  // The heading level is real markup (h1–h4), so the outline stays honest.
+  class NkHeading extends NkElement {
+    static get observedAttributes() { return ['level']; }
+
+    render() {
+      this._build();
+    }
+
+    _build() {
+      const level = Math.min(4, Math.max(1, Number(this.getAttribute('level')) || 2));
+      const h = this.createElement(`h${level}`, ['nk-heading']);
+      h.appendChild(document.createElement('slot'));
+      if (this._heading) this._heading.replaceWith(h);
+      else this._wrapper.appendChild(h);
+      this._heading = h;
+    }
+
+    onAttributeChanged() { this._build(); }
+
+    get level() { return Number(this.getAttribute('level')) || 2; }
+    set level(v) { this.setAttribute('level', v); }
+  }
+
+  customElements.define('nk-heading', NkHeading);
+
+  // <nk-toggle label="Details" open>Body…</nk-toggle>
+  // → <details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">…</div></details>
+  // The summary marker is a pseudo-element and cannot be styled on slotted
+  // content, so the summary is rendered here (label attribute or slot="label").
+  class NkToggle extends NkElement {
+    static get observedAttributes() { return ['label', 'open']; }
+
+    render() {
+      this._details = this.createElement('details', ['nk-toggle']);
+      const summary = document.createElement('summary');
+      this._label = document.createElement('span');
+      const labelSlot = this.createElement('slot', [], { name: 'label' });
+      labelSlot.appendChild(this._label);
+      summary.appendChild(labelSlot);
+      const body = this.createElement('div', ['toggle-body']);
+      body.appendChild(document.createElement('slot'));
+      this._details.appendChild(summary);
+      this._details.appendChild(body);
+      this._details.open = this.getBoolAttr('open');
+      this._wrapper.appendChild(this._details);
+      this._sync();
+    }
+
+    setupEvents() {
+      this._onToggle = () => {
+        this._syncing = true;
+        this.setBoolAttr('open', this._details.open);
+        this._syncing = false;
+        this.emit('nk-toggle', { open: this._details.open });
+      };
+      this._details.addEventListener('toggle', this._onToggle);
+    }
+
+    teardownEvents() {
+      this._details?.removeEventListener('toggle', this._onToggle);
+    }
+
+    onAttributeChanged(name) {
+      if (!this._details) return;
+      if (name === 'open') { if (!this._syncing) this._details.open = this.getBoolAttr('open'); return; }
+      this._sync();
+    }
+
+    _sync() { this._label.textContent = this.getAttribute('label') || ''; }
+
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get label() { return this.getAttribute('label'); }
+    set label(v) { this.setAttribute('label', v); }
+  }
+
+  customElements.define('nk-toggle', NkToggle);
+
+  // <nk-todo name="task" value="1" checked>Write the docs</nk-todo>
+  // → <label class="nk-todo"><input type="checkbox"><span>Write the docs</span></label>
+  // `.nk-todo input:checked + span` strikes the text through — both siblings
+  // are rendered here so the combinator works; the text is slotted into <span>.
+  class NkTodo extends NkFormElement {
+    static get observedAttributes() { return ['checked', 'disabled', 'name', 'value']; }
+
+    render() {
+      const label = this.createElement('label', ['nk-todo']);
+      this._input = this.createElement('input', [], { type: 'checkbox' });
+      this._apply();
+      this._defaultChecked = this.getBoolAttr('checked');
+      const text = document.createElement('span');
+      text.appendChild(document.createElement('slot'));
+      label.appendChild(this._input);
+      label.appendChild(text);
+      this._wrapper.appendChild(label);
+      this._syncFormValue();
+    }
+
+    _apply() {
+      this._input.checked = this.getBoolAttr('checked');
+      this._input.disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      const name = this.getAttribute('name');
+      name ? this._input.setAttribute('name', name) : this._input.removeAttribute('name');
+      this._input.value = this.getAttribute('value') || 'on';
+    }
+
+    setupEvents() {
+      this._onChange = () => {
+        this._syncing = true;
+        this.setBoolAttr('checked', this._input.checked);
+        this._syncing = false;
+        this._syncFormValue();
+        this.emit('nk-change', { checked: this._input.checked, value: this._input.value, name: this.name });
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      };
+      this._input.addEventListener('change', this._onChange);
+    }
+
+    teardownEvents() {
+      this._input?.removeEventListener('change', this._onChange);
+    }
+
+    onAttributeChanged() {
+      if (this._syncing || !this._input) return;
+      this._apply();
+      this._syncFormValue();
+    }
+
+    _syncFormValue() {
+      this.setFormValue(this._input.checked ? this._input.value : null, this._input.checked ? 'checked' : 'unchecked');
+    }
+
+    resetValue() { this.setBoolAttr('checked', this._defaultChecked); }
+    restoreValue(state) { if (state === 'checked' || state === 'unchecked') this.setBoolAttr('checked', state === 'checked'); }
+    onFormDisabled(disabled) { this._formDisabled = disabled; this._apply(); }
+
+    get checked() { return this._input?.checked ?? this.getBoolAttr('checked'); }
+    set checked(v) { this.setBoolAttr('checked', v); }
+    get disabled() { return this.getBoolAttr('disabled'); }
+    set disabled(v) { this.setBoolAttr('disabled', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get value() { return this.getAttribute('value') || 'on'; }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-todo', NkTodo);
+
+  // <nk-kbd>⌘</nk-kbd> <nk-kbd>K</nk-kbd>  →  <kbd class="nk-kbd">
+  class NkKbd extends NkElement {
+
+    render() {
+      const kbd = this.createElement('kbd', ['nk-kbd']);
+      kbd.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(kbd);
+    }
+  }
+
+  customElements.define('nk-kbd', NkKbd);
+
+  // Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
+  // Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party
+  // highlighter, no other languages. Anything that is not HTML is escaped only.
+  function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function highlightHtml(source) {
+    return escapeHtml(source).replace(/&lt;(\/?)([a-zA-Z][\w-]*)([^&]*?)(\/?)&gt;/g, (m, close, tag, attrs, self) => {
+      const attrHtml = attrs.replace(/([\w-]+)(=)("[^"]*"|'[^']*')?/g,
+        (a, name, eq, val) => `<span class="attr">${name}</span>${eq}${val ?? ''}`);
+      return `&lt;${close}<span class="tag">${tag}</span>${attrHtml}${self}&gt;`;
+    });
+  }
+
+  // <nk-code lang="html">&lt;div class="nk-btn"&gt;…</nk-code>
+  // The block keeps whatever whitespace it is given (white-space: pre). Text
+  // content is slotted as-is; add `highlight` to colour HTML tags/attributes,
+  // which copies the text into the shadow tree (light DOM is then ignored).
+  class NkCode extends NkElement {
+    static get observedAttributes() { return ['lang', 'highlight']; }
+    static get observesLightDom() { return true; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-code']);
+      this._lang = this.createElement('span', ['lang']);
+      this._slot = document.createElement('slot');
+      this._pre = this.createElement('span', ['hl']);
+      this._box.appendChild(this._lang);
+      this._box.appendChild(this._slot);
+      this._box.appendChild(this._pre);
+      this._wrapper.appendChild(this._box);
+      this._sync();
+      this.projectLightDom();
+    }
+
+    onAttributeChanged() { this._sync(); this.projectLightDom(); }
+
+    _sync() {
+      if (!this._lang) return;
+      const lang = this.getAttribute('lang');
+      this._lang.textContent = lang || '';
+      this._lang.style.display = lang ? '' : 'none';
+    }
+
+    projectLightDom() {
+      if (!this._pre) return;
+      const highlight = this.hasAttribute('highlight');
+      this._slot.style.display = highlight ? 'none' : '';
+      this._pre.style.display = highlight ? '' : 'none';
+      if (!highlight) return;
+      const text = this.textContent.replace(/^\n/, '');
+      if (text === this._lastText) return;
+      this._lastText = text;
+      this._pre.innerHTML = highlightHtml(text);
+    }
+
+    get lang() { return this.getAttribute('lang'); }
+    set lang(v) { v == null ? this.removeAttribute('lang') : this.setAttribute('lang', v); }
+  }
+
+  customElements.define('nk-code', NkCode);
+
+  // <nk-quote cite="Ada Lovelace">The Analytical Engine weaves…</nk-quote>
+  // .q-cite has no ::slotted() twin, so the citation is rendered here.
+  class NkQuote extends NkElement {
+    static get observedAttributes() { return ['cite']; }
+
+    render() {
+      this._quote = this.createElement('blockquote', ['nk-quote']);
+      this._quote.appendChild(document.createElement('slot'));
+      this._cite = this.createElement('cite', ['q-cite']);
+      this._quote.appendChild(this._cite);
+      this._wrapper.appendChild(this._quote);
+      this._sync();
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    _sync() {
+      if (!this._cite) return;
+      const cite = this.getAttribute('cite');
+      this._cite.textContent = cite || '';
+      this._cite.style.display = cite ? '' : 'none';
+    }
+
+    get cite() { return this.getAttribute('cite'); }
+    set cite(v) { v == null ? this.removeAttribute('cite') : this.setAttribute('cite', v); }
+  }
+
+  customElements.define('nk-quote', NkQuote);
+
+  // <nk-app>
+  //   <nk-sidebar slot="sidebar">…</nk-sidebar>
+  //   <nk-topbar>…</nk-topbar>
+  //   <nk-page>…</nk-page>
+  // </nk-app>
+  // → <div class="nk-app"><aside class="nk-sidebar">…</aside><main class="nk-main">…</main></div>
+  // The outermost element of a workspace app: a full-height flex row.
+  class NkApp extends NkElement {
+    render() {
+      const app = this.createElement('div', ['nk-app']);
+      app.appendChild(this.createElement('slot', [], { name: 'sidebar' }));
+      const main = this.createElement('main', ['nk-main']);
+      main.appendChild(document.createElement('slot'));
+      app.appendChild(main);
+      this._wrapper.appendChild(app);
+    }
+  }
+
+  customElements.define('nk-app', NkApp);
+
+  // <nk-sidebar slot="sidebar">
+  //   <nk-workspace-switcher slot="workspace" name="Acme"></nk-workspace-switcher>
+  //   <nk-tree>…</nk-tree>
+  //   <nk-tree-item slot="footer" icon="⚙️">Settings</nk-tree-item>
+  // </nk-sidebar>
+  // → <aside class="nk-sidebar"><div class="nk-workspace">…</div>
+  //     <div class="nk-sidebar-scroll">…</div><div class="nk-sidebar-footer">…</div></aside>
+  //
+  // The host is display:contents so the <aside> is a direct flex child of
+  // .nk-app, exactly like the class markup. Below 860px notionkit.css hides the
+  // aside; `open` brings it back as an off-canvas drawer (position only – the
+  // look is still the stylesheet's).
+  const drawerSheet = new CSSStyleSheet();
+  drawerSheet.replaceSync(`
+  @media (max-width: 860px) {
+    :host([open]) .nk-sidebar { display: flex; position: fixed; inset: 0 auto 0 0; z-index: 60; }
+    :host([open]) .nk-sidebar-backdrop { display: block; }
+  }
+  .nk-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 59; background: var(--nk-scrim-soft); }
+`);
+
+  class NkSidebar extends NkElement {
+    static get hostStyles() { return drawerSheet; }
+    static get observedAttributes() { return ['open']; }
+
+    render() {
+      this._backdrop = this.createElement('div', ['nk-sidebar-backdrop']);
+      this._aside = this.createElement('aside', ['nk-sidebar']);
+      this._aside.appendChild(this.createElement('slot', [], { name: 'workspace' }));
+      const scroll = this.createElement('div', ['nk-sidebar-scroll']);
+      scroll.appendChild(document.createElement('slot'));
+      this._aside.appendChild(scroll);
+      this._footer = this.createElement('div', ['nk-sidebar-footer']);
+      this._footerSlot = this.createElement('slot', [], { name: 'footer' });
+      this._footer.appendChild(this._footerSlot);
+      this._aside.appendChild(this._footer);
+      this._wrapper.appendChild(this._backdrop);
+      this._wrapper.appendChild(this._aside);
+      this._syncFooter();
+    }
+
+    _syncFooter() {
+      const nodes = this._footerSlot.assignedElements();
+      // The footer box carries padding and a border; only render it when used.
+      this._footer.style.display = nodes.length ? '' : 'none';
+      // Footer rows are 26px in the class version (.nk-sidebar-footer .nk-tree-item).
+      for (const el of nodes) if (el.localName === 'nk-tree-item') el.setAttribute('compact', '');
+    }
+
+    setupEvents() {
+      this._onSlot = () => this._syncFooter();
+      this._onBackdrop = () => this.close();
+      this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+      this._footerSlot.addEventListener('slotchange', this._onSlot);
+      this._backdrop.addEventListener('click', this._onBackdrop);
+      document.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._footerSlot?.removeEventListener('slotchange', this._onSlot);
+      this._backdrop?.removeEventListener('click', this._onBackdrop);
+      document.removeEventListener('keydown', this._onKey);
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    }
+
+    show() { this.setBoolAttr('open', true); }
+    close() { this.setBoolAttr('open', false); }
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+  }
+
+  customElements.define('nk-sidebar', NkSidebar);
+
+  // <nk-workspace-switcher slot="workspace" name="Acme" avatar="A">
+  //   <nk-menu slot="menu">…</nk-menu>
+  // </nk-workspace-switcher>
+  // → <div class="nk-workspace"><div class="avatar">A</div><span>Acme</span><span class="chev">⌄</span></div>
+  // A click toggles `open` and shows whatever sits in the menu slot below the
+  // row; clicking outside or pressing Escape closes it.
+  const menuSheet = new CSSStyleSheet();
+  menuSheet.replaceSync(`
+  .nk-ws-anchor { position: relative; }
+  .nk-ws-menu { display: none; position: absolute; left: 8px; top: calc(100% - 2px); z-index: 50; }
+  :host([open]) .nk-ws-menu { display: block; }
+`);
+
+  class NkWorkspaceSwitcher extends NkElement {
+    static get hostStyles() { return menuSheet; }
+    static get observedAttributes() { return ['name', 'avatar', 'open']; }
+
+    render() {
+      this._row = this.createElement('div', ['nk-workspace'], { role: 'button', tabindex: '0', 'aria-haspopup': 'menu' });
+      this._avatar = this.createElement('div', ['avatar']);
+      const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+      avatarSlot.appendChild(this._avatar);
+      this._name = document.createElement('span');
+      const chev = this.createElement('span', ['chev']);
+      chev.textContent = '⌄';
+      this._row.append(avatarSlot, this._name, chev);
+      this._menu = this.createElement('div', ['nk-ws-menu']);
+      this._menu.appendChild(this.createElement('slot', [], { name: 'menu' }));
+      const anchor = this.createElement('div', ['nk-ws-anchor']);
+      anchor.append(this._row, this._menu);
+      this._wrapper.appendChild(anchor);
+      this._sync();
+    }
+
+    _sync() {
+      const name = this.getAttribute('name') || '';
+      this._name.textContent = name;
+      this._avatar.textContent = this.getAttribute('avatar') || name.trim().charAt(0).toUpperCase();
+      this._row.setAttribute('aria-expanded', this.getBoolAttr('open') ? 'true' : 'false');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.toggle();
+      this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.toggle(); } };
+      this._onDocClick = (e) => { if (this.getBoolAttr('open') && !e.composedPath().includes(this)) this.close(); };
+      this._onDocKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+      this._onMenuSelect = () => this.close();
+      this._row.addEventListener('click', this._onClick);
+      this._row.addEventListener('keydown', this._onKey);
+      this._menu.addEventListener('nk-select', this._onMenuSelect);
+      document.addEventListener('click', this._onDocClick);
+      document.addEventListener('keydown', this._onDocKey);
+    }
+
+    teardownEvents() {
+      this._row?.removeEventListener('click', this._onClick);
+      this._row?.removeEventListener('keydown', this._onKey);
+      this._menu?.removeEventListener('nk-select', this._onMenuSelect);
+      document.removeEventListener('click', this._onDocClick);
+      document.removeEventListener('keydown', this._onDocKey);
+    }
+
+    onAttributeChanged(name) {
+      this._sync();
+      if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    }
+
+    show() { this.setBoolAttr('open', true); }
+    close() { this.setBoolAttr('open', false); }
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+  }
+
+  customElements.define('nk-workspace-switcher', NkWorkspaceSwitcher);
+
+  // <nk-section-label addable>Favourites</nk-section-label>
+  // → <div class="nk-section-label">Favourites <span class="plus">＋</span></div>
+  // The ＋ appears on hover (a hover-parent rule, so it lives in the same tree)
+  // and fires nk-action { action: 'add' }.
+  class NkSectionLabel extends NkElement {
+    static get observedAttributes() { return ['label', 'addable']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-section-label']);
+      this._text = document.createElement('span');
+      this._text.appendChild(document.createElement('slot'));
+      this._plus = this.createElement('span', ['plus'], { role: 'button', title: '+' });
+      this._plus.textContent = '＋';
+      this._box.append(this._text, this._plus);
+      this._wrapper.appendChild(this._box);
+      this._sync();
+    }
+
+    _sync() {
+      const label = this.getAttribute('label');
+      if (label !== null) this._text.textContent = label;
+      this._plus.style.display = this.getBoolAttr('addable') ? '' : 'none';
+    }
+
+    setupEvents() {
+      this._onPlus = (e) => { e.stopPropagation(); this.emit('nk-action', { action: 'add' }); };
+      this._plus.addEventListener('click', this._onPlus);
+    }
+
+    teardownEvents() { this._plus?.removeEventListener('click', this._onPlus); }
+
+    onAttributeChanged() { this._sync(); }
+
+    get addable() { return this.getBoolAttr('addable'); }
+    set addable(v) { this.setBoolAttr('addable', v); }
+  }
+
+  customElements.define('nk-section-label', NkSectionLabel);
+
+  // <nk-tree>
+  //   <nk-section-label addable>Favourites</nk-section-label>
+  //   <nk-tree-item icon="📊" open>Project overview
+  //     <nk-tree-item icon="🚀" active>NotionKit MVP</nk-tree-item>
+  //   </nk-tree-item>
+  // </nk-tree>
+  //
+  // A container for tree items: keeps a single `active` item (listening to
+  // nk-select from any depth), gives the group one tab stop with arrow-key
+  // navigation, and can render items from data:
+  //   tree.data = [{ label, icon, value, href, open, active, children: [...] }]
+  const KEYS$2 = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
+
+  class NkTree extends NkElement {
+    static get observedAttributes() { return ['manual']; }
+
+    render() {
+      const box = this.createElement('div', [], { role: 'tree' });
+      box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(box);
+      this._box = box;
+    }
+
+    /** Makes `item` the single active item (called by the item after nk-select was not cancelled). */
+    setActive(item) {
+      if (this.getBoolAttr('manual')) return;
+      for (const other of this.querySelectorAll('nk-tree-item[active]')) if (other !== item) other.removeAttribute('active');
+      item.setAttribute('active', '');
+      this._syncTabIndex(item);
+    }
+
+    setupEvents() {
+      this._onKey = (e) => {
+        if (!KEYS$2.has(e.key) || e.ctrlKey || e.metaKey || e.altKey) return;
+        const item = e.target.closest?.('nk-tree-item');
+        if (!item) return;
+        const visible = this.visibleItems();
+        const i = visible.indexOf(item);
+        if (i < 0) return;
+        let next = null;
+        switch (e.key) {
+          case 'ArrowDown': next = visible[i + 1]; break;
+          case 'ArrowUp': next = visible[i - 1]; break;
+          case 'Home': next = visible[0]; break;
+          case 'End': next = visible[visible.length - 1]; break;
+          case 'ArrowRight':
+            if (item.hasChildren && !item.open) item.open = true;
+            else if (item.hasChildren) next = item.querySelector('nk-tree-item');
+            break;
+          case 'ArrowLeft':
+            if (item.hasChildren && item.open) item.open = false;
+            else next = item.parentElement?.closest('nk-tree-item');
+            break;
+        }
+        e.preventDefault();
+        if (next) { this._syncTabIndex(next); next.focus(); }
+      };
+      this._onSlot = () => this._syncTabIndex();
+      this.addEventListener('keydown', this._onKey);
+      this._box.querySelector('slot').addEventListener('slotchange', this._onSlot);
+      this._syncTabIndex();
+    }
+
+    teardownEvents() {
+      this.removeEventListener('keydown', this._onKey);
+      this._box?.querySelector('slot').removeEventListener('slotchange', this._onSlot);
+    }
+
+    /** Items whose every ancestor item inside this tree is open – i.e. rendered. */
+    visibleItems() {
+      return [...this.querySelectorAll('nk-tree-item')].filter(item => {
+        for (let p = item.parentElement?.closest('nk-tree-item'); p && this.contains(p); p = p.parentElement?.closest('nk-tree-item')) {
+          if (!p.open) return false;
+        }
+        return true;
+      });
+    }
+
+    /** Items upgrade after the tree; each one asks for a resync once rendered. */
+    requestSync() {
+      if (this._syncQueued) return;
+      this._syncQueued = true;
+      queueMicrotask(() => { this._syncQueued = false; this._syncTabIndex(); });
+    }
+
+    _syncTabIndex(focusable) {
+      const items = [...this.querySelectorAll('nk-tree-item')];
+      if (!items.length) return;
+      const visible = this.visibleItems();
+      const target = focusable || visible.find(i => i.active) || visible[0];
+      // A method call, not a property write: assigning a property to an element
+      // that has not been upgraded yet would create an own property that shadows
+      // the accessor forever.
+      for (const item of items) item.setTabbable?.(item === target);
+    }
+
+    /** Renders items from data into the light DOM (replacing existing items). */
+    set data(list) {
+      this._data = list;
+      const build = (nodes) => nodes.map(n => {
+        const item = document.createElement('nk-tree-item');
+        if (n.icon) item.setAttribute('icon', n.icon);
+        if (n.value != null) item.setAttribute('value', n.value);
+        if (n.href) item.setAttribute('href', n.href);
+        if (n.open) item.setAttribute('open', '');
+        if (n.active) item.setAttribute('active', '');
+        item.append(document.createTextNode(n.label ?? ''), ...build(n.children || []));
+        return item;
+      });
+      for (const old of this.querySelectorAll(':scope > nk-tree-item')) old.remove();
+      this.append(...build(list || []));
+    }
+    get data() { return this._data; }
+
+    get activeItem() { return this.querySelector('nk-tree-item[active]'); }
+    get value() { return this.activeItem?.value ?? null; }
+  }
+
+  customElements.define('nk-tree', NkTree);
+
+  // <nk-tree-item icon="📊" value="overview" open>
+  //   Project overview
+  //   <nk-tree-item icon="🚀" value="mvp" active>NotionKit MVP</nk-tree-item>
+  // </nk-tree-item>
+  //
+  // → <div class="nk-tree-item active"><span class="nk-toggle-arrow open">▸</span>
+  //     <span class="icon">📊</span><span class="label">…</span>
+  //     <span class="actions"><span>＋</span><span>⋯</span></span></div>
+  //   <div class="nk-tree-children">…</div>
+  //
+  // Both halves – the row and the .nk-tree-children box that must be its next
+  // sibling – are rendered here. Slots are assigned manually: text becomes the
+  // label, nested <nk-tree-item>s become the children, `slot="icon"` /
+  // `slot="end"` nodes go where they say. The hover actions are shadow-internal
+  // (`.nk-tree-item:hover .actions` is a hover-parent rule) and report through
+  // nk-action.
+  class NkTreeItem extends NkElement {
+    static get slotAssignment() { return 'manual'; }
+    static get observedAttributes() { return ['label', 'icon', 'value', 'href', 'active', 'open', 'compact', 'no-actions']; }
+
+    render() {
+      this._row = this.createElement('div', ['nk-tree-item'], { role: 'treeitem', tabindex: '-1' });
+      this._arrow = this.createElement('span', ['nk-toggle-arrow'], { 'aria-hidden': 'true' });
+      this._arrow.textContent = '▸';
+      this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+      this._icon = this.createElement('span', ['icon']);
+      this._iconSlot.appendChild(this._icon);
+      this._label = this.createElement('span', ['label']);
+      this._labelSlot = this.createElement('slot', [], { name: 'label' });
+      this._labelText = document.createTextNode('');
+      this._labelSlot.appendChild(this._labelText);
+      this._label.appendChild(this._labelSlot);
+      this._actions = this.createElement('span', ['actions']);
+      for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
+        const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
+        b.textContent = glyph;
+        this._actions.appendChild(b);
+      }
+      this._endSlot = this.createElement('slot', [], { name: 'end' });
+      this._row.append(this._arrow, this._iconSlot, this._label, this._actions, this._endSlot);
+      this._children = this.createElement('div', ['nk-tree-children'], { role: 'group' });
+      this._childSlot = this.createElement('slot', [], { name: 'children' });
+      this._children.appendChild(this._childSlot);
+      this._wrapper.append(this._row, this._children);
+      this._sync();
+      this.closest('nk-tree')?.requestSync?.();
+    }
+
+    /** Routes light-DOM nodes: nested items → children, slot="icon"/"end" → there, the rest → label. */
+    assignSlots() {
+      if (!this._row) return;
+      const icon = [], end = [], children = [], label = [];
+      for (const node of this.childNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const slot = node.getAttribute('slot');
+          if (slot === 'icon') icon.push(node);
+          else if (slot === 'end') end.push(node);
+          else if (node.localName === 'nk-tree-item') children.push(node);
+          else label.push(node);
+        } else if (node.nodeType === Node.TEXT_NODE && node.data.trim()) {
+          label.push(node);
+        }
+      }
+      this._iconSlot.assign(...icon);
+      this._endSlot.assign(...end);
+      this._childSlot.assign(...children);
+      this._labelSlot.assign(...(this.hasAttribute('label') ? [] : label));
+      this._hasChildren = children.length > 0;
+      this._hasEnd = end.length > 0;
+      this._sync();
+    }
+
+    _sync() {
+      const active = this.getBoolAttr('active'), open = this.getBoolAttr('open');
+      this._row.classList.toggle('active', active);
+      this._row.classList.toggle('compact', this.getBoolAttr('compact'));
+      this._row.setAttribute('aria-selected', active ? 'true' : 'false');
+      this._arrow.classList.toggle('open', open);
+      this._arrow.style.display = this._hasChildren ? '' : 'none';
+      if (this._hasChildren) this._row.setAttribute('aria-expanded', open ? 'true' : 'false');
+      else this._row.removeAttribute('aria-expanded');
+      this._children.classList.toggle('collapsed', !open || !this._hasChildren);
+      this._icon.textContent = this.getAttribute('icon') || '';
+      this._icon.style.display = this.getAttribute('icon') ? '' : 'none';
+      this._labelText.data = this.getAttribute('label') || '';
+      // .actions is display:none until hover (a hover-parent rule); `hidden`
+      // would lose to that rule, so the block is detached instead.
+      const wantActions = !this.getBoolAttr('no-actions') && !this._hasEnd;
+      if (wantActions && !this._actions.isConnected) this._row.insertBefore(this._actions, this._endSlot);
+      if (!wantActions && this._actions.isConnected) this._actions.remove();
+      const href = this.getAttribute('href');
+      href ? this._row.setAttribute('data-href', href) : this._row.removeAttribute('data-href');
+    }
+
+    setupEvents() {
+      this._onRowClick = (e) => {
+        const action = e.target.closest?.('[data-action]');
+        if (action) { e.stopPropagation(); this.emit('nk-action', { action: action.dataset.action, value: this.value, label: this.label }); return; }
+        if (e.target === this._arrow || this._arrow.contains(e.target)) { e.stopPropagation(); this.toggle(); return; }
+        this.select();
+      };
+      this._onKey = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); }
+      };
+      this._row.addEventListener('click', this._onRowClick);
+      this._row.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._row?.removeEventListener('click', this._onRowClick);
+      this._row?.removeEventListener('keydown', this._onKey);
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'label') this.assignSlots();
+      else this._sync();
+      if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open'), value: this.value });
+    }
+
+    /** Fires nk-select; a listener may preventDefault to keep the item from becoming active. */
+    select() {
+      const ok = this.emit('nk-select', { value: this.value, label: this.label, href: this.getAttribute('href'), item: this });
+      if (!ok) return;
+      const tree = this.closest('nk-tree');
+      if (tree) tree.setActive(this);
+      else this.setBoolAttr('active', true);
+      if (this.getAttribute('href')) location.assign(this.getAttribute('href'));
+    }
+
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+    focus(options) { this._row?.focus(options); }
+    /** Roving tabindex, managed by <nk-tree>. */
+    setTabbable(v) { if (this._row) this._row.tabIndex = v ? 0 : -1; }
+    get tabbable() { return this._row?.tabIndex === 0; }
+    get hasChildren() { return !!this._hasChildren; }
+
+    get label() { return this.getAttribute('label') ?? this._labelSlot?.assignedNodes().map(n => n.textContent).join('').trim() ?? ''; }
+    set label(v) { this.setAttribute('label', v); }
+    get value() { return this.getAttribute('value') ?? this.label; }
+    set value(v) { this.setAttribute('value', v); }
+    get icon() { return this.getAttribute('icon'); }
+    set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+    get active() { return this.getBoolAttr('active'); }
+    set active(v) { this.setBoolAttr('active', v); }
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get compact() { return this.getBoolAttr('compact'); }
+    set compact(v) { this.setBoolAttr('compact', v); }
+  }
+
+  customElements.define('nk-tree-item', NkTreeItem);
+
+  // <nk-topbar>
+  //   <nk-breadcrumb>…</nk-breadcrumb>
+  //   <nk-btn slot="actions" variant="share">Share</nk-btn>
+  //   <nk-theme-toggle slot="actions"></nk-theme-toggle>
+  // </nk-topbar>
+  // → <div class="nk-topbar">…<div class="nk-topbar-actions">…</div></div>
+  // display:contents host, so the bar is a direct flex child of .nk-main.
+  class NkTopbar extends NkElement {
+
+    render() {
+      const bar = this.createElement('div', ['nk-topbar']);
+      bar.appendChild(document.createElement('slot'));
+      const actions = this.createElement('div', ['nk-topbar-actions']);
+      actions.appendChild(this.createElement('slot', [], { name: 'actions' }));
+      bar.appendChild(actions);
+      this._wrapper.appendChild(bar);
+    }
+  }
+
+  customElements.define('nk-topbar', NkTopbar);
+
+  // <nk-breadcrumb>
+  //   <a href="/overview">📊 Project overview</a>
+  //   <span>🚀 NotionKit MVP</span>
+  // </nk-breadcrumb>
+  // → <nav class="nk-breadcrumb"><a class="crumb">…</a><span class="sep">/</span><span class="crumb current">…</span></nav>
+  //
+  // The children are *cloned* into the shadow tree so the separators can be
+  // interleaved and `.crumb:hover` (no ::slotted twin) applies. A
+  // MutationObserver keeps the copy in step. Clicking a clone fires nk-select
+  // and, unless prevented, forwards the click to the original – so an <a>
+  // navigates exactly once and framework listeners see it.
+  class NkBreadcrumb extends NkElement {
+    static get observedAttributes() { return ['separator']; }
+    static get observesLightDom() { return true; }
+
+    render() {
+      this._nav = this.createElement('nav', ['nk-breadcrumb'], { 'aria-label': 'Breadcrumb' });
+      this._wrapper.appendChild(this._nav);
+      this.projectLightDom();
+    }
+
+    projectLightDom() {
+      if (!this._nav) return;
+      const originals = [...this.children];
+      const sep = this.getAttribute('separator') ?? '/';
+      const signature = originals.map(o => o.outerHTML).join('') + sep;
+      if (signature === this._signature) return;
+      this._signature = signature;
+      this._nav.innerHTML = '';
+      const explicitCurrent = originals.some(o => o.hasAttribute('current') || o.classList.contains('current'));
+      originals.forEach((original, i) => {
+        if (i > 0) {
+          const s = this.createElement('span', ['sep'], { 'aria-hidden': 'true' });
+          s.textContent = sep;
+          this._nav.appendChild(s);
+        }
+        const clone = original.cloneNode(true);
+        clone.removeAttribute('slot');
+        clone.classList.add('crumb');
+        const current = explicitCurrent ? (original.hasAttribute('current') || original.classList.contains('current')) : i === originals.length - 1;
+        clone.classList.toggle('current', current);
+        if (current) clone.setAttribute('aria-current', 'page');
+        clone.dataset.index = i;
+        this._nav.appendChild(clone);
+      });
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        const clone = e.target.closest('.crumb');
+        if (!clone) return;
+        e.preventDefault();
+        const index = Number(clone.dataset.index);
+        // Look the original up at click time: a framework may have replaced it.
+        const original = this.children[index];
+        const ok = this.emit('nk-select', {
+          index, label: clone.textContent.trim(), href: original?.getAttribute('href') ?? null,
+          value: original?.dataset.value ?? original?.getAttribute('href') ?? clone.textContent.trim(),
+          current: clone.classList.contains('current'),
+        });
+        if (ok) original?.click();
+      };
+      this._nav.addEventListener('click', this._onClick);
+    }
+
+    teardownEvents() { this._nav?.removeEventListener('click', this._onClick); }
+
+    onAttributeChanged() { this.projectLightDom(); }
+
+    get separator() { return this.getAttribute('separator') ?? '/'; }
+    set separator(v) { this.setAttribute('separator', v); }
+  }
+
+  customElements.define('nk-breadcrumb', NkBreadcrumb);
+
+  // <nk-theme-toggle slot="actions"></nk-theme-toggle>
+  // → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>
+  // Flips data-theme on <html> (the only theme source), remembers the choice in
+  // localStorage (`storage-key`, default nk-theme), applies a stored or
+  // system preference on first connect when <html> carries no theme yet, and
+  // accepts postMessage({ nkTheme }) from a parent page (the landing page's
+  // embedded demo uses that).
+  class NkThemeToggle extends NkElement {
+    static get observedAttributes() { return ['storage-key', 'title'];
+
+    }
+
+    render() {
+      this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
+      this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+      this._wrapper.appendChild(this._btn);
+      const root = document.documentElement;
+      let stored = null;
+      try { stored = localStorage.getItem(this.storageKey); } catch {}
+      if (stored === 'light' || stored === 'dark') root.setAttribute('data-theme', stored);
+      else if (!root.hasAttribute('data-theme')) root.setAttribute('data-theme', matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      this._syncGlyph();
+    }
+
+    _syncGlyph() {
+      if (this._btn) this._btn.textContent = getCurrentTheme() === 'dark' ? '☀️' : '🌙';
+    }
+
+    _syncTheme(theme) {
+      super._syncTheme(theme);
+      this._syncGlyph();
+    }
+
+    setupEvents() {
+      this._onClick = () => this.apply(getCurrentTheme() === 'dark' ? 'light' : 'dark');
+      this._onMessage = (e) => { const t = e.data?.nkTheme; if (t === 'light' || t === 'dark') this.apply(t); };
+      this._btn.addEventListener('click', this._onClick);
+      window.addEventListener('message', this._onMessage);
+    }
+
+    teardownEvents() {
+      this._btn?.removeEventListener('click', this._onClick);
+      window.removeEventListener('message', this._onMessage);
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    }
+
+    /** Sets the theme on <html>, persists it and reports it. */
+    apply(theme) {
+      document.documentElement.setAttribute('data-theme', theme);
+      try { localStorage.setItem(this.storageKey, theme); } catch {}
+      this._syncGlyph();
+      this.emit('nk-change', { value: theme });
+    }
+
+    get storageKey() { return this.getAttribute('storage-key') || 'nk-theme'; }
+    get value() { return getCurrentTheme(); }
+    set value(v) { this.apply(v); }
+  }
+
+  customElements.define('nk-theme-toggle', NkThemeToggle);
+
+  // <nk-page icon="🚀" cover>
+  //   <nk-page-title>NotionKit MVP</nk-page-title>
+  //   <nk-page-actions>…</nk-page-actions>
+  //   <p class="lead">…</p>
+  //   …blocks…
+  // </nk-page>
+  // → <div class="nk-page-scroll"><div class="nk-cover"></div><div class="nk-page">
+  //     <div class="nk-page-icon">🚀</div>…</div></div>
+  //
+  // The host is display:contents, so .nk-page-scroll is the flex child of
+  // .nk-main that scrolls. `narrow` drops the scroll wrapper for pages that are
+  // the document itself (landing / docs skeleton). The page icon is rendered
+  // here because its ::slotted twin is keyed on the parent (.nk-page).
+  class NkPage extends NkElement {
+    static get observedAttributes() { return ['icon', 'cover', 'narrow']; }
+
+    render() {
+      this._page = this.createElement('div', ['nk-page']);
+      this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
+      const iconSlot = this.createElement('slot', [], { name: 'icon' });
+      iconSlot.appendChild(this._icon);
+      this._page.appendChild(iconSlot);
+      this._page.appendChild(document.createElement('slot'));
+      this._cover = this.createElement('div', ['nk-cover']);
+      this._coverSlot = this.createElement('slot', [], { name: 'cover' });
+      this._coverSlot.appendChild(this._cover);
+      this._build();
+    }
+
+    _build() {
+      this._wrapper.replaceChildren();
+      if (this.getBoolAttr('narrow')) {
+        this._wrapper.append(this._coverSlot, this._page);
+      } else {
+        const scroll = this.createElement('div', ['nk-page-scroll']);
+        scroll.append(this._coverSlot, this._page);
+        this._wrapper.appendChild(scroll);
+      }
+      this._sync();
+    }
+
+    _sync() {
+      const icon = this.getAttribute('icon');
+      this._icon.textContent = icon || '';
+      this._icon.style.display = icon ? '' : 'none';
+      this._cover.style.display = this.getBoolAttr('cover') ? '' : 'none';
+    }
+
+    setupEvents() {
+      this._onIcon = () => this.emit('nk-action', { action: 'icon', value: this.getAttribute('icon') });
+      this._icon.addEventListener('click', this._onIcon);
+    }
+
+    teardownEvents() { this._icon?.removeEventListener('click', this._onIcon); }
+
+    onAttributeChanged(name) {
+      if (name === 'narrow') this._build();
+      else this._sync();
+    }
+
+    get icon() { return this.getAttribute('icon'); }
+    set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+    get cover() { return this.getBoolAttr('cover'); }
+    set cover(v) { this.setBoolAttr('cover', v); }
+  }
+
+  customElements.define('nk-page', NkPage);
+
+  // <nk-page-cover slot="cover"></nk-page-cover>            → the token gradient
+  // <nk-page-cover slot="cover" src="cover.jpg"></nk-page-cover>  → an image
+  class NkPageCover extends NkElement {
+    static get observedAttributes() { return ['src']; }
+
+    render() {
+      this._cover = this.createElement('div', ['nk-cover']);
+      this._wrapper.appendChild(this._cover);
+      this._sync();
+    }
+
+    _sync() {
+      const src = this.getAttribute('src');
+      if (src) {
+        this._cover.style.backgroundImage = `url("${src}")`;
+        this._cover.style.backgroundSize = 'cover';
+        this._cover.style.backgroundPosition = 'center';
+      } else {
+        this._cover.style.backgroundImage = '';
+        this._cover.style.backgroundSize = '';
+        this._cover.style.backgroundPosition = '';
+      }
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    get src() { return this.getAttribute('src'); }
+    set src(v) { v == null ? this.removeAttribute('src') : this.setAttribute('src', v); }
+  }
+
+  customElements.define('nk-page-cover', NkPageCover);
+
+  // <nk-page-title>NotionKit MVP</nk-page-title>          → <h1 class="nk-page-title">
+  // <nk-page-title editable placeholder="Untitled">…</nk-page-title>
+  // With `editable` the text is copied into the shadow heading (contenteditable
+  // cannot edit slotted nodes) and nk-change fires on blur / Enter.
+  class NkPageTitle extends NkElement {
+    static get observedAttributes() { return ['editable', 'placeholder', 'value']; }
+    static get observesLightDom() { return true; }
+
+    render() {
+      this._h1 = this.createElement('h1', ['nk-page-title']);
+      this._slot = document.createElement('slot');
+      this._h1.appendChild(this._slot);
+      this._wrapper.appendChild(this._h1);
+      this._sync();
+    }
+
+    _sync() {
+      const editable = this.getBoolAttr('editable');
+      if (editable) {
+        if (this._slot.isConnected) this._slot.remove();
+        this._h1.setAttribute('contenteditable', 'plaintext-only');
+        this._h1.setAttribute('spellcheck', 'false');
+        this._h1.setAttribute('role', 'textbox');
+        this._h1.setAttribute('aria-label', 'Title');
+        const text = this.getAttribute('value') ?? this.textContent.trim();
+        if (this._h1.textContent !== text && document.activeElement !== this) this._h1.textContent = text;
+        this._h1.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
+      } else {
+        this._h1.removeAttribute('contenteditable');
+        this._h1.removeAttribute('role');
+        if (this.hasAttribute('value')) { if (this._slot.isConnected) this._slot.remove(); this._h1.textContent = this.getAttribute('value'); }
+        else if (!this._slot.isConnected) { this._h1.textContent = ''; this._h1.appendChild(this._slot); }
+      }
+    }
+
+    projectLightDom() { if (this._h1 && !this.hasAttribute('value')) this._sync(); }
+
+    setupEvents() {
+      this._committed = this.value;
+      this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this._h1.blur(); } };
+      this._onBlur = () => this._commit();
+      this._h1.addEventListener('keydown', this._onKey);
+      this._h1.addEventListener('blur', this._onBlur);
+    }
+
+    teardownEvents() {
+      this._h1?.removeEventListener('keydown', this._onKey);
+      this._h1?.removeEventListener('blur', this._onBlur);
+    }
+
+    _commit() {
+      const value = this._h1.textContent.trim();
+      if (value === this._committed) return;
+      this._committed = value;
+      this.emit('nk-change', { value });
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    get value() { return this.getBoolAttr('editable') ? (this._h1?.textContent.trim() ?? '') : (this.getAttribute('value') ?? this.textContent.trim()); }
+    set value(v) { this.setAttribute('value', v); }
+    get editable() { return this.getBoolAttr('editable'); }
+    set editable(v) { this.setBoolAttr('editable', v); }
+    focus(o) { this._h1?.focus(o); }
+  }
+
+  customElements.define('nk-page-title', NkPageTitle);
+
+  // <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
+  // → <div class="nk-page-meta">…</div>  – the meta row under the title
+  class NkPageActions extends NkElement {
+    render() {
+      const row = this.createElement('div', ['nk-page-meta']);
+      row.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(row);
+    }
+  }
+
+  customElements.define('nk-page-actions', NkPageActions);
+
+  // <nk-block-host handle><p>Editable content lives here.</p></nk-block-host>
+  // → <div class="nk-block-host"><span class="nk-block-handle">⠿</span>…</div>
+  // The optical shell for editor content (hover wash, focus ring, drop target).
+  // Mount an editor into the light DOM; <nk-editor> (v1.1) does that for TipTap.
+  class NkBlockHost extends NkElement {
+    static get observedAttributes() { return ['handle', 'drop-target']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-block-host']);
+      this._handle = this.createElement('span', ['nk-block-handle'], { 'aria-hidden': 'true' });
+      this._handle.textContent = '⠿';
+      this._box.appendChild(this._handle);
+      this._box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._box);
+      this._sync();
+    }
+
+    _sync() {
+      this._handle.style.display = this.getBoolAttr('handle') ? '' : 'none';
+      this._box.classList.toggle('nk-drop-target', this.getBoolAttr('drop-target'));
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    get handle() { return this.getBoolAttr('handle'); }
+    set handle(v) { this.setBoolAttr('handle', v); }
+    get dropTarget() { return this.getBoolAttr('drop-target'); }
+    set dropTarget(v) { this.setBoolAttr('drop-target', v); }
+  }
+
+  customElements.define('nk-block-host', NkBlockHost);
+
+  // <nk-banner variant="info">ℹ️ <span>Text</span><span slot="action">Open</span></nk-banner>
+  // → <div class="nk-banner info">…<span class="b-action">Open</span></div>
+  const VARIANTS = ['info', 'success', 'warning'];
+
+  class NkBanner extends NkElement {
+    static get observedAttributes() { return ['variant']; }
+
+    render() {
+      this._box = this.createElement('div', this._classes(), { role: 'status' });
+      this._box.appendChild(document.createElement('slot'));
+      this._box.appendChild(this.createElement('slot', [], { name: 'action' }));
+      this._wrapper.appendChild(this._box);
+    }
+
+    _classes() {
+      const v = this.getAttribute('variant');
+      return ['nk-banner', ...(VARIANTS.includes(v) ? [v] : [])];
+    }
+
+    onAttributeChanged() { if (this._box) this._box.className = this._classes().join(' '); }
+
+    get variant() { return this.getAttribute('variant'); }
+    set variant(v) { v ? this.setAttribute('variant', v) : this.removeAttribute('variant'); }
+  }
+
+  customElements.define('nk-banner', NkBanner);
+
+  // <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
+  // → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>
+  class NkEmpty extends NkElement {
+    static get observedAttributes() { return ['icon', 'title', 'desc']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-empty']);
+      this._parts = {};
+      for (const [slot, cls] of [['icon', 'e-icon'], ['title', 'e-title'], ['desc', 'e-desc']]) {
+        const el = this.createElement('div', [cls]);
+        const s = this.createElement('slot', [], { name: slot });
+        s.appendChild(el);
+        box.appendChild(s);
+        this._parts[slot] = el;
+      }
+      box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      for (const [slot, el] of Object.entries(this._parts)) {
+        const v = this.getAttribute(slot);
+        el.textContent = v || '';
+        el.style.display = v ? '' : 'none';
+      }
+    }
+
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-empty', NkEmpty);
+
+  // <nk-skeleton height="18" width="60%"></nk-skeleton>
+  // <nk-skeleton lines="3" widths="100%,85%,40%"></nk-skeleton>
+  // → <div class="nk-skeleton" style="height:…;width:…"></div> × lines
+  class NkSkeleton extends NkElement {
+    static get observedAttributes() { return ['lines', 'height', 'width', 'widths']; }
+
+    render() { this._build(); }
+
+    _build() {
+      this._wrapper.replaceChildren();
+      const lines = Math.max(1, Number(this.getAttribute('lines')) || 1);
+      const height = this.getAttribute('height') || '13';
+      const widths = (this.getAttribute('widths') || '').split(',').map(s => s.trim()).filter(Boolean);
+      const width = this.getAttribute('width');
+      for (let i = 0; i < lines; i++) {
+        const line = this.createElement('div', ['nk-skeleton'], { 'aria-hidden': 'true' });
+        line.style.height = /^\d+(\.\d+)?$/.test(height) ? `${height}px` : height;
+        const w = widths[i] ?? width;
+        if (w) line.style.width = w;
+        this._wrapper.appendChild(line);
+      }
+    }
+
+    onAttributeChanged() { this._build(); }
+  }
+
+  customElements.define('nk-skeleton', NkSkeleton);
+
+  // <nk-synced badge="⟳ 3 places">…</nk-synced>
+  // → <div class="nk-synced"><span class="synced-badge">⟳ 3 places</span>…</div>
+  class NkSynced extends NkElement {
+    static get observedAttributes() { return ['badge']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-synced']);
+      this._badge = this.createElement('span', ['synced-badge']);
+      box.appendChild(this._badge);
+      box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
+    onAttributeChanged() { this._sync(); }
+
+    get badge() { return this.getAttribute('badge'); }
+    set badge(v) { this.setAttribute('badge', v); }
+  }
+
+  customElements.define('nk-synced', NkSynced);
+
+  // <nk-tabs value="notes">
+  //   <nk-tab value="notes">📝 Notes</nk-tab>
+  //   <nk-tab value="tasks">✅ Tasks</nk-tab>
+  //   <div slot="panel" data-tab="notes" class="nk-tab-panel">…</div>
+  //   <div slot="panel" data-tab="tasks" class="nk-tab-panel">…</div>
+  // </nk-tabs>
+  // → <div class="nk-tabs" role="tablist">…</div> + the panels below it.
+  // The tabs keep one tab active and hide every panel whose data-tab does not
+  // match `value` (through the hidden attribute – the panels stay yours).
+  const KEYS$1 = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+  class NkTabs extends NkElement {
+    static get observedAttributes() { return ['value']; }
+
+    render() {
+      this._strip = this.createElement('div', ['nk-tabs'], { role: 'tablist' });
+      this._tabSlot = document.createElement('slot');
+      this._strip.appendChild(this._tabSlot);
+      this._panelSlot = this.createElement('slot', [], { name: 'panel' });
+      this._wrapper.append(this._strip, this._panelSlot);
+      this._sync();
+    }
+
+    get tabs() { return [...this.querySelectorAll(':scope > nk-tab')]; }
+    get panels() { return [...this.querySelectorAll(':scope > [slot="panel"]')]; }
+
+    _sync() {
+      const tabs = this.tabs;
+      if (!tabs.length) return;
+      let value = this.getAttribute('value');
+      if (value === null || !tabs.some(t => t.getAttribute('value') === value || (t.getAttribute('value') === null && t.textContent.trim() === value))) {
+        const preset = tabs.find(t => t.hasAttribute('active')) || tabs[0];
+        value = preset.getAttribute('value') ?? preset.textContent.trim();
+      }
+      for (const tab of tabs) {
+        const v = tab.getAttribute('value') ?? tab.textContent.trim();
+        if (v === value) tab.setAttribute('active', ''); else tab.removeAttribute('active');
+      }
+      for (const panel of this.panels) panel.hidden = panel.dataset.tab !== value;
+      this._value = value;
+    }
+
+    setupEvents() {
+      this._onSlot = () => this._sync();
+      this._onKey = (e) => {
+        const dir = KEYS$1[e.key];
+        if (!dir) return;
+        const tabs = this.tabs.filter(t => !t.hasAttribute('disabled'));
+        const i = tabs.indexOf(e.target.closest?.('nk-tab'));
+        if (i < 0 || tabs.length < 2) return;
+        e.preventDefault();
+        const next = tabs[(i + dir + tabs.length) % tabs.length];
+        next.select();
+        next.focus();
+      };
+      this._tabSlot.addEventListener('slotchange', this._onSlot);
+      this._panelSlot.addEventListener('slotchange', this._onSlot);
+      this.addEventListener('keydown', this._onKey);
+      this._sync();
+    }
+
+    teardownEvents() {
+      this._tabSlot?.removeEventListener('slotchange', this._onSlot);
+      this._panelSlot?.removeEventListener('slotchange', this._onSlot);
+      this.removeEventListener('keydown', this._onKey);
+    }
+
+    onAttributeChanged() {
+      const before = this._value;
+      this._sync();
+      if (this._value !== before) this.emit('nk-change', { value: this._value });
+    }
+
+    get value() { return this._value ?? this.getAttribute('value'); }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-tabs', NkTabs);
+
+  // <nk-tab value="notes" active>📝 Notes</nk-tab>  →  <span class="nk-tab active" role="tab">
+  class NkTab extends NkElement {
+    static get observedAttributes() { return ['active', 'value', 'disabled']; }
+
+    render() {
+      this._tab = this.createElement('span', ['nk-tab'], { role: 'tab' });
+      this._tab.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._tab);
+      this._sync();
+    }
+
+    _sync() {
+      const active = this.getBoolAttr('active');
+      this._tab.classList.toggle('active', active);
+      this._tab.setAttribute('aria-selected', active ? 'true' : 'false');
+      this._tab.tabIndex = active ? 0 : -1;
+      this._tab.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.select();
+      this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); } };
+      this._tab.addEventListener('click', this._onClick);
+      this._tab.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._tab?.removeEventListener('click', this._onClick);
+      this._tab?.removeEventListener('keydown', this._onKey);
+    }
+
+    select() {
+      if (this.getBoolAttr('disabled')) return;
+      const ok = this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
+      if (!ok) return;
+      const tabs = this.closest('nk-tabs');
+      if (tabs) tabs.value = this.value;
+      else this.setBoolAttr('active', true);
+    }
+
+    onAttributeChanged() { this._sync(); }
+    focus(o) { this._tab?.focus(o); }
+
+    get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+    set value(v) { this.setAttribute('value', v); }
+    get active() { return this.getBoolAttr('active'); }
+    set active(v) { this.setBoolAttr('active', v); }
+  }
+
+  customElements.define('nk-tab', NkTab);
+
+  // <nk-segmented name="range" value="week">
+  //   <button value="week">Week</button><button value="month">Month</button>
+  // </nk-segmented>
+  // → <div class="nk-segmented">…</div> with .active on the chosen button.
+  // The buttons stay in the light DOM (their look comes from the ::slotted
+  // twins); the element sets type/role, moves .active and submits the value.
+  const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+  class NkSegmented extends NkFormElement {
+    static get observedAttributes() { return ['value', 'name', 'disabled']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-segmented'], { role: 'radiogroup' });
+      this._slot = document.createElement('slot');
+      this._box.appendChild(this._slot);
+      this._wrapper.appendChild(this._box);
+      this._sync();
+    }
+
+    get buttons() { return this._slot?.assignedElements().filter(el => el.localName === 'button') ?? []; }
+    _valueOf(btn) { return btn.getAttribute('value') ?? btn.textContent.trim(); }
+
+    _sync() {
+      const buttons = this.buttons;
+      if (!buttons.length) return;
+      let value = this.getAttribute('value');
+      if (value === null || !buttons.some(b => this._valueOf(b) === value)) {
+        value = this._valueOf(buttons.find(b => b.classList.contains('active')) || buttons[0]);
+      }
+      if (this._defaultValue === undefined) this._defaultValue = value;
+      const disabled = this.getBoolAttr('disabled') || !!this._formDisabled;
+      for (const b of buttons) {
+        const on = this._valueOf(b) === value;
+        b.type = 'button';
+        b.setAttribute('role', 'radio');
+        b.setAttribute('aria-checked', on ? 'true' : 'false');
+        b.classList.toggle('active', on);
+        b.tabIndex = on ? 0 : -1;
+        b.disabled = disabled;
+      }
+      this._value = value;
+      this.setFormValue(value);
+    }
+
+    setupEvents() {
+      this._onSlot = () => this._sync();
+      this._onClick = (e) => {
+        const btn = e.target.closest?.('button');
+        if (!btn || !this.buttons.includes(btn) || btn.disabled) return;
+        this._choose(this._valueOf(btn));
+      };
+      this._onKey = (e) => {
+        const dir = KEYS[e.key];
+        if (!dir) return;
+        const buttons = this.buttons;
+        const i = buttons.indexOf(e.target.closest?.('button'));
+        if (i < 0 || buttons.length < 2) return;
+        e.preventDefault();
+        const next = buttons[(i + dir + buttons.length) % buttons.length];
+        this._choose(this._valueOf(next));
+        next.focus();
+      };
+      this._slot.addEventListener('slotchange', this._onSlot);
+      this.addEventListener('click', this._onClick);
+      this.addEventListener('keydown', this._onKey);
+      this._sync();
+    }
+
+    teardownEvents() {
+      this._slot?.removeEventListener('slotchange', this._onSlot);
+      this.removeEventListener('click', this._onClick);
+      this.removeEventListener('keydown', this._onKey);
+    }
+
+    _choose(value) {
+      if (value === this._value) return;
+      this._syncing = true;
+      this.setAttribute('value', value);
+      this._syncing = false;
+      this._sync();
+      this.emit('nk-change', { value, name: this.name });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    onAttributeChanged() { if (!this._syncing) this._sync(); }
+    resetValue() { if (this._defaultValue !== undefined) this.setAttribute('value', this._defaultValue); }
+    onFormDisabled(d) { this._formDisabled = d; this._sync(); }
+
+    get value() { return this._value ?? this.getAttribute('value'); }
+    set value(v) { this.setAttribute('value', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+  }
+
+  customElements.define('nk-segmented', NkSegmented);
+
+  // <nk-stats><nk-stat …></nk-stat>…</nk-stats>  →  <div class="nk-stats">
+  class NkStats extends NkElement {
+    render() {
+      const row = this.createElement('div', ['nk-stats']);
+      row.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(row);
+    }
+  }
+
+  customElements.define('nk-stats', NkStats);
+
+  // <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
+  // → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>
+  class NkStat extends NkElement {
+    static get observedAttributes() { return ['label', 'value', 'delta', 'trend']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-stat']);
+      this._parts = {};
+      for (const [slot, cls] of [['label', 's-label'], ['value', 's-value'], ['delta', 's-delta']]) {
+        const el = this.createElement('div', [cls]);
+        const s = this.createElement('slot', [], { name: slot });
+        s.appendChild(el);
+        box.appendChild(s);
+        this._parts[slot] = el;
+      }
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      for (const [slot, el] of Object.entries(this._parts)) {
+        const v = this.getAttribute(slot);
+        el.textContent = v ?? '';
+        el.style.display = v === null ? 'none' : '';
+      }
+      const trend = this.getAttribute('trend');
+      this._parts.delta.className = 's-delta' + (trend === 'up' || trend === 'down' ? ` ${trend}` : '');
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    get value() { return this.getAttribute('value'); }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-stat', NkStat);
+
+  // <nk-avatar-group more="+2">
+  //   <span class="mini-avatar" style="background:#448361">SL</span>…
+  // </nk-avatar-group>
+  // → <div class="nk-avatar-group">…<span class="mini-avatar more">+2</span></div>
+  // The avatars stay in the light DOM (::slotted twins size and overlap them);
+  // the "more" bubble is rendered here from the attribute.
+  class NkAvatarGroup extends NkElement {
+    static get observedAttributes() { return ['more']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-avatar-group']);
+      box.appendChild(document.createElement('slot'));
+      this._more = this.createElement('span', ['mini-avatar', 'more']);
+      box.appendChild(this._more);
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      const more = this.getAttribute('more');
+      this._more.textContent = more || '';
+      this._more.style.display = more ? '' : 'none';
+    }
+
+    onAttributeChanged() { this._sync(); }
+
+    get more() { return this.getAttribute('more'); }
+    set more(v) { v == null ? this.removeAttribute('more') : this.setAttribute('more', v); }
+  }
+
+  customElements.define('nk-avatar-group', NkAvatarGroup);
+
+  // <nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention>
+  // <nk-mention type="page">📄 Onboarding</nk-mention>   <nk-mention type="date">📅 May 20</nk-mention>
+  // → <span class="nk-mention person">…</span>
+  const TYPES = ['person', 'page', 'date'];
+
+  class NkMention extends NkElement {
+    static get observedAttributes() { return ['type']; }
+
+    render() {
+      this._box = this.createElement('span', this._classes());
+      this._box.appendChild(this.createElement('slot', [], { name: 'avatar' }));
+      this._box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._box);
+    }
+
+    _classes() {
+      const t = this.getAttribute('type');
+      return ['nk-mention', ...(TYPES.includes(t) ? [t] : [])];
+    }
+
+    onAttributeChanged() { if (this._box) this._box.className = this._classes().join(' '); }
+
+    get type() { return this.getAttribute('type'); }
+    set type(v) { v ? this.setAttribute('type', v) : this.removeAttribute('type'); }
+  }
+
+  customElements.define('nk-mention', NkMention);
+
+  // <nk-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
+  // → <button class="nk-template-btn">📅 Insert week plan</button>
+  class NkTemplateBtn extends NkElement {
+    static get observedAttributes() { return ['icon', 'value', 'disabled']; }
+
+    render() {
+      this._btn = this.createElement('button', ['nk-template-btn'], { type: 'button' });
+      // One flex item: "📅 Insert week plan" is a single text run in the class
+      // markup, so icon, space and label must not become separate flex items.
+      const run = document.createElement('span');
+      this._icon = document.createElement('span');
+      this._space = document.createTextNode(' ');
+      run.append(this._icon, this._space, document.createElement('slot'));
+      this._btn.appendChild(run);
+      this._wrapper.appendChild(this._btn);
+      this._sync();
+    }
+
+    _sync() {
+      const icon = this.getAttribute('icon');
+      this._icon.textContent = icon || '';
+      this._space.data = icon ? ' ' : '';
+      this._btn.disabled = this.getBoolAttr('disabled');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.emit('nk-select', { value: this.value, label: this.textContent.trim() });
+      this._btn.addEventListener('click', this._onClick);
+    }
+
+    teardownEvents() { this._btn?.removeEventListener('click', this._onClick); }
+    onAttributeChanged() { this._sync(); }
+    focus(o) { this._btn?.focus(o); }
+
+    get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-template-btn', NkTemplateBtn);
+
+  // <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
+  // → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>
+  // Cards with the same `name` in the same tree behave like radios and submit
+  // the selected value with the form.
+  class NkModelCard extends NkFormElement {
+    static get observedAttributes() { return ['name', 'value', 'title', 'desc', 'selected', 'disabled']; }
+
+    render() {
+      this._card = this.createElement('div', ['nk-model-card'], { role: 'radio', tabindex: '0' });
+      this._card.appendChild(this.createElement('div', ['m-radio']));
+      const text = document.createElement('div');
+      this._name = this.createElement('div', ['m-name']);
+      const titleSlot = this.createElement('slot', [], { name: 'title' });
+      titleSlot.appendChild(this._name);
+      this._desc = this.createElement('div', ['m-desc']);
+      const descSlot = this.createElement('slot', [], { name: 'desc' });
+      descSlot.appendChild(this._desc);
+      text.append(titleSlot, descSlot);
+      this._card.appendChild(text);
+      this._wrapper.appendChild(this._card);
+      this._defaultSelected = this.getBoolAttr('selected');
+      this._sync();
+      if (this.getBoolAttr('selected')) this._unselectPeers();
+    }
+
+    _sync() {
+      const on = this.getBoolAttr('selected');
+      this._card.classList.toggle('selected', on);
+      this._card.setAttribute('aria-checked', on ? 'true' : 'false');
+      this._card.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+      this._name.textContent = this.getAttribute('title') || '';
+      const desc = this.getAttribute('desc');
+      this._desc.textContent = desc || '';
+      this._desc.style.display = desc ? '' : 'none';
+      this.setFormValue(on ? (this.getAttribute('value') || 'on') : null, on ? 'selected' : 'unselected');
+    }
+
+    _group() {
+      const name = this.getAttribute('name');
+      const root = this.getRootNode();
+      if (!name || typeof root?.querySelectorAll !== 'function') return [this];
+      return [...root.querySelectorAll('nk-model-card')].filter(el => el.getAttribute('name') === name);
+    }
+
+    _unselectPeers() {
+      for (const el of this._group()) if (el !== this && el.hasAttribute('selected')) el.removeAttribute('selected');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.select();
+      this._onKey = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.select(); } };
+      this._card.addEventListener('click', this._onClick);
+      this._card.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._card?.removeEventListener('click', this._onClick);
+      this._card?.removeEventListener('keydown', this._onKey);
+    }
+
+    select() {
+      if (this.getBoolAttr('disabled') || this.getBoolAttr('selected')) return;
+      this.setBoolAttr('selected', true);
+      this.emit('nk-change', { value: this.value, name: this.name, checked: true });
+      this.emit('nk-select', { value: this.value, label: this.getAttribute('title') });
+      this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    onAttributeChanged(name) {
+      this._sync();
+      if (name === 'selected' && this.getBoolAttr('selected')) this._unselectPeers();
+    }
+
+    resetValue() { this.setBoolAttr('selected', this._defaultSelected); }
+    focus(o) { this._card?.focus(o); }
+
+    get selected() { return this.getBoolAttr('selected'); }
+    set selected(v) { this.setBoolAttr('selected', v); }
+    get value() { return this.getAttribute('value') || 'on'; }
+    set value(v) { this.setAttribute('value', v); }
+    get name() { return this.getAttribute('name'); }
+    set name(v) { this.setAttribute('name', v); }
+  }
+
+  customElements.define('nk-model-card', NkModelCard);
+
+  // <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
+  // → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>
+  class NkProfileRow extends NkElement {
+    static get observedAttributes() { return ['avatar']; }
+
+    render() {
+      const row = this.createElement('div', ['nk-profile-row']);
+      this._avatar = this.createElement('div', ['big-avatar']);
+      const s = this.createElement('slot', [], { name: 'avatar' });
+      s.appendChild(this._avatar);
+      row.appendChild(s);
+      row.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(row);
+      this._sync();
+    }
+
+    _sync() { this._avatar.textContent = this.getAttribute('avatar') || ''; }
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-profile-row', NkProfileRow);
+
+  // <nk-danger-zone title="Danger zone">…</nk-danger-zone>
+  // → <div class="nk-danger-zone"><div class="dz-title">Danger zone</div>…</div>
+  class NkDangerZone extends NkElement {
+    static get observedAttributes() { return ['title']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-danger-zone']);
+      this._title = this.createElement('div', ['dz-title']);
+      box.appendChild(this._title);
+      box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      const t = this.getAttribute('title');
+      this._title.textContent = t || '';
+      this._title.style.display = t ? '' : 'none';
+    }
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-danger-zone', NkDangerZone);
+
+  // <nk-member-list><nk-member-row …></nk-member-row>…</nk-member-list>
+  // → <div class="nk-member-list">…</div>; the last row gets `last` (no border).
+  class NkMemberList extends NkElement {
+    render() {
+      const box = this.createElement('div', ['nk-member-list']);
+      this._slot = document.createElement('slot');
+      box.appendChild(this._slot);
+      this._wrapper.appendChild(box);
+      this._mark();
+    }
+
+    _mark() {
+      const rows = this._slot.assignedElements().filter(el => el.localName === 'nk-member-row');
+      rows.forEach((row, i) => { if (i === rows.length - 1) row.setAttribute('last', ''); else row.removeAttribute('last'); });
+    }
+
+    setupEvents() {
+      this._onSlot = () => this._mark();
+      this._slot.addEventListener('slotchange', this._onSlot);
+      this._mark();
+    }
+
+    teardownEvents() { this._slot?.removeEventListener('slotchange', this._onSlot); }
+  }
+
+  customElements.define('nk-member-list', NkMemberList);
+
+  // <nk-member-row name="Sara Lindt" mail="sara@…" avatar="SL" color="#448361">
+  //   <nk-select slot="role" compact>…</nk-select>
+  // </nk-member-row>
+  // → <div class="nk-member-row"><span class="mini-avatar">SL</span><div>Sara Lindt<div class="m-mail">…</div></div><select …></div>
+  class NkMemberRow extends NkElement {
+    static get observedAttributes() { return ['name', 'mail', 'avatar', 'color', 'last']; }
+
+    render() {
+      this._row = this.createElement('div', ['nk-member-row']);
+      this._avatar = this.createElement('span', ['mini-avatar']);
+      const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+      avatarSlot.appendChild(this._avatar);
+      const text = document.createElement('div');
+      this._name = document.createTextNode('');
+      this._mail = this.createElement('div', ['m-mail']);
+      text.append(this._name, this._mail);
+      // `.nk-member-row .nk-select { margin-left: auto }` cannot reach a select
+      // inside another shadow root, and a display:contents host takes no margin –
+      // so the role slot sits in a box that carries that rule.
+      const role = document.createElement('div');
+      role.style.marginLeft = 'auto';
+      role.appendChild(this.createElement('slot', [], { name: 'role' }));
+      this._row.append(avatarSlot, text, role, document.createElement('slot'));
+      this._wrapper.appendChild(this._row);
+      this._sync();
+    }
+
+    _sync() {
+      this._name.data = this.getAttribute('name') || '';
+      const mail = this.getAttribute('mail');
+      this._mail.textContent = mail || '';
+      this._mail.style.display = mail ? '' : 'none';
+      const avatar = this.getAttribute('avatar');
+      this._avatar.textContent = avatar || (this.getAttribute('name') || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+      this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+      this._row.classList.toggle('last', this.getBoolAttr('last'));
+    }
+
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-member-row', NkMemberRow);
+
+  // Overlay plumbing shared by nk-modal and nk-cmdk: body scroll lock with a
+  // refcount, and `inert` on everything outside the overlay so focus and
+  // assistive technology stay inside – nested shadow roots included.
+  let locks = 0, previousOverflow = '';
+
+  function lockScroll() {
+    if (locks++ === 0) {
+      previousOverflow = document.documentElement.style.overflow;
+      document.documentElement.style.overflow = 'hidden';
+    }
+  }
+
+  function unlockScroll() {
+    if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
+  }
+
+  /** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+  function inertOutside(el) {
+    const made = [];
+    let node = el;
+    while (node && node !== document.body) {
+      const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
+      if (!parent) break;
+      for (const sib of parent.children) {
+        if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+        sib.inert = true;
+        made.push(sib);
+      }
+      node = parent instanceof ShadowRoot ? parent.host : parent;
+    }
+    return () => { for (const c of made) c.inert = false; };
+  }
+
+  /** The first tabbable element inside a light-DOM subtree, looking into shadow roots. */
+  function firstFocusable(root) {
+    const SEL = 'a[href], button:not([disabled]), input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [contenteditable="plaintext-only"]';
+    const walk = (node) => {
+      for (const el of node.querySelectorAll('*')) {
+        if (el.matches(SEL) && el.getClientRects().length) return el;
+        if (el.shadowRoot) { const inner = walk(el.shadowRoot); if (inner) return inner; }
+      }
+      return null;
+    };
+    return walk(root);
+  }
+
+  // <nk-modal id="settings">
+  //   <nk-settings-user slot="user" name="…" mail="…"></nk-settings-user>
+  //   <nk-settings-pane name="profile" group="Account" icon="👤" label="My profile" title="My profile" active>…</nk-settings-pane>
+  //   <nk-settings-pane name="members" group="Workspace" icon="👥" label="Members" title="Members">…</nk-settings-pane>
+  // </nk-modal>
+  // → <div class="nk-modal-backdrop open"><div class="nk-modal" role="dialog">
+  //     <nav class="nk-settings-nav">…user… section labels + tree rows…</nav>
+  //     <div class="nk-settings-content">…panes…</div></div></div>
+  //
+  // The modal renders the nav rows itself from the panes' label/icon/group, so
+  // `.nk-settings-nav .nk-tree-item` and the 860px icon-rail rules match with
+  // no JS breakpoint. Escape and the backdrop close it; focus moves in and
+  // back out; the page behind is scroll-locked and inert. Put the element
+  // directly under <body>: a transformed ancestor would trap the fixed backdrop.
+  class NkModal extends NkElement {
+    static get observedAttributes() { return ['open', 'pane']; }
+
+    render() {
+      this._backdrop = this.createElement('div', ['nk-modal-backdrop']);
+      this._backdrop.inert = true;
+      this._box = this.createElement('div', ['nk-modal'], { role: 'dialog', 'aria-modal': 'true', tabindex: '-1' });
+      this._nav = this.createElement('nav', ['nk-settings-nav'], { 'aria-label': 'Settings' });
+      this._nav.appendChild(this.createElement('slot', [], { name: 'user' }));
+      this._rows = document.createElement('div');
+      this._nav.appendChild(this._rows);
+      this._nav.appendChild(this.createElement('slot', [], { name: 'nav' }));
+      this._content = this.createElement('div', ['nk-settings-content']);
+      this._slot = document.createElement('slot');
+      this._content.appendChild(this._slot);
+      this._box.append(this._nav, this._content);
+      this._backdrop.appendChild(this._box);
+      this._wrapper.appendChild(this._backdrop);
+      this._syncOpen();
+      this.requestNav();
+    }
+
+    get panes() { return [...this.querySelectorAll(':scope > nk-settings-pane')]; }
+
+    /** Rebuilds the nav from the panes (debounced – panes upgrade after the modal). */
+    requestNav() {
+      if (this._navQueued) return;
+      this._navQueued = true;
+      queueMicrotask(() => { this._navQueued = false; this._buildNav(); });
+    }
+
+    _buildNav() {
+      if (!this._rows) return;
+      const panes = this.panes;
+      const labelled = panes.filter(p => p.getAttribute('label'));
+      this._rows.replaceChildren();
+      this._nav.style.display = (labelled.length || this.querySelector(':scope > [slot="nav"], :scope > [slot="user"]')) ? '' : 'none';
+      let lastGroup = null;
+      for (const pane of labelled) {
+        const group = pane.getAttribute('group');
+        if (group && group !== lastGroup) {
+          const label = this.createElement('div', ['nk-section-label']);
+          label.textContent = group;
+          this._rows.appendChild(label);
+          lastGroup = group;
+        }
+        const row = this.createElement('div', ['nk-tree-item'], { role: 'tab', tabindex: '0', 'data-pane': pane.name });
+        const icon = this.createElement('span', ['icon']);
+        icon.textContent = pane.getAttribute('icon') || '';
+        const text = this.createElement('span', ['label']);
+        text.textContent = pane.getAttribute('label');
+        row.append(icon, text);
+        this._rows.appendChild(row);
+      }
+      this._syncActive();
+    }
+
+    /** Marks the active pane and its nav row without rebuilding the rows (keeps focus). */
+    _syncActive() {
+      const panes = this.panes;
+      let current = this.getAttribute('pane');
+      if (!panes.some(p => p.name === current)) current = (panes.find(p => p.hasAttribute('active')) || panes[0])?.name ?? null;
+      for (const row of this._rows.querySelectorAll('[data-pane]')) {
+        const on = row.dataset.pane === current;
+        row.classList.toggle('active', on);
+        row.setAttribute('aria-selected', on ? 'true' : 'false');
+      }
+      for (const pane of panes) pane.active = pane.name === current;
+      this._current = current;
+    }
+
+    _syncOpen() {
+      const open = this.getBoolAttr('open');
+      this._backdrop.classList.toggle('open', open);
+      this._backdrop.inert = !open;
+      if (open === this._wasOpen) return;
+      this._wasOpen = open;
+      if (open) {
+        this._returnFocus = document.activeElement;
+        lockScroll();
+        this._undoInert = inertOutside(this);
+        requestAnimationFrame(() => {
+          const target = this._rows.querySelector('.nk-tree-item.active') || firstFocusable(this) || this._box;
+          target.focus({ preventScroll: true });
+        });
+      } else {
+        unlockScroll();
+        this._undoInert?.(); this._undoInert = null;
+        const back = this._returnFocus;
+        if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+        this._returnFocus = null;
+      }
+    }
+
+    setupEvents() {
+      this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+      this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); } };
+      this._onNavClick = (e) => { const row = e.target.closest('[data-pane]'); if (row) { row.focus(); this.pane = row.dataset.pane; } };
+      this._onNavKey = (e) => {
+        const row = e.target.closest?.('[data-pane]');
+        if (!row) return;
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.pane = row.dataset.pane; return; }
+        const dir = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+        if (!dir) return;
+        const rows = [...this._rows.querySelectorAll('[data-pane]')];
+        const next = rows[(rows.indexOf(row) + dir + rows.length) % rows.length];
+        e.preventDefault(); next.focus(); this.pane = next.dataset.pane;
+      };
+      this._onSlot = () => this.requestNav();
+      this._backdrop.addEventListener('click', this._onBackdrop);
+      document.addEventListener('keydown', this._onKey);
+      this._rows.addEventListener('click', this._onNavClick);
+      this._rows.addEventListener('keydown', this._onNavKey);
+      this._slot.addEventListener('slotchange', this._onSlot);
+    }
+
+    teardownEvents() {
+      this._backdrop?.removeEventListener('click', this._onBackdrop);
+      document.removeEventListener('keydown', this._onKey);
+      this._rows?.removeEventListener('click', this._onNavClick);
+      this._rows?.removeEventListener('keydown', this._onNavKey);
+      this._slot?.removeEventListener('slotchange', this._onSlot);
+      if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'open') {
+        this._syncOpen();
+        this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+      } else if (name === 'pane') {
+        const before = this._current;
+        this._syncActive();
+        if (this._current !== before) this.emit('nk-select', { value: this._current, label: this.panes.find(p => p.name === this._current)?.getAttribute('label') ?? this._current });
+      }
+    }
+
+    show(pane) { if (pane) this.setAttribute('pane', pane); this.setBoolAttr('open', true); }
+    close() { this.setBoolAttr('open', false); }
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get pane() { return this._current ?? this.getAttribute('pane'); }
+    set pane(v) { this.setAttribute('pane', v); }
+  }
+
+  customElements.define('nk-modal', NkModal);
+
+  // <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
+  // → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
+  // `label`, `icon` and `group` feed the nav that <nk-modal> renders; `title`
+  // renders the pane heading (child-combinator rule, so it lives here). Slotted
+  // <h2>/<h3> are styled by their twins.
+  class NkSettingsPane extends NkElement {
+    static get observedAttributes() { return ['name', 'label', 'icon', 'group', 'title', 'active']; }
+
+    render() {
+      this._section = this.createElement('section', ['nk-settings-pane'], { role: 'tabpanel' });
+      this._h2 = document.createElement('h2');
+      this._section.appendChild(this._h2);
+      this._section.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._section);
+      this._sync();
+    }
+
+    _sync() {
+      const title = this.getAttribute('title');
+      this._h2.textContent = title || '';
+      this._h2.style.display = title ? '' : 'none';
+      this._section.classList.toggle('active', this.getBoolAttr('active'));
+      this._section.setAttribute('aria-label', this.getAttribute('label') || title || this.getAttribute('name') || '');
+    }
+
+    onAttributeChanged(name) {
+      this._sync();
+      if (['label', 'icon', 'group', 'name'].includes(name)) this.closest('nk-modal')?.requestNav?.();
+    }
+
+    get name() { return this.getAttribute('name') ?? this.getAttribute('label') ?? ''; }
+    get active() { return this.getBoolAttr('active'); }
+    set active(v) { this.setBoolAttr('active', v); }
+  }
+
+  customElements.define('nk-settings-pane', NkSettingsPane);
+
+  // <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
+  // → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>
+  class NkSettingsUser extends NkElement {
+    static get observedAttributes() { return ['name', 'mail', 'avatar']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-settings-user']);
+      this._avatar = this.createElement('div', ['avatar']);
+      const s = this.createElement('slot', [], { name: 'avatar' });
+      s.appendChild(this._avatar);
+      const text = this.createElement('div', ['u-text']);
+      this._name = this.createElement('div', ['name']);
+      this._mail = this.createElement('div', ['mail']);
+      text.append(this._name, this._mail);
+      box.append(s, text);
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      const name = this.getAttribute('name') || '';
+      this._name.textContent = name;
+      const mail = this.getAttribute('mail');
+      this._mail.textContent = mail || '';
+      this._mail.style.display = mail ? '' : 'none';
+      this._avatar.textContent = this.getAttribute('avatar') || name.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+    }
+
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-settings-user', NkSettingsUser);
+
+  // Subsequence scoring for the command palette: every query character must
+  // appear in order; consecutive hits, word starts and an early first hit score
+  // higher. Returns 0 when the query does not match.
+  function fuzzyScore(query, text) {
+    const q = query.trim().toLowerCase();
+    if (!q) return 1;
+    const t = text.toLowerCase();
+    let ti = 0, score = 0, streak = 0;
+    for (let qi = 0; qi < q.length; qi++) {
+      const idx = t.indexOf(q[qi], ti);
+      if (idx < 0) return 0;
+      const wordStart = idx === 0 || /[\s\-_/.]/.test(t[idx - 1]);
+      streak = idx === ti ? streak + 1 : 0;
+      score += 1 + streak * 2 + (wordStart ? 3 : 0) - Math.min(3, (idx - ti) * 0.25);
+      ti = idx + 1;
+    }
+    if (t.startsWith(q)) score += 10;
+    return Math.max(0.01, score / (1 + t.length / 40));
+  }
+
+  // <nk-cmdk id="palette" placeholder="Search or type a command …"></nk-cmdk>
+  // palette.commands = [
+  //   { group: 'Pages',   items: [{ id: 'mvp', icon: '🚀', label: 'NotionKit MVP', keywords: 'project' }] },
+  //   { group: 'Actions', items: [{ id: 'theme', icon: '🌙', label: 'Toggle theme', shortcut: '⌘⇧L', action: () => … }] },
+  // ];
+  // → <div class="nk-cmdk-backdrop open"><div class="nk-cmdk"><div class="nk-cmdk-input-row">🔍<input><kbd>esc</kbd></div>
+  //     <div class="nk-cmdk-list">…</div><div class="nk-cmdk-footer">…</div></div></div>
+  // mod+K toggles (attribute `hotkey`), ↑↓ move, Enter picks (nk-command +
+  // item.action), Escape / backdrop close. Fuzzy subsequence search over
+  // label + keywords. Put the element directly under <body>.
+  class NkCmdk extends NkElement {
+    static get observedAttributes() { return ['open', 'hotkey', 'placeholder']; }
+
+    render() {
+      this._backdrop = this.createElement('div', ['nk-cmdk-backdrop']);
+      this._backdrop.inert = true;
+      this._box = this.createElement('div', ['nk-cmdk'], { role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Command palette' });
+      const row = this.createElement('div', ['nk-cmdk-input-row']);
+      const glass = document.createElement('span');
+      glass.style.fontSize = '15px';
+      glass.textContent = '🔍';
+      this._input = this.createElement('input', [], { type: 'text', autocomplete: 'off', role: 'combobox', 'aria-expanded': 'true', 'aria-autocomplete': 'list' });
+      const esc = this.createElement('kbd', ['nk-kbd']);
+      esc.textContent = 'esc';
+      row.append(glass, this._input, esc);
+      this._list = this.createElement('div', ['nk-cmdk-list'], { role: 'listbox', id: 'list' });
+      this._input.setAttribute('aria-controls', 'list');
+      this._footer = this.createElement('div', ['nk-cmdk-footer']);
+      const footerSlot = this.createElement('slot', [], { name: 'footer' });
+      footerSlot.innerHTML = '<span><kbd class="nk-kbd">↑</kbd><kbd class="nk-kbd">↓</kbd> navigate</span><span><kbd class="nk-kbd">↵</kbd> open</span><span><kbd class="nk-kbd">⌘</kbd><kbd class="nk-kbd">K</kbd> toggle</span>';
+      this._footer.appendChild(footerSlot);
+      this._box.append(row, this._list, this._footer);
+      this._backdrop.appendChild(this._box);
+      this._wrapper.appendChild(this._backdrop);
+      this._commands = [];
+      this._index = 0;
+      this._syncAttrs();
+      this._renderList();
+      this._syncOpen();
+    }
+
+    _syncAttrs() { this._input.placeholder = this.getAttribute('placeholder') || 'Search or type a command …'; }
+
+    /** Filtered, flat list in group order, best matches first within a group. */
+    results() {
+      const q = this._input?.value ?? '';
+      const out = [];
+      for (const group of this._commands) {
+        const scored = (group.items || []).map(item => ({ item, group: group.group, score: fuzzyScore(q, `${item.label} ${item.keywords || ''}`) })).filter(r => r.score > 0);
+        scored.sort((a, b) => b.score - a.score);
+        out.push(...scored);
+      }
+      return out;
+    }
+
+    _renderList() {
+      if (!this._list) return;
+      const results = this.results();
+      this._index = Math.min(this._index, Math.max(0, results.length - 1));
+      this._list.replaceChildren();
+      if (!results.length) {
+        const empty = this.createElement('div', ['nk-cmdk-empty']);
+        empty.textContent = `No results for “${this._input.value}”`;
+        this._list.appendChild(empty);
+        this._input.removeAttribute('aria-activedescendant');
+        return;
+      }
+      let lastGroup = null;
+      results.forEach((r, i) => {
+        if (r.group && r.group !== lastGroup) {
+          const g = this.createElement('div', ['nk-cmdk-group']);
+          g.textContent = r.group;
+          this._list.appendChild(g);
+          lastGroup = r.group;
+        }
+        const el = this.createElement('div', ['nk-cmdk-item'], { role: 'option', id: `opt-${i}`, 'data-index': i });
+        el.classList.toggle('selected', i === this._index);
+        el.setAttribute('aria-selected', i === this._index ? 'true' : 'false');
+        const icon = this.createElement('span', ['m-icon']);
+        icon.textContent = r.item.icon || '';
+        const label = document.createElement('span');
+        label.textContent = r.item.label;
+        el.append(icon, label);
+        if (r.item.shortcut) { const sc = this.createElement('span', ['m-shortcut']); sc.textContent = r.item.shortcut; el.appendChild(sc); }
+        this._list.appendChild(el);
+      });
+      this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+    }
+
+    _move(dir) {
+      const n = this.results().length;
+      if (!n) return;
+      this._index = (this._index + dir + n) % n;
+      for (const el of this._list.querySelectorAll('.nk-cmdk-item')) {
+        const on = Number(el.dataset.index) === this._index;
+        el.classList.toggle('selected', on);
+        el.setAttribute('aria-selected', on ? 'true' : 'false');
+        if (on) el.scrollIntoView({ block: 'nearest' });
+      }
+      this._input.setAttribute('aria-activedescendant', `opt-${this._index}`);
+    }
+
+    pick(index = this._index) {
+      const r = this.results()[index];
+      if (!r) return;
+      const query = this._input.value;
+      this.close();
+      const ok = this.emit('nk-command', { id: r.item.id ?? r.item.label, item: r.item, query });
+      if (ok && typeof r.item.action === 'function') r.item.action(r.item);
+    }
+
+    _matchesHotkey(e) {
+      const spec = (this.getAttribute('hotkey') || 'mod+k').toLowerCase().split('+');
+      const key = spec.pop();
+      const mod = spec.includes('mod') ? (e.metaKey || e.ctrlKey) : true;
+      const shift = spec.includes('shift') ? e.shiftKey : !e.shiftKey;
+      const alt = spec.includes('alt') ? e.altKey : !e.altKey;
+      return mod && shift && alt && e.key.toLowerCase() === key;
+    }
+
+    _syncOpen() {
+      const open = this.getBoolAttr('open');
+      this._backdrop.classList.toggle('open', open);
+      this._backdrop.inert = !open;
+      if (open === this._wasOpen) return;
+      this._wasOpen = open;
+      if (open) {
+        this._returnFocus = document.activeElement;
+        this._input.value = '';
+        this._index = 0;
+        this._renderList();
+        lockScroll();
+        this._undoInert = inertOutside(this);
+        requestAnimationFrame(() => this._input.focus({ preventScroll: true }));
+      } else {
+        unlockScroll();
+        this._undoInert?.(); this._undoInert = null;
+        const back = this._returnFocus;
+        if (back && typeof back.focus === 'function' && back.isConnected) back.focus({ preventScroll: true });
+        this._returnFocus = null;
+      }
+    }
+
+    setupEvents() {
+      this._onDocKey = (e) => {
+        if (this._matchesHotkey(e)) { e.preventDefault(); this.toggle(); return; }
+        if (e.key === 'Escape' && this.getBoolAttr('open')) { e.stopPropagation(); this.close(); }
+      };
+      this._onInput = () => { this._index = 0; this._renderList(); };
+      this._onInputKey = (e) => {
+        if (e.key === 'ArrowDown') { e.preventDefault(); this._move(1); }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); this._move(-1); }
+        else if (e.key === 'Enter') { e.preventDefault(); this.pick(); }
+      };
+      this._onListClick = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el) this.pick(Number(el.dataset.index)); };
+      this._onListMove = (e) => { const el = e.target.closest('.nk-cmdk-item'); if (el && Number(el.dataset.index) !== this._index) { this._index = Number(el.dataset.index); this._move(0); } };
+      this._onListDown = (e) => e.preventDefault();   // keep the input focused
+      this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+      document.addEventListener('keydown', this._onDocKey);
+      this._input.addEventListener('input', this._onInput);
+      this._input.addEventListener('keydown', this._onInputKey);
+      this._list.addEventListener('click', this._onListClick);
+      this._list.addEventListener('mousemove', this._onListMove);
+      this._list.addEventListener('mousedown', this._onListDown);
+      this._backdrop.addEventListener('click', this._onBackdrop);
+    }
+
+    teardownEvents() {
+      document.removeEventListener('keydown', this._onDocKey);
+      this._input?.removeEventListener('input', this._onInput);
+      this._input?.removeEventListener('keydown', this._onInputKey);
+      this._list?.removeEventListener('click', this._onListClick);
+      this._list?.removeEventListener('mousemove', this._onListMove);
+      this._list?.removeEventListener('mousedown', this._onListDown);
+      this._backdrop?.removeEventListener('click', this._onBackdrop);
+      if (this._wasOpen) { unlockScroll(); this._undoInert?.(); this._undoInert = null; this._wasOpen = false; }
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'open') { this._syncOpen(); this.emit('nk-toggle', { open: this.getBoolAttr('open') }); }
+      else this._syncAttrs();
+    }
+
+    show() { this.setBoolAttr('open', true); }
+    close() { this.setBoolAttr('open', false); }
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+    get commands() { return this._commands; }
+    set commands(list) { this._commands = Array.isArray(list) ? list : []; this._index = 0; this._renderList(); }
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get query() { return this._input?.value ?? ''; }
+    set query(v) { if (this._input) { this._input.value = v; this._index = 0; this._renderList(); } }
+  }
+
+  customElements.define('nk-cmdk', NkCmdk);
+
+  // <nk-menu>
+  //   <nk-menu-item type="label">Page</nk-menu-item>
+  //   <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+  //   <nk-menu-item type="separator"></nk-menu-item>
+  //   <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+  // </nk-menu>
+  // → <div class="nk-pop nk-menu" role="menu">…</div>
+  // ↑↓ move between items, Enter selects, nk-select bubbles from the item.
+  class NkMenu extends NkElement {
+    render() {
+      this._box = this.createElement('div', ['nk-pop', 'nk-menu'], { role: 'menu' });
+      this._box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(this._box);
+    }
+
+    get items() { return [...this.querySelectorAll(':scope > nk-menu-item')].filter(i => i.selectable); }
+
+    setupEvents() {
+      this._onKey = (e) => {
+        const dir = { ArrowDown: 1, ArrowUp: -1 }[e.key];
+        const current = e.target.closest?.('nk-menu-item');
+        const items = this.items;
+        if (!items.length) return;
+        if (dir) {
+          e.preventDefault();
+          const i = items.indexOf(current);
+          items[(i + dir + items.length) % items.length].focus();
+        } else if ((e.key === 'Enter' || e.key === ' ') && current) {
+          e.preventDefault(); current.select();
+        }
+      };
+      this.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() { this.removeEventListener('keydown', this._onKey); }
+
+    /** Focuses the first item (called by a popover when it opens). */
+    focusFirst() { this.items[0]?.focus(); }
+  }
+
+  customElements.define('nk-menu', NkMenu);
+
+  // <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
+  // <nk-menu-item type="separator"></nk-menu-item>   <nk-menu-item type="label">Danger</nk-menu-item>
+  // <nk-menu-item icon="🗑️" danger value="delete">Delete</nk-menu-item>
+  // → <div class="nk-menu-item danger"><span class="m-icon">🗑️</span>Delete<span class="m-shortcut">…</span></div>
+  class NkMenuItem extends NkElement {
+    static get observedAttributes() { return ['icon', 'shortcut', 'danger', 'value', 'type', 'disabled']; }
+
+    render() { this._build(); }
+
+    _build() {
+      const type = this.getAttribute('type');
+      let el;
+      if (type === 'separator') {
+        el = this.createElement('div', ['nk-menu-sep'], { role: 'separator' });
+      } else if (type === 'label') {
+        el = this.createElement('div', ['nk-menu-label']);
+        el.appendChild(document.createElement('slot'));
+      } else {
+        el = this.createElement('div', ['nk-menu-item'], { role: 'menuitem', tabindex: '-1' });
+        this._icon = this.createElement('span', ['m-icon']);
+        const iconSlot = this.createElement('slot', [], { name: 'icon' });
+        iconSlot.appendChild(this._icon);
+        this._shortcut = this.createElement('span', ['m-shortcut']);
+        el.append(iconSlot, document.createElement('slot'), this._shortcut);
+      }
+      if (this._el) { this._el.removeEventListener('click', this._onClick); this._el.replaceWith(el); } else this._wrapper.appendChild(el);
+      this._el = el;
+      if (this._onClick) el.addEventListener('click', this._onClick);
+      this._sync();
+    }
+
+    _sync() {
+      if (!this._el.classList.contains('nk-menu-item')) return;
+      const icon = this.getAttribute('icon');
+      this._icon.textContent = icon || '';
+      this._icon.style.display = icon ? '' : 'none';
+      const sc = this.getAttribute('shortcut');
+      this._shortcut.textContent = sc || '';
+      this._shortcut.style.display = sc ? '' : 'none';
+      this._el.classList.toggle('danger', this.getBoolAttr('danger'));
+      this._el.setAttribute('aria-disabled', this.getBoolAttr('disabled') ? 'true' : 'false');
+    }
+
+    setupEvents() {
+      this._onClick = () => this.select();
+      this._el.addEventListener('click', this._onClick);
+    }
+
+    teardownEvents() { this._el?.removeEventListener('click', this._onClick); }
+
+    select() {
+      if (!this._el.classList.contains('nk-menu-item') || this.getBoolAttr('disabled')) return;
+      this.emit('nk-select', { value: this.value, label: this.textContent.trim(), item: this });
+    }
+
+    onAttributeChanged(name) { name === 'type' ? this._build() : this._sync(); }
+    focus(o) { this._el?.focus(o); }
+    get selectable() { return this._el?.classList.contains('nk-menu-item') && !this.getBoolAttr('disabled'); }
+
+    get value() { return this.getAttribute('value') ?? this.textContent.trim(); }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-menu-item', NkMenuItem);
+
+  // <nk-pop placement="bottom-start">
+  //   <nk-btn slot="trigger" variant="secondary">Options</nk-btn>
+  //   <nk-menu>…</nk-menu>
+  // </nk-pop>
+  // The trigger stays in the light DOM; a click on it toggles `open`, outside
+  // clicks and Escape close. Content is wrapped in `.nk-pop` unless it brings
+  // its own surface (nk-menu, nk-emoji-picker) or `bare` is set. The only
+  // styling here is positioning – the surface look is the stylesheet's.
+  const popSheet = new CSSStyleSheet();
+  popSheet.replaceSync(`
+  .nk-pop-anchor { position: relative; display: inline-block; }
+  .nk-pop-float { display: none; position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 4px; }
+  :host([open]) .nk-pop-float { display: block; }
+  :host([placement="bottom-end"]) .nk-pop-float { left: auto; right: 0; }
+  :host([placement="top-start"]) .nk-pop-float { top: auto; bottom: 100%; margin: 0 0 4px; }
+  :host([placement="top-end"]) .nk-pop-float { top: auto; bottom: 100%; left: auto; right: 0; margin: 0 0 4px; }
+`);
+  const OWN_SURFACE = new Set(['nk-menu', 'nk-emoji-picker']);
+
+  class NkPop extends NkElement {
+    static get hostStyles() { return popSheet; }
+    static get observedAttributes() { return ['open', 'placement', 'bare']; }
+
+    render() {
+      const anchor = this.createElement('div', ['nk-pop-anchor']);
+      this._triggerSlot = this.createElement('slot', [], { name: 'trigger' });
+      this._float = this.createElement('div', ['nk-pop-float']);
+      this._surface = this.createElement('div', ['nk-pop']);
+      this._slot = document.createElement('slot');
+      this._surface.appendChild(this._slot);
+      this._float.appendChild(this._surface);
+      anchor.append(this._triggerSlot, this._float);
+      this._wrapper.appendChild(anchor);
+      this._syncSurface();
+    }
+
+    _syncSurface() {
+      const bare = this.getBoolAttr('bare') || this._slot.assignedElements().some(el => OWN_SURFACE.has(el.localName));
+      this._surface.className = bare ? '' : 'nk-pop';
+    }
+
+    setupEvents() {
+      this._onTrigger = (e) => {
+        if (!e.composedPath().some(n => n instanceof Element && n.getAttribute?.('slot') === 'trigger')) return;
+        e.stopPropagation();
+        this.toggle();
+      };
+      this._onDocClick = (e) => { if (this.getBoolAttr('open') && !e.composedPath().includes(this)) this.close(); };
+      this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+      this._onSelect = (e) => { if (e.target !== this) this.close(); };
+      this._onSlot = () => this._syncSurface();
+      this.addEventListener('click', this._onTrigger);
+      document.addEventListener('click', this._onDocClick);
+      document.addEventListener('keydown', this._onKey);
+      this._float.addEventListener('nk-select', this._onSelect);
+      this._slot.addEventListener('slotchange', this._onSlot);
+    }
+
+    teardownEvents() {
+      this.removeEventListener('click', this._onTrigger);
+      document.removeEventListener('click', this._onDocClick);
+      document.removeEventListener('keydown', this._onKey);
+      this._float?.removeEventListener('nk-select', this._onSelect);
+      this._slot?.removeEventListener('slotchange', this._onSlot);
+    }
+
+    onAttributeChanged(name) {
+      if (name === 'bare') this._syncSurface();
+      if (name === 'open') {
+        const open = this.getBoolAttr('open');
+        for (const el of this._triggerSlot.assignedElements()) el.setAttribute('aria-expanded', open ? 'true' : 'false');
+        this.emit('nk-toggle', { open });
+      }
+    }
+
+    show() { this.setBoolAttr('open', true); }
+    close() { this.setBoolAttr('open', false); }
+    toggle() { this.setBoolAttr('open', !this.getBoolAttr('open')); }
+
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get placement() { return this.getAttribute('placement') || 'bottom-start'; }
+    set placement(v) { this.setAttribute('placement', v); }
+  }
+
+  customElements.define('nk-pop', NkPop);
+
+  // Built-in emoji set for <nk-emoji-picker>: eight categories, names for
+  // search. Override with `picker.emojis = [{ char, name, cat }]`.
+  const C = (cat, icon, list) => list.map(([char, name]) => ({ char, name, cat, icon }));
+  const EMOJI_CATEGORIES = [
+    { id: 'smileys', icon: '😀' }, { id: 'people', icon: '👋' }, { id: 'nature', icon: '🌿' }, { id: 'food', icon: '☕' },
+    { id: 'activity', icon: '🎯' }, { id: 'travel', icon: '🚀' }, { id: 'objects', icon: '💡' }, { id: 'symbols', icon: '✅' },
+  ];
+  const EMOJI = [
+    ...C('smileys', '😀', [['😀', 'grinning'], ['😊', 'smile blush'], ['😂', 'joy laugh'], ['🙂', 'slight smile'], ['😉', 'wink'], ['😍', 'heart eyes love'], ['🤔', 'thinking'], ['😎', 'cool sunglasses'], ['🥳', 'party'], ['😴', 'sleep'], ['🤯', 'mind blown'], ['😅', 'sweat smile'], ['🙃', 'upside down'], ['😇', 'angel halo'], ['🤗', 'hug'], ['😢', 'cry sad']]),
+    ...C('people', '👋', [['👋', 'wave hello'], ['👍', 'thumbs up'], ['👎', 'thumbs down'], ['🙏', 'pray thanks'], ['👏', 'clap'], ['🤝', 'handshake deal'], ['💪', 'strong'], ['👀', 'eyes look'], ['🧠', 'brain knowledge'], ['❤️', 'heart love'], ['👤', 'person user'], ['👥', 'people team members'], ['🧑‍💻', 'developer'], ['🙋', 'raise hand'], ['✍️', 'writing'], ['🫶', 'heart hands']]),
+    ...C('nature', '🌿', [['🌿', 'leaf herb'], ['🌱', 'seedling'], ['🌳', 'tree'], ['🌸', 'blossom flower'], ['🌞', 'sun'], ['🌙', 'moon night'], ['⭐', 'star'], ['🔥', 'fire hot'], ['🌈', 'rainbow'], ['🌊', 'wave water'], ['🍀', 'clover luck'], ['🐝', 'bee'], ['🦋', 'butterfly'], ['🐢', 'turtle'], ['🌍', 'earth globe'], ['❄️', 'snow']]),
+    ...C('food', '☕', [['☕', 'coffee'], ['🍵', 'tea'], ['🍎', 'apple'], ['🍕', 'pizza'], ['🍰', 'cake'], ['🍪', 'cookie'], ['🥐', 'croissant'], ['🍔', 'burger'], ['🍜', 'noodles'], ['🍺', 'beer'], ['🍷', 'wine'], ['🥗', 'salad'], ['🍫', 'chocolate'], ['🍓', 'strawberry'], ['🥑', 'avocado'], ['🍩', 'donut']]),
+    ...C('activity', '🎯', [['🎯', 'target goal'], ['🏆', 'trophy win'], ['🎉', 'tada celebration'], ['🎨', 'art palette design'], ['🎙️', 'microphone podcast voice'], ['🎬', 'clapper movie'], ['🎮', 'game'], ['⚽', 'football'], ['🏃', 'run'], ['🧘', 'yoga calm'], ['🎵', 'music'], ['🎲', 'dice'], ['🏁', 'finish flag'], ['🎓', 'graduation learn'], ['🧩', 'puzzle piece'], ['🔁', 'repeat retro']]),
+    ...C('travel', '🚀', [['🚀', 'rocket launch'], ['✈️', 'plane travel'], ['🚗', 'car'], ['🚲', 'bike'], ['🏠', 'house home'], ['🏢', 'office building'], ['🗺️', 'map'], ['🧭', 'compass'], ['⛰️', 'mountain'], ['🏖️', 'beach'], ['🚉', 'station'], ['🛰️', 'satellite'], ['🌆', 'city'], ['🏕️', 'camping'], ['⛵', 'sailboat'], ['🛫', 'departure']]),
+    ...C('objects', '💡', [['💡', 'idea bulb'], ['📊', 'chart bar'], ['📈', 'chart up'], ['📅', 'calendar date'], ['📄', 'page document'], ['📁', 'folder'], ['🗃️', 'card box database'], ['📌', 'pin'], ['🔍', 'search'], ['🛠️', 'tools'], ['⚙️', 'gear settings'], ['🔔', 'bell notification'], ['💎', 'gem diamond'], ['📝', 'memo notes'], ['📎', 'paperclip files'], ['🔒', 'lock secure'], ['💬', 'speech comment'], ['📤', 'export outbox'], ['📥', 'inbox'], ['🗑️', 'trash bin'], ['🖥️', 'desktop'], ['📱', 'phone'], ['💻', 'laptop'], ['🧾', 'receipt']]),
+    ...C('symbols', '✅', [['✅', 'check done'], ['✨', 'sparkles ai magic'], ['❌', 'cross no'], ['⚠️', 'warning'], ['ℹ️', 'info'], ['❓', 'question'], ['➕', 'plus add'], ['➡️', 'arrow right'], ['🔴', 'red circle'], ['🟢', 'green circle'], ['🟡', 'yellow circle'], ['🔵', 'blue circle'], ['⏳', 'hourglass wait'], ['♻️', 'recycle'], ['🆕', 'new'], ['💯', 'hundred']]),
+  ];
+
+  // <nk-emoji-picker></nk-emoji-picker>
+  // → <div class="nk-pop"><input class="nk-emoji-search"><div class="nk-emoji-grid">…</div><div class="nk-emoji-cats">…</div></div>
+  // Built-in set with names for search; `picker.emojis = [{ char, name, cat }]`
+  // replaces it. A click fires nk-select { emoji }.
+  class NkEmojiPicker extends NkElement {
+    static get observedAttributes() { return ['placeholder', 'value']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-pop']);
+      this._search = this.createElement('input', ['nk-emoji-search'], { type: 'search', autocomplete: 'off', 'aria-label': 'Search emoji' });
+      this._grid = this.createElement('div', ['nk-emoji-grid'], { role: 'listbox' });
+      this._cats = this.createElement('div', ['nk-emoji-cats'], { role: 'tablist' });
+      this._box.append(this._search, this._grid, this._cats);
+      this._wrapper.appendChild(this._box);
+      this._emojis = EMOJI;
+      this._cat = EMOJI_CATEGORIES[0].id;
+      this._renderCats();
+      this._renderGrid();
+      this._syncAttrs();
+    }
+
+    _syncAttrs() { this._search.placeholder = this.getAttribute('placeholder') || 'Search…'; }
+
+    _renderCats() {
+      this._cats.replaceChildren();
+      const cats = this._categories();
+      for (const cat of cats) {
+        const el = this.createElement('span', [], { role: 'tab', 'data-cat': cat.id, title: cat.id });
+        el.textContent = cat.icon;
+        el.classList.toggle('active', cat.id === this._cat);
+        this._cats.appendChild(el);
+      }
+      this._cats.style.display = cats.length > 1 ? '' : 'none';
+    }
+
+    _categories() {
+      if (this._catList) return this._catList;
+      const seen = new Map();
+      for (const e of this._emojis) if (e.cat && !seen.has(e.cat)) seen.set(e.cat, { id: e.cat, icon: e.icon || EMOJI_CATEGORIES.find(c => c.id === e.cat)?.icon || e.char });
+      return [...seen.values()];
+    }
+
+    _renderGrid() {
+      const q = this._search.value.trim().toLowerCase();
+      const list = q ? this._emojis.filter(e => (e.name || '').toLowerCase().includes(q) || e.char === q) : this._emojis.filter(e => !e.cat || e.cat === this._cat);
+      this._grid.replaceChildren();
+      for (const e of list.slice(0, 64)) {
+        const s = this.createElement('span', [], { role: 'option', title: e.name || '', 'data-emoji': e.char });
+        s.textContent = e.char;
+        this._grid.appendChild(s);
+      }
+      for (const el of this._cats.children) el.classList.toggle('active', !q && el.dataset.cat === this._cat);
+    }
+
+    setupEvents() {
+      this._onInput = () => this._renderGrid();
+      this._onGrid = (e) => { const s = e.target.closest('[data-emoji]'); if (s) this.select(s.dataset.emoji); };
+      this._onCats = (e) => { const c = e.target.closest('[data-cat]'); if (!c) return; this._cat = c.dataset.cat; this._search.value = ''; this._renderGrid(); };
+      this._onKey = (e) => { if (e.key === 'Enter') { const first = this._grid.querySelector('[data-emoji]'); if (first) this.select(first.dataset.emoji); } };
+      this._search.addEventListener('input', this._onInput);
+      this._search.addEventListener('keydown', this._onKey);
+      this._grid.addEventListener('click', this._onGrid);
+      this._cats.addEventListener('click', this._onCats);
+    }
+
+    teardownEvents() {
+      this._search?.removeEventListener('input', this._onInput);
+      this._search?.removeEventListener('keydown', this._onKey);
+      this._grid?.removeEventListener('click', this._onGrid);
+      this._cats?.removeEventListener('click', this._onCats);
+    }
+
+    select(emoji) {
+      this.setAttribute('value', emoji);
+      this.emit('nk-select', { emoji, value: emoji });
+    }
+
+    onAttributeChanged() { this._syncAttrs(); }
+    focus(o) { this._search?.focus(o); }
+
+    /** Category strip override: [{ id, icon }]. Emojis without `cat` show in every category. */
+    get categories() { return this._categories(); }
+    set categories(list) { this._catList = Array.isArray(list) && list.length ? list : null; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+    get emojis() { return this._emojis; }
+    set emojis(list) { this._emojis = Array.isArray(list) ? list : EMOJI; this._cat = this._categories()[0]?.id; this._renderCats(); this._renderGrid(); }
+    get value() { return this.getAttribute('value'); }
+    set value(v) { this.setAttribute('value', v); }
+  }
+
+  customElements.define('nk-emoji-picker', NkEmojiPicker);
+
+  // <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
+  // → <div class="nk-toast show">✓ Saved</div>
+  // One node, bottom-centred, auto-hides after `duration` ms (default 2200).
+  class NkToast extends NkElement {
+    static get observedAttributes() { return ['open', 'duration', 'icon']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-toast'], { role: 'status', 'aria-live': 'polite' });
+      this._icon = document.createElement('span');
+      this._msg = document.createElement('span');
+      this._box.append(this._icon, this._msg, document.createElement('slot'));
+      this._wrapper.appendChild(this._box);
+      this._sync();
+    }
+
+    _sync() {
+      this._box.classList.toggle('show', this.getBoolAttr('open'));
+      const icon = this.getAttribute('icon') ?? '✓';
+      this._icon.textContent = icon;
+      this._icon.style.display = icon ? '' : 'none';
+    }
+
+    /** Shows `message` (or the slotted content when omitted) and hides it again after `duration`. */
+    show(message, { duration } = {}) {
+      if (message !== undefined) this._msg.textContent = message;
+      clearTimeout(this._timer);
+      this.setBoolAttr('open', true);
+      const ms = duration ?? Number(this.getAttribute('duration')) ?? 2200;
+      if (ms > 0) this._timer = setTimeout(() => this.close(), ms || 2200);
+    }
+
+    close() { clearTimeout(this._timer); this.setBoolAttr('open', false); }
+
+    onAttributeChanged(name) {
+      this._sync();
+      if (name === 'open') this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+    }
+
+    disconnectedCallback() { super.disconnectedCallback(); clearTimeout(this._timer); }
+
+    get open() { return this.getBoolAttr('open'); }
+    set open(v) { this.setBoolAttr('open', v); }
+    get message() { return this._msg?.textContent ?? ''; }
+    set message(v) { if (this._msg) this._msg.textContent = v; }
+  }
+
+  customElements.define('nk-toast', NkToast);
+
+  // <nk-database id="db" view="table" add-view>
+  //   <nk-table-view name="table" label="▦ Table" count></nk-table-view>
+  //   <nk-board-view name="board" label="▤ Board" group-by="status"></nk-board-view>
+  // </nk-database>
+  // db.columns = [{ key: 'name', label: 'Name', type: 'text', icon: '📄', title: true }, { key: 'status', type: 'select', options: [...] }, …];
+  // db.rows = [{ id: 1, icon: '🧭', name: '…', status: 'done', … }];
+  // → <div class="nk-database"><div class="nk-db-tabs">…</div>…active view…</div>
+  // The tabs come from the child views; data is pushed into every view.
+  class NkDatabase extends NkElement {
+    static get observedAttributes() { return ['view', 'add-view']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-database']);
+      this._tabs = this.createElement('div', ['nk-db-tabs'], { role: 'tablist' });
+      this._slot = document.createElement('slot');
+      this._box.append(this._tabs, this._slot);
+      this._wrapper.appendChild(this._box);
+      this._columns = []; this._rows = [];
+      this._sync();
+    }
+
+    get views() { return this._slot?.assignedElements().filter(el => /^nk-[a-z]+-view$/.test(el.localName)) ?? []; }
+
+    _sync() {
+      if (!this._tabs) return;
+      const views = this.views;
+      let current = this.getAttribute('view');
+      if (!views.some(v => v.name === current)) current = views[0]?.name ?? null;
+      this._tabs.replaceChildren();
+      for (const v of views) {
+        const tab = this.createElement('span', ['nk-db-tab'], { role: 'tab', 'data-view': v.name, tabindex: '0' });
+        tab.classList.toggle('active', v.name === current);
+        tab.setAttribute('aria-selected', v.name === current ? 'true' : 'false');
+        tab.append(document.createTextNode(v.getAttribute('label') || v.name));
+        const badge = v.hasAttribute('count') ? String(this._rows.length) : v.getAttribute('badge');
+        if (badge) { const b = this.createElement('span', ['badge']); b.textContent = badge; tab.appendChild(b); }
+        this._tabs.appendChild(tab);
+        v.hidden = v.name !== current;
+        // A method call, not a property write: a view that has not been upgraded
+        // yet would otherwise get an own `data` property that shadows its setter.
+        v.setData?.(this._columns, this._rows);
+      }
+      if (this.getBoolAttr('add-view')) {
+        const add = this.createElement('span', ['nk-db-tab'], { role: 'button', 'data-add': '', tabindex: '0' });
+        add.style.color = 'var(--nk-text-tertiary)';
+        add.textContent = '＋';
+        this._tabs.appendChild(add);
+      }
+      this._tabs.style.display = views.length ? '' : 'none';
+      this._current = current;
+    }
+
+    /** Views upgrade after the database; each one asks for a resync once rendered. */
+    requestSync() {
+      if (this._syncQueued) return;
+      this._syncQueued = true;
+      queueMicrotask(() => { this._syncQueued = false; this._sync(); });
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        const tab = e.target.closest('[data-view]');
+        if (tab) { this.view = tab.dataset.view; return; }
+        if (e.target.closest('[data-add]')) this.emit('nk-action', { action: 'add-view' });
+      };
+      this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.closest('[data-view],[data-add]')) { e.preventDefault(); e.target.click(); } };
+      this._onSlot = () => this._sync();
+      this._tabs.addEventListener('click', this._onClick);
+      this._tabs.addEventListener('keydown', this._onKey);
+      this._slot.addEventListener('slotchange', this._onSlot);
+      this._sync();
+    }
+
+    teardownEvents() {
+      this._tabs?.removeEventListener('click', this._onClick);
+      this._tabs?.removeEventListener('keydown', this._onKey);
+      this._slot?.removeEventListener('slotchange', this._onSlot);
+    }
+
+    onAttributeChanged(name) {
+      const before = this._current;
+      this._sync();
+      if (name === 'view' && this._current !== before) this.emit('nk-view-change', { view: this._current });
+    }
+
+    get columns() { return this._columns; }
+    set columns(v) { this._columns = Array.isArray(v) ? v : []; this._sync(); }
+    get rows() { return this._rows; }
+    set rows(v) { this._rows = Array.isArray(v) ? v : []; this._sync(); }
+    get view() { return this._current ?? this.getAttribute('view'); }
+    set view(v) { this.setAttribute('view', v); }
+    /** Re-renders every view after in-place row mutations. */
+    refresh() { this._sync(); }
+  }
+
+  customElements.define('nk-database', NkDatabase);
+
+  // Polymorphic property renderer for database views. Returns plain DOM built
+  // from NotionKit classes – deliberately not a custom element: every cell rule
+  // starts with `.nk-table`, so a cell inside its own shadow root would never
+  // be styled. Exported for consumers who render tables themselves.
+  //
+  // column: { key, label, type, icon, options: [{ value, label, color }], title }
+  // types: text | select | multi-select | date | person | checkbox | url | number | progress
+  const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
+  const COLORS = ['blue', 'green', 'orange', 'purple'];
+
+  function optionFor(column, value) {
+    const opts = column.options || [];
+    return opts.find(o => o.value === value) || opts.find(o => o.label === value) || null;
+  }
+
+  function tagFor(column, value) {
+    const opt = optionFor(column, value);
+    const color = opt?.color && COLORS.includes(opt.color) ? opt.color : 'blue';
+    return el('span', `nk-tag ${color}`, opt?.label ?? String(value));
+  }
+
+  function renderPropertyCell(column, value, row = {}) {
+    const type = column.type || 'text';
+    if (value === undefined || value === null || value === '') {
+      if (type === 'checkbox') return checkbox(column, false, row);
+      if (type === 'progress') return progress(0);
+      return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
+    }
+    switch (type) {
+      case 'select': return tagFor(column, value);
+      case 'multi-select': {
+        const wrap = el('span');
+        wrap.style.display = 'inline-flex'; wrap.style.gap = '4px'; wrap.style.flexWrap = 'wrap';
+        for (const v of Array.isArray(value) ? value : String(value).split(',').map(s => s.trim()).filter(Boolean)) wrap.appendChild(tagFor(column, v));
+        return wrap;
+      }
+      case 'date': return el('span', 'date-cell', String(value));
+      case 'person': {
+        const cell = el('span', 'person-cell');
+        const p = typeof value === 'string' ? { name: value } : value;
+        const avatar = el('span', 'mini-avatar', p.initials || p.avatar || (p.name || '').split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase());
+        avatar.style.background = p.color || 'var(--nk-text-tertiary)';
+        cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
+        return cell;
+      }
+      case 'checkbox': return checkbox(column, !!value, row);
+      case 'url': { const a = el('a', null, String(value).replace(/^https?:\/\//, '')); a.href = String(value); a.target = '_blank'; a.rel = 'noopener'; return a; }
+      case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString() : String(value));
+      case 'progress': return progress(Number(value) || 0);
+      default: {
+        if (column.title) {
+          const t = el('span', 'row-title');
+          if (row.icon) t.append(document.createTextNode(row.icon + ' '));
+          t.append(document.createTextNode(String(value)));
+          return t;
+        }
+        return el('span', null, String(value));
+      }
+    }
+  }
+
+  function checkbox(column, checked, row) {
+    const label = el('label', 'nk-check');
+    const input = el('input');
+    input.type = 'checkbox'; input.checked = checked;
+    input.dataset.key = column.key;
+    if (row.id != null) input.dataset.rowId = row.id;
+    label.appendChild(input);
+    return label;
+  }
+
+  function progress(value) {
+    const frag = document.createDocumentFragment();
+    const bar = el('span', 'nk-progress');
+    const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
+    bar.appendChild(fill);
+    frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+    return frag;
+  }
+
+  /** Sort comparator for a column type. */
+  function compareBy(column, dir = 1) {
+    const type = column.type || 'text';
+    return (a, b) => {
+      let x = a[column.key], y = b[column.key];
+      if (type === 'person') { x = x?.name ?? x ?? ''; y = y?.name ?? y ?? ''; }
+      if (type === 'number' || type === 'progress' || type === 'checkbox') return ((Number(x) || 0) - (Number(y) || 0)) * dir;
+      return String(x ?? '').localeCompare(String(y ?? ''), undefined, { numeric: true }) * dir;
+    };
+  }
+
+  // <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>
+  // Standalone: view.columns = […]; view.rows = […];  Inside <nk-database> the
+  // database pushes `data`. → <div class="nk-table-wrap"><table class="nk-table">…</table><div class="nk-new-row">＋ New page</div></div>
+  // Cells are plain markup from renderPropertyCell(); rows fire nk-select,
+  // checkboxes nk-change, headers nk-action { action: 'sort' } (and sort locally
+  // with `sortable`), the add row nk-action { action: 'new-row' }.
+  class NkTableView extends NkElement {
+    static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir']; }
+
+    render() {
+      this._wrap = this.createElement('div', ['nk-table-wrap']);
+      this._table = this.createElement('table', ['nk-table']);
+      this._thead = document.createElement('thead');
+      this._tbody = document.createElement('tbody');
+      this._table.append(this._thead, this._tbody);
+      this._newRow = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0' });
+      this._wrap.append(this._table, this._newRow);
+      this._wrapper.appendChild(this._wrap);
+      this._columns ??= []; this._rows ??= [];
+      this._render();
+      this.closest('nk-database')?.requestSync?.();
+    }
+
+    _sortedRows() {
+      const key = this.getAttribute('sort-key');
+      const col = this._columns.find(c => c.key === key);
+      if (!col) return this._rows;
+      return [...this._rows].sort(compareBy(col, this.getAttribute('sort-dir') === 'desc' ? -1 : 1));
+    }
+
+    _render() {
+      if (!this._thead) return;
+      const tr = document.createElement('tr');
+      for (const col of this._columns) {
+        const th = this.createElement('th', [], { 'data-key': col.key, scope: 'col' });
+        if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
+        th.appendChild(document.createTextNode(col.label ?? col.key));
+        if (col.key === this.getAttribute('sort-key')) th.appendChild(document.createTextNode(this.getAttribute('sort-dir') === 'desc' ? ' ↓' : ' ↑'));
+        if (col.width) th.style.width = col.width;
+        tr.appendChild(th);
+      }
+      this._thead.replaceChildren(tr);
+      this._tbody.replaceChildren();
+      for (const row of this._sortedRows()) {
+        const r = this.createElement('tr', [], { 'data-id': row.id ?? '' });
+        for (const col of this._columns) {
+          const td = document.createElement('td');
+          td.appendChild(renderPropertyCell(col, row[col.key], row));
+          r.appendChild(td);
+        }
+        this._tbody.appendChild(r);
+      }
+      this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+      this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        if (this._newRow.contains(e.target)) { this.emit('nk-action', { action: 'new-row' }); return; }
+        const th = e.target.closest('th[data-key]');
+        if (th) {
+          const key = th.dataset.key;
+          const dir = this.getAttribute('sort-key') === key && this.getAttribute('sort-dir') !== 'desc' ? 'desc' : 'asc';
+          const ok = this.emit('nk-action', { action: 'sort', key, value: dir });
+          if (ok && this.getBoolAttr('sortable')) { this.setAttribute('sort-key', key); this.setAttribute('sort-dir', dir); }
+          return;
+        }
+        if (e.target.closest('input[type=checkbox], a')) return;
+        const tr = e.target.closest('tr[data-id]');
+        if (tr) { const row = this._rowById(tr.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+      };
+      this._onChange = (e) => {
+        const input = e.target;
+        if (input.type !== 'checkbox') return;
+        const row = this._rowById(input.dataset.rowId);
+        if (row) row[input.dataset.key] = input.checked;
+        this.emit('nk-change', { row, key: input.dataset.key, value: input.checked });
+      };
+      this._onKey = (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === this._newRow) { e.preventDefault(); this.emit('nk-action', { action: 'new-row' }); } };
+      this._wrap.addEventListener('click', this._onClick);
+      this._wrap.addEventListener('change', this._onChange);
+      this._wrap.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._wrap?.removeEventListener('click', this._onClick);
+      this._wrap?.removeEventListener('change', this._onChange);
+      this._wrap?.removeEventListener('keydown', this._onKey);
+    }
+
+    _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+    onAttributeChanged() { this._render(); }
+
+    get name() { return this.getAttribute('name') || 'table'; }
+    get columns() { return this._columns; }
+    set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+    get rows() { return this._rows; }
+    set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+    set data({ columns, rows }) { this.setData(columns, rows); }
+    setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+    refresh() { this._render(); }
+  }
+
+  customElements.define('nk-table-view', NkTableView);
+
+  // <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
+  // Groups rows by a select column (default: the first select column); one
+  // column per option, in option order. Cards show the title column and the
+  // `meta-keys` (default: date and progress columns). Drag a card onto another
+  // column to change its value – the row is updated and nk-change fires.
+  // → <div class="nk-board active"><div class="nk-board-col">…</div>…</div>
+  class NkBoardView extends NkElement {
+    static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'group-by', 'title-key', 'meta-keys', 'new-row']; }
+
+    render() {
+      this._board = this.createElement('div', ['nk-board', 'active']);
+      this._wrapper.appendChild(this._board);
+      this._columns ??= []; this._rows ??= [];
+      this._render();
+      this.closest('nk-database')?.requestSync?.();
+    }
+
+    _groupColumn() {
+      const key = this.getAttribute('group-by');
+      return this._columns.find(c => c.key === key) || this._columns.find(c => c.type === 'select') || null;
+    }
+    _titleColumn() {
+      const key = this.getAttribute('title-key');
+      return this._columns.find(c => c.key === key) || this._columns.find(c => c.title) || this._columns[0] || null;
+    }
+    _metaColumns() {
+      const keys = (this.getAttribute('meta-keys') || '').split(',').map(s => s.trim()).filter(Boolean);
+      if (keys.length) return keys.map(k => this._columns.find(c => c.key === k)).filter(Boolean);
+      return this._columns.filter(c => c.type === 'date' || c.type === 'progress');
+    }
+
+    _render() {
+      if (!this._board) return;
+      this._board.replaceChildren();
+      const group = this._groupColumn(), title = this._titleColumn();
+      if (!group) return;
+      const options = group.options?.length ? group.options : [...new Set(this._rows.map(r => r[group.key]))].map(v => ({ value: v, label: String(v) }));
+      for (const opt of options) {
+        const col = this.createElement('div', ['nk-board-col'], { 'data-value': opt.value });
+        const header = this.createElement('div', ['nk-board-col-header']);
+        const cards = this._rows.filter(r => r[group.key] === opt.value || r[group.key] === opt.label);
+        const count = this.createElement('span', ['count']);
+        count.textContent = String(cards.length);
+        header.append(tagFor(group, opt.value), count);
+        col.appendChild(header);
+        for (const row of cards) {
+          const card = this.createElement('div', ['nk-card'], { draggable: 'true', 'data-id': row.id ?? '', tabindex: '0' });
+          const t = this.createElement('div', ['card-title']);
+          t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+          const meta = this.createElement('div', ['card-meta']);
+          for (const c of this._metaColumns()) {
+            const v = row[c.key];
+            if (v === undefined || v === null || v === '') continue;
+            const s = document.createElement('span');
+            if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+            else if (c.type === 'date') s.textContent = `📅 ${v}`;
+            else s.appendChild(renderPropertyCell(c, v, row));
+            meta.appendChild(s);
+          }
+          card.append(t, meta);
+          col.appendChild(card);
+        }
+        if (this.getBoolAttr('new-row')) {
+          const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': opt.value });
+          add.style.padding = '6px 10px';
+          add.textContent = '＋';
+          col.appendChild(add);
+        }
+        this._board.appendChild(col);
+      }
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        const add = e.target.closest('[data-add]');
+        if (add) { this.emit('nk-action', { action: 'new-row', value: add.dataset.add }); return; }
+        const card = e.target.closest('.nk-card');
+        if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+      };
+      this._onDragStart = (e) => { const card = e.target.closest?.('.nk-card'); if (!card) return; this._dragId = card.dataset.id; e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', card.dataset.id); } catch {} };
+      this._onDragOver = (e) => { if (this._dragId != null && e.target.closest('.nk-board-col')) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; } };
+      this._onDrop = (e) => {
+        const col = e.target.closest('.nk-board-col');
+        if (!col || this._dragId == null) return;
+        e.preventDefault();
+        this.move(this._dragId, col.dataset.value);
+        this._dragId = null;
+      };
+      this._board.addEventListener('click', this._onClick);
+      this._board.addEventListener('dragstart', this._onDragStart);
+      this._board.addEventListener('dragover', this._onDragOver);
+      this._board.addEventListener('drop', this._onDrop);
+    }
+
+    teardownEvents() {
+      this._board?.removeEventListener('click', this._onClick);
+      this._board?.removeEventListener('dragstart', this._onDragStart);
+      this._board?.removeEventListener('dragover', this._onDragOver);
+      this._board?.removeEventListener('drop', this._onDrop);
+    }
+
+    /** Moves a row into another column (sets the group value) and reports it. */
+    move(id, value) {
+      const row = this._rowById(id), group = this._groupColumn();
+      if (!row || !group || row[group.key] === value) return;
+      row[group.key] = value;
+      this._render();
+      this.emit('nk-change', { row, key: group.key, value });
+    }
+
+    _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+    onAttributeChanged() { this._render(); }
+
+    get name() { return this.getAttribute('name') || 'board'; }
+    get columns() { return this._columns; }
+    set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+    get rows() { return this._rows; }
+    set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+    set data({ columns, rows }) { this.setData(columns, rows); }
+    setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+    refresh() { this._render(); }
+  }
+
+  customElements.define('nk-board-view', NkBoardView);
+
+  // <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
+  // bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
+  // Composed from existing classes (nk-btn secondary small, nk-input, nk-tag):
+  // filter / sort buttons fire nk-action, chips remove on ×, search and chip
+  // changes fire nk-change { filters, search }. The wrapper is layout only.
+  class NkFilterBar extends NkElement {
+    static get observedAttributes() { return ['search', 'placeholder', 'no-filter', 'no-sort', 'value']; }
+
+    render() {
+      this._bar = document.createElement('div');
+      this._bar.style.cssText = 'display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0';
+      this._filterBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'filter' });
+      this._filterBtn.textContent = '⚲ Filter';
+      this._sortBtn = this.createElement('button', ['nk-btn', 'secondary', 'small'], { type: 'button', 'data-action': 'sort' });
+      this._sortBtn.textContent = '↕ Sort';
+      this._chips = document.createElement('span');
+      this._chips.style.cssText = 'display:inline-flex;gap:4px;flex-wrap:wrap';
+      this._input = this.createElement('input', ['nk-input'], { type: 'search', autocomplete: 'off' });
+      this._input.style.marginLeft = 'auto';
+      this._bar.append(this._filterBtn, this._sortBtn, this._chips, document.createElement('slot'), this._input);
+      this._wrapper.appendChild(this._bar);
+      this._filters = [];
+      this._sync();
+    }
+
+    _sync() {
+      this._filterBtn.style.display = this.getBoolAttr('no-filter') ? 'none' : '';
+      this._sortBtn.style.display = this.getBoolAttr('no-sort') ? 'none' : '';
+      this._input.style.display = this.getBoolAttr('search') ? '' : 'none';
+      this._input.placeholder = this.getAttribute('placeholder') || 'Search …';
+      if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+      this._chips.replaceChildren();
+      this._filters.forEach((f, i) => {
+        const chip = this.createElement('span', ['nk-tag', f.color || 'blue'], { 'data-index': i });
+        chip.style.cursor = 'pointer';
+        chip.textContent = `${f.label ?? `${f.key}: ${f.value}`} ×`;
+        chip.title = 'Remove filter';
+        this._chips.appendChild(chip);
+      });
+    }
+
+    setupEvents() {
+      this._onClick = (e) => {
+        const btn = e.target.closest('[data-action]');
+        if (btn) { this.emit('nk-action', { action: btn.dataset.action }); return; }
+        const chip = e.target.closest('[data-index]');
+        if (chip) { this._filters.splice(Number(chip.dataset.index), 1); this._sync(); this._emitChange(); }
+      };
+      this._onInput = () => { clearTimeout(this._debounce); this._debounce = setTimeout(() => this._emitChange(), 150); };
+      this._bar.addEventListener('click', this._onClick);
+      this._input.addEventListener('input', this._onInput);
+    }
+
+    teardownEvents() {
+      this._bar?.removeEventListener('click', this._onClick);
+      this._input?.removeEventListener('input', this._onInput);
+      clearTimeout(this._debounce);
+    }
+
+    _emitChange() { this.emit('nk-change', { filters: [...this._filters], search: this._input.value }); }
+    onAttributeChanged() { this._sync(); }
+
+    get filters() { return this._filters; }
+    set filters(v) { this._filters = Array.isArray(v) ? v : []; this._sync(); }
+    get value() { return this._input?.value ?? ''; }
+    set value(v) { if (this._input) this._input.value = v ?? ''; }
+    /** Applies filters + search to rows: equality per filter key, substring search over every string field. */
+    apply(rows) {
+      const q = this.value.trim().toLowerCase();
+      return rows.filter(r => this._filters.every(f => r[f.key] === f.value) && (!q || Object.values(r).some(v => String(typeof v === 'object' && v ? v.name ?? '' : v ?? '').toLowerCase().includes(q))));
+    }
+  }
+
+  customElements.define('nk-filter-bar', NkFilterBar);
+
+  // <nk-comments placeholder="Comment …" send-label="Send">
+  //   <nk-comment …>…</nk-comment>
+  // </nk-comments>
+  // → <div class="nk-comments">…<div class="nk-comment-input"><input class="nk-input"><button class="nk-btn primary small">Send</button></div></div>
+  // Enter or the button fires nk-submit { text } and clears the field.
+  class NkComments extends NkElement {
+    static get observedAttributes() { return ['placeholder', 'send-label', 'no-input', 'disabled']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-comments']);
+      box.appendChild(document.createElement('slot'));
+      this._row = this.createElement('div', ['nk-comment-input']);
+      this._input = this.createElement('input', ['nk-input'], { type: 'text', 'aria-label': 'Comment' });
+      this._btn = this.createElement('button', ['nk-btn', 'primary', 'small'], { type: 'button' });
+      this._row.append(this._input, this._btn);
+      box.appendChild(this._row);
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      this._input.placeholder = this.getAttribute('placeholder') || 'Comment …';
+      this._btn.textContent = this.getAttribute('send-label') || 'Send';
+      this._row.style.display = this.getBoolAttr('no-input') ? 'none' : '';
+      this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+    }
+
+    setupEvents() {
+      this._onSend = () => this.submit();
+      this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+      this._btn.addEventListener('click', this._onSend);
+      this._input.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._btn?.removeEventListener('click', this._onSend);
+      this._input?.removeEventListener('keydown', this._onKey);
+    }
+
+    submit() {
+      const text = this._input.value.trim();
+      if (!text) return;
+      const ok = this.emit('nk-submit', { text });
+      if (ok) this._input.value = '';
+    }
+
+    onAttributeChanged() { this._sync(); }
+    focus(o) { this._input?.focus(o); }
+    get value() { return this._input?.value ?? ''; }
+    set value(v) { if (this._input) this._input.value = v ?? ''; }
+  }
+
+  customElements.define('nk-comments', NkComments);
+
+  // <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
+  // → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
+  // slot="head" adds content after the name (e.g. an <nk-tag>).
+  class NkComment extends NkElement {
+    static get observedAttributes() { return ['author', 'time', 'avatar', 'color']; }
+
+    render() {
+      const box = this.createElement('div', ['nk-comment']);
+      this._avatar = this.createElement('span', ['mini-avatar']);
+      const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+      avatarSlot.appendChild(this._avatar);
+      const text = document.createElement('div');
+      this._head = this.createElement('div', ['c-head']);
+      this._author = document.createElement('b');
+      this._time = document.createTextNode('');
+      this._head.append(this._author, this.createElement('slot', [], { name: 'head' }), this._time);
+      const body = this.createElement('div', ['c-body']);
+      body.appendChild(document.createElement('slot'));
+      text.append(this._head, body);
+      box.append(avatarSlot, text);
+      this._wrapper.appendChild(box);
+      this._sync();
+    }
+
+    _sync() {
+      const author = this.getAttribute('author') || '';
+      this._author.textContent = author;
+      const time = this.getAttribute('time');
+      this._time.data = time ? ` · ${time}` : '';
+      this._avatar.textContent = this.getAttribute('avatar') || author.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase();
+      this._avatar.style.background = this.getAttribute('color') || 'var(--nk-text-tertiary)';
+    }
+
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-comment', NkComment);
+
+  // <nk-ai-thread><nk-ai-msg …>…</nk-ai-msg>…</nk-ai-thread>  →  <div class="nk-ai-thread">
+  class NkAiThread extends NkElement {
+    render() {
+      const box = this.createElement('div', ['nk-ai-thread'], { role: 'log', 'aria-live': 'polite' });
+      box.appendChild(document.createElement('slot'));
+      this._wrapper.appendChild(box);
+    }
+  }
+
+  customElements.define('nk-ai-thread', NkAiThread);
+
+  // <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
+  // <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">
+  //   Two tasks are open …
+  //   <button slot="actions" value="copy">📋 Copy</button><button slot="actions" value="retry">↻ Rephrase</button>
+  // </nk-ai-msg>
+  // → <div class="nk-ai-msg user"><span class="mini-avatar">MK</span><div class="a-body"><div class="a-name">You</div>…<div class="nk-ai-actions">…</div></div></div>
+  // Action buttons stay in the light DOM (slotted twins) and fire nk-action { action: value }.
+  class NkAiMsg extends NkElement {
+    static get observedAttributes() { return ['role', 'name', 'badge', 'avatar', 'color']; }
+
+    render() {
+      this._box = this.createElement('div', ['nk-ai-msg']);
+      this._avatar = this.createElement('span', ['mini-avatar']);
+      const avatarSlot = this.createElement('slot', [], { name: 'avatar' });
+      avatarSlot.appendChild(this._avatar);
+      const body = this.createElement('div', ['a-body']);
+      this._name = this.createElement('div', ['a-name']);
+      this._nameText = document.createTextNode('');
+      this._badge = document.createElement('span');
+      this._name.append(this._nameText, this._badge);
+      this._actions = this.createElement('div', ['nk-ai-actions']);
+      this._actionSlot = this.createElement('slot', [], { name: 'actions' });
+      this._actions.appendChild(this._actionSlot);
+      body.append(this._name, document.createElement('slot'), this._actions);
+      this._box.append(avatarSlot, body);
+      this._wrapper.appendChild(this._box);
+      this._sync();
+    }
+
+    _sync() {
+      const user = this.getAttribute('role') === 'user';
+      this._box.classList.toggle('user', user);
+      const name = this.getAttribute('name');
+      this._nameText.data = name || '';
+      const badge = this.getAttribute('badge');
+      this._badge.textContent = badge ? ` ${badge}` : '';
+      this._name.style.display = name ? '' : 'none';
+      this._avatar.textContent = this.getAttribute('avatar') || (user ? (name || 'U').slice(0, 2).toUpperCase() : '✨');
+      const color = this.getAttribute('color');
+      this._avatar.style.background = color || '';
+      this._actions.style.display = this._actionSlot.assignedElements().length ? '' : 'none';
+    }
+
+    setupEvents() {
+      this._onSlot = () => this._sync();
+      this._onClick = (e) => {
+        const btn = e.target.closest?.('button');
+        if (btn && this._actionSlot.assignedElements().includes(btn)) this.emit('nk-action', { action: btn.value || btn.textContent.trim(), value: btn.value || btn.textContent.trim() });
+      };
+      this._actionSlot.addEventListener('slotchange', this._onSlot);
+      this.addEventListener('click', this._onClick);
+      this._sync();
+    }
+
+    teardownEvents() {
+      this._actionSlot?.removeEventListener('slotchange', this._onSlot);
+      this.removeEventListener('click', this._onClick);
+    }
+
+    onAttributeChanged() { this._sync(); }
+  }
+
+  customElements.define('nk-ai-msg', NkAiMsg);
+
+  // <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
+  // → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>
+  // Enter or the send button fires nk-submit { text } and clears the field.
+  class NkAiInputRow extends NkElement {
+    static get observedAttributes() { return ['placeholder', 'value', 'disabled', 'icon']; }
+
+    render() {
+      this._row = this.createElement('div', ['nk-ai-input-row']);
+      this._icon = document.createElement('span');
+      this._icon.style.fontSize = '14px';
+      this._input = this.createElement('input', [], { type: 'text', 'aria-label': 'Message' });
+      this._btn = this.createElement('button', ['nk-ai-send'], { type: 'button', 'aria-label': 'Send' });
+      this._btn.textContent = '↑';
+      this._row.append(this._icon, this._input, this._btn);
+      this._wrapper.appendChild(this._row);
+      this._sync();
+    }
+
+    _sync() {
+      this._input.placeholder = this.getAttribute('placeholder') || 'Ask something …';
+      if (this.hasAttribute('value') && this._input.value !== this.getAttribute('value')) this._input.value = this.getAttribute('value');
+      this._input.disabled = this._btn.disabled = this.getBoolAttr('disabled');
+      const icon = this.getAttribute('icon') ?? '✨';
+      this._icon.textContent = icon;
+      this._icon.style.display = icon ? '' : 'none';
+    }
+
+    setupEvents() {
+      this._onSend = () => this.submit();
+      this._onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.submit(); } };
+      this._btn.addEventListener('click', this._onSend);
+      this._input.addEventListener('keydown', this._onKey);
+    }
+
+    teardownEvents() {
+      this._btn?.removeEventListener('click', this._onSend);
+      this._input?.removeEventListener('keydown', this._onKey);
+    }
+
+    submit() {
+      const text = this._input.value.trim();
+      if (!text || this.getBoolAttr('disabled')) return;
+      const ok = this.emit('nk-submit', { text });
+      if (ok) this._input.value = '';
+    }
+
+    onAttributeChanged() { this._sync(); }
+    focus(o) { this._input?.focus(o); }
+    get value() { return this._input?.value ?? ''; }
+    set value(v) { if (this._input) this._input.value = v ?? ''; }
+  }
+
+  customElements.define('nk-ai-input-row', NkAiInputRow);
+
+  exports.NkAiInputRow = NkAiInputRow;
+  exports.NkAiMsg = NkAiMsg;
+  exports.NkAiThread = NkAiThread;
+  exports.NkApp = NkApp;
+  exports.NkAvatarGroup = NkAvatarGroup;
+  exports.NkBanner = NkBanner;
+  exports.NkBlockHost = NkBlockHost;
+  exports.NkBoardView = NkBoardView;
+  exports.NkBreadcrumb = NkBreadcrumb;
+  exports.NkBtn = NkBtn;
+  exports.NkCallout = NkCallout;
+  exports.NkCheck = NkCheck;
+  exports.NkCmdk = NkCmdk;
+  exports.NkCode = NkCode;
+  exports.NkComment = NkComment;
+  exports.NkComments = NkComments;
+  exports.NkDangerZone = NkDangerZone;
+  exports.NkDatabase = NkDatabase;
+  exports.NkDivider = NkDivider;
+  exports.NkElement = NkElement;
+  exports.NkEmojiPicker = NkEmojiPicker;
+  exports.NkEmpty = NkEmpty;
+  exports.NkField = NkField;
+  exports.NkFilterBar = NkFilterBar;
+  exports.NkFormElement = NkFormElement;
+  exports.NkHeading = NkHeading;
+  exports.NkInput = NkInput;
+  exports.NkKbd = NkKbd;
+  exports.NkMemberList = NkMemberList;
+  exports.NkMemberRow = NkMemberRow;
+  exports.NkMention = NkMention;
+  exports.NkMenu = NkMenu;
+  exports.NkMenuItem = NkMenuItem;
+  exports.NkModal = NkModal;
+  exports.NkModelCard = NkModelCard;
+  exports.NkPage = NkPage;
+  exports.NkPageActions = NkPageActions;
+  exports.NkPageCover = NkPageCover;
+  exports.NkPageTitle = NkPageTitle;
+  exports.NkPop = NkPop;
+  exports.NkProfileRow = NkProfileRow;
+  exports.NkProgress = NkProgress;
+  exports.NkQuote = NkQuote;
+  exports.NkRadio = NkRadio;
+  exports.NkSectionLabel = NkSectionLabel;
+  exports.NkSegmented = NkSegmented;
+  exports.NkSelect = NkSelect;
+  exports.NkSettingsPane = NkSettingsPane;
+  exports.NkSettingsUser = NkSettingsUser;
+  exports.NkSidebar = NkSidebar;
+  exports.NkSkeleton = NkSkeleton;
+  exports.NkSlider = NkSlider;
+  exports.NkStat = NkStat;
+  exports.NkStats = NkStats;
+  exports.NkSwitch = NkSwitch;
+  exports.NkSynced = NkSynced;
+  exports.NkTab = NkTab;
+  exports.NkTableView = NkTableView;
+  exports.NkTabs = NkTabs;
+  exports.NkTag = NkTag;
+  exports.NkTemplateBtn = NkTemplateBtn;
+  exports.NkTextarea = NkTextarea;
+  exports.NkThemeToggle = NkThemeToggle;
+  exports.NkToast = NkToast;
+  exports.NkTodo = NkTodo;
+  exports.NkToggle = NkToggle;
+  exports.NkTopbar = NkTopbar;
+  exports.NkTree = NkTree;
+  exports.NkTreeItem = NkTreeItem;
+  exports.NkWorkspaceSwitcher = NkWorkspaceSwitcher;
+  exports.compareBy = compareBy;
+  exports.renderPropertyCell = renderPropertyCell;
+  exports.tagFor = tagFor;
+
+  return exports;
+
+})({});