@maccesar/titools 5.0.0 → 5.1.0

package/skills/purgetss/references/tikit-components.md

@@ -46,7 +46,7 @@ npm install -g purgetss
 
 ## Setting Up Your Project
 
-1. Create a PurgeTSS project. If you haven't already, create a new Alloy project using PurgeTSS. Make sure you've configured the `app.idprefix` and `app.theme` settings as required by PurgeTSS:
+1. Create a PurgeTSS project. If you haven't already, create a new Alloy project using PurgeTSS. Make sure you've configured the `app.idprefix` and `app.workspace` settings in Titanium's `config.json`, as `purgetss create` requires:
 
    ```bash
    purgetss create myApp
@@ -488,7 +488,7 @@ To add popular free icon sets, run:
 purgetss icon-library --vendor=fa,mi,ms,f7
 ```
 
-This copies the font files and CSS into your project, ready to use.
+This copies the font files into `app/assets/fonts/` (Alloy) or `Resources/fonts/` (Classic). Add `--module` for the CommonJS modules or `--styles` (Alloy only) for the `.tss` files.
 
 ### Adding Your Own Custom Icon Fonts
 

package/skills/purgetss/references/titanium-resets.md

@@ -50,6 +50,8 @@ The most important reset is for the `View` element. By default, `View` is set to
 
 ### Practical Examples
 
+Numeric values are unitless; Titanium resolves them with `ti.ui.defaultunit` in `tiapp.xml` (the Alloy template default is `dp`). See [Values and Units](./values-and-units.md).
+
 ```xml
 <!-- View without any classes = SIZE of its content -->
 <View>
@@ -61,19 +63,19 @@ The most important reset is for the `View` element. By default, `View` is set to
 <View class="h-32 w-64 bg-white">
   <Label text="Hello" />
 </View>
-<!-- Result: View is exactly 256px wide x 128px tall, label inside -->
+<!-- Result: View is exactly 256dp wide x 128dp tall, label inside -->
 
 <!-- View with margins (expands to include margins) -->
 <View class="m-4 bg-blue-500">
   <Label text="Hello" />
 </View>
-<!-- Result: View is 16px larger on all sides (content + 16px margins) -->
+<!-- Result: View is 16dp larger on all sides (content + 16dp margins) -->
 
 <!-- View with w-screen (fills parent) -->
 <View class="h-16 w-screen bg-red-500">
   <Label text="Full width banner" />
 </View>
-<!-- Result: View fills parent's width, 64px tall -->
+<!-- Result: View fills parent's width, 64dp tall -->
 ```
 
 ### View in Different Layouts
@@ -187,7 +189,7 @@ PurgeTSS provides `wh-` shortcuts to set both width and height simultaneously. T
 | `.wh-full`   | `width: '100%', height: '100%'`         | Relative 100% sizing.                                 |
 
 **The `wh-` Scale:**
-- **Numeric**: `wh-0` (0px) up to `wh-96` (384px) following the spacing scale.
+- **Numeric**: `wh-0` (0dp) up to `wh-96` (384dp) following the spacing scale.
 - **Fractions**: `wh-1/2` (50%), `wh-1/3` (33%), up to `wh-11/12` (91%).
 
 > **💡 TIP**
@@ -224,7 +226,7 @@ This generates classes for ALL color properties:
 
 <!-- CORRECT: Explicitly set dimensions -->
 <View class="h-64 w-screen bg-blue-500">
-  <!-- Fills parent width, 256px tall -->
+  <!-- Fills parent width, 256dp tall -->
 </View>
 ```
 
@@ -280,23 +282,24 @@ This generates classes for ALL color properties:
 When PurgeTSS generates your `app.tss`, these resets appear first:
 
 ```tss
-/* PurgeTSS v7.11.1 */
-/* Created by César Estrada */
-/* https://purgetss.com */
+// PurgeTSS v7.17.1
+// Created by César Estrada
+// https://purgetss.com
 
 // Ti Elements
-'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
 'ImageView[platform=ios]': { hires: true }
+'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
 'Window': { backgroundColor: '#FFFFFF' }
 
-/* Main Styles */
+// Main Styles
 '.bg-white': { backgroundColor: '#ffffff' }
 '.h-screen': { height: Ti.UI.FILL }
 '.w-screen': { width: Ti.UI.FILL }
-// ... your custom classes
 ```
 
-These are **always included** - they're fundamental to how PurgeTSS works.
+Content from `_app.tss`, if any, goes between the header and `// Ti Elements` under a `// _app.tss styles` comment.
+
+A reset is included only when its element is actually used: with the default `purge.mode: 'all'`, PurgeTSS keeps `View`, `ImageView` or `Window` only if that tag appears in your XML views (or in `purge.options.safelist`). A project whose views contain only a `<Window>` gets only the `'Window'` reset.
 
 ## Default font family classes (v7.5.3+)
 
@@ -354,16 +357,23 @@ module.exports = {
   theme: {
     extend: {
       View: {
-        width: Ti.UI.FILL,
-        height: Ti.UI.SIZE
+        default: {
+          width: 'Ti.UI.FILL',
+          height: 'Ti.UI.SIZE'
+        }
       }
     }
   }
-}
+};
 ```
 
-> **⚠️ DEPRECATED SHAPE (pre-v7.5.0)**
-> The older `theme.View.DEFAULT` shape is deprecated as of PurgeTSS v7.5.0. Migrate to `theme.extend.View` shown above. The same extend-based shape works for any Ti element default (`Window`, `Label`, `ImageView`, etc.).
+Generated `utilities.tss`:
+```tss
+'View': { width: Ti.UI.FILL, height: Ti.UI.SIZE }
+```
+
+> **⚠️ CAUTION**
+> Wrap the properties in a `default` (or `DEFAULT`) block, or use `apply` (`View: { apply: 'w-screen h-auto' }`), and quote Titanium constants. Unquoted `Ti.UI.FILL` throws when Node loads `config.cjs`, and properties placed directly under `View` without a `default` wrapper generate broken rules such as `'View-width': { 0: 'T', 1: 'i', ... }`.
 
 > **💡 TIP**
 > Prefer `config.cjs` for custom defaults because they're preserved when PurgeTSS regenerates `app.tss`. For advanced overrides — including per-platform defaults, `apply` shorthand, and pseudo-class targeting — see `customization-deep-dive.md`.

package/skills/purgetss/references/ui-ux-design.md

@@ -85,24 +85,30 @@ The catalog below collects real-world UI patterns verified against Titanium's co
 ### Simple List Item
 
 ```xml
-<View class="border-b border-gray-200 bg-white">
+<View class="w-screen bg-white">
   <Label class="mx-4 my-4 h-auto text-base text-gray-800" text="List item content" />
+  <!-- Titanium has no per-side border width: draw the divider as a 1px child -->
+  <View class="bottom-0 h-px w-screen bg-gray-200" />
 </View>
 ```
 
 ### List with Avatar
 
 ```xml
-<View class="horizontal border-b border-gray-200 bg-white">
-  <View class="ml-4 my-4 rounded-full-12 bg-blue-500">
-    <!-- A child with no top/left centers itself in a composite parent -->
-    <Label class="text-lg font-bold text-white" text="JD" />
-  </View>
+<View class="w-screen bg-white">
+  <View class="horizontal">
+    <View class="ml-4 my-4 rounded-full-12 bg-blue-500">
+      <!-- A child with no top/left centers itself in a composite parent -->
+      <Label class="text-lg font-bold text-white" text="JD" />
+    </View>
 
-  <View class="vertical ml-3 my-4">
-    <Label class="text-base font-semibold text-gray-800" text="John Doe" />
-    <Label class="text-sm text-gray-500" text="john.doe@example.com" />
+    <View class="vertical ml-3 my-4">
+      <Label class="text-base font-semibold text-gray-800" text="John Doe" />
+      <Label class="text-sm text-gray-500" text="john.doe@example.com" />
+    </View>
   </View>
+
+  <View class="bottom-0 h-px w-screen bg-gray-200" />
 </View>
 ```
 
@@ -163,7 +169,7 @@ The catalog below collects real-world UI patterns verified against Titanium's co
 ```
 
 > **⚠️ Input Padding**
-> Padding utilities (`p-`, `px-`, `py-`) work on `TextField` and `TextArea`, but NOT on `Button` (especially iOS/Mac) and NOT on container views (`View`, `Window`, `ScrollView`, `TableView`). Use margins on children to simulate internal spacing on containers.
+> Padding utilities (`p-`, `px-`, `py-`) set the `padding` property, which the Titanium API defines only on `TextField` and `TextArea` (Android and iOS; `TextArea` honors left and right only) and `Ti.UI.Android.CardView` (apidoc 13_4_1_GA). `utilities.tss` labels the block "Android Only", which is inaccurate for the two text inputs. They are NOT for `Button` (especially iOS/Mac) and NOT on container views (`View`, `Window`, `ScrollView`, `TableView`). Use margins on children to simulate internal spacing on containers.
 
 ## Buttons
 
@@ -210,30 +216,35 @@ For an icon-with-text pair, use a horizontal `View` containing an icon `Label` a
 ### Top Bar with Title and Action
 
 ```xml
-<View class="h-14 w-screen bg-white border-b border-gray-200">
+<View class="h-14 w-screen bg-white">
   <!-- Omitting top/bottom lets each child center vertically in the composite bar -->
   <Label class="left-4 text-lg font-bold text-gray-800" text="Dashboard" />
   <Label class="right-4 fas fa-bars text-gray-700" />
+  <View class="bottom-0 h-px w-screen bg-gray-200" />
 </View>
 ```
 
 ### Bottom Tab Bar
 
 ```xml
-<View class="bottom-0 h-16 w-screen bg-white border-t border-gray-200 horizontal">
-  <View class="vertical w-1/3">
-    <Label class="mx-auto mt-2 fas fa-home text-blue-500" />
-    <Label class="mx-auto mt-1 text-xs text-blue-500" text="Home" />
-  </View>
+<View class="bottom-0 h-16 w-screen bg-white">
+  <View class="top-0 h-px w-screen bg-gray-200" />
 
-  <View class="vertical w-1/3">
-    <Label class="mx-auto mt-2 fas fa-search text-gray-400" />
-    <Label class="mx-auto mt-1 text-xs text-gray-400" text="Search" />
-  </View>
+  <View class="horizontal w-screen">
+    <View class="vertical w-1/3">
+      <Label class="mx-auto mt-2 fas fa-home text-blue-500" />
+      <Label class="mx-auto mt-1 text-xs text-blue-500" text="Home" />
+    </View>
 
-  <View class="vertical w-1/3">
-    <Label class="mx-auto mt-2 fas fa-user text-gray-400" />
-    <Label class="mx-auto mt-1 text-xs text-gray-400" text="Profile" />
+    <View class="vertical w-1/3">
+      <Label class="mx-auto mt-2 fas fa-search text-gray-400" />
+      <Label class="mx-auto mt-1 text-xs text-gray-400" text="Search" />
+    </View>
+
+    <View class="vertical w-1/3">
+      <Label class="mx-auto mt-2 fas fa-user text-gray-400" />
+      <Label class="mx-auto mt-1 text-xs text-gray-400" text="Profile" />
+    </View>
   </View>
 </View>
 ```
@@ -288,8 +299,9 @@ For an icon-with-text pair, use a horizontal `View` containing an icon `Label` a
 ```xml
 <Window class="bg-gray-100">
   <View class="vertical h-screen w-screen">
-    <View class="h-14 w-screen border-b border-gray-200 bg-white">
+    <View class="h-14 w-screen bg-white">
       <Label class="left-4 text-xl font-bold text-gray-800" text="Screen Title" />
+      <View class="bottom-0 h-px w-screen bg-gray-200" />
     </View>
 
     <ScrollView class="vertical content-w-screen content-h-auto">
@@ -299,7 +311,7 @@ For an icon-with-text pair, use a horizontal `View` containing an icon `Label` a
 </Window>
 ```
 
-> **ScrollView sizing (PurgeTSS v7.3+)**
+> **ScrollView sizing**
 > The recommended pattern for a vertically scrolling `ScrollView` is `class="vertical content-w-screen content-h-auto"`. This sets `layout=vertical`, `contentWidth=Ti.UI.FILL`, and `contentHeight=Ti.UI.SIZE` so the content region grows to fit its children. Older examples using `h-screen w-screen` on the `ScrollView` itself describe the viewport, not the content — use the `content-*` variants to describe how the scrollable content flows.
 >
 > For iOS windows with large titles, also apply `extendEdges`, `autoAdjustScrollViewInsets`, and `largeTitleEnabled` on the `Window`. See `ios-large-titles.md`.
@@ -382,7 +394,7 @@ Example:
 | Row of actions | `horizontal` |
 | Fill space in overlay/modal | `h-screen w-screen` |
 | Card spacing | Margins on children |
-| Input inner spacing | `px-*`, `py-*` on input controls |
+| Input inner spacing | `px-*`, `py-*` on `TextField` / `TextArea` |
 | Tablet adaptation | `tablet:*`, `handheld:*` |
 | Overlay background | `bg-(#88000000)` |
 

package/skills/purgetss/references/values-and-units.md

@@ -41,7 +41,6 @@ This applies to every utility class that sets a dimension:
 | Typography | `text-*` (font size), `letter-spacing-*`, `line-spacing-*`                                   |
 | Shadows    | `drop-shadow-*`, `shadow-radius-*`                                                           |
 | Elevation  | `elevation-*`, `max-elevation-*`                                                             |
-| Transforms | `translate-*`, `move-by-*`                                                                   |
 | Offsets    | `x-offset-*`, `y-offset-*`                                                                   |
 
 ## Valid values for `ti.ui.defaultunit`
@@ -115,6 +114,6 @@ If that property is missing, Titanium falls back to `system`. That means iOS and
 
 ## Related
 
-- [Arbitrary Values](./arbitrary-values.md) — parentheses notation `(20px)`, `(2rem)`, `(#ff0000)` for one-off values.
+- [Arbitrary Values](./arbitrary-values.md) — parentheses notation `(20)`, `(2rem)`, `(#ff0000)` for one-off values.
 - [Customization Deep Dive](./customization-deep-dive.md) — defining your own spacing scale via `theme.spacing`.
 - [Class Index](./class-index.md) — the full set of generated classes and their numeric vs. percentage vs. constant outputs.

package/skills/purgetss/references/version-history.md

@@ -8,9 +8,11 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 
 ---
 
+## Unreleased (after v7.17.1)
+- The comment above the opt-in pieces in the generated config now names each consumer instead of claiming both are inert without hand-edited XML. Only `splash_icon` is.
+
 ## v7.17.1
 - **The `notification-icon` piece writes `notificationicon.png`, not `ic_stat_notify.png`.** `firebase.cloudmessaging` hardcodes that name — `TiFirebaseMessagingService.showNotification()` calls `getResource("notificationicon")` — and it is the only path a **data** message has. The `default_notification_icon` meta-data is the configurable one and covers **notification** messages alone, so under the old name no manifest entry could rescue a data message: the module fell back to the opaque `appicon`, which the status bar renders as a white blob. The filename is fixed rather than a config key, for the same reason `appicon.png` and `DefaultIcon.png` are. Projects that wired `@drawable/ic_stat_notify` by hand need to update that one meta-data line and delete the five stale files. See [app-branding.md](app-branding.md).
-- The comment above the opt-in pieces in the generated config now names each consumer instead of claiming both are inert without hand-edited XML. Only `splash_icon` is.
 
 ## v7.17.0
 - The `images:` section rejects unknown keys instead of ignoring them, at both levels: the five top-level keys (`quality`, `format`, `autoSync`, `confirmOverwrites`, `files`) and the three inside each `files[]` entry (`filename`, `width`, `height`, with `filename` required). Nothing is generated when validation fails. Never suggest `width`, `opacity`, `padding` or `output` as config keys — they are CLI flags and now abort the run. See [multi-density-images.md](multi-density-images.md).
@@ -84,7 +86,7 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 - SVG-aware compile-time image pipeline runs as a `purgetss` post-step. When XML/controllers reference `image="/images/x.svg"` (or `backgroundImage`) alongside utility classes that resolve to numeric width/height (`w-32`, `w-(300)`, `h-auto`), purge compiles the SVG into the 8 Titanium density PNGs (5 Android + 3 iPhone) using dimensions resolved from `app.tss`. Titanium loads the generated `.png` at runtime; the `.svg` attribute in your source is never rewritten. Cache: `purgetss/.cache/svg-images.json` (add to `.gitignore`). See [multi-density-images.md](multi-density-images.md).
 - `images.files` array in `config.cjs` — per-file width/height override: `[{ filename: 'images/logos/logo.png', width: 128, height: 52 }]`. CLI `--width` still wins over entries. SVGs detected by the pipeline populate entries automatically (subject to `images.autoSync`); hand-added raster entries survive untouched.
 - `images.autoSync` boolean (default `true`) — opt-out for devs managing `images.files` by hand. When `false`, purge still computes dimensions and generates PNGs but never writes back to `config.cjs`.
-- `config.cjs` syntax validator emits a formatted `Config Syntax Error` block (file, JSON path, context, issue, fix snippet) for type mismatches in known fields, currently `theme.fontFamily.*` — must be a **string** — replacing cryptic crashes like `rule.startsWith is not a function`.
+- `config.cjs` syntax validator emits a formatted `Config Syntax Error` block (file, JSON path, context, issue, fix snippet) for type mismatches in known fields, currently `theme.fontFamily.*` and `theme.extend.fontFamily.*` — each value must be a **string** — replacing cryptic crashes like `rule.startsWith is not a function`.
 
 ## v7.10.2
 - Pre-v7.7.0 `brand:` configs (flat layout: `brand.padding: <number>`, `brand.iosPadding`, `brand.bgColor`, top-level `brand.notification`/`brand.splash`) auto-migrate to the grouped layout in memory. A one-time per-session notice lists the migrated keys.
@@ -100,7 +102,7 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 - Fix: `brand --padding <n>` shortcut applies to BOTH Android paddings.
 
 ## v7.9.0
-- Opacity modifiers work on semantic colors: `bg-surface/65` auto-derives `surface_65` in `semantic.colors.json` with light/dark + alpha. **Native rebuild required** (Liveview alone does not refresh `semantic.colors.json`). See [semantic-colors.md](semantic-colors.md).
+- Opacity modifiers work on semantic colors: `bg-surface/65` (mapped to `surfaceColor`) auto-derives `<originalKey>_<alphaPercent>` — here `surfaceColor_65` — in `semantic.colors.json` with light/dark + alpha. **Native rebuild required** (Liveview alone does not refresh `semantic.colors.json`). See [semantic-colors.md](semantic-colors.md).
 - `theme.Window` / `theme.View` / `theme.ImageView` at top level = **replace mode** (no framework defaults). Use `theme.extend.Window` for **extend mode** (merge with defaults). See [apply-directive.md](apply-directive.md).
 - **Breaking:** glossary path renamed `purgetss/experimental/tailwind-classes/` → `purgetss/glossary/tailwind-classes/`. No transition shim.
 
@@ -112,7 +114,7 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 - `brand:` config restructured into grouped sections: `brand.logos`, `brand.padding`, `brand.android`, `brand.ios`, `brand.colors`. Old projects keep working; new configs use grouped form. See [app-branding.md](app-branding.md).
 - Separate Android brand inputs: `logos.androidLauncher` / `--icon-logo` and `logos.androidSplash` / `--splash-logo`.
 - Android splash fallback `default.png` regenerated (Alloy: `app/assets/android/`, Classic: `Resources/android/`). `cleanup-legacy` preserves it.
-- New ref: [values-and-units.md](values-and-units.md) — `ti.ui.defaultunit` interpretation of unitless PurgeTSS values.
+- Related docs page (not a release change): [values-and-units.md](values-and-units.md) — `ti.ui.defaultunit` interpretation of unitless PurgeTSS values.
 
 ## v7.6.x
 - `purgetss brand` (v7.6.0) — full Titanium branding set from `purgetss/brand/` logos. See [app-branding.md](app-branding.md).
@@ -125,6 +127,11 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 - `Appearance` module — Light/Dark/System mode switching with persistence (`init()`, `set()`, `get()`, `toggle()`). See [appearance-module.md](appearance-module.md).
 - Default font family classes (`font-sans`, `font-serif`, `font-mono`) auto-generated with platform-appropriate values.
 
+## v7.5.1
+- Fix: `dist/purgetss.ui.js` shipped in v7.5.0 without `pulse()`, the latest `transition()` improvements, and delta-based drag for transformed views; rebuilt from the template. Re-run `purgetss module` to get them.
+- Fix: `snap-back`, `snap-center`, `snap-magnet`, and `keep-z-index` classes are now generated in `utilities.tss`.
+- Font Awesome updated to 7.2.0.
+
 ## v7.5.0
 - `theme.extend.Window` / `theme.extend.View` / `theme.extend.ImageView` — customize Ti element defaults.
 - Shorthand `apply:` directive — `{ apply: '...' }` auto-normalizes; `default:` wrapper optional.
@@ -135,3 +142,24 @@ When in doubt about whether a class, flag, or config key exists in the user's in
 - Animation module: 9 new methods (`transition`, `pulse`, `sequence`, `swap`, `shake`, `snapTo`, `reorder`, `undraggable`, `detectCollisions`). 15 methods total. See [animation-system.md](animation-system.md).
 - New utility classes: `snap-back`, `snap-center`, `snap-magnet`, `keep-z-index`.
 - Delta-based drag for transformed views; property inheritance from Animation object.
+
+## v7.3.1
+- Fix: draggable views positioned at `left: 0` / `top: 0` (also `right` / `bottom`) no longer jump on drag start.
+
+## v7.3.0
+- **Breaking:** `tailwind.tss` renamed to `utilities.tss` — generated file is `purgetss/styles/utilities.tss`, distribution file is `dist/utilities.tss`. Never reference `tailwind.tss`. See [migration-guide.md](migration-guide.md#upgrade-to-v73x).
+- XML syntax pre-validation for Alloy views (for example `Label id=` missing its `<`), with line numbers, context, and a suggested fix.
+- `deviceInfo()` no longer depends on `Alloy.isTablet` / `Alloy.isHandheld`, so it works in Classic too.
+
+## v7.2.7
+- **Node.js 20+ required** (`inquirer` v13). Security fixes for transitive `glob` (command injection) and `js-yaml` (prototype pollution).
+- Install size reduced by ~45MB: `@fortawesome/fontawesome-free`, `framework7-icons`, and `junk` moved to devDependencies; font files still ship pre-built.
+- Titanium SDK 13.1.0.GA definitions: new utility classes for `navBarColor`, `forceBottomPosition`, and `multipleWindows`.
+- Recommended class-reordering VS Code extension is now `KevinYouu.tailwind-raw-reorder-tw4`.
+
+## v7.2.6
+- Font Awesome updated to 7.1.0.
+- Flag property names in `utilities.tss` simplified and renamed for consistency.
+
+## v7.1.10
+- Animation module: `play` and `apply` callbacks receive an enriched event object instead of the raw native event — `type`, `bubbles`, `cancelBubble`, plus `action` (`'play'` / `'apply'`), `state` (`'open'` / `'close'`), `id`, `targetId`, `index`, `total`, and a `getTarget()` helper. See [animation-system.md](animation-system.md).