@ngbplatform/ui 1.3.0

package/src/ngb/site/NgbTopBar.vue

@@ -0,0 +1,425 @@
+<template>
+  <header data-testid="site-topbar" class="sticky top-0 z-30 border-b border-ngb-border bg-ngb-card px-3 lg:h-14">
+    <!--
+      Layout goal:
+      - Search stays strictly centered.
+      - Left is pinned to the left edge: Back + current page title.
+      - Right icons are pinned to the right edge.
+    -->
+    <div class="flex min-w-0 flex-col gap-2 py-2 lg:grid lg:h-full lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)_minmax(0,320px)] lg:items-center lg:gap-3 lg:py-0">
+      <!-- Left (intentionally empty to avoid duplicated title/back in list views) -->
+      <div class="hidden h-full lg:block"></div>
+
+      <div class="order-1 flex min-w-0 items-center gap-2 md:hidden">
+        <button
+          v-if="showMainMenu"
+          data-testid="site-topbar-main-menu"
+          class="ngb-iconbtn"
+          title="Main menu"
+          aria-label="Main menu"
+          @click="$emit('openMainMenu')"
+        >
+          <NgbIcon name="panel-left" />
+        </button>
+
+        <div class="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1">
+          <!-- Notifications -->
+          <button class="ngb-iconbtn relative" title="Notifications" aria-label="Notifications" @click="$emit('openNotifications')">
+            <NgbIcon name="bell" />
+            <span
+              v-if="unreadNotifications > 0"
+              class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-ngb-danger text-white text-[10px] font-bold leading-[18px] flex items-center justify-center border border-ngb-card"
+            >
+              {{ unreadNotifications > 99 ? '99+' : unreadNotifications }}
+            </span>
+          </button>
+
+          <button class="ngb-iconbtn" title="Help" aria-label="Help" @click="$emit('openHelp')">
+            <NgbIcon name="help-circle" />
+          </button>
+
+          <button v-if="hasSettings" class="ngb-iconbtn" title="Settings" aria-label="Settings" @click="$emit('openSettings')">
+            <NgbIcon name="settings" />
+          </button>
+
+          <button
+            class="ngb-iconbtn"
+            :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+            @click="$emit('toggleTheme')"
+          >
+            <NgbIcon :name="isDark ? 'sun' : 'moon'" />
+          </button>
+
+          <Menu as="div" class="relative" v-slot="{ open }">
+            <MenuButton
+              class="flex h-9 w-9 items-center justify-center rounded-full border text-white ngb-focus transition-all duration-150"
+              :class="open ? 'border-[rgba(11,60,93,.45)] bg-ngb-blue shadow-[0_8px_18px_rgba(11,60,93,.16)]' : 'border-ngb-border bg-ngb-blue hover:border-[rgba(11,60,93,.35)] hover:shadow-[0_4px_12px_rgba(11,60,93,.10)]'"
+              title="User"
+            >
+              <span class="text-[12px] font-bold">{{ initials }}</span>
+            </MenuButton>
+
+            <transition
+              enter-active-class="transition duration-150 ease-out"
+              enter-from-class="translate-y-1.5 opacity-0 scale-[0.98]"
+              enter-to-class="translate-y-0 opacity-100 scale-100"
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="translate-y-0 opacity-100 scale-100"
+              leave-to-class="translate-y-1 opacity-0 scale-[0.98]"
+            >
+              <MenuItems class="absolute right-0 z-30 mt-2 w-[320px] max-w-[calc(100vw-24px)] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-3 shadow-card focus:outline-none">
+                <div class="rounded-[var(--ngb-radius)] bg-ngb-bg px-3 py-3">
+                  <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-ngb-muted">Signed in</div>
+                  <div class="mt-1 truncate text-sm font-semibold text-ngb-text">{{ resolvedUserName }}</div>
+                  <div v-if="hasUserEmail" class="mt-1 truncate text-xs text-ngb-muted">{{ userEmail }}</div>
+                  <div v-if="hasUserRoles" class="mt-3">
+                    <div class="mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-ngb-muted">Application roles</div>
+                    <div class="flex flex-wrap gap-1.5" :title="userRolesTitle">
+                      <span
+                        v-for="role in visibleUserRoles"
+                        :key="role"
+                        class="inline-flex max-w-full items-center gap-1.5 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text"
+                      >
+                        <NgbIcon name="shield" :size="13" />
+                        <span class="max-w-[210px] truncate">{{ role }}</span>
+                      </span>
+                      <span
+                        v-if="hiddenUserRoleCount > 0"
+                        class="inline-flex items-center rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-muted"
+                      >
+                        +{{ hiddenUserRoleCount }} more
+                      </span>
+                    </div>
+                  </div>
+                  <div v-else-if="hasUserMeta" class="mt-3 inline-flex items-center gap-2 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text">
+                    <NgbIcon :name="userMetaIcon" :size="14" />
+                    <span>{{ userMeta }}</span>
+                  </div>
+                </div>
+
+                <div class="my-2 h-px bg-ngb-border" />
+
+                <MenuItem v-slot="{ active }">
+                  <button
+                    type="button"
+                    class="group flex w-full items-center gap-3 rounded-[var(--ngb-radius)] px-3 py-2.5 text-left transition-colors duration-150 ngb-focus"
+                    :class="active ? 'bg-[rgba(155,28,28,.06)] text-ngb-danger' : 'text-ngb-danger hover:bg-[rgba(155,28,28,.04)]'"
+                    @click="$emit('signOut')"
+                  >
+                    <span class="flex h-8 w-8 shrink-0 items-center justify-center text-current">
+                      <NgbIcon name="log-out" :size="17" />
+                    </span>
+
+                    <span class="min-w-0 flex-1">
+                      <span class="block text-sm font-semibold">Sign out</span>
+                      <span class="mt-0.5 block text-xs text-ngb-muted">End this secure session on this device</span>
+                    </span>
+                  </button>
+                </MenuItem>
+              </MenuItems>
+            </transition>
+          </Menu>
+        </div>
+      </div>
+
+      <div class="order-1 hidden min-w-0 items-center justify-end gap-1 md:flex lg:hidden">
+        <button class="ngb-iconbtn relative" title="Notifications" aria-label="Notifications" @click="$emit('openNotifications')">
+          <NgbIcon name="bell" />
+          <span
+            v-if="unreadNotifications > 0"
+            class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-ngb-danger text-white text-[10px] font-bold leading-[18px] flex items-center justify-center border border-ngb-card"
+          >
+            {{ unreadNotifications > 99 ? '99+' : unreadNotifications }}
+          </span>
+        </button>
+
+        <button class="ngb-iconbtn" title="Help" aria-label="Help" @click="$emit('openHelp')">
+          <NgbIcon name="help-circle" />
+        </button>
+
+        <button v-if="hasSettings" class="ngb-iconbtn" title="Settings" aria-label="Settings" @click="$emit('openSettings')">
+          <NgbIcon name="settings" />
+        </button>
+
+        <button
+          class="ngb-iconbtn"
+          :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          @click="$emit('toggleTheme')"
+        >
+          <NgbIcon :name="isDark ? 'sun' : 'moon'" />
+        </button>
+
+        <Menu as="div" class="relative" v-slot="{ open }">
+          <MenuButton
+            class="flex h-9 w-9 items-center justify-center rounded-full border text-white ngb-focus transition-all duration-150"
+            :class="open ? 'border-[rgba(11,60,93,.45)] bg-ngb-blue shadow-[0_8px_18px_rgba(11,60,93,.16)]' : 'border-ngb-border bg-ngb-blue hover:border-[rgba(11,60,93,.35)] hover:shadow-[0_4px_12px_rgba(11,60,93,.10)]'"
+            title="User"
+            aria-label="User"
+          >
+            <span class="text-[12px] font-bold">{{ initials }}</span>
+          </MenuButton>
+
+          <transition
+            enter-active-class="transition duration-150 ease-out"
+            enter-from-class="translate-y-1.5 opacity-0 scale-[0.98]"
+            enter-to-class="translate-y-0 opacity-100 scale-100"
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="translate-y-0 opacity-100 scale-100"
+            leave-to-class="translate-y-1 opacity-0 scale-[0.98]"
+          >
+            <MenuItems class="absolute right-0 z-30 mt-2 w-[320px] max-w-[calc(100vw-24px)] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-3 shadow-card focus:outline-none">
+              <div class="rounded-[var(--ngb-radius)] bg-ngb-bg px-3 py-3">
+                <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-ngb-muted">Signed in</div>
+                <div class="mt-1 truncate text-sm font-semibold text-ngb-text">{{ resolvedUserName }}</div>
+                <div v-if="hasUserEmail" class="mt-1 truncate text-xs text-ngb-muted">{{ userEmail }}</div>
+                <div v-if="hasUserRoles" class="mt-3">
+                  <div class="mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-ngb-muted">Application roles</div>
+                  <div class="flex flex-wrap gap-1.5" :title="userRolesTitle">
+                    <span
+                      v-for="role in visibleUserRoles"
+                      :key="role"
+                      class="inline-flex max-w-full items-center gap-1.5 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text"
+                    >
+                      <NgbIcon name="shield" :size="13" />
+                      <span class="max-w-[210px] truncate">{{ role }}</span>
+                    </span>
+                    <span
+                      v-if="hiddenUserRoleCount > 0"
+                      class="inline-flex items-center rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-muted"
+                    >
+                      +{{ hiddenUserRoleCount }} more
+                    </span>
+                  </div>
+                </div>
+                <div v-else-if="hasUserMeta" class="mt-3 inline-flex items-center gap-2 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text">
+                  <NgbIcon :name="userMetaIcon" :size="14" />
+                  <span>{{ userMeta }}</span>
+                </div>
+              </div>
+
+              <div class="my-2 h-px bg-ngb-border" />
+
+              <MenuItem v-slot="{ active }">
+                <button
+                  type="button"
+                  class="group flex w-full items-center gap-3 rounded-[var(--ngb-radius)] px-3 py-2.5 text-left transition-colors duration-150 ngb-focus"
+                  :class="active ? 'bg-[rgba(155,28,28,.06)] text-ngb-danger' : 'text-ngb-danger hover:bg-[rgba(155,28,28,.04)]'"
+                  @click="$emit('signOut')"
+                >
+                  <span class="flex h-8 w-8 shrink-0 items-center justify-center text-current">
+                    <NgbIcon name="log-out" :size="17" />
+                  </span>
+
+                  <span class="min-w-0 flex-1">
+                    <span class="block text-sm font-semibold">Sign out</span>
+                    <span class="mt-0.5 block text-xs text-ngb-muted">End this secure session on this device</span>
+                  </span>
+                </button>
+              </MenuItem>
+            </MenuItems>
+          </transition>
+        </Menu>
+      </div>
+
+      <!-- Center -->
+      <div class="order-2 min-w-0 lg:order-none lg:flex lg:justify-center">
+        <!-- Searchbar (kept as-is) -->
+        <button
+          class="w-full max-w-[720px] h-10 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card hover:bg-ngb-bg ngb-focus flex items-center gap-3 px-3 text-left"
+          @click="$emit('openPalette')"
+        >
+          <span class="text-ngb-muted">
+            <NgbIcon name="search" />
+          </span>
+          <span class="text-ngb-muted text-sm truncate">Search pages, records, reports, or run a command…</span>
+          <span class="ml-auto flex items-center gap-1">
+            <span class="ngb-kbd">{{ primaryModifier }}</span>
+            <span class="ngb-kbd">K</span>
+          </span>
+        </button>
+      </div>
+
+      <!-- Right -->
+      <div class="hidden min-w-0 flex-wrap items-center justify-end gap-1 lg:flex lg:order-none lg:flex-nowrap">
+        <!-- Notifications -->
+        <button class="ngb-iconbtn relative" title="Notifications" aria-label="Notifications" @click="$emit('openNotifications')">
+          <NgbIcon name="bell" />
+          <span
+            v-if="unreadNotifications > 0"
+            class="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-ngb-danger text-white text-[10px] font-bold leading-[18px] flex items-center justify-center border border-ngb-card"
+          >
+            {{ unreadNotifications > 99 ? '99+' : unreadNotifications }}
+          </span>
+        </button>
+
+        <!-- Help -->
+        <button class="ngb-iconbtn" title="Help" aria-label="Help" @click="$emit('openHelp')">
+          <NgbIcon name="help-circle" />
+        </button>
+
+        <!-- Settings -->
+        <button v-if="hasSettings" class="ngb-iconbtn" title="Settings" aria-label="Settings" @click="$emit('openSettings')">
+          <NgbIcon name="settings" />
+        </button>
+
+        <!-- Theme toggle (icon shows the *target* mode) -->
+        <button
+          class="ngb-iconbtn"
+          :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+          @click="$emit('toggleTheme')"
+        >
+          <NgbIcon :name="isDark ? 'sun' : 'moon'" />
+        </button>
+
+        <!-- User menu (keep as-is) -->
+        <Menu as="div" class="relative" v-slot="{ open }">
+          <MenuButton
+            class="flex h-9 w-9 items-center justify-center rounded-full border text-white ngb-focus transition-all duration-150"
+            :class="open ? 'border-[rgba(11,60,93,.45)] bg-ngb-blue shadow-[0_8px_18px_rgba(11,60,93,.16)]' : 'border-ngb-border bg-ngb-blue hover:border-[rgba(11,60,93,.35)] hover:shadow-[0_4px_12px_rgba(11,60,93,.10)]'"
+            title="User"
+            aria-label="User"
+          >
+            <span class="text-[12px] font-bold">{{ initials }}</span>
+          </MenuButton>
+
+          <transition
+            enter-active-class="transition duration-150 ease-out"
+            enter-from-class="translate-y-1.5 opacity-0 scale-[0.98]"
+            enter-to-class="translate-y-0 opacity-100 scale-100"
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="translate-y-0 opacity-100 scale-100"
+            leave-to-class="translate-y-1 opacity-0 scale-[0.98]"
+          >
+            <MenuItems class="absolute right-0 z-30 mt-2 w-[320px] max-w-[calc(100vw-24px)] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-3 shadow-card focus:outline-none">
+              <div class="rounded-[var(--ngb-radius)] bg-ngb-bg px-3 py-3">
+                <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-ngb-muted">Signed in</div>
+                <div class="mt-1 truncate text-sm font-semibold text-ngb-text">{{ resolvedUserName }}</div>
+                <div v-if="hasUserEmail" class="mt-1 truncate text-xs text-ngb-muted">{{ userEmail }}</div>
+                <div v-if="hasUserRoles" class="mt-3">
+                  <div class="mb-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-ngb-muted">Application roles</div>
+                  <div class="flex flex-wrap gap-1.5" :title="userRolesTitle">
+                    <span
+                      v-for="role in visibleUserRoles"
+                      :key="role"
+                      class="inline-flex max-w-full items-center gap-1.5 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text"
+                    >
+                      <NgbIcon name="shield" :size="13" />
+                      <span class="max-w-[210px] truncate">{{ role }}</span>
+                    </span>
+                    <span
+                      v-if="hiddenUserRoleCount > 0"
+                      class="inline-flex items-center rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-muted"
+                    >
+                      +{{ hiddenUserRoleCount }} more
+                    </span>
+                  </div>
+                </div>
+                <div v-else-if="hasUserMeta" class="mt-3 inline-flex items-center gap-2 rounded-[var(--ngb-radius)] bg-ngb-card px-2.5 py-1 text-[11px] font-semibold text-ngb-text">
+                  <NgbIcon :name="userMetaIcon" :size="14" />
+                  <span>{{ userMeta }}</span>
+                </div>
+              </div>
+
+              <div class="my-2 h-px bg-ngb-border" />
+
+              <MenuItem v-slot="{ active }">
+                <button
+                  type="button"
+                  class="group flex w-full items-center gap-3 rounded-[var(--ngb-radius)] px-3 py-2.5 text-left transition-colors duration-150 ngb-focus"
+                  :class="active ? 'bg-[rgba(155,28,28,.06)] text-ngb-danger' : 'text-ngb-danger hover:bg-[rgba(155,28,28,.04)]'"
+                  @click="$emit('signOut')"
+                >
+                  <span class="flex h-8 w-8 shrink-0 items-center justify-center text-current">
+                    <NgbIcon name="log-out" :size="17" />
+                  </span>
+
+                  <span class="min-w-0 flex-1">
+                    <span class="block text-sm font-semibold">Sign out</span>
+                    <span class="mt-0.5 block text-xs text-ngb-muted">End this secure session on this device</span>
+                  </span>
+                </button>
+              </MenuItem>
+            </MenuItems>
+          </transition>
+        </Menu>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+import NgbIcon from '../primitives/NgbIcon.vue';
+
+const props = defineProps<{
+  pageTitle: string;
+  canBack: boolean;
+  unreadNotifications: number;
+  themeResolved: 'light' | 'dark';
+  userName?: string;
+  userEmail?: string;
+  userMeta?: string;
+  userMetaIcon?: 'shield-check' | 'shield' | 'user';
+  userRoles?: string[];
+  hasSettings?: boolean;
+  showMainMenu?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'back'): void;
+  (e: 'openMainMenu'): void;
+  (e: 'openPalette'): void;
+  (e: 'openNotifications'): void;
+  (e: 'openHelp'): void;
+  (e: 'openSettings'): void;
+  (e: 'signOut'): void;
+  (e: 'toggleTheme'): void;
+}>();
+
+const isDark = computed(() => props.themeResolved === 'dark');
+const isMac = computed(() => {
+  if (typeof navigator === 'undefined') return false;
+  return /Mac|iPhone|iPad|iPod/i.test(String(navigator.platform ?? ''));
+});
+const primaryModifier = computed(() => (isMac.value ? '⌘' : 'Ctrl'));
+const userEmail = computed(() => String(props.userEmail ?? '').trim());
+const userMeta = computed(() => String(props.userMeta ?? '').trim());
+const userMetaIcon = computed<'shield-check' | 'shield' | 'user'>(() => {
+  if (props.userMetaIcon === 'shield-check' || props.userMetaIcon === 'shield') return props.userMetaIcon;
+  return 'user';
+});
+const userRoles = computed(() => {
+  const seen = new Set<string>();
+  return (props.userRoles ?? [])
+    .map((role) => String(role ?? '').trim())
+    .filter((role) => {
+      const key = role.toLowerCase();
+      if (!role || seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+});
+const visibleUserRoles = computed(() => userRoles.value.slice(0, 3));
+const hiddenUserRoleCount = computed(() => Math.max(0, userRoles.value.length - visibleUserRoles.value.length));
+const userRolesTitle = computed(() => userRoles.value.join(', '));
+const hasUserEmail = computed(() => userEmail.value.length > 0);
+const hasUserRoles = computed(() => userRoles.value.length > 0);
+const hasUserMeta = computed(() => !hasUserRoles.value && userMeta.value.length > 0);
+const resolvedUserName = computed(() => {
+  const value = String(props.userName ?? '').trim();
+  return value || 'User';
+});
+
+const initials = computed(() => {
+  const n = resolvedUserName.value;
+  if (!n) return 'U';
+  const parts = n.split(/\s+/g).filter(Boolean);
+  const a = parts[0]?.[0] ?? 'U';
+  const b = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : (parts[0]?.[1] ?? '');
+  return (a + b).toUpperCase();
+});
+</script>

package/src/ngb/site/NgbTrendChart.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { BarChart, LineChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+
+use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+export type NgbTrendChartSeries = {
+  label: string
+  color: string
+  values: number[]
+}
+
+const props = withDefaults(defineProps<{
+  labels: string[]
+  series: NgbTrendChartSeries[]
+  mode?: 'line' | 'bar'
+}>(), {
+  mode: 'line',
+})
+
+const themeVersion = ref(0)
+let themeObserver: MutationObserver | null = null
+
+const pointCount = computed(() => {
+  const seriesMax = Math.max(0, ...props.series.map((entry) => entry.values.length))
+  return Math.max(props.labels.length, seriesMax, 1)
+})
+
+const normalizedSeries = computed(() =>
+  props.series.map((entry) => ({
+    ...entry,
+    values: Array.from({ length: pointCount.value }, (_, index) => {
+      const raw = Number(entry.values[index] ?? 0)
+      return Number.isFinite(raw) ? raw : 0
+    }),
+  })),
+)
+
+function readCssVar(name: string, fallback: string): string {
+  themeVersion.value
+  if (typeof window === 'undefined') return fallback
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return value.length > 0 ? value : fallback
+}
+
+function resolveColor(value: string): string {
+  const match = String(value ?? '').trim().match(/^var\((--[^)]+)\)$/)
+  return match ? readCssVar(match[1], value) : value
+}
+
+function formatCompactNumber(value: number): string {
+  const numeric = Number(value ?? 0)
+  if (!Number.isFinite(numeric)) return '0'
+  const abs = Math.abs(numeric)
+  if (abs >= 1_000_000) return `${numeric < 0 ? '-' : ''}${(abs / 1_000_000).toFixed(1)}M`
+  if (abs >= 1_000) return `${numeric < 0 ? '-' : ''}${(abs / 1_000).toFixed(1)}K`
+  if (abs >= 100) return `${Math.round(numeric)}`
+  if (abs % 1 > 0.001) return numeric.toFixed(1)
+  return `${Math.round(numeric)}`
+}
+
+const palette = computed(() => ({
+  text: readCssVar('--ngb-text', '#1F2933'),
+  muted: readCssVar('--ngb-muted', '#4B5563'),
+  border: readCssVar('--ngb-border', '#CBD5E1'),
+  card: readCssVar('--ngb-card', '#FFFFFF'),
+  background: readCssVar('--ngb-bg', '#F5F7FA'),
+}))
+
+const chartOptions = computed(() => ({
+  animationDuration: 420,
+  animationDurationUpdate: 260,
+  color: normalizedSeries.value.map((entry) => resolveColor(entry.color)),
+  legend: {
+    show: normalizedSeries.value.length > 1,
+    top: 0,
+    right: 0,
+    icon: 'roundRect',
+    itemWidth: 14,
+    itemHeight: 8,
+    textStyle: {
+      color: palette.value.text,
+      fontSize: 12,
+      fontWeight: 600,
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: true,
+    backgroundColor: palette.value.card,
+    borderColor: palette.value.border,
+    borderWidth: 1,
+    textStyle: {
+      color: palette.value.text,
+      fontSize: 12,
+    },
+    axisPointer: props.mode === 'bar'
+      ? {
+          type: 'shadow',
+          shadowStyle: {
+            color: 'rgba(148, 163, 184, 0.12)',
+          },
+        }
+      : {
+          type: 'line',
+          lineStyle: {
+            color: 'rgba(148, 163, 184, 0.42)',
+            width: 1,
+          },
+        },
+    formatter: (params: Array<{ axisValueLabel?: string; seriesName?: string; value?: number; color?: string }>) => {
+      const rows = Array.isArray(params) ? params : [params]
+      const title = rows[0]?.axisValueLabel ?? ''
+      const body = rows.map((row) => {
+        const color = String(row?.color ?? palette.value.border)
+        const label = String(row?.seriesName ?? '').trim()
+        const value = formatCompactNumber(Number(row?.value ?? 0))
+        return `<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:160px;"><span style="display:inline-flex;align-items:center;gap:8px;color:${palette.value.text};"><span style="display:inline-block;width:8px;height:8px;border-radius:999px;background:${color};"></span>${label}</span><strong style="color:${palette.value.text};font-weight:700;">${value}</strong></div>`
+      }).join('')
+      return `<div style="display:grid;gap:8px;"><div style="font-weight:700;color:${palette.value.text};">${title}</div>${body}</div>`
+    },
+  },
+  grid: {
+    top: normalizedSeries.value.length > 1 ? 48 : 20,
+    right: 10,
+    bottom: 10,
+    left: 6,
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: props.mode === 'bar',
+    data: props.labels,
+    axisTick: { show: false },
+    axisLine: {
+      lineStyle: {
+        color: palette.value.border,
+      },
+    },
+    axisLabel: {
+      color: palette.value.muted,
+      fontSize: 11,
+      margin: 12,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: {
+      lineStyle: {
+        color: palette.value.border,
+        opacity: 0.55,
+        type: 'dashed',
+      },
+    },
+    axisLabel: {
+      color: palette.value.muted,
+      fontSize: 11,
+      formatter: (value: number) => formatCompactNumber(value),
+    },
+  },
+  series: normalizedSeries.value.map((entry, index) => props.mode === 'bar'
+    ? {
+        name: entry.label,
+        type: 'bar',
+        data: entry.values,
+        barMaxWidth: 38,
+        itemStyle: {
+          borderRadius: 0,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+      }
+    : {
+        name: entry.label,
+        type: 'line',
+        data: entry.values,
+        smooth: 0.32,
+        showSymbol: false,
+        symbol: 'circle',
+        symbolSize: 7,
+        lineStyle: {
+          width: 3,
+        },
+        areaStyle: {
+          opacity: index === 0 ? 0.16 : 0.1,
+        },
+        emphasis: {
+          focus: 'series',
+        },
+      }),
+}))
+
+onMounted(() => {
+  themeObserver = new MutationObserver(() => {
+    themeVersion.value += 1
+  })
+
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class', 'style'],
+  })
+})
+
+onBeforeUnmount(() => {
+  themeObserver?.disconnect()
+  themeObserver = null
+})
+</script>
+
+<template>
+  <VChart
+    class="h-full w-full"
+    :option="chartOptions"
+    :init-options="{ renderer: 'canvas' }"
+    autoresize
+  />
+</template>