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

package/dist/node/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/node/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/node/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/ui/InAppDocsViewer.d.ts

@@ -1,11 +1,8 @@
-import React from "react";
-
-//#region src/ui/InAppDocsViewer.d.ts
+import React from 'react';
 /**
  * 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 };
+export default InAppDocsViewer;
 //# sourceMappingURL=InAppDocsViewer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InAppDocsViewer.d.ts","names":[],"sources":["../../src/ui/InAppDocsViewer.tsx"],"mappings":";;;;;AAEwC;;cASlC,eAAA,EAAiB,KAAA,CAAM,EAAA"}
+{"version":3,"file":"InAppDocsViewer.d.ts","sourceRoot":"","sources":["../../src/ui/InAppDocsViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC;;;GAGG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAsC5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ui/InAppDocsViewer.js

@@ -1,62 +1,101 @@
-'use client';
+// @bun
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var inAppDocs = [
+  {
+    id: "docs.examples.in-app-docs",
+    title: "In\u2011App Docs \u2014 Overview",
+    summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
+    kind: "goal",
+    visibility: "public",
+    route: "/docs/examples/in-app-docs",
+    tags: ["documentation", "overview", "guide"],
+    body: `## Purpose
+The in\u2011app documentation example shows how you can use ContractSpec's DocBlock system to build user\u2011facing guides directly inside an application's UI.
 
-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";
+Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non\u2011technical language. When embedded in your app, these blocks present a self\u2011contained help centre for users.
 
-//#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 })] })
-		})]
-	});
-};
+## What you'll learn
+* How to define DocBlock objects with public visibility and user\u2011friendly routes.
+* How to structure an overview page for your in\u2011app 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\u2011App Docs \u2014 Using the Application",
+    summary: "Step\u2011by\u2011step 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 (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
+* Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
+* Need to find something quickly? Use the search bar or filters at the top of lists.
 
-//#endregion
-export { InAppDocsViewer as default };
-//# sourceMappingURL=InAppDocsViewer.js.map
+## 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/ui/index.d.ts

@@ -1,2 +1,2 @@
-import InAppDocsViewer from "./InAppDocsViewer.js";
-export { InAppDocsViewer };
+export { default as InAppDocsViewer } from './InAppDocsViewer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/ui/index.js

@@ -1,3 +1,101 @@
-import InAppDocsViewer from "./InAppDocsViewer.js";
+// @bun
+// src/docs/in-app-docs.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var inAppDocs = [
+  {
+    id: "docs.examples.in-app-docs",
+    title: "In\u2011App Docs \u2014 Overview",
+    summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
+    kind: "goal",
+    visibility: "public",
+    route: "/docs/examples/in-app-docs",
+    tags: ["documentation", "overview", "guide"],
+    body: `## Purpose
+The in\u2011app documentation example shows how you can use ContractSpec's DocBlock system to build user\u2011facing guides directly inside an application's UI.
 
-export { InAppDocsViewer };
+Instead of relying solely on developer documentation, you can define **public** DocBlocks that describe your product's features in clear, non\u2011technical language. When embedded in your app, these blocks present a self\u2011contained help centre for users.
+
+## What you'll learn
+* How to define DocBlock objects with public visibility and user\u2011friendly routes.
+* How to structure an overview page for your in\u2011app 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\u2011App Docs \u2014 Using the Application",
+    summary: "Step\u2011by\u2011step 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 (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
+* Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for 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
+};