@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -0,0 +1,258 @@
+export default {
+  ui: {
+    colors: {
+      primary: "dms",
+      neutral: "neutral",
+      // Design semantic hexes map exactly onto these Tailwind palettes:
+      // success #10b981 (emerald), warning #f59e0b (amber),
+      // error #ef4444 (red), info #06b6d4 (cyan).
+      success: "emerald",
+      warning: "amber",
+      error: "red",
+      info: "cyan",
+    },
+    icons: {
+      arrowDown: "i-ph-arrow-down-light",
+      arrowLeft: "i-ph-arrow-left-light",
+      arrowRight: "i-ph-arrow-right-light",
+      arrowUp: "i-ph-arrow-up-light",
+      check: "i-ph-check-light",
+      chevronDoubleLeft: "i-ph-caret-double-left-light",
+      chevronDoubleRight: "i-ph-caret-double-right-light",
+      chevronDown: "i-ph-caret-down-light",
+      chevronLeft: "i-ph-caret-left-light",
+      chevronRight: "i-ph-caret-right-light",
+      chevronUp: "i-ph-caret-up-light",
+      close: "i-ph-x-light",
+      ellipsis: "i-ph-dots-three-light",
+      external: "i-ph-arrow-up-right-light",
+      menu: "i-ph-list-light",
+      minus: "i-ph-minus-light",
+      panelClose: "i-ph-sidebar-simple-light",
+      panelOpen: "i-ph-sidebar-simple-light",
+      plus: "i-ph-plus-light",
+      search: "i-ph-magnifying-glass-light",
+    },
+    dashboardPanel: {
+      slots: {
+        root: "bg-muted",
+        body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto px-0",
+      },
+    },
+    drawer: {
+      slots: {
+        // Same surface as the app canvas (dashboardPanel root bg-muted) so
+        // drawer content doesn't stand out as a white sheet over the page.
+        content: "bg-muted",
+      },
+    },
+    switch: {
+      slots: {
+        base: "dark:data-[state=unchecked]:bg-neutral-700",
+        thumb: "dark:bg-neutral-100",
+      },
+      variants: {
+        color: {
+          // A deeper primary shade keeps contrast with the light thumb.
+          primary: {
+            base: "dark:data-[state=checked]:bg-(--ui-color-primary-600)",
+          },
+        },
+      },
+    },
+    card: {
+      slots: {
+        // Align Nuxt UI cards with the shared .dms-card surface so the few
+        // remaining <UCard> usages (notifications, localized fields) match
+        // the design system — surface-card bg, hairline border, rounded-xl,
+        // soft shadow — instead of Nuxt UI defaults.
+        root: "rounded-xl bg-(--dms-surface-card) ring-0 border border-default shadow-sm",
+      },
+    },
+    kbd: {
+      // <UKbd> is a single-element component (no slots): base/variants live at
+      // the root of its theme.
+      // Design keys are monospace caps everywhere (.kkey / .side-search kbd).
+      base: "font-mono font-semibold tracking-[0.02em]",
+      variants: {
+        size: {
+          // size="lg" carries the full design .kkey look (settings/shortcuts):
+          // taller inset key with a hairline border and a thicker bottom edge.
+          lg: "h-[30px] min-w-[34px] rounded-[7px] bg-default text-default border border-accented border-b-2 px-[11px] text-xs ring-0",
+        },
+      },
+    },
+    navigationMenu: {
+      slots: {
+        // Section labels as design eyebrows (.side-label: mono 10px,
+        // uppercase, wide tracking, tertiary color).
+        label:
+          "font-mono text-[10px] font-medium tracking-[0.14em] uppercase text-dimmed pt-2.5 pb-1.5",
+        // Sidebar density from the design (.nav-head 13.5px/500, .nav-sub
+        // 13px/450, 10px gap) and smaller icons (design 17px head / 15px sub
+        // vs Nuxt UI's 20px size-5).
+        link: "text-[13.5px] gap-2.5",
+        linkLeadingIcon: "size-[17px]",
+        linkTrailingIcon: "size-4",
+        childLink: "text-[13px] gap-2.5 font-normal",
+        childLinkIcon: "size-[15px]",
+      },
+      compoundVariants: [
+        // Active item box in primary tint (design: accent-bg) instead of
+        // the default elevated gray.
+        {
+          variant: "pill",
+          active: true,
+          highlight: false,
+          class: {
+            link: "before:bg-primary/10 font-semibold",
+          },
+        },
+        {
+          variant: "pill",
+          active: true,
+          highlight: true,
+          disabled: false,
+          class: {
+            link: "before:bg-primary/10 hover:before:bg-primary/15 font-semibold",
+          },
+        },
+        // Nested active item (design nav-sub.is-active): the box extends
+        // left to the child guide line with a flat edge, and the primary
+        // bar covers the full row height on that line.
+        {
+          orientation: "vertical",
+          highlight: true,
+          level: true,
+          active: true,
+          class: {
+            link: "before:-start-1.5 before:rounded-s-none after:inset-y-0 after:w-[2px] after:rounded-none",
+          },
+        },
+      ],
+    },
+    button: {
+      slots: {
+        // Tactile press + full transition (design .btn active:scale(.97)).
+        base: "transition active:scale-[0.98]",
+      },
+      compoundVariants: [
+        // Inset top highlight on the solid primary fill (design .btn-primary).
+        {
+          color: "primary",
+          variant: "solid",
+          class: "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.18)]",
+        },
+      ],
+    },
+    badge: {
+      // Design badges are semibold (b-* = font-weight 600).
+      base: "font-semibold",
+      // Pill shape (design --radius-full); the size variants set rounded-sm/md,
+      // so override at the variant level to win the cascade.
+      variants: {
+        size: {
+          xs: { base: "rounded-full" },
+          sm: { base: "rounded-full" },
+          md: { base: "rounded-full" },
+          lg: { base: "rounded-full" },
+          xl: { base: "rounded-full" },
+        },
+      },
+      // The subtle ring is set per-color via compoundVariants; append ring-0
+      // after them so the design's flat (borderless) tint wins the cascade.
+      compoundVariants: [{ variant: "subtle", class: "ring-0" }],
+      // Subtle tint is the design default (b-success/b-warning… = 10% fills).
+      defaultVariants: {
+        variant: "subtle",
+      },
+    },
+    // Recessed (inset) field background: faint gray on light cards, the page
+    // canvas color on dark cards — matches the design --surface-inset look.
+    input: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    textarea: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    select: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    selectMenu: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    inputNumber: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    inputMenu: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    inputTags: {
+      variants: { variant: { outline: "bg-muted dark:bg-default" } },
+    },
+    table: {
+      slots: {
+        // Tinted header cells + full-row hover (design table.tbl thead / tr:hover).
+        th: "bg-muted",
+        tbody: "[&>tr]:hover:bg-elevated/30",
+      },
+    },
+    tabs: {
+      slots: {
+        // Active tab in the cyan accent (design .tbl-tab.is-active).
+        trigger:
+          "data-[state=active]:text-primary data-[state=active]:font-semibold",
+      },
+      variants: {
+        variant: {
+          // Active "box" as a flat accent tint instead of the white pill.
+          pill: { indicator: "bg-primary/10 shadow-none" },
+        },
+      },
+    },
+    modal: {
+      slots: {
+        // Stronger elevation for the centered dialog (design .modal-box shadow-xl).
+        content: "shadow-xl",
+      },
+    },
+    slideover: {
+      slots: {
+        content: "sm:shadow-xl",
+      },
+    },
+    popover: {
+      slots: {
+        // Slightly larger radius for floating panels (design menus radius-lg).
+        content: "rounded-lg",
+      },
+    },
+    dropdownMenu: {
+      slots: {
+        content: "rounded-lg",
+      },
+    },
+    breadcrumb: {
+      slots: {
+        // Match the design .crumbs: ~13.5px medium text, current segment in
+        // the cyan accent (.crumb-cur), and much smaller icons/chevrons
+        // (Nuxt UI defaults them to size-5 / 20px).
+        link: "text-[13.5px] font-medium aria-[current=page]:text-primary aria-[current=page]:font-semibold",
+        linkLeadingIcon: "size-3.5",
+        separatorIcon: "size-3.5",
+      },
+    },
+  },
+  branding: {
+    logo: {
+      default: {
+        light: "/images/antelope-logo/light.svg",
+        dark: "/images/antelope-logo/dark.svg",
+      },
+      collapsed: {
+        light: "/images/antelope-logo/icon.svg",
+        dark: "/images/antelope-logo/icon.svg",
+      },
+    },
+  },
+};

package/frontend-vue/layers/dms-layout/app/assets/css/main.css

@@ -0,0 +1,268 @@
+@layer theme, base, dms, components, utilities;
+
+@import "tailwindcss";
+@import "@nuxt/ui";
+@plugin "@tailwindcss/typography";
+@source "../../app.config.ts";
+
+/* Self-hosted Geist (SIL OFL 1.1, files in /public/fonts + LICENSE.txt).
+   Variable files cover weights 100–900 and keep builds deterministic offline. */
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/Geist-Variable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Geist";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/Geist-Italic-Variable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/fonts/GeistMono-Italic-Variable.woff2") format("woff2");
+}
+
+/* Interface scale: Nuxt UI / Tailwind sizing is rem-based, so scaling the
+   root font-size scales the whole interface while keeping proportions. */
+:root[data-scale="small"] {
+  font-size: 87.5%;
+}
+:root[data-scale="large"] {
+  font-size: 112.5%;
+}
+
+/* Antelope DMS design tokens (see Antelopejs-DMS-Dashboard proposal).
+   "dms" is the cyan DMS product accent (--dms-* from dms-shell.css, NOT the
+   cobalt --blue-* which is the Labs/foundation color); the neutral scale is
+   re-tuned with a cool blue undertone on the dark steps. */
+@theme static {
+  /* Geist display/body + Geist Mono. Inter and the system stack are fallbacks. */
+  --font-sans:
+    "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  /* Tailwind v4 preflight sets the base element font from
+     --default-font-family (NOT --font-sans), so wire it through. */
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+
+  --color-dms-50: #e6fbfc;
+  --color-dms-100: #c5f5f8;
+  --color-dms-200: #95ecf0;
+  --color-dms-300: #66e1e8;
+  --color-dms-400: #4dd9e6;
+  --color-dms-500: #2dc1cf;
+  --color-dms-600: #1ba2af;
+  --color-dms-700: #167f8a;
+  --color-dms-800: #136470;
+  --color-dms-900: #114f59;
+  --color-dms-950: #062e35;
+
+  --color-neutral-50: #f8f8f9;
+  --color-neutral-100: #f1f1f3;
+  --color-neutral-200: #dcdce1;
+  --color-neutral-300: #c4c4cb;
+  --color-neutral-400: #9b9ba4;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #2a2a30;
+  --color-neutral-900: #15151b;
+  --color-neutral-950: #0a0b12;
+}
+
+/* Defaults beat framework tokens, but not unlayered consumer declarations,
+   regardless of stylesheet order. */
+@layer dms {
+  :root {
+    --font-sans:
+      "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+
+    /* Light accent: dms-600 keeps white text readable on accent fills */
+    --ui-primary: var(--ui-color-primary-600);
+
+    /* Signature radius. Nuxt UI renders rounded-md at 1.5x --ui-radius, so
+     0.25rem yields 6px on buttons/inputs (design --radius-md). */
+    --ui-radius: 0.25rem;
+
+    /* Card frame surface (design --surface-card) */
+    --dms-surface-card: var(--ui-bg);
+
+    /* Surfaces — white cards on a cool neutral app canvas
+     (design --bg #fff / --bg-subtle #f8f8f9 / --bg-muted #f1f1f3) */
+    --ui-bg: #ffffff;
+    --ui-bg-muted: #f8f8f9;
+    --ui-bg-elevated: #f1f1f3;
+    --ui-bg-accented: #e7e7eb;
+
+    /* Hairline borders (n-150 / n-100 / n-200 in the design scale) */
+    --ui-border: #e7e7eb;
+    --ui-border-muted: #f1f1f3;
+    --ui-border-accented: #dcdce1;
+
+    /* Elevation (design --shadow-*, light) */
+    --shadow-xs: 0 1px 0 0 rgba(9, 9, 11, 0.04);
+    --shadow-sm:
+      0 1px 2px 0 rgba(9, 9, 11, 0.06), 0 1px 1px 0 rgba(9, 9, 11, 0.04);
+    --shadow-md:
+      0 4px 12px -2px rgba(9, 9, 11, 0.06), 0 2px 4px -1px rgba(9, 9, 11, 0.04);
+    --shadow-lg:
+      0 12px 32px -8px rgba(9, 9, 11, 0.1), 0 4px 8px -2px rgba(9, 9, 11, 0.06);
+    --shadow-xl:
+      0 24px 48px -12px rgba(9, 9, 11, 0.18),
+      0 8px 16px -4px rgba(9, 9, 11, 0.08);
+    --shadow-glow:
+      0 0 0 1px color-mix(in srgb, var(--dms-accent) 30%, transparent),
+      0 0 24px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
+
+    --dms-accent: var(--ui-color-primary-500);
+
+    /* Motion (design --ease-* / --dur-*) */
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --dur-instant: 80ms;
+    --dur-fast: 150ms;
+    --dur-base: 220ms;
+    --dur-slow: 400ms;
+    --dur-slower: 700ms;
+  }
+
+  .dark {
+    --ui-primary: var(--ui-color-primary-400);
+
+    /* Card surface = design --surface-card (#101119): its own tier sitting
+     between the sidebar (--surface-side #0a0b12 = --ui-bg) and the raised
+     --surface-card-2 (~#15151b = --ui-bg-elevated). The --ui-* scale has no
+     exact stop for it, so it's set literally to match the reference design. */
+    --dms-surface-card: #101119;
+
+    /* Dashboard surfaces aligned to the design dark scale:
+     canvas --bg-muted #06070d (n-975) · sidebar --bg #0a0b12 (n-950) ·
+     raised inner surfaces --bg-elevated #15151b (n-900). */
+    --ui-bg: #0a0b12;
+    --ui-bg-muted: #06070d;
+    --ui-bg-elevated: #15151b;
+    --ui-bg-accented: #1a1b24;
+
+    /* Hairline borders with a slight blue cast (design dark borders) */
+    --ui-border: rgba(120, 140, 200, 0.1);
+    --ui-border-muted: rgba(120, 140, 200, 0.06);
+    --ui-border-accented: rgba(140, 160, 220, 0.18);
+
+    /* Elevation softer in dark; most depth comes from borders (design). */
+    --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.4);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
+    --shadow-xl: 0 24px 56px -12px rgba(0, 0, 0, 0.7);
+    --shadow-glow:
+      0 0 0 1px color-mix(in srgb, var(--dms-accent) 35%, transparent),
+      0 0 32px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
+    --dms-accent: var(--ui-color-primary-400);
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* Card frame around primary components (design .card: surface-card
+   background, hairline border, radius-xl, soft shadow). */
+@layer components {
+  .dms-card {
+    background-color: var(--dms-surface-card);
+    border: 1px solid var(--ui-border);
+    border-radius: 0.75rem;
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* Floating surfaces (auth boxes, full-page panels) sit on an empty
+     backdrop and need more lift than in-app cards. */
+  .dms-card--elevated {
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Clickable surfaces (settings/nav tiles, selection cards). */
+  .dms-card--interactive {
+    cursor: pointer;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s,
+      transform 0.2s;
+  }
+  .dms-card--interactive:hover {
+    border-color: var(--ui-border-accented);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+/* Live-edit highlight: animates page components added / removed / modified
+   when the active page's layout changes in place (DMS dev hot-reload). */
+.dms-fresh-enter-active {
+  animation: dms-fresh-in 0.5s ease-out;
+}
+.dms-fresh-leave-active {
+  animation: dms-fresh-out 0.4s ease-in forwards;
+}
+.dms-fresh-move {
+  transition: transform 0.3s ease;
+}
+.dms-fresh-modified {
+  animation: dms-fresh-pulse 0.9s ease-out;
+  border-radius: 0.5rem;
+}
+
+@keyframes dms-fresh-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes dms-fresh-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+@keyframes dms-fresh-pulse {
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+  35% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dms-accent) 45%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

package/frontend-vue/layers/dms-layout/app/build/components/layout/Container.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  fullWidth?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <UContainer :class="{ 'max-w-none': props.fullWidth }">
+    <slot />
+  </UContainer>
+</template>