npm - @antelopejs/dms - Versions diffs - 0.4.2 → 0.4.4 - Mend

@antelopejs/dms 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/frontend-vue/layers/dms-layout/app/custom-pages/settings/appearance.vue CHANGED Viewed

@@ -3,7 +3,7 @@ import ThemePreview from "../../build/components/pages/settings/theme/ThemePrevi
 import ScalePreview from "../../build/components/pages/settings/theme/ScalePreview.vue";
 import CssVariablesList from "../../build/components/pages/settings/theme/CssVariablesList.vue";
-const colorOptions = [
+const colorOptions: ColorModeOption[] = [
   {
     value: "system",
     label: "$page.settings.appearance.system",
@@ -36,7 +36,7 @@ const scaleOptions: ScaleOption[] = [
   },
 ];
-const colorMode = useColorMode();
+const colorModePreference = useColorModePreference();
 const interfaceScale = useInterfaceScale();
 const { processI18n } = useTranslation();
 </script>
@@ -60,13 +60,13 @@ const { processI18n } = useTranslation();
           :key="`color-option-${index}`"
           class="group bg-elevated relative flex cursor-pointer flex-col overflow-hidden rounded-xl transition-all"
           :class="
-            colorMode.preference === option.value
+            colorModePreference === option.value
               ? 'outline-primary outline-2 outline-offset-2'
               : 'ring-default hover:ring-accented ring hover:-translate-y-0.5'
           "
         >
           <input
-            v-model="colorMode.preference"
+            v-model="colorModePreference"
             type="radio"
             :value="option.value"
             class="sr-only"
@@ -85,13 +85,13 @@ const { processI18n } = useTranslation();
             <span
               class="ring-accented grid size-4 shrink-0 place-items-center rounded-full ring ring-inset"
               :class="
-                colorMode.preference === option.value
+                colorModePreference === option.value
                   ? 'bg-primary ring-primary'
                   : ''
               "
             >
               <span
-                v-if="colorMode.preference === option.value"
+                v-if="colorModePreference === option.value"
                 class="bg-default size-1.5 rounded-full"
               />
             </span>

package/frontend-vue/layers/dms-layout/app/plugins/color-mode.ts ADDED Viewed

@@ -0,0 +1,100 @@
+import {
+  type BasicColorSchema,
+  useColorMode as useVueUseColorMode,
+} from "@vueuse/core";
+import { type Ref, watch } from "vue";
+import type { ColorModePreference } from "../composables/general/types";
+import {
+  COLOR_MODE_COOKIE,
+  useColorModePreference,
+} from "../composables/general/useColorModePreference";
+type ExplicitColorMode = Exclude<ColorModePreference, "system">;
+/** The preferences that pin their class on `<html>`; any other follows the system. */
+const EXPLICIT_COLOR_MODES: ExplicitColorMode[] = ["light", "dark"];
+const SYSTEM_PREFERENCE: ColorModePreference = "system";
+const VUEUSE_SYSTEM_MODE: BasicColorSchema = "auto";
+/**
+ * vueuse's default key. Nuxt UI's `useDark()`, installed with the app, and its
+ * color-mode components (`UDashboardSearch`'s theme group…) all read it.
+ */
+const VUEUSE_STORAGE_KEY = "vueuse-color-scheme";
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const PRE_PAINT_SCRIPT_ID = "dms-color-mode";
+/**
+ * Runs in `<head>` before first paint, and so before the entry module installs
+ * Nuxt UI: it hands vueuse the cookie's mode, which `useDark()` reads on boot,
+ * and sets the `<html>` class, resolving `system` itself. The cookie is read
+ * the way `useDmsCookie` writes it (URI-encoded JSON), falling back to the raw
+ * value. Source text rather than a serialized function, which a bundler could
+ * fill with helpers the page does not have.
+ */
+const PRE_PAINT_SCRIPT = `(() => {
+  const modes = ${JSON.stringify(EXPLICIT_COLOR_MODES)};
+  const prefix = ${JSON.stringify(`${COLOR_MODE_COOKIE}=`)};
+  const entry = document.cookie.split("; ").find((cookie) => cookie.startsWith(prefix)) ?? "";
+  let preference = "";
+  try {
+    preference = decodeURIComponent(entry.slice(prefix.length));
+    preference = JSON.parse(preference);
+  } catch {}
+  const mode = modes.includes(preference) ? preference : ${JSON.stringify(VUEUSE_SYSTEM_MODE)};
+  try {
+    localStorage.setItem(${JSON.stringify(VUEUSE_STORAGE_KEY)}, mode);
+  } catch {}
+  const system = matchMedia(${JSON.stringify(DARK_SCHEME_QUERY)}).matches ? "dark" : "light";
+  document.documentElement.classList.remove(...modes);
+  document.documentElement.classList.add(modes.includes(mode) ? mode : system);
+})();`;
+function explicitColorMode(value: string): ExplicitColorMode | undefined {
+  return EXPLICIT_COLOR_MODES.find((mode) => mode === value);
+}
+/**
+ * Mirrors the cookie, the source of truth, into the vueuse store Nuxt UI
+ * shares, and a change made from a Nuxt UI component back into the cookie.
+ * Each side is written only when it would change, so neither echoes the other.
+ */
+function syncWithVueUse(preference: Ref<ColorModePreference>): void {
+  const { store } = useVueUseColorMode({ storageKey: VUEUSE_STORAGE_KEY });
+  watch(
+    preference,
+    (next) => {
+      const mode = explicitColorMode(next) ?? VUEUSE_SYSTEM_MODE;
+      if (store.value !== mode) store.value = mode;
+    },
+    { immediate: true },
+  );
+  watch(store, (next) => {
+    const nextPreference = explicitColorMode(next) ?? SYSTEM_PREFERENCE;
+    if (preference.value !== nextPreference) preference.value = nextPreference;
+  });
+}
+/**
+ * The server renders an explicit preference's class, so the first paint is
+ * right before any script runs, and the pre-paint script, which only matters
+ * before that paint: inserted later by the browser head it would run after
+ * boot and redo what the sync already did. In the browser the class belongs to
+ * vueuse, which Nuxt UI already drives it with: were unhead tracking it as
+ * well, it would remove it when `dark` gives way to a `system` that still
+ * resolves dark, and vueuse, seeing no change, would not put it back. A page
+ * rendered without the script (client-side fallback) is corrected by the sync,
+ * which applies the cookie on boot.
+ */
+export default defineDmsPlugin(() => {
+  const preference = useColorModePreference();
+  if (!import.meta.env.SSR) {
+    syncWithVueUse(preference);
+    return;
+  }
+  const mode = explicitColorMode(preference.value);
+  useHead({
+    htmlAttrs: mode ? { class: mode } : {},
+    script: [{ id: PRE_PAINT_SCRIPT_ID, innerHTML: PRE_PAINT_SCRIPT }],
+  });
+});

package/frontend-vue/layers/dms-ui/app/components/Placeholder.vue CHANGED Viewed

@@ -5,19 +5,31 @@ interface PlaceholderProps {
   width?: string;
 }
+/** What a box nobody sized is worth showing at, when nothing stretches it. */
+const MIN_HEIGHT = "120px";
 const props = withDefaults(defineProps<PlaceholderProps>(), {
   label: undefined,
-  height: "120px",
+  height: undefined,
   width: undefined,
 });
+/**
+ * A placeholder stands in for content still to come, so it takes the room it is
+ * given: a height of its own would keep it short in a row sized by its tallest
+ * cell, and a layout laid out with these could not be read for what it will be.
+ * A given height still wins, and a floor keeps a lone one visible.
+ */
+const box = computed(() => ({
+  height: props.height,
+  minHeight: props.height ? undefined : MIN_HEIGHT,
+  width: props.width,
+}));
 </script>
 <template>
   <div
-    :style="{
-      height: props.height,
-      width: props.width,
-    }"
+    :style="box"
     class="border-accented relative flex items-center justify-center overflow-hidden rounded-md border border-dashed px-4 opacity-75"
   >
     <svg

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue CHANGED Viewed

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, reactive, watchEffect } from "vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
-import { formatValue } from "../../composables/chart/formatValue";
+import {
+  ABSENT_VALUE_TEXT,
+  formatValue,
+} from "../../composables/chart/formatValue";
 import { resolveChartColor } from "../../composables/chart/useChartTheme";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import {
@@ -64,7 +67,7 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   watchSource: () => watchKey.value,
 });
-const value = computed(() => data.value?.value ?? 0);
+const value = computed(() => data.value?.value);
 const previousValue = computed(() => data.value?.previousValue);
 const delta = computed(() => data.value?.delta ?? null);
@@ -87,13 +90,15 @@ const cardComparisonSeries = computed<ChartSeries[]>(() =>
 );
 const formatted = computed(() =>
-  formatValue(
-    value.value,
-    props.valueFormat,
-    locale.value,
-    props.currencyCode,
-    props.valuePrecision,
-  ),
+  value.value === undefined
+    ? ABSENT_VALUE_TEXT
+    : formatValue(
+        value.value,
+        props.valueFormat,
+        locale.value,
+        props.currencyCode,
+        props.valuePrecision,
+      ),
 );
 const previousFormatted = computed(() =>

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue CHANGED Viewed

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { FormProps } from "../../composables/form/types";
 import type { FormFieldValue } from "../../composables/form/types/value";
-import { cloneFormValue } from "../../composables/form/useForm";
+import {
+  cloneFormValue,
+  formShowsActions,
+  isFieldMarkedRequired,
+} from "../../composables/form/useForm";
 import {
   FORM_VALIDATOR_KEY,
   type FormValidator,
@@ -17,7 +21,12 @@ const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
 const REALTIME_GET_SEGMENT = "/get";
 const REALTIME_EVENT_UPDATED = "updated";
-const props = defineProps<FormProps>();
+// `showActions` left out has to read as left out: Vue casts an absent boolean
+// prop to `false`, which would hide the buttons of every form not asking for
+// them.
+const props = withDefaults(defineProps<FormProps>(), {
+  showActions: undefined,
+});
 const form = useTemplateRef("form");
 // Inside a DynamicModal/DynamicDrawer the container already provides the
@@ -38,15 +47,13 @@ const {
   allFields,
   disabledFields,
   hiddenFields,
+  requiredFields,
   isFieldGroup,
   submitSucceeded,
   resolvedFetchUrl,
 } = useForm(props);
-const showActions = computed(
-  () =>
-    !!props.submitUrl && !toValue(allFields).every((field) => field.disabled),
-);
+const showActions = computed(() => formShowsActions(props, toValue(allFields)));
 const { addGuard } = useLeaveGuard();
 const { confirm } = useConfirm();
@@ -200,6 +207,23 @@ function isGroupVisible(group: { fields: FormField[] }): boolean {
   return group.fields.some((field) => !isFieldHidden(field));
 }
+function isFieldRequired(field: FormField): boolean {
+  return isFieldMarkedRequired(
+    field,
+    disabledFields.value,
+    hiddenFields.value,
+    requiredFields.value,
+  );
+}
+function isGroupRequired(group: { fields: FormField[] }): boolean {
+  return group.fields.some(isFieldRequired);
+}
+const hasRequiredFields = computed(() =>
+  toValue(allFields).some(isFieldRequired),
+);
 function shouldShowDisplay(field: FormField): boolean {
   return isFieldDisabled(field) && !!field.type;
 }
@@ -379,6 +403,13 @@ onUnmounted(async () => {
                   class="text-default block text-base font-semibold sm:text-sm"
                 >
                   {{ processI18n(item.label || "") }}
+                  <span
+                    v-if="isGroupRequired(item)"
+                    class="text-error ms-0.5"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <p v-if="item.description" class="text-dimmed text-xs">
                   {{ processI18n(item.description || "") }}
@@ -453,6 +484,13 @@ onUnmounted(async () => {
                   class="text-default block text-base font-semibold sm:text-sm"
                 >
                   {{ processI18n(item.label || "") }}
+                  <span
+                    v-if="isFieldRequired(item)"
+                    class="text-error ms-0.5"
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <p v-if="item.description" class="text-dimmed text-xs">
                   {{ processI18n(item.description || "") }}
@@ -509,6 +547,11 @@ onUnmounted(async () => {
         </template>
       </div>
+      <p v-if="hasRequiredFields" class="text-dimmed mt-6 text-xs">
+        <span class="text-error" aria-hidden="true">*</span>
+        {{ $t("dms.form.required_legend") }}
+      </p>
       <template v-if="showActions">
         <section class="mt-6 flex justify-end gap-2">
           <UButton

package/frontend-vue/layers/dms-ui/app/components/form/components/Calendar.vue CHANGED Viewed

@@ -11,27 +11,39 @@ import {
   type CalendarDate,
 } from "@internationalized/date";
+// Mid-selection, the range calendar emits a range whose end is still unset.
 interface StrictDateRange {
-  start: CalendarDate;
-  end: CalendarDate;
+  start: CalendarDate | undefined;
+  end: CalendarDate | undefined;
 }
 interface StringDateRange {
-  start: string;
-  end: string;
+  start: string | undefined;
+  end: string | undefined;
 }
 interface NativeDateRange {
-  start: Date;
-  end: Date;
+  start: Date | undefined;
+  end: Date | undefined;
 }
-type DateValue = CalendarDate | StrictDateRange | string | null | undefined;
+type DateValue =
+  | CalendarDate
+  | StrictDateRange
+  | string
+  | (string | Date | CalendarDate)[]
+  | null
+  | undefined;
 const props = defineProps<CalendarProps<R, M>>();
 const emits = defineEmits<{
   "update:modelValue": [
-    value: string | { start: string; end: string } | null | undefined,
+    value:
+      | string
+      | { start: string | undefined; end: string | undefined }
+      | string[]
+      | null
+      | undefined,
   ];
   "update:placeholder": [date: CalendarDate];
   "update:startValue": [date: CalendarDate | undefined];
@@ -42,22 +54,25 @@ function convertIsoStringToCalendarDate(value: string): CalendarDate {
   return parseDate(value.split("T")[0]!);
 }
-function convertDateRangeValue(
-  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
-): StrictDateRange | undefined {
-  if (isString(rangeValue.start) && isString(rangeValue.end)) {
-    return {
-      start: convertIsoStringToCalendarDate(rangeValue.start),
-      end: convertIsoStringToCalendarDate(rangeValue.end),
-    };
+function convertToCalendarDate(
+  value: string | Date | CalendarDate | undefined,
+): CalendarDate | undefined {
+  if (isString(value)) {
+    return convertIsoStringToCalendarDate(value);
   }
-  if (rangeValue.start instanceof Date && rangeValue.end instanceof Date) {
-    return {
-      start: toCalendarDate(fromDate(rangeValue.start, "UTC")),
-      end: toCalendarDate(fromDate(rangeValue.end, "UTC")),
-    };
+  if (value instanceof Date) {
+    return toCalendarDate(fromDate(value, "UTC"));
   }
-  return undefined;
+  return value;
+}
+function convertDateRangeValue(
+  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
+): StrictDateRange {
+  return {
+    start: convertToCalendarDate(rangeValue.start),
+    end: convertToCalendarDate(rangeValue.end),
+  };
 }
 function isDateRangeValue(
@@ -73,7 +88,10 @@ function convertModelValue(value: DateValue): DateValue {
     return convertIsoStringToCalendarDate(value);
   }
   if (isDateRangeValue(value)) {
-    return convertDateRangeValue(value) ?? value;
+    return convertDateRangeValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(convertToCalendarDate) as CalendarDate[];
   }
   return value;
 }
@@ -88,7 +106,12 @@ type EmitValue = unknown;
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && value) {
-    if (
+    if (Array.isArray(value)) {
+      const isoStrings = (value as CalendarDate[]).map((date) =>
+        date.toString(),
+      );
+      emits("update:modelValue", isoStrings);
+    } else if (
       isObject(value) &&
       "year" in value &&
       "month" in value &&
@@ -98,8 +121,8 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
       emits("update:modelValue", isoString);
     } else if (isObject(value) && "start" in value && "end" in value) {
       const dateRange = value as unknown as StrictDateRange;
-      const startIso = dateRange.start.toString();
-      const endIso = dateRange.end.toString();
+      const startIso = dateRange.start?.toString();
+      const endIso = dateRange.end?.toString();
       emits("update:modelValue", { start: startIso, end: endIso });
     } else {
       emits("update:modelValue", value as string | null | undefined);

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePicker.vue CHANGED Viewed

@@ -13,29 +13,41 @@ import {
 } from "@internationalized/date";
 import { reactivePick } from "@vueuse/core";
+// Mid-selection, the range calendar emits a range whose end is still unset.
 interface StrictDateRange {
-  start: CalendarDate;
-  end: CalendarDate;
+  start: CalendarDate | undefined;
+  end: CalendarDate | undefined;
 }
 interface StringDateRange {
-  start: string;
-  end: string;
+  start: string | undefined;
+  end: string | undefined;
 }
 interface NativeDateRange {
-  start: Date;
-  end: Date;
+  start: Date | undefined;
+  end: Date | undefined;
 }
-type DateValue = CalendarDate | StrictDateRange | string | null | undefined;
+type DateValue =
+  | CalendarDate
+  | StrictDateRange
+  | string
+  | (string | Date | CalendarDate)[]
+  | null
+  | undefined;
 type DatePickerProps = Omit<CalendarProps<R, M>, "modelValue">;
 const props = defineProps<DatePickerProps>();
 const emits = defineEmits<{
   "update:modelValue": [
-    value: string | { start: string; end: string } | null | undefined,
+    value:
+      | string
+      | { start: string | undefined; end: string | undefined }
+      | string[]
+      | null
+      | undefined,
   ];
   "update:placeholder": [date: CalendarDate];
   "update:startValue": [date: CalendarDate | undefined];
@@ -50,22 +62,25 @@ function convertIsoStringToCalendarDate(value: string): CalendarDate {
   return parseDate(value.split("T")[0]!);
 }
-function convertDateRangeValue(
-  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
-): StrictDateRange | undefined {
-  if (isString(rangeValue.start) && isString(rangeValue.end)) {
-    return {
-      start: convertIsoStringToCalendarDate(rangeValue.start),
-      end: convertIsoStringToCalendarDate(rangeValue.end),
-    };
+function convertToCalendarDate(
+  value: string | Date | CalendarDate | undefined,
+): CalendarDate | undefined {
+  if (isString(value)) {
+    return convertIsoStringToCalendarDate(value);
   }
-  if (rangeValue.start instanceof Date && rangeValue.end instanceof Date) {
-    return {
-      start: toCalendarDate(fromDate(rangeValue.start, "UTC")),
-      end: toCalendarDate(fromDate(rangeValue.end, "UTC")),
-    };
+  if (value instanceof Date) {
+    return toCalendarDate(fromDate(value, "UTC"));
   }
-  return undefined;
+  return value;
+}
+function convertDateRangeValue(
+  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
+): StrictDateRange {
+  return {
+    start: convertToCalendarDate(rangeValue.start),
+    end: convertToCalendarDate(rangeValue.end),
+  };
 }
 function isDateRangeValue(
@@ -81,7 +96,10 @@ function convertModelValue(value: DateValue): DateValue {
     return convertIsoStringToCalendarDate(value);
   }
   if (isDateRangeValue(value)) {
-    return convertDateRangeValue(value) ?? value;
+    return convertDateRangeValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(convertToCalendarDate) as CalendarDate[];
   }
   return value;
 }
@@ -96,7 +114,12 @@ type EmitValue = unknown;
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
   if (event === "update:modelValue" && value) {
-    if (
+    if (Array.isArray(value)) {
+      const isoStrings = (value as CalendarDate[]).map((date) =>
+        date.toString(),
+      );
+      emits("update:modelValue", isoStrings);
+    } else if (
       isObject(value) &&
       "year" in value &&
       "month" in value &&
@@ -106,8 +129,8 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
       emits("update:modelValue", isoString);
     } else if (isObject(value) && "start" in value && "end" in value) {
       const dateRange = value as unknown as StrictDateRange;
-      const startIso = dateRange.start.toString();
-      const endIso = dateRange.end.toString();
+      const startIso = dateRange.start?.toString();
+      const endIso = dateRange.end?.toString();
       emits("update:modelValue", { start: startIso, end: endIso });
     } else {
       emits("update:modelValue", value as string | null | undefined);
@@ -123,18 +146,40 @@ const forwarded = useForwardPropsEmits(
   wrappedEmits as typeof emits,
 );
 const buttonProps = reactivePick(props, "disabled");
+function formatDateLabel(value: unknown): string | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  // A CalendarDate stringifies to its ISO date.
+  const date = value instanceof Date ? value : String(value);
+  return formatDate(date, locale.value) ?? undefined;
+}
+// Range mode holds a { start, end } object and multiple mode an array, which
+// formatDate cannot read as a single date.
+const label = computed(() => {
+  const value: unknown = modelValue.value;
+  if (Array.isArray(value)) {
+    return value.map(formatDateLabel).filter(Boolean).join(", ") || undefined;
+  }
+  if (isDateRangeValue(value)) {
+    return (
+      [formatDateLabel(value.start), formatDateLabel(value.end)]
+        .filter(Boolean)
+        .join(" – ") || undefined
+    );
+  }
+  return formatDateLabel(value);
+});
 </script>
 <template>
   <UPopover>
     <UButton
-      :label="
-        modelValue
-          ? (formatDate(modelValue, locale) ?? undefined)
-          : t('dms.form.select_date')
-      "
+      :label="label ?? t('dms.form.select_date')"
       :ui="{
-        label: modelValue ? 'text-default' : 'text-dimmed',
+        label: label ? 'text-default' : 'text-dimmed',
       }"
       v-bind="buttonProps"
       variant="outline"

package/frontend-vue/layers/dms-ui/app/components/grid/Grid.vue CHANGED Viewed

@@ -13,19 +13,29 @@ const props = withDefaults(defineProps<GridProps>(), {
   minColumnWidth: GRID_DEFAULT_MIN_COLUMN_WIDTH,
 });
-const rowColumnCounts = ref<number[]>([]);
+/**
+ * Keyed by row rather than appended to: a list that only grows keeps counting
+ * rows that have gone and widths that were never asked for, so the grid ends up
+ * reserving columns nothing fills.
+ */
+const rowColumnCounts = ref(new Map<symbol, number>());
 const maxColumns = computed(() => {
-  if (rowColumnCounts.value.length === 0) return 1;
-  return Math.max(...rowColumnCounts.value);
+  const counts = [...rowColumnCounts.value.values()].filter(
+    (count) => count > 0,
+  );
+  return counts.length === 0 ? 1 : Math.max(...counts);
 });
 const gapRef = computed(() => props.gap);
 const minColumnWidthRef = computed(() => props.minColumnWidth);
 provide<GridContext>(GRID_CONTEXT, {
-  registerRowColumnCount: (columnCount: number) => {
-    rowColumnCounts.value.push(columnCount);
+  setRowColumnCount: (row: symbol, columnCount: number) => {
+    rowColumnCounts.value.set(row, columnCount);
+  },
+  dropRow: (row: symbol) => {
+    rowColumnCounts.value.delete(row);
   },
   maxColumns,
   gap: gapRef,