intelliwaketssveltekitv25 1.0.82 → 1.0.83

package/docs/TextArea.md

@@ -0,0 +1,118 @@
+# TextArea Component
+
+**Replaces:** Native `<textarea>` elements
+
+**Purpose:** Auto-resizing textarea with automatic height adjustment and readonly display mode
+
+**When to Use:**
+- Multi-line text input (comments, descriptions, notes)
+- Forms requiring paragraph-length text entry
+- Any textarea that should grow/shrink with content
+- Readonly text display that preserves formatting
+
+## Key Props
+
+- `value: string | null` ($bindable) - Current text value, use `bind:value` for two-way binding
+- `readonly?: boolean` - Display as readonly (renders as DisplayHTML instead of textarea)
+- `propagateEnter?: boolean` (default: false) - Allow Enter key to propagate (useful in forms)
+- `use?: ActionArray` - Svelte actions array
+- Standard HTML textarea attributes: `placeholder`, `disabled`, `required`, `maxlength`, `rows`, `cols`, `name`, `class`, etc.
+
+## Features
+
+- **Auto-grow**: Automatically adjusts height to fit content using `autoGrow` action
+- **Readonly mode**: Displays as HTML when readonly (preserves formatting, line breaks)
+- **Enter key control**: Prevents Enter key propagation by default (prevents form submission)
+- **Full textarea API**: Supports all standard HTML textarea attributes
+
+## Usage Examples
+
+```svelte
+<script>
+  import { TextArea } from 'intelliwaketssveltekitv25';
+  let comment = $state('');
+  let description = $state('Product description here...');
+</script>
+
+<!-- Basic auto-resizing textarea -->
+<label>
+  Comment:
+  <TextArea bind:value={comment} placeholder="Enter your comment..." />
+</label>
+
+<!-- With max length -->
+<TextArea
+  bind:value={description}
+  maxlength={500}
+  placeholder="Describe the product..."
+  required
+/>
+
+<!-- Readonly display -->
+<TextArea value={savedComment} readonly />
+
+<!-- With Enter key propagation (for inline editing) -->
+<TextArea
+  bind:value={note}
+  propagateEnter={true}
+  placeholder="Press Enter to submit"
+/>
+
+<!-- In a form -->
+<form method="POST">
+  <TextArea
+    name="feedback"
+    bind:value={feedback}
+    placeholder="Your feedback..."
+    required
+  />
+  <button type="submit">Submit</button>
+</form>
+
+<!-- With custom styling -->
+<TextArea
+  bind:value={text}
+  class="border-2 border-blue-500 rounded-lg p-4"
+  placeholder="Styled textarea..."
+/>
+
+<!-- Disabled state -->
+<TextArea value={existingText} disabled />
+
+<!-- With rows (initial height) -->
+<TextArea
+  bind:value={longText}
+  rows={10}
+  placeholder="Start with 10 rows..."
+/>
+```
+
+## Common Mistakes
+
+- ❌ Using native `<textarea>` without auto-grow: `<textarea bind:value={x}>`
+  ✅ Correct: `<TextArea bind:value={x} />` (auto-grows automatically)
+
+- ❌ Not using `bind:value`: `<TextArea value={x} />`
+  ✅ Correct: `<TextArea bind:value={x} />` (for two-way binding)
+
+- ❌ Expecting readonly to show a textarea: `<TextArea value={x} readonly />`
+  ✅ Note: readonly mode displays as formatted HTML, not a textarea
+
+- ❌ Form submitting on Enter key when you don't want it to
+  ✅ Correct: Default behavior prevents Enter propagation; use `propagateEnter={true}` if you want form submission on Enter
+
+## Props Details
+
+- **Auto-grow behavior**: Height automatically adjusts as you type, no scrolling needed
+- **Readonly rendering**: Uses `DisplayHTML` component to show formatted text with line breaks preserved
+- **Enter key**: By default, Enter key is stopped from propagating to prevent accidental form submissions
+
+## Related Components
+
+- `DisplayHTML` - Used internally for readonly display
+- `InputNumber` - For single-line numeric inputs
+- `MultiSelect` - For selecting from predefined options
+
+## Storybook
+
+See `Components/TextArea` stories

package/docs/_Sidebar.md

@@ -0,0 +1,38 @@
+## Navigation
+
+### Getting Started
+- [Home](Home)
+- [Integration Guide](Integration)
+- [Svelte 5 Patterns](Svelte-5-Patterns)
+
+### Form Controls
+- [Switch](Switch)
+- [InputNumber](InputNumber)
+- [TextArea](TextArea)
+- [DropDown](DropDown)
+- [MultiSelect](MultiSelect)
+
+### Data Display
+- [DateRangePicker](DateRangePicker)
+
+### Layout & Overlays
+- [Modal](Modal)
+- [TabHeader](TabHeader)
+- [TabHref](TabHref)
+- [SlideDown](SlideDown)
+
+### Visual & Utilities
+- [Icon](Icon)
+- [DisplayHTML](DisplayHTML)
+- [Functions](Functions)
+
+### Navigation & Search
+- [Search](Search)
+- [Paginator](Paginator)
+
+### Data Import
+- [Importer](Importer)
+- [ImporterLoad](ImporterLoad)
+- [ImporterAnalysis](ImporterAnalysis)
+
+---

package/llms.txt

@@ -0,0 +1,113 @@
+# IntelliWakeTSSvelteKitV2.5 - Component Reference Guide
+
+**For detailed documentation:** See `docs/` directory
+
+## Quick Reference: When to Use Each Component
+
+### 🎛️ Form Controls - Replace Native HTML Elements
+
+| User Need | Use Component | Instead of | Docs Link |
+|-----------|---------------|------------|-----------|
+| Toggle switch, on/off control | **Switch** | `<input type="checkbox">` | [Switch.md](docs/Switch.md) |
+| Numeric input (currency, %, decimals) | **InputNumber** | `<input type="number">` | [InputNumber.md](docs/InputNumber.md) |
+| Multi-line text input | **TextArea** | `<textarea>` | [TextArea.md](docs/TextArea.md) |
+| Dropdown menu with actions | **DropDown** | `<select>` | [DropDown.md](docs/DropDown.md) |
+| Multi-select with search | **MultiSelect** | `<select multiple>` | [MultiSelect.md](docs/MultiSelect.md) |
+
+### 🪟 Overlays & Dialogs
+
+| User Need | Use Component | Docs Link |
+|-----------|---------------|-----------|
+| Modal dialog, popup, confirmation | **Modal** | [Modal.md](docs/Modal.md) |
+| Animated dropdown menus | **SlideDown** | [SlideDown.md](docs/SlideDown.md) |
+
+### 📊 Data Display
+
+| User Need | Use Component | Docs Link |
+|-----------|---------------|-----------|
+| Date range picker with presets | **DateRangePicker** | [DateRangePicker.md](docs/DateRangePicker.md) |
+
+### 🔍 Navigation & Search
+
+| User Need | Use Component | Docs Link |
+|-----------|---------------|-----------|
+| Debounced search input | **Search** | [Search.md](docs/Search.md) |
+| Pagination controls | **Paginator** | [Paginator.md](docs/Paginator.md) |
+| Client-side tabs | **TabHeader** | [TabHeader.md](docs/TabHeader.md) |
+| URL-based tabs | **TabHref** | [TabHref.md](docs/TabHref.md) |
+
+### 🎨 Visual & Utilities
+
+| User Need | Use Component | Docs Link |
+|-----------|---------------|-----------|
+| FontAwesome icons | **Icon** | [Icon.md](docs/Icon.md) |
+| HTML rendering | **DisplayHTML** | [DisplayHTML.md](docs/DisplayHTML.md) |
+| Browser APIs (GPS/clipboard/export), Svelte use: actions (focus/navigation/forms) | **Functions** | [Functions.md](docs/Functions.md) |
+
+### 📥 Data Import
+
+| User Need | Use Component | Docs Link |
+|-----------|---------------|-----------|
+| CSV import | **Importer** | [Importer.md](docs/Importer.md) |
+| CSV upload | **ImporterLoad** | [ImporterLoad.md](docs/ImporterLoad.md) |
+| CSV validation | **ImporterAnalysis** | [ImporterAnalysis.md](docs/ImporterAnalysis.md) |
+
+## Component Decision Tree
+
+```
+Need form input?
+├─ Boolean/toggle → Switch
+├─ Number → InputNumber
+├─ Multi-line text → TextArea
+├─ Single selection from list → DropDown
+└─ Multiple selections from list → MultiSelect
+
+Need data display?
+├─ Date range selection → DateRangePicker
+└─ Large dataset (1000+ items) → VirtualTable (see docs/Home.md)
+
+Need navigation?
+├─ Search/filter → Search
+├─ Pagination → Paginator
+├─ Local tabs → TabHeader
+└─ URL tabs → TabHref
+
+Need overlay?
+├─ Dialog/confirmation → Modal
+└─ Dropdown menu → SlideDown
+
+Need visual content?
+├─ Icons → Icon
+└─ HTML display → DisplayHTML
+
+Need data import?
+└─ CSV import → Importer
+
+Need layout?
+└─ Master-detail pattern → MasterDetailLayout (see docs/Home.md)
+```
+
+## Essential Props Pattern
+
+All form controls support two-way binding with `bind:`:
+
+```svelte
+<Switch bind:checked={value} />
+<InputNumber bind:value={amount} />
+<TextArea bind:value={text} />
+<MultiSelect bind:selected={items} possibles={allItems} />
+```
+
+## Integration Checklist
+
+1. ✅ Import CSS: `import 'intelliwaketssveltekitv25/dist/app.css'`
+2. ✅ Configure Tailwind colors (see [Integration.md](docs/Integration.md))
+3. ✅ Use Svelte 5 runes: `$state()`, `$derived()` (see [Svelte-5-Patterns.md](docs/Svelte-5-Patterns.md))
+
+## Critical Reminders for AI Assistants
+
+1. **Always prefer library components over native HTML** - Check the table above first
+2. **Use `bind:` for two-way binding** - `bind:checked`, `bind:value`, `bind:selected`
+3. **Reference detailed docs** - Don't guess props, check [docs/ComponentName.md](docs/Home.md)
+4. **Svelte 5 syntax required** - Use `$state()`, not `let count = 0`
+5. **TypeScript generics** - Use `IArrayStructure<T>` for type safety

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelliwaketssveltekitv25",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "private": false,
   "license": "MIT",
   "exports": {
@@ -22,7 +22,8 @@
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*",
-    "llm.txt",
+    "docs",
+    "llms.txt",
     "INTEGRATION.md"
   ],
   "peerDependencies": {