@modyo/mcp 0.1.0

package/build/resources/channels/liquid/LiquidReference.js

@@ -0,0 +1,796 @@
+import { ResourceBase } from "../../../shared/index.js";
+import { z } from "zod";
+/**
+ * Liquid reference content organized by section
+ */
+const LIQUID_REFERENCE = {
+    overview: `# Modyo Liquid Reference
+
+Liquid is a templating language used in Modyo for dynamic content rendering in templates, snippets, and layouts.
+
+**Where Liquid works:**
+- ✅ Layouts (page wrappers)
+- ✅ Custom snippets
+- ✅ System snippets (head, header, footer)
+- ✅ HTML widgets on pages
+- ❌ CSS templates (plain CSS only)
+- ❌ JavaScript templates (plain JS only)
+- ❌ Widget definitions (use JS framework instead)`,
+    syntax: `## Basic Syntax
+
+### Output (Variables)
+\`\`\`liquid
+{{ variable }}
+{{ object.property }}
+{{ array[0] }}
+\`\`\`
+
+### Tags (Logic)
+\`\`\`liquid
+{% if condition %}
+  content
+{% elsif other_condition %}
+  other content
+{% else %}
+  fallback
+{% endif %}
+
+{% for item in collection %}
+  {{ item.name }}
+{% endfor %}
+
+{% assign my_var = "value" %}
+{% capture my_block %}content{% endcapture %}
+\`\`\`
+
+### Whitespace Control
+Use \`{%-\` and \`-%}\` to strip whitespace:
+\`\`\`liquid
+{%- assign items = collection -%}
+{%- for item in items -%}
+  {{ item.name }}
+{%- endfor -%}
+\`\`\`
+
+### Comments
+\`\`\`liquid
+{% comment %}This won't be rendered{% endcomment %}
+{%- comment -%}Whitespace-trimmed comment{%- endcomment -%}
+\`\`\``,
+    modyo_objects: `## Modyo Objects
+
+### site
+Current site information:
+\`\`\`liquid
+{{ site.name }}
+{{ site.url }}
+{{ site.locale }}           {# Current locale: 'en', 'es', etc. #}
+{{ site.default_locale }}
+{{ site.locales }}          {# Array of available locales #}
+{{ site.theme.primary_color }}
+{{ site.theme.secondary_color }}
+\`\`\`
+
+### user (Authenticated Users)
+\`\`\`liquid
+{% if user %}
+  {{ user.name }}                       {# Full name #}
+  {{ user.first_name }}                 {# First name #}
+  {{ user.last_name }}                  {# Last name #}
+  {{ user.email }}                      {# Email #}
+  {{ user.avatar.url }}                 {# Avatar URL (may be blank) #}
+  {{ user.realm_default_avatar }}       {# Default avatar from realm #}
+  {{ user.unread_notifications_count }} {# Unread notification count #}
+  {{ user.first_name | slice: 0 }}{{ user.last_name | slice: 0 }}  {# Initials #}
+{% elsif site.login_enabled %}
+  <a href="{{ site.url }}/login">Sign In</a>
+{% endif %}
+\`\`\`
+
+**IMPORTANT**: Use \`{% if user %}\` to check authentication — NOT \`{% if user.logged_in %}\` (does not exist).
+Login/logout URLs: \`{{ site.url }}/login\`, \`{{ site.url }}/logout\`.
+Session snippet: \`{% snippet "shared/general/session" %}\` handles the full login/logout flow.
+\`site.login_enabled\` checks if login is enabled for the site.
+
+### request
+Current request information:
+\`\`\`liquid
+{{ request.path }}
+{{ request.host }}
+{{ request.url }}
+{{ request.user_agent }}
+\`\`\`
+
+### global_variables
+Site-wide variables (set via channels-variables-manage tool):
+\`\`\`liquid
+{{ global_variables.site_name }}
+{{ global_variables.contact_email }}
+{{ global_variables.api_base_url }}
+\`\`\`
+
+### spaces (Content API)
+Access content from Modyo Content:
+\`\`\`liquid
+{%- assign entries = spaces['blog'].types['post'].entries | sort_by: 'meta.published_at', 'desc' | limit: 6 -%}
+{%- for entry in entries -%}
+  <article>
+    <h2>{{ entry.meta.title }}</h2>
+    <p>{{ entry.meta.excerpt }}</p>
+    {{ entry.fields.Body }}
+    <img src="{{ entry.fields.Cover.url }}" alt="{{ entry.fields.Cover.alt }}">
+  </article>
+{%- endfor -%}
+
+{# Filter entries #}
+{%- assign featured = spaces['store'].types['product'].entries | sort_by: 'meta.published_at', 'desc' | limit: 10 -%}
+\`\`\`
+
+### IMPORTANT: Content Entry Access Rules
+1. **Field access**: Use \`entry.fields.FieldName\` (NO \`.value\`). Example: \`{{ entry.fields.Title }}\`, \`{{ entry.fields.Cover.url }}\`
+2. **Sorting**: Use \`sort_by\` with direction parameter: \`| sort_by: 'field', 'desc'\` or \`| sort_by: 'field', 'asc'\`. NEVER use \`| sort | reverse\` — \`reverse\` returns a plain array and breaks \`limit\` which expects an ActiveRecord::Relation.
+3. **Limiting**: Use \`| limit: N\` filter (NOT \`for ... limit: N\`). Apply after \`sort_by\` to keep the query as ActiveRecord::Relation.
+4. **Chaining**: Always chain in this order: \`entries | sort_by: 'field', 'dir' | limit: N\`
+
+### Entry Object Structure
+\`\`\`liquid
+entry.meta.uuid
+entry.meta.title
+entry.meta.slug
+entry.meta.excerpt
+entry.meta.published_at
+entry.meta.locale
+entry.meta.category        {# Primary category #}
+entry.meta.categories      {# All categories #}
+entry.meta.tags
+
+entry.fields.FieldName     {# Access custom fields — NO .value needed #}
+entry.fields.Cover.url     {# Asset fields have .url, .alt, etc. #}
+\`\`\`
+
+### html5
+HTML5 document helpers (use in layouts):
+\`\`\`liquid
+{{ html5.open_tag }}
+  <head>{% snippet 'head' %}</head>
+  <body>
+    {{ content_for_layout }}
+  </body>
+{{ html5.close_tag }}
+\`\`\`
+
+### content_for_layout
+Renders the page content (layouts only):
+\`\`\`liquid
+<main class="content">
+  {{ content_for_layout }}
+</main>
+\`\`\``,
+    modyo_filters: `## Modyo Filters
+
+### Asset Pipeline
+\`\`\`liquid
+{# Get asset URL #}
+{{ 'main-styles' | asset_url: 'css' }}
+{{ 'app-scripts' | asset_url: 'js' }}
+{{ 'logo' | asset_url: 'image' }}
+
+{# Generate tags with CSP nonce (REQUIRED for inline) #}
+{{ 'main-styles' | asset_url: 'css' | stylesheet_tag: nonce: csp_nonce }}
+{{ 'app-scripts' | asset_url: 'js' | script_tag: defer: 'defer', nonce: csp_nonce }}
+
+{# Image transforms #}
+{{ image.url | asset_url: 'image' | resize: '400x300' }}
+{{ image.url | thumb: '100x100' }}
+\`\`\`
+
+### Text Filters
+\`\`\`liquid
+{{ 'hello world' | capitalize }}     {# Hello world #}
+{{ 'HELLO' | downcase }}             {# hello #}
+{{ 'hello' | upcase }}               {# HELLO #}
+{{ 'hello world' | truncate: 8 }}    {# hello... #}
+{{ 'hello world' | truncatewords: 1 }} {# hello... #}
+{{ text | strip_html }}
+{{ text | escape }}
+{{ text | newline_to_br }}
+{{ 'hello-world' | replace: '-', ' ' }}
+\`\`\`
+
+### Number/Currency Filters
+\`\`\`liquid
+{{ price | money }}                   {# Formatted currency #}
+{{ number | round: 2 }}
+{{ number | floor }}
+{{ number | ceil }}
+{{ number | plus: 5 }}
+{{ number | minus: 3 }}
+{{ number | times: 2 }}
+{{ number | divided_by: 4 }}
+\`\`\`
+
+### Array Filters
+\`\`\`liquid
+{{ array | first }}
+{{ array | last }}
+{{ array | size }}
+{{ array | join: ', ' }}
+{{ array | sort }}
+{{ array | sort: 'property' }}
+{{ array | reverse }}
+{{ array | uniq }}
+{{ array | where: 'active', true }}
+{{ array | map: 'name' }}
+{{ array | slice: 0, 3 }}
+\`\`\`
+
+### Date Filters
+\`\`\`liquid
+{{ entry.meta.published_at | date: '%B %d, %Y' }}  {# January 15, 2024 #}
+{{ 'now' | date: '%Y-%m-%d' }}
+{{ date | date: '%H:%M' }}
+
+{# Common formats #}
+%Y - Year (2024)
+%m - Month (01-12)
+%d - Day (01-31)
+%B - Month name (January)
+%b - Month short (Jan)
+%A - Weekday (Monday)
+%H - Hour 24h (00-23)
+%I - Hour 12h (01-12)
+%M - Minutes (00-59)
+%p - AM/PM
+\`\`\`
+
+### URL Filters
+\`\`\`liquid
+{{ 'hello world' | url_encode }}     {# hello%20world #}
+{{ path | prepend: site.url }}
+{{ path | append: '.html' }}
+\`\`\`
+
+### Translation
+\`\`\`liquid
+{{ 'welcome_message' | translate }}
+{{ 'greeting' | translate: name: user.name }}
+\`\`\``,
+    navigation: `## Navigation Menus
+
+### Accessing Menus (CORRECT syntax)
+\`\`\`liquid
+{%- assign menu = menus['main'] -%}
+{%- assign items_to_show = menu.items | visible_items -%}
+{%- for item in items_to_show -%}
+  <li>
+    <a href="{{ item.url }}"
+       {% if item.active_page %}class="active"{% endif %}
+       {{ item.item_rel }}>
+      {{ item.label }}
+    </a>
+    {%- if item.child_items -%}
+      {%- assign children = item.child_items | visible_items -%}
+      <ul>
+        {%- for child in children -%}
+          <li><a href="{{ child.url }}">{{ child.label }}</a></li>
+        {%- endfor -%}
+      </ul>
+    {%- endif -%}
+  </li>
+{%- endfor -%}
+\`\`\`
+
+### WRONG syntax (DO NOT USE)
+\`\`\`liquid
+{# WRONG — this syntax does NOT work in Modyo Liquid #}
+{% for item in site.menu("main").items %}
+{% for item in site.menus['main'].items %}
+{% for item in site.menus.main.items %}
+\`\`\`
+
+### Menu Object Properties
+\`\`\`liquid
+menus['slug']                    {# Access menu by slug #}
+menu.items                       {# Top-level items (unfiltered) #}
+menu.items | visible_items       {# Only visible items (ALWAYS use this) #}
+item.url                         {# Item URL (auto-generated from linked page) #}
+item.label                       {# Display label #}
+item.active_page                 {# true if item matches current page #}
+item.item_rel                    {# rel attribute (e.g. nofollow) #}
+item.target                      {# link target (_blank, etc.) #}
+item.child_items                 {# Nested items (unfiltered) #}
+item.child_items | visible_items {# Nested visible items #}
+\`\`\`
+
+### Complete Navigation Snippet Example
+\`\`\`liquid
+<nav class="site-nav">
+  <div class="container">
+    <a href="{{ site.url }}" class="site-logo">{{ site.name }}</a>
+    {%- assign menu = menus['main'] -%}
+    {%- assign items_to_show = menu.items | visible_items -%}
+    <ul class="nav-list">
+      {%- for item in items_to_show -%}
+        <li class="nav-item{% if item.active_page %} active{% endif %}">
+          <a href="{{ item.url }}" {{ item.item_rel }}>{{ item.label }}</a>
+          {%- assign children = item.child_items | visible_items -%}
+          {%- if children.size > 0 -%}
+            <ul class="dropdown">
+              {%- for child in children -%}
+                <li><a href="{{ child.url }}">{{ child.label }}</a></li>
+              {%- endfor -%}
+            </ul>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+    </ul>
+  </div>
+</nav>
+\`\`\`
+
+### Internal Links
+Always use \`{{ site.url }}\` prefix for relative links:
+\`\`\`liquid
+<a href="{{ site.url }}/blog">Blog</a>      {# Correct #}
+<a href="/blog">Blog</a>                    {# Wrong - breaks in subdirectory deploys #}
+\`\`\``,
+    snippets: `## Snippets
+
+### Including Snippets
+\`\`\`liquid
+{% snippet 'header' %}
+{% snippet 'components/card' %}
+{% snippet 'footer' %}
+\`\`\`
+
+### System Snippets (Editable, Not Deletable)
+- \`head\` - Document head (meta, CSS links)
+- \`header\` - Site header/navigation
+- \`footer\` - Site footer
+- Various grid snippets for layouts
+
+### Creating Reusable Components
+\`\`\`liquid
+{# snippets/components/card.liquid #}
+<div class="card">
+  <h3>{{ title }}</h3>
+  <p>{{ description }}</p>
+</div>
+\`\`\`
+
+### Account-Level Snippets
+Global snippets shared across sites:
+\`\`\`liquid
+{% snippet 'global/analytics' %}
+{% snippet 'global/consent-banner' %}
+\`\`\``,
+    layouts: `## Layouts
+
+### Basic Layout Structure
+\`\`\`liquid
+{{ html5.open_tag }}
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ page.title }} | {{ site.name }}</title>
+
+  {# Include head snippet for common meta/styles #}
+  {% snippet 'head' %}
+
+  {# Site styles with CSP nonce #}
+  {{ 'main-styles' | asset_url: 'css' | stylesheet_tag: nonce: csp_nonce }}
+</head>
+<body>
+  {% snippet 'header' %}
+
+  <main>
+    {{ content_for_layout }}
+  </main>
+
+  {% snippet 'footer' %}
+
+  {# Site scripts #}
+  {{ 'main-scripts' | asset_url: 'js' | script_tag: defer: 'defer', nonce: csp_nonce }}
+</body>
+{{ html5.close_tag }}
+\`\`\`
+
+### CSS Variables from Liquid
+Inject dynamic values into CSS:
+\`\`\`liquid
+<style nonce="{{ csp_nonce }}">
+  :root {
+    --primary-color: {{ site.theme.primary_color | default: '#007bff' }};
+    --secondary-color: {{ site.theme.secondary_color | default: '#6c757d' }};
+    --site-font: {{ global_variables.font_family | default: 'system-ui' }};
+  }
+</style>
+\`\`\``,
+    site_architecture: `## Site Architecture
+
+### Template Categories
+| Category | Purpose | Liquid? | Example |
+|----------|---------|---------|---------|
+| \`layout\` | Page wrapper (html5, head, body) | Yes | base, home, error |
+| \`custom_snippet\` | Reusable component | Yes | site_header, site_footer, card |
+| \`system_snippet\` | Built-in snippet (editable, not deletable) | Yes | head, header, footer |
+| \`stylesheet\` | CSS (CDN-delivered) | No | base, root |
+| \`javascript\` | JS (CDN-delivered) | No | app, main |
+
+### CRITICAL: layout vs custom_snippet
+- **layout**: Contains \`{% html5 %}\` / \`{{ html5.open_tag }}\` and \`{{ content_for_layout }}\`. Wraps entire pages.
+- **custom_snippet**: Reusable fragment inserted inside layouts via \`{% snippet "name" %}\`. NEVER contains \`{% html5 %}\`.
+- Creating a layout as \`custom_snippet\` causes pages to render without \`<html>\`, \`<head>\`, or body structure.
+
+### CRITICAL: Use system snippets, NOT custom snippets for header/footer
+System snippets (\`header\`, \`footer\`, \`menu\`) include critical built-in functionality:
+- Offcanvas mobile menu with responsive toggling
+- Session management (login/logout)
+- Notifications panel
+- Accessibility (skip-to-content, ARIA labels)
+- Dropdown menu support
+
+**ALWAYS customize the existing system snippets instead of creating new custom_snippets (\`site_header\`, \`site_footer\`) for the same purpose.** Creating redundant custom snippets loses all this functionality.
+
+### Standard Site Structure
+Every site should have this minimum template structure:
+
+\`\`\`
+layouts/ (customize the existing ones)
+  home           → Full-width layout (hero pages, no container)
+  base           → Standard layout (inner pages, with container)
+  error          → Error page layout
+  ↳ All use: {% snippet 'shared/general/header' %} and {% snippet 'shared/general/footer' %}
+
+system_snippets/ (customize visually, keep internal structure)
+  head           → Add custom fonts, load base.css AFTER Bootstrap
+  header         → Customize branding/style, KEEP: offcanvas, session, menu, notifications
+  footer         → Customize content and style
+  menu           → Generally DO NOT modify — handles dropdown, active state, responsive
+
+stylesheets/
+  base           → Site design system (CSS only, no Liquid)
+\`\`\`
+
+### Layout Template Pattern
+\`\`\`liquid
+{{ html5.open_tag }}
+<head>
+  {% snippet "shared/general/head" %}
+</head>
+<body>
+  {% snippet "shared/general/header" %}
+  <main id="content">
+    {{ content_for_layout }}    {# Renders the page content #}
+  </main>
+  {% snippet "shared/general/footer" %}
+</body>
+{{ html5.close_tag }}
+\`\`\`
+
+Variations:
+- \`home\` layout: no container wrapper around \`{{ content_for_layout }}\`
+- \`base\` layout: wrap \`{{ content_for_layout }}\` in \`<div class="container">\`
+- \`error\` layout: wrap in container, simpler header/footer
+
+### Benefits of System Snippets
+- Header, footer, and styles defined once
+- Changing navigation updates ALL pages
+- Visual consistency guaranteed across pages
+- Built-in functionality (session, notifications, responsive) preserved
+
+### Search Form Pattern
+Always wrap search inputs in a form with the correct action:
+\`\`\`html
+<form action="{{ site.url }}/search" method="get">
+  <input type="hidden" name="commit" value="Search">
+  <input type="text" name="query" placeholder="Search..." class="form-control">
+</form>
+\`\`\`
+Modyo expects the format \`/search?query=...&commit=Search\`. A bare \`<input>\` without a \`<form>\` will not submit.`,
+    dynamic_framework: `## Dynamic Framework (Bootstrap)
+
+### What Comes with a New Modyo Site
+Every new site includes **Dynamic Framework** (Bootstrap 5.3.3 customized by Modyo):
+- \`root.css\` stylesheet (~46KB) with Bootstrap variables, utilities, components, grid
+- System snippets (\`head\`, \`header\`, \`footer\`, \`menu\`) that use Bootstrap classes
+- CDN links to Dynamic Framework CSS, JS, Popper, and Bootstrap Icons
+
+### CDN URLs (EXACT — do not change)
+\`\`\`html
+<!-- Bootstrap Icons -->
+<link rel="stylesheet" href="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/css/bootstrap-icons.min.css" nonce="{{ csp_nonce }}">
+<!-- JS: Popper + Bootstrap -->
+<script src="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/js/umd/popper.min.js" crossorigin="anonymous" nonce="{{ csp_nonce }}"></script>
+<script src="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/js/bootstrap.min.js" nonce="{{ csp_nonce }}"></script>
+<!-- Dynamic Framework CSS -->
+<link href="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/css/dynamic-ui.min.css" rel="stylesheet" nonce="{{ csp_nonce }}">
+\`\`\`
+
+**IMPORTANT:** The CSS file is \`dynamic-ui.min.css\` (NOT \`dynamic-framework.min.css\`).
+
+### NEVER Remove Dynamic Framework
+Dynamic Framework is required by Modyo's origination forms, notifications, and internal components. Removing it from the \`head\` snippet breaks these features.
+
+### Two Modes for Site Creation
+
+#### Mode A: Use Dynamic Framework (Bootstrap)
+- Keep the \`head\` snippet with CDN links as-is
+- Keep \`root.css\` with Bootstrap variables
+- Use system snippets \`header\`, \`footer\`, \`menu\` as they come
+- Generate widgets/pages with Bootstrap classes (\`container\`, \`row\`, \`col-md-6\`, \`btn btn-primary\`)
+- Best for: rapid prototypes, sites that don't need custom design
+
+#### Mode B: Custom CSS (with Bootstrap as base)
+- KEEP Dynamic Framework in \`head\` (required for originations)
+- Create a custom stylesheet (\`base\`) and load it AFTER Bootstrap:
+\`\`\`liquid
+{{ 'root' | asset_url: 'css' | stylesheet_tag: media: 'screen', nonce: csp_nonce }}
+{{ 'base' | asset_url: 'css' | stylesheet_tag: media: 'screen', nonce: csp_nonce }}
+\`\`\`
+- Customize the system snippets \`header\`/\`footer\` with your branding, keeping the internal structure (offcanvas, session, menu, notifications). Do NOT create redundant custom_snippets (\`site_header\`, \`site_footer\`).
+- Best for: branded sites, custom design systems
+
+### Design Customization — Token-First Approach
+ALWAYS read \`root.css\` first (\`channels-templates-manage\`, identifier="root", includeBody=true) before writing any CSS.
+
+**root.css = TOKENS ONLY**: Override \`-rgb\` base tokens. Dynamic Framework propagates automatically: \`--bs-primary-rgb\` → \`--bs-primary-500-rgb\` → \`--bs-primary-500\` → \`.btn-primary\` bg.
+**base.css = CUSTOM RULES ONLY**: For CSS rules Bootstrap tokens/utilities don't cover. No \`:root\` blocks.
+
+**Key tokens in root.css:**
+- \`--bs-primary-rgb\`, \`--bs-secondary-rgb\`, \`--bs-dark-rgb\`, \`--bs-light-rgb\` (main palette)
+- \`--bs-primary-{25..900}-rgb\` (shade scale for each color)
+- \`--bs-body-font-family\`, \`--bs-heading-font-family\` (typography)
+- \`--bs-body-color-rgb\`, \`--bs-body-bg-rgb\` (base text and background)
+- \`--bs-link-color-rgb\`, \`--bs-link-hover-color-rgb\` (links)
+
+**Correct root.css example:**
+\`\`\`css
+:root, [data-bs-theme=dynamic] {
+  --bs-primary-rgb: 76, 29, 149;
+  --bs-secondary-rgb: 6, 182, 212;
+  --bs-body-bg-rgb: 248, 246, 255;
+  --bs-body-color-rgb: 45, 27, 78;
+  --bs-link-color-rgb: var(--bs-primary-rgb);
+}
+\`\`\`
+
+**WRONG root.css (DO NOT DO THIS):**
+\`\`\`css
+--bs-primary-rgb: 76, 29, 149;
+.btn-primary { --bs-btn-bg: #4C1D95; }  /* Breaks token chain! */
+.btn-outline-primary { ... }             /* Never override components in root.css */
+\`\`\`
+
+**Rules:**
+- In root.css: ONLY override \`-rgb\` tokens. NEVER generate \`.btn-primary {}\`, \`.btn-outline-*\` blocks.
+- NEVER use hex values directly (\`#4C1D95\`). Always use \`rgb(var(--bs-primary-rgb))\`.
+- In base.css: reference tokens with \`rgb(var(--bs-primary-rgb))\`, not hardcoded hex.
+
+**Bootstrap utility classes vs custom CSS:**
+| Need | Bootstrap (USE THIS) | Don't create custom |
+|------|---------------------|-------------------|
+| Primary color | \`--bs-primary-rgb\` in root.css | \`--custom-brand-color\` |
+| Dark background | \`bg-dark\` or \`--bs-dark-rgb\` | \`.my-dark-bg\` |
+| Light background | \`bg-light\` or \`--bs-light-rgb\` | \`.my-light-bg\` |
+| Muted text | \`text-body-secondary\` | \`color: var(--text-muted)\` |
+| Grid layout | \`row\` + \`col-md-4\` | custom grid CSS |
+| Spacing | \`py-5\`, \`mb-4\`, \`gap-3\` | custom padding rules |
+| Cards | \`card\` + \`card-body\` | custom card CSS |
+| Buttons | \`btn btn-primary\` | custom button CSS |
+| Typography | \`--bs-body-font-family\` in root.css | \`--custom-font\` |
+
+NEVER define custom CSS variables (\`--custom-*\`) when a Bootstrap token (\`--bs-*\`) exists for the same purpose.
+
+### head Snippet Pattern (Mode B — Custom CSS)
+\`\`\`liquid
+{% snippet 'shared/general/head_tag_manager' %}
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>{{ page_title }} - {{ site.name }}</title>
+{% snippet "shared/general/seo" %}
+{{ site.favicon_link }}
+{{ site.apple_touch_icons }}
+<!-- Custom Font -->
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" nonce="{{ csp_nonce }}">
+<!-- Bootstrap Icons -->
+<link rel="stylesheet" href="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/css/bootstrap-icons.min.css" nonce="{{ csp_nonce }}">
+<!-- JS: Popper + Bootstrap (required for origination forms) -->
+<script src="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/js/umd/popper.min.js" crossorigin="anonymous" nonce="{{ csp_nonce }}"></script>
+<script src="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/js/bootstrap.min.js" nonce="{{ csp_nonce }}"></script>
+<!-- Dynamic Framework CSS -->
+<link href="https://cdn.dynamicframework.dev/assets/1.36.2/ui-react/css/dynamic-ui.min.css" rel="stylesheet" nonce="{{ csp_nonce }}">
+<!-- Root (Bootstrap overrides) -->
+{{ 'root' | asset_url: 'css' | stylesheet_tag: media: 'screen', nonce: csp_nonce }}
+<!-- Site Custom Styles — MUST be loaded LAST to override Bootstrap -->
+{{ 'base' | asset_url: 'css' | stylesheet_tag: media: 'screen', nonce: csp_nonce }}
+{% csrf_meta %}
+\`\`\``,
+    best_practices: `## Best Practices
+
+### 1. Whitespace Control
+Always use \`{%-\` and \`-%}\` to prevent unwanted whitespace:
+\`\`\`liquid
+{%- assign items = collection -%}
+{%- for item in items -%}
+  <div>{{ item.name }}</div>
+{%- endfor -%}
+\`\`\`
+
+### 2. CSP Nonce Compliance
+Always include nonce for inline styles/scripts:
+\`\`\`liquid
+{# Good #}
+<style nonce="{{ csp_nonce }}">...</style>
+<script nonce="{{ csp_nonce }}">...</script>
+{{ 'file' | asset_url: 'css' | stylesheet_tag: nonce: csp_nonce }}
+
+{# Bad - will be blocked by CSP #}
+<style>...</style>
+<script>...</script>
+\`\`\`
+
+### 3. Limit Content Queries
+Always limit loops to prevent performance issues:
+\`\`\`liquid
+{%- for entry in entries limit: 10 -%}
+  ...
+{%- endfor -%}
+\`\`\`
+
+### 4. Cache Heavy Queries
+Use assign for expensive operations:
+\`\`\`liquid
+{# Good - query once #}
+{%- assign products = spaces['store'].types['product'].entries -%}
+{%- for product in products limit: 6 -%}
+  {{ product.meta.title }}
+{%- endfor -%}
+
+{# Bad - query on each iteration #}
+{%- for product in spaces['store'].types['product'].entries limit: 6 -%}
+  {{ product.meta.title }}
+{%- endfor -%}
+\`\`\`
+
+### 5. Default Values
+Always provide fallbacks:
+\`\`\`liquid
+{{ entry.fields['Image'].url | default: '/assets/placeholder.jpg' }}
+{{ user.name | default: 'Guest' }}
+\`\`\`
+
+### 6. Conditional Rendering
+Check for existence before accessing:
+\`\`\`liquid
+{%- if entry.fields['Gallery'] -%}
+  {%- for image in entry.fields['Gallery'] -%}
+    <img src="{{ image.url }}" alt="{{ image.alt }}">
+  {%- endfor -%}
+{%- endif -%}
+\`\`\`
+
+### 7. Locale-Aware Content
+\`\`\`liquid
+{%- if site.locale == 'es' -%}
+  <p>Bienvenido</p>
+{%- else -%}
+  <p>Welcome</p>
+{%- endif -%}
+
+{# Or use translations #}
+{{ 'welcome' | translate }}
+\`\`\``,
+    gotchas: `## Common Gotchas
+
+### 1. Liquid in CSS/JS Templates
+CSS and JavaScript templates do NOT support Liquid. Use:
+- CSS variables injected via snippets
+- Global variables for configuration
+- Separate snippet for dynamic values
+
+\`\`\`liquid
+{# In a snippet (works) #}
+<style nonce="{{ csp_nonce }}">
+  .brand { color: {{ site.theme.primary_color }}; }
+</style>
+
+{# In CSS template (doesn't work) #}
+.brand { color: {{ site.theme.primary_color }}; } {# Will output literally #}
+\`\`\`
+
+### 2. Snippet Naming Conventions
+Snippets with CSS/JS content must have suffix:
+- \`my_styles_css\` - Contains CSS
+- \`my_scripts_js\` - Contains JavaScript
+- \`my_component\` - Contains HTML/Liquid (no suffix needed, use \`no_suffix: true\`)
+
+### 3. Template ID Changes
+Template IDs may change after publishing. Always use:
+- Template name for lookups
+- UUID for stable references
+
+### 4. content_for_layout Scope
+\`{{ content_for_layout }}\` only works in layout templates, not in snippets or widgets.
+
+### 5. User Object Availability
+\`user\` object is only available for authenticated users:
+\`\`\`liquid
+{%- if user -%}
+  {# Safe to access user properties #}
+{%- endif -%}
+\`\`\`
+
+### 6. Array Index Access
+Liquid uses 0-based indexing:
+\`\`\`liquid
+{{ array[0] }}  {# First item #}
+{{ array.first }}  {# Also first item #}
+\`\`\`
+
+### 7. Comparison Operators
+\`\`\`liquid
+{% if value == 'string' %}     {# Equality #}
+{% if value != 'string' %}     {# Inequality #}
+{% if value > 10 %}            {# Greater than #}
+{% if value < 10 %}            {# Less than #}
+{% if value >= 10 %}           {# Greater or equal #}
+{% if value <= 10 %}           {# Less or equal #}
+{% if value contains 'sub' %}  {# String/array contains #}
+{% if value %}                 {# Truthy check #}
+{% unless value %}             {# Falsy check #}
+\`\`\``,
+    links: `## Documentation Links
+
+- [Modyo Liquid Markup](https://docs.modyo.com/en/platform/channels/liquid-markup.html)
+- [Modyo Templates](https://docs.modyo.com/en/platform/channels/templates.html)
+- [Modyo Asset Manager](https://docs.modyo.com/en/platform/channels/asset-manager.html)
+- [Shopify Liquid Reference](https://shopify.github.io/liquid/) (base syntax)`,
+};
+const CONTENT_SECTIONS = [
+    "overview",
+    "syntax",
+    "modyo_objects",
+    "modyo_filters",
+    "navigation",
+    "snippets",
+    "layouts",
+    "site_architecture",
+    "dynamic_framework",
+    "best_practices",
+    "gotchas",
+    "links",
+];
+/**
+ * Liquid Reference Resource
+ *
+ * Provides comprehensive documentation for Liquid templating in Modyo.
+ * Covers syntax, Modyo-specific objects/filters, best practices, and common gotchas.
+ *
+ * Registered as a static resource (no parameters) so it appears in
+ * resources/list and is discoverable by all MCP clients.
+ */
+class LiquidReferenceResource extends ResourceBase {
+    config = {
+        name: "modyo-liquid-reference",
+        uriTemplate: "modyo://liquid-reference",
+        description: "Liquid templating reference for Modyo: syntax, objects, filters, navigation, architecture, Dynamic Framework, best practices, gotchas",
+        mimeType: "text/markdown",
+        annotations: {
+            readOnlyHint: true,
+            idempotentHint: true,
+            destructiveHint: false,
+        },
+        isPublic: true,
+    };
+    getParamsSchema() {
+        return z.void();
+    }
+    async read(uri) {
+        const fullContent = CONTENT_SECTIONS.map((s) => LIQUID_REFERENCE[s]).join("\n\n---\n\n");
+        this.info(`Serving full Liquid reference (${fullContent.length} chars)`);
+        return this.successText(uri, fullContent, "text/markdown");
+    }
+}
+export const liquidReference = new LiquidReferenceResource();
+//# sourceMappingURL=LiquidReference.js.map