### Development Environment Setup - Environment Variables Example

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of a local environment configuration file for development.

```bash
# .env.development.local
TARGET_DIRECTORY=/path/to/your/homeassistant/www/streamline-card
```

--------------------------------

### Streamline Card Configuration Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of how to configure the Streamline Card with new variable format.

```yaml
# New (streamline-card)
- type: streamline-card
  template: my_template
  variables:
    entity: light.bedroom
    name: "Bedroom"
```

--------------------------------

### Sensible Defaults Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Demonstrates how to provide default values for template variables.

```yaml
streamline_templates:
  my_card:
    card:
      type: tile
      entity: "[[entity]]"
      name: "[[name]]"
      icon: "[[icon]]"
    default:
      - name: "Device"
      - icon: "mdi:home"
```

--------------------------------

### Development Environment Setup - Install Dependencies

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Bash command to install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Basic Setup: Use the Template

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Demonstrates how to use the 'light_card' template with specific entity and name variables.

```yaml
views:
  - title: Living Room
    cards:
      - type: streamline-card
        template: light_card
        variables:
          entity: light.living_room
          name: "Living Room Light"
```

--------------------------------

### Basic Setup: Reuse the Template

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Shows how to reuse the 'light_card' template multiple times with different variables for multiple lights.

```yaml
views:
  - title: All Lights
    cards:
      - type: streamline-card
        template: light_card
        variables:
          entity: light.bedroom
          name: "Bedroom"
      - type: streamline-card
        template: light_card
        variables:
          entity: light.kitchen
          name: "Kitchen"
      - type: streamline-card
        template: light_card
        variables:
          entity: light.bathroom
          name: "Bathroom"
```

--------------------------------

### Document Variable Requirements Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Shows how to document required and optional variables for a template using comments.

```yaml
streamline_templates:
  light_card:
    # Variables:
    #   entity (required): Light entity ID
    #   name (optional): Display name
    #   icon (optional): Icon name (mdi:...)
    card:
      type: tile
      entity: "[[entity]]"
      name: "[[name]]"
      icon: "[[icon]]"
```

--------------------------------

### Meaningful Template Names Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Illustrates good and bad naming conventions for streamline templates.

```yaml
streamline_templates:
  light_tile_simple: ...
  light_bubble_advanced: ...
```

```yaml
streamline_templates:
  card1: ...
  card2: ...
```

--------------------------------

### Organize Large Template Files Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Illustrates organizing large Streamline Card template files into multiple files using includes.

```yaml
/config/www/templates/
  main.yaml
  lights/
    simple.yaml
    advanced.yaml
  switches/
    button.yaml
    icon.yaml
```

--------------------------------

### Common Use Cases: Light Control Dashboard

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of a light control dashboard using Streamline Card with dynamic styling.

```yaml
streamline_templates:
  room_light:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      name: "[[room_name]]"
      size: 15%
      color_javascript: |
        states['[[entity]]'].state === 'on' ? 'rgb(255, 200, 0)' : 'var(--disabled-text-color)'
      tap_action:
        action: toggle
      long_tap_action:
        action: more-info
    default:
      - room_name: "Room"

views:
  - title: Lighting
    cards:
      - type: streamline-card
        template: room_light
        variables:
          entity: light.bedroom
          room_name: "Bedroom"
          
      - type: streamline-card
        template: room_light
        variables:
          entity: light.kitchen
          room_name: "Kitchen"
```

--------------------------------

### Grid Options Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of grid layout options for positioning cards.

```yaml
grid_options:
  columns: 2
  rows: 1
```

--------------------------------

### Use Inline Templates

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using inline Streamline Card templates for simple or infrequent use cases.

```yaml
# OK for 1-2 instances
- type: streamline-card
  template: unique_template
```

--------------------------------

### Template Patterns: Template with Multiple Configurations Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Shows two examples of using the 'flexible_card' template: one as a tile with a toggle, and another as a tile with a slider.

```yaml
# As tile with toggle
- type: streamline-card
  template: flexible_card
  variables:
    entity: light.bedroom
    name: "Light"
    card_type: tile
    show_toggle: 'true'

# As button with slider
- type: streamline-card
  template: flexible_card
  variables:
    entity: light.kitchen
    name: "Kitchen"
    card_type: tile
    show_slider: 'true'
```

--------------------------------

### Variable Types Guide: String Variables

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using string variables in Streamline Card templates and their usage.

```yaml
streamline_templates:
  text_template:
    card:
      type: custom:card
      label: "[[label]]"
      description: "[[description]]"

# Usage
variables:
  label: "My Label"
  description: "My Description"
```

--------------------------------

### Variable Types Guide: Number Variables

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using number variables in Streamline Card templates and their usage.

```yaml
streamline_templates:
  number_template:
    card:
      type: custom:card
      brightness: "[[brightness]]"
      count: "[[count]]"

# Usage
variables:
  brightness: 255
  count: 5
```

--------------------------------

### Binary Sensors Use Case

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using Streamline Card to display the status of binary sensors.

```yaml
streamline_templates:
  sensor_status:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      name: "[[sensor_name]]"
      state_display_javascript: |
        const state = states['[[entity]]'].state;
        return state === 'on' ? '✓ Active' : '✗ Inactive';
      color_javascript: |
        states['[[entity]]'].state === 'on' ? 'green' : 'red'
    default:
      - sensor_name: "Sensor"

views:
  - title: Sensors
    cards:
      - type: streamline-card
        template: sensor_status
        variables:
          entity: binary_sensor.motion
          sensor_name: "Motion"
```

--------------------------------

### VisibilityConfig Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of VisibilityConfig.

```javascript
{
  visibility: {
    condition: 'state',
    entity: 'light.bedroom',
    state: 'on'
  }
}
```

--------------------------------

### Example JavaScript Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

An example demonstrating how to use the JavaScript context to dynamically set a color.

```javascript
{ color_javascript: "states['light.bedroom'].state === 'on' ? 'red' : 'blue'" }
```

--------------------------------

### getConfigElement Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Example of how to use the static getConfigElement method.

```javascript
const editor = StreamlineCard.getConfigElement();
```

--------------------------------

### Template File Includes Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates how to include other template files using YAML `!include` syntax.

```yaml
light_templates: !include light_templates.yaml
switch_templates: !include switch_templates.yaml
```

```yaml
# Load all templates from subdirectory
all_templates: !include templates/
```

```yaml
# /config/www/templates/main.yaml
lights: !include ./lights/all.yaml
switches: !include ../switches.yaml
```

--------------------------------

### Test Template Evaluation

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of testing Streamline Card template evaluation with sample configuration and variables.

```javascript
// Create test config
const templateConfig = {
  card: { type: 'tile', entity: '[[entity]]' }
};
const variables = { entity: 'light.bedroom' };

// Evaluate
const result = evaluateVariables(templateConfig, variables);
console.log(result); // Check output
```

--------------------------------

### Multi-line JavaScript Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates the use of multi-line JavaScript strings for complex styling logic.

```yaml
templates:
  complex_card:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      styles_javascript: |
        const state = states['[[entity]]'].state;
        return `
          .button {
            color: ${state === 'on' ? 'yellow' : 'gray'};
            opacity: ${state === 'on' ? 1 : 0.5};
          }
        `;
```

--------------------------------

### Creating Remote Template File Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Provides an example of how to create a remote template file in the `/config/www/streamline-card/` directory.

```yaml
light_template:
  card:
    type: tile
    entity: "[[entity]]"
default:
  - name: "Light"

switch_template:
  card:
    type: custom:button-card
    entity: "[[entity]]"
default:
  - name: "Switch"
```

```yaml
light/simple:
  card:
    type: tile
    entity: "[[entity]]"

light/advanced:
  card:
    type: custom:button-card
    entity: "[[entity]]"
    tap_action:
      action: call-service
      service: light.toggle
      service_data:
        entity_id: "[[entity]]"
```

--------------------------------

### Multi-line String Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates how to define multi-line strings using the '|' indicator.

```yaml
javascript_code: |
  const state = states['light.bedroom'].state;
  return state === 'on' ? 'yellow' : 'gray';
```

--------------------------------

### Complete Configuration Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

A comprehensive example demonstrating the use of streamline-card with a smart light template, including variables and multiple card instances.

```yaml
streamline_templates:
  smart_light:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      name: "[[name]]"
      icon: "[[icon]]"
      size: 15%
      color_javascript: |
        const state = states['[[entity]]'].state;
        const bright = states['[[entity]]'].attributes.brightness || 0;
        return state === 'on' ? `rgba(255, 200, 0, ${bright/255})` : 'rgba(100, 100, 100, 0.5)';
      tap_action:
        action: toggle
      double_tap_action:
        action: more-info
    default:
      - icon: mdi:light
      - name: "Light"

views:
  - title: Lighting
    cards:
      - type: streamline-card
        template: smart_light
        variables:
          entity: light.bedroom
          name: "Bedroom"
          icon: mdi:bed

      - type: streamline-card
        template: smart_light
        variables:
          entity: light.kitchen
          name: "Kitchen"
          icon: mdi:kitchen-outline

      - type: streamline-card
        template: smart_light
        variables:
          entity: light.living_room
          name: "Living Room"
          icon: mdi:sofa
```

--------------------------------

### Enable Debug Logging

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of enabling debug logging for Streamline Card in the browser's developer console.

```javascript
// In browser DevTools Console
const module = await import('evaluateConfig-helper.js');
console.log('Config:', module.default(...));
```

--------------------------------

### Example YAML

Source: https://github.com/brunosabot/streamline-card/blob/main/examples/template_objects.md

YAML configuration demonstrating dynamic card generation using JavaScript within streamline-card.

```yaml
default:
  entity: sensor.number_lights_on
card:
  type: grid
  square: false
  card_mod:
    style: |
      ha-card {
        padding: 20px !important;
      }
  cards: []
  cards_javascript: |
    const onLightEntities = states['[[entity]]'].attributes.lights_on_entity || [];
    
    return onLightEntities.map(entity => ({
      type: 'custom:button-card', 
      template: 'light_brightness',
      entity: entity
    }));
  columns: 1
  grid_options:
    columns: full
```

--------------------------------

### getGridOptions Method Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Demonstrates how to get the grid layout options from the inner card.

```javascript
const gridOpts = card.getGridOptions();
console.log(gridOpts.columns); // e.g., 2
```

--------------------------------

### String Variable Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of defining and using a string variable in templates.

```yaml
variables:
  name: "Living Room Light"
  icon: "mdi:light"
```

```yaml
# Template
name: "[[name]]"
# Result
name: "Living Room Light"
```

--------------------------------

### GridOptions Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of GridOptions.

```javascript
{
  grid_options: {
    columns: 2,
    rows: 1
  }
}
```

--------------------------------

### Extract to Remote Templates

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using remote YAML files for Streamline Card templates when a template is used three or more times.

```yaml
# Use remote YAML when template used 3+ times
streamline_templates: !include /local/templates.yaml
```

--------------------------------

### Template Patterns: Entity Selector Template Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Provides examples of using the 'entity_card' template for a light and a fan, specifying different icons.

```yaml
- type: streamline-card
  template: entity_card
  variables:
    entity: light.bedroom
    name: "Light"
    icon: "mdi:lamp"

- type: streamline-card
  template: entity_card
  variables:
    entity: switch.fan
    name: "Fan"
    icon: "mdi:fan"
```

--------------------------------

### Pattern 5: Nested Configuration Objects

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using nested objects for complex configurations in Streamline Card.

```yaml
streamline_templates:
  advanced_card:
    card:
      type: custom:custom-card
      entity: "[[entity]]"
      actions: "[[actions]]"
      styles: "[[styles]]"
    default:
      - actions:
          - type: toggle
          - type: more-info
      - styles:
          container:
            padding: 20px
            border-radius: 8px
```

```yaml
- type: streamline-card
  template: advanced_card
  variables:
    entity: light.bedroom
    actions:
      - type: call-service
        service: light.turn_on
      - type: more-info
    styles:
      container:
        background: blue
```

--------------------------------

### formatConfig() example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCardEditor.md

Example usage of the formatConfig static method.

```javascript
const formatted = StreamlineCardEditor.formatConfig({
  template: 'light_card',
  variables: [{ entity: 'light.bedroom' }]
});
// Returns: { template: 'light_card', variables: { entity: 'light.bedroom' } }
```

--------------------------------

### CardConfig Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of a CardConfig object.

```javascript
{
  type: 'streamline-card',
  template: 'light_card',
  variables: {
    entity: 'light.bedroom',
    name: 'Bedroom Light'
  },
  grid_options: {
    columns: 2,
    rows: 1
  }
}
```

--------------------------------

### Template Composition Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

Example showing how to compose templates using includes and merging.

```yaml
lights: !include light_templates.yaml
switches: !include switch_templates.yaml
all_templates: !merge
```

--------------------------------

### Check Lovelace Config

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of checking Streamline Card templates within the Lovelace configuration using the browser's developer console.

```javascript
// In browser console
const { getLovelace } = await import('getLovelace-helper.js');
const ll = getLovelace();
console.log('Templates:', ll.config.streamline_templates);
```

--------------------------------

### Grid Options in Card Configuration

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of how to apply grid options within a card configuration.

```yaml
type: streamline-card
template: large_tile
grid_options:
  columns: 2
  rows: 2
```

--------------------------------

### Number Variable Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of defining and using a number variable in templates.

```yaml
variables:
  brightness: 255
  hue: 45
```

```yaml
# Template
brightness: "[[brightness]]"
# Result
brightness: 255
```

--------------------------------

### Pattern 6: Computed Properties with JavaScript

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of calculating card properties dynamically using JavaScript within Streamline Card.

```yaml
streamline_templates:
  computed_card:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      name_javascript: |
        const state = states['[[entity]]'];
        const friendly_name = state.attributes.friendly_name || '[[entity]]';
        return friendly_name.toUpperCase();
      
      state_display_javascript: |
        const state = states['[[entity]]'].state;
        const attrs = states['[[entity]]'].attributes;
        if (attrs.unit_of_measurement) {
          return `${state}${attrs.unit_of_measurement}`;
        }
        return state;
      
      icon_javascript: |
        const state = states['[[entity]]'].state;
        if (state === 'on') return 'mdi:lightbulb-on';
        return 'mdi:lightbulb-off';
```

--------------------------------

### Object Variable Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Shows how object variables are defined and used. Objects are JSON-serialized and can be quoted.

```yaml
variables:
  style:
    color: red
    background: blue
  tap_action:
    action: toggle
```

```yaml
# Template
style: "[[style]]"
# Result
style: {"color":"red","background":"blue"}

# Template
tap_action: '[[tap_action]]'
# Result
tap_action: {"action":"toggle"}
```

--------------------------------

### Start Development Mode

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Starts the development server, watching for file changes and automatically rebuilding the card. Optionally outputs directly to a Home Assistant instance for live testing.

```bash
pnpm dev
```

--------------------------------

### Dynamic Grid of Lights Usage Example

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of how to use the 'lights_grid' streamline-card template.

```yaml
# Using the template:
- type: custom:streamline-card
  template: lights_grid
  variables:
    - entity: sensor.active_lights
```

--------------------------------

### Example Light Card Template

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

An example of a basic template for a light card, showing how variables are used.

```yaml
my_light_template:
  card:
    type: custom:bubble-card
    name: "[[room_name]] Light" # This will be filled in later
    icon: "[[light_icon]]" # This will be filled in later
    entity: "[[light_entity]]" # This will be filled in later
```

--------------------------------

### Bubble Light Template YAML

Source: https://github.com/brunosabot/streamline-card/blob/main/examples/bubble_light.md

Example YAML configuration for the bubble light template, showing default values and card customization options.

```yaml
default:
  - name: ''
  - icon: mdi:ceiling-light
  - type: slider
card:
  type: custom:bubble-card
  card_type: button
  button_type: '[[type]]'
  entity: '[[entity]]'
  name: '[[name]]'
  icon: '[[icon]]'
  columns: 2
  card_layout: large
  tap_action:
    action: toggle
  double_tap_action:
    action: more-info
  hold_action:
    action: more-info
```

--------------------------------

### And/Or Logic Visibility

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of using 'and' or 'or' logic for multiple visibility conditions.

```yaml
visibility:
  condition: and
  conditions:
    - condition: state
      entity: light.bedroom
      state: 'on'
    - condition: state
      entity: switch.party_mode
      state: 'on'
```

--------------------------------

### Complex Configuration Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

Example demonstrating complex configuration with tap actions and styles, including default values.

```yaml
streamline_templates:
  advanced_card:
    card:
      type: custom:card
      tap_action: "[[tap_action]]"
      style: "[[style]]"
    default:
      - tap_action:
          action: toggle
      - style:
          color: blue
```

--------------------------------

### loadRemoteTemplates() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/TemplateLoader.md

Demonstrates how to use loadRemoteTemplates() for initial loading and subsequent cached calls.

```javascript
import { loadRemoteTemplates } from './templateLoader.js';

// First call - returns Promise
const loaderPromise = loadRemoteTemplates();
loaderPromise.then(() => {
  console.log('Templates loaded');
});

// Subsequent calls - returns cached result
const cached = loadRemoteTemplates();
console.log(cached); // true
```

--------------------------------

### Migration from Decluttering Card

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Shows the syntax conversion from decluttering-card to Streamline Card.

```yaml
# Old (decluttering-card)
- type: custom:decluttering-card
  template: my_template
  variables:
    - entity: light.bedroom
    - name: "Bedroom"
```

--------------------------------

### getIsTemplateLoaded() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/TemplateLoader.md

Illustrates how to check the current state of template loading.

```javascript
import { getIsTemplateLoaded } from './templateLoader.js';

const state = getIsTemplateLoaded();
if (state === true) {
  console.log('Templates ready');
} else if (state === false) {
  console.log('Failed to load templates');
} else if (state === null) {
  console.log('Not yet attempted');
}
```

--------------------------------

### revalidateTemplates() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/TemplateLoader.md

Example showing the internal usage of revalidateTemplates for detecting template updates.

```javascript
// Called internally after initial template load
// Detects if templates.yaml has been updated
// StreamlineCard automatically reloads if changes detected
```

--------------------------------

### Neither Card Nor Element Defined - Card Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/errors.md

Example of how to define a 'card' section within a template.

```yaml
card:
  type: tile
  entity: "[[entity]]"
```

--------------------------------

### Usage Example

Source: https://github.com/brunosabot/streamline-card/blob/main/examples/entity_list_template.md

This YAML shows how to use the streamline-card with a defined template and a list of variables. Each item in the 'list' variable corresponds to a card, with 'entity' and 'name' being passed to the template.

```yaml
type: custom:streamline-card
template: entitie_in_entities
variables:
  list:
    - entity: binary_sensor.answwr_com
      name: Porte d'Entrée
    - entity: binary_sensor.answwr_com
      name: Porte du Couloir
    # ...
```

--------------------------------

### Variable Types Guide: Boolean Variables

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using boolean variables in Streamline Card templates and their usage.

```yaml
streamline_templates:
  bool_template:
    card:
      type: custom:card
      show_name: "[[show_name]]"
      show_state: "[[show_state]]"

# Usage
variables:
  show_name: true
  show_state: false
```

--------------------------------

### Example YAML for Entities Card

Source: https://github.com/brunosabot/streamline-card/blob/main/examples/entity_list_template.md

This YAML configuration demonstrates how to use streamline-card with JavaScript to dynamically generate a list of entities. Each entity in the list can have its own specific properties, and styling can be applied using card-mod.

```yaml
card:
  type: entities
  entities_javascript: |
    return variables.list.map(({entity, name}) => ({
      entity: entity,
      name: name,
      secondary_info: 'last-changed',
      state_color: true,
      card_mod:
        style:
          '.': "
            hui-generic-entity-row {
              margin: -8px 0;
            }
            hui-generic-entity-row$: |
              .secondary {
                margin-top: -2px !important;
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                letter-spacing: 0.4px;
              }
              .secondary, ha-relative-time {
                color: var(--primary-text-color) !important;
              }"
    }));
```

--------------------------------

### Boolean Variable Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates how boolean variables are defined and used in YAML templates. Booleans are unquoted.

```yaml
variables:
  show_name: true
  vertical: false
```

```yaml
# Template
show_name: "[[show_name]]"
# Result
show_name: true
```

--------------------------------

### YAML Configuration - light_template.yaml

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of a template file when using YAML configuration for templates.

```yaml
default:
  - light_icon: mdi:ceiling-light
card:
  type: custom:bubble-card
  name: "[[room_name]] Light"
  icon: "[[light_icon]]"
  entity: "[[light_entity]]"
```

--------------------------------

### Neither Card Nor Element Defined - Element Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/errors.md

Example of how to define an 'element' section within a template.

```yaml
element:
  type: custom:my-element
  data: "[[value]]"
```

--------------------------------

### setConfig Method Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Shows how to set the configuration for the StreamlineCard, including template and variables.

```javascript
card.setConfig({
  type: 'streamline-card',
  template: 'light_card',
  variables: {
    entity: 'light.living_room',
    name: 'Living Room Light'
  }
});
```

--------------------------------

### Light Control Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

Example of controlling a light card using template variables and JavaScript for color.

```yaml
streamline_templates:
  light_card:
    card:
      type: tile
      entity: "[[entity]]"
      color_javascript: |
        states['[[entity]]'].state === 'on' ? 'yellow' : 'gray'
```

--------------------------------

### Variable Types Guide: Object Variables

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using object variables in Streamline Card templates and their usage, including JSON serialization.

```yaml
streamline_templates:
  object_template:
    card:
      type: custom:custom-card
      tap_action: "[[tap_action]]"
      style: "[[style]]"

# Usage
variables:
  tap_action:
    action: toggle
  style:
    color: blue
    opacity: 0.8
```

```yaml
tap_action: "[[tap_action]]"  # Double quotes
style: '[[style]]'             # Single quotes (alternative)
```

--------------------------------

### State Condition Visibility

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Example of configuring card visibility based on the state of an entity.

```yaml
visibility:
  condition: state
  entity: light.bedroom
  state: 'on'
```

--------------------------------

### getRemoteTemplates() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/TemplateLoader.md

Shows how to retrieve the currently loaded remote templates.

```javascript
import { getRemoteTemplates } from './templateLoader.js';

const templates = getRemoteTemplates();
console.log(Object.keys(templates)); // ['light_card', 'switch_card', ...]
```

--------------------------------

### StreamlineCardEditor Constructor Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCardEditor.md

Instantiates a new StreamlineCardEditor.

```javascript
const editor = new StreamlineCardEditor();
```

--------------------------------

### Climate Control Use Case

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of using Streamline Card to create a climate control display.

```yaml
streamline_templates:
  climate_display:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      name: "[[device_name]]"
      label_javascript: |
        const climate = states['[[entity]]'];
        const temp = climate.attributes.current_temperature;
        const target = climate.attributes.target_temperature;
        return `${temp}°C → ${target}°C`;
      tap_action:
        action: more-info
    default:
      - device_name: "Climate"

views:
  - title: Climate
    cards:
      - type: streamline-card
        template: climate_display
        variables:
          entity: climate.living_room
          device_name: "Living Room"
```

--------------------------------

### Example 1: Simple Light Card - Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Shows how to use the defined simple light card template.

```yaml
# Using the template:
- type: custom:streamline-card
  template: light_template
  variables:
    - name: Living Room Light
    - entity: light.living_room
    - type: slider
```

--------------------------------

### Test JavaScript in Browser Console

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Example of testing JavaScript logic for Streamline Card in the browser's developer console.

```javascript
// In DevTools Console
states = { 'light.bedroom': { state: 'on', attributes: {} } };
const result = (states['light.bedroom'].state === 'on' ? 'red' : 'blue');
console.log(result); // Verify output
```

--------------------------------

### JavaScript with Variables Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Shows how template variables can be accessed and used within JavaScript code to control card properties.

```yaml
templates:
  dynamic_card:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      icon_javascript: |
        variables.show_icon === 'true' ? '[[icon]]' : 'mdi:eye-off'
default:
  - show_icon: 'true'
```

--------------------------------

### Template Patterns: Conditional with JavaScript Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Demonstrates using the 'smart_light' template for a bedroom light, where the color and label will update dynamically.

```yaml
- type: streamline-card
  template: smart_light
  variables:
    entity: light.bedroom
    name: "Bedroom"
```

--------------------------------

### Variable Syntax in Templates

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates the syntax for using variables within templates.

```yaml
card:
  entity: "[[entity]]"
  name: "[[name]]"
  icon: "[[icon]]"
```

--------------------------------

### Development Environment Setup - Clone Repository

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Bash commands to clone the streamline-card repository and navigate into the directory.

```bash
git clone https://github.com/brunosabot/streamline-card.git
cd streamline-card
```

--------------------------------

### Example 2: Weather Card with Dynamic Styling - Usage

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Shows how to use the defined weather card template.

```yaml
# Using the template:
- type: custom:streamline-card
  template: weather_card
  variables:
    - name: Current Weather
    - entity: weather.home
```

--------------------------------

### Variables Example (Array Format)

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of Variables in Array Format.

```typescript
[
  { entity: 'light.bedroom' },
  { name: 'Bedroom Light' },
  { icon: 'mdi:light' }
]
```

--------------------------------

### Variables Example (Object Format)

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of Variables in Object Format.

```typescript
{
  entity: 'light.bedroom',
  name: 'Bedroom Light',
  icon: 'mdi:light'
}
```

--------------------------------

### getEntitySchema() example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCardEditor.md

Example usage of the getEntitySchema static method.

```javascript
const schema = StreamlineCardEditor.getEntitySchema('entity');
// Returns: { name: 'entity', selector: { entity: {} } }
```

--------------------------------

### exampleTile.js Export

Source: https://github.com/brunosabot/streamline-card/blob/main/coverage/src/templates/exampleTile.js.html

Default export for the exampleTile configuration.

```javascript
export default {
  example_tile: {
    card: {
      entity: "[[entity]]",
      features_position: "bottom",
      type: "tile",
      vertical: false,
    },
  },
};
```

--------------------------------

### getTemplateSchema() example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCardEditor.md

Example usage of the getTemplateSchema static method.

```javascript
const schema = StreamlineCardEditor.getTemplateSchema(['light_card', 'switch_card']);
// Returns: {
//   name: 'template',
//   selector: {
//     select: {
//       mode: 'dropdown',
//       options: [
//         { label: 'light_card', value: 'light_card' },
//         { label: 'switch_card', value: 'switch_card' }
//       ],
//       sort: true
//     }
//   },
//   title: 'Template'
// }
```

--------------------------------

### Pattern 8: Template Includes - Lights and Switches Files

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/usage-guide.md

Organizing templates into separate files for lights and switches.

```yaml
simple_light:
  card:
    type: tile
    entity: "[[entity]]"

advanced_light:
  card:
    type: custom:bubble-card
    entity: "[[entity]]"
```

```yaml
simple_switch:
  card:
    type: tile
    entity: "[[entity]]"
```

--------------------------------

### Basic JavaScript Property Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Shows a basic JavaScript property (`color_javascript`) that dynamically sets a color based on the entity's state.

```yaml
templates:
  smart_light:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      color_javascript: "states['[[entity]]'].state === 'on' ? 'yellow' : 'gray'"
```

--------------------------------

### Creating Your First Template - Use the template in a view

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

Example of using a defined template in a Lovelace view.

```yaml
views:
  - title: Lighting
    cards:
      - type: streamline-card
        template: light_card
        variables:
          entity: light.bedroom
          name: "Bedroom Light"
```

--------------------------------

### JavaScript Template Evaluation Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Illustrates how variables are evaluated within JavaScript code, used here to display the entity's state and brightness.

```yaml
templates:
  conditional_light:
    card:
      type: custom:button-card
      entity: "[[entity]]"
      label_javascript: |
        states['[[entity]]'].state === 'on' 
          ? 'On (' + states['[[entity]]'].attributes.brightness + ')' 
          : 'Off'
```

--------------------------------

### editMode Property Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Example of setting the card to edit mode.

```javascript
card.editMode = true; // Enter edit mode
```

--------------------------------

### TemplateConfig Example (element template)

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of a TemplateConfig object using an element template.

```javascript
{
  element: {
    type: 'custom:my-element',
    data: '[[value]]'
  },
  default: [{ value: 'default' }]
}
```

--------------------------------

### Multiple Variable Formats (Object and Array)

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates that variables can be provided in either object or array format, both being equivalent internally.

```yaml
variables:
  entity: light.bedroom
  name: Bedroom Light
```

```yaml
variables:
  - entity: light.bedroom
  - name: Bedroom Light
```

--------------------------------

### TemplateConfig Example (card template)

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/types.md

Example of a TemplateConfig object using a card template.

```javascript
{
  card: {
    type: 'tile',
    entity: '[[entity]]',
    name: '[[name]]'
  },
  default: {
    name: 'Default Name'
  }
}
```

--------------------------------

### hass Property Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Example of setting the Home Assistant object for the card.

```javascript
card.hass = {
  states: { 'light.bedroom': { state: 'on' } },
  user: { id: '123', name: 'User' },
  areas: {},
  config: {}
};
```

--------------------------------

### UI Configuration - Adding Templates

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of how to add templates directly in the UI's raw configuration editor.

```yaml
streamline_templates:
  my_light_template:
    default:
      - light_icon: mdi:ceiling-light
    card:
      type: custom:bubble-card
      name: "[[room_name]] Light"
      icon: "[[light_icon]]"
      entity: "[[light_entity]]"
```

--------------------------------

### getCardSize Method Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/StreamlineCard.md

Example of retrieving the grid size of the inner card.

```javascript
const size = card.getCardSize(); // returns 1-4 typically
```

--------------------------------

### Alarm Template Example

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of using a custom streamline-card template for an alarm control panel.

```yaml
- type: custom:streamline-card
  template: alarm_template
  variables:
    - name: House Alarm
    - entity: alarm_control_panel.home_alarm
```

--------------------------------

### Splitting Configuration with !include

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of splitting Streamline Card configuration into multiple files using the !include tag.

```yaml
# streamline_templates.yaml
light_template: !include templates/light_template.yaml
weather_template: !include templates/weather_template.yaml
```

```yaml
# templates/light_template.yaml
default:
  - light_icon: mdi:ceiling-light
card:
  type: custom:bubble-card
  name: "[[room_name]] Light"
  icon: "[[light_icon]]"
  entity: "[[light_entity]]"
```

--------------------------------

### Template Structure - Element Example

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of the 'element' key for picture-elements configurations within a template.

```yaml
element: # Use 'element' for picture-elements
  type: icon
  icon: "[[icon]]"
```

--------------------------------

### fireEvent() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/Helpers.md

Example of how to use the fireEvent function to dispatch custom events.

```javascript
import fireEvent from './fireEvent-helper.js';

const event = fireEvent(element, 'config-changed', { 
  config: { type: 'tile' } 
});

// Or without detail
fireEvent(element, 'card-updated', {});
```

--------------------------------

### getLovelaceCast() Example

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/api-reference/Helpers.md

Example of how to use the getLovelaceCast function to retrieve Lovelace configuration.

```javascript
import { getLovelaceCast } from './getLovelace-helper.js';

const lovelace = getLovelaceCast();
if (lovelace) {
  console.log('Lovelace config found');
}
```

--------------------------------

### Creating Your First Template - Add template to Lovelace config

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/README.md

Example of adding a template to the Lovelace configuration.

```yaml
streamline_templates:
  light_card:
    card:
      type: tile
      entity: "[[entity]]"
      name: "[[name]]"
    default:
      - name: "Light"
```

--------------------------------

### Template Structure - Card Example

Source: https://github.com/brunosabot/streamline-card/blob/main/README.md

Example of the 'card' key for normal card configurations within a template.

```yaml
card: # Use 'card' for normal cards
  type: custom:bubble-card
  name: "[[room_name]] Light"
  icon: "[[light_icon]]"
  entity: "[[light_entity]]"
```

--------------------------------

### Empty Variables Before and After Save

Source: https://github.com/brunosabot/streamline-card/blob/main/_autodocs/configuration.md

Demonstrates how empty string variables are removed when saving the configuration.

```yaml
# Before save (in editor)
variables:
  entity: light.bedroom
  name: ""
  icon: ""

# After save (saved to configuration)
variables:
  entity: light.bedroom
```