targetj 1.0.256 → 1.0.258

package/Export.js

@@ -1,26 +1,4 @@
-export {
-    App,
-    tApp,
-    tRoot,
-    isRunning,
-    getEvents,
-    getPager,
-    getLoader,
-    fetch,
-    fetchImage,
-    getManager,
-    getTargetManager,
-    getAnimationManager,
-    getRunScheduler,
-    getLocationManager,
-    getScreenWidth,
-    getScreenHeight,
-    getVisibles,
-    getResizeLastUpdate,
-    getTModelById,
-    getDomTModelById
-} from "./build/App.js";
-
+export * from "./build/App.js";
 export * from "./build/TModel.js";
 export * from "./build/Moves.js";
 export * from "./build/SearchUtil.js";
@@ -40,53 +18,56 @@ export * from "./build/AnimationManager.js";
 export * from "./build/AnimationUtil.js";
 export * from "./build/VisibilityUtil.js";
 export * from "./build/ScheduleUtil.js";
+export * from "./build/StateUtil.js";
 
-import * as AppModule from './build/App.js';
-import * as TModel from './build/TModel.js';
-import * as Moves from './build/Moves.js';
-import * as SearchUtil from './build/SearchUtil.js';
-import * as TargetData from './build/TargetData.js';
-import * as TargetUtil from './build/TargetUtil.js';
-import * as TargetParser from './build/TargetParser.js';
-import * as TModelUtil from './build/TModelUtil.js';
-import * as TUtil from './build/TUtil.js';
-import * as DomInit from './build/DomInit.js';
-import * as Dom from './build/$Dom.js';
-import * as Bracket from './build/Bracket.js';
-import * as BracketGenerator from './build/BracketGenerator.js';
-import * as ColorUtil from './build/ColorUtil.js';
-import * as Easing from './build/Easing.js';
-import * as TargetExecutor from './build/TargetExecutor.js';
-import * as AnimationManager from './build/AnimationManager.js';
-import * as AnimationUtil from './build/AnimationUtil.js';
-import * as VisibilityUtil from './build/VisibilityUtil.js';
-import * as ScheduleUtil from './build/ScheduleUtil.js';
+import * as AppModule from "./build/App.js";
+import * as TModelModule from "./build/TModel.js";
+import * as MovesModule from "./build/Moves.js";
+import * as SearchUtilModule from "./build/SearchUtil.js";
+import * as TargetDataModule from "./build/TargetData.js";
+import * as TargetUtilModule from "./build/TargetUtil.js";
+import * as TargetParserModule from "./build/TargetParser.js";
+import * as TModelUtilModule from "./build/TModelUtil.js";
+import * as TUtilModule from "./build/TUtil.js";
+import * as DomInitModule from "./build/DomInit.js";
+import * as DomModule from "./build/$Dom.js";
+import * as BracketModule from "./build/Bracket.js";
+import * as BracketGeneratorModule from "./build/BracketGenerator.js";
+import * as ColorUtilModule from "./build/ColorUtil.js";
+import * as EasingModule from "./build/Easing.js";
+import * as TargetExecutorModule from "./build/TargetExecutor.js";
+import * as AnimationManagerModule from "./build/AnimationManager.js";
+import * as AnimationUtilModule from "./build/AnimationUtil.js";
+import * as VisibilityUtilModule from "./build/VisibilityUtil.js";
+import * as ScheduleUtilModule from "./build/ScheduleUtil.js";
+import * as StateUtilModule from "./build/StateUtil.js";
 
 const TargetJS = {
-  ...AppModule,
-  ...TModel,
-  ...Moves,
-  ...SearchUtil,
-  ...TargetData,
-  ...TargetUtil,
-  ...TargetParser,
-  ...TModelUtil,
-  ...TUtil,
-  ...DomInit,
-  ...Dom,
-  ...Bracket,
-  ...BracketGenerator,
-  ...ColorUtil,
-  ...Easing,
-  ...TargetExecutor,
-  ...AnimationManager,
-  ...AnimationUtil,
-  ...VisibilityUtil,
-  ...ScheduleUtil
+    ...AppModule,
+    ...TModelModule,
+    ...MovesModule,
+    ...SearchUtilModule,
+    ...TargetDataModule,
+    ...TargetUtilModule,
+    ...TargetParserModule,
+    ...TModelUtilModule,
+    ...TUtilModule,
+    ...DomInitModule,
+    ...DomModule,
+    ...BracketModule,
+    ...BracketGeneratorModule,
+    ...ColorUtilModule,
+    ...EasingModule,
+    ...TargetExecutorModule,
+    ...AnimationManagerModule,
+    ...AnimationUtilModule,
+    ...VisibilityUtilModule,
+    ...ScheduleUtilModule,
+    ...StateUtilModule
 };
 
-if (typeof window !== 'undefined') {
-  window.TargetJS = TargetJS;
+if (typeof window !== "undefined") {
+    window.TargetJS = TargetJS;
 }
 
 export default TargetJS;

package/README.md

@@ -1,24 +1,34 @@
-# TargetJS: State as Destination, Code Order as UI Sequence
+# TargetJS: State Includes the Journey
 
-### Most frameworks are great at rendering state. TargetJS is designed for the journey between states.
+**Code order defines the UI sequence.**
+
+Most frameworks are great at rendering state. TargetJS is designed for the journey between states.
 
 **[targetjs.io](https://targetjs.io)** 
 [![MIT LICENSE](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/livetrails/targetjs/blob/main/LICENSE) 
 [![Stars](https://img.shields.io/github/stars/livetrails/targetjs.svg)](https://github.com/livetrails/targetjs/stargazers)
 [![npm version](https://img.shields.io/npm/v/targetj.svg)](https://www.npmjs.com/package/targetj)
 
-TargetJS is a JavaScript UI framework that replaces the "State → Render" model with "State → Transition → Render". It also lets code order directly define the UI sequence. It unifies UI, animations, API calls, event handling, and state into self-contained "Targets" that stack together like Lego pieces using Code-Ordered Reactivity.
+TargetJS is a JavaScript UI framework that replaces the "State → Render" model with "State → Transition → Render".
+
+Transitions are part of the state itself. This allows the entire UI, including an animation in progress, to be captured and later restored from the exact point at which it was saved.
+
+TargetJS also lets code order directly define the UI sequence. UI, transitions, API calls, event handling, and state are unified into self-contained Targets that chain together through Code-Ordered Reactivity.
 
 It can be used as a full-featured framework or as a lightweight library alongside other frameworks. It is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 
 
 ## What problems TargetJS solves
 
-**UI frameworks model the final result, not transition**
+**UI frameworks model the final result, not the transition**
 
 Traditional frameworks model the UI as a function of state: change state, re-render the UI. When state changes from A → B, the UI immediately jumps to B. The framework doesn’t naturally represent the journey from A → B. But modern, rich user experiences are more like: A → transition → B.
 
-TargetJS treats state as a destination. Values are not only assigned. They can be approached over time through configurable steps. This makes transitions a native part of state change. TargetJS also delivers CSS-level transition efficiency.
+TargetJS makes that transition part of the state change itself. Values are not limited to being assigned immediately. They can move toward their destination over configurable steps, intervals, and easing. Transitions therefore become a native part of the UI model rather than effects added after rendering. TargetJS also delivers CSS-level transition efficiency.
+
+Because each Target has its own lifecycle, transitions can also adapt dynamically. For example, pausing when an element leaves the screen or changing speed on scroll.
+
+Since the transition belongs to the runtime state, the UI can be captured while a transition is in progress. That state can later be restored, allowing the transition to resume from the point at which it was saved.
 
 **Fragmentation across multiple mental models**
 
@@ -41,10 +51,12 @@ With its compact style, TargetJS makes the journey from A → B explicit and eff
 ## 🚀 Why TargetJS?
 
 1. Unified State: One single state. Transitions are state too.
+1. Adaptive Transitions: Transitions can pause, resume, change speed, and respond to input.
+1. Restorable UI: Capture the UI during a transition and later resume the complete state including the transition from the saved point.
 1. UI as Sequence: Code describes the UI story from top to bottom, just like the user experiences the interaction: "When this finishes, do that."
 1. Ultra-Compact: Minimal code, with no coordination variables.
 1. Zero Boilerplate Async: Targets handle waiting for nested asynchronous operations automatically.
-1. Animation by Default: High-performance animations are baked into the logic.
+1. Animation by Default: Turn value into high-performance animations simply by adding `steps`.
 
 ## ⚡ Quick Start (30 Seconds)
 
@@ -56,28 +68,44 @@ npm install targetj
 
 **2. Example**
 
-This creates the following sequence: bounce → move → turn red → log. Notice how the code read like the UI sequence. The `$$` suffix makes each step wait for the preceding ones. There is only one state. The transitions are part of that state.
+This creates the following sequence:
+
+```text
+bounce → move → turn red → log
+```
+
+Notice how the code reads in the same order as the UI sequence. The `$$` suffix makes each target wait for all preceding targets to complete.
+
+There is only one state, and the transitions are part of that state. Click the square while it is animating to save its current state. Click it again to restore the state and resume the animation from the exact point at which it was saved.
 
 ```javascript
-import { App } from "targetj";
+import { App, state } from "targetj";
 
 App({
   width: 100,
   height: 100,
   backgroundColor: "blue",
+  cursor: "pointer",
 
-  // Starts immediately: bounce.
-  scale: { value: [0.5, 1.2, 1], steps: 24, interval: 12 },
+  // Starts immediately.
+  scale: { value: [0.5, 1.2, 1], steps: 100 },
 
-  // Waits for scale to finish, then moves right.
-  x$$: { value: [0, 180], steps: 40, interval: 8 },
+  // $$ waits for the previous target to finish.
+  x$$: { value: [0, 180], steps: 100 },
 
-  // Waits for x to finish, then turns red.
-  backgroundColor$$: { value: "crimson", steps: 30, interval: 8 },
+  backgroundColor$$: {
+    value: "crimson",
+    steps: 100
+  },
 
-  // Waits for the color change to finish.
   done$$() {
     console.log("Sequence complete");
+  },
+
+  // Click once to save the state.
+  // Click again to restore it including animation progress.
+  onClick() {
+    state().toggle();
   }
 }).mount("#app");
 ```
@@ -125,15 +153,15 @@ A target can also be defined as an object with optional controls that manage its
 
 ### Compact Execution Syntax
 
-Target names can include special symbols that define when they execute. This provides a compact alternative to implementing the same behavior with callbacks.
+Target names can include special suffixes that determine when they execute. This provides a compact alternative to coordinating the same behavior with callbacks.
 
-| Symbol | Name | Behavior |
-|------|------|------|
-| `name` | Standard | Runs immediately in the order it appears. |
-| `name$` | Reactive | Runs every time the previous sibling target updates. Equivalent to using `on<PropertyName>Step()` or `onValueChange()` to activate the next target . |
-| `name$$` | Deferred | Runs only after the entire preceding target chain, including children, animations, and API calls, completes. Equivalent to using `onComplete()` to activate the next target. |
-| `_name` | Inactive | Does not run automatically. Trigger it manually with `.activateTarget()`. Equivalent to `{ active: false }`. |
+| Syntax   | Name     | Behavior                                                                                                                                                             |
+| -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`   | Standard | Runs immediately in code order unless `active` is `false`.                                                                                                           |
+| `name$`  | Reactive | Runs whenever the preceding sibling Target updates. Similar to activating the next Target from `onValueChange()` or `on<PropertyName>Step()`.                        |
+| `name$$` | Deferred | Runs after the entire preceding Target chain—including children, animations, and API calls—has completed. Similar to activating the next Target from `onComplete()`. |
 
+To prevent a Target from running automatically, set `active: false` and activate it later with `.activateTarget()`.
 
 ## Examples: Like Button → Animated Like (in 3 Steps)
 
@@ -552,6 +580,8 @@ These targets update CSS properties and transforms:
 
 These can be animated simply by adding `steps`.
 
+For custom CSS, use the `css` Target.
+
 **Structure**
 
 These targets define the structure of the interface: