@protobase/layout 0.0.0-stage → 0.1.1

package/dist/check-structure.js

@@ -0,0 +1,52 @@
+import { blockSpecs, propProblems } from "./block-specs.js";
+import { parseCondition } from "./condition.js";
+import { walkTree } from "./walk.js";
+//#region src/check-structure.ts
+/** Problems that need a record around the element, which only a `RecordCard` or a `CardRow` card provides. */
+const recordProblems = (node, scope) => {
+	if (scope.record) return [];
+	const { props } = node;
+	const outside = "needs a record: put it inside a RecordCard or a CardRow";
+	switch (node.type) {
+		case "Field": return [outside];
+		case "Stat": return props.field !== void 0 ? [`with "field" ${outside}`] : [];
+		case "Progress": return typeof props.value === "string" || typeof props.max === "string" ? [`with a field name ${outside}`] : [];
+		case "ModalForm": return props.mode === "edit" && (props.resource === void 0 || props.recordKey === void 0) ? [`in edit mode ${outside}, or name "resource" and "recordKey"`] : [];
+		case "Action": return props.resource === void 0 ? [`${outside}, or name "resource"`] : [];
+		default: return [];
+	}
+};
+const statProblems = ({ props }) => {
+	if ([
+		"value",
+		"resource",
+		"field"
+	].filter((name) => props[name] !== void 0).length !== 1) return ["takes exactly one of \"value\", \"resource\" (a count) and \"field\""];
+	return props.filter !== void 0 && props.resource === void 0 ? ["\"filter\" needs \"resource\""] : [];
+};
+/**
+* Checks a page's tree without the models: the root is one `Page`, every built-in element has known props of the right
+* kind, elements that show a record's fields sit inside one, and conditions parse. Returns the problems, each with
+* where it is.
+*/
+const structureProblems = (tree) => {
+	const problems = [];
+	if (tree.custom || tree.type !== "Page") problems.push(`the root element is <${tree.type}>, it must be <Page>`);
+	walkTree(tree, (node, { path, scope }) => {
+		const report = (problem) => problems.push(`${path}: ${problem}`);
+		if (node.custom) return;
+		const spec = blockSpecs[node.type];
+		if (!spec) return report(`<${node.type}> is not a block; custom components are declared with component('${node.type}')`);
+		if (node.type === "Page" && node !== tree) report("<Page> is only allowed as the root");
+		propProblems(spec, node.props, node.children.length).forEach(report);
+		recordProblems(node, scope).forEach(report);
+		if (node.type === "Stat") statProblems(node).forEach(report);
+		if (node.type === "Show" && typeof node.props.when === "string") {
+			const parsed = parseCondition(node.props.when);
+			if (!parsed.ok) report(`"when" is not a valid condition: ${parsed.message}`);
+		}
+	});
+	return problems;
+};
+//#endregion
+export { structureProblems };

package/dist/component.d.ts

@@ -0,0 +1,10 @@
+import { Block, LayoutChildren } from "./node.js";
+//#region src/component.d.ts
+/**
+ * Declares a custom component for layouts: `<UsageChart metric="cpu" />` becomes an element of type `UsageChart`,
+ * which the app renders with the React component registered under that name. Its props must be static values too.
+ */
+export declare const component: <P extends object = Record<string, never>>(name: string) => Block<P & {
+  children?: LayoutChildren;
+}>;
+//#endregion

package/dist/component.js

@@ -0,0 +1,15 @@
+import { defineBlock } from "./create-node.js";
+import { blockSpecs } from "./block-specs.js";
+//#region src/component.ts
+const componentName = /^[A-Z][A-Za-z0-9]*$/;
+/**
+* Declares a custom component for layouts: `<UsageChart metric="cpu" />` becomes an element of type `UsageChart`,
+* which the app renders with the React component registered under that name. Its props must be static values too.
+*/
+const component = (name) => {
+	if (!componentName.test(name)) throw new Error(`Component name "${name}" must be PascalCase, such as UsageChart`);
+	if (Object.hasOwn(blockSpecs, name) || name === "Fragment") throw new Error(`"${name}" is a built-in block; give the custom component another name`);
+	return defineBlock(name, true);
+};
+//#endregion
+export { component };

package/dist/condition.d.ts

@@ -0,0 +1,18 @@
+import { Expr } from "aip-parsers/filter";
+//#region src/condition.d.ts
+export type Condition = {
+  ast: Expr | undefined;
+  paths: string[];
+};
+export type ConditionParse = ({
+  ok: true;
+} & Condition) | {
+  ok: false;
+  message: string;
+};
+export declare const parseCondition: (source: string) => ConditionParse;
+/** True when the condition holds for `values`, keyed by the dotted paths in `condition.paths`. Functions are not supported. */
+export declare const evaluateCondition: (condition: Condition, values: Record<string, unknown>) => boolean;
+/** The resource a path counts (`billingProfiles.count`), when it is not a field of the record around it. */
+export declare const countedResource: (path: string, isField: (name: string) => boolean) => string | undefined;
+//#endregion

package/dist/condition.js

@@ -0,0 +1,42 @@
+import { evaluateFilter, parseFilter } from "aip-parsers/filter";
+//#region src/condition.ts
+const isMember = (node) => typeof node === "object" && node !== null && node.kind === "member";
+const memberPaths = (node) => {
+	if (isMember(node)) return [node.path.join(".")];
+	if (typeof node !== "object" || node === null) return [];
+	return Object.values(node).flatMap(memberPaths);
+};
+const folded = (node) => {
+	if (isMember(node)) return {
+		...node,
+		path: [node.path.join(".")]
+	};
+	if (Array.isArray(node)) return node.map(folded);
+	if (typeof node !== "object" || node === null) return node;
+	return Object.fromEntries(Object.entries(node).map(([key, value]) => [key, folded(value)]));
+};
+const parseCondition = (source) => {
+	const parsed = parseFilter(source);
+	if (!parsed.ok) return {
+		ok: false,
+		message: parsed.errors.map((error) => error.message).join("; ")
+	};
+	if (!parsed.ast) return {
+		ok: false,
+		message: "the condition is empty"
+	};
+	return {
+		ok: true,
+		ast: parsed.ast,
+		paths: [...new Set(memberPaths(parsed.ast))]
+	};
+};
+/** True when the condition holds for `values`, keyed by the dotted paths in `condition.paths`. Functions are not supported. */
+const evaluateCondition = (condition, values) => condition.ast !== void 0 && evaluateFilter(folded(condition.ast), values);
+/** The resource a path counts (`billingProfiles.count`), when it is not a field of the record around it. */
+const countedResource = (path, isField) => {
+	const [first, second, ...rest] = path.split(".");
+	return first && second === "count" && rest.length === 0 && !isField(first) ? first : void 0;
+};
+//#endregion
+export { countedResource, evaluateCondition, parseCondition };

package/dist/create-node.js

@@ -0,0 +1,56 @@
+import { isLayoutNode } from "./node.js";
+//#region src/create-node.ts
+const advice = "Layouts are static data, sent to the browser as JSON: use <Action name=\"...\"> for behaviour, or register a custom component for React code.";
+const describe = (value) => {
+	if (typeof value === "function") return "a function";
+	if (typeof value === "number") return String(value);
+	if (typeof value !== "object" || value === null) return `a ${typeof value}`;
+	return `a ${value.constructor?.name ?? "object without prototype"}`;
+};
+const isPlainObject = (value) => {
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+};
+/** Throws unless `value` is JSON-safe data: strings, finite numbers, booleans, null, arrays and plain objects of those. */
+const staticValue = (value, where) => {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return value;
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	if (Array.isArray(value)) return value.map((item, index) => staticValue(item, `${where.slice(0, -1)}[${index}]>`));
+	if (typeof value === "object" && isPlainObject(value)) return Object.fromEntries(Object.entries(value).flatMap(([key, item]) => item === void 0 ? [] : [[key, staticValue(item, `${where.slice(0, -1)}.${key}>`)]]));
+	throw new Error(`${where} is ${describe(value)}. ${advice}`);
+};
+/** Flattens arrays and fragments, drops `null`, `undefined` and booleans, and turns numbers into text, like React. */
+const normalizeChildren = (children, where) => {
+	if (children === void 0 || children === null || typeof children === "boolean") return [];
+	if (typeof children === "string") return [children];
+	if (typeof children === "number" && Number.isFinite(children)) return [String(children)];
+	if (Array.isArray(children)) return children.flatMap((child) => normalizeChildren(child, where));
+	if (isLayoutNode(children)) return children.type === "Fragment" && !children.custom ? children.children : [children];
+	throw new Error(`${where} has a child that is ${describe(children)}. ${advice}`);
+};
+const fragmentName = "Fragment";
+const isBlock = (type) => typeof type === "function" && typeof type.blockName === "string";
+/** The element for `<type {...props} />`: checks that every prop and child is static and returns plain data. */
+const createNode = (type, props) => {
+	if (typeof type === "string") throw new Error(`<${type}> is an HTML element, not a layout block: use the blocks from @protobase/layout or a custom component`);
+	if (!isBlock(type)) throw new Error(`<${typeof type === "function" && type.name ? type.name : "unknown"}> is not a layout block. Components in a layout are declared with component('Name') and implemented in the app; ${advice}`);
+	const name = type.blockName;
+	const { children, ...rest } = props;
+	const node = {
+		type: name,
+		props: Object.fromEntries(Object.entries(rest).flatMap(([key, value]) => value === void 0 ? [] : [[key, staticValue(value, `<${name} ${key}>`)]])),
+		children: normalizeChildren(children, `<${name}>`)
+	};
+	if (type.custom) node.custom = true;
+	return node;
+};
+/** Declares a block named `name`; `custom` marks a component the app implements in React. */
+const defineBlock = (name, custom) => {
+	const block = Object.assign((props) => createNode(block, props), {
+		blockName: name,
+		custom
+	});
+	return block;
+};
+//#endregion
+export { createNode, defineBlock, fragmentName, normalizeChildren, staticValue };

package/dist/field-path.d.ts

@@ -0,0 +1,20 @@
+import { FieldModel, ResourceModel } from "@protobase/schema";
+//#region src/field-path.d.ts
+/** One step of a field path: the field, and the resource it belongs to. */
+export type PathStep = {
+  model: ResourceModel;
+  field: FieldModel;
+};
+export type PathResolution = {
+  ok: true;
+  steps: PathStep[];
+} | {
+  ok: false;
+  message: string;
+};
+/**
+ * Resolves `plan.name` from `resource`: every name but the last must be a relation, and each next name a field of the
+ * resource that relation points at. A missing resource or field is reported as unknown, never as hidden.
+ */
+export declare const resolveFieldPath: (models: Record<string, ResourceModel>, resource: string, path: string) => PathResolution;
+//#endregion

package/dist/field-path.js

@@ -0,0 +1,38 @@
+//#region src/field-path.ts
+/**
+* Resolves `plan.name` from `resource`: every name but the last must be a relation, and each next name a field of the
+* resource that relation points at. A missing resource or field is reported as unknown, never as hidden.
+*/
+const resolveFieldPath = (models, resource, path) => {
+	const steps = [];
+	let model = models[resource];
+	const names = path.split(".");
+	for (const [index, name] of names.entries()) {
+		if (!model) return {
+			ok: false,
+			message: `unknown resource "${resource}"`
+		};
+		const field = Object.hasOwn(model.fields, name) ? model.fields[name] : void 0;
+		if (!field) return {
+			ok: false,
+			message: `unknown field "${names.slice(0, index + 1).join(".")}" on ${model.name}`
+		};
+		steps.push({
+			model,
+			field
+		});
+		if (index === names.length - 1) break;
+		if (field.type !== "relation" || !field.relation) return {
+			ok: false,
+			message: `"${names.slice(0, index + 1).join(".")}" is not a relation, so "${path}" cannot go through it`
+		};
+		resource = field.relation.resource;
+		model = models[resource];
+	}
+	return {
+		ok: true,
+		steps
+	};
+};
+//#endregion
+export { resolveFieldPath };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { Block, LayoutChild, LayoutChildren, LayoutNode, LayoutValue, isLayoutNode } from "./node.js";
+import { Action, ActionProps, ButtonVariant, Card, CardProps, CardRow, CardRowProps, DataProps, Elements, Field, FieldProps, Grid, GridProps, GridSpan, Link, LinkProps, ModalForm, ModalFormProps, Page, PageProps, Progress, ProgressProps, RecordCard, RecordCardProps, Show, ShowProps, Stat, StatProps, Table, TableProps } from "./blocks.js";
+import { component } from "./component.js";
+import { PageDefinition, PageModel, PageOptions, isPageDefinition, page } from "./page.js";
+import { checkPages } from "./check-page.js";
+import { prunePage } from "./prune-page.js";
+import { countedResource, evaluateCondition, parseCondition } from "./condition.js";
+import { PathStep, resolveFieldPath } from "./field-path.js";
+import { jsx_runtime_d_exports } from "./jsx-runtime.js";
+export { Action, type ActionProps, type Block, type ButtonVariant, Card, type CardProps, CardRow, type CardRowProps, type DataProps, type Elements, Field, type FieldProps, Grid, type GridProps, type GridSpan, type LayoutChild, type LayoutChildren, type LayoutNode, type LayoutValue, Link, type LinkProps, ModalForm, type ModalFormProps, Page, type PageDefinition, type PageModel, type PageOptions, type PageProps, type PathStep, Progress, type ProgressProps, RecordCard, type RecordCardProps, Show, type ShowProps, Stat, type StatProps, Table, type TableProps, checkPages, component, countedResource, evaluateCondition, isLayoutNode, isPageDefinition, jsx_runtime_d_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath };

package/dist/index.js

@@ -0,0 +1,10 @@
+import { isLayoutNode } from "./node.js";
+import { Action, Card, CardRow, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, Show, Stat, Table } from "./blocks.js";
+import { component } from "./component.js";
+import { countedResource, evaluateCondition, parseCondition } from "./condition.js";
+import { isPageDefinition, page } from "./page.js";
+import { resolveFieldPath } from "./field-path.js";
+import { checkPages } from "./check-page.js";
+import { prunePage } from "./prune-page.js";
+import { jsx_runtime_exports } from "./jsx-runtime.js";
+export { Action, Card, CardRow, Field, Grid, Link, ModalForm, Page, Progress, RecordCard, Show, Stat, Table, checkPages, component, countedResource, evaluateCondition, isLayoutNode, isPageDefinition, jsx_runtime_exports as jsxRuntime, page, parseCondition, prunePage, resolveFieldPath };

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,6 @@
+import { LayoutNode } from "./node.js";
+import { Fragment, JSX } from "./jsx-runtime.js";
+//#region src/jsx-dev-runtime.d.ts
+export declare const jsxDEV: (type: unknown, props: Record<string, unknown>) => LayoutNode;
+//#endregion
+export { Fragment, type JSX };

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,6 @@
+import { createNode } from "./create-node.js";
+import { Fragment } from "./jsx-runtime.js";
+//#region src/jsx-dev-runtime.ts
+const jsxDEV = (type, props) => createNode(type, props);
+//#endregion
+export { Fragment, jsxDEV };

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,22 @@
+import { Block, LayoutChildren, LayoutNode } from "./node.js";
+declare namespace jsx_runtime_d_exports {
+  export { Fragment, JSX, jsx, jsxs };
+}
+export declare const Fragment: Block<{
+  children?: LayoutChildren;
+}>;
+export declare const jsx: (type: unknown, props: Record<string, unknown>) => LayoutNode;
+export declare const jsxs: (type: unknown, props: Record<string, unknown>) => LayoutNode;
+export declare namespace JSX {
+  type Element = LayoutNode;
+  type ElementType = Block<any>;
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+  interface IntrinsicElements {}
+  interface IntrinsicAttributes {
+    key?: string | number;
+  }
+}
+//#endregion
+export { jsx_runtime_d_exports };

package/dist/jsx-runtime.js

@@ -0,0 +1,13 @@
+import { __exportAll } from "./_virtual/_rolldown/runtime.js";
+import { createNode, defineBlock, fragmentName } from "./create-node.js";
+//#region src/jsx-runtime.ts
+var jsx_runtime_exports = /* @__PURE__ */ __exportAll({
+	Fragment: () => Fragment,
+	jsx: () => jsx,
+	jsxs: () => jsxs
+});
+const Fragment = defineBlock(fragmentName, false);
+const jsx = (type, props) => createNode(type, props);
+const jsxs = jsx;
+//#endregion
+export { Fragment, jsx, jsx_runtime_exports, jsxs };

package/dist/node.d.ts

@@ -0,0 +1,24 @@
+//#region src/node.d.ts
+/** A static value a layout prop may hold: what survives `JSON.stringify` unchanged, plus elements (also plain data). */
+export type LayoutValue = string | number | boolean | null | LayoutValue[] | {
+  [key: string]: LayoutValue;
+};
+/** One element of a layout tree. Plain data: it is sent to the browser as JSON and rendered there. */
+export type LayoutNode = {
+  /** A built-in block (`Table`) or a custom component's registered name. */
+  type: string;
+  props: Record<string, LayoutValue>;
+  children: LayoutChild[];
+  /** Set on custom components, which the app renders with the React component registered under `type`. */
+  custom?: true;
+};
+export type LayoutChild = LayoutNode | string;
+/** What JSX accepts as children; `null`, `undefined` and booleans render nothing, like in React. */
+export type LayoutChildren = LayoutChild | number | boolean | null | undefined | LayoutChildren[];
+/** A block as JSX sees it: called by the runtime with its props, it describes one element. */
+export type Block<P> = ((props: P) => LayoutNode) & {
+  readonly blockName: string;
+  readonly custom: boolean;
+};
+export declare const isLayoutNode: (value: unknown) => value is LayoutNode;
+//#endregion

package/dist/node.js

@@ -0,0 +1,4 @@
+//#region src/node.ts
+const isLayoutNode = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && typeof value.type === "string" && Array.isArray(value.children);
+//#endregion
+export { isLayoutNode };

package/dist/page.d.ts

@@ -0,0 +1,28 @@
+import { LayoutNode } from "./node.js";
+import { NavModel } from "@protobase/schema";
+//#region src/page.d.ts
+/** A composed page as `/api/meta` serves it. */
+export type PageModel = {
+  /** Its address: the page is at `/<name>`, beside the resources, so no resource may have the same name. */
+  name: string;
+  /** The root `Page` element's title. */
+  title: string;
+  icon?: string;
+  nav?: NavModel;
+  /** Shown only to users with one of these roles; a page without roles is for everyone who can sign in. */
+  roles?: string[];
+  tree: LayoutNode;
+};
+export type PageOptions = Pick<PageModel, 'icon' | 'nav' | 'roles'>;
+export type PageDefinition = {
+  readonly kind: 'page';
+  readonly name: string;
+  toModel(): PageModel;
+};
+/**
+ * A composed page at `/<name>`. Checks the tree right away, so a broken layout stops the config from loading; the
+ * resources, fields, filters and actions it names are checked against the models when the server starts.
+ */
+export declare const page: (name: string, tree: LayoutNode, options?: PageOptions) => PageDefinition;
+export declare const isPageDefinition: (value: unknown) => value is PageDefinition;
+//#endregion

package/dist/page.js

@@ -0,0 +1,26 @@
+import { structureProblems } from "./check-structure.js";
+//#region src/page.ts
+const pageName = /^[a-z][a-zA-Z0-9-]*$/;
+/**
+* A composed page at `/<name>`. Checks the tree right away, so a broken layout stops the config from loading; the
+* resources, fields, filters and actions it names are checked against the models when the server starts.
+*/
+const page = (name, tree, options = {}) => {
+	if (!pageName.test(name)) throw new Error(`Page name "${name}" must start with a lowercase letter and hold only letters, digits and dashes`);
+	const problems = structureProblems(tree);
+	if (problems.length > 0) throw new Error(`Page "${name}" is not a valid layout:\n${problems.map((problem) => `  - ${problem}`).join("\n")}`);
+	const model = {
+		name,
+		title: String(tree.props.title),
+		tree,
+		...options
+	};
+	return {
+		kind: "page",
+		name,
+		toModel: () => structuredClone(model)
+	};
+};
+const isPageDefinition = (value) => typeof value === "object" && value !== null && value.kind === "page" && typeof value.toModel === "function";
+//#endregion
+export { isPageDefinition, page };

package/dist/prune-page.d.ts

@@ -0,0 +1,21 @@
+import { PageModel } from "./page.js";
+import { ResourceModel } from "@protobase/schema";
+//#region src/prune-page.d.ts
+export type CallerAccess = {
+  /** The resources the caller can do anything with, as restricted models: hidden fields absent, `readOnly` unless writable. */
+  models: Record<string, ResourceModel>;
+  permissions: Record<string, {
+    create: boolean;
+    update: boolean;
+  }>;
+  /** The named actions in the caller's view of a resource. */
+  actions: (resource: string) => ReadonlySet<string>;
+};
+/**
+ * The page as one caller may see it, or `undefined` when its roles leave the caller out. Every element that names a
+ * resource, field, filter, sort or action the caller cannot use is left out, with what it contains; table columns
+ * and form fields are narrowed to what the caller may read and write. Data still comes from the API, which applies
+ * the same access rules (row filters included) to every request.
+ */
+export declare const prunePage: (page: PageModel, roles: readonly string[], access: CallerAccess) => PageModel | undefined;
+//#endregion

package/dist/prune-page.js

@@ -0,0 +1,86 @@
+import { countedResource, parseCondition } from "./condition.js";
+import { mapTree } from "./walk.js";
+import { resolveFieldPath } from "./field-path.js";
+import { elementResource } from "./check-page.js";
+import { checkFilter, checkOrderBy, parseFilter, parseOrderBy } from "@protobase/schema";
+//#region src/prune-page.ts
+const text = (value) => typeof value === "string" ? value : void 0;
+const filterFits = (model, source) => {
+	if (source === void 0) return true;
+	const parsed = parseFilter(source);
+	return parsed.ok && (parsed.ast === void 0 || checkFilter(model, parsed.ast).ok);
+};
+const sortFits = (model, source) => {
+	if (source === void 0) return true;
+	const parsed = parseOrderBy(source);
+	return parsed.ok && checkOrderBy(model, parsed.items).ok;
+};
+const writable = (model, name) => Object.hasOwn(model.fields, name) && !model.fields[name].readOnly;
+const prune = (node, scope, access) => {
+	if (node.custom) return node;
+	const { models } = access;
+	const own = text(node.props.resource);
+	if (own !== void 0 && !models[own]) return null;
+	const resource = elementResource(node, scope);
+	const model = resource === void 0 ? void 0 : models[resource];
+	if (own !== void 0 && model && (!filterFits(model, text(node.props.filter)) || !sortFits(model, text(node.props.sort)))) return null;
+	const readable = (name) => scope.resource !== void 0 && resolveFieldPath(models, scope.resource, name).ok;
+	switch (node.type) {
+		case "Field": return readable(String(node.props.name)) ? node : null;
+		case "Stat": return text(node.props.field) === void 0 || readable(String(node.props.field)) ? node : null;
+		case "Progress": return [node.props.value, node.props.max].every((name) => typeof name !== "string" || readable(name)) ? node : null;
+		case "Table": {
+			const columns = node.props.columns;
+			if (!columns || !model) return node;
+			const visible = columns.filter((name) => Object.hasOwn(model.fields, name));
+			const { columns: _, ...props } = node.props;
+			return {
+				...node,
+				props: visible.length > 0 ? {
+					...props,
+					columns: visible
+				} : props
+			};
+		}
+		case "ModalForm": {
+			if (!model || resource === void 0) return null;
+			if (!(node.props.mode === "create" ? access.permissions[resource]?.create : access.permissions[resource]?.update)) return null;
+			if (!Object.keys(node.props.values ?? {}).every((name) => writable(model, name))) return null;
+			const fields = node.props.fields.filter((name) => writable(model, name));
+			return fields.length > 0 ? {
+				...node,
+				props: {
+					...node.props,
+					fields
+				}
+			} : null;
+		}
+		case "Action": return resource !== void 0 && model && access.actions(resource).has(String(node.props.name)) ? node : null;
+		case "Show": {
+			const parsed = parseCondition(String(node.props.when));
+			if (!parsed.ok) return null;
+			const record = scope.record && scope.resource !== void 0 ? models[scope.resource] : void 0;
+			return parsed.paths.every((name) => {
+				const counted = countedResource(name, (first) => Boolean(record && Object.hasOwn(record.fields, first)));
+				return counted !== void 0 ? Boolean(models[counted]) : readable(name);
+			}) ? node : null;
+		}
+		default: return node;
+	}
+};
+/**
+* The page as one caller may see it, or `undefined` when its roles leave the caller out. Every element that names a
+* resource, field, filter, sort or action the caller cannot use is left out, with what it contains; table columns
+* and form fields are narrowed to what the caller may read and write. Data still comes from the API, which applies
+* the same access rules (row filters included) to every request.
+*/
+const prunePage = (page, roles, access) => {
+	if (page.roles && !page.roles.some((role) => roles.includes(role))) return void 0;
+	const tree = mapTree(page.tree, (node, { scope }) => prune(node, scope, access));
+	return tree ? {
+		...page,
+		tree
+	} : void 0;
+};
+//#endregion
+export { prunePage };

package/dist/walk.js

@@ -0,0 +1,68 @@
+import { isLayoutNode } from "./node.js";
+//#region src/walk.ts
+const pageScope = { record: false };
+const recordScope = (node) => ({
+	resource: typeof node.props.resource === "string" ? node.props.resource : void 0,
+	record: true
+});
+/** The scope of an element's children: each card of a `RecordCard` or `CardRow` is a record of its resource. */
+const childScope = (node, scope) => !node.custom && (node.type === "RecordCard" || node.type === "CardRow") ? recordScope(node) : scope;
+/** The scope of the elements in a prop: a `RecordCard`'s header actions belong to its record, others to the parent's scope. */
+const propScope = (node, scope) => !node.custom && node.type === "RecordCard" ? recordScope(node) : scope;
+const label = (node) => `<${node.type}${typeof node.props.resource === "string" ? ` resource="${node.props.resource}"` : ""}${typeof node.props.name === "string" ? ` name="${node.props.name}"` : ""}>`;
+const isElements = (value) => isLayoutNode(value) || Array.isArray(value) && value.length > 0 && value.every(isLayoutNode);
+/**
+* Rebuilds the tree bottom-up through `visit`, which sees each element (with its children and element props already
+* rebuilt) and returns it, a replacement, or `null` to leave it out. Text children are kept as they are.
+*/
+const mapTree = (node, visit, at = {
+	path: label(node),
+	scope: pageScope
+}) => {
+	const inner = childScope(node, at.scope);
+	const slot = propScope(node, at.scope);
+	const children = node.children.flatMap((child) => {
+		if (typeof child === "string") return [child];
+		const mapped = mapTree(child, visit, {
+			path: `${at.path} › ${label(child)}`,
+			scope: inner
+		});
+		return mapped ? [mapped] : [];
+	});
+	const props = Object.fromEntries(Object.entries(node.props).flatMap(([name, value]) => {
+		if (!isElements(value)) return [[name, value]];
+		const mapped = (Array.isArray(value) ? value : [value]).flatMap((element) => mapTree(element, visit, {
+			path: `${at.path} ${name}={${label(element)}}`,
+			scope: slot
+		}) ?? []);
+		if (mapped.length === 0) return [];
+		return [[name, Array.isArray(value) ? mapped : mapped[0]]];
+	}));
+	return visit({
+		...node,
+		props,
+		children
+	}, at);
+};
+/** Calls `visit` for every element, parents first. */
+const walkTree = (node, visit, at = {
+	path: label(node),
+	scope: pageScope
+}) => {
+	visit(node, at);
+	const inner = childScope(node, at.scope);
+	const slot = propScope(node, at.scope);
+	for (const child of node.children) if (typeof child !== "string") walkTree(child, visit, {
+		path: `${at.path} › ${label(child)}`,
+		scope: inner
+	});
+	for (const [name, value] of Object.entries(node.props)) {
+		if (!isElements(value)) continue;
+		for (const element of Array.isArray(value) ? value : [value]) walkTree(element, visit, {
+			path: `${at.path} ${name}={${label(element)}}`,
+			scope: slot
+		});
+	}
+};
+//#endregion
+export { childScope, mapTree, pageScope, propScope, walkTree };

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "@protobase/layout",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Composed pages for Protobase, written as JSX that compiles to plain data, with its JSX runtime.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PrototeamHQ/protobase.git",
+    "directory": "packages/layout"
+  },
+  "homepage": "https://docs.protobase.net",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./jsx-runtime": "./dist/jsx-runtime.js",
+    "./jsx-dev-runtime": "./dist/jsx-dev-runtime.js"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "aip-parsers": "^1.0.0",
+    "@protobase/schema": "0.1.1"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.