ember-tribe 2.6.6 → 2.6.8

package/README.md

@@ -26,7 +26,18 @@ The addon automatically configures following essential packages:
 
 **Ember Addons:** `ember-cli-dotenv`, `ember-cli-sass`, `ember-modifier`, `ember-composable-helpers`, `ember-truth-helpers`, `ember-file-upload` , `ember-power-select`
 
-**NPM Packages:** `bootstrap`, `@popperjs/core`, `animate.css`, `video.js`, `swiper`,  `howler`
+**NPM Packages:** `bootstrap`, `@popperjs/core`, `animate.css`, `video.js`, `swiper`,  `howler`, `sortablejs`, `papaparse`
+
+**Built-in features that can be used in routes and components**:
+
+- **Layout**: `table`, `figure`, `accordion`, `card`, `list-group`, `navbar`, `nav`, `tab`, `breadcrumb`
+- **Interactive**: `button`, `button-group`, `dropdown`, `modal`, `collapse`, `offcanvas`, `pagination`, `popover`, `tooltip`, `swiper-carousel`, `videojs-player`, `howlerjs-player`, `input-field`, `input-group`, `textarea`, `checkbox`, `radio`, `range`, `select`, `multi-select`, `date`, `file-uploader`, `alert`, `badge`, `toast`, `placeholder`, `progress`, `spinner`, `scrollspy`
+
+**Preinstalled services in ember-tribe**:
+
+- `store`: Ember Data store for CRUD operations
+- `router`: Ember router service for navigation
+- `types`: Automatic model generation from backend tracks
 
 ---
 
@@ -50,6 +61,106 @@ installer.sh
 
 ---
 
+## Best Practices for AI generated code
+
+These rules are **mandatory** for all Tribe-compatible code. Follow them strictly and do not deviate unless explicitly instructed.
+
+### General Rules
+
+1. **Bootstrap 5.x — Required Foundation**
+   Use Bootstrap 5.x as the sole design system for all layout, spacing, and responsive behaviour. Do not introduce custom CSS frameworks or utility libraries that conflict with Bootstrap. Follow Bootstrap conventions strictly.
+
+2. **Backend Field Access**
+   Always access backend fields through the `modules` object — e.g. `object.modules.field_name`. Never access backend fields directly.
+
+3. **npm Packages over Ember Addons**
+   When an npm package and an Ember addon offer equivalent functionality, always prefer the npm package for better long-term compatibility.
+
+4. **Icons — FontAwesome 6.x Only**
+   Use FontAwesome 6.x for all icons. Do not use any other icon library unless the project description explicitly specifies one.
+
+5. **Animations — Subtle and Purposeful**
+   If animations are needed, use `animate.css`. Keep animations subtle — prefer fades and minimal slides. Avoid anything that feels flashy or distracting.
+
+6. **EmberData Caching**
+   When data has already been loaded into the store, retrieve it with `peekRecord` instead of making a new network request.
+
+7. **Backend Filtering over Frontend Filtering**
+   For sorting and filtering data, always use `this.store.query` with backend query parameters. Do not filter or sort arrays on the frontend when the backend can do it.
+
+---
+
+### Storylang Architecture Rules
+
+Follow this strict order of thinking when designing any feature:
+
+> **Understand Types → Routes → Controllers → Helpers → Modifiers → Services → Components**
+
+Always begin by understanding your data types, then define the routes that load that data, then wire up controllers to handle user actions, then extract reusable template logic into helpers, then isolate DOM behaviour into modifiers, then move app-wide logic into services, and finally — only when the project's scale warrants it — extract repeatable UI into components.
+
+---
+
+**Types**
+
+11. **Start by Understanding Your Data**
+    Before writing any code, read the project description and `types.json` to understand the data model. Every architectural decision that follows — which routes to create, which services to build, whether components are even needed — depends on a clear understanding of the underlying types.
+
+---
+
+**Routes**
+
+8. **Route Naming**
+   Match route names to user mental models. Use consistent, predictable naming conventions so that routes are self-documenting.
+
+9. **Routes Are for Fetching, Not Logic**
+   Routes should primarily perform read/fetch operations and pass data down to components or services. Keep JavaScript in routes to a minimum — business logic belongs in components and services, not routes.
+
+10. **Route Parameters**
+    Keep `get_vars` minimal and meaningful. Load only the data types that each specific route actually needs — avoid over-fetching.
+
+---
+
+**Controllers**
+
+12. **Controllers Bridge Routes and Templates**
+    Controllers sit between routes and templates, handling query parameters, user actions, and transient UI state that belongs to a specific route. Keep controllers focused — they are not a place for business logic or data fetching.
+
+13. **Keep Controllers Thin**
+    Delegate complex logic to services. A controller should primarily expose tracked properties and actions that the corresponding template needs directly.
+
+---
+
+**Helpers**
+
+17. **Helpers Must Be Pure and Stateless**
+    A helper receives input and returns output — nothing else. Helpers must have no side effects and must not interact with the store, services, or DOM.
+
+---
+
+**Modifiers**
+
+18. **Modifiers Own All DOM Interaction**
+    Any direct DOM manipulation or third-party library initialisation must live in a modifier.
+
+---
+
+**Services**
+
+15. **Services Are the Core Logic Layer**
+    Services hold the primary business logic of the application. They interact with both routes and components and are the single source of truth for app-wide behaviour.
+
+16. **Keep Services Stateless When Possible**
+    Avoid storing transient state in services. Where services must depend on one another, use dependency injection.
+
+---
+
+**Components**
+
+14. **Components are not always required**
+    Before creating components, assess the scale of the project from its description. On small projects, fewer files means higher code readability — collapsing template logic directly into route templates is often the right call. On larger projects, the opposite is true: extracting repeatable UI into named components improves clarity, maintainability, and testability. Make this decision deliberately at the start, not as an afterthought.
+
+---
+
 ## Storylang CLI
 
 ember-tribe ships with a command-line tool called `storylang` that synchronises the `config/storylang.json` specification with the actual Ember project files.
@@ -96,33 +207,18 @@ The storylang.json file contains seven main sections:
 
 ```json
 {
-  "implementation_approach": "...",
   "types": [...],
-  "components": [...],
   "routes": [...],
-  "services": [...],
   "helpers": [...],
-  "modifiers": [...]
+  "modifiers": [...],
+  "services": [...],
+  "components": [...]
 }
 ```
 
 ### Section Definitions
 
-### 1. Implementation Approach
-
-**Purpose**: Provides a high-level technical overview of how the frontend interface would work.
-
-**Format**:
-
-```json
-{
-  "implementation_approach": "Two-paragraph description explaining technical approach and key functionality."
-}
-```
-
----
-
-### 2. Types
+### 1. Types
 
 **Purpose**: Declares which data types from `types.json` and maps them to the components, routes, services, helpers and modifiers that consume them. This creates a traceable link between your data layer and your UI implementation.
 
@@ -147,52 +243,66 @@ The storylang.json file contains seven main sections:
 
 ---
 
-### 3. Components
+### 2. Routes
 
-**Purpose**: Defines reusable UI components that will be built for the application.
+**Purpose**: Defines the application's routes and their requirements.
 
 **Format**:
 
 ```json
 {
-  "components": [
+  "routes": [
     {
-      "name": "component-name",
-      "type": "component-type",
+      "name": "route-name", //should match Ember router.js
       "tracked_vars": [{ "<variableName>": "<dataType>" }],
-      "inherited_args": [{ "<argumentName>": "<argType>" }],
+      "get_vars": [{ "<paramName>": "<dataType>" }],
       "actions": ["action1", "action2"],
-      "helpers": ["helper1", "helper2"],
-      "modifiers": ["modifier1"],
-      "services": ["service1", "service2"]
+      "helpers": ["helper1"],
+      "services": ["service1"],
+      "components": ["component1", "component2"],
+      "types": ["type1", "type2"]
     }
   ]
 }
 ```
 
-**Built-in Component Types in ember-tribe**:
+---
 
-- **Layout**: `table`, `figure`, `accordion`, `card`, `list-group`, `navbar`, `nav`, `tab`, `breadcrumb`
-- **Interactive**: `button`, `button-group`, `dropdown`, `modal`, `collapse`, `offcanvas`, `pagination`, `popover`, `tooltip`, `swiper-carousel`, `videojs-player`, `howlerjs-player`, `input-field`, `input-group`, `textarea`, `checkbox`, `radio`, `range`, `select`, `multi-select`, `date`, `file-uploader`, `alert`, `badge`, `toast`, `placeholder`, `progress`, `spinner`, `scrollspy`
+### 3. Helpers
+
+**Purpose**: Defines custom template helpers — pure functions used in templates to format, compute or transform data for display.
+
+**Format**:
+
+```json
+{
+  "helpers": [
+    {
+      "name": "helper-name",
+      "description": "What this helper does",
+      "input_args": [{ "<argumentName>": "<dataType>" }],
+      "return": "<dataType>"
+    }
+  ]
+}
+```
 
 **Example**:
 
 ```json
 {
-  "components": [
+  "helpers": [
     {
-      "name": "file-summary-card",
-      "type": "card",
-      "tracked_vars": [{ "isSelected": "bool" }, { "isExpanded": "bool" }],
-      "inherited_args": [
-        { "file": "var" },
-        { "onEdit": "action" },
-        { "onDelete": "action" }
-      ],
-      "actions": ["toggleSelection", "expandDetails", "editFile", "deleteFile"],
-      "helpers": ["formatDate", "truncateText"],
-      "modifiers": ["tooltip"],
-      "services": ["store", "router"]
+      "name": "format-date",
+      "description": "Formats a raw ISO date string into a human-readable date",
+      "input_args": [{ "isoString": "string" }, { "format": "string" }],
+      "return": "string"
+    },
+    {
+      "name": "truncate-text",
+      "description": "Truncates a string to a given character limit and appends an ellipsis",
+      "input_args": [{ "text": "string" }, { "limit": "int" }],
+      "return": "string"
     }
   ]
 }
@@ -200,24 +310,41 @@ The storylang.json file contains seven main sections:
 
 ---
 
-### 4. Routes
+### 4. Modifiers
 
-**Purpose**: Defines the application's routes and their requirements.
+**Purpose**: Defines custom Ember modifiers — functions that directly interact with DOM elements to attach behaviour, third-party libraries or event listeners.
 
 **Format**:
 
 ```json
 {
-  "routes": [
+  "modifiers": [
     {
-      "name": "route-name", //should match Ember router.js
-      "tracked_vars": [{ "<variableName>": "<dataType>" }],
-      "get_vars": [{ "<paramName>": "<dataType>" }],
-      "actions": ["action1", "action2"],
-      "helpers": ["helper1"],
-      "services": ["service1"],
-      "components": ["component1", "component2"],
-      "types": ["type1", "type2"]
+      "name": "modifier-name",
+      "description": "What DOM behaviour this modifier applies",
+      "input_args": [{ "<argumentName>": "<dataType>" }],
+      "services": ["service1"]
+    }
+  ]
+}
+```
+
+**Example**:
+
+```json
+{
+  "modifiers": [
+    {
+      "name": "tooltip",
+      "description": "Initialises a Bootstrap tooltip on the target element using the provided label",
+      "input_args": [{ "label": "string" }, { "placement": "string" }],
+      "services": []
+    },
+    {
+      "name": "autofocus",
+      "description": "Sets focus on the target element when it is inserted into the DOM",
+      "input_args": [],
+      "services": []
     }
   ]
 }
@@ -245,18 +372,6 @@ The storylang.json file contains seven main sections:
 }
 ```
 
-**Built-in Services in ember-tribe**:
-
-- `store`: Ember Data store for CRUD operations
-- `router`: Ember router service for navigation
-- `types`: Automatic model generation from backend tracks
-- `bootstrap`: Bootstrap CSS framework with Popper.js
-- `papaparse`: CSV parsing library
-- `sortablejs`: Drag-and-drop sorting
-- `swiperjs`: Touch slider/carousel
-- `videojs`: Video player
-- `howlerjs`: Audio player
-
 **Example**:
 
 ```json
@@ -282,97 +397,47 @@ The storylang.json file contains seven main sections:
 
 ---
 
-### 6. Helpers
-
-**Purpose**: Defines custom template helpers — pure functions used in templates to format, compute or transform data for display.
-
-**Format**:
-
-```json
-{
-  "helpers": [
-    {
-      "name": "helper-name",
-      "description": "What this helper does",
-      "args": [{ "<argumentName>": "<dataType>" }],
-      "return": "<dataType>"
-    }
-  ]
-}
-```
-
-**Helper Properties**:
-
-- `name`: Kebab-case name of the helper
-- `description`: Brief description of what the helper computes or transforms
-- `args`: Input arguments the helper accepts
-- `return`: The data type the helper outputs
-
-**Example**:
-
-```json
-{
-  "helpers": [
-    {
-      "name": "format-date",
-      "description": "Formats a raw ISO date string into a human-readable date",
-      "args": [{ "isoString": "string" }, { "format": "string" }],
-      "return": "string"
-    },
-    {
-      "name": "truncate-text",
-      "description": "Truncates a string to a given character limit and appends an ellipsis",
-      "args": [{ "text": "string" }, { "limit": "int" }],
-      "return": "string"
-    }
-  ]
-}
-```
-
----
-
-### 7. Modifiers
+### 6. Components
 
-**Purpose**: Defines custom Ember modifiers — functions that directly interact with DOM elements to attach behaviour, third-party libraries or event listeners.
+**Purpose**: Defines reusable UI components that will be built for the application.
 
 **Format**:
 
 ```json
 {
-  "modifiers": [
+  "components": [
     {
-      "name": "modifier-name",
-      "description": "What DOM behaviour this modifier applies",
-      "args": [{ "<argumentName>": "<dataType>" }],
-      "services": ["service1"]
+      "name": "component-name",
+      "type": "component-type",
+      "tracked_vars": [{ "<variableName>": "<dataType>" }],
+      "inherited_args": [{ "<argumentName>": "<argType>" }],
+      "actions": ["action1", "action2"],
+      "helpers": ["helper1", "helper2"],
+      "modifiers": ["modifier1"],
+      "services": ["service1", "service2"]
     }
   ]
 }
 ```
 
-**Modifier Properties**:
-
-- `name`: Kebab-case name of the modifier
-- `description`: Brief description of the DOM behaviour it attaches
-- `args`: Arguments passed into the modifier from the template
-- `services`: Ember services injected if needed
-
 **Example**:
 
 ```json
 {
-  "modifiers": [
-    {
-      "name": "tooltip",
-      "description": "Initialises a Bootstrap tooltip on the target element using the provided label",
-      "args": [{ "label": "string" }, { "placement": "string" }],
-      "services": []
-    },
+  "components": [
     {
-      "name": "autofocus",
-      "description": "Sets focus on the target element when it is inserted into the DOM",
-      "args": [],
-      "services": []
+      "name": "file-summary-card",
+      "type": "card",
+      "tracked_vars": [{ "isSelected": "bool" }, { "isExpanded": "bool" }],
+      "inherited_args": [
+        { "file": "var" },
+        { "onEdit": "action" },
+        { "onDelete": "action" }
+      ],
+      "actions": ["toggleSelection", "expandDetails", "editFile", "deleteFile"],
+      "helpers": ["formatDate", "truncateText"],
+      "modifiers": ["tooltip"],
+      "services": ["store", "router"]
     }
   ]
 }
@@ -409,25 +474,6 @@ The storylang.json file contains seven main sections:
 
 ---
 
-### Storylang Best Practices
-
-**Always begin your thought process with routes → then move repeatable template logic into components → then move repeatable app-wide logic from components and routes to services → then extract reusable template and component functions into helpers → then extract template and component DOM behaviour into modifiers**
-
-1. **Start with Routes**: Match route names to user mental models and use consistent naming conventions
-2. **Minimize Route Logic**: Preferably fetch (read) type data in routes and then pass that data to components or services. Other than fetching type data, minimize the use of javascript in routes — Javascript is meant to be in components and services more than in routes
-3. **Route Parameters**: Keep get_vars minimal and meaningful, and load only necessary types for each route
-4. **Component Focus**: Keep components focused on single responsibilities and use descriptive, kebab-case names. Names should indicate which built-in ember-tribe component to use.
-5. **Data Flow**: Receive backend data down from routes (via inherited_args) rather than fetching (reading) in components
-6. **Component Actions**: Non-read functions — create, update, delete — can all happen well at component-level
-7. **Service Integration**: Use services directly in both components and routes for app-wide logic
-8. **Service Architecture**: Keep services stateless when possible and use dependency injection for service composition
-9. **Service Role**: Services interact with both routes and components and store the core logic of the application
-10. **Helpers**: Keep helpers pure and stateless — they should only receive input and return output with no side effects
-11. **Modifiers**: Use modifiers to isolate all direct DOM manipulation and third-party library initialisation from component logic
-12. **Types Mapping**: Populate the `types` section as you define your routes and components — it is your traceability layer between data types and UI
-
----
-
 ## Ember-Tribe Development Guide
 
 ### Required File Outputs
@@ -615,66 +661,6 @@ post.destroyRecord(); // => DELETE request
 
 ---
 
-## Component Architecture
-
-### Component Structure
-
-```javascript
-// Component class
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { service } from '@ember/service';
-
-export default class FileCardComponent extends Component {
-  @service store;
-  @tracked isSelected = false;
-
-  @action
-  toggleSelection() {
-    this.isSelected = !this.isSelected;
-  }
-}
-```
-
-### Template Patterns
-
-```handlebars
-<div
-  class='card {{if this.isSelected "border-primary"}}'
-  {{on 'click' this.toggleSelection}}
->
-  <div class='card-body'>
-    <h5 class='card-title'>{{@file.modules.title}}</h5>
-    <p class='card-text'>{{@file.modules.description}}</p>
-  </div>
-</div>
-```
-
----
-
-## Services Integration
-
-Make services based on storylang.json service definitions:
-
-```javascript
-// app/services/visualization-builder.js
-import Service from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { service } from '@ember/service';
-
-export default class VisualizationBuilderService extends Service {
-  @service store;
-  @tracked supportedTypes = ['network', 'tree', 'sankey'];
-
-  buildVisualization(files, type, config) {
-    // Service logic implementation
-  }
-}
-```
-
----
-
 ## Route Generation
 
 ### Route Creation
@@ -936,9 +922,69 @@ export default class CartContentsComponent extends Component {
 
 ---
 
-## Code Generation Process
+## Services Integration
 
-### File Upload Javascript Example
+Make services based on storylang.json service definitions:
+
+```javascript
+// app/services/visualization-builder.js
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class VisualizationBuilderService extends Service {
+  @service store;
+  @tracked supportedTypes = ['network', 'tree', 'sankey'];
+
+  buildVisualization(files, type, config) {
+    // Service logic implementation
+  }
+}
+```
+
+---
+
+## Component Architecture
+
+### Component Structure
+
+```javascript
+// Component class
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+
+export default class FileCardComponent extends Component {
+  @service store;
+  @tracked isSelected = false;
+
+  @action
+  toggleSelection() {
+    this.isSelected = !this.isSelected;
+  }
+}
+```
+
+### Template Patterns
+
+```handlebars
+<div
+  class='card {{if this.isSelected "border-primary"}}'
+  {{on 'click' this.toggleSelection}}
+>
+  <div class='card-body'>
+    <h5 class='card-title'>{{@file.modules.title}}</h5>
+    <p class='card-text'>{{@file.modules.description}}</p>
+  </div>
+</div>
+```
+
+---
+
+## Forms and Input Fields
+
+### File upload javascript example
 
 ```javascript
 import ENV from '<your-application-name>/config/environment';
@@ -968,6 +1014,153 @@ async uploadFile(file) {
 }
 ```
 
+### Input and Textarea fields
+
+Use Ember's built-in `<Input>` component instead of a raw `<input>` tag — it automatically updates bound state via `@value`.
+
+```handlebars
+<div class="mb-3">
+  <label for="input-name" class="form-label">Name:</label>
+  <Input
+    id="input-name"
+    class="form-control"
+    @type="text"
+    @value={{this.name}}
+    disabled={{this.isReadOnly}}
+    maxlength="50"
+    placeholder="Enter your name"
+  />
+</div>
+```
+
+```javascript
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class ExampleComponent extends Component {
+  @tracked name = '';
+  @tracked isReadOnly = false;
+}
+```
+
+```handlebars
+<div class="form-check mb-3">
+  <Input
+    id="admin-checkbox"
+    class="form-check-input"
+    @type="checkbox"
+    @checked={{this.isAdmin}}
+    {{on "input" this.validateRole}}
+  />
+  <label for="admin-checkbox" class="form-check-label">Is Admin?</label>
+</div>
+```
+
+```handlebars
+<div class="mb-3">
+  <label for="user-comment" class="form-label">Comment:</label>
+  <Textarea
+    id="user-comment"
+    class="form-control"
+    @value={{this.userComment}}
+    rows="6"
+  />
+</div>
+```
+
+**Key rules for `<Input>` and `<Textarea>`:**
+- `@value`, `@type`, and `@checked` must be passed as **arguments** (with `@`).
+- Use the `{{on}}` modifier for event handling (e.g. `{{on "input" this.handler}}`).
+- Bootstrap styles `form-control` correctly when `disabled` is present
+
+### ember-power-select example
+
+`ember-power-select` is the recommended way to implement searchable, single, and multi-select dropdowns in ember-tribe. It is pre-installed and works alongside Bootstrap 5.x. Use it wherever a native `<select>` would be insufficient — e.g. when you need search/filter, async options, or multi-select.
+
+**Single select (Bootstrap-compatible wrapper):**
+
+```handlebars
+<div class="mb-3">
+  <label class="form-label">Assign Category:</label>
+  <div class="form-control p-0 border-0">
+    <PowerSelect
+      @options={{this.categories}}
+      @selected={{this.selectedCategory}}
+      @onChange={{this.handleCategoryChange}}
+      @placeholder="Select a category"
+      as |category|
+    >
+      {{category.name}}
+    </PowerSelect>
+  </div>
+</div>
+```
+
+```javascript
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ExampleComponent extends Component {
+  @tracked selectedCategory = null;
+
+  categories = [
+    { id: 1, name: 'Design' },
+    { id: 2, name: 'Engineering' },
+    { id: 3, name: 'Marketing' },
+  ];
+
+  @action
+  handleCategoryChange(category) {
+    this.selectedCategory = category;
+  }
+}
+```
+
+**Multi-select variant:**
+
+```handlebars
+<div class="mb-3">
+  <label class="form-label">Assign Tags:</label>
+  <div class="form-control p-0 border-0">
+    <PowerSelectMultiple
+      @options={{this.availableTags}}
+      @selected={{this.selectedTags}}
+      @onChange={{this.handleTagsChange}}
+      @placeholder="Select tags"
+      as |tag|
+    >
+      {{tag.label}}
+    </PowerSelectMultiple>
+  </div>
+</div>
+```
+
+**Async options loaded from the store:**
+
+```handlebars
+<div class="mb-3">
+  <label class="form-label">Select Project:</label>
+  <div class="form-control p-0 border-0">
+    <PowerSelect
+      @options={{this.projects}}
+      @selected={{this.selectedProject}}
+      @onChange={{this.handleProjectChange}}
+      @searchField="name"
+      @placeholder="Search projects..."
+      as |project|
+    >
+      {{project.modules.name}}
+    </PowerSelect>
+  </div>
+</div>
+```
+
+**Key rules for `<PowerSelect>`:**
+- `@options`, `@selected`, and `@onChange` are always required arguments.
+- Use `@searchField` to specify which object property drives the built-in search filter.
+- For multi-select, use `<PowerSelectMultiple>` — the `@onChange` callback receives the full updated array, so assign it directly to your tracked property.
+
 ---
 
 ## Deploying to Junction (Self-Hosted)
@@ -985,19 +1178,6 @@ You can then upload the `dist/` folder to [Junction (open source)](http://localh
 
 ---
 
-## Best Practices
-
-1. **Module Access**: Remember to use `modules.field_name` for backend fields
-2. **npm packages vs ember addons**: Prioritize npm packages over ember addons for better compatibility, when both are offering similar functionality
-3. **Minimal Controllers**: Logic should ideally reside in components and services
-4. **Bootstrap 5.x Foundation**: Responsive, accessible design system
-5. **Use FontAwesome 6.x**: Comprehensive icon library
-6. **Animations**: If required, use animate.css for enhanced user experience. Prefer subtle animations (fadeIn, slideIn). Avoid overwhelming users with excessive animation
-7. **Access Cache**: Leverage EmberData caching with `peekRecord`
-8. **Avoid array manipulations of backend data**: Use backend filtering over frontend array manipulation
-
----
-
 # License
 
 This project is licensed under the [GNU GPL v3 License](LICENSE.md).

package/blueprints/ember-tribe/files/storylang

@@ -109,7 +109,7 @@ function parseHbsFile(filePath) {
   const helpers = [...helpersSet];
 
   const modifiersSet = new Set(
-    [...src.matchAll(/\{\{([\w-]+-modifier|autofocus|tooltip|play-when|[\w-]+)\s/g)]
+    [...src.matchAll(/\{\{([\w-]+-modifier|tooltip|[\w-]+)\s/g)]
       .map(([, name]) => name)
       .filter((n) => !helpers.includes(n) && !builtinHelpers.has(n))
   );
@@ -199,6 +199,65 @@ function buildTypes(routes, components) {
   return [...typeMap.entries()].map(([slug, used_in]) => ({ slug, used_in }));
 }
 
+function compactJSON(value, indent = 2) {
+  function isLeafArray(arr) {
+    if (!Array.isArray(arr) || arr.length === 0) return false;
+    return arr.every((item) => {
+      if (typeof item === 'string') return true;
+      if (item && typeof item === 'object' && !Array.isArray(item)) {
+        const keys = Object.keys(item);
+        return keys.length === 1 && typeof item[keys[0]] === 'string';
+      }
+      return false;
+    });
+  }
+
+  function serialize(val, depth) {
+    const pad = ' '.repeat(indent * depth);
+    const childPad = ' '.repeat(indent * (depth + 1));
+
+    if (val === null) return 'null';
+    if (typeof val !== 'object') return JSON.stringify(val);
+
+    if (Array.isArray(val)) {
+      if (val.length === 0) return '[]';
+      if (isLeafArray(val)) {
+        const items = val.map((item) => {
+          if (typeof item === 'string') return JSON.stringify(item);
+          const k = Object.keys(item)[0];
+          return `{ ${JSON.stringify(k)}: ${JSON.stringify(item[k])} }`;
+        });
+        return '[' + items.join(', ') + ']';
+      }
+      const items = val.map((item) => childPad + serialize(item, depth + 1));
+      return '[\n' + items.join(',\n') + '\n' + pad + ']';
+    }
+
+    const keys = Object.keys(val);
+    if (keys.length === 0) return '{}';
+    const entries = keys.map((k) => childPad + JSON.stringify(k) + ': ' + serialize(val[k], depth + 1));
+    return '{\n' + entries.join(',\n') + '\n' + pad + '}';
+  }
+
+  return serialize(value, 0);
+}
+
+function stripEmpty(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(stripEmpty);
+  }
+  if (obj !== null && typeof obj === 'object') {
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+      if (Array.isArray(v) && v.length === 0) continue;
+      if (v !== null && typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) continue;
+      out[k] = stripEmpty(v);
+    }
+    return out;
+  }
+  return obj;
+}
+
 function mergeByKey(existing, scanned, key) {
   const existingMap = new Map(existing.map((e) => [e[key], e]));
   const scannedMap = new Map(scanned.map((s) => [s[key], s]));
@@ -217,11 +276,11 @@ function mergeByKey(existing, scanned, key) {
   const outputFile = path.join(configDir, 'storylang.json');
 
   if (!fs.existsSync(appDir)) {
-    console.error(`Could not find app/ directory at ${appDir}. Make sure you are running from the root of your Ember project.`);
+    console.error(`Could not find app/ directory at ${appDir}. Make sure you are running from the folder of your Ember project.`);
     process.exit(1);
   }
 
-  console.log('📖  storylang — scanning project files…\n');
+  console.log('Storylang — scanning project files…\n');
 
   const components = buildComponents(appDir);
   const routes = buildRoutes(appDir);
@@ -245,7 +304,7 @@ function mergeByKey(existing, scanned, key) {
   };
 
   if (!fs.existsSync(configDir)) fs.mkdirSync(configDir, { recursive: true });
-  fs.writeFileSync(outputFile, JSON.stringify(merged, null, 2) + '\n', 'utf8');
+  fs.writeFileSync(outputFile, compactJSON(stripEmpty(merged)) + '\n', 'utf8');
 
   console.log(`✅  config/storylang.json updated`);
   console.log(`    routes:     ${routes.length}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-tribe",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "description": "The default blueprint for using Tribe API and Junction within EmberJS.",
   "keywords": [
     "ember-addon"