@jam-overture/loom-primitives/compositions

STARTER_COMPOSITIONSvalue

Every band on offer — the phrasebook, not the page.

const STARTER_COMPOSITIONS: readonly Composition[]

CATALOGUE_TYPESvalue

Every primitive type some band in the phrasebook builds, sorted.

Shown in use on Starting from a band — Registering only what the bands need

const CATALOGUE_TYPES: readonly string[]

compositionByIdfunction

The band with this id, or undefined.

Shown in use on Starting from a band — Ask for one by name

const compositionById: (id: string) => Composition | undefined

compositionsForPartfunction

Every design of one band, in catalogue order, canonical design first.

Shown in use on Starting from a band — Parts and designs are two different words

const compositionsForPart: (part: CompositionPart) => readonly Composition[]

PAGE_SEQUENCEvalue

One design of each band, in the order a page uses them.

Shown in use on Starting from a band — A whole page to start from

const PAGE_SEQUENCE: readonly Composition[]

articlesBandvalue

const articlesBand: Composition

articlesIndexBandvalue

const articlesIndexBand: Composition

bannerBandvalue

The strip above everything — the first thing on the page and the first part this catalogue has ever had that sits above the navigation.

const bannerBand: Composition

bannerInlineBandvalue

The strip whose sentence *is* the link, and the answer to the one row the designs-per-part instrument had left.

const bannerInlineBand: Composition

bentoBandvalue

const bentoBand: Composition

bentoMixedBandvalue

const bentoMixedBand: Composition

catalogueBandvalue

const catalogueBand: Composition

changelogBandvalue

const changelogBand: Composition

changelogNotesBandvalue

const changelogNotesBand: Composition

codeBandvalue

const codeBand: Composition

codeSessionBandvalue

const codeSessionBand: Composition

comparisonBandvalue

const comparisonBand: Composition

comparisonWaysBandvalue

const comparisonWaysBand: Composition

COMPOSITION_PARTSvalue

The bands a page is made of, in the order a page uses them.

const COMPOSITION_PARTS: readonly ["banner", "nav", "hero", "proof", "features", "bento", "steps", "code", "integrations", "metrics", "specs", "pricing", "comparison", "testimonials", "credentials", "team", "articles", "changelog", "faq", "contact", "cta", "footer"]

CompositionParttype

type CompositionPart = (typeof COMPOSITION_PARTS)[number];

Compositiontype

A band of a page, dropped in whole as one operation.

type Composition = {
    /**
     * Lower-case words joined by hyphens, the way an anchor or a slot name is.
     *
     * **A part's canonical design has the part's own name as its id**, and every
     * other design of that part is the part name plus what makes it different —
     * `hero` and `hero-split`. That convention is not cosmetic: it is what lets
     * the page sequence be *derived* rather than maintained as a second hand-kept
     * list that could disagree with the first. There is a test on it.
     */
    readonly id: string;
    /** Which band of a page this is a design of. */
    readonly part: CompositionPart;
    /** What a person choosing it from a list reads. */
    readonly label: string;
    /**
     * What lands on the page, in one clause, said before it happens.
     *
     * About the page and never about the verdict, for the reason the demo's
     * presets give: whether the Gate applies a band or holds it is computed from
     * the tree at assessment time, so a promise about the outcome would be a
     * surface predicting a decision it does not make.
     */
    readonly promise: string;
    /** The interpreter's own words about why this subtree answers that ask. */
    readonly rationale: string;
    /** Every primitive type the subtree uses, for the catalogue and the audit. */
    readonly uses: readonly string[];
    readonly build: (ids: IdFactory) => ElementNode;
};

COMPOSITION_INTERPRETERvalue

What produced the delta, for Provenance.interpreter. Not a model.

const COMPOSITION_INTERPRETER = "loom/composition"

CompositionTargettype

Where the band goes.

type CompositionTarget = {
    readonly parentId?: NodeId;
    /** Clamped to the parent's current child count, never trusted as an index. */
    readonly index?: number;
};

CompositionPlantype

type CompositionPlan = {
    readonly outcome: "planned";
    readonly operations: readonly TreeOperation[];
}
/**
 * The named parent is not in this tree, so there is nowhere to put the band.
 *
 * A distinct outcome rather than a silent append at the root: a band that
 * quietly landed somewhere other than where it was asked for is worse than
 * one that did not land, because the second is visible.
 */
 | {
    readonly outcome: "no-such-parent";
    readonly parentId: NodeId;
};

planCompositionfunction

One insert, computed against the tree as it stands.

Shown in use on Starting from a band — It goes on the page as one insert

const planComposition: (composition: Composition, tree: LoomTree, ids: IdFactory, target?: CompositionTarget) => CompositionPlan

compositionInterpreterfunction

A composition as an ordinary ChangeInterpreter.

Shown in use on Starting from a band — Nothing gets to skip the Gate

const compositionInterpreter: (composition: Composition, idFactory: IdFactory, clock: Clock, target?: CompositionTarget) => ChangeInterpreter

contactBandvalue

const contactBand: Composition

contactDetailsBandvalue

const contactDetailsBand: Composition

conversationBandvalue

const conversationBand: Composition

credentialsBandvalue

const credentialsBand: Composition

credentialsPostureBandvalue

const credentialsPostureBand: Composition

ctaBandvalue

The last band: ask again, at a reading width, on the accent ground.

const ctaBand: Composition

ctaSignupBandvalue

const ctaSignupBand: Composition

episodesBandvalue

const episodesBand: Composition

faqBandvalue

const faqBand: Composition

faqGridBandvalue

const faqGridBand: Composition

featuresAlternatingBandvalue

const featuresAlternatingBand: Composition

featuresBandvalue

const featuresBand: Composition

feedBandvalue

The writing band as a page that has a blog draws it: one node that asks where the posts are, and the region it shows until something answers.

const feedBand: Composition

footerBandvalue

Shown in use on Starting from a band — Where the names live

const footerBand: Composition

footerSignupBandvalue

const footerSignupBand: Composition

heroBandvalue

The first screen: an eyebrow, a claim, a sentence, and two ways in.

Shown in use on Starting from a band — Where the names live

const heroBand: Composition

heroShotBandvalue

The hero with the product shot in it, which this catalogue has never had.

const heroShotBand: Composition

heroSplitBandvalue

const heroSplitBand: Composition

integrationsBandvalue

const integrationsBand: Composition

integrationsGridBandvalue

const integrationsGridBand: Composition

listingsBandvalue

const listingsBand: Composition

metricsBandvalue

const metricsBand: Composition

metricsChartBandvalue

const metricsChartBand: Composition

metricsLiveBandvalue

const metricsLiveBand: Composition

metricsTrendBandvalue

The shape of a number over time, read rather than written.

const metricsTrendBand: Composition

navBandvalue

const navBand: Composition

navCentredBandvalue

const navCentredBand: Composition

offeringsBandvalue

const offeringsBand: Composition

pricingBandvalue

Shown in use on Starting from a band — Where the names live

const pricingBand: Composition

pricingMatrixBandvalue

const pricingMatrixBand: Composition

proofBandvalue

const proofBand: Composition

proofFacesBandvalue

const proofFacesBand: Composition

proofStoryBandvalue

const proofStoryBand: Composition

shelfBandvalue

const shelfBand: Composition

specsBandvalue

const specsBand: Composition

specsSheetBandvalue

const specsSheetBand: Composition

stepsBandvalue

const stepsBand: Composition

stepsCardsBandvalue

const stepsCardsBand: Composition

teamBandvalue

const teamBand: Composition

teamLeadsBandvalue

const teamLeadsBand: Composition

testimonialsBandvalue

const testimonialsBand: Composition

testimonialsCollectedBandvalue

The wall of testimonials, read from wherever they were collected — and the one band in this catalogue whose authored designs were always placeholders.

const testimonialsCollectedBand: Composition

testimonialsWallBandvalue

const testimonialsWallBand: Composition

whatsOnBandvalue

const whatsOnBand: Composition