@contractspec/example.in-app-docs 1.3.1 → 1.5.0

package/.turbo/turbo-build.log

@@ -1,29 +1,35 @@
-$ bun build:types && bun build:bundle
-$ tsc --noEmit
-$ tsdown
-ℹ tsdown v0.19.0 powered by rolldown v1.0.0-beta.59
-ℹ 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.93 kB │ gzip: 0.87 kB
-ℹ dist/example.js                          1.33 kB │ gzip: 0.67 kB
-ℹ dist/index.js                            0.24 kB │ gzip: 0.12 kB
-ℹ dist/ui/index.js                         0.12 kB │ gzip: 0.08 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.59 kB │ gzip: 1.20 kB
-ℹ dist/example.js.map                      2.52 kB │ gzip: 1.16 kB
-ℹ dist/docs/in-app-docs.docblock.d.ts.map  0.17 kB │ gzip: 0.14 kB
-ℹ dist/ui/InAppDocsViewer.d.ts.map         0.17 kB │ gzip: 0.15 kB
-ℹ dist/example.d.ts.map                    0.15 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.56 kB
-✔ Build complete in 23955ms
+$ contractspec-bun-build prebuild
+$ bun run prebuild && bun run build:bundle && bun run build:types
+$ contractspec-bun-build prebuild
+$ contractspec-bun-build transpile
+[contractspec-bun-build] transpile target=bun root=src entries=6
+Bundled 6 modules in 14ms
+
+  docs/in-app-docs.docblock.js  2.72 KB  (entry point)
+  ./index.js                    5.97 KB  (entry point)
+  docs/index.js                 2.70 KB  (entry point)
+  ./example.js                  1.11 KB  (entry point)
+  ui/index.js                   4.87 KB  (entry point)
+  ui/InAppDocsViewer.js         4.86 KB  (entry point)
+
+[contractspec-bun-build] transpile target=node root=src entries=6
+Bundled 6 modules in 11ms
+
+  docs/in-app-docs.docblock.js  2.66 KB  (entry point)
+  ./index.js                    5.90 KB  (entry point)
+  docs/index.js                 2.64 KB  (entry point)
+  ./example.js                  1.1 KB   (entry point)
+  ui/index.js                   4.81 KB  (entry point)
+  ui/InAppDocsViewer.js         4.80 KB  (entry point)
+
+[contractspec-bun-build] transpile target=browser root=src entries=6
+Bundled 6 modules in 34ms
+
+  docs/in-app-docs.docblock.js  2.66 KB  (entry point)
+  ./index.js                    5.90 KB  (entry point)
+  docs/index.js                 2.64 KB  (entry point)
+  ./example.js                  1.1 KB   (entry point)
+  ui/index.js                   4.81 KB  (entry point)
+  ui/InAppDocsViewer.js         4.80 KB  (entry point)
+
+$ contractspec-bun-build types

package/.turbo/turbo-prebuild.log

@@ -0,0 +1 @@
+$ contractspec-bun-build prebuild

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @contractspec/example.in-app-docs
 
+## 1.5.0
+
+### Minor Changes
+
+- d1f0fd0: chore: Migrate non-app package builds from tsdown to shared Bun tooling, add `@contractspec/tool.bun`, and standardize `prebuild`/`build`/`typecheck` with platform-aware exports and `tsc` declaration emission into `dist`.
+
+### Patch Changes
+
+- Updated dependencies [d1f0fd0]
+- Updated dependencies [4355a9e]
+  - @contractspec/lib.example-shared-ui@1.12.0
+  - @contractspec/lib.contracts@1.58.0
+
+## 1.4.0
+
+### Minor Changes
+
+- 11a5a05: feat: improve product intent
+
+### Patch Changes
+
+- Updated dependencies [8ecf3c1]
+- Updated dependencies [47c48c2]
+- Updated dependencies [a119963]
+- Updated dependencies [4651e06]
+- Updated dependencies [ad9d10a]
+- Updated dependencies [11a5a05]
+  - @contractspec/lib.contracts@1.57.0
+  - @contractspec/lib.example-shared-ui@1.11.0
+
 ## 1.3.1
 
 ### Patch Changes

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

@@ -0,0 +1,50 @@
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var 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);
+export {
+  inAppDocs
+};

package/dist/browser/docs/index.js

@@ -0,0 +1,47 @@
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var 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);

package/dist/browser/example.js

@@ -0,0 +1,38 @@
+// src/example.ts
+import { defineExample } from "@contractspec/lib.contracts";
+var 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 }
+  }
+});
+var example_default = example;
+export {
+  example_default as default
+};

package/dist/browser/index.js

@@ -0,0 +1,136 @@
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var 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);
+// src/example.ts
+import { defineExample } from "@contractspec/lib.contracts";
+var 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 }
+  }
+});
+var example_default = example;
+
+// src/ui/InAppDocsViewer.tsx
+import { useState } from "react";
+import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var InAppDocsViewer = () => {
+  const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
+  const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: { display: "flex", height: "100%", gap: "1rem" },
+    children: [
+      /* @__PURE__ */ jsxDEV("nav", {
+        style: { width: "220px", borderRight: "1px solid #eee" },
+        children: /* @__PURE__ */ jsxDEV("ul", {
+          style: { listStyle: "none", padding: 0, margin: 0 },
+          children: inAppDocs.map((doc) => /* @__PURE__ */ jsxDEV("li", {
+            style: { marginBottom: "0.5rem" },
+            children: /* @__PURE__ */ jsxDEV("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
+            }, undefined, false, undefined, this)
+          }, doc.id, false, undefined, this))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("main", {
+        style: { flexGrow: 1, padding: "1rem", overflowY: "auto" },
+        children: activeDoc && /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV("h1", {
+              children: activeDoc.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(MarkdownRenderer, {
+              content: activeDoc.body
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var InAppDocsViewer_default = InAppDocsViewer;
+export {
+  example_default as example,
+  InAppDocsViewer_default as InAppDocsViewer
+};

package/dist/browser/ui/InAppDocsViewer.js

@@ -0,0 +1,100 @@
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var 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);
+
+// src/ui/InAppDocsViewer.tsx
+import { useState } from "react";
+import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var InAppDocsViewer = () => {
+  const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
+  const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: { display: "flex", height: "100%", gap: "1rem" },
+    children: [
+      /* @__PURE__ */ jsxDEV("nav", {
+        style: { width: "220px", borderRight: "1px solid #eee" },
+        children: /* @__PURE__ */ jsxDEV("ul", {
+          style: { listStyle: "none", padding: 0, margin: 0 },
+          children: inAppDocs.map((doc) => /* @__PURE__ */ jsxDEV("li", {
+            style: { marginBottom: "0.5rem" },
+            children: /* @__PURE__ */ jsxDEV("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
+            }, undefined, false, undefined, this)
+          }, doc.id, false, undefined, this))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("main", {
+        style: { flexGrow: 1, padding: "1rem", overflowY: "auto" },
+        children: activeDoc && /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV("h1", {
+              children: activeDoc.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(MarkdownRenderer, {
+              content: activeDoc.body
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var InAppDocsViewer_default = InAppDocsViewer;
+export {
+  InAppDocsViewer_default as default
+};

package/dist/browser/ui/index.js

@@ -0,0 +1,100 @@
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var 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);
+
+// src/ui/InAppDocsViewer.tsx
+import { useState } from "react";
+import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+var InAppDocsViewer = () => {
+  const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
+  const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: { display: "flex", height: "100%", gap: "1rem" },
+    children: [
+      /* @__PURE__ */ jsxDEV("nav", {
+        style: { width: "220px", borderRight: "1px solid #eee" },
+        children: /* @__PURE__ */ jsxDEV("ul", {
+          style: { listStyle: "none", padding: 0, margin: 0 },
+          children: inAppDocs.map((doc) => /* @__PURE__ */ jsxDEV("li", {
+            style: { marginBottom: "0.5rem" },
+            children: /* @__PURE__ */ jsxDEV("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
+            }, undefined, false, undefined, this)
+          }, doc.id, false, undefined, this))
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("main", {
+        style: { flexGrow: 1, padding: "1rem", overflowY: "auto" },
+        children: activeDoc && /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV("h1", {
+              children: activeDoc.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(MarkdownRenderer, {
+              content: activeDoc.body
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var InAppDocsViewer_default = InAppDocsViewer;
+export {
+  InAppDocsViewer_default as InAppDocsViewer
+};

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

@@ -1,7 +1,4 @@
-import { DocBlock } from "@contractspec/lib.contracts/docs";
-
-//#region src/docs/in-app-docs.docblock.d.ts
-
+import type { DocBlock } from '@contractspec/lib.contracts/docs';
 /**
  * DocBlocks for the in-app documentation example.
  *
@@ -10,7 +7,5 @@ import { DocBlock } from "@contractspec/lib.contracts/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 };
+export declare const inAppDocs: DocBlock[];
 //# sourceMappingURL=in-app-docs.docblock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"in-app-docs.docblock.d.ts","names":[],"sources":["../../src/docs/in-app-docs.docblock.ts"],"sourcesContent":[],"mappings":";;;;;;AAYA;;;;;;cAAa,WAAW"}
+{"version":3,"file":"in-app-docs.docblock.d.ts","sourceRoot":"","sources":["../../src/docs/in-app-docs.docblock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGjE;;;;;;;GAOG;AAEH,eAAO,MAAM,SAAS,EAAE,QAAQ,EA6C/B,CAAC"}