rook-cli 1.3.2 → 1.3.5

package/rook-framework/snippets/rk-card.liquid

@@ -0,0 +1,64 @@
+{% doc %}
+  Snippet: RkCard
+  Container flexível para agrupar conteúdos e ações sobre um único tópico.
+
+  @param {string} [as] - Tag do container principal (ex: 'div', 'article', 'a'). Padrão: 'div'
+  @param {string} [href] - URL caso o card seja um link (exige as: 'a').
+  @param {boolean} [interactive] - Se true (ativo por padrão em links), adiciona efeito de hover e focus.
+  @param {string} [custom_class] - Classes CSS customizadas para o root.
+  @param {string} [header] - HTML para o cabeçalho (título/descrição).
+  @param {string} [content] - HTML para o corpo principal (dados/mídias).
+  @param {string} [footer] - HTML para o rodapé (ações/metadados).
+
+  @example
+  {% capture card_header %}
+    <h3 class="rk-card__title">Título do Card</h3>
+    <p class="rk-card__description">Descrição de apoio</p>
+  {% endcapture %}
+  
+  {% render 'rk-card', 
+    as: 'article', 
+    interactive: true, 
+    header: card_header, 
+    content: '<p>Corpo</p>', 
+    footer: '<button>Ação</button>' 
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_as = as | default: 'div'
+  assign is_link = false
+  
+  if t_as == 'a' and href != blank
+    assign is_link = true
+  endif
+
+  # Set interactive state
+  assign is_interactive = false
+  if interactive == true or interactive == 'true' or is_link
+    assign is_interactive = true
+  endif
+-%}
+
+<{{ t_as }}
+  class="rk-card{% if is_interactive %} rk-card--interactive{% endif %}{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if is_link %}href="{{ href }}"{% endif %}
+>
+  {%- if header != blank -%}
+    <div class="rk-card__header">
+      {{ header }}
+    </div>
+  {%- endif -%}
+
+  {%- if content != blank -%}
+    <div class="rk-card__content">
+      {{ content }}
+    </div>
+  {%- endif -%}
+
+  {%- if footer != blank -%}
+    <div class="rk-card__footer">
+      {{ footer }}
+    </div>
+  {%- endif -%}
+</{{ t_as }}>

package/rook-framework/snippets/rk-carousel.liquid

@@ -0,0 +1,74 @@
+{% doc %}
+  Snippet: RkCarousel
+  Renders a powerful Slider/Carousel powered by Swiper.js.
+  The `<rk-carousel-element>` dynamically loads the library and handles init/destroy lifecycle.
+
+  @param {string} content - HTML content. MUST yield elements with class `swiper-slide`
+  @param {string} [id] - Unique ID
+  @param {string} [custom_class] - Extra CSS classes for the root wrapper
+  @param {boolean} [show_arrows] - Show previous/next buttons (default: true)
+  @param {boolean} [show_pagination] - Show bottom pagination dots (default: true)
+  @param {boolean} [loop] - Enable infinite loop
+  @param {boolean} [autoplay] - Enable automatic sliding
+  @param {number} [autoplay_delay] - Delay between slides in ms for autoplay (default: 3000)
+  @param {number} [gap] - Space between slides in pixels (default: 16)
+  @param {number} [desktop_items] - Slides to show on desktop >= 768px (default: 3)
+  @param {number} [mobile_items] - Slides to show on mobile < 768px (default: 1)
+  @param {boolean} [free_mode] - Free scroll mode instead of snap-to-slide
+  @param {string} [options_json] - Escaped JSON string for raw Swiper options override
+
+  @example
+  {% capture carousel_slides %}
+    <div class="swiper-slide rk-carousel__slide">Slide 1</div>
+    <div class="swiper-slide rk-carousel__slide">Slide 2</div>
+  {% endcapture %}
+  
+  {% render 'rk-carousel', 
+    content: carousel_slides, 
+    show_arrows: true, 
+    desktop_items: 4, 
+    loop: true 
+  %}
+{% enddoc %}
+
+{%- liquid
+  assign t_show_arrows = show_arrows | default: true, allow_false: true
+  assign t_show_pagination = show_pagination | default: true, allow_false: true
+  assign t_loop = loop | default: false
+  assign t_autoplay = autoplay | default: false
+  assign t_gap = gap | default: 16
+  assign t_desktop_items = desktop_items | default: 3
+  assign t_mobile_items = mobile_items | default: 1
+-%}
+
+<rk-carousel-element
+  class="rk-carousel{% if custom_class %} {{ custom_class }}{% endif %}"
+  {% if id %}id="{{ id }}"{% endif %}
+  data-gap="{{ t_gap }}"
+  data-desktop-items="{{ t_desktop_items }}"
+  data-mobile-items="{{ t_mobile_items }}"
+  {% if t_loop %}data-loop="true"{% endif %}
+  {% if free_mode %}data-free-mode="true"{% endif %}
+  {% if t_autoplay %}
+    data-autoplay="true"
+    {% if autoplay_delay %}data-autoplay-delay="{{ autoplay_delay }}"{% endif %}
+  {% endif %}
+  {% if options_json %}data-swiper-options="{{ options_json | escape }}"{% endif %}
+>
+  <div class="swiper rk-carousel__swiper">
+    <div class="swiper-wrapper rk-carousel__wrapper">
+      {{ content }}
+    </div>
+
+    {%- if t_show_arrows -%}
+      <div class="swiper-button-prev rk-carousel__nav rk-carousel__nav--prev"></div>
+      <div class="swiper-button-next rk-carousel__nav rk-carousel__nav--next"></div>
+    {%- endif -%}
+
+    {%- if t_show_pagination -%}
+      <div class="rk-carousel__pagination-wrapper">
+        <div class="swiper-pagination rk-carousel__pagination"></div>
+      </div>
+    {%- endif -%}
+  </div>
+</rk-carousel-element>

package/rook-framework/snippets/rk-checkbox.liquid

@@ -0,0 +1,34 @@
+{% doc %}
+  Snippet: RkCheckbox
+  Renders a checkbox input with label.
+
+  @param {string} name - Input name
+  @param {string} id - Unique id
+  @param {string} label - Label text
+  @param {string} [value] - Input value (default: 'on')
+  @param {boolean} [checked] - Pre-checked state
+  @param {boolean} [disabled] - Disabled state
+  @param {boolean} [required] - Required state
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-checkbox', name: 'agree', id: 'agree', label: 'Concordo com os termos' %}
+{% enddoc %}
+
+{%- liquid
+  assign cb_value = value | default: 'on'
+-%}
+
+<label class="rk-checkbox{% if custom_class %} {{ custom_class }}{% endif %}" for="{{ id }}">
+  <input
+    type="checkbox"
+    class="rk-checkbox__input"
+    id="{{ id }}"
+    name="{{ name }}"
+    value="{{ cb_value }}"
+    {% if checked %}checked{% endif %}
+    {% if disabled %}disabled{% endif %}
+    {% if required %}required aria-required="true"{% endif %}
+  >
+  <span class="rk-checkbox__label">{{ label }}</span>
+</label>

package/rook-framework/snippets/rk-collapsible.liquid

@@ -0,0 +1,52 @@
+{% doc %}
+  Snippet: RkCollapsible
+  Renders a Collapsible element (Shadcn/UI pattern).
+  Unlike Accordion (details/summary), this uses standard divs and JS for exact height animation control and WAI-ARIA roles.
+
+  @param {string} id - Unique id for aria linking
+  @param {string} trigger - HTML content for the trigger button
+  @param {string} content - HTML content to hide/show
+  @param {boolean} [open] - Should it render open initially? (default: false)
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture coll_trigger %}
+    <span>Mais Informações</span>
+    <span class="rk-collapsible__icon">⬇️</span>
+  {% endcapture %}
+  {% capture coll_content %}
+    <p>Aqui você encontra todas as informações sobre a garantia e devoluções.</p>
+  {% endcapture %}
+  {% render 'rk-collapsible', id: 'info-1', trigger: coll_trigger, content: coll_content %}
+{% enddoc %}
+
+{%- liquid
+  assign t_open = open | default: false
+-%}
+
+<rk-collapsible-element
+  id="{{ id }}"
+  class="rk-collapsible{% if custom_class %} {{ custom_class }}{% endif %}"
+  data-open="{{ t_open }}"
+>
+  {%- comment -%} Trigger {%- endcomment -%}
+  <button
+    type="button"
+    class="rk-collapsible__trigger"
+    aria-expanded="{{ t_open }}"
+    aria-controls="{{ id }}-content"
+  >
+    {{ trigger }}
+  </button>
+
+  {%- comment -%} Content Animated Wrapper {%- endcomment -%}
+  <div
+    id="{{ id }}-content"
+    class="rk-collapsible__content{% if t_open %} rk-collapsible__content--expanded{% endif %}"
+    {% unless t_open %}hidden{% endunless %}
+  >
+    <div class="rk-collapsible__content-inner">
+      {{ content }}
+    </div>
+  </div>
+</rk-collapsible-element>

package/rook-framework/snippets/rk-color-schemes-standalone.liquid

@@ -0,0 +1,61 @@
+{% comment %}
+  Rook UI Core Framework — Color Schemes (Standalone)
+  ====================================================
+  Gera CSS variables para cada esquema de cores do Rook UI.
+  Usado quando o tema NÃO possui color_scheme_group próprio.
+
+  O color_scheme_group "rk_color_schemes" é definido no settings_schema.json.
+  Cada esquema gera uma classe .rk-scheme-{id} para tematização por seção.
+
+  Uso em seções:
+    <div class="rk-scheme-{{ section.settings.rk_color_scheme }}">
+      {% render 'rk-button', variant: 'primary' %}
+    </div>
+
+  No schema da seção:
+    { "type": "color_scheme", "id": "rk_color_scheme", "label": "Esquema de Cores Rook UI", "default": "scheme-1" }
+{% endcomment %}
+
+{% style %}
+  {% for scheme in settings.rk_color_schemes -%}
+    {% if forloop.index == 1 %}
+      :root,
+    {% endif %}
+    .rk-scheme-{{ scheme.id }} {
+      --rk-color-bg: {{ scheme.settings.background }};
+      --rk-color-bg-secondary: {{ scheme.settings.background_secondary }};
+
+      --rk-color-primary: {{ scheme.settings.primary }};
+      --rk-color-primary-hover: {{ scheme.settings.primary_hover }};
+      --rk-color-primary-foreground: {{ scheme.settings.primary_foreground }};
+
+      --rk-color-secondary: {{ scheme.settings.secondary }};
+      --rk-color-secondary-hover: {{ scheme.settings.secondary_hover }};
+
+      --rk-color-success: {{ scheme.settings.success }};
+      --rk-color-danger: {{ scheme.settings.danger }};
+      --rk-color-destructive: {{ scheme.settings.danger }};
+
+      --rk-color-text: {{ scheme.settings.text }};
+      --rk-color-text-muted: {{ scheme.settings.text_muted }};
+
+      --rk-color-border: {{ scheme.settings.border }};
+      --rk-color-ring: {{ scheme.settings.ring }};
+      --rk-color-shadow: {{ scheme.settings.shadow }};
+
+      {%- assign rk_border_c = scheme.settings.border -%}
+      --rk-color-border-rgb: {{ rk_border_c.red }} {{ rk_border_c.green }} {{ rk_border_c.blue }};
+
+      {%- assign rk_text_c = scheme.settings.text -%}
+      --rk-color-text-rgb: {{ rk_text_c.red }} {{ rk_text_c.green }} {{ rk_text_c.blue }};
+
+      {%- assign rk_shadow_c = scheme.settings.shadow -%}
+      --rk-color-shadow-rgb: {{ rk_shadow_c.red }} {{ rk_shadow_c.green }} {{ rk_shadow_c.blue }};
+
+      --rk-color-border-hover: rgb({{ rk_text_c.red }} {{ rk_text_c.green }} {{ rk_text_c.blue }} / 0.3);
+
+      color: {{ scheme.settings.text }};
+      background-color: {{ scheme.settings.background }};
+    }
+  {% endfor %}
+{% endstyle %}

package/rook-framework/snippets/rk-color-schemes.liquid

@@ -0,0 +1,43 @@
+{% comment %}
+  Rook UI Core Framework — Color Scheme Bridge
+  =============================================
+  Mapeia os color_schemes nativos do tema para as variáveis --rk-* do framework.
+  Assim, seções que usam `.color-{scheme.id}` automaticamente aplicam as cores
+  corretas nos componentes rk-*.
+
+  Deve ser renderizado no <head> do layout/theme.liquid:
+    {% render 'rk-color-schemes' %}
+
+  Uso em seções (com o color_scheme nativo do tema):
+    <div class="color-{{ section.settings.color_scheme }}">
+      {% render 'rk-button', variant: 'primary' %}
+    </div>
+{% endcomment %}
+
+{% style %}
+  {% for scheme in settings.color_schemes -%}
+    .color-{{ scheme.id }} {
+      /* Mapeia cores do tema → variáveis Rook UI */
+      --rk-color-bg: rgb({{ scheme.settings.background.rgba }});
+      --rk-color-bg-secondary: rgb({{ scheme.settings.background.rgba }});
+
+      --rk-color-primary: rgb({{ scheme.settings.primary_button_background.rgba }});
+      --rk-color-primary-hover: rgb({{ scheme.settings.primary_button_hover_background.rgba }});
+      --rk-color-primary-foreground: rgb({{ scheme.settings.primary_button_text.rgba }});
+
+      --rk-color-secondary: rgb({{ scheme.settings.secondary_button_background.rgba }});
+      --rk-color-secondary-hover: rgb({{ scheme.settings.secondary_button_hover_background.rgba }});
+
+      --rk-color-text: rgb({{ scheme.settings.foreground.rgba }});
+      --rk-color-text-muted: rgb({{ scheme.settings.foreground.rgb }} / 0.65);
+
+      --rk-color-border: rgb({{ scheme.settings.border.rgba }});
+      --rk-color-ring: rgb({{ scheme.settings.primary.rgba }});
+
+      /* Derivados RGB */
+      --rk-color-border-rgb: {{ scheme.settings.border.rgb }};
+      --rk-color-text-rgb: {{ scheme.settings.foreground.rgb }};
+      --rk-color-border-hover: rgb({{ scheme.settings.foreground.rgb }} / 0.3);
+    }
+  {% endfor %}
+{% endstyle %}

package/rook-framework/snippets/rk-dialog.liquid

@@ -0,0 +1,85 @@
+{% doc %}
+  Snippet: RkDialog
+  Renders a Dialog / Modal (Shadcn/UI pattern) with full anatomy.
+  Uses Web Component <rk-dialog-element> for behaviour.
+
+  @param {string} id - Unique dialog id (required)
+  @param {string} title - Dialog title (required for a11y)
+  @param {string} [description] - Header description / subtitle
+  @param {string} [body] - HTML for the body content
+  @param {string} [footer] - HTML for the footer (action buttons)
+  @param {boolean} [overlay_close] - Close on overlay click (default: true)
+  @param {boolean} [show_close] - Show X close button (default: true)
+  @param {string} [width] - Content width (e.g. '540px')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% capture dialog_body %}
+    <p>Content here</p>
+  {% endcapture %}
+  {% capture dialog_footer %}
+    <button class="rk-btn rk-btn--secondary rk-btn--md" data-action="close">
+      <span class="rk-btn__text">Cancelar</span>
+    </button>
+    {% render 'rk-button', text: 'Salvar', style: 'primary' %}
+  {% endcapture %}
+  {% render 'rk-dialog', id: 'my-dialog', title: 'Editar Perfil', description: 'Atualize suas informações.', body: dialog_body, footer: dialog_footer %}
+{% enddoc %}
+
+{%- liquid
+  assign d_overlay_close = overlay_close | default: true
+  assign d_show_close = show_close | default: true
+-%}
+
+{%- capture title_id -%}{{ id }}-title{%- endcapture -%}
+{%- capture desc_id -%}{{ id }}-desc{%- endcapture -%}
+
+<rk-dialog-element
+  data-dialog-id="{{ id }}"
+  data-overlay-close="{{ d_overlay_close }}"
+>
+  <div id="{{ id }}" class="rk-dialog{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-dialog__overlay"></div>
+
+    {%- comment -%} Content {%- endcomment -%}
+    <div
+      class="rk-dialog__content"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="{{ title_id }}"
+      {% if description %}aria-describedby="{{ desc_id }}"{% endif %}
+      {% if width %}style="--rk-dialog-width: {{ width }};"{% endif %}
+    >
+      {%- if d_show_close -%}
+        <button type="button" class="rk-dialog__close" data-action="close" aria-label="Fechar">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+      {%- endif -%}
+
+      {%- comment -%} Header {%- endcomment -%}
+      <div class="rk-dialog__header">
+        <h2 id="{{ title_id }}" class="rk-dialog__title">{{ title }}</h2>
+        {%- if description -%}
+          <p id="{{ desc_id }}" class="rk-dialog__description">{{ description }}</p>
+        {%- endif -%}
+      </div>
+
+      {%- comment -%} Body {%- endcomment -%}
+      {%- if body -%}
+        <div class="rk-dialog__body">
+          {{ body }}
+        </div>
+      {%- endif -%}
+
+      {%- comment -%} Footer {%- endcomment -%}
+      {%- if footer -%}
+        <div class="rk-dialog__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-dialog-element>

package/rook-framework/snippets/rk-divider.liquid

@@ -0,0 +1,25 @@
+{% doc %}
+  Snippet: RkDivider
+  Renders a visual divider line.
+
+  @param {string} [thickness] - CSS thickness (default: '1px')
+  @param {string} [width] - CSS width (default: '100%')
+  @param {string} [align] - 'left' | 'center' | 'right' (default: 'center')
+  @param {string} [custom_class] - Extra CSS classes
+
+  @example
+  {% render 'rk-divider', width: '80%' %}
+{% enddoc %}
+
+{%- liquid
+  assign d_thickness = thickness | default: '1px'
+  assign d_width = width | default: '100%'
+  assign d_align = align | default: 'center'
+-%}
+
+<div
+  class="rk-divider{% if custom_class %} {{ custom_class }}{% endif %}"
+  style="--rk-divider-align: {{ d_align }};"
+>
+  <hr class="rk-divider__line" style="--rk-divider-thickness: {{ d_thickness }}; --rk-divider-width: {{ d_width }};">
+</div>

package/rook-framework/snippets/rk-drawer.liquid

@@ -0,0 +1,81 @@
+{% doc %}
+  Snippet: RkDrawer
+  Renders a Drawer (sliding panel from screen edge).
+  Uses Web Component <rk-drawer-element> for behaviour.
+
+  @param {string} id - Unique drawer id
+  @param {string} [side] - 'bottom' | 'top' | 'left' | 'right' (default: 'bottom')
+  @param {boolean} [show_handle] - Show drag handle indicator (default: true)
+  @param {string} [title] - Optional header title
+  @param {string} [description] - Optional header description
+  @param {string} [body] - HTML for the body content
+  @param {string} [footer] - HTML for the footer (action buttons)
+  @param {string} [custom_class] - Extra CSS classes
+  @param {string} [width] - Panel width for left/right drawers (e.g. '400px')
+  @param {string} [height] - Panel height for top/bottom drawers (e.g. '50vh')
+
+  @example
+  {% capture drawer_body %}
+    <p>Drawer content here</p>
+  {% endcapture %}
+  {% capture drawer_footer %}
+    {% render 'rk-button', text: 'Confirmar', style: 'primary', full_width: true %}
+  {% endcapture %}
+  {% render 'rk-drawer', id: 'my-drawer', side: 'bottom', title: 'Filtros', body: drawer_body, footer: drawer_footer %}
+{% enddoc %}
+
+{%- liquid
+  assign d_side = side | default: 'bottom'
+  assign d_show_handle = show_handle | default: true
+-%}
+
+<rk-drawer-element data-drawer-id="{{ id }}" data-side="{{ d_side }}">
+  <div id="{{ id }}" class="rk-drawer{% if custom_class %} {{ custom_class }}{% endif %}">
+    {%- comment -%} Overlay {%- endcomment -%}
+    <div class="rk-drawer__overlay"></div>
+
+    {%- comment -%} Panel {%- endcomment -%}
+    <div
+      class="rk-drawer__panel rk-drawer__panel--{{ d_side }}"
+      role="dialog"
+      aria-modal="true"
+      {% if title %}aria-label="{{ title }}"{% endif %}
+      {% if width %}style="--rk-drawer-width: {{ width }};"{% endif %}
+      {% if height %}style="--rk-drawer-height: {{ height }};"{% endif %}
+    >
+      {%- if d_show_handle and d_side == 'bottom' or d_show_handle and d_side == 'top' -%}
+        <div class="rk-drawer__handle">
+          <div class="rk-drawer__handle-bar"></div>
+        </div>
+      {%- endif -%}
+
+      {%- comment -%} Close button {%- endcomment -%}
+      <button type="button" class="rk-drawer__close" data-action="close" aria-label="Fechar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+
+      {%- if title or description -%}
+        <div class="rk-drawer__header">
+          {%- if title -%}
+            <h2 class="rk-drawer__title">{{ title }}</h2>
+          {%- endif -%}
+          {%- if description -%}
+            <p class="rk-drawer__description">{{ description }}</p>
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+
+      <div class="rk-drawer__body">
+        {{ body }}
+      </div>
+
+      {%- if footer -%}
+        <div class="rk-drawer__footer">
+          {{ footer }}
+        </div>
+      {%- endif -%}
+    </div>
+  </div>
+</rk-drawer-element>

package/rook-framework/snippets/rk-external-assets copy.liquid

@@ -0,0 +1,33 @@
+{% doc %}
+  Snippet: RkExternalAssets
+  Módulo de CDNs e serviços externos.
+
+  @param {string} location - 'head' ou 'body'
+  
+  @example
+  {% render 'rk-external-assets', location: 'head' %}
+{% enddoc %}
+
+{%- liquid
+  assign location = location | default: 'head'
+-%}
+
+{%- if location == 'head' -%}
+  <!-- [RkExternalAssets] Preconnects -->
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+  <link rel="preconnect" href="https://unpkg.com" crossorigin>
+
+  <!-- [RkExternalAssets] Stylesheets CSS -->
+  {%- comment -%} Add external CSS here {%- endcomment -%}
+
+{%- elsif location == 'body' -%}
+  <!-- [RkExternalAssets] Javascripts -->
+
+  <!-- [RkExternalAssets] Inline Initializations -->
+  <script>
+    if (typeof anime !== 'undefined') {
+      window.animate = anime.animate;
+    }
+  </script>
+{%- endif -%}

package/rook-framework/snippets/rk-external-assets.liquid

@@ -0,0 +1,68 @@
+{% doc %}
+  Snippet: RkExternalAssets
+  Módulo de CDNs e serviços externos.
+
+  @param {string} location - 'head' ou 'body'
+  
+  @example
+  {% render 'rk-external-assets', location: 'head' %}
+{% enddoc %}
+
+{%- liquid
+  assign location = location | default: 'head'
+
+  # 1. CONFIG MAP - DOMÍNIOS PARA PRECONNECT
+  assign preconnects_str = "https://cdn.jsdelivr.net, https://cdnjs.cloudflare.com, https://unpkg.com"
+
+  # 2. CONFIG MAP - CSS ASSETS (Formato: id | url)
+  assign css_assets_str = ""
+
+  # 3. CONFIG MAP - JS ASSETS (Formato: id | url | strategy)
+  assign js_assets_str = "gsap | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js | defer, scrolltrigger | https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js | defer"
+-%}
+
+{%- if location == 'head' -%}
+  <!-- [RkExternalAssets] Preconnects -->
+  {%- assign preconnect_domains = preconnects_str | split: ',' -%}
+  {%- for domain in preconnect_domains -%}
+    {%- assign domain_clean = domain | strip -%}
+    {%- if domain_clean != blank -%}
+      <link rel="preconnect" href="{{ domain_clean }}" crossorigin>
+    {%- endif -%}
+  {%- endfor -%}
+
+  <!-- [RkExternalAssets] Stylesheets CSS -->
+  {%- assign css_lines = css_assets_str | split: ',' -%}
+  {%- for css_line in css_lines -%}
+    {%- assign css_clean = css_line | strip -%}
+    {%- if css_clean == blank -%}{%- continue -%}{%- endif -%}
+    
+    {%- assign css_data = css_clean | split: '|' -%}
+    {%- if css_data.size >= 2 -%}
+      {%- assign css_id = css_data[0] | strip -%}
+      {%- assign css_url = css_data[1] | strip -%}
+      <link rel="stylesheet" href="{{ css_url }}" id="rk-ext-{{ css_id }}">
+    {%- endif -%}
+  {%- endfor -%}
+{%- endif -%}
+
+{%- if location == 'body' -%}
+  <!-- [RkExternalAssets] Javascripts -->
+  {%- assign js_lines = js_assets_str | split: ',' -%}
+  {%- for js_line in js_lines -%}
+    {%- assign js_clean = js_line | strip -%}
+    {%- if js_clean == blank -%}{%- continue -%}{%- endif -%}
+    
+    {%- assign js_data = js_clean | split: '|' -%}
+    {%- if js_data.size >= 2 -%}
+      {%- assign js_id = js_data[0] | strip -%}
+      {%- assign js_url = js_data[1] | strip -%}
+      {%- assign js_strategy = js_data[2] | strip | default: 'defer' -%}
+      {%- if js_strategy == 'async' -%}
+        <script src="{{ js_url }}" id="rk-ext-{{ js_id }}" async></script>
+      {%- else -%}
+        <script src="{{ js_url }}" id="rk-ext-{{ js_id }}" defer></script>
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endif -%}