@frame-kit/ui-ng 0.0.1

package/types/frame-kit-ui-ng-layouts-app-shell.d.ts

@@ -0,0 +1,75 @@
+import * as _angular_core from '@angular/core';
+
+type AppShellMode = 'side' | 'over' | 'icon';
+
+declare class AppShellComponent {
+    /** Layout mode for the primary sidenav — `"side"` pushes content, `"over"` floats above it, `"icon"` collapses to an icon rail. */
+    readonly mode: _angular_core.InputSignal<AppShellMode>;
+    /** Width of the primary sidenav when fully open. */
+    readonly sidenavWidth: _angular_core.InputSignal<string>;
+    /** Width of the primary sidenav when collapsed to icon-rail mode. */
+    readonly collapsedWidth: _angular_core.InputSignal<string>;
+    /** CSS media query used to determine mobile breakpoint for the primary sidenav. */
+    readonly breakpoint: _angular_core.InputSignal<string>;
+    /** When true, the main header sticks to the top of the viewport during scroll. */
+    readonly sticky: _angular_core.InputSignal<boolean>;
+    /** When true and on mobile, the sidenav collapses to the icon rail instead of hiding entirely. */
+    readonly collapseOnMobile: _angular_core.InputSignal<boolean>;
+    /** Layout mode for the end (trailing) panel. */
+    readonly endMode: _angular_core.InputSignal<AppShellMode>;
+    /** Width of the end panel when fully open. */
+    readonly endWidth: _angular_core.InputSignal<string>;
+    /** Width of the end panel when collapsed to icon-rail mode. */
+    readonly endCollapsedWidth: _angular_core.InputSignal<string>;
+    private readonly orchestrator;
+    private navOverlayId;
+    private endOverlayId;
+    readonly stickyPreference: _angular_core.WritableSignal<"closed" | null>;
+    readonly tempOpen: _angular_core.WritableSignal<boolean>;
+    readonly isMobile: _angular_core.WritableSignal<boolean>;
+    readonly endStickyPreference: _angular_core.WritableSignal<"closed" | null>;
+    readonly endTempOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Transitions are opt-in: only enabled after a user action (toggle, open,
+     * close, dismiss). Viewport changes clear this flag so layout shifts are
+     * always instant — no flash of the aside sliding in/out on resize.
+     */
+    readonly animate: _angular_core.WritableSignal<boolean>;
+    readonly sidenavOpen: _angular_core.Signal<boolean>;
+    readonly showOverlay: _angular_core.Signal<boolean>;
+    readonly isCollapsed: _angular_core.Signal<boolean>;
+    readonly endOpen: _angular_core.Signal<boolean>;
+    readonly showEndOverlay: _angular_core.Signal<boolean>;
+    readonly isEndCollapsed: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostStyle(): {
+        '--fk-app-shell-sidenav-width': string;
+        '--fk-app-shell-collapsed-width': string;
+        '--fk-app-shell-end-width': string;
+        '--fk-app-shell-end-collapsed-width': string;
+    };
+    private readonly breakpointObserver;
+    private readonly destroyRef;
+    constructor();
+    /** Open the primary sidenav, registering it with the overlay orchestrator on mobile. */
+    openSidenav(): void;
+    /** Close the primary sidenav and unregister it from the overlay orchestrator. */
+    closeSidenav(): void;
+    /** Toggle the primary sidenav between open and closed. */
+    toggleSidenav(): void;
+    /** Dismiss the sidenav overlay on mobile without marking it as permanently closed. */
+    dismissSidenav(): void;
+    /** Open the end panel, registering it with the overlay orchestrator on mobile. */
+    openEnd(): void;
+    /** Close the end panel and unregister it from the overlay orchestrator. */
+    closeEnd(): void;
+    /** Toggle the end panel between open and closed. */
+    toggleEnd(): void;
+    /** Dismiss the end panel overlay and unregister it from the overlay orchestrator. */
+    dismissEnd(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AppShellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AppShellComponent, "fk-app-shell", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "collapseOnMobile": { "alias": "collapseOnMobile"; "required": false; "isSignal": true; }; "endMode": { "alias": "endMode"; "required": false; "isSignal": true; }; "endWidth": { "alias": "endWidth"; "required": false; "isSignal": true; }; "endCollapsedWidth": { "alias": "endCollapsedWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[appShellHeader]", "[appShellSidenav]", "[appShellContent]", "[appShellEnd]", "[appShellFooter]"], true, never>;
+}
+
+export { AppShellComponent };
+export type { AppShellMode };

package/types/frame-kit-ui-ng-layouts-content-split.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+
+type ContentSplitLayout = 'wide' | 'narrow';
+
+declare class FkContentSplitComponent {
+    private readonly el;
+    private readonly ngZone;
+    private readonly destroyRef;
+    private readonly platformId;
+    readonly className: _angular_core.InputSignal<string>;
+    /** Width of the left panel when the layout is in wide mode. */
+    readonly leftWidth: _angular_core.InputSignal<string>;
+    /** Width of the left panel when collapsed to a narrow icon rail. */
+    readonly railWidth: _angular_core.InputSignal<string>;
+    /** Host element pixel width below which the layout switches to narrow mode. */
+    readonly breakpoint: _angular_core.InputSignal<number>;
+    /** Two-way binding for the collapsed state of the left panel. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    readonly layout: _angular_core.WritableSignal<ContentSplitLayout>;
+    readonly animate: _angular_core.WritableSignal<boolean>;
+    private observer;
+    readonly isNarrow: _angular_core.Signal<boolean>;
+    readonly isWide: _angular_core.Signal<boolean>;
+    readonly showOverlay: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostLeftWidth(): string;
+    get hostRailWidth(): string;
+    constructor();
+    /** Expand the left panel. */
+    open(): void;
+    /** Collapse the left panel. */
+    close(): void;
+    /** Toggle the left panel between expanded and collapsed. */
+    toggle(): void;
+    /** Dismiss the left panel overlay on narrow viewports (alias for `close`). */
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkContentSplitComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FkContentSplitComponent, "fk-content-split", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; "leftWidth": { "alias": "leftWidth"; "required": false; "isSignal": true; }; "railWidth": { "alias": "railWidth"; "required": false; "isSignal": true; }; "breakpoint": { "alias": "breakpoint"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[contentSplitLeft]", "[contentSplitToggleIcon]", "[contentSplitRight]"], true, never>;
+}
+
+export { FkContentSplitComponent };
+export type { ContentSplitLayout };

package/types/frame-kit-ui-ng-services-overlay-orchestrator.d.ts

@@ -0,0 +1,96 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Default priority levels for common overlay types.
+ * Higher number = higher priority = stays open when lower-priority overlays open.
+ *
+ * Consumers can use any number — these are conventions, not constraints.
+ */
+declare const OVERLAY_PRIORITY: {
+    /** Tooltips, inline popovers */
+    readonly TOOLTIP: 0;
+    /** Dropdown menus, kebab menus, popovers */
+    readonly POPOVER: 10;
+    /** Side panels, detail drawers */
+    readonly DRAWER: 20;
+    /** Modal dialogs, confirmations */
+    readonly DIALOG: 30;
+    /** App-level navigation (sidebar, mobile nav) */
+    readonly NAVIGATION: 40;
+};
+interface OverlayEntry {
+    /** Unique identifier for this overlay instance */
+    id: string;
+    /** Priority level — higher stays open, lower gets closed */
+    priority: number;
+    /** Overlay type label (for debugging/logging) */
+    type: string;
+    /** Called by the orchestrator to close this overlay */
+    close: () => void;
+}
+
+/**
+ * Centralized overlay orchestrator.
+ *
+ * Tracks all open overlays (dialogs, drawers, popovers, navigation, tooltips)
+ * in a priority-based stack. When a new overlay opens:
+ *
+ * - All overlays with LOWER priority are closed automatically.
+ * - Overlays with EQUAL or HIGHER priority are left open.
+ *
+ * This prevents UI conflicts like drawers staying open behind dialogs,
+ * or kebab menus persisting when a modal pops up.
+ *
+ * @example
+ * ```ts
+ * const id = orchestrator.register({
+ *   priority: OVERLAY_PRIORITY.DRAWER,
+ *   type: 'drawer',
+ *   close: () => drawerRef.close(),
+ * });
+ *
+ * // Later, when the overlay closes:
+ * orchestrator.unregister(id);
+ * ```
+ */
+declare class OverlayOrchestrator {
+    private readonly entries;
+    /** Whether any overlay is currently open. */
+    readonly hasActiveOverlay: _angular_core.Signal<boolean>;
+    /** The topmost (highest priority) overlay. */
+    readonly topOverlay: _angular_core.Signal<OverlayEntry | null>;
+    /** Current number of active overlays. */
+    readonly count: _angular_core.Signal<number>;
+    /**
+     * Register an overlay and close all overlays with lower priority.
+     *
+     * @returns The unique overlay ID — pass this to `unregister()` when closing.
+     */
+    register(entry: Omit<OverlayEntry, 'id'>): string;
+    /**
+     * Unregister an overlay by ID. Call this when the overlay closes.
+     */
+    unregister(id: string): void;
+    /**
+     * Check if an overlay with the given priority or higher is currently open.
+     * Useful for guards that want to prevent opening lower-priority overlays.
+     */
+    hasOverlayAtOrAbove(priority: number): boolean;
+    /**
+     * Check if any overlay of a specific type is open.
+     */
+    hasOverlayOfType(type: string): boolean;
+    /**
+     * Close all overlays. Closes from lowest to highest priority.
+     */
+    closeAll(): void;
+    /**
+     * Close all overlays at or below the given priority.
+     */
+    closeAtOrBelow(priority: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OverlayOrchestrator, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<OverlayOrchestrator>;
+}
+
+export { OVERLAY_PRIORITY, OverlayOrchestrator };
+export type { OverlayEntry };

package/types/frame-kit-ui-ng-services-spotlight.d.ts

@@ -0,0 +1,32 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Coordinates "spotlight" pulses across unrelated DOM trees.
+ *
+ * A holder calls `activate(key)`; every element registered as a target of
+ * the same key picks up the spotlight animation in sync. `deactivate`
+ * releases that holder. Holders are reference-counted — multiple callers
+ * (a hover trigger and a programmatic one-shot, say) can hold the same
+ * key concurrently, and the key only clears once every holder has
+ * released. This lets a programmatic "auto-spotlight on docs-panel open"
+ * coexist with the hover-driven trigger without one cancelling the
+ * other prematurely.
+ *
+ * The model is still a single global active key — last activation wins
+ * if a different key arrives while one is held; the primary use case
+ * (onboarding "find this button" cues) is mutually exclusive by nature.
+ */
+declare class SpotlightService {
+    private readonly _activeKey;
+    private readonly holders;
+    /** Read-only signal exposing the currently active spotlight key, or `null` when none is active. */
+    readonly activeKey: i0.Signal<string | null>;
+    /** Activate the spotlight for the given key, incrementing its holder count. */
+    activate(key: string): void;
+    /** Release one holder of the given key; clears the active key when the last holder deactivates. */
+    deactivate(key: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpotlightService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SpotlightService>;
+}
+
+export { SpotlightService };

package/types/frame-kit-ui-ng-services-toast.d.ts

@@ -0,0 +1,100 @@
+import * as i0 from '@angular/core';
+import { Type, InjectionToken, Provider, EnvironmentProviders } from '@angular/core';
+
+type ToastSeverity = 'success' | 'error' | 'warning' | 'info';
+interface Toast {
+    id: string;
+    severity: ToastSeverity;
+    summary: string;
+    detail?: string;
+    duration: number;
+    component?: Type<unknown>;
+    data?: unknown;
+}
+interface ToastConfig {
+    icons?: Partial<Record<ToastSeverity, string>>;
+    defaultDuration?: number;
+    errorDuration?: number;
+}
+declare const DEFAULT_TOAST_CONFIG: ToastConfig;
+
+declare const TOAST_DATA: InjectionToken<unknown>;
+declare const TOAST_REF: InjectionToken<ToastRef>;
+/**
+ * Reference to an active toast. Injected into custom toast components
+ * so they can dismiss themselves.
+ */
+declare class ToastRef {
+    readonly id: string;
+    private readonly dismissFn;
+    constructor(id: string, dismissFn: (id: string) => void);
+    dismiss(): void;
+}
+
+declare const TOAST_CONFIG: InjectionToken<ToastConfig>;
+/**
+ * Global toast notification service.
+ *
+ * Default toasts:
+ * ```ts
+ * this.toast.success("Saved successfully");
+ * this.toast.error("Something went wrong", "Please try again.");
+ * ```
+ *
+ * Custom component toasts:
+ * ```ts
+ * this.toast.open(RetryToastComponent, {
+ *   severity: "error",
+ *   data: { message: "Failed to save", retryFn: () => this.save() },
+ * });
+ * ```
+ */
+declare class ToastService {
+    private readonly config;
+    private readonly timers;
+    private readonly _toasts;
+    /** Current toast stack (read-only). */
+    readonly toasts: i0.Signal<Toast[]>;
+    /** Resolved config with defaults. */
+    readonly resolvedConfig: Required<Pick<ToastConfig, 'defaultDuration' | 'errorDuration'>> & ToastConfig;
+    /**
+     * Show a default toast. Returns the toast ID for manual dismissal.
+     */
+    show(options: {
+        severity: ToastSeverity;
+        summary: string;
+        detail?: string;
+        duration?: number;
+    }): string;
+    /**
+     * Show a custom component toast. The component receives TOAST_DATA
+     * and TOAST_REF via injection. Returns a ToastRef for external dismissal.
+     */
+    open<TData = unknown>(component: Type<unknown>, options?: {
+        severity?: ToastSeverity;
+        data?: TData;
+        duration?: number;
+    }): ToastRef;
+    /** Dismiss a specific toast by ID. */
+    dismiss(id: string): void;
+    /** Clear all toasts. */
+    clear(): void;
+    /** Show a success toast and return its ID. */
+    success(summary: string, detail?: string): string;
+    /** Show an error toast and return its ID. */
+    error(summary: string, detail?: string): string;
+    /** Show a warning toast and return its ID. */
+    warning(summary: string, detail?: string): string;
+    /** Show an informational toast and return its ID. */
+    info(summary: string, detail?: string): string;
+    private scheduleAutoDismiss;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}
+/**
+ * Provide toast configuration at the application level.
+ */
+declare function provideToastConfig(config: ToastConfig): (Provider | EnvironmentProviders)[];
+
+export { DEFAULT_TOAST_CONFIG, TOAST_CONFIG, TOAST_DATA, TOAST_REF, ToastRef, ToastService, provideToastConfig };
+export type { Toast, ToastConfig, ToastSeverity };

package/types/frame-kit-ui-ng-ui-accordion.d.ts

@@ -0,0 +1,86 @@
+import * as _frame_kit_ui_ng_ui_accordion from '@frame-kit/ui-ng/ui/accordion';
+import * as _angular_core from '@angular/core';
+import { OnInit, InjectionToken } from '@angular/core';
+
+type AccordionSize = 'sm' | 'md';
+
+declare class AccordionComponent implements OnInit {
+    private readonly group;
+    private readonly destroyRef;
+    /** Heading text shown in the trigger row. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Optional supporting text rendered beneath the title. */
+    readonly description: _angular_core.InputSignal<string | null>;
+    /** Short label rendered to the leading side of the trigger row. */
+    readonly leadingText: _angular_core.InputSignal<string | null>;
+    /** Controls the size variant of the accordion trigger and content. */
+    readonly size: _angular_core.InputSignal<AccordionSize>;
+    /** When true the accordion cannot be opened or closed by the user. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Whether the panel starts in the expanded state on first render. */
+    readonly defaultExpanded: _angular_core.InputSignal<boolean>;
+    readonly leadingIconRef: _angular_core.Signal<_frame_kit_ui_ng_ui_accordion.FkAccordionLeadingIconDirective | undefined>;
+    readonly chevronRef: _angular_core.Signal<_frame_kit_ui_ng_ui_accordion.FkAccordionChevronDirective | undefined>;
+    /** Fires whenever the panel opens or closes, emitting the new expanded state. */
+    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly _expanded;
+    private readonly uid;
+    readonly expanded: _angular_core.Signal<boolean>;
+    protected readonly triggerId: _angular_core.Signal<string>;
+    protected readonly panelId: _angular_core.Signal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    ngOnInit(): void;
+    /** Toggles the expanded state if the accordion is not disabled. */
+    toggle(): void;
+    /**
+     * Set the expanded state imperatively. Reserved for
+     * `AccordionGroupCoordinator` to force-collapse siblings when a new
+     * accordion opens within the same group. Does not notify the
+     * coordinator (to avoid re-entrance loops).
+     */
+    setExpanded(expanded: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "fk-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "leadingText": { "alias": "leadingText"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultExpanded": { "alias": "defaultExpanded"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, ["leadingIconRef", "chevronRef"], ["[fkAccordionLeadingIcon]", "[fkAccordionChevron]", "*"], true, never>;
+}
+
+declare const FK_ACCORDION_CHEVRON: InjectionToken<FkAccordionChevronDirective>;
+declare class FkAccordionChevronDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkAccordionChevronDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkAccordionChevronDirective, "[fkAccordionChevron]", never, {}, {}, never, never, true, never>;
+}
+
+declare class AccordionGroupComponent {
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionGroupComponent, "fk-accordion-group", never, { "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Coordinator scoped to a single `<fk-accordion-group>`. Any
+ * `<fk-accordion>` rendered inside a group picks this up via DI and
+ * reports its toggle state. The coordinator enforces single-open:
+ * when a new accordion opens, the previously active one is collapsed.
+ */
+declare class AccordionGroupCoordinator {
+    private active;
+    register(accordion: AccordionComponent): void;
+    unregister(accordion: AccordionComponent): void;
+    notifyExpandedChange(accordion: AccordionComponent, nextExpanded: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionGroupCoordinator, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AccordionGroupCoordinator>;
+}
+
+declare const FK_ACCORDION_LEADING_ICON: InjectionToken<FkAccordionLeadingIconDirective>;
+declare class FkAccordionLeadingIconDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkAccordionLeadingIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkAccordionLeadingIconDirective, "[fkAccordionLeadingIcon]", never, {}, {}, never, never, true, never>;
+}
+
+export { AccordionComponent, AccordionGroupComponent, AccordionGroupCoordinator, FK_ACCORDION_CHEVRON, FK_ACCORDION_LEADING_ICON, FkAccordionChevronDirective, FkAccordionLeadingIconDirective };
+export type { AccordionSize };

package/types/frame-kit-ui-ng-ui-alert.d.ts

@@ -0,0 +1,34 @@
+import * as _frame_kit_ui_ng_ui_alert from '@frame-kit/ui-ng/ui/alert';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+declare class AlertComponent {
+    /** Semantic variant that drives the alert color scheme and icon. */
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
+    /** Override the text color as a CSS value, bypassing the variant token. */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /** Override the background color as a CSS value, bypassing the variant token. */
+    readonly backgroundColor: _angular_core.InputSignal<string | null>;
+    /** Override the border color as a CSS value, bypassing the variant token. */
+    readonly borderColor: _angular_core.InputSignal<string | null>;
+    readonly iconStartRef: _angular_core.Signal<_frame_kit_ui_ng_ui_alert.FkAlertIconStartDirective | undefined>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostColor(): string | null;
+    get hostBackgroundColor(): string | null;
+    get hostBorderColor(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "fk-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, ["iconStartRef"], ["[fkAlertIconStart]", "*"], true, never>;
+}
+
+declare const FK_ALERT_ICON_START: InjectionToken<FkAlertIconStartDirective>;
+declare class FkAlertIconStartDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkAlertIconStartDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkAlertIconStartDirective, "[fkAlertIconStart]", never, {}, {}, never, never, true, never>;
+}
+
+export { AlertComponent, FK_ALERT_ICON_START, FkAlertIconStartDirective };
+export type { AlertVariant };

package/types/frame-kit-ui-ng-ui-avatar-stack.d.ts

@@ -0,0 +1,38 @@
+import * as _frame_kit_ui_ng_ui_avatar from '@frame-kit/ui-ng/ui/avatar';
+import { AvatarSize } from '@frame-kit/ui-ng/ui/avatar';
+import * as _angular_core from '@angular/core';
+
+interface AvatarStackUser {
+    id: string;
+    name: string;
+    avatarUrl?: string | null;
+}
+type AvatarStackSize = AvatarSize;
+
+declare class AvatarStackComponent {
+    /** Array of user objects to render as overlapping avatars. */
+    readonly users: _angular_core.InputSignal<AvatarStackUser[]>;
+    /** Maximum number of avatars displayed before an overflow counter appears. */
+    readonly maxVisible: _angular_core.InputSignal<number>;
+    /** Size applied to every avatar in the stack. */
+    readonly size: _angular_core.InputSignal<_frame_kit_ui_ng_ui_avatar.AvatarSize>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** Fires when the user clicks an individual avatar, emitting that user's data. */
+    readonly avatarClick: _angular_core.OutputEmitterRef<AvatarStackUser>;
+    /** Fires when the user clicks the overflow counter showing hidden avatars. */
+    readonly overflowClick: _angular_core.OutputEmitterRef<void>;
+    readonly visibleUsers: _angular_core.Signal<AvatarStackUser[]>;
+    readonly overflowCount: _angular_core.Signal<number>;
+    readonly overflowTooltip: _angular_core.Signal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarStackComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarStackComponent, "fk-avatar-stack", never, { "users": { "alias": "users"; "required": false; "isSignal": true; }; "maxVisible": { "alias": "maxVisible"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "avatarClick": "avatarClick"; "overflowClick": "overflowClick"; }, never, never, true, never>;
+}
+
+export { AvatarStackComponent };
+export type { AvatarStackSize, AvatarStackUser };

package/types/frame-kit-ui-ng-ui-avatar.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+type AvatarSize = 'sm' | 'md' | 'lg';
+type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+
+declare class AvatarComponent {
+    /** Full display name used to derive initials when no explicit initials or image are provided. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** URL of the avatar image; falls back to initials when the image fails to load. */
+    readonly avatarUrl: _angular_core.InputSignal<string | null>;
+    /** Explicit two-character initials that override the name-derived fallback. */
+    readonly initials: _angular_core.InputSignal<string | null>;
+    /** Online/offline/away status to reflect on the indicator dot. */
+    readonly status: _angular_core.InputSignal<AvatarStatus | null>;
+    /** When true, renders the status indicator dot over the avatar. */
+    readonly showStatus: _angular_core.InputSignal<boolean>;
+    /** Controls the avatar size. */
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly derivedInitials: _angular_core.Signal<string>;
+    readonly showIndicator: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    readonly imgError: {
+        value: boolean;
+    };
+    onImgError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "fk-avatar", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "showStatus": { "alias": "showStatus"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AvatarComponent };
+export type { AvatarSize, AvatarStatus };

package/types/frame-kit-ui-ng-ui-badge.d.ts

@@ -0,0 +1,33 @@
+import * as _angular_core from '@angular/core';
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+
+declare class BadgeComponent {
+    /** Visual style variant that drives the badge color scheme. */
+    readonly variant: _angular_core.InputSignal<BadgeVariant>;
+    /** Override the text color as a CSS value. */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /** Override the background color as a CSS value. */
+    readonly backgroundColor: _angular_core.InputSignal<string | null>;
+    /** Override the border color as a CSS value; renders as a 1px solid border. */
+    readonly borderColor: _angular_core.InputSignal<string | null>;
+    /** Custom padding shorthand applied to all sides. */
+    readonly padding: _angular_core.InputSignal<string | null>;
+    /** Custom inline (left/right) padding applied independently. */
+    readonly paddingInline: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostColor(): string | null;
+    get hostBackgroundColor(): string | null;
+    get hostBorder(): string | null;
+    get hostPadding(): string | null;
+    get hostPaddingInline(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "fk-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "paddingInline": { "alias": "paddingInline"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { BadgeComponent };
+export type { BadgeVariant };

package/types/frame-kit-ui-ng-ui-breadcrumb.d.ts

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+interface BreadcrumbItem {
+    label: string;
+    routerLink?: string | any[];
+    icon?: string;
+}
+
+/**
+ * Generic route-driven breadcrumb.
+ *
+ * Consumers pass an ordered list of crumbs — the final crumb is always the
+ * "current location" (rendered as plain text with `aria-current="page"`),
+ * every earlier crumb with a `routerLink` renders as an `<a [routerLink]>`
+ * and navigates via the Angular router. Earlier crumbs without a
+ * `routerLink` render as plain text so consumers can include
+ * non-navigable ancestors (e.g. a section header) when needed.
+ *
+ * The chevron separator between crumbs ships as an inline SVG so the
+ * component renders correctly with no consumer setup. Consumers can
+ * replace the separator by projecting an `<ng-template #fkBreadcrumbSeparator>`
+ * with any content — the template is instantiated once per gap between
+ * crumbs.
+ *
+ * For breadcrumbs that reflect a tree/hierarchy selection (e.g. org nodes),
+ * use `fk-node-tree-breadcrumb` instead — that component walks a `TreeNode`
+ * array by `parentId` and emits node-select events rather than navigating.
+ */
+declare class BreadcrumbComponent {
+    /** Ordered list of crumb items; the last item is always treated as the current page. */
+    readonly items: _angular_core.InputSignal<readonly BreadcrumbItem[]>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly separatorRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    readonly role = "navigation";
+    get hostAriaLabel(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "fk-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["separatorRef"], never, true, never>;
+}
+
+export { BreadcrumbComponent };
+export type { BreadcrumbItem };