@maccesar/titools 3.3.0 → 4.0.0

package/skills/alloy-howtos/references/config_files.md

@@ -0,0 +1,158 @@
+# Alloy configuration files reference
+
+## Build configuration file (alloy.jmk)
+
+Alloy exposes hooks to customize compilation with a JS Makefile (JMK).
+
+**Location:** `app/alloy.jmk`
+
+**Example:**
+```javascript
+task('pre:compile', (event, logger) => {
+    logger.showTimestamp = true;
+    logger.info(`building project at ${event.dir.project}`);
+});
+
+task('post:compile', (event, logger) => {
+    logger.info('compile finished!');
+});
+```
+
+### Compiler tasks (event names)
+
+| Task             | When Called                                               |
+| ---------------- | --------------------------------------------------------- |
+| `pre:load`       | After project clean, before copying assets to `Resources` |
+| `pre:compile`    | Before compiler starts                                    |
+| `post:compile`   | After compiler finishes, before exit                      |
+| `compile:app.js` | After compiling `app.js`, before writing to disk          |
+
+### Event object
+
+| Property       | Type    | Description                                                                                                                                                                                                         |
+| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `adapters`     | Array   | List of adapters                                                                                                                                                                                                    |
+| `alloyConfig`  | Object  | Compiler config: `platform` (android/ios), `file` (selective compile), `deploytype` (development/test/production), `beautify` (Boolean)                                                                             |
+| `autoStyle`    | Boolean | Autostyle enabled for project                                                                                                                                                                                       |
+| `dependencies` | Object  | Value of `dependencies` key in config.json                                                                                                                                                                          |
+| `dir`          | Object  | Directory paths: `home` (app path), `project` (root path), `resources`, `resourcesAlloy`, `assets`, `config`, `controllers`, `migrations`, `models`, `styles`, `themes`, `views`, `widgets`, `builtins`, `template` |
+| `sourcemap`    | Boolean | If `true`, generates mapping files to link generated Titanium files in `Resources` back to the source files in `app` for debugging.                                                                                 |
+| `theme`        | String  | Theme name being used                                                                                                                                                                                               |
+| `code`         | String  | *(compile:app.js only)* Contents of `app.js`                                                                                                                                                                        |
+| `appJSFile`    | String  | *(compile:app.js only)* Absolute path to `app.js`                                                                                                                                                                   |
+
+### Logger object
+
+The `logger` object controls compilation log output.
+
+#### Properties
+
+| Property        | Type    | Description                                     |
+| --------------- | ------- | ----------------------------------------------- |
+| `DEBUG`         | Number  | READONLY. Output all log messages.              |
+| `INFO`          | Number  | READONLY. Output all except debug messages.     |
+| `WARN`          | Number  | READONLY. Output only warning and error.        |
+| `ERROR`         | Number  | READONLY. Output only error messages.           |
+| `NONE`          | Number  | READONLY. Disable log messages.                 |
+| `logLevel`      | Number  | Sets which log messages to output.              |
+| `showTimestamp` | Boolean | If `true`, outputs timestamp with log messages. |
+| `stripColors`   | Boolean | If `true`, suppresses color output.             |
+
+#### Methods
+
+| Method               | Description                    |
+| -------------------- | ------------------------------ |
+| `debug(msg: String)` | Outputs a debug log message.   |
+| `info(msg: String)`  | Outputs an info log message.   |
+| `warn(msg: String)`  | Outputs a warning log message. |
+| `error(msg: String)` | Outputs an error log message.  |
+
+---
+
+## Global initializer (alloy.js)
+
+**Location:** `app/alloy.js`
+
+Runs before any controllers load. Use it to set up globals and singletons.
+
+Common uses:
+- Creating `Alloy.Collections` (e.g., `Alloy.Collections.myModel = Alloy.createCollection('myModel');`)
+- Setting up `Alloy.Globals` (shared references, utility functions)
+- Initializing singletons (analytics, logging, network managers)
+- Configuring global event listeners
+
+**Example:**
+```javascript
+// app/alloy.js
+Alloy.Globals.loading = Alloy.createWidget('com.example.loading');
+Alloy.Collections.users = Alloy.createCollection('user');
+
+// Global utility
+Alloy.Globals.alert = (title, message) => {
+    Ti.UI.createAlertDialog({ title, message }).show();
+};
+```
+
+---
+
+## Project configuration file (config.json)
+
+**Location:** `app/config.json`
+
+Alloy uses `config.json` for global values, environment and platform overrides, and widget dependencies.
+### Objects
+
+| Object            | Description                                                 |
+| ----------------- | ----------------------------------------------------------- |
+| `global`          | Key-value pairs for all environments and platforms          |
+| `env:development` | Development builds (simulator/emulator)                     |
+| `env:test`        | Test builds on device                                       |
+| `env:production`  | Production builds (after package installation)              |
+| `os:android`      | Android-specific values                                     |
+| `os:ios`          | iOS-specific values                                         |
+| `dependencies`    | Widget dependencies (name: version)                         |
+| `autoStyle`       | Enable autostyle for entire project                         |
+| `backbone`        | Backbone.js version: `0.9.2` (default), `1.1.2`, or `1.3.3` |
+
+**Precedence:** `os` > `env` > `global`. Combinations (for example, `os:ios env:production`) override single values.
+
+**Runtime access:** Values are available at runtime via `Alloy.CFG.<key>`.
+
+**Example:**
+
+```json
+{
+    "global": { "foo": 1 },
+    "env:development": { "foo": 2 },
+    "env:test": { "foo": 3 },
+    "env:production": { "foo": 4 },
+    "os:ios env:production": { "foo": 5 },
+    "os:ios env:development": { "foo": 6 },
+    "os:ios env:test": { "foo": 7 },
+    "os:android": { "foo": 8 },
+    "dependencies": {
+        "com.foo.widget": "1.0"
+    }
+}
+```
+
+Accessing values: `Ti.API.info(Alloy.CFG.foo)` on iPhone simulator returns `6`.
+
+---
+
+## Widget configuration file (widget.json)
+
+**Location:** Root directory of the widget. Follows the npm `package.json` format with a few exceptions.
+### Keys
+
+| Key                    | Type   | Required | Description                           |
+| ---------------------- | ------ | -------- | ------------------------------------- |
+| `id`                   | String | Yes      | Must match widget root folder name    |
+| `copyright`            | String | No       | Copyright information                 |
+| `license`              | String | No       | License information                   |
+| `min-alloy-version`    | Float  | No*      | Minimum Alloy version required        |
+| `min-titanium-version` | Float  | No*      | Minimum Titanium version required     |
+| `tags`                 | String | No       | Comma-delimited keywords              |
+| `platforms`            | String | No*      | Supported platforms (comma-delimited) |
+
+(*) Currently, `min-alloy-version`, `min-titanium-version`, and `platforms` are not strictly enforced, but Alloy will perform checks against these in future versions.

package/skills/alloy-howtos/references/custom_tags.md

@@ -0,0 +1,148 @@
+# Creating custom tags in Titanium with Alloy
+
+Custom tags let you create reusable UI components without the overhead of widgets. You can keep controls in a single file under `app/lib`.
+
+## Why use custom tags?
+
+When building cross-platform apps, you often need UI controls (like a web-style checkbox) that do not exist natively. You have three approaches:
+
+1.  **Direct XML/JS:** Copy and paste code into each view. Not reusable and easy to drift.
+2.  **Widgets:** Reusable, but require a folder structure and `dependencies` in `config.json`.
+3.  **Custom tags:** Single file in `app/lib/`, no config dependency, easy to share. They reduce platform-specific code in views.
+
+## Basic setup
+
+1.  Create a file in `app/lib/` (e.g., `checkbox.js`)
+2.  Export a `create<TagName>` function
+3.  Use in XML with the `module` attribute
+
+**view.xml**
+```xml
+<CheckBox module="checkbox" id="termsAccepted"
+    caption="I agree to the terms of use"
+    underline="true"
+    onCaptionClick="doShowTerms"
+    onChange="onCheckChange" />
+```
+The `module` attribute tells Alloy to look in `checkbox.js` for a `createCheckBox` function. Alloy passes the XML/TSS arguments and expects a `Ti.UI.*` component back.
+
+## Robust example: CheckBox
+
+**app/lib/checkbox.js**
+```javascript
+exports.createCheckBox = args => {
+    // Wrapper view for all components
+    const wrapper = Ti.UI.createView({
+        top: args.top || 5,
+        width: Ti.UI.SIZE,
+        height: Ti.UI.SIZE,
+        layout: "horizontal",
+        left: args.left || 20,
+        right: args.right || null,
+        checked: args.checked || false
+    });
+
+    // The box itself
+    const box = Ti.UI.createView({
+        width: 15,
+        height: 15,
+        borderWidth: 1,
+        borderColor: "#02A9F4"
+    });
+
+    // Attributed string for styled caption (e.g. underline)
+    const attr = Ti.UI.createAttributedString({
+        text: args.caption
+    });
+
+    if (args.underline) {
+        attr.applyProperties({
+            attributes: [{
+                type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
+                value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE,
+                range: [0, args.caption.length]
+            }]
+        });
+    }
+
+    const caption = Ti.UI.createLabel({
+        color: "#000",
+        attributedString: attr,
+        left: 10,
+        text: args.caption,
+        font: { fontSize: 10 }
+    });
+
+    // The tick (using Unicode to avoid assets)
+    const tick = Ti.UI.createLabel({
+        text: "\u2713",
+        left: 1,
+        color: "#02A9F4",
+        font: { fontWeight: "bold" },
+        visible: args.checked || false
+    });
+
+    // Handle clicks
+    caption.addEventListener("click", () => {
+        wrapper.fireEvent("captionClick");
+    });
+
+    box.addEventListener("click", () => {
+        tick.visible = !tick.visible;
+        wrapper.checked = !wrapper.checked;
+        wrapper.fireEvent("change", { checked: wrapper.checked });
+    });
+
+    box.add(tick);
+    wrapper.add(box);
+    wrapper.add(caption);
+
+    return wrapper;
+};
+```
+
+## Global module override
+
+Apply a module to all tags in a view by updating the `Alloy` tag. Alloy checks your file for tag creation overrides before using default implementations:
+
+```xml
+<Alloy module="ui">
+    <Window>
+        <CustomButton />  <!-- Looks for createCustomButton in app/lib/ui.js -->
+        <Label />         <!-- Checks ui.js for createLabel first -->
+    </Window>
+</Alloy>
+```
+This is useful for adding default colors or properties (for example, a black default color for Android Labels) across a project.
+
+## Key points
+
+| Aspect        | Description                                                   |
+| ------------- | ------------------------------------------------------------- |
+| File location | `app/lib/<module_name>.js`                                    |
+| Function name | `create<TagName>` (e.g., `createCheckBox` for `<CheckBox>`)   |
+| Return value  | Must return a `Ti.UI.*` component (View, Button, Label, etc.) |
+| Arguments     | Receives all XML/TSS attributes in a single `args` object     |
+
+## Using Custom Tags Without Alloy XML
+
+You can also use custom tags from plain JavaScript via `require()`:
+
+```javascript
+const checkbox = require("checkbox").createCheckBox({
+    caption: "I agree",
+    underline: true
+});
+win.add(checkbox);
+```
+
+This works because custom tags are standard CommonJS modules. The `module` attribute in XML is a convenience.
+
+## Custom tags vs widgets
+
+| Custom Tags                           | Widgets                                  |
+| ------------------------------------- | ---------------------------------------- |
+| Single file in `app/lib/`             | Separate folder structure                |
+| No `config.json` dependency needed    | Requires `dependencies` in `config.json` |
+| Simpler for single-component controls | Better for complex multi-view components |
+| Easier to share across projects       | More formal packaging                    |

package/skills/alloy-howtos/references/debugging_troubleshooting.md

@@ -0,0 +1,78 @@
+# Alloy debugging and troubleshooting
+
+## Debugging
+
+### Compiler error messages
+
+The Alloy compiler reports syntax errors in JavaScript, JSON, TSS, and XML. Error messages include:
+- File path
+- Line and character position
+- Description of the error
+
+## Troubleshooting
+
+### Error: No app.js found
+
+**Error:** `[ERROR] No app.js found. Ensure the app.js file exists in your project's Resources directory.`
+
+**Solution:** If part of the contents of your `Resources` folder were deleted, run:
+```bash
+alloy compile --config platform=<platform>
+```
+
+### Android: images, HTML, and assets not displaying
+
+**Problem:** Assets display on iOS and Mobile Web but not Android.
+
+**Solution:** Android requires absolute paths. Precede asset paths with a slash ('/'). iOS and Mobile Web accept both relative and absolute paths.
+
+### Android runtime error: cannot call method of undefined
+
+**Error:** `Uncaught TypeError: Cannot call method xxx of undefined`
+
+**Causes:**
+1. Creating an iOS-only Titanium object. Use the `platform` attribute in views to enforce platform-specific objects.
+2. Top-level UI component has an assigned ID. The controller cannot use `$.<controller_name>` to reference it; use the assigned ID instead.
+
+### Android runtime error: Alloy is not defined
+
+**Error:** `Uncaught ReferenceError: Alloy is not defined`
+
+**Cause:** Non-controller JavaScript files are not automatically wrapped by Alloy. See [best_practices.md](best_practices.md) for the safe require pattern for non-controller files.
+
+**Solution:** Require the 'alloy' module:
+```javascript
+const Alloy = require('alloy');
+```
+
+### iOS application error: invalid method passed to UIModule
+
+**Error:** `invalid method (xxx) passed to UIModule (unknown file)`
+
+**Cause:** Trying to create an Android-only Titanium object.
+
+**Solution:** Use the `platform` attribute in the view to enforce platform-specific objects.
+
+### iOS application error: undefined is not an object
+
+**Error:** `undefined is not an object (evaluating $.xxx.open) (unknown file)`
+
+**Cause:** Top-level UI component has an assigned ID in XML markup.
+
+**Solution:** The controller cannot use `$.<controller_name>` to reference it; use the assigned ID instead.
+
+## Getting help
+
+Use the [TiDev Community Slack](https://slack.tidev.io/) or [GitHub Discussions](https://github.com/tidev/titanium-sdk/discussions):
+- Include 'alloy' as a tag
+- Include the Alloy version (run `alloy --version`)
+- Include platform information
+
+## Submitting a bug report
+
+Search [existing issues](https://github.com/tidev/alloy/issues) first to avoid duplicates. If none match, create a new issue:
+- Select 'Alloy' as the component
+- Include Alloy version (`alloy --version`)
+- Include environment information
+
+For detailed instructions, see [How to Report a Bug or Make a Feature Request](https://titaniumsdk.com/guide/Titanium_SDK/Titanium_SDK_Guide/Contributing_to_Titanium/How_to_Report_a_Bug_or_Make_a_Feature_Request/).

package/skills/alloy-howtos/references/samples.md

@@ -0,0 +1,156 @@
+# Alloy samples
+
+## Kitchen sink
+
+See the [KitchenSink-v2 application on GitHub](https://github.com/tidev/kitchensink-v2) for Alloy samples in a full app.
+
+## Controller sample
+
+**index.js**
+```javascript
+// These "builtin" requires are detected by alloy compile process
+// Automatically included as Resources/alloy/animation.js and Resources/alloy/string.js
+const animation = require('alloy/animation');
+const string = require('alloy/string');
+
+function shake(e) {
+    animation.shake($.mover, 0, () => {
+        alert("Shake ended.");
+    });
+}
+
+function flash(e) {
+    animation.flash($.mover);
+}
+
+function trim(e) {
+    $.label.text = string.trim($.label.text);
+}
+
+if (OS_IOS) {
+    function flip(e) {
+        let front, back;
+        e.bubbleParent = false;
+        if (e.source === $.back) {
+            front = $.back;
+            back = $.front;
+        } else {
+            front = $.front;
+            back = $.back;
+        }
+        animation.flipHorizontal(front, back, 500, (e) => {
+            Ti.API.info('flipped');
+        });
+    }
+}
+
+$.index.open();
+
+// Runtime unit tests
+if (!ENV_PROD) {
+    require('specs/index')($);
+}
+```
+
+## Conditional statements in views
+
+Alloy separates business logic (controllers) from UI definition (XML/TSS). A common challenge is showing or hiding content based on app state (for example, login status).
+
+> **💡 TSS defaults**
+> The samples below assume some additional TSS: views and windows use a vertical layout, and the `View` tag has a default height and width of `Ti.UI.SIZE`.
+
+### Problems with traditional approaches
+
+**Approach 1: show/hide (in controller)**
+```javascript
+if (Alloy.Globals.isLoggedIn()) {
+    $.loggedIn.show();
+    $.notLoggedIn.hide();
+} else {
+    $.loggedIn.hide();
+    $.notLoggedIn.show();
+}
+```
+**Problem:** Both views render when the window opens. If the user isn't logged in, there is empty space where the logged-in view was.
+
+**Approach 2: setHeight (in controller)**
+```javascript
+if (Alloy.Globals.isLoggedIn()) {
+    $.loggedIn.setHeight(Ti.UI.SIZE);
+    $.notLoggedIn.setHeight(0);
+} else {
+    $.loggedIn.setHeight(0);
+    $.notLoggedIn.setHeight(Ti.UI.SIZE);
+}
+```
+**Problem:** This works, but it forces you to manage height values (`Ti.UI.SIZE`) in JavaScript instead of TSS.
+
+### Solution: IF attributes in XML
+
+Use `if` attributes directly in the XML view. These conditions are evaluated before rendering.
+
+**index.xml**
+```xml
+<Alloy>
+    <Window>
+        <View>
+            <!-- Only one of these will ever be rendered -->
+            <View if="Alloy.Globals.isLoggedIn()" id="notLoggedIn" class="vertical">
+                 <Label text="Not logged in" />
+            </View>
+            <View if="!Alloy.Globals.isLoggedIn()" id="loggedIn" class="vertical">
+                <Label text="Logged in" />
+            </View>
+        </View>
+    </Window>
+</Alloy>
+```
+
+Benefits:
+- Only the view that matches the condition is rendered.
+- The UI is correct from the first frame.
+- No visibility logic in controllers.
+
+### Conditional queries in TSS
+
+Use `if` attributes in TSS definitions:
+
+```tss
+"#info[if=Alloy.Globals.isIos7Plus]": {
+    font: {
+        textStyle: Ti.UI.TEXT_STYLE_FOOTNOTE
+    }
+},
+"#title[if=Alloy.Globals.isIos7Plus]": {
+    top: "25dp",
+    font: {
+        textStyle: Ti.UI.TEXT_STYLE_HEADLINE
+    }
+},
+"#content[if=Alloy.Globals.isIos7Plus]": {
+    font: {
+        textStyle: Ti.UI.TEXT_STYLE_CAPTION1
+    }
+},
+"ScrollView[if=Alloy.Globals.iPhoneTall]": {
+    height: "500dp"
+}
+```
+
+### Data-binding with conditional queries
+
+Define custom methods in models and render based on those methods:
+
+**Model Method:** `shouldShowCommentRow()` returns `true`
+
+**XML View:**
+```xml
+<Alloy>
+    <TableViewRow id="commentRow" hasChild="false" if="$model.shouldShowCommentRow()" onClick="onSelectComment">
+        <Label id="commentPlaceholderLabel" class="commentRowPreviewLabel placeholderLabel" text="Ti.App.L('AddComment')" />
+        <Label id="commentRowLabel" class="commentRowPreviewLabel" text="{Comment}" />
+    </TableViewRow>
+</Alloy>
+```
+
+See `VIEWS_STYLES.md` in the `alloy-guides` skill (Custom Query Styles section) for more details.

package/skills/purgetss/SKILL.md

@@ -22,6 +22,7 @@ SKILL.md is not enough.**
 | Choosing utility classes | [references/class-index.md](references/class-index.md) |
 | Layout (horizontal/vertical/composite, grid) | [references/grid-layout.md](references/grid-layout.md), [references/ui-ux-design.md](references/ui-ux-design.md) |
 | Dynamic components in controllers | [references/dynamic-component-creation.md](references/dynamic-component-creation.md) |
+| SVG / multi-density image assets | [references/svg-pipeline.md](references/svg-pipeline.md), [references/multi-density-images.md](references/multi-density-images.md) |
 | Custom values / arbitrary syntax | [references/arbitrary-values.md](references/arbitrary-values.md) |
 | Platform-specific styles (`ios:`, `android:`) | [references/platform-modifiers.md](references/platform-modifiers.md) |
 | Dark/Light mode | [references/semantic-colors.md](references/semantic-colors.md), [references/appearance-module.md](references/appearance-module.md) |
@@ -357,7 +358,7 @@ Always verify a class exists before suggesting it.
 ### Verification Steps
 
 1. **Check if it's a KNOWN anti-pattern**
-   - See [PROHIBITED Classes](references/class-index.md#prohibited-tailwind-classes-that-do-not-exist)
+   - See [PROHIBITED Classes](references/class-index.md#prohibited-css-classes-do-not-exist)
    - Common mistakes: `flex-row`, `justify-between`, `p-4` on Views (p-* not supported on Views)
 
 2. **Check the Class Index**
@@ -397,7 +398,8 @@ Always verify a class exists before suggesting it.
 Load these only when needed:
 
 ### Essential References
-- **[Class Index](references/class-index.md)** - Naming conventions, 416-property table, prohibited classes, verification commands (LOAD FIRST when unsure about a class)
+- **[Class Index](references/class-index.md)** - Naming conventions, prohibited classes, prefix inventory, verification commands (LOAD FIRST when unsure about a class)
+- **[Class Index — Properties (A–Z)](references/class-index-properties.md)** - Full A–Z table of every Titanium property and its PurgeTSS class prefix
 - **[Class Categories](references/class-categories.md)** - Complete prefix inventory by category (layout, colors, typography, states, etc.)
 - **[Dynamic Component Creation](references/dynamic-component-creation.md)** - `$.UI.create()` and `Alloy.createStyle()` for creating components in Controllers (READ FIRST for dynamic components)
 - **[Appearance Module](references/appearance-module.md)** - Light/Dark/System mode switching with persistence (v7.5.3)
@@ -432,6 +434,7 @@ Load these only when needed:
 ### App Assets
 - [App Branding](references/app-branding.md) - `brand` command for launcher icons, adaptive, iOS 18+ Dark/Tinted, marketplace assets (v7.6.0)
 - [Multi-Density Images](references/multi-density-images.md) - `images` command for Android res-*dpi + iPhone @1x/@2x/@3x UI images (v7.6.0)
+- [SVG Pipeline](references/svg-pipeline.md) - SVG-aware compile-time image pipeline: `.svg` refs + numeric `w-*`/`h-*` classes compile to 8 density PNGs; `images.files`/`images.autoSync` (v7.11.0–v7.11.1)
 
 ### Performance
 - [Performance Tips](references/performance-tips.md) - Optimizing PurgeTSS apps (bridge crossings, ListView, animations)
@@ -446,7 +449,7 @@ Load these only when needed:
 - [Animation Advanced](references/animation-advanced.md) - Property inheritance, utility classes, implementation rules, complex UI example
 
 ### Release Notes
-- [Version History](references/version-history.md) - Release-by-release feature additions and behavior changes (v7.4.0 → v7.10.2)
+- [Version History](references/version-history.md) - Release-by-release feature additions and behavior changes (v7.4.0 → v7.11.1)
 
 > **💡 TEXT FONTS (Google Fonts, Roboto, etc.)**
 > For text fonts, see [Custom Fonts](references/custom-fonts.md).

package/skills/purgetss/references/EXAMPLES.md

@@ -47,11 +47,12 @@ The examples below catalog anti-patterns observed in real Titanium + PurgeTSS pr
 </View>
 ```
 
-**✅ CORRECT (Composite layout + center class):**
+**✅ CORRECT (Composite layout, no positioning on the child):**
 ```xml
-<!-- Parent defaults to composite, no layout class needed -->
+<!-- Parent defaults to composite, no layout class needed.
+     A child with no top/left/bottom/right centers itself. -->
 <View class="h-screen w-screen">
-  <Label text="Centered" class="center" />
+  <Label text="Centered" />
 </View>
 ```
 
@@ -95,8 +96,9 @@ The examples below catalog anti-patterns observed in real Titanium + PurgeTSS pr
 **✅ CORRECT (Composite + positioning):**
 ```xml
 <View class="h-14 w-screen">
-  <Label text="Title" class="center left-4 font-bold" />
-  <Label class="fas fa-bars center right-4" />
+  <!-- Omitting top/bottom lets each child center vertically in the composite bar -->
+  <Label text="Title" class="left-4 font-bold" />
+  <Label class="fas fa-bars right-4" />
 </View>
 ```
 
@@ -392,7 +394,7 @@ module.exports = {
 | `flex-row`                            | Flexbox not supported                | `horizontal`                                 |
 | `flex-col`                            | Flexbox not supported                | `vertical`                                   |
 | `justify-*`                           | Flexbox not supported                | Use margins/positioning                      |
-| `items-center`                        | Flexbox mental model                 | Use layout + positioning                     |
+| `items-center`                        | Exists but maps to fill, not centering — avoid for centering | Use layout + positioning         |
 | `p-4` on View                         | No padding on containers             | `m-4` on children                            |
 | `w-full`                              | Percentage-based                     | `w-screen` (Ti.UI.FILL)                      |
 | `rounded-full`                        | Needs size suffix                    | `rounded-full-12`                            |

package/skills/purgetss/references/app-branding.md

@@ -356,6 +356,11 @@ Since v7.7.0, PurgeTSS regenerates `app/assets/android/default.png` in Alloy pro
 
 That file still matters as a fallback on older Titanium Android splash paths, which is why `cleanup-legacy` no longer removes it.
 
+> **INFO**
+>
+> Older Android splash theme assets are left out on purpose
+> The older Android splash **theme** assets `background.png` / `background.9.png` are intentionally **not** part of the normal `brand` flow. `brand` targets the modern Titanium icon pipeline (iOS app icons, Android adaptive icons, optional Android 12+ splash artwork), so if a project still depends on those legacy nine-patch theme assets, manage them manually. (Source: upstream `app-assets/1-app-icons-and-branding.md` ~lines 334, 386.)
+
 ## iOS 18+ Dark and Tinted variants
 
 iOS 18 added two appearance variants on top of the standard app icon: **Dark** (for the dark appearance of the Home Screen) and **Tinted** (for the user-accent-colored mode).

package/skills/purgetss/references/apply-directive.md

@@ -85,7 +85,7 @@ module.exports = {
 
 `./purgetss/styles/utilities.tss`
 ```tss
-'.close-button': { color: '#374151', textColor: '#374151', width: 48, height: 48, font: { fontFamily: 'FontAwesome7Free-Solid' }, text: '', title: '' }
+'.close-button': { color: '#374151', textColor: '#374151', width: 48, height: 48, font: { fontFamily: 'FontAwesome7Free-Solid' }, text: '\uf057', title: '\uf057' }
 ```
 
 The same lookup runs for `mi-*`, `ms-*`, and `f7-*` classes. If the project ships its own `purgetss/styles/fontawesome.tss` (for example, FontAwesome Pro or Beta), that file takes precedence over the bundled default — matching the precedence order used when the same icon class appears directly in XML.

package/skills/purgetss/references/class-categories.md

@@ -65,7 +65,7 @@ Complete inventory of all class prefixes organized by functional category. For n
 
 | Prefix | Count | Examples |
 | --- | --- | --- |
-| `bg-` | **1,688** | `bg-white`, `bg-gray-*` (50-950), all 22 Tailwind colors. Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Plus: `bg-black`, `bg-white`, `bg-transparent`, `bg-translucent` |
+| `bg-` | **1,688** | `bg-white`, `bg-gray-*` (50-950), all 22 Tailwind colors. Each color has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Plus: `bg-black`, `bg-white`, `bg-transparent` |
 | `active-tint-*` | ~24 | `active-tint-*` (all colors) |
 | `selected-bg-*` | ~264 | `selected-bg-*` (selected state backgrounds) |
 | `badge-bg-*` | ~264 | `badge-bg-*` (badge backgrounds) |