@maccesar/titools 2.0.7 → 2.2.0

package/skills/{alloy-expert → ti-expert}/references/error-handling.md

@@ -146,8 +146,8 @@ module.exports = new Logger()
 
 ```javascript
 // lib/services/errorHandler.js
-const logger = require('lib/services/logger')
-const { AppError } = require('lib/core/appError')
+const logger = require('services/logger')
+const { AppError } = require('core/appError')
 
 exports.handleError = function handleError(error, context = {}) {
   // Log the error
@@ -201,8 +201,8 @@ function _getUserMessage(error) {
 
 ```javascript
 // lib/services/userService.js
-const logger = require('lib/services/logger')
-const { NetworkError, NotFoundError } = require('lib/core/appError')
+const logger = require('services/logger')
+const { NetworkError, NotFoundError } = require('core/appError')
 
 exports.getUserProfile = async function getUserProfile(userId) {
   logger.info('UserService', 'Fetching user profile', { userId })
@@ -237,8 +237,8 @@ exports.getUserProfile = async function getUserProfile(userId) {
 
 ```javascript
 // lib/api/client.js
-const logger = require('lib/services/logger')
-const { NetworkError, AuthError, NotFoundError, ValidationError } = require('lib/core/appError')
+const logger = require('services/logger')
+const { NetworkError, AuthError, NotFoundError, ValidationError } = require('core/appError')
 
 exports.get = async function get(endpoint, params = {}) {
   return new Promise((resolve, reject) => {
@@ -306,9 +306,9 @@ exports.get = async function get(endpoint, params = {}) {
 
 ```javascript
 // controllers/user/detail.js
-const logger = require('lib/services/logger')
-const { handleError } = require('lib/services/errorHandler')
-const { getUserProfile } = require('lib/services/userService')
+const logger = require('services/logger')
+const { handleError } = require('services/errorHandler')
+const { getUserProfile } = require('services/userService')
 
 function init() {
   logger.debug('UserDetail', 'Controller initialized', { userId: $.args.userId })
@@ -380,7 +380,7 @@ $.cleanup = cleanup
 
 ```javascript
 // alloy.js - Setup global error catching
-const { handleError } = require('lib/services/errorHandler')
+const { handleError } = require('services/errorHandler')
 
 // Catch unhandled errors in production
 if (Ti.App.deployType === 'production') {
@@ -429,8 +429,8 @@ exports.reportToCrashService = function reportToCrashService(error, context = {}
 
 ```javascript
 // lib/helpers/validator.js
-const { ValidationError } = require('lib/core/appError')
-const logger = require('lib/services/logger')
+const { ValidationError } = require('core/appError')
+const logger = require('services/logger')
 
 exports.validateEmail = function validateEmail(email) {
   const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

package/skills/{alloy-expert → ti-expert}/references/examples.md

@@ -1,4 +1,4 @@
-# PurgeTSS Implementation Examples (Alloy + PurgeTSS)
+# Alloy Implementation Examples
 
 ## API Client Service
 Standard logic for network requests.
@@ -64,30 +64,26 @@ exports.definition = {
 }
 ```
 
-## Fully Styled & Accessible View (PurgeTSS)
-Applying PurgeTSS classes while maintaining accessibility.
+## Fully Styled & Accessible View
+Applying TSS styles while maintaining accessibility.
 
 ```xml
 <!-- views/login.xml -->
 <Alloy>
-  <Window class="vertical bg-gray-50">
-    <Animation id="myAnim" module="purgetss.ui" class="close:opacity-0 duration-500 open:opacity-100" />
-
+  <Window id="loginWindow">
     <!-- Spacer to center content -->
-    <View class="h-auto" />
+    <View id="topSpacer" />
 
-    <Label class="text-primary fa-solid fa-lock mx-6 mb-10 text-4xl"
+    <ImageView id="lockIcon" image="/images/lock.png"
       accessibilityLabel="L('login_icon_label')"
     />
 
     <TextField id="email"
-      class="border-(1) mx-6 h-12 w-screen rounded-lg border-gray-300 bg-white"
       hintText="L('email_hint')"
       accessibilityLabel="L('email_label')"
     />
 
     <Button id="submit"
-      class="bg-primary mx-6 mt-10 h-14 w-screen rounded-xl font-bold text-white"
       title="L('login_button')"
       accessibilityLabel="L('login_button')"
       accessibilityHint="L('login_hint')"
@@ -95,16 +91,25 @@ Applying PurgeTSS classes while maintaining accessibility.
     />
 
     <!-- Spacer to center content -->
-    <View class="h-auto" />
+    <View id="bottomSpacer" />
   </Window>
 </Alloy>
 ```
 
+```tss
+/* styles/login.tss */
+"#loginWindow": { layout: 'vertical', backgroundColor: '#f9fafb' }
+"#topSpacer": { height: Ti.UI.SIZE }
+"#lockIcon": { left: 24, right: 24, bottom: 40, width: 48, height: 48 }
+"#email": { left: 24, right: 24, height: 48, borderRadius: 8, borderWidth: 1, borderColor: '#d1d5db', backgroundColor: '#fff' }
+"#submit": { left: 24, right: 24, top: 40, height: 56, borderRadius: 12, backgroundColor: '#2563eb', color: '#fff', font: { fontWeight: 'bold' } }
+"#bottomSpacer": { height: Ti.UI.SIZE }
+```
+
 **Notes:**
-- Use `vertical` layout on Window (not `flex-col`)
-- Use `mx-6` for horizontal padding (not `p-6` on parent)
-- Use `w-screen` for full width (not `w-full`)
-- Use `border-(1)` with parentheses for arbitrary border width
+- Use `layout: 'vertical'` on Window for top-to-bottom content flow
+- Use margins on children for spacing (NOT padding on parent)
+- Use `Ti.UI.FILL` for full-width elements
 
 ## Cleanup Pattern in Controller
 Critical for memory management and avoiding leaks.
@@ -128,13 +133,23 @@ function cleanup() {
 $.cleanup = cleanup
 ```
 
-## Animation Component Usage
-Using the toolkit for UI transformations via the `<Animation>` component.
+## Animation Usage
+Using `Ti.UI.createAnimation()` for UI transformations.
 
 ```javascript
 // Inside any controller
 function shakeError(element) {
-  $.myAnim.play(element, 'animate-shake duration-200')
+  const shake = Ti.UI.createAnimation({ duration: 50 })
+  const offset = 10
+
+  shake.transform = Ti.UI.createMatrix2D().translate(offset, 0)
+  element.animate(shake, () => {
+    shake.transform = Ti.UI.createMatrix2D().translate(-offset, 0)
+    element.animate(shake, () => {
+      shake.transform = Ti.UI.createMatrix2D()
+      element.animate(shake)
+    })
+  })
 }
 ```
 
@@ -142,9 +157,9 @@ function shakeError(element) {
 
 ```javascript
 // lib/services/productService.js
-const { productApi } = require('lib/api/productApi')
-const { appStore } = require('lib/services/stateStore')
-const logger = require('lib/services/logger')
+const { productApi } = require('api/productApi')
+const { appStore } = require('services/stateStore')
+const logger = require('services/logger')
 
 exports.productService = {
   getAll: async function(filters = {}) {
@@ -196,18 +211,18 @@ exports.productService = {
 ```xml
 <!-- views/products/list.xml -->
 <Alloy>
-  <Window class="bg-gray-50">
-    <ListView id="listView" class="wh-screen">
+  <Window id="productsWindow">
+    <ListView id="listView">
       <RefreshControl id="refresh" onRefresh="onRefresh" />
 
       <Templates>
         <ItemTemplate name="product" height="80">
-          <View class="horizontal mb-2 h-20 w-screen bg-white">
-            <ImageView bindId="image" class="wh-16 ml-3 rounded-lg" />
-            <View class="vertical ml-3 w-auto">
-              <Label bindId="name" class="text-base font-semibold" />
-              <Label bindId="price" class="text-sm text-green-600" />
-              <Label bindId="stock" class="text-xs text-gray-400" />
+          <View id="productRow">
+            <ImageView bindId="image" id="productImg" />
+            <View id="productInfo">
+              <Label bindId="name" id="productName" />
+              <Label bindId="price" id="productPrice" />
+              <Label bindId="stock" id="productStock" />
             </View>
           </View>
         </ItemTemplate>
@@ -223,20 +238,28 @@ exports.productService = {
       </ListSection>
     </ListView>
 
-    <Button id="addBtn"
-      class="bg-primary rounded-full-14 absolute bottom-6 right-6 shadow-lg"
-      onClick="onAddProduct"
-    >
-      <Label class="fa-solid fa-plus text-xl text-white" />
-    </Button>
+    <Button id="addBtn" onClick="onAddProduct" title="+" />
   </Window>
 </Alloy>
 ```
 
+```tss
+/* styles/products/list.tss */
+"#productsWindow": { backgroundColor: '#f9fafb' }
+"#listView": { width: Ti.UI.FILL, height: Ti.UI.FILL }
+"#productRow": { layout: 'horizontal', bottom: 8, height: 80, width: Ti.UI.FILL, backgroundColor: '#fff' }
+"#productImg": { left: 12, width: 64, height: 64, borderRadius: 8 }
+"#productInfo": { layout: 'vertical', left: 12 }
+"#productName": { font: { fontSize: 16, fontWeight: 'semibold' } }
+"#productPrice": { font: { fontSize: 14 }, color: '#16a34a' }
+"#productStock": { font: { fontSize: 12 }, color: '#9ca3af' }
+"#addBtn": { position: 'absolute', bottom: 24, right: 24, width: 56, height: 56, borderRadius: 28, backgroundColor: '#2563eb', color: '#fff', font: { fontSize: 24 } }
+```
+
 ```javascript
 // controllers/products/list.js
-const { Navigation } = require('lib/services/navigation')
-const { productService } = require('lib/services/productService')
+const { Navigation } = require('services/navigation')
+const { productService } = require('services/productService')
 
 function init() {
   loadProducts()
@@ -283,39 +306,50 @@ $.cleanup = cleanup
 ```xml
 <!-- views/contacts/list.xml -->
 <Alloy>
-  <Window class="bg-white">
+  <Window id="contactsWindow">
     <!-- Search and Filter Bar -->
-    <View class="horizontal h-14 w-screen bg-gray-100">
+    <View id="searchFilterBar">
       <SearchBar id="searchBar"
-        class="h-10 w-8/12"
         hintText="L('search')"
         showCancel="true"
       />
       <Button id="filterBtn"
-        class="h-10 w-4/12"
         title="L('filter')"
         onClick="showFilters"
       />
     </View>
 
     <!-- Active Filters -->
-    <ScrollView id="filterTags" class="horizontal hidden h-10 w-screen">
+    <ScrollView id="filterTags">
       <!-- Dynamically populated filter tags -->
     </ScrollView>
 
-    <ListView id="listView" class="wh-screen">
+    <ListView id="listView">
       <ListSection id="section" />
     </ListView>
 
     <!-- Empty State -->
-    <View id="emptyState" class="wh-screen vertical hidden">
-      <Label class="fa-solid fa-search mt-20 text-6xl text-gray-300" />
-      <Label class="mt-4 text-lg text-gray-500" text="L('no_results')" />
+    <View id="emptyState">
+      <ImageView id="emptyIcon" image="/images/search.png" />
+      <Label id="emptyLabel" text="L('no_results')" />
     </View>
   </Window>
 </Alloy>
 ```
 
+```tss
+/* styles/contacts/list.tss */
+"#contactsWindow": { backgroundColor: '#fff' }
+"#searchFilterBar": { layout: 'horizontal', height: 56, width: Ti.UI.FILL, backgroundColor: '#f3f4f6' }
+"#searchBar": { height: 40, width: '66%' }
+"#filterBtn": { height: 40, width: '34%' }
+"#filterTags": { layout: 'horizontal', height: 40, width: Ti.UI.FILL, visible: false }
+"#listView": { width: Ti.UI.FILL, height: Ti.UI.FILL }
+"#emptyState": { layout: 'vertical', width: Ti.UI.FILL, height: Ti.UI.FILL, visible: false }
+"#emptyIcon": { top: 80, width: 64, height: 64 }
+"#emptyLabel": { top: 16, font: { fontSize: 18 }, color: '#6b7280' }
+```
+
 ```javascript
 // controllers/contacts/list.js
 let allItems = []
@@ -426,73 +460,70 @@ $.cleanup = cleanup
 ```xml
 <!-- views/auth/register.xml -->
 <Alloy>
-  <Window class="vertical bg-white">
-    <ScrollView class="wh-screen vertical" contentHeight="Ti.UI.SIZE">
-      <View class="vertical mt-8 h-auto w-screen">
+  <Window id="registerWindow">
+    <ScrollView id="scrollView" contentHeight="Ti.UI.SIZE">
+      <View id="formContainer">
         <!-- Logo -->
-        <ImageView class="wh-24" image="/images/logo.png" />
+        <ImageView id="logo" image="/images/logo.png" />
 
         <!-- Title -->
-        <Label class="mt-6 text-2xl font-bold" text="L('create_account')" />
+        <Label id="titleLabel" text="L('create_account')" />
 
         <!-- Name Field -->
-        <View class="mx-4 mt-6 w-screen">
-          <Label class="text-sm text-gray-600" text="L('full_name')" />
-          <TextField id="nameField"
-            class="border-(1) return-key-type-next mt-1 h-12 w-screen rounded-lg border-gray-300 px-3"
-            autocorrect="false"
+        <View id="nameGroup">
+          <Label id="nameLabel" text="L('full_name')" />
+          <TextField id="nameField" autocorrect="false"
+            returnKeyType="Ti.UI.RETURNKEY_NEXT"
           />
-          <Label id="nameError" class="mt-1 hidden text-xs text-red-500" />
+          <Label id="nameError" />
         </View>
 
         <!-- Email Field -->
-        <View class="mx-4 mt-4 w-screen">
-          <Label class="text-sm text-gray-600" text="L('email')" />
+        <View id="emailGroup">
+          <Label id="emailLabel" text="L('email')" />
           <TextField id="emailField"
-            class="border-(1) keyboard-type-email return-key-type-next mt-1 h-12 w-screen rounded-lg border-gray-300 px-3"
+            keyboardType="Ti.UI.KEYBOARD_TYPE_EMAIL"
+            returnKeyType="Ti.UI.RETURNKEY_NEXT"
             autocapitalization="none"
           />
-          <Label id="emailError" class="mt-1 hidden text-xs text-red-500" />
+          <Label id="emailError" />
         </View>
 
         <!-- Password Field -->
-        <View class="mx-4 mt-4 w-screen">
-          <Label class="text-sm text-gray-600" text="L('password')" />
-          <TextField id="passwordField"
-            class="border-(1) return-key-type-next mt-1 h-12 w-screen rounded-lg border-gray-300 px-3"
-            passwordMask="true"
+        <View id="passwordGroup">
+          <Label id="passwordLabel" text="L('password')" />
+          <TextField id="passwordField" passwordMask="true"
+            returnKeyType="Ti.UI.RETURNKEY_NEXT"
           />
-          <Label id="passwordError" class="mt-1 hidden text-xs text-red-500" />
-          <Label class="mt-1 text-xs text-gray-400" text="L('password_hint')" />
+          <Label id="passwordError" />
+          <Label id="passwordHint" text="L('password_hint')" />
         </View>
 
         <!-- Confirm Password -->
-        <View class="mx-4 mt-4 w-screen">
-          <Label class="text-sm text-gray-600" text="L('confirm_password')" />
-          <TextField id="confirmField"
-            class="border-(1) return-key-type-done mt-1 h-12 w-screen rounded-lg border-gray-300 px-3"
-            passwordMask="true"
+        <View id="confirmGroup">
+          <Label id="confirmLabel" text="L('confirm_password')" />
+          <TextField id="confirmField" passwordMask="true"
+            returnKeyType="Ti.UI.RETURNKEY_DONE"
           />
-          <Label id="confirmError" class="mt-1 hidden text-xs text-red-500" />
+          <Label id="confirmError" />
         </View>
 
         <!-- Terms Checkbox -->
-        <View class="horizontal mx-4 mt-6 w-screen">
-          <Switch id="termsSwitch" class="w-12" />
-          <Label class="ml-2 w-auto text-sm text-gray-600" text="L('accept_terms')" />
+        <View id="termsRow">
+          <Switch id="termsSwitch" />
+          <Label id="termsLabel" text="L('accept_terms')" />
         </View>
 
         <!-- Register Button -->
         <Button id="registerBtn"
-          class="bg-primary mx-4 mt-6 h-14 w-screen rounded-xl font-bold text-white"
           title="L('register')"
           onClick="onRegister"
         />
 
         <!-- Login Link -->
-        <View class="horizontal mt-4">
-          <Label class="text-sm text-gray-600" text="L('have_account')" />
-          <Label class="text-primary ml-1 text-sm" text="L('login')" onClick="goToLogin" />
+        <View id="loginRow">
+          <Label id="haveAccountLabel" text="L('have_account')" />
+          <Label id="loginLink" text="L('login')" onClick="goToLogin" />
         </View>
       </View>
     </ScrollView>
@@ -500,10 +531,38 @@ $.cleanup = cleanup
 </Alloy>
 ```
 
+```tss
+/* styles/auth/register.tss */
+"#registerWindow": { layout: 'vertical', backgroundColor: '#fff' }
+"#scrollView": { layout: 'vertical', width: Ti.UI.FILL, height: Ti.UI.FILL }
+"#formContainer": { layout: 'vertical', top: 32, height: Ti.UI.SIZE, width: Ti.UI.FILL }
+"#logo": { width: 96, height: 96 }
+"#titleLabel": { top: 24, font: { fontSize: 24, fontWeight: 'bold' } }
+".fieldGroup": { layout: 'vertical', left: 16, right: 16, top: 16, width: Ti.UI.FILL }
+"#nameGroup": { layout: 'vertical', left: 16, right: 16, top: 24, width: Ti.UI.FILL }
+"#emailGroup": { layout: 'vertical', left: 16, right: 16, top: 16, width: Ti.UI.FILL }
+"#passwordGroup": { layout: 'vertical', left: 16, right: 16, top: 16, width: Ti.UI.FILL }
+"#confirmGroup": { layout: 'vertical', left: 16, right: 16, top: 16, width: Ti.UI.FILL }
+"Label": { font: { fontSize: 14 }, color: '#4b5563' }
+"TextField": { top: 4, height: 48, width: Ti.UI.FILL, borderRadius: 8, borderWidth: 1, borderColor: '#d1d5db', paddingLeft: 12 }
+"#nameError": { top: 4, font: { fontSize: 12 }, color: '#ef4444', visible: false }
+"#emailError": { top: 4, font: { fontSize: 12 }, color: '#ef4444', visible: false }
+"#passwordError": { top: 4, font: { fontSize: 12 }, color: '#ef4444', visible: false }
+"#passwordHint": { top: 4, font: { fontSize: 12 }, color: '#9ca3af' }
+"#confirmError": { top: 4, font: { fontSize: 12 }, color: '#ef4444', visible: false }
+"#termsRow": { layout: 'horizontal', left: 16, right: 16, top: 24, width: Ti.UI.FILL }
+"#termsSwitch": { width: 48 }
+"#termsLabel": { left: 8 }
+"#registerBtn": { left: 16, right: 16, top: 24, height: 56, borderRadius: 12, backgroundColor: '#2563eb', color: '#fff', font: { fontWeight: 'bold' } }
+"#loginRow": { layout: 'horizontal', top: 16 }
+"#haveAccountLabel": { font: { fontSize: 14 }, color: '#4b5563' }
+"#loginLink": { left: 4, font: { fontSize: 14 }, color: '#2563eb' }
+```
+
 ```javascript
 // controllers/auth/register.js
-const { AuthService } = require('lib/services/authService')
-const { Navigation } = require('lib/services/navigation')
+const { AuthService } = require('services/authService')
+const { Navigation } = require('services/navigation')
 
 const validators = {
   name: (value) => {
@@ -642,7 +701,7 @@ $.cleanup = cleanup
 ```xml
 <!-- views/main.xml -->
 <Alloy>
-  <TabGroup id="tabGroup" class="tabs-bg-white active-tint-blue-500">
+  <TabGroup id="tabGroup">
 
     <Tab id="homeTab" title="L('home')" icon="/images/icons/home.png">
       <Require src="tabs/home" />
@@ -665,7 +724,7 @@ $.cleanup = cleanup
 
 ```javascript
 // controllers/main.js
-const EventBus = require('lib/services/eventBus')
+const EventBus = require('services/eventBus')
 const Events = EventBus.Events
 
 function init() {

package/skills/{alloy-expert → ti-expert}/references/migration-patterns.md

@@ -4,59 +4,61 @@
 
 Before migrating, evaluate the current codebase:
 
-| Area        | Signs of Legacy Code                               | Target State                    |
-| ----------- | -------------------------------------------------- | ------------------------------- |
-| Styling     | Manual `.tss` files, inline attributes             | PurgeTSS utility classes        |
-| Controllers | 200+ lines, API calls, business logic              | Thin orchestrators (<100 lines) |
-| Events      | `Ti.App.fireEvent` everywhere                      | Backbone.Events or StateStore   |
-| Navigation  | Direct `Alloy.createController().getView().open()` | Navigation service              |
-| Data        | Scattered `Ti.App.Properties`, no collections      | Centralized state + Collections |
+| Area        | Signs of Legacy Code                               | Target State                                  |
+| ----------- | -------------------------------------------------- | --------------------------------------------- |
+| Styling     | Inline attributes, scattered styles                | Organized TSS files (per-controller + global) |
+| Controllers | 200+ lines, API calls, business logic              | Thin orchestrators (<100 lines)               |
+| Events      | `Ti.App.fireEvent` everywhere                      | Backbone.Events or StateStore                 |
+| Navigation  | Direct `Alloy.createController().getView().open()` | Navigation service                            |
+| Data        | Scattered `Ti.App.Properties`, no collections      | Centralized state + Collections               |
 
-## Phase 1: PurgeTSS Integration
+## Phase 1: TSS Organization
 
-**Goal**: Migrate from manual TSS to utility-first styling.
+**Goal**: Migrate from inline styling and scattered styles to well-organized TSS files.
 
-### Step 1: Initialize PurgeTSS
+### Step 1: Audit Existing Styles
 
+Find all inline attributes and consolidate into TSS files:
 ```bash
-# In existing project
-cd your-app
-purgetss init
+# Find inline styling in XML views
+grep -r 'backgroundColor=' app/views/
+grep -r 'font=' app/views/
+grep -r 'color=' app/views/
 ```
 
-### Step 2: Backup Existing Styles
+### Step 2: Move Inline Attributes to TSS
 
-PurgeTSS automatically backs up `app.tss` to `_app.tss`. Your custom styles are preserved.
-
-### Step 3: Migrate Views Incrementally
+```xml
+<!-- BEFORE: Inline attributes -->
+<View id="header" backgroundColor="#fff" height="60" top="0">
+  <Label id="title" text="Welcome" color="#333" font="{fontSize:18, fontWeight:'bold'}" />
+</View>
+```
 
 ```xml
-<!-- BEFORE: Manual styling -->
+<!-- AFTER: Clean XML + TSS file -->
 <View id="header">
-  <Label id="title" text="Welcome" />
+  <Label id="title" text="L('welcome')" />
 </View>
+```
 
-<!-- styles/index.tss -->
+```tss
+/* styles/index.tss */
 "#header": { backgroundColor: "#fff", height: 60, top: 0 }
 "#title": { color: "#333", font: { fontSize: 18, fontWeight: "bold" } }
 ```
 
-```xml
-<!-- AFTER: PurgeTSS classes -->
-<View class="top-0 h-16 bg-white">
-  <Label class="text-lg font-bold text-gray-800" text="Welcome" />
-</View>
+### Step 3: Organize TSS Structure
 
-<!-- No manual TSS needed - delete #header and #title styles -->
+1. Use `app.tss` for global styles (shared across all views)
+2. Use per-controller TSS files for view-specific styles
+3. Use class selectors for reusable style patterns:
+```tss
+/* app.tss - Global reusable styles */
+".card": { borderRadius: 12, backgroundColor: '#fff' }
+".btn-primary": { backgroundColor: '#2563eb', color: '#fff', height: 44, borderRadius: 8 }
 ```
 
-### Step 4: Remove Manual TSS Files
-
-Once a view is fully migrated to utility classes:
-1. Remove corresponding entries from `_app.tss`
-2. Delete any controller-specific `.tss` files
-3. Run `purgetss` to regenerate `app.tss`
-
 ## Phase 2: Service Layer Extraction
 
 **Goal**: Move business logic from controllers to services.
@@ -221,7 +223,7 @@ exports.getStack = function() {
 Alloy.createController('detail', { id: 123 }).getView().open()
 
 // AFTER: Navigation service (auto cleanup)
-const navigation = require('lib/services/navigation')
+const navigation = require('services/navigation')
 navigation.open('detail', { id: 123 })
 ```
 
@@ -252,7 +254,7 @@ const user = JSON.parse(Ti.App.Properties.getString('user'))
 
 // AFTER: Centralized state
 // In service
-const { appStore } = require('lib/services/stateStore')
+const { appStore } = require('services/stateStore')
 appStore.setState({ user })
 
 // In any controller
@@ -263,7 +265,7 @@ const { user } = appStore.getState()
 
 Recommended sequence to minimize risk:
 
-1. **PurgeTSS** - Visual only, no logic changes
+1. **TSS Organization** - Visual only, no logic changes
 2. **Service Layer** - Extract logic without changing behavior
 3. **Navigation Service** - Centralize with cleanup
 4. **Event System** - Replace Ti.App events

package/skills/{alloy-expert → ti-expert}/references/patterns.md

@@ -104,10 +104,10 @@ exports.UserRepository = {
 
 ```javascript
 // lib/services/authService.js
-const authApi = require('lib/api/authApi').authApi
-const { TokenStorage } = require('lib/services/tokenStorage')
-const { appStore } = require('lib/services/stateStore')
-const { Validator } = require('lib/helpers/validator')
+const authApi = require('api/authApi').authApi
+const { TokenStorage } = require('services/tokenStorage')
+const { appStore } = require('services/stateStore')
+const { Validator } = require('helpers/validator')
 
 exports.AuthService = {
   async login(email, password) {
@@ -175,7 +175,7 @@ module.exports.Events = Events
 
 ```javascript
 // controllers/profile.js
-const EventBus = require('lib/services/eventBus')
+const EventBus = require('services/eventBus')
 const { Events } = EventBus
 
 function init() {
@@ -339,7 +339,7 @@ $.cleanup = cleanup
 
 ```xml
 <!-- views/products/list.xml -->
-<ListView class="wh-screen">
+<ListView id="listView">
   <ListSection dataCollection="products">
     <ListItem title="{name}" subtitle="{description}" />
   </ListSection>
@@ -352,9 +352,9 @@ $.cleanup = cleanup
 
 ```javascript
 // controllers/dashboard.js
-const EventBus = require('lib/services/eventBus')
+const EventBus = require('services/eventBus')
 const { Events } = EventBus
-const { appStore } = require('lib/services/stateStore')
+const { appStore } = require('services/stateStore')
 
 // Store references for cleanup
 let storeUnsubscribe = null