@ojiepermana/angular-theme 22.0.36 → 22.0.43

package/styles/css/color/teal.css

@@ -15,6 +15,7 @@
     --muted-foreground: 173 15% 40%;
     --border: 173 23% 87%;
     --input: 173 23% 87%;
+    --layout-grid-line: 173 23% 82%;
     --primary: 173 75% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 173 45% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 173 15% 64%;
     --border: 173 19% 18%;
     --input: 173 19% 18%;
+    --layout-grid-line: 173 19% 23%;
     --primary: 173 75% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 173 38% 18%;

package/styles/css/color/violet.css

@@ -15,6 +15,7 @@
     --muted-foreground: 258 17% 40%;
     --border: 258 26% 87%;
     --input: 258 26% 87%;
+    --layout-grid-line: 258 26% 82%;
     --primary: 258 86% 48%;
     --primary-foreground: 0 0% 100%;
     --accent: 258 52% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 258 17% 64%;
     --border: 258 22% 18%;
     --input: 258 22% 18%;
+    --layout-grid-line: 258 22% 23%;
     --primary: 258 86% 58%;
     --primary-foreground: 0 0% 100%;
     --accent: 258 43% 18%;

package/styles/css/color/yellow.css

@@ -15,6 +15,7 @@
     --muted-foreground: 48 19% 40%;
     --border: 48 29% 87%;
     --input: 48 29% 87%;
+    --layout-grid-line: 48 29% 82%;
     --primary: 48 96% 48%;
     --primary-foreground: 0 0% 12%;
     --accent: 48 58% 94%;
@@ -38,6 +39,7 @@
     --muted-foreground: 48 19% 64%;
     --border: 48 24% 18%;
     --input: 48 24% 18%;
+    --layout-grid-line: 48 24% 23%;
     --primary: 48 96% 58%;
     --primary-foreground: 0 0% 10%;
     --accent: 48 48% 18%;

package/styles/css/neutral/gray.css

@@ -15,6 +15,7 @@
     --muted-foreground: 220 9% 42%;
     --border: 220 9% 88%;
     --input: 220 9% 88%;
+    --layout-grid-line: 220 9% 82%;
   }
 
   html[theme-neutral='gray'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 220 6% 64%;
     --border: 220 9% 17%;
     --input: 220 9% 17%;
+    --layout-grid-line: 220 9% 22%;
   }
 }

package/styles/css/neutral/mauve.css

@@ -15,6 +15,7 @@
     --muted-foreground: 280 6% 42%;
     --border: 280 6% 88%;
     --input: 280 6% 88%;
+    --layout-grid-line: 280 6% 82%;
   }
 
   html[theme-neutral='mauve'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 280 4% 64%;
     --border: 280 6% 17%;
     --input: 280 6% 17%;
+    --layout-grid-line: 280 6% 22%;
   }
 }

package/styles/css/neutral/mist.css

@@ -15,6 +15,7 @@
     --muted-foreground: 200 14% 42%;
     --border: 200 14% 88%;
     --input: 200 14% 88%;
+    --layout-grid-line: 200 14% 82%;
   }
 
   html[theme-neutral='mist'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 200 10% 64%;
     --border: 200 14% 17%;
     --input: 200 14% 17%;
+    --layout-grid-line: 200 14% 22%;
   }
 }

package/styles/css/neutral/neutral.css

@@ -15,6 +15,7 @@
     --muted-foreground: 0 0% 42%;
     --border: 0 0% 88%;
     --input: 0 0% 88%;
+    --layout-grid-line: 0 0% 82%;
   }
 
   html[theme-neutral='neutral'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 0 0% 64%;
     --border: 0 0% 17%;
     --input: 0 0% 17%;
+    --layout-grid-line: 0 0% 22%;
   }
 }

package/styles/css/neutral/olive.css

@@ -15,6 +15,7 @@
     --muted-foreground: 80 8% 42%;
     --border: 80 8% 88%;
     --input: 80 8% 88%;
+    --layout-grid-line: 80 8% 82%;
   }
 
   html[theme-neutral='olive'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 80 6% 64%;
     --border: 80 8% 17%;
     --input: 80 8% 17%;
+    --layout-grid-line: 80 8% 22%;
   }
 }

package/styles/css/neutral/slate.css

@@ -15,6 +15,7 @@
     --muted-foreground: 215 16% 42%;
     --border: 215 16% 88%;
     --input: 215 16% 88%;
+    --layout-grid-line: 215 16% 82%;
   }
 
   html[theme-neutral='slate'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 215 11% 64%;
     --border: 215 16% 17%;
     --input: 215 16% 17%;
+    --layout-grid-line: 215 16% 22%;
   }
 }

package/styles/css/neutral/stone.css

@@ -15,6 +15,7 @@
     --muted-foreground: 30 6% 42%;
     --border: 30 6% 88%;
     --input: 30 6% 88%;
+    --layout-grid-line: 30 6% 82%;
   }
 
   html[theme-neutral='stone'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 30 4% 64%;
     --border: 30 6% 17%;
     --input: 30 6% 17%;
+    --layout-grid-line: 30 6% 22%;
   }
 }

package/styles/css/neutral/taupe.css

@@ -15,6 +15,7 @@
     --muted-foreground: 28 10% 42%;
     --border: 28 10% 88%;
     --input: 28 10% 88%;
+    --layout-grid-line: 28 10% 82%;
   }
 
   html[theme-neutral='taupe'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 28 7% 64%;
     --border: 28 10% 17%;
     --input: 28 10% 17%;
+    --layout-grid-line: 28 10% 22%;
   }
 }

package/styles/css/neutral/zinc.css

@@ -15,6 +15,7 @@
     --muted-foreground: 240 5% 42%;
     --border: 240 5% 88%;
     --input: 240 5% 88%;
+    --layout-grid-line: 240 5% 82%;
   }
 
   html[theme-neutral='zinc'][data-mode='dark'] {
@@ -30,5 +31,6 @@
     --muted-foreground: 240 4% 64%;
     --border: 240 5% 17%;
     --input: 240 5% 17%;
+    --layout-grid-line: 240 5% 22%;
   }
 }

package/styles/css/space/index.css

@@ -9,16 +9,19 @@
  * html[theme-space='x'] (0,1,1) beats the :root default (0,1,0).
  */
 @layer tokens {
+  /* Even ~16% steps around the 0.25rem baseline so each preset is a perceptible,
+   * proportional change rather than an uneven nudge. normal stays the Tailwind
+   * default (no-op). */
   html[theme-space='compact'] {
-    --spacing-base: 0.2rem;
+    --spacing-base: 0.215rem;
   }
   html[theme-space='normal'] {
     --spacing-base: 0.25rem;
   }
   html[theme-space='relaxed'] {
-    --spacing-base: 0.28rem;
+    --spacing-base: 0.29rem;
   }
   html[theme-space='spacious'] {
-    --spacing-base: 0.32rem;
+    --spacing-base: 0.33rem;
   }
 }

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

@@ -11,7 +11,7 @@ declare class LayoutService {
     private readonly typeState;
     private readonly appearanceState;
     private readonly widthState;
-    readonly surface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    readonly surface: _angular_core.Signal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     readonly type: _angular_core.Signal<"vertical" | "horizontal" | "empty" | "fluid">;
     readonly appearance: _angular_core.Signal<"flat" | "border-rail">;
     readonly width: _angular_core.Signal<"fluid" | "full" | "wide" | "container">;

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

@@ -1,7 +1,7 @@
 import { Signal } from '@angular/core';
 
 declare const LAYOUT_TYPES: readonly ["vertical", "horizontal", "empty", "fluid"];
-declare const LAYOUT_SURFACES: readonly ["flat", "grid", "honeycome", "line-vertical", "line-horizontal"];
+declare const LAYOUT_SURFACES: readonly ["flat", "grid", "grid-line", "honeycomb", "matrix", "circuit", "line-vertical", "line-horizontal"];
 declare const LAYOUT_APPEARANCES: readonly ["flat", "border-rail"];
 declare const LAYOUT_WIDTHS: readonly ["full", "wide", "container", "fluid"];
 type LayoutType = (typeof LAYOUT_TYPES)[number];

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

@@ -22,6 +22,22 @@ interface UserIdentity {
     readonly email: string;
 }
 
+/**
+ * Registry identitas brand/user yang dipublikasikan shell (mis. `LayoutWrapperDefault`).
+ * Surface lain — seperti apps-launcher di `Page` — membacanya agar menampilkan brand/user
+ * yang sama dengan flyout nav tanpa menerima input langsung.
+ */
+declare class LayoutIdentityService {
+    private readonly brandState;
+    private readonly userState;
+    readonly brand: _angular_core.Signal<BrandIdentity | null>;
+    readonly user: _angular_core.Signal<UserIdentity | null>;
+    setBrand(brand: BrandIdentity | null): void;
+    setUser(user: UserIdentity | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutIdentityService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutIdentityService>;
+}
+
 /**
  * Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
  *
@@ -69,10 +85,15 @@ declare class LayoutUser {
 declare class LayoutNavSidebar {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     readonly user: _angular_core.InputSignal<UserIdentity>;
-    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
     /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
     protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
+    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
+    protected readonly headerClass: _angular_core.Signal<"border-b-[1.5px] border-border" | "">;
+    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
+    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-[1.5px] border-border" | "px-3">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavSidebar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -84,10 +105,15 @@ declare class LayoutNavSidebar {
 declare class LayoutNavDockbar {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     readonly user: _angular_core.InputSignal<UserIdentity>;
-    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
     /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
     protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
+    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
+    protected readonly headerClass: _angular_core.Signal<"border-b-[1.5px] border-border" | "">;
+    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
+    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-[1.5px] border-border" | "px-3">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavDockbar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -152,7 +178,7 @@ type NavKind = NavigationType | 'brand';
  */
 declare class LayoutWrapperDefault {
     /** Surface latar shell (mis. `grid`, `flat`). */
-    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     /** Appearance shell & nav (`flat | border-rail`). */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     /** Lebar frame (`full`, `container`, dst.). */
@@ -167,17 +193,24 @@ declare class LayoutWrapperDefault {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     /** Identitas user. */
     readonly user: _angular_core.InputSignal<UserIdentity>;
+    private readonly identity;
+    constructor();
+    /**
+     * Kelas `<LayoutContent>` yang diatur consumer (mis. padding). Default kosong —
+     * library tidak lagi memaksa `p-6`; consumer/`<Page>` yang menentukan spacing.
+     */
+    readonly contentClassInput: _angular_core.InputSignal<string>;
     /** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
     protected readonly effectiveLayoutType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
     /** Tipe nav di dalam `#body`: `empty`/`fluid` → `brand` (header-only); selain itu `nav-type`. */
     protected readonly navKind: _angular_core.Signal<NavKind>;
     /** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
     protected readonly navClass: _angular_core.Signal<"w-full" | "h-full">;
-    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
-    protected readonly contentClass: _angular_core.Signal<"w-full max-w-3xl p-6" | "p-6">;
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; padding diserahkan ke consumer. */
+    protected readonly contentClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutWrapperDefault, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "contentClassInput": { "alias": "content-class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
+export { LayoutBrand, LayoutIdentityService, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
 export type { BrandIdentity, UserIdentity };

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

@@ -6,7 +6,7 @@ export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEA
 
 declare class LayoutComponent {
     protected readonly layout: LayoutService;
-    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal" | null>;
+    readonly surface: _angular_core.InputSignal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal" | null>;
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail" | null>;
     readonly layoutAppearanceAttribute: _angular_core.InputSignal<"flat" | "border-rail" | null>;
     readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | "fluid" | null>;
@@ -17,12 +17,14 @@ declare class LayoutComponent {
     readonly type: _angular_core.InputSignal<"fluid" | "vertical" | "horizontal" | "empty" | null>;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly appearanceInput: _angular_core.Signal<"flat" | "border-rail" | null>;
-    protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
+    protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "grid-line" | "honeycomb" | "matrix" | "circuit" | "line-vertical" | "line-horizontal">;
     protected readonly resolvedAppearance: _angular_core.Signal<"flat" | "border-rail">;
     protected readonly resolvedWidth: _angular_core.Signal<"full" | "wide" | "container" | "fluid">;
     protected readonly resolvedType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
     protected readonly isFluidFrame: _angular_core.Signal<boolean>;
+    protected readonly isFullFlat: _angular_core.Signal<boolean>;
+    protected readonly isGridLineSurface: _angular_core.Signal<boolean>;
     protected readonly showsInsetRails: _angular_core.Signal<boolean>;
     protected readonly frameStageClasses: _angular_core.Signal<string>;
     protected readonly railAnchorClasses: _angular_core.Signal<string>;

package/types/ojiepermana-angular-theme-page.d.ts

@@ -1,31 +1,78 @@
+import * as _ojiepermana_angular_theme_layout_wrapper from '@ojiepermana/angular-theme/layout/wrapper';
+import * as _ojiepermana_angular_navigation_service from '@ojiepermana/angular-navigation/service';
 import * as _angular_core from '@angular/core';
 
+declare class PageHeaderComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
+    /** Saat tombol apps mengambang di atas header, sisakan ruang kanan agar isi header tidak tertimpa. */
+    protected readonly reservesAppsLauncher: _angular_core.Signal<boolean>;
+    /** Lebar tombol apps (h-9 w-9 = 36px) + offset kanan (right-2 = 8px) + jarak aman; `null` = tak memesan. */
+    protected readonly appsLauncherReservePadding: _angular_core.Signal<"3.5rem" | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "PageHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageContentComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageContentComponent, "PageContent", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageDashboardComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageDashboardComponent, "PageDashboard", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageFooterComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageFooterComponent, "PageFooter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare const PAGE_VARIANTS: readonly ["stacked", "side"];
 declare const PAGE_SIDE_POSITIONS: readonly ["left", "right"];
 declare const PAGE_SIDE_MODES: readonly ["sticky", "drawer", "overlay"];
 declare const PAGE_SCROLL_VALUES: readonly ["content", "page"];
 declare const PAGE_HEIGHT_VALUES: readonly ["auto", "fix"];
+/** Visual appearance shared with the layout/navigation axes — unifies borders. */
+declare const PAGE_APPEARANCES: readonly ["flat", "border-rail"];
 type PageVariant = (typeof PAGE_VARIANTS)[number];
 type PageSidePosition = (typeof PAGE_SIDE_POSITIONS)[number];
 type PageSideMode = (typeof PAGE_SIDE_MODES)[number];
 type PageScroll = (typeof PAGE_SCROLL_VALUES)[number];
 type PageHeight = (typeof PAGE_HEIGHT_VALUES)[number];
+type PageAppearance = (typeof PAGE_APPEARANCES)[number];
 declare const PAGE_DEFAULT_VARIANT: PageVariant;
 declare const PAGE_DEFAULT_SIDE_POSITION: PageSidePosition;
 declare const PAGE_DEFAULT_SIDE_MODE: PageSideMode;
 declare const PAGE_DEFAULT_SCROLL: PageScroll;
 declare const PAGE_DEFAULT_HEIGHT: PageHeight;
+declare const PAGE_DEFAULT_APPEARANCE: PageAppearance;
 declare const PAGE_DEFAULT_SIDE_WIDTH = "16rem";
 declare function isUiPageVariant(value: string | null): value is PageVariant;
 declare function isUiPageSidePosition(value: string | null): value is PageSidePosition;
 declare function isUiPageSideMode(value: string | null): value is PageSideMode;
 declare function isUiPageScroll(value: string | null): value is PageScroll;
 declare function isUiPageHeight(value: string | null): value is PageHeight;
+declare function isUiPageAppearance(value: string | null): value is PageAppearance;
 
 declare class PageStateService {
     private readonly variantState;
     private readonly heightState;
     private readonly scrollState;
+    private readonly appearanceState;
     private readonly positionState;
     private readonly sideModeState;
     private readonly internalSideOpenState;
@@ -34,15 +81,19 @@ declare class PageStateService {
     private readonly sideIdState;
     private readonly sideOpenRequestState;
     private readonly sideOpenRequestVersionState;
+    /** Aktif saat apps-launcher mengambang di atas `PageHeader`; header memesan ruang kanan agar isinya tidak tertimpa. */
+    private readonly appsLauncherReserveState;
     readonly variant: _angular_core.Signal<"stacked" | "side">;
     readonly height: _angular_core.Signal<"auto" | "fix">;
     readonly scroll: _angular_core.Signal<"content" | "page">;
+    readonly appearance: _angular_core.Signal<"flat" | "border-rail">;
     readonly position: _angular_core.Signal<"left" | "right">;
     readonly sideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     readonly sideWidth: _angular_core.Signal<string>;
     readonly sideId: _angular_core.Signal<string | null>;
     readonly sideOpenRequest: _angular_core.Signal<boolean | null>;
     readonly sideOpenRequestVersion: _angular_core.Signal<number>;
+    readonly appsLauncherReserve: _angular_core.Signal<boolean>;
     readonly sideOpen: _angular_core.Signal<boolean>;
     readonly isSideInteractive: _angular_core.Signal<boolean>;
     readonly isSideVisible: _angular_core.Signal<boolean>;
@@ -50,6 +101,7 @@ declare class PageStateService {
         variant: PageVariant;
         height: PageHeight;
         scroll: PageScroll;
+        appearance: PageAppearance;
         position: PageSidePosition;
         sideMode: PageSideMode;
         sideWidth: string;
@@ -60,6 +112,7 @@ declare class PageStateService {
         width: string;
         id: string;
     }): void;
+    setAppsLauncherReserve(reserve: boolean): void;
     setControlledSideOpen(open: boolean | null): void;
     setSideOpen(open: boolean): void;
     openSide(): boolean;
@@ -95,28 +148,60 @@ declare class PageSideComponent {
 
 declare class PageComponent {
     protected readonly page: PageStateService;
+    private readonly layout;
+    private readonly navigation;
+    private readonly identity;
     protected readonly projectedSide: _angular_core.Signal<PageSideComponent | undefined>;
+    protected readonly projectedHeader: _angular_core.Signal<PageHeaderComponent | undefined>;
     readonly variant: _angular_core.InputSignal<"stacked" | "side">;
     readonly height: _angular_core.InputSignal<"auto" | "fix">;
     readonly scroll: _angular_core.InputSignal<"content" | "page">;
+    /** Visual appearance shared with the layout (`flat | border-rail`); unifies header/footer borders. */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     readonly position: _angular_core.InputSignal<"left" | "right">;
     readonly sideMode: _angular_core.InputSignal<"sticky" | "drawer" | "overlay">;
     readonly sideOpen: _angular_core.InputSignal<boolean | null>;
     readonly sideWidth: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
     readonly sideOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Saat layout `empty`, munculkan tombol apps (flyout main navigation) di pojok kanan-atas. Set `false` untuk menonaktifkan. */
+    readonly appsLauncher: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Id navigasi yang disurface oleh apps-launcher (default `main`). */
+    readonly appsNavId: _angular_core.InputSignal<string>;
+    /** Ikon Material untuk tombol apps-launcher. */
+    readonly appsIcon: _angular_core.InputSignal<string>;
+    /** Label/aria-label tombol apps-launcher (tombol icon-only). */
+    readonly appsLabel: _angular_core.InputSignal<string>;
+    /** Id unik untuk instance `<Navigation>` apps-launcher; tak boleh memakai id `main` (akan bentrok `claimId`). */
+    protected readonly launcherNavId: string;
     protected readonly resolvedPosition: _angular_core.Signal<"left" | "right">;
     protected readonly resolvedSideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     protected readonly isLeftSide: _angular_core.Signal<boolean>;
     protected readonly isRightSide: _angular_core.Signal<boolean>;
     protected readonly showsOverlayBackdrop: _angular_core.Signal<boolean>;
+    /** Signal data untuk id yang dipilih; di-recompute hanya saat `appsNavId` berubah. */
+    private readonly appsNavSource;
+    protected readonly appsNavData: _angular_core.Signal<readonly _ojiepermana_angular_navigation_service.NavigationItem[]>;
+    /** Apps-launcher hanya muncul di layout `empty`, saat diaktifkan, dan saat nav target punya data. */
+    protected readonly showsAppsLauncher: _angular_core.Signal<boolean>;
+    /**
+     * Host `<Navigation>` launcher di-absolute ke pojok kanan-atas (hanya membungkus tombol trigger;
+     * panel flyout tetap membentang selebar `Page` lewat pengukuran container). Saat ada `PageHeader`,
+     * tombol menyatu di dalam pita header (offset rapat); tanpa header, mengambang di atas konten.
+     */
+    protected readonly appsLauncherHostClass: _angular_core.Signal<string>;
+    /** Appearance flyout mengikuti layout (seperti shell flyout); fallback ke appearance `Page`. */
+    protected readonly appsLauncherAppearance: _angular_core.Signal<"flat" | "border-rail">;
+    /** Brand/user untuk header & footer flyout — sama seperti shell flyout; `null` saat tak ada shell. */
+    protected readonly appsBrand: _angular_core.Signal<_ojiepermana_angular_theme_layout_wrapper.BrandIdentity | null>;
+    protected readonly appsUser: _angular_core.Signal<_ojiepermana_angular_theme_layout_wrapper.UserIdentity | null>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly shellClasses: _angular_core.Signal<string>;
     protected readonly bodyClasses: _angular_core.Signal<string>;
     constructor();
     protected handleBackdropClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageComponent, "Page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["PageHeader", "PageSideToggle", "PageSide", "PageContent, PageDashboard", "PageFooter"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageComponent, "Page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "appsLauncher": { "alias": "appsLauncher"; "required": false; "isSignal": true; }; "appsNavId": { "alias": "appsNavId"; "required": false; "isSignal": true; }; "appsIcon": { "alias": "appsIcon"; "required": false; "isSignal": true; }; "appsLabel": { "alias": "appsLabel"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide", "projectedHeader"], ["PageHeader", "PageSideToggle", "PageSide", "PageContent, PageDashboard", "PageFooter"], true, never>;
 }
 
 declare class PageSideToggleComponent {
@@ -131,38 +216,5 @@ declare class PageSideToggleComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageSideToggleComponent, "PageSideToggle", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; }, never, ["*"], true, never>;
 }
 
-declare class PageHeaderComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "PageHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageContentComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageContentComponent, "PageContent", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageDashboardComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageDashboardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageDashboardComponent, "PageDashboard", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageFooterComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageFooterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageFooterComponent, "PageFooter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-export { PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
-export type { PageHeight, PageScroll, PageSideMode, PageSidePosition, PageVariant };
+export { PAGE_APPEARANCES, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageAppearance, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
+export type { PageAppearance, PageHeight, PageScroll, PageSideMode, PageSidePosition, PageVariant };

package/types/ojiepermana-angular-theme-styles.d.ts

@@ -192,6 +192,7 @@ declare class ThemeRadiusService {
     private readonly options;
     private readonly radiusState;
     readonly radius: i0.Signal<"none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly radiusPx: i0.Signal<0 | 6 | 10 | 14 | 20 | 9999>;
     constructor();
     setRadius(radius: ThemeRadius): void;
     private ensureDefaults;