@frame-kit/ui-ng 0.0.1

package/types/frame-kit-ui-ng-directives-infinite-scroll.d.ts

@@ -0,0 +1,42 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+
+/**
+ * Infinite Scroll Directive
+ *
+ * Place on a sentinel element at the bottom of a scrollable list.
+ * Uses IntersectionObserver — no scroll event listeners, no throttling.
+ *
+ * When the sentinel enters the viewport, emits `scrolled`.
+ * Remove the sentinel from the DOM (via @if) to stop triggering.
+ *
+ * @example
+ * ```html
+ * @for (item of items(); track item.id) {
+ *   <div>{{ item.name }}</div>
+ * }
+ *
+ * @if (hasMore()) {
+ *   <div fkInfiniteScroll (scrolled)="loadNextPage()">
+ *     @if (loading()) { <fk-loader /> }
+ *   </div>
+ * }
+ * ```
+ */
+declare class FkInfiniteScrollDirective implements AfterViewInit, OnDestroy {
+    private readonly el;
+    private readonly platformId;
+    private observer;
+    /** Visibility threshold (0–1). Default 0.1 = 10% visible triggers. */
+    readonly threshold: _angular_core.InputSignal<number>;
+    /** Root margin to expand/shrink the detection area. */
+    readonly rootMargin: _angular_core.InputSignal<string>;
+    /** Emits when the sentinel element enters the viewport. */
+    readonly scrolled: _angular_core.OutputEmitterRef<void>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkInfiniteScrollDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkInfiniteScrollDirective, "[fkInfiniteScroll]", never, { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; }, never, never, true, never>;
+}
+
+export { FkInfiniteScrollDirective };

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

@@ -0,0 +1,51 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Visual treatment applied while the spotlight is active.
+ *
+ * - `pulse` (default) — animated ring around the element. Best for
+ *   small, action-anchored targets like buttons.
+ * - `overlay` — static tinted overlay over the element with a brief
+ *   fade in/out. Better for wide surfaces (list columns, panels) where
+ *   the pulsing animation would feel busy.
+ */
+type SpotlightTreatment = 'pulse' | 'overlay';
+/**
+ * Marks an element to react when its spotlight key is active. By
+ * default the visual is a pulsing ring (`pulse` treatment) drawn by the
+ * `.fk-spotlight-target::after` pseudo-element. Pass `treatment="overlay"`
+ * for a static tinted overlay that's friendlier on wide elements.
+ *
+ * Many targets may share the same key — they all activate in sync, and
+ * each may pick its own treatment.
+ */
+declare class SpotlightTargetDirective {
+    /** Spotlight key this element reacts to; matches the key set on the trigger. */
+    readonly fkSpotlightTarget: _angular_core.InputSignal<string>;
+    /** Visual treatment applied when the spotlight is active — `"pulse"` animates a ring, `"overlay"` applies a tinted fade. */
+    readonly treatment: _angular_core.InputSignal<SpotlightTreatment>;
+    private readonly spotlight;
+    protected readonly active: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpotlightTargetDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SpotlightTargetDirective, "[fkSpotlightTarget]", never, { "fkSpotlightTarget": { "alias": "fkSpotlightTarget"; "required": true; "isSignal": true; }; "treatment": { "alias": "treatment"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an element as the hover/focus zone that activates a spotlight key.
+ *
+ * Apply to a container — e.g. a docs-panel section — so the activation
+ * area is generous, not just the button itself. Any number of triggers
+ * can broadcast the same key; the last enter wins.
+ */
+declare class SpotlightTriggerDirective {
+    /** Spotlight key this element activates on hover or focus. */
+    readonly fkSpotlightTrigger: _angular_core.InputSignal<string>;
+    private readonly spotlight;
+    protected onEnter(): void;
+    protected onLeave(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpotlightTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SpotlightTriggerDirective, "[fkSpotlightTrigger]", never, { "fkSpotlightTrigger": { "alias": "fkSpotlightTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SpotlightTargetDirective, SpotlightTriggerDirective };
+export type { SpotlightTreatment };

package/types/frame-kit-ui-ng-directives-tooltip.d.ts

@@ -0,0 +1,70 @@
+import * as _angular_core from '@angular/core';
+
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
+declare class TooltipDirective {
+    /** Text content displayed inside the tooltip bubble. */
+    readonly fkTooltip: _angular_core.InputSignal<string>;
+    /** Preferred position of the tooltip relative to the anchor element. */
+    readonly fkTooltipPosition: _angular_core.InputSignal<TooltipPosition>;
+    /** Gap in pixels between the anchor element and the tooltip bubble. */
+    readonly fkTooltipOffset: _angular_core.InputSignal<number>;
+    /** Delay in milliseconds before the tooltip appears after the trigger event. */
+    readonly fkTooltipShowDelay: _angular_core.InputSignal<number>;
+    /** Delay in milliseconds before the tooltip hides after the leave event. */
+    readonly fkTooltipHideDelay: _angular_core.InputSignal<number>;
+    /** When true, suppresses all tooltip display entirely. */
+    readonly fkTooltipDisabled: _angular_core.InputSignal<boolean>;
+    /** Additional CSS class names applied to the tooltip root element. */
+    readonly fkTooltipClassName: _angular_core.InputSignal<string>;
+    private readonly elRef;
+    private readonly renderer;
+    private readonly ngZone;
+    private readonly destroyRef;
+    private tooltipEl;
+    private tooltipId;
+    private showTimeout;
+    private hideTimeout;
+    private scrollListeners;
+    private resizeListener;
+    private escapeListener;
+    private visible;
+    constructor();
+    private readonly onMouseEnter;
+    private readonly onMouseLeave;
+    private readonly onFocusIn;
+    private readonly onFocusOut;
+    private readonly onTouchStart;
+    private readonly onEscape;
+    private scheduleShow;
+    private scheduleHide;
+    private show;
+    private hide;
+    private forceHide;
+    private createTooltipElement;
+    private removeTooltipElement;
+    private buildTooltipClasses;
+    private updatePosition;
+    private attachPositionListeners;
+    private detachPositionListeners;
+    private clearTimeouts;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[fkTooltip]", never, { "fkTooltip": { "alias": "fkTooltip"; "required": true; "isSignal": true; }; "fkTooltipPosition": { "alias": "fkTooltipPosition"; "required": false; "isSignal": true; }; "fkTooltipOffset": { "alias": "fkTooltipOffset"; "required": false; "isSignal": true; }; "fkTooltipShowDelay": { "alias": "fkTooltipShowDelay"; "required": false; "isSignal": true; }; "fkTooltipHideDelay": { "alias": "fkTooltipHideDelay"; "required": false; "isSignal": true; }; "fkTooltipDisabled": { "alias": "fkTooltipDisabled"; "required": false; "isSignal": true; }; "fkTooltipClassName": { "alias": "fkTooltipClassName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const TOOLTIP_STYLES = "\n.fk-tooltip {\n  position: fixed;\n  z-index: var(--fk-tooltip-z-index, 1100);\n  max-width: var(--fk-tooltip-max-width, 20rem);\n  padding: var(--fk-tooltip-padding, var(--fk-rhythm-1, 0.25rem) var(--fk-rhythm-2, 0.5rem));\n  border-radius: var(--fk-tooltip-border-radius, var(--fk-radius-sm, 0.25rem));\n  background-color: var(--fk-tooltip-bg, var(--fk-color-text, #1f2d3d));\n  color: var(--fk-tooltip-color, var(--fk-color-surface, #ffffff));\n  font-family: var(--fk-tooltip-font-family, var(--fk-font-family-base, sans-serif));\n  font-size: var(--fk-tooltip-font-size, var(--fk-typography-caption-font-size, 0.75rem));\n  font-weight: var(--fk-tooltip-font-weight, var(--fk-font-weight-medium, 500));\n  line-height: var(--fk-tooltip-line-height, var(--fk-typography-caption-line-height, 1.3));\n  box-shadow: var(--fk-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));\n  pointer-events: none;\n  white-space: normal;\n  word-wrap: break-word;\n  opacity: 0;\n  transform: scale(0.96);\n  transition:\n    opacity var(--fk-tooltip-enter-duration, 0.15s) var(--fk-tooltip-easing, ease-out),\n    transform var(--fk-tooltip-enter-duration, 0.15s) var(--fk-tooltip-easing, ease-out);\n}\n.fk-tooltip--visible {\n  opacity: 1;\n  transform: scale(1);\n}\n.fk-tooltip--hiding {\n  opacity: 0;\n  transform: scale(0.96);\n  transition-duration: var(--fk-tooltip-exit-duration, 0.1s);\n}\n.fk-tooltip__text {\n  display: block;\n}\n.fk-tooltip__arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n}\n.fk-tooltip--top .fk-tooltip__arrow {\n  bottom: calc(-1 * var(--fk-tooltip-arrow-size, 6px));\n  left: var(--fk-tooltip-arrow-offset, 50%);\n  transform: translateX(-50%);\n  border-width: var(--fk-tooltip-arrow-size, 6px) var(--fk-tooltip-arrow-size, 6px) 0;\n  border-color: var(--fk-tooltip-bg, var(--fk-color-text, #1f2d3d)) transparent transparent;\n}\n.fk-tooltip--bottom .fk-tooltip__arrow {\n  top: calc(-1 * var(--fk-tooltip-arrow-size, 6px));\n  left: var(--fk-tooltip-arrow-offset, 50%);\n  transform: translateX(-50%);\n  border-width: 0 var(--fk-tooltip-arrow-size, 6px) var(--fk-tooltip-arrow-size, 6px);\n  border-color: transparent transparent var(--fk-tooltip-bg, var(--fk-color-text, #1f2d3d));\n}\n.fk-tooltip--left .fk-tooltip__arrow {\n  right: calc(-1 * var(--fk-tooltip-arrow-size, 6px));\n  top: var(--fk-tooltip-arrow-offset, 50%);\n  transform: translateY(-50%);\n  border-width: var(--fk-tooltip-arrow-size, 6px) 0 var(--fk-tooltip-arrow-size, 6px) var(--fk-tooltip-arrow-size, 6px);\n  border-color: transparent transparent transparent var(--fk-tooltip-bg, var(--fk-color-text, #1f2d3d));\n}\n.fk-tooltip--right .fk-tooltip__arrow {\n  left: calc(-1 * var(--fk-tooltip-arrow-size, 6px));\n  top: var(--fk-tooltip-arrow-offset, 50%);\n  transform: translateY(-50%);\n  border-width: var(--fk-tooltip-arrow-size, 6px) var(--fk-tooltip-arrow-size, 6px) var(--fk-tooltip-arrow-size, 6px) 0;\n  border-color: transparent var(--fk-tooltip-bg, var(--fk-color-text, #1f2d3d)) transparent transparent;\n}\n@media (prefers-reduced-motion: reduce) {\n  .fk-tooltip {\n    transition: none;\n  }\n}\n";
+declare function injectTooltipStyles(): void;
+
+interface PositionResult {
+    x: number;
+    y: number;
+    actualPosition: TooltipPosition;
+    arrowOffset: number;
+}
+declare function computeTooltipPosition(anchorRect: DOMRect, tooltipWidth: number, tooltipHeight: number, preferred: TooltipPosition, offset: number, viewport: {
+    width: number;
+    height: number;
+}): PositionResult;
+
+export { TOOLTIP_STYLES, TooltipDirective, computeTooltipPosition, injectTooltipStyles };
+export type { PositionResult, TooltipPosition };

package/types/frame-kit-ui-ng-docs-endpoint-link.d.ts

@@ -0,0 +1,43 @@
+import * as _angular_core from '@angular/core';
+import { MethodBadgeMethod } from '@frame-kit/ui-ng/docs/method-badge';
+export { MethodBadgeMethod as EndpointLinkMethod } from '@frame-kit/ui-ng/docs/method-badge';
+
+/**
+ * Sidebar/list item for an API endpoint in developer documentation.
+ *
+ * Renders a leading `fk-method-badge` followed by the endpoint label as a
+ * single clickable router link. Used to list operations (e.g. "GET List
+ * permissions", "POST Create identity") in a documentation sidebar or any
+ * denser endpoint index.
+ *
+ * Active state is driven by `routerLinkActive`, matching the behavior of
+ * `fk-sidenav-link` so every router-aware nav item in the library resolves
+ * active state the same way.
+ *
+ * When rendered inside an `fk-app-shell`, clicks also call `dismissSidenav`
+ * on the ancestor shell — this closes the mobile overlay so the user lands
+ * directly on the selected endpoint. On desktop it's a no-op.
+ */
+declare class EndpointLinkComponent {
+    private readonly shell;
+    readonly method: _angular_core.InputSignal<MethodBadgeMethod>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly routerLink: _angular_core.InputSignal<string | any[]>;
+    /**
+     * Whether to require an exact URL match for the active state. Defaults to
+     * false — each endpoint has a unique final path segment so prefix matching
+     * resolves to the same thing in practice.
+     */
+    readonly exact: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    readonly activeOptions: _angular_core.Signal<{
+        exact: boolean;
+    }>;
+    get hostClass(): string;
+    protected dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EndpointLinkComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EndpointLinkComponent, "fk-endpoint-link", never, { "method": { "alias": "method"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": true; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { EndpointLinkComponent };

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

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Supported HTTP methods for `fk-method-badge`. Lowercased to match OpenAPI
+ * conventions so consumers can pass spec values directly without translation.
+ */
+type MethodBadgeMethod = 'get' | 'post' | 'put' | 'patch' | 'delete' | 'head' | 'options';
+
+/**
+ * Small rectangular badge showing an HTTP method label (e.g. `GET`, `POST`).
+ *
+ * Each method has its own hue so consumers can identify the verb in a dense
+ * list. Background colors are exposed as CSS variables
+ * (`--fk-method-badge-bg-get`, etc.) with defaults baked in so the component
+ * renders correctly without a theme.
+ */
+declare class MethodBadgeComponent {
+    readonly method: _angular_core.InputSignal<MethodBadgeMethod>;
+    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>;
+    readonly label: _angular_core.Signal<string>;
+    get hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MethodBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MethodBadgeComponent, "fk-method-badge", never, { "method": { "alias": "method"; "required": true; "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 { MethodBadgeComponent };
+export type { MethodBadgeMethod };