@jimka/typescript-ui 0.6.0 → 0.8.0

package/dist/lib/types/core/ClassStyleRules.d.ts

@@ -1,5 +1,8 @@
+import { Position } from "../primitive/Position.js";
+import { type BorderOptions } from "../primitive/Border.js";
+import { Insets } from "../primitive/Insets.js";
 export declare const COMPONENT_CLASS = "ts-ui-component";
-interface ClassStyleDefaults {
+export interface StyleBag {
     visible?: boolean | null;
     displayed?: boolean;
     minSize?: {
@@ -11,8 +14,70 @@ interface ClassStyleDefaults {
         height: number;
     } | null;
     overflow?: string | null;
+    overflowX?: string | null;
+    overflowY?: string | null;
     cursor?: string | null;
+    userSelect?: string | null;
+    outline?: string | null;
+    foregroundColor?: string | null;
+    font?: TextStyleBag | null;
+    background?: string | null;
+    backgroundColor?: string | null;
+    backgroundImage?: string | null;
+    shadow?: string | null;
+    borderRadius?: string | null;
+    borderColor?: string | null;
+    border?: BorderOptions | string | null;
+    marginLeft?: string | null;
+    boxSizing?: string | null;
+    position?: Position;
+    whiteSpace?: string | null;
+    margin?: string | null;
+    padding?: Insets | null;
 }
-type ClassStyleBag = Readonly<Record<string, string>>;
-export declare function ensureClassStyleRule(ctor: Function, defaults: ClassStyleDefaults): ClassStyleBag | null;
-export {};
+export interface TextStyleBag {
+    fontFamily?: string | null;
+    fontKerning?: string | null;
+    fontSize?: string | null;
+    fontSizeAdjust?: string | null;
+    fontStretch?: string | null;
+    fontStyle?: string | null;
+    fontVariant?: string | null;
+    fontWeight?: string | null;
+    textAlign?: string | null;
+    textShadow?: string | null;
+    lineHeight?: string | null;
+    textOverflow?: string | null;
+}
+export type ResolvedStyleBag = Readonly<Record<string, string | null>>;
+export declare function registerStyleChainRoot(ctor: Function): void;
+export declare function resolveDeclarations(defaults: StyleBag): Record<string, string | null>;
+export declare function resolvePartialDeclarations(bag: StyleBag): Record<string, string | null>;
+export interface StyleLayer {
+    readonly authored: StyleBag;
+    readonly resolved: ResolvedStyleBag;
+}
+export interface StyleStateSpec {
+    readonly selector: string;
+    readonly extract: (defaults: StyleBag) => StyleBag;
+}
+export interface ResolvedStyleState {
+    readonly selector: string;
+    readonly guardedSuffix: string;
+    readonly layer: StyleLayer;
+}
+export declare function resolveStyleStates(rawCtor: Function): readonly ResolvedStyleState[];
+export declare function restingGuardSuffix(ctor: Function): string;
+export declare function ensureClassStyleRule(rawCtor: Function, defaults: StyleBag): StyleLayer | null;
+export declare function getStyleClassChain(rawCtor: Function): readonly string[];
+export declare function ensureClassStateRule(ctor: Function, suffix: string, declarations: Record<string, string | null>): ResolvedStyleBag | null;
+export interface StyleTrait {
+    readonly name: string;
+    readonly declarations: StyleBag;
+}
+export declare const TRAIT_CLASS_PREFIX = "ts-ui-trait-";
+export declare function traitClassName(trait: StyleTrait): string;
+export declare function resolveStyleTraits(rawCtor: Function): readonly StyleTrait[];
+export declare function resolveTraitStyleDefaults(rawCtor: Function): StyleBag;
+export declare function ensureTraitStyleRule(trait: StyleTrait): StyleLayer | null;
+export declare function traitTopStateConflictKeys(ctor: Function, trait: StyleTrait): readonly string[];

package/dist/lib/types/core/Component.d.ts

@@ -9,6 +9,8 @@ import { Position } from "../primitive/Position.js";
 import { Aria } from "../core/Aria.js";
 import { Event } from "../core/Event.js";
 import { StyleRule } from "../core/StyleTarget.js";
+import { ListenerBag } from "../core/ListenerBag.js";
+import { type StyleBag, type StyleLayer, type StyleStateSpec, type StyleTrait, type TextStyleBag } from "../core/ClassStyleRules.js";
 export interface Comparator<V, U> {
     (a: V, b: U): number;
 }
@@ -47,6 +49,7 @@ export interface ComponentOptions {
     shadow?: string;
     outline?: string;
     cursor?: string;
+    userSelect?: string;
     preferredSize?: Size;
     minSize?: Size;
     maxSize?: Size;
@@ -65,40 +68,40 @@ export interface ComponentOptions {
     attributes?: Record<string, string>;
     components?: Array<Component | ComponentFactory | ConstrainedComponent>;
     styleRules?: ComponentStyleRuleSpec[];
+    styleTrait?: StyleTrait | null;
 }
 declare class Component<TOptions extends ComponentOptions = ComponentOptions> extends BaseObject {
+    protected static readonly ownStyleStates: readonly StyleStateSpec[];
     private _components;
     private _firstLayoutCallbacks;
     private _element;
     private readonly _ownedHandles;
     private readonly _ownedSelectors;
     private readonly _themeCleanups;
+    private readonly _destroyCleanups;
     private _tag;
     private _elementAttributes;
-    private _boxSizing;
     private _left;
     private _top;
     private _width;
     private _height;
+    private _layoutDirty;
     private _translateX;
     private _translateY;
     private _scrollLeft;
     private _scrollTop;
     private _willChange;
     private _transition;
-    private _position;
     private _onPreferredSizeChange;
     private _onConstraintSizeChange;
-    private _overflowX;
-    private _overflowY;
     private _wheelScroller;
     private _contain;
     private _animation;
     private _lastEffectiveVisible;
     private _pendingRematerialize;
     private _refocusOnRematerialize;
+    private _destroyed;
     private _animationPlayState;
-    private _outline;
     private _appearance;
     private _borderImage;
     private _transform;
@@ -112,12 +115,20 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     private _autoCommitAttributes;
     private _layoutPaused;
     private _aria;
-    private _whiteSpace;
-    private _userSelect;
     private _verticalAlign;
     private _styleRule;
     private _inlineStyle;
-    private _inheritedStyleBag;
+    private _classLayer;
+    private _instanceTraitLayer;
+    private _classTraitLayers;
+    private _instanceTraitToken;
+    private _instanceStyle;
+    private _resolvedCache;
+    private _pendingStyleKeys;
+    private _instanceStateStyle;
+    private _pendingStateKeys;
+    private _activeStates;
+    private _valueStyleTokens;
     private _clipFrame;
     private _clipFrameStyle;
     private _contentFrame;
@@ -132,6 +143,8 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     protected applyChromeOptions(options: TOptions): void;
     protected applyListeners(listeners: Record<string, ((...args: any[]) => void) | undefined> | undefined): void;
     protected subscribeTheme(listener: () => void): void;
+    onDestroy(cleanup: () => void): void;
+    protected registerListenerBag<T extends string>(bag: ListenerBag<T>): ListenerBag<T>;
     dispose(): void;
     protected destructor(): void;
     protected trackHandle(handle: Handle): Handle;
@@ -172,6 +185,9 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     setId(id: string): this;
     getName(): string | null;
     setName(name: string | null): this;
+    getStyleTrait(): StyleTrait | null;
+    setStyleTrait(trait: StyleTrait | null): this;
+    private ensureTraitLayer;
     getDataAttribute(key: string): string | undefined;
     setDataAttribute(key: string, value: string): this;
     delDataAttribute(key: string): this;
@@ -185,7 +201,7 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     isEffectivelyVisible(): boolean;
     protected onEffectiveVisibilityChange(effective: boolean): void;
     propagateEffectiveVisibility(effective: boolean): void;
-    private scheduleEffectiveVisibilityReconcile;
+    protected scheduleEffectiveVisibilityReconcile(): void;
     getInsets(): Insets;
     setInsets(insets: Insets): this;
     clearInsets(): this;
@@ -212,6 +228,7 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     getBorder(): BorderOptions | null;
     clearBorder(): this;
     setBorder(options: BorderOptions | string): this;
+    protected cacheBorderSpec(options: BorderOptions | string): void;
     getCursor(): string | null;
     setCursor(cursor: string): this;
     clearCursor(): this;
@@ -252,6 +269,7 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     setMinSize(size: Size): this;
     getMaxSize(): Size | null;
     setMaxSize(size: Size): this;
+    protected notifyConstraintSizeChange(): void;
     getInnerSize(): Size | null;
     getContentBounds(): {
         x: number;
@@ -268,6 +286,10 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     setVerticalAlign(align: string): this;
     clearVerticalAlign(): this;
     setSize(size: Size): this;
+    setBounds(x: number, y: number, width: number, height: number): boolean;
+    applyBounds(x: number, y: number, width: number, height: number): this;
+    protected canSkipUnchangedLayout(): boolean;
+    private writeBounds;
     getWidth(): number;
     setWidth(width: number): this;
     protected clampsToContentSize(): boolean;
@@ -342,14 +364,45 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     clearUserSelect(): this;
     focus(preventScroll?: boolean): this;
     unfocus(): this;
-    private writeRuleDeclaration;
+    protected styleLayers(): ReadonlyArray<StyleLayer>;
+    protected instanceLayer(): StyleLayer;
+    protected instanceStateLayer(selector: string): StyleLayer | null;
+    protected classStateLayer(selector: string): StyleLayer | null;
+    protected layersBelowInstance(): ReadonlyArray<StyleLayer>;
+    protected matchesLowerTier(key: string, value: string | null): boolean;
+    protected writeStyle(patch: StyleBag): void;
+    protected cacheStyleValue<K extends keyof StyleBag>(key: K, value: StyleBag[K]): void;
+    protected resolveStyleValue<K extends keyof StyleBag>(key: K): NonNullable<StyleBag[K]> | null;
+    protected resolveOverflowAxis(axisKey: "overflowX" | "overflowY"): string | null;
+    protected resolveFontValue<K extends keyof TextStyleBag>(key: K): NonNullable<TextStyleBag[K]> | null;
+    protected writeStateStyle(selector: string, patch: StyleBag): void;
+    protected pinStateStyle(selector: string, patch: StyleBag): void;
+    protected resolveStateStyleValue<K extends keyof StyleBag>(selector: string, key: K): NonNullable<StyleBag[K]> | null;
+    protected flushStyleBag(): void;
+    protected onStyleResolved(keys: ReadonlySet<string>): void;
+    protected flushStateStyleBag(): void;
+    protected ensureSharedStateRule(selectorSuffix: string, declarations: Record<string, string | null>): void;
+    private _isolationSuppressed?;
+    protected isIsolationSuppressed(): boolean;
+    protected suppressIsolation(suppressed: boolean): void;
+    protected isRestingChromeIsolated(): boolean;
+    protected restingIsolationKeys(): ReadonlySet<string>;
+    protected _restingStyleRule?: StyleRule;
+    protected get restingStyleRule(): StyleRule;
+    protected materialiseRestingRule(): void;
+    setStyleState(name: string, active: boolean): this;
+    isStyleState(name: string): boolean;
+    protected writeGuardedCSSRule(key: string, value: string | null): void;
+    protected setValueStyleState(prefix: string, cssValue: string, patch: StyleBag): void;
+    private valueClassGuardSuffix;
+    protected getValueStyleToken(prefix: string): string | null;
+    protected clearValueStyleState(prefix: string): void;
+    protected getClassStyleDefaults(): StyleBag;
     applyStyle(element: Handle): this;
-    private applyBoxAndVisibilityStyles;
     private replayGeometryStyles;
-    private applySizeConstraintStyles;
-    private applyOverflowStyles;
-    private applyChromeStyles;
     private applyMiscInlineStyles;
+    protected applySubclassStyles(): void;
+    private materialiseWhenNeeded;
     protected materialiseStyleRule(): void;
     private materialiseDeferredRules;
     sync(): void;
@@ -378,6 +431,8 @@ declare class Component<TOptions extends ComponentOptions = ComponentOptions> ex
     doLayout(): this;
     onFirstLayout(callback: () => void): this;
     private runFirstLayoutCallbacks;
+    invalidateLayout(): this;
+    isLayoutDirty(): boolean;
     scheduleLayout(): this;
     notifyIntrinsicSizeChanged(): this;
     static afterNextLayout(callback: () => void): void;

package/dist/lib/types/core/DOM.d.ts

@@ -1,4 +1,4 @@
-import type { TextMeasureOptions, TextMetrics } from "../core/Util.js";
+import type { TextMeasureOptions, TextMeasureRequest, TextMetrics } from "../core/Util.js";
 import type { Size } from "../primitive/Size.js";
 import type { Component } from "../core/Component.js";
 export interface Rect {
@@ -83,6 +83,8 @@ export interface DOMSink {
     replaceLocationHash(hash: string): void;
     pushHistoryPath(url: string): void;
     replaceHistoryPath(url: string): void;
+    writeClipboardText(text: string): void;
+    clearDocumentSelection(): void;
     addListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | AddEventListenerOptions): void;
     removeListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | EventListenerOptions): void;
     dispatchEvent(target: Handle, event: Event): void;
@@ -118,6 +120,7 @@ export interface DOMSource {
     getElementRect(handle: Handle): Rect;
     measureText(text: string, options?: TextMeasureOptions): TextMetrics;
     measureTextWidths(texts: string[], options?: TextMeasureOptions): number[];
+    measureTexts(requests: TextMeasureRequest[]): TextMetrics[];
     resolveFontSizePx(fontSizeCSS: string): number;
     measureFontMetrics(): {
         ascent: number;
@@ -146,6 +149,8 @@ export interface DOMSource {
     contains(ancestor: Handle, node: Handle | null): boolean;
     querySelector(root: Handle, selector: string): Handle | null;
     querySelectorAll(root: Handle, selector: string): Handle[];
+    countElements(): number;
+    getRuleCssText(rule: CSSStyleRule): string;
     matches(handle: Handle, selector: string): boolean;
     getParentElement(handle: Handle): Handle | null;
     getParentNode(handle: Handle): Handle | null;
@@ -222,6 +227,8 @@ export declare class ProductionDOMSink implements DOMSink {
     replaceLocationHash(hash: string): void;
     pushHistoryPath(url: string): void;
     replaceHistoryPath(url: string): void;
+    writeClipboardText(text: string): void;
+    clearDocumentSelection(): void;
     addListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | AddEventListenerOptions): void;
     removeListener<T extends Event = Event>(target: Handle, type: string, handler: (event: T) => void, options?: boolean | EventListenerOptions): void;
     dispatchEvent(target: Handle, event: Event): void;
@@ -257,6 +264,7 @@ export declare class ProductionDOMSource implements DOMSource {
     getElementRect(handle: Handle): Rect;
     measureText(text: string, options?: TextMeasureOptions): TextMetrics;
     measureTextWidths(texts: string[], options?: TextMeasureOptions): number[];
+    measureTexts(requests: TextMeasureRequest[]): TextMetrics[];
     resolveFontSizePx(fontSizeCSS: string): number;
     measureFontMetrics(): {
         ascent: number;
@@ -285,6 +293,8 @@ export declare class ProductionDOMSource implements DOMSource {
     contains(ancestor: Handle, node: Handle | null): boolean;
     querySelector(root: Handle, selector: string): Handle | null;
     querySelectorAll(root: Handle, selector: string): Handle[];
+    countElements(): number;
+    getRuleCssText(rule: CSSStyleRule): string;
     matches(handle: Handle, selector: string): boolean;
     getParentElement(handle: Handle): Handle | null;
     getParentNode(handle: Handle): Handle | null;

package/dist/lib/types/core/Diagnostics.d.ts

@@ -0,0 +1,22 @@
+export interface DiagnosticsCounters {
+    componentsConstructed: number;
+    componentsDestroyed: number;
+    bagListenersAdded: number;
+    bagListenersRemoved: number;
+    layoutPasses: number;
+    layoutFlushes: number;
+    layoutFlushTotalMs: number;
+    layoutFlushMaxMs: number;
+}
+export declare namespace Diagnostics {
+    function noteComponentConstructed(): void;
+    function noteComponentDestroyed(): void;
+    function noteBagListenerAdded(): void;
+    function noteBagListenerRemoved(): void;
+    function noteLayoutPass(): void;
+    function noteLayoutFlush(durationMs: number): void;
+    function isTimingEnabled(): boolean;
+    function setTimingEnabled(enabled: boolean): void;
+    function counters(): DiagnosticsCounters;
+    function _reset(): void;
+}

package/dist/lib/types/core/Event.d.ts

@@ -30,4 +30,11 @@ export declare namespace Event {
     function _registeredComponentIds(): readonly string[];
     function addViewportListener(component: Component, type: string, listener: Listener): void;
     function removeViewportListener(component: Component, type: string, listener: Listener): void;
+    interface ListenerCounts {
+        exact: number;
+        subtree: number;
+        viewport: number;
+        total: number;
+    }
+    function listenerCounts(): ListenerCounts;
 }

package/dist/lib/types/core/LayerManager.d.ts

@@ -13,6 +13,7 @@ export interface DismissableLayer {
 export declare namespace LayerManager {
     const Band: {
         readonly Window: number;
+        readonly PinnedWindow: number;
         readonly Popover: number;
         readonly Dropdown: number;
         readonly Dialog: number;
@@ -23,6 +24,8 @@ export declare namespace LayerManager {
     function unregister(layer: DismissableLayer): void;
     function containsAcrossLayers(layer: DismissableLayer, node: Handle | null): boolean;
     function getTopLayer(): DismissableLayer | null;
+    function isTopmostInputLayer(layer: DismissableLayer): boolean;
     function bringToFront(layer: DismissableLayer): void;
+    function setBand(layer: DismissableLayer, band: number): void;
     function getZIndex(layer: DismissableLayer): number;
 }

package/dist/lib/types/core/ListenerBag.d.ts

@@ -4,4 +4,5 @@ export declare class ListenerBag<TEvent extends string> {
     remove(event: TEvent, listener: Function): void;
     fire(event: TEvent, ...payload: unknown[]): void;
     get(event: TEvent): Function[];
+    clear(): void;
 }

package/dist/lib/types/core/StyleTarget.d.ts

@@ -9,6 +9,7 @@ declare abstract class StyleTarget<T> {
     flush(): void;
     isMaterialized(): boolean;
     hasQueuedWrites(): boolean;
+    hasQueuedDeclarations(): boolean;
     protected materialize(target: T): void;
     protected abstract writeStyle(key: string, value: string | null): void;
     protected abstract flushDirty(dirty: Record<string, string | null>): void;
@@ -16,6 +17,7 @@ declare abstract class StyleTarget<T> {
 export type StyleRuleScope = {
     scope: "class";
     name: string;
+    suffix?: string;
 } | {
     scope: "component";
     name: string;
@@ -31,6 +33,18 @@ export type StyleRuleSpec = StyleRuleScope & {
 export declare function disposeStyleRule(selector: string): void;
 export declare function _ruleCacheHas(selector: string): boolean;
 export declare function _ruleCacheKeys(): readonly string[];
+export interface StyleRuleCounts {
+    instance: number;
+    class: number;
+    other: number;
+    total: number;
+}
+export declare function styleRuleCounts(): StyleRuleCounts;
+export interface StyleRuleEntry {
+    selector: string;
+    cssText: string;
+}
+export declare function styleRuleEntries(): StyleRuleEntry[];
 declare class StyleRule extends StyleTarget<CSSStyleRule> {
     private _factory;
     private _selector;

package/dist/lib/types/core/StyleTraits.d.ts

@@ -0,0 +1,4 @@
+import type { StyleTrait } from "../core/ClassStyleRules.js";
+export declare const INPUT_CHROME_TRAIT: StyleTrait;
+export declare const GLYPH_XS_INK_TRAIT: StyleTrait;
+export declare const GLYPH_MD_INK_TRAIT: StyleTrait;

package/dist/lib/types/core/Theme.d.ts

@@ -204,6 +204,7 @@ export interface Theme {
             padding: number;
             background: string;
             readonlyBackground: string;
+            rangeSelectedBackground: string;
             requiredEmptyOutlineColor: string;
             color: string;
             border: string;
@@ -472,9 +473,12 @@ export interface Theme {
     };
     scale: {
         base: number;
-        titleGlyph: ScaleToken;
+        glyphXs: ScaleToken;
+        glyphSm: ScaleToken;
+        glyphMd: ScaleToken;
+        glyphLg: ScaleToken;
+        glyphXl: ScaleToken;
         tabClose: ScaleToken;
-        tabCloseGlyph: ScaleToken;
         tabButtonInset: ScaleToken;
     };
 }

package/dist/lib/types/core/Util.d.ts

@@ -15,6 +15,10 @@ export interface TextMetrics {
     height: number;
     baseline: number;
 }
+export interface TextMeasureRequest {
+    text: string;
+    options?: TextMeasureOptions;
+}
 export declare namespace Util {
     function measureTextSize(text: string, options?: TextMeasureOptions): Size;
     function measureTextWidth(text: string, options?: TextMeasureOptions): number;

package/dist/lib/types/core/index.d.ts

@@ -7,13 +7,14 @@ export { Animation } from '../core/Animation.js';
 export { SmoothScroller } from '../core/SmoothScroller.js';
 export type { SmoothScrollTarget, ScrollAxis } from '../core/SmoothScroller.js';
 export { Util } from '../core/Util.js';
-export type { TextMeasureOptions, TextMetrics } from '../core/Util.js';
+export type { TextMeasureOptions, TextMeasureRequest, TextMetrics } from '../core/Util.js';
 export { DOM, ProductionDOMSink, ProductionDOMSource, PatchBuilder } from '../core/DOM.js';
 export type { DOMSink, DOMSource, DOMSeams, DocumentSelectionRange, Rect, ScrollMetrics, OffsetSize, MediaState, Handle, TimerId, ElementPatch, MediaQueryResult } from '../core/DOM.js';
 export { callable } from '../core/Callable.js';
 export type { Callable } from '../core/Callable.js';
 export { Component } from '../core/Component.js';
 export type { Comparator, Style, ComponentOptions, ComponentStyleRuleSpec, ComponentFactory, ConstrainedComponent, PerimeterSize } from '../core/Component.js';
+export type { StyleTrait, StyleBag, TextStyleBag } from '../core/ClassStyleRules.js';
 export { Container } from '../core/Container.js';
 export type { ContainerOptions } from '../core/Container.js';
 export { Panel } from '../core/Panel.js';
@@ -36,9 +37,11 @@ export { FocusHistory } from '../core/FocusHistory.js';
 export type { FocusHistoryOptions, FocusHistoryKeyCombo, FocusHistoryEvent, FocusHistoryChange } from '../core/FocusHistory.js';
 export { ThemeManager, BaseTheme, ClassicTheme, DarkTheme, ModernTheme, defineTheme } from '../core/Theme.js';
 export type { Theme, DeepPartial, ScaleToken, ResolvedScale, FontSizeToken } from '../core/Theme.js';
-export { StyleTarget, StyleRule, InlineStyle } from '../core/StyleTarget.js';
-export type { StyleRuleScope, StyleRuleSpec } from '../core/StyleTarget.js';
+export { StyleTarget, StyleRule, InlineStyle, styleRuleCounts, styleRuleEntries } from '../core/StyleTarget.js';
+export type { StyleRuleScope, StyleRuleSpec, StyleRuleCounts, StyleRuleEntry } from '../core/StyleTarget.js';
 export { ElementAttributes } from '../core/ElementAttributes.js';
+export { Diagnostics } from '../core/Diagnostics.js';
+export type { DiagnosticsCounters } from '../core/Diagnostics.js';
 export { Binding } from '../core/Binding.js';
 export type { BeforeRecordListener, BindingEvent } from '../core/Binding.js';
 export type { Bindable, BindingAccessors } from '../core/Bindable.js';

package/dist/lib/types/diagnostics/DiagnosticsOverlay.d.ts

@@ -0,0 +1,29 @@
+import { Window } from "../overlay/Window.js";
+export declare class DiagnosticsOverlay extends Window {
+    private static instance;
+    private readonly _sampler;
+    private readonly _fps;
+    private readonly _frameTime;
+    private readonly _heap;
+    private readonly _domNodes;
+    private readonly _longTasks;
+    private readonly _componentsText;
+    private readonly _constructedDisposed;
+    private readonly _layoutPasses;
+    private readonly _layoutFlush;
+    private readonly _domListeners;
+    private readonly _semanticListeners;
+    private readonly _styleRules;
+    private readonly _boundOnSample;
+    private readonly _styleAuditButton;
+    private readonly _boundOnOpenStyleAudit;
+    private constructor();
+    static open(): void;
+    static close(): void;
+    static toggle(): void;
+    static isOpen(): boolean;
+    private teardown;
+    onExitAction(): void;
+    protected destructor(): void;
+    private onSample;
+}

package/dist/lib/types/diagnostics/DiagnosticsSampler.d.ts

@@ -0,0 +1,61 @@
+import { Event } from "../core/Event.js";
+import { type StyleRuleCounts } from "../core/StyleTarget.js";
+export interface FrameworkCounts {
+    components: number;
+    componentsConstructed: number;
+    componentsDestroyed: number;
+    layoutPasses: number;
+    layoutFlushes: number;
+    layoutFlushTotalMs: number;
+    layoutFlushMaxMs: number;
+    domListeners: Event.ListenerCounts;
+    semanticListeners: number;
+    styleRules: StyleRuleCounts;
+}
+export declare function readFrameworkCounts(): FrameworkCounts;
+export interface DiagnosticsSample {
+    fps: number;
+    frameTimeMs: number;
+    frameTimeMaxMs: number;
+    heapUsedMB: number | null;
+    heapLimitMB: number | null;
+    domNodes: number;
+    longTasks: number;
+    longTasksRecent: number;
+    components: number;
+    componentsConstructed: number;
+    componentsDestroyed: number;
+    layoutPassesPerSec: number;
+    layoutFlushAvgMs: number;
+    layoutFlushMaxMs: number;
+    domListeners: number;
+    semanticListeners: number;
+    styleRules: StyleRuleCounts;
+}
+export interface DiagnosticsSamplerOptions {
+    intervalMs?: number;
+    onSample: (sample: DiagnosticsSample) => void;
+}
+export declare class DiagnosticsSampler {
+    private readonly _onSample;
+    private readonly _intervalMs;
+    private _running;
+    private _rafHandle;
+    private _observer;
+    private _windowStart;
+    private _lastFrameTs;
+    private _frameCount;
+    private _frameTimeMaxMs;
+    private _longTasksThisWindow;
+    private _longTasksTotal;
+    private _prevLayoutPasses;
+    private readonly _boundOnFrame;
+    private readonly _boundOnLongTasks;
+    constructor(options: DiagnosticsSamplerOptions);
+    start(): void;
+    stop(): void;
+    isRunning(): boolean;
+    private onFrame;
+    private onLongTasks;
+    private emitSample;
+}

package/dist/lib/types/diagnostics/StyleAudit.d.ts

@@ -0,0 +1,19 @@
+export interface StyleAuditSummary {
+    totalRules: number;
+    totalSizeKB: string;
+    componentRuleCount: number;
+    uniqueBodyCount: number;
+    wastedKB: string;
+}
+export interface DuplicateRuleRow {
+    count: number;
+    wastedKB: string;
+    component: string;
+    scope: string;
+    body: string;
+}
+export interface StyleAuditResult {
+    summary: StyleAuditSummary;
+    duplicates: DuplicateRuleRow[];
+}
+export declare function auditStyleRules(): StyleAuditResult;

package/dist/lib/types/diagnostics/StyleAuditOverlay.d.ts

@@ -0,0 +1,12 @@
+import { Window } from "../overlay/Window.js";
+export declare class StyleAuditOverlay extends Window {
+    private static instance;
+    private constructor();
+    static open(): void;
+    static close(): void;
+    static toggle(): void;
+    static isOpen(): boolean;
+    private teardown;
+    onExitAction(): void;
+    protected destructor(): void;
+}

package/dist/lib/types/diagnostics/StyleAuditView.d.ts

@@ -0,0 +1,13 @@
+import { Container } from "../core";
+declare class StyleAuditView extends Container {
+    private readonly _summary;
+    private readonly _refreshButton;
+    private readonly _store;
+    private readonly _boundRefresh;
+    constructor();
+    private refresh;
+    protected destructor(): void;
+}
+declare const StyleAuditViewCallable: import("../core/Callable.js").Callable<typeof StyleAuditView>;
+type StyleAuditViewCallable = StyleAuditView;
+export { StyleAuditView as _StyleAuditView, StyleAuditViewCallable as StyleAuditView };

package/dist/lib/types/diagnostics/index.d.ts

@@ -0,0 +1,7 @@
+export { DiagnosticsOverlay } from '../diagnostics/DiagnosticsOverlay.js';
+export { DiagnosticsSampler, readFrameworkCounts } from '../diagnostics/DiagnosticsSampler.js';
+export type { DiagnosticsSample, DiagnosticsSamplerOptions, FrameworkCounts } from '../diagnostics/DiagnosticsSampler.js';
+export { StyleAuditOverlay } from '../diagnostics/StyleAuditOverlay.js';
+export { StyleAuditView } from '../diagnostics/StyleAuditView.js';
+export { auditStyleRules } from '../diagnostics/StyleAudit.js';
+export type { StyleAuditSummary, DuplicateRuleRow, StyleAuditResult } from '../diagnostics/StyleAudit.js';