@sevenfold/setto-client 0.29.0 → 0.30.0

package/dist/SettoImage.d.ts

@@ -3,6 +3,28 @@ export interface SettoImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement
     /** i18n key for the public URL path, e.g. `hero.illustrationSrc`. */
     srcKey: string;
 }
+/**
+ * What the served chrome is handed to draw over an image in edit mode: the
+ * picker with stock photographs, the camera, an upload and «prøv lykken».
+ *
+ * The chrome only ever gives the image a file. Where it came from — a
+ * phone's camera or Unsplash — is the chrome's business; how it becomes a
+ * draft and a published path is this component's, so every source ends up
+ * under `public/images/setto/` the same way.
+ */
+export interface ImageToolsProps {
+    srcKey: string;
+    alt?: string;
+    /** The pointer is over the image. */
+    hovered: boolean;
+    /** An unpublished replacement is showing. */
+    hasDraft: boolean;
+    busy: boolean;
+    /** The rendered image, for its size and its place on the page. */
+    imageEl: HTMLImageElement | null;
+    applyFile: (file: File) => Promise<void>;
+    revert: () => void;
+}
 /**
  * Renders an image whose src is stored in i18n. In edit mode, hover to upload
  * a replacement — saved under `public/images/setto/` on publish.

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { SettoBlock } from './SettoBlock';
 export { SettoIcon } from './SettoIcon';
 export type { SettoIconProps, SettoIconRenderProps } from './SettoIcon';
 export { SettoImage } from './SettoImage';
-export type { SettoImageProps } from './SettoImage';
+export type { SettoImageProps, ImageToolsProps } from './SettoImage';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, fieldTypeHasOptions, fieldTypeHasPlaceholder, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';
@@ -24,6 +24,12 @@ export type { SettoVideoProps } from './SettoVideo';
 export { SettoMap } from './SettoMap';
 export type { SettoMapProps } from './SettoMap';
 export type { MapLocation, MapToolsProps, MapToolsComponent } from './map-tools';
+export { SettoPage, SettoTextSection, usePageManifest, useSettoMenu, } from './pages/SettoPage';
+export type { SettoPageProps, BuiltinSectionProps } from './pages/SettoPage';
+export { PAGES_PATH, PAGES_MANIFEST_VERSION, BUILTIN_SECTION_TYPES, parseManifest, normalisePath, pageForPath, pageById, findSection, visibleMenu, applyOp, applyOps, builtinKeys, pageTitleKey, serialiseManifest, isSafeHref, ManifestError, } from './pages/manifest';
+export type { PagesManifest, PageEntry, PageSection, MenuItem, MenuList, ManifestOp, ManifestIssue, ManifestParse, BuiltinSectionType, } from './pages/manifest';
+export { PageStore, EMPTY_PAGE_STORE_SNAPSHOT, countChanges } from './lib/page-store';
+export type { PageStoreSnapshot } from './lib/page-store';
 export { SettoAnimation } from './SettoAnimation';
 export type { SettoAnimationProps } from './SettoAnimation';
 export { useSectionTheme } from './use-section-theme';

package/dist/lib/page-store.d.ts

@@ -0,0 +1,84 @@
+import { type ManifestOp, type PagesManifest } from '../pages/manifest';
+export interface PageStoreSnapshot {
+    manifest: PagesManifest | null;
+    /** How many pages, sections and links differ from what is published. */
+    changes: number;
+    version: number;
+}
+export declare const EMPTY_PAGE_STORE_SNAPSHOT: PageStoreSnapshot;
+type Listener = (snap: PageStoreSnapshot) => void;
+/**
+ * The page manifest as the owner is editing it.
+ *
+ * The same shape as `ThemeStore` — current against baseline, a snapshot for
+ * `useSyncExternalStore`, revert and commit — so the toolbar counts, discards
+ * and publishes it the way it does colours. Unlike the other stores it holds
+ * one document rather than a map of drafts: an ordering change is not a set of
+ * independent keys, and comparing the whole thing is what makes moving a
+ * section down and back up again a draft of nothing.
+ *
+ * `null` throughout for a site without a manifest — every site built before
+ * pages were data. `SettoPage` then renders the sections in the order the site
+ * listed them, and the structure tools stay out of the editor.
+ */
+export declare class PageStore {
+    private data;
+    private baseline;
+    private version;
+    private listeners;
+    private cached;
+    constructor(initial: PagesManifest | null);
+    snapshot(): PageStoreSnapshot;
+    subscribe(listener: Listener): () => void;
+    get manifest(): PagesManifest | null;
+    /** True once the site has a manifest to edit. */
+    has(): boolean;
+    /**
+     * Apply changes as drafts. All of them or none: a list that fails halfway
+     * leaves the page exactly as it was and says which one failed.
+     */
+    apply(ops: readonly ManifestOp[]): {
+        ok: true;
+    } | {
+        ok: false;
+        error: string;
+        at: number;
+    };
+    /**
+     * Put the draft back to an earlier manifest, keeping the baseline.
+     *
+     * What «Angre» on one of Pixel's changes does: the panel remembers the
+     * manifest from before the change and hands it back here. Checked like
+     * anything else, because it has been through a round trip it did not have
+     * to survive.
+     */
+    restore(manifest: PagesManifest): {
+        ok: true;
+    } | {
+        ok: false;
+        error: string;
+    };
+    /**
+     * Replace the baseline with what the repository holds, dropping drafts.
+     *
+     * Checked first: the file in the repository can be newer than this bundle,
+     * or hand-edited, and a baseline this store cannot render must not replace
+     * the one it can. Returns whether it was taken.
+     */
+    loadBaseline(next: unknown): boolean;
+    revertAll(): void;
+    commit(): void;
+    /** Number of changes, for the toolbar's count. Zero means nothing to publish. */
+    size(): number;
+    serialise(): string | null;
+    private bump;
+}
+/**
+ * Roughly how many things the owner changed: each page whose sections or
+ * settings differ, each link that differs, each one added.
+ *
+ * Only has to be right about zero — that decides whether «Publiser» lights —
+ * and plausible otherwise, because it is shown as a count.
+ */
+export declare function countChanges(before: PagesManifest | null, after: PagesManifest | null): number;
+export {};

package/dist/pages/SettoPage.d.ts

@@ -0,0 +1,63 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type BuiltinSectionType, type MenuItem, type MenuList, type PagesManifest } from './manifest';
+/**
+ * The manifest as it stands now, drafts included, re-rendering on change.
+ * `null` on a site that has none.
+ */
+export declare function usePageManifest(): PagesManifest | null;
+/**
+ * The links a menu or footer should show, or `null` when the site has no
+ * manifest and its own hard-coded list is still the truth.
+ *
+ * Already filtered: hidden links, links to hidden pages and anchors to hidden
+ * sections are gone. Render each label with `<T k={item.labelKey} />`.
+ */
+export declare function useSettoMenu(list?: MenuList): MenuItem[] | null;
+/** What a built-in section's renderer is given. */
+export interface BuiltinSectionProps {
+    sectionId: string;
+    /** The first visible section on a page gets the page's `h1`. */
+    first: boolean;
+}
+export interface SettoPageProps {
+    /** The page to render. Wins over `path`. */
+    pageId?: string;
+    /** Or the one living at this path — the router's pathname, for a catch-all route. */
+    path?: string;
+    /**
+     * The site's own sections, by section id.
+     *
+     * The manifest decides their order and which are hidden. A component listed
+     * here that the manifest does not mention is rendered after the rest, so a
+     * section added in code never silently disappears.
+     */
+    sections?: Record<string, ComponentType>;
+    /** A site's own look for a built-in section type. */
+    builtins?: Partial<Record<BuiltinSectionType, ComponentType<BuiltinSectionProps>>>;
+    /** Shown when no page lives at `path`, or a visitor reaches a hidden one. */
+    fallback?: ReactNode;
+}
+/**
+ * A page, drawn from the manifest.
+ *
+ * Two ways in. A page the site wrote in code names itself:
+ *
+ *     <SettoPage pageId="home" sections={{ hero: Hero, services: Services }} />
+ *
+ * and a catch-all route renders whatever the owner added since:
+ *
+ *     <Route path="*" element={<SettoPage path={pathname} fallback={<NotFound />} />} />
+ *
+ * Without a manifest it renders `sections` in the order given, which is what
+ * the page did before it had one.
+ */
+export declare function SettoPage({ pageId, path, sections, builtins, fallback }: SettoPageProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Headings and paragraphs, for terms, privacy and the like.
+ *
+ * Styled inline and from the page it sits in — its font, its colours — because
+ * the library cannot know the site's Tailwind classes, and a Tailwind class
+ * written here would be purged from the site's CSS anyway. A site that wants
+ * its own look passes `builtins={{ text: MyText }}`.
+ */
+export declare function SettoTextSection({ sectionId, first }: BuiltinSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/bundled.d.ts

@@ -0,0 +1,10 @@
+import { type PagesManifest } from './manifest';
+/**
+ * The manifest the site was built with, checked once.
+ *
+ * Read on the very first render, before the draft store exists, so the page
+ * never flashes its sections in code order — or a hidden one — before the
+ * store takes over. A file that fails the check is reported and ignored: the
+ * page then renders the way it would without one, which is a working site.
+ */
+export declare function bundledManifest(raw: unknown): PagesManifest | null;

package/dist/pages/manifest.d.ts

@@ -0,0 +1,202 @@
+/**
+ * The shape of a site: which pages it has, which sections each page shows and
+ * in what order, and what the menu and footer link to.
+ *
+ * Data rather than TSX, because the owner has to be able to change it. A page
+ * written as `<Hero /><Services /><Contact />` can only be reordered by someone
+ * who can edit code, so moving a section up, hiding it for the summer or adding
+ * a «Vilkår» page used to mean a developer. Kept in
+ * `src/content/pages.json`, which the inline editor publishes like any other
+ * content file.
+ *
+ * Nothing is ever deleted from here. «Remove» hides: a section, a page or a
+ * menu link that is hidden keeps its place and its text, and showing it again
+ * puts it back exactly as it was. The owner asked for undo, and a hidden entry
+ * is undo that survives a publish.
+ *
+ * Every function below is pure and returns a new manifest, so a draft can be
+ * compared with its baseline and a failed operation leaves nothing half-done.
+ */
+export declare const PAGES_MANIFEST_VERSION = 1;
+/** Where the manifest lives in a site repository. */
+export declare const PAGES_PATH = "src/content/pages.json";
+/**
+ * Sections Setto can render on its own, without code from the site.
+ *
+ * `text` is a heading, an optional intro and a list of paragraphs with
+ * optional headings: enough for terms, privacy, an «about» page. It is what
+ * lets Pixel add a «Vilkår» page in the chat instead of in a sandbox.
+ */
+export declare const BUILTIN_SECTION_TYPES: readonly ["text"];
+export type BuiltinSectionType = (typeof BUILTIN_SECTION_TYPES)[number];
+export interface PageSection {
+    /** Unique across the whole site: it is also the theme id and the anchor. */
+    id: string;
+    /** A built-in section. Absent means a component the site registers. */
+    type?: BuiltinSectionType;
+    hidden?: boolean;
+    /** What the editor calls it («Tjenester»). Falls back to the id. */
+    label?: string;
+}
+export interface PageEntry {
+    id: string;
+    /** `/`, `/vilkar`. Never under `/setto`, which is the editor's. */
+    path: string;
+    /** Locale key for the page's name, used by the menu and the tab title. */
+    titleKey: string;
+    hidden?: boolean;
+    sections: PageSection[];
+}
+export interface MenuItem {
+    id: string;
+    /** `/vilkar`, `/#tjenester`, or an absolute `https://` link. */
+    href: string;
+    labelKey: string;
+    hidden?: boolean;
+}
+export type MenuList = 'menu' | 'footer';
+export interface PagesManifest {
+    version: typeof PAGES_MANIFEST_VERSION;
+    pages: PageEntry[];
+    menu: MenuItem[];
+    footer: MenuItem[];
+}
+export interface ManifestIssue {
+    at: string;
+    message: string;
+}
+export type ManifestParse = {
+    ok: true;
+    manifest: PagesManifest;
+} | {
+    ok: false;
+    issues: ManifestIssue[];
+};
+/**
+ * Check a manifest from disk, from the network or from a model.
+ *
+ * Strict on what would break a page — duplicate ids, a path the router cannot
+ * hold, a section type nothing renders — and silent about fields it does not
+ * know, so a newer editor's manifest still renders on an older site.
+ */
+export declare function parseManifest(input: unknown): ManifestParse;
+/** A path on this site, an anchor, or an http(s)/mailto/tel link. Never `javascript:`. */
+export declare function isSafeHref(href: string): boolean;
+/** `/vilkar/` and `/vilkar` are one page; the empty path is the front page. */
+export declare function normalisePath(path: string): string;
+export declare function pageForPath(manifest: PagesManifest, path: string): PageEntry | null;
+export declare function pageById(manifest: PagesManifest, id: string): PageEntry | null;
+/** The page a section is on, and where. */
+export declare function findSection(manifest: PagesManifest, sectionId: string): {
+    page: PageEntry;
+    index: number;
+    section: PageSection;
+} | null;
+/**
+ * The links a visitor should see.
+ *
+ * Hidden items go, and so do items that would lead nowhere: a link to a
+ * hidden page, or an anchor to a hidden section. Hiding «Tjenester» for the
+ * winter should not leave a menu entry that scrolls to nothing.
+ */
+export declare function visibleMenu(manifest: PagesManifest, list: MenuList): MenuItem[];
+export declare class ManifestError extends Error {
+    readonly code: 'page_not_found' | 'section_not_found' | 'item_not_found' | 'duplicate_id' | 'duplicate_path' | 'invalid';
+    constructor(code: 'page_not_found' | 'section_not_found' | 'item_not_found' | 'duplicate_id' | 'duplicate_path' | 'invalid', message: string);
+}
+/**
+ * Move a section up (negative) or down (positive) on its page.
+ *
+ * Skips over hidden neighbours: moving «Om oss» up past a hidden section
+ * would otherwise do nothing the owner can see, and look broken. Returns the
+ * manifest unchanged at either end rather than throwing — the button is
+ * simply at the edge.
+ */
+export declare function moveSection(manifest: PagesManifest, sectionId: string, delta: -1 | 1): PagesManifest;
+/** Put a section at an exact position among its page's sections. */
+export declare function placeSection(manifest: PagesManifest, sectionId: string, index: number): PagesManifest;
+export declare function setSectionHidden(manifest: PagesManifest, sectionId: string, hidden: boolean): PagesManifest;
+export declare function addSection(manifest: PagesManifest, pageId: string, section: PageSection, index?: number): PagesManifest;
+export declare function addPage(manifest: PagesManifest, page: PageEntry): PagesManifest;
+export declare function setPageHidden(manifest: PagesManifest, pageId: string, hidden: boolean): PagesManifest;
+/** Add a link, or change the one with the same id. */
+export declare function upsertMenuItem(manifest: PagesManifest, list: MenuList, item: MenuItem, index?: number): PagesManifest;
+export declare function moveMenuItem(manifest: PagesManifest, list: MenuList, itemId: string, delta: -1 | 1): PagesManifest;
+export declare function setMenuItemHidden(manifest: PagesManifest, list: MenuList, itemId: string, hidden: boolean): PagesManifest;
+/**
+ * One change, as data.
+ *
+ * What Pixel's structure tools return and what the editor applies, so a
+ * suggestion from the chat and a click in the toolbar go through the same
+ * functions — and a change the model gets wrong fails here, in a way the
+ * owner never sees half of.
+ */
+export type ManifestOp = {
+    op: 'move_section';
+    sectionId: string;
+    delta: -1 | 1;
+} | {
+    op: 'place_section';
+    sectionId: string;
+    index: number;
+} | {
+    op: 'hide_section';
+    sectionId: string;
+} | {
+    op: 'show_section';
+    sectionId: string;
+} | {
+    op: 'add_section';
+    pageId: string;
+    section: PageSection;
+    index?: number;
+} | {
+    op: 'add_page';
+    page: PageEntry;
+} | {
+    op: 'hide_page';
+    pageId: string;
+} | {
+    op: 'show_page';
+    pageId: string;
+} | {
+    op: 'upsert_link';
+    list: MenuList;
+    item: MenuItem;
+    index?: number;
+} | {
+    op: 'move_link';
+    list: MenuList;
+    itemId: string;
+    delta: -1 | 1;
+} | {
+    op: 'hide_link';
+    list: MenuList;
+    itemId: string;
+} | {
+    op: 'show_link';
+    list: MenuList;
+    itemId: string;
+};
+export declare function applyOp(manifest: PagesManifest, op: ManifestOp): PagesManifest;
+/** Every op or none: a list that fails halfway returns the error and no manifest. */
+export declare function applyOps(manifest: PagesManifest, ops: readonly ManifestOp[]): {
+    ok: true;
+    manifest: PagesManifest;
+} | {
+    ok: false;
+    error: string;
+    at: number;
+};
+/** Where a built-in section keeps its words in the locale files. */
+export declare function builtinKeys(sectionId: string): {
+    heading: string;
+    intro: string;
+    items: string;
+    itemHeading: (itemKey: string) => string;
+    itemText: (itemKey: string) => string;
+};
+/** The default locale key for a page's name. */
+export declare function pageTitleKey(pageId: string): string;
+/** Stable JSON for the file, so an unchanged manifest is an unchanged file. */
+export declare function serialiseManifest(manifest: PagesManifest): string;

package/dist/provider.d.ts

@@ -4,6 +4,7 @@ import { type SettoApi } from './lib/api';
 import { I18nStore } from './lib/i18n-store';
 import { AssetStore } from './lib/asset-store';
 import { ThemeStore } from './lib/theme-store';
+import { PageStore } from './lib/page-store';
 import type { SettoConfig, SiteRow } from './types';
 export interface SettoContextValue {
     config: SettoConfig;
@@ -25,6 +26,12 @@ export interface SettoContextValue {
     store: I18nStore | null;
     themeStore: ThemeStore | null;
     assetStore: AssetStore | null;
+    /**
+     * The page manifest being edited: section order, hidden sections, pages and
+     * menu links. Holds `null` inside for a site that has no `pages.json`.
+     * Absent on a client older than 0.29, which the chrome has to allow for.
+     */
+    pageStore: PageStore | null;
     /** The section the editor has selected, or null. */
     selectedSectionId: string | null;
     selectSection: (id: string | null) => void;