@antelopejs/dms 0.0.1

package/frontend-vue/pnpm-workspace.yaml

@@ -0,0 +1,9 @@
+packages:
+  - "."
+
+onlyBuiltDependencies:
+  - sharp
+  - "@parcel/watcher"
+  - esbuild
+  - puppeteer
+  - vue-demi

package/frontend-vue/tests/api-message-i18n.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { resolveApiMessage } from "../layers/dms-core/app/composables/translation/useTranslation";
+
+const MESSAGES: Record<string, string> = {
+  "error.unauthorized": "You are not allowed to perform this action.",
+  "page.settings.invites.error.not_found": "This invitation no longer exists.",
+};
+
+const translate = (key: string) => MESSAGES[key] ?? key;
+
+describe("resolveApiMessage", () => {
+  it("translates a bare backend key", () => {
+    expect(resolveApiMessage(translate, "error.unauthorized")).toBe(
+      "You are not allowed to perform this action.",
+    );
+  });
+
+  it("translates a key carrying the DMS $ prefix", () => {
+    expect(
+      resolveApiMessage(translate, "$page.settings.invites.error.not_found"),
+    ).toBe("This invitation no longer exists.");
+  });
+
+  it("falls back to the bare key when a $ marked key has no translation", () => {
+    expect(resolveApiMessage(translate, "$error.does_not_exist")).toBe(
+      "error.does_not_exist",
+    );
+  });
+
+  it("returns an untranslated bare key as it came in", () => {
+    expect(resolveApiMessage(translate, "error.does_not_exist")).toBe(
+      "error.does_not_exist",
+    );
+  });
+
+  it("leaves a plain-text message untouched", () => {
+    expect(resolveApiMessage(translate, "Export response has no body")).toBe(
+      "Export response has no body",
+    );
+  });
+
+  it("stringifies a non-string message instead of throwing", () => {
+    expect(resolveApiMessage(translate, { code: 12 })).toBe("[object Object]");
+    expect(resolveApiMessage(translate, undefined)).toBe("undefined");
+  });
+});

package/frontend-vue/tests/async-data-key-owners.test.ts

@@ -0,0 +1,74 @@
+import { readFileSync, readdirSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const LAYERS_DIR = fileURLToPath(new URL("../layers", import.meta.url));
+const SOURCE_EXTENSIONS = [".vue", ".ts"];
+const ASYNC_DATA_KEY =
+  /useDms(?:Lazy)?AsyncData\(\s*(?:`([^`]*)`|"([^"]*)"|'([^']*)')/g;
+
+function collectSources(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return collectSources(path);
+    return SOURCE_EXTENSIONS.some((ext) => entry.name.endsWith(ext))
+      ? [path]
+      : [];
+  });
+}
+
+// String constants are resolved so a key spelled `${PREFIX}${id}` is still
+// comparable; what is left interpolated marks the end of the static part.
+function staticPrefix(key: string, source: string): string {
+  const resolved = key.replace(/\$\{(\w+)\}/g, (interpolation, name) => {
+    const declaration = source.match(
+      new RegExp(`\\bconst ${name} = ("[^"]*"|'[^']*'|\`[^\`$]*\`)`),
+    );
+    return declaration ? declaration[1]!.slice(1, -1) : interpolation;
+  });
+  return resolved.split("${")[0] ?? "";
+}
+
+function keyOwners(): Map<string, Set<string>> {
+  const owners = new Map<string, Set<string>>();
+  for (const path of collectSources(LAYERS_DIR)) {
+    const source = readFileSync(path, "utf8");
+    for (const match of source.matchAll(ASYNC_DATA_KEY)) {
+      const key = match[1] ?? match[2] ?? match[3] ?? "";
+      const prefix = staticPrefix(key, source);
+      if (!prefix) continue;
+      const files = owners.get(prefix) ?? new Set<string>();
+      files.add(relative(LAYERS_DIR, path));
+      owners.set(prefix, files);
+    }
+  }
+  return owners;
+}
+
+describe("useAsyncData key ownership", () => {
+  // Nuxt keys async data globally and keeps only the first handler registered
+  // for a key, so a key claimed from two files means one of them silently runs
+  // the other's fetch. Sharing is fine — through a composable, from one file.
+  it("declares every key prefix in a single file", () => {
+    const shared = [...keyOwners()]
+      .filter(([, files]) => files.size > 1)
+      .map(([prefix, files]) => `${prefix} → ${[...files].join(", ")}`);
+
+    expect(shared).toEqual([]);
+  });
+
+  it("routes the page layout fetch through usePageLayout", () => {
+    const page = readFileSync(
+      join(LAYERS_DIR, "dms-layout/app/pages/[...slug].vue"),
+      "utf8",
+    );
+    const owner = readFileSync(
+      join(LAYERS_DIR, "dms-layout/app/composables/page/usePageLayout.ts"),
+      "utf8",
+    );
+    expect(page).toContain("await usePageLayout()");
+    expect(page).not.toContain("useDmsAsyncData(");
+    expect(owner).toContain("siteLayout.pageLayouts.value");
+  });
+});

package/frontend-vue/tests/cascader.test.ts

@@ -0,0 +1,189 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildCascaderPathLabels,
+  buildCascaderTree,
+  findCascaderNode,
+  flattenCascaderTree,
+  formatCascaderPath,
+  isCascaderNodeSelectable,
+  resolveCascaderKeyMapping,
+  searchCascaderTree,
+  type CascaderKeyMapping,
+} from "../layers/dms-ui/app/utils/cascader";
+
+const keyMapping: CascaderKeyMapping = {
+  label: "name",
+  value: "_id",
+  parent: "parent_id",
+  disabled: "inactive",
+};
+
+interface CategoryRow extends Record<string, unknown> {
+  _id: string;
+  name: string;
+  parent_id: string | null;
+  inactive?: boolean;
+}
+
+const categories: CategoryRow[] = [
+  { _id: "electronics", name: "Electronics", parent_id: null },
+  { _id: "audio", name: "Audio", parent_id: "electronics" },
+  { _id: "headphones", name: "Headphones", parent_id: "audio" },
+  { _id: "speakers", name: "Speakers", parent_id: "audio" },
+  { _id: "video", name: "Video", parent_id: "electronics", inactive: true },
+  { _id: "tv", name: "TV", parent_id: "video" },
+  { _id: "garden", name: "Garden", parent_id: null },
+];
+
+describe("buildCascaderTree", () => {
+  it("rebuilds the tree from a flat list", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    expect(roots.map((node) => node.value)).toEqual(["electronics", "garden"]);
+    const audio = findCascaderNode(roots, "audio");
+    expect(audio?.children.map((node) => node.value)).toEqual([
+      "headphones",
+      "speakers",
+    ]);
+    expect(audio?.depth).toBe(2);
+    expect(audio?.pathLabels).toEqual(["Electronics", "Audio"]);
+  });
+
+  it("treats rows with a missing parent as roots", () => {
+    const roots = buildCascaderTree(
+      [
+        { _id: "a", name: "A", parent_id: null },
+        { _id: "orphan", name: "Orphan", parent_id: "missing" },
+      ],
+      keyMapping,
+    );
+
+    expect(roots.map((node) => node.value)).toEqual(["a", "orphan"]);
+  });
+
+  it("drops rows trapped in a parent cycle", () => {
+    const roots = buildCascaderTree(
+      [
+        { _id: "a", name: "A", parent_id: "b" },
+        { _id: "b", name: "B", parent_id: "a" },
+        { _id: "root", name: "Root", parent_id: null },
+      ],
+      keyMapping,
+    );
+
+    expect(flattenCascaderTree(roots).map((node) => node.value)).toEqual([
+      "root",
+    ]);
+  });
+
+  it("disables the entire subtree of a disabled node", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    expect(findCascaderNode(roots, "video")?.disabled).toBe(true);
+    expect(findCascaderNode(roots, "tv")?.disabled).toBe(true);
+    expect(findCascaderNode(roots, "audio")?.disabled).toBe(false);
+  });
+
+  it("prunes nodes deeper than maxDepth", () => {
+    const roots = buildCascaderTree(categories, keyMapping, { maxDepth: 2 });
+
+    const depths = flattenCascaderTree(roots).map((node) => node.depth);
+    expect(Math.max(...depths)).toBe(2);
+    expect(findCascaderNode(roots, "headphones")).toBeUndefined();
+    expect(findCascaderNode(roots, "audio")?.children).toEqual([]);
+  });
+});
+
+describe("searchCascaderTree", () => {
+  it("matches on the full path, case-insensitively", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    const matches = searchCascaderTree(roots, "electronics / audio");
+    expect(matches.map((node) => node.value)).toEqual([
+      "audio",
+      "headphones",
+      "speakers",
+    ]);
+  });
+
+  it("finds a node by its own label", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    const matches = searchCascaderTree(roots, "HeadPhones");
+    expect(matches.map((node) => formatCascaderPath(node))).toEqual([
+      "Electronics / Audio / Headphones",
+    ]);
+  });
+
+  it("returns nothing for a blank query", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    expect(searchCascaderTree(roots, "  ")).toEqual([]);
+  });
+
+  it("keeps disabled nodes in the results", () => {
+    const roots = buildCascaderTree(categories, keyMapping);
+
+    const matches = searchCascaderTree(roots, "tv");
+    expect(matches.map((node) => node.value)).toEqual(["tv"]);
+    expect(matches[0]?.disabled).toBe(true);
+  });
+});
+
+describe("isCascaderNodeSelectable", () => {
+  const roots = buildCascaderTree(categories, keyMapping);
+
+  it("rejects disabled nodes", () => {
+    expect(isCascaderNodeSelectable(findCascaderNode(roots, "video")!)).toBe(
+      false,
+    );
+  });
+
+  it("allows intermediate nodes unless leafOnly is set", () => {
+    const audio = findCascaderNode(roots, "audio")!;
+    expect(isCascaderNodeSelectable(audio)).toBe(true);
+    expect(isCascaderNodeSelectable(audio, { leafOnly: true })).toBe(false);
+    expect(
+      isCascaderNodeSelectable(findCascaderNode(roots, "headphones")!, {
+        leafOnly: true,
+      }),
+    ).toBe(true);
+  });
+
+  it("rejects nodes deeper than maxDepth", () => {
+    const headphones = findCascaderNode(roots, "headphones")!;
+    expect(isCascaderNodeSelectable(headphones, { maxDepth: 2 })).toBe(false);
+    expect(isCascaderNodeSelectable(headphones, { maxDepth: 3 })).toBe(true);
+  });
+});
+
+describe("buildCascaderPathLabels", () => {
+  it("resolves the full label path from the flat list", () => {
+    expect(
+      buildCascaderPathLabels(categories, keyMapping, "headphones"),
+    ).toEqual(["Electronics", "Audio", "Headphones"]);
+  });
+
+  it("returns an empty array for an unknown value", () => {
+    expect(buildCascaderPathLabels(categories, keyMapping, "nope")).toEqual([]);
+  });
+
+  it("stops at a parent cycle without looping", () => {
+    const rows = [
+      { _id: "a", name: "A", parent_id: "b" },
+      { _id: "b", name: "B", parent_id: "a" },
+    ];
+    expect(buildCascaderPathLabels(rows, keyMapping, "a")).toEqual(["B", "A"]);
+  });
+});
+
+describe("resolveCascaderKeyMapping", () => {
+  it("falls back to default keys", () => {
+    expect(resolveCascaderKeyMapping()).toEqual({
+      label: "label",
+      value: "value",
+      parent: "parent",
+    });
+    expect(resolveCascaderKeyMapping({ label: "name" }).label).toBe("name");
+  });
+});

package/frontend-vue/tests/chart-auto-y-range.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+import { reactive } from "vue";
+import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
+import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
+
+interface AutoBounds {
+  min: (value: number) => number;
+  max: (value: number) => number;
+}
+
+function chartFor(input: Partial<UseApexChartInput> = {}) {
+  return useApexChart(() => ({ type: "line", series: [], ...input }));
+}
+
+function boundsFor(input: Partial<UseApexChartInput> = {}): AutoBounds {
+  return chartFor({ autoYRange: {}, ...input }).options.value
+    .yaxis as AutoBounds;
+}
+
+describe("annotation-aware auto Y range", () => {
+  it("leaves native scaling unchanged unless opted in", () => {
+    const yaxis = chartFor({ annotations: [{ y: 200 }] }).options.value.yaxis;
+    expect(yaxis).not.toHaveProperty("min");
+    expect(yaxis).not.toHaveProperty("max");
+  });
+
+  it("keeps explicit bounds authoritative even with annotations and auto range", () => {
+    const yaxis = boundsFor({
+      yRange: { min: 0, max: 10 },
+      annotations: [{ y: 200 }],
+    });
+    expect(yaxis).toMatchObject({ min: 0, max: 10 });
+  });
+
+  it("expands both ends for annotations above and below native data bounds", () => {
+    const bounds = boundsFor({ annotations: [{ y: 200 }, { y: -50 }] });
+    expect(bounds.min(10)).toBe(-54);
+    expect(bounds.max(30)).toBe(216);
+  });
+
+  it("includes both ends of a reversed band and all native series extrema", () => {
+    const bounds = boundsFor({ annotations: [{ y: 200, y2: -50 }] });
+    expect(bounds.min(-100)).toBe(-108);
+    expect(bounds.max(300)).toBe(324);
+  });
+
+  it("pads negative bounds outwards rather than clipping negative data", () => {
+    const bounds = boundsFor();
+    expect(bounds.min(-100)).toBe(-108);
+    expect(bounds.max(-10)).toBe(-9.2);
+  });
+
+  it("gives zero-only data a nonzero range without changing the series", () => {
+    const series = [{ name: "zero", data: [0, 0] }];
+    const chart = chartFor({ autoYRange: {}, series });
+    const bounds = chart.options.value.yaxis as AutoBounds;
+    expect(bounds.min(0)).toBe(-0.08);
+    expect(bounds.max(0)).toBe(0.08);
+    expect(chart.series.value).toEqual(series);
+  });
+
+  it("does not synthesize data for an empty chart", () => {
+    expect(
+      chartFor({ autoYRange: {}, annotations: [{ y: 20 }] }).series.value,
+    ).toEqual([]);
+  });
+
+  it("supports zero padding", () => {
+    const bounds = boundsFor({
+      autoYRange: { padding: 0 },
+      annotations: [{ y: 20 }],
+    });
+    expect(bounds.min(0)).toBe(0);
+    expect(bounds.max(10)).toBe(20);
+  });
+
+  it.each([-1, NaN, Infinity])("defaults invalid padding %s", (padding) => {
+    expect(boundsFor({ autoYRange: { padding } }).max(100)).toBe(108);
+  });
+
+  it("ignores nonfinite annotation coordinates when determining bounds", () => {
+    const bounds = boundsFor({
+      annotations: [{ y: NaN }, { y: Infinity }, { y: 20 }],
+    });
+    expect(bounds.min(10)).toBe(9.2);
+    expect(bounds.max(10)).toBe(21.6);
+  });
+
+  it("recomputes when annotations or padding change", () => {
+    const input = reactive<UseApexChartInput>({
+      type: "line",
+      series: [],
+      autoYRange: { padding: 0.1 },
+      annotations: [{ y: 20 }],
+    });
+    const chart = useApexChart(() => input);
+    expect((chart.options.value.yaxis as AutoBounds).max(10)).toBe(22);
+    input.annotations![0]!.y = 40;
+    input.autoYRange!.padding = 0.2;
+    expect((chart.options.value.yaxis as AutoBounds).max(10)).toBe(48);
+  });
+
+  it("retains the rawOptions escape hatch precedence", () => {
+    expect(
+      chartFor({
+        autoYRange: {},
+        rawOptions: [{ key: "yaxis", value: '{"min":0,"max":5}' }],
+      }).options.value.yaxis,
+    ).toEqual({ min: 0, max: 5 });
+  });
+
+  it("does not scale circular charts", () => {
+    expect(boundsFor({ type: "donut" })).not.toHaveProperty("min");
+  });
+});

package/frontend-vue/tests/chart-click-payload.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { readPointValue } from "../layers/dms-ui/app/composables/chart/events";
+
+describe("readPointValue", () => {
+  it("keeps a bare number in value", () => {
+    expect(readPointValue(42)).toEqual({ value: 42 });
+  });
+
+  it("keeps a scalar point's y in value", () => {
+    expect(readPointValue({ x: "10:00", y: 42 })).toEqual({ value: 42 });
+  });
+
+  it("keeps an explicit null y as a null value", () => {
+    expect(readPointValue({ x: "10:00", y: null })).toEqual({ value: null });
+  });
+
+  it("moves a rangeArea tuple into values with a null value", () => {
+    expect(readPointValue({ x: "10:00", y: [12, 48] })).toEqual({
+      value: null,
+      values: [12, 48],
+    });
+  });
+
+  it("moves a candlestick tuple into values with a null value", () => {
+    expect(readPointValue({ x: "Jan", y: [100, 120, 95, 110] })).toEqual({
+      value: null,
+      values: [100, 120, 95, 110],
+    });
+  });
+
+  it("treats a missing point as a null value", () => {
+    expect(readPointValue(undefined)).toEqual({ value: null });
+  });
+});

package/frontend-vue/tests/chart-colors.browser.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>DMS chart color browser check</title>
+  <style>
+    :root {
+      --ui-color-primary-500: oklch(60.6% 0.25 292.717);
+      --ui-color-primary-400: oklch(70.2% 0.183 293.541);
+      --ui-primary: var(--ui-color-primary-500);
+      --ui-text-muted: #6b7280;
+      --ui-text-highlighted: #111827;
+      --invalid-color: 12px;
+      --transparent-color: transparent;
+      background: white;
+      color: #111827;
+      font: 16px system-ui;
+    }
+    :root.dark {
+      --ui-primary: var(--ui-color-primary-400);
+      --ui-text-muted: #9ca3af;
+      --ui-text-highlighted: #f9fafb;
+      background: #111827;
+      color: #f9fafb;
+    }
+    body {
+      max-width: 960px;
+      margin: 48px auto;
+      padding: 24px;
+    }
+    button {
+      padding: 12px 20px;
+      cursor: pointer;
+    }
+    pre {
+      white-space: pre-wrap;
+    }
+  </style>
+  <h1>DMS chart color browser check</h1>
+  <p>
+    Real resolver, theme observer and ApexCharts. Violet scale values are test
+    fixtures, not a new application palette.
+  </p>
+  <button id="theme">Toggle light / dark</button>
+  <div id="app"></div>
+  <script type="module">
+    import { createApp, h, onMounted, watch } from "vue";
+    import ApexCharts from "apexcharts";
+    import { useThemeRevision } from "../layers/dms-ui/app/composables/chart/useThemeRevision.ts";
+    import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart.ts";
+    import { resolveChartColor } from "../layers/dms-ui/app/composables/chart/useChartTheme.ts";
+
+    const HEIGHT = 360;
+    const EXPECTED_FALLBACK = "#7c3aed";
+    const series = [
+      {
+        name: "Semantic primary",
+        data: [
+          { x: "Mon", y: 25 },
+          { x: "Tue", y: 60 },
+          { x: "Wed", y: 40 },
+        ],
+      },
+      {
+        name: "Typed primary-400",
+        color: "primary-400",
+        data: [
+          { x: "Mon", y: 10 },
+          { x: "Tue", y: 35 },
+          { x: "Wed", y: 20 },
+        ],
+      },
+    ];
+
+    function verifyResolution() {
+      const alias = resolveChartColor("var(--ui-color-primary-500)");
+      if (alias !== resolveChartColor("primary-500"))
+        throw Error("Alias mismatch");
+      if (!alias.startsWith("rgba(")) throw Error("OKLCH was not normalized");
+      for (const token of ["--invalid-color", "--transparent-color"]) {
+        if (resolveChartColor(token) !== EXPECTED_FALLBACK)
+          throw Error(`Invalid fallback: ${token}`);
+      }
+      if (resolveChartColor("--missing") !== "rgb(124, 58, 237)")
+        throw Error("Missing token inherited text color");
+      const stops = [...document.querySelectorAll("stop")];
+      if (
+        !stops.length ||
+        stops.some(
+          (stop) => !stop.getAttribute("stop-color")?.startsWith("rgba("),
+        )
+      )
+        throw Error("Unresolved Apex gradient stop");
+      return "PASS: aliases, OKLCH → sRGB, missing / invalid / transparent fallback";
+    }
+
+    function apexOptions(chart) {
+      return {
+        ...chart.options.value,
+        series: chart.series.value,
+        chart: {
+          type: "area",
+          height: HEIGHT,
+          animations: { enabled: false },
+          toolbar: { show: false },
+        },
+        fill: {
+          type: "gradient",
+          gradient: { opacityFrom: 0.5, opacityTo: 0.1 },
+        },
+      };
+    }
+
+    function renderCheck(chart, revision) {
+      return h("section", [
+        h("div", { id: "chart" }),
+        h(
+          "pre",
+          { id: "values" },
+          JSON.stringify({
+            revision: revision.value,
+            colors: chart.options.value.colors,
+          }),
+        ),
+        h("pre", { id: "checks" }),
+      ]);
+    }
+
+    createApp({
+      setup() {
+        const revision = useThemeRevision();
+        const chart = useApexChart(() => ({
+          type: "area",
+          series,
+          colors: ["primary"],
+          themeRevision: revision.value,
+        }));
+        let apex;
+        onMounted(async () => {
+          apex = new ApexCharts(
+            document.querySelector("#chart"),
+            apexOptions(chart),
+          );
+          await apex.render();
+          document.querySelector("#checks").textContent = verifyResolution();
+        });
+        watch(chart.options, async () => {
+          await apex?.updateOptions(apexOptions(chart));
+          document.querySelector("#checks").textContent = verifyResolution();
+        });
+        return () => renderCheck(chart, revision);
+      },
+    }).mount("#app");
+    document.querySelector("#theme").onclick = () =>
+      document.documentElement.classList.toggle("dark");
+  </script>
+</html>