@maccesar/titools 2.8.0 → 2.9.0

package/skills/purgetss/references/appearance-module.md

@@ -0,0 +1,161 @@
+# Appearance Module
+
+The `Appearance` export from `purgetss.ui` (added in **v7.5.3**) handles Light / Dark / System mode switching and persists the user's choice across app restarts. It is a thin, deterministic wrapper around Titanium's native `Ti.UI.overrideUserInterfaceStyle` plus `Ti.App.Properties`, exposed as a singleton so every controller in the app reads and writes the same state.
+
+This file covers the four public methods, the required setup, a full Settings-view example, and the lifecycle that keeps the saved mode in sync with the UI. For the color wiring that actually makes the UI *respond* to mode changes, see [semantic-colors.md](./semantic-colors.md).
+
+> **INFO**
+>
+> Requires PurgeTSS **>= 7.5.3**. On older versions the `Appearance` export does not exist — the `require('purgetss.ui')` call will succeed, but `Appearance` will be `undefined`. Run `purgetss --version` in the project root to confirm.
+
+## Setup
+
+Call `Appearance.init()` **once** at app startup, before opening the first window. The standard place is the top of `app/controllers/index.js`.
+
+`app/controllers/index.js`
+```js
+const { Appearance } = require('purgetss.ui')
+
+Appearance.init()
+
+$.navWin.open()
+```
+
+`init()` reads the saved preference from `Ti.App.Properties` (key: `userInterfaceStyle`) and applies it through `Ti.UI.overrideUserInterfaceStyle`. If nothing has been saved yet, the system default is used, and semantic colors resolve against whatever the OS reports.
+
+> **WARNING**
+>
+> Call `Appearance.init()` **before** `$.navWin.open()` (or whichever window you open first). If the window opens first, it will render once against the system default and then flicker to the saved mode when `init()` runs — a visible flash on cold launch.
+
+## Methods
+
+| Method       | Description                                                                 |
+| ------------ | --------------------------------------------------------------------------- |
+| `init()`     | Restore the saved mode from `Ti.App.Properties` and apply it via `Ti.UI.overrideUserInterfaceStyle`. Call once at app startup before opening the first window. |
+| `set(mode)`  | Apply and persist a mode. Accepts `'system'`, `'light'`, or `'dark'`. Any other value is silently ignored. |
+| `get()`      | Returns the current mode as a string: `'system'`, `'light'`, or `'dark'`.   |
+| `toggle()`   | Switch between `'light'` and `'dark'`. Skips `'system'` — if current mode is `'system'` the next call produces `'dark'`. |
+
+All four methods are **synchronous**. They do not fire events; if you need to react to a mode change, call your update logic right after `Appearance.set(...)`.
+
+## Full Settings-view example
+
+A three-row settings panel — System / Light / Dark — where each row shows a `fa-solid fa-circle-check` icon next to the currently active mode. Tapping a row calls `Appearance.set(...)` and updates the check icons.
+
+### View
+
+`app/views/settings.xml`
+```xml
+<Alloy>
+  <Window class="bg-surface title-attributes-on-surface bar-surface nav-tint-accent" title="Settings">
+    <ScrollView class="vertical content-w-screen content-h-auto">
+
+      <Label class="mx-4 mb-2 mt-6 h-auto text-xs font-semibold text-on-surface-variant">APPEARANCE</Label>
+
+      <View class="mx-4 mb-4 h-auto w-screen rounded-xl bg-surface-high shadow-sm vertical clip-enabled">
+
+        <!-- System -->
+        <View class="horizontal mx-4 h-12 w-screen" onClick="selectSystem">
+          <Label class="fa-solid fa-mobile-screen ml-0 h-12 w-8 text-blue-500" />
+          <Label class="h-12 text-sm font-semibold text-on-surface">System</Label>
+          <Label id="themeSystemCheck" class="fa-solid fa-circle-check mr-0 h-12 w-screen text-right text-green-500" />
+        </View>
+
+        <View class="h-px w-screen bg-border" />
+
+        <!-- Light -->
+        <View class="horizontal mx-4 h-12 w-screen" onClick="selectLight">
+          <Label class="fa-solid fa-sun ml-0 h-12 w-8 text-amber-500" />
+          <Label class="h-12 text-sm font-semibold text-on-surface">Light</Label>
+          <Label id="themeLightCheck" class="fa-solid fa-circle-check mr-0 hidden h-12 w-screen text-right text-green-500" />
+        </View>
+
+        <View class="h-px w-screen bg-border" />
+
+        <!-- Dark -->
+        <View class="horizontal mx-4 h-12 w-screen" onClick="selectDark">
+          <Label class="fa-solid fa-moon ml-0 h-12 w-8 text-purple-500" />
+          <Label class="h-12 text-sm font-semibold text-on-surface">Dark</Label>
+          <Label id="themeDarkCheck" class="fa-solid fa-circle-check mr-0 hidden h-12 w-screen text-right text-green-500" />
+        </View>
+
+      </View>
+
+    </ScrollView>
+  </Window>
+</Alloy>
+```
+
+### Controller
+
+`app/controllers/settings.js`
+```js
+const { Appearance } = require('purgetss.ui')
+
+// Sync check icons with the mode saved at app startup.
+updateUI(Appearance.get())
+
+const selectDark   = () => selectAppearance('dark')
+const selectLight  = () => selectAppearance('light')
+const selectSystem = () => selectAppearance('system')
+
+const selectAppearance = (value) => {
+  Appearance.set(value)
+  updateUI(value)
+}
+
+const updateUI = (value) => {
+  $.themeDarkCheck.visible   = (value === 'dark')
+  $.themeLightCheck.visible  = (value === 'light')
+  $.themeSystemCheck.visible = (value === 'system')
+}
+```
+
+The background, text, border, and icon colors in the XML come from semantic color classes (`bg-surface`, `bg-surface-high`, `text-on-surface`, `bg-border`, etc.) — see [semantic-colors.md](./semantic-colors.md) for how to wire those up so the whole view flips when `Appearance.set('dark')` fires.
+
+## Lifecycle
+
+How the four moving parts — `Appearance.init()`, `Ti.App.Properties`, `Ti.UI.overrideUserInterfaceStyle`, and semantic colors — cooperate:
+
+```
+app startup
+  |
+  +-- 1. Appearance.init()
+  |       |
+  |       +-- reads key 'userInterfaceStyle' from Ti.App.Properties
+  |       +-- sets Ti.UI.overrideUserInterfaceStyle to the saved value
+  |       +-- stores 'system' | 'light' | 'dark' in the singleton's currentMode
+  |
+  +-- 2. First window opens
+  |       |
+  |       +-- semantic colors resolve against the now-applied mode
+  |       +-- bg-surface        -> surfaceColor       -> light or dark hex
+  |       +-- text-on-surface   -> textColor          -> light or dark hex
+  |
+  +-- 3. User taps "Dark" in Settings
+          |
+          +-- Appearance.set('dark')
+          |     |
+          |     +-- Ti.UI.overrideUserInterfaceStyle = USER_INTERFACE_STYLE_DARK
+          |     +-- Ti.App.Properties.setInt('userInterfaceStyle', ...)
+          |
+          +-- All semantic colors repaint instantly
+          +-- Preference survives the next cold launch
+```
+
+`Ti.App.Properties` is the persistence layer — the value written during `set(...)` is what `init()` reads on the next launch. Clearing app storage or reinstalling resets to `'system'`.
+
+> **INFO**
+>
+> `toggle()` intentionally skips `'system'`. If the current mode is `'system'`, calling `toggle()` produces `'dark'`. If you want a three-way cycle (System -> Light -> Dark -> System), build it in userland with `Appearance.get()` + `Appearance.set(...)`; do not expect `toggle()` to do it.
+
+## Related
+
+- [semantic-colors.md](./semantic-colors.md) — defining `app/assets/semantic.colors.json` and mapping the color names in `config.cjs` so views actually respond to mode changes.
+- [cli-commands.md#semantic-command](./cli-commands.md#semantic-command) — the `purgetss semantic` command, which writes both the JSON and the `config.cjs` mapping for you.
+- [customization-deep-dive.md](./customization-deep-dive.md) — full `config.cjs` structure, including the `theme.extend.colors` section where semantic names are registered.
+
+## Community-Discovered Patterns
+
+- **Always call `Appearance.init()` before opening the first window.** Opening the window first causes a visible flicker on cold launch as the UI repaints from the system default to the saved mode. The official best-practices guide puts `Appearance.init()` on line 3 of `app/controllers/index.js`, immediately before `$.navWin.open()`, for exactly this reason.
+- **`toggle()` is not a three-state cycle.** It only alternates between `'light'` and `'dark'`. If the saved mode is `'system'`, the first `toggle()` call lands on `'dark'`. Build a cycle yourself with `get()` + `set(...)` when you need one.

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

@@ -203,6 +203,81 @@ theme: {
 '.btn[if=Alloy.Globals.iPhoneX]': { bottom: 48 }
 ```
 
+## Customizing Window, View, and ImageView
+
+`Window`, `View`, and `ImageView` have built-in defaults (white Window background, `Ti.UI.SIZE` on View, `hires: true` on ImageView for iOS). To change those defaults globally, put the customization under `theme.extend` — the same place you would extend `colors` or `spacing`:
+
+`./purgetss/config.cjs`
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      Window: {
+        apply: 'exit-on-close-false bg-blue-500'
+      }
+    }
+  }
+};
+```
+
+Now every `<Window>` in the project picks up `backgroundColor: '#3b82f6'` and `exitOnClose: false`.
+
+The same pattern works for `View` and `ImageView`. For example, to make all `ImageView` elements use `hires: true` on iOS (which PurgeTSS already does by default on iOS), or to set a different default for `View`:
+
+`./purgetss/config.cjs`
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      ImageView: {
+        ios: {
+          apply: 'hires-true'
+        }
+      },
+      View: {
+        apply: 'wh-auto'
+      }
+    }
+  }
+};
+```
+
+### Shorthand: no `default:` wrapper needed
+
+The examples above use `{ apply: '...' }` directly. Internally that gets normalized to `{ default: { apply: '...' } }`, so both forms produce the same TSS:
+
+```javascript
+// Both of these work
+Window: { apply: 'exit-on-close-false bg-blue-500' }
+Window: { default: { apply: 'exit-on-close-false bg-blue-500' } }
+```
+
+Use the explicit `default:` wrapper when you also need platform blocks (`ios:`, `android:`) next to it. For the common case of one bundle of defaults, the shorthand reads better.
+
+### Apply Wins Over Static Defaults
+
+If `apply` sets a property that the component already has as a built-in default, the applied value replaces the original instead of both ending up in the final TSS:
+
+`./purgetss/config.cjs`
+```javascript
+module.exports = {
+  theme: {
+    extend: {
+      Window: { apply: 'bg-blue-500' }
+    }
+  }
+};
+```
+
+`./purgetss/styles/utilities.tss`
+```tss
+/* Before dedup: { backgroundColor: '#FFFFFF', backgroundColor: '#3b82f6' } */
+/* After dedup:                                                           */
+'Window': { backgroundColor: '#3b82f6' }
+```
+
+Without the dedup, both `backgroundColor` entries would land in the file; the last one would win at runtime anyway, but reading the TSS with two copies of the same property is confusing. The builder keeps only the applied value.
+
 ## Platform-Specific Classes
 
 Several classes in `utilities.tss` are platform-specific (e.g., `clip-enabled`, `status-bar-style-light-content`). These only exist with a `[platform=ios]` or `[platform=android]` suffix.
@@ -276,16 +351,21 @@ module.exports = {
 '.my-view': { backgroundColor: '#22c55e', width: 128, height: 128 }
 ```
 
-> **Titanium Fill Rule**
-> When composing layout utilities inside `apply`, prefer `w-screen` for fill behavior. `w-full` maps to `100%`, not `Ti.UI.FILL`.
-
 ## Community-Discovered Patterns
 
+### Titanium Fill Rule
+
+When composing layout utilities inside `apply`, prefer `w-screen` for fill behavior. `w-full` maps to `100%`, not `Ti.UI.FILL`. In Titanium, `Ti.UI.FILL` is the layout primitive that makes a view fill its parent; a literal `100%` can behave unexpectedly inside nested containers.
+
+### Platform-Specific Constants in `apply`
+
+Constants like `Ti.UI.iOS.CLIP_MODE_ENABLED` or `Ti.UI.iOS.StatusBar.LIGHT_CONTENT` only exist on the platform that defines them. PurgeTSS utility classes such as `clip-enabled` or `status-bar-style-light-content` therefore only exist with a `[platform=ios]` or `[platform=android]` suffix in `utilities.tss`. When you reference them from `apply`, put them inside the correct platform block (`ios:` / `android:`) so PurgeTSS resolves them — otherwise the class silently drops on the wrong platform and can throw a runtime error if it reaches it. See the "Platform-Specific Classes" section above for the resolution rules.
+
 ### Global Window defaults for Large Titles + ScrollView (iOS)
 
-When using `largeTitleEnabled` with a ScrollView inside NavigationWindow or TabGroup, three Window properties must work together: `auto-adjust-scroll-view-insets`, `extend-edges-all`, and `large-title-enabled`. Without all three, the ScrollView content overlaps behind the navigation bar — or the large title renders with a visible delay.
+**See the dedicated reference: [`ios-large-titles.md`](./ios-large-titles.md)** — it covers the full pattern (three-property pairing, global-defaults recipe, TabGroup implicit NavigationWindow behavior, detail-window opt-out, and the ScrollView `content-w-screen` / `content-h-auto` pairing).
 
-Instead of repeating these classes on every Window XML, use `apply` in `config.cjs` to set the base properties as global defaults:
+Minimal recap — when Large Titles are in use, set the base iOS Window defaults once via `apply` in `config.cjs` rather than repeating them in every XML view:
 
 `./purgetss/config.cjs`
 ```javascript
@@ -293,35 +373,11 @@ module.exports = {
   theme: {
     Window: {
       ios: {
-        apply: 'auto-adjust-scroll-view-insets extend-edges-all status-bar-style-light-content'
+        apply: 'auto-adjust-scroll-view-insets extend-edges-all large-title-enabled'
       }
     }
   }
 };
 ```
 
-`./purgetss/styles/utilities.tss`
-```tss
-'Window[platform=ios]': { autoAdjustScrollViewInsets: true, extendEdges: [ Ti.UI.EXTEND_EDGE_ALL ], statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT }
-```
-
-Then in each view XML, only add `largeTitleEnabled` and `largeTitleDisplayMode` as needed:
-
-```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>
-```
-
-This works for both NavigationWindow and TabGroup — on iOS, TabGroup wraps each Tab in an implicit NavigationWindow.
-
-| Class | Property | Value |
-|---|---|---|
-| `auto-adjust-scroll-view-insets` | `autoAdjustScrollViewInsets` | `true` |
-| `extend-edges-all` | `extendEdges` | `[ Ti.UI.EXTEND_EDGE_ALL ]` |
-| `large-title-enabled` | `largeTitleEnabled` | `true` |
-| `large-title-display-mode` | `largeTitleDisplayMode` | Uses `LARGE_TITLE_DISPLAY_MODE_*` constants |
-
-> **Why `ios:` block instead of inline `ios:` prefix?** The three classes (`auto-adjust-scroll-view-insets`, `extend-edges-all`, `status-bar-style-light-content`) are platform-specific — they only exist with `[platform=ios]` suffix in `utilities.tss`. Using the `ios:` block in `config.cjs` ensures PurgeTSS resolves them correctly. See "Platform-Specific Classes" above.
+The `ios:` block (not an inline `ios:` prefix) is required because these classes only exist with a `[platform=ios]` suffix — see "Platform-Specific Classes" above. The *why* (rendering delay vs content-behind-nav-bar), the display-mode constants, and per-window overrides live in [`ios-large-titles.md`](./ios-large-titles.md) and in the official PurgeTSS docs at [Best Practices → Large Titles on iOS](https://purgetss.com/docs/best-practices/3-large-titles-on-ios).

package/skills/purgetss/references/arbitrary-values.md

@@ -306,6 +306,10 @@ Try this example on an iPad or tablet.
 </Alloy>
 ```
 
+## Community-Discovered Patterns
+
+These constraints reflect community experience using arbitrary values against the realities of the Titanium layout engine. They are not part of the official reference but prevent common mistakes.
+
 > **Titanium Layout Constraint**
 > Prefer `w-screen` instead of `w-full` when you need fill behavior. `w-full` maps to `100%`, not `Ti.UI.FILL`.
 

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

@@ -21,12 +21,13 @@ Complete inventory of all class prefixes organized by functional category. For n
 | `content-*` | ~20 | `content-h-*`, `content-w-*` |
 | `aspect-*` | 2 | `aspect-ratio-16-9`, `aspect-ratio-4-3` |
 
-**Important: `w-full` vs `w-screen`**
-- `w-full` → `width: '100%'` — 100% of parent container
-- `w-screen` → `width: Ti.UI.FILL` — Fills all available space in parent
-- `h-full` → `height: '100%'` — 100% of parent container
-- `h-screen` → `height: Ti.UI.FILL` — Fills all available space in parent
-- `wh-full` → Both `'100%'`
+> **Community-Discovered Pattern: `w-full` vs `w-screen`**
+>
+> - `w-full` → `width: '100%'` — 100% of parent container
+> - `w-screen` → `width: Ti.UI.FILL` — Fills all available space in parent
+> - `h-full` → `height: '100%'` — 100% of parent container
+> - `h-screen` → `height: Ti.UI.FILL` — Fills all available space in parent
+> - `wh-full` → Both `'100%'`
 
 ### Spacing (Margins & Padding)
 
@@ -108,7 +109,7 @@ Complete inventory of all class prefixes organized by functional category. For n
 | Prefix | Count | Examples |
 | --- | --- | --- |
 | `text-*` | 273 | Text colors, sizes, alignment |
-| `font-*` | 9 | `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black` |
+| `font-*` | 12 | Weights: `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black`. Families (v7.5.3+): `font-sans`, `font-serif`, `font-mono` |
 | `line-h-multiple-*` | ~85 | Line height as multiple |
 | `line-spacing-*` | ~85 | Line spacing |
 | `line-break-mode-*` | 7 | `line-break-mode-attribute-by-word-wrapping`, etc. |
@@ -192,6 +193,8 @@ Complete inventory of all class prefixes organized by functional category. For n
 | `duration-*` | 22 | `duration-0`, `duration-50` to `duration-5000` |
 | `delay-*` | 22 | `delay-0`, `delay-50` to `delay-5000` |
 | `repeat-*` | ~31 | `repeat-*` variants |
+| `snap-*` (v7.4.0+) | 6 | `snap-back`, `snap-back-false`, `snap-center`, `snap-center-false`, `snap-magnet`, `snap-magnet-false` — drop behaviors for draggable views |
+| `keep-z-index` (v7.4.0+) | 2 | `keep-z-index`, `keep-z-index-false` — preserves z-order during drag when using `transition` layouts |
 
 ### Shadows & Elevation
 

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

@@ -120,10 +120,11 @@ Some PurgeTSS classes combine multiple Titanium properties under a single class
 | `dragging-*`             | `draggingType`                                                 | Animation module dragging  |
 | `filter-attribute-*`     | `filterAttribute`                                              | ListView filtering         |
 | `flip-*`                 | `flip`                                                         | Animation flipping         |
-| `font-*`                 | `fontFamily`, `fontSize`, `fontStyle`, `fontWeight`            | Typography                 |
+| `font-*`                 | `fontFamily`, `fontSize`, `fontStyle`, `fontWeight`            | Typography (v7.5.3+: `font-sans`, `font-serif`, `font-mono` family classes) |
 | `grid-*`                 | Various                                                        | Grid layout system         |
 | `h-*`                    | `height`                                                       | All components             |
 | `hint-*`                 | `hintTextColor`                                                | TextField placeholder      |
+| `keep-z-index`           | `animationProperties.keepZIndex` (v7.4.0+)                     | Preserves z-order during drag when used with `transition` |
 | `layout-*`               | `layout`                                                       | View layout modes          |
 | `minimum-font-size-*`    | `minimumFontSize`                                              | Label auto-shrink          |
 | `navigation-*`           | `navigationMode`                                               | Navigation modes           |
@@ -135,6 +136,7 @@ Some PurgeTSS classes combine multiple Titanium properties under a single class
 | `scroll-type-*`          | `scrollType`                                                   | Android scroll type        |
 | `shadow-*`               | `shadowOffset`, `shadowRadius`, `shadowColor`                  | Box shadows                |
 | `show-*scroll-indicator` | `showHorizontalScrollIndicator`, `showVerticalScrollIndicator` | ScrollView                 |
+| `snap-*`                 | `animationProperties.snap.{back, center, magnet}` (v7.4.0+)    | Draggable drop behaviors   |
 | `status-bar-style-*`     | `statusBarStyle`                                               | iOS status bar             |
 | `tint-*`                 | `tintColor`                                                    | View/Button tinting        |
 | `title-*`                | `titleAttributes: color/shadow`                                | iOS title styling          |
@@ -759,7 +761,11 @@ For the complete prefix inventory organized by category (Layout, Spacing, Colors
 
 ---
 
-## PROHIBITED: CSS Classes (DO NOT EXIST)
+## Community-Discovered Patterns
+
+The rest of this document collects conventions, prohibitions, and insights surfaced by PurgeTSS users in real Titanium projects. They reflect how the utility system is actually used, not just how it is defined.
+
+### PROHIBITED: CSS Classes (DO NOT EXIST)
 
 | CSS Class         | Issue                             | PurgeTSS Alternative                        |
 | ----------------- | --------------------------------- | ------------------------------------------- |
@@ -779,10 +785,26 @@ For the complete prefix inventory organized by category (Layout, Spacing, Colors
 | `leading-*`       | Uses different prefix             | Use `line-h-multiple-*` or `line-spacing-*` |
 | `tracking-*`      | Uses different prefix             | Use `letter-spacing-*`                      |
 
+### Key Insights from Real Data
+
+1. **21,236 unique classes** across **364 unique prefixes** - Far more than initially documented
+2. **Extensive state management** - Hundreds of `*enabled`, `*-false` classes for UI states
+3. **Platform-specific classes** - Many iOS/Android specific variants (like `[platform=ios]`)
+4. **Complete color coverage** - All 22 Tailwind v3 colors with 11 shades each (50-950) = 242 color variants per prefix
+5. **Boolean class pattern** - For properties like `editable`, `enabled`, `visible` → `class` and `class-false`
+6. **UI component state variants** - `selected-*`, `badge-*`, `title-*`, `disabled-*` with full color coverage
+7. **Keyboard toolbar styling** - Extensive `keyboard-toolbar-*` classes for custom keyboard accessories
+8. **Status bar & navigation** - `status-bar-*`, `tabs-*`, `nav-*` for system UI customization
+9. **Accessibility support** - `accessibility-*` classes for a11y properties
+10. **Animation system** - `duration-*`, `delay-*`, `rotate-*`, `scale-*` for PurgeTSS Animation component
+
 ---
 
 ## All 364 Unique Prefixes (Alphabetical)
 
+> **NOTE**: Recent additions — v7.4.0 introduced `snap-back`, `snap-back-false`, `snap-center`, `snap-center-false`, `snap-magnet`, `snap-magnet-false`, `keep-z-index`, and `keep-z-index-false` for the Animation module drop/drag system. v7.5.3 introduced font-family classes `font-sans`, `font-serif`, `font-mono` alongside the existing weight classes.
+
+
 ```
 accessibility, accessory, accuracy, action, active, activity, alignment, all, allow, allows,
 amber, anchor, animated, app, arrow, aspect, audio, authentication, auto, autocapitalization,
@@ -809,7 +831,7 @@ pl, placeholder, platform, playback, pointer, portrait, position, pr, prevent, p
 prune, pt, pull, purple, px, py, ready, recording, red, remote, repeat, requires, results,
 return, reverse, right, role, rose, rotate, rounded, row, running, save, scale, scales,
 scaling, scroll, scrollable, scrolling, scrolls, search, section, secure, selected, selection,
-sentences, separator, shadow, shift, show, shows, shuffle, size, sky, slate, smooth, sorted,
+sentences, separator, shadow, shift, show, shows, shuffle, size, sky, slate, smooth, snap, sorted,
 source, split, state, status, stone, stopped, style, submit, subtitle, success, suppress,
 suppresses, sustained, swipe, swipeable, tab, tabs, target, teal, text, theme, throw, thumb,
 timeout, tint, title, tls, to, toggle, toolbar, top, torch, touch, trace, track, translucent,
@@ -868,18 +890,3 @@ These properties are NOT styled with classes in PurgeTSS - use as XML attributes
 | `bindId`       | `bindId="myData"`                 | ListView data binding    |
 
 **Note:** For `autocapitalization`, `editable`, `enabled`, `visible`, `autocorrect` - PurgeTSS DOES have classes (see above), so you CAN use either the class or the attribute depending on your preference.
-
----
-
-## Key Insights from Real Data
-
-1. **21,236 unique classes** across **364 unique prefixes** - Far more than initially documented
-2. **Extensive state management** - Hundreds of `*enabled`, `*-false` classes for UI states
-3. **Platform-specific classes** - Many iOS/Android specific variants (like `[platform=ios]`)
-4. **Complete color coverage** - All 22 Tailwind v3 colors with 11 shades each (50-950) = 242 color variants per prefix
-5. **Boolean class pattern** - For properties like `editable`, `enabled`, `visible` → `class` and `class-false`
-6. **UI component state variants** - `selected-*`, `badge-*`, `title-*`, `disabled-*` with full color coverage
-7. **Keyboard toolbar styling** - Extensive `keyboard-toolbar-*` classes for custom keyboard accessories
-8. **Status bar & navigation** - `status-bar-*`, `tabs-*`, `nav-*` for system UI customization
-9. **Accessibility support** - `accessibility-*` classes for a11y properties
-10. **Animation system** - `duration-*`, `delay-*`, `rotate-*`, `scale-*` for PurgeTSS Animation component