@contractspec/example.in-app-docs 0.0.0-canary-20260206014742

package/.turbo/turbo-build$colon$bundle.log

@@ -0,0 +1,33 @@
+$ tsdown
+ℹ tsdown v0.20.3 powered by rolldown v1.0.0-rc.3
+ℹ config file: /home/runner/work/contractspec/contractspec/packages/examples/in-app-docs/tsdown.config.js 
+ℹ entry: src/example.ts, src/index.ts, src/docs/in-app-docs.docblock.ts, src/docs/index.ts, src/ui/InAppDocsViewer.tsx, src/ui/index.ts
+ℹ target: esnext
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ Cleaning 20 files
+ℹ dist/docs/in-app-docs.docblock.js        3.01 kB │ gzip: 1.44 kB
+ℹ dist/ui/InAppDocsViewer.js               1.86 kB │ gzip: 0.85 kB
+ℹ dist/example.js                          1.29 kB │ gzip: 0.66 kB
+ℹ dist/index.js                            0.18 kB │ gzip: 0.11 kB
+ℹ dist/ui/index.js                         0.08 kB │ gzip: 0.07 kB
+ℹ dist/docs/index.js                       0.04 kB │ gzip: 0.06 kB
+ℹ dist/docs/in-app-docs.docblock.js.map    3.60 kB │ gzip: 1.66 kB
+ℹ dist/ui/InAppDocsViewer.js.map           2.58 kB │ gzip: 1.19 kB
+ℹ dist/example.js.map                      2.51 kB │ gzip: 1.16 kB
+ℹ dist/docs/in-app-docs.docblock.d.ts.map  0.16 kB │ gzip: 0.14 kB
+ℹ dist/ui/InAppDocsViewer.d.ts.map         0.16 kB │ gzip: 0.14 kB
+ℹ dist/example.d.ts.map                    0.14 kB │ gzip: 0.14 kB
+ℹ dist/docs/in-app-docs.docblock.d.ts      0.56 kB │ gzip: 0.35 kB
+ℹ dist/example.d.ts                        0.46 kB │ gzip: 0.28 kB
+ℹ dist/ui/InAppDocsViewer.d.ts             0.38 kB │ gzip: 0.25 kB
+ℹ dist/index.d.ts                          0.18 kB │ gzip: 0.11 kB
+ℹ dist/ui/index.d.ts                       0.08 kB │ gzip: 0.07 kB
+ℹ dist/docs/index.d.ts                     0.04 kB │ gzip: 0.06 kB
+ℹ 18 files, total: 17.29 kB
+[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
+  - tsdown:external (62%)
+  - rolldown-plugin-dts:generate (37%)
+See https://rolldown.rs/options/checks#plugintimings for more details.
+
+✔ Build complete in 24995ms

package/.turbo/turbo-build.log

@@ -0,0 +1,34 @@
+$ bun build:types && bun build:bundle
+$ tsc --noEmit
+$ tsdown
+ℹ tsdown v0.20.3 powered by rolldown v1.0.0-rc.3
+ℹ config file: /home/runner/work/contractspec/contractspec/packages/examples/in-app-docs/tsdown.config.js 
+ℹ entry: src/example.ts, src/index.ts, src/docs/in-app-docs.docblock.ts, src/docs/index.ts, src/ui/InAppDocsViewer.tsx, src/ui/index.ts
+ℹ target: esnext
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ dist/docs/in-app-docs.docblock.js        3.01 kB │ gzip: 1.44 kB
+ℹ dist/ui/InAppDocsViewer.js               1.86 kB │ gzip: 0.85 kB
+ℹ dist/example.js                          1.29 kB │ gzip: 0.66 kB
+ℹ dist/index.js                            0.18 kB │ gzip: 0.11 kB
+ℹ dist/ui/index.js                         0.08 kB │ gzip: 0.07 kB
+ℹ dist/docs/index.js                       0.04 kB │ gzip: 0.06 kB
+ℹ dist/docs/in-app-docs.docblock.js.map    3.60 kB │ gzip: 1.66 kB
+ℹ dist/ui/InAppDocsViewer.js.map           2.58 kB │ gzip: 1.19 kB
+ℹ dist/example.js.map                      2.51 kB │ gzip: 1.16 kB
+ℹ dist/docs/in-app-docs.docblock.d.ts.map  0.16 kB │ gzip: 0.14 kB
+ℹ dist/ui/InAppDocsViewer.d.ts.map         0.16 kB │ gzip: 0.14 kB
+ℹ dist/example.d.ts.map                    0.14 kB │ gzip: 0.14 kB
+ℹ dist/docs/in-app-docs.docblock.d.ts      0.56 kB │ gzip: 0.35 kB
+ℹ dist/example.d.ts                        0.46 kB │ gzip: 0.28 kB
+ℹ dist/ui/InAppDocsViewer.d.ts             0.38 kB │ gzip: 0.25 kB
+ℹ dist/index.d.ts                          0.18 kB │ gzip: 0.11 kB
+ℹ dist/ui/index.d.ts                       0.08 kB │ gzip: 0.07 kB
+ℹ dist/docs/index.d.ts                     0.04 kB │ gzip: 0.06 kB
+ℹ 18 files, total: 17.29 kB
+[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
+  - tsdown:external (62%)
+  - rolldown-plugin-dts:generate (37%)
+See https://rolldown.rs/options/checks#plugintimings for more details.
+
+✔ Build complete in 24069ms

package/CHANGELOG.md

@@ -0,0 +1,60 @@
+# @contractspec/example.in-app-docs
+
+## 0.0.0-canary-20260206014742
+
+### Minor Changes
+
+- 11a5a05: feat: improve product intent
+
+### Patch Changes
+
+- Updated dependencies [47c48c2]
+- Updated dependencies [a119963]
+- Updated dependencies [11a5a05]
+  - @contractspec/lib.contracts@0.0.0-canary-20260206014742
+  - @contractspec/lib.example-shared-ui@0.0.0-canary-20260206014742
+
+## 1.3.1
+
+### Patch Changes
+
+- fix: improve publish config
+- Updated dependencies
+  - @contractspec/lib.example-shared-ui@1.10.1
+  - @contractspec/lib.contracts@1.56.1
+
+## 1.3.0
+
+### Minor Changes
+
+- fix: release
+
+### Patch Changes
+
+- Updated dependencies
+  - @contractspec/lib.example-shared-ui@1.10.0
+  - @contractspec/lib.contracts@1.56.0
+
+## 1.2.0
+
+### Minor Changes
+
+- fix: unpublished packages
+
+### Patch Changes
+
+- Updated dependencies
+  - @contractspec/lib.example-shared-ui@1.9.0
+  - @contractspec/lib.contracts@1.55.0
+
+## 1.1.0
+
+### Minor Changes
+
+- ec5e95c: chore: upgrade dependencies
+
+### Patch Changes
+
+- Updated dependencies [ec5e95c]
+  - @contractspec/lib.example-shared-ui@1.8.0
+  - @contractspec/lib.contracts@1.54.0

package/dist/docs/in-app-docs.docblock.d.ts

@@ -0,0 +1,15 @@
+import { DocBlock } from "@contractspec/lib.contracts/docs";
+
+//#region src/docs/in-app-docs.docblock.d.ts
+/**
+ * DocBlocks for the in-app documentation example.
+ *
+ * These blocks provide publicly visible guides aimed at non‑technical users.
+ * Each DocBlock is associated with a route under /docs/examples/in-app-docs
+ * and will be rendered in the ContractSpec sandbox or within your app if you
+ * integrate the documentation.
+ */
+declare const inAppDocs: DocBlock[];
+//#endregion
+export { inAppDocs };
+//# sourceMappingURL=in-app-docs.docblock.d.ts.map

package/dist/docs/in-app-docs.docblock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-app-docs.docblock.d.ts","names":[],"sources":["../../src/docs/in-app-docs.docblock.ts"],"mappings":";;;;;AAYA;;;;;;cAAa,SAAA,EAAW,QAAA"}

package/dist/docs/in-app-docs.docblock.js

@@ -0,0 +1,65 @@
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+
+//#region src/docs/in-app-docs.docblock.ts
+/**
+* DocBlocks for the in-app documentation example.
+*
+* These blocks provide publicly visible guides aimed at non‑technical users.
+* Each DocBlock is associated with a route under /docs/examples/in-app-docs
+* and will be rendered in the ContractSpec sandbox or within your app if you
+* integrate the documentation.
+*/
+const inAppDocs = [{
+	id: "docs.examples.in-app-docs",
+	title: "In‑App Docs — Overview",
+	summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
+	kind: "goal",
+	visibility: "public",
+	route: "/docs/examples/in-app-docs",
+	tags: [
+		"documentation",
+		"overview",
+		"guide"
+	],
+	body: `## Purpose
+The in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.
+
+Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.
+
+## What you'll learn
+* How to define DocBlock objects with public visibility and user‑friendly routes.
+* How to structure an overview page for your in‑app guide using Markdown.
+* How to register your DocBlocks so they show up in the sandbox and in your application.
+
+Use this example as a template for documenting your own frontend workflows.`
+}, {
+	id: "docs.examples.in-app-docs.usage",
+	title: "In‑App Docs — Using the Application",
+	summary: "Step‑by‑step guide for end users to navigate and use the example application.",
+	kind: "usage",
+	visibility: "public",
+	route: "/docs/examples/in-app-docs/usage",
+	tags: [
+		"documentation",
+		"usage",
+		"guide"
+	],
+	body: `## Getting Started
+1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
+2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
+3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
+
+## Tips
+* Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
+* Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
+* Need to find something quickly? Use the search bar or filters at the top of lists.
+
+## Next Steps
+Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
+This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
+}];
+registerDocBlocks(inAppDocs);
+
+//#endregion
+export { inAppDocs };
+//# sourceMappingURL=in-app-docs.docblock.js.map

package/dist/docs/in-app-docs.docblock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-app-docs.docblock.js","names":[],"sources":["../../src/docs/in-app-docs.docblock.ts"],"sourcesContent":["import type { DocBlock } from '@contractspec/lib.contracts/docs';\nimport { registerDocBlocks } from '@contractspec/lib.contracts/docs';\n\n/**\n * DocBlocks for the in-app documentation example.\n *\n * These blocks provide publicly visible guides aimed at non‑technical users.\n * Each DocBlock is associated with a route under /docs/examples/in-app-docs\n * and will be rendered in the ContractSpec sandbox or within your app if you\n * integrate the documentation.\n */\n// Export the DocBlocks array so it can be reused by the UI layer.\nexport const inAppDocs: DocBlock[] = [\n  {\n    id: 'docs.examples.in-app-docs',\n    title: 'In‑App Docs — Overview',\n    summary:\n      'Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.',\n    kind: 'goal',\n    visibility: 'public',\n    route: '/docs/examples/in-app-docs',\n    tags: ['documentation', 'overview', 'guide'],\n    body: `## Purpose\nThe in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.\n\nInstead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.\n\n## What you'll learn\n* How to define DocBlock objects with public visibility and user‑friendly routes.\n* How to structure an overview page for your in‑app guide using Markdown.\n* How to register your DocBlocks so they show up in the sandbox and in your application.\n\nUse this example as a template for documenting your own frontend workflows.`,\n  },\n  {\n    id: 'docs.examples.in-app-docs.usage',\n    title: 'In‑App Docs — Using the Application',\n    summary:\n      'Step‑by‑step guide for end users to navigate and use the example application.',\n    kind: 'usage',\n    visibility: 'public',\n    route: '/docs/examples/in-app-docs/usage',\n    tags: ['documentation', 'usage', 'guide'],\n    body: `## Getting Started\n1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.\n2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.\n3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.\n\n## Tips\n* Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.\n* Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.\n* Need to find something quickly? Use the search bar or filters at the top of lists.\n\n## Next Steps\nContinue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.\nThis guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`,\n  },\n];\n\nregisterDocBlocks(inAppDocs);\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,YAAwB,CACnC;CACE,IAAI;CACJ,OAAO;CACP,SACE;CACF,MAAM;CACN,YAAY;CACZ,OAAO;CACP,MAAM;EAAC;EAAiB;EAAY;EAAQ;CAC5C,MAAM;;;;;;;;;;;CAWP,EACD;CACE,IAAI;CACJ,OAAO;CACP,SACE;CACF,MAAM;CACN,YAAY;CACZ,OAAO;CACP,MAAM;EAAC;EAAiB;EAAS;EAAQ;CACzC,MAAM;;;;;;;;;;;;;CAaP,CACF;AAED,kBAAkB,UAAU"}

package/dist/docs/index.d.ts

@@ -0,0 +1 @@
+import "./in-app-docs.docblock.js";

package/dist/docs/index.js

@@ -0,0 +1 @@
+import "./in-app-docs.docblock.js";

package/dist/example.d.ts

@@ -0,0 +1,13 @@
+import * as _contractspec_lib_contracts0 from "@contractspec/lib.contracts";
+
+//#region src/example.d.ts
+/**
+ * Example specification for the in-app documentation example.
+ *
+ * This example demonstrates how to use DocBlock to build public documentation
+ * aimed at end users directly within the application UI.
+ */
+declare const example: _contractspec_lib_contracts0.ExampleSpec;
+//#endregion
+export { example as default };
+//# sourceMappingURL=example.d.ts.map

package/dist/example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.d.ts","names":[],"sources":["../src/example.ts"],"mappings":";;;;;;AAQa;;;cAAP,OAAA,EA0CJ,4BAAA,CA1CW,WAAA"}

package/dist/example.js

@@ -0,0 +1,52 @@
+import { defineExample } from "@contractspec/lib.contracts";
+
+//#region src/example.ts
+/**
+* Example specification for the in-app documentation example.
+*
+* This example demonstrates how to use DocBlock to build public documentation
+* aimed at end users directly within the application UI.
+*/
+const example = defineExample({
+	meta: {
+		key: "in-app-docs",
+		version: "1.0.0",
+		title: "In‑App Documentation Example",
+		description: "Demonstrates using DocBlock to create user‑facing guides that live inside your application's frontend. It shows how to structure a public, non‑technical user guide using ContractSpec.",
+		kind: "ui",
+		visibility: "public",
+		stability: "experimental",
+		owners: ["@docs-team"],
+		tags: [
+			"documentation",
+			"guide",
+			"ui"
+		]
+	},
+	docs: {
+		rootDocId: "docs.examples.in-app-docs",
+		usageDocId: "docs.examples.in-app-docs.usage",
+		goalDocId: "docs.examples.in-app-docs"
+	},
+	entrypoints: {
+		packageName: "@contractspec/example.in-app-docs",
+		docs: "./docs",
+		ui: "./ui"
+	},
+	surfaces: {
+		templates: false,
+		sandbox: {
+			enabled: true,
+			modes: ["markdown"]
+		},
+		studio: {
+			enabled: false,
+			installable: false
+		},
+		mcp: { enabled: false }
+	}
+});
+
+//#endregion
+export { example as default };
+//# sourceMappingURL=example.js.map

package/dist/example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.js","names":[],"sources":["../src/example.ts"],"sourcesContent":["import { defineExample } from '@contractspec/lib.contracts';\n\n/**\n * Example specification for the in-app documentation example.\n *\n * This example demonstrates how to use DocBlock to build public documentation\n * aimed at end users directly within the application UI.\n */\nconst example = defineExample({\n  meta: {\n    key: 'in-app-docs',\n    version: '1.0.0',\n    title: 'In‑App Documentation Example',\n    description:\n      \"Demonstrates using DocBlock to create user‑facing guides that live inside your application's frontend. It shows how to structure a public, non‑technical user guide using ContractSpec.\",\n    kind: 'ui',\n    visibility: 'public',\n    stability: 'experimental',\n    owners: ['@docs-team'],\n    tags: ['documentation', 'guide', 'ui'],\n  },\n  docs: {\n    // Root documentation page; clicking on the example in the docs navigation\n    // will display this page.\n    rootDocId: 'docs.examples.in-app-docs',\n    // Explicitly set usage documentation id for quickstart/guide sections.\n    usageDocId: 'docs.examples.in-app-docs.usage',\n    // Provide a goal document describing the purpose of this example.\n    goalDocId: 'docs.examples.in-app-docs',\n  },\n  entrypoints: {\n    // Package name used for the example's compiled output.\n    packageName: '@contractspec/example.in-app-docs',\n    // Documentation entrypoint folder; compiled docs will be published under this path.\n    docs: './docs',\n    // UI entrypoint exposes the in-app documentation viewer component.\n    ui: './ui',\n  },\n  surfaces: {\n    // This example is not a template for new projects.\n    templates: false,\n    // Enable sandbox with only the markdown mode so users can view the docblocks.\n    sandbox: {\n      enabled: true,\n      modes: ['markdown'],\n    },\n    // Studio/MCP not required for this simple documentation example.\n    studio: { enabled: false, installable: false },\n    mcp: { enabled: false },\n  },\n});\n\nexport default example;\n"],"mappings":";;;;;;;;;AAQA,MAAM,UAAU,cAAc;CAC5B,MAAM;EACJ,KAAK;EACL,SAAS;EACT,OAAO;EACP,aACE;EACF,MAAM;EACN,YAAY;EACZ,WAAW;EACX,QAAQ,CAAC,aAAa;EACtB,MAAM;GAAC;GAAiB;GAAS;GAAK;EACvC;CACD,MAAM;EAGJ,WAAW;EAEX,YAAY;EAEZ,WAAW;EACZ;CACD,aAAa;EAEX,aAAa;EAEb,MAAM;EAEN,IAAI;EACL;CACD,UAAU;EAER,WAAW;EAEX,SAAS;GACP,SAAS;GACT,OAAO,CAAC,WAAW;GACpB;EAED,QAAQ;GAAE,SAAS;GAAO,aAAa;GAAO;EAC9C,KAAK,EAAE,SAAS,OAAO;EACxB;CACF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "./docs/index.js";
+import example from "./example.js";
+import InAppDocsViewer from "./ui/InAppDocsViewer.js";
+import "./ui/index.js";
+export { InAppDocsViewer, example };

package/dist/index.js

@@ -0,0 +1,6 @@
+import example from "./example.js";
+import InAppDocsViewer from "./ui/InAppDocsViewer.js";
+import "./ui/index.js";
+import "./docs/index.js";
+
+export { InAppDocsViewer, example };

package/dist/ui/InAppDocsViewer.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+//#region src/ui/InAppDocsViewer.d.ts
+/**
+ * InAppDocsViewer renders a simple navigation and content area for the example's DocBlocks.
+ * Users can click titles on the left to switch between documentation pages.
+ */
+declare const InAppDocsViewer: React.FC;
+//#endregion
+export { InAppDocsViewer as default };
+//# sourceMappingURL=InAppDocsViewer.d.ts.map

package/dist/ui/InAppDocsViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppDocsViewer.d.ts","names":[],"sources":["../../src/ui/InAppDocsViewer.tsx"],"mappings":";;;;;AAEwC;;cASlC,eAAA,EAAiB,KAAA,CAAM,EAAA"}

package/dist/ui/InAppDocsViewer.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { inAppDocs } from "../docs/in-app-docs.docblock.js";
+import React, { useState } from "react";
+import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ui/InAppDocsViewer.tsx
+/**
+* InAppDocsViewer renders a simple navigation and content area for the example's DocBlocks.
+* Users can click titles on the left to switch between documentation pages.
+*/
+const InAppDocsViewer = () => {
+	const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
+	const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			height: "100%",
+			gap: "1rem"
+		},
+		children: [/* @__PURE__ */ jsx("nav", {
+			style: {
+				width: "220px",
+				borderRight: "1px solid #eee"
+			},
+			children: /* @__PURE__ */ jsx("ul", {
+				style: {
+					listStyle: "none",
+					padding: 0,
+					margin: 0
+				},
+				children: inAppDocs.map((doc) => /* @__PURE__ */ jsx("li", {
+					style: { marginBottom: "0.5rem" },
+					children: /* @__PURE__ */ jsx("button", {
+						onClick: () => setActiveId(doc.id),
+						style: {
+							background: doc.id === activeId ? "#f0f0f0" : "transparent",
+							border: "none",
+							padding: "0.5rem 0.75rem",
+							cursor: "pointer",
+							textAlign: "left",
+							width: "100%"
+						},
+						children: doc.title
+					})
+				}, doc.id))
+			})
+		}), /* @__PURE__ */ jsx("main", {
+			style: {
+				flexGrow: 1,
+				padding: "1rem",
+				overflowY: "auto"
+			},
+			children: activeDoc && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h1", { children: activeDoc.title }), /* @__PURE__ */ jsx(MarkdownRenderer, { content: activeDoc.body })] })
+		})]
+	});
+};
+
+//#endregion
+export { InAppDocsViewer as default };
+//# sourceMappingURL=InAppDocsViewer.js.map

package/dist/ui/InAppDocsViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppDocsViewer.js","names":[],"sources":["../../src/ui/InAppDocsViewer.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\n// import ReactMarkdown from 'react-markdown';\nimport { inAppDocs } from '../docs/in-app-docs.docblock';\nimport { MarkdownRenderer } from '@contractspec/lib.example-shared-ui';\n\n/**\n * InAppDocsViewer renders a simple navigation and content area for the example's DocBlocks.\n * Users can click titles on the left to switch between documentation pages.\n */\nconst InAppDocsViewer: React.FC = () => {\n  const [activeId, setActiveId] = useState<string>(inAppDocs[0]?.id ?? '');\n\n  const activeDoc = inAppDocs.find((doc) => doc.id === activeId);\n\n  return (\n    <div style={{ display: 'flex', height: '100%', gap: '1rem' }}>\n      <nav style={{ width: '220px', borderRight: '1px solid #eee' }}>\n        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>\n          {inAppDocs.map((doc) => (\n            <li key={doc.id} style={{ marginBottom: '0.5rem' }}>\n              <button\n                onClick={() => setActiveId(doc.id)}\n                style={{\n                  background: doc.id === activeId ? '#f0f0f0' : 'transparent',\n                  border: 'none',\n                  padding: '0.5rem 0.75rem',\n                  cursor: 'pointer',\n                  textAlign: 'left',\n                  width: '100%',\n                }}\n              >\n                {doc.title}\n              </button>\n            </li>\n          ))}\n        </ul>\n      </nav>\n      <main style={{ flexGrow: 1, padding: '1rem', overflowY: 'auto' }}>\n        {activeDoc && (\n          <>\n            <h1>{activeDoc.title}</h1>\n            <MarkdownRenderer content={activeDoc.body} />\n          </>\n        )}\n      </main>\n    </div>\n  );\n};\n\nexport default InAppDocsViewer;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,wBAAkC;CACtC,MAAM,CAAC,UAAU,eAAe,SAAiB,UAAU,IAAI,MAAM,GAAG;CAExE,MAAM,YAAY,UAAU,MAAM,QAAQ,IAAI,OAAO,SAAS;AAE9D,QACE,qBAAC;EAAI,OAAO;GAAE,SAAS;GAAQ,QAAQ;GAAQ,KAAK;GAAQ;aAC1D,oBAAC;GAAI,OAAO;IAAE,OAAO;IAAS,aAAa;IAAkB;aAC3D,oBAAC;IAAG,OAAO;KAAE,WAAW;KAAQ,SAAS;KAAG,QAAQ;KAAG;cACpD,UAAU,KAAK,QACd,oBAAC;KAAgB,OAAO,EAAE,cAAc,UAAU;eAChD,oBAAC;MACC,eAAe,YAAY,IAAI,GAAG;MAClC,OAAO;OACL,YAAY,IAAI,OAAO,WAAW,YAAY;OAC9C,QAAQ;OACR,SAAS;OACT,QAAQ;OACR,WAAW;OACX,OAAO;OACR;gBAEA,IAAI;OACE;OAbF,IAAI,GAcR,CACL;KACC;IACD,EACN,oBAAC;GAAK,OAAO;IAAE,UAAU;IAAG,SAAS;IAAQ,WAAW;IAAQ;aAC7D,aACC,4CACE,oBAAC,kBAAI,UAAU,QAAW,EAC1B,oBAAC,oBAAiB,SAAS,UAAU,OAAQ,IAC5C;IAEA;GACH"}

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+import InAppDocsViewer from "./InAppDocsViewer.js";
+export { InAppDocsViewer };

package/dist/ui/index.js

@@ -0,0 +1,3 @@
+import InAppDocsViewer from "./InAppDocsViewer.js";
+
+export { InAppDocsViewer };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@contractspec/example.in-app-docs",
+  "version": "0.0.0-canary-20260206014742",
+  "description": "Example showing how to use DocBlock for in-app documentation for non-technical users",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./docs": "./dist/docs/index.js",
+    "./docs/in-app-docs.docblock": "./dist/docs/in-app-docs.docblock.js",
+    "./example": "./dist/example.js",
+    "./ui": "./dist/ui/index.js",
+    "./ui/InAppDocsViewer": "./dist/ui/InAppDocsViewer.js",
+    "./*": "./*"
+  },
+  "scripts": {
+    "publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
+    "publish:pkg:canary": "bun publish:pkg --tag canary",
+    "build": "bun build:types && bun build:bundle",
+    "build:bundle": "tsdown",
+    "build:types": "tsc --noEmit",
+    "dev": "bun build:bundle --watch",
+    "clean": "rimraf dist .turbo",
+    "lint": "bun lint:fix",
+    "lint:fix": "eslint src --fix",
+    "lint:check": "eslint src",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@contractspec/lib.contracts": "0.0.0-canary-20260206014742",
+    "@contractspec/lib.example-shared-ui": "0.0.0-canary-20260206014742",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@contractspec/tool.tsdown": "0.0.0-canary-20260206014742",
+    "@contractspec/tool.typescript": "0.0.0-canary-20260206014742",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.2"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./docs": "./dist/docs/index.js",
+      "./docs/in-app-docs.docblock": "./dist/docs/in-app-docs.docblock.js",
+      "./example": "./dist/example.js",
+      "./ui": "./dist/ui/index.js",
+      "./*": "./*"
+    },
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lssm-tech/contractspec.git",
+    "directory": "packages/examples/in-app-docs"
+  },
+  "homepage": "https://contractspec.io"
+}

package/src/docs/in-app-docs.docblock.ts

@@ -0,0 +1,60 @@
+import type { DocBlock } from '@contractspec/lib.contracts/docs';
+import { registerDocBlocks } from '@contractspec/lib.contracts/docs';
+
+/**
+ * DocBlocks for the in-app documentation example.
+ *
+ * These blocks provide publicly visible guides aimed at non‑technical users.
+ * Each DocBlock is associated with a route under /docs/examples/in-app-docs
+ * and will be rendered in the ContractSpec sandbox or within your app if you
+ * integrate the documentation.
+ */
+// Export the DocBlocks array so it can be reused by the UI layer.
+export const inAppDocs: DocBlock[] = [
+  {
+    id: 'docs.examples.in-app-docs',
+    title: 'In‑App Docs — Overview',
+    summary:
+      'Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.',
+    kind: 'goal',
+    visibility: 'public',
+    route: '/docs/examples/in-app-docs',
+    tags: ['documentation', 'overview', 'guide'],
+    body: `## Purpose
+The in‑app documentation example shows how you can use ContractSpec's DocBlock system to build user‑facing guides directly inside an application's UI.
+
+Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non‑technical language. When embedded in your app, these blocks present a self‑contained help centre for users.
+
+## What you'll learn
+* How to define DocBlock objects with public visibility and user‑friendly routes.
+* How to structure an overview page for your in‑app guide using Markdown.
+* How to register your DocBlocks so they show up in the sandbox and in your application.
+
+Use this example as a template for documenting your own frontend workflows.`,
+  },
+  {
+    id: 'docs.examples.in-app-docs.usage',
+    title: 'In‑App Docs — Using the Application',
+    summary:
+      'Step‑by‑step guide for end users to navigate and use the example application.',
+    kind: 'usage',
+    visibility: 'public',
+    route: '/docs/examples/in-app-docs/usage',
+    tags: ['documentation', 'usage', 'guide'],
+    body: `## Getting Started
+1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
+2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
+3. **Add items**. On the Dashboard, click **Add Item** or a plus icon to create a new record. Fill in the form fields and press **Save**.
+
+## Tips
+* Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
+* Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
+* Need to find something quickly? Use the search bar or filters at the top of lists.
+
+## Next Steps
+Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
+This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`,
+  },
+];
+
+registerDocBlocks(inAppDocs);

package/src/docs/index.ts

@@ -0,0 +1,2 @@
+// Register all DocBlocks for the in-app documentation example.
+import './in-app-docs.docblock';

package/src/example.ts

@@ -0,0 +1,53 @@
+import { defineExample } from '@contractspec/lib.contracts';
+
+/**
+ * Example specification for the in-app documentation example.
+ *
+ * This example demonstrates how to use DocBlock to build public documentation
+ * aimed at end users directly within the application UI.
+ */
+const example = defineExample({
+  meta: {
+    key: 'in-app-docs',
+    version: '1.0.0',
+    title: 'In‑App Documentation Example',
+    description:
+      "Demonstrates using DocBlock to create user‑facing guides that live inside your application's frontend. It shows how to structure a public, non‑technical user guide using ContractSpec.",
+    kind: 'ui',
+    visibility: 'public',
+    stability: 'experimental',
+    owners: ['@docs-team'],
+    tags: ['documentation', 'guide', 'ui'],
+  },
+  docs: {
+    // Root documentation page; clicking on the example in the docs navigation
+    // will display this page.
+    rootDocId: 'docs.examples.in-app-docs',
+    // Explicitly set usage documentation id for quickstart/guide sections.
+    usageDocId: 'docs.examples.in-app-docs.usage',
+    // Provide a goal document describing the purpose of this example.
+    goalDocId: 'docs.examples.in-app-docs',
+  },
+  entrypoints: {
+    // Package name used for the example's compiled output.
+    packageName: '@contractspec/example.in-app-docs',
+    // Documentation entrypoint folder; compiled docs will be published under this path.
+    docs: './docs',
+    // UI entrypoint exposes the in-app documentation viewer component.
+    ui: './ui',
+  },
+  surfaces: {
+    // This example is not a template for new projects.
+    templates: false,
+    // Enable sandbox with only the markdown mode so users can view the docblocks.
+    sandbox: {
+      enabled: true,
+      modes: ['markdown'],
+    },
+    // Studio/MCP not required for this simple documentation example.
+    studio: { enabled: false, installable: false },
+    mcp: { enabled: false },
+  },
+});
+
+export default example;

package/src/index.ts

@@ -0,0 +1,11 @@
+// In-App Documentation Example
+// Exports the example metadata and registers documentation.
+
+// Export example spec
+export { default as example } from './example';
+
+// Export UI components
+export * from './ui';
+
+// Import docs to register doc blocks on load
+import './docs';