@antelopejs/dms 0.5.6 → 0.6.1

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartFetch.ts

@@ -1,13 +1,33 @@
-import { onMounted, ref, watch, type Ref } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  type ComputedRef,
+  type Ref,
+} from "vue";
 import {
   appendPeriodToUrl,
   usePeriodScope,
 } from "../../../../dms-core/app/composables/period/usePeriodScope";
 import type { PeriodState } from "../../../../dms-core/app/composables/period/types";
 import { useRealtimeTopic } from "../../../../dms-core/app/composables/realtime/useRealtimeTopic";
+import {
+  hasUrlVariables,
+  resolveUrlVariables,
+} from "../../build/utils/urlVariables";
+import { onPageBlocksRefresh } from "../../utils/blockRefresh";
 
 export interface UseChartFetchOptions<T> {
+  /**
+   * Where the data is read from. `{{params.X}}` is filled from `routeParams`
+   * and `{{query.X}}` from the page URL's query, again when they change;
+   * nothing is requested while a token is left without a value.
+   */
   fetchUrl?: string;
+  /** The parameters of the page route (a block's `routeParams` prop). */
+  routeParams?: () => Record<string, string> | undefined;
   fetchUrlMethod?: string;
   periodScope?: string;
   realtimeTopic?: string | string[];
@@ -17,6 +37,11 @@ export interface UseChartFetchOptions<T> {
 
 export interface UseChartFetchReturn<T> {
   data: Ref<T | null>;
+  /**
+   * A response for the current inputs is still to come: from the first paint
+   * until the first answer, and again from the moment the inputs change
+   * (period, watched state, realtime event) until the new answer lands.
+   */
   isLoading: Ref<boolean>;
   error: Ref<unknown>;
   refresh: () => Promise<void>;
@@ -24,9 +49,12 @@ export interface UseChartFetchReturn<T> {
 
 const DEBOUNCE_FRAME_MS = 180;
 const DEFAULT_HTTP_METHOD = "GET";
-// Matches usePeriodScope's own grace period before it warns about a missing
-// scope: past it, a card whose scope never registered stops claiming to load.
-const PENDING_SCOPE_GRACE_MS = 250;
+// How long a card waits for its period scope to register before it stops
+// claiming to load. The selector registers the scope from its own lazily
+// loaded chunk, which on a slow network lands seconds after the card mounts:
+// a short grace would drop the card to its empty state ("No data") while the
+// scope is merely late. Only a scope no selector ever registers reaches it.
+export const PENDING_SCOPE_TIMEOUT_MS = 10_000;
 
 function buildFinalUrl(
   url: string | undefined,
@@ -38,6 +66,13 @@ function buildFinalUrl(
   return appendPeriodToUrl(url, scopeState);
 }
 
+/** What one fetch requests. */
+interface FetchRequest {
+  url: string | undefined;
+  method: string | undefined;
+  periodScope: string | undefined;
+}
+
 interface FetchRunner {
   hasFetchedOnce: boolean;
   /** Inputs the last fetch was started for, to collapse duplicate triggers. */
@@ -53,30 +88,40 @@ type AuthFetcher = <T>(
 
 async function runFetch<T>(
   authFetch: AuthFetcher,
-  options: UseChartFetchOptions<T>,
+  request: FetchRequest,
   scopeState: PeriodState | null,
   runner: FetchRunner,
   data: Ref<T | null>,
   isLoading: Ref<boolean>,
   error: Ref<unknown>,
 ): Promise<void> {
-  if (!options.fetchUrl) return;
-  if (options.periodScope && !scopeState) return;
-  const url = buildFinalUrl(options.fetchUrl, scopeState, options.periodScope);
+  if (!request.url) return;
+  if (request.periodScope && !scopeState) return;
+  const url = buildFinalUrl(request.url, scopeState, request.periodScope);
   if (!url) return;
   if (runner.activeAbort) runner.activeAbort.abort();
-  runner.activeAbort = new AbortController();
+  const controller = new AbortController();
+  runner.activeAbort = controller;
   isLoading.value = true;
   error.value = null;
   try {
-    data.value = await authFetch<T>(url, {
-      method: options.fetchUrlMethod || DEFAULT_HTTP_METHOD,
-      signal: runner.activeAbort.signal,
+    const response = await authFetch<T>(url, {
+      method: request.method || DEFAULT_HTTP_METHOD,
+      signal: controller.signal,
     });
+    if (runner.activeAbort !== controller) return;
+    data.value = response;
   } catch (err) {
+    if (runner.activeAbort !== controller) return;
     if ((err as { name?: string })?.name !== "AbortError") error.value = err;
   } finally {
-    isLoading.value = false;
+    // A request a newer one superseded leaves the loading flag to that one:
+    // clearing it here would show the empty state while the newer answer is
+    // still on its way.
+    if (runner.activeAbort === controller) {
+      runner.activeAbort = null;
+      isLoading.value = false;
+    }
   }
 }
 
@@ -101,6 +146,34 @@ function subscribeRealtimeTopics(
   }
 }
 
+/**
+ * The URL to request: `fetchUrl` with its tokens filled, or `undefined` while
+ * one has no value. Only a URL naming a token reads the route.
+ */
+function useResolvedFetchUrl<T>(
+  options: UseChartFetchOptions<T>,
+): ComputedRef<string | undefined> {
+  const { fetchUrl } = options;
+  if (!fetchUrl || !hasUrlVariables(fetchUrl)) return computed(() => fetchUrl);
+  const route = useDmsRoute();
+  return computed(() =>
+    resolveUrlVariables(fetchUrl, {
+      routeParams: options.routeParams?.(),
+      routeQuery: route.query as Record<string, unknown>,
+    }),
+  );
+}
+
+// Mounted only: the page refresh is a browser event, and a block the server
+// renders has nothing to refetch.
+function subscribePageRefresh(onRefresh: () => void): void {
+  let unsubscribe: (() => void) | undefined;
+  onMounted(() => {
+    unsubscribe = onPageBlocksRefresh(onRefresh);
+  });
+  onBeforeUnmount(() => unsubscribe?.());
+}
+
 export function useChartFetch<T>(
   options: UseChartFetchOptions<T>,
 ): UseChartFetchReturn<T> {
@@ -112,7 +185,8 @@ export function useChartFetch<T>(
   // period-scoped card renders server-side with no scope and no data. Start
   // in the loading state so consumers show a skeleton instead of a hard zero
   // for the whole hydrate-then-fetch window.
-  const isLoading = ref(Boolean(options.fetchUrl));
+  const resolvedUrl = useResolvedFetchUrl(options);
+  const isLoading = ref(Boolean(resolvedUrl.value));
   const error = ref<unknown>(null);
   const scopeState = usePeriodScope(options.periodScope);
   const { $authFetch } = useAuthFetch();
@@ -126,7 +200,11 @@ export function useChartFetch<T>(
   const performFetch = () =>
     runFetch(
       $authFetch as AuthFetcher,
-      options,
+      {
+        url: resolvedUrl.value,
+        method: options.fetchUrlMethod,
+        periodScope: options.periodScope,
+      },
       scopeState.value,
       runner,
       data,
@@ -136,61 +214,84 @@ export function useChartFetch<T>(
 
   const refresh = async () => {
     if (runner.pendingTimer) clearTimeout(runner.pendingTimer);
+    runner.pendingTimer = null;
     await performFetch();
   };
 
   const currentInputs = () =>
-    `${scopeState.value?.key ?? ""}|${JSON.stringify(options.watchSource?.() ?? null)}`;
+    `${resolvedUrl.value}|${scopeState.value?.key ?? ""}|${JSON.stringify(options.watchSource?.() ?? null)}`;
 
   const fetchScheduledInputs = () => {
+    runner.pendingTimer = null;
     runner.lastInputs = currentInputs();
     void performFetch();
   };
 
+  // A debounced refresh the inputs took back (a period changed and changed
+  // back) leaves nothing to wait for unless a request is still running.
+  const settleCancelledRefresh = (hadPending: boolean) => {
+    if (hadPending && !runner.activeAbort) isLoading.value = false;
+  };
+
   // A period scope registers during the PeriodSelector's setup, which lands
   // before or after a card's own mount depending on which chunk resolves
   // first. Either way both the watcher and onMounted end up looking at the
   // same freshly registered scope and each ask for a refresh; keying on the
   // inputs the last fetch was started for collapses that into one request.
-  const scheduleRefresh = () => {
+  const scheduleRefreshWith = (announcePending: boolean) => {
+    const hadPending = runner.pendingTimer !== null;
     if (runner.pendingTimer) clearTimeout(runner.pendingTimer);
-    if (options.periodScope && !scopeState.value) return;
+    runner.pendingTimer = null;
+    if (!resolvedUrl.value || (options.periodScope && !scopeState.value)) {
+      settleCancelledRefresh(hadPending);
+      return;
+    }
     const inputs = currentInputs();
-    if (inputs === runner.lastInputs) return;
+    if (inputs === runner.lastInputs) {
+      settleCancelledRefresh(hadPending);
+      return;
+    }
     if (!runner.hasFetchedOnce) {
       runner.hasFetchedOnce = true;
       fetchScheduledInputs();
       return;
     }
+    // The values on screen belong to the previous inputs from now on: say so
+    // through the debounce as well, not only once the request leaves.
+    if (announcePending) isLoading.value = true;
     runner.pendingTimer = setTimeout(fetchScheduledInputs, DEBOUNCE_FRAME_MS);
   };
+  const scheduleRefresh = () => scheduleRefreshWith(true);
 
-  // A realtime event means the data behind unchanged inputs moved, so it has
-  // to bypass the deduplication above.
-  const refreshFromRealtime = () => {
+  // A realtime event or a page refresh (refreshPageBlocks) means the data
+  // behind unchanged inputs moved, so it has to bypass the deduplication
+  // above. The inputs did not change, so the values on screen stay current
+  // until the new answer replaces them.
+  const refreshSameInputs = () => {
     runner.lastInputs = null;
-    scheduleRefresh();
+    scheduleRefreshWith(false);
   };
 
   const fetchOnMount = () => {
     scheduleRefresh();
     if (runner.hasFetchedOnce) return;
-    // The scope has not registered yet, and may never. Give it the grace
-    // period usePeriodScope itself allows before it warns, then drop the
-    // loading state so a misconfigured scope shows its empty value rather
-    // than a skeleton that never resolves.
+    // The scope has not registered yet, and may never. Keep the skeleton
+    // while its selector may still be loading, then drop the loading state
+    // so a misconfigured scope shows its empty value rather than a skeleton
+    // that never resolves.
     setTimeout(() => {
       if (!runner.hasFetchedOnce) isLoading.value = false;
-    }, PENDING_SCOPE_GRACE_MS);
+    }, PENDING_SCOPE_TIMEOUT_MS);
   };
 
   if (options.fetchUrl) {
     watch(
-      () => [scopeState.value?.key, options.watchSource?.()],
+      () => [resolvedUrl.value, scopeState.value?.key, options.watchSource?.()],
       scheduleRefresh,
     );
     onMounted(fetchOnMount);
-    subscribeRealtimeTopics(options.realtimeTopic, refreshFromRealtime);
+    subscribeRealtimeTopics(options.realtimeTopic, refreshSameInputs);
+    subscribePageRefresh(refreshSameInputs);
   } else if (typeof options.staticData === "function") {
     watch(
       () => readStaticData(options.staticData),

package/frontend-vue/layers/dms-ui/app/composables/chart/useChartTheme.ts

@@ -1,7 +1,10 @@
 const DEFAULT_COLOR_NAME = "primary";
 const SAFE_HEX_FALLBACK = "#7c3aed";
 const MUTED_FALLBACK = "#6b7280";
-const CHART_GRID_COLOR = "rgba(148, 163, 184, 0.25)";
+const GRID_FALLBACK = "rgba(148, 163, 184, 0.25)";
+const SURFACE_FALLBACK = "#ffffff";
+const MONO_FONT_FALLBACK = "ui-monospace, monospace";
+const MONO_FONT_VARIABLE = "--font-mono";
 const HEX_PREFIXES = ["#", "rgb", "hsl"];
 const SHADE_TOKEN =
   /^(primary|secondary|success|info|warning|error|neutral|accent)-(50|[1-9]00|950)$/;
@@ -9,12 +12,11 @@ const CSS_VARIABLE = /^--[\w-]+$/;
 const CSS_VARIABLE_FUNCTION = /^var\((--[\w-]+)\)$/;
 const COLOR_CHANNEL_MAX = 255;
 const DEFAULT_PALETTE = [
-  "primary",
-  "success",
-  "info",
-  "warning",
-  "error",
-  "secondary",
+  "--dms-chart-1",
+  "--dms-chart-2",
+  "--dms-chart-3",
+  "--dms-chart-4",
+  "--dms-chart-5",
 ];
 
 const COLOR_NAME_TO_VAR: Record<string, string> = {
@@ -52,12 +54,24 @@ function toApexColor(color: string, fallback: string): string {
   context.fillRect(0, 0, 1, 1);
   const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
   if (!alpha) return fallback;
+  // Apex reads the alpha of an rgba() series colour as its fill opacity,
+  // overriding fill.opacity and gradient stops, so opaque colours stay rgb().
+  if (alpha === COLOR_CHANNEL_MAX) return `rgb(${red}, ${green}, ${blue})`;
   return `rgba(${red}, ${green}, ${blue}, ${alpha / COLOR_CHANNEL_MAX})`;
 }
 
+/**
+ * The root class (light / dark) is part of the cache key: a page without a
+ * mounted chart has no theme observer to clear the cache when it flips, so a
+ * chart mounted afterwards would otherwise read the other theme's colours.
+ */
+function themeCacheScope(): string {
+  return document.documentElement?.className ?? "";
+}
+
 function probeCssColor(varName: string, fallback: string): string {
   if (typeof document === "undefined" || !document.body) return fallback;
-  const cacheKey = `${varName}:${fallback}`;
+  const cacheKey = `${themeCacheScope()}:${varName}:${fallback}`;
   const cached = colorProbeCache.get(cacheKey);
   if (cached) return cached;
   const probe = document.createElement("div");
@@ -114,6 +128,41 @@ export function readThemeHighlighted(): string {
   return readCssVariable("--ui-text-highlighted", "#ffffff");
 }
 
+/** Horizontal grid lines (v2 --chart-grid). */
 export function readThemeBorder(): string {
-  return CHART_GRID_COLOR;
+  return readCssVariable("--dms-chart-grid", GRID_FALLBACK);
+}
+
+/** Axis labels and quiet chart text. */
+export function readThemeDimmed(): string {
+  return readCssVariable("--ui-text-dimmed", MUTED_FALLBACK);
+}
+
+/** Crosshair and other hairlines one notch above the grid. */
+export function readThemeBorderAccented(): string {
+  return readCssVariable("--ui-border-accented", GRID_FALLBACK);
+}
+
+/** Card surface, used to ring markers and separate stacked segments. */
+export function readThemeSurface(): string {
+  return readCssVariable("--ui-bg", SURFACE_FALLBACK);
+}
+
+/** Band behind radial tracks and empty donut rings. */
+export function readThemeTrack(): string {
+  return readCssVariable("--dms-bg-muted", GRID_FALLBACK);
+}
+
+/**
+ * The mono font stack for SVG text: Apex writes it into a presentation
+ * attribute, which cannot resolve `var()`.
+ */
+export function readThemeMonoFont(): string {
+  if (typeof document === "undefined" || !document.documentElement) {
+    return MONO_FONT_FALLBACK;
+  }
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue?.(MONO_FONT_VARIABLE)
+    ?.trim();
+  return value || MONO_FONT_FALLBACK;
 }

package/frontend-vue/layers/dms-ui/app/composables/confirm/index.ts

@@ -1,2 +1,3 @@
+export * from "./types";
 export * from "./useConfirm";
 export * from "./usePresenceEditWarning";

package/frontend-vue/layers/dms-ui/app/composables/confirm/types.ts

@@ -0,0 +1,102 @@
+import type { VNodeChild } from "vue";
+import type {
+  ConfirmDialog,
+  ConfirmDialogColor,
+  ConfirmDialogImpact,
+} from "#dms-core/app/types/confirm-dialog";
+
+export type ConfirmColor = ConfirmDialogColor;
+
+/** The footer button a confirm dialog focuses when it opens. */
+export type ConfirmInitialFocus = "cancel" | "confirm";
+
+/** Extra body content rendered between the impact list and the typed check. */
+export type ConfirmBodyRender = () => VNodeChild;
+
+/** One dependent affected by the confirmed action. */
+export type ConfirmImpact = ConfirmDialogImpact;
+
+/** The values the dialog's fields hold when the user confirms. */
+export type ConfirmValues = Record<string, unknown>;
+
+/**
+ * A confirmation dialog as `useConfirm()` opens it: a {@link ConfirmDialog}
+ * whose texts are already resolved, plus what only a caller in the browser
+ * can give (render functions, handlers).
+ */
+export interface ConfirmOptions extends Omit<ConfirmDialog, "params" | "icon"> {
+  /**
+   * The button focused on open (`"cancel"` for a dialog whose safe answer
+   * is to stay); left out, the dialog's first focusable element.
+   */
+  initialFocus?: ConfirmInitialFocus;
+  /** Leading icon of the confirm button. */
+  confirmIcon?: string;
+  /** Header icon; defaults per colour, `false` gives the minimal layout. */
+  icon?: string | false;
+  /**
+   * Extra content (a select, a note…) as a render function, re-run
+   * reactively: state it reads can be refs owned by the caller.
+   */
+  body?: ConfirmBodyRender;
+  /**
+   * Checks the `body` fields on confirm, before `onConfirm`: returns `false`
+   * after flagging the empty or wrong ones (and focusing the first), which
+   * keeps the modal open.
+   */
+  validate?: () => boolean | Promise<boolean>;
+  /**
+   * Awaited on confirm: the modal shows a loading confirm button, blocks
+   * dismissal, and resolves `true` only once it succeeds; a rejection is
+   * shown inline and the modal stays open (a {@link ConfirmTextError} under
+   * the typed field), its confirm button ready for a retry. The alert words
+   * the error for users (see `resolveActionError`): the server's message when
+   * it is user-facing, else a translated fallback. Resolving `false` also
+   * keeps it open, for a handler that already reported the problem itself
+   * (toast); resolving a {@link ConfirmPartialOutcome} keeps it open to say
+   * the action went only part of the way. It receives the values of the
+   * dialog's `fields`; a field error the server answers shows under its
+   * field.
+   */
+  onConfirm?: (
+    values: ConfirmValues,
+  ) => Promise<void | boolean | ConfirmPartialOutcome>;
+}
+
+/** A summary shown in the confirm modal's alert: a title and its detail. */
+export interface ConfirmNotice {
+  title: string;
+  description?: string;
+}
+
+/**
+ * Resolved by `onConfirm` when the action ran only part of the way (a bulk
+ * action some rows refused): what went through is done, so the modal turns
+ * into an acknowledgement — the summary in a warning alert, no confirm button
+ * — and resolves `true` once closed.
+ */
+export interface ConfirmPartialOutcome {
+  partial: ConfirmNotice;
+}
+
+/**
+ * Thrown by `onConfirm` with a message already worded for users (a title and
+ * its reason): the modal shows both in its error alert, as they are.
+ */
+export class ConfirmActionError extends Error {
+  readonly description?: string;
+
+  constructor(notice: ConfirmNotice) {
+    super(notice.title);
+    this.description = notice.description;
+  }
+}
+
+/**
+ * Thrown by `onConfirm` when the server refused the typed confirmation text:
+ * the modal shows the message under the typed field (marked invalid, then
+ * focused) instead of its error alert.
+ */
+export class ConfirmTextError extends Error {
+  readonly field = "confirmText";
+}

package/frontend-vue/layers/dms-ui/app/composables/confirm/useConfirm.ts

@@ -1,13 +1,11 @@
 import LazyDmsConfirmModal from "../../components/confirm/ConfirmModal.vue";
+import type { ConfirmOptions } from "./types";
 
-export interface ConfirmOptions {
-  title: string;
-  description: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  confirmColor?: "primary" | "error" | "warning";
-}
-
+/**
+ * Opens the DMS confirmation modal.
+ *
+ * @returns `confirm(options)`, resolving `true` when the user confirmed.
+ */
 export function useConfirm() {
   const overlay = useOverlay();
 

package/frontend-vue/layers/dms-ui/app/composables/containers/openDynamicContainer.ts

@@ -84,6 +84,7 @@ export function openDynamicContainer<Result, Options extends ContainerOptions>(
 
   return {
     result,
+    patch: (patch) => instance.patch(patch),
     close: (value?: Result) => {
       if (opened) {
         instance.close(value);

package/frontend-vue/layers/dms-ui/app/composables/containers/types.ts

@@ -7,6 +7,15 @@ import type { ModalSize } from "../../types/modal";
  */
 export type DrawerDirection = "top" | "bottom" | "left" | "right";
 
+/** Tint of the optional header icon well of a container. */
+export type ContainerColor =
+  | "primary"
+  | "neutral"
+  | "success"
+  | "info"
+  | "warning"
+  | "error";
+
 /**
  * Options shared by every themed container opened through a public composable.
  * They map one-to-one onto the props of the internal Dynamic{Drawer,Modal}
@@ -17,9 +26,18 @@ export interface ContainerOptions {
   description?: string;
   component: Component;
   componentOptions?: Record<string, unknown>;
+  /**
+   * Mounts the body component anew when it changes: a drawer stepping to
+   * another row gives the component a fresh start on it.
+   */
+  componentKey?: string;
   headerComponent?: Component;
   headerComponentOptions?: Record<string, unknown>;
   containerId?: string;
+  /** Icon rendered in a 36px tinted well before the title. */
+  icon?: string;
+  /** Tint of the icon well (default primary). */
+  color?: ContainerColor;
 }
 
 /** Options accepted by {@link useDrawer}'s `open`. */
@@ -35,9 +53,20 @@ export interface ModalOptions extends ContainerOptions {
 /**
  * Handle returned when a container is opened. `result` settles with the value
  * the body component emits on `success` (or the value passed to `close`) once
- * the container is dismissed; `close` dismisses it programmatically.
+ * the container is dismissed; `close` dismisses it programmatically, `patch`
+ * changes it in place.
  */
 export interface ContainerInstance<Result = unknown> {
   result: Promise<Result>;
   close: (result?: Result) => void;
+  /** Updates the open container: its texts, or its body's options and key. */
+  patch: (options: ContainerPatch) => void;
 }
+
+/** What an open container can change in place. */
+export type ContainerPatch = Partial<
+  Pick<
+    ContainerOptions,
+    "title" | "description" | "componentOptions" | "componentKey"
+  >
+>;

package/frontend-vue/layers/dms-ui/app/composables/form/types/api.ts

@@ -1,5 +1,5 @@
 import type { FormData } from "./value";
-import type { WarningResponse } from "../../../utils/responseWarning";
+import type { WarningResponse } from "../../../build/utils/responseWarning";
 
 export interface FormFetchResponse extends FormData {}
 

package/frontend-vue/layers/dms-ui/app/composables/form/types/field.ts

@@ -1,11 +1,33 @@
 import type { FormFieldValue } from "./value";
 
+/** A pill beside a read-only field's value. */
+export interface FormFieldBadge {
+  label: string;
+  tone: string;
+}
+
+/** A link beside a read-only field's value: where it is changed. */
+export interface FormFieldLink {
+  label: string;
+  to: string;
+}
+
+/** A pill or a link beside a read-only field's value. */
+export interface FormFieldReadonly {
+  badge?: FormFieldBadge;
+  link?: FormFieldLink;
+}
+
 export interface FormField {
   id: string;
   label?: string;
   description?: string;
+  /** A grey help line under the control. */
+  hint?: string;
   component: ComponentInfo;
   disabled?: boolean;
+  /** Shown, not edited: `true`, or with a pill and a link. */
+  readonly?: boolean | FormFieldReadonly;
   required?: boolean;
   type?: string;
   defaultValue?: FormFieldValue;
@@ -23,6 +45,18 @@ export interface FieldGroup {
 
 export type FormFieldOrGroup = FormField | FieldGroup;
 
+/** How a sectioned form lists its sections. */
+export type FormSectionNav = "side" | "jump" | "none";
+
+/** A titled card of a form: the ids of the form's entries it holds. */
+export interface FormSection {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  fieldIds: string[];
+}
+
 export function isFieldGroup(item: FormFieldOrGroup): item is FieldGroup {
   return "fields" in item && Array.isArray(item.fields);
 }