@ojiepermana/angular 0.1.0 → 21.0.0

package/types/ojiepermana-angular-layout.d.ts

@@ -1,90 +1,137 @@
-import * as i0 from '@angular/core';
-import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, EnvironmentProviders } from '@angular/core';
+import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation';
 
-declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
-type LayoutMode = (typeof LAYOUT_MODES)[number];
-declare const LAYOUT_CONTAINERS: readonly ["full", "boxed"];
-type LayoutContainer = (typeof LAYOUT_CONTAINERS)[number];
-interface NgLayoutConfig {
-    defaultMode: LayoutMode;
-    defaultContainer: LayoutContainer;
-}
-
-declare class LayoutService {
-    private readonly config;
-    private readonly document;
-    private readonly isBrowser;
-    private readonly storage;
-    readonly mode: i0.WritableSignal<"vertical" | "horizontal" | "empty">;
-    readonly container: i0.WritableSignal<"full" | "boxed">;
-    constructor();
-    /**
-     * Updates the active shell mode and persists the value for future sessions.
-     */
-    setMode(value: LayoutMode): void;
-    /**
-     * Updates the active container width mode and persists the value for future sessions.
-     */
-    setContainer(value: LayoutContainer): void;
-    /**
-     * Clears persisted layout state and restores the configured defaults for mode and container.
-     */
-    reset(): void;
-    private applyToDOM;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
+/**
+ * Vertical layout — sidebar + main (scrollable).
+ *
+ * Data navigasi diambil dari `NavigationService` (register via
+ * `NavigationService.registerItems()` di bootstrap). Main memegang
+ * `<router-outlet>` dan scroll jika konten panjang.
+ *
+ * Markup:
+ * ```html
+ * <vertical>
+ *   <!-- sidebar + router-outlet dirender oleh komponen -->
+ * </vertical>
+ * ```
+ */
+declare class VerticalLayoutComponent {
+    private readonly layout;
+    private readonly theme;
+    readonly sidebarAppearance: _angular_core.InputSignal<SidebarAppearance>;
+    readonly sidebarPosition: _angular_core.InputSignal<SidebarPosition>;
+    readonly sidebarMode: _angular_core.InputSignal<SidebarMode>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
+    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly mainClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VerticalLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VerticalLayoutComponent, "vertical", never, { "sidebarAppearance": { "alias": "sidebarAppearance"; "required": false; "isSignal": true; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "sidebarMode": { "alias": "sidebarMode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class LayoutHostDirective {
-    protected readonly layout: LayoutService;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHostDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<LayoutHostDirective, "[ngtLayoutHost]", never, {}, {}, never, never, true, never>;
+/**
+ * Horizontal layout — topbar (h-12) + main (scrollable).
+ *
+ * Data navigasi diambil dari `NavigationService`.
+ * Consumer app dapat memproyeksikan brand kiri dan profile kanan.
+ *
+ * Markup:
+ * ```html
+ * <horizontal>
+ *   <a ui-layout-brand>Brand</a>
+ *   <button ui-layout-profile type="button">Profile</button>
+ * </horizontal>
+ * ```
+ */
+declare class HorizontalLayoutComponent {
+    private readonly layout;
+    private readonly theme;
+    readonly topbarAppearance: _angular_core.InputSignal<TopbarAppearance>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly layoutWidth: _angular_core.Signal<"full" | "fixed">;
+    protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
+    protected readonly dividerBorderWidth: _angular_core.Signal<string>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalLayoutComponent, "horizontal", never, { "topbarAppearance": { "alias": "topbarAppearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[ui-topbar-start]", "[ui-layout-profile],[ui-topbar-end]"], true, never>;
 }
 
-declare class LayoutHorizontalComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHorizontalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[headerBrand]", "[headerNavigation]", "[headerActions]"], true, never>;
+/**
+ * Empty layout — full-viewport, flex-centered main.
+ *
+ * Cocok untuk halaman login / error / onboarding (pola shadcn `login-05`).
+ * Konten dirender lewat `<router-outlet>`; consumer men-style card / form
+ * milik halaman route sendiri.
+ *
+ * Markup:
+ * ```html
+ * <empty>
+ *   <!-- router-outlet dirender oleh komponen -->
+ * </empty>
+ * ```
+ */
+declare class EmptyLayoutComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
 }
 
-declare class LayoutVerticalComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutVerticalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutVerticalComponent, "vertical", never, {}, {}, never, ["[navigation]"], true, never>;
+declare const LAYOUT_MODES: readonly ["vertical", "horizontal"];
+type LayoutMode = (typeof LAYOUT_MODES)[number];
+declare const LAYOUT_WIDTHS: readonly ["full", "fixed"];
+type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
+interface MaterialLayoutConfig {
+    /** Initial layout mode. */
+    readonly mode?: LayoutMode;
+    /** Initial layout width. */
+    readonly width?: LayoutWidth;
+    /** @deprecated Use `mode` instead. */
+    /** Initial layout mode. Defaults to `vertical`. */
+    readonly defaultMode?: LayoutMode;
+    /** localStorage key used to persist the layout mode. Set to `null` to disable persistence. */
+    readonly storageKey?: string | null;
+    /** localStorage key used to persist the layout width. Set to `null` to disable persistence. */
+    readonly widthStorageKey?: string | null;
 }
-
-declare class LayoutContainerSwitcherComponent {
-    protected readonly layout: LayoutService;
-    protected readonly label: i0.Signal<"Boxed layout container enabled" | "Boxed layout container disabled">;
-    protected toggle(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutContainerSwitcherComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutContainerSwitcherComponent, "layout-container-switcher", never, {}, {}, never, never, true, never>;
+interface ResolvedMaterialLayoutConfig {
+    readonly defaultMode: LayoutMode;
+    readonly defaultWidth: LayoutWidth;
+    readonly storageKey: string | null;
+    readonly widthStorageKey: string | null;
 }
+declare const MATERIAL_LAYOUT_CONFIG: InjectionToken<MaterialLayoutConfig>;
+declare const DEFAULT_MATERIAL_LAYOUT_CONFIG: ResolvedMaterialLayoutConfig;
+declare function isLayoutMode(value: string | null | undefined): value is LayoutMode;
+declare function isLayoutWidth(value: string | null | undefined): value is LayoutWidth;
 
-declare class LayoutModeSwitcherComponent {
-    protected readonly layout: LayoutService;
-    protected readonly options: ({
-        value: "vertical";
-        label: string;
-    } | {
-        value: "horizontal";
-        label: string;
-    })[];
-    protected readonly currentOption: i0.Signal<{
-        value: "vertical";
-        label: string;
-    } | {
-        value: "horizontal";
-        label: string;
-    } | {
-        value: "empty";
-        label: string;
-    }>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutModeSwitcherComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutModeSwitcherComponent, "layout-mode-switcher", never, {}, {}, never, never, true, never>;
+declare class LayoutService {
+    private readonly document;
+    private readonly config;
+    private readonly _mode;
+    private readonly _width;
+    readonly mode: _angular_core.Signal<"vertical" | "horizontal">;
+    readonly width: _angular_core.Signal<"full" | "fixed">;
+    constructor();
+    setMode(mode: LayoutMode): void;
+    toggleMode(): void;
+    setWidth(width: LayoutWidth): void;
+    toggleWidth(): void;
+    private resolveConfig;
+    private readPersistedMode;
+    private readPersistedWidth;
+    private persistMode;
+    private persistWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutService>;
 }
 
-declare function provideNgLayout(config?: Partial<NgLayoutConfig>): EnvironmentProviders;
+declare function provideMaterialLayout(config?: MaterialLayoutConfig): EnvironmentProviders;
 
-declare const NG_LAYOUT_CONFIG: InjectionToken<NgLayoutConfig>;
+declare const LAYOUT_VERSION = "0.0.1";
 
-export { LayoutContainerSwitcherComponent, LayoutHorizontalComponent, LayoutHostDirective, LayoutModeSwitcherComponent, LayoutService, LayoutVerticalComponent, NG_LAYOUT_CONFIG, provideNgLayout };
-export type { LayoutContainer, LayoutMode, NgLayoutConfig };
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, provideMaterialLayout };
+export type { LayoutMode, LayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };

package/types/ojiepermana-angular-navigation.d.ts

@@ -1,7 +1,8 @@
-import { Params, QueryParamsHandling, IsActiveMatchOptions } from '@angular/router';
 import * as _angular_core from '@angular/core';
+import { Params, QueryParamsHandling, IsActiveMatchOptions } from '@angular/router';
+import { ClassValue } from 'clsx';
 
-type NavigationItemType = 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
+type NavigationItemType = 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'mega' | 'spacer';
 interface NavigationItemClasses {
     title?: string;
     subtitle?: string;
@@ -29,7 +30,7 @@ interface NavigationItemBase {
     tooltip?: string;
     /** Custom CSS classes */
     classes?: NavigationItemClasses;
-    /** Material icon name */
+    /** Material Symbols icon name (ligature, e.g. `dashboard`, `menu_book`) */
     icon?: string;
     /** Badge configuration */
     badge?: NavigationItemBadge;
@@ -76,6 +77,16 @@ interface NavigationGroupItem extends NavigationItemBase {
     type: 'group';
     children: NavigationItem[];
 }
+/**
+ * Mega menu branch — dirender sebagai panel full-width multi-kolom pada topbar.
+ * Children biasanya berupa `NavigationGroupItem` (per kolom) berisi `basic` items.
+ */
+interface NavigationMegaItem extends NavigationItemBase {
+    type: 'mega';
+    /** Jumlah kolom saat viewport >= md (default: 4) */
+    columns?: number;
+    children: NavigationItem[];
+}
 interface NavigationDividerItem extends NavigationItemBase {
     type: 'divider';
     children?: never;
@@ -84,7 +95,7 @@ interface NavigationSpacerItem extends NavigationItemBase {
     type: 'spacer';
     children?: never;
 }
-type NavigationBranchItem = NavigationAsideItem | NavigationCollapsableItem | NavigationGroupItem;
+type NavigationBranchItem = NavigationAsideItem | NavigationCollapsableItem | NavigationGroupItem | NavigationMegaItem;
 type NavigationLeafItem = NavigationBasicItem | NavigationDividerItem | NavigationSpacerItem;
 type NavigationItem = NavigationBranchItem | NavigationLeafItem;
 /**
@@ -95,88 +106,263 @@ type NavigationItem = NavigationBranchItem | NavigationLeafItem;
  */
 type NavigationStructuredItem = NavigationItem;
 /**
- * Vertical Navigation Appearances
- * - default: 280px width, full labels & icons
- * - compact: 240px width, slightly condensed
- * - dense: 200px width, more condensed
- * - thin: 80px width, icon only (labels on hover)
- */
-type VerticalNavigationAppearance = 'default' | 'compact' | 'dense' | 'thin';
-/**
- * Vertical Navigation Modes
- * - over: Overlay mode (fixed position, z-index tinggi)
- * - side: Side mode (relative position, push content)
+ * Sidebar Appearance
+ * - default: full width (lebar penuh) dengan label + icon
+ * - thin: icon-only, expand overlay saat hover
  */
-type VerticalNavigationMode = 'over' | 'side';
+type SidebarAppearance = 'default' | 'thin';
 /**
- * Vertical Navigation Position
+ * Topbar Appearance
+ * - default: horizontal dengan dropdown untuk collapsable
+ * - megamenu: full-width panel multi-kolom untuk item `mega`
  */
-type VerticalNavigationPosition = 'left' | 'right';
-
-declare function getNavigationItemAction(item: NavigationItem): NavigationActionHandler | undefined;
-declare function getNavigationItemVisibilityHandler(item: NavigationItem): NavigationVisibilityHandler | undefined;
-declare function isNavigationItemHidden(item: NavigationItem): boolean;
-declare function shouldRenderNavigationItem(item: NavigationItem): boolean;
-declare function hasNavigationChildren(item: NavigationItem): item is NavigationBranchItem;
-declare function getNavigationChildren(item: NavigationItem): NavigationItem[];
-declare function isNavigationRoutableItem(item: NavigationItem): item is NavigationItem & NavigationRoutableItemBase;
+type TopbarAppearance = 'default' | 'megamenu';
+/** Sidebar position */
+type SidebarPosition = 'left' | 'right';
+/** Sidebar display mode */
+type SidebarMode = 'over' | 'side';
+type VerticalNavigationAppearance = SidebarAppearance;
+type VerticalNavigationMode = SidebarMode;
+type VerticalNavigationPosition = SidebarPosition;
 
+/** Default registry key used when no id is specified. */
+declare const DEFAULT_NAVIGATION_ID = "main";
 /**
- * Navigation Service
+ * Signal-based global state untuk navigation (sidebar/topbar).
  *
- * Service ini bertanggung jawab untuk:
- * 1. Store dan retrieve navigation data
- * 2. Menyediakan state aktif dan expanded item
- * 3. Utility functions untuk navigation operations
+ * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
+ * Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
  */
 declare class NavigationService {
-    private _navigation;
-    private _activeItemId;
-    private _expandedItemIds;
-    readonly navigationItems: _angular_core.Signal<NavigationItem[]>;
-    readonly activeItemId: _angular_core.Signal<string | null>;
-    readonly flatNavigation: _angular_core.Signal<NavigationItem[]>;
-    readonly expandedItemIds: _angular_core.Signal<string[]>;
+    private readonly router;
+    private readonly destroyRef;
+    /** Internal version counter — incremented on every registry mutation. */
+    private readonly _version;
+    /** Internal map of registered navigation trees. */
+    private readonly _registry;
     /**
-     * Store navigation data
-     * Biasanya dipanggil saat app initialization
+     * Backward-compatible accessor — returns items for the default (`'main'`) key.
+     * Prefer `getItems(id)` when working with named registries.
      */
-    storeNavigation(navigation: NavigationItem[]): void;
+    readonly items: _angular_core.Signal<readonly NavigationItem[]>;
+    /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
+    readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Sheet drawer terbuka di mobile. */
+    readonly mobileOpen: _angular_core.WritableSignal<boolean>;
+    /** Set id grup / collapsable yang sedang terbuka. */
+    readonly openGroups: _angular_core.WritableSignal<ReadonlySet<string>>;
+    /** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */
+    readonly activeUrl: _angular_core.WritableSignal<string>;
+    /** Trail id item yang sedang match dengan URL aktif (across ALL registries). */
+    readonly activeTrail: _angular_core.Signal<ReadonlySet<string>>;
+    constructor();
     /**
-     * Get navigation data dari storage
+     * Register items di registry.
+     *
+     * Overload:
+     * - `registerItems(items)` → key `'main'`
+     * - `registerItems(id, items)` → key spesifik
      */
-    getNavigation(): NavigationItem[];
+    registerItems(items: NavigationItem[]): void;
+    registerItems(id: string, items: NavigationItem[]): void;
+    /** Remove a named registry entry. */
+    removeItems(id: string): void;
     /**
-     * Delete navigation data dari storage
+     * Computed yang mengembalikan items untuk key tertentu.
+     * Reactive terhadap perubahan registry.
      */
-    deleteNavigation(): void;
-    setActiveItem(id: string | null): void;
-    clearActiveItem(): void;
-    getActiveItem(navigation?: NavigationItem[]): NavigationItem | null;
-    expandItem(id: string): void;
-    collapseItem(id: string): void;
-    toggleItemExpanded(id: string): void;
-    isItemExpanded(id: string): boolean;
-    clearExpandedItems(): void;
-    /**
-     * Flatten navigation array
-     * Convert nested structure menjadi flat array (hanya basic items)
-     * Berguna untuk search, analytics, atau operations lainnya
-     */
-    getFlatNavigation(navigation: NavigationItem[], flatNavigation?: NavigationItem[]): NavigationItem[];
-    /**
-     * Get item by ID dari navigation tree
-     * Recursive search untuk find item dengan id tertentu
-     */
-    getItem(id: string, navigation: NavigationItem[]): NavigationItem | null;
-    /**
-     * Get parent dari item dengan id tertentu
-     * Berguna untuk breadcrumb atau navigation path
-     */
-    getItemParent(id: string, navigation: NavigationItem[], parent: NavigationItem[] | NavigationItem): NavigationItem[] | NavigationItem | null;
+    getItems(id: string): () => readonly NavigationItem[];
+    /** Toggle sidebar collapsed (default ↔ thin). */
+    toggleCollapsed(): void;
+    setCollapsed(value: boolean): void;
+    openMobile(): void;
+    closeMobile(): void;
+    toggleMobile(): void;
+    isGroupOpen(id: string): boolean;
+    toggleGroup(id: string): void;
+    setGroupOpen(id: string, open: boolean): void;
+    /** Apakah id termasuk dalam active trail saat ini. */
+    isActive(id: string | undefined): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
 }
 
-export { NavigationService, getNavigationChildren, getNavigationItemAction, getNavigationItemVisibilityHandler, hasNavigationChildren, isNavigationItemHidden, isNavigationRoutableItem, shouldRenderNavigationItem };
-export type { NavigationActionHandler, NavigationAsideItem, NavigationBasicItem, NavigationBranchItem, NavigationCollapsableItem, NavigationDividerItem, NavigationGroupItem, NavigationItem, NavigationItemBadge, NavigationItemBase, NavigationItemClasses, NavigationItemType, NavigationLeafItem, NavigationRoutableItemBase, NavigationSpacerItem, NavigationStructuredItem, NavigationVisibilityHandler, VerticalNavigationAppearance, VerticalNavigationMode, VerticalNavigationPosition };
+/**
+ * Material Symbols icon renderer.
+ * Menyuntikkan stylesheet font sekali saat dipakai agar consumer tidak perlu
+ * menambahkan `<link>` manual di `index.html`.
+ */
+declare class UiNavIconComponent {
+    private readonly doc;
+    private readonly platformId;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<number | null>;
+    protected readonly fontVariationSettings = "\"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24";
+    constructor();
+    protected readonly classes: _angular_core.Signal<string>;
+    private ensureFontStylesheet;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavIconComponent, "ui-nav-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Concatenate and dedupe Tailwind class names. */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Recursive navigation item renderer (vertical context).
+ *
+ * Menerima item polymorphic dan delegasi ke template sesuai `type`.
+ * Mega dirender sebagai group biasa saat muncul di konteks vertical.
+ */
+declare class UiNavItemComponent {
+    private readonly nav;
+    protected readonly cn: typeof cn;
+    readonly item: _angular_core.InputSignal<NavigationItem>;
+    readonly level: _angular_core.InputSignal<number>;
+    /** Compact / icon-only rendering (sidebar `thin`). */
+    readonly compact: _angular_core.InputSignal<boolean>;
+    protected readonly exactMatch: {
+        readonly exact: true;
+        readonly paths: "exact";
+        readonly queryParams: "exact";
+        readonly fragment: "exact";
+        readonly matrixParams: "exact";
+    };
+    protected readonly inexactMatch: {
+        readonly paths: "subset";
+        readonly queryParams: "subset";
+        readonly fragment: "ignored";
+        readonly matrixParams: "ignored";
+    };
+    protected readonly type: _angular_core.Signal<"aside" | "basic" | "collapsable" | "divider" | "group" | "mega" | "spacer">;
+    protected readonly groupItem: _angular_core.Signal<NavigationGroupItem>;
+    protected readonly collapsableItem: _angular_core.Signal<NavigationCollapsableItem>;
+    protected readonly megaItem: _angular_core.Signal<NavigationMegaItem>;
+    protected readonly asideItem: _angular_core.Signal<NavigationAsideItem>;
+    protected readonly basicItem: _angular_core.Signal<NavigationBasicItem>;
+    protected readonly headingId: _angular_core.Signal<string>;
+    protected isGroupOpen(): boolean;
+    protected isTrailActive(): boolean;
+    protected toggleGroup(): void;
+    protected runAction(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItemComponent, "ui-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Vertical navigation (sidebar) — shadcn-styled.
+ *
+ * Variants:
+ * - `default`: 17.5rem, label + icon
+ * - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)
+ *
+ * Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan
+ * dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka
+ * dikontrol lewat `NavigationService.mobileOpen`.
+ */
+declare class SidebarComponent {
+    private readonly nav;
+    private readonly bp;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly focusTrapFactory;
+    private readonly doc;
+    private readonly destroyRef;
+    readonly items: _angular_core.InputSignal<NavigationItem[]>;
+    /** Registry key di `NavigationService`. Default `'main'`. */
+    readonly navigationId: _angular_core.InputSignal<string>;
+    readonly appearance: _angular_core.InputSignal<SidebarAppearance>;
+    readonly position: _angular_core.InputSignal<SidebarPosition>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly header: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    /** Auto switch ke CDK overlay drawer saat viewport `< md`. */
+    readonly autoMobile: _angular_core.InputSignal<boolean>;
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    readonly autoRegister: _angular_core.InputSignal<boolean>;
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
+    private readonly hovered;
+    private readonly drawerTpl;
+    private drawerRef;
+    private focusTrap;
+    private previouslyFocused;
+    /** True saat viewport `< md` (767.98px). */
+    protected readonly isMobileMedia: _angular_core.Signal<boolean>;
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    protected readonly isExpanded: _angular_core.Signal<boolean>;
+    protected readonly isCompact: _angular_core.Signal<boolean>;
+    constructor();
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly innerClasses: _angular_core.Signal<string>;
+    protected onHoverEnter(): void;
+    protected onHoverLeave(): void;
+    /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
+    protected onHostClick(event: MouseEvent): void;
+    private openDrawer;
+    private closeDrawer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "ui-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-sidebar-header]", "[ui-sidebar-footer]"], true, never>;
+}
+
+/**
+ * Horizontal navigation (topbar) — shadcn-styled.
+ *
+ * Variants:
+ * - `default`: horizontal list; item `collapsable` buka dropdown
+ * - `megamenu`: item `mega` buka panel full-width multi-kolom
+ */
+declare class TopbarComponent {
+    protected readonly nav: NavigationService;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly host;
+    private readonly destroyRef;
+    readonly items: _angular_core.InputSignal<NavigationItem[]>;
+    /** Registry key di `NavigationService`. Default `'main'`. */
+    readonly navigationId: _angular_core.InputSignal<string>;
+    readonly appearance: _angular_core.InputSignal<TopbarAppearance>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly class: _angular_core.InputSignal<string>;
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    readonly autoRegister: _angular_core.InputSignal<boolean>;
+    /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
+    readonly showHamburger: _angular_core.InputSignal<boolean>;
+    readonly hamburgerLabel: _angular_core.InputSignal<string>;
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    protected readonly resolvedItems: _angular_core.Signal<readonly NavigationItem[]>;
+    protected readonly openId: _angular_core.WritableSignal<string | null>;
+    private active;
+    private readonly dropdownTpl;
+    private readonly megaTpl;
+    constructor();
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected asBasic(i: NavigationItem): NavigationBasicItem;
+    protected asCollapsable(i: NavigationItem): NavigationCollapsableItem;
+    protected asGroup(i: NavigationItem): NavigationGroupItem;
+    protected asMega(i: NavigationItem): NavigationMegaItem;
+    protected isItemActive(id: string | undefined): boolean;
+    protected megaColsClass(columns?: number): string;
+    protected toggleDropdown(trigger: HTMLElement, item: NavigationItem): void;
+    protected openDropdown(trigger: HTMLElement, item: NavigationItem): void;
+    protected toggleMega(trigger: HTMLElement, item: NavigationItem): void;
+    protected openMega(trigger: HTMLElement, item: NavigationItem): void;
+    private attach;
+    protected closeAll(): void;
+    /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
+    protected onMenubarKeydown(event: KeyboardEvent): void;
+    /** Arrow-key navigation dalam dropdown/mega panel. */
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    private collectPanelFocusables;
+    private focusFirstInPanel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TopbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TopbarComponent, "ui-topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; "showHamburger": { "alias": "showHamburger"; "required": false; "isSignal": true; }; "hamburgerLabel": { "alias": "hamburgerLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-topbar-start]", "[ui-topbar-end]"], true, never>;
+}
+
+declare const DemoNavigationData: NavigationItem[];
+
+declare const NAVIGATION_VERSION = "0.0.1";
+
+export { DEFAULT_NAVIGATION_ID, DemoNavigationData, NAVIGATION_VERSION, NavigationService, SidebarComponent, TopbarComponent, UiNavIconComponent, UiNavItemComponent };
+export type { NavigationActionHandler, NavigationAsideItem, NavigationBasicItem, NavigationBranchItem, NavigationCollapsableItem, NavigationDividerItem, NavigationGroupItem, NavigationItem, NavigationItemBadge, NavigationItemBase, NavigationItemClasses, NavigationItemType, NavigationLeafItem, NavigationMegaItem, NavigationRoutableItemBase, NavigationSpacerItem, NavigationStructuredItem, NavigationVisibilityHandler, SidebarAppearance, SidebarMode, SidebarPosition, TopbarAppearance, VerticalNavigationAppearance, VerticalNavigationMode, VerticalNavigationPosition };