domma-js 0.54.0 → 0.56.0

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.54.0
+ * Domma Elements CSS v0.56.0
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-10-24T13:16:34.341Z
- * Commit: 8d2b9ea
+ * Built: 2026-10-24T16:12:49.159Z
+ * Commit: f768320
  */
 
 /**
@@ -366,6 +366,54 @@
     padding-bottom: 0;
 }
 
+/* E.card options (src/components/card.js) */
+.card-collapsible .card-body,
+.card-collapse-icon {
+    transition-duration: var(--dm-card-duration, 200ms);
+}
+
+.card-no-animation,
+.card-no-animation .card-body,
+.card-no-animation .card-collapse-icon {
+    transition: none;
+}
+
+.card-collapse-icon {
+    display: inline-flex;
+    align-items: center;
+}
+
+.card-primary .card-collapse-icon,
+.card-primary.card-collapsible .card-header:hover .card-collapse-icon {
+    color: inherit;
+}
+
+.card-title-icon {
+    display: inline-flex;
+    vertical-align: -0.125em;
+    margin-right: var(--dm-space-2);
+}
+
+.card-clickable {
+    cursor: pointer;
+}
+
+.card-shadow-none {
+    box-shadow: none;
+}
+
+.card-shadow-sm {
+    box-shadow: var(--dm-shadow-sm);
+}
+
+.card-shadow-lg {
+    box-shadow: var(--dm-shadow-lg);
+}
+
+.card-square {
+    border-radius: 0;
+}
+
 
 /* ============================================
    MODAL
@@ -468,6 +516,50 @@
     max-width: 1200px !important;
 }
 
+/* E.modal (src/components/modal.js): the caller's element becomes the full-screen layer
+   that holds the dialog drawn in its shadow root. The class is doubled so it outranks
+   .modal / .modal-sm / .modal.active, which describe the hand-written, JS-free modal
+   box and would otherwise hide or shrink the layer. z-index stays settable inline. */
+.dm-modal-host.dm-modal-host {
+    display: none;
+    position: fixed;
+    inset: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-width: none;
+    height: auto;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    overflow: visible;
+    opacity: 1;
+    transform: none;
+    transition: none;
+    pointer-events: auto;
+    align-items: center;
+    justify-content: center;
+}
+
+.dm-modal-host.dm-modal-host.dm-modal-visible {
+    display: flex;
+}
+
+.dm-modal-host.dm-modal-host.dm-modal-no-backdrop {
+    pointer-events: none;
+}
+
+.dm-modal-host.dm-modal-host.dm-modal-top {
+    align-items: flex-start;
+    padding-top: 5vh;
+}
+
 
 /* ============================================
    TABS
@@ -1446,6 +1538,57 @@ textarea:not([class])::placeholder {
     color: var(--dm-info-text, var(--dm-white));
 }
 
+.badge-light {
+    background-color: var(--dm-background-alt);
+    color: var(--dm-text);
+}
+
+.badge-dark {
+    background-color: var(--dm-text);
+    color: var(--dm-background);
+}
+
+/* E.badge options (src/components/badge.js) */
+.badge {
+    gap: 0.25rem;
+}
+
+.badge-sm {
+    padding: 2px 6px;
+    font-size: 0.625rem;
+}
+
+.badge-lg {
+    padding: var(--dm-space-1) var(--dm-space-3);
+    font-size: var(--dm-font-size-sm);
+}
+
+.badge-rounded {
+    border-radius: var(--dm-radius-sm);
+}
+
+.badge-pill {
+    border-radius: var(--dm-radius-full);
+}
+
+/* Outline badges carry .badge-outline-<variant> instead of the filled .badge-<variant>:
+   the page's text on its surface, ringed in the variant colour - legible in every theme
+   (variant-coloured text is not: warning on a light surface is under 2:1) */
+.badge-outline {
+    background-color: var(--dm-surface);
+    color: var(--dm-text);
+    box-shadow: inset 0 0 0 1px var(--dm-border);
+}
+
+.badge-outline-primary   { box-shadow: inset 0 0 0 1px var(--dm-primary); }
+.badge-outline-secondary { box-shadow: inset 0 0 0 1px var(--dm-text-secondary); }
+.badge-outline-success   { box-shadow: inset 0 0 0 1px var(--dm-success); }
+.badge-outline-danger    { box-shadow: inset 0 0 0 1px var(--dm-danger); }
+.badge-outline-warning   { box-shadow: inset 0 0 0 1px var(--dm-warning); }
+.badge-outline-info      { box-shadow: inset 0 0 0 1px var(--dm-info); }
+.badge-outline-light     { box-shadow: inset 0 0 0 1px var(--dm-border); }
+.badge-outline-dark      { box-shadow: inset 0 0 0 1px var(--dm-text); }
+
 /* Pulse animation for new content indicators */
 .badge-pulse {
     animation: badge-pulse 2s ease-in-out infinite;
@@ -1491,6 +1634,15 @@ textarea:not([class])::placeholder {
     background-color: var(--dm-danger);
 }
 
+/* E.numberBadge puts the counter inside its target; a target already positioned keeps its own */
+:where(.badge-counter-host) {
+    position: relative;
+}
+
+domma-number-badge {
+    display: inline-flex;
+}
+
 /* Wrapper for positioned counter badges */
 .badge-counter-wrapper {
     position: relative;
@@ -5491,17 +5643,22 @@ code {
    TOOLTIP
    ============================================ */
 
+/* E.tooltip's bubble (src/components/tooltip.js): on document.body, placed at the target.
+   Inverted against the page - the text colour as its fill - in light and dark themes. */
 .domma-tooltip {
-    position: absolute;
-    z-index: 9999;
-    background-color: var(--dm-background);
-    color: var(--dm-text);
+    --dm-tooltip-bg: var(--dm-text);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10050;
+    background-color: var(--dm-text);
+    color: var(--dm-background);
     padding: 0.5rem 0.75rem;
     border-radius: var(--dm-radius-md);
     font-size: 0.875rem;
     line-height: 1.4;
-    max-width: 200px;
-    word-wrap: break-word;
+    max-width: 250px;
+    overflow-wrap: break-word;
     pointer-events: none;
     opacity: 0;
     transition: opacity var(--dm-transition-fast);
@@ -5512,9 +5669,42 @@ code {
     opacity: 1;
 }
 
-[data-mode="dark"] .domma-tooltip {
-    background-color: var(--dm-text);
-    color: var(--dm-text-inverse);
+.domma-tooltip::before {
+    content: '';
+    position: absolute;
+    border: 5px solid transparent;
+}
+
+.domma-tooltip[data-position="top"]::before {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top-color: var(--dm-tooltip-bg);
+}
+
+.domma-tooltip[data-position="bottom"]::before {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-color: var(--dm-tooltip-bg);
+}
+
+.domma-tooltip[data-position="left"]::before {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left-color: var(--dm-tooltip-bg);
+}
+
+.domma-tooltip[data-position="right"]::before {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right-color: var(--dm-tooltip-bg);
+}
+
+domma-tooltip {
+    display: inline-block;
 }
 
 
@@ -5736,21 +5926,36 @@ code {
 }
 
 /* Toast variants */
+.domma-toast {
+    position: relative;
+    overflow: hidden;
+    align-items: flex-start;
+    border: 1px solid var(--dm-border);
+    transition-duration: var(--dm-toast-duration, 300ms);
+}
+
 .domma-toast.domma-toast-success {
     background-color: var(--dm-success);
+    color: var(--dm-success-text, var(--dm-white));
+    border-color: transparent;
 }
 
 .domma-toast.domma-toast-error {
     background-color: var(--dm-danger);
+    color: var(--dm-danger-text, var(--dm-white));
+    border-color: transparent;
 }
 
 .domma-toast.domma-toast-warning {
     background-color: var(--dm-warning);
     color: var(--dm-warning-text, var(--dm-text));
+    border-color: transparent;
 }
 
 .domma-toast.domma-toast-info {
     background-color: var(--dm-info);
+    color: var(--dm-info-text, var(--dm-white));
+    border-color: transparent;
 }
 
 /* Toast internal structure */
@@ -5794,6 +5999,72 @@ code {
     display: block;
 }
 
+.domma-toast-close {
+    font-size: 1.25rem;
+    line-height: 1;
+}
+
+.domma-toast-icon {
+    display: flex;
+    align-items: center;
+}
+
+.domma-toast-title[hidden],
+.domma-toast-actions[hidden] {
+    display: none;
+}
+
+.domma-toast-message {
+    overflow-wrap: anywhere;
+}
+
+.domma-toast-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.domma-toast-action {
+    padding: 0.25rem 0.75rem;
+    border: 1px solid currentColor;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.domma-toast-action.is-primary {
+    background-color: var(--dm-primary);
+    color: var(--dm-primary-text, var(--dm-white));
+    border-color: var(--dm-primary);
+}
+
+.domma-toast-progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.domma-toast-progress-bar {
+    width: 100%;
+    height: 100%;
+    background: currentColor;
+    opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .domma-toast,
+    .domma-toast-progress-bar {
+        transition: none !important;
+    }
+}
+
 
 /* ============================================
    BACK TO TOP BUTTON
@@ -5842,6 +6113,20 @@ code {
     box-shadow: 0 0 0 3px var(--dm-focus-ring);
 }
 
+/* E.backToTop on a button inside the container it watches: it sticks to that
+   container's bottom corner instead of the viewport's */
+.dm-back-to-top.dm-back-to-top-contained {
+    position: sticky;
+    right: auto;
+    left: auto;
+    margin-left: auto;
+}
+
+.dm-back-to-top.dm-back-to-top-contained.dm-back-to-top-left {
+    margin-left: 0;
+    margin-right: auto;
+}
+
 /* Desktop (≥577px) - Back to Top enhancements */
 @media (min-width: 577px) {
     .dm-back-to-top {
@@ -5865,54 +6150,151 @@ code {
     gap: 0.75rem;
 }
 
-.dm-loader.dm-loader-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-    background-color: var(--dm-loader-overlay-bg, rgba(255, 255, 255, 0.9));
+.dm-loader[hidden] {
+    display: none !important;
 }
 
-[data-mode="dark"] .dm-loader.dm-loader-overlay {
-    background-color: var(--dm-loader-overlay-bg, rgba(0, 0, 0, 0.8));
+/* E.loader's indicator (src/components/loader.js); size and colour come from
+   --dm-loader-size / --dm-loader-color, set from the options */
+.dm-loader-js {
+    --dm-loader-size: 40px;
+    --dm-loader-color: var(--dm-primary);
 }
 
-/* Spinner type */
-.dm-loader-spinner {
-    width: 2rem;
-    height: 2rem;
-    border: 3px solid var(--dm-border);
-    border-top-color: var(--dm-primary);
-    border-radius: 50%;
-    animation: dm-loader-spin 0.8s linear infinite;
+/* Centred over the nearest positioned ancestor, as <domma-loader> always drew it - the
+   container's own content stays where it is and the loader sits on top of it. */
+.dm-loader-js.dm-loader-centered {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
-[data-mode="dark"] .dm-loader-spinner {
-    border-color: var(--dm-text);
-    border-top-color: var(--dm-primary);
+:where(.dm-loader-host) {
+    position: relative;
 }
 
-/* Dots type */
-.dm-loader-dots {
-    display: flex;
-    gap: 0.5rem;
+.dm-loader-anim {
+    flex-shrink: 0;
 }
 
-.dm-loader-dots::before,
-.dm-loader-dots::after {
-    content: '';
-    width: 0.75rem;
-    height: 0.75rem;
-    background-color: var(--dm-primary);
+.dm-loader-anim-spinner {
+    width: var(--dm-loader-size);
+    height: var(--dm-loader-size);
+    border: max(2px, calc(var(--dm-loader-size) / 10)) solid var(--dm-loader-color);
+    border-top-color: transparent;
     border-radius: 50%;
-    animation: dm-loader-bounce 1.4s infinite ease-in-out both;
+    animation: dm-loader-spin 0.8s linear infinite;
 }
 
-.dm-loader-dots::before {
-    animation-delay: -0.32s;
-}
+.dm-loader-anim-dots,
+.dm-loader-anim-bars {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--dm-loader-size) / 8);
+    height: var(--dm-loader-size);
+}
+
+.dm-loader-anim-dots span {
+    /* Shapes are drawn with borders, not backgrounds: they hold no text */
+    width: 0;
+    height: 0;
+    border: calc(var(--dm-loader-size) / 8) solid var(--dm-loader-color);
+    border-radius: 50%;
+    animation: dm-loader-bounce 1.4s ease-in-out infinite both;
+}
+
+.dm-loader-anim-dots span:nth-child(2) { animation-delay: 0.16s; }
+.dm-loader-anim-dots span:nth-child(3) { animation-delay: 0.32s; }
+
+.dm-loader-anim-pulse {
+    width: 0;
+    height: 0;
+    border: calc(var(--dm-loader-size) / 2) solid var(--dm-loader-color);
+    border-radius: 50%;
+    animation: dm-loader-pulse 1.2s ease-in-out infinite;
+}
+
+.dm-loader-anim-bars span {
+    width: 0;
+    height: 100%;
+    border-left: calc(var(--dm-loader-size) / 6) solid var(--dm-loader-color);
+    border-radius: 2px;
+    animation: dm-loader-bars 1s ease-in-out infinite;
+}
+
+.dm-loader-anim-bars span:nth-child(2) { animation-delay: 0.1s; }
+.dm-loader-anim-bars span:nth-child(3) { animation-delay: 0.2s; }
+.dm-loader-anim-bars span:nth-child(4) { animation-delay: 0.3s; }
+
+.dm-loader-fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.dm-loader-fullscreen .dm-loader-text {
+    color: #fff;
+}
+
+domma-loader,
+domma-card,
+domma-back-to-top {
+    display: block;
+}
+
+.dm-loader.dm-loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background-color: var(--dm-loader-overlay-bg, rgba(255, 255, 255, 0.9));
+}
+
+[data-mode="dark"] .dm-loader.dm-loader-overlay {
+    background-color: var(--dm-loader-overlay-bg, rgba(0, 0, 0, 0.8));
+}
+
+/* Spinner type */
+.dm-loader-spinner {
+    width: 2rem;
+    height: 2rem;
+    border: 3px solid var(--dm-border);
+    border-top-color: var(--dm-primary);
+    border-radius: 50%;
+    animation: dm-loader-spin 0.8s linear infinite;
+}
+
+[data-mode="dark"] .dm-loader-spinner {
+    border-color: var(--dm-text);
+    border-top-color: var(--dm-primary);
+}
+
+/* Dots type */
+.dm-loader-dots {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.dm-loader-dots::before,
+.dm-loader-dots::after {
+    content: '';
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: var(--dm-primary);
+    border-radius: 50%;
+    animation: dm-loader-bounce 1.4s infinite ease-in-out both;
+}
+
+.dm-loader-dots::before {
+    animation-delay: -0.32s;
+}
 
 .dm-loader-dots::after {
     animation-delay: 0s;
@@ -9556,3 +9938,1067 @@ a.avatar-tone-7:hover {
 a.avatar-more-person:hover .avatar-more-name {
     text-decoration: underline;
 }
+
+/* ===== Command Palette ===== */
+/*
+ * E.commandPalette(options) - src/components/command-palette.js
+ *
+ * The overlay covers the viewport: a backdrop and a panel near the top, the way the
+ * modal looks (--dm-modal-* tokens), so it sits with the site's dialogs in every theme.
+ * Above modals and slideovers, which it is often opened over; below popovers (10045)
+ * and the context menu (10050).
+ */
+.dm-command-palette {
+    position: fixed;
+    inset: 0;
+    z-index: 10040;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 12vh 1rem 1rem;
+    box-sizing: border-box;
+    --dm-command-palette-duration: 150ms;
+}
+
+.dm-command-palette[hidden] {
+    display: none;
+}
+
+.dm-command-palette *,
+.dm-command-palette *::before,
+.dm-command-palette *::after {
+    box-sizing: border-box;
+}
+
+.dm-command-palette-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--dm-modal-backdrop);
+    opacity: 0;
+    transition: opacity var(--dm-command-palette-duration) ease;
+}
+
+.dm-command-palette-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: min(40rem, 100%);
+    max-height: min(32rem, 76vh);
+    background: var(--dm-modal-bg);
+    color: var(--dm-text);
+    border: 1px solid var(--dm-modal-border);
+    border-radius: var(--dm-radius-lg);
+    box-shadow: var(--dm-modal-shadow);
+    overflow: hidden;
+    opacity: 0;
+    transform: scale(0.97) translateY(-6px);
+    transition:
+        opacity var(--dm-command-palette-duration) ease,
+        transform var(--dm-command-palette-duration) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.dm-command-palette.is-open .dm-command-palette-backdrop { opacity: 1; }
+.dm-command-palette.is-open .dm-command-palette-panel { opacity: 1; transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-command-palette-backdrop,
+    .dm-command-palette-panel {
+        transition: none;
+    }
+}
+
+/* Where you are in nested pages, with a way back up. */
+.dm-command-palette-crumbs {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0.875rem 0;
+    font-size: 0.8125rem;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-crumbs[hidden] { display: none; }
+
+.dm-command-palette-back {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text);
+    cursor: pointer;
+}
+
+.dm-command-palette-back:hover { background: var(--dm-hover-bg); }
+
+.dm-command-palette-back:focus-visible {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 1px;
+}
+
+.dm-command-palette-trail {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.dm-command-palette-trail li + li::before {
+    content: "/";
+    margin-right: 0.25rem;
+    opacity: 0.6;
+}
+
+.dm-command-palette-trail [aria-current] { color: var(--dm-text); font-weight: 500; }
+
+.dm-command-palette-search {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.75rem 0.875rem;
+    border-bottom: 1px solid var(--dm-border);
+}
+
+.dm-command-palette-search-icon {
+    display: inline-flex;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-input {
+    flex: 1;
+    min-width: 0;
+    padding: 0.25rem 0;
+    border: 0;
+    background: transparent;
+    color: var(--dm-text);
+    font: inherit;
+    font-size: 1rem;
+    outline: none;
+}
+
+.dm-command-palette-input::placeholder { color: var(--dm-input-placeholder); opacity: 1; }
+
+/* The box is the focus; the panel shows it rather than a ring round a borderless input. */
+.dm-command-palette-search:focus-within {
+    border-bottom-color: var(--dm-border-focus);
+}
+
+.dm-command-palette-spinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid var(--dm-border);
+    border-top-color: var(--dm-primary);
+    border-radius: 50%;
+    animation: dm-command-palette-spin 0.7s linear infinite;
+}
+
+.dm-command-palette-spinner[hidden] { display: none; }
+
+@keyframes dm-command-palette-spin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-command-palette-spinner { animation-duration: 2.4s; }
+}
+
+.dm-command-palette-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0.375rem;
+}
+
+.dm-command-palette-list[hidden] { display: none; }
+
+.dm-command-palette-group + .dm-command-palette-group,
+.dm-command-palette-group + .dm-command-palette-item,
+.dm-command-palette-item + .dm-command-palette-group {
+    margin-top: 0.375rem;
+}
+
+.dm-command-palette-group-heading {
+    padding: 0.375rem 0.625rem 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    min-height: 2.5rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: var(--dm-radius-md);
+    color: var(--dm-text);
+    cursor: pointer;
+    user-select: none;
+}
+
+.dm-command-palette-item.is-active {
+    background: var(--dm-selected-bg);
+}
+
+/* Forced colours drop backgrounds: the active row keeps an outline instead. */
+@media (forced-colors: active) {
+    .dm-command-palette-item.is-active { outline: 2px solid Highlight; }
+}
+
+.dm-command-palette-item[aria-disabled="true"] {
+    cursor: default;
+    opacity: var(--dm-disabled-opacity);
+}
+
+.dm-command-palette-icon {
+    flex: 0 0 1rem;
+    display: inline-flex;
+    justify-content: center;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-item.is-active .dm-command-palette-icon { color: var(--dm-text); }
+
+.dm-command-palette-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+}
+
+.dm-command-palette-title,
+.dm-command-palette-subtitle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dm-command-palette-subtitle {
+    font-size: 0.8125rem;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-match {
+    color: var(--dm-primary);
+    font-weight: 600;
+}
+
+.dm-command-palette-shortcut,
+.dm-command-palette-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.dm-command-palette kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.375rem;
+    height: 1.375rem;
+    padding: 0 0.3rem;
+    border: 1px solid var(--dm-border);
+    border-bottom-width: 2px;
+    border-radius: var(--dm-radius-sm);
+    background: var(--dm-background-alt);
+    color: var(--dm-text-secondary);
+    font-family: inherit;
+    font-size: 0.6875rem;
+    line-height: 1;
+}
+
+.dm-command-palette-more {
+    display: inline-flex;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-status {
+    padding: 1.5rem 1rem;
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--dm-text-muted);
+}
+
+.dm-command-palette-status[hidden] { display: none; }
+.dm-command-palette-status[data-state="error"] { color: var(--dm-danger); }
+
+.dm-command-palette-footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1rem;
+    padding: 0.5rem 0.875rem;
+    border-top: 1px solid var(--dm-border);
+    background: var(--dm-background-alt);
+    color: var(--dm-text-secondary);
+    font-size: 0.75rem;
+}
+
+/* Phones: the whole width, from the top. */
+@media (max-width: 640px) {
+    .dm-command-palette {
+        padding: 0;
+    }
+
+    .dm-command-palette-panel {
+        width: 100%;
+        max-height: 85vh;
+        border-width: 0 0 1px;
+        border-radius: 0 0 var(--dm-radius-lg) var(--dm-radius-lg);
+    }
+
+    .dm-command-palette-footer { display: none; }
+}
+
+/* ===== Split Pane ===== */
+/* E.splitPane(container): flexbox panes with a fixed flex-basis each, gutters between. */
+.dm-split {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+}
+
+.dm-split-horizontal {
+    flex-direction: row;
+}
+
+.dm-split-vertical {
+    flex-direction: column;
+}
+
+.dm-split > .dm-split-pane {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.dm-split-collapsed {
+    overflow: hidden;
+}
+
+.dm-split > .dm-split-gutter {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--dm-border);
+    touch-action: none;
+    user-select: none;
+    transition: background-color var(--dm-transition-fast);
+}
+
+/* A thin grip line drawn inside the gutter. */
+.dm-split > .dm-split-gutter::before {
+    content: "";
+    border-radius: var(--dm-radius-full);
+    background: var(--dm-text-muted);
+    opacity: 0.6;
+}
+
+.dm-split-horizontal > .dm-split-gutter::before {
+    width: 2px;
+    height: 1.5rem;
+}
+
+.dm-split-vertical > .dm-split-gutter::before {
+    width: 1.5rem;
+    height: 2px;
+}
+
+.dm-split > .dm-split-gutter:hover,
+.dm-split > .dm-split-gutter.is-dragging {
+    background: var(--dm-primary);
+}
+
+.dm-split > .dm-split-gutter:hover::before,
+.dm-split > .dm-split-gutter.is-dragging::before {
+    background: var(--dm-primary-text);
+}
+
+.dm-split > .dm-split-gutter:focus-visible {
+    outline: 2px solid var(--dm-primary);
+    outline-offset: 1px;
+    z-index: 1;
+}
+
+.dm-split-disabled > .dm-split-gutter,
+.dm-split-disabled > .dm-split-gutter:hover {
+    background: var(--dm-border);
+    cursor: default;
+}
+
+/* While dragging, the panes (and any iframe in them) take no pointer events, so the
+   gutter's captured pointer keeps every move, and text does not get selected. */
+.dm-split-dragging > .dm-split-pane {
+    pointer-events: none;
+    user-select: none;
+}
+
+.dm-split-horizontal.dm-split-dragging {
+    cursor: col-resize;
+}
+
+.dm-split-vertical.dm-split-dragging {
+    cursor: row-resize;
+}
+
+.dm-split-toggle {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-full);
+    background: var(--dm-surface);
+    color: var(--dm-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+}
+
+.dm-split-horizontal > .dm-split-gutter > .dm-split-toggle {
+    top: 0.5rem;
+}
+
+.dm-split-vertical > .dm-split-gutter > .dm-split-toggle {
+    left: 0.5rem;
+}
+
+.dm-split-toggle::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+}
+
+.dm-split-horizontal > .dm-split-gutter > .dm-split-toggle::before {
+    border-right-color: currentColor;
+    margin-right: 4px;
+}
+
+.dm-split-vertical > .dm-split-gutter > .dm-split-toggle::before {
+    border-bottom-color: currentColor;
+    margin-bottom: 4px;
+}
+
+.dm-split-toggle:hover {
+    background: var(--dm-hover-bg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-split > .dm-split-gutter {
+        transition: none;
+    }
+}
+
+/* ===== Virtual List ===== */
+/* E.virtualList(container): the container scrolls; a spacer gives it its height and the
+   rendered rows are placed by transform. The container needs a height from your CSS. */
+.dm-vlist {
+    position: relative;
+    overflow: auto;
+    overflow-anchor: none;
+    contain: content;
+    background: var(--dm-surface);
+    color: var(--dm-text);
+}
+
+.dm-vlist-spacer {
+    width: 1px;
+    pointer-events: none;
+}
+
+.dm-vlist-items {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+    outline: none;
+}
+
+.dm-vlist-row {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    will-change: transform;
+}
+
+.dm-vlist-fixed .dm-vlist-row {
+    overflow: hidden;
+}
+
+.dm-vlist-row:focus-visible {
+    outline: 2px solid var(--dm-primary);
+    outline-offset: -2px;
+}
+
+.dm-vlist-status {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dm-space-2);
+    padding: var(--dm-space-3);
+    color: var(--dm-text-muted);
+    box-sizing: border-box;
+}
+
+.dm-vlist-status[hidden] {
+    display: none;
+}
+
+.dm-vlist-loading,
+.dm-vlist-error {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dm-space-2);
+}
+
+/* Plain text colour: --dm-danger is not readable on --dm-surface in every theme. */
+.dm-vlist-error {
+    color: var(--dm-text);
+}
+
+.dm-vlist-spinner {
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid var(--dm-border);
+    border-top-color: var(--dm-primary);
+    border-radius: var(--dm-radius-full);
+    animation: dm-loader-spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-vlist-spinner {
+        animation-duration: 2.4s;
+    }
+}
+
+/* ===== Dropzone ===== */
+/*
+ * E.dropzone(target, options) - src/components/dropzone.js
+ *
+ * The caller's element is the area (.dm-dropzone, role="button"); the file list
+ * (.dm-dropzone-files) is drawn after it, because a button cannot hold buttons.
+ * Theme tokens only, so every theme and its dark variant colour it.
+ */
+.dm-dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dm-space-2);
+    min-height: 8rem;
+    padding: var(--dm-space-6) var(--dm-space-4);
+    border: 2px dashed var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    color: var(--dm-text);
+    text-align: center;
+    cursor: pointer;
+    transition: border-color var(--dm-transition-fast), background-color var(--dm-transition-fast);
+}
+
+.dm-dropzone:hover {
+    border-color: var(--dm-primary);
+}
+
+.dm-dropzone:focus-visible {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 2px;
+    border-color: var(--dm-primary);
+}
+
+.dm-dropzone.is-dragover {
+    border-color: var(--dm-primary);
+    border-style: solid;
+    background: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-surface));
+}
+
+.dm-dropzone.is-invalid {
+    border-color: var(--dm-danger);
+}
+
+.dm-dropzone.is-disabled {
+    opacity: var(--dm-disabled-opacity, 0.6);
+    cursor: not-allowed;
+}
+
+.dm-dropzone.is-disabled:hover {
+    border-color: var(--dm-border);
+}
+
+.dm-dropzone-prompt {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--dm-space-1);
+    pointer-events: none;
+}
+
+.dm-dropzone-icon {
+    color: var(--dm-text-secondary);
+}
+
+.dm-dropzone:hover .dm-dropzone-icon,
+.dm-dropzone.is-dragover .dm-dropzone-icon {
+    color: var(--dm-text);
+}
+
+.dm-dropzone-text {
+    font-weight: 500;
+}
+
+.dm-dropzone-hint {
+    color: var(--dm-text-muted);
+    font-size: var(--dm-font-size-sm);
+}
+
+.dm-dropzone-files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dm-space-2);
+    margin: var(--dm-space-3) 0;
+    padding: 0;
+    list-style: none;
+}
+
+.dm-dropzone-files[hidden] {
+    display: none;
+}
+
+.dm-dropzone-file {
+    display: grid;
+    grid-template-columns: 2.75rem minmax(0, 1fr) auto auto;
+    grid-template-areas: "thumb meta retry remove" "thumb bar bar bar";
+    align-items: center;
+    column-gap: var(--dm-space-3);
+    row-gap: var(--dm-space-1);
+    padding: var(--dm-space-2) var(--dm-space-3);
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    color: var(--dm-text);
+}
+
+.dm-dropzone-file[data-status="error"] {
+    border-color: var(--dm-danger);
+}
+
+.dm-dropzone-thumb {
+    grid-area: thumb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    overflow: hidden;
+    border-radius: var(--dm-radius-sm);
+    background: color-mix(in srgb, var(--dm-text) 8%, var(--dm-surface));
+    color: var(--dm-text-secondary);
+    font-size: var(--dm-font-size-xs);
+    font-weight: 600;
+}
+
+.dm-dropzone-thumb img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.dm-dropzone-meta {
+    grid-area: meta;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--dm-space-2);
+    min-width: 0;
+}
+
+.dm-dropzone-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dm-dropzone-size,
+.dm-dropzone-status {
+    color: var(--dm-text-muted);
+    font-size: var(--dm-font-size-sm);
+}
+
+/* State colours stay on borders and bars (--dm-danger / --dm-success as text on a
+   surface fail AA in several themes); the words carry the state */
+.dm-dropzone-file[data-status="error"] .dm-dropzone-status {
+    color: var(--dm-text);
+    font-weight: 600;
+}
+
+.dm-dropzone-progress {
+    grid-area: bar;
+    display: block;
+    height: 0.375rem;
+    overflow: hidden;
+    border-radius: var(--dm-radius-full);
+    background: color-mix(in srgb, var(--dm-text) 10%, var(--dm-surface));
+}
+
+.dm-dropzone-progress[hidden] {
+    display: none;
+}
+
+.dm-dropzone-progress-bar {
+    display: block;
+    width: 0;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--dm-primary);
+}
+
+.dm-dropzone-file[data-status="done"] .dm-dropzone-progress-bar {
+    background: var(--dm-success);
+}
+
+.dm-dropzone-retry {
+    grid-area: retry;
+}
+
+.dm-dropzone-retry[hidden] {
+    display: none;
+}
+
+.dm-dropzone-remove {
+    grid-area: remove;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--dm-radius-full);
+    background: transparent;
+    color: var(--dm-text-muted);
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.dm-dropzone-remove:hover:not(:disabled) {
+    background: var(--dm-hover-bg);
+    color: var(--dm-text);
+}
+
+.dm-dropzone-remove:focus-visible {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 1px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .dm-dropzone-progress-bar {
+        transition: width var(--dm-transition-fast);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dm-dropzone {
+        transition: none;
+    }
+}
+
+/* ===== Range Slider ===== */
+/*
+ * E.rangeSlider(target, options) / E.slider - src/components/range-slider.js
+ *
+ * The real <input type="range"> elements are hidden; this is the drawn slider in
+ * front of them. The root is the hit area (2.75rem tall - a comfortable touch
+ * target) with a thin track through its middle. Thumbs are positioned by JS
+ * with left / right / bottom as a percentage and centred with a transform.
+ */
+.dm-range-slider {
+    position: relative;
+    display: block;
+    height: 2.75rem;
+    margin: 0 0.625rem;
+    color: var(--dm-text);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    /* A horizontal slider still lets the page scroll vertically on touch */
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.dm-range-slider.has-tick-labels,
+.dm-range-slider.has-marks {
+    margin-bottom: 1.5rem;
+}
+
+/* A tooltip that is always shown needs room above the track */
+.dm-range-slider[data-tooltip="always"]:not([data-orientation="vertical"]) {
+    margin-top: 1.75rem;
+}
+
+.dm-range-slider[data-orientation="vertical"] {
+    display: inline-block;
+    width: 2.75rem;
+    height: 12rem;
+    margin: 0.625rem 0;
+    touch-action: pan-x;
+    vertical-align: top;
+}
+
+.dm-range-slider[data-orientation="vertical"].has-tick-labels,
+.dm-range-slider[data-orientation="vertical"].has-marks {
+    margin-bottom: 0.625rem;
+    margin-right: 3rem;
+}
+
+.dm-range-track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 0.375rem;
+    transform: translateY(-50%);
+    border-radius: var(--dm-radius-full);
+    background: color-mix(in srgb, var(--dm-text) 16%, var(--dm-surface));
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-track {
+    left: 50%;
+    right: auto;
+    top: 0;
+    bottom: 0;
+    width: 0.375rem;
+    height: auto;
+    transform: translateX(-50%);
+}
+
+.dm-range-fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background: var(--dm-primary);
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-fill {
+    left: 0;
+    right: 0;
+    top: auto;
+}
+
+.dm-range-thumb {
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--dm-primary);
+    border-radius: var(--dm-radius-full);
+    background: var(--dm-surface);
+    box-shadow: var(--dm-shadow-md);
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    touch-action: none;
+}
+
+.dm-range-slider[dir="rtl"] .dm-range-thumb {
+    transform: translate(50%, -50%);
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-thumb {
+    top: auto;
+    left: 50%;
+    transform: translate(-50%, 50%);
+}
+
+.dm-range-thumb:hover {
+    box-shadow: 0 0 0 0.375rem var(--dm-focus-ring);
+}
+
+.dm-range-thumb:focus-visible {
+    outline: 2px solid var(--dm-border-focus);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 0.375rem var(--dm-focus-ring);
+}
+
+/* The thumb being moved sits above the other when they meet */
+.dm-range-thumb.is-active,
+.dm-range-thumb:focus-visible {
+    z-index: 3;
+}
+
+.dm-range-slider.is-dragging,
+.dm-range-slider.is-dragging .dm-range-thumb {
+    cursor: grabbing;
+}
+
+.dm-range-tooltip {
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    left: 50%;
+    padding: 0.125rem 0.5rem;
+    border-radius: var(--dm-radius-sm);
+    background: var(--dm-text);
+    color: var(--dm-surface);
+    font-size: var(--dm-font-size-xs);
+    line-height: 1.5;
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translateX(-50%);
+    opacity: 0;
+    visibility: hidden;
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-tooltip {
+    bottom: auto;
+    left: calc(100% + 0.5rem);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.dm-range-slider[data-tooltip="always"] .dm-range-tooltip,
+.dm-range-slider[data-tooltip="hover"] .dm-range-thumb:hover .dm-range-tooltip,
+.dm-range-slider[data-tooltip="hover"] .dm-range-thumb:focus-visible .dm-range-tooltip,
+.dm-range-slider[data-tooltip="hover"] .dm-range-thumb.is-active .dm-range-tooltip {
+    opacity: 1;
+    visibility: visible;
+}
+
+.dm-range-ticks,
+.dm-range-marks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.dm-range-tick,
+.dm-range-mark {
+    position: absolute;
+    top: calc(50% + 0.375rem);
+    width: 1px;
+    height: 0.375rem;
+    background: var(--dm-border-dark);
+    transform: translateX(-50%);
+}
+
+.dm-range-slider[dir="rtl"] .dm-range-tick,
+.dm-range-slider[dir="rtl"] .dm-range-mark {
+    transform: translateX(50%);
+}
+
+.dm-range-tick.is-in-range {
+    background: var(--dm-primary);
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-tick,
+.dm-range-slider[data-orientation="vertical"] .dm-range-mark {
+    top: auto;
+    left: calc(50% + 0.375rem);
+    width: 0.375rem;
+    height: 1px;
+    transform: translateY(50%);
+}
+
+.dm-range-mark {
+    width: 0.375rem;
+    height: 0.375rem;
+    top: 50%;
+    border-radius: var(--dm-radius-full);
+    background: var(--dm-surface);
+    border: 1px solid var(--dm-border-dark);
+    transform: translate(-50%, -50%);
+    pointer-events: auto;
+    z-index: 1;
+}
+
+.dm-range-slider[dir="rtl"] .dm-range-mark {
+    transform: translate(50%, -50%);
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-mark {
+    left: 50%;
+    width: 0.375rem;
+    height: 0.375rem;
+    transform: translate(-50%, 50%);
+}
+
+.dm-range-tick-label,
+.dm-range-mark-label {
+    position: absolute;
+    top: calc(100% + 0.25rem);
+    left: 50%;
+    color: var(--dm-text-muted);
+    font-size: var(--dm-font-size-xs);
+    line-height: 1.2;
+    white-space: nowrap;
+    transform: translateX(-50%);
+}
+
+.dm-range-mark-label {
+    top: calc(100% + 0.625rem);
+    color: var(--dm-text-secondary);
+    cursor: pointer;
+}
+
+.dm-range-slider[data-orientation="vertical"] .dm-range-tick-label,
+.dm-range-slider[data-orientation="vertical"] .dm-range-mark-label {
+    top: 50%;
+    left: calc(100% + 0.5rem);
+    transform: translateY(-50%);
+}
+
+.dm-range-slider.is-disabled {
+    opacity: var(--dm-disabled-opacity, 0.6);
+    cursor: not-allowed;
+}
+
+.dm-range-slider.is-disabled .dm-range-thumb {
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .dm-range-thumb {
+        transition: box-shadow var(--dm-transition-fast);
+    }
+
+    .dm-range-tooltip {
+        transition: opacity var(--dm-transition-fast), visibility var(--dm-transition-fast);
+    }
+}
+
+@media (forced-colors: active) {
+    .dm-range-fill,
+    .dm-dropzone-progress-bar {
+        background: Highlight;
+    }
+
+    .dm-range-thumb {
+        background: ButtonFace;
+        border-color: ButtonText;
+    }
+}