@maccesar/titools 2.2.4 → 2.2.9

package/skills/purgetss/references/cli-commands.md

@@ -1,9 +1,9 @@
 # PurgeTSS CLI Commands Guide
 
-PurgeTSS provides a comprehensive suite of CLI commands for project setup, asset management, and development workflow automation.
+PurgeTSS provides a full set of CLI commands for project setup, asset management, and development workflow automation.
 
 :::info What's New in v7.2.x
-**FontAwesome 7 & Major Optimization**: PurgeTSS v7.2 introduces full support for **FontAwesome 7**, including the new CSS custom properties format. This version also features a significant reduction in installation size and a complete internal restructuring for better performance and maintainability.
+**FontAwesome 7 & Performance Updates**: PurgeTSS v7.2 adds full support for **FontAwesome 7**, including the new CSS custom properties format. It also reduces installation size and refactors internals for performance and maintainability.
 
 **Key Changes:**
 - **Node.js 20+** required (due to "inquirer" v13 upgrade)
@@ -149,7 +149,7 @@ purgetss w -o
 
 **Default behavior:** Activates auto-purge (runs on every compile)
 
-This functionality is particularly valuable when used with LiveView, as it automatically purges your project whenever you make changes, providing immediate feedback and significantly speeding up your prototyping process.
+This is especially useful with LiveView: it auto-purges on changes, gives fast feedback, and speeds up prototyping.
 
 **What it installs in `alloy.jmk`:**
 ```javascript

package/skills/purgetss/references/customization-deep-dive.md

@@ -62,7 +62,7 @@ purge: {
 **`mode: 'all'` (default)**
 - Scans EVERYWHERE in XML files (comments, attributes, classes, IDs, Ti Elements)
 - **REQUIRED** if you want PurgeTSS to parse any Ti Elements styled in `config.cjs`
-- Most comprehensive but slightly slower
+- Most complete but a bit slower
 
 **`mode: 'class'`**
 - Searches only in `class` and ID attributes in XML files

package/skills/purgetss/references/dynamic-component-creation.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-When creating components dynamically in Controllers (not declaratively in XML), PurgeTSS provides two powerful methods to apply utility classes:
+When creating components dynamically in Controllers (not declaratively in XML), PurgeTSS provides two methods to apply utility classes:
 
 1. **`$.UI.create()`** - Create components with PurgeTSS classes (Recommended)
 2. **`Alloy.createStyle()` + `applyProperties()`** - Apply PurgeTSS styles to existing components

package/skills/purgetss/references/icon-fonts.md

@@ -84,6 +84,10 @@ Font Awesome 7 uses different style prefixes:
 <Label class="fab fa-twitter fa-facebook fa-github" />
 ```
 
+:::tip
+PurgeTSS handles Font Awesome 7 CSS custom properties automatically (the `--fa:` format), so you do not need to edit icon CSS by hand.
+:::
+
 ### Material Icons
 
 ```xml

package/skills/purgetss/references/installation-setup.md

@@ -8,6 +8,13 @@ PurgeTSS must be installed globally and initialized within each Titanium Alloy p
 PurgeTSS has been thoroughly tested and proven to be compatible with Node 20.0.0 or higher.
 :::
 
+## Upgrade Notes (v7.3.x)
+
+- `tailwind.tss` was renamed to `utilities.tss`. Update any scripts or paths that reference the old filename.
+- PurgeTSS validates XML syntax before processing and reports line-level errors (for example, missing `<`).
+- `deviceInfo()` now works in both Alloy and Classic projects (no `Alloy.isTablet`/`Alloy.isHandheld` dependency).
+- If you hit issues after upgrading, try a clean reinstall: `npm uninstall -g purgetss && npm install -g purgetss`.
+
 ## Global Installation
 
 Install PurgeTSS globally on your machine using NPM:
@@ -69,7 +76,7 @@ PurgeTSS creates a `purgetss` folder at the root of your project:
 **File descriptions:**
 
 - **`config.cjs`**: Where you customize colors, spacing, fonts, border radius, and add custom rules for Ti Elements
-- **`styles/utilities.tss`**: All Tailwind-like utility classes + any custom classes from `config.cjs`
+- **`styles/utilities.tss`**: All utility classes + any custom classes from `config.cjs`
 - **`styles/definitions.css`**: Special CSS file incorporating ALL classes from `utilities.tss`, `_app.tss`, remaining `.tss` files, and `fonts.tss`. Used by VS Code extension for IntelliSense
 - **`fonts/`**: Directory for custom fonts (Icon, Serif, Sans-Serif, Cursive, Fantasy, Monospace). Use `purgetss build-fonts` after adding fonts
 

package/skills/purgetss/references/migration-guide.md

@@ -14,6 +14,10 @@ Before migrating, evaluate styling in the current codebase:
 | Manual 2D Matrix animations                  | PurgeTSS Animation component              |
 | Platform conditionals in controllers         | PurgeTSS platform modifiers (`ios:mt-10`) |
 
+:::info v7.3 Upgrade Note
+If your project or scripts reference `tailwind.tss`, update them to `utilities.tss` (the file was renamed in v7.3).
+:::
+
 ## Step 1: Initialize PurgeTSS
 
 ```bash

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

@@ -1,45 +1,57 @@
-# TiKit UI Components
+# Welcome to TiKit UI Components
 
-TiKit is a collection of ready-to-use UI components built with Alloy and PurgeTSS for creating polished mobile interfaces quickly.
+TiKit is a set of UI components built with Alloy and PurgeTSS. It gives you reusable blocks for common UI patterns and keeps styling consistent across screens.
 
-## Installation
+## Why TiKit
+
+- Ready-to-use components: Alerts, Avatars, Buttons, Cards, Tabs with practical defaults.
+- PurgeTSS-first styling: Use utility classes instead of large TSS files.
+- Dynamic updates: Change text, images, and icons without recreating components.
+- Icon support: Works with Font Awesome, Material Icons, and other icon fonts.
+- Consistent UI: Components are designed to work together.
+- Easy to customize: Adjust colors and styles to match your brand.
+- Lightweight: Built to stay fast and avoid extra overhead.
+- Sensible defaults: You only pass what you need.
+
+## Getting Started
+
+Install the TiKit CLI and make sure PurgeTSS is installed globally:
 
 ```bash
-# Install TiKit CLI globally
 npm install -g tikit
-
-# Make sure PurgeTSS is also installed
 npm install -g purgetss
 ```
 
-### Setting Up a Project
-
-1. Create a PurgeTSS project (if not already):
-   ```bash
-   purgetss create myApp
-   ```
+## Setting Up Your Project
 
-2. Install TiKit components:
-   ```bash
-   cd myApp
-   tikit install
-   # Choose: all components, alerts, avatars, buttons, cards
-   ```
+1. Create a PurgeTSS project and configure `app.idprefix` and `app.theme` in `config.json` as required by PurgeTSS.
+1. Run `tikit install` inside your project:
 
-## Component Defaults
+```bash
+purgetss create myApp
+cd myApp
+
+tikit install
+# ? Choose a component to install ›
+# ❯   all components
+#     alerts
+#     avatars
+#     buttons
+#     cards
+```
 
-TiKit components work out of the box with sensible defaults — you only need to provide what's unique:
+## Component Default Values
 
-| Component   | Property  | Default Value                                                                  | Description                  |
-| ----------- | --------- | ------------------------------------------------------------------------------ | ---------------------------- |
-| **Alerts**  | `color`   | `"dark"`                                                                       | The alert's color scheme     |
-|             | `variant` | `"pop"` (with text) or `"solid"` (without text)                                | The alert's visual style     |
-| **Avatars** | `size`    | `"base"`                                                                       | The avatar's size            |
-|             | `variant` | `"chip"` (with name) or `"square"` (without name)                              | The avatar's shape and style |
-| **Buttons** | `size`    | `"base"`                                                                       | The button's size            |
-|             | `variant` | `"icon-left"` (with icon) or `"filled"` (without icon)                         | The button's visual style    |
-| **Cards**   | `color`   | `"dark"`                                                                       | The card's color scheme      |
-|             | `variant` | `"showcase"` (with image) or `"content"` (with subtitle) or `"code"` (default) | The card's layout style      |
+| Component | Property  | Default Value                                                                  | Description                  |
+| --------- | --------- | ------------------------------------------------------------------------------ | ---------------------------- |
+| Alerts    | `color`   | `"dark"`                                                                       | The alert's color scheme     |
+| Alerts    | `variant` | `"pop"` (with text) or `"solid"` (without text)                                | The alert's visual style     |
+| Avatars   | `size`    | `"base"`                                                                       | The avatar's size            |
+| Avatars   | `variant` | `"chip"` (with name) or `"square"` (without name)                              | The avatar's shape and style |
+| Buttons   | `size`    | `"base"`                                                                       | The button's size            |
+| Buttons   | `variant` | `"icon-left"` (with icon) or `"filled"` (without icon)                         | The button's visual style    |
+| Cards     | `color`   | `"dark"`                                                                       | The card's color scheme      |
+| Cards     | `variant` | `"showcase"` (with image) or `"content"` (with subtitle) or `"code"` (default) | The card's layout style      |
 
 ```xml
 <!-- Uses variant="pop", color="dark" by default -->
@@ -55,216 +67,229 @@ TiKit components work out of the box with sensible defaults — you only need to
 <Card module="tikit.ui" title="Simple Card" text="Using defaults" />
 
 <!-- Uses variant="content" when subtitle is provided -->
-<Card module="tikit.ui" title="Card" subtitle="Important info" text="Details" />
+<Card module="tikit.ui" title="Card with Subtitle" subtitle="Important info" text="Some details" />
 
 <!-- Uses variant="showcase" when image is provided -->
-<Card module="tikit.ui" title="Image Card" text="Description" image="path/to/image.jpg" />
+<Card module="tikit.ui" title="Image Card" text="With an image" image="path/to/image.jpg" />
 ```
 
----
-
 ## Alerts
 
-> **Common Properties:** `variant`, `color`, `classes`, `title`, `text`
+Common properties: `variant`, `color`, `classes`, `title`, `text`
 
-Short, important messages without interrupting the user.
+Alerts are for short, important messages that do not block the user.
 
-### Variants
+Variants:
 
-- `callout` — Simple message with title and text
-- `pop` — Includes an icon alongside the title and text
-- `solid` — Full-width banner style, usually with just a title and icon
+- `callout`: Simple message with title and text.
+- `pop`: Includes an icon alongside the title and text.
+- `solid`: Full-width banner style, usually with just a title and icon.
 
-### Colors
+Colors:
 
-`success`, `danger`, `warning`, `info`, `dark`, `light`
+- `success`, `danger`, `warning`, `info`, `dark`, `light`.
+- Define `primary` and `secondary` with `purgetss shades`.
 
-You can also define `primary` and `secondary` custom colors:
+Extra controls:
 
-```bash
-purgetss shades '#yourHexCode1' primary
-purgetss shades '#yourHexCode2' secondary
-```
+- `delay` (ms): Wait before showing the alert.
+- `duration` (ms): Control animation speed.
+- `dismissible` (boolean): Tap to close.
 
-### Extra Controls
-
-- `delay` (milliseconds) — Wait before showing the alert
-- `duration` (milliseconds) — Control animation speed
-- `dismissible` (boolean) — Let users tap to close
+```xml
+<Alert module="tikit.ui" variant="pop" color="info" delay="500" dismissible="true"
+       title="Just FYI" text="You can tap this alert to close it." />
+```
 
-### Examples
+### `callout`
 
 ```xml
-<!-- Callout -->
-<Alert module="tikit.ui" variant="callout" color="success" title="Success!" text="Your changes have been saved." />
+<Alert module="tikit.ui" variant="callout" color="success"
+       title="Success!" text="Your changes have been saved." />
+```
 
-<!-- Pop with custom icon -->
-<Alert module="tikit.ui" variant="pop" color="primary" title="Action Required" text="Please review." icon="mi mi-pending_actions text-3xl" />
+### `pop`
 
-<!-- Solid banner -->
-<Alert module="tikit.ui" variant="solid" color="warning" title="Maintenance Soon" icon="mi mi-warning text-2xl" />
+Use the `icon` property with PurgeTSS classes for size and color.
 
-<!-- Dismissible -->
-<Alert module="tikit.ui" variant="pop" color="info" delay="500" dismissible="true" title="FYI" text="Tap to close." />
+```xml
+<Alert module="tikit.ui" variant="pop" color="primary"
+       title="Action Required" text="Please review the details."
+       icon="mi mi-pending_actions text-3xl" />
 ```
 
----
+### `solid`
 
-## Avatars
+```xml
+<Alert module="tikit.ui" variant="solid" color="warning"
+       title="Maintenance Soon" icon="mi mi-warning text-2xl" />
+```
 
-> **Common Properties:** `variant`, `size`, `classes`, `image`
+## Avatars
 
-Visual representations of users or objects.
+Common properties: `variant`, `size`, `classes`, `image`
 
-### Variants
+Variants:
 
-- `chip` — Image with a name label next to it
-- `circular` — Standard round avatar
-- `landscape` — Rectangular, wider than tall
-- `portrait` — Rectangular, taller than wide
-- `square` — Simple square avatar
-- `stacked` — Designed to overlap in a horizontal group
+- `chip`: Image with a name label next to it.
+- `circular`: Standard round avatar.
+- `landscape`: Rectangular, wider than tall.
+- `portrait`: Rectangular, taller than wide.
+- `square`: Simple square avatar.
+- `stacked`: Designed to overlap slightly in a horizontal group.
 
-### Sizes
+Sizes: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`.
 
-`xs`, `sm`, `base`, `lg`, `xl`, `2xl`
+```xml
+<Avatar module="tikit.ui" variant="circular" size="lg" image="path/to/your/image.jpg" />
+```
 
-### Examples
+### `chip`
 
 ```xml
-<!-- Chip with custom colors -->
 <Avatar module="tikit.ui" variant="chip" size="base" name="Jane Doe"
         image="https://randomuser.me/api/portraits/women/86.jpg"
         classes="bg-blue-100 text-blue-800" />
+```
+
+### `circular` and `square`
+
+Set `border="true"` for a default white border. Override border color with `classes`.
 
-<!-- Circular with border -->
+```xml
 <Avatar module="tikit.ui" variant="circular" size="base" border="true"
         image="https://randomuser.me/api/portraits/men/86.jpg"
         classes="border-gray-300" />
+```
+
+### `portrait` and `landscape`
+
+Default gray border (`border-gray-500`). Override with `classes`.
 
-<!-- Portrait with custom border color -->
+```xml
 <Avatar module="tikit.ui" variant="portrait" size="base"
         image="https://randomuser.me/api/portraits/men/87.jpg"
         classes="border-green-500" />
-
-<!-- Stacked avatars (use last="true" on the final one) -->
-<View class="horizontal">
-  <Avatar module="tikit.ui" variant="stacked" size="base" image="img1.jpg" />
-  <Avatar module="tikit.ui" variant="stacked" size="base" image="img2.jpg" />
-  <Avatar module="tikit.ui" variant="stacked" size="base" last="true" image="img3.jpg" />
-</View>
 ```
 
-### Variant-Specific Properties
+### `stacked`
 
-| Variant     | Properties                           | Notes                                       |
-| ----------- | ------------------------------------ | ------------------------------------------- |
-| `chip`      | `name`, `image`                      | Default gray bg/text, override with classes |
-| `circular`  | `name` (optional), `image`, `border` | `border="true"` adds white border           |
-| `square`    | `name` (optional), `image`, `border` | Same as circular but square                 |
-| `portrait`  | `name` (optional), `image`           | Default gray border, override with classes  |
-| `landscape` | `name` (optional), `image`           | Default gray border, override with classes  |
-| `stacked`   | `image`, `last`                      | Use inside `horizontal` View                |
+Use inside a `<View class="horizontal">` and set `last="true"` on the final avatar.
 
----
+```xml
+<View class="horizontal">
+  <Avatar module="tikit.ui" variant="stacked" size="base"
+          image="https://randomuser.me/api/portraits/men/86.jpg" />
+  <Avatar module="tikit.ui" variant="stacked" size="base"
+          image="https://randomuser.me/api/portraits/women/87.jpg" />
+  <Avatar module="tikit.ui" variant="stacked" size="base"
+          image="https://randomuser.me/api/portraits/men/62.jpg" />
+  <Avatar module="tikit.ui" variant="stacked" size="base" last="true"
+          image="https://randomuser.me/api/portraits/women/88.jpg" />
+</View>
+```
 
 ## Buttons
 
-> **Common Properties:** `variant`, `size`, `classes`, `title`
+Common properties: `variant`, `size`, `classes`, `title`
 
-### Variants
+Variants:
 
-- `border` — Text with an outline border
-- `border-rounded` — Like `border` with rounded corners
-- `filled` — Solid background color with text
-- `filled-rounded` — Like `filled` with rounded corners
-- `icon-left` — Icon on the left, text on the right
-- `icon-right` — Text on the left, icon on the right
+- `border`
+- `border-rounded`
+- `filled`
+- `filled-rounded`
+- `icon-left`
+- `icon-right`
 
-### Sizes
+Sizes: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`.
 
-`xs`, `sm`, `base`, `lg`, `xl`, `2xl`
+```xml
+<Button module="tikit.ui" variant="filled" size="lg" title="Submit"
+        classes="bg-blue-500 text-white" />
+```
 
-### Examples
+### `border` and `border-rounded`
 
 ```xml
-<!-- Border button -->
 <Button module="tikit.ui" variant="border" size="base" title="Cancel"
         classes="border-red-500 text-red-500" />
+```
+
+### `filled` and `filled-rounded`
 
-<!-- Filled rounded -->
+```xml
 <Button module="tikit.ui" variant="filled-rounded" size="base" title="Confirm"
         classes="bg-green-600 text-white" />
+```
 
-<!-- Icon left -->
+### `icon-left` and `icon-right`
+
+Use the `icon` property with the icon class and any PurgeTSS size or color classes.
+
+```xml
 <Button module="tikit.ui" variant="icon-left" size="base" title="Save"
         icon="fa fa-save text-white" classes="bg-blue-500 text-white" />
+```
+
+### Using Custom Icons in Buttons
 
-<!-- Icon right with Material Icon -->
+```xml
 <Button module="tikit.ui" variant="icon-right" size="lg" title="Settings"
         icon="mi mi-settings text-lg text-gray-100"
         classes="bg-gray-700 text-gray-100" />
 ```
 
----
-
 ## Cards
 
-> **Common Properties:** `variant`, `color`, `classes`
+Common properties: `variant`, `color`, `classes`
 
-### Variants
+Variants:
 
-- `code` — Display code snippets with optional copy button
-- `content` — Text with title, subtitle, and body
-- `quote` — Quotation with attribution
-- `showcase` — Image with title and description
+- `code`: Display code snippets, optional copy button.
+- `content`: Text with title, subtitle, and body.
+- `quote`: Quote with attribution.
+- `showcase`: Image with title and description.
 
-### Colors
+Colors: `black`, `dark`, `light`, `white`.
 
-`black`, `dark`, `light`, `white`
+### `code`
 
-### Examples
+`copy="true"` enables a copy button. Add `L('copy', 'Copy')` and `L('code_copied', 'Code copied!')` to `strings.xml`.
 
 ```xml
-<!-- Code card with copy button -->
 <Card module="tikit.ui" variant="code" color="dark" copy="true"
-      title="Example" text="function hello() { console.log('Hi!'); }" />
+      title="Example Function" text="function hello() { console.log('Hi!'); }" />
+```
+
+### `showcase`
+
+Use `rounded` (integer >= 0) to control border radius.
 
-<!-- Showcase card -->
+```xml
 <Card module="tikit.ui" variant="showcase" color="black"
       title="Project X" text="Mobile app design concept."
       image="images/showcase/project-x.jpg" />
+```
 
-<!-- Quote card -->
+### `quote`
+
+```xml
 <Card module="tikit.ui" variant="quote" color="white"
       name="Jane Austen" text="There is no charm equal to tenderness of heart." />
+```
+
+### `content`
 
-<!-- Content card -->
+```xml
 <Card module="tikit.ui" variant="content" color="light"
       title="About TiKit" subtitle="Making UI Easier"
-      text="TiKit provides useful components..." />
+      text="TiKit aims to provide useful components..." />
 ```
 
-### Variant-Specific Properties
-
-| Variant    | Properties                                | Notes                                                    |
-| ---------- | ----------------------------------------- | -------------------------------------------------------- |
-| `code`     | `title`, `text`, `copy` (boolean)         | Install monospaced font for best results                 |
-| `showcase` | `title`, `text`, `image`, `rounded` (int) | `rounded=0` for sharp, higher values for rounded corners |
-| `quote`    | `name`, `text`                            | Name is the attribution                                  |
-| `content`  | `title`, `subtitle`, `text`               | Clear hierarchy: large title, highlighted subtitle, body |
-
-:::tip Code Card Localization
-The copy button uses `L('copy', 'Copy')` for its title and `L('code_copied', 'Code copied!')` for confirmation. Add these keys to `strings.xml` for translation.
-:::
-
----
-
 ## Tabs
 
-> **Properties:** `title`, `icon`, `activeIcon` (iOS only) + standard `Titanium.UI.Tab` properties
-
-TiKit tabs make it easy to add icon-based tabs using any loaded font library.
+Properties: `title`, `icon`, `activeIcon` (iOS only) plus standard `Titanium.UI.Tab` properties.
 
 ```xml
 <Tab module="tikit.ui" title="Home" icon="fa fa-home" activeIcon="fas fa-home">
@@ -272,9 +297,7 @@ TiKit tabs make it easy to add icon-based tabs using any loaded font library.
 </Tab>
 ```
 
-### Styling Tabs
-
-Since these are `Titanium.UI.Tab` objects, use standard properties and PurgeTSS classes:
+### Styling Tabs Further
 
 ```xml
 <Tab module="tikit.ui"
@@ -286,39 +309,30 @@ Since these are `Titanium.UI.Tab` objects, use standard properties and PurgeTSS
 </Tab>
 ```
 
----
-
 ## Updating Components Dynamically
 
-TiKit components with an `id` can be updated without destroying and recreating them.
-
-### Available Update Methods
+Give the component an `id` and call update methods from your controller.
 
-| Method                   | Description                        |
-| ------------------------ | ---------------------------------- |
-| `updateTitle(newTitle)`  | Changes the main title             |
-| `updateSubtitle(newSub)` | Changes the subtitle (Cards)       |
-| `updateText(newText)`    | Changes the main text content      |
-| `updateName(newName)`    | Changes the name (Avatar `chip`)   |
-| `updateImage(newImage)`  | Changes the image (path or blob)   |
-| `updateIcon(newIcon)`    | Changes the icon class string      |
-| `update(args)`           | Update multiple properties at once |
+Available update methods:
 
-The `update()` method accepts an object with keys: `title`, `subtitle`, `text`, `name`, `image`, `icon`.
+- `updateTitle(newTitle)`
+- `updateSubtitle(newSubtitle)`
+- `updateText(newText)`
+- `updateName(newName)`
+- `updateImage(newImage)`
+- `updateIcon(newIcon)`
+- `update(args)` for multiple properties (`title`, `subtitle`, `text`, `name`, `image`, `icon`)
 
-### Which Components Support Which Updates
+Supported updates:
 
-| Component   | Updatable Properties                                       |
-| ----------- | ---------------------------------------------------------- |
-| **Cards**   | `title`, `subtitle`, `text`, `image`                       |
-| **Avatars** | `image`, `name` (mostly for `chip`)                        |
-| **Alerts**  | `title`, `text`, `icon` (`text` not applicable to `solid`) |
-| **Buttons** | `title`, `icon` (`icon` for `icon-left`/`icon-right`)      |
+- Cards: `title`, `subtitle`, `text`, `image`
+- Avatars: `image`, `name` (mostly for `chip`)
+- Alerts: `title`, `text`, `icon` (`text` not applicable to `solid`)
+- Buttons: `title`, `icon` (`icon` for `icon-left`/`icon-right`)
 
-### Example
+Example:
 
 ```xml
-<!-- View -->
 <Card id="statusCard" module="tikit.ui" variant="content" color="light"
       title="Status" subtitle="Current" text="Waiting for update..." />
 
@@ -328,26 +342,18 @@ The `update()` method accepts an object with keys: `title`, `subtitle`, `text`,
 ```
 
 ```javascript
-// Controller
 function fetchStatus() {
-  // Update multiple properties at once
   $.statusCard.update({
     title: 'Status Updated!',
     subtitle: 'Just Now',
     text: 'Everything looks good. System operational.'
   });
-
-  // Or update individually
-  // $.statusCard.updateTitle('Status Updated!');
-  // $.statusCard.updateSubtitle('Just Now');
 }
 ```
 
----
+## Working with Icon Fonts
 
-## Using Icon Fonts with TiKit
-
-TiKit components accept icon fonts via the `icon` property. Use any font loaded through PurgeTSS.
+Use any icon font loaded via PurgeTSS. Specify the font prefix and icon name in the `icon` property, along with size and color classes.
 
 ### Official Icon Fonts
 
@@ -357,9 +363,9 @@ purgetss icon-library --vendor=fa,mi,ms,f7
 
 ### Custom Icon Fonts
 
-1. Place font (`.ttf`/`.otf`) and CSS in `purgetss/fonts/your-font-name/`
-2. Run `purgetss build-fonts`
-3. Use in TiKit components:
+1. Place your font files and CSS in `purgetss/fonts/your-font-name/`.
+1. Run `purgetss build-fonts`.
+1. Use in TiKit components:
 
 ```xml
 <Button module="tikit.ui" variant="icon-left" title="Launch"
@@ -371,23 +377,6 @@ purgetss icon-library --vendor=fa,mi,ms,f7
        icon="myicon myicon-download text-2xl" />
 ```
 
-## Quick Reference
-
-### All Component Variants
-
-| Component | Variants                                                                          |
-| --------- | --------------------------------------------------------------------------------- |
-| Alert     | `callout`, `pop`, `solid`                                                         |
-| Avatar    | `chip`, `circular`, `landscape`, `portrait`, `square`, `stacked`                  |
-| Button    | `border`, `border-rounded`, `filled`, `filled-rounded`, `icon-left`, `icon-right` |
-| Card      | `code`, `content`, `quote`, `showcase`                                            |
-| Tab       | (single variant, uses standard Tab properties)                                    |
-
-### Size Scale (Avatars & Buttons)
-
-`xs` → `sm` → `base` → `lg` → `xl` → `2xl`
-
-### Color Schemes
+## License
 
-- **Alerts**: `success`, `danger`, `warning`, `info`, `dark`, `light` (+ custom `primary`, `secondary`)
-- **Cards**: `black`, `dark`, `light`, `white`
+TiKit UI Components is open source under the MIT License.