@omnitend/dashboard-for-laravel 0.42.2 → 0.43.0

package/resources/js/components/extended/DXDashboardSidebar.vue

@@ -10,12 +10,16 @@
 <template>
   <aside
     ref="sidebarRef"
-    class="dashboard-sidebar text-white"
+    class="dashboard-sidebar"
     :class="{
+      [`dashboard-sidebar--${variant}`]: true,
       'sidebar-collapsed': collapsed,
       'sidebar-hidden': hidden,
-      'sidebar-collapsible-groups': collapsibleGroups && !collapsed
+      'sidebar-collapsible-groups': collapsibleGroups && !collapsed,
+      'dashboard-sidebar--phone-menu': phoneMenu,
+      'dashboard-sidebar--phone-menu-open': phoneMenuOpen
     }"
+    @click="onLinkClick"
   >
     <div class="sidebar-header p-3">
       <div class="d-flex align-items-center justify-content-between">
@@ -33,6 +37,19 @@
           </div>
         </slot>
       </div>
+      <!-- With `phoneMenu`, below `sm` the open sidebar covers the whole
+           screen, navbar toggle included, so it carries its own way out, at
+           the far end of the header row. Hidden from `sm` up, where the navbar
+           toggle stays in view. Not rendered without `phoneMenu`: nothing
+           would answer its `close`. -->
+      <button
+        v-if="phoneMenu"
+        type="button"
+        class="sidebar-close btn-close d-sm-none flex-shrink-0 ms-auto"
+        :class="{ 'btn-close-white': variant === 'dark' }"
+        aria-label="Close menu"
+        @click="$emit('close')"
+      />
     </div>
 
     <nav ref="navRef" class="sidebar-nav px-3 pb-3 pt-2">
@@ -46,7 +63,7 @@
           <button
             v-if="isGroupToggle(group)"
             type="button"
-            class="nav-group-toggle fw-semibold mb-2 px-2"
+            class="nav-group-toggle"
             :aria-expanded="isGroupExpanded(groupIndex, group)"
             :aria-controls="groupItemsId(groupIndex)"
             @click="toggleGroup(groupKey(group, groupIndex))"
@@ -75,14 +92,14 @@
           <!-- Static group label (non-collapsible, expanded sidebar) -->
           <div
             v-else-if="group.label && !collapsed"
-            class="nav-group-label fw-semibold mb-2 px-2"
+            class="nav-group-label"
           >
             {{ group.label }}
           </div>
 
           <!-- Divider shown in place of the label when the sidebar rail is collapsed -->
           <div v-if="group.label && collapsed" class="nav-group-divider">
-            <hr class="my-2 border-secondary" />
+            <hr class="my-2" />
           </div>
 
           <div
@@ -150,7 +167,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, watch, nextTick, useId } from 'vue';
-import type { Navigation, NavigationGroup } from '../../types/navigation';
+import type { Navigation, NavigationGroup, SidebarVariant } from '../../types/navigation';
 
 const props = withDefaults(defineProps<{
   /** Grouped navigation to render: an array of groups, each with a label and items. */
@@ -175,20 +192,68 @@ const props = withDefaults(defineProps<{
    * `false`: all groups start open and toggle independently.
    */
   autoCollapseInactiveGroups?: boolean;
+  /**
+   * Colour scheme: `'light'` (default) or `'dark'`. Colours come from the
+   * `--dx-sidebar-*` custom properties (see the theming guide), so either
+   * scheme can be rebranded in CSS.
+   */
+  variant?: SidebarVariant;
+  /**
+   * Below `sm`, show the open sidebar as a full-screen menu over the page,
+   * with a close button (which emits `close`), instead of a rail beside it;
+   * hidden there until opened. The owner must answer `close`, Escape and
+   * `navigate`: DXDashboard sets this and does. Off by default, so a
+   * standalone sidebar keeps its rail on phones.
+   */
+  phoneMenu?: boolean;
 }>(), {
   collapsed: false,
   hidden: false,
   title: 'Dashboard',
   collapsibleGroups: false,
   autoCollapseInactiveGroups: true,
+  variant: 'light',
+  phoneMenu: false,
 });
 
-defineEmits<{
+const emit = defineEmits<{
   /** Emitted to request toggling the sidebar's collapsed/expanded state. */
   toggle: [];
+  /** Emitted by the close button shown below `sm`, where the open sidebar covers the screen. */
+  close: [];
+  /**
+   * Emitted when a link anywhere in the sidebar is followed (a plain click,
+   * not one that opens a new tab): the navigation, including links rendered
+   * through the `link` slot, and the `brand` and `footer` slots. DXDashboard
+   * uses it to close the full-screen menu on a phone.
+   */
+  navigate: [];
 }>();
 
+// Delegated from the whole sidebar, so `link`, `brand` and `footer` slot
+// anchors count too. A modified click opens a new tab or window and leaves
+// this page where it is. A cancelled click still counts: a client-side
+// router's link (Inertia's <Link>) cancels the browser navigation and routes
+// itself.
+const onLinkClick = (event: MouseEvent): void => {
+  if (event.button !== 0) return;
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+  const target = event.target as Element | null;
+  if (target?.closest('a[href]')) {
+    emit('navigate');
+  }
+};
+
 const sidebarRef = ref<HTMLElement | null>(null);
+
+// The open phone menu's class waits for mount, so a server-rendered page
+// (which cannot know the width) never paints an open menu on a phone before
+// hydration, and hydration sees the same classes the server sent.
+const isMounted = ref(false);
+onMounted(() => {
+  isMounted.value = true;
+});
+const phoneMenuOpen = computed(() => props.phoneMenu && isMounted.value && !props.hidden);
 const navRef = ref<HTMLElement | null>(null);
 
 const uid = useId();
@@ -377,6 +442,15 @@ onMounted(() => {
   scrollToActiveItem(false);
 });
 
+// A hidden sidebar has no layout to scroll, so the mount-time scroll does
+// nothing; centre the active item whenever it is shown (opening the phone
+// menu, or a dashboard that restores its visibility after mount).
+watch(() => props.hidden, (isHidden) => {
+  if (!isHidden) {
+    scrollToActiveItem(false);
+  }
+});
+
 // Client-side route change: open the newly active group, then scroll to it.
 // Scrolling into a group that was collapsed kicks off its 0.2s expand, so the
 // first scroll centres against a still-growing group; re-centre once it settles.
@@ -415,14 +489,17 @@ watch(activeGroupIndex, () => {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: var(--dx-sidebar-header-border-width) solid var(--dx-sidebar-separator-color);
 }
 
 .sidebar-footer {
   flex-shrink: 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid var(--dx-sidebar-separator-color);
 }
 
+/* Colours, typeface and weights come from the `--dx-sidebar-*` tokens in
+   theme.scss (per variant), not from here, so a consumer can rebrand them. */
+
 .brand-container {
   display: flex;
   align-items: center;
@@ -473,6 +550,16 @@ watch(activeGroupIndex, () => {
   font-size: 0.875rem;
 }
 
+/* Padding and the gap below live here rather than in `px-2`/`mb-2`
+   utilities, whose `!important` would stop the light variant reshaping the
+   headers into pills (theme.scss). */
+.nav-group-label,
+.nav-group-toggle {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 /* When collapsible groups are on, give the static (non-collapsible) group
    labels the same height as the toggle headers so a sidebar mixing both keeps
    an even vertical rhythm. */
@@ -495,26 +582,17 @@ watch(activeGroupIndex, () => {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-size: 0.875rem;
-  background: transparent;
   border: 0;
-  /* No `color` here on purpose: theme.scss sets `.nav-group-toggle` to
-     $navbar-dark-color so the toggle matches the static .nav-group-label.
-     A scoped `color` would override that (equal specificity, later source order). */
+  /* No `color` or `background-color` here on purpose: theme.scss sets both
+     from the `--dx-sidebar-group-*` tokens (also for :hover and
+     :focus-visible), and a scoped declaration would override them (equal
+     specificity, later source order). */
   cursor: pointer;
   text-align: left;
   border-radius: var(--bs-border-radius, 0.375rem);
   transition: background-color 0.2s ease;
 }
 
-.nav-group-toggle:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
-.nav-group-toggle:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.5);
-  outline-offset: 2px;
-}
-
 .nav-group-toggle-label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -590,10 +668,6 @@ watch(activeGroupIndex, () => {
   white-space: nowrap;
 }
 
-:deep(.nav-link.active) {
-  font-weight: 500;
-}
-
 :deep(.nav-icon) {
   flex-shrink: 0;
 }
@@ -612,16 +686,16 @@ watch(activeGroupIndex, () => {
 }
 
 .sidebar-nav::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--dx-sidebar-scrollbar-track);
 }
 
 .sidebar-nav::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--dx-sidebar-scrollbar-thumb);
   border-radius: 3px;
 }
 
 .sidebar-nav::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--dx-sidebar-scrollbar-thumb-hover);
 }
 
 .sidebar-hidden {

package/resources/js/components/extended/DXStackingTable.vue

@@ -0,0 +1,264 @@
+<template>
+    <!--
+      The wrapper is what gets measured, never the table: a table that is
+      overflowing is WIDER than the space it has, so measuring it would never
+      report "too narrow". The wrapper is also a horizontal scroll container
+      (like Bootstrap's `.table-responsive`, which it replaces), which makes its
+      own width the available width even inside a flex row.
+    -->
+    <div
+        ref="containerRef"
+        class="dx-stacking-table"
+        :class="{ 'dx-stacking-table--stacked': isStacked }"
+    >
+        <!--
+          @slot The consumer's own `<table>`, as the wrapper's direct child.
+          Receives `stacked` for the rare markup that must differ per layout.
+        -->
+        <slot :stacked="isStacked" />
+    </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * DXStackingTable — a hand-built `<table>` that turns into one card per body
+ * row when the space it has (not the window) falls below `stackBelow`.
+ *
+ * Built for editable tables inside forms and modals (an order's lines: name,
+ * price input, quantity input, total), where inputs run off a phone's edge. The
+ * consumer keeps writing ordinary table markup; this wrapper measures itself
+ * with `useContainerWidth`, toggles `.dx-stacking-table--stacked`, and gives
+ * every body and footer cell its column's header text as a label (written to
+ * `data-dx-stack-label`, shown by theme.scss as the cell's `::before`). The
+ * stacked styling is global theme CSS, because slot content cannot see a
+ * component's scoped styles.
+ *
+ * Per-cell controls (all inert in the wide layout):
+ * - `data-label="…"` on a `th` or a cell overrides the derived label.
+ * - `.dx-stack-span` on a cell: no label, full card width (a card title).
+ *   Cells spanning several columns (`colspan`) get no label and span anyway.
+ * - `.dx-stack-hide` on a cell: not shown when stacked. Empty cells with no
+ *   label (a footer's `&nbsp;` filler) are hidden automatically.
+ * - `.dx-stack-continue` on a `tr`: joins the previous row's card (a note row
+ *   under a line) instead of starting a new one.
+ */
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import { useContainerWidth } from "../../composables/useContainerWidth";
+
+interface Props {
+    /**
+     * Stack when the wrapper's content width is below this many px. 576 is
+     * Bootstrap's `sm` breakpoint, but measured on the container.
+     */
+    stackBelow?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    stackBelow: 576,
+});
+
+/** Attribute the derived label is written to (so a consumer `data-label` is never overwritten). */
+const DERIVED_LABEL_ATTRIBUTE = "data-dx-stack-label";
+/** Marks an empty cell that has no label, which the stacked layout hides. */
+const EMPTY_CELL_ATTRIBUTE = "data-dx-stack-empty";
+/** Header content that is not the column's visible name. */
+const HIDDEN_HEADER_CONTENT =
+    '.visually-hidden, .visually-hidden-focusable, [aria-hidden="true"]';
+
+const { containerRef, isBelow } = useContainerWidth({
+    threshold: () => props.stackBelow,
+    // Same band as DXForm's auto layout, for the same reason: the stacked
+    // layout is TALLER, so inside an `overflow:auto` ancestor it can add a
+    // scrollbar and change its own container's width at the boundary. 24px is
+    // wider than any scrollbar, so a crossing holds until the space genuinely
+    // changes.
+    hysteresis: 24,
+});
+
+/**
+ * Stacked until measured, like DXForm's `layout="auto"` (which renders its
+ * vertical layout before the first measurement and under SSR): a stacked table
+ * is legible at any width, a wide one guessed wrongly overflows. In a browser
+ * the first ResizeObserver delivery lands before the first paint, so a wide
+ * container does not visibly flash the cards.
+ */
+const isStacked = computed<boolean>(() => isBelow.value);
+
+/** The column's visible name: `data-label`, else its text minus hidden helpers. */
+function headerCellLabel(headerCell: HTMLTableCellElement): string {
+    const explicitLabel = headerCell.getAttribute("data-label");
+    if (explicitLabel !== null) return explicitLabel.trim();
+
+    let text = "";
+    const walker = document.createTreeWalker(headerCell, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node !== null) {
+        // Only hiding INSIDE the header cell counts; an ancestor of the whole
+        // table being aria-hidden says nothing about this column's name.
+        const hiddenWrapper =
+            node.parentElement?.closest(HIDDEN_HEADER_CONTENT) ?? null;
+        const isHidden =
+            hiddenWrapper !== null &&
+            hiddenWrapper !== headerCell &&
+            headerCell.contains(hiddenWrapper);
+        if (!isHidden) text += ` ${node.textContent ?? ""}`;
+        node = walker.nextNode();
+    }
+    return text.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * The first column of every cell in a row group, accounting for cells from
+ * earlier rows that reach down into a row (`rowspan`) as well as `colspan`:
+ * the table's own grid, not each row's cell index.
+ */
+function cellStartColumns(
+    rows: HTMLCollectionOf<HTMLTableRowElement>,
+): Map<HTMLTableCellElement, number> {
+    const startColumns = new Map<HTMLTableCellElement, number>();
+    /** Columns taken in each row by a cell starting in an earlier row. */
+    const occupiedByRow: Array<Set<number>> = Array.from(
+        { length: rows.length },
+        () => new Set<number>(),
+    );
+    Array.from(rows).forEach((row, rowIndex) => {
+        const occupied = occupiedByRow[rowIndex];
+        let column = 0;
+        for (const cell of Array.from(row.cells)) {
+            while (occupied.has(column)) column++;
+            startColumns.set(cell, column);
+            // rowspan="0" reaches to the end of the row group.
+            const rowSpan =
+                cell.rowSpan === 0 ? rows.length - rowIndex : cell.rowSpan;
+            const lastRow = Math.min(rowIndex + rowSpan, rows.length);
+            for (let spannedRow = rowIndex; spannedRow < lastRow; spannedRow++) {
+                for (let offset = 0; offset < cell.colSpan; offset++) {
+                    occupiedByRow[spannedRow].add(column + offset);
+                }
+            }
+            column += cell.colSpan;
+        }
+    });
+    return startColumns;
+}
+
+/**
+ * One label per column: the LOWEST header cell over it, so a group heading
+ * ("Pricing" over Price and Quantity) gives way to the names beneath it, and a
+ * heading spanning every header row ("Product") names its own column.
+ */
+function columnLabels(table: HTMLTableElement): string[] {
+    const headerRows = table.tHead?.rows;
+    if (headerRows === undefined || headerRows.length === 0) return [];
+    const labels: string[] = [];
+    // Row order, so a lower row's cell overwrites the group heading above it.
+    for (const [headerCell, startColumn] of cellStartColumns(headerRows)) {
+        const label = headerCellLabel(headerCell);
+        for (let offset = 0; offset < headerCell.colSpan; offset++) {
+            labels[startColumn + offset] = label;
+        }
+    }
+    return labels;
+}
+
+function setAttributeIfChanged(
+    element: Element,
+    name: string,
+    value: string | null,
+): void {
+    if (value === null) {
+        if (element.hasAttribute(name)) element.removeAttribute(name);
+        return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+
+function isBlank(cell: HTMLTableCellElement): boolean {
+    // `trim()` also strips the `&nbsp;` a footer filler cell usually holds.
+    return (
+        cell.children.length === 0 && (cell.textContent ?? "").trim() === ""
+    );
+}
+
+/** Label every body and footer cell from its column's header. */
+function labelCells(): void {
+    const table = containerRef.value?.querySelector<HTMLTableElement>(
+        ":scope > table",
+    );
+    if (table === null || table === undefined) return;
+
+    const labels = columnLabels(table);
+    const rowGroups: HTMLTableSectionElement[] = [...Array.from(table.tBodies)];
+    if (table.tFoot !== null) rowGroups.push(table.tFoot);
+
+    for (const rowGroup of rowGroups) {
+        for (const [cell, startColumn] of cellStartColumns(rowGroup.rows)) {
+            // A cell spanning several columns belongs to none of them.
+            const derivedLabel =
+                cell.colSpan === 1 ? labels[startColumn] ?? "" : "";
+            setAttributeIfChanged(
+                cell,
+                DERIVED_LABEL_ATTRIBUTE,
+                derivedLabel === "" ? null : derivedLabel,
+            );
+            const hasLabel =
+                derivedLabel !== "" || cell.hasAttribute("data-label");
+            setAttributeIfChanged(
+                cell,
+                EMPTY_CELL_ATTRIBUTE,
+                !hasLabel && isBlank(cell) ? "" : null,
+            );
+        }
+    }
+}
+
+// Rows come and go (v-for), and header text can change: relabel on any change
+// to the table's structure or text. Only the attributes labelling reads are
+// watched, so our own `data-dx-stack-*` writes never re-trigger this.
+let mutationObserver: MutationObserver | null = null;
+
+/** Attributes whose change can alter a label or a cell's column. */
+const STRUCTURE_ATTRIBUTES = ["data-label", "colspan", "rowspan"];
+/**
+ * Attributes that hide header helper text (HIDDEN_HEADER_CONTENT). They count
+ * only inside a `thead`: a body cell's classes change all the time (a row's
+ * state, a validation style) and say nothing about labels.
+ */
+const HEADER_VISIBILITY_ATTRIBUTES = ["class", "aria-hidden"];
+
+function changesLabels(mutation: MutationRecord): boolean {
+    if (mutation.type !== "attributes") return true;
+    if (STRUCTURE_ATTRIBUTES.includes(mutation.attributeName ?? "")) return true;
+    return (
+        mutation.target instanceof Element &&
+        mutation.target.closest("thead") !== null
+    );
+}
+
+onMounted(() => {
+    labelCells();
+    if (typeof MutationObserver === "undefined" || containerRef.value === null) {
+        return;
+    }
+    mutationObserver = new MutationObserver((mutations) => {
+        if (mutations.some(changesLabels)) labelCells();
+    });
+    mutationObserver.observe(containerRef.value, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: [
+            ...STRUCTURE_ATTRIBUTES,
+            ...HEADER_VISIBILITY_ATTRIBUTES,
+        ],
+    });
+});
+
+onBeforeUnmount(() => {
+    mutationObserver?.disconnect();
+    mutationObserver = null;
+});
+
+defineExpose({ isStacked });
+</script>

package/resources/js/composables/useContainerWidth.ts

@@ -270,10 +270,17 @@ export function useContainerWidth(
     // express without mutating during evaluation. With `hysteresis: 0` it is
     // exactly `width < threshold`. The watcher is `sync` so `isBelow` is never
     // observed one tick behind `width`.
+    //
+    // The band only applies to a state that came from a MEASUREMENT. Before
+    // the first one, `isBelow` is the `initialWidth` guess (true by default),
+    // and holding that guess through the band would leave a container that
+    // measures just above the threshold (say 590 against 576 + 24) on the
+    // narrow layout until it next grows: it never crossed anything.
     const initialThreshold = resolveThreshold();
     const isBelow = ref<boolean>(
         initialThreshold === undefined ? false : startWidth < initialThreshold,
     );
+    let isBelowCameFromMeasurement = false;
     watch(
         [width, () => resolveThreshold()],
         ([currentWidth, currentThreshold]) => {
@@ -281,9 +288,11 @@ export function useContainerWidth(
                 isBelow.value = false;
                 return;
             }
-            isBelow.value = isBelow.value
-                ? currentWidth < currentThreshold + hysteresis
-                : currentWidth < currentThreshold;
+            isBelow.value =
+                isBelow.value && isBelowCameFromMeasurement
+                    ? currentWidth < currentThreshold + hysteresis
+                    : currentWidth < currentThreshold;
+            if (hasMeasured.value) isBelowCameFromMeasurement = true;
         },
         { flush: "sync" },
     );

package/resources/js/index.ts

@@ -20,6 +20,7 @@ export { default as DXStatCard } from "./components/extended/DXStatCard.vue";
 // (#142) so chart.js / vue-chartjs stay genuinely optional peers — the main
 // entry no longer references them. See resources/js/charts.ts.
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
+export { default as DXStackingTable } from "./components/extended/DXStackingTable.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`
  * (a flat form is just `DXForm` without a `tabs` prop) that logs a one-time
@@ -202,4 +203,5 @@ export type {
     Navigation,
     NavbarSearchAlign,
     NavbarActionsOnMobile,
+    SidebarVariant,
 } from "./types/navigation";

package/resources/js/types/navigation.ts

@@ -38,6 +38,15 @@ export type Navigation = NavigationGroup[];
  */
 export type NavbarSearchAlign = "start" | "center";
 
+/**
+ * Colour scheme of the dashboard sidebar: `"light"` (the default: a white pane,
+ * tinted group headers, a green active item, Poppins) or `"dark"` (the navy
+ * rail dfl shipped before). Every colour comes from a `--dx-sidebar-*` custom
+ * property, so either can be rebranded in CSS. Shared by DXDashboard (which
+ * forwards it as `sidebarVariant`) and DXDashboardSidebar (`variant`).
+ */
+export type SidebarVariant = "light" | "dark";
+
 /**
  * What the navbar actions slot does below the `md` breakpoint: `"wrap"` moves
  * it to its own full-width row (the bar grows), `"hide"` removes it entirely

package/resources/js/utils/pageScrollLock.ts

@@ -0,0 +1,27 @@
+/**
+ * The class on <html> that stops the page scrolling behind DXDashboard's open
+ * phone menu (styled in theme.scss, below `sm` only).
+ */
+export const PAGE_SCROLL_LOCK_CLASS = 'dx-dashboard-menu-open';
+
+// Every owner currently holding the lock. Several dashboards can share a page,
+// so one releasing (closing, unmounting, a <KeepAlive> deactivation) must not
+// unlock the page while another's menu is still open.
+const lockOwners = new Set<object>();
+
+const syncRootClass = (): void => {
+  if (typeof document === 'undefined') return;
+  document.documentElement.classList.toggle(PAGE_SCROLL_LOCK_CLASS, lockOwners.size > 0);
+};
+
+/** Hold the page scroll lock for `owner`. Idempotent. */
+export const acquirePageScrollLock = (owner: object): void => {
+  lockOwners.add(owner);
+  syncRootClass();
+};
+
+/** Release `owner`'s hold; the page unlocks once no owner holds it. Idempotent. */
+export const releasePageScrollLock = (owner: object): void => {
+  if (!lockOwners.delete(owner)) return;
+  syncRootClass();
+};