@jxsuite/starters 3.4.0 → 3.6.0

package/sites/shop/components/shp-product-card.json

@@ -1,238 +0,0 @@
-{
-  "tagName": "shp-product-card",
-  "state": {
-    "title": "",
-    "price": "",
-    "oldPrice": "",
-    "badge": "",
-    "category": "",
-    "href": "/products/",
-    "image": { "type": "string", "format": "image", "default": "" }
-  },
-  "style": {
-    "display": "block",
-    "height": "100%"
-  },
-  "children": [
-    {
-      "tagName": "a",
-      "attributes": { "href": "${state.href}" },
-      "style": {
-        "display": "flex",
-        "flexDirection": "column",
-        "height": "100%",
-        "backgroundColor": "var(--color-bg-white)",
-        "border": "1px solid var(--color-border)",
-        "borderRadius": "var(--radius)",
-        "overflow": "hidden",
-        "textDecoration": "none",
-        "color": "inherit",
-        "boxShadow": "var(--shadow-card)",
-        "transition": "border-color 0.18s, box-shadow 0.18s, transform 0.18s",
-        ":hover": {
-          "borderColor": "var(--color-primary)",
-          "boxShadow": "0 20px 44px -20px rgba(13,17,23,0.32)",
-          "transform": "translateY(-5px)"
-        },
-        ":hover img": { "transform": "scale(1.06)" },
-        ":hover .qadd": { "transform": "translateY(0)", "opacity": "1" }
-      },
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "position": "relative",
-            "aspectRatio": "1 / 1",
-            "overflow": "hidden",
-            "backgroundColor": "var(--color-panel)"
-          },
-          "children": [
-            {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.image}",
-                "alt": "${state.title}",
-                "loading": "lazy"
-              },
-              "style": {
-                "position": "absolute",
-                "inset": "0",
-                "width": "100%",
-                "height": "100%",
-                "objectFit": "cover",
-                "display": "block",
-                "transition": "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
-              }
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "display": "${state.badge ? 'inline-flex' : 'none'}",
-                "position": "absolute",
-                "top": "0.8rem",
-                "left": "0.8rem",
-                "alignItems": "center",
-                "padding": "0.28rem 0.65rem",
-                "borderRadius": "999px",
-                "fontSize": "0.68rem",
-                "fontWeight": "800",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.06em",
-                "color": "var(--color-text-white)",
-                "backgroundColor": "${state.badge === 'Sale' ? 'var(--color-sale)' : (state.badge === 'New' ? 'var(--color-primary)' : 'var(--color-gold)')}",
-                "boxShadow": "0 6px 14px -6px rgba(13,17,23,0.5)"
-              },
-              "textContent": "${state.badge}"
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "position": "absolute",
-                "top": "0.8rem",
-                "right": "0.8rem",
-                "display": "inline-flex",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "width": "2rem",
-                "height": "2rem",
-                "borderRadius": "999px",
-                "backgroundColor": "rgba(255,255,255,0.92)",
-                "color": "var(--color-text-secondary)",
-                "fontSize": "0.95rem",
-                "boxShadow": "0 2px 8px rgba(13,17,23,0.18)"
-              },
-              "textContent": "♡"
-            },
-            {
-              "tagName": "div",
-              "attributes": { "class": "qadd" },
-              "style": {
-                "position": "absolute",
-                "left": "0.7rem",
-                "right": "0.7rem",
-                "bottom": "0.7rem",
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "center",
-                "gap": "0.4rem",
-                "padding": "0.6rem 1rem",
-                "borderRadius": "999px",
-                "backgroundColor": "var(--color-ink)",
-                "color": "var(--color-text-white)",
-                "fontSize": "0.82rem",
-                "fontWeight": "700",
-                "opacity": "0",
-                "transform": "translateY(120%)",
-                "transition": "transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s",
-                "@--md": { "opacity": "1", "transform": "translateY(0)" }
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "style": { "color": "var(--color-brand-bright)", "fontSize": "0.95rem" },
-                  "textContent": "＋"
-                },
-                { "tagName": "span", "textContent": "Quick add" }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "padding": "1.1rem 1.2rem 1.3rem",
-            "display": "flex",
-            "flexDirection": "column",
-            "flex": "1"
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "fontSize": "0.7rem",
-                "fontWeight": "700",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.1em",
-                "color": "var(--color-text-muted)",
-                "marginBottom": "0.4rem"
-              },
-              "textContent": "${state.category}"
-            },
-            {
-              "tagName": "h3",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.15rem",
-                "fontWeight": "700",
-                "letterSpacing": "-0.01em",
-                "lineHeight": "1.2",
-                "margin": "0"
-              },
-              "textContent": "${state.title}"
-            },
-            {
-              "tagName": "div",
-              "style": {
-                "marginTop": "auto",
-                "paddingTop": "0.9rem",
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.75rem"
-              },
-              "children": [
-                {
-                  "tagName": "div",
-                  "style": { "display": "flex", "alignItems": "baseline", "gap": "0.5rem" },
-                  "children": [
-                    {
-                      "tagName": "span",
-                      "style": {
-                        "fontFamily": "var(--font-heading)",
-                        "fontSize": "1.35rem",
-                        "fontWeight": "800",
-                        "letterSpacing": "-0.02em",
-                        "color": "var(--color-text-primary)",
-                        "fontVariantNumeric": "tabular-nums"
-                      },
-                      "textContent": "${state.price}"
-                    },
-                    {
-                      "tagName": "span",
-                      "style": {
-                        "display": "${state.oldPrice ? 'inline' : 'none'}",
-                        "fontSize": "0.92rem",
-                        "fontWeight": "600",
-                        "color": "var(--color-text-muted)",
-                        "textDecoration": "line-through",
-                        "fontVariantNumeric": "tabular-nums"
-                      },
-                      "textContent": "${state.oldPrice}"
-                    }
-                  ]
-                },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "display": "inline-flex",
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "width": "2rem",
-                    "height": "2rem",
-                    "borderRadius": "999px",
-                    "backgroundColor": "var(--color-brand-tint)",
-                    "color": "var(--color-primary)",
-                    "fontSize": "0.95rem",
-                    "fontWeight": "800",
-                    "flexShrink": "0"
-                  },
-                  "textContent": "→"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/sites/shop/components/shp-product-filter.json

@@ -1,366 +0,0 @@
-{
-  "tagName": "shp-product-filter",
-  "state": {
-    "category": "all",
-    "visibleCount": {
-      "$prototype": "Function",
-      "body": "return ({ all: 8, Road: 2, Mountain: 2, Gravel: 1, Kids: 1, Accessories: 2 })[state.category];"
-    },
-    "setAll": {
-      "$expression": { "operator": "=", "target": { "$ref": "#/state/category" }, "value": "all" }
-    },
-    "setRoad": {
-      "$expression": { "operator": "=", "target": { "$ref": "#/state/category" }, "value": "Road" }
-    },
-    "setMountain": {
-      "$expression": {
-        "operator": "=",
-        "target": { "$ref": "#/state/category" },
-        "value": "Mountain"
-      }
-    },
-    "setGravel": {
-      "$expression": {
-        "operator": "=",
-        "target": { "$ref": "#/state/category" },
-        "value": "Gravel"
-      }
-    },
-    "setKids": {
-      "$expression": { "operator": "=", "target": { "$ref": "#/state/category" }, "value": "Kids" }
-    },
-    "setAccessories": {
-      "$expression": {
-        "operator": "=",
-        "target": { "$ref": "#/state/category" },
-        "value": "Accessories"
-      }
-    }
-  },
-  "style": { "display": "block", "minWidth": "0" },
-  "children": [
-    {
-      "tagName": "style",
-      "textContent": "${state.category === 'all' ? '' : '#shop-grid > shp-product-card[data-category]{display:none} #shop-grid > shp-product-card[data-category=\"' + state.category + '\"]{display:block}'}"
-    },
-    {
-      "tagName": "aside",
-      "style": {
-        "position": "sticky",
-        "top": "7rem",
-        "backgroundColor": "var(--color-bg-white)",
-        "border": "1px solid var(--color-border)",
-        "borderRadius": "var(--radius-lg)",
-        "boxShadow": "var(--shadow-card)",
-        "padding": "1.4rem",
-        "@--md": { "position": "static" }
-      },
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "paddingBottom": "1rem",
-            "marginBottom": "1.1rem",
-            "borderBottom": "1px solid var(--color-border)"
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "display": "inline-flex",
-                "alignItems": "center",
-                "gap": "0.5rem",
-                "fontFamily": "var(--font-heading)",
-                "fontWeight": "800",
-                "fontSize": "1.05rem",
-                "letterSpacing": "-0.01em"
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "style": { "color": "var(--color-primary)" },
-                  "textContent": "⚑"
-                },
-                { "tagName": "span", "textContent": "Filter" }
-              ]
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "display": "inline-flex",
-                "alignItems": "center",
-                "gap": "0.35rem",
-                "padding": "0.28rem 0.65rem",
-                "borderRadius": "999px",
-                "backgroundColor": "var(--color-brand-tint)",
-                "color": "var(--color-primary)",
-                "fontWeight": "800",
-                "fontSize": "0.8rem",
-                "fontVariantNumeric": "tabular-nums"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "${state.visibleCount}" },
-                {
-                  "tagName": "span",
-                  "style": { "fontWeight": "600", "color": "var(--color-text-muted)" },
-                  "textContent": "of 8"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "textTransform": "uppercase",
-            "letterSpacing": "0.1em",
-            "fontSize": "0.7rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-muted)",
-            "marginBottom": "0.75rem"
-          },
-          "textContent": "Category"
-        },
-        {
-          "tagName": "div",
-          "style": { "display": "grid", "gap": "0.4rem" },
-          "children": [
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setAll" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'all' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'all' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'all' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "All bikes & gear" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "8"
-                }
-              ]
-            },
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setRoad" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'Road' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'Road' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'Road' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "Road" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "2"
-                }
-              ]
-            },
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setMountain" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'Mountain' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'Mountain' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'Mountain' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "Mountain" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "2"
-                }
-              ]
-            },
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setGravel" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'Gravel' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'Gravel' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'Gravel' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "Gravel" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "1"
-                }
-              ]
-            },
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setKids" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'Kids' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'Kids' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'Kids' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "Kids" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "1"
-                }
-              ]
-            },
-            {
-              "tagName": "button",
-              "onclick": { "$ref": "#/state/setAccessories" },
-              "style": {
-                "display": "flex",
-                "alignItems": "center",
-                "justifyContent": "space-between",
-                "gap": "0.5rem",
-                "width": "100%",
-                "padding": "0.6rem 0.85rem",
-                "borderRadius": "var(--radius-sm)",
-                "border": "1px solid ${state.category === 'Accessories' ? 'var(--color-primary)' : 'var(--color-border)'}",
-                "cursor": "pointer",
-                "fontFamily": "inherit",
-                "fontWeight": "700",
-                "fontSize": "0.92rem",
-                "textAlign": "left",
-                "transition": "background-color 0.15s, color 0.15s, border-color 0.15s",
-                "backgroundColor": "${state.category === 'Accessories' ? 'var(--color-primary)' : 'var(--color-bg-white)'}",
-                "color": "${state.category === 'Accessories' ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "Accessories" },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontVariantNumeric": "tabular-nums",
-                    "opacity": "0.7",
-                    "fontWeight": "600"
-                  },
-                  "textContent": "2"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "marginTop": "1.3rem",
-            "padding": "0.9rem 1rem",
-            "borderRadius": "var(--radius-sm)",
-            "backgroundColor": "var(--color-bg-cream)",
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "0.6rem"
-          },
-          "children": [
-            { "tagName": "span", "style": { "fontSize": "1.1rem" }, "textContent": "🔧" },
-            {
-              "tagName": "p",
-              "style": {
-                "margin": "0",
-                "fontSize": "0.8rem",
-                "lineHeight": "1.45",
-                "color": "var(--color-text-secondary)",
-                "fontWeight": "500"
-              },
-              "textContent": "Every bike ships fitted with a free first tune-up."
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/sites/shop/components/shp-review.json

@@ -1,54 +0,0 @@
-{
-  "tagName": "shp-review",
-  "state": {
-    "quote": "",
-    "author": "",
-    "role": ""
-  },
-  "style": {
-    "display": "block",
-    "padding": "1.75rem",
-    "backgroundColor": "var(--color-bg-white)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)",
-    "boxShadow": "0 4px 20px rgba(15,23,42,0.05)"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "color": "var(--color-accent)",
-        "fontSize": "1.1rem",
-        "marginBottom": "0.75rem",
-        "letterSpacing": "0.1em"
-      },
-      "textContent": "★★★★★"
-    },
-    {
-      "tagName": "p",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.15rem",
-        "lineHeight": "1.6",
-        "fontWeight": "500",
-        "margin": "0 0 1.25rem"
-      },
-      "textContent": "“${state.quote}”"
-    },
-    {
-      "tagName": "div",
-      "children": [
-        {
-          "tagName": "div",
-          "style": { "fontWeight": "600" },
-          "textContent": "${state.author}"
-        },
-        {
-          "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
-        }
-      ]
-    }
-  ]
-}