@asheeui/puck 0.0.0-stage → 2.3.0

package/dist/web/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/web/config.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,WAAW,CAAC;AAGnB,OAAO,EACL,KAAK,iBAAiB,EAEtB,KAAK,iBAAiB,EAEvB,MAAM,iBAAiB,CAAC;AAYzB;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,oDAAoD;IACpD,OAAO,EAAE,iBAAiB,CAAC;IAE3B,+DAA+D;IAC/D,OAAO,EAAE,iBAAiB,CAAC;IAE3B,yBAAyB;IACzB,OAAO,EAAE,iBAAiB,CAAC;IAE3B,gCAAgC;IAChC,IAAI,EAAE,cAAc,CAAC;IAErB,oCAAoC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IAEzB,4BAA4B;IAC5B,MAAM,EAAE,gBAAgB,CAAC;IAEzB,uCAAuC;IACvC,IAAI,EAAE,cAAc,CAAC;IAErB,4CAA4C;IAC5C,GAAG,EAAE,aAAa,CAAC;IAEnB,+CAA+C;IAC/C,WAAW,EAAE,qBAAqB,CAAC;IAEnC,4CAA4C;IAC5C,YAAY,EAAE,sBAAsB,CAAC;IAErC,mCAAmC;IACnC,WAAW,EAAE,qBAAqB,CAAC;IAEnC,mCAAmC;IACnC,UAAU,EAAE,oBAAoB,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,SAAS,GACT,UAAU,GACV,KAAK,GACL,SAAS,GACT,cAAc,GACd,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC,IAAI,EAAE,kBAAkB,CAAC;IACzB,UAAU,EAAE,iBAAiB,EAAE,CAAC;CACjC,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,eAqB7B,CAAC"}

package/dist/web/config.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PUCK_CATEGORIES } from "../shared";
+import { headingBlock, textBlock } from "./blocks/content";
+import { columnsBlock, sectionBlock, } from "./blocks/layout";
+import { footerBlock, navbarBlock } from "./blocks/navigation";
+import { ctaBlock, featureGridBlock, heroBlock, pricingCardBlock, testimonialsBlock, } from "./blocks/sections";
+import { emptyStateBlock } from "./blocks/utility";
+import { PuckRoot } from "./root";
+/**
+ * The AsheeUI blocks, filed under the categories the builder shows.
+ */
+export const asheePuckConfig = {
+    components: {
+        Section: sectionBlock,
+        Columns: columnsBlock,
+        Heading: headingBlock,
+        Text: textBlock,
+        Navbar: navbarBlock,
+        Footer: footerBlock,
+        Hero: heroBlock,
+        CTA: ctaBlock,
+        FeatureGrid: featureGridBlock,
+        Testimonials: testimonialsBlock,
+        PricingCard: pricingCardBlock,
+        EmptyState: emptyStateBlock,
+    },
+    categories: PUCK_CATEGORIES,
+    root: {
+        fields: {},
+        defaultProps: {},
+        render: ({ children }) => _jsx(PuckRoot, { children: children }),
+    },
+};
+//# sourceMappingURL=config.js.map

package/dist/web/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/web/config.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAiCb,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAEL,YAAY,EAEZ,YAAY,GACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAkElC;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAoB;IAC9C,UAAU,EAAE;QACV,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,SAAS;QACf,GAAG,EAAE,QAAQ;QACb,WAAW,EAAE,gBAAgB;QAC7B,YAAY,EAAE,iBAAiB;QAC/B,WAAW,EAAE,gBAAgB;QAC7B,UAAU,EAAE,eAAe;KACgB;IAC7C,UAAU,EAAE,eAA2D;IACvE,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAE,QAAQ,GAAY;KAC1D;CACF,CAAC"}

package/dist/web/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The web half of the Puck integration.
+ *
+ * It is the shared layer plus this platform's drawings: the block specs, the field
+ * builders and the adapters are re-exported unchanged, and the block registrations and
+ * the page renderer are the web's own. Nothing here imports React Native, and nothing
+ * here imports the native half of the package, so a browser bundle reaches only the DOM
+ * renderer.
+ */
+export * from "../shared";
+export * from "./blocks/content";
+export * from "./blocks/layout";
+export * from "./blocks/navigation";
+export * from "./blocks/sections";
+export * from "./blocks/utility";
+export * from "./config";
+export * from "./page";
+export * from "./root";
+//# sourceMappingURL=index.d.ts.map

package/dist/web/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/web/index.js

@@ -0,0 +1,20 @@
+"use client";
+/**
+ * The web half of the Puck integration.
+ *
+ * It is the shared layer plus this platform's drawings: the block specs, the field
+ * builders and the adapters are re-exported unchanged, and the block registrations and
+ * the page renderer are the web's own. Nothing here imports React Native, and nothing
+ * here imports the native half of the package, so a browser bundle reaches only the DOM
+ * renderer.
+ */
+export * from "../shared";
+export * from "./blocks/content";
+export * from "./blocks/layout";
+export * from "./blocks/navigation";
+export * from "./blocks/sections";
+export * from "./blocks/utility";
+export * from "./config";
+export * from "./page";
+export * from "./root";
+//# sourceMappingURL=index.js.map

package/dist/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/web/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb;;;;;;;;GAQG;AAEH,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/web/page.d.ts

@@ -0,0 +1,24 @@
+import type { AsheePuckData } from "../shared";
+import { type AsheePuckConfig } from "./config";
+/**
+ * Props of {@link PuckPage}.
+ */
+export interface PuckPageProps {
+    /** The page the builder published. */
+    data: AsheePuckData;
+    /** The block registry to render with. Defaults to the AsheeUI configuration. */
+    config?: AsheePuckConfig;
+}
+/**
+ * Render a stored page.
+ *
+ * @param props - The stored page, and optionally the registry to render it with.
+ * @returns The rendered page.
+ *
+ * @example
+ * ```tsx
+ * <PuckPage data={page} />
+ * ```
+ */
+export declare function PuckPage({ data, config }: PuckPageProps): import("react").JSX.Element;
+//# sourceMappingURL=page.d.ts.map

package/dist/web/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../src/web/page.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,UAAU,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,IAAI,EAAE,aAAa,CAAC;IAEpB,gFAAgF;IAChF,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAwB,EAAE,EAAE,aAAa,+BAEzE"}

package/dist/web/page.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Rendering a stored page, on the web.
+ *
+ * A published page renders through the editor's own renderer, which needs no editor:
+ * the same block registry the builder reads is what a live site renders, so the two
+ * cannot drift. The native entry offers a component of the same name, so an application
+ * writes one import and one call and gets each platform's own renderer.
+ */
+import { Render } from "@puckeditor/core";
+import { asheePuckConfig } from "./config";
+/**
+ * Render a stored page.
+ *
+ * @param props - The stored page, and optionally the registry to render it with.
+ * @returns The rendered page.
+ *
+ * @example
+ * ```tsx
+ * <PuckPage data={page} />
+ * ```
+ */
+export function PuckPage({ data, config = asheePuckConfig }) {
+    return _jsx(Render, { config: config, data: data });
+}
+//# sourceMappingURL=page.js.map

package/dist/web/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/web/page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;GAOG;AAEH,OAAO,EAAa,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAwB,eAAe,EAAE,MAAM,UAAU,CAAC;AAajE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,eAAe,EAAiB;IACxE,OAAO,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAuB,GAAI,CAAC;AACnE,CAAC"}

package/dist/web/root.d.ts

@@ -0,0 +1,9 @@
+import type { AsheePuckRootProps } from "../shared";
+/**
+ * The published page's root.
+ *
+ * @param props - The page the builder composed.
+ * @returns The page, inside the framework's provider when the application has none.
+ */
+export declare function PuckRoot({ children }: AsheePuckRootProps): import("react").JSX.Element;
+//# sourceMappingURL=root.d.ts.map

package/dist/web/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/web/root.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAEpD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAUxD"}

package/dist/web/root.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The page shell a published page renders into, on the web.
+ *
+ * A block resolves its theme through the framework provider, so the shell supplies one
+ * when the consumer has not. An existing provider is respected rather than nested, so a
+ * consumer's own configuration — a default theme, a component override — keeps applying
+ * to a built page. That is the whole reason this reads the context instead of always
+ * rendering a provider: a second provider would replace the resolved configuration with
+ * the framework's own defaults.
+ */
+import { AsheeConfigContext, AsheeUIProvider } from "@asheeui/web";
+import { useContext } from "react";
+/**
+ * The published page's root.
+ *
+ * @param props - The page the builder composed.
+ * @returns The page, inside the framework's provider when the application has none.
+ */
+export function PuckRoot({ children }) {
+    const existingConfig = useContext(AsheeConfigContext);
+    const page = (_jsx("div", { className: "flex min-h-dvh w-full flex-col bg-background text-foreground", children: children }));
+    return existingConfig ? page : _jsx(AsheeUIProvider, { children: page });
+}
+//# sourceMappingURL=root.js.map

package/dist/web/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","sourceRoot":"","sources":["../../src/web/root.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;GASG;AAEH,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAsB;IACvD,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEtD,MAAM,IAAI,GAAG,CACX,cAAK,SAAS,EAAC,8DAA8D,YAC1E,QAAQ,GACL,CACP,CAAC;IAEF,OAAO,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,eAAe,cAAE,IAAI,GAAmB,CAAC;AAC3E,CAAC"}

package/package.json

@@ -1,6 +1,122 @@
 {
   "name": "@asheeui/puck",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.0",
+  "description": "The AsheeUI Puck integration: one block registry behind one import, routed by the bundler so an editor composes a page on the web and a device renders the stored page with the native components.",
+  "author": "Ashee Softworks <asheesoftworks@gmail.com>",
+  "homepage": "https://asheeui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AsheeSoftworks/AsheeUI.git",
+    "directory": "packages/puck"
+  },
+  "bugs": {
+    "url": "https://github.com/AsheeSoftworks/AsheeUI/issues"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "expo",
+    "puck",
+    "page-builder",
+    "visual-editor",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "nativewind",
+    "typescript"
+  ],
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.native.ts",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/index.native.d.ts",
+        "default": "./dist/index.native.js"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "src/index.ts",
+    "src/index.native.ts",
+    "src/shared",
+    "src/web",
+    "src/native",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "dependencies": {
+    "@asheeui/native": "^2.3.0",
+    "@asheeui/core": "^2.2.0",
+    "@asheeui/web": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@puckeditor/core": "^0.23.0",
+    "nativewind": ">=4.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.78.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@puckeditor/core": {
+      "optional": true
+    },
+    "nativewind": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/runtime": "^7.29.7",
+    "@puckeditor/core": "^0.23.0",
+    "@react-native/babel-preset": "^0.86.3",
+    "@react-native/jest-preset": "^0.86.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/react-native": "^14.0.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^26.5.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jsdom": "^30.0.1",
+    "nativewind": "^4.2.7",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-native": "0.86.3",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run && jest",
+    "test:web": "vitest run",
+    "test:native": "jest",
+    "test:watch": "vitest"
+  }
 }

package/src/index.native.ts

@@ -0,0 +1,22 @@
+/**
+ * The AsheeUI Puck integration, native branch.
+ *
+ * Metro reaches this file for a React Native platform — through the manifest's
+ * `react-native` field, through the `react-native` condition of the exports map, or by
+ * resolving the platform extension (`.native`) beside `index.ts` — so an application's
+ * import specifiers do not change between the web and a device.
+ *
+ * It exports the native registry and the native page renderer alongside the same shared
+ * specs the web branch exports, because the point of the package is that the import a
+ * developer writes is the same one on both platforms. It imports no DOM renderer and
+ * nothing from the editor: resolving this file must not pull Tailwind, React DOM or
+ * `@puckeditor/core` into a native bundle.
+ *
+ * The file is published as source rather than only as a build, and so are the modules it
+ * imports, because the manifest's `react-native` field cannot be redirected at publish
+ * time the way `main` and `types` are: whatever that field names has to exist in the
+ * tarball, and a resolver that reads the field instead of the exports map has to be able
+ * to compile it and everything it reaches.
+ */
+
+export * from "./native";

package/src/index.ts

@@ -0,0 +1,24 @@
+"use client";
+
+/**
+ * The AsheeUI Puck integration.
+ *
+ * One import, two renderers. An application installs `@asheeui/puck` and writes the same
+ * specifiers whether it runs in a browser or on a device; the resolver decides which half
+ * answers:
+ *
+ * - On the web, it reads `main` (and the `import` condition) and reaches this file,
+ *   which is the editor's block registry, the editor's page renderer and the shared
+ *   specs behind them.
+ * - Under Expo and Metro, it reads the manifest's `react-native` field, then the
+ *   `react-native` condition of the exports map, and finally Metro's platform extension
+ *   (`.native.ts` beside `.ts`), and reaches `./index.native`, which renders a stored
+ *   page with the native components.
+ *
+ * The routing is a property of the file name and the manifest rather than of a runtime
+ * check, which is what keeps a browser bundle free of React Native and a device bundle
+ * free of the DOM edition of the framework. This module is the web branch, and it
+ * imports no native renderer.
+ */
+
+export * from "./web";

package/src/native/blocks/content.tsx

@@ -0,0 +1,55 @@
+/**
+ * The platform content blocks.
+ *
+ * Each block is the framework component plus the shared spec: the label, the fields and
+ * the defaults come from `src/shared`, and only the drawing is written here. What the
+ * platform draws differently is stated in the block: a paragraph's alignment is a
+ * property of its `Text` rather than a class on a paragraph element, so the shared
+ * alignment vocabulary is what reaches the component.
+ */
+
+import { SECTION_BLOCK_TEXT_ALIGN } from "@asheeui/core";
+import { Container, Section, Text } from "@asheeui/native";
+import { SectionHeading } from "@asheeui/native/section-kit";
+import type {
+  AsheeBlock,
+  HeadingBlockProps,
+  TextBlockProps,
+} from "../../shared";
+import { HEADING_SPEC, TEXT_SPEC } from "../../shared";
+
+/**
+ * A section heading with an optional eyebrow and description.
+ */
+export const headingBlock: AsheeBlock<HeadingBlockProps> = {
+  ...HEADING_SPEC,
+  render: ({ eyebrow, title, description, align }) => (
+    <Section spacing="md">
+      <Container>
+        <SectionHeading
+          eyebrow={eyebrow || undefined}
+          title={title || undefined}
+          description={description || undefined}
+          align={align ?? "start"}
+          size="lg"
+        />
+      </Container>
+    </Section>
+  ),
+};
+
+/**
+ * A paragraph of body text.
+ */
+export const textBlock: AsheeBlock<TextBlockProps> = {
+  ...TEXT_SPEC,
+  render: ({ text, align }) => (
+    <Section spacing="sm">
+      <Container>
+        <Text role="body-lg" align={SECTION_BLOCK_TEXT_ALIGN[align ?? "start"]}>
+          {text}
+        </Text>
+      </Container>
+    </Section>
+  ),
+};

package/src/native/blocks/layout.tsx

@@ -0,0 +1,72 @@
+/**
+ * The platform layout blocks.
+ *
+ * A band and a two-column arrangement. Both are the only blocks whose props hold a drop
+ * zone, and on the platform a drop zone is a rendered node rather than a component to
+ * place: the page renderer resolves a stored page's children before it calls a block, so
+ * the block receives what to draw. That is why these two props are declared here while
+ * every other block's come from the shared spec.
+ *
+ * One difference between the platforms is deliberate and stated rather than hidden. A
+ * two-column block offers a ratio on the web, where a stylesheet expresses one; the
+ * platform's grid resolves its own window and offers whole column counts, so the ratio
+ * resolves to the framework's two columns once there is room for them and the block
+ * draws the same arrangement at every width below that.
+ */
+
+import { Container, Grid, Section } from "@asheeui/native";
+import type { ReactNode } from "react";
+import type {
+  AsheeBlock,
+  ColumnsBandProps,
+  SectionBandProps,
+} from "../../shared";
+import { COLUMNS_SPEC, SECTION_SPEC } from "../../shared";
+
+/**
+ * The props of the band block.
+ */
+export type SectionBlockProps = SectionBandProps & {
+  /** Content dropped into the band, already rendered. */
+  content?: ReactNode;
+};
+
+/**
+ * A band with its own vertical rhythm and background.
+ */
+export const sectionBlock: AsheeBlock<SectionBlockProps> = {
+  ...SECTION_SPEC,
+  render: ({ spacing, background, content }) => (
+    <Section spacing={spacing ?? "lg"} background={background ?? "none"}>
+      <Container>{content}</Container>
+    </Section>
+  ),
+};
+
+/**
+ * The props of the two-column block.
+ */
+export type ColumnsBlockProps = ColumnsBandProps & {
+  /** Content of the first column, already rendered. */
+  start?: ReactNode;
+
+  /** Content of the second column, already rendered. */
+  end?: ReactNode;
+};
+
+/**
+ * Two columns that stack on a narrow screen.
+ */
+export const columnsBlock: AsheeBlock<ColumnsBlockProps> = {
+  ...COLUMNS_SPEC,
+  render: ({ spacing, start, end }) => (
+    <Section spacing={spacing ?? "lg"}>
+      <Container>
+        <Grid columns={1} columnsLg={2} gap="lg">
+          {start}
+          {end}
+        </Grid>
+      </Container>
+    </Section>
+  ),
+};

package/src/native/blocks/navigation.tsx

@@ -0,0 +1,71 @@
+/**
+ * The platform navigation blocks.
+ *
+ * A bar and a footer, with the navigation as data: link lists a non-developer can edit
+ * and no application state. The bar's action region is the framework's own action group,
+ * so a configured action renders exactly as a hand-written button does and follows the
+ * destination through the platform's own URL handler. The fields and the defaults come
+ * from `src/shared`.
+ */
+
+import { Footer, Navbar } from "@asheeui/native";
+import { ActionGroup } from "@asheeui/native/section-kit";
+import type {
+  AsheeBlock,
+  FooterBlockProps,
+  NavbarBlockProps,
+} from "../../shared";
+import { FOOTER_SPEC, NAVBAR_SPEC, toAction } from "../../shared";
+
+/**
+ * The navigation bar of a page.
+ */
+export const navbarBlock: AsheeBlock<NavbarBlockProps> = {
+  ...NAVBAR_SPEC,
+  render: ({
+    brand,
+    brandHref,
+    align,
+    links,
+    primaryAction,
+    secondaryAction,
+  }) => (
+    <Navbar
+      brand={brand || undefined}
+      brandHref={brandHref || undefined}
+      align={align ?? "center"}
+      links={(links ?? []).map((link) => ({
+        label: link.label ?? "",
+        href: link.href,
+      }))}
+      actions={
+        <ActionGroup
+          primaryAction={toAction(primaryAction)}
+          secondaryAction={toAction(secondaryAction)}
+        />
+      }
+    />
+  ),
+};
+
+/**
+ * The footer of a page.
+ */
+export const footerBlock: AsheeBlock<FooterBlockProps> = {
+  ...FOOTER_SPEC,
+  render: ({ brand, description, groups, copyright }) => (
+    <Footer
+      brand={brand || undefined}
+      description={description || undefined}
+      copyright={copyright || undefined}
+      groups={(groups ?? []).map((group, index) => ({
+        id: index,
+        title: group.title ?? "Links",
+        links: (group.links ?? []).map((item) => ({
+          label: item.label ?? "",
+          href: item.href,
+        })),
+      }))}
+    />
+  ),
+};