@ojiepermana/angular 21.3.0 → 21.3.3

package/types/{ojiepermana-angular-ui-component-chart.d.ts → ojiepermana-angular-component-chart.d.ts}

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { Type, Signal, TemplateRef } from '@angular/core';
-import * as _ojiepermana_angular_ui_component_chart from '@ojiepermana/angular/component/chart';
+import * as _ojiepermana_angular_component_chart from '@ojiepermana/angular/component/chart';
 import { ScaleBand, ScaleLinear, scaleBand, scaleLinear, scalePoint, ScalePoint } from 'd3-scale';
 
 /**
@@ -75,7 +75,7 @@ declare class ChartContext {
     /** Stable instance id — used in the `data-chart` attribute and CSS scope. */
     readonly id: _angular_core.WritableSignal<string>;
     /** User-provided series config. */
-    readonly config: _angular_core.WritableSignal<Readonly<Record<string, _ojiepermana_angular_ui_component_chart.ChartSeriesConfig>>>;
+    readonly config: _angular_core.WritableSignal<Readonly<Record<string, _ojiepermana_angular_component_chart.ChartSeriesConfig>>>;
     /** Measured render-area dimensions (ResizeObserver-driven). */
     readonly dimensions: _angular_core.WritableSignal<ChartDimensions>;
     /** Currently highlighted data point (tooltip / crosshair). */
@@ -135,7 +135,7 @@ declare class ChartContainer {
     private readonly platformId;
     private readonly destroyRef;
     /** Series configuration. Required for color / label resolution. */
-    readonly config: _angular_core.InputSignal<Readonly<Record<string, _ojiepermana_angular_ui_component_chart.ChartSeriesConfig>>>;
+    readonly config: _angular_core.InputSignal<Readonly<Record<string, _ojiepermana_angular_component_chart.ChartSeriesConfig>>>;
     /**
      * Tailwind aspect-ratio utility for the container. Defaults to `aspect-video`
      * for cartesian charts; override with `aspect-square` for radial / pie layouts.
@@ -279,7 +279,7 @@ declare class ChartAxisY {
 declare class ChartGrid {
     private readonly ctx;
     readonly tickCount: _angular_core.InputSignal<number>;
-    protected readonly ticks: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.ChartTick[]>;
+    protected readonly ticks: _angular_core.Signal<_ojiepermana_angular_component_chart.ChartTick[]>;
     protected readonly line: (offset: number) => {
         x1: number;
         x2: number;
@@ -565,7 +565,7 @@ declare class BarChart {
     readonly barClick: _angular_core.OutputEmitterRef<BarClickEvent>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.BarLayoutResult>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.BarLayoutResult>;
     protected readonly bars: _angular_core.Signal<readonly BarRect[]>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
@@ -669,7 +669,7 @@ declare class LineChart {
     protected readonly innerHeight: _angular_core.Signal<number>;
     protected readonly visibleStartIndex: _angular_core.Signal<number>;
     protected readonly visibleData: _angular_core.Signal<readonly Readonly<Record<string, unknown>>[]>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.LineLayoutResult>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.LineLayoutResult>;
     protected readonly series: _angular_core.Signal<readonly LineSeriesPath[]>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
@@ -741,7 +741,7 @@ declare class AreaChart {
     protected readonly innerHeight: _angular_core.Signal<number>;
     protected readonly visibleStartIndex: _angular_core.Signal<number>;
     protected readonly visibleData: _angular_core.Signal<readonly Readonly<Record<string, unknown>>[]>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.AreaLayoutResult>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.AreaLayoutResult>;
     protected readonly series: _angular_core.Signal<readonly LineSeriesPath[]>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
@@ -830,7 +830,7 @@ declare class PieChart {
     readonly sliceClick: _angular_core.OutputEmitterRef<PieSliceClickEvent>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.PieLayout>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.PieLayout>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
     protected readonly ariaSummary: _angular_core.Signal<string>;
@@ -909,7 +909,7 @@ declare class RadarChart {
     readonly linesOnly: _angular_core.InputSignal<boolean>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.RadarLayout>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.RadarLayout>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
     protected readonly ariaSummary: _angular_core.Signal<string>;
@@ -988,7 +988,7 @@ declare class RadialChart {
     readonly barClick: _angular_core.OutputEmitterRef<RadialBarClickEvent>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.RadialLayout>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.RadialLayout>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
     protected readonly ariaSummary: _angular_core.Signal<string>;
@@ -1073,12 +1073,12 @@ declare class ScatterChart {
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
     protected readonly resolvedDomains: _angular_core.Signal<{
-        xDomain: _ojiepermana_angular_ui_component_chart.NumericDomain;
-        yDomain: _ojiepermana_angular_ui_component_chart.NumericDomain;
+        xDomain: _ojiepermana_angular_component_chart.NumericDomain;
+        yDomain: _ojiepermana_angular_component_chart.NumericDomain;
     }>;
-    protected readonly currentXDomain: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.NumericDomain>;
-    protected readonly currentYDomain: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.NumericDomain>;
-    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_ui_component_chart.ScatterLayout>;
+    protected readonly currentXDomain: _angular_core.Signal<_ojiepermana_angular_component_chart.NumericDomain>;
+    protected readonly currentYDomain: _angular_core.Signal<_ojiepermana_angular_component_chart.NumericDomain>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_component_chart.ScatterLayout>;
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
     protected readonly clipPathId: _angular_core.Signal<string>;

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-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 { 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-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 };

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

@@ -0,0 +1,77 @@
+import * as _angular_core from '@angular/core';
+import { NavigationItem, SidebarAppearance } from '@ojiepermana/angular/navigation/types';
+
+/** Default registry key used when no id is specified. */
+declare const DEFAULT_NAVIGATION_ID = "main";
+/**
+ * Signal-based global state untuk navigation (sidebar/topbar).
+ *
+ * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
+ * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
+ */
+declare class NavigationService {
+    private readonly doc;
+    private readonly router;
+    private readonly destroyRef;
+    private readonly persistedSidebarCollapsed;
+    /** Internal version counter — incremented on every registry mutation. */
+    private readonly _version;
+    /** Internal map of registered navigation trees. */
+    private readonly _registry;
+    private readonly _collapsed;
+    private readonly _hasStoredSidebarCollapse;
+    /**
+     * Backward-compatible accessor — returns items for the default (`'main'`) key.
+     * Prefer `getItems(id)` when working with named registries.
+     */
+    readonly items: _angular_core.Signal<readonly NavigationItem[]>;
+    /** Sidebar appearance preference (`default` or `thin`). */
+    readonly sidebarAppearance: _angular_core.Signal<SidebarAppearance>;
+    readonly hasStoredSidebarCollapse: _angular_core.Signal<boolean>;
+    /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
+    readonly collapsed: _angular_core.Signal<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();
+    /**
+     * Register items di registry.
+     *
+     * Overload:
+     * - `registerItems(items)` → key `'main'`
+     * - `registerItems(id, items)` → key spesifik
+     */
+    registerItems(items: NavigationItem[]): void;
+    registerItems(id: string, items: NavigationItem[]): void;
+    /** Remove a named registry entry. */
+    removeItems(id: string): void;
+    /**
+     * Computed yang mengembalikan items untuk key tertentu.
+     * Reactive terhadap perubahan registry.
+     */
+    getItems(id: string): () => readonly NavigationItem[];
+    setSidebarAppearance(value: SidebarAppearance): void;
+    toggleSidebarAppearance(currentAppearance?: SidebarAppearance): void;
+    /** 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;
+    private readPersistedSidebarCollapsed;
+    private persistSidebarCollapsed;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavigationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NavigationService>;
+}
+
+export { DEFAULT_NAVIGATION_ID, NavigationService };

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

@@ -0,0 +1,75 @@
+import * as _angular_core from '@angular/core';
+import { NavigationItem, SidebarAppearance, SidebarBorderSource, SidebarPosition } from '@ojiepermana/angular/navigation/types';
+export { SidebarAppearance, SidebarBorderSource, SidebarMode, SidebarPosition } from '@ojiepermana/angular/navigation/types';
+
+/**
+ * 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>;
+    /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */
+    readonly borderSource: _angular_core.InputSignal<SidebarBorderSource>;
+    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 suppressHoverUntilLeave;
+    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 resolvedCollapsed: _angular_core.Signal<boolean>;
+    protected readonly resolvedAppearance: _angular_core.Signal<SidebarAppearance>;
+    protected readonly hoverActive: _angular_core.Signal<boolean>;
+    protected readonly isExpanded: _angular_core.Signal<boolean>;
+    protected readonly isCompact: _angular_core.Signal<boolean>;
+    protected readonly toggleButtonLabel: _angular_core.Signal<"Expand sidebar" | "Collapse sidebar">;
+    constructor();
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected readonly headerClasses: _angular_core.Signal<string>;
+    protected readonly headerSlotClasses: _angular_core.Signal<string>;
+    protected readonly navClasses: _angular_core.Signal<string>;
+    protected readonly scrollViewportClasses: _angular_core.Signal<string>;
+    protected readonly footerClasses: _angular_core.Signal<string>;
+    protected readonly footerSlotClasses: _angular_core.Signal<string>;
+    protected readonly innerClasses: _angular_core.Signal<string>;
+    protected onHoverEnter(): void;
+    protected onHoverLeave(): void;
+    protected toggleAppearance(event: MouseEvent): 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, "sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "borderSource": { "alias": "borderSource"; "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, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+}
+
+export { SidebarComponent };