@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-theme-shell.mjs

@@ -1,7 +1,815 @@
-export * from '@ojiepermana/angular-theme/shell';
+import * as i0 from '@angular/core';
+import { inject, input, computed, Component, booleanAttribute } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { ShellService } from '@ojiepermana/angular/theme/shell/services';
+export { SHELL_WINDOW_BRIDGE, ShellService, WEB_SHELL_WINDOW_BRIDGE, createTauriShellWindowBridge, isTauriRuntime, provideShellWindowBridge, provideTauriShellWindowBridge } from '@ojiepermana/angular/theme/shell/services';
+import { SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_FRAME, resolveShellDeviceForMode, resolveShellFrameForMode } from '@ojiepermana/angular/theme/shell/types';
+export { SHELL_COLORS, SHELL_COLOR_STORAGE_KEY, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_FRAME, SHELL_DEFAULT_MODE, SHELL_DEFAULT_PLATFORM, SHELL_DEFAULT_WINDOW_STATE, SHELL_DEVICES, SHELL_DEVICE_STORAGE_KEY, SHELL_FRAMES, SHELL_FRAME_STORAGE_KEY, SHELL_MODES, SHELL_MODE_DEVICES, SHELL_MODE_STORAGE_KEY, SHELL_PLATFORMS, SHELL_WINDOW_STATES, defaultShellDeviceForMode, isShellColor, isShellDevice, isShellDeviceForMode, isShellFrame, isShellMode, isShellPlatform, isShellWindowState, normalizeShellColor, normalizeShellDevice, normalizeShellFrame, normalizeShellMode, resolveShellDeviceForMode, resolveShellFrameForMode, shellDevicesForMode } from '@ojiepermana/angular/theme/shell/types';
+import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular/navigation';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
+import { LayoutService } from '@ojiepermana/angular/theme/layout/services';
+import { LayoutIdentityService, LAYOUT_DESKTOP_NAVIGATION_DATA_ID, LayoutBrand, LayoutUser } from '@ojiepermana/angular/theme/layout/wrapper';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+let shellNavigationFlyoutInstanceId = 0;
+/**
+ * Internal desktop-titlebar launcher. `LayoutWrapperDefault` publishes the
+ * navigation data only while its desktop nav is active, so this component stays
+ * absent for desktop windows that still render a navbar, flyout, or side rail.
+ */
+class ShellNavigationFlyoutComponent {
+    navigation = inject(NAVIGATION_ADAPTER);
+    layout = inject(LayoutService, { optional: true });
+    identity = inject(LayoutIdentityService, { optional: true });
+    enabled = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    icon = input('apps', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    navigationId = `__shell-navigation-${(shellNavigationFlyoutInstanceId += 1)}`;
+    navigationSource = this.navigation.data(LAYOUT_DESKTOP_NAVIGATION_DATA_ID);
+    navigationData = computed(() => this.navigationSource(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationData" }] : /* istanbul ignore next */ []));
+    showsFlyout = computed(() => this.enabled() && this.navigationData().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsFlyout" }] : /* istanbul ignore next */ []));
+    appearance = computed(() => this.layout?.appearance() ?? 'flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    brand = computed(() => this.identity?.brand() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    user = computed(() => this.identity?.user() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellNavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ShellNavigationFlyoutComponent, isStandalone: true, selector: "ShellNavigationFlyout", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-shell-navigation-flyout": "showsFlyout() ? \"\" : null" }, styleAttribute: "--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);", classAttribute: "contents" }, ngImport: i0, template: `
+    @if (showsFlyout()) {
+      <Navigation
+        [id]="navigationId"
+        [data]="navigationData()"
+        ariaLabel="Application navigation"
+        class="h-full w-auto shrink-0"
+      >
+        <NavigationFlyout
+          [icon]="icon()"
+          icon-only
+          trigger-variant="plain"
+          trigger-floating
+          panel-viewport
+          trigger-class="relative z-20 flex h-full w-max items-center"
+          trigger-button-class="!bg-transparent !text-[hsl(var(--shell-bar-foreground))]"
+          [nav-type-style]="appearance()"
+          [label]="label()"
+        >
+          @if (brand(); as identity) {
+            <NavigationHeader>
+              <LayoutBrand [brand]="identity" />
+            </NavigationHeader>
+          }
+          @if (user(); as identity) {
+            <NavigationFooter class="px-3">
+              <LayoutUser [user]="identity" />
+            </NavigationFooter>
+          }
+        </NavigationFlyout>
+      </Navigation>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data-id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "panel-viewport", "trigger-class", "trigger-button-class", "nav-position", "nav-type-style", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"], outputs: ["logout"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellNavigationFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ShellNavigationFlyout',
+                    imports: [
+                        NavigationContainerComponent,
+                        NavigationFlyoutComponent,
+                        NavigationHeaderComponent,
+                        NavigationFooterComponent,
+                        LayoutBrand,
+                        LayoutUser,
+                    ],
+                    host: {
+                        class: 'contents',
+                        style: '--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);',
+                        '[attr.data-shell-navigation-flyout]': 'showsFlyout() ? "" : null',
+                    },
+                    template: `
+    @if (showsFlyout()) {
+      <Navigation
+        [id]="navigationId"
+        [data]="navigationData()"
+        ariaLabel="Application navigation"
+        class="h-full w-auto shrink-0"
+      >
+        <NavigationFlyout
+          [icon]="icon()"
+          icon-only
+          trigger-variant="plain"
+          trigger-floating
+          panel-viewport
+          trigger-class="relative z-20 flex h-full w-max items-center"
+          trigger-button-class="!bg-transparent !text-[hsl(var(--shell-bar-foreground))]"
+          [nav-type-style]="appearance()"
+          [label]="label()"
+        >
+          @if (brand(); as identity) {
+            <NavigationHeader>
+              <LayoutBrand [brand]="identity" />
+            </NavigationHeader>
+          }
+          @if (user(); as identity) {
+            <NavigationFooter class="px-3">
+              <LayoutUser [user]="identity" />
+            </NavigationFooter>
+          }
+        </NavigationFlyout>
+      </Navigation>
+    }
+  `,
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * The titlebar of a `<Shell>` — the app's own window chrome, and its bridge to
+ * the desktop runtime.
+ *
+ * **Internal to the library.** It is not exported from
+ * `@ojiepermana/angular/theme/shell`: `<Shell>` decides when a titlebar exists
+ * (only `mode='desktop'` has window chrome to draw) and renders this itself,
+ * forwarding the `[shellBarStart]` / `[shellBarTitle]` / `[shellBarEnd]` slots.
+ * Consumers configure it through `<Shell>`, never directly.
+ *
+ * Window dragging is declarative, so no JavaScript runs on pointer-down: the host
+ * carries `data-tauri-drag-region` for Tauri. Electron uses Shell's frame-wide
+ * drag layer below this bar; interactive chrome opts out with `shell-no-drag`,
+ * which the slot wrappers and buttons apply for you.
+ *
+ * Window buttons follow the `device`, not the runtime: macOS keeps painting its
+ * own traffic lights over a decoration-less window, so the bar draws none of its
+ * own and reserves a leading inset for them instead. Whether those buttons *do*
+ * anything is the bridge's business — the shape of the chrome is the device's.
+ */
+class ShellBarComponent {
+    shell = inject(ShellService);
+    device = input(SHELL_DEFAULT_DEVICE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []));
+    color = input(SHELL_DEFAULT_COLOR, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    frame = input(SHELL_DEFAULT_FRAME, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when the runtime still draws its own window buttons, so the app must
+     * not: macOS reserves the leading run for the OS traffic lights and Windows /
+     * Linux draw nothing. Default `false` — a decoration-less window.
+     */
+    nativeWindowControls = input(false, { ...(ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    drag = input(true, { ...(ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input('Application title bar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    minimizeLabel = input('Minimize window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []));
+    maximizeLabel = input('Maximize window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []));
+    restoreLabel = input('Restore window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []));
+    closeLabel = input('Close window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    /** Show the automatic desktop navigation flyout when a desktop layout publishes data. */
+    navigationFlyout = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationFlyout" }] : /* istanbul ignore next */ []));
+    navigationFlyoutIcon = input('apps', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []));
+    navigationFlyoutLabel = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    maximizeToggleLabel = computed(() => this.shell.isMaximized() ? this.restoreLabel() : this.maximizeLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeToggleLabel" }] : /* istanbul ignore next */ []));
+    isMacOs = computed(() => this.device() === 'macos', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMacOs" }] : /* istanbul ignore next */ []));
+    /**
+     * macOS traffic lights, which the app draws itself — the default, because a
+     * `decorations: false` window has no other way to be closed.
+     */
+    showsTrafficLights = computed(() => this.isMacOs() && !this.nativeWindowControls(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsTrafficLights" }] : /* istanbul ignore next */ []));
+    /** Windows/Linux buttons, on the trailing edge. */
+    showsWindowControls = computed(() => !this.isMacOs() && !this.nativeWindowControls(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsWindowControls" }] : /* istanbul ignore next */ []));
+    /**
+     * Only reserve an empty leading run when the OS is painting its own lights into
+     * it — Tauri's macOS `titleBarStyle: 'Overlay'`. Drawing ours there instead
+     * occupies the space for real, so no padding is needed.
+     */
+    reservesTrafficLights = computed(() => this.isMacOs() && this.nativeWindowControls(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reservesTrafficLights" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(
+    // 1fr auto 1fr keeps the title optically centred in the window no matter
+    // how much chrome either flank carries.
+    'relative z-20 grid h-(--shell-bar-height) min-h-(--shell-bar-height) shrink-0', 'grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-(--shell-bar-gap)', 
+    // Surface tokens, not raw colors: `color='sync'` maps them onto the design
+    // system, `color='default'` onto the device's native chrome (base/tokens.css).
+    'bg-[hsl(var(--shell-bar-background))] px-(--shell-bar-inline)', 'text-[hsl(var(--shell-bar-foreground))]', 
+    // `classic` stacks a bordered bar on the app. `modern` shares its background
+    // with the surround, so a divider would draw a seam through what is meant to
+    // read as one continuous frame.
+    this.frame() === 'classic' && 'border-b border-[hsl(var(--shell-bar-border))]', 
+    // Physically top-left on macOS regardless of text direction, so this is
+    // deliberately `pl-`, not the logical `ps-`.
+    this.reservesTrafficLights() && 'pl-(--shell-traffic-light-inset)', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    startSlotClasses = computed(() => cn('shell-no-drag flex min-w-0 items-center gap-(--shell-bar-gap)'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startSlotClasses" }] : /* istanbul ignore next */ []));
+    endSlotClasses = computed(() => cn('shell-no-drag flex min-w-0 items-center justify-end gap-(--shell-bar-gap)'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => cn('min-w-0 truncate text-center text-xs font-medium', 
+    // An unfocused window recedes — the OS convention for background windows.
+    this.shell.focused() ? 'opacity-100' : 'opacity-60'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    controlClasses = computed(() => cn('shell-no-drag inline-grid size-(--shell-control-size) shrink-0 place-items-center rounded-sm', 'opacity-70 transition-[background-color,opacity] hover:opacity-100', 'hover:bg-[hsl(var(--shell-bar-foreground)/0.12)]', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-[hsl(var(--shell-bar-foreground))]', 'focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * One macOS traffic light. The fills are that platform's own constants rather
+     * than theme tokens — a traffic light that recolored with the accent would stop
+     * reading as a traffic light. The hairline ring keeps them defined against a
+     * light titlebar and survives forced-colors mode, and each carries an
+     * `aria-label`, so the colour is never the only way to tell them apart.
+     */
+    trafficLightClasses(control) {
+        return cn('shell-no-drag group inline-grid size-(--shell-traffic-light-size) shrink-0', 'cursor-pointer place-items-center rounded-full', 'ring-1 ring-black/15 transition-colors', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-[hsl(var(--shell-bar-foreground))]', 'focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]', 
+        // Each light darkens to its own pressed shade on hover — the same per-light
+        // colour shift macOS uses, so the feedback reads as "this specific control"
+        // rather than a generic highlight. Paired with the glyph appearing below, the
+        // hover state never relies on colour alone.
+        control === 'close' && 'bg-[#ff5f57] hover:bg-[#e0443e]', control === 'minimize' && 'bg-[#febc2e] hover:bg-[#dea123]', control === 'zoom' && 'bg-[#28c840] hover:bg-[#1aad2b]');
+    }
+    /** macOS reveals the glyph inside each light only on hover — and on focus, for keyboards. */
+    trafficGlyphClasses() {
+        return cn('size-(--shell-traffic-light-size) opacity-0 transition-opacity', 'group-hover:opacity-70 group-focus-visible:opacity-70', 'stroke-black/70 [stroke-linecap:round] [stroke-width:1.5] [fill:none]');
+    }
+    closeControlClasses = computed(() => cn(this.controlClasses(), 'hover:bg-destructive hover:text-destructive-foreground'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeControlClasses" }] : /* istanbul ignore next */ []));
+    minimize() {
+        void this.shell.minimize();
+    }
+    toggleMaximize() {
+        void this.shell.toggleMaximize();
+    }
+    close() {
+        void this.shell.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ShellBarComponent, isStandalone: true, selector: "ShellBar", inputs: { device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, nativeWindowControls: { classPropertyName: "nativeWindowControls", publicName: "nativeWindowControls", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, minimizeLabel: { classPropertyName: "minimizeLabel", publicName: "minimizeLabel", isSignal: true, isRequired: false, transformFunction: null }, maximizeLabel: { classPropertyName: "maximizeLabel", publicName: "maximizeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyout: { classPropertyName: "navigationFlyout", publicName: "navigationFlyout", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutIcon: { classPropertyName: "navigationFlyoutIcon", publicName: "navigationFlyoutIcon", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutLabel: { classPropertyName: "navigationFlyoutLabel", publicName: "navigationFlyoutLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-shell-bar": "" }, properties: { "class": "classes()", "attr.data-shell-device": "device()", "attr.data-shell-color": "color()", "attr.data-shell-frame": "frame()", "attr.data-tauri-drag-region": "drag() ? \"\" : null", "attr.data-shell-window": "shell.windowState()", "attr.data-shell-focused": "shell.focused()", "attr.role": "landmark() ? \"banner\" : null", "attr.aria-label": "landmark() ? ariaLabel() || null : null" } }, ngImport: i0, template: `
+    <div data-shell-bar-start [class]="startSlotClasses()">
+      @if (!isMacOs()) {
+        <ShellNavigationFlyout
+          [enabled]="navigationFlyout()"
+          [icon]="navigationFlyoutIcon()"
+          [label]="navigationFlyoutLabel()"
+        />
+      }
+
+      @if (showsTrafficLights()) {
+        <div data-shell-traffic-lights class="flex shrink-0 items-center gap-2 pl-2 pr-1">
+          <button
+            type="button"
+            data-shell-control="close"
+            [class]="trafficLightClasses('close')"
+            [attr.aria-label]="closeLabel()"
+            [title]="closeLabel()"
+            (click)="close()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M4 4l4 4M8 4l-4 4" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            data-shell-control="minimize"
+            [class]="trafficLightClasses('minimize')"
+            [attr.aria-label]="minimizeLabel()"
+            [title]="minimizeLabel()"
+            (click)="minimize()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M3.5 6h5" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            data-shell-control="zoom"
+            [class]="trafficLightClasses('zoom')"
+            [attr.aria-label]="maximizeToggleLabel()"
+            [attr.aria-pressed]="shell.isMaximized()"
+            [title]="maximizeToggleLabel()"
+            (click)="toggleMaximize()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M6 3.5v5M3.5 6h5" />
+            </svg>
+          </button>
+        </div>
+      }
+
+      <ng-content select="[shellBarStart]" />
+    </div>
+
+    <div data-shell-bar-title [class]="titleClasses()">
+      <ng-content select="[shellBarTitle]" />
+    </div>
+
+    <div data-shell-bar-end [class]="endSlotClasses()">
+      <ng-content select="[shellBarEnd]" />
+
+      @if (isMacOs()) {
+        <ShellNavigationFlyout
+          [enabled]="navigationFlyout()"
+          [icon]="navigationFlyoutIcon()"
+          [label]="navigationFlyoutLabel()"
+        />
+      }
+
+      @if (showsWindowControls()) {
+        <button
+          type="button"
+          data-shell-control="minimize"
+          [class]="controlClasses()"
+          [attr.aria-label]="minimizeLabel()"
+          [title]="minimizeLabel()"
+          (click)="minimize()"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            class="size-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.25"
+            stroke-linecap="round"
+          >
+            <path d="M3.5 8h9" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          data-shell-control="maximize"
+          [class]="controlClasses()"
+          [attr.aria-label]="maximizeToggleLabel()"
+          [attr.aria-pressed]="shell.isMaximized()"
+          [title]="maximizeToggleLabel()"
+          (click)="toggleMaximize()"
+        >
+          @if (shell.isMaximized()) {
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              class="size-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linejoin="round"
+            >
+              <path d="M5.25 5.25V3.75h7v7h-1.5" />
+              <rect x="3.75" y="5.25" width="7" height="7" rx="0.75" />
+            </svg>
+          } @else {
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              class="size-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linejoin="round"
+            >
+              <rect x="3.75" y="3.75" width="8.5" height="8.5" rx="0.75" />
+            </svg>
+          }
+        </button>
+
+        <button
+          type="button"
+          data-shell-control="close"
+          [class]="closeControlClasses()"
+          [attr.aria-label]="closeLabel()"
+          [title]="closeLabel()"
+          (click)="close()"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            class="size-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.25"
+            stroke-linecap="round"
+          >
+            <path d="M4.25 4.25l7.5 7.5M11.75 4.25l-7.5 7.5" />
+          </svg>
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShellNavigationFlyoutComponent, selector: "ShellNavigationFlyout", inputs: ["enabled", "icon", "label"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ShellBar',
+                    imports: [ShellNavigationFlyoutComponent],
+                    host: {
+                        '[class]': 'classes()',
+                        'data-shell-bar': '',
+                        '[attr.data-shell-device]': 'device()',
+                        '[attr.data-shell-color]': 'color()',
+                        '[attr.data-shell-frame]': 'frame()',
+                        '[attr.data-tauri-drag-region]': 'drag() ? "" : null',
+                        '[attr.data-shell-window]': 'shell.windowState()',
+                        '[attr.data-shell-focused]': 'shell.focused()',
+                        '[attr.role]': 'landmark() ? "banner" : null',
+                        '[attr.aria-label]': 'landmark() ? ariaLabel() || null : null',
+                    },
+                    template: `
+    <div data-shell-bar-start [class]="startSlotClasses()">
+      @if (!isMacOs()) {
+        <ShellNavigationFlyout
+          [enabled]="navigationFlyout()"
+          [icon]="navigationFlyoutIcon()"
+          [label]="navigationFlyoutLabel()"
+        />
+      }
+
+      @if (showsTrafficLights()) {
+        <div data-shell-traffic-lights class="flex shrink-0 items-center gap-2 pl-2 pr-1">
+          <button
+            type="button"
+            data-shell-control="close"
+            [class]="trafficLightClasses('close')"
+            [attr.aria-label]="closeLabel()"
+            [title]="closeLabel()"
+            (click)="close()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M4 4l4 4M8 4l-4 4" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            data-shell-control="minimize"
+            [class]="trafficLightClasses('minimize')"
+            [attr.aria-label]="minimizeLabel()"
+            [title]="minimizeLabel()"
+            (click)="minimize()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M3.5 6h5" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            data-shell-control="zoom"
+            [class]="trafficLightClasses('zoom')"
+            [attr.aria-label]="maximizeToggleLabel()"
+            [attr.aria-pressed]="shell.isMaximized()"
+            [title]="maximizeToggleLabel()"
+            (click)="toggleMaximize()"
+          >
+            <svg [class]="trafficGlyphClasses()" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="M6 3.5v5M3.5 6h5" />
+            </svg>
+          </button>
+        </div>
+      }
+
+      <ng-content select="[shellBarStart]" />
+    </div>
+
+    <div data-shell-bar-title [class]="titleClasses()">
+      <ng-content select="[shellBarTitle]" />
+    </div>
+
+    <div data-shell-bar-end [class]="endSlotClasses()">
+      <ng-content select="[shellBarEnd]" />
+
+      @if (isMacOs()) {
+        <ShellNavigationFlyout
+          [enabled]="navigationFlyout()"
+          [icon]="navigationFlyoutIcon()"
+          [label]="navigationFlyoutLabel()"
+        />
+      }
+
+      @if (showsWindowControls()) {
+        <button
+          type="button"
+          data-shell-control="minimize"
+          [class]="controlClasses()"
+          [attr.aria-label]="minimizeLabel()"
+          [title]="minimizeLabel()"
+          (click)="minimize()"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            class="size-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.25"
+            stroke-linecap="round"
+          >
+            <path d="M3.5 8h9" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          data-shell-control="maximize"
+          [class]="controlClasses()"
+          [attr.aria-label]="maximizeToggleLabel()"
+          [attr.aria-pressed]="shell.isMaximized()"
+          [title]="maximizeToggleLabel()"
+          (click)="toggleMaximize()"
+        >
+          @if (shell.isMaximized()) {
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              class="size-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linejoin="round"
+            >
+              <path d="M5.25 5.25V3.75h7v7h-1.5" />
+              <rect x="3.75" y="5.25" width="7" height="7" rx="0.75" />
+            </svg>
+          } @else {
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              viewBox="0 0 16 16"
+              class="size-4"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linejoin="round"
+            >
+              <rect x="3.75" y="3.75" width="8.5" height="8.5" rx="0.75" />
+            </svg>
+          }
+        </button>
+
+        <button
+          type="button"
+          data-shell-control="close"
+          [class]="closeControlClasses()"
+          [attr.aria-label]="closeLabel()"
+          [title]="closeLabel()"
+          (click)="close()"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            viewBox="0 0 16 16"
+            class="size-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.25"
+            stroke-linecap="round"
+          >
+            <path d="M4.25 4.25l7.5 7.5M11.75 4.25l-7.5 7.5" />
+          </svg>
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], nativeWindowControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeWindowControls", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], minimizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeLabel", required: false }] }], maximizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], navigationFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyout", required: false }] }], navigationFlyoutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutIcon", required: false }] }], navigationFlyoutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Root of an application shell: the element that owns the whole surface, whether
+ * that is a browser tab, an OS window, a tablet, or a phone.
+ *
+ * A `<Shell>` holds the app directly — normally a `<Layout>` — plus, on
+ * `mode='desktop'`, a titlebar it renders itself:
+ *
+ * ```html
+ * <Shell mode="desktop" device="macos">
+ *   <span shellBarTitle>Acme Studio</span>
+ *
+ *   <Layout>
+ *     <LayoutVertical>…</LayoutVertical>
+ *   </Layout>
+ * </Shell>
+ * ```
+ *
+ * ## Fallback chain
+ *
+ * Every axis is optional, and each falls back rather than demanding a value:
+ *
+ * - `mode` — this input, else the stored `shell-mode`, else `desktop` when a
+ *   desktop runtime is registered, else `web`.
+ * - `device` — this input, else the stored `shell-device`, else whatever the
+ *   window bridge reports, else the mode's default device.
+ * - `color` — this input, else the stored `shell-color`, else `sync`.
+ * - `frame` — this input, else the stored `shell-frame`, else `classic`; only
+ *   `desktop` can be `modern`.
+ *
+ * `mode` and `device` are always resolved as a coherent pair: a device that
+ * belongs to another form factor (`mode='desktop' device='ipad'`) is corrected to
+ * the mode's default, so `data-shell-device` never describes something the mode
+ * cannot be.
+ *
+ * Inputs are host declarations, not user preferences, so setting them never
+ * writes to storage — use `ShellService.setMode()` / `setDevice()` for a choice
+ * that should persist.
+ */
+class ShellComponent {
+    shell = inject(ShellService);
+    /** Delivery target. `null` follows the stored/derived mode — see the class note. */
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Host OS. `null` follows the stored/reported device, corrected to fit `mode`. */
+    device = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the shell's own chrome takes its colors from. `sync` keeps the titlebar
+     * inside the design system; `default` paints the native look of the active
+     * device.
+     */
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * How the app sits in its window. `classic` keeps it flush to the window edge
+     * under a bordered titlebar; `modern` insets it as a panel and fuses the titlebar
+     * with the surround into one continuous frame. Only meaningful on
+     * `mode='desktop'` — anything else resolves to `classic`.
+     */
+    frame = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when the runtime still draws its own window buttons, so the shell must
+     * not draw them: on macOS the titlebar reserves the leading run for the OS
+     * traffic lights (Tauri's `titleBarStyle: 'Overlay'`), and Windows / Linux draw
+     * nothing. Leave `false` for a `decorations: false` window, where the app owns
+     * the buttons — otherwise there would be no way to close it.
+     */
+    nativeWindowControls = input(false, { ...(ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark the exposed desktop frame and titlebar as drag surfaces below interactive content. */
+    drag = input(true, { ...(ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Expose the titlebar as the `banner` landmark. Turn off for a nested preview. */
+    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    barAriaLabel = input('Application title bar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barAriaLabel" }] : /* istanbul ignore next */ []));
+    minimizeLabel = input('Minimize window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []));
+    maximizeLabel = input('Maximize window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []));
+    restoreLabel = input('Restore window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []));
+    closeLabel = input('Close window', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Automatically surface the desktop layout's primary navigation as an icon
+     * flyout in the titlebar. macOS places it at the trailing edge; Windows and
+     * Linux place it at the leading edge.
+     */
+    navigationFlyout = input(true, { ...(ngDevMode ? { debugName: "navigationFlyout" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    navigationFlyoutIcon = input('apps', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []));
+    navigationFlyoutLabel = input('Open navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    resolvedMode = computed(() => this.mode() ?? this.shell.mode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedDevice = computed(() => resolveShellDeviceForMode(this.resolvedMode(), this.device() ?? this.shell.device()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDevice" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this.shell.color(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedFrame = computed(() => resolveShellFrameForMode(this.resolvedMode(), this.frame() ?? this.shell.frame()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFrame" }] : /* istanbul ignore next */ []));
+    /** Only a desktop window has chrome of its own to draw. */
+    showsBar = computed(() => this.resolvedMode() === 'desktop', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsBar" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn(
+    // h-dvh, not h-full: the shell is the whole surface. `isolate` keeps the
+    // titlebar's stacking context out of the app's, so a bar menu can never be
+    // painted over by content below it.
+    'relative isolate flex h-dvh w-full min-w-0 flex-col overflow-hidden text-foreground', this.showsBar() && this.drag() && 'shell-drag-region', 
+    // A synchronized shell promotes the selected Theme color to the whole shell
+    // background. `modern` also shares the titlebar token with its inset surround,
+    // including when `color='default'` maps that token to native device chrome.
+    this.resolvedColor() === 'sync' || this.resolvedFrame() === 'modern'
+        ? 'bg-[hsl(var(--shell-bar-background))]'
+        : 'bg-layout-canvas', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ShellComponent, isStandalone: true, selector: "Shell", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, nativeWindowControls: { classPropertyName: "nativeWindowControls", publicName: "nativeWindowControls", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, barAriaLabel: { classPropertyName: "barAriaLabel", publicName: "barAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minimizeLabel: { classPropertyName: "minimizeLabel", publicName: "minimizeLabel", isSignal: true, isRequired: false, transformFunction: null }, maximizeLabel: { classPropertyName: "maximizeLabel", publicName: "maximizeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyout: { classPropertyName: "navigationFlyout", publicName: "navigationFlyout", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutIcon: { classPropertyName: "navigationFlyoutIcon", publicName: "navigationFlyoutIcon", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutLabel: { classPropertyName: "navigationFlyoutLabel", publicName: "navigationFlyoutLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-shell-root": "" }, properties: { "class": "hostClasses()", "attr.data-shell-mode": "resolvedMode()", "attr.data-shell-device": "resolvedDevice()", "attr.data-shell-color": "resolvedColor()", "attr.data-shell-frame": "resolvedFrame()", "attr.data-shell-platform": "shell.platform", "attr.data-shell-window": "shell.windowState()" } }, ngImport: i0, template: `
+    @if (showsBar() && drag()) {
+      <div
+        aria-hidden="true"
+        data-shell-frame-drag-region
+        data-tauri-drag-region
+        class="pointer-events-auto absolute inset-0 z-0"
+      ></div>
+    }
+
+    @if (showsBar()) {
+      <ShellBar
+        [device]="resolvedDevice()"
+        [color]="resolvedColor()"
+        [frame]="resolvedFrame()"
+        [nativeWindowControls]="nativeWindowControls()"
+        [drag]="drag()"
+        [landmark]="landmark()"
+        [ariaLabel]="barAriaLabel()"
+        [minimizeLabel]="minimizeLabel()"
+        [maximizeLabel]="maximizeLabel()"
+        [restoreLabel]="restoreLabel()"
+        [closeLabel]="closeLabel()"
+        [navigationFlyout]="navigationFlyout()"
+        [navigationFlyoutIcon]="navigationFlyoutIcon()"
+        [navigationFlyoutLabel]="navigationFlyoutLabel()"
+      >
+        <ng-content select="[shellBarStart]" ngProjectAs="[shellBarStart]" />
+        <ng-content select="[shellBarTitle]" ngProjectAs="[shellBarTitle]" />
+        <ng-content select="[shellBarEnd]" ngProjectAs="[shellBarEnd]" />
+      </ShellBar>
+    }
+
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "component", type: ShellBarComponent, selector: "ShellBar", inputs: ["device", "color", "frame", "nativeWindowControls", "drag", "landmark", "ariaLabel", "minimizeLabel", "maximizeLabel", "restoreLabel", "closeLabel", "navigationFlyout", "navigationFlyoutIcon", "navigationFlyoutLabel", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ShellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Shell',
+                    imports: [ShellBarComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-shell-root': '',
+                        '[attr.data-shell-mode]': 'resolvedMode()',
+                        '[attr.data-shell-device]': 'resolvedDevice()',
+                        '[attr.data-shell-color]': 'resolvedColor()',
+                        '[attr.data-shell-frame]': 'resolvedFrame()',
+                        '[attr.data-shell-platform]': 'shell.platform',
+                        '[attr.data-shell-window]': 'shell.windowState()',
+                    },
+                    template: `
+    @if (showsBar() && drag()) {
+      <div
+        aria-hidden="true"
+        data-shell-frame-drag-region
+        data-tauri-drag-region
+        class="pointer-events-auto absolute inset-0 z-0"
+      ></div>
+    }
+
+    @if (showsBar()) {
+      <ShellBar
+        [device]="resolvedDevice()"
+        [color]="resolvedColor()"
+        [frame]="resolvedFrame()"
+        [nativeWindowControls]="nativeWindowControls()"
+        [drag]="drag()"
+        [landmark]="landmark()"
+        [ariaLabel]="barAriaLabel()"
+        [minimizeLabel]="minimizeLabel()"
+        [maximizeLabel]="maximizeLabel()"
+        [restoreLabel]="restoreLabel()"
+        [closeLabel]="closeLabel()"
+        [navigationFlyout]="navigationFlyout()"
+        [navigationFlyoutIcon]="navigationFlyoutIcon()"
+        [navigationFlyoutLabel]="navigationFlyoutLabel()"
+      >
+        <ng-content select="[shellBarStart]" ngProjectAs="[shellBarStart]" />
+        <ng-content select="[shellBarTitle]" ngProjectAs="[shellBarTitle]" />
+        <ng-content select="[shellBarEnd]" ngProjectAs="[shellBarEnd]" />
+      </ShellBar>
+    }
+
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], nativeWindowControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeWindowControls", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], barAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAriaLabel", required: false }] }], minimizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeLabel", required: false }] }], maximizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], navigationFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyout", required: false }] }], navigationFlyoutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutIcon", required: false }] }], navigationFlyoutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API of @ojiepermana/angular/theme/shell
+ *
+ * The application shell root: <Shell> owns the whole surface and holds the app
+ * (normally a <Layout>) directly. On mode='desktop' it also renders its own
+ * titlebar — <ShellBar> is deliberately NOT exported, because when a titlebar
+ * exists is <Shell>'s decision, not the consumer's. Configure it through <Shell>
+ * and its [shellBarStart] / [shellBarTitle] / [shellBarEnd] slots.
+ */
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ShellComponent };