@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/CssVariablesList.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { useClipboard } from "@vueuse/core";
+
+const CSS_LOAD_DELAY_MS = 100;
+const UI_VARIABLE_PREFIX = "--ui-";
+const SKELETON_GROUP_COUNT = 3;
+const SKELETON_ITEM_COUNT = 4;
+
+interface CSSVariable {
+  name: string;
+  value: string;
+}
+
+const cssVariables = ref<CSSVariable[]>([]);
+const isLoading = ref(true);
+
+const processRules = (
+  rules: CSSRuleList,
+  rootStyles: CSSStyleDeclaration,
+  variablesMap: Map<string, string>,
+) => {
+  Array.from(rules).forEach((rule) => {
+    if ("cssRules" in rule && (rule as CSSGroupingRule).cssRules) {
+      processRules(
+        (rule as CSSGroupingRule).cssRules,
+        rootStyles,
+        variablesMap,
+      );
+    }
+
+    if (rule instanceof CSSStyleRule) {
+      Array.from(rule.style).forEach((property) => {
+        if (property.startsWith(UI_VARIABLE_PREFIX)) {
+          const value = rootStyles.getPropertyValue(property).trim();
+          if (value) {
+            variablesMap.set(property, value);
+          }
+        }
+      });
+    }
+  });
+};
+
+const getCSSVariablesFromStyleSheets = (): CSSVariable[] => {
+  const rootStyles = getComputedStyle(document.documentElement);
+  const variablesMap = new Map<string, string>();
+
+  try {
+    Array.from(document.styleSheets).forEach((styleSheet) => {
+      try {
+        processRules(styleSheet.cssRules, rootStyles, variablesMap);
+      } catch {
+        /* ignore — cross-origin stylesheets throw on cssRules access */
+      }
+    });
+  } catch {
+    return [];
+  }
+
+  return Array.from(variablesMap, ([name, value]) => ({ name, value }));
+};
+
+const getCSSVariables = (): CSSVariable[] => {
+  try {
+    return getCSSVariablesFromStyleSheets().sort((a, b) =>
+      a.name.localeCompare(b.name),
+    );
+  } catch {
+    return [];
+  }
+};
+
+const categoryMap = new Map([
+  ["-color-", "Colors"],
+  ["-text", "Text"],
+  ["-bg", "Background"],
+  ["-border", "Border"],
+  ["-radius", "Radius"],
+  ["-shadow", "Shadow"],
+]);
+
+const getVariableCategory = (varName: string) => {
+  for (const [pattern, category] of categoryMap) {
+    if (varName.includes(pattern)) return category;
+  }
+  return "Other";
+};
+
+const groupedVariables = computed(() => {
+  const groups: Record<string, CSSVariable[]> = {};
+
+  cssVariables.value.forEach((variable) => {
+    const category = getVariableCategory(variable.name);
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(variable);
+  });
+
+  return groups;
+});
+
+const { copy } = useClipboard();
+
+const refreshVariables = () => {
+  isLoading.value = true;
+  cssVariables.value = getCSSVariables();
+  isLoading.value = false;
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    refreshVariables();
+  }, CSS_LOAD_DELAY_MS);
+});
+</script>
+
+<template>
+  <div class="space-y-6">
+    <section class="flex items-start justify-between gap-4">
+      <div class="space-y-1">
+        <h2 class="text-default text-base font-semibold sm:text-sm">
+          {{ $t("page.settings.appearance.css_variables") }}
+        </h2>
+        <p class="text-dimmed text-base sm:text-sm">
+          {{ $t("page.settings.appearance.css_variables_description") }}
+        </p>
+      </div>
+    </section>
+
+    <div v-if="isLoading" class="space-y-6">
+      <section v-for="i in SKELETON_GROUP_COUNT" :key="i" class="space-y-3">
+        <USkeleton class="h-5 w-24" />
+        <div class="bg-default ring-default rounded-lg ring">
+          <div
+            v-for="j in SKELETON_ITEM_COUNT"
+            :key="j"
+            class="border-default flex items-center justify-between gap-4 p-3"
+            :class="{ 'border-b': j < SKELETON_ITEM_COUNT }"
+          >
+            <div class="min-w-0 flex-1 space-y-2">
+              <USkeleton class="h-4 w-48" />
+              <USkeleton class="h-3 w-64" />
+            </div>
+            <USkeleton class="size-8 shrink-0 rounded" />
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div v-else class="space-y-6">
+      <section
+        v-for="(variables, category) in groupedVariables"
+        :key="category"
+        class="space-y-3"
+      >
+        <h3 class="text-highlighted text-sm font-semibold">
+          {{ category }}
+        </h3>
+
+        <div class="bg-default ring-default rounded-lg ring">
+          <div
+            v-for="(variable, index) in variables"
+            :key="variable.name"
+            class="border-default hover:bg-muted group flex items-center justify-between gap-4 p-3 transition-colors"
+            :class="{ 'border-b': index < variables.length - 1 }"
+          >
+            <div class="min-w-0 flex-1 space-y-1">
+              <div class="flex items-center gap-2">
+                <code
+                  class="text-default font-mono text-xs font-medium break-all"
+                >
+                  {{ variable.name }}
+                </code>
+                <UButton
+                  icon="i-lucide-copy"
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  square
+                  class="opacity-0 transition-opacity group-hover:opacity-100"
+                  :title="`${$t('button.copy')} ${variable.name}`"
+                  @click="copy(variable.name)"
+                />
+              </div>
+              <div class="flex items-center gap-2">
+                <code class="text-muted font-mono text-xs break-all">
+                  {{ variable.value }}
+                </code>
+              </div>
+            </div>
+
+            <div
+              v-if="
+                variable.value.startsWith('oklch') ||
+                variable.value.startsWith('rgb') ||
+                variable.value.startsWith('#') ||
+                variable.value.startsWith('hsl')
+              "
+              class="ring-default size-8 shrink-0 rounded ring"
+              :style="{ backgroundColor: variable.value }"
+              :title="variable.value"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/ScalePreview.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface ScalePreviewProps {
+  scale: InterfaceScale;
+}
+
+interface ScaleBarsConfig {
+  count: number;
+  barClass: string;
+  gapClass: string;
+}
+
+const SCALE_BARS: Record<InterfaceScale, ScaleBarsConfig> = {
+  small: { count: 6, barClass: "h-[3px]", gapClass: "gap-[5px]" },
+  normal: { count: 4, barClass: "h-[5px]", gapClass: "gap-[5px]" },
+  large: { count: 3, barClass: "h-2", gapClass: "gap-[9px]" },
+};
+
+const BAR_WIDTH_BASE = 50;
+const BAR_WIDTH_STEP = 37;
+const BAR_WIDTH_RANGE = 45;
+
+const props = defineProps<ScalePreviewProps>();
+
+const bars = computed(() => SCALE_BARS[props.scale]);
+
+const barWidth = (index: number) =>
+  `${BAR_WIDTH_BASE + ((index * BAR_WIDTH_STEP) % BAR_WIDTH_RANGE)}%`;
+</script>
+
+<template>
+  <div
+    class="bg-muted flex flex-col justify-center px-4 py-4"
+    :class="bars.gapClass"
+  >
+    <div
+      v-for="index in bars.count"
+      :key="`scale-bar-${index}`"
+      class="rounded-full"
+      :class="[bars.barClass, index === 1 ? 'bg-primary' : 'bg-accented']"
+      :style="{ width: barWidth(index - 1) }"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/ThemePreview.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Props {
+  mode: string;
+}
+
+const props = defineProps<Props>();
+
+// Mini-app illustration palettes (design appearance.html preview()).
+const L = { bg: "#ffffff", side: "#f1f1f3", bar: "#d7d8de", barD: "#b9bbc4" };
+const D = { bg: "#15151b", side: "#0a0b12", bar: "#2a2a30", barD: "#3a3b46" };
+
+interface PreviewVariant {
+  frame: string;
+  side: typeof L;
+  main: typeof L;
+}
+
+const DEFAULT_VARIANT: PreviewVariant = { frame: L.side, side: L, main: D };
+
+const MODE_VARIANTS: Record<string, PreviewVariant> = {
+  light: { frame: L.side, side: L, main: L },
+  dark: { frame: D.side, side: D, main: D },
+  system: DEFAULT_VARIANT,
+};
+
+const variant = computed(() => MODE_VARIANTS[props.mode] ?? DEFAULT_VARIANT);
+</script>
+
+<template>
+  <div
+    class="flex gap-2 overflow-hidden p-2.5"
+    :style="{ background: variant.frame }"
+  >
+    <!-- Sidebar -->
+    <div
+      class="flex w-[36%] flex-col gap-1.5 rounded-[7px] p-2"
+      :style="{ background: variant.side.side }"
+    >
+      <div class="mb-0.5 flex gap-[3px]">
+        <span class="size-[5px] rounded-full bg-[#f87171]" />
+        <span class="size-[5px] rounded-full bg-[#fbbf24]" />
+        <span class="size-[5px] rounded-full bg-[#34d399]" />
+      </div>
+      <div
+        class="h-1.5 w-4/5 rounded-[3px]"
+        :style="{ background: variant.side.bar }"
+      />
+      <div
+        class="h-1.5 w-3/5 rounded-[3px]"
+        :style="{ background: variant.side.bar }"
+      />
+      <div class="bg-primary h-1.5 w-1/2 rounded-[3px]" />
+    </div>
+
+    <!-- Main -->
+    <div
+      class="flex flex-1 flex-col gap-[7px] rounded-[7px] p-2"
+      :style="{ background: variant.main.bg }"
+    >
+      <div
+        class="h-1.5 w-2/5 rounded-[3px]"
+        :style="{ background: variant.main.barD }"
+      />
+      <div
+        class="h-1.5 w-[90%] rounded-[3px]"
+        :style="{ background: variant.main.bar }"
+      />
+      <div
+        class="h-1.5 w-3/4 rounded-[3px]"
+        :style="{ background: variant.main.bar }"
+      />
+      <div
+        class="h-1.5 w-[85%] rounded-[3px]"
+        :style="{ background: variant.main.bar }"
+      />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/components/AppWidgetsDock.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Renders framed app widgets (see `useAppWidgets`) as a vertical stack of
+ * low-opacity icon chips anchored in the bottom-left corner of the content
+ * panel, inset 0.625rem (10px at the default interface scale) from its
+ * edges. A chip lights up to full opacity on hover or keyboard focus and its
+ * `body` component unfolds into an animated card that overlays the page to
+ * the right — the other chips stay put.
+ *
+ * Meant to be dropped into the `#footer` slot of the dashboard panel, whose
+ * root is `relative`, so the absolute positioning anchors to the content panel
+ * (it does not scroll with the body).
+ */
+const { widgets } = useAppWidgets();
+
+const { processI18n } = useTranslation();
+</script>
+
+<template>
+  <div
+    v-if="widgets.length"
+    class="pointer-events-none absolute bottom-2.5 left-2.5 z-40 flex flex-col-reverse items-start gap-2"
+  >
+    <div
+      v-for="widget in widgets"
+      :key="widget.id"
+      class="group/widget pointer-events-auto relative flex items-center"
+    >
+      <button
+        type="button"
+        :aria-label="processI18n(widget.label)"
+        :title="processI18n(widget.label)"
+        class="border-default bg-default text-muted focus-visible:ring-primary group-hover/widget:text-highlighted group-focus-within/widget:text-highlighted flex size-10 items-center justify-center rounded-xl border opacity-50 shadow-lg transition-all duration-200 group-focus-within/widget:scale-105 group-focus-within/widget:opacity-100 group-hover/widget:scale-105 group-hover/widget:opacity-100 focus:outline-none focus-visible:ring-2 motion-reduce:transition-none"
+      >
+        <UIcon :name="widget.icon" class="size-5" />
+      </button>
+
+      <div
+        class="pointer-events-none invisible absolute bottom-0 left-full z-10 -translate-x-2 pl-2 opacity-0 transition-all duration-200 ease-out group-focus-within/widget:pointer-events-auto group-focus-within/widget:visible group-focus-within/widget:translate-x-0 group-focus-within/widget:opacity-100 group-hover/widget:pointer-events-auto group-hover/widget:visible group-hover/widget:translate-x-0 group-hover/widget:opacity-100 motion-reduce:transition-none"
+      >
+        <div
+          class="dms-widget-card border-default bg-default relative w-max max-w-sm rounded-xl border shadow-2xl"
+        >
+          <component :is="widget.body" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dms-widget-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.group\/widget:hover .dms-widget-card::after,
+.group\/widget:focus-within .dms-widget-card::after {
+  animation: dms-widget-frame-in 0.4s ease-out;
+}
+
+@keyframes dms-widget-frame-in {
+  0% {
+    box-shadow: 0 0 0 0
+      color-mix(in oklab, var(--ui-primary, currentColor) 55%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 6px transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .group\/widget:hover .dms-widget-card::after,
+  .group\/widget:focus-within .dms-widget-card::after {
+    animation: none;
+  }
+}
+</style>

package/frontend-vue/layers/dms-layout/app/components/layout/AppLogo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const appConfig = useDmsAppConfig();
+</script>
+
+<template>
+  <UColorModeImage
+    v-if="appConfig.branding.logo"
+    :light="appConfig.branding?.logo?.default.light"
+    :dark="appConfig.branding?.logo?.default.dark"
+  />
+</template>

package/frontend-vue/layers/dms-layout/app/components/layout/DashboardSearch.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const { groups } = useCommandPaletteGroups();
+const fuse = COMMAND_PALETTE_FUSE_OPTIONS;
+</script>
+
+<template>
+  <!-- Nuxt UI ships no `dashboardSearch.title` / `.description` message, so
+       leaving these props out exposes those raw keys as the dialog's
+       accessible name. -->
+  <UDashboardSearch
+    :groups="groups"
+    :fuse="fuse"
+    :title="t('commandPalette.dialog.title')"
+    :description="t('commandPalette.dialog.description')"
+  />
+</template>

package/frontend-vue/layers/dms-layout/app/components/layout/HStack.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import {
+  alignmentMap,
+  distributionMap,
+} from "../../composables/layout/stack-types";
+
+interface HStackProps {
+  alignment?: StackAlignment;
+  distribution?: StackDistribution;
+  spacing?: string;
+  wrap?: boolean;
+}
+
+const props = withDefaults(defineProps<HStackProps>(), {
+  alignment: "center",
+  distribution: "start",
+  spacing: "8px",
+  wrap: false,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: alignmentMap[props.alignment],
+      justifyContent: distributionMap[props.distribution],
+      gap: props.spacing,
+      flexWrap: props.wrap ? 'wrap' : 'nowrap',
+    }"
+    class="w-full"
+  >
+    <slot />
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/components/layout/Spacer.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+interface SpacerProps {
+  minSize?: string;
+  maxSize?: string;
+  grow?: number;
+}
+
+const props = withDefaults(defineProps<SpacerProps>(), {
+  minSize: undefined,
+  maxSize: undefined,
+  grow: 1,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      flexGrow: props.grow,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      minWidth: props.minSize,
+      maxWidth: props.maxSize,
+      minHeight: props.minSize,
+      maxHeight: props.maxSize,
+    }"
+    class="dms-spacer"
+  />
+</template>

package/frontend-vue/layers/dms-layout/app/components/layout/VStack.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import {
+  alignmentMap,
+  distributionMap,
+} from "../../composables/layout/stack-types";
+
+interface VStackProps {
+  alignment?: StackAlignment;
+  distribution?: StackDistribution;
+  spacing?: string;
+}
+
+const props = withDefaults(defineProps<VStackProps>(), {
+  alignment: "center",
+  distribution: "start",
+  spacing: "8px",
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: alignmentMap[props.alignment],
+      justifyContent: distributionMap[props.distribution],
+      gap: props.spacing,
+    }"
+    class="w-full"
+  >
+    <slot />
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/components/navigation/AccordionItemSync.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {
+  injectAccordionItemContext,
+  injectAccordionRootContext,
+} from "reka-ui";
+
+interface Props {
+  itemId: string;
+  isDesiredOpen: (id: string) => boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  "state-change": [id: string, open: boolean];
+}>();
+
+const itemContext = injectAccordionItemContext();
+const rootContext = injectAccordionRootContext();
+
+// Push accordion state out (user toggles, initial defaultOpen).
+watch(
+  () => itemContext.open.value,
+  (open) => {
+    emit("state-change", props.itemId, open);
+  },
+  { immediate: true },
+);
+
+// Pull desired state in (route navigation merges required ids). When the
+// parent says this item should be open/closed but the accordion disagrees,
+// flip it via Reka's own toggle so each nested AccordionRoot stays the
+// source of truth for its own visual state.
+watchEffect(() => {
+  const desired = props.isDesiredOpen(props.itemId);
+  if (desired !== itemContext.open.value) {
+    rootContext.changeModelValue(itemContext.value.value as string);
+  }
+});
+</script>
+
+<template>
+  <!-- renderless: accordion state sync only, no visible DOM output -->
+  <slot />
+</template>