@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/input-group.liquid

@@ -0,0 +1,196 @@
+{% doc %}
+  Baseline Input Group as a snippet (spec: components/input-group/spec.md). Puts things inside a control's box:
+  a prefix, a suffix, an icon, a unit, a small button. The group draws the border and the focus ring that the
+  control would otherwise draw itself, and the control inside goes borderless.
+
+  Anything that sits BESIDE a control rather than inside it is Button Group or plain layout, not this.
+
+  The control is captured by the caller and passed in, the same way `field` takes one — render `input` or
+  `textarea` into a capture and hand it over. The group strips the control's border in CSS rather than asking
+  for a modifier class, which is the one place this diverges from React: there the stripping lives on
+  InputGroupInput, here a descendant selector does it for whatever control is inside.
+
+  @param {string} control - the control's markup, captured from `input` or `textarea` (required)
+  @param {string} [start] - addon content for the start of the box (an icon, a unit, a button)
+  @param {string} [end] - addon content for the end of the box
+  @param {string} [layout] - 'input' (default) or 'textarea': textarea puts the addons above and below
+  @param {string} [class] - extra classes on the group
+
+  @example
+  {%- capture search_control -%}
+    {% render 'input', type: 'search', name: 'q', placeholder: 'Search...' %}
+  {%- endcapture -%}
+  {%- capture search_button -%}
+    {% render 'button', label: 'Search', variant: 'secondary', size: 'xs', type: 'submit' %}
+  {%- endcapture -%}
+  {% render 'input-group', control: search_control, end: search_button %}
+{% enddoc %}
+
+{%- liquid
+  assign ig_layout = layout | default: 'input'
+  unless ig_layout == 'textarea'
+    assign ig_layout = 'input'
+  endunless
+  assign classes = 'bl-input-group bl-input-group--' | append: ig_layout
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+
+  assign start_align = 'inline-start'
+  assign end_align = 'inline-end'
+  if ig_layout == 'textarea'
+    assign start_align = 'block-start'
+    assign end_align = 'block-end'
+  endif
+-%}
+<div class="{{ classes }}" data-slot="input-group" role="group">
+  {%- if start != blank -%}
+    <div class="bl-input-group__addon" data-slot="input-group-addon" data-align="{{ start_align }}" role="group">
+      {{ start }}
+    </div>
+  {%- endif -%}
+  {{ control }}
+  {%- if end != blank -%}
+    <div class="bl-input-group__addon" data-slot="input-group-addon" data-align="{{ end_align }}" role="group">
+      {{ end }}
+    </div>
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/input-group/input-group.tsx. Geometry from the input-group/* and control/addon/*
+     component tokens (ADR-0017); colours from the scheme class. */
+  .bl-input-group {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    height: var(--bl-input-group-md-height);
+    border: var(--bl-input-group-md-border-width) solid var(--input);
+    border-radius: var(--bl-input-group-md-radius);
+    transition: border-color 150ms, box-shadow 150ms;
+  }
+
+  /* The group reacts to the control rather than taking a state of its own — :focus-within and :has() do the
+     work, which is why the snippet has no state params (spec: States). */
+  .bl-input-group:focus-within {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+
+  .bl-input-group:has([aria-invalid='true']) {
+    border-color: var(--destructive);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+
+  .bl-input-group:has(:disabled) {
+    opacity: 0.5;
+  }
+
+  /* The textarea layout is a column, and its height is whatever the content needs. */
+  .bl-input-group--textarea {
+    height: auto;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* The control goes borderless and gives up its own ring: the group draws both. Done here rather than with a
+     modifier class on the control, so any control dropped into a group is stripped automatically. */
+  .bl-input-group .bl-input,
+  .bl-input-group .bl-textarea {
+    height: 100%;
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .bl-input-group .bl-textarea {
+    height: auto;
+    resize: none;
+    padding-block: var(--bl-input-group-md-padding-y);
+  }
+
+  /* The group draws the ring, so the control must never draw one — in EVERY state combination, including
+     invalid AND focused at once. That combination is the one that bites: input.liquid's
+     `.bl-input[aria-invalid='true']:focus-visible` is (0,3,0), and so are the two plainer stripping rules
+     here, so all three tied and source order decided it — the control won and painted a second destructive
+     ring inside the group's. Listing the combination explicitly makes it (0,4,0), which settles it by
+     specificity rather than by which snippet Shopify happens to concatenate last. */
+  .bl-input-group .bl-input:focus-visible,
+  .bl-input-group .bl-textarea:focus-visible,
+  .bl-input-group .bl-input[aria-invalid='true'],
+  .bl-input-group .bl-textarea[aria-invalid='true'],
+  .bl-input-group .bl-input[aria-invalid='true']:focus-visible,
+  .bl-input-group .bl-textarea[aria-invalid='true']:focus-visible {
+    border: 0;
+    box-shadow: none;
+  }
+
+  /* an invalid control inside a group colours the group, not itself: the text stays readable and the group
+     carries the error */
+  .bl-input-group .bl-input[aria-invalid='true'],
+  .bl-input-group .bl-textarea[aria-invalid='true'] {
+    color: var(--foreground);
+  }
+
+  .bl-input-group__addon {
+    display: flex;
+    height: auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bl-control-addon-gap);
+    padding-block: var(--bl-input-group-md-padding-y);
+    color: var(--muted-foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-input-group-md-font-size);
+    line-height: var(--bl-input-group-md-line-height);
+    font-weight: 500;
+    cursor: text;
+    user-select: none;
+  }
+
+  .bl-input-group__addon .bl-icon {
+    width: var(--bl-control-addon-icon-size);
+    height: var(--bl-control-addon-icon-size);
+  }
+
+  /* The negative inline margin is upstream's optical correction, kept deliberately (spec: Addons): a chip
+     inside a padded box otherwise reads as inset from the text beside it. */
+  .bl-input-group__addon[data-align='inline-start'] {
+    order: -1;
+    padding-inline-start: var(--bl-input-group-md-padding-x);
+  }
+
+  .bl-input-group__addon[data-align='inline-start']:has(.bl-button) {
+    margin-inline-start: -0.3rem;
+  }
+
+  .bl-input-group__addon[data-align='inline-end'] {
+    order: 1;
+    padding-inline-end: var(--bl-input-group-md-padding-x);
+  }
+
+  .bl-input-group__addon[data-align='inline-end']:has(.bl-button) {
+    margin-inline-end: -0.3rem;
+  }
+
+  .bl-input-group__addon[data-align='block-start'],
+  .bl-input-group__addon[data-align='block-end'] {
+    width: 100%;
+    justify-content: flex-start;
+    padding-inline: var(--bl-input-group-md-padding-x);
+  }
+
+  .bl-input-group__addon[data-align='block-start'] {
+    order: -1;
+    padding-block-start: var(--bl-control-addon-gap);
+  }
+
+  .bl-input-group__addon[data-align='block-end'] {
+    order: 1;
+    padding-block-end: var(--bl-control-addon-gap);
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/input.liquid

@@ -0,0 +1,126 @@
+{% doc %}
+  Baseline Input as a snippet, usable from any section, block or form (spec: components/input/spec.md).
+  Input owns its box and nothing else: no label, no description, no error text. Render a <label> beside it.
+
+  @param {string} [type] - native input type (default 'text'); text | email | password | search | tel | url | number | date | file
+  @param {string} [name] - form field name
+  @param {string} [id] - id, so a <label for> can point at it
+  @param {string} [value] - current value
+  @param {string} [placeholder] - placeholder text
+  @param {boolean} [required] - required attribute
+  @param {boolean} [disabled] - disabled attribute
+  @param {boolean} [invalid] - renders aria-invalid: destructive border, ring and value text
+  @param {string} [autocomplete] - autocomplete token
+  @param {string} [attrs] - extra attributes, e.g. 'min="1"' or block.shopify_attributes
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'input', type: 'email', name: 'contact[email]', id: 'email', placeholder: 'you@example.com', required: true %}
+{% enddoc %}
+
+{%- liquid
+  assign t = type | default: 'text'
+  assign classes = 'bl-input'
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<input
+  type="{{ t }}"
+  class="{{ classes }}"
+  data-slot="input"
+  {%- if name != blank %} name="{{ name }}"{% endif -%}
+  {%- if id != blank %} id="{{ id }}"{% endif -%}
+  {%- if value != blank %} value="{{ value | escape }}"{% endif -%}
+  {%- if placeholder != blank %} placeholder="{{ placeholder | escape }}"{% endif -%}
+  {%- if autocomplete != blank %} autocomplete="{{ autocomplete }}"{% endif -%}
+  {%- if required %} required{% endif -%}
+  {%- if disabled %} disabled{% endif -%}
+  {%- if invalid %} aria-invalid="true"{% endif -%}
+  {{ attrs }}
+>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/input/input.tsx. Colours come from the scheme class (--input, --ring ...);
+     geometry from the input/* component tokens in baseline-tokens.liquid (ADR-0017). */
+  .bl-input {
+    width: 100%;
+    min-width: 0;
+    height: var(--bl-input-md-height);
+    padding: var(--bl-input-md-padding-y) var(--bl-input-md-padding-x);
+    border: var(--bl-input-md-border-width) solid var(--input);
+    border-radius: var(--bl-input-md-radius);
+    background-color: transparent;
+    color: var(--foreground);
+    font-family: var(--bl-font-sans);
+    font-size: var(--bl-input-md-font-size);
+    line-height: var(--bl-input-md-line-height);
+    /* type=file lays its button and "no file chosen" label out as in-flow content, which otherwise sits at
+       the top of a fixed-height box; align-content centres it without touching display. */
+    align-content: center;
+    outline: none;
+    transition: color 150ms, border-color 150ms, box-shadow 150ms;
+  }
+  .bl-input::placeholder { color: var(--muted-foreground); }
+  .bl-input:focus-visible {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+  /* invalid is set here, never inherited from a surrounding field, so a bare input matches one inside a Field */
+  .bl-input[aria-invalid='true'] {
+    border-color: var(--destructive);
+    color: var(--destructive);
+  }
+  .bl-input[aria-invalid='true']:focus-visible {
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+  }
+  .bl-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  /* type=file lays its button out as in-flow content, so block padding pushes it past the bottom of the
+     fixed-height box; align-content above centres it once the padding is gone. */
+  .bl-input[type='file'] {
+    padding-block: 0;
+    /* Input Group's start padding for a leading button (input-group.tsx), so the file button sits like one */
+    padding-inline-start: calc(var(--bl-input-group-md-padding-x) - 0.3rem);
+  }
+  /* The number spinner is browser chrome Figma does not draw, and in Blink it appears on hover and shifts
+     the value. Hidden on every platform (spec: components/input/spec.md). Skeleton's quantity widget draws
+     its own +/- buttons, so nothing is lost on a storefront. */
+  .bl-input[type='number'] {
+    appearance: textfield;
+  }
+  .bl-input[type='number']::-webkit-inner-spin-button,
+  .bl-input[type='number']::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+  /* the browser's own file button, styled as Button secondary xs */
+  .bl-input::file-selector-button {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-end: var(--bl-input-md-gap);
+    height: var(--bl-button-xs-height);
+    padding-inline: var(--bl-button-xs-padding-x);
+    border: 0;
+    border-radius: var(--bl-button-xs-radius);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    font-family: inherit;
+    font-size: var(--bl-button-xs-font-size);
+    font-weight: var(--bl-button-font-weight);
+    cursor: pointer;
+  }
+  /* quantity fields are the one place a storefront wants a narrow box rather than a full-width one */
+  .bl-input--quantity {
+    width: auto;
+    max-width: 6rem;
+    text-align: center;
+  }
+  /* 16px on phones stops iOS zooming on focus; the token size from the md breakpoint up (shadcn's rule) */
+  @media (max-width: 767px) {
+    .bl-input { font-size: 1rem; }
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/item-group.liquid

@@ -0,0 +1,31 @@
+{% doc %}
+  Baseline Item Group as a snippet (spec: components/item/spec.md): a list of items (role="list"), the gap between them
+  following their size, as React's ItemGroup.
+
+  @param {string} content - the items, captured from the item snippet (required)
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture rows -%}
+    {%- for product in collection.products limit: 3 -%}
+      {% render 'item', title: product.title, description: product.vendor, image: product.featured_image, href: product.url, size: 'sm' %}
+    {%- endfor -%}
+  {%- endcapture -%}
+  {% render 'item-group', content: rows %}
+{% enddoc %}
+
+<div class="bl-item-group{% if class %} {{ class }}{% endif %}" role="list" data-slot="item-group">
+  {{- content -}}
+</div>
+
+{% stylesheet %}
+  /* Mirrors ItemGroup in registry/src/ui/item/item.tsx. */
+  .bl-item-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: var(--bl-item-group-md-gap);
+  }
+  .bl-item-group:has(.bl-item--sm) { gap: var(--bl-item-group-sm-gap); }
+  .bl-item-group:has(.bl-item--xs) { gap: var(--bl-item-group-xs-gap); }
+{% endstylesheet %}

package/templates/shopify/snippets/item.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4360-299
+// source=platforms/shopify/theme/snippets/item.liquid
+// component=item (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the item snippet; a list of them is the item-group snippet.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum("Variant", { default: "default", outline: "outline", muted: "muted" });
+const size = instance.getEnum("Size", { md: "md", sm: "sm", xs: "xs" });
+const showMedia = instance.getBoolean("Show Media");
+const showActions = instance.getBoolean("Show Actions");
+
+// Title and description are component properties (2026-10-02): the Content slot became a fixed title and
+// description, since they are not drop-in content.
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+let media = "";
+if (showMedia) {
+  const part = instance.findInstance(".Item/Media");
+  const kind = part && part.type === "INSTANCE" ? part.getEnum("Variant", { icon: "icon", image: "image" }) : "icon";
+  media = kind === "image" ? "image: product.featured_image" : "icon: 'success'";
+}
+const args = [
+  `title: '${title}'`,
+  description ? `description: '${description}'` : "",
+  variant !== "default" ? `variant: '${variant}'` : "",
+  size !== "md" ? `size: '${size}'` : "",
+  media,
+  showActions ? "actions: item_actions" : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: showActions
+    ? figma.code`{%- capture item_actions -%}{% render 'button', label: 'Action', variant: 'outline', size: 'sm' %}{%- endcapture -%}
+{% render 'item', ${args} %}`
+    : figma.code`{% render 'item', ${args} %}`,
+  id: "shopify-item",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/item.liquid

@@ -0,0 +1,162 @@
+{% doc %}
+  Baseline Item as a snippet (spec: components/item/spec.md). A row: optional media (an icon or an image), a title and
+  description, and actions at the end. A link item (`href`) is one <a>: it renders no actions and its description takes
+  no links, because nothing interactive may sit inside a link. Inside item-group it is a list item.
+
+  @param {string} title - one line; longer titles are cut off
+  @param {string} [description] - two lines at most; inline HTML allowed (not inside a link item)
+  @param {string} [variant] - default | outline | muted
+  @param {string} [size] - md (default) | sm | xs
+  @param {string} [icon] - Baseline system icon name (snippets/icon.liquid) as the media
+  @param {image} [image] - an image as the media (square, cropped)
+  @param {string} [image_alt] - alt text for the image; empty when the title already names it
+  @param {string} [href] - makes the whole row a link
+  @param {string} [actions] - ready markup for the end of the row, e.g. captured button snippets
+  @param {string} [aside] - a right-hand value that does not grow (a second content column, e.g. a price)
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture buy -%}{% render 'button', label: 'Add', size: 'sm', variant: 'outline' %}{%- endcapture -%}
+  {% render 'item', title: product.title, description: product.vendor, image: product.featured_image, actions: buy %}
+{% enddoc %}
+
+{%- liquid
+  assign v = variant | default: 'default'
+  case v
+    when 'outline', 'muted'
+    else
+      assign v = 'default'
+  endcase
+  assign s = size | default: 'md'
+  case s
+    when 'sm', 'xs'
+    else
+      assign s = 'md'
+  endcase
+  assign classes = 'bl-item bl-item--' | append: v | append: ' bl-item--' | append: s
+  if description != blank
+    assign classes = classes | append: ' bl-item--has-description'
+  endif
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+  assign tag = 'div'
+  if href != blank
+    assign tag = 'a'
+  endif
+-%}
+<{{ tag }}
+  class="{{ classes }}"
+  data-slot="item"
+  data-size="{{ s }}"
+  {% if href != blank %}
+    href="{{ href }}"
+  {% else %}
+    role="listitem"
+  {% endif %}
+>
+  {%- if image != blank -%}
+    <div class="bl-item__media bl-item__media--image" data-slot="item-media">
+      {{- image | image_url: width: 160, height: 160, crop: 'center' | image_tag: alt: image_alt, loading: 'lazy' -}}
+    </div>
+  {%- elsif icon != blank -%}
+    <div class="bl-item__media bl-item__media--icon" data-slot="item-media">{% render 'icon', name: icon %}</div>
+  {%- endif -%}
+  <div class="bl-item__content" data-slot="item-content">
+    <div class="bl-item__title" data-slot="item-title">{{ title | escape }}</div>
+    {%- if description != blank -%}
+      <p class="bl-item__description" data-slot="item-description">
+        {%- if href != blank -%}{{ description | strip_html }}{%- else -%}{{ description }}{%- endif -%}
+      </p>
+    {%- endif -%}
+  </div>
+  {%- if aside != blank -%}
+    <div class="bl-item__content bl-item__content--aside" data-slot="item-content">{{ aside }}</div>
+  {%- endif -%}
+  {%- if actions != blank and href == blank -%}
+    <div class="bl-item__actions" data-slot="item-actions">{{ actions }}</div>
+  {%- endif -%}
+</{{ tag }}>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/item/item.tsx. Colours from the scheme; geometry from the item/* tokens; muted is the
+     item/muted/background tint (muted at 50 %). */
+  .bl-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    border: var(--bl-item-border-width) solid transparent;
+    border-radius: var(--bl-item-radius);
+    color: inherit;
+    font-size: var(--bl-item-title-font-size);
+    line-height: var(--bl-item-title-line-height);
+    text-decoration: none;
+    outline: none;
+    transition: background-color 100ms, border-color 100ms;
+  }
+  .bl-item--outline { border-color: var(--border); }
+  .bl-item--muted { background-color: var(--bl-item-muted-background); }
+  a.bl-item:hover { background-color: var(--muted); }
+  .bl-item:focus-visible {
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  }
+  .bl-item--md { gap: var(--bl-item-md-gap); padding: var(--bl-item-md-padding-y) var(--bl-item-md-padding-x); }
+  .bl-item--sm { gap: var(--bl-item-sm-gap); padding: var(--bl-item-sm-padding-y) var(--bl-item-sm-padding-x); }
+  .bl-item--xs { gap: var(--bl-item-xs-gap); padding: var(--bl-item-xs-padding-y) var(--bl-item-xs-padding-x); }
+
+  .bl-item__media {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bl-item-actions-gap);
+  }
+  /* with a description the media aligns to the top and drops 2px, as upstream */
+  .bl-item--has-description .bl-item__media { align-self: flex-start; transform: translateY(2px); }
+  .bl-item__media--icon .bl-icon { width: var(--bl-item-media-icon-size); height: var(--bl-item-media-icon-size); }
+  .bl-item__media--image {
+    width: var(--bl-item-media-md-size);
+    height: var(--bl-item-media-md-size);
+    overflow: hidden;
+    border-radius: var(--bl-item-media-radius);
+  }
+  .bl-item--sm .bl-item__media--image { width: var(--bl-item-media-sm-size); height: var(--bl-item-media-sm-size); }
+  .bl-item--xs .bl-item__media--image { width: var(--bl-item-media-xs-size); height: var(--bl-item-media-xs-size); }
+  .bl-item__media--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+  .bl-item__content { display: flex; flex: 1; flex-direction: column; gap: var(--bl-item-md-content-gap); }
+  .bl-item--sm .bl-item__content { gap: var(--bl-item-sm-content-gap); }
+  .bl-item--xs .bl-item__content { gap: var(--bl-item-xs-content-gap); }
+  .bl-item__content + .bl-item__content { flex: none; }
+
+  .bl-item__title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    width: fit-content;
+    font-size: var(--bl-item-title-font-size);
+    font-weight: var(--bl-item-title-font-weight);
+    line-height: var(--bl-item-title-line-height);
+  }
+  .bl-item__description {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    margin: 0;
+    color: var(--muted-foreground);
+    font-weight: normal;
+    text-align: start;
+    font-size: var(--bl-item-description-md-font-size);
+    line-height: var(--bl-item-description-md-line-height);
+  }
+  .bl-item--sm .bl-item__description { font-size: var(--bl-item-description-sm-font-size); line-height: var(--bl-item-description-sm-line-height); }
+  .bl-item--xs .bl-item__description { font-size: var(--bl-item-description-xs-font-size); line-height: var(--bl-item-description-xs-line-height); }
+  .bl-item__description > a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
+  .bl-item__description > a:hover { color: var(--primary); }
+
+  .bl-item__actions { display: flex; align-items: center; gap: var(--bl-item-actions-gap); }
+{% endstylesheet %}

package/templates/shopify/snippets/media.figma.ts

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2249-44210
+// source=platforms/shopify/theme/snippets/media.liquid
+// component=media (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the media snippet. A merchant-placed one is the Media theme
+// block (blocks/media.liquid), whose ratio select has the same seven values plus "adapt to image".
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const ratio = instance.getEnum("Aspect Ratio", {
+  "1-1": "1",
+  "3-2": "1.5",
+  "2-3": "0.6667",
+  "4-3": "1.3333",
+  "3-4": "0.75",
+  "16-9": "1.7778",
+  "9-16": "0.5625",
+});
+const showPlay = instance.getBoolean("Show Play Button");
+const showCaption = instance.getBoolean("Show Caption");
+const caption = instance.getString("Caption");
+
+const args = [
+  "image: section.settings.image",
+  `ratio: ${ratio}`,
+  showPlay ? "video: product.media[1]" : "",
+  showCaption ? `caption: '${caption}'` : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'media', ${args} %}`,
+  id: "shopify-media",
+  metadata: { nestable: true },
+};