@fiddle-digital/string-tune 1.1.54 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -407,6 +407,22 @@ declare class EventManager {
407
407
  clearAll(): void;
408
408
  }
409
409
 
410
+ type StringTokenModeSpec = {
411
+ kind: "default";
412
+ values: [];
413
+ } | {
414
+ kind: "all";
415
+ values: [];
416
+ } | {
417
+ kind: "include";
418
+ values: ScrollMode[];
419
+ };
420
+ interface StringToken {
421
+ raw: string;
422
+ key: string;
423
+ modeSpec: StringTokenModeSpec;
424
+ }
425
+
410
426
  type MirrorEasingFn = (value: number) => number;
411
427
  /**
412
428
  * Lightweight wrapper that mirrors a primary StringObject while keeping
@@ -448,38 +464,18 @@ declare class StringObject {
448
464
  * Space-separated list of all attribute keys associated with this object.
449
465
  */
450
466
  keys: string[];
467
+ tokens: StringToken[];
451
468
  /**
452
469
  * Mirror objects linked via `string-copy-from`.
453
470
  */
454
471
  private mirrors;
472
+ private _cachedMirrorObjects;
473
+ private _cachedConnects;
474
+ private _mirrorsDirty;
455
475
  /**
456
476
  * Internal key-value store of dynamic object properties (like offsets, progress, etc.).
457
477
  */
458
478
  private properties;
459
- private eventNameCache;
460
- private eventNameSuffixCache;
461
- /**
462
- * Direct properties for extremely hot, per-frame accessed metrics
463
- * to avoid going through the Map and incurring overhead.
464
- */
465
- progress: number;
466
- progressRaw: number;
467
- startPosition: number;
468
- differencePosition: number;
469
- transformValue: {
470
- transform: string;
471
- } | null;
472
- eventProgressName: string | null;
473
- lerp: number;
474
- glide: number;
475
- isMagneting: boolean;
476
- magneticX: number;
477
- magneticY: number;
478
- magneticTargetX: number;
479
- magneticTargetY: number;
480
- eventLerpName: string | null;
481
- eventGlideName: string | null;
482
- eventMagneticName: string | null;
483
479
  /**
484
480
  * Modules currently connected to this object.
485
481
  */
@@ -489,6 +485,8 @@ declare class StringObject {
489
485
  * Provides functionality to register, trigger, and manage event listeners.
490
486
  */
491
487
  events: EventManager;
488
+ private eventNameCache;
489
+ private eventNameSuffixCache;
492
490
  constructor(id: string, element: HTMLElement);
493
491
  /**
494
492
  * Returns a cached event name in one of these forms:
@@ -526,6 +524,8 @@ declare class StringObject {
526
524
  remove(): void;
527
525
  setInviewAutoBlocked(blocked: boolean): void;
528
526
  isInviewAutoBlocked(): boolean;
527
+ setInviewManualActive(active: boolean): void;
528
+ isInviewManualActive(): boolean;
529
529
  syncInviewClass(): void;
530
530
  /**
531
531
  * Shows the object, applies visual class and notifies connected modules.
@@ -540,6 +540,11 @@ declare class StringObject {
540
540
  * @param module - The module to connect
541
541
  */
542
542
  connect(module: IStringModule): boolean;
543
+ disconnect(module: IStringModule): boolean;
544
+ isConnectedTo(module: IStringModule): boolean;
545
+ setTokens(tokens: StringToken[]): void;
546
+ getToken(key: string): StringToken | null;
547
+ private updateMirrorsCache;
543
548
  addMirror(mirror: StringMirrorObject): void;
544
549
  removeMirror(id: string): void;
545
550
  get mirrorObjects(): StringMirrorObject[];
@@ -1062,6 +1067,7 @@ interface ISplitOptionItem {
1062
1067
  */
1063
1068
  interface ISplitOptions {
1064
1069
  fit?: boolean;
1070
+ trimInlineGaps?: boolean;
1065
1071
  line?: ISplitOptionItem[];
1066
1072
  word?: ISplitOptionItem[];
1067
1073
  char?: ISplitOptionItem[];
@@ -1238,6 +1244,12 @@ type AttributeMapping = {
1238
1244
  transform?: (value: any) => any;
1239
1245
  };
1240
1246
 
1247
+ interface ParseContext {
1248
+ element?: HTMLElement;
1249
+ boundingRect?: DOMRect;
1250
+ viewportHeight?: number;
1251
+ baseRem?: number;
1252
+ }
1241
1253
  /**
1242
1254
  * Base class for a module used in the string-tune system.
1243
1255
  * Extend this class to create custom modules that respond to scroll, resize, input, etc.
@@ -1265,23 +1277,28 @@ declare class StringModule implements IStringModule {
1265
1277
  * This map is used to manage and track `StringObject` instances on a page.
1266
1278
  */
1267
1279
  protected objectMapOnPage: Map<string, StringObject>;
1280
+ protected allObjectMapOnPage: Map<string, StringObject>;
1268
1281
  /**
1269
1282
  * A protected array that holds the collection of `StringObject` instances
1270
1283
  * currently present on the page.
1271
1284
  */
1272
1285
  protected objectsOnPage: StringObject[];
1286
+ protected allObjectsOnPage: StringObject[];
1273
1287
  /**
1274
1288
  * A map of all entered objects by their unique ID.
1275
1289
  */
1276
1290
  protected objectMap: Map<string, StringObject>;
1291
+ protected allObjectMap: Map<string, StringObject>;
1277
1292
  /**
1278
1293
  * A flat array of all connected objects.
1279
1294
  */
1280
1295
  protected objects: StringObject[];
1296
+ protected allObjects: StringObject[];
1281
1297
  /**
1282
1298
  * The HTML attribute key that identifies objects this module is responsible for.
1283
1299
  */
1284
1300
  protected htmlKey: string;
1301
+ protected defaultModeScope: "all" | ScrollMode[];
1285
1302
  /**
1286
1303
  * Module type ID used internally to categorize module behavior.
1287
1304
  */
@@ -1291,6 +1308,7 @@ declare class StringModule implements IStringModule {
1291
1308
  * Type 1 = core module, type 2 = UI module.
1292
1309
  */
1293
1310
  get type(): number;
1311
+ get key(): string;
1294
1312
  /**
1295
1313
  * Tools container providing utilities for attribute parsing, unit conversion, etc.
1296
1314
  * Acts as a dependency injection hub for core IStringTool implementations.
@@ -1365,12 +1383,7 @@ declare class StringModule implements IStringModule {
1365
1383
  * @param context Optional helper values like element or viewport size.
1366
1384
  * @returns The parsed and transformed value.
1367
1385
  */
1368
- protected parseAttribute(value: string | null, type: AttributeType, context?: {
1369
- element?: HTMLElement;
1370
- boundingRect?: DOMRect;
1371
- viewportHeight?: number;
1372
- baseRem?: number;
1373
- }): any;
1386
+ protected parseAttribute(value: string | null, type: AttributeType, context?: ParseContext): any;
1374
1387
  /**
1375
1388
  * Determines whether the module should attach to a given object,
1376
1389
  * based on the presence of the module's `htmlKey` in the object keys.
@@ -1379,6 +1392,9 @@ declare class StringModule implements IStringModule {
1379
1392
  * @returns `true` if the module can connect, `false` otherwise.
1380
1393
  */
1381
1394
  canConnect(object: StringObject): boolean;
1395
+ protected isTokenEnabledInCurrentMode(token: StringToken): boolean;
1396
+ protected isObjectEnabledInCurrentMode(object: StringObject): boolean;
1397
+ disconnectObject(object: StringObject): void;
1382
1398
  /**
1383
1399
  * Registers the module on a given object, adds the object to internal list,
1384
1400
  * and triggers connection logic.
@@ -1390,6 +1406,7 @@ declare class StringModule implements IStringModule {
1390
1406
  * Registers the object internally when it enters the module’s scope.
1391
1407
  */
1392
1408
  enterObject(id: string, object: StringObject): void;
1409
+ protected fastRemoveFromArray<T>(array: T[], index: number): void;
1393
1410
  /**
1394
1411
  * Unregisters the object when it leaves the module’s scope.
1395
1412
  */
@@ -1428,6 +1445,8 @@ declare class StringModule implements IStringModule {
1428
1445
  * @param object The disconnected object.
1429
1446
  */
1430
1447
  onObjectDisconnected(object: StringObject): void;
1448
+ protected get respectSelfDisable(): boolean;
1449
+ protected isPrimaryElementEnabled(object: StringObject): boolean;
1431
1450
  /**
1432
1451
  * Applies a style or callback to both the main element and all its connected elements.
1433
1452
  *
@@ -1455,6 +1474,10 @@ declare class StringModule implements IStringModule {
1455
1474
  * Returns a cached per-object event name to avoid building strings in hot paths.
1456
1475
  */
1457
1476
  protected getObjectEventName(object: StringObject, prefix: string, suffix?: string): string;
1477
+ protected clearManagedStyles(object: StringObject): void;
1478
+ protected onObjectModeActivated(object: StringObject): void;
1479
+ protected onObjectModeDeactivated(object: StringObject): void;
1480
+ protected rebuildActiveObjectsForCurrentMode(): void;
1458
1481
  /**
1459
1482
  * Cleans up internal state and detaches the module from the system.
1460
1483
  */
@@ -1572,6 +1595,8 @@ declare class ObjectManager {
1572
1595
  add(el: HTMLElement): void;
1573
1596
  setDOMBatcherEnabled(enabled: boolean): void;
1574
1597
  setIntersectionObserverEnabled(enabled: boolean): void;
1598
+ attachModule(module: StringModule): void;
1599
+ refreshModuleConnectionsForCurrentMode(): void;
1575
1600
  invalidateInviewIndex(): void;
1576
1601
  refreshLayoutForRoot(root: HTMLElement): void;
1577
1602
  /**
@@ -1642,6 +1667,8 @@ declare class ObjectManager {
1642
1667
  private rebuildInviewIndex;
1643
1668
  private upperBound;
1644
1669
  private splitPipeAndTrim;
1670
+ private parseStringTokens;
1671
+ private splitTopLevelPipe;
1645
1672
  destroy(): void;
1646
1673
  }
1647
1674
 
@@ -1890,6 +1917,7 @@ declare class StringAnchor extends StringModule {
1890
1917
  * to create a smooth scrolling effect for objects.
1891
1918
  */
1892
1919
  declare class StringGlide extends StringModule {
1920
+ protected defaultModeScope: string[];
1893
1921
  private previousLerp;
1894
1922
  private displacement;
1895
1923
  private acceleration;
@@ -1902,9 +1930,8 @@ declare class StringGlide extends StringModule {
1902
1930
  constructor(context: StringContext);
1903
1931
  initializeObject(globalId: number, object: StringObject, element: HTMLElement, attributes: Record<string, any>): void;
1904
1932
  private setupItem;
1905
- private onUpdateDesktopEvent;
1906
- private onUpdateMobileEvent;
1907
- private onUpdateEvent;
1933
+ private updateTransforms;
1934
+ private resetObjectStyles;
1908
1935
  private calcExpanderFactor;
1909
1936
  onStart(): void;
1910
1937
  onResize(): void;
@@ -1912,7 +1939,9 @@ declare class StringGlide extends StringModule {
1912
1939
  onScrollStart(): void;
1913
1940
  onScrollStop(): void;
1914
1941
  onFrame(data: StringData): void;
1942
+ protected onObjectModeDeactivated(object: StringObject): void;
1915
1943
  onMutate(): void;
1944
+ private applyPendingGlideStylesForObject;
1916
1945
  private applyPendingGlideStyles;
1917
1946
  private flushPendingGlideStyles;
1918
1947
  }
@@ -1923,6 +1952,7 @@ declare class StringGlide extends StringModule {
1923
1952
  */
1924
1953
  declare class StringLerp extends StringModule {
1925
1954
  private hasInitializedCSS;
1955
+ protected defaultModeScope: string[];
1926
1956
  constructor(context: StringContext);
1927
1957
  /**
1928
1958
  * Initialize lerp value when object connects.
@@ -1986,6 +2016,7 @@ declare class StringProgress extends StringModule {
1986
2016
  * necessary transformations based on scroll progress and viewport size.
1987
2017
  */
1988
2018
  declare class StringParallax extends StringProgress {
2019
+ protected defaultModeScope: string[];
1989
2020
  private updateScheduledTransform;
1990
2021
  private calculateParallaxForObject;
1991
2022
  constructor(context: StringContext);
@@ -1995,11 +2026,9 @@ declare class StringParallax extends StringProgress {
1995
2026
  initializeObject(globalId: number, object: StringObject, element: HTMLElement, attributes: Record<string, any>): void;
1996
2027
  calculatePositions(object: StringObject, windowSize: number): void;
1997
2028
  onScroll(data: StringData): void;
1998
- onResize(): void;
1999
2029
  onScrollMeasure(data: StringData): void;
2000
2030
  onMutate(): void;
2001
- private calculateDesktopParallax;
2002
- private calculateMobileParallax;
2031
+ private calculateParallax;
2003
2032
  }
2004
2033
 
2005
2034
  declare class StringScrollbar extends StringModule {
@@ -2035,11 +2064,31 @@ declare class StringScrollbar extends StringModule {
2035
2064
  * computes alignment/random values, and applies CSS vars.
2036
2065
  */
2037
2066
  declare class StringSplit extends StringModule {
2067
+ /** Last content-width (px) at which each element was split. Keyed by element itself. */
2068
+ private lastSplitWidth;
2038
2069
  constructor(context: StringContext);
2039
2070
  onInit(): void;
2071
+ onObjectDisconnected(object: StringObject): void;
2040
2072
  onResizeWidth(): void;
2041
2073
  onObjectConnected(object: StringObject): void;
2042
- split(element: HTMLElement, options: ISplitOptions): {
2074
+ private extractTextContent;
2075
+ private getSplitOptions;
2076
+ private hasLineDrivenSplit;
2077
+ private needsWidthRebuild;
2078
+ private needsForcedRebuildOnFontLoad;
2079
+ private getDebugStoreKey;
2080
+ private writeDebugRecord;
2081
+ private isDebugEnabled;
2082
+ private getDebugLabel;
2083
+ private logConnectionStart;
2084
+ private captureBaselineSnapshot;
2085
+ private logSplitAnalysis;
2086
+ private getTokenDebugText;
2087
+ private logRenderedState;
2088
+ private applyFlexLineBreaks;
2089
+ private getBlockContainerContentWidth;
2090
+ private getElementContentWidth;
2091
+ split(element: HTMLElement, options: ISplitOptions, debugEnabled?: boolean): {
2043
2092
  fragment: DocumentFragment;
2044
2093
  result: DocumentFragment;
2045
2094
  extraProps: Map<string, string>;
@@ -2573,104 +2622,36 @@ declare class StringRandom extends StringModule {
2573
2622
  onObjectConnected(object: StringObject): void;
2574
2623
  }
2575
2624
 
2576
- /**
2577
- * Base class for managing scroll behavior in the system.
2578
- * Handles abstract scroll state and updates, intended for extension.
2579
- */
2580
2625
  declare class ScrollController {
2581
- /** Shared context containing data and tools */
2582
2626
  protected context: StringContext;
2583
- /** Reference to the document object */
2584
2627
  protected document: Document;
2585
- /** Name of the scroll mode (e.g. 'default', 'smooth', etc.) */
2586
2628
  name: string;
2587
- /** Whether the system is in programmatic scroll mode */
2588
2629
  isProg: boolean;
2589
- /** Whether parallax-related logic should be active */
2590
2630
  isParallaxEnabled: boolean;
2591
- /** Scroll direction: vertical or horizontal */
2592
- protected _scrollDirection: "vertical" | "horizontal";
2593
- /**
2594
- * Current scroll direction.
2595
- * - `true` — scrolling down
2596
- * - `false` — scrolling up
2597
- * - `null` — unknown (initial state)
2598
- */
2599
- protected isBottomScrollDirection: boolean | null;
2631
+ protected _isVertical: boolean;
2632
+ protected _scrollDirState: number;
2633
+ protected _lastAppliedDirState: number;
2600
2634
  protected isLastBottomScrollDirection: boolean;
2601
2635
  protected scrollTriggerRules: Array<ScrollMarkRule>;
2602
- /** Tracks whether this controller is currently active */
2603
2636
  protected isActive: boolean;
2604
- /** Last direction applied to DOM classes (for global-class toggles) */
2605
- protected lastAppliedDirection: boolean | null;
2606
- /**
2607
- * Sets scroll direction and updates internal scroll logic.
2608
- * @param scrollDirection Either 'vertical' or 'horizontal'.
2609
- */
2610
- set scrollDirection(scrollDirection: "vertical" | "horizontal");
2611
- /**
2612
- * Creates a new ScrollController instance.
2613
- * @param context Shared context containing data and settings.
2614
- */
2637
+ set scrollDirection(dir: "vertical" | "horizontal");
2615
2638
  constructor(context: StringContext);
2616
- /**
2617
- * Called when scroll direction changes (up ↔ down).
2618
- * Override this callback in subclasses or instances.
2619
- */
2620
2639
  onChangeDirection: () => void;
2621
- /**
2622
- * Called when scroll starts (user input).
2623
- * Override this callback in subclasses or instances.
2624
- */
2625
2640
  onScrollStart: () => void;
2626
- /**
2627
- * Called when scroll ends.
2628
- * Override this callback in subclasses or instances.
2629
- */
2630
2641
  onScrollStop: () => void;
2631
- /**
2632
- * Scroll-to function called on each frame.
2633
- * This will be reassigned depending on scroll direction.
2634
- */
2635
- onCalcUpdate: () => void;
2636
- /**
2637
- * Called every animation frame.
2638
- * Intended to be overridden in subclasses.
2639
- */
2642
+ onCalcUpdate(): void;
2640
2643
  onFrame(): void;
2641
- /**
2642
- * Called when wheel event is fired.
2643
- * Override to implement custom scroll interaction.
2644
- * @param e Wheel event.
2645
- */
2646
2644
  onWheel(e: any): void;
2647
- /**
2648
- * Called when native scroll event is fired.
2649
- * Override to track native scroll position.
2650
- * @param e Scroll event.
2651
- */
2652
2645
  onScroll(e: any): void;
2646
+ onTouchStart(e: TouchEvent): void;
2647
+ onTouchMove(e: TouchEvent): void;
2648
+ onTouchEnd(e: TouchEvent): void;
2653
2649
  disableScrollEvents(): void;
2654
2650
  enableScrollEvents(): void;
2655
- /**
2656
- * Called when this controller becomes the active scroll engine.
2657
- * Ensures event bindings are attached only once.
2658
- */
2659
2651
  activate(): void;
2660
- /**
2661
- * Called when this controller is deactivated.
2662
- * Ensures event bindings are detached only once.
2663
- */
2664
2652
  deactivate(): void;
2665
- /**
2666
- * Allows controllers to clean up resources on global destroy.
2667
- */
2668
2653
  destroy(): void;
2669
- /**
2670
- * Updates scroll direction state, emits events, and toggles global classes.
2671
- * Intended for reuse by custom scroll adapters.
2672
- */
2673
- protected updateScrollDirection(newDirection: boolean): void;
2654
+ protected updateScrollDirection(isDown: boolean): void;
2674
2655
  protected clearScrollingClasses(): void;
2675
2656
  protected triggerScrollRules(): void;
2676
2657
  addScrollMark(rule: ScrollMarkRule): void;
@@ -2678,12 +2659,257 @@ declare class ScrollController {
2678
2659
  scrollTo(position: number, immediate?: boolean): void;
2679
2660
  }
2680
2661
 
2662
+ interface StringDevtoolState {
2663
+ active: boolean;
2664
+ }
2665
+ interface StringDevtoolHotkey {
2666
+ key: string;
2667
+ shiftKey?: boolean;
2668
+ ctrlKey?: boolean;
2669
+ altKey?: boolean;
2670
+ metaKey?: boolean;
2671
+ }
2672
+ interface StringDevtoolSubBadge {
2673
+ id: string;
2674
+ icon: string;
2675
+ label: string;
2676
+ /** Extra attribute used as a CSS selector hook (e.g. "data-string-grid-global-toggle"). */
2677
+ selectorAttribute?: string;
2678
+ /** Additional data-* attributes applied to the badge button. */
2679
+ attributes?: Record<string, string | boolean | number | null | undefined>;
2680
+ onClick: (anchorElement?: HTMLElement) => void;
2681
+ }
2682
+ interface StringDevtoolDefinition {
2683
+ id: string;
2684
+ label: string;
2685
+ icon: string;
2686
+ order?: number;
2687
+ group?: number;
2688
+ hotkey?: StringDevtoolHotkey;
2689
+ subBadges?: StringDevtoolSubBadge[];
2690
+ getState: () => StringDevtoolState;
2691
+ setActive: (active: boolean) => void;
2692
+ subscribe?: (listener: (state: StringDevtoolState) => void) => () => void;
2693
+ }
2694
+ interface StringDevtoolProvider {
2695
+ getDevtoolDefinition(): StringDevtoolDefinition | null;
2696
+ }
2697
+
2698
+ declare class StringDevViewportLayer {
2699
+ private readonly id;
2700
+ private readonly zIndex;
2701
+ private screenRoot;
2702
+ private world;
2703
+ private screen;
2704
+ private worldHost;
2705
+ private hostPositionWasPatched;
2706
+ private hostPositionInlineValue;
2707
+ constructor(id: string, zIndex: number);
2708
+ ensure(host?: HTMLElement | null): HTMLDivElement;
2709
+ getElement(): HTMLDivElement | null;
2710
+ getWorldElement(host?: HTMLElement | null): HTMLDivElement;
2711
+ getScreenElement(): HTMLDivElement;
2712
+ destroy(): void;
2713
+ private attachWorldToHost;
2714
+ private restoreHostPosition;
2715
+ }
2716
+
2717
+ declare class StringDevOverlayRegistry {
2718
+ private static instance;
2719
+ private readonly layers;
2720
+ static getInstance(): StringDevOverlayRegistry;
2721
+ acquire(id: string, zIndex: number): StringDevViewportLayer;
2722
+ release(id: string): void;
2723
+ }
2724
+
2725
+ interface StringDevModuleDefinitionConfig {
2726
+ id: string;
2727
+ label: string;
2728
+ icon: string;
2729
+ order?: number;
2730
+ group?: number;
2731
+ hotkey?: StringDevtoolHotkey;
2732
+ }
2733
+ interface StringDevConnectsConfig {
2734
+ /** If true, connects to every StringObject (overlay default). If false, only explicit matches below + dev-inspect fallback. */
2735
+ global?: boolean;
2736
+ /** Connect to objects whose string="…" token list includes any of these keys. */
2737
+ keys?: string[];
2738
+ /** Connect to objects whose DOM element has any of these attributes present. */
2739
+ attributes?: string[];
2740
+ }
2741
+ interface StringDevOverlayConfig {
2742
+ /** Unique layer name, e.g. "devtools-progress" */
2743
+ layerName: string;
2744
+ /** Z-index for the viewport layer */
2745
+ zIndex: number;
2746
+ /** Data-attribute added to the layer root, e.g. "data-string-progress-layer" */
2747
+ layerAttribute?: string;
2748
+ /** Overlay ID used for the anchor/collision system. Omit if not needed. */
2749
+ overlayId?: string;
2750
+ /** Whether the overlay starts enabled before dock preferences apply. Default: false */
2751
+ defaultEnabled?: boolean;
2752
+ /** For badge overlay modules: data-attribute placed on each badge element */
2753
+ badgeAttribute?: string;
2754
+ }
2755
+ interface StringDevModuleConfig extends StringDevModuleDefinitionConfig {
2756
+ /** Declare CSS styles to inject once. Can be a string or a lazy getter. */
2757
+ styles?: string | (() => string);
2758
+ /** Overlay layer configuration. Declare for any module that uses a viewport layer. */
2759
+ overlay?: StringDevOverlayConfig;
2760
+ /** Declare which StringObjects this module connects to. Replaces htmlKey assignment in constructor. */
2761
+ connects?: StringDevConnectsConfig;
2762
+ }
2763
+ declare class StringDevModule extends StringModule implements StringDevtoolProvider {
2764
+ /** Declare module metadata statically. Subclasses override this. */
2765
+ static devtool: StringDevModuleConfig | null;
2766
+ protected readonly overlayRegistry: StringDevOverlayRegistry;
2767
+ private readonly acquiredViewportLayers;
2768
+ private readonly devtoolListeners;
2769
+ private hotkeyHandler;
2770
+ protected devtoolConfig: StringDevModuleDefinitionConfig | null;
2771
+ constructor(context: StringContext);
2772
+ protected get respectSelfDisable(): boolean;
2773
+ protected get connectsConfig(): StringDevConnectsConfig | undefined;
2774
+ canConnect(object: StringObject): boolean;
2775
+ protected getStyleScopeId(stylesText: string): string;
2776
+ protected getStyles(): string | null;
2777
+ getDevtoolDefinition(): StringDevtoolDefinition | null;
2778
+ protected getDevtoolSubBadges(): StringDevtoolSubBadge[];
2779
+ protected configureDevtool(config: StringDevModuleDefinitionConfig): void;
2780
+ protected bindDevtoolHotkey(hotkey?: StringDevtoolHotkey): void;
2781
+ protected emitDevtoolState(active?: boolean): void;
2782
+ protected acquireViewportLayer(id: string, zIndex: number): StringDevViewportLayer;
2783
+ protected releaseViewportLayer(id: string): void;
2784
+ protected ensureStyle(styleId: string, cssText: string): HTMLStyleElement;
2785
+ protected getWorldHost(): HTMLElement;
2786
+ protected getDevtoolActiveState(): boolean;
2787
+ protected setDevtoolActiveState(_active: boolean): void;
2788
+ destroy(): void;
2789
+ }
2790
+
2791
+ declare function buildGridCSS(): string;
2792
+
2793
+ /**
2794
+ * StringDevLayout — developer utility module for layout overlays.
2795
+ *
2796
+ * Usage:
2797
+ * <div string="layout">...</div>
2798
+ *
2799
+ * No configuration attributes needed. All configuration happens
2800
+ * through the interactive HUD panel (hover top-right corner).
2801
+ *
2802
+ * Supports multiple grid types via the adapter pattern:
2803
+ * - Columns, Rows, Center
2804
+ * - Rule of Thirds, Phi Grid, Golden Rectangle, Harmonic Armature
2805
+ * - Extensible via `st.use(StringDevLayout, { adapters: [MyAdapter] })`
2806
+ */
2807
+ declare class StringDevLayout extends StringDevModule {
2808
+ private gridManager;
2809
+ private viewportLayer;
2810
+ private overlayLayer;
2811
+ private overlays;
2812
+ private huds;
2813
+ private elementMap;
2814
+ private triggerEntries;
2815
+ private triggerMeasurements;
2816
+ private enabled;
2817
+ private needsMeasure;
2818
+ private hasPendingMutate;
2819
+ private globalHost;
2820
+ private globalOverlay;
2821
+ private globalHUD;
2822
+ private globalSubBadge;
2823
+ static devtool: {
2824
+ id: string;
2825
+ label: string;
2826
+ icon: string;
2827
+ order: number;
2828
+ group: number;
2829
+ hotkey: {
2830
+ key: string;
2831
+ shiftKey: boolean;
2832
+ };
2833
+ styles: typeof buildGridCSS;
2834
+ connects: {
2835
+ global: boolean;
2836
+ keys: string[];
2837
+ };
2838
+ };
2839
+ constructor(context: StringContext);
2840
+ onInit(): void;
2841
+ protected getDevtoolSubBadges(): StringDevtoolSubBadge[];
2842
+ onObjectConnected(object: StringObject): void;
2843
+ onObjectDisconnected(object: StringObject): void;
2844
+ onResize(): void;
2845
+ onScroll(): void;
2846
+ onScrollMeasure(): void;
2847
+ onMutate(): void;
2848
+ onDOMRebuild(): void;
2849
+ destroy(): void;
2850
+ setEnabled(enabled: boolean): void;
2851
+ isEnabled(): boolean;
2852
+ protected getDevtoolActiveState(): boolean;
2853
+ protected setDevtoolActiveState(active: boolean): void;
2854
+ private handleAdd;
2855
+ private handleRemove;
2856
+ private handleToggle;
2857
+ private handleSettingChange;
2858
+ private handleReorder;
2859
+ private handleMoveToEnd;
2860
+ private handleSelectLayout;
2861
+ private handleUpdateLayoutMinWidth;
2862
+ private handleAddLayout;
2863
+ private handleRemoveLayout;
2864
+ private handleRenameInstance;
2865
+ private handleRenamePanelTitle;
2866
+ private handleHUDOpen;
2867
+ private handleHUDClose;
2868
+ private handleLayoutPanelOpen;
2869
+ private handleLayoutPanelClose;
2870
+ private handleExport;
2871
+ private handleImport;
2872
+ private renderElement;
2873
+ private syncToResolved;
2874
+ private syncSelectedLayoutToViewport;
2875
+ private refreshHUD;
2876
+ private ensureGlobalGrid;
2877
+ private syncGlobalHostSize;
2878
+ private renderGlobal;
2879
+ private refreshGlobalHUD;
2880
+ private toggleGlobalPanel;
2881
+ private syncGlobalSubBadgeState;
2882
+ private positionGlobalHudAtAnchor;
2883
+ private destroyGlobalGrid;
2884
+ private destroyElement;
2885
+ private ensureTriggerLayer;
2886
+ private applyTriggerLayerState;
2887
+ private scheduleTriggerSync;
2888
+ private collectTriggerMeasurements;
2889
+ private measureTrigger;
2890
+ private applyTriggerMeasurement;
2891
+ protected getWorldHost(): HTMLElement;
2892
+ private getObjectDocY;
2893
+ private getViewportScrollLeft;
2894
+ private getViewportScrollTop;
2895
+ private resolveTriggerStackOffset;
2896
+ private registerBuiltInAdapters;
2897
+ private registerExternalAdapters;
2898
+ }
2899
+
2681
2900
  /**
2682
2901
  * Discriminated union of all UI field descriptors.
2683
2902
  * Each devtool module returns an array of these to describe its settings panel.
2684
2903
  */
2685
2904
  type StringDevUIFieldDescriptor = StringDevUIFieldNumber | StringDevUIFieldRange | StringDevUIFieldColor | StringDevUIFieldSelect | StringDevUIFieldToggle | StringDevUIFieldDivider;
2686
- interface StringDevUIFieldNumber {
2905
+ interface StringDevUIFieldDisabledWhen {
2906
+ readonly key: string;
2907
+ readonly equals: string | number | boolean;
2908
+ }
2909
+ interface StringDevUIFieldBase {
2910
+ readonly disabledWhen?: StringDevUIFieldDisabledWhen;
2911
+ }
2912
+ interface StringDevUIFieldNumber extends StringDevUIFieldBase {
2687
2913
  readonly type: "number";
2688
2914
  readonly key: string;
2689
2915
  readonly label: string;
@@ -2692,7 +2918,7 @@ interface StringDevUIFieldNumber {
2692
2918
  readonly max?: number;
2693
2919
  readonly step?: number;
2694
2920
  }
2695
- interface StringDevUIFieldRange {
2921
+ interface StringDevUIFieldRange extends StringDevUIFieldBase {
2696
2922
  readonly type: "range";
2697
2923
  readonly key: string;
2698
2924
  readonly label: string;
@@ -2700,6 +2926,12 @@ interface StringDevUIFieldRange {
2700
2926
  readonly min: number;
2701
2927
  readonly max: number;
2702
2928
  readonly step?: number;
2929
+ /** Multiplies the stored value for display/editing in the UI. */
2930
+ readonly displayMultiplier?: number;
2931
+ /** Optional UI step in display-space (e.g. 10 for 0..100 opacity UX). */
2932
+ readonly displayStep?: number;
2933
+ /** Optional display-only suffix rendered next to the numeric value. */
2934
+ readonly suffix?: string;
2703
2935
  /** When provided, a compact unit dropdown is shown next to the value input. */
2704
2936
  readonly units?: ReadonlyArray<{
2705
2937
  value: string;
@@ -2708,13 +2940,13 @@ interface StringDevUIFieldRange {
2708
2940
  /** Default unit value (used when no persisted unit exists). */
2709
2941
  readonly defaultUnit?: string;
2710
2942
  }
2711
- interface StringDevUIFieldColor {
2943
+ interface StringDevUIFieldColor extends StringDevUIFieldBase {
2712
2944
  readonly type: "color";
2713
2945
  readonly key: string;
2714
2946
  readonly label: string;
2715
2947
  readonly default: string;
2716
2948
  }
2717
- interface StringDevUIFieldSelect {
2949
+ interface StringDevUIFieldSelect extends StringDevUIFieldBase {
2718
2950
  readonly type: "select";
2719
2951
  readonly key: string;
2720
2952
  readonly label: string;
@@ -2724,7 +2956,7 @@ interface StringDevUIFieldSelect {
2724
2956
  label: string;
2725
2957
  }>;
2726
2958
  }
2727
- interface StringDevUIFieldToggle {
2959
+ interface StringDevUIFieldToggle extends StringDevUIFieldBase {
2728
2960
  readonly type: "toggle";
2729
2961
  readonly key: string;
2730
2962
  readonly label: string;
@@ -2804,7 +3036,502 @@ declare abstract class GridAdapter {
2804
3036
  protected createPath(d: string, stroke: string, opacity: number, strokeWidth?: number, fill?: string): SVGPathElement;
2805
3037
  }
2806
3038
 
2807
- declare function resolveDevtoolsIcon(iconOrId: string): string;
3039
+ /**
3040
+ * StringDevRulers — developer utility module for guide-line rulers.
3041
+ *
3042
+ * Usage:
3043
+ * st.use(StringDevRulers)
3044
+ * st.use(StringDevRulers, { triggers: [...], grid: { type: "columns", count: 12, ... } })
3045
+ *
3046
+ * Default trigger: Shift + R
3047
+ *
3048
+ * Settings:
3049
+ * triggers — array of trigger descriptors (keyboard / element / event)
3050
+ * rulers-snap — grid step in px (0 = off)
3051
+ * rulers-snap-elements — snap to [string] element edges (default: true)
3052
+ * rulers-snap-threshold — snap pull radius in px (default: 8)
3053
+ * rulers-snap-selector — CSS selector for snap targets
3054
+ * grid — RulersLayoutGrid | RulersLayoutGrid[]
3055
+ *
3056
+ * Snap visual feedback:
3057
+ * amber → snapping to a DOM element edge / center
3058
+ * green → snapping to a layout-grid line
3059
+ */
3060
+ declare class StringDevRulers extends StringDevModule {
3061
+ private manager;
3062
+ private overlay;
3063
+ private visible;
3064
+ private dockDisabled;
3065
+ private currentModeId;
3066
+ private readonly modeStore;
3067
+ private readonly viewportLayer;
3068
+ private _kbHandlers;
3069
+ private _elHandlers;
3070
+ private _evHandlers;
3071
+ static devtool: {
3072
+ id: string;
3073
+ label: string;
3074
+ icon: string;
3075
+ order: number;
3076
+ group: number;
3077
+ hotkey: {
3078
+ key: string;
3079
+ shiftKey: boolean;
3080
+ };
3081
+ styles: string;
3082
+ connects: {
3083
+ global: boolean;
3084
+ keys: string[];
3085
+ };
3086
+ };
3087
+ constructor(context: StringContext);
3088
+ onInit(): void;
3089
+ onSettingsChange(): void;
3090
+ onSubscribe(): void;
3091
+ onUnsubscribe(): void;
3092
+ onFrame(data: StringData): void;
3093
+ onResize(): void;
3094
+ destroy(): void;
3095
+ toggle(): void;
3096
+ show(): void;
3097
+ hide(): void;
3098
+ clear(): void;
3099
+ isVisible(): boolean;
3100
+ protected getDevtoolActiveState(): boolean;
3101
+ protected setDevtoolActiveState(active: boolean): void;
3102
+ protected getDevtoolSubBadges(): StringDevtoolSubBadge[];
3103
+ private _bindTriggers;
3104
+ private _unbindTriggers;
3105
+ private _applyAction;
3106
+ private setVisible;
3107
+ private setDockActive;
3108
+ private mountOverlay;
3109
+ private cycleMode;
3110
+ private switchMode;
3111
+ private applyStyleSettings;
3112
+ private clearStyleSettings;
3113
+ /** Normalises the `grid` setting to RulersLayoutGrid[] (or undefined). */
3114
+ private _resolveGrids;
3115
+ private syncOverlayMetrics;
3116
+ private pushScrollToOverlay;
3117
+ }
3118
+
3119
+ type StringDevtoolsOverlayId = string;
3120
+ interface AnchorPoint {
3121
+ docX: number;
3122
+ docY: number;
3123
+ }
3124
+
3125
+ type OverlayAxis = "y" | "x";
3126
+ type OverlayAnchor = "start" | "end";
3127
+ interface OverlayBaseMetrics {
3128
+ visible: boolean;
3129
+ contentX: number;
3130
+ contentY: number;
3131
+ width: number;
3132
+ height: number;
3133
+ isOffscreen: boolean;
3134
+ baseAnchorX: number;
3135
+ baseAnchorY: number;
3136
+ collisionOffset: number;
3137
+ axis: OverlayAxis;
3138
+ primarySize: number;
3139
+ crossSize: number;
3140
+ primaryContentOffset: number;
3141
+ viewportPrimarySize: number;
3142
+ }
3143
+ interface OverlayObjectGeometry {
3144
+ contentX: number;
3145
+ contentY: number;
3146
+ width: number;
3147
+ height: number;
3148
+ }
3149
+ interface StringDevOverlayBadgeInit {
3150
+ targetId: string;
3151
+ selectorAttribute?: string;
3152
+ depth?: number;
3153
+ attributes?: Record<string, string | boolean | number | null | undefined>;
3154
+ }
3155
+ interface StringDevOverlayBadgeState {
3156
+ visible?: boolean;
3157
+ active?: boolean;
3158
+ disabled?: boolean;
3159
+ title?: string;
3160
+ html?: string;
3161
+ label?: string;
3162
+ attributes?: Record<string, string | boolean | number | null | undefined>;
3163
+ }
3164
+ declare abstract class StringDevOverlayModule<TEntry = unknown, TMeasurement = unknown> extends StringDevModule {
3165
+ private _viewportLayer?;
3166
+ private _badgeLayer?;
3167
+ private _hudLayer?;
3168
+ protected get viewportLayer(): StringDevViewportLayer;
3169
+ protected get badgeLayer(): StringDevViewportLayer;
3170
+ protected get hudLayer(): StringDevViewportLayer;
3171
+ protected readonly entries: Map<string, TEntry>;
3172
+ protected readonly measurements: Map<string, TMeasurement>;
3173
+ protected enabled: boolean;
3174
+ protected needsMeasure: boolean;
3175
+ protected hasPendingMutate: boolean;
3176
+ private _rafId;
3177
+ private _pendingSingleIds;
3178
+ private readonly onOverlayLayoutChangeBind;
3179
+ private get _overlayConfig();
3180
+ /** Override to provide the overlay ID for the anchor/collision system. */
3181
+ protected get overlayId(): StringDevtoolsOverlayId | null;
3182
+ /** Override to declare how many badge slots this overlay occupies. */
3183
+ protected get overlayBadgeCount(): number;
3184
+ /** Override to define your viewport layer name. Falls back to devtool.overlay.layerName. */
3185
+ protected get layerName(): string;
3186
+ /** Override to define your viewport layer z-index. Falls back to devtool.overlay.zIndex. */
3187
+ protected get layerZIndex(): number;
3188
+ /** Override to define the data-attribute added to the layer root. Falls back to devtool.overlay.layerAttribute. */
3189
+ protected get layerAttribute(): string;
3190
+ /** Override when an overlay module should start enabled before dock preferences apply. Falls back to devtool.overlay.defaultEnabled. */
3191
+ protected get defaultEnabled(): boolean;
3192
+ constructor(context: StringContext);
3193
+ onInit(): void;
3194
+ onObjectConnected(object: StringObject): void;
3195
+ onObjectDisconnected(object: StringObject): void;
3196
+ setEnabled(enabled: boolean): void;
3197
+ isEnabled(): boolean;
3198
+ protected getDevtoolActiveState(): boolean;
3199
+ protected setDevtoolActiveState(active: boolean): void;
3200
+ /** Create DOM and return state for the given element */
3201
+ protected abstract createOverlayEntry(object: StringObject): TEntry | null;
3202
+ /** Clean up DOM and listeners for the given element */
3203
+ protected abstract destroyOverlayEntry(entry: TEntry): void;
3204
+ /** Produce a custom measurement state utilizing the provided base metrics */
3205
+ protected abstract measureEntry(entry: TEntry, baseMetrics: OverlayBaseMetrics): TMeasurement;
3206
+ /** Render DOM efficiently utilizing `styleTxn` */
3207
+ protected abstract applyMeasurement(entry: TEntry, measurement: TMeasurement | undefined): void;
3208
+ /** Called when `setEnabled` state flips, allowing subclasses to show/hide specific entries */
3209
+ protected onEnabledChange(_enabled: boolean): void;
3210
+ onScroll(): void;
3211
+ onScrollMeasure(): void;
3212
+ onMutate(): void;
3213
+ onResize(): void;
3214
+ onDOMRebuild(): void;
3215
+ /**
3216
+ * Immediate synchronous full sync — use only when instant visual response
3217
+ * is required (e.g. setEnabled). For everything else prefer scheduleSync().
3218
+ */
3219
+ protected scheduleFullSync(): void;
3220
+ /**
3221
+ * Deferred full sync — batches multiple calls within the same animation
3222
+ * frame into a single measure+flush pass. Use for resize, layout changes,
3223
+ * object connected, and any other non-immediate triggers.
3224
+ */
3225
+ protected scheduleSync(): void;
3226
+ /**
3227
+ * Deferred single-entry sync — measures and flushes only the given entry.
3228
+ * Multiple calls for different entries within the same frame are batched
3229
+ * together into one styleTxn flush. Use for per-object events like
3230
+ * object:inview or slider input where only one entry changes.
3231
+ */
3232
+ protected scheduleSingleSync(entry: TEntry): void;
3233
+ protected collectMeasurements(): void;
3234
+ protected flushMeasurements(): void;
3235
+ protected ensureLayer(): HTMLDivElement;
3236
+ protected applyEnabledState(): void;
3237
+ private syncSlotRegistration;
3238
+ protected resolveOverlayTargetId(object: StringObject): string;
3239
+ protected resolveOverlayObjectDepth(element: HTMLElement): number;
3240
+ protected createOverlayBadge(init: StringDevOverlayBadgeInit): HTMLButtonElement;
3241
+ protected applyOverlayBadgeState(badge: HTMLElement, state: StringDevOverlayBadgeState): void;
3242
+ protected applyOverlayBadgePosition(badge: HTMLElement, measurement: {
3243
+ visible: boolean;
3244
+ docX: number;
3245
+ docY: number;
3246
+ translate?: string;
3247
+ } | undefined): void;
3248
+ protected getOverlayTargetLabel(object: StringObject): string;
3249
+ protected getViewportAnchorOffset(anchor: OverlayAnchor, metrics: OverlayBaseMetrics): number;
3250
+ protected getOverlayAnchorAdjustment(_object: StringObject, _anchor: AnchorPoint, _metrics?: {
3251
+ contentX: number;
3252
+ contentY: number;
3253
+ width: number;
3254
+ height: number;
3255
+ }): AnchorPoint;
3256
+ protected resolveRulerPanelOffset(contentX: number, contentY: number): {
3257
+ x: number;
3258
+ y: number;
3259
+ };
3260
+ protected computeBaseMetrics(entry: any): OverlayBaseMetrics;
3261
+ protected getHiddenMetrics(): OverlayBaseMetrics;
3262
+ protected getObjectDocY(object: StringObject): number;
3263
+ protected resolveOverlayObjectGeometry(object: StringObject, element?: HTMLElement): OverlayObjectGeometry;
3264
+ protected getViewportScrollLeft(): number;
3265
+ protected getViewportScrollTop(): number;
3266
+ protected resolveLiveElementMetrics(element: HTMLElement, rect: DOMRect): {
3267
+ docLeft?: number;
3268
+ docTop?: number;
3269
+ width: number;
3270
+ height: number;
3271
+ };
3272
+ destroy(): void;
3273
+ }
3274
+
3275
+ type StringDevBadgeSlot = "top-left" | "top-right" | "bottom-right" | "bottom-left";
3276
+ interface StringDevBadgeSlotConfig {
3277
+ gap?: number;
3278
+ offsetX?: number;
3279
+ offsetY?: number;
3280
+ }
3281
+ interface StringDevBadgeDescriptor {
3282
+ id: string;
3283
+ slot?: StringDevBadgeSlot;
3284
+ group?: string;
3285
+ selectorAttribute?: string;
3286
+ depth?: number;
3287
+ attributes?: Record<string, string | boolean | number | null | undefined>;
3288
+ gap?: number;
3289
+ offsetX?: number;
3290
+ offsetY?: number;
3291
+ }
3292
+ interface StringDevManagedBadge {
3293
+ id: string;
3294
+ descriptor: StringDevBadgeDescriptor;
3295
+ element: HTMLButtonElement;
3296
+ }
3297
+ interface StringDevBadgePositionMeasurement {
3298
+ visible: boolean;
3299
+ docX: number;
3300
+ docY: number;
3301
+ translate?: string;
3302
+ }
3303
+ interface StringDevBadgeMeasurement {
3304
+ visible: boolean;
3305
+ badges: Record<string, StringDevBadgePositionMeasurement>;
3306
+ }
3307
+ interface StringDevBadgeEntry<TExtra = undefined> {
3308
+ object: StringObject;
3309
+ targetId: string;
3310
+ badge: HTMLButtonElement;
3311
+ depth: number;
3312
+ extra: TExtra;
3313
+ cleanup: Array<() => void>;
3314
+ badges: Map<string, StringDevManagedBadge>;
3315
+ groups: Map<string, HTMLDivElement>;
3316
+ }
3317
+ declare abstract class StringDevBadgeOverlayModule<TExtra = undefined, TMeasurement extends StringDevBadgeMeasurement = StringDevBadgeMeasurement> extends StringDevOverlayModule<StringDevBadgeEntry<TExtra>, TMeasurement> {
3318
+ protected get badgeAttribute(): string;
3319
+ protected createOverlayEntry(object: StringObject): StringDevBadgeEntry<TExtra>;
3320
+ protected destroyOverlayEntry(entry: StringDevBadgeEntry<TExtra>): void;
3321
+ protected measureEntry(entry: StringDevBadgeEntry<TExtra>, metrics: OverlayBaseMetrics): TMeasurement;
3322
+ protected applyMeasurement(entry: StringDevBadgeEntry<TExtra>, measurement: TMeasurement | undefined): void;
3323
+ protected onEnabledChange(_enabled: boolean): void;
3324
+ protected createBadgeExtra(_object: StringObject, _badge: HTMLButtonElement, _targetId: string, _depth: number): TExtra;
3325
+ protected destroyBadgeExtra(_entry: StringDevBadgeEntry<TExtra>): void;
3326
+ protected bindBadge(_entry: StringDevBadgeEntry<TExtra>): Array<() => void> | void;
3327
+ protected resolveBadgeDepth(object: StringObject): number;
3328
+ protected getBadgeSlotConfig(): Partial<Record<StringDevBadgeSlot, StringDevBadgeSlotConfig>>;
3329
+ protected getBadgeDescriptors(object: StringObject, targetId: string, depth: number): Array<StringDevBadgeDescriptor>;
3330
+ protected getInitialBadgeAttributes(_object: StringObject, _targetId: string, _depth: number): Record<string, string | boolean | number | null | undefined> | undefined;
3331
+ protected applyBadgeEnabledState(entry: StringDevBadgeEntry<TExtra>): void;
3332
+ protected renderBadge(entry: StringDevBadgeEntry<TExtra>): void;
3333
+ protected afterBadgeMeasurement(_entry: StringDevBadgeEntry<TExtra>, _measurement: TMeasurement | undefined): void;
3334
+ protected abstract onBadgeClick(entry: StringDevBadgeEntry<TExtra>, event: MouseEvent, badge: StringDevManagedBadge): void;
3335
+ protected abstract getBadgeState(entry: StringDevBadgeEntry<TExtra>, badge?: StringDevManagedBadge): StringDevOverlayBadgeState;
3336
+ private resolveBadgeSlotConfig;
3337
+ private resolveBadgePosition;
3338
+ }
3339
+
3340
+ interface InviewExtra {
3341
+ outline: HTMLDivElement;
3342
+ enterConnector: HTMLDivElement;
3343
+ exitConnector: HTMLDivElement;
3344
+ enterMarker: HTMLDivElement;
3345
+ exitMarker: HTMLDivElement;
3346
+ enterMarkerLabel: HTMLSpanElement;
3347
+ exitMarkerLabel: HTMLSpanElement;
3348
+ }
3349
+ interface InviewMeasurement extends StringDevBadgeMeasurement {
3350
+ overlayVisible: boolean;
3351
+ badgeVisible: boolean;
3352
+ markersVisible: boolean;
3353
+ inview: boolean;
3354
+ outlineDocX: number;
3355
+ outlineDocY: number;
3356
+ outlineWidth: number;
3357
+ outlineHeight: number;
3358
+ enterConnectorDocX: number;
3359
+ enterConnectorDocY: number;
3360
+ enterConnectorWidth: number;
3361
+ enterConnectorHeight: number;
3362
+ exitConnectorDocX: number;
3363
+ exitConnectorDocY: number;
3364
+ exitConnectorWidth: number;
3365
+ exitConnectorHeight: number;
3366
+ enterMarkerDocX: number;
3367
+ enterMarkerDocY: number;
3368
+ enterMarkerFlippedY: boolean;
3369
+ exitMarkerDocX: number;
3370
+ exitMarkerDocY: number;
3371
+ exitMarkerFlippedY: boolean;
3372
+ }
3373
+ declare class StringDevInview extends StringDevBadgeOverlayModule<InviewExtra, InviewMeasurement> {
3374
+ static devtool: {
3375
+ id: string;
3376
+ label: string;
3377
+ icon: string;
3378
+ order: number;
3379
+ group: number;
3380
+ hotkey: {
3381
+ key: string;
3382
+ shiftKey: boolean;
3383
+ };
3384
+ styles: string;
3385
+ overlay: {
3386
+ layerName: string;
3387
+ zIndex: number;
3388
+ layerAttribute: string;
3389
+ overlayId: string;
3390
+ defaultEnabled: boolean;
3391
+ };
3392
+ connects: {
3393
+ global: boolean;
3394
+ };
3395
+ };
3396
+ protected get overlayBadgeCount(): number;
3397
+ protected getDevtoolSubBadges(): StringDevtoolSubBadge[];
3398
+ private entryEnabled;
3399
+ private markerSizeCache;
3400
+ private readonly disabledStore;
3401
+ private readonly markerStore;
3402
+ private disabledTargetIds;
3403
+ private markerOffsets;
3404
+ private stableCoarseViewportWidth;
3405
+ private stableCoarseViewportHeight;
3406
+ protected getBadgeDescriptors(_object: StringObject, _targetId: string, _depth: number): Array<StringDevBadgeDescriptor>;
3407
+ protected createBadgeExtra(object: StringObject, _badge: HTMLButtonElement, targetId: string, _depth: number): InviewExtra;
3408
+ protected destroyBadgeExtra(entry: StringDevBadgeEntry<InviewExtra>): void;
3409
+ protected bindBadge(entry: StringDevBadgeEntry<InviewExtra>): Array<() => void>;
3410
+ protected measureEntry(entry: StringDevBadgeEntry<InviewExtra>, metrics: OverlayBaseMetrics): InviewMeasurement;
3411
+ protected afterBadgeMeasurement(entry: StringDevBadgeEntry<InviewExtra>, measurement: InviewMeasurement | undefined): void;
3412
+ protected onBadgeClick(entry: StringDevBadgeEntry<InviewExtra>, _event: MouseEvent, badge: StringDevManagedBadge): void;
3413
+ protected getBadgeState(entry: StringDevBadgeEntry<InviewExtra>, badge?: StringDevManagedBadge): StringDevOverlayBadgeState;
3414
+ private hiddenMeasurement;
3415
+ private getInviewBadgeState;
3416
+ private toggleInview;
3417
+ private isInviewBadgeActive;
3418
+ private isEntryEnabled;
3419
+ private setEntryEnabled;
3420
+ private disableAllOffsets;
3421
+ private bindMarkerDrag;
3422
+ private getMarkerOffset;
3423
+ private setMarkerOffset;
3424
+ private syncMarkerContent;
3425
+ private getViewportMarkerLabel;
3426
+ private measureMarkerSize;
3427
+ private resolveLiveStickyGeometry;
3428
+ private clampMarkerPercentInViewport;
3429
+ private clampMarkerPercentInClientViewport;
3430
+ private syncCompactMode;
3431
+ private syncCompactModeForExtra;
3432
+ private setAttributeIfChanged;
3433
+ private getStableViewportHeight;
3434
+ }
3435
+
3436
+ interface ProgressEntry {
3437
+ object: StringObject;
3438
+ hud: HTMLDivElement;
3439
+ badge: HTMLButtonElement;
3440
+ onBadgeClick: (event: MouseEvent) => void;
3441
+ }
3442
+ interface ProgressMeasurement {
3443
+ visible: boolean;
3444
+ docX: number;
3445
+ docY: number;
3446
+ targetId: string;
3447
+ progress: number;
3448
+ rawProgress: number;
3449
+ startPosition: number;
3450
+ endPosition: number;
3451
+ currentScroll: number;
3452
+ key: string;
3453
+ }
3454
+ declare class StringDevProgress extends StringDevOverlayModule<ProgressEntry, ProgressMeasurement> {
3455
+ static devtool: {
3456
+ id: string;
3457
+ label: string;
3458
+ icon: string;
3459
+ order: number;
3460
+ group: number;
3461
+ hotkey: {
3462
+ key: string;
3463
+ shiftKey: boolean;
3464
+ };
3465
+ styles: string;
3466
+ overlay: {
3467
+ layerName: string;
3468
+ zIndex: number;
3469
+ layerAttribute: string;
3470
+ overlayId: string;
3471
+ };
3472
+ connects: {
3473
+ keys: string[];
3474
+ };
3475
+ };
3476
+ private openTargetLabel;
3477
+ private panelRoot;
3478
+ private panelTitle;
3479
+ private panelSlider;
3480
+ private panelValue;
3481
+ private panelEasedValue;
3482
+ private panelPlayForwardButton;
3483
+ private panelPlayBackwardButton;
3484
+ private autoplayRaf;
3485
+ private autoplayDirection;
3486
+ private autoplayProgress;
3487
+ private readonly onPanelSliderInputBind;
3488
+ private unbindOutsideClick;
3489
+ constructor(context: StringContext);
3490
+ onInit(): void;
3491
+ destroy(): void;
3492
+ protected createOverlayEntry(object: StringObject): ProgressEntry;
3493
+ protected destroyOverlayEntry(entry: ProgressEntry): void;
3494
+ protected measureEntry(entry: ProgressEntry, metrics: OverlayBaseMetrics): ProgressMeasurement;
3495
+ protected applyMeasurement(entry: ProgressEntry, measurement: ProgressMeasurement | undefined): void;
3496
+ protected onEnabledChange(enabled: boolean): void;
3497
+ private applyEntryEnabledState;
3498
+ private openPanel;
3499
+ private closePanel;
3500
+ private closeAllPanels;
3501
+ private collectEntryHuds;
3502
+ private startAutoplay;
3503
+ private stopAutoplay;
3504
+ private syncPlayButtonState;
3505
+ private getEntryRange;
3506
+ private resolveEntryRawProgress;
3507
+ private resolveEasedProgress;
3508
+ private setEntryProgressOverride;
3509
+ private clearEntryProgressOverride;
3510
+ private clearAllProgressOverrides;
3511
+ private applyObjectProgress;
3512
+ private ensurePanel;
3513
+ private onPanelSliderInput;
3514
+ private renderPanel;
3515
+ private findEntryByTargetLabel;
3516
+ }
3517
+
3518
+ interface DevtoolsIconDef {
3519
+ id: string;
3520
+ viewBox: string;
3521
+ content: string;
3522
+ }
3523
+
3524
+ type DevtoolsIconSize = 12 | 16 | 20;
3525
+ declare class StringDevIconRegistry {
3526
+ private static instance;
3527
+ private spriteRoot;
3528
+ private constructor();
3529
+ static getInstance(): StringDevIconRegistry;
3530
+ register(icon: DevtoolsIconDef): void;
3531
+ resolve(size: DevtoolsIconSize, name: string, ...modifiers: string[]): string;
3532
+ private ensureSprite;
3533
+ }
3534
+ declare function resolveDevtoolsIcon(size: DevtoolsIconSize, name: string, ...modifiers: string[]): string;
2808
3535
 
2809
3536
  type StringDevStyleTokens = Record<string, string>;
2810
3537
  declare function buildDevtoolsThemeBlock(selectors: string | string[], overrides?: StringDevStyleTokens): string;
@@ -2911,22 +3638,6 @@ interface RowsLayoutGrid {
2911
3638
  }
2912
3639
  type RulersLayoutGrid = ColumnsLayoutGrid | RowsLayoutGrid;
2913
3640
 
2914
- interface StringDevtoolState {
2915
- active: boolean;
2916
- }
2917
- interface StringDevtoolDefinition {
2918
- id: string;
2919
- label: string;
2920
- icon: string;
2921
- order?: number;
2922
- getState: () => StringDevtoolState;
2923
- setActive: (active: boolean) => void;
2924
- subscribe?: (listener: (state: StringDevtoolState) => void) => () => void;
2925
- }
2926
- interface StringDevtoolProvider {
2927
- getDevtoolDefinition(): StringDevtoolDefinition | null;
2928
- }
2929
-
2930
3641
  interface ModuleBatchContext {
2931
3642
  module: StringModule;
2932
3643
  object: StringObject;
@@ -2959,12 +3670,17 @@ declare class DOMBatcher {
2959
3670
  }
2960
3671
 
2961
3672
  declare class StringTune {
3673
+ private static readonly DEVTOOLS_ACCESS_URL;
3674
+ private static readonly DEVTOOLS_LOG_PREFIX;
3675
+ private static readonly DEVTOOLS_ARTIFACT_SELECTORS;
2962
3676
  /** Bound handler for the scroll start event */
2963
3677
  private onScrollStartBind;
2964
3678
  /** Bound handler for the scroll stop event */
2965
3679
  private onScrollStopBind;
2966
3680
  /** Bound handler for the scroll direction change event */
2967
3681
  private onDirectionChangeBind;
3682
+ /** Bound handler for scroll mode/config changes */
3683
+ private onScrollConfigChangeBind;
2968
3684
  /** Bound wheel event handler */
2969
3685
  private onWheelBind;
2970
3686
  /** Bound scroll event handler */
@@ -3019,6 +3735,12 @@ declare class StringTune {
3019
3735
  private devtoolsFpsLastSampleTime;
3020
3736
  private devtoolsFpsFrameCount;
3021
3737
  private observerContainerResize;
3738
+ private devtoolsAccessToken;
3739
+ private devtoolsAccessState;
3740
+ private devtoolsAccessRequestId;
3741
+ private pendingDevtoolUses;
3742
+ private hasStarted;
3743
+ private devtoolsAccessLastMessage;
3022
3744
  canRebuild: boolean;
3023
3745
  /**
3024
3746
  * Sets the scroll position manually.
@@ -3028,6 +3750,7 @@ declare class StringTune {
3028
3750
  * @param value The new scroll position in pixels.
3029
3751
  */
3030
3752
  set scrollPosition(value: number);
3753
+ set accessDevtoolToken(value: string);
3031
3754
  /**
3032
3755
  * Configures the container element(s) used for scroll tracking.
3033
3756
  * Accepts either the `Window` object or an `HTMLElement`.
@@ -3095,6 +3818,12 @@ declare class StringTune {
3095
3818
  * @param settings Optional settings specific to this module.
3096
3819
  */
3097
3820
  use(objectClass: typeof StringModule, settings?: any): void;
3821
+ private cleanupExistingDevtoolsArtifacts;
3822
+ private instantiateModule;
3823
+ private shouldDeferDevtoolModule;
3824
+ private validateDevtoolsAccess;
3825
+ private logDevtoolsAccess;
3826
+ private resolveDevtoolsAccessResponse;
3098
3827
  /**
3099
3828
  * Registers a new scroll mode (provider) to the system.
3100
3829
  * Allows integrating custom scroll implementations (e.g. Lenis, Locomotive).
@@ -3198,6 +3927,8 @@ declare class StringTune {
3198
3927
  * Triggers module scroll stop lifecycle hook.
3199
3928
  */
3200
3929
  private onDirectionChange;
3930
+ private onScrollConfigChange;
3931
+ private syncDebugScrollState;
3201
3932
  /**
3202
3933
  * Called when global or module settings are updated.
3203
3934
  * Notifies all managers and modules to re-read new settings.
@@ -3244,4 +3975,4 @@ declare class StringTune {
3244
3975
  destroy(): void;
3245
3976
  }
3246
3977
 
3247
- export { CursorReactiveModule, DOMBatcher, GridAdapter, type RulersLayoutGrid, type RulersTriggerAction, ScrollController, type ScrollMarkRule as ScrollTriggerRule, StringAnchor, type StringContext, StringCursor, StringData, StringDelayLerpTracker, type StringDevStyleTokens, type StringDevtoolDefinition, type StringDevtoolProvider, type StringDevtoolState, StringFPSTracker, StringForm, StringGlide, StringImpulse, StringLazy, StringLerp, StringLerpTracker, StringLoading, StringMagnetic, StringMasonry, StringModule, StringObject, StringParallax, StringPositionTracker, StringProgress, StringProgressPart, StringRandom, StringResponsive, type StringRulersTrigger, StringScrollContainer, StringScrollbar, StringScroller, StringSequence, StringSplit, StringSpotlight, StringTune, StringVideoAutoplay, buildDevtoolsThemeBlock, StringTune as default, ensureStringDevtoolsSharedStyles, frameDOM, resolveDevtoolsIcon, styleTxn };
3978
+ export { CursorReactiveModule, DOMBatcher, GridAdapter, type RulersLayoutGrid, type RulersTriggerAction, ScrollController, type ScrollMarkRule as ScrollTriggerRule, StringAnchor, type StringContext, StringCursor, StringData, StringDelayLerpTracker, StringDevIconRegistry, StringDevInview, StringDevLayout, StringDevModule, StringDevOverlayRegistry, StringDevProgress, StringDevRulers, type StringDevStyleTokens, type StringDevtoolDefinition, type StringDevtoolProvider, type StringDevtoolState, StringFPSTracker, StringForm, StringGlide, StringImpulse, StringLazy, StringLerp, StringLerpTracker, StringLoading, StringMagnetic, StringMasonry, StringModule, StringObject, StringParallax, StringPositionTracker, StringProgress, StringProgressPart, StringRandom, StringResponsive, type StringRulersTrigger, StringScrollContainer, StringScrollbar, StringScroller, StringSequence, StringSplit, StringSpotlight, StringTune, StringVideoAutoplay, buildDevtoolsThemeBlock, StringTune as default, ensureStringDevtoolsSharedStyles, frameDOM, resolveDevtoolsIcon, styleTxn };