@vectoriox/iox-ui 5.26.0 → 5.27.0

package/src/generation-core/site-spec.generated.ts

@@ -0,0 +1,1111 @@
+// GENERATED from iox-ai-guidance flavor-spec.v1.json — do not edit; re-run scripts/gen-flavor-spec.mjs
+// (npm run gen:flavor-spec). The JSON is itself generated by iox-ai-guidance
+// architecture/builder/design-system/build-spec.mjs: change a value THERE, then regenerate both.
+/* eslint-disable */
+export const SPEC_SITE_PLAN_SHAPE = {
+  "version": "1",
+  "source": "{ kind: 'template', templateId, templateVersion } | { kind: 'ai', runId }",
+  "business": "{ name (required), tagline?, facts: { email?, phone?, city? } }",
+  "design": "{ flavorId, seed, pairId, shape, density, motion, pillButtons, mode }  — the DesignChoices of the design system",
+  "contentTypes": "ContentTypePlan[] — { name, label, fields[], seed }",
+  "dataSources": "DataSourcePlan[] — merged by alias into the org library",
+  "pages": "PagePlan[] — { key, name, route, isHome?, template?, routeSource?, sections: { pattern, slots?, binding?, without? }[] }",
+  "globals": "{ header: patternId, footer: patternId }"
+} as const;
+
+export const SPEC_SITE_FACTS = {
+  "email": "Email address",
+  "phone": "Phone number",
+  "city": "City or area"
+} as const;
+
+export const SPEC_SITE_PATTERNS = {
+  "nav.inline-cta": {
+    "family": "nav",
+    "label": "Navigation bar",
+    "global": "before",
+    "node": {
+      "t": "Container",
+      "es": "nav",
+      "tag": "nav",
+      "lay": {
+        "display": "flex",
+        "justifyContent": "space-between",
+        "alignItems": "center",
+        "gap": "var(--iox-space-gap)"
+      },
+      "c": [
+        {
+          "t": "LinkedContainer",
+          "es": "box",
+          "href": "/",
+          "c": [
+            {
+              "t": "Heading",
+              "es": "h3",
+              "level": "h3",
+              "slot": "brand",
+              "fromBusiness": "name"
+            }
+          ]
+        },
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexWrap": "wrap",
+            "gap": "28px",
+            "alignItems": "center"
+          },
+          "c": [
+            {
+              "t": "Repeater",
+              "src": "$navPages",
+              "c": [
+                {
+                  "t": "Link",
+                  "es": "link",
+                  "bind": "page.name",
+                  "href": "$page.route"
+                }
+              ]
+            },
+            {
+              "t": "ButtonBlock",
+              "es": "button-primary",
+              "href": "/contact",
+              "slot": "cta",
+              "text": "Get in touch"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "footer.columns": {
+    "family": "footer",
+    "label": "Footer, three columns",
+    "global": "after",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "2fr 1fr 1fr",
+            "gap": "var(--iox-space-gap)"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "8px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h3",
+                  "level": "h3",
+                  "slot": "brand",
+                  "fromBusiness": "name"
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "slot": "tagline",
+                  "fromBusiness": "tagline",
+                  "ph": "copy"
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "8px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "eyebrow",
+                  "level": "h4",
+                  "text": "Pages"
+                },
+                {
+                  "t": "Repeater",
+                  "src": "$navPages",
+                  "c": [
+                    {
+                      "t": "Link",
+                      "es": "link",
+                      "bind": "page.name",
+                      "href": "$page.route"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "8px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "eyebrow",
+                  "level": "h4",
+                  "text": "Contact"
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "ph": "email"
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "ph": "phone"
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "ph": "city"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "t": "Divider",
+          "es": "rule"
+        },
+        {
+          "t": "Text",
+          "es": "small",
+          "slot": "copyright",
+          "fromBusiness": "copyright"
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
+  "hero.split": {
+    "family": "hero",
+    "label": "Hero — text beside an image",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "1.1fr 0.9fr",
+            "gap": "48px",
+            "alignItems": "center"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "22px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "eyebrow",
+                  "level": "h4",
+                  "slot": "eyebrow",
+                  "ph": "copy",
+                  "text": "What you do · where"
+                },
+                {
+                  "t": "Heading",
+                  "es": "display",
+                  "level": "h1",
+                  "slot": "headline",
+                  "fromBusiness": "name"
+                },
+                {
+                  "t": "Text",
+                  "es": "lead",
+                  "slot": "lead",
+                  "fromBusiness": "tagline",
+                  "ph": "copy"
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexWrap": "wrap",
+                    "gap": "12px",
+                    "alignItems": "center"
+                  },
+                  "c": [
+                    {
+                      "t": "ButtonBlock",
+                      "es": "button-primary",
+                      "href": "/work",
+                      "text": "See our work"
+                    },
+                    {
+                      "t": "ButtonBlock",
+                      "es": "button-secondary",
+                      "href": "/contact",
+                      "text": "Get in touch"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "aspect": "4 / 5"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "projects.grid": {
+    "family": "collection",
+    "label": "Project cards, three across",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "optional": "header",
+          "lay": {
+            "display": "flex",
+            "justifyContent": "space-between",
+            "alignItems": "baseline",
+            "gap": "16px",
+            "flexWrap": "wrap"
+          },
+          "c": [
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "slot": "title",
+              "text": "Selected work"
+            },
+            {
+              "t": "Link",
+              "es": "link",
+              "href": "/work",
+              "text": "All projects"
+            }
+          ]
+        },
+        {
+          "t": "Repeater",
+          "src": "$binding",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
+            "gap": "var(--iox-space-gap)"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "LinkedContainer",
+              "es": "card",
+              "href": "/work/:slug",
+              "param": "item.slug",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "12px"
+              },
+              "c": [
+                {
+                  "t": "Image",
+                  "es": "media",
+                  "bind": "item.cover",
+                  "aspect": "4 / 3"
+                },
+                {
+                  "t": "Heading",
+                  "es": "h3",
+                  "level": "h3",
+                  "bind": "item.title"
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "bind": "item.summary"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
+  "services.three": {
+    "family": "features",
+    "label": "Three services",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "subtle",
+      "c": [
+        {
+          "t": "Heading",
+          "es": "h2",
+          "level": "h2",
+          "slot": "title",
+          "text": "What we do"
+        },
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
+            "gap": "var(--iox-space-gap)"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "card",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "10px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h3",
+                  "level": "h3",
+                  "ph": "copy",
+                  "text": "Name a service"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "copy",
+                  "text": "Describe it in two sentences."
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "card",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "10px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h3",
+                  "level": "h3",
+                  "ph": "copy",
+                  "text": "Name a service"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "copy",
+                  "text": "Describe it in two sentences."
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "card",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "10px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h3",
+                  "level": "h3",
+                  "ph": "copy",
+                  "text": "Name a service"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "copy",
+                  "text": "Describe it in two sentences."
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
+  "cta.band": {
+    "family": "cta",
+    "label": "Call to action band",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr auto",
+            "gap": "32px",
+            "alignItems": "center"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "12px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "eyebrow",
+                  "level": "h4",
+                  "text": "Start a project"
+                },
+                {
+                  "t": "Heading",
+                  "es": "h2",
+                  "level": "h2",
+                  "slot": "title",
+                  "text": "Tell us about your project."
+                }
+              ]
+            },
+            {
+              "t": "ButtonBlock",
+              "es": "button-primary",
+              "href": "/contact",
+              "text": "Get in touch"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "page-header.simple": {
+    "family": "header",
+    "label": "Page header",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "14px",
+            "maxWidth": "760px"
+          },
+          "c": [
+            {
+              "t": "Heading",
+              "es": "eyebrow",
+              "level": "h4",
+              "slot": "eyebrow"
+            },
+            {
+              "t": "Heading",
+              "es": "h1",
+              "level": "h1",
+              "slot": "title"
+            },
+            {
+              "t": "Text",
+              "es": "lead",
+              "slot": "lead",
+              "ph": "copy",
+              "text": "One or two sentences that introduce this page."
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "project.hero": {
+    "family": "detail",
+    "label": "Project hero (bound to the route item)",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "16px",
+            "maxWidth": "860px"
+          },
+          "c": [
+            {
+              "t": "Heading",
+              "es": "eyebrow",
+              "level": "h4",
+              "bind": "route.location"
+            },
+            {
+              "t": "Heading",
+              "es": "h1",
+              "level": "h1",
+              "bind": "route.title"
+            },
+            {
+              "t": "Text",
+              "es": "lead",
+              "bind": "route.summary"
+            },
+            {
+              "t": "Text",
+              "es": "small",
+              "bind": "route.year"
+            }
+          ]
+        },
+        {
+          "t": "Image",
+          "es": "media",
+          "bind": "route.cover",
+          "aspect": "16 / 9"
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
+  "project.gallery": {
+    "family": "media",
+    "label": "Project gallery (the item's images)",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Repeater",
+          "src": "route.gallery",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(2, minmax(0, 1fr))",
+            "gap": "var(--iox-space-gap)"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Image",
+              "es": "media",
+              "bind": "item",
+              "aspect": "4 / 3"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "project.next": {
+    "family": "detail",
+    "label": "Next project",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Divider",
+          "es": "rule"
+        },
+        {
+          "t": "LinkedContainer",
+          "es": "box",
+          "href": "/work/:slug",
+          "param": "next.slug",
+          "lay": {
+            "display": "flex",
+            "flexDirection": "column",
+            "gap": "6px",
+            "padding": "24px 0px 0px 0px"
+          },
+          "c": [
+            {
+              "t": "Text",
+              "es": "small",
+              "text": "Next project"
+            },
+            {
+              "t": "Heading",
+              "es": "h2",
+              "level": "h2",
+              "bind": "next.title"
+            }
+          ]
+        }
+      ],
+      "lay": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "32px"
+      }
+    }
+  },
+  "about.story": {
+    "family": "content",
+    "label": "Story beside an image",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "48px",
+            "alignItems": "start"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "16px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h2",
+                  "level": "h2",
+                  "ph": "copy",
+                  "text": "How the studio started"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "copy",
+                  "text": "Tell your story in your own words: who you are, how you work, what you care about."
+                }
+              ]
+            },
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "aspect": "4 / 3"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "contact.split": {
+    "family": "contact",
+    "label": "Contact details beside a form",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "c": [
+        {
+          "t": "Container",
+          "es": "box",
+          "lay": {
+            "display": "grid",
+            "gridTemplateColumns": "0.9fr 1.1fr",
+            "gap": "48px",
+            "alignItems": "start"
+          },
+          "resp": {
+            "mobile": {
+              "gridTemplateColumns": "minmax(0, 1fr)"
+            }
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "16px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "h1",
+                  "level": "h1",
+                  "text": "Get in touch"
+                },
+                {
+                  "t": "Text",
+                  "es": "lead",
+                  "ph": "copy",
+                  "text": "Say how and when people can expect to hear back."
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "email"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "phone"
+                },
+                {
+                  "t": "Text",
+                  "es": "body",
+                  "ph": "city"
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "card",
+              "c": [
+                {
+                  "t": "Form",
+                  "preset": "contact",
+                  "c": [
+                    {
+                      "t": "Field",
+                      "control": "text",
+                      "label": "Name",
+                      "required": true
+                    },
+                    {
+                      "t": "Field",
+                      "control": "email",
+                      "label": "Email",
+                      "required": true
+                    },
+                    {
+                      "t": "Field",
+                      "control": "textarea",
+                      "label": "Message",
+                      "required": true
+                    },
+                    {
+                      "t": "SubmitButton",
+                      "es": "button-primary",
+                      "text": "Send"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+} as const;
+
+export const SPEC_SITE_TEMPLATES = {
+  "studio": {
+    "id": "studio",
+    "version": 1,
+    "label": "Studio",
+    "blurb": "A portfolio for a studio or service business: your work, what you do, and a way to reach you.",
+    "bestFor": [
+      "Architecture & interiors",
+      "Design studios",
+      "Photographers",
+      "Agencies",
+      "Consultants"
+    ],
+    "contentTypes": [
+      {
+        "name": "projects",
+        "label": "Projects",
+        "previewTextField": "title",
+        "previewImageField": "cover",
+        "fields": [
+          {
+            "name": "title",
+            "type": "string",
+            "controller": "text",
+            "required": true
+          },
+          {
+            "name": "slug",
+            "type": "string",
+            "controller": "text",
+            "required": true,
+            "note": "derived from title at seed; no slug controller exists yet (gap)"
+          },
+          {
+            "name": "summary",
+            "type": "string",
+            "controller": "textarea"
+          },
+          {
+            "name": "cover",
+            "type": "string",
+            "controller": "image"
+          },
+          {
+            "name": "gallery",
+            "type": "array",
+            "controller": "mediaList"
+          },
+          {
+            "name": "year",
+            "type": "string",
+            "controller": "text"
+          },
+          {
+            "name": "location",
+            "type": "string",
+            "controller": "text"
+          }
+        ],
+        "seed": {
+          "count": 6,
+          "sample": true,
+          "isPublished": true,
+          "title": "Sample project {n}",
+          "slug": "sample-project-{n}",
+          "summary": "Replace this with a sentence about the project.",
+          "cover": "{sampleImage:n}",
+          "gallery": [
+            "{sampleImage:n+1}",
+            "{sampleImage:n+2}"
+          ],
+          "year": "",
+          "location": ""
+        }
+      }
+    ],
+    "dataSources": [
+      {
+        "alias": "projects",
+        "type": "cms",
+        "mode": "query",
+        "contentType": "projects"
+      },
+      {
+        "alias": "projectsLatest",
+        "type": "cms",
+        "mode": "query",
+        "contentType": "projects",
+        "limit": 3
+      },
+      {
+        "alias": "project",
+        "type": "cms",
+        "mode": "single",
+        "contentType": "projects",
+        "filterByRouteParam": {
+          "field": "slug",
+          "routeParam": "slug"
+        }
+      },
+      {
+        "alias": "projectNext",
+        "type": "relative",
+        "of": "project",
+        "op": "$siblings.next",
+        "within": "projects"
+      }
+    ],
+    "pages": [
+      {
+        "key": "home",
+        "name": "Home",
+        "route": "/",
+        "isHome": true,
+        "required": true,
+        "inNav": false,
+        "sections": [
+          {
+            "pattern": "hero.split"
+          },
+          {
+            "pattern": "projects.grid",
+            "binding": "projectsLatest"
+          },
+          {
+            "pattern": "services.three"
+          },
+          {
+            "pattern": "cta.band"
+          }
+        ]
+      },
+      {
+        "key": "work",
+        "name": "Work",
+        "route": "/work",
+        "required": true,
+        "inNav": true,
+        "sections": [
+          {
+            "pattern": "page-header.simple",
+            "slots": {
+              "eyebrow": "Portfolio",
+              "title": "Work"
+            }
+          },
+          {
+            "pattern": "projects.grid",
+            "binding": "projects",
+            "without": [
+              "header"
+            ]
+          }
+        ]
+      },
+      {
+        "key": "project",
+        "name": "Project",
+        "route": "/work/:slug",
+        "required": true,
+        "inNav": false,
+        "template": "projects",
+        "routeSource": "project",
+        "sections": [
+          {
+            "pattern": "project.hero"
+          },
+          {
+            "pattern": "project.gallery"
+          },
+          {
+            "pattern": "project.next"
+          },
+          {
+            "pattern": "cta.band"
+          }
+        ]
+      },
+      {
+        "key": "about",
+        "name": "About",
+        "route": "/about",
+        "required": false,
+        "inNav": true,
+        "sections": [
+          {
+            "pattern": "page-header.simple",
+            "slots": {
+              "eyebrow": "About",
+              "title": "About the studio"
+            }
+          },
+          {
+            "pattern": "about.story"
+          },
+          {
+            "pattern": "cta.band"
+          }
+        ]
+      },
+      {
+        "key": "contact",
+        "name": "Contact",
+        "route": "/contact",
+        "required": false,
+        "inNav": true,
+        "sections": [
+          {
+            "pattern": "contact.split"
+          }
+        ]
+      }
+    ],
+    "globals": {
+      "header": "nav.inline-cta",
+      "footer": "footer.columns"
+    }
+  }
+} as const;