@deskhero/dh_ui 2.63.1 → 2.64.0

package/.ai/CSS-CLASSES-GUIDE.md

@@ -315,3 +315,66 @@ Full list of keys: `spacer-0`, `spacer-half`, `spacer-1` … `spacer-10`, `space
 - **Sizes:** Use `w-*` / `h-*` with the spacing scale for fixed sizes, or `w-100` / `h-100` for 100%.
 - **Combining:** e.g. `flex flex-row items-center justify-between gap-spacer-2 p-spacer-4` is a valid and preferred pattern.
 - **No new one-off CSS:** If a layout or spacing need is covered by these classes, use the classes instead of new rules in the component.
+
+---
+
+## 6. Typography utilities (`typography.scss`)
+
+Utility classes for text transform, alignment, weight, decoration, truncation and line clamping. These are intentionally Tailwind-like and **do not use the `dh-` prefix**.
+
+### Text transform
+| Class                     | Effect                    |
+|---------------------------|---------------------------|
+| `text-transform-none`     | `text-transform: none`    |
+| `text-transform-capitalize` | `text-transform: capitalize` |
+| `text-transform-uppercase`  | `text-transform: uppercase`  |
+| `text-transform-lowercase`  | `text-transform: lowercase`  |
+
+### Text alignment
+| Class        | Effect               |
+|--------------|----------------------|
+| `text-left`  | `text-align: left`   |
+| `text-center`| `text-align: center` |
+| `text-right` | `text-align: right`  |
+| `text-justify` | `text-align: justify` |
+
+### Font weight
+| Class        | Effect              |
+|--------------|---------------------|
+| `font-normal`| `font-weight: 400`  |
+| `font-medium`| `font-weight: 500`  |
+| `font-bold`  | `font-weight: 700`  |
+
+### Text decoration
+| Class              | Effect                     |
+|--------------------|----------------------------|
+| `text-underline`   | `text-decoration: underline` |
+| `text-line-through`| `text-decoration: line-through` |
+| `text-no-underline`| `text-decoration: none`    |
+
+### Truncation & wrapping
+| Class          | Effect                                          |
+|----------------|-------------------------------------------------|
+| `text-truncate`| Single-line ellipsis (`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`) |
+| `text-wrap`    | Normal wrapping (`white-space: normal`)        |
+| `text-nowrap`  | No wrapping (`white-space: nowrap`)            |
+
+### Line clamp (multi-line truncation)
+These rely on `-webkit-line-clamp` and `-webkit-box-orient` for cross-browser support.
+
+| Class          | Lines shown |
+|----------------|-------------|
+| `line-clamp-1` | 1 line      |
+| `line-clamp-2` | 2 lines     |
+| `line-clamp-3` | 3 lines     |
+
+**Example:**
+```html
+<p class="text-primary font-medium text-center text-truncate">
+  This is a long title that will truncate on a single line.
+</p>
+
+<p class="text-secondary line-clamp-2">
+  This description will be clamped to two lines with an ellipsis in supporting browsers.
+</p>
+```

package/README.md

@@ -75,6 +75,33 @@ Then on your project
 npm link @deskhero/dh_ui
 ```
 
+## VS Code IntelliSense for Deskhero UI
+
+You can enable richer autocomplete and hover information for Deskhero components and utility classes by pointing VS Code to the generated custom data manifests.
+
+After building the library (or running `npm run build:all`), the following files are created:
+
+- `dist/vscode.css-custom-data.json` – CSS classes (e.g. `flex`, `items-center`) with descriptions where available.
+- `dist/vscode.html-custom-data.json` – Vue component tags (e.g. `dh-advanced-filter`) with descriptions from component docs.
+
+In your **consumer application**, add a workspace-level `.vscode/settings.json` (or extend your existing one) and reference these files with paths relative to your app:
+
+```json
+{
+  "css.customData": [
+    "../dh-ui/dist/vscode.css-custom-data.json"
+  ],
+  "html.customData": [
+    "../dh-ui/dist/vscode.html-custom-data.json"
+  ]
+}
+```
+
+Adjust the `../dh-ui` segment to match where this library lives relative to your consumer app. Once configured, VS Code will offer:
+
+- Tag completion and hover for Deskhero components in Vue SFC templates.
+- Class name completion and hover for Deskhero utility classes in templates and styles.
+
 <hr/>
 
 ### Recommended IDE Setup

package/bin/ai-init.cjs

@@ -22,10 +22,7 @@ function main() {
     }
 
     if (fs.existsSync(DEST_FILE)) {
-      console.log(
-        "[AI-INIT] './ai/DH-UI-USAGE.MD' already exists. No changes made."
-      );
-      return;
+      fs.unlinkSync(DEST_FILE);
     }
 
     const contents = fs.readFileSync(SOURCE_FILE, "utf8");