@maccesar/titools 2.2.12 → 2.3.0

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

@@ -1,969 +1,302 @@
-# UI/UX Design Patterns for Titanium SDK with PurgeTSS
+# UI/UX Design Patterns for Titanium with PurgeTSS
 
-A guide to building accessible and performant mobile UIs using Titanium SDK and PurgeTSS utility classes.
+This guide collects practical UI patterns that stay aligned with Titanium layout behavior and verified PurgeTSS conventions.
 
-## 1. Common UI Components
+## Core Rules
 
-### Cards
+- PurgeTSS is not Tailwind CSS. Verify classes before recommending them.
+- Titanium does not support Flexbox. Use `horizontal`, `vertical`, or the default composite layout.
+- Do not use `p-*` on `View`, `Window`, `ScrollView`, or `TableView`. Use margins on children instead.
+- Prefer `w-screen` over `w-full` when you need `Ti.UI.FILL`.
+- For dynamic components, prefer `$.UI.create()` over manual `Ti.UI.create*()` styling.
 
-Cards are versatile containers for content and actions on a single subject.
+## Cards
 
-#### Elevated Card
+### Elevated Card
 
 ```xml
-<View class="mb-4 rounded-xl bg-white shadow-lg">
-  <ImageView class="mb-4 h-48 w-full rounded-lg" image="/images/card-image.jpg" />
-  <Label class="mb-2 text-xl font-bold text-gray-800" text="Card Title" />
-  <Label class="mb-4 text-sm text-gray-600" text="Card description goes here with details about the content." />
-  <View class="horizontal mt-4">
-    <Button class="bg-brand-500 mr-2 rounded-lg px-4 py-2 text-white" title="Action" />
-    <Button class="rounded-lg bg-gray-200 px-4 py-2 text-gray-700" title="Learn More" />
-  </View>
-</View>
-```
+<View class="rounded-xl bg-white shadow-lg">
+  <ImageView class="h-48 w-screen rounded-t-xl" image="/images/card-image.jpg" />
 
-#### Outlined Card
+  <Label class="mx-4 mt-4 text-xl font-bold text-gray-800" text="Card Title" />
+  <Label class="mx-4 mt-2 text-sm text-gray-600" text="Card description goes here." />
 
-```xml
-<View class="mb-4 rounded-xl border border-gray-300 bg-white">
-  <Label class="mb-2 text-lg font-semibold text-gray-800" text="Outlined Card" />
-  <Label class="text-sm text-gray-600" text="Clean borders without elevation" />
+  <View class="horizontal mx-4 mt-4 mb-4">
+    <Button class="rounded-lg bg-blue-500 text-white" title="Action" />
+    <Button class="ml-2 rounded-lg bg-gray-200 text-gray-700" title="Learn More" />
+  </View>
 </View>
 ```
 
-#### Card with Image Overlay
+### Outlined Card
 
 ```xml
-<View class="relative mb-4 h-64 overflow-hidden rounded-xl">
-  <ImageView class="absolute left-0 top-0 h-full w-full" image="/images/cover.jpg" />
-  <View class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent">
-    <Label class="mb-4 ml-4 text-xl font-bold text-white" text="Overlay Title" />
-    <Label class="mb-4 ml-4 text-sm text-gray-200" text="Subtitle text" />
-  </View>
+<View class="rounded-xl border-(1) border-gray-300 bg-white">
+  <Label class="mx-4 mt-4 text-lg font-semibold text-gray-800" text="Outlined Card" />
+  <Label class="mx-4 mt-2 mb-4 h-auto text-sm text-gray-600" text="Clean borders without elevation." />
 </View>
 ```
 
-#### Horizontal Card
+### Card with Image Overlay
 
 ```xml
-<View class="horizontal mb-3 rounded-lg bg-white shadow">
-  <ImageView class="ml-3 mr-4 h-20 w-20 rounded-lg" image="/images/thumbnail.jpg" />
-  <View class="vertical mr-3 w-full">
-    <Label class="text-lg font-semibold text-gray-800" text="Title" />
-    <Label class="text-sm text-gray-600" text="Description text that wraps to multiple lines if needed" />
-    <Label class="text-brand-500 mt-1 text-xs" text="Read more →" />
+<View class="h-48 w-screen rounded-xl">
+  <ImageView class="h-48 w-screen rounded-xl" image="/images/cover.jpg" />
+
+  <View class="bottom-0 w-screen bg-(#88000000) rounded-b-xl">
+    <Label class="mx-4 mt-4 text-xl font-bold text-white" text="Overlay Title" />
+    <Label class="mx-4 mt-2 mb-4 h-auto text-sm text-gray-200" text="Subtitle text" />
   </View>
 </View>
 ```
 
-### Lists
-
-Lists display multiple items vertically and are essential for mobile UIs.
+## Lists
 
-#### Simple List Item
+### Simple List Item
 
 ```xml
 <View class="border-b border-gray-200 bg-white">
-  <Label class="mx-4 my-4 text-base text-gray-800" text="List item content" />
+  <Label class="mx-4 my-4 h-auto text-base text-gray-800" text="List item content" />
 </View>
 ```
 
-#### List with Avatar
+### List with Avatar
 
 ```xml
 <View class="horizontal border-b border-gray-200 bg-white">
-  <View class="bg-brand-500 ml-4 mr-4 h-12 w-12 rounded-full">
+  <View class="ml-4 my-4 rounded-full-12 bg-blue-500">
     <Label class="center text-lg font-bold text-white" text="JD" />
   </View>
-  <View class="vertical mr-4">
+
+  <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>
 ```
 
-#### List with Actions
+### ListView Template
 
 ```xml
-<View class="border-b border-gray-200 bg-white">
-  <View class="horizontal">
-    <View class="horizontal">
-      <View class="ml-4 mr-4 h-12 w-12 rounded-lg bg-blue-100">
-        <Label class="center fas fa-folder text-xl text-blue-500" />
-      </View>
-      <View class="vertical">
-        <Label class="text-base font-semibold text-gray-800" text="Project Folder" />
-        <Label class="text-sm text-gray-500" text="24 files" />
-      </View>
-    </View>
-    <Label class="fas fa-chevron-right mr-4 text-gray-400" />
-  </View>
-</View>
-```
-
-#### List with Dividers
-
-```xml
-<View class="bg-white">
-  <!-- Item 1 -->
-  <View class="border-b border-gray-100">
-    <Label class="mx-4 my-4 text-base text-gray-800" text="Item 1" />
-  </View>
-  <!-- Item 2 -->
-  <View class="border-b border-gray-100">
-    <Label class="mx-4 my-4 text-base text-gray-800" text="Item 2" />
-  </View>
-  <!-- Item 3 -->
-  <View>
-    <Label class="mx-4 my-4 text-base text-gray-800" text="Item 3" />
-  </View>
-</View>
-```
-
-#### ListView with Custom Template
-
-```xml
-<ListView id="myList" defaultItemTemplate="cardTemplate">
+<ListView id="myList">
   <Templates>
-    <ItemTemplate name="cardTemplate" class="h-auto">
-      <View bindId="container" class="mx-4 mb-2 rounded-lg bg-white shadow">
-        <View class="horizontal">
-          <View bindId="iconContainer" class="bg-brand-100 mr-3 h-10 w-10 rounded-full">
-            <Label bindId="icon" class="center fas fa-home text-brand-500" />
-          </View>
-          <View class="vertical">
-            <Label bindId="title" class="text-base font-semibold text-gray-800" />
-            <Label bindId="subtitle" class="text-sm text-gray-500" />
-          </View>
+    <ItemTemplate name="cardTemplate" class="h-20">
+      <View bindId="container" class="horizontal mx-4 my-2 rounded-lg bg-white shadow-lg">
+        <View bindId="iconWrap" class="ml-4 my-4 rounded-full-10 bg-blue-100">
+          <Label bindId="icon" class="center fas fa-home text-blue-500" />
+        </View>
+
+        <View class="vertical ml-3 my-4">
+          <Label bindId="title" class="text-base font-semibold text-gray-800" />
+          <Label bindId="subtitle" class="text-sm text-gray-500" />
         </View>
       </View>
     </ItemTemplate>
   </Templates>
-  <ListSection/>
-</ListView>
-```
 
-```javascript
-// Controller
-const items = [
-  {
-    container: {},
-    icon: { text: "\uf015" },  // fa-home
-    title: { text: "Item 1" },
-    subtitle: { text: "First item description" }
-  },
-  {
-    container: {},
-    icon: { text: "\uf007" },  // fa-user
-    title: { text: "Item 2" },
-    subtitle: { text: "Second item description" }
-  }
-]
-
-$.myList.sections[0].setItems(items)
+  <ListSection />
+</ListView>
 ```
 
-### Forms
+> **⚠️ ListView Performance**
+> Prefer fixed item heights for production ListView templates. Avoid relying on `Ti.UI.SIZE` in scrolling cells when performance matters.
 
-Forms collect user input through various controls.
+## Forms
 
-#### Text Input
+### Text Input
 
 ```xml
 <View class="mb-4">
   <Label class="mb-2 text-sm font-medium text-gray-700" text="Email Address" />
-  <TextField class="focus:border-brand-500 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-base text-gray-800" hintText="you@example.com" keyboardType="Ti.UI.KEYBOARD_TYPE_EMAIL" autocapitalization="Ti.UI.TEXT_AUTOCAPITALIZATION_NONE" autocorrect="false" />
+  <TextField class="w-screen rounded-lg border-(1) border-gray-300 bg-white px-4 py-3 text-base text-gray-800" hintText="you@example.com" keyboardType="Ti.UI.KEYBOARD_TYPE_EMAIL" autocapitalization="Ti.UI.TEXT_AUTOCAPITALIZATION_NONE" autocorrect="false" />
 </View>
 ```
 
-#### Text Area
+### Text Area
 
 ```xml
 <View class="mb-4">
   <Label class="mb-2 text-sm font-medium text-gray-700" text="Message" />
-  <TextArea class="h-32 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-base text-gray-800" hintText="Type your message here..." autocapitalization="Ti.UI.TEXT_AUTOCAPITALIZATION_SENTENCES" />
-</View>
-```
-
-#### Password Input
-
-```xml
-<View class="mb-4">
-  <Label class="mb-2 text-sm font-medium text-gray-700" text="Password" />
-  <TextField class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-base text-gray-800" passwordMask="true" hintText="Enter password" />
-</View>
-```
-
-#### Select/Dropdown (using Picker)
-
-```xml
-<View class="mb-4">
-  <Label class="mb-2 text-sm font-medium text-gray-700" text="Category" />
-  <Picker class="w-full rounded-lg border border-gray-300 bg-white" selectionIndicator="true">
-    <PickerRow title="Option 1" />
-    <PickerRow title="Option 2" />
-    <PickerRow title="Option 3" />
-  </Picker>
+  <TextArea class="h-32 w-screen rounded-lg border-(1) border-gray-300 bg-white px-4 py-3 text-base text-gray-800" hintText="Type your message here..." />
 </View>
 ```
 
-#### Switch Toggle
-
-```xml
-<View class="horizontal mb-4 rounded-lg border border-gray-200 bg-white">
-  <View class="vertical">
-    <Label class="text-base font-medium text-gray-800" text="Notifications" />
-    <Label class="text-sm text-gray-500" text="Receive push notifications" />
-  </View>
-  <Switch class="ml-4" value="true" />
-</View>
-```
-
-#### Slider
+### Validation State
 
 ```xml
 <View class="mb-4">
-  <View class="horizontal mb-2">
-    <Label class="text-sm font-medium text-gray-700" text="Volume" />
-    <Label id="sliderValue" class="ml-auto text-sm text-gray-500" text="50%" />
-  </View>
-  <Slider class="w-full" min="0" max="100" value="50" />
-</View>
-```
-
-#### Form with Validation States
-
-```xml
-<!-- Error State -->
-<View class="mb-4">
-  <Label class="mb-2 text-sm font-medium text-red-600" text="Email Address" />
-  <TextField class="w-full rounded-lg border border-red-500 bg-white px-4 py-3 text-base" hintText="Invalid email" />
-  <Label class="mt-1 text-xs text-red-500" text="Please enter a valid email address" />
-</View>
-
-<!-- Success State -->
-<View class="mb-4">
-  <Label class="mb-2 text-sm font-medium text-green-600" text="Email Address" />
-  <TextField class="w-full rounded-lg border border-green-500 bg-white px-4 py-3 text-base" hintText="Valid email" />
-  <Label class="fas fa-check-circle mt-1 text-xs text-green-500" text=" Valid email" />
-</View>
-```
-
-#### Form Section
-
-```xml
-<View class="mb-6 rounded-lg bg-white shadow">
-  <Label class="mx-6 mb-6 mt-6 text-xl font-bold text-gray-800" text="Account Information" />
-
-  <View class="mb-4">
-    <Label class="mb-2 text-sm font-medium text-gray-700" text="Full Name" />
-    <TextField class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3" hintText="John Doe" />
-  </View>
-
-  <View class="mb-4">
-    <Label class="mb-2 text-sm font-medium text-gray-700" text="Email" />
-    <TextField class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3" hintText="john@example.com" keyboardType="Ti.UI.KEYBOARD_TYPE_EMAIL" />
-  </View>
-
-  <View class="mb-6">
-    <Label class="mb-2 text-sm font-medium text-gray-700" text="Phone" />
-    <TextField class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3" hintText="+1 (555) 000-0000" keyboardType="Ti.UI.KEYBOARD_TYPE_PHONE" />
-  </View>
-
-  <Button class="bg-brand-500 w-full rounded-lg py-3 text-base font-semibold text-white" title="Save Changes" />
-</View>
-```
-
-### Buttons
-
-Buttons trigger actions and are primary interactive elements.
-
-#### Primary Button
-
-```xml
-<Button class="bg-brand-500 rounded-lg px-6 py-3 text-base font-semibold text-white shadow-md" title="Primary Action" />
-```
-
-#### Secondary Button
-
-```xml
-<Button class="rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-semibold text-gray-700" title="Secondary Action" />
-```
-
-#### Outline Button
-
-```xml
-<Button class="border-brand-500 text-brand-500 rounded-lg border-2 bg-transparent px-6 py-3 text-base font-semibold" title="Outline" />
-```
-
-#### Text Button
-
-```xml
-<Button class="text-brand-500 bg-transparent text-base font-semibold" title="Text Only" />
-```
-
-#### Icon Button
-
-```xml
-<!-- EFFICIENT: Single Label with icon, size, and styling -->
-<Label class="rounded-full-12 bg-brand-500 fa-solid fa-plus text-center text-xl text-white" />
-
-<!-- ALTERNATIVE: View + Label (more verbose) -->
-<View class="bg-brand-500 h-12 w-12 rounded-full">
-  <Label class="center fas fa-plus text-xl text-white" />
+  <Label class="mb-2 text-sm font-medium text-gray-700" text="Email Address" />
+  <TextField class="w-screen rounded-lg border-(1) border-red-500 bg-white px-4 py-3 text-base text-gray-800" hintText="Invalid email" />
+  <Label class="mt-1 text-xs text-red-500" text="Please enter a valid email address." />
 </View>
 ```
 
-:::tip SINGLE-LABEL ICON BUTTONS
-For circular icon buttons, you can use a single `Label` with:
-- `rounded-full-XX` (includes size) - Creates the circle and sets dimensions
-- Font Awesome icon class (e.g., `fa-solid fa-plus`)
-- `text-center` - Centers the icon
-- Background color and text color
+> **⚠️ 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.
 
-This eliminates the need for a wrapper `View`, reducing DOM depth.
-:::
+## Buttons
 
-#### Floating Action Button (FAB)
+### Primary Button
 
 ```xml
-<!-- SIMPLIFIED: Single Label with positioning -->
-<Label class="rounded-full-14 bg-brand-500 fa-solid fa-plus absolute bottom-6 right-6 text-center text-2xl text-white shadow-lg" />
-
-<!-- ALTERNATIVE: View wrapper approach -->
-<View class="absolute bottom-6 right-6">
-  <View class="bg-brand-500 h-14 w-14 rounded-full shadow-lg">
-    <Label class="center fas fa-plus text-2xl text-white" />
-  </View>
-</View>
+<Button class="rounded-lg bg-blue-500 text-base font-semibold text-white" title="Save Changes" />
 ```
 
-#### Button with Icon
+### Secondary Button
 
 ```xml
-<View class="horizontal bg-brand-500 rounded-lg px-6 py-3 shadow-md">
-  <Label class="fas fa-arrow-left mr-2 text-lg text-white" />
-  <Label class="text-base font-semibold text-white" text="Back" />
-</View>
+<Button class="rounded-lg bg-gray-200 text-base font-semibold text-gray-800" title="Cancel" />
 ```
 
-#### Button Group
+### Outline Button
 
 ```xml
-<View class="horizontal rounded-lg bg-gray-200">
-  <View class="w-1/3 rounded-md bg-white py-2 shadow-sm">
-    <Label class="text-center text-sm font-semibold text-gray-800" text="Day" />
-  </View>
-  <View class="w-1/3 py-2">
-    <Label class="text-center text-sm font-medium text-gray-500" text="Week" />
-  </View>
-  <View class="w-1/3 py-2">
-    <Label class="text-center text-sm font-medium text-gray-500" text="Month" />
-  </View>
-</View>
+<Button class="rounded-lg border-(1) border-blue-500 text-base font-semibold text-blue-500" title="Learn More" />
 ```
 
-#### Button Sizes
+### Icon Button
 
 ```xml
-<!-- Small -->
-<Button class="bg-brand-500 rounded px-4 py-2 text-sm font-semibold text-white" title="Small" />
-
-<!-- Medium (Default) -->
-<Button class="bg-brand-500 rounded-lg px-6 py-3 text-base font-semibold text-white" title="Medium" />
-
-<!-- Large -->
-<Button class="bg-brand-500 rounded-xl px-8 py-4 text-lg font-semibold text-white" title="Large" />
+<Button class="rounded-lg bg-blue-500 text-white" title="Save" />
+<Label class="fas fa-save ml-2 text-white" />
 ```
 
-### Navigation Bars
-
-Navigation bars provide hierarchy and navigation context.
+## Navigation Patterns
 
-#### Top Navigation Bar with Title
+### Top Bar with Title and Action
 
 ```xml
-<View class="horizontal h-14 border-b border-gray-200 bg-white">
-  <Label class="fas fa-arrow-left ml-4 text-xl text-gray-600" />
-  <Label class="w-screen text-center text-lg font-semibold text-gray-800" text="Screen Title" />
-  <Label class="fas fa-ellipsis-v mr-4 text-xl text-gray-600" />
+<View class="h-14 w-screen bg-white border-b border-gray-200">
+  <Label class="left-4 center text-lg font-bold text-gray-800" text="Dashboard" />
+  <Label class="right-4 center fas fa-bars text-gray-700" />
 </View>
 ```
 
-#### Navigation Bar with Actions
+### Bottom Tab Bar
 
 ```xml
-<View class="bg-brand-500 horizontal h-14">
-  <Label class="fas fa-bars ml-4 text-xl text-white" />
-  <Label class="w-screen text-center text-lg font-semibold text-white" text="Dashboard" />
-  <View class="horizontal mr-4">
-    <Label class="fas fa-search mr-4 text-xl text-white" />
-    <Label class="fas fa-bell text-xl text-white" />
-  </View>
-</View>
-```
-
-#### Tab Bar (Bottom)
-
-```xml
-<View class="horizontal h-16 border-t border-gray-200 bg-white">
+<View class="bottom-0 h-16 w-screen bg-white border-t border-gray-200 horizontal">
   <View class="vertical w-1/3">
-    <Label class="fas fa-home text-brand-500 mx-auto mb-1 text-xl" />
-    <Label class="text-brand-500 text-center text-xs font-medium" text="Home" />
+    <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="fas fa-search mx-auto mb-1 text-xl text-gray-400" />
-    <Label class="text-center text-xs text-gray-400" text="Search" />
+    <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="fas fa-user mx-auto mb-1 text-xl text-gray-400" />
-    <Label class="text-center text-xs text-gray-400" text="Profile" />
+    <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>
 ```
 
-#### Segment Control
-
-```xml
-<View class="horizontal mx-4 my-4 rounded-lg bg-gray-200">
-  <View id="segment1" class="w-1/2 rounded-md bg-white py-2 shadow-sm">
-    <Label class="text-center text-sm font-semibold text-gray-800" text="Active" />
-  </View>
-  <View id="segment2" class="w-1/2 py-2">
-    <Label class="text-center text-sm font-medium text-gray-500" text="Inactive" />
-  </View>
-</View>
-```
+## Modals, Sheets, and Feedback
 
-#### Breadcrumb Navigation
+### Full-Screen Overlay
 
 ```xml
-<View class="horizontal bg-gray-50">
-  <Label class="text-brand-500 text-sm" text="Home" />
-  <Label class="fas fa-chevron-right mx-2 my-3 text-xs text-gray-400" />
-  <Label class="text-brand-500 text-sm" text="Products" />
-  <Label class="fas fa-chevron-right mx-2 my-3 text-xs text-gray-400" />
-  <Label class="my-3 text-sm font-medium text-gray-800" text="Category" />
-</View>
-```
-
-### Modals and Dialogs
-
-Modals focus user attention on specific content or actions.
-
-#### Alert Dialog
+<View class="h-screen w-screen bg-(#88000000)">
+  <View class="mx-6 mt-24 rounded-xl bg-white shadow-lg">
+    <Label class="mx-4 mt-4 text-lg font-bold text-gray-800" text="Confirm Action" />
+    <Label class="mx-4 mt-2 text-sm text-gray-600" text="Are you sure you want to continue?" />
 
-```javascript
-const dialog = Ti.UI.createAlertDialog({
-  cancel: 0,
-  title: 'Delete Item',
-  buttonNames: ['Cancel', 'Delete'],
-  message: 'Are you sure you want to delete this item? This action cannot be undone.'
-})
-
-dialog.addEventListener('click', (e) => {
-  if (e.index === 1) {
-    // Delete action
-  }
-})
-
-dialog.show()
-```
-
-#### Full Screen Modal (iOS)
-
-```xml
-<!-- modal.xml -->
-<Window class="bg-white" modal="true">
-  <View class="vertical h-full">
-    <!-- Header -->
-    <View class="horizontal border-b border-gray-200 bg-white">
-      <Label id="closeBtn" class="text-brand-500 text-base font-semibold" text="Cancel" />
-      <Label class="w-screen text-center text-lg font-semibold text-gray-800" text="Modal Title" />
-      <Label id="saveBtn" class="text-brand-500 text-base font-semibold" text="Save" />
+    <View class="horizontal mx-4 mt-4 mb-4">
+      <Button class="rounded-lg bg-gray-200 text-gray-700" title="Cancel" />
+      <Button class="ml-2 rounded-lg bg-red-500 text-white" title="Delete" />
     </View>
-
-    <!-- Content -->
-    <ScrollView class="h-full">
-      <View>
-        <Label class="mx-4 my-4 text-base text-gray-800" text="Modal content goes here..." />
-      </View>
-    </ScrollView>
   </View>
-</Window>
-```
-
-```javascript
-// Open modal
-const modal = Alloy.createController('modal').getView()
-modal.open({ modal: true })
+</View>
 ```
 
-#### Bottom Sheet (Android-style)
+### Bottom Sheet
 
 ```xml
-<View class="absolute bottom-0 left-0 w-full rounded-t-xl bg-white shadow-2xl">
-  <View class="mx-auto mb-4 mt-3 h-1 w-12 rounded-full bg-gray-300" />
-  <View>
-    <Label class="mx-4 mb-4 mt-4 text-lg font-semibold text-gray-800" text="Choose Action" />
-    <View class="vertical">
-      <View class="border-b border-gray-100">
-        <Label class="mx-4 my-3 text-base text-gray-800" text="Action 1" />
-      </View>
-      <View class="border-b border-gray-100">
-        <Label class="mx-4 my-3 text-base text-gray-800" text="Action 2" />
-      </View>
-      <View>
-        <Label class="mx-4 my-3 text-base font-semibold text-red-500" text="Delete" />
-      </View>
-    </View>
+<View class="bottom-0 w-screen rounded-t-xl bg-white shadow-lg">
+  <View class="mx-auto mt-2 h-1 w-10 rounded bg-gray-300" />
+  <Label class="mx-4 mt-4 text-lg font-bold text-gray-800" text="Share" />
+  <View class="vertical mx-4 mt-4 mb-4">
+    <Label class="text-base text-gray-700" text="Copy link" />
+    <Label class="mt-3 text-base text-gray-700" text="Send message" />
+    <Label class="mt-3 text-base text-gray-700" text="Open in browser" />
   </View>
 </View>
 ```
 
-### Toasts and Snackbars
-
-Brief notifications that provide feedback.
-
-#### Simple Toast
-
-```javascript
-// Native toast (Android only)
-var toast = Ti.UI.createNotification({
-  message: "Operation successful",
-  duration: Ti.UI.NOTIFICATION_DURATION_SHORT
-})
-toast.show()
-```
-
-#### Custom Snackbar
+### Snackbar
 
 ```xml
-<View id="snackbar" class="absolute bottom-4 left-4 right-4 hidden rounded-lg bg-gray-800 shadow-lg">
+<View id="snackbar" class="bottom-4 left-4 right-4 hidden rounded-lg bg-gray-800 shadow-lg">
   <View class="horizontal">
-    <Label class="w-screen text-base text-white" text="File deleted successfully" />
-    <Label id="undoBtn" class="text-brand-400 text-base font-semibold" text="UNDO" />
+    <Label class="mx-4 my-4 h-auto text-base text-white" text="File deleted successfully" />
+    <Label id="undoBtn" class="my-4 mr-4 h-auto text-base font-semibold text-blue-400" text="UNDO" />
   </View>
 </View>
 ```
 
-```javascript
-// Show snackbar
-$.snackbar.setVisible(true)
-setTimeout(() => {
-  $.snackbar.setVisible(false)
-}, 3000)
-```
+## Layout Patterns
 
-#### Success Toast
-
-```xml
-<View class="horizontal absolute left-4 right-4 top-4 rounded-lg bg-green-500 shadow-lg">
-  <Label class="fas fa-check-circle mr-3 text-xl text-white" />
-  <Label class="text-base font-medium text-white" text="Changes saved successfully!" />
-</View>
-```
-
-#### Error Toast
-
-```xml
-<View class="horizontal absolute left-4 right-4 top-4 rounded-lg bg-red-500 shadow-lg">
-  <Label class="fas fa-exclamation-circle mr-3 text-xl text-white" />
-  <Label class="text-base font-medium text-white" text="An error occurred. Please try again." />
-</View>
-```
-
----
-
-## 2. Layout Patterns
-
-### Screen Structure
-
-#### Standard Screen Layout
+### Standard Screen Layout
 
 ```xml
 <Window class="bg-gray-100">
-  <ScrollView class="h-full w-full">
-    <!-- Header -->
-    <View class="border-b border-gray-200 bg-white">
-      <Label class="mx-4 my-4 text-2xl font-bold text-gray-800" text="Screen Title" />
-    </View>
-
-    <!-- Content -->
-    <View>
-      <!-- Main content goes here -->
+  <View class="vertical h-screen w-screen">
+    <View class="h-14 w-screen border-b border-gray-200 bg-white">
+      <Label class="left-4 center text-xl font-bold text-gray-800" text="Screen Title" />
     </View>
 
-    <!-- Footer -->
-    <View class="border-t border-gray-200 bg-white">
-      <Label class="text-center text-sm text-gray-500" text="Footer content" />
-    </View>
-  </ScrollView>
-</Window>
-```
-
-#### Tab Bar Screen Structure
-
-```xml
-<TabGroup>
-  <!-- Tab 1 -->
-  <Tab>
-    <Window class="bg-gray-100">
-      <ScrollView class="h-full w-full">
-        <Label class="mb-4 text-lg font-semibold text-gray-800" text="Home" />
-        <!-- Content -->
-      </ScrollView>
-    </Window>
-  </Tab>
-
-  <!-- Tab 2 -->
-  <Tab>
-    <Window class="bg-gray-100">
-      <ScrollView class="h-full w-full">
-        <Label class="mb-4 text-lg font-semibold text-gray-800" text="Search" />
-        <!-- Content -->
-      </ScrollView>
-    </Window>
-  </Tab>
-
-  <!-- Tab 3 -->
-  <Tab>
-    <Window class="bg-gray-100">
-      <ScrollView class="h-full w-full">
-        <Label class="mb-4 text-lg font-semibold text-gray-800" text="Profile" />
-        <!-- Content -->
-      </ScrollView>
-    </Window>
-  </Tab>
-</TabGroup>
-```
-
-### Spacing System
-
-PurgeTSS uses a consistent spacing scale based on 4px increments:
-
-| Class | Spacing | Usage       |
-| ----- | ------- | ----------- |
-| `p-0` | 0px     | No padding  |
-| `p-1` | 4px     | Extra small |
-| `p-2` | 8px     | Small       |
-| `p-3` | 12px    | Medium      |
-| `p-4` | 16px    | Standard    |
-| `p-5` | 20px    | Large       |
-| `p-6` | 24px    | Extra large |
-| `p-8` | 32px    | Double      |
-
-**Note:** Padding classes (`p-*`) work on some elements like TextField, TextArea, Button, and Label, but do NOT work on View. For View spacing, use margin classes on child elements instead.
-
-#### Margin Examples
-
-```xml
-<!-- All sides -->
-<View class="m-4">...</View>
-
-<!-- Horizontal -->
-<View class="mx-4">...</View>
-
-<!-- Vertical -->
-<View class="my-4">...</View>
-
-<!-- Individual sides -->
-<View class="mb-4 ml-2 mr-4 mt-2">...</View>
-```
-
-#### Padding Examples
-
-```xml
-<!-- All sides (works on TextField, TextArea, Button, Label) -->
-<TextField class="p-4" hintText="Input with padding" />
-
-<!-- Horizontal (works on TextField, TextArea, Button, Label) -->
-<TextField class="px-4" hintText="Input with horizontal padding" />
-
-<!-- Vertical (works on TextField, TextArea, Button, Label) -->
-<TextField class="py-4" hintText="Input with vertical padding" />
-
-<!-- Individual sides (works on TextField, TextArea, Button, Label) -->
-<TextField class="pb-4 pl-2 pr-4 pt-2" hintText="Input with individual padding" />
-```
-
-#### Gap (Spacing between children)
-
-```xml
-<View class="gap-2">  <!-- 8px between all children -->
-  <View class="h-10 bg-red-500" />
-  <View class="h-10 bg-blue-500" />
-  <View class="h-10 bg-green-500" />
-</View>
-```
-
-### Responsive Patterns
-
-#### Responsive Grid
-
-```xml
-<!-- Two columns on large screens, one column on small -->
-<View class="grid">
-  <View class="col-span-6 md:col-span-12">
-    <Label text="Responsive Item" />
+    <ScrollView class="h-screen w-screen">
+      <View class="vertical">
+        <Label class="mx-4 mt-4 text-base text-gray-700" text="Main content goes here." />
+      </View>
+    </ScrollView>
   </View>
-</View>
+</Window>
 ```
 
-#### Adaptive Layout (Tablet vs Phone)
+### Two-Column Tablet Layout
 
 ```xml
-<!-- Use platform modifiers for adaptive layouts -->
-<View class="horizontal">
-  <!-- Sidebar on tablets, full width on phones -->
-  <View class="w-1/4 md:w-full">
-    <Label text="Sidebar" />
+<View class="horizontal w-screen">
+  <View class="tablet:w-(30%) handheld:w-screen bg-white">
+    <Label class="mx-4 my-4 text-base font-semibold text-gray-800" text="Sidebar" />
   </View>
 
-  <!-- Main content -->
-  <View class="w-3/4 md:w-full">
-    <Label text="Main Content" />
+  <View class="tablet:w-(70%) handheld:w-screen bg-gray-50">
+    <Label class="mx-4 my-4 text-base text-gray-700" text="Main content" />
   </View>
 </View>
 ```
 
-#### Percentage-Based Widths
-
-```xml
-<!-- Half width -->
-<View class="w-(50%)">...</View>
-
-<!-- One-third width -->
-<View class="w-(33.33%)">...</View>
-
-<!-- Custom percentage -->
-<View class="w-(75%)">...</View>
-```
-
----
-
-## 3. Typography
-
-### Font Scales
-
-PurgeTSS provides consistent font size utilities:
-
-| Class       | Size | Usage               |
-| ----------- | ---- | ------------------- |
-| `text-xs`   | 12px | Captions, labels    |
-| `text-sm`   | 14px | Secondary text      |
-| `text-base` | 16px | Body text (default) |
-| `text-lg`   | 18px | Subheadings         |
-| `text-xl`   | 20px | Headings            |
-| `text-2xl`  | 24px | Large headings      |
-| `text-3xl`  | 30px | Display headings    |
-| `text-4xl`  | 36px | Hero text           |
-
-#### Typography Examples
-
-```xml
-<!-- Display heading -->
-<Label class="text-4xl font-bold text-gray-900" text="Hero Title" />
-
-<!-- Page heading -->
-<Label class="text-2xl font-bold text-gray-800" text="Page Title" />
-
-<!-- Section heading -->
-<Label class="text-xl font-semibold text-gray-800" text="Section Title" />
-
-<!-- Body text -->
-<Label class="text-base text-gray-600" text="Regular body text content" />
-
-<!-- Caption -->
-<Label class="text-xs text-gray-500" text="Caption text" />
-```
-
-### Font Weights
-
-```xml
-<Label class="font-light" text="Light weight (300)" />
-<Label class="font-normal" text="Normal weight (400)" />
-<Label class="font-medium" text="Medium weight (500)" />
-<Label class="font-semibold" text="Semibold weight (600)" />
-<Label class="font-bold" text="Bold weight (700)" />
-```
-
-### Text Alignment and Truncation
-
-#### Text Alignment
-
-```xml
-<Label class="text-left" text="Left aligned" />
-<Label class="text-center" text="Center aligned" />
-<Label class="text-right" text="Right aligned" />
-```
-
-#### Text Truncation
+### Percentage Layout
 
 ```xml
-<!-- Single line truncation -->
-<Label class="truncate" text="Very long text that will be truncated with ellipsis..." />
-
-<!-- Multi-line truncation -->
-<Label class="line-clamp-2" text="Long text that will truncate after 2 lines with ellipsis..." />
-<Label class="line-clamp-3" text="Long text that will truncate after 3 lines with ellipsis..." />
-```
-
-#### Text Transformations
-
-```xml
-<Label class="uppercase" text="uppercase text" />
-<Label class="lowercase" text="LOWERCASE TEXT" />
-<Label class="capitalize" text="capitalize each word" />
-```
-
----
-
-## 4. Colors and Themes
-
-### Semantic Color Naming
-
-Use semantic color names for better maintainability:
-
-#### Primary Colors
-
-```xml
-<!-- Brand colors -->
-<View class="bg-brand-500">...</View>
-<View class="bg-brand-600">...</View>
-<View class="bg-brand-700">...</View>
-
-<!-- Gray scale -->
-<View class="bg-gray-50">...</View>
-<View class="bg-gray-100">...</View>
-<View class="bg-gray-200">...</View>
-<View class="bg-gray-300">...</View>
-<View class="bg-gray-400">...</View>
-<View class="bg-gray-500">...</View>
-<View class="bg-gray-600">...</View>
-<View class="bg-gray-700">...</View>
-<View class="bg-gray-800">...</View>
-<View class="bg-gray-900">...</View>
-```
-
-#### Semantic Colors
-
-```xml
-<!-- Success -->
-<View class="bg-green-500">...</View>
-<Label class="text-green-500" text="Success message" />
-
-<!-- Warning -->
-<View class="bg-yellow-500">...</View>
-<Label class="text-yellow-500" text="Warning message" />
-
-<!-- Error -->
-<View class="bg-red-500">...</View>
-<Label class="text-red-500" text="Error message" />
-
-<!-- Info -->
-<View class="bg-blue-500">...</View>
-<Label class="text-blue-500" text="Info message" />
-```
-
-### Dark Mode Considerations
-
-Use semantic color names that adapt to theme:
-
-```xml
-<!-- Adaptive background -->
-<View class="bg-white dark:bg-gray-900">...</View>
-
-<!-- Adaptive text -->
-<Label class="text-gray-800 dark:text-gray-100" text="Adaptive text" />
-
-<!-- Adaptive borders -->
-<View class="border-gray-200 dark:border-gray-700">...</View>
-```
-
-### Platform-Specific Colors
-
-#### iOS System Colors
-
-```xml
-<!-- iOS blue -->
-<Button class="bg-ios-blue text-white" title="iOS Button" />
-
-<!-- iOS system background -->
-<Window class="bg-ios-system-background">
-  <View class="bg-ios-secondary-system-background">
-    <Label class="text-ios-label" text="iOS Text" />
+<View class="horizontal w-screen">
+  <View class="w-(48%) mr-2 rounded-lg bg-blue-100">
+    <Label class="mx-4 my-4 text-blue-700" text="Left panel" />
   </View>
-</Window>
-```
-
-#### Material Design Colors
-
-```xml
-<!-- Material primary -->
-<Button class="bg-material-primary text-white" title="Material Button" />
 
-<!-- Material surface -->
-<View class="bg-material-surface">
-  <Label class="text-material-on-surface" text="Material Text" />
+  <View class="w-(48%) ml-2 rounded-lg bg-green-100">
+    <Label class="mx-4 my-4 text-green-700" text="Right panel" />
+  </View>
 </View>
 ```
 
----
-
-## 5. Icons
-
-### Font Awesome 7 Icon Fonts
-
-Font Awesome 7 uses style prefixes for different icon sets:
-
-```xml
-<!-- Solid icons (free) -->
-<Label class="fas fa-home" />
-<Label class="fas fa-user" />
-<Label class="fas fa-envelope" />
-
-<!-- Regular icons (free) -->
-<Label class="far fa-heart" />
-<Label class="far fa-star" />
-<Label class="far fa-bookmark" />
-
-<!-- Brand icons (free) -->
-<Label class="fab fa-twitter" />
-<Label class="fab fa-facebook" />
-<Label class="fab fa-github" />
-
-<!-- Pro-only styles (require Font Awesome Pro) -->
-<Label class="fal fa-camera" />  <!-- Light -->
-<Label class="fass fa-star" />   <!-- Sharp Solid -->
-```
-
-### Icon Sizing and Alignment
+## Typography and Icons
 
-#### Icon Sizes
-
-```xml
-<Label class="fas fa-home text-xs" />    <!-- 12px -->
-<Label class="fas fa-home text-sm" />    <!-- 14px -->
-<Label class="fas fa-home text-base" />  <!-- 16px -->
-<Label class="fas fa-home text-lg" />    <!-- 18px -->
-<Label class="fas fa-home text-xl" />    <!-- 20px -->
-<Label class="fas fa-home text-2xl" />   <!-- 24px -->
-<Label class="fas fa-home text-3xl" />   <!-- 30px -->
-<Label class="fas fa-home text-4xl" />   <!-- 36px -->
-```
-
-#### Icon Colors
-
-```xml
-<Label class="fas fa-home text-gray-500" />
-<Label class="fas fa-home text-brand-500" />
-<Label class="fas fa-home text-(#FF5733)" />  <!-- Arbitrary color -->
-```
+### Typography Scale
 
-### Icon with Text Patterns
+- `text-xs`: 12px
+- `text-sm`: 14px
+- `text-base`: 16px
+- `text-lg`: 18px
+- `text-xl`: 20px
+- `text-2xl`: 24px
+- `text-3xl`: 30px
 
-#### Icon with Label
+### Icon Pattern
 
 ```xml
 <View class="horizontal">
@@ -972,905 +305,41 @@ Font Awesome 7 uses style prefixes for different icon sets:
 </View>
 ```
 
-#### Circular Icon Button
+## Accessibility
 
-```xml
-<!-- EFFICIENT: Single Label approach -->
-<Label class="rounded-full-12 bg-brand-500 fa-solid fa-plus text-center text-xl text-white" />
-
-<!-- ALTERNATIVE: View wrapper (more verbose) -->
-<View class="bg-brand-500 h-12 w-12 rounded-full">
-  <Label class="center fas fa-plus text-xl text-white" />
-</View>
-```
+- Keep primary touch targets around `44x44` or larger.
+- Pair icons with visible labels or `accessibilityLabel` values.
+- Preserve contrast between text and background.
+- Avoid using color alone for validation or state.
 
-#### Header with Icon Buttons
+Example:
 
 ```xml
-<!-- Container with auto width - items will be centered -->
-<View class="horizontal mx-3 mt-3 w-auto">
-  <!-- Icon buttons with horizontal spacing -->
-  <Label id="backButton" class="rounded-full-12 fa-solid fa-arrow-left mx-1 bg-white/20 text-center text-xl text-white" />
-  <Label id="shareButton" class="rounded-full-12 fa-solid fa-share-nodes mx-1 bg-white/20 text-center text-xl text-white" />
-  <Label id="favoriteButton" class="rounded-full-12 fa-solid fa-heart mx-1 bg-white/20 text-center text-xl text-white" />
-</View>
-
-<!-- To shift all items to one side, add ml-xx or mr-xx to the container -->
-<View class="horizontal ml-0 mr-3 mt-3 w-auto">
-  <Label class="rounded-full-12 fa-solid fa-arrow-left ... mx-1 bg-white/20" />
-  <Label class="rounded-full-12 fa-solid fa-share-nodes ... mx-1 bg-white/20" />
-</View>
+<Button class="h-12 rounded-lg bg-blue-500 text-white" title="Continue" accessibilityLabel="Continue to next step" />
 ```
 
-**Key pattern:**
-- `horizontal w-auto` - Container takes width of children, centers them in available space
-- `mx-1` on each child - Consistent horizontal spacing between icons
-- `ml-0`/`mr-3` on container - Shifts the entire group to left/right edge
-
-#### Icon Badge
-
-```xml
-<View class="relative">
-  <Label class="fas fa-bell text-xl" />
-  <View class="absolute -right-1 -top-1 h-4 w-4 rounded-full bg-red-500">
-    <Label class="center text-xs font-bold text-white" text="3" />
-  </View>
-</View>
-```
-
-#### Icon Group
-
-```xml
-<View class="horizontal">
-  <Label class="fab fa-twitter mr-4 text-2xl text-blue-400" />
-  <Label class="fab fa-facebook mr-4 text-2xl text-blue-600" />
-  <Label class="fab fa-instagram mr-4 text-2xl text-pink-500" />
-  <Label class="fab fa-github text-2xl text-gray-800" />
-</View>
-```
-
----
-
-## 6. Accessibility
-
-### Accessibility Labels
-
-All interactive elements should have accessibility labels:
-
-```xml
-<!-- Button with label -->
-<Button class="bg-brand-500 text-white" title="Save" accessibilityLabel="Save changes" />
-
-<!-- Icon button with label (simplified) -->
-<Label class="rounded-full-12 bg-brand-500 fa-solid fa-plus text-center text-white" accessibilityLabel="Add new item" />
-
-<!-- Image with label -->
-<ImageView image="/images/avatar.jpg" accessibilityLabel="User avatar" />
-```
-
-### Touch Target Sizes
-
-Ensure touch targets are at least 44dp for iOS and 48dp for Android:
-
-```xml
-<!-- Minimum touch target (44dp) -->
-<Button class="min-w-44 min-h-44 bg-brand-500" title="Button" />
-
-<!-- Icon button with proper touch target (simplified) -->
-<Label class="rounded-full-12 fa-solid fa-cog text-center text-xl" accessibilityLabel="Settings" />
-```
-
-### Color Contrast
-
-Ensure sufficient color contrast for text:
-
-```xml
-<!-- Good contrast examples -->
-<View class="bg-white">
-  <Label class="text-gray-900" text="Dark text on white background" />
-</View>
-
-<View class="bg-gray-900">
-  <Label class="text-white" text="White text on dark background" />
-</View>
-
-<View class="bg-brand-500">
-  <Label class="font-semibold text-white" text="White text on brand color" />
-</View>
-```
-
-### Screen Reader Support
-
-```xml
-<!-- Hide decorative elements -->
-<View class="absolute right-0 top-0" accessibilityHidden="true">
-  <Label class="fas fa-star text-yellow-500" />
-</View>
-
-<!-- Provide hints for complex controls -->
-<Slider accessibilityLabel="Volume" accessibilityHint="Adjust the volume level" accessibilityValue="50 percent" />
-
-<!-- State changes -->
-<Switch id="notificationSwitch" accessibilityLabel="Enable notifications" />
-```
-
-```javascript
-// Update accessibility value on state change
-$.notificationSwitch.addEventListener('change', (e) => {
-  $.notificationSwitch.accessibilityValue = e.value ? 'On' : 'Off'
-})
-```
-
----
-
-## 7. Performance Best Practices
-
-### ListView Performance
-
-**CRITICAL**: Never use `Ti.UI.SIZE` in ListView templates - causes jerky scrolling.
-
-```xml
-<!-- BAD - Causes performance issues -->
-<ItemTemplate name="bad">
-  <Label bindId="title" height="Ti.UI.SIZE" />
-</ItemTemplate>
-
-<!-- GOOD - Use fixed heights -->
-<ItemTemplate name="good">
-  <Label bindId="title" height="40" />
-</ItemTemplate>
-```
-
-### View Recycling
-
-ListViews recycle views. Always update via data, not direct access:
-
-```javascript
-// BAD - Direct modification
-function handleClick(e) {
-  e.source.text = "Updated"
-}
-
-// GOOD - Update via data
-function handleClick(e) {
-  const item = e.section.getItemAt(e.itemIndex)
-  item.title.text = "Updated"
-  e.section.updateItemAt(e.itemIndex, item)
-}
-```
-
-### Batch Updates
-
-Use `applyProperties` to reduce bridge crossings:
-
-```javascript
-// BAD - Multiple property updates
-view.backgroundColor = 'red'
-view.width = 100
-view.height = 50
-
-// GOOD - Single batch update
-view.applyProperties({
-  backgroundColor: 'red',
-  width: 100,
-  height: 50
-})
-```
-
-### Minimize Template Count
-
-Fewer templates = better native cell reuse:
-
-```xml
-<!-- GOOD - One flexible template -->
-<ItemTemplate name="flexible">
-  <ImageView bindId="icon" />
-  <Label bindId="title" />
-  <Label bindId="subtitle" />  <!-- Hidden if not needed -->
-</ItemTemplate>
-
-<!-- BAD - Multiple similar templates -->
-<ItemTemplate name="withIcon">...</ItemTemplate>
-<ItemTemplate name="withoutIcon">...</ItemTemplate>
-<ItemTemplate name="withSubtitle">...</ItemTemplate>
-```
-
----
-
-## 8. Platform-Specific Patterns
-
-### iOS Patterns
-
-#### Navigation Window
-
-```xml
-<NavigationWindow id="navWindow">
-  <Window class="bg-white">
-    <View>
-      <Label class="text-lg font-semibold" text="Main Screen" />
-      <Button id="pushBtn" class="mt-4" title="Push Next Screen" />
-    </View>
-  </Window>
-</NavigationWindow>
-```
-
-```javascript
-// Push new window
-$.pushBtn.addEventListener('click', () => {
-  const nextWin = Ti.UI.createWindow({
-    title: 'Next Screen',
-    backgroundColor: 'white'
-  })
-  $.navWindow.openWindow(nextWin, { animated: true })
-})
-```
-
-#### Tab Bar
-
-```xml
-<TabGroup id="tabGroup">
-  <Tab id="homeTab" icon="fa-home.png" title="Home">
-    <Window class="bg-white">
-      <ScrollView class="h-full w-full">
-        <Label class="text-lg font-semibold" text="Home Screen" />
-      </ScrollView>
-    </Window>
-  </Tab>
-
-  <Tab id="searchTab" icon="fa-search.png" title="Search">
-    <Window class="bg-white">
-      <ScrollView class="h-full w-full">
-        <Label class="text-lg font-semibold" text="Search Screen" />
-      </ScrollView>
-    </Window>
-  </Tab>
-
-  <Tab id="profileTab" icon="fa-user.png" title="Profile">
-    <Window class="bg-white">
-      <ScrollView class="h-full w-full">
-        <Label class="text-lg font-semibold" text="Profile Screen" />
-      </ScrollView>
-    </Window>
-  </Tab>
-</TabGroup>
-```
-
-#### iOS Swipe Actions
-
-```javascript
-const section = $.myList.sections[0]
-
-// Define edit actions
-const deleteAction = Ti.UI.iOS.createListViewDeleteOptions({
-  title: 'Delete'
-})
-
-const moreAction = Ti.UI.iOS.createListViewEditAction({
-  title: 'More',
-  backgroundColor: 'blue',
-  style: Ti.UI.iOS.LIST_VIEW_EDIT_ACTION_STYLE_NORMAL
-})
-
-// Enable editing
-section.editActions = [deleteAction, moreAction]
-section.canEdit = true
-
-// Handle actions
-$.myList.addEventListener('editaction', (e) => {
-  if (e.action === deleteAction) {
-    section.deleteItemsAt(e.itemIndex, 1)
-  } else if (e.action === moreAction) {
-    // Handle more action
-  }
-})
-```
-
-### Android Patterns
-
-#### Action Bar
-
-```javascript
-const activity = Ti.Android.currentActivity
-
-activity.onCreateOptionsMenu = (e) => {
-  const menu = e.menu
-
-  const searchItem = menu.add({
-    title: 'Search',
-    icon: Ti.Android.R.drawable.ic_menu_search,
-    showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
-  })
-
-  const settingsItem = menu.add({
-    title: 'Settings',
-    icon: Ti.Android.R.drawable.ic_menu_preferences,
-    showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
-  })
-}
-
-activity.onOptionsItemSelected = (e) => {
-  switch (e.itemId) {
-    case 0:
-      // Handle search
-      return true
-    case 1:
-      // Handle settings
-      return true
-  }
-  return false
-}
-```
-
-#### Back Button Handling
-
-```javascript
-$.window.addEventListener('androidback', (e) => {
-  e.cancelBubble = true
-
-  if (canGoBack()) {
-    closeCurrentWindow()
-  } else {
-    showExitConfirmation()
-  }
-})
-```
-
-#### Material Design Theme
-
-```xml
-<!-- tiapp.xml -->
-<android xmlns:android="http://schemas.android.com/apk/res/android">
-  <manifest>
-    <application android:theme="@style/Theme.Titanium.Material3.DayNight"/>
-  </manifest>
-</android>
-```
-
-#### Notifications
-
-```javascript
-// Create notification channel (Android 8.0+)
-const channel = Ti.Android.createNotificationChannel({
-  name: 'My Channel',
-  id: 'my_channel_id',
-  importance: Ti.Android.NOTIFICATION_IMPORTANCE_HIGH
-})
-
-Ti.Android.NotificationManager.createNotificationChannel(channel)
-
-// Create and show notification
-const notification = Ti.Android.createNotification({
-  number: 1,
-  channelId: 'my_channel_id',
-  contentTitle: 'New Message',
-  contentText: 'You have a new message'
-})
-
-Ti.Android.NotificationManager.notify(1, notification)
-```
-
----
-
-## 8. Complete UI Patterns with Controllers
-
-These patterns demonstrate real-world UI implementations with both XML views and their corresponding controller JavaScript code.
-
-### Loading State Pattern (Skeleton)
-
-Show skeleton screens while loading data, then transition to content or error states.
-
-```xml
-<View id="loadingState" class="wh-screen vertical">
-  <View class="mx-4 mt-4 h-20 w-screen animate-pulse rounded-lg bg-gray-200" />
-  <View class="mx-4 mt-4 h-4 w-8/12 animate-pulse rounded bg-gray-200" />
-  <View class="mx-4 mt-2 h-4 w-6/12 animate-pulse rounded bg-gray-200" />
-</View>
-
-<View id="contentState" class="wh-screen hidden">
-  <!-- Actual content goes here -->
-  <Label class="mx-4 my-4 text-lg font-semibold text-gray-800" text="Content loaded!" />
-</View>
-
-<View id="errorState" class="wh-screen vertical hidden">
-  <Label class="fa-solid fa-exclamation-circle mt-20 text-6xl text-gray-400" />
-  <Label class="mt-4 text-lg text-gray-500" text="L('error_loading')" />
-  <Button class="bg-primary mt-4 h-10 rounded-lg px-6 text-white" title="L('retry')" onClick="loadData" />
-</View>
-```
-
-```javascript
-// Controller
-function setState(state) {
-  const states = ['loadingState', 'contentState', 'errorState']
-  states.forEach(s => { $[s].visible = s === state })
-}
-
-async function loadData() {
-  setState('loadingState')
-  try {
-    const data = await api.fetchData()
-    renderContent(data)
-    setState('contentState')
-  } catch (error) {
-    setState('errorState')
-  }
-}
-
-// Initial load
-loadData()
-```
-
-### Pull-to-Refresh Pattern
-
-Enable users to refresh content by pulling down on a ListView.
-
-```xml
-<ListView id="listView" class="wh-screen">
-  <RefreshControl id="refreshControl" onRefresh="onRefresh" />
-  <ListSection id="section" />
-</ListView>
-```
-
-```javascript
-// Controller
-let isRefreshing = false
-
-async function onRefresh() {
-  if (isRefreshing) return
-  isRefreshing = true
-  try {
-    const data = await api.fetchLatest()
-    renderItems(data)
-  } catch (error) {
-    showError(error.message)
-  } finally {
-    $.refreshControl.endRefreshing()
-    isRefreshing = false
-  }
-}
-
-function renderItems(data) {
-  const items = data.map(item => ({
-    properties: { itemId: item.id },
-    title: { text: item.name }
-  }))
-  $.section.setItems(items)
-}
-```
-
-### SearchBar with ListView
-
-Implement debounced search with real-time filtering.
-
-```xml
-<Window class="bg-gray-50">
-  <SearchBar id="searchBar" class="w-screen" hintText="L('search_contacts')" showCancel="true" onChange="onSearchChange" onCancel="onSearchCancel" />
-  <ListView id="listView" class="wh-screen" top="50">
-    <Templates>
-      <ItemTemplate name="contact" height="64">
-        <View class="horizontal h-16 w-screen bg-white">
-          <Label bindId="avatar" class="fa-solid fa-user-circle ml-4 text-3xl text-gray-400" />
-          <View class="vertical ml-3">
-            <Label bindId="name" class="text-base font-semibold" />
-            <Label bindId="phone" class="text-sm text-gray-500" />
-          </View>
-        </View>
-      </ItemTemplate>
-    </Templates>
-    <ListSection id="section" />
-  </ListView>
-</Window>
-```
-
-```javascript
-// Controller
-let allContacts = []
-let searchTimeout = null
-
-function onSearchChange(e) {
-  clearTimeout(searchTimeout)
-  searchTimeout = setTimeout(() => {
-    filterContacts(e.value)
-  }, 300)
-}
-
-function onSearchCancel() {
-  $.searchBar.value = ''
-  filterContacts('')
-}
-
-function filterContacts(query) {
-  const q = query.toLowerCase().trim()
-  const filtered = q
-    ? allContacts.filter(c => c.name.toLowerCase().includes(q) || c.phone.includes(q))
-    : allContacts
-  renderContacts(filtered)
-}
-
-function renderContacts(contacts) {
-  $.section.items = contacts.map(c => ({
-    template: 'contact',
-    properties: { itemId: c.id },
-    name: { text: c.name },
-    phone: { text: c.phone }
-  }))
-}
-
-function cleanup() {
-  clearTimeout(searchTimeout)
-  $.destroy()
-}
-
-$.cleanup = cleanup
-
-// Load initial data
-async function loadContacts() {
-  try {
-    allContacts = await api.fetchContacts()
-    renderContacts(allContacts)
-  } catch (error) {
-    Ti.UI.createAlertDialog({
-      title: L('error'),
-      message: error.message
-    }).show()
-  }
-}
-
-loadContacts()
-```
-
-### Complete CRUD with ListView
-
-Full product list with create, read, update, and delete operations.
-
-```xml
-<Window class="bg-gray-50">
-  <ListView id="listView" class="wh-screen">
-    <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>
-        </View>
-      </ItemTemplate>
-    </Templates>
-    <ListSection id="section" dataCollection="products">
-      <ListItem template="product" image:image="{imageUrl}" name:text="{name}" price:text="${price}" stock:text="{stock} in stock" />
-    </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>
-</Window>
-```
-
-```javascript
-// Controller
-const productService = require('/services/productService')
-
-// Handle item click
-function onItemClick(e) {
-  const item = e.section.getItemAt(e.itemIndex)
-  const productId = item.properties.itemId
-
-  const detailWin = Alloy.createController('productDetail', { id: productId }).getView()
-  detailWin.open()
-}
-
-// Refresh data
-async function onRefresh() {
-  try {
-    const products = await productService.fetchAll()
-    Alloy.Collections.products.reset(products)
-  } catch (error) {
-    showError(error.message)
-  } finally {
-    $.refresh.endRefreshing()
-  }
-}
-
-// Add new product
-function onAddProduct() {
-  const formWin = Alloy.createController('productForm', { mode: 'create' }).getView()
-  formWin.open({ modal: true })
-}
-
-// Show error message
-function showError(message) {
-  Ti.UI.createAlertDialog({
-    title: L('error'),
-    message: message
-  }).show()
-}
-
-// Event listeners
-$.listView.addEventListener('itemclick', onItemClick)
-
-// Cleanup
-function cleanup() {
-  $.listView.removeEventListener('itemclick', onItemClick)
-  $.destroy()
-}
-
-$.cleanup = cleanup
-
-// Load initial data
-onRefresh()
-```
-
-### Form with Real-Time Validation
-
-Registration form with field-level validation and error feedback.
-
-```xml
-<Window class="bg-gray-50">
-  <ScrollView class="wh-screen">
-    <View class="vertical">
-      <Label class="mx-4 mb-6 mt-6 text-2xl font-bold text-gray-800" text="L('create_account')" />
-
-      <!-- Name Field -->
-      <View class="mb-4">
-        <Label id="nameLabel" class="mx-4 mb-2 text-sm font-medium text-gray-700" text="L('full_name')" />
-        <TextField id="nameField" class="border-(1) return-key-type-next mx-4 mt-1 h-12 w-screen rounded-lg border-gray-300 px-3" hintText="L('enter_name')" onChange="validateName" />
-        <Label id="nameError" class="mx-4 mt-1 hidden text-xs text-red-500" />
-      </View>
-
-      <!-- Email Field -->
-      <View class="mb-4">
-        <Label id="emailLabel" class="mx-4 mb-2 text-sm font-medium text-gray-700" text="L('email')" />
-        <TextField id="emailField" class="border-(1) return-key-type-next mx-4 mt-1 h-12 w-screen rounded-lg border-gray-300 px-3" keyboardType="Ti.UI.KEYBOARD_TYPE_EMAIL" autocapitalization="Ti.UI.TEXT_AUTOCAPITALIZATION_NONE" hintText="L('enter_email')" onChange="validateEmail" />
-        <Label id="emailError" class="mx-4 mt-1 hidden text-xs text-red-500" />
-      </View>
-
-      <!-- Password Field -->
-      <View class="mb-4">
-        <Label id="passwordLabel" class="mx-4 mb-2 text-sm font-medium text-gray-700" text="L('password')" />
-        <TextField id="passwordField" class="border-(1) return-key-type-done mx-4 mt-1 h-12 w-screen rounded-lg border-gray-300 px-3" passwordMask="true" hintText="L('enter_password')" onChange="validatePassword" />
-        <Label id="passwordError" class="mx-4 mt-1 hidden text-xs text-red-500" />
-      </View>
-
-      <!-- Terms Switch -->
-      <View class="horizontal mx-4 mb-6">
-        <Switch id="termsSwitch" onChange="validateTerms" />
-        <Label class="ml-3 text-sm text-gray-700" text="L('agree_to_terms')" />
-      </View>
-
-      <!-- Submit Button -->
-      <Button id="submitBtn" class="bg-primary mx-4 h-12 rounded-lg text-base font-semibold text-white" title="L('create_account')" onClick="onSubmit" enabled="false" />
-    </View>
-  </ScrollView>
-</Window>
-```
-
-```javascript
-// Controller
-const validationState = {
-  name: false,
-  email: false,
-  password: false,
-  terms: false
-}
-
-function validateName(e) {
-  const value = e.value.trim()
-  const isValid = value.length >= 2
-
-  if (!isValid && value.length > 0) {
-    $.nameError.text = L('name_too_short')
-    $.nameError.visible = true
-    $.nameField.borderColor = '#EF4444'
-    $.nameLabel.color = '#EF4444'
-  } else {
-    $.nameError.visible = false
-    $.nameField.borderColor = isValid ? '#10B981' : '#D1D5DB'
-    $.nameLabel.color = isValid ? '#10B981' : '#374151'
-  }
-
-  validationState.name = isValid
-  updateSubmitButton()
-}
-
-function validateEmail(e) {
-  const value = e.value.trim()
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  const isValid = emailRegex.test(value)
-
-  if (!isValid && value.length > 0) {
-    $.emailError.text = L('invalid_email')
-    $.emailError.visible = true
-    $.emailField.borderColor = '#EF4444'
-    $.emailLabel.color = '#EF4444'
-  } else {
-    $.emailError.visible = false
-    $.emailField.borderColor = isValid ? '#10B981' : '#D1D5DB'
-    $.emailLabel.color = isValid ? '#10B981' : '#374151'
-  }
-
-  validationState.email = isValid
-  updateSubmitButton()
-}
-
-function validatePassword(e) {
-  const value = e.value
-  const isValid = value.length >= 8
-
-  if (!isValid && value.length > 0) {
-    $.passwordError.text = L('password_too_short')
-    $.passwordError.visible = true
-    $.passwordField.borderColor = '#EF4444'
-    $.passwordLabel.color = '#EF4444'
-  } else {
-    $.passwordError.visible = false
-    $.passwordField.borderColor = isValid ? '#10B981' : '#D1D5DB'
-    $.passwordLabel.color = isValid ? '#10B981' : '#374151'
-  }
-
-  validationState.password = isValid
-  updateSubmitButton()
-}
-
-function validateTerms(e) {
-  validationState.terms = e.value
-  updateSubmitButton()
-}
-
-function updateSubmitButton() {
-  const allValid = Object.values(validationState).every(v => v === true)
-  $.submitBtn.enabled = allValid
-  $.submitBtn.opacity = allValid ? 1.0 : 0.5
-}
-
-async function onSubmit() {
-  if (!$.submitBtn.enabled) return
-
-  $.submitBtn.enabled = false
-  $.submitBtn.title = L('creating_account')
-
-  try {
-    const userData = {
-      name: $.nameField.value.trim(),
-      email: $.emailField.value.trim(),
-      password: $.passwordField.value
-    }
-
-    await api.createAccount(userData)
-
-    Ti.UI.createAlertDialog({
-      title: L('success'),
-      message: L('account_created')
-    }).show()
-
-    $.getView().close()
-  } catch (error) {
-    Ti.UI.createAlertDialog({
-      title: L('error'),
-      message: error.message
-    }).show()
-    $.submitBtn.enabled = true
-    $.submitBtn.title = L('create_account')
-  }
-}
-```
-
-### TabGroup Pattern
-
-Standard tab-based navigation with separate screens.
-
-```xml
-<!-- index.xml -->
-<TabGroup id="tabGroup" class="tabs-bg-white active-tint-blue-500">
-  <Tab title="L('home')" icon="/images/icons/home.png">
-    <Require src="tabs/home" />
-  </Tab>
-
-  <Tab title="L('search')" icon="/images/icons/search.png">
-    <Require src="tabs/search" />
-  </Tab>
-
-  <Tab title="L('favorites')" icon="/images/icons/heart.png">
-    <Require src="tabs/favorites" />
-  </Tab>
-
-  <Tab title="L('profile')" icon="/images/icons/user.png">
-    <Require src="tabs/profile" />
-  </Tab>
-</TabGroup>
-```
-
-```javascript
-// index.js
-$.tabGroup.open()
-
-function cleanup() {
-  $.destroy()
-}
-
-$.cleanup = cleanup
-```
-
-```xml
-<!-- tabs/home.xml -->
-<Window class="bg-gray-50">
-  <ScrollView class="wh-screen">
-    <View class="vertical">
-      <Label class="mx-4 my-4 text-2xl font-bold text-gray-800" text="L('home')" />
-      <!-- Home content -->
-    </View>
-  </ScrollView>
-</Window>
-```
-
-```xml
-<!-- tabs/search.xml -->
-<Window class="bg-gray-50">
-  <SearchBar id="searchBar" class="w-screen" hintText="L('search')" />
-  <ListView id="results" class="wh-screen" top="50">
-    <ListSection id="section" />
-  </ListView>
-</Window>
-```
-
----
-
-## Quick Reference Card
-
-### Common PurgeTSS Classes
-
-| Category        | Classes                                      | Examples                        |
-| --------------- | -------------------------------------------- | ------------------------------- |
-| **Spacing**     | `p-{0-8}`, `m-{0-8}`, `px-{0-8}`, `py-{0-8}` | `p-4`, `mx-2`, `py-6`           |
-| **Colors**      | `bg-{color}-{shade}`, `text-{color}-{shade}` | `bg-brand-500`, `text-gray-800` |
-| **Typography**  | `text-{xs,sm,base,lg,xl,2xl,3xl,4xl}`        | `text-xl`, `text-2xl`           |
-| **Font Weight** | `font-{light,normal,medium,semibold,bold}`   | `font-semibold`, `font-bold`    |
-| **Borders**     | `border`, `border-{color}`, `rounded-{size}` | `border-gray-300`, `rounded-lg` |
-| **Shadows**     | `shadow-{sm,md,lg,xl,2xl}`                   | `shadow-md`, `shadow-lg`        |
-| **Width**       | `w-{size}`, `w-{percentage}`                 | `w-full`, `w-(50%)`             |
-| **Height**      | `h-{size}`, `h-screen`                       | `h-10`, `h-screen`              |
-| **Display**     | `hidden`, `visible`                          | `hidden`, `visible`             |
-| **Icons**       | `fas`, `far`, `fab fa-{icon}`                | `fas fa-home`, `fab fa-twitter` |
-
-### Platform Modifiers
-
-```xml
-<!-- iOS-only -->
-<View class="ios:p-4 ios:bg-white">...</View>
-
-<!-- Android-only -->
-<View class="android:p-4 android:bg-gray-100">...</View>
-
-<!-- Platform-specific values -->
-<View class="ios:bg-white android:bg-gray-100 p-4">...</View>
-```
-
----
-
-## Best Practices Summary
+## Performance Notes
 
-1. **Use `dp` units** for cross-platform consistency
-2. **Prefer ListView over TableView** for large datasets
-3. **Avoid `Ti.UI.SIZE` in ListViews** - use fixed heights
-4. **Provide accessibility labels** for all interactive elements
-5. **Ensure minimum touch target size** of 44dp (iOS) / 48dp (Android)
-6. **Use semantic color names** for better theming support
-7. **Test on both platforms** to ensure consistent experience
-8. **Follow platform conventions** - iOS NavigationWindow, Android Action Bar
-9. **Use PurgeTSS utility classes** for consistent styling
-10. **Batch property updates** using `applyProperties()` for better performance
-11. **Padding classes do NOT work on View** - use margin on children instead
-12. **Always specify Font Awesome icons** - `fas fa-home`, not just `fas`
+- Prefer `ListView` templates for long lists.
+- Use fixed heights for high-density scrolling content when possible.
+- Avoid manual inline styling when a class can express the same result.
+- Keep overlays and large composited layouts simple on lower-end devices.
 
----
+## Quick Reference
 
-## Additional Resources
+| Need | Preferred Pattern |
+| --- | --- |
+| Full-width container | `w-screen` |
+| Stack items vertically | `vertical` |
+| 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 |
+| Tablet adaptation | `tablet:*`, `handheld:*` |
+| Overlay background | `bg-(#88000000)` |
 
-- [PurgeTSS Documentation](https://purgetss.com)
-- [Titanium SDK Documentation](https://docs.appcelerator.com)
-- [iOS Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
-- [Material Design Guidelines](https://material.io/design)
-- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)
+> **⚠️ Common Pitfalls**
+> - Do not use `md:*`, `lg:*`, `focus:*`, or other web-responsive/state prefixes.
+> - Do not assume `w-full` behaves like `Ti.UI.FILL`.
+> - Do not put `p-*` on container views.
+> - Do not rely on Flexbox classes such as `flex-row`, `justify-between`, or `items-center`.