@extable/core 0.3.8 → 0.3.9

package/dist/core.css

@@ -1 +1 @@
-.extable-root{--extable-border: 1px solid #dadce0;--extable-accent: #3b82f6;--extable-invalid: #ef4444;--extable-header-bg: #e5e7eb;--extable-formula-readonly-fg: #99aaff;--extable-unique-dot-default: var(--extable-accent);--extable-unique-dot-current: #ff3b30;--extable-unique-dot-previous: #b0b0b0;border:1px solid #d0d7de;box-sizing:border-box}.extable-root .extable-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;position:relative;font-family:Inter,Segoe UI,system-ui,-apple-system,Helvetica Neue,sans-serif;overflow:visible}.extable-root .extable-viewport{flex:1;flex-basis:0;min-width:0;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;background:transparent;border:none;box-sizing:border-box}.extable-root .extable-overlay-layer{position:sticky;top:0;left:0;width:0;height:0;pointer-events:none;z-index:20}.extable-root.extable-loading .extable-shell:after{content:"";position:absolute;inset:0;background:#ffffffa6;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:20}.extable-root.extable-loading .extable-shell:before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin-left:-14px;margin-top:-14px;border-radius:9999px;border:3px solid rgba(148,163,184,.5);border-top-color:#3b82f6e6;animation:extable-spin .9s linear infinite;z-index:21}.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]{border-collapse:collapse;width:100%;background:transparent;table-layout:fixed;font-size:14px;line-height:16px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th{position:sticky;top:0;z-index:5}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th.extable-corner{left:0;z-index:7}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) th{position:relative;background:var(--extable-header-bg);border:1px solid #d0d7de;padding:4px 8px;font-weight:700;text-align:left}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th:not(.extable-row-header):after{content:"";position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td{border:1px solid #d0d7de;padding:4px 8px;min-width:80px;cursor:cell;font-weight:400}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td:focus-within{outline:2px solid #2b7fff;outline-offset:-1px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td.pending{color:#b91c1c}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input{border:none;padding:2px 4px;width:100%;box-sizing:border-box;background:#fff;font:inherit}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input:focus{outline:none}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) th.extable-row-header{position:sticky;left:0;text-align:center;z-index:6}.extable-root table[data-extable-renderer=canvas-html-overlay]{opacity:0}.extable-root .extable-cell{border:var(--extable-border);padding:4px 8px;position:relative}.extable-root .extable-cell.invalid{outline:1px solid var(--extable-invalid)}.extable-root .extable-editor-input{background:#fff;color:#0f172a;opacity:1}.extable-root .extable-diag-warning:before,.extable-root .extable-diag-error:before{content:"";position:absolute;top:0;right:0;width:10px;height:10px;background:linear-gradient(225deg,#f59e0b 50%,transparent 50%)}.extable-root .extable-diag-error:before{background:linear-gradient(225deg,#ef4444 50%,transparent 50%)}.extable-root .extable-row-header{position:sticky;left:0;background:var(--extable-header-bg);text-align:center;vertical-align:middle;line-height:16px;padding:0;border:var(--extable-border);font-weight:600;color:#334155;z-index:4;cursor:default}.extable-root .extable-corner{position:sticky;top:0;left:0;z-index:6;background:var(--extable-header-bg);padding:0}.extable-root .extable-corner:after{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;background:linear-gradient(135deg,#9ca3af 50%,transparent 50%)}.extable-root .extable-active-row-header,.extable-root .extable-active-col-header{background:#3b82f629}.extable-root .extable-selected{background:#3b82f61f!important}.extable-root td.extable-selected{cursor:cell}.extable-root td.extable-active-cell.extable-editable{cursor:text}.extable-root td.extable-active-cell.extable-readonly,.extable-root td.extable-active-cell.extable-boolean{cursor:default}.extable-root .extable-all-selected td,.extable-root .extable-all-selected th{background:#3b82f614!important}.extable-root .extable-active-cell{outline:2px solid var(--extable-accent);outline-offset:-2px;position:relative}.extable-root .extable-active-cell:after{content:"";position:absolute;width:12px;height:12px;right:1px;bottom:1px;background:var(--extable-accent);border:1px solid #ffffff;cursor:crosshair;opacity:0}.extable-root[data-extable-fill-handle="1"] .extable-active-cell:after{opacity:1}.extable-root .extable-readonly-muted{background:#f3f4f6!important;color:#94a3b8!important}.extable-root .extable-readonly-formula{color:var(--extable-formula-readonly-fg)}.extable-root td.extable-disabled{cursor:default}.extable-root .extable-action-button,.extable-root .extable-action-link{display:inline-flex;align-items:center;gap:4px;max-width:100%;font:inherit;color:inherit;background:transparent;border:none;padding:0;cursor:pointer;text-decoration:none}.extable-root .extable-action-button{padding:4px 10px;border-radius:8px;border:1px solid #94a3b8;background:linear-gradient(180deg,#f8fafc,#e2e8f0);color:#0f172a;box-shadow:0 1px #0f172a14,inset 0 1px #ffffffe6;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform 80ms ease}.extable-root .extable-action-button:hover,.extable-root .extable-action-button:focus-visible{background:linear-gradient(180deg,#fff,#e2e8f0);border-color:#64748b;box-shadow:0 2px #0f172a1f,inset 0 1px #fffffff2;outline:none}.extable-root .extable-action-button:active{transform:translateY(1px);box-shadow:0 0 #0f172a1f,inset 0 1px #ffffffd9}.extable-root .extable-action-link{color:#2563eb;text-decoration:underline;text-underline-offset:2px}.extable-root .extable-action-disabled{color:#94a3b8;border-color:#e2e8f0;background:linear-gradient(180deg,#f8fafc,#e5e7eb);cursor:default;text-decoration:none;box-shadow:none}.extable-root .extable-tag-list{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.extable-root .extable-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #cbd5e1;background:#e2e8f0;color:#0f172a;font-size:12px;line-height:1.2;white-space:nowrap}.extable-root .extable-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;border:none;background:transparent;color:#475569;cursor:pointer;padding:0}.extable-root .extable-tag-remove:hover,.extable-root .extable-tag-remove:focus-visible{outline:none;background:#94a3b866;color:#0f172a}.extable-root .extable-tag-remove:disabled{opacity:.6;cursor:default}.extable-root tr.extable-row--unique-true>td{background:#3b82f60f!important}.extable-root .extable-unique-radio{width:14px;height:14px;margin:0;display:inline-block;vertical-align:middle;border-radius:999px;border:1.5px solid #94a3b8;background-color:transparent;cursor:pointer;box-sizing:border-box}.extable-root .extable-unique-radio.extable-unique-dot-default{border-color:var(--extable-unique-dot-default);background:radial-gradient(circle at center,var(--extable-unique-dot-default) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-dot-current{border-color:var(--extable-unique-dot-current);background:radial-gradient(circle at center,var(--extable-unique-dot-current) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-dot-previous{border-color:var(--extable-unique-dot-previous);background:radial-gradient(circle at center,var(--extable-unique-dot-previous) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-radio--disabled{opacity:.6;cursor:default}.extable-root td.extable-selected.extable-readonly-muted{background:#3b82f61f!important}.extable-root .extable-all-selected td.extable-readonly-muted,.extable-root .extable-all-selected th.extable-readonly-muted{background:#3b82f614!important}.extable-root.extable-readonly-all .extable-readonly-muted{background:inherit!important;color:inherit!important}.extable-root.extable-readonly-all .extable-readonly-formula{color:inherit!important}.extable-root.extable-readonly-all table[data-extable-renderer=html] tbody td,.extable-root.extable-readonly-all table[data-extable-renderer=canvas-html-overlay] tbody td{cursor:cell}.extable-root.extable-readonly-all td.extable-active-cell{cursor:cell!important}.extable-root.extable-readonly-all .extable-active-cell:after{cursor:cell}.extable-root .extable-col-header{position:relative;display:block;min-width:0;cursor:default}.extable-root .extable-col-header-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extable-root .extable-filter-sort-trigger{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:1px solid rgba(148,163,184,.55);border-radius:6px;background:#ffffffb3;cursor:pointer;opacity:0;display:none;align-items:center;justify-content:center;z-index:1;line-height:1;color:#0f172abf}.extable-root .extable-filter-sort-trigger:hover,.extable-root .extable-filter-sort-trigger:focus-visible{opacity:1;outline:none;background:#ffffffeb;border-color:#3b82f6b3;color:#0f172aeb}.extable-root th:hover .extable-filter-sort-trigger{display:inline-flex;opacity:.55}.extable-root th[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th[data-extable-sort-dir] .extable-filter-sort-trigger{display:inline-flex;opacity:.75}.extable-root th:hover[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th:hover[data-extable-sort-dir] .extable-filter-sort-trigger{display:inline-flex;opacity:1}.extable-root th:hover .extable-col-header,.extable-root th[data-extable-fs-active="1"] .extable-col-header,.extable-root th[data-extable-sort-dir] .extable-col-header{padding-right:28px}.extable-root .cell-nowrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.extable-root .cell-wrap{white-space:pre-wrap;text-overflow:clip;overflow-wrap:anywhere}.extable-root .align-left{text-align:left}.extable-root .align-right{text-align:right}.extable-root td[data-extable-diag-message]:hover:after{content:attr(data-extable-diag-message);position:absolute;top:6px;left:calc(100% + 10px);max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap;z-index:20}.extable-root td[data-extable-diag-message]:hover:before{content:"";position:absolute;top:14px;left:calc(100% + 2px);width:0;height:0;border:7px solid transparent;border-right-color:#111827;z-index:21}.extable-root .extable-context-menu{border:none;padding:6px 0;border-radius:8px;background:#fffffffa;box-shadow:0 18px 38px #00000040,0 8px 12px #0000002e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:200px;position:fixed;margin:0;inset:auto;z-index:1000;pointer-events:auto}.extable-root .extable-context-menu::backdrop{background:transparent}.extable-root .extable-context-menu hr.extable-context-sep{border:0;border-top:1px solid #e5e7eb;margin:6px 0}.extable-root .extable-context-menu button{display:flex;gap:8px;align-items:center;width:100%;padding:8px 14px;background:transparent;border:none;font:inherit;text-align:left;cursor:pointer}.extable-root .extable-context-menu button:hover,.extable-root .extable-context-menu button:focus-visible{background:#3b82f61f;outline:none}.extable-root .extable-filter-sort-sidebar{flex:0 0 0px;width:0px;min-width:0;border:1px solid rgba(148,163,184,.45);background:#fffffffa;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;flex-direction:column;gap:10px;padding:0;transform:translate(12px);opacity:0;pointer-events:none;overflow:hidden;visibility:hidden;transition:flex-basis .18s ease-out,width .18s ease-out,padding .18s ease-out,border-width .18s ease-out,opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s;border-width:0}.extable-root.extable-filter-sort-open .extable-filter-sort-sidebar{flex-basis:440px;width:440px;padding:12px;opacity:1;transform:translate(0);pointer-events:auto;visibility:visible;border-width:1px;transition:flex-basis .18s ease-out,width .18s ease-out,padding .18s ease-out,border-width .18s ease-out,opacity .18s ease-out,transform .18s ease-out,visibility 0s linear 0s}.extable-root .extable-filter-sort-sidebar input[type=checkbox]{width:16px;height:16px;accent-color:#0f172a;vertical-align:middle}@keyframes extable-spin{to{transform:rotate(360deg)}}.extable-root .extable-filter-sort-header{display:flex;flex-direction:column;gap:8px}.extable-root .extable-filter-sort-row{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}.extable-root .extable-filter-sort-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-close{width:28px;height:28px;border-radius:8px;border:1px solid rgba(148,163,184,.5);background:#fffc;cursor:pointer}.extable-root .extable-filter-sort-close:hover,.extable-root .extable-filter-sort-close:focus-visible{outline:none;border-color:#3b82f6b3;background:#e2e8f0e6}.extable-root .extable-filter-sort-body{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1;overflow:hidden;border:1px solid rgba(148,163,184,.35);border-radius:0;padding:10px;background:#f8fafcb3}.extable-root .extable-filter-sort-section{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:10px;background:#fff}.extable-root .extable-filter-sort-section-filter{flex:1;min-height:0}.extable-root .extable-filter-sort-section-sort{flex:0 0 auto}.extable-root .extable-filter-sort-section-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-values{min-height:0;flex:1;overflow:auto;border:1px solid rgba(148,163,184,.35);border-radius:10px;padding:8px;background:#ffffffe6}.extable-root .extable-filter-sort-values label{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:6px;border-radius:8px}.extable-root .extable-filter-sort-values label:hover{background:#3b82f614}.extable-root .extable-filter-sort-actions{display:flex;gap:8px;flex-wrap:nowrap}.extable-root .extable-filter-sort-actions label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.extable-root .extable-filter-sort-actions[data-align=split]{justify-content:space-between}.extable-root .extable-filter-sort-actions[data-align=split] button[data-extable-fs=select-none]{margin-right:auto}.extable-root .extable-filter-sort-actions[data-align=right]{justify-content:flex-end}.extable-root .extable-filter-sort-actions button{padding:6px 12px;border-radius:10px;border:1px solid rgba(100,116,139,.6);background:linear-gradient(180deg,#fff,#e2e8f0);box-shadow:0 1px #0f172a14,inset 0 1px #ffffffe6;cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform 80ms ease}.extable-root .extable-filter-sort-actions button:hover,.extable-root .extable-filter-sort-actions button:focus-visible{outline:none;border-color:#3b82f6b3;background:linear-gradient(180deg,#fff,#dbeafe);box-shadow:0 2px #0f172a1f,inset 0 1px #fffffff2}.extable-root .extable-filter-sort-actions button:active{transform:translateY(1px);box-shadow:0 0 #0f172a1f,inset 0 1px #ffffffd9}.extable-root .extable-filter-sort-actions button[data-extable-fs=apply-filter],.extable-root .extable-filter-sort-actions button[data-active="1"]{background:linear-gradient(180deg,#0f172a,#1e293b);color:#f8fafc;border-color:#0f172a;box-shadow:0 2px #0f172a4d,inset 0 1px #ffffff14}.extable-tooltip{position:absolute;pointer-events:none;z-index:9999;display:none;max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap}.extable-tooltip[data-visible="1"]{display:block}.extable-tooltip:after{content:"";position:absolute;top:10px;width:0;height:0;border:7px solid transparent}.extable-tooltip[data-side=right]:after{left:-14px;border-right-color:#111827}.extable-tooltip[data-side=left]:after{right:-14px;border-left-color:#111827}.extable-lookup-dropdown{display:none;max-width:420px;max-height:240px;overflow:auto;padding:6px;border-radius:10px;background:#fffffffa;border:1px solid rgba(148,163,184,.55);box-shadow:0 18px 38px #00000038,0 8px 12px #00000024;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.extable-lookup-dropdown[data-visible="1"]{display:block}.extable-lookup-option{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:none;background:transparent;cursor:pointer;font:inherit}.extable-lookup-option:hover,.extable-lookup-option:focus-visible,.extable-lookup-option[data-active="1"]{outline:none;background:#3b82f61f}.extable-root .extable-toast{border-radius:8px;padding:10px 14px;background:#19191ceb;color:#f8fafc;box-shadow:0 12px 30px #00000047,0 6px 12px #0000002e;font-size:13px;max-width:320px;line-height:1.4}.extable-root .extable-toast[data-variant=error]{background:#dc2626eb}
+.extable-root{--extable-border: 1px solid #dadce0;--extable-accent: #3b82f6;--extable-invalid: #ef4444;--extable-header-bg: #e5e7eb;--extable-formula-readonly-fg: #99aaff;--extable-unique-dot-default: var(--extable-accent);--extable-unique-dot-current: #ff3b30;--extable-unique-dot-previous: #b0b0b0;width:100%;height:100%;min-width:0;min-height:0;border:1px solid #d0d7de;box-sizing:border-box}.extable-root .extable-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;position:relative;font-family:Inter,Segoe UI,system-ui,-apple-system,Helvetica Neue,sans-serif;overflow:visible}.extable-root .extable-viewport{flex:1;flex-basis:0;min-width:0;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;background:transparent;border:none;box-sizing:border-box}.extable-root .extable-overlay-layer{position:sticky;top:0;left:0;width:0;height:0;pointer-events:none;z-index:20}.extable-root.extable-loading .extable-shell:after{content:"";position:absolute;inset:0;background:#ffffffa6;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:20}.extable-root.extable-loading .extable-shell:before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin-left:-14px;margin-top:-14px;border-radius:9999px;border:3px solid rgba(148,163,184,.5);border-top-color:#3b82f6e6;animation:extable-spin .9s linear infinite;z-index:21}.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]{border-collapse:collapse;width:100%;background:transparent;table-layout:fixed;font-size:14px;line-height:16px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th{position:sticky;top:0;z-index:5}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th.extable-corner{left:0;z-index:7}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) th{position:relative;background:var(--extable-header-bg);border:1px solid #d0d7de;padding:4px 8px;font-weight:700;text-align:left}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th:not(.extable-row-header):after{content:"";position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td{border:1px solid #d0d7de;padding:4px 8px;min-width:80px;cursor:cell;font-weight:400}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td:focus-within{outline:2px solid #2b7fff;outline-offset:-1px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td.pending{color:#b91c1c}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input{border:none;padding:2px 4px;width:100%;box-sizing:border-box;background:#fff;font:inherit}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input:focus{outline:none}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) th.extable-row-header{position:sticky;left:0;text-align:center;z-index:6}.extable-root table[data-extable-renderer=canvas-html-overlay]{opacity:0}.extable-root .extable-cell{border:var(--extable-border);padding:4px 8px;position:relative}.extable-root .extable-cell.invalid{outline:1px solid var(--extable-invalid)}.extable-root .extable-editor-input{background:#fff;color:#0f172a;opacity:1}.extable-root .extable-diag-warning:before,.extable-root .extable-diag-error:before{content:"";position:absolute;top:0;right:0;width:10px;height:10px;background:linear-gradient(225deg,#f59e0b 50%,transparent 50%)}.extable-root .extable-diag-error:before{background:linear-gradient(225deg,#ef4444 50%,transparent 50%)}.extable-root .extable-row-header{position:sticky;left:0;background:var(--extable-header-bg);text-align:center;vertical-align:middle;line-height:16px;padding:0;border:var(--extable-border);font-weight:600;color:#334155;z-index:4;cursor:default}.extable-root .extable-corner{position:sticky;top:0;left:0;z-index:6;background:var(--extable-header-bg);padding:0}.extable-root .extable-corner:after{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;background:linear-gradient(135deg,#9ca3af 50%,transparent 50%)}.extable-root .extable-active-row-header,.extable-root .extable-active-col-header{background:#3b82f629}.extable-root .extable-selected{background:#3b82f61f!important}.extable-root td.extable-selected{cursor:cell}.extable-root td.extable-active-cell.extable-editable{cursor:text}.extable-root td.extable-active-cell.extable-readonly,.extable-root td.extable-active-cell.extable-boolean{cursor:default}.extable-root .extable-all-selected td,.extable-root .extable-all-selected th{background:#3b82f614!important}.extable-root .extable-active-cell{outline:2px solid var(--extable-accent);outline-offset:-2px;position:relative}.extable-root .extable-active-cell:after{content:"";position:absolute;width:12px;height:12px;right:1px;bottom:1px;background:var(--extable-accent);border:1px solid #ffffff;cursor:crosshair;opacity:0}.extable-root[data-extable-fill-handle="1"] .extable-active-cell:after{opacity:1}.extable-root .extable-readonly-muted{background:#f3f4f6!important;color:#94a3b8!important}.extable-root .extable-readonly-formula{color:var(--extable-formula-readonly-fg)}.extable-root td.extable-disabled{cursor:default}.extable-root .extable-action-button,.extable-root .extable-action-link{display:inline-flex;align-items:center;gap:4px;max-width:100%;font:inherit;color:inherit;background:transparent;border:none;padding:0;cursor:pointer;text-decoration:none}.extable-root .extable-action-button{padding:4px 10px;border-radius:8px;border:1px solid #94a3b8;background:linear-gradient(180deg,#f8fafc,#e2e8f0);color:#0f172a;box-shadow:0 1px #0f172a14,inset 0 1px #ffffffe6;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform 80ms ease}.extable-root .extable-action-button:hover,.extable-root .extable-action-button:focus-visible{background:linear-gradient(180deg,#fff,#e2e8f0);border-color:#64748b;box-shadow:0 2px #0f172a1f,inset 0 1px #fffffff2;outline:none}.extable-root .extable-action-button:active{transform:translateY(1px);box-shadow:0 0 #0f172a1f,inset 0 1px #ffffffd9}.extable-root .extable-action-link{color:#2563eb;text-decoration:underline;text-underline-offset:2px}.extable-root .extable-action-disabled{color:#94a3b8;border-color:#e2e8f0;background:linear-gradient(180deg,#f8fafc,#e5e7eb);cursor:default;text-decoration:none;box-shadow:none}.extable-root .extable-tag-list{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.extable-root .extable-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #cbd5e1;background:#e2e8f0;color:#0f172a;font-size:12px;line-height:1.2;white-space:nowrap}.extable-root .extable-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;border:none;background:transparent;color:#475569;cursor:pointer;padding:0}.extable-root .extable-tag-remove:hover,.extable-root .extable-tag-remove:focus-visible{outline:none;background:#94a3b866;color:#0f172a}.extable-root .extable-tag-remove:disabled{opacity:.6;cursor:default}.extable-root tr.extable-row--unique-true>td{background:#3b82f60f!important}.extable-root .extable-unique-radio{width:14px;height:14px;margin:0;display:inline-block;vertical-align:middle;border-radius:999px;border:1.5px solid #94a3b8;background-color:transparent;cursor:pointer;box-sizing:border-box}.extable-root .extable-unique-radio.extable-unique-dot-default{border-color:var(--extable-unique-dot-default);background:radial-gradient(circle at center,var(--extable-unique-dot-default) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-dot-current{border-color:var(--extable-unique-dot-current);background:radial-gradient(circle at center,var(--extable-unique-dot-current) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-dot-previous{border-color:var(--extable-unique-dot-previous);background:radial-gradient(circle at center,var(--extable-unique-dot-previous) 0 45%,transparent 50%)}.extable-root .extable-unique-radio.extable-unique-radio--disabled{opacity:.6;cursor:default}.extable-root td.extable-selected.extable-readonly-muted{background:#3b82f61f!important}.extable-root .extable-all-selected td.extable-readonly-muted,.extable-root .extable-all-selected th.extable-readonly-muted{background:#3b82f614!important}.extable-root.extable-readonly-all .extable-readonly-muted{background:inherit!important;color:inherit!important}.extable-root.extable-readonly-all .extable-readonly-formula{color:inherit!important}.extable-root.extable-readonly-all table[data-extable-renderer=html] tbody td,.extable-root.extable-readonly-all table[data-extable-renderer=canvas-html-overlay] tbody td{cursor:cell}.extable-root.extable-readonly-all td.extable-active-cell{cursor:cell!important}.extable-root.extable-readonly-all .extable-active-cell:after{cursor:cell}.extable-root .extable-col-header{position:relative;display:block;min-width:0;cursor:default}.extable-root .extable-col-header-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extable-root .extable-filter-sort-trigger{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:1px solid rgba(148,163,184,.55);border-radius:6px;background:#ffffffb3;cursor:pointer;opacity:0;display:none;align-items:center;justify-content:center;z-index:1;line-height:1;color:#0f172abf}.extable-root .extable-filter-sort-trigger:hover,.extable-root .extable-filter-sort-trigger:focus-visible{opacity:1;outline:none;background:#ffffffeb;border-color:#3b82f6b3;color:#0f172aeb}.extable-root th:hover .extable-filter-sort-trigger{display:inline-flex;opacity:.55}.extable-root th[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th[data-extable-sort-dir] .extable-filter-sort-trigger{display:inline-flex;opacity:.75}.extable-root th:hover[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th:hover[data-extable-sort-dir] .extable-filter-sort-trigger{display:inline-flex;opacity:1}.extable-root th:hover .extable-col-header,.extable-root th[data-extable-fs-active="1"] .extable-col-header,.extable-root th[data-extable-sort-dir] .extable-col-header{padding-right:28px}.extable-root .cell-nowrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.extable-root .cell-wrap{white-space:pre-wrap;text-overflow:clip;overflow-wrap:anywhere}.extable-root .align-left{text-align:left}.extable-root .align-right{text-align:right}.extable-root td[data-extable-diag-message]:hover:after{content:attr(data-extable-diag-message);position:absolute;top:6px;left:calc(100% + 10px);max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap;z-index:20}.extable-root td[data-extable-diag-message]:hover:before{content:"";position:absolute;top:14px;left:calc(100% + 2px);width:0;height:0;border:7px solid transparent;border-right-color:#111827;z-index:21}.extable-root .extable-context-menu{border:none;padding:6px 0;border-radius:8px;background:#fffffffa;box-shadow:0 18px 38px #00000040,0 8px 12px #0000002e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:200px;position:fixed;margin:0;inset:auto;z-index:1000;pointer-events:auto}.extable-root .extable-context-menu::backdrop{background:transparent}.extable-root .extable-context-menu hr.extable-context-sep{border:0;border-top:1px solid #e5e7eb;margin:6px 0}.extable-root .extable-context-menu button{display:flex;gap:8px;align-items:center;width:100%;padding:8px 14px;background:transparent;border:none;font:inherit;text-align:left;cursor:pointer}.extable-root .extable-context-menu button:hover,.extable-root .extable-context-menu button:focus-visible{background:#3b82f61f;outline:none}.extable-root .extable-filter-sort-sidebar{flex:0 0 0px;width:0px;min-width:0;border:1px solid rgba(148,163,184,.45);background:#fffffffa;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;flex-direction:column;gap:10px;padding:0;transform:translate(12px);opacity:0;pointer-events:none;overflow:hidden;visibility:hidden;transition:flex-basis .18s ease-out,width .18s ease-out,padding .18s ease-out,border-width .18s ease-out,opacity .18s ease-out,transform .18s ease-out,visibility 0s linear .18s;border-width:0}.extable-root.extable-filter-sort-open .extable-filter-sort-sidebar{flex-basis:440px;width:440px;padding:12px;opacity:1;transform:translate(0);pointer-events:auto;visibility:visible;border-width:1px;transition:flex-basis .18s ease-out,width .18s ease-out,padding .18s ease-out,border-width .18s ease-out,opacity .18s ease-out,transform .18s ease-out,visibility 0s linear 0s}.extable-root .extable-filter-sort-sidebar input[type=checkbox]{width:16px;height:16px;accent-color:#0f172a;vertical-align:middle}@keyframes extable-spin{to{transform:rotate(360deg)}}.extable-root .extable-filter-sort-header{display:flex;flex-direction:column;gap:8px}.extable-root .extable-filter-sort-row{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}.extable-root .extable-filter-sort-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-close{width:28px;height:28px;border-radius:8px;border:1px solid rgba(148,163,184,.5);background:#fffc;cursor:pointer}.extable-root .extable-filter-sort-close:hover,.extable-root .extable-filter-sort-close:focus-visible{outline:none;border-color:#3b82f6b3;background:#e2e8f0e6}.extable-root .extable-filter-sort-body{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1;overflow:hidden;border:1px solid rgba(148,163,184,.35);border-radius:0;padding:10px;background:#f8fafcb3}.extable-root .extable-filter-sort-section{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:10px;background:#fff}.extable-root .extable-filter-sort-section-filter{flex:1;min-height:0}.extable-root .extable-filter-sort-section-sort{flex:0 0 auto}.extable-root .extable-filter-sort-section-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-values{min-height:0;flex:1;overflow:auto;border:1px solid rgba(148,163,184,.35);border-radius:10px;padding:8px;background:#ffffffe6}.extable-root .extable-filter-sort-values label{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:6px;border-radius:8px}.extable-root .extable-filter-sort-values label:hover{background:#3b82f614}.extable-root .extable-filter-sort-actions{display:flex;gap:8px;flex-wrap:nowrap}.extable-root .extable-filter-sort-actions label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.extable-root .extable-filter-sort-actions[data-align=split]{justify-content:space-between}.extable-root .extable-filter-sort-actions[data-align=split] button[data-extable-fs=select-none]{margin-right:auto}.extable-root .extable-filter-sort-actions[data-align=right]{justify-content:flex-end}.extable-root .extable-filter-sort-actions button{padding:6px 12px;border-radius:10px;border:1px solid rgba(100,116,139,.6);background:linear-gradient(180deg,#fff,#e2e8f0);box-shadow:0 1px #0f172a14,inset 0 1px #ffffffe6;cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform 80ms ease}.extable-root .extable-filter-sort-actions button:hover,.extable-root .extable-filter-sort-actions button:focus-visible{outline:none;border-color:#3b82f6b3;background:linear-gradient(180deg,#fff,#dbeafe);box-shadow:0 2px #0f172a1f,inset 0 1px #fffffff2}.extable-root .extable-filter-sort-actions button:active{transform:translateY(1px);box-shadow:0 0 #0f172a1f,inset 0 1px #ffffffd9}.extable-root .extable-filter-sort-actions button[data-extable-fs=apply-filter],.extable-root .extable-filter-sort-actions button[data-active="1"]{background:linear-gradient(180deg,#0f172a,#1e293b);color:#f8fafc;border-color:#0f172a;box-shadow:0 2px #0f172a4d,inset 0 1px #ffffff14}.extable-tooltip{position:absolute;pointer-events:none;z-index:9999;display:none;max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap}.extable-tooltip[data-visible="1"]{display:block}.extable-tooltip:after{content:"";position:absolute;top:10px;width:0;height:0;border:7px solid transparent}.extable-tooltip[data-side=right]:after{left:-14px;border-right-color:#111827}.extable-tooltip[data-side=left]:after{right:-14px;border-left-color:#111827}.extable-lookup-dropdown{display:none;max-width:420px;max-height:240px;overflow:auto;padding:6px;border-radius:10px;background:#fffffffa;border:1px solid rgba(148,163,184,.55);box-shadow:0 18px 38px #00000038,0 8px 12px #00000024;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.extable-lookup-dropdown[data-visible="1"]{display:block}.extable-lookup-option{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:none;background:transparent;cursor:pointer;font:inherit}.extable-lookup-option:hover,.extable-lookup-option:focus-visible,.extable-lookup-option[data-active="1"]{outline:none;background:#3b82f61f}.extable-root .extable-toast{border-radius:8px;padding:10px 14px;background:#19191ceb;color:#f8fafc;box-shadow:0 12px 30px #00000047,0 6px 12px #0000002e;font-size:13px;max-width:320px;line-height:1.4}.extable-root .extable-toast[data-variant=error]{background:#dc2626eb}

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export declare class ExtableCore<T extends object = Record<string, unknown>, R e
     private toast;
     private toastTimer;
     private sequenceLangs?;
+    private layoutDiagnosticsEnabled;
+    private layoutDiagnosticWarnings;
     private mounted;
     private isCellReadonly;
     private resolveRowId;
@@ -158,6 +160,8 @@ export declare class ExtableCore<T extends object = Record<string, unknown>, R e
     private teardownFilterSort;
     private initViewportState;
     private updateViewportFromRoot;
+    private warnLayoutDiagnostic;
+    private runLayoutDiagnostics;
     private flushRender;
 }
 export declare function createTablePlaceholder<T extends object = Record<string, unknown>>(config: TableConfig<T>, options?: CoreOptions): ExtableCore<T, T>;

package/dist/index.js

@@ -4809,7 +4809,7 @@ class zo {
 const Qo = (c) => c;
 class Uo {
   constructor(t) {
-    this.shell = null, this.viewportEl = null, this.viewportResizeObserver = null, this.selectionManager = null, this.resizeHandler = null, this.scrollHandler = null, this.viewportState = null, this.rafId = null, this.contextMenu = null, this.contextMenuRowId = null, this.handleGlobalPointer = null, this.toast = null, this.toastTimer = null, this.mounted = !1, this.filterSortSidebar = null, this.filterSortSidebarUnsub = null, this.filterSortKeydown = null, this.filterSortClickCapture = null, this.filterSortOpenEvent = null, this.filterSortActiveColumnKey = null, this.filterSortDraft = null, this.tableStateListeners = /* @__PURE__ */ new Set(), this.selectionListeners = /* @__PURE__ */ new Set(), this.lastTableState = null, this.lastSelectionSnapshot = null, this.lastAction = null, this.selectionRanges = [], this.activeCell = null, this.activeErrors = [], this.rowStateListeners = /* @__PURE__ */ new Set(), this.lastRowStates = /* @__PURE__ */ new Map(), this.root = t.root, this.root.classList.add("extable-root"), this.renderMode = t.options?.renderMode ?? "auto", this.editMode = t.options?.editMode ?? "direct", this.lockMode = t.options?.lockMode ?? "none", this.server = t.options?.server, this.user = t.options?.user, this.sequenceLangs = t.options?.langs;
+    this.shell = null, this.viewportEl = null, this.viewportResizeObserver = null, this.selectionManager = null, this.resizeHandler = null, this.scrollHandler = null, this.viewportState = null, this.rafId = null, this.contextMenu = null, this.contextMenuRowId = null, this.handleGlobalPointer = null, this.toast = null, this.toastTimer = null, this.layoutDiagnosticsEnabled = !1, this.layoutDiagnosticWarnings = /* @__PURE__ */ new Set(), this.mounted = !1, this.filterSortSidebar = null, this.filterSortSidebarUnsub = null, this.filterSortKeydown = null, this.filterSortClickCapture = null, this.filterSortOpenEvent = null, this.filterSortActiveColumnKey = null, this.filterSortDraft = null, this.tableStateListeners = /* @__PURE__ */ new Set(), this.selectionListeners = /* @__PURE__ */ new Set(), this.lastTableState = null, this.lastSelectionSnapshot = null, this.lastAction = null, this.selectionRanges = [], this.activeCell = null, this.activeErrors = [], this.rowStateListeners = /* @__PURE__ */ new Set(), this.lastRowStates = /* @__PURE__ */ new Map(), this.root = t.root, this.root.classList.add("extable-root"), this.renderMode = t.options?.renderMode ?? "auto", this.editMode = t.options?.editMode ?? "direct", this.lockMode = t.options?.lockMode ?? "none", this.server = t.options?.server, this.user = t.options?.user, this.sequenceLangs = t.options?.langs, this.layoutDiagnosticsEnabled = !!t.options?.layoutDiagnostics;
     const e = t.defaultData ?? null, i = e ?? [];
     this.dataLoaded = e != null, this.dataModel = new Qe(
       i,
@@ -4882,7 +4882,7 @@ class Uo {
     if (this.mounted && !t) return;
     this.ensureShell();
     const e = this.viewportEl ?? this.root;
-    if (this.renderer.mount(e), this.ensureContextMenu(), this.ensureToast(), this.initViewportState(), this.root.classList.toggle("extable-loading", !this.dataLoaded), !this.dataLoaded) {
+    if (this.renderer.mount(e), this.ensureContextMenu(), this.ensureToast(), this.initViewportState(), this.runLayoutDiagnostics(), this.root.classList.toggle("extable-loading", !this.dataLoaded), !this.dataLoaded) {
       this.root.dataset.extable = "loading", this.bindViewport(), this.ensureFilterSort(), this.emitTableState(), this.emitSelection("data");
       return;
     }
@@ -5797,13 +5797,15 @@ class Uo {
       deltaX: 0,
       deltaY: 0,
       timestamp: performance.now()
-    };
+    }, this.runLayoutDiagnostics();
   }
   updateViewportFromRoot() {
     this.viewportState || this.initViewportState();
     const t = this.viewportState ?? {
       scrollTop: 0,
       scrollLeft: 0,
+      clientWidth: 0,
+      clientHeight: 0,
       timestamp: performance.now()
     }, e = this.getScrollHost(), i = {
       scrollTop: e.scrollTop,
@@ -5814,7 +5816,25 @@ class Uo {
       deltaY: e.scrollTop - t.scrollTop,
       timestamp: performance.now()
     };
-    this.viewportState = i, this.rafId === null && (this.rafId = requestAnimationFrame(() => this.flushRender()));
+    this.viewportState = i, (i.clientWidth !== t.clientWidth || i.clientHeight !== t.clientHeight) && this.runLayoutDiagnostics(), this.rafId === null && (this.rafId = requestAnimationFrame(() => this.flushRender()));
+  }
+  warnLayoutDiagnostic(t, e) {
+    this.layoutDiagnosticWarnings.has(t) || (this.layoutDiagnosticWarnings.add(t), console.warn(`[extable:layout] ${e}`));
+  }
+  runLayoutDiagnostics() {
+    if (!this.layoutDiagnosticsEnabled || typeof window > "u") return;
+    const t = this.getScrollHost();
+    (t.clientWidth <= 0 || t.clientHeight <= 0) && this.warnLayoutDiagnostic(
+      "non-positive-host-size",
+      "Viewport size is 0. Ensure the mount container and its parent chain have explicit size."
+    );
+    const e = this.root.parentElement;
+    if (!e || e.clientWidth <= 0 || this.root.clientWidth <= e.clientWidth + 1) return;
+    const i = window.getComputedStyle(e);
+    i.display !== "flex" && i.display !== "grid" || i.minWidth !== "0px" && this.warnLayoutDiagnostic(
+      "parent-shrink-constraint",
+      "Parent flex/grid item may block shrinking. Set `min-width: 0` and `min-height: 0` on the layout container chain."
+    );
   }
   flushRender() {
     this.rafId = null, this.viewportState && (this.selectionManager?.onScroll(this.viewportState.scrollTop, this.viewportState.scrollLeft), !(this.renderer instanceof Tt) && this.safeRender(this.viewportState));