@viglet/shio-sections 2026.3.2

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,145 @@
+# @viglet/shio-sections
+
+[![npm](https://img.shields.io/npm/v/@viglet/shio-sections?logo=npm)](https://www.npmjs.com/package/@viglet/shio-sections)
+[![License](https://img.shields.io/npm/l/@viglet/shio-sections)](https://github.com/openviglet/shio/blob/HEAD/LICENSE)
+[![Website](https://img.shields.io/badge/shio.viglet.org-0ea5e9?logo=googlechrome&logoColor=white)](https://shio.viglet.org/)
+
+The **page-section vocabulary** for **[Viglet Shio](https://shio.viglet.org/)**,
+the open source **headless CMS built for coding agents**: composable section
+post-types authored with [`@viglet/shio-model`](https://www.npmjs.com/package/@viglet/shio-model),
+plus the matching **React** components.
+
+One shared language for the agent, the console and the front end — **a page is an
+ordered list of known sections** instead of an ad-hoc content model per site. An
+AI agent driving Shio through [Claude Code](https://claude.com/claude-code) and
+MCP writes `Hero`, `FeatureGrid`, `Cta`; the console shows the same names; the
+front end renders them with the components below.
+
+## Install
+
+```bash
+npm install @viglet/shio-sections
+# React is an optional peer — only needed for the render half
+npm install react
+```
+
+## The vocabulary
+
+Seven sections, plus the page and menu types that hold them:
+
+| Post-type | Factory | React component | For |
+|---|---|---|---|
+| `SectionHero` | `sectionHero()` | `<Hero>` | Headline, subheadline, image, call to action |
+| `SectionFeatureGrid` | `sectionFeatureGrid()` | `<FeatureGrid>` | A grid of features or services |
+| `SectionCta` | `sectionCta()` | `<Cta>` | A single call-to-action band |
+| `SectionLogoWall` | `sectionLogoWall()` | `<LogoWall>` | Customer / partner logos |
+| `SectionTestimonial` | `sectionTestimonial()` | `<Testimonial>` | Quote, author, portrait |
+| `SectionFaq` | `sectionFaq()` | `<Faq>` | Question / answer rows |
+| `SectionRichText` | `sectionRichText()` | `<RichText>` | Free-form HTML body |
+| `Page` | `page()` | `<Sections>` | The ordered list of sections |
+| `Menu` / `MenuItem` | `menu()` / `menuItem()` | — | Navigation |
+
+`SECTION_TYPES`, `PAGE_TYPE`, `MENU_TYPE` and `MENU_ITEM_TYPE` export the names;
+`sectionPostTypes()` returns every definition at once.
+
+## Author the content model
+
+```ts
+// shio/post-types/sections.ts
+import { sectionPostTypes } from "@viglet/shio-sections";
+
+export default sectionPostTypes();   // Page, Menu, MenuItem and all seven sections
+```
+
+Then push it to your Shio instance with the
+[CLI](https://www.npmjs.com/package/@viglet/shio):
+
+```bash
+npx @viglet/shio push --dry-run   # preview
+npx @viglet/shio push             # apply
+```
+
+## Render the front end
+
+```tsx
+import { Sections } from "@viglet/shio-sections";
+import { ShioClient } from "@viglet/shio-client";
+
+const shio = new ShioClient({ baseUrl: process.env.SHIO_URL! });
+
+export default async function Page({ params }: { params: { slug?: string[] } }) {
+  const post = await shio.getPostByUrl(
+    process.env.SHIO_SITE_ID!,
+    "/" + (params.slug?.join("/") ?? ""),
+  );
+  if (!post) return null;
+  return <Sections post={post} />;
+}
+```
+
+`<Sections>` dispatches each row of the page to the right component through
+`SECTION_COMPONENTS`. Use a single component directly when you want to:
+
+```tsx
+import { Hero, FeatureGrid } from "@viglet/shio-sections";
+
+<Hero data={heroData} className="my-hero" />
+<FeatureGrid data={featureData} />
+```
+
+### Assets
+
+Every component that renders an image takes a `resolveAsset` prop so you decide
+how a stored file reference becomes a URL (CDN, image proxy, Next.js loader).
+`defaultResolveAsset` is the identity-ish default.
+
+## API
+
+```ts
+// Content model (post-type definitions)
+import {
+  SECTION_TYPES, PAGE_TYPE, MENU_TYPE, MENU_ITEM_TYPE,
+  page, menu, menuItem, sectionPostTypes,
+  sectionHero, sectionFeatureGrid, sectionCta, sectionLogoWall,
+  sectionTestimonial, sectionFaq, sectionRichText,
+} from "@viglet/shio-sections";
+
+// Render
+import {
+  Sections, SECTION_COMPONENTS,
+  Hero, FeatureGrid, Cta, LogoWall, Testimonial, Faq, RichText,
+} from "@viglet/shio-sections";
+
+// Helpers and types
+import { defaultResolveAsset, rows, str } from "@viglet/shio-sections";
+import type {
+  SectionsProps, SectionProps, SectionPost,
+  HeroData, FeatureGridData, CtaData, LogoWallData,
+  TestimonialData, FaqData, RichTextData,
+} from "@viglet/shio-sections";
+```
+
+## Related packages
+
+| Package | For |
+|---|---|
+| [`@viglet/shio`](https://www.npmjs.com/package/@viglet/shio) | The Shio CLI and MCP bridge |
+| [`@viglet/shio-model`](https://www.npmjs.com/package/@viglet/shio-model) | The DSL these post-types are authored with |
+| [`@viglet/shio-client`](https://www.npmjs.com/package/@viglet/shio-client) | Zero-dependency Content Delivery API client |
+| [`@viglet/shio-react-sdk`](https://www.npmjs.com/package/@viglet/shio-react-sdk) | React hooks and render components |
+| [`@viglet/create-shio-app`](https://www.npmjs.com/package/@viglet/create-shio-app) | Next.js starter generator |
+
+## Develop
+
+```bash
+npm run build      # vite lib build + .d.ts
+npm run typecheck
+npm test           # node:test
+```
+
+## License
+
+Apache-2.0 — [Viglet Shio](https://shio.viglet.org/) ·
+[github.com/openviglet/shio](https://github.com/openviglet/shio) ·
+[docs.viglet.org/shio](https://docs.viglet.org/shio/) ·
+part of the [Viglet](https://www.viglet.org) open source family.

package/dist/components.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+import { type CtaData, type FaqData, type FeatureGridData, type HeroData, type LogoWallData, type RichTextData, type SectionProps, type TestimonialData } from "./types";
+export declare function Hero({ data, resolveAsset, className, postId }: SectionProps<HeroData>): JSX.Element;
+export declare function FeatureGrid({ data, className, postId }: SectionProps<FeatureGridData>): JSX.Element;
+export declare function Cta({ data, className, postId }: SectionProps<CtaData>): JSX.Element;
+export declare function LogoWall({ data, resolveAsset, className, postId }: SectionProps<LogoWallData>): JSX.Element;
+export declare function Testimonial({ data, resolveAsset, className, postId }: SectionProps<TestimonialData>): JSX.Element;
+export declare function Faq({ data, className, postId }: SectionProps<FaqData>): JSX.Element;
+export declare function RichText({ data, className, postId }: SectionProps<RichTextData>): JSX.Element;
+/**
+ * Post-type name → component.
+ *
+ * This map is the whole reason the vocabulary is worth having: the front end never asks
+ * "what kind of page is this", it asks each section what it is and renders it. Adding a
+ * section type is one entry here and one post-type there — no page template changes.
+ */
+export declare const SECTION_COMPONENTS: Record<string, (props: SectionProps<never>) => JSX.Element>;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { MENU_ITEM_TYPE, MENU_TYPE, PAGE_TYPE, SECTION_TYPES, menu, menuItem, page, sectionCta, sectionFaq, sectionFeatureGrid, sectionHero, sectionLogoWall, sectionRichText, sectionTestimonial, sectionPostTypes, } from "./post-types";
+export { Cta, Faq, FeatureGrid, Hero, LogoWall, RichText, Testimonial, SECTION_COMPONENTS, } from "./components";
+export { Sections } from "./sections";
+export type { SectionsProps } from "./sections";
+export { defaultResolveAsset, rows, str } from "./types";
+export type { CtaData, FaqData, FeatureGridData, HeroData, LogoWallData, RichTextData, SectionPost, SectionProps, TestimonialData, } from "./types";

package/dist/post-types.d.ts

@@ -0,0 +1,78 @@
+import { type ShPostTypeDef } from "@viglet/shio-model";
+/** The post-type name of every section, keyed by its short vocabulary name. */
+export declare const SECTION_TYPES: {
+    readonly hero: "SectionHero";
+    readonly featureGrid: "SectionFeatureGrid";
+    readonly cta: "SectionCta";
+    readonly logoWall: "SectionLogoWall";
+    readonly testimonial: "SectionTestimonial";
+    readonly faq: "SectionFaq";
+    readonly richText: "SectionRichText";
+};
+/** The post-type of a page that composes sections. */
+export declare const PAGE_TYPE = "Page";
+/**
+ * A curated menu, and the item it is made of (SH382).
+ *
+ * Why these are here rather than in the render model. A menu *looks* like renderer machinery,
+ * and SH249's test for that is whether it needs a new mechanism: this one needs none. It is
+ * ordinary content, so `post.upsert`, the file projection, `shio verify` and the section
+ * overlay all work on it the day it exists — and the composition rule is the one `Page` already
+ * uses, which is why `references: "post"` gives SH154's `dangling-reference` coverage of a menu
+ * entry pointing at a deleted page **for free**, with no lint written for it.
+ *
+ * Why the folder tree could not be the source, even after SH381 gave `{{#navigation}}` a `url`.
+ * A real site's navigation is **curated**: a label that differs from the page title, groups that
+ * are not folders, an ordering that is editorial, entries that leave the site, a page
+ * deliberately left out, and one menu per locale on a translated tree. A folder chain expresses
+ * none of those, so every site was hand-writing its nav into every layout.
+ */
+export declare const MENU_TYPE = "Menu";
+export declare const MENU_ITEM_TYPE = "MenuItem";
+/**
+ * A page: metadata plus an ordered list of section URLs.
+ *
+ * `sections` is a Multi Select scoped to no single post-type on purpose — the values are
+ * addresses, and each address resolves to a post that carries its own type. The front end
+ * dispatches on that type (see `SECTION_COMPONENTS`), so adding a section type to the
+ * vocabulary never requires editing `Page`.
+ */
+export declare const page: () => ShPostTypeDef;
+/**
+ * A menu: a title the template asks for, and an ordered list of addresses.
+ *
+ * The same composition rule as `Page.sections`, deliberately — one shape to learn. Each address
+ * resolves to a post that carries its own type, and three are meaningful: a `MenuItem` (a label
+ * and/or an external link), another `Menu` (a nested group), or **any page at all**, which is the
+ * cheap case and takes its label from the page's own title. `postType` stays open for exactly that
+ * reason.
+ */
+export declare const menu: () => ShPostTypeDef;
+/**
+ * One entry: the label override, the link override, and where it points.
+ *
+ * `target` is a Multi Select holding **one** address, which looks like the wrong field kind and is
+ * the right one: `references: "post"` is declared on Multi Select alone, so it is the only shape the
+ * lint and the digest already understand — and a `Content Select` stores a post **id**, which would
+ * put a UUID in a content file and break SH79's rule that no address a human writes is a UUID.
+ *
+ * An item needs `target` or `href`, never both, and that is a `shio verify` rule rather than a
+ * schema one: the model has no way to express "exactly one of these", and a required field would
+ * make an external link impossible.
+ */
+export declare const menuItem: () => ShPostTypeDef;
+export declare const sectionHero: () => ShPostTypeDef;
+export declare const sectionFeatureGrid: () => ShPostTypeDef;
+export declare const sectionCta: () => ShPostTypeDef;
+export declare const sectionLogoWall: () => ShPostTypeDef;
+export declare const sectionTestimonial: () => ShPostTypeDef;
+export declare const sectionFaq: () => ShPostTypeDef;
+export declare const sectionRichText: () => ShPostTypeDef;
+/**
+ * The whole vocabulary, in a fixed order.
+ *
+ * Order is alphabetical by post-type name and it is load-bearing: these definitions are
+ * serialized into blueprint packages, and a set that iterated in a different order would
+ * produce different bytes from the same source (P5).
+ */
+export declare const sectionPostTypes: () => ShPostTypeDef[];

package/dist/sections.d.ts

@@ -0,0 +1,27 @@
+import type { JSX } from "react";
+import { type SectionPost } from "./types";
+export interface SectionsProps {
+    /** The page's sections, already resolved, in render order. */
+    sections: SectionPost[];
+    resolveAsset?: (value: string) => string;
+    className?: string;
+    /**
+     * What to render for a section type this vocabulary does not know.
+     *
+     * Defaults to nothing. An unknown section is a site that has grown its own type, which
+     * is legitimate — but rendering a placeholder by default would put the CMS's diagnostics
+     * on somebody's home page.
+     */
+    fallback?: (section: SectionPost) => JSX.Element | null;
+}
+/**
+ * Renders each section with the component registered for its post-type.
+ *
+ * Deliberately takes resolved sections rather than fetching them. A page's `sections`
+ * field holds friendly URLs, and resolving a URL is the delivery client's job
+ * (`@viglet/shio-client`) — a component that fetched would tie this vocabulary to one
+ * data-loading strategy and make it unusable from a server component, a loader, or a
+ * static build. The resolution is three lines in the app; the vocabulary is the part
+ * worth sharing.
+ */
+export declare function Sections({ sections, resolveAsset, className, fallback, }: SectionsProps): JSX.Element;

package/dist/shio-sections.js

@@ -0,0 +1,541 @@
+import { aceHtml as e, comboBox as t, file as n, htmlEditor as r, multiSelect as i, postType as a, relator as o, text as s, textArea as c } from "@viglet/shio-model";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/post-types.ts
+var f = {
+	hero: "SectionHero",
+	featureGrid: "SectionFeatureGrid",
+	cta: "SectionCta",
+	logoWall: "SectionLogoWall",
+	testimonial: "SectionTestimonial",
+	faq: "SectionFaq",
+	richText: "SectionRichText"
+}, p = "Page", m = "Menu", h = "MenuItem", g = () => a(p, {
+	title: "Page",
+	namePlural: "Pages",
+	description: "A page composed of sections. `sections` lists section friendly URLs in render order.",
+	fields: [
+		s("title", {
+			label: "Title",
+			required: !0,
+			isTitle: !0
+		}),
+		c("description", {
+			label: "Description",
+			description: "Used as the page summary and the meta description.",
+			isSummary: !0
+		}),
+		i("sections", {
+			label: "Sections",
+			description: "Friendly URLs of the section posts, in render order — e.g. /sections/home/hero.",
+			references: "post"
+		}),
+		e("content", {
+			label: "Content",
+			description: "Markup this page carries itself, rendered around its sections. A conversion writes the source's own body here for the blocks nobody made authorable."
+		})
+	]
+}), _ = () => a(m, {
+	title: "Menu",
+	namePlural: "Menus",
+	description: "A curated menu. `items` lists addresses in render order: a MenuItem, a nested Menu, or a page.",
+	fields: [s("title", {
+		label: "Title",
+		required: !0,
+		isTitle: !0
+	}), i("items", {
+		label: "Items",
+		description: "Friendly URLs in render order — a MenuItem, a nested Menu, or a page (which uses its own title).",
+		references: "post"
+	})]
+}), v = () => a(h, {
+	title: "Menu Item",
+	namePlural: "Menu Items",
+	description: "One menu entry: a label, and either a target page or an external URL. Not both.",
+	fields: [
+		s("label", {
+			label: "Label",
+			required: !0,
+			isTitle: !0
+		}),
+		i("target", {
+			label: "Target page",
+			description: "The friendly URL of the page this points at. Leave empty for an external link.",
+			references: "post"
+		}),
+		s("href", {
+			label: "External URL",
+			description: "An absolute URL, for an entry that leaves the site. Ignored when a target is set."
+		}),
+		t("rel", {
+			label: "Link relationship",
+			description: "Emitted as rel= — what an external entry needs and an internal one does not.",
+			choices: {
+				"noopener noreferrer": "External (noopener noreferrer)",
+				nofollow: "Nofollow"
+			},
+			allowNull: !0
+		})
+	]
+}), y = () => a(f.hero, {
+	title: "Hero Section",
+	namePlural: "Hero Sections",
+	description: "The opening statement of a page: a headline, a line of support, one call to action.",
+	fields: [
+		s("heading", {
+			label: "Heading",
+			required: !0,
+			isTitle: !0
+		}),
+		c("subheading", {
+			label: "Subheading",
+			isSummary: !0
+		}),
+		r("body", { label: "Body" }),
+		s("ctaLabel", { label: "Call-to-action label" }),
+		s("ctaHref", { label: "Call-to-action link" }),
+		n("image", { label: "Image" }),
+		t("align", {
+			label: "Alignment",
+			choices: {
+				left: "Left",
+				center: "Centered"
+			},
+			allowNull: !0
+		})
+	]
+}), b = () => a(f.featureGrid, {
+	title: "Feature Grid Section",
+	namePlural: "Feature Grid Sections",
+	description: "A short list of capabilities, each with a title and a sentence.",
+	fields: [
+		s("heading", {
+			label: "Heading",
+			required: !0,
+			isTitle: !0
+		}),
+		c("intro", {
+			label: "Intro",
+			isSummary: !0
+		}),
+		t("columns", {
+			label: "Columns",
+			choices: {
+				2: "Two",
+				3: "Three",
+				4: "Four"
+			},
+			allowNull: !0
+		}),
+		o("features", {
+			label: "Features",
+			title: "Feature",
+			fields: [
+				s("title", {
+					label: "Title",
+					required: !0
+				}),
+				c("body", { label: "Body" }),
+				s("icon", {
+					label: "Icon",
+					description: "An icon name your front end knows."
+				})
+			]
+		})
+	]
+}), x = () => a(f.cta, {
+	title: "Call-to-action Section",
+	namePlural: "Call-to-action Sections",
+	description: "One decision, stated once: a heading, a sentence and a button.",
+	fields: [
+		s("heading", {
+			label: "Heading",
+			required: !0,
+			isTitle: !0
+		}),
+		c("body", {
+			label: "Body",
+			isSummary: !0
+		}),
+		s("ctaLabel", { label: "Button label" }),
+		s("ctaHref", { label: "Button link" }),
+		t("variant", {
+			label: "Variant",
+			choices: {
+				primary: "Primary",
+				subtle: "Subtle"
+			},
+			allowNull: !0
+		})
+	]
+}), S = () => a(f.logoWall, {
+	title: "Logo Wall Section",
+	namePlural: "Logo Wall Sections",
+	description: "Social proof as a row of logos.",
+	fields: [s("heading", {
+		label: "Heading",
+		isTitle: !0
+	}), o("logos", {
+		label: "Logos",
+		title: "Logo",
+		fields: [
+			s("name", {
+				label: "Name",
+				required: !0
+			}),
+			n("image", { label: "Image" }),
+			s("href", { label: "Link" })
+		]
+	})]
+}), C = () => a(f.testimonial, {
+	title: "Testimonial Section",
+	namePlural: "Testimonial Sections",
+	description: "What customers said, attributed.",
+	fields: [s("heading", {
+		label: "Heading",
+		isTitle: !0
+	}), o("quotes", {
+		label: "Quotes",
+		title: "Quote",
+		fields: [
+			c("quote", {
+				label: "Quote",
+				required: !0
+			}),
+			s("author", {
+				label: "Author",
+				required: !0
+			}),
+			s("role", { label: "Role" }),
+			n("avatar", { label: "Avatar" })
+		]
+	})]
+}), w = () => a(f.faq, {
+	title: "FAQ Section",
+	namePlural: "FAQ Sections",
+	description: "Questions people actually ask, answered in place.",
+	fields: [
+		s("heading", {
+			label: "Heading",
+			isTitle: !0
+		}),
+		c("intro", {
+			label: "Intro",
+			isSummary: !0
+		}),
+		o("questions", {
+			label: "Questions",
+			title: "Question",
+			fields: [s("question", {
+				label: "Question",
+				required: !0
+			}), r("answer", { label: "Answer" })]
+		})
+	]
+}), T = () => a(f.richText, {
+	title: "Rich Text Section",
+	namePlural: "Rich Text Sections",
+	description: "Prose. The escape hatch that keeps the other sections from growing fields they do not need.",
+	fields: [s("heading", {
+		label: "Heading",
+		isTitle: !0
+	}), r("body", {
+		label: "Body",
+		required: !0
+	})]
+}), E = () => [
+	_(),
+	v(),
+	g(),
+	x(),
+	w(),
+	b(),
+	y(),
+	S(),
+	T(),
+	C()
+];
+//#endregion
+//#region src/types.ts
+function D(e, t) {
+	return t ? {
+		"data-shio-prop": e,
+		"data-shio-prop-attr": t
+	} : { "data-shio-prop": e };
+}
+function O(e, t) {
+	return e ? {
+		"data-shio-post": e,
+		"data-shio-post-type": t
+	} : {};
+}
+var k = (e) => /^(https?:)?\/\//.test(e) || e.startsWith("/") ? e : `/api/v2/staticfile/${e}`;
+function A(e) {
+	return Array.isArray(e) ? e : [];
+}
+function j(e) {
+	if (typeof e != "string") return;
+	let t = e.trim();
+	return t.length > 0 ? t : void 0;
+}
+//#endregion
+//#region src/components.tsx
+var M = (...e) => e.filter(Boolean).join(" "), N = (e) => ({ __html: e });
+function P({ data: e, resolveAsset: t = k, className: n, postId: r }) {
+	let i = j(e.image), a = j(e.ctaHref), o = j(e.ctaLabel);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-hero", j(e.align) === "center" ? "shio-hero--center" : void 0, n),
+		...O(r, "SectionHero"),
+		children: [
+			j(e.heading) && /* @__PURE__ */ u("h1", {
+				className: "shio-hero__heading",
+				...D("heading"),
+				children: e.heading
+			}),
+			j(e.subheading) && /* @__PURE__ */ u("p", {
+				className: "shio-hero__subheading",
+				...D("subheading"),
+				children: e.subheading
+			}),
+			j(e.body) && /* @__PURE__ */ u("div", {
+				className: "shio-hero__body",
+				...D("body"),
+				dangerouslySetInnerHTML: N(e.body)
+			}),
+			a && o && /* @__PURE__ */ u("a", {
+				className: "shio-hero__cta",
+				href: a,
+				...D("ctaHref", "href"),
+				children: /* @__PURE__ */ u("span", {
+					...D("ctaLabel"),
+					children: o
+				})
+			}),
+			i && /* @__PURE__ */ u("img", {
+				className: "shio-hero__image",
+				src: t(i),
+				alt: j(e.heading) ?? "",
+				...D("image", "src")
+			})
+		]
+	});
+}
+function F({ data: e, className: t, postId: n }) {
+	let r = A(e.features);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-features", t),
+		"data-columns": j(e.columns) ?? "3",
+		...D("columns", "data-columns"),
+		...O(n, "SectionFeatureGrid"),
+		children: [
+			j(e.heading) && /* @__PURE__ */ u("h2", {
+				className: "shio-features__heading",
+				...D("heading"),
+				children: e.heading
+			}),
+			j(e.intro) && /* @__PURE__ */ u("p", {
+				className: "shio-features__intro",
+				...D("intro"),
+				children: e.intro
+			}),
+			/* @__PURE__ */ u("ul", {
+				className: "shio-features__list",
+				...D("features"),
+				children: r.map((e, t) => /* @__PURE__ */ d("li", {
+					className: "shio-features__item",
+					children: [
+						j(e.icon) && /* @__PURE__ */ u("span", {
+							className: "shio-features__icon",
+							"data-icon": e.icon,
+							"aria-hidden": "true"
+						}),
+						j(e.title) && /* @__PURE__ */ u("h3", {
+							className: "shio-features__title",
+							children: e.title
+						}),
+						j(e.body) && /* @__PURE__ */ u("p", {
+							className: "shio-features__body",
+							children: e.body
+						})
+					]
+				}, j(e.title) ?? t))
+			})
+		]
+	});
+}
+function I({ data: e, className: t, postId: n }) {
+	let r = j(e.ctaHref), i = j(e.ctaLabel);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-cta", t),
+		"data-variant": j(e.variant) ?? "primary",
+		...D("variant", "data-variant"),
+		...O(n, "SectionCta"),
+		children: [
+			j(e.heading) && /* @__PURE__ */ u("h2", {
+				className: "shio-cta__heading",
+				...D("heading"),
+				children: e.heading
+			}),
+			j(e.body) && /* @__PURE__ */ u("p", {
+				className: "shio-cta__body",
+				...D("body"),
+				children: e.body
+			}),
+			r && i && /* @__PURE__ */ u("a", {
+				className: "shio-cta__button",
+				href: r,
+				...D("ctaHref", "href"),
+				children: /* @__PURE__ */ u("span", {
+					...D("ctaLabel"),
+					children: i
+				})
+			})
+		]
+	});
+}
+function L({ data: e, resolveAsset: t = k, className: n, postId: r }) {
+	let i = A(e.logos);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-logos", n),
+		...O(r, "SectionLogoWall"),
+		children: [j(e.heading) && /* @__PURE__ */ u("h2", {
+			className: "shio-logos__heading",
+			...D("heading"),
+			children: e.heading
+		}), /* @__PURE__ */ u("ul", {
+			className: "shio-logos__list",
+			...D("logos"),
+			children: i.map((e, n) => {
+				let r = j(e.image), i = r ? /* @__PURE__ */ u("img", {
+					className: "shio-logos__image",
+					src: t(r),
+					alt: j(e.name) ?? ""
+				}) : /* @__PURE__ */ u("span", {
+					className: "shio-logos__name",
+					children: j(e.name)
+				}), a = j(e.href);
+				return /* @__PURE__ */ u("li", {
+					className: "shio-logos__item",
+					children: a ? /* @__PURE__ */ u("a", {
+						href: a,
+						children: i
+					}) : i
+				}, j(e.name) ?? n);
+			})
+		})]
+	});
+}
+function R({ data: e, resolveAsset: t = k, className: n, postId: r }) {
+	let i = A(e.quotes);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-testimonials", n),
+		...O(r, "SectionTestimonial"),
+		children: [
+			j(e.heading) && /* @__PURE__ */ u("h2", {
+				className: "shio-testimonials__heading",
+				...D("heading"),
+				children: e.heading
+			}),
+			/* @__PURE__ */ u("div", {
+				hidden: !0,
+				...D("quotes")
+			}),
+			i.map((e, n) => {
+				let r = j(e.avatar);
+				return /* @__PURE__ */ d("figure", {
+					className: "shio-testimonials__item",
+					children: [
+						r && /* @__PURE__ */ u("img", {
+							className: "shio-testimonials__avatar",
+							src: t(r),
+							alt: j(e.author) ?? ""
+						}),
+						j(e.quote) && /* @__PURE__ */ u("blockquote", {
+							className: "shio-testimonials__quote",
+							children: e.quote
+						}),
+						/* @__PURE__ */ d("figcaption", {
+							className: "shio-testimonials__author",
+							children: [j(e.author), j(e.role) && /* @__PURE__ */ u("span", {
+								className: "shio-testimonials__role",
+								children: e.role
+							})]
+						})
+					]
+				}, j(e.author) ?? n);
+			})
+		]
+	});
+}
+function z({ data: e, className: t, postId: n }) {
+	let r = A(e.questions);
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-faq", t),
+		...O(n, "SectionFaq"),
+		children: [
+			j(e.heading) && /* @__PURE__ */ u("h2", {
+				className: "shio-faq__heading",
+				...D("heading"),
+				children: e.heading
+			}),
+			j(e.intro) && /* @__PURE__ */ u("p", {
+				className: "shio-faq__intro",
+				...D("intro"),
+				children: e.intro
+			}),
+			/* @__PURE__ */ u("dl", {
+				className: "shio-faq__list",
+				...D("questions"),
+				children: r.map((e, t) => /* @__PURE__ */ d("div", {
+					className: "shio-faq__item",
+					children: [j(e.question) && /* @__PURE__ */ u("dt", {
+						className: "shio-faq__question",
+						children: e.question
+					}), j(e.answer) && /* @__PURE__ */ u("dd", {
+						className: "shio-faq__answer",
+						dangerouslySetInnerHTML: N(e.answer)
+					})]
+				}, j(e.question) ?? t))
+			})
+		]
+	});
+}
+function B({ data: e, className: t, postId: n }) {
+	return /* @__PURE__ */ d("section", {
+		className: M("shio-section", "shio-richtext", t),
+		...O(n, "SectionRichText"),
+		children: [j(e.heading) && /* @__PURE__ */ u("h2", {
+			className: "shio-richtext__heading",
+			...D("heading"),
+			children: e.heading
+		}), j(e.body) && /* @__PURE__ */ u("div", {
+			className: "shio-richtext__body",
+			...D("body"),
+			dangerouslySetInnerHTML: N(e.body)
+		})]
+	});
+}
+var V = {
+	[f.hero]: P,
+	[f.featureGrid]: F,
+	[f.cta]: I,
+	[f.logoWall]: L,
+	[f.testimonial]: R,
+	[f.faq]: z,
+	[f.richText]: B
+};
+//#endregion
+//#region src/sections.tsx
+function H({ sections: e, resolveAsset: t = k, className: n, fallback: r }) {
+	return /* @__PURE__ */ u(l, { children: e.map((e, i) => {
+		let a = V[e.type];
+		if (!a) return r ? r(e) : null;
+		let o = {
+			data: e.data,
+			resolveAsset: t,
+			className: n
+		};
+		return /* @__PURE__ */ u(a, { ...o }, e.url ?? `${e.type}-${i}`);
+	}) });
+}
+//#endregion
+export { I as Cta, z as Faq, F as FeatureGrid, P as Hero, L as LogoWall, h as MENU_ITEM_TYPE, m as MENU_TYPE, p as PAGE_TYPE, B as RichText, V as SECTION_COMPONENTS, f as SECTION_TYPES, H as Sections, R as Testimonial, k as defaultResolveAsset, _ as menu, v as menuItem, g as page, A as rows, x as sectionCta, w as sectionFaq, b as sectionFeatureGrid, y as sectionHero, S as sectionLogoWall, E as sectionPostTypes, T as sectionRichText, C as sectionTestimonial, j as str };

package/dist/shio-sections.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@viglet/shio-model"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`@viglet/shio-model`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ShioSections={},e.ShioModel,e.jsxRuntime))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r={hero:`SectionHero`,featureGrid:`SectionFeatureGrid`,cta:`SectionCta`,logoWall:`SectionLogoWall`,testimonial:`SectionTestimonial`,faq:`SectionFaq`,richText:`SectionRichText`},i=`Page`,a=`Menu`,o=`MenuItem`,s=()=>(0,t.postType)(i,{title:`Page`,namePlural:`Pages`,description:"A page composed of sections. `sections` lists section friendly URLs in render order.",fields:[(0,t.text)(`title`,{label:`Title`,required:!0,isTitle:!0}),(0,t.textArea)(`description`,{label:`Description`,description:`Used as the page summary and the meta description.`,isSummary:!0}),(0,t.multiSelect)(`sections`,{label:`Sections`,description:`Friendly URLs of the section posts, in render order — e.g. /sections/home/hero.`,references:`post`}),(0,t.aceHtml)(`content`,{label:`Content`,description:`Markup this page carries itself, rendered around its sections. A conversion writes the source's own body here for the blocks nobody made authorable.`})]}),c=()=>(0,t.postType)(a,{title:`Menu`,namePlural:`Menus`,description:"A curated menu. `items` lists addresses in render order: a MenuItem, a nested Menu, or a page.",fields:[(0,t.text)(`title`,{label:`Title`,required:!0,isTitle:!0}),(0,t.multiSelect)(`items`,{label:`Items`,description:`Friendly URLs in render order — a MenuItem, a nested Menu, or a page (which uses its own title).`,references:`post`})]}),l=()=>(0,t.postType)(o,{title:`Menu Item`,namePlural:`Menu Items`,description:`One menu entry: a label, and either a target page or an external URL. Not both.`,fields:[(0,t.text)(`label`,{label:`Label`,required:!0,isTitle:!0}),(0,t.multiSelect)(`target`,{label:`Target page`,description:`The friendly URL of the page this points at. Leave empty for an external link.`,references:`post`}),(0,t.text)(`href`,{label:`External URL`,description:`An absolute URL, for an entry that leaves the site. Ignored when a target is set.`}),(0,t.comboBox)(`rel`,{label:`Link relationship`,description:`Emitted as rel= — what an external entry needs and an internal one does not.`,choices:{"noopener noreferrer":`External (noopener noreferrer)`,nofollow:`Nofollow`},allowNull:!0})]}),u=()=>(0,t.postType)(r.hero,{title:`Hero Section`,namePlural:`Hero Sections`,description:`The opening statement of a page: a headline, a line of support, one call to action.`,fields:[(0,t.text)(`heading`,{label:`Heading`,required:!0,isTitle:!0}),(0,t.textArea)(`subheading`,{label:`Subheading`,isSummary:!0}),(0,t.htmlEditor)(`body`,{label:`Body`}),(0,t.text)(`ctaLabel`,{label:`Call-to-action label`}),(0,t.text)(`ctaHref`,{label:`Call-to-action link`}),(0,t.file)(`image`,{label:`Image`}),(0,t.comboBox)(`align`,{label:`Alignment`,choices:{left:`Left`,center:`Centered`},allowNull:!0})]}),d=()=>(0,t.postType)(r.featureGrid,{title:`Feature Grid Section`,namePlural:`Feature Grid Sections`,description:`A short list of capabilities, each with a title and a sentence.`,fields:[(0,t.text)(`heading`,{label:`Heading`,required:!0,isTitle:!0}),(0,t.textArea)(`intro`,{label:`Intro`,isSummary:!0}),(0,t.comboBox)(`columns`,{label:`Columns`,choices:{2:`Two`,3:`Three`,4:`Four`},allowNull:!0}),(0,t.relator)(`features`,{label:`Features`,title:`Feature`,fields:[(0,t.text)(`title`,{label:`Title`,required:!0}),(0,t.textArea)(`body`,{label:`Body`}),(0,t.text)(`icon`,{label:`Icon`,description:`An icon name your front end knows.`})]})]}),f=()=>(0,t.postType)(r.cta,{title:`Call-to-action Section`,namePlural:`Call-to-action Sections`,description:`One decision, stated once: a heading, a sentence and a button.`,fields:[(0,t.text)(`heading`,{label:`Heading`,required:!0,isTitle:!0}),(0,t.textArea)(`body`,{label:`Body`,isSummary:!0}),(0,t.text)(`ctaLabel`,{label:`Button label`}),(0,t.text)(`ctaHref`,{label:`Button link`}),(0,t.comboBox)(`variant`,{label:`Variant`,choices:{primary:`Primary`,subtle:`Subtle`},allowNull:!0})]}),p=()=>(0,t.postType)(r.logoWall,{title:`Logo Wall Section`,namePlural:`Logo Wall Sections`,description:`Social proof as a row of logos.`,fields:[(0,t.text)(`heading`,{label:`Heading`,isTitle:!0}),(0,t.relator)(`logos`,{label:`Logos`,title:`Logo`,fields:[(0,t.text)(`name`,{label:`Name`,required:!0}),(0,t.file)(`image`,{label:`Image`}),(0,t.text)(`href`,{label:`Link`})]})]}),m=()=>(0,t.postType)(r.testimonial,{title:`Testimonial Section`,namePlural:`Testimonial Sections`,description:`What customers said, attributed.`,fields:[(0,t.text)(`heading`,{label:`Heading`,isTitle:!0}),(0,t.relator)(`quotes`,{label:`Quotes`,title:`Quote`,fields:[(0,t.textArea)(`quote`,{label:`Quote`,required:!0}),(0,t.text)(`author`,{label:`Author`,required:!0}),(0,t.text)(`role`,{label:`Role`}),(0,t.file)(`avatar`,{label:`Avatar`})]})]}),h=()=>(0,t.postType)(r.faq,{title:`FAQ Section`,namePlural:`FAQ Sections`,description:`Questions people actually ask, answered in place.`,fields:[(0,t.text)(`heading`,{label:`Heading`,isTitle:!0}),(0,t.textArea)(`intro`,{label:`Intro`,isSummary:!0}),(0,t.relator)(`questions`,{label:`Questions`,title:`Question`,fields:[(0,t.text)(`question`,{label:`Question`,required:!0}),(0,t.htmlEditor)(`answer`,{label:`Answer`})]})]}),g=()=>(0,t.postType)(r.richText,{title:`Rich Text Section`,namePlural:`Rich Text Sections`,description:`Prose. The escape hatch that keeps the other sections from growing fields they do not need.`,fields:[(0,t.text)(`heading`,{label:`Heading`,isTitle:!0}),(0,t.htmlEditor)(`body`,{label:`Body`,required:!0})]}),_=()=>[c(),l(),s(),f(),h(),d(),u(),p(),g(),m()];function v(e,t){return t?{"data-shio-prop":e,"data-shio-prop-attr":t}:{"data-shio-prop":e}}function y(e,t){return e?{"data-shio-post":e,"data-shio-post-type":t}:{}}var b=e=>/^(https?:)?\/\//.test(e)||e.startsWith(`/`)?e:`/api/v2/staticfile/${e}`;function x(e){return Array.isArray(e)?e:[]}function S(e){if(typeof e!=`string`)return;let t=e.trim();return t.length>0?t:void 0}var C=(...e)=>e.filter(Boolean).join(` `),w=e=>({__html:e});function T({data:e,resolveAsset:t=b,className:r,postId:i}){let a=S(e.image),o=S(e.ctaHref),s=S(e.ctaLabel);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-hero`,S(e.align)===`center`?`shio-hero--center`:void 0,r),...y(i,`SectionHero`),children:[S(e.heading)&&(0,n.jsx)(`h1`,{className:`shio-hero__heading`,...v(`heading`),children:e.heading}),S(e.subheading)&&(0,n.jsx)(`p`,{className:`shio-hero__subheading`,...v(`subheading`),children:e.subheading}),S(e.body)&&(0,n.jsx)(`div`,{className:`shio-hero__body`,...v(`body`),dangerouslySetInnerHTML:w(e.body)}),o&&s&&(0,n.jsx)(`a`,{className:`shio-hero__cta`,href:o,...v(`ctaHref`,`href`),children:(0,n.jsx)(`span`,{...v(`ctaLabel`),children:s})}),a&&(0,n.jsx)(`img`,{className:`shio-hero__image`,src:t(a),alt:S(e.heading)??``,...v(`image`,`src`)})]})}function E({data:e,className:t,postId:r}){let i=x(e.features);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-features`,t),"data-columns":S(e.columns)??`3`,...v(`columns`,`data-columns`),...y(r,`SectionFeatureGrid`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-features__heading`,...v(`heading`),children:e.heading}),S(e.intro)&&(0,n.jsx)(`p`,{className:`shio-features__intro`,...v(`intro`),children:e.intro}),(0,n.jsx)(`ul`,{className:`shio-features__list`,...v(`features`),children:i.map((e,t)=>(0,n.jsxs)(`li`,{className:`shio-features__item`,children:[S(e.icon)&&(0,n.jsx)(`span`,{className:`shio-features__icon`,"data-icon":e.icon,"aria-hidden":`true`}),S(e.title)&&(0,n.jsx)(`h3`,{className:`shio-features__title`,children:e.title}),S(e.body)&&(0,n.jsx)(`p`,{className:`shio-features__body`,children:e.body})]},S(e.title)??t))})]})}function D({data:e,className:t,postId:r}){let i=S(e.ctaHref),a=S(e.ctaLabel);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-cta`,t),"data-variant":S(e.variant)??`primary`,...v(`variant`,`data-variant`),...y(r,`SectionCta`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-cta__heading`,...v(`heading`),children:e.heading}),S(e.body)&&(0,n.jsx)(`p`,{className:`shio-cta__body`,...v(`body`),children:e.body}),i&&a&&(0,n.jsx)(`a`,{className:`shio-cta__button`,href:i,...v(`ctaHref`,`href`),children:(0,n.jsx)(`span`,{...v(`ctaLabel`),children:a})})]})}function O({data:e,resolveAsset:t=b,className:r,postId:i}){let a=x(e.logos);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-logos`,r),...y(i,`SectionLogoWall`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-logos__heading`,...v(`heading`),children:e.heading}),(0,n.jsx)(`ul`,{className:`shio-logos__list`,...v(`logos`),children:a.map((e,r)=>{let i=S(e.image),a=i?(0,n.jsx)(`img`,{className:`shio-logos__image`,src:t(i),alt:S(e.name)??``}):(0,n.jsx)(`span`,{className:`shio-logos__name`,children:S(e.name)}),o=S(e.href);return(0,n.jsx)(`li`,{className:`shio-logos__item`,children:o?(0,n.jsx)(`a`,{href:o,children:a}):a},S(e.name)??r)})})]})}function k({data:e,resolveAsset:t=b,className:r,postId:i}){let a=x(e.quotes);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-testimonials`,r),...y(i,`SectionTestimonial`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-testimonials__heading`,...v(`heading`),children:e.heading}),(0,n.jsx)(`div`,{hidden:!0,...v(`quotes`)}),a.map((e,r)=>{let i=S(e.avatar);return(0,n.jsxs)(`figure`,{className:`shio-testimonials__item`,children:[i&&(0,n.jsx)(`img`,{className:`shio-testimonials__avatar`,src:t(i),alt:S(e.author)??``}),S(e.quote)&&(0,n.jsx)(`blockquote`,{className:`shio-testimonials__quote`,children:e.quote}),(0,n.jsxs)(`figcaption`,{className:`shio-testimonials__author`,children:[S(e.author),S(e.role)&&(0,n.jsx)(`span`,{className:`shio-testimonials__role`,children:e.role})]})]},S(e.author)??r)})]})}function A({data:e,className:t,postId:r}){let i=x(e.questions);return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-faq`,t),...y(r,`SectionFaq`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-faq__heading`,...v(`heading`),children:e.heading}),S(e.intro)&&(0,n.jsx)(`p`,{className:`shio-faq__intro`,...v(`intro`),children:e.intro}),(0,n.jsx)(`dl`,{className:`shio-faq__list`,...v(`questions`),children:i.map((e,t)=>(0,n.jsxs)(`div`,{className:`shio-faq__item`,children:[S(e.question)&&(0,n.jsx)(`dt`,{className:`shio-faq__question`,children:e.question}),S(e.answer)&&(0,n.jsx)(`dd`,{className:`shio-faq__answer`,dangerouslySetInnerHTML:w(e.answer)})]},S(e.question)??t))})]})}function j({data:e,className:t,postId:r}){return(0,n.jsxs)(`section`,{className:C(`shio-section`,`shio-richtext`,t),...y(r,`SectionRichText`),children:[S(e.heading)&&(0,n.jsx)(`h2`,{className:`shio-richtext__heading`,...v(`heading`),children:e.heading}),S(e.body)&&(0,n.jsx)(`div`,{className:`shio-richtext__body`,...v(`body`),dangerouslySetInnerHTML:w(e.body)})]})}var M={[r.hero]:T,[r.featureGrid]:E,[r.cta]:D,[r.logoWall]:O,[r.testimonial]:k,[r.faq]:A,[r.richText]:j};function N({sections:e,resolveAsset:t=b,className:r,fallback:i}){return(0,n.jsx)(n.Fragment,{children:e.map((e,a)=>{let o=M[e.type];if(!o)return i?i(e):null;let s={data:e.data,resolveAsset:t,className:r};return(0,n.jsx)(o,{...s},e.url??`${e.type}-${a}`)})})}e.Cta=D,e.Faq=A,e.FeatureGrid=E,e.Hero=T,e.LogoWall=O,e.MENU_ITEM_TYPE=o,e.MENU_TYPE=a,e.PAGE_TYPE=i,e.RichText=j,e.SECTION_COMPONENTS=M,e.SECTION_TYPES=r,e.Sections=N,e.Testimonial=k,e.defaultResolveAsset=b,e.menu=c,e.menuItem=l,e.page=s,e.rows=x,e.sectionCta=f,e.sectionFaq=h,e.sectionFeatureGrid=d,e.sectionHero=u,e.sectionLogoWall=p,e.sectionPostTypes=_,e.sectionRichText=g,e.sectionTestimonial=m,e.str=S});

package/dist/types.d.ts

@@ -0,0 +1,118 @@
+/** A section as the delivery API hands it over: its post-type name and its field values. */
+export interface SectionPost {
+    /** The post-type name — the key `SECTION_COMPONENTS` dispatches on. */
+    type: string;
+    /** The section's friendly URL, when the caller resolved it from one. */
+    url?: string;
+    /** Field values, keyed by attribute name. */
+    data: Record<string, unknown>;
+}
+/**
+ * Props every section component takes.
+ *
+ * `data` is loosely typed because it comes off the wire. Each component narrows what it
+ * needs and renders nothing for what is absent — a section with an empty field is a page
+ * the editor has not finished, not a crash.
+ */
+export interface SectionProps<T = Record<string, unknown>> {
+    data: T;
+    /**
+     * Turns a `File`-field value into a URL.
+     *
+     * A File field stores the **post id** of the uploaded file, and the public bytes live
+     * at `/file_source/<postId>/<fileName>` — a path that needs the file's name, which the
+     * field value does not carry. Until the projection resolves assets by path (SH145) that
+     * lookup belongs to the app, so this hook exists and the default is the id-keyed
+     * streaming endpoint, which works but authenticates as the console.
+     */
+    resolveAsset?: (value: string) => string;
+    className?: string;
+    /**
+     * The section post's id, which turns the rendered markup into something the editor can edit
+     * (SH638).
+     *
+     * <h3>The host contract, which is the part that needed deciding</h3>
+     *
+     * The Java renderer emits `data-shio-post` / `data-shio-prop` itself, because it knows which post
+     * it is rendering. A headless host does not get that for free: it fetched the section over the
+     * CDA and React draws it, so **only the host knows the id**. Passing it here is that contract,
+     * stated in one optional prop rather than in prose a host has to find.
+     *
+     * Optional on purpose. A public page has no reason to carry editing metadata, and a host that
+     * omits it renders byte-identical markup to before — so the annotations cost nothing where they
+     * are not wanted, and the editor is opt-in per render rather than per build.
+     */
+    postId?: string;
+}
+/**
+ * The attributes that make one field editable in place (SH638).
+ *
+ * `data-shio-prop` names the field; `data-shio-prop-attr` names *which attribute* carries the value
+ * when it is not the element's text — an `href` or a `src`. Both forms exist because `shio
+ * annotations` counts both, and once a complete page read as 9 of 10 because only the first was
+ * counted (SH503's near-miss regression).
+ */
+export declare function editable(field: string, attribute?: string): Record<string, string>;
+/** The section root's own annotation: which post this markup is, and of what type. */
+export declare function editableSection(postId: string | undefined, type: string): Record<string, string>;
+export interface HeroData {
+    heading?: string;
+    subheading?: string;
+    body?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    image?: string;
+    align?: string;
+}
+export interface FeatureGridData {
+    heading?: string;
+    intro?: string;
+    columns?: string;
+    features?: Array<{
+        title?: string;
+        body?: string;
+        icon?: string;
+    }>;
+}
+export interface CtaData {
+    heading?: string;
+    body?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    variant?: string;
+}
+export interface LogoWallData {
+    heading?: string;
+    logos?: Array<{
+        name?: string;
+        image?: string;
+        href?: string;
+    }>;
+}
+export interface TestimonialData {
+    heading?: string;
+    quotes?: Array<{
+        quote?: string;
+        author?: string;
+        role?: string;
+        avatar?: string;
+    }>;
+}
+export interface FaqData {
+    heading?: string;
+    intro?: string;
+    questions?: Array<{
+        question?: string;
+        answer?: string;
+    }>;
+}
+export interface RichTextData {
+    heading?: string;
+    body?: string;
+}
+/** Default asset resolution: pass URLs and paths through, stream anything else by id. */
+export declare const defaultResolveAsset: (value: string) => string;
+/** A Relator field's rows — tolerant of an absent or non-array value. */
+export declare function rows<T>(value: unknown): T[];
+/** Trimmed string, or undefined — so a blank field renders as nothing, not as an empty tag. */
+export declare function str(value: unknown): string | undefined;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@viglet/shio-sections",
+  "version": "2026.3.2",
+  "description": "The Shio page-section vocabulary (SH95): composable section post-types authored with @viglet/shio-model, plus the matching React components. One shared language for the agent, the console and the front end — a page is an ordered list of known sections instead of an ad-hoc content model per site.",
+  "homepage": "https://shio.viglet.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openviglet/shio.git",
+    "directory": "shio-sections"
+  },
+  "bugs": {
+    "url": "https://github.com/openviglet/shio/issues"
+  },
+  "type": "module",
+  "main": "dist/shio-sections.umd.cjs",
+  "module": "dist/shio-sections.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/shio-sections.js",
+      "require": "./dist/shio-sections.umd.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@viglet/shio-model": "2026.3.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "react": "^19.2.8",
+    "typescript": "^5.8.3",
+    "vite": "^8.2.0"
+  },
+  "keywords": [
+    "shio",
+    "viglet",
+    "cms",
+    "headless-cms",
+    "content-management-system",
+    "agent",
+    "ai",
+    "mcp",
+    "model-context-protocol",
+    "claude-code",
+    "sections",
+    "blocks",
+    "page-builder",
+    "react",
+    "content-as-code",
+    "landing-page",
+    "headless"
+  ],
+  "author": {
+    "name": "Viglet Team",
+    "url": "https://www.viglet.org"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit",
+    "emit": "node scripts/emit.mjs",
+    "test": "node --test \"test/*.test.mjs\""
+  }
+}