@ojiepermana/angular 21.2.4 → 21.3.3

package/types/ojiepermana-angular-component-toast.d.ts

@@ -0,0 +1,29 @@
+import { MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
+import * as i0 from '@angular/core';
+
+type ToastVariant = 'default' | 'destructive' | 'success';
+interface ToastOptions {
+    readonly title?: string;
+    readonly description?: string;
+    readonly action?: string;
+    readonly variant?: ToastVariant;
+    readonly durationMs?: number;
+    readonly horizontalPosition?: MatSnackBarConfig['horizontalPosition'];
+    readonly verticalPosition?: MatSnackBarConfig['verticalPosition'];
+}
+/**
+ * Thin, opinionated wrapper over MatSnackBar that applies shadcn styling
+ * via `panelClass: ui-toast-panel` and variant data attributes.
+ */
+declare class ToastService {
+    private readonly snack;
+    show(options: ToastOptions): MatSnackBarRef<unknown>;
+    success(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown>;
+    error(opts: Omit<ToastOptions, 'variant'>): MatSnackBarRef<unknown>;
+    dismiss(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}
+
+export { ToastService };
+export type { ToastOptions, ToastVariant };

package/types/ojiepermana-angular-component-tooltip.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/material/tooltip';
+export { TooltipPosition } from '@angular/material/tooltip';
+
+/**
+ * Shadcn-styled tooltip directive. Thin wrapper around `matTooltip` that
+ * forces the shadcn panel class and sensible defaults.
+ *
+ * @example
+ * <button ui-button [uiTooltip]="'Save changes'" uiTooltipPosition="above">Save</button>
+ */
+declare class TooltipDirective {
+    private readonly tooltip;
+    readonly uiTooltip: i0.InputSignal<string>;
+    constructor();
+    show(): void;
+    hide(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[uiTooltip]", ["uiTooltip"], { "uiTooltip": { "alias": "uiTooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltipPosition": "uiTooltipPosition"; "matTooltipDisabled": "uiTooltipDisabled"; "matTooltipShowDelay": "uiTooltipShowDelay"; "matTooltipHideDelay": "uiTooltipHideDelay"; "matTooltipTouchGestures": "uiTooltipTouchGestures"; }; outputs: {}; }]>;
+}
+
+export { TooltipDirective };

package/types/ojiepermana-angular-component-utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/types/ojiepermana-angular-generator-api.d.ts

@@ -40,7 +40,8 @@ interface SdkTargetConfig {
     /**
      * When `true`, reorganize emitted files into one folder per domain (derived
      * from OpenAPI tags). Models shared by multiple domains live in `shared/`,
-     * domain-owned models live inside each domain. Default `false` (flat layout).
+     * domain-owned models live inside each domain. Defaults to `true` for
+     * `mode: "library"` and `false` otherwise.
      */
     splitByDomain?: boolean;
     /**

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

@@ -0,0 +1,205 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+
+type ThemePanelColor = 'base' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ThemePanelMode = 'light' | 'dark' | 'system';
+type ThemePanelStyle = 'default' | 'sharp' | 'brutal' | 'soft';
+type ThemePanelLayoutMode = 'vertical' | 'horizontal' | 'empty';
+type ThemePanelLayoutWidth = 'full' | 'container' | 'wide';
+interface ThemePanelThemePort {
+    readonly color: Signal<ThemePanelColor>;
+    readonly scheme: Signal<ThemePanelMode>;
+    readonly style: Signal<ThemePanelStyle>;
+    setColor(color: ThemePanelColor): void;
+    setScheme(mode: ThemePanelMode): void;
+    setStyle(style: ThemePanelStyle): void;
+}
+interface ThemePanelLayoutPort {
+    readonly mode: Signal<ThemePanelLayoutMode>;
+    readonly width: Signal<ThemePanelLayoutWidth>;
+    setMode(mode: ThemePanelLayoutMode): void;
+    setWidth(width: ThemePanelLayoutWidth): void;
+}
+declare const THEME_PANEL_THEME_PORT: InjectionToken<ThemePanelThemePort>;
+declare const THEME_PANEL_LAYOUT_PORT: InjectionToken<ThemePanelLayoutPort>;
+type ThemePanelIconName = 'sun' | 'moon' | 'system' | 'default-style' | 'sharp-style' | 'brutal-style' | 'soft-style' | 'vertical-layout' | 'horizontal-layout' | 'empty-layout' | 'full-width' | 'container-width' | 'wide-width';
+declare class ThemePanelComponent {
+    private readonly sanitizer;
+    private readonly themePort;
+    private readonly layoutPort;
+    readonly connected: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly userSubtitle: _angular_core.InputSignal<string>;
+    readonly userInitials: _angular_core.InputSignal<string>;
+    readonly themeColor: _angular_core.InputSignal<ThemePanelColor>;
+    readonly themeMode: _angular_core.InputSignal<ThemePanelMode>;
+    readonly themeStyle: _angular_core.InputSignal<ThemePanelStyle>;
+    readonly layoutMode: _angular_core.InputSignal<ThemePanelLayoutMode>;
+    readonly layoutWidth: _angular_core.InputSignal<ThemePanelLayoutWidth>;
+    readonly themeColorChange: _angular_core.OutputEmitterRef<ThemePanelColor>;
+    readonly themeModeChange: _angular_core.OutputEmitterRef<ThemePanelMode>;
+    readonly themeStyleChange: _angular_core.OutputEmitterRef<ThemePanelStyle>;
+    readonly layoutModeChange: _angular_core.OutputEmitterRef<ThemePanelLayoutMode>;
+    readonly layoutWidthChange: _angular_core.OutputEmitterRef<ThemePanelLayoutWidth>;
+    protected readonly currentThemeColor: _angular_core.WritableSignal<ThemePanelColor>;
+    protected readonly currentThemeMode: _angular_core.WritableSignal<ThemePanelMode>;
+    protected readonly currentThemeStyle: _angular_core.WritableSignal<ThemePanelStyle>;
+    protected readonly currentLayoutMode: _angular_core.WritableSignal<ThemePanelLayoutMode>;
+    protected readonly currentLayoutWidth: _angular_core.WritableSignal<ThemePanelLayoutWidth>;
+    protected readonly themeColorOptions: readonly [{
+        readonly value: "base";
+        readonly label: "Base";
+        readonly swatchClass: "bg-zinc-800";
+    }, {
+        readonly value: "red";
+        readonly label: "Red";
+        readonly swatchClass: "bg-red-500";
+    }, {
+        readonly value: "orange";
+        readonly label: "Orange";
+        readonly swatchClass: "bg-orange-500";
+    }, {
+        readonly value: "amber";
+        readonly label: "Amber";
+        readonly swatchClass: "bg-amber-400";
+    }, {
+        readonly value: "yellow";
+        readonly label: "Yellow";
+        readonly swatchClass: "bg-yellow-400";
+    }, {
+        readonly value: "lime";
+        readonly label: "Lime";
+        readonly swatchClass: "bg-lime-400";
+    }, {
+        readonly value: "green";
+        readonly label: "Green";
+        readonly swatchClass: "bg-green-600";
+    }, {
+        readonly value: "emerald";
+        readonly label: "Emerald";
+        readonly swatchClass: "bg-emerald-600";
+    }, {
+        readonly value: "teal";
+        readonly label: "Teal";
+        readonly swatchClass: "bg-teal-600";
+    }, {
+        readonly value: "cyan";
+        readonly label: "Cyan";
+        readonly swatchClass: "bg-cyan-600";
+    }, {
+        readonly value: "sky";
+        readonly label: "Sky";
+        readonly swatchClass: "bg-sky-600";
+    }, {
+        readonly value: "blue";
+        readonly label: "Blue";
+        readonly swatchClass: "bg-blue-500";
+    }, {
+        readonly value: "indigo";
+        readonly label: "Indigo";
+        readonly swatchClass: "bg-indigo-500";
+    }, {
+        readonly value: "violet";
+        readonly label: "Violet";
+        readonly swatchClass: "bg-violet-500";
+    }, {
+        readonly value: "purple";
+        readonly label: "Purple";
+        readonly swatchClass: "bg-purple-500";
+    }, {
+        readonly value: "fuchsia";
+        readonly label: "Fuchsia";
+        readonly swatchClass: "bg-fuchsia-600";
+    }, {
+        readonly value: "pink";
+        readonly label: "Pink";
+        readonly swatchClass: "bg-pink-600";
+    }, {
+        readonly value: "rose";
+        readonly label: "Rose";
+        readonly swatchClass: "bg-rose-500";
+    }];
+    protected readonly themeModeOptions: readonly [{
+        readonly value: "light";
+        readonly label: "Light";
+        readonly icon: "sun";
+    }, {
+        readonly value: "dark";
+        readonly label: "Dark";
+        readonly icon: "moon";
+    }, {
+        readonly value: "system";
+        readonly label: "System";
+        readonly icon: "system";
+    }];
+    protected readonly themeStyleOptions: readonly [{
+        readonly value: "default";
+        readonly label: "Default";
+        readonly icon: "default-style";
+    }, {
+        readonly value: "sharp";
+        readonly label: "Sharp";
+        readonly icon: "sharp-style";
+    }, {
+        readonly value: "brutal";
+        readonly label: "Brutal";
+        readonly icon: "brutal-style";
+    }, {
+        readonly value: "soft";
+        readonly label: "Soft";
+        readonly icon: "soft-style";
+    }];
+    protected readonly layoutModeOptions: readonly [{
+        readonly value: "vertical";
+        readonly label: "Vertical";
+        readonly icon: "vertical-layout";
+    }, {
+        readonly value: "horizontal";
+        readonly label: "Horizontal";
+        readonly icon: "horizontal-layout";
+    }, {
+        readonly value: "empty";
+        readonly label: "Empty";
+        readonly icon: "empty-layout";
+    }];
+    protected readonly layoutWidthOptions: readonly [{
+        readonly value: "full";
+        readonly label: "Full";
+        readonly icon: "full-width";
+    }, {
+        readonly value: "container";
+        readonly label: "Container";
+        readonly icon: "container-width";
+    }, {
+        readonly value: "wide";
+        readonly label: "Wide";
+        readonly icon: "wide-width";
+    }];
+    protected readonly hostClasses: Signal<string>;
+    protected readonly hasUserHeader: Signal<boolean>;
+    protected readonly resolvedUserInitials: Signal<string>;
+    protected readonly currentThemeColorLabel: Signal<"Base" | "Red" | "Orange" | "Amber" | "Yellow" | "Lime" | "Green" | "Emerald" | "Teal" | "Cyan" | "Sky" | "Blue" | "Indigo" | "Violet" | "Purple" | "Fuchsia" | "Pink" | "Rose" | "">;
+    constructor();
+    protected setThemeColor(color: ThemePanelColor): void;
+    protected setThemeMode(mode: ThemePanelMode): void;
+    protected setThemeStyle(style: ThemePanelStyle): void;
+    protected setLayoutMode(mode: ThemePanelLayoutMode): void;
+    protected setLayoutWidth(width: ThemePanelLayoutWidth): void;
+    protected sectionEyebrowClasses(): string;
+    protected segmentedOptionClasses(active: boolean): string;
+    protected swatchButtonClasses(active: boolean): string;
+    protected optionIconClasses(active: boolean): string;
+    protected colorSwatchClasses(swatchClass: string | undefined, isActive: boolean): string;
+    protected iconSvg(name: ThemePanelIconName): SafeHtml;
+    private rawIconSvg;
+    private toInitials;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePanelComponent, "ui-theme-panel", never, { "connected": { "alias": "connected"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": false; "isSignal": true; }; "themeColor": { "alias": "themeColor"; "required": false; "isSignal": true; }; "themeMode": { "alias": "themeMode"; "required": false; "isSignal": true; }; "themeStyle": { "alias": "themeStyle"; "required": false; "isSignal": true; }; "layoutMode": { "alias": "layoutMode"; "required": false; "isSignal": true; }; "layoutWidth": { "alias": "layoutWidth"; "required": false; "isSignal": true; }; }, { "themeColorChange": "themeColorChange"; "themeModeChange": "themeModeChange"; "themeStyleChange": "themeStyleChange"; "layoutModeChange": "layoutModeChange"; "layoutWidthChange": "layoutWidthChange"; }, never, never, true, never>;
+}
+
+export { THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, ThemePanelComponent };
+export type { ThemePanelColor, ThemePanelLayoutMode, ThemePanelLayoutPort, ThemePanelLayoutWidth, ThemePanelMode, ThemePanelStyle, ThemePanelThemePort };

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

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+
+/**
+ * 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: i0.ɵɵFactoryDeclaration<EmptyLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
+}
+
+export { EmptyLayoutComponent };

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

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+import { TopbarAppearance } from '@ojiepermana/angular/navigation/types';
+
+/**
+ * Horizontal layout — themed topbar + 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" | "container" | "wide">;
+    protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
+    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 frameClasses: _angular_core.Signal<string>;
+    protected readonly mainClasses: _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],[topbar-start]", "[ui-layout-profile],[topbar-end]"], true, never>;
+}
+
+export { HorizontalLayoutComponent };

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

@@ -0,0 +1,6 @@
+import { EnvironmentProviders } from '@angular/core';
+import { MaterialLayoutConfig } from '@ojiepermana/angular/layout/token';
+
+declare function provideMaterialLayout(config?: MaterialLayoutConfig): EnvironmentProviders;
+
+export { provideMaterialLayout };

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

@@ -0,0 +1,25 @@
+import * as _angular_core from '@angular/core';
+import { LayoutMode, LayoutWidth } from '@ojiepermana/angular/layout/token';
+
+declare class LayoutService {
+    private readonly document;
+    private readonly config;
+    private readonly _mode;
+    private readonly _width;
+    readonly mode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    readonly width: _angular_core.Signal<"full" | "container" | "wide">;
+    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>;
+}
+
+export { LayoutService };

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

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class ShellPagesComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShellPagesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShellPagesComponent, "shell-pages", never, {}, {}, never, ["[shell-pages-header]", "[shell-pages-main]", "[shell-pages-footer]"], true, never>;
+}
+
+export { ShellPagesComponent };

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

@@ -0,0 +1,13 @@
+import * as _angular_core from '@angular/core';
+import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component/popover';
+
+declare class LayoutProfilePopoverDefaultsDirective implements PopoverTriggerDefaults {
+    private readonly layout;
+    readonly side: _angular_core.Signal<PopoverSide>;
+    readonly align: _angular_core.Signal<PopoverAlign>;
+    readonly sideOffset: _angular_core.Signal<-20 | 12>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutProfilePopoverDefaultsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LayoutProfilePopoverDefaultsDirective, "[ui-layout-profile][uiPopoverTrigger]", never, {}, {}, never, never, true, never>;
+}
+
+export { LayoutProfilePopoverDefaultsDirective };

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

@@ -0,0 +1,36 @@
+import { InjectionToken } from '@angular/core';
+
+declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
+type LayoutMode = (typeof LAYOUT_MODES)[number];
+declare const LAYOUT_WIDTHS: readonly ["full", "container", "wide"];
+type LayoutWidth = (typeof LAYOUT_WIDTHS)[number];
+/** @deprecated Use `container` instead. */
+type LegacyLayoutWidth = 'fixed';
+type ConfiguredLayoutWidth = LayoutWidth | LegacyLayoutWidth;
+interface MaterialLayoutConfig {
+    /** Initial layout mode. */
+    readonly mode?: LayoutMode;
+    /** Initial layout width. */
+    readonly width?: ConfiguredLayoutWidth;
+    /** @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;
+}
+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 function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null;
+
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, LAYOUT_MODES, LAYOUT_WIDTHS, MATERIAL_LAYOUT_CONFIG, isLayoutMode, isLayoutWidth, normalizeLayoutWidth };
+export type { ConfiguredLayoutWidth, LayoutMode, LayoutWidth, LegacyLayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };

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

@@ -0,0 +1,38 @@
+import * as _angular_core from '@angular/core';
+import { SidebarAppearance, SidebarPosition, SidebarMode } from '@ojiepermana/angular/navigation/types';
+
+/**
+ * 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>
+ *   <a ui-layout-brand>Brand</a>
+ *   <button ui-layout-profile type="button">Profile</button>
+ * </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" | "container" | "wide">;
+    protected readonly themeStyle: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
+    protected readonly isConstrainedWidth: _angular_core.Signal<boolean>;
+    protected readonly isWideWidth: _angular_core.Signal<boolean>;
+    protected readonly shellBorderWidth: _angular_core.Signal<"var(--border-width)" | null>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly frameClasses: _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, ["[ui-layout-brand],[sidebar-header]", "[ui-layout-profile],[sidebar-footer]"], true, never>;
+}
+
+export { VerticalLayoutComponent };

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

@@ -1,7 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders } from '@angular/core';
-import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation';
-import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component';
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation/types';
+import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component/popover';
+import { MaterialLayoutConfig as MaterialLayoutConfig$1, LayoutMode as LayoutMode$1, LayoutWidth as LayoutWidth$1 } from '@ojiepermana/angular/layout/token';
 
 /**
  * Vertical layout — sidebar + main (scrollable).
@@ -93,6 +94,29 @@ declare class ShellPagesComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShellPagesComponent, "shell-pages", never, {}, {}, never, ["[shell-pages-header]", "[shell-pages-main]", "[shell-pages-footer]"], true, never>;
 }
 
+declare function provideMaterialLayout(config?: MaterialLayoutConfig$1): EnvironmentProviders;
+
+declare class LayoutService {
+    private readonly document;
+    private readonly config;
+    private readonly _mode;
+    private readonly _width;
+    readonly mode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    readonly width: _angular_core.Signal<"full" | "container" | "wide">;
+    constructor();
+    setMode(mode: LayoutMode$1): void;
+    toggleMode(): void;
+    setWidth(width: LayoutWidth$1): 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 const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
 type LayoutMode = (typeof LAYOUT_MODES)[number];
 declare const LAYOUT_WIDTHS: readonly ["full", "container", "wide"];
@@ -125,29 +149,6 @@ declare function isLayoutMode(value: string | null | undefined): value is Layout
 declare function isLayoutWidth(value: string | null | undefined): value is LayoutWidth;
 declare function normalizeLayoutWidth(value: string | null | undefined): LayoutWidth | null;
 
-declare class LayoutService {
-    private readonly document;
-    private readonly config;
-    private readonly _mode;
-    private readonly _width;
-    readonly mode: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
-    readonly width: _angular_core.Signal<"full" | "container" | "wide">;
-    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 provideMaterialLayout(config?: MaterialLayoutConfig): EnvironmentProviders;
-
 declare class LayoutProfilePopoverDefaultsDirective implements PopoverTriggerDefaults {
     private readonly layout;
     readonly side: _angular_core.Signal<PopoverSide>;

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

@@ -0,0 +1,5 @@
+import { NavigationItem } from '@ojiepermana/angular/navigation/types';
+
+declare const DemoNavigationData: NavigationItem[];
+
+export { DemoNavigationData };

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

@@ -0,0 +1,17 @@
+import * as _angular_core from '@angular/core';
+
+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>;
+}
+
+export { UiNavIconComponent };

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

@@ -0,0 +1,54 @@
+import * as _angular_core from '@angular/core';
+import { NavigationItem, NavigationGroupItem, NavigationCollapsableItem, NavigationMegaItem, NavigationAsideItem, NavigationBasicItem } from '@ojiepermana/angular/navigation/types';
+import { ClassValue } from 'clsx';
+
+/** 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>;
+    /** True when this branch sits inside a collapsable rail and can draw a connector back to it. */
+    readonly railConnector: _angular_core.InputSignal<boolean>;
+    protected readonly railConnectorDotClasses = "pointer-events-none absolute -left-[11px] top-1/2 z-10 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/80";
+    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" | "collapsable" | "group" | "mega" | "basic" | "divider" | "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 railConnectorClasses(active: boolean): string;
+    protected showRailConnector(active: boolean): 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; }; "railConnector": { "alias": "railConnector"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { UiNavItemComponent };