@ngbplatform/ui 1.3.0

package/src/ngb/site/NgbDashboardStatusBanner.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+const props = withDefaults(defineProps<{
+  error?: string | null
+  warnings?: readonly string[] | null | undefined
+  errorTitle?: string
+  warningTitle?: string
+  warningLimit?: number
+}>(), {
+  error: null,
+  warnings: () => [],
+  errorTitle: 'Dashboard data failed to load',
+  warningTitle: 'Some sections are partial',
+  warningLimit: 3,
+})
+
+const normalizedError = computed(() => String(props.error ?? '').trim())
+const normalizedWarningLimit = computed(() => Math.max(0, Math.trunc(props.warningLimit)))
+const visibleWarnings = computed(() =>
+  (props.warnings ?? [])
+    .map((value) => String(value ?? '').trim())
+    .filter((value, index, items) => value.length > 0 && items.indexOf(value) === index)
+    .slice(0, normalizedWarningLimit.value),
+)
+const mode = computed<'error' | 'warn' | null>(() => {
+  if (normalizedError.value) return 'error'
+  if (visibleWarnings.value.length > 0) return 'warn'
+  return null
+})
+</script>
+
+<template>
+  <div
+    v-if="mode"
+    class="ngb-dashboard-status-banner"
+    :class="mode === 'error' ? 'ngb-dashboard-status-banner-danger' : 'ngb-dashboard-status-banner-warn'"
+  >
+    <div class="flex items-start gap-3">
+      <div class="ngb-dashboard-status-banner-icon">
+        <NgbIcon :name="mode === 'error' ? 'circle-x' : 'help-circle'" :size="18" />
+      </div>
+
+      <div>
+        <div class="text-sm font-semibold text-ngb-text">
+          {{ mode === 'error' ? errorTitle : warningTitle }}
+        </div>
+
+        <div v-if="mode === 'error'" class="mt-1 text-sm text-ngb-muted">
+          {{ normalizedError }}
+        </div>
+
+        <div v-else class="mt-1 space-y-1 text-sm text-ngb-muted">
+          <div v-for="warning in visibleWarnings" :key="warning">{{ warning }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ngb-dashboard-status-banner {
+  --ngb-dashboard-status-banner-color: var(--ngb-border);
+  border: 1px solid color-mix(in srgb, var(--ngb-dashboard-status-banner-color) 24%, var(--ngb-border));
+  border-radius: var(--ngb-radius);
+  background: color-mix(in srgb, var(--ngb-dashboard-status-banner-color) 10%, var(--ngb-card));
+  padding: 1rem 1.1rem;
+}
+
+.ngb-dashboard-status-banner-warn {
+  --ngb-dashboard-status-banner-color: var(--ngb-warn);
+}
+
+.ngb-dashboard-status-banner-danger {
+  --ngb-dashboard-status-banner-color: var(--ngb-danger);
+}
+
+.ngb-dashboard-status-banner-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ngb-dashboard-status-banner-color) 26%, var(--ngb-border));
+  background: color-mix(in srgb, var(--ngb-dashboard-status-banner-color) 10%, var(--ngb-card));
+  color: var(--ngb-text);
+}
+</style>

package/src/ngb/site/NgbLogo.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 120"
+    role="img"
+    :aria-label="resolvedTitle"
+    focusable="false"
+    v-bind="$attrs"
+  >
+    <title v-if="resolvedTitle">{{ resolvedTitle }}</title>
+    <g fill="currentColor" transform="translate(-7 -46)">
+      <path
+        d="M523 0H333V1161Q333 1184 346 1200Q356 1213 373 1220Q395 1229 414 1225Q430 1221 440 1208L1148 210Q1167 183 1200 176Q1232 169 1266 183Q1296 195 1314 222Q1332 248 1332 281V1450H1522V281Q1522 186 1467 109Q1417 39 1337 6Q1250 -29 1161 -10Q1055 12 993 100L523 762ZM291 0V1161Q291 1194 308 1220Q326 1247 357 1259Q391 1273 422 1266Q455 1259 474 1232L1182 234Q1192 221 1209 217Q1228 213 1250 222Q1267 229 1277 243Q1289 260 1289 281V1450H1099V680L629 1343Q567 1430 461 1452Q372 1471 285 1436Q201 1401 150 1325Q100 1251 100 1161V0Z"
+        transform="translate(0.000,160.625) scale(0.078125,-0.078125)"
+      />
+      <path
+        d="M1663 1450V1260H776Q554 1260 397 1103Q241 946 241 725Q241 503 397 347Q554 190 776 190H1088Q1426 190 1541 340Q1623 447 1623 725V746H804V936H1814V725Q1814 384 1692 224Q1520 0 1088 0H776Q475 0 263 212Q50 424 50 725Q50 1025 263 1237Q475 1450 776 1450ZM1663 1217H776Q572 1217 427 1073Q283 929 283 725Q283 521 427 377Q572 232 776 232H1088Q1406 232 1507 365Q1579 459 1581 704H804V513H1373Q1366 493 1356 481Q1312 423 1088 423H776Q651 423 562 511Q473 600 473 725Q473 850 562 938Q651 1027 776 1027H1663Z"
+        transform="translate(126.719,160.625) scale(0.078125,-0.078125)"
+      />
+      <path
+        d="M566 0V190H1251Q1366 190 1447 271Q1529 353 1529 468Q1529 583 1447 664Q1397 715 1330 734Q1368 754 1399 785Q1481 866 1481 982Q1481 1097 1399 1178Q1318 1260 1202 1260H291V0H100V1450H1202Q1372 1450 1490 1371Q1597 1299 1641 1179Q1683 1065 1654 947Q1624 824 1529 743Q1645 670 1690 542Q1734 421 1698 296Q1661 167 1551 88Q1430 0 1251 0ZM566 232H1251Q1348 232 1417 301Q1487 370 1487 468Q1487 566 1417 635Q1348 704 1251 704H563V513H1251Q1269 513 1283 500Q1296 487 1296 468Q1296 449 1283 436Q1269 423 1251 423H566ZM563 746H1202Q1300 746 1369 815Q1438 884 1438 982Q1438 1079 1369 1148Q1300 1217 1202 1217H333V0H523V1027H1202Q1221 1027 1234 1014Q1248 1000 1248 982Q1248 963 1234 950Q1221 936 1202 936H563Z"
+        transform="translate(273.906,160.625) scale(0.078125,-0.078125)"
+      />
+    </g>
+    <g>
+      <rect x="403" y="0" width="16" height="16" fill="currentColor" />
+      <rect x="422" y="0" width="16" height="16" fill="currentColor" />
+      <rect x="403" y="19" width="16" height="16" fill="currentColor" />
+      <rect x="422" y="19" width="16" height="16" fill="var(--ngb-logo-accent, #0F766E)" />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+  title?: string;
+}>();
+
+const resolvedTitle = computed(() => (props.title?.trim() ? props.title.trim() : 'NGB'));
+</script>

package/src/ngb/site/NgbPageHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="border-b border-ngb-border bg-ngb-card"
+    :class="variant === 'compact' ? 'px-4 py-3 sm:px-6' : 'px-4 py-4 sm:px-6'"
+  >
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+      <div class="flex min-w-0 items-start gap-3 sm:flex-1 sm:items-center">
+        <button
+          v-if="canBack"
+          class="ngb-iconbtn"
+          @click="$emit('back')"
+          title="Back"
+          aria-label="Back"
+        >
+          <NgbIcon name="arrow-left" />
+        </button>
+
+        <div class="min-w-0 flex-1 self-center">
+          <div v-if="variant !== 'compact' && breadcrumbs?.length" class="mb-1 truncate text-xs text-ngb-muted">
+            <span v-for="(b, i) in breadcrumbs" :key="i">
+              <span>{{ b }}</span><span v-if="i < breadcrumbs.length - 1"> / </span>
+            </span>
+          </div>
+          <h1 class="truncate font-semibold" :class="variant === 'compact' ? 'text-base' : 'text-lg'">{{ title }}</h1>
+          <div v-if="variant !== 'compact'" class="mt-1 flex min-h-[1.25rem] min-w-0 items-center">
+            <slot name="secondary" />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NgbIcon from '../primitives/NgbIcon.vue';
+
+defineProps<{
+  title: string;
+  breadcrumbs?: string[];
+  canBack?: boolean;
+  variant?: 'default' | 'compact';
+}>();
+
+defineEmits<{ (e: 'back'): void }>();
+</script>

package/src/ngb/site/NgbSiteShell.vue

@@ -0,0 +1,286 @@
+<template>
+  <div data-testid="site-shell" class="flex h-screen min-h-0 w-full min-w-0 overflow-hidden bg-ngb-bg text-ngb-text">
+    <!-- Left sidebar (full height) -->
+    <div class="hidden h-full min-h-0 shrink-0 self-stretch md:block relative z-20" :class="sidebarCollapsed ? 'w-[72px]' : 'w-[320px]'">
+      <NgbSiteSidebar
+        :productTitle="productTitle"
+        :brandSubtitle="moduleTitle"
+        :pinned="pinned"
+        :recent="recent"
+        :nodes="nodes"
+        :selectedId="selectedId"
+        :themeResolved="themeResolved"
+        :collapsed="sidebarCollapsed"
+        @toggleCollapsed="toggleSidebar"
+        @navigate="$emit('navigate', $event)"
+        @select="(id, route) => $emit('select', id, route)"
+      />
+    </div>
+
+    <!-- Right column -->
+    <div class="flex-1 min-w-0 flex flex-col min-h-0">
+      <NgbTopBar
+        :pageTitle="resolvedPageTitle"
+        :canBack="canBack"
+        :unreadNotifications="unreadNotifications"
+        :userName="resolvedUserName"
+        :userEmail="resolvedUserEmail"
+        :userMeta="resolvedUserMeta"
+        :userMetaIcon="resolvedUserMetaIcon"
+        :userRoles="resolvedUserRoles"
+        :themeResolved="themeResolved"
+        :hasSettings="settingsSections.length > 0"
+        :showMainMenu="nodes.length > 0"
+        @openMainMenu="mobileMainMenuOpen = true"
+        @openPalette="$emit('openPalette')"
+        @back="$emit('back')"
+        @openNotifications="helpOpen = false; settingsOpen = false; notificationsOpen = true"
+        @openHelp="notificationsOpen = false; settingsOpen = false; helpOpen = true"
+        @openSettings="notificationsOpen = false; helpOpen = false; settingsOpen = true"
+        @signOut="$emit('signOut')"
+        @toggleTheme="theme.toggle()"
+      />
+
+      <main data-testid="site-main" class="flex-1 min-h-0 overflow-hidden flex flex-col">
+        <slot />
+      </main>
+    </div>
+
+    <NgbDrawer
+      :open="mobileMainMenuOpen"
+      title="Main menu"
+      hide-header
+      flush-body
+      side="left"
+      panel-class="max-w-[320px]"
+      @update:open="mobileMainMenuOpen = $event"
+    >
+      <div data-testid="mobile-main-menu-sidebar" class="h-full">
+        <NgbSiteSidebar
+          :productTitle="productTitle"
+          :brandSubtitle="moduleTitle"
+          :pinned="pinned"
+          :recent="recent"
+          :nodes="nodes"
+          :selectedId="selectedId"
+          :themeResolved="themeResolved"
+          :collapsed="false"
+          :allowCollapse="false"
+          @navigate="handleMobileNavigate"
+          @select="handleMobileSelect"
+        />
+      </div>
+    </NgbDrawer>
+
+    <!-- Notifications drawer (right sidebar) -->
+    <NgbDrawer
+      :open="notificationsOpen"
+      title="Notifications"
+      subtitle="Updates and alerts"
+      @update:open="notificationsOpen = $event"
+    >
+      <div class="flex min-h-full items-center justify-center">
+        <div class="max-w-[350px] text-center">
+          <div class="text-base font-semibold text-ngb-text">No notifications</div>
+          <div class="mt-2 text-sm leading-6 text-ngb-muted">
+            When you receive a notification, it will appear here
+          </div>
+        </div>
+      </div>
+    </NgbDrawer>
+
+    <!-- Help drawer (right sidebar placeholder) -->
+    <NgbDrawer
+      :open="helpOpen"
+      title="Help"
+      subtitle="NGB Assistant"
+      @update:open="helpOpen = $event"
+    >
+      <div class="flex min-h-full items-center justify-center">
+        <div class="w-full max-w-[360px] rounded-[24px] border border-ngb-border bg-ngb-bg px-6 py-7 text-center shadow-card">
+          <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full border border-ngb-border bg-ngb-card text-ngb-muted">
+            <NgbIcon name="help-circle" :size="26" />
+          </div>
+
+          <div class="mt-5 text-lg font-semibold text-ngb-text">Help is coming soon</div>
+          <div class="mt-2 text-sm leading-6 text-ngb-muted">
+            NGB Assistant will help you find features, learn workflows, and get answers while you work.
+          </div>
+
+          <div class="mt-6 rounded-[18px] border border-ngb-border bg-ngb-card px-4 py-4 text-left">
+            <div class="text-xs font-semibold uppercase tracking-[0.12em] text-ngb-muted">What you'll be able to do</div>
+            <div class="mt-3 space-y-3">
+              <div class="flex items-start gap-3">
+                <span class="mt-0.5 text-ngb-muted">
+                  <NgbIcon name="search" :size="16" />
+                </span>
+                <span class="text-sm leading-6 text-ngb-text">Get guided onboarding</span>
+              </div>
+              <div class="flex items-start gap-3">
+                <span class="mt-0.5 text-ngb-muted">
+                  <NgbIcon name="help-circle" :size="16" />
+                </span>
+                <span class="text-sm leading-6 text-ngb-text">Ask product questions</span>
+              </div>
+              <div class="flex items-start gap-3">
+                <span class="mt-0.5 text-ngb-muted">
+                  <NgbIcon name="arrow-right" :size="16" />
+                </span>
+                <span class="text-sm leading-6 text-ngb-text">Find pages and actions faster</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 text-xs leading-5 text-ngb-muted">This is a UI placeholder.</div>
+        </div>
+      </div>
+    </NgbDrawer>
+
+    <!-- Settings drawer (right sidebar) -->
+    <NgbDrawer
+      :open="settingsOpen"
+      title="Settings"
+      subtitle="Configuration"
+      @update:open="settingsOpen = $event"
+    >
+      <div class="space-y-6">
+        <template v-if="(settingsSections?.length ?? 0) === 0">
+          <div class="text-sm text-ngb-muted leading-6">
+            No settings shortcuts are configured for this app.
+          </div>
+        </template>
+
+        <template v-else>
+          <div v-for="s in settingsSections" :key="s.label">
+            <div class="text-xs font-semibold text-ngb-muted uppercase tracking-wide">{{ s.label }}</div>
+            <div class="mt-2 space-y-1">
+              <button
+                v-for="it in s.items"
+                :key="it.route"
+                class="w-full text-left rounded-[var(--ngb-radius)] border border-transparent hover:border-ngb-border hover:bg-ngb-bg px-3 py-2 ngb-focus"
+                @click="navigateToSettings(it.route)"
+              >
+                <div class="flex items-start gap-3">
+                  <span class="mt-0.5 text-ngb-muted" v-if="it.icon">
+                    <NgbIcon :name="it.icon" :size="18" />
+                  </span>
+                  <span class="mt-1 text-ngb-muted text-[10px]" v-else>•</span>
+                  <div class="min-w-0">
+                    <div class="text-sm font-semibold text-ngb-text truncate">{{ it.label }}</div>
+                    <div v-if="it.description" class="text-xs text-ngb-muted leading-5 mt-0.5">{{ it.description }}</div>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </NgbDrawer>
+    <NgbToastHost />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import NgbTopBar from './NgbTopBar.vue';
+import NgbSiteSidebar from './NgbSiteSidebar.vue';
+import NgbDrawer from '../components/NgbDrawer.vue';
+import NgbIcon from '../primitives/NgbIcon.vue';
+import NgbToastHost from '../primitives/NgbToastHost.vue';
+import type { SiteNavNode, SiteQuickLink, SiteSettingsSection } from './types';
+import { useTheme } from './useTheme';
+import { provideToasts } from '../primitives/toast';
+
+const props = defineProps<{
+  moduleTitle: string;
+  productTitle: string;
+  envLabel?: string;
+  userName?: string;
+  userEmail?: string;
+  userMeta?: string;
+  userMetaIcon?: 'shield-check' | 'shield' | 'user';
+  userRoles?: string[];
+  unreadNotifications?: number;
+  canBack?: boolean;
+  pageTitle?: string;
+  pinned: SiteQuickLink[];
+  recent: SiteQuickLink[];
+  nodes: SiteNavNode[];
+  settings?: SiteSettingsSection[];
+  selectedId: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'navigate', route: string): void;
+  (e: 'select', id: string, route: string): void;
+  (e: 'openPalette'): void;
+  (e: 'back'): void;
+  (e: 'signOut'): void;
+}>();
+
+const sidebarCollapsed = ref(false);
+const theme = useTheme();
+const themeResolved = computed(() => theme.resolved.value);
+
+// Global toast stack (available to any child component).
+provideToasts();
+
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+
+const notificationsOpen = ref(false);
+const helpOpen = ref(false);
+const settingsOpen = ref(false);
+const mobileMainMenuOpen = ref(false);
+const settingsSections = computed(() => props.settings ?? []);
+
+function navigateToSettings(route: string) {
+  settingsOpen.value = false;
+  emit('navigate', route);
+}
+
+function handleMobileNavigate(route: string) {
+  mobileMainMenuOpen.value = false;
+  emit('navigate', route);
+}
+
+function handleMobileSelect(id: string, route: string) {
+  mobileMainMenuOpen.value = false;
+  emit('select', id, route);
+}
+
+const unreadNotifications = computed(() => props.unreadNotifications ?? 0);
+const canBack = computed(() => props.canBack ?? false);
+
+function findNodeLabel(nodes: SiteNavNode[], id: string): string | null {
+  for (const n of nodes) {
+    if (n.id === id) return n.label;
+    if (n.children) {
+      const found = findNodeLabel(n.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+const resolvedUserName = computed(() => (props.userName?.trim() ? props.userName.trim() : 'User'));
+const resolvedUserEmail = computed(() => (props.userEmail?.trim() ? props.userEmail.trim() : ''));
+const resolvedUserMeta = computed(() => (props.userMeta?.trim() ? props.userMeta.trim() : ''));
+const resolvedUserMetaIcon = computed<'shield-check' | 'shield' | 'user'>(() => {
+  if (props.userMetaIcon === 'shield-check' || props.userMetaIcon === 'shield') return props.userMetaIcon;
+  return 'user';
+});
+const resolvedUserRoles = computed(() => (props.userRoles ?? [])
+  .map((role) => String(role ?? '').trim())
+  .filter((role) => role.length > 0));
+
+const resolvedPageTitle = computed(() => {
+  if (props.pageTitle?.trim()) return props.pageTitle.trim();
+  if (props.selectedId) {
+    const label = findNodeLabel(props.nodes, props.selectedId);
+    if (label) return label;
+  }
+  return props.moduleTitle;
+});
+</script>