Add native Liquid registry and installation regression tests

liquid/README.md

@@ -8,9 +8,9 @@ Native Shopify Liquid, readable CSS and ES modules. The consumer needs no Tailwi
 
 `registry.json` is the install contract. Every item is universal, every file has an explicit `~/assets/` or `~/snippets/` target, and dependencies use full Liquid registry URLs. Individual items install their prerequisites, including shared popup styles and runtime where needed. `components` is the complete set. `init` is tokens and base styles only.
 
-CSS and Liquid are maintained by hand. The shared neutral palette comes from `registry/styles/shadcn/themes.json`; `styles/primitives.css` holds native sizes, radii, shadows and media roles. Theme colors, settings, content, Shopify forms and layouts remain theme-owned. A consumer loads its scheme overrides after `ui`, and `custom.css` after `content_for_header`.
+Only shared neutral palette tokens, the part inventory, licenses and file hashes are generated by `scripts/registry-liquid.mjs`. CSS and Liquid are maintained by hand. The palette comes from `registry/styles/shadcn/themes.json`; `styles/primitives.css` holds native sizes, radii, shadows and media roles. Theme colors, settings, content, Shopify forms and layouts remain theme-owned. A consumer loads its scheme overrides after `ui`, and `custom.css` after `content_for_header`.
 
-Registry generation and installation tests are added separately from this source layer. Local LiquidJS fixtures do not verify a store's commerce objects or Shopify's stylesheet subsetting.
+Run `pnpm registry:liquid` after a source change. Commit `public/r/liquid`, `contracts.json`, `styles/tokens.css`, `licenses.json` and `manifest.json`. `pnpm test:liquid` verifies the real CLI, the dependency closures, token parity and repeat installs. `pnpm test:browser` verifies a CLI-installed copy in Chromium, Firefox and WebKit, including native forms and editor lifecycle. The local renderer is LiquidJS with explicit Shopify filter substitutes. It does not verify a store's commerce objects or Shopify's stylesheet subsetting.
 
 This first port follows Vega and the complete reusable storefront layer from `fulldotdev/liquid-template` at `e13fc25`. Sidebar, Resizable, Menubar, Scroll Area and React-only app components are outside this native storefront set. Shopify blocks, commerce adapters, translation keys and settings are not installed by the UI registry. The existing storefront media and card variants are additive to the shared component contract. Other Tailwind presets are not translated automatically.
 

liquid/examples/accordion.liquid

@@ -0,0 +1,10 @@
+<div data-slot='accordion' data-multiple='false'>
+  <div data-slot='accordion-item' data-value='details'>
+    <h3 data-slot='accordion-header'><button type='button' data-slot='accordion-trigger'>Product details</button></h3>
+    <div data-slot='accordion-content'><p>Place your product details here.</p></div>
+  </div>
+  <div data-slot='accordion-item' data-value='care'>
+    <h3 data-slot='accordion-header'><button type='button' data-slot='accordion-trigger'>Care instructions</button></h3>
+    <div data-slot='accordion-content'><p>Add care instructions for your product.</p></div>
+  </div>
+</div>

liquid/examples/alert-dialog.liquid

@@ -0,0 +1,40 @@
+<div data-slot='alert-dialog'>
+  <button type='button' data-slot='alert-dialog-trigger' data-button data-variant='outline'>Reset</button>
+  <div data-slot='alert-dialog-portal'>
+    <div data-slot='alert-dialog-overlay' hidden></div>
+    <div data-slot='alert-dialog-content' hidden>
+      <div data-slot='alert-dialog-header'>
+        <div data-slot='alert-dialog-media'>
+          <svg
+            class='icon'
+            data-slot='icon'
+            viewBox='0 0 24 24'
+            fill='none'
+            stroke='currentColor'
+            stroke-width='2'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+            aria-hidden='true'
+            focusable='false'
+          >
+            <path d='M3 12a9 9 0 0 1 15.4-6.4L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-15.4 6.4L3 16'/><path d='M8 16H3v5'/>
+          </svg>
+        </div>
+        <h3 data-slot='alert-dialog-title'>Reset the form?</h3>
+        <p data-slot='alert-dialog-description'>This clears the choices in the form above.</p>
+      </div>
+      <div data-slot='alert-dialog-footer'>
+        <button type='button' data-slot='alert-dialog-cancel' data-button data-variant='outline'>Cancel</button>
+        <button
+          type='button'
+
+          data-slot='alert-dialog-action'
+          data-button
+          data-variant='destructive'
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

liquid/examples/alert.liquid

@@ -0,0 +1,4 @@
+<div data-slot='alert'>
+  <h2 data-slot='alert-title'>Example notice</h2>
+  <div data-slot='alert-description'>Place a useful message for your customers here.</div>
+</div>

liquid/examples/aspect-ratio.liquid

@@ -0,0 +1 @@
+<div data-slot='aspect-ratio' style='aspect-ratio:16/9;background:var(--muted)'><span>16:9 media</span></div>

liquid/examples/attachment.liquid

@@ -0,0 +1,22 @@
+<div data-slot='attachment' data-state='done'>
+  <div data-slot='attachment-media'>
+    <svg
+      class='icon'
+      data-slot='icon'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      focusable='false'
+    >
+      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M16 13H8M16 17H8M10 9H8'/>
+    </svg>
+  </div>
+  <div data-slot='attachment-content'>
+    <span data-slot='attachment-title'>example-file.pdf</span>
+    <span data-slot='attachment-description'>PDF</span>
+  </div>
+</div>

liquid/examples/avatar.liquid

@@ -0,0 +1 @@
+<span data-slot='avatar'><span data-slot='avatar-fallback'>FD</span></span>

liquid/examples/badge.liquid

@@ -0,0 +1,5 @@
+<div style='display:flex;flex-wrap:wrap;gap:12px'>
+  <span data-slot='badge'>Default</span><span data-slot='badge' data-variant='secondary'>Secondary</span
+  ><span data-slot='badge' data-variant='outline'>Outline</span
+  ><span data-slot='badge' data-variant='destructive'>Destructive</span>
+</div>

liquid/examples/banner.liquid

@@ -0,0 +1,3 @@
+<aside data-slot='banner'>
+  <div data-slot='banner-container'><p>Place your announcement here.</p></div>
+</aside>

liquid/examples/breadcrumb.liquid

@@ -0,0 +1,7 @@
+<nav data-slot='breadcrumb' aria-label='Breadcrumb'>
+  <ol data-slot='breadcrumb-list'>
+    <li data-slot='breadcrumb-item'><a data-slot='breadcrumb-link' href='{{ routes.root_url }}'>Home</a></li>
+    <li data-slot='breadcrumb-separator' aria-hidden='true'>/</li>
+    <li data-slot='breadcrumb-item'><span data-slot='breadcrumb-page' aria-current='page'>Collection</span></li>
+  </ol>
+</nav>

liquid/examples/button-group.liquid

@@ -0,0 +1,6 @@
+<div data-slot='button-group' role='group' aria-label='Shortcuts'>
+  <span data-slot='button-group-text'>Go to</span>
+  <a href='{{ routes.all_products_collection_url }}' data-slot='button' data-variant='outline'>Products</a>
+  <a href='{{ routes.search_url }}' data-slot='button' data-variant='outline'>Search</a>
+  <a href='{{ routes.cart_url }}' data-slot='button' data-variant='outline'>Cart</a>
+</div>

liquid/examples/button.liquid

@@ -0,0 +1,8 @@
+<div style='display:flex;flex-wrap:wrap;align-items:center;gap:12px'>
+  {% render 'ui-button', label: 'Button' %}
+  {% render 'ui-button', label: 'Outline', variant: 'outline' %}
+  {% render 'ui-button', label: 'Secondary', variant: 'secondary' %}
+  {% render 'ui-button', label: 'Ghost', variant: 'ghost' %}
+  {% render 'ui-button', label: 'Destructive', variant: 'destructive' %}
+  {% render 'ui-button', label: 'View collection', href: routes.all_products_collection_url, variant: 'link' %}
+</div>

liquid/examples/card.liquid

@@ -0,0 +1,11 @@
+<article data-slot='card'>
+  <header data-slot='card-header'>
+    <h2 data-slot='card-title'>Your collection</h2>
+    <p data-slot='card-description'>A complete card with native HTML parts.</p>
+    <span data-slot='card-action'>New</span>
+  </header>
+  <div data-slot='card-content'>Place your own content here.</div>
+  <footer data-slot='card-footer'>
+    <a data-slot='button' data-variant='outline' href='{{ routes.all_products_collection_url }}'>View collection</a>
+  </footer>
+</article>

liquid/examples/carousel.liquid

@@ -0,0 +1,12 @@
+<section data-slot='carousel' aria-label='Example gallery'>
+  <div data-slot='carousel-content'>
+    <div data-slot='carousel-item'>
+      <div data-slot='card'><div data-slot='card-content'>First slide</div></div>
+    </div>
+    <div data-slot='carousel-item'>
+      <div data-slot='card'><div data-slot='card-content'>Second slide</div></div>
+    </div>
+  </div>
+  <button data-slot='carousel-previous' data-button data-variant='outline' type='button' hidden>Previous</button
+  ><button data-slot='carousel-next' data-button data-variant='outline' type='button' hidden>Next</button>
+</section>

liquid/examples/checkbox.liquid

@@ -0,0 +1,4 @@
+<label data-slot='label'>
+  <input type='checkbox' data-slot='checkbox' name='gift_wrap' value='yes'>
+  Gift wrap
+</label>

liquid/examples/collapsible.liquid

@@ -0,0 +1,29 @@
+<div data-slot='collapsible'>
+  <button
+    type='button'
+    data-slot='collapsible-trigger'
+    data-button
+    data-variant='ghost'
+    data-size='sm'
+  >
+    Show more
+
+    <svg
+      class='icon'
+      data-slot='icon'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      focusable='false'
+    >
+      <path d='m6 9 6 6 6-6'/>
+    </svg>
+  </button>
+  <div data-slot='collapsible-content'>
+    <p data-slot='typography-muted'>Collapsible content stays visible without JavaScript.</p>
+  </div>
+</div>

liquid/examples/combobox.liquid

@@ -0,0 +1,13 @@
+<div data-slot='combobox'>
+  <label data-slot='field-label' for='sample-combobox'>Country</label>
+  <input id='sample-combobox' data-slot='combobox-input' autocomplete='off'>
+  <div data-slot='combobox-positioner'>
+    <div data-slot='combobox-content' hidden>
+      <div data-slot='combobox-list'>
+        <div data-slot='combobox-item' data-value='nl'>Netherlands</div>
+        <div data-slot='combobox-item' data-value='be'>Belgium</div>
+        <div data-slot='combobox-empty' hidden>No countries</div>
+      </div>
+    </div>
+  </div>
+</div>

liquid/examples/command.liquid

@@ -0,0 +1,10 @@
+<div data-slot='command'>
+  <input data-slot='command-input' aria-label='Find a page'>
+  <div data-slot='command-list'>
+    <div data-slot='command-group'>
+      <a href='{{ routes.all_products_collection_url }}' data-slot='command-item'>Products</a>
+      <a href='{{ routes.cart_url }}' data-slot='command-item'>Cart</a>
+    </div>
+    <div data-slot='command-empty'>No pages</div>
+  </div>
+</div>

liquid/examples/dependencies.json

@@ -0,0 +1,60 @@
+{
+  "banner": ["banner"],
+  "tabs": ["tabs", "typography"],
+  "form": ["form", "button"],
+  "collapsible": ["collapsible", "icon", "typography", "button"],
+  "select": ["select", "field", "icon"],
+  "field": ["field", "icon", "select"],
+  "item": ["item", "button", "icon"],
+  "spinner": ["spinner"],
+  "video": ["video"],
+  "button": ["button"],
+  "toggle": ["toggle", "icon"],
+  "logo": ["logo"],
+  "kbd": ["kbd"],
+  "rating": ["rating"],
+  "tooltip": ["tooltip", "icon", "button"],
+  "avatar": ["avatar"],
+  "empty": ["empty", "button"],
+  "alert-dialog": ["alert-dialog", "icon"],
+  "navigation-menu": ["navigation-menu"],
+  "typography": ["typography"],
+  "toc": ["toc"],
+  "native-select": ["native-select", "field"],
+  "icon": ["icon"],
+  "textarea": ["textarea", "field"],
+  "combobox": ["combobox", "field"],
+  "toast": ["toast", "icon"],
+  "header": ["header", "button", "logo"],
+  "command": ["command"],
+  "accordion": ["accordion"],
+  "slider": ["slider", "field"],
+  "input": ["input", "field"],
+  "popover": ["popover", "button"],
+  "input-group": ["input-group", "button"],
+  "label": ["label"],
+  "toggle-group": ["toggle-group", "icon"],
+  "dialog": ["dialog", "button"],
+  "drawer": ["drawer"],
+  "badge": ["badge"],
+  "alert": ["alert"],
+  "table": ["table"],
+  "breadcrumb": ["breadcrumb"],
+  "aspect-ratio": ["aspect-ratio"],
+  "price": ["price"],
+  "radio-group": ["radio-group", "field"],
+  "checkbox": ["checkbox", "field"],
+  "switch": ["switch", "checkbox", "field"],
+  "skeleton": ["skeleton"],
+  "separator": ["separator"],
+  "card": ["card", "button"],
+  "pagination": ["pagination", "button"],
+  "sheet": ["sheet", "button"],
+  "carousel": ["carousel", "card"],
+  "attachment": ["attachment"],
+  "dropdown-menu": ["dropdown-menu", "icon", "button"],
+  "hover-card": ["hover-card", "typography", "button"],
+  "marquee": ["marquee"],
+  "section": ["section"],
+  "button-group": ["button-group"]
+}

liquid/examples/dialog.liquid

@@ -0,0 +1,11 @@
+<div data-slot='dialog'>
+  <button type='button' data-slot='dialog-trigger' data-button>Open dialog</button>
+  <div data-slot='dialog-overlay' hidden></div>
+  <div data-slot='dialog-content' hidden>
+    <header data-slot='dialog-header'>
+      <h2 data-slot='dialog-title'>Example dialog</h2>
+      <p data-slot='dialog-description'>Keyboard and focus test.</p>
+    </header>
+    <button type='button' data-slot='dialog-close' data-button>Close</button>
+  </div>
+</div>

liquid/examples/drawer.liquid

@@ -0,0 +1,18 @@
+<div data-slot='drawer'>
+  <button type='button' data-slot='drawer-trigger' data-button data-variant='outline'>Drawer</button>
+  <div data-slot='drawer-portal'>
+    <div data-slot='drawer-backdrop' hidden></div>
+    <div data-slot='drawer-popup' hidden>
+      <div data-slot='drawer-handle'></div>
+      <div data-slot='drawer-content'>
+        <div data-slot='drawer-header'>
+          <h3 data-slot='drawer-title'>Drawer</h3>
+          <p data-slot='drawer-description'>Swipe down or press Escape to close.</p>
+        </div>
+        <div data-slot='drawer-footer'>
+          <button type='button' data-slot='drawer-close' data-button data-variant='outline'>Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

liquid/examples/dropdown-menu.liquid

@@ -0,0 +1,88 @@
+<div data-slot='dropdown-menu' data-default-value='featured' data-close-on-select='false'>
+  <button type='button' data-slot='dropdown-menu-trigger' data-button data-variant='outline'>
+    Menu
+
+    <svg
+      class='icon'
+      data-slot='icon'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      focusable='false'
+    >
+      <circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/>
+    </svg>
+  </button>
+  <div data-slot='dropdown-menu-portal'>
+    <div data-slot='dropdown-menu-positioner'>
+      <div data-slot='dropdown-menu-content' hidden>
+        <p data-slot='dropdown-menu-label'>Sort by</p>
+
+        <button type='button' data-slot='dropdown-menu-radio-item' data-value='featured'>
+          Featured
+          <span data-slot='dropdown-menu-item-indicator'>
+            <svg
+              class='icon'
+              data-slot='icon'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              stroke-width='2'
+              stroke-linecap='round'
+              stroke-linejoin='round'
+              aria-hidden='true'
+              focusable='false'
+            >
+              <path d='M20 6 9 17l-5-5'/>
+            </svg>
+          </span>
+        </button>
+
+        <button type='button' data-slot='dropdown-menu-radio-item' data-value='newest'>
+          Newest
+          <span data-slot='dropdown-menu-item-indicator'>
+            <svg
+              class='icon'
+              data-slot='icon'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              stroke-width='2'
+              stroke-linecap='round'
+              stroke-linejoin='round'
+              aria-hidden='true'
+              focusable='false'
+            >
+              <path d='M20 6 9 17l-5-5'/>
+            </svg>
+          </span>
+        </button>
+
+        <div data-slot='dropdown-menu-separator'></div>
+        <button type='button' data-slot='dropdown-menu-checkbox-item' data-value='in_stock'>
+          In stock only
+          <span data-slot='dropdown-menu-item-indicator'>
+            <svg
+              class='icon'
+              data-slot='icon'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              stroke-width='2'
+              stroke-linecap='round'
+              stroke-linejoin='round'
+              aria-hidden='true'
+              focusable='false'
+            >
+              <path d='M20 6 9 17l-5-5'/>
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>