@maccesar/titools 2.2.12 → 2.4.0

package/README.md

@@ -1,825 +1,367 @@
-# TiTools - Titanium CLI for AI coding assistants
+<p align="center">
+  <img src="https://codigomovil.mx/images/logotipo-purgetss-gris.svg" height="230" width="230" alt="PurgeCSS logo"/>
+</p>
 
 <div align="center">
 
-![npm](https://img.shields.io/npm/dm/@maccesar%2Ftitools)
-![npm](https://img.shields.io/npm/v/@maccesar%2Ftitools)
-![NPM](https://img.shields.io/npm/l/@maccesar%2Ftitools)
+![npm](https://img.shields.io/npm/dm/purgetss)
+![npm](https://img.shields.io/npm/v/purgetss)
+![NPM](https://img.shields.io/npm/l/purgetss)
 
 </div>
 
-TiTools is a CLI that installs Titanium SDK skills and a knowledge index for AI coding assistants. One command installs 7 skills, a research agent, and 100+ reference files for Titanium SDK, Alloy MVC, and PurgeTSS.
-
-Without TiTools, assistants rely on general training data. That data can be outdated or too generic for Titanium work. With TiTools, the assistant can look up Alloy architecture, memory cleanup patterns, PurgeTSS utility classes, and platform-specific APIs.
-
-Vercel's AGENTS.md evaluation reports a 100% pass rate for the knowledge index approach, compared to 53-79% using skills alone.
-
----
-
-## Quick setup
-
-```bash
-# 1) Install the CLI
-npm install -g @maccesar/titools
-
-# 2) Install skills globally
-titools install
-
-# 3) Go to your Titanium project
-cd /path/to/your/project
-
-# 4) Sync the knowledge index into your project files
-titools sync
-
-# 5) Start your AI coding assistant
-claude   # or gemini, or codex
-
-# 6) Ask away!
-# "How should I structure a new app with login, signup, and a dashboard?"
-# "My ListView with 500 items scrolls poorly on Android. How do I fix it?"
-```
-
-What gets installed:
-- All 7 titanium-related skills to `~/.agents/skills/`
-- ti-pro agent for Claude Code
-- Platform symlinks (Claude Code, Gemini CLI, Codex CLI)
-- Knowledge index in your project's `AGENTS.md`/`CLAUDE.md`/`GEMINI.md`
-
-Why NPM?
-- Cross-platform (macOS, Linux, Windows)
-- No sudo required
-- Simple updates with `titools update`
-
----
-
-## Compatible platforms
-
-| Platform                                                  | Status           | Installation Path   |
-| --------------------------------------------------------- | ---------------- | ------------------- |
-| [Claude Code](https://claude.ai/claude-code)              | Fully Compatible | `~/.claude/skills/` |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | Fully Compatible | `~/.gemini/skills/` |
-| [Codex CLI](https://developers.openai.com/codex/cli/)     | Fully Compatible | `~/.codex/skills/`  |
-
-All three platforms use the Agent Skills open standard: a `SKILL.md` file with YAML frontmatter.
-
----
-
-## Knowledge index
-
-The knowledge index is a compressed documentation map that gets injected into your project's instruction files. It tells the AI where Titanium reference docs are, so it can pull accurate information instead of relying on general training data.
-
-### Why it works
-
-| Approach         | Reported Pass Rate |
-| ---------------- | ------------------ |
-| No documentation | 53%                |
-| Skills only      | 53-79%             |
-| Knowledge index  | 100%               |
-
-Per Vercel's evaluation:
-- No decision point: information is present without needing to invoke skills
-- Consistent availability: available in every turn, not async-loaded
-- No ordering issues: avoids "read docs first vs explore project first"
-
-For details, see `AGENTS-VERCEL-RESEARCH.md`.
-
-### What gets generated
-
-The `titools sync` command generates a block like this inside your project files:
-
-```
-[Titanium SDK Docs Index]|root: ~/.agents/skills
-|MANDATORY: Your training data for Titanium SDK, Alloy, and PurgeTSS is OUTDATED and INCOMPLETE. These reference files are the SINGLE SOURCE OF TRUTH. Prefer retrieval-led reasoning over pre-training-led reasoning. ALWAYS read the relevant files below BEFORE writing any code.
-|ti-expert/references:{alloy-structure.md,anti-patterns.md,...}
-|purgetss/references:{animation-system.md,class-index.md,...}
-|ti-ui/references:{layouts-and-positioning.md,listviews-and-performance.md,...}
-...
-```
-
-Note: The index is injected as direct content (no code blocks) so the model treats it as an active instruction, not illustrative text.
-
-File selection per assistant:
-- Claude Code -> `CLAUDE.md`
-- Gemini CLI -> `GEMINI.md`
-- Codex CLI / others -> `AGENTS.md`
-
-### How skills and the knowledge index work together
-
-The knowledge index provides always-available context (the documentation map). Skills provide specialized, on-demand expertise (the actual knowledge).
-
-Together they work like this:
-
-| Your Question                   | Knowledge Index Provides        | Skills Activate               |
-| ------------------------------- | ------------------------------- | ----------------------------- |
-| "Create a login screen"         | Context about project structure | `ti-expert`, `ti-ui`          |
-| "Optimize ListView performance" | Points to docs location         | `ti-ui` reads specific files  |
-| "Implement push notifications"  | API reference paths             | `ti-howtos` provides workflow |
-
-You do not need to explicitly invoke skills. The AI detects when to use them based on your question.
-
-### Version notice
-
-The knowledge index is based on the latest Titanium SDK documentation. If your project uses an older version, the command will warn you about potential API differences.
+**PurgeTSS** is a toolkit for building mobile apps with the [Titanium framework](https://titaniumsdk.com). It provides utility classes, icon font support, an Animation module, a grid system, and the `shades` command for generating custom colors.
 
 ---
 
-## Skills overview
-
-| Skill        | Purpose                         | Best For                                |
-| ------------ | ------------------------------- | --------------------------------------- |
-| alloy-guides | Alloy MVC reference             | Models, Views, Controllers, Widgets     |
-| alloy-howtos | Alloy CLI and debugging         | Project setup, CLI commands, errors     |
-| purgetss     | Utility-first styling           | UI styling and animations               |
-| ti-expert    | Architecture and implementation | Starting point for most tasks           |
-| ti-guides    | SDK fundamentals                | Hyperloop, distribution, configuration  |
-| ti-howtos    | Native feature integration      | Location, Push, Media, Platform APIs    |
-| ti-ui        | UI/UX patterns                  | Complex layouts, ListViews, platform UI |
-
-Note: `ti-guides`, `ti-howtos`, `ti-ui`, `alloy-guides`, and `alloy-howtos` are based on official Titanium SDK and Alloy documentation. `ti-expert` and `purgetss` are opinionated and reflect personal coding conventions (biased toward PurgeTSS).
+- 23,300+ utility classes for styling Titanium views
+- Parses XML files to generate a clean `app.tss` with only the classes your project uses
+- Customizable defaults via `config.cjs`, with JIT classes for arbitrary values
+- Icon font support: Font Awesome, Material Icons, Material Symbols, Framework7-Icons
+- `build-fonts` command generates `fonts.tss` with class definitions and fontFamily selectors
+- `shades` command generates color shades from any hex color
+- Animation module for 2D matrix animations on views or arrays of views
+- Grid system for aligning and distributing elements within views
 
 ---
 
-## Agents (Claude Code only)
-
-In addition to skills, this repository includes sub-agents for Claude Code. Sub-agents run in isolated contexts and are useful for research tasks that produce verbose output.
-
-### ti-pro
-
-Deep-dive research specialist that preloads all 7 titanium-related skills.
-
-| Aspect           | Details                                           |
-| ---------------- | ------------------------------------------------- |
-| Location         | `~/.claude/agents/ti-pro.md`                      |
-| Model            | Sonnet (comprehensive analysis)                   |
-| Tools            | Read-only (Read, Grep, Glob)                      |
-| Preloaded Skills | All 7 titanium-related skills injected at startup |
+## Animation Module (`purgetss.ui.js`)
 
-When to use the agent vs skills:
+Install with `purgetss module` (or `purgetss m`). This places `purgetss.ui.js` in your project's `lib` folder.
 
-| Use Case                     | Use This                        | Why                                                  |
-| ---------------------------- | ------------------------------- | ---------------------------------------------------- |
-| Quick inline reference       | `/ti-expert`, `/purgetss`, etc. | Runs in main conversation, interactive               |
-| Analyzing an entire codebase | `ti-pro` agent                  | Isolates verbose output, cross-references all skills |
-| Multi-feature research       | `ti-pro` agent                  | Preloads all skills for comprehensive answers        |
-| Step-by-step implementation  | Skills directly                 | Task-oriented guidance                               |
-| Architecture review          | `ti-pro` agent                  | Read-only analysis across all documentation          |
+### Declaring an Animation object
 
-Example prompts for the agent:
-
-```
-"Can you use the ti-pro agent to analyze this Alloy codebase's architecture?"
-"Can you research how to combine location, push, and background sync in Titanium?"
-"Can you compare ListView vs TableView performance for my use case?"
-"Review this Titanium mobile app and identify anti-patterns."
+```xml
+<Animation id="myAnimation" module="purgetss.ui" class="opacity-0 duration-300 ease-in" />
 ```
 
-Tip: For automatic activation, include words like "Titanium", "Alloy", or "mobile app" in your prompt to ensure the specialized agent is used instead of generic code analysis.
+You can use any position, size, color, opacity, or transformation class from `utilities.tss`.
 
-Key difference:
-- Skills = interactive help during development (inline, conversational)
-- Agents = isolated research tasks (returns summary, keeps verbose output separate)
+### Available methods
 
----
+| Method                                    | Description                                                                                                                                                                                                                                     |
+| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `play(views, cb)` / `toggle(views, cb)`   | Animate views from current state to the animation state. Toggles `open`/`close` on each call.                                                                                                                                                   |
+| `open(views, cb)`                         | Explicitly run the `open` state animation.                                                                                                                                                                                                      |
+| `close(views, cb)`                        | Explicitly run the `close` state animation.                                                                                                                                                                                                     |
+| `apply(views, cb)`                        | Apply properties instantly without animation.                                                                                                                                                                                                   |
+| `draggable(views)`                        | Make a view or array of views draggable inside their parent.                                                                                                                                                                                    |
+| `undraggable(views)`                      | Remove draggable behavior and clean up all listeners.                                                                                                                                                                                           |
+| `detectCollisions(views, dragCB, dropCB)` | Enable collision detection on draggable views with hover and drop callbacks.                                                                                                                                                                    |
+| `swap(view1, view2)`                      | Animate two views exchanging positions. Auto-normalizes position from margins/right/center via `view.rect`. Inherits `duration`, `delay`, `curve`; fallback: 200ms.                                                                             |
+| `sequence(views, cb)`                     | Animate views one after another. Callback fires after the last view.                                                                                                                                                                            |
+| `shake(view, intensity)`                  | Bidirectional shake animation for error feedback. Inherits `duration`, `delay`; fallback: 400ms. Default intensity: 10px.                                                                                                                       |
+| `pulse(view, count)`                      | Scale-up-and-back pulse animation. Scale from Animation object (default 1.2x). Count: number of pulses (default 1).                                                                                                                             |
+| `snapTo(view, targets)`                   | Snap a view to the nearest target by center distance. Auto-normalizes target position. Inherits `duration`, `delay`, `curve`; fallback: 200ms.                                                                                                  |
+| `reorder(views, newOrder)`                | Animate views to new positions based on index mapping. Auto-normalizes positions. Inherits `duration`, `delay`, `curve`; fallback: 200ms.                                                                                                       |
+| `transition(views, layouts)`              | Multi-view layout transitions using `Matrix2D.translate().rotate().scale()`. Layout properties: `translation`, `rotate`, `scale`, `zIndex`. Compatible with TiDesigner presets. Views without a layout entry fade out; returning views fade in. |
 
-## How skills work
+### Callback event object
 
-Skills are automatically activated based on your questions. Just ask naturally:
+All callbacks (`play`, `open`, `close`, `apply`) receive an enriched event object:
 
+```js
+{
+  type: String,         // event type ('complete' or 'applied')
+  bubbles: Boolean,
+  cancelBubble: Boolean,
+  action: String,       // 'play' or 'apply'
+  state: String,        // 'open' or 'close'
+  id: String,           // Animation object ID
+  targetId: String,     // ID of the animated view
+  index: Number,        // position in array (0-based)
+  total: Number,        // total views in array
+  getTarget: Function   // returns the animated view object
+}
 ```
-"Can you create a login screen with email validation and animations?"
-```
-
-The AI will automatically use:
-- `ti-expert` -> Architecture and controller structure
-- `purgetss` -> Styling classes and animations (if PurgeTSS detected)
-- `ti-howtos` -> Secure token storage
 
-You do not need to call skills explicitly. The AI reads skill descriptions and loads the appropriate knowledge when needed.
+When animating an **array of views**, the callback is called once per view with the corresponding `index` and `total` values.
 
-### Project detection
-
-All skills include automatic project detection to ensure compatibility:
-
-| Skill        | What It Detects       | How It Works                                                  |
-| ------------ | --------------------- | ------------------------------------------------------------- |
-| purgetss     | PurgeTSS installation | Checks for `purgetss/` folder, `config.cjs`, `utilities.tss`  |
-| ti-expert    | Alloy vs Classic      | Checks for `app/` (Alloy) vs `Resources/` (Classic) structure |
-| alloy-guides | Alloy projects        | Checks for `app/views/`, `app/controllers/`                   |
-| alloy-howtos | Alloy projects        | Checks for `alloy.jmk`, `config.json`                         |
-| ti-ui        | Titanium projects     | Checks for `tiapp.xml` (both Alloy and Classic)               |
-| ti-guides    | Titanium projects     | Checks for `tiapp.xml` (both Alloy and Classic)               |
-| ti-howtos    | Titanium projects     | Checks for `tiapp.xml` (both Alloy and Classic)               |
-
-Why this matters:
-- PurgeTSS suggestions are only provided if PurgeTSS is installed
-- Alloy-specific patterns are only suggested for Alloy projects
-- Classic Titanium projects will not receive inappropriate Alloy advice
-
-### Skill hierarchy
-
-`ti-expert` acts as the orchestrator, delegating to specialized skills when needed:
-
-```
-                    ┌─────────────────┐
-                    │  ti-expert      │
-                    │  (Start Here)   │
-                    └────────┬────────┘
-                             │
-        ┌────────────────────┼────────────────────┐
-        │                    │                    │
-        ▼                    ▼                    ▼
-┌───────────────┐   ┌───────────────┐   ┌───────────────┐
-│   purgetss    │   │    ti-ui      │   │   ti-howtos   │
-│   (Styling)   │   │   (UI/UX)     │   │   (Native)    │
-└───────────────┘   └───────────────┘   └───────────────┘
-        │                    │                    │
-        └────────────────────┼────────────────────┘
-                             │
-        ┌────────────────────┼────────────────────┐
-        │                    │                    │
-        ▼                    ▼                    ▼
-┌───────────────┐   ┌───────────────┐   ┌───────────────┐
-│  ti-guides    │   │ alloy-guides  │   │ alloy-howtos  │
-│    (SDK)      │   │    (MVC)      │   │    (CLI)      │
-└───────────────┘   └───────────────┘   └───────────────┘
+```js
+$.myAnimation.play([$.card1, $.card2, $.card3], (e) => {
+  console.log(`Animated ${e.index + 1} of ${e.total}`) // "Animated 1 of 3", etc.
+  if (e.index === e.total - 1) {
+    console.log('All done!')
+  }
+})
 ```
 
----
-
-## Skill details
-
-### ti-expert
+### Multi-state animations
 
-The primary skill for Titanium Alloy development. Start here for most tasks.
+Use `open`, `close`, and `complete` modifiers inside `animationProperties` to define different states:
 
-When it activates:
-- Designing project structure
-- Implementing controllers, views, services
-- Choosing data strategies (Models vs Collections)
-- Writing clean ES6+ code
-- Memory management and cleanup patterns
-- Performance optimization
-- Security patterns
-- Migrating legacy apps
-
-Example prompts:
-```
-"How should I structure a new Titanium Alloy app with authentication?"
-"Create a user service that fetches data from an API."
-"What's the best pattern for navigation between screens?"
-"Prevent memory leaks in my controllers."
-"Migrate classic Titanium code to modern Alloy patterns."
-"What's a clean way to organize services in an Alloy app?"
+```xml
+<Animation id="fadeToggle" module="purgetss.ui" class="duration-300"
+  animationProperties="{
+    open: { opacity: 1 },
+    close: { opacity: 0 }
+  }"
+/>
 ```
 
-Key features:
-- Quick decision matrix for common questions
-- 18 reference guides for deep dives
-- Delegates to specialized skills when needed
-
----
-
-### purgetss
+### Draggable views
 
-Utility-first styling toolkit for Titanium/Alloy.
-
-When it activates:
-- Setting up PurgeTSS in a project
-- Complex layouts (Grid system)
-- Declarative animations (`<Animation>` component)
-- Icon fonts (Font Awesome, Material Icons)
-- Custom color palettes
-- Platform-specific styling
-- config.cjs configuration
-
-Example prompts:
-```
-"How do I set up PurgeTSS in my existing Alloy project?"
-"Create a responsive 12-column grid layout."
-"Add a fade-in animation when my view appears."
-"How do I configure custom colors in config.cjs?"
-"How do I use Font Awesome 7 icons?"
-"Style this button differently on iOS vs Android."
+```js
+$.myAnimation.draggable($.myView)
+// or with constraints:
+$.myAnimation.draggable([$.card1, $.card2])
 ```
 
-Rules:
-- Platform-specific properties require modifiers (e.g., `[platform=ios]`) to prevent cross-platform build failures
-- No flexbox (`flex-row`, `justify-between`) -> use `horizontal`/`vertical`
-- No `w-full` -> use `w-screen`
-- No `p-*` on Views -> use `m-*` on children
-- Arbitrary values use parentheses: `w-(100px)`, not `w-[100px]`
-
----
-
-### ti-ui
-
-UI/UX expert for layouts and platform components.
-
-When it activates:
-- Layout systems (composite, vertical, horizontal)
-- ListView/TableView optimization
-- Event handling and bubbling
-- Animations and transforms
-- Gestures (swipe, pinch, longpress)
-- Orientation handling
-- App icons and splash screens
-- Android Action Bar / iOS Navigation patterns
-- Accessibility (VoiceOver, TalkBack)
-
-Example prompts:
-```
-"How do I create a high-performance ListView with custom templates?"
-"Handle swipe gestures on table rows."
-"Set up app icons for all iOS and Android densities."
-"Implement pull-to-refresh on a ScrollView."
-"How do I make my app accessible for VoiceOver users?"
-"How do I configure the Android Action Bar with custom menu items?"
-```
+Use `bounds` to restrict movement, and `drag`/`drop` modifiers for drag-state animations. Use `vertical-constraint` or `horizontal-constraint` classes to limit the drag axis.
 
-Key rules:
-- No `Ti.UI.SIZE` in ListView items (causes jerky scrolling)
-- Prefer ListView over TableView for large datasets
-- Use `dp` units for cross-platform consistency
-- Remove global listeners on pause
+### Collision detection
 
----
+After calling `draggable()`, you can enable collision detection to know when a dragged view overlaps another:
 
-### ti-howtos
-
-Native feature integration expert.
-
-When it activates:
-- Location services and Maps
-- Push notifications (APNs/FCM)
-- Local notifications
-- Camera and Gallery
-- Audio/Video playback
-- File system operations
-- SQLite databases
-- HTTPClient networking
-- WebView integration
-- Android Intents and Services
-- iOS Background Services, iCloud, Keychain
-- Core Motion, WatchKit
-
-Example prompts:
-```
-"How do I implement battery-efficient GPS tracking?"
-"How do I set up push notifications for iOS and Android?"
-"How do I capture and resize photos from the camera?"
-"Download files with a progress indicator."
-"How should I store sensitive data in iOS Keychain?"
-"Create an Android background service."
-"Integrate with Apple Watch using WatchKit."
-"Handle background location updates on iOS."
+```js
+$.myAnimation.draggable(views)
+$.myAnimation.detectCollisions(views, onHover, onDrop)
 ```
 
-Key rules:
-- Always handle both `onload` and `onerror` for HTTPClient
-- Always close database handles and result sets
-- Use `imageAsResized` to avoid memory exhaustion
-- Configure proper permissions in tiapp.xml
-
----
+**`dragCB(source, target)`** is called during drag:
+- `target` is the view under the drag center, or `null` when leaving all targets
+- Use this to show visual feedback (highlights, borders, scaling)
 
-### ti-guides
+**`dropCB(source, target)`** is called on drop:
+- `target` is the view where the source was released
+- If no target is found, the source automatically snaps back to its original position with a 200ms animation
 
-SDK fundamentals and advanced configuration.
+### Swap animation
 
-When it activates:
-- Hyperloop native access
-- Native module development
-- App distribution (Play Store, App Store)
-- tiapp.xml configuration
-- CLI commands and options
-- Memory and bridge optimization
-- CommonJS module patterns
-- Coding best practices
+Animate two views exchanging positions:
 
-Example prompts:
+```js
+$.myAnimation.swap(view1, view2)
 ```
-"How do I access native iOS APIs using Hyperloop?"
-"Configure tiapp.xml for a production build."
-"What do I need for Google Play submission?"
-"How do I create a native Android module?"
-"Optimize bridge crossings for better performance."
-"List reserved words I should avoid."
-```
-
----
 
-### alloy-guides
+- Inherits `duration`, `delay`, and `curve` from the Animation object's classes
+- Falls back to 200ms duration, 0ms delay, and ease-in-out curve if not set
+- Handles iOS transform reset automatically
+- Temporarily raises z-index so views animate above siblings
+- Updates internal `_originLeft`/`_originTop` for subsequent drag operations
 
-Complete Alloy MVC framework reference.
+### Sequence animation
 
-When it activates:
-- MVC architecture concepts
-- Backbone.js models and collections
-- Data binding patterns
-- XML markup elements
-- TSS styling syntax
-- Widget development
-- Sync adapters (sql, properties)
-- Migrations
+Animate views one after another (unlike `play(array)` which runs them in parallel):
 
-Example prompts:
+```js
+$.fadeIn.sequence([$.title, $.subtitle, $.button], () => {
+  console.log('All views animated')
+})
 ```
-"Explain how Alloy data binding works."
-"How do I create a model with the SQLite adapter?"
-"Bind a collection to a TableView."
-"How do I build a reusable widget?"
-"Show the TSS syntax for platform-specific styles."
-"How does the Alloy compilation process work?"
-```
-
----
 
-### alloy-howtos
+- Each view fully completes before the next starts
+- Callback fires once after the last view
+- Respects `open`/`close` state (set once for the entire sequence)
 
-Alloy CLI, configuration, and debugging.
+### Shake animation
 
-When it activates:
-- Alloy CLI commands (new, generate, compile)
-- Configuration files (alloy.jmk, config.json)
-- Debugging compilation errors
-- Conditional views
-- Custom XML tags
-- Best practices and naming conventions
-- Backbone.Events patterns
+Quick horizontal shake for error feedback, using native `autoreverse` + `repeat` for smooth performance:
 
-Example prompts:
+```js
+$.myAnimation.shake($.loginButton)        // default intensity: 10px
+$.myAnimation.shake($.input, 6)           // subtle: 6px
+$.myAnimation.shake($.errorLabel, 20)     // strong: 20px
 ```
-"How do I generate a new model with the CLI?"
-"Configure alloy.jmk build hooks."
-"How do I fix "No app.js found"?"
-"Create conditional views based on user state."
-"How do I build a custom XML tag without widgets?"
-"Set up Backbone.Events for global communication."
-```
-
-Key rules:
-- Use Backbone.Events instead of Ti.App.fireEvent
-- Never use double underscore prefixes (`__foo`)
-- Access config at runtime with `Alloy.CFG.yourKey`
 
----
+### Snap to nearest target
 
-## Usage examples and best practices
+After dragging, snap a view to the closest target by center-to-center distance:
 
-### Example prompts
-
-Starting a new project:
-```
-"I'm starting a new Titanium Alloy app for a food delivery service.
-Can you help me set up the project structure?"
+```js
+const matched = $.myAnimation.snapTo(draggedView, slotViews)
+if (matched) {
+  console.log('Snapped to:', matched.id)
+}
 ```
 
-UI development:
-```
-"Can you create a product listing screen with:
-- Pull-to-refresh
-- Infinite scroll pagination
-- Image caching
-- Swipe-to-delete"
-```
+### Reorder animation
 
-API integration:
-```
-"Can you build a complete authentication flow with:
-- Login/Register screens
-- JWT token management
-- Secure storage
-- Auto-refresh tokens"
-```
+Animate an array of views to new positions based on index mapping:
 
-Performance optimization:
-```
-"My app is slow - the ListView scrolls poorly and memory usage is high. How do I optimize it?"
+```js
+// Reverse order: view[0] goes to position of view[2], view[2] to position of view[0]
+$.myAnimation.reorder(cardViews, [2, 1, 0])
 ```
 
-Migration:
-```
-"I have a legacy Titanium classic app from 2015. Can you help me migrate it to modern Alloy?"
-```
+- All views animate simultaneously
+- Captures positions before animating to avoid conflicts
 
-Platform-specific features:
-```
-"How do I implement Apple Sign-In for iOS and Google Sign-In for Android?"
-```
+### Removing draggable behavior
 
-Debugging:
-```
-"How do I fix "Alloy is not defined" in my lib file?"
-```
+Remove draggable behavior and clean up all event listeners:
 
-Codebase analysis (using agent):
-```
-"Use the ti-pro agent to analyze this project and:
-- review the overall architecture
-- identify memory leak patterns
-- check for common anti-patterns
-- suggest improvements"
+```js
+$.myAnimation.undraggable(cardViews)
 ```
 
-### Tips for better results
-
-1. Be specific. Instead of "Make a list", try "Can you create a ListView with user avatars, names, and swipe actions?"
-2. Provide context. Instead of "How do I fix this error?", try "I'm getting this error when compiling: [error message]. Here's my code: [code]"
-3. Ask for architecture first. For complex features, start with "How should I architect a real-time chat feature?" then follow up with implementation details.
-4. Mention constraints. "Build a settings screen. Must work offline and sync when connected."
-5. Reference existing code. "Here's my current controller. How can I improve memory management?"
-
-More examples: See [Example Prompts](EXAMPLE-PROMPTS.md) for detailed prompts that test each skill's capabilities.
-
----
-
-## CLI reference
-
-### titools install
+### Property inheritance
 
-Installs Titanium skills, agents, and platform symlinks.
+The `swap`, `reorder`, `snapTo`, and `shake` methods inherit animation properties from the `<Animation>` object's classes. This means you can configure behavior declaratively in XML:
 
-```bash
-titools install [options]
+```xml
+<Animation id="myAnim" module="purgetss.ui" class="curve-animation-ease-out delay-100 duration-150" />
 ```
 
-Options:
-| Option          | Description                                                         |
-| --------------- | ------------------------------------------------------------------- |
-| `-l, --local`   | Install skills locally in the current project (`./.agents/skills/`) |
-| `-a, --all`     | Install to all detected platforms without prompting                 |
-| `--path <path>` | Install to a custom path (skips symlink setup)                      |
+| Property      | `play`/`toggle`/`open`/`close`/`sequence` | `swap`/`reorder`/`snapTo` |       `shake`       |
+| ------------- | :---------------------------------------: | :-----------------------: | :-----------------: |
+| `duration`    |                     ✅                     |             ✅             |       ✅ (÷6)        |
+| `delay`       |                     ✅                     |             ✅             |          ✅          |
+| `curve`       |                     ✅                     |             ✅             | fixed `EASE_IN_OUT` |
+| `autoreverse` |                     ✅                     |             —             |    fixed `true`     |
+| `repeat`      |                     ✅                     |             —             |      fixed `3`      |
 
-Behavior depends on where you run it:
+Fallback defaults when not set: `swap`/`reorder`/`snapTo` → 200ms; `shake` → 400ms. All animation timing is controlled declaratively via the `<Animation>` object's classes.
 
-| Context                    | Behavior                                                              |
-| -------------------------- | --------------------------------------------------------------------- |
-| Outside a Titanium project | Installs skills globally to `~/.agents/skills/`                       |
-| Inside a Titanium project  | Prompts you to choose: Global or Local installation                   |
-| With `--local` flag        | Installs skills locally to `./.agents/skills/` in the current project |
+- Removes touch and orientation listeners
+- Removes views from collision detection registry
+- Cleans up internal tracking properties
 
-What it does:
-- Installs all 7 titanium-related skills (global or local depending on context)
-- Installs ti-pro agent for Claude Code
-- Detects installed AI platforms and lets you choose which to link
-- Creates symlinks from platform directories to central skills
-- Cleans up legacy artifacts (`alloy-expert` skill, `ti-researcher` agent)
-- If run inside a Titanium project, prompts to run `titools sync` afterward
-- Warns Gemini users if local skills override existing global Gemini skills
+### Utility classes for animations
 
-### titools sync
+| Class pattern                                       | Description                   |
+| --------------------------------------------------- | ----------------------------- |
+| `duration-{n}`                                      | Animation duration in ms      |
+| `delay-{n}`                                         | Delay before animation starts |
+| `rotate-{n}`                                        | 2D rotation in degrees        |
+| `scale-{n}`                                         | Scale factor                  |
+| `repeat-{n}`                                        | Number of repeats             |
+| `ease-in`, `ease-out`, `ease-linear`, `ease-in-out` | Timing curve                  |
+| `zoom-in-{n}`, `zoom-out-{n}`                       | Zoom animations               |
+| `drag-apply`, `drag-animate`                        | Drag interaction style        |
+| `vertical-constraint`, `horizontal-constraint`      | Constrain drag axis           |
 
-Generates a compressed knowledge index inside your project's instruction files (`AGENTS.md`, `CLAUDE.md`, `GEMINI.md`).
+### Utility functions
 
-Important: This command only works inside a Titanium project (requires `tiapp.xml`). The knowledge index is project-specific. It detects your SDK version and points to the installed skill references.
+| Function                               | Description                                                                                              |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `deviceInfo()`                         | Logs detailed platform and display information to the console. Works in both Alloy and Classic projects. |
+| `saveComponent({ source, directory })` | Saves a view snapshot as PNG to the photo gallery.                                                       |
 
-```bash
-titools sync [path] [options]
-```
+See the full documentation at [purgetss.com/docs/animation-module/introduction](https://purgetss.com/docs/animation-module/introduction).
 
-Arguments:
-| Argument | Description                                  |
-| -------- | -------------------------------------------- |
-| `[path]` | Project path (defaults to current directory) |
+---
 
-Options:
-| Option          | Description                                |
-| --------------- | ------------------------------------------ |
-| `-f, --force`   | Overwrite existing files without prompting |
-| `-v, --verbose` | Show detailed diagnostics                  |
+## Customizing default components
 
-What it does:
-- Verifies you're inside a Titanium project (`tiapp.xml`)
-- Detects Titanium SDK version from `tiapp.xml`
-- Prompts you to select which files to sync: `AGENTS.md`, `CLAUDE.md`, `GEMINI.md`
-- Inserts or updates a compressed knowledge index block in selected files
-- Removes knowledge blocks from unselected files
-- Creates files if they don't exist
+PurgeTSS sets defaults for three components out of the box:
 
-### titools update
+| Component   | Default                                 |
+| ----------- | --------------------------------------- |
+| `Window`    | `backgroundColor: '#FFFFFF'`            |
+| `View`      | `width: Ti.UI.SIZE, height: Ti.UI.SIZE` |
+| `ImageView` | `hires: true` (iOS only)                |
 
-Updates installed skills and agents to the latest version.
+Override or extend them in `config.cjs` with `theme.extend`:
 
-```bash
-titools update [options]
+```js
+module.exports = {
+  theme: {
+    extend: {
+      Window: {
+        apply: 'exit-on-close-false bg-surface'
+      }
+    }
+  }
+}
 ```
 
-Options:
-| Option        | Description                                |
-| ------------- | ------------------------------------------ |
-| `-l, --local` | Update local skills in the current project |
+If an applied class sets a property that already exists in the defaults (e.g., `bg-surface` vs `backgroundColor: '#FFFFFF'`), the applied value wins. Array-type properties like `extendEdges` and `orientationModes` use bracket notation (`[ ]`) in the generated output.
 
-Behavior depends on where you run it:
+### Shorthand and explicit forms
 
-| Context                                                         | Behavior                                                    |
-| --------------------------------------------------------------- | ----------------------------------------------------------- |
-| Outside a Titanium project                                      | Updates global skills in `~/.agents/skills/` (if installed) |
-| Inside a Titanium project (local skills only)                   | Updates local skills automatically                          |
-| Inside a Titanium project (both local and global)               | Prompts you to choose: Global or Local                      |
-| Inside a Titanium project (with existing knowledge index files) | Also refreshes `AGENTS.md`/`CLAUDE.md`/`GEMINI.md`          |
-
-What it does:
-1. Checks GitHub for the latest CLI version
-2. If a newer version exists, it prompts you to update the CLI first with `npm update -g @maccesar/titools`
-3. If the CLI is current, it syncs skills and agents from the installed package (no download needed)
-4. Updates platform symlinks only for platforms that already have them
-5. Cleans up legacy artifacts (`alloy-expert` skill, `ti-researcher` agent)
-6. Auto-syncs knowledge index files if they exist in the current project
-
-Note: This command syncs knowledge packages and agents from your installed CLI. To get new features, first update the CLI with `npm update -g @maccesar/titools`, then run `titools update`.
-
-### titools remove
-
-Removes skills, agents, symlinks, and knowledge index blocks.
-
-```bash
-titools remove [options]
-```
-
-Options:
-| Option        | Description                                  |
-| ------------- | -------------------------------------------- |
-| `-l, --local` | Remove local skills from the current project |
-
-What it does:
-- Detects all installed components (skills, agents, symlinks, knowledge blocks)
-- Prompts you to select what to remove:
-  - ti-pro agent for Claude Code
-  - Knowledge index blocks from instruction files (`AGENTS.md`, `CLAUDE.md`, `GEMINI.md`)
-  - Skills from global (`~/.agents/skills/`) or project directory
-  - Platform symlinks from global or project directory
-- Removes both current and legacy artifacts
-
-### Verify installation
-
-Check titools version:
-```bash
-titools --version
-```
-
-Check central location (global install):
-```bash
-ls ~/.agents/skills/
-# Should show: ti-expert, purgetss, ti-ui, ti-howtos, ti-guides, alloy-guides, alloy-howtos
-```
+Both are equivalent:
 
-Claude Code (skills):
-```bash
-ls -la ~/.claude/skills/
-# Should show symlinks pointing to ~/.agents/skills/
-```
+```js
+// Shorthand
+Window: { apply: 'exit-on-close-false' }
 
-Claude Code (agents):
-```bash
-ls -la ~/.claude/agents/
-# Should show: ti-pro.md
+// Explicit
+Window: { default: { apply: 'exit-on-close-false' } }
 ```
 
-Gemini CLI:
-```bash
-gemini skills list
-```
+Use the explicit form when you need platform-specific variants:
 
-Codex CLI:
-```bash
-# Type /skills in Codex or use $ to mention a skill
+```js
+Button: {
+  default: { apply: 'text-xl' },
+  ios: { apply: 'font-bold' },
+  android: { apply: 'text-2xl font-semibold', color: 'red' }
+}
 ```
 
 ---
 
-## Skill contents summary
-
-| Skill        | SKILL.md                      | References                                            |
-| ------------ | ----------------------------- | ----------------------------------------------------- |
-| alloy-guides | MVC Quick Start               | 10 files (models, views, widgets, etc.)               |
-| alloy-howtos | Best Practices                | 6 files (CLI, config, debugging, etc.)                |
-| purgetss     | Setup + Critical Rules        | 21 files (grid, animations, icons, class-index, etc.) |
-| ti-expert    | Architecture + Implementation | 19 refs + 1 asset (patterns, testing, security, etc.) |
-| ti-guides    | Core Workflow                 | 14 files (hyperloop, distribution, etc.)              |
-| ti-howtos    | Integration Workflow          | 18 files (location, media, maps, automation, etc.)    |
-| ti-ui        | UI Rules + Platform Diffs     | 14 files (layouts, lists, gestures, etc.)             |
-
----
-
-## Troubleshooting
+## Community-Discovered Patterns
 
-### Skill not activating?
+The TiTools skills include **Community-Discovered Patterns** — verified iOS behaviors not present in the official Titanium documentation. These sections are protected from removal during skill audits.
 
-If the AI doesn't seem to use Titanium knowledge:
-1. Mention "Titanium" or "Alloy" explicitly in your prompt
-2. Be more specific about what you're building
-3. Reference the technology stack
-4. Try explicit invocation: "Use the purgetss skill for styling questions"
+### Large Title + ScrollView (iOS)
 
-### Getting wrong suggestions?
+When using Large Titles with a ScrollView inside NavigationWindow or TabGroup, three Window properties must be set together. Without all three, the ScrollView content overlaps behind the navigation bar — or the large title renders with a visible delay.
 
-If the AI suggests patterns you don't use (for example, PurgeTSS when you're not using it):
-1. The skill may not have detected your project type correctly
-2. Explicitly mention your stack: "I'm using Classic Titanium, not Alloy"
-3. Be more specific about what you're building
+| Class | Property | Purpose |
+|---|---|---|
+| `auto-adjust-scroll-view-insets` | `autoAdjustScrollViewInsets` | Adjusts ScrollView insets to prevent content overlap |
+| `extend-edges-all` | `extendEdges` | Content extends behind bars (blur/translucent effect) |
+| `large-title-enabled` | `largeTitleEnabled` | Large title that collapses on scroll |
 
-### PurgeTSS not detected?
+**Recommended:** set the base properties as global Window defaults in `config.cjs`:
 
-If the purgetss skill doesn't activate for your PurgeTSS project:
-1. Verify `purgetss/` folder exists in project root
-2. Check that `purgetss/config.cjs` exists
-3. Mention "PurgeTSS" explicitly in your prompt
-
-### Wrong advice?
-
-If the AI suggests incorrect patterns (like flexbox):
-1. Remind it you're using PurgeTSS
-2. Reference the correct pattern from memory
-3. Ask to check the PurgeTSS rules
-
-### Need more detail?
-
-Ask the AI to:
-```
-"Show me the reference documentation for ListView performance"
-"What does the ti-expert skill say about memory cleanup?"
+```js
+module.exports = {
+  theme: {
+    Window: {
+      ios: {
+        apply: 'auto-adjust-scroll-view-insets extend-edges-all status-bar-style-light-content'
+      }
+    }
+  }
+};
 ```
 
-### titools command not found?
+Then only add `large-title-enabled` per-window as needed:
 
-If the command is not found:
-```bash
-# Verify installation
-npm list -g @maccesar/titools
-
-# Re-install
-npm install -g @maccesar/titools
+```xml
+<Window title="Home" class="large-title-enabled">
+  <ScrollView class="vertical w-screen" contentHeight="Ti.UI.SIZE">
+    <!-- Content starts below the nav bar automatically -->
+  </ScrollView>
+</Window>
 ```
 
-### Knowledge index not working?
-
-If your AI doesn't use the knowledge index information:
-1. Verify AGENTS.md/CLAUDE.md/GEMINI.md exists in your project root
-2. Check that your AI supports these files
-3. Try explicitly referencing: "Check the AGENTS.md documentation"
-
-### Version mismatch warning?
-
-The knowledge index is based on the latest documentation. Be cautious when using newer APIs in older projects.
+This pattern is documented across four skills: `ti-ui`, `ti-expert`, `ti-api`, and `purgetss`.
 
 ---
 
-## Uninstall
-
-```bash
-# Remove the CLI
-npm uninstall -g @maccesar/titools
-
-# Remove knowledge packages and agent
-titools remove
-```
-
-Note: `titools remove` can remove the knowledge index blocks from your project files, but it does not delete the files themselves.
-
----
-
-## Contributing
-
-1. Fork the repository
-2. Improve SKILL.md or reference files
-3. Test with your preferred AI coding assistant
-4. Submit a pull request
-
-### Guidelines
-- Keep SKILL.md concise (<500 lines)
-- Use progressive disclosure (details in references)
-- Include concrete examples
-- Test with real sessions
-
----
-
-## Legacy installation (not recommended)
-
-The bash installer is maintained for backward compatibility but NPM installation is recommended.
-
-```bash
-curl -fsSL https://raw.githubusercontent.com/macCesar/titools/main/install.sh | bash
-```
-
-Use this only if you cannot use NPM for any reason.
-
----
-
-## Credits
-
-Created by César Estrada ([@macCesar](https://github.com/macCesar)), creator of [PurgeTSS](https://github.com/macCesar/purgeTSS).
-
-## License
-
-MIT License - Free to use, modify, and distribute.
-
----
-
-## Resources
-
-- [Titanium SDK](https://titaniumsdk.com/)
-- [PurgeTSS](https://purgetss.com/)
-- [TiDev Community](https://tidev.io/)
-- [Claude Code Skills](https://docs.anthropic.com/en/docs/claude-code)
-- [Gemini CLI Skills](https://geminicli.com/docs/cli/skills/)
-- [Codex CLI Skills](https://developers.openai.com/codex/skills/)
+### Visit the official documentation site at [purgetss.com](https://purgetss.com) to learn more.
+
+## Requirements
+
+- **Titanium SDK** (Compatible with all versions; 13.1.1.GA recommended for full property support)
+- **Alloy Framework** (for most commands)
+- **Node.js 20+** (required for the CLI tool)
+
+## Table of Content
+
+- [Installation](https://purgetss.com/docs/installation)
+- [Commands](https://purgetss.com/docs/commands)
+- Customization
+  - [The Config File](https://purgetss.com/docs/customization/the-config-file)
+  - [Custom Rules](https://purgetss.com/docs/customization/custom-rules)
+  - [The `apply` Directive](https://purgetss.com/docs/customization/the-apply-directive)
+  - [The `opacity` Modifier](https://purgetss.com/docs/customization/the-opacity-modifier)
+  - [Arbitrary Values](https://purgetss.com/docs/customization/arbitrary-values)
+  - [Platform and Device Modifiers](https://purgetss.com/docs/customization/platform-and-device-modifiers)
+  - [Icon Fonts Libraries](https://purgetss.com/docs/customization/icon-fonts-libraries)
+- Animation Module
+  - [Introduction](https://purgetss.com/docs/animation-module/introduction)
+  - [The `play` Method](https://purgetss.com/docs/animation-module/the-play-method)
+  - [The `apply` Method](https://purgetss.com/docs/animation-module/the-apply-method)
+  - [The `open` and `close` Methods](https://purgetss.com/docs/animation-module/the-open-and-close-methods)
+  - [The `draggable` Method](https://purgetss.com/docs/animation-module/the-draggable-method)
+  - [Complex UI Elements](https://purgetss.com/docs/animation-module/complex-ui-elements)
+  - [Additional Methods](https://purgetss.com/docs/animation-module/additional-methods)
+  - [Available Utilities](https://purgetss.com/docs/animation-module/available-utilities)
+  - [Implementation Rules](https://purgetss.com/docs/animation-module/implementation-rules)
+- [Grid System](https://purgetss.com/docs/grid-system)