@antelopejs/dms 0.11.1 → 0.12.0

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
+import { isObject } from "../../../../dms-core/app/utils/type-check";
+import {
+  type Slot,
+  nextTick,
+  useTemplateRef,
+  watch,
+  type FunctionalComponent,
+} from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
 import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
@@ -76,7 +83,7 @@ interface ConfirmModalProps {
 
 interface ConfirmModalSlots {
   /** Extra content under the impact list (a select, a note…). */
-  body?: () => unknown;
+  body?: () => ReturnType<Slot>;
 }
 
 interface ConfirmModalEmits {
@@ -107,8 +114,6 @@ const emit = defineEmits<ConfirmModalEmits>();
 const slots = defineSlots<ConfirmModalSlots>();
 const { t } = useI18n();
 
-// Renders the `body` option of useConfirm(); its own render effect keeps it
-// reactive to the caller's refs.
 const BodyRender: FunctionalComponent = () => props.body?.();
 
 const DEFAULT_ICONS: Partial<Record<ConfirmColor, string>> = {
@@ -120,14 +125,12 @@ const FALLBACK_ICON = "i-ph-question";
 
 const { processApiMessage } = useTranslation();
 
-// What the dialog's fields hold, sent with the confirmed action.
 const values = ref<ConfirmValues>(
   Object.fromEntries(
     props.fields.map((field) => [field.id, field.defaultValue]),
   ),
 );
-// Refusals shown under their field: required ones on confirm, the server's
-// field errors once the action ran.
+
 const fieldErrors = ref<Record<string, string | undefined>>({});
 watch(
   values,
@@ -137,7 +140,7 @@ watch(
   { deep: true },
 );
 
-const isEmptyValue = (value: unknown): boolean =>
+const isEmptyValue = (value: ConfirmValues[string]): boolean =>
   value === undefined ||
   value === null ||
   value === "" ||
@@ -165,13 +168,11 @@ const isOpen = ref(true);
 const typedText = ref("");
 const isPending = ref(false);
 const isSecondaryPending = ref(false);
-// The failure (or partial outcome) of the last confirm, above the buttons.
+
 const notice = ref<ConfirmNotice & { tone: "error" | "warning" }>();
-// The action went part of the way: nothing left to confirm, closing it
-// acknowledges what was done.
+
 const isSettled = ref(false);
-// The typed text is missing or wrong (checked on confirm), or the server
-// refused it: shown under the typed field.
+
 const typedError = ref<string>();
 const typedInput = useTemplateRef<{ inputRef?: HTMLInputElement }>(
   "typedInput",
@@ -187,8 +188,6 @@ const headerIcon = computed(() =>
     : (props.icon ?? DEFAULT_ICONS[props.color] ?? FALLBACK_ICON),
 );
 
-// A field marked required says what its mark means, as a form does under
-// its fields.
 const hasRequiredFields = computed(() =>
   props.fields.some((field) => field.required),
 );
@@ -204,22 +203,20 @@ const hasBody = computed(
     !!notice.value,
 );
 
-// Without a body the header carries the bottom spacing above the footer.
 const modalUi = computed(() => ({
   content: "sm:max-w-[420px]",
   header: hasBody.value ? "" : "pb-5",
 }));
 
-// Focus a footer button on open instead of the first focusable element.
 const modalContent = computed(() =>
   props.initialFocus
     ? {
         onOpenAutoFocus: (event: Event) => {
-          const button = (
-            event.target as HTMLElement | null
-          )?.querySelector<HTMLElement>(
-            `[data-confirm-action="${props.initialFocus}"]`,
-          );
+          const button =
+            // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Reka supplies the dialog target; preserve the existing unchecked querySelector call and malformed-target behavior.
+            (event.target as HTMLElement | null)?.querySelector<HTMLElement>(
+              `[data-confirm-action="${props.initialFocus}"]`,
+            );
           if (!button) return;
           event.preventDefault();
           button.focus();
@@ -243,12 +240,14 @@ function close(value: boolean) {
   emit("close", value);
 }
 
-const isPartialOutcome = (value: unknown): value is ConfirmPartialOutcome =>
-  typeof value === "object" && value !== null && "partial" in value;
+const isPartialOutcome = (
+  value: Awaited<ReturnType<NonNullable<ConfirmModalProps["onConfirm"]>>>,
+): value is ConfirmPartialOutcome =>
+  isObject(value) && value !== null && "partial" in value;
 
-// Worded for users: the server's message when it is meant for them, else a
-// translated fallback (never an ofetch line, JSON or a stack trace).
-function errorNotice(error: unknown): ConfirmNotice {
+function errorNotice(
+  error: Parameters<typeof resolveActionError>[0],
+): ConfirmNotice {
   if (error instanceof ConfirmActionError) {
     return { title: error.message, description: error.description };
   }
@@ -259,7 +258,9 @@ function errorNotice(error: unknown): ConfirmNotice {
  * Shows under their field the field errors the server answered with; true
  * when nothing else is left to tell in the alert.
  */
-function showFieldErrors(error: unknown): boolean {
+function showFieldErrors(
+  error: Parameters<typeof resolveFieldErrors>[0],
+): boolean {
   if (props.fields.length === 0) return false;
   const resolved = resolveFieldErrors(error, {
     fields: props.fields.map((field) => field.id),
@@ -299,7 +300,7 @@ async function runConfirm(
   } finally {
     isPending.value = false;
   }
-  // The field is disabled while pending: focus it once enabled again.
+
   if (typedError.value) {
     await nextTick();
     typedInput.value?.inputRef?.focus();
@@ -321,8 +322,7 @@ function checkTypedText(): boolean {
 
 async function handleConfirm() {
   if (props.blocked || isSettled.value || isPending.value) return;
-  // Every field is checked at once; the body ones come first on the page,
-  // so the typed field takes the focus only when they passed.
+
   const areFieldsValid = checkRequiredFields();
   const isBodyValid =
     (props.validate ? await props.validate() : true) && areFieldsValid;

package/frontend-vue/layers/dms-ui/app/components/container-footer/ContainerFooter.vue

@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<ContainerFooterProps>(), {
   justify: "end",
 });
 
-// Same band as a form's footer in a container (FORM_SURFACE_CLASSES), but
-// pushed to the bottom (`mt-auto`) rather than set under the fields.
 const FOOTER_CLASS =
   "border-default bg-default sticky bottom-[calc(var(--dms-form-foot-pb,0px)*-1)] z-10 mt-auto -mx-[var(--dms-form-foot-px,0px)] -mb-[var(--dms-form-foot-pb,0px)] flex flex-wrap items-center gap-2 border-t px-[var(--dms-form-foot-px,0px)] pt-3 pb-[var(--dms-form-foot-pb,12px)]";
 const JUSTIFY_CLASSES = {

package/frontend-vue/layers/dms-ui/app/components/copy/CopyButton.vue

@@ -2,8 +2,6 @@
 import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 
-// Copy-to-clipboard icon button (design .copy-btn): muted by default, turns
-// success-green once the value lands on the clipboard, then reverts.
 const props = defineProps<{
   value: string;
 }>();

package/frontend-vue/layers/dms-ui/app/components/empty-state/EmptyState.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 import type { ButtonProps } from "@nuxt/ui";
 import DmsIconWell, { type IconWellSize } from "../icon-well/IconWell.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 export type EmptyStateVariant = "no-data" | "no-result" | "no-access" | "error";
 export type EmptyStateSize = "sm" | "md" | "lg";
@@ -34,11 +34,11 @@ interface EmptyStateProps {
 
 interface EmptyStateSlots {
   /** Rich description, replaces `description`. */
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
   /** Under the text, above the actions: a snippet to start with. */
-  content?: () => unknown;
+  content?: () => ReturnType<Slot>;
   /** Buttons or links under the text. */
-  actions?: () => unknown;
+  actions?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<EmptyStateProps>(), {
@@ -65,8 +65,6 @@ const WELL_SIZES: Record<EmptyStateSize, IconWellSize> = {
   lg: "2xl",
 };
 
-// v2 .c-empty: icon well, title, a short explanation and the actions that
-// fit the case, centred.
 const theme = tv({
   slots: {
     root: "relative grid justify-items-center gap-1.5 text-center",
@@ -109,9 +107,7 @@ const resolvedIcon = computed(() => props.icon ?? VARIANT_ICONS[props.variant]);
 const resolvedTone = computed<Tone>(
   () => props.tone ?? (props.variant === "error" ? "error" : "neutral"),
 );
-// Read at each render rather than in a computed: the slots object is not
-// reactive, so a computed would keep the slots of the first render and miss
-// a slot the parent adds or removes later.
+
 const hasDescription = (): boolean => !!props.description || !!slots.default;
 const hasActions = (): boolean => !!slots.actions || !!props.actions?.length;
 </script>

package/frontend-vue/layers/dms-ui/app/components/field-row/FieldRow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
@@ -13,8 +13,6 @@ export type FieldRowLayout = "inline" | "form" | "stack";
  */
 export type FieldRowSpacing = "row" | "dense" | "list";
 
-// The renderer's props are optional: DmsFieldRow is both the backend
-// `FieldRow` block (`dms-field-row-block`) and a template component.
 interface FieldRowProps extends Partial<DefaultComponentProps> {
   /** Row label (i18n key with `$` or literal). */
   label?: string;
@@ -45,13 +43,13 @@ interface FieldRowProps extends Partial<DefaultComponentProps> {
 
 interface FieldRowSlots {
   /** The control (a switch, a select, a button, a child block…). */
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
   /** Replaces the label text (a ListRow lead, a rich label). */
-  label?: () => unknown;
+  label?: () => ReturnType<Slot>;
   /** Inline after the label (a badge, a save status). */
-  "label-extra"?: () => unknown;
+  "label-extra"?: () => ReturnType<Slot>;
   /** Under the description, outside the label (a save status with a retry). */
-  details?: () => unknown;
+  details?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<FieldRowProps>(), {
@@ -67,10 +65,6 @@ const props = withDefaults(defineProps<FieldRowProps>(), {
 });
 const slots = defineSlots<FieldRowSlots>();
 
-// v2 .st-row: 16px/18px padding, hairline between rows of the same card.
-// The root is a size container: the layout follows the row's own width (a
-// settings column is ~450px at 1024), not the viewport. The form layout is
-// also every DMS form's row: one breakpoint for both.
 const theme = tv({
   slots: {
     root: "@container",
@@ -84,17 +78,12 @@ const theme = tv({
   },
   variants: {
     layout: {
-      // A wrapping flex row: a switch or a short control stays at the end of
-      // the label on a phone; a control too wide to leave the label 11rem
-      // drops under it, end-aligned.
       inline: {
         body: "flex flex-wrap items-center",
         text: "min-w-0 flex-[1_1_11rem]",
         control: "ms-auto flex flex-wrap items-center justify-end gap-2",
       },
-      // The 240px label column needs a 560px row; narrower, the label sits
-      // above the control. Beside it, the label lines up with the control's
-      // text.
+
       form: {
         body: "items-start @min-[560px]:grid-cols-[minmax(0,240px)_minmax(0,1fr)]",
         text: "@min-[560px]:pt-1.5",
@@ -110,7 +99,7 @@ const theme = tv({
     },
     spacing: {
       row: { root: "border-t border-muted first:border-t-0", body: "py-4" },
-      // 12px above and below a 32px control, 6px from a label set above it.
+
       dense: {
         root: "border-t border-muted first:border-t-0",
         body: "py-3 gap-y-1.5",
@@ -120,8 +109,7 @@ const theme = tv({
     disabled: {
       true: { root: "opacity-55" },
     },
-    // Flex columns down to the control, which grows: their minimum stays
-    // their content's (the control's floor), the parent scrolling below it.
+
     fill: {
       true: {
         root: "flex flex-1 flex-col",
@@ -129,8 +117,7 @@ const theme = tv({
         control: "flex flex-1 flex-col",
       },
     },
-    // Without a label cell, the control is the grid's only child: it spans
-    // both columns instead of falling into the form's 240px label column.
+
     labeled: {
       false: { control: "col-span-full" },
     },

package/frontend-vue/layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue

@@ -6,39 +6,6 @@ import { MiniMap } from "@vue-flow/minimap";
 import type { Component } from "vue";
 import { computed, useId, useSlots } from "vue";
 
-// Generic DMS-themed wrapper around @vue-flow/core. It owns the canvas
-// "chrome" (dotted background, zoom controls, optional minimap, themed
-// node/handle/edge styling, pan/zoom + fit-view) and stays free of any
-// business logic: consumers pass their own `nodeTypes`/`edgeTypes`, drive
-// data through `nodes`/`edges`, and reach the imperative flow controller via
-// a template ref (see <defineExpose>). Any VueFlow prop or event not declared
-// here is forwarded through `$attrs` (e.g. `nodes-draggable`, `pan-on-drag`,
-// `is-valid-connection`, `@connect`, `@nodes-change`, `@node-drag-stop`).
-//
-// Slots:
-// - `#node-<type>` / `#edge-<type>` (and any other VueFlow slot such as
-//   `#connection-line`) are forwarded verbatim, so consumers can declare
-//   custom renderers inline instead of passing `nodeTypes`/`edgeTypes`.
-// - One slot per `PanelPosition` (`#top-left`, `#bottom-center`, …) renders
-//   its content inside a positioned VueFlow `<Panel>` — toolbars, inspectors.
-// - The default slot is appended as raw VueFlow children, for anything else
-//   the consumer needs to mount inside the flow (extra panels, overlays).
-//
-// Opt-in affordances (all default-off, so existing consumers are untouched):
-// - `deletableNodes` renders a themed delete badge on selected nodes and lets
-//   Delete/Backspace remove the selection. Both paths only *emit* the
-//   `delete-nodes` intent — the badge for its own node, Delete/Backspace for
-//   the whole selection — the wrapper never mutates the consumer's
-//   `nodes`/`edges`; the consumer applies the removal. `deleteBadge: false`
-//   hides the badge and keeps the keyboard path, for a consumer that draws
-//   its own delete control.
-// - `zoomReadout` adds a live zoom percentage to the control bar that doubles
-//   as a reset-to-100% button.
-//
-// - dms-automation plugs its GenericNode/GroupNode editor onto it.
-// - dms-database plugs its table/relation ERD onto it (imperative setNodes
-//   + dagre layout live in the consumer).
-
 const DMS_GRID_GAP = 24;
 const DMS_GRID_DOT_SIZE = 1.2;
 const DMS_GRID_COLOR = "rgba(127, 140, 170, 0.25)";
@@ -64,7 +31,9 @@ interface FlowNode {
   id: string;
   type?: string;
   position: { x: number; y: number };
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Consumer node renderers own this unparsed payload; VueFlow's generic data owner has no shared schema and its default any would weaken this object contract.
   data?: Record<string, unknown>;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Consumers forward arbitrary node extensions; VueFlow's closed Node fields would exclude existing extension keys.
   [key: string]: unknown;
 }
 
@@ -75,6 +44,7 @@ interface FlowEdge {
   sourceHandle?: string | null;
   targetHandle?: string | null;
   type?: string;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Consumers forward arbitrary edge extensions; VueFlow's closed Edge fields would exclude existing extension keys.
   [key: string]: unknown;
 }
 
@@ -133,6 +103,7 @@ interface Props {
   zoomReadout?: boolean;
 }
 
+/** Undeclared VueFlow props and events pass through `$attrs`. */
 const props = withDefaults(defineProps<Props>(), {
   nodes: () => [],
   edges: () => [],
@@ -153,22 +124,19 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  /** Deletion intent for the given node ids (keyboard or badge). */
+  /** Deletion intent only. The consumer removes nodes and edges. */
   "delete-nodes": [ids: string[]];
 }>();
 
 defineOptions({ inheritAttrs: false });
 
-// A stable per-instance id binds the rendered <VueFlow> and the controller we
-// expose to the same store, so imperative consumers (fitView, setNodes,
-// onNodeDrag…) act on this canvas and not a detached instance.
 const flowId = useId();
 const flow = useVueFlow(flowId);
 
 const slots = useSlots();
 
 const isPanelSlot = (name: string): name is PanelPosition =>
-  (PANEL_POSITIONS as readonly string[]).includes(name);
+  PANEL_POSITIONS.some((position) => position === name);
 
 const activePanelPositions = computed(() =>
   PANEL_POSITIONS.filter((position) => slots[position]),
@@ -178,9 +146,6 @@ const forwardedSlotNames = computed(() =>
   Object.keys(slots).filter((name) => name !== "default" && !isPanelSlot(name)),
 );
 
-// Keys our emit-only keyboard path listens for. Empty while delete is off or
-// when the consumer passes `deleteKeyCode: null` (badge-only); otherwise the
-// consumer's key(s), defaulting to Delete + Backspace.
 const deleteKeys = computed<Set<string>>(() => {
   if (!props.deletableNodes) return new Set();
   const code =
@@ -191,10 +156,6 @@ const deleteKeys = computed<Set<string>>(() => {
   return new Set(Array.isArray(code) ? code : [code]);
 });
 
-// While delete is enabled we own the keyboard path (emit-only), so VueFlow's
-// built-in mutating delete is disabled with `null`. While it's off we resolve
-// to `undefined`, which VueFlow skips (isDef guard) — its native "Backspace"
-// default stays untouched, so existing consumers are unaffected.
 const resolvedDeleteKeyCode = computed<DeleteKeyCode | undefined>(() =>
   props.deletableNodes ? null : undefined,
 );
@@ -203,8 +164,6 @@ const zoomPercent = computed(() =>
   Math.round((flow.viewport.value?.zoom ?? ZOOM_RESET_LEVEL) * 100),
 );
 
-// Project each selected node's top-right corner from flow space to screen
-// space through the live viewport transform, so badges track pan/zoom/drag.
 const deleteAffordances = computed<DeleteAffordance[]>(() => {
   if (!props.deletableNodes || !props.deleteBadge) return [];
   const {
@@ -248,6 +207,11 @@ function resetZoom() {
   flow.zoomTo(ZOOM_RESET_LEVEL, { duration: ZOOM_TRANSITION_MS });
 }
 
+/**
+ * Exposes the VueFlow controller through the component ref.
+ * Node, edge, and other named VueFlow slots forward unchanged. Panel-position
+ * slots render inside positioned panels; the default slot adds flow children.
+ */
 defineExpose(flow);
 </script>