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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/.turbo/turbo-build.log +35 -29
  2. package/.turbo/turbo-prebuild.log +1 -0
  3. package/CHANGELOG.md +30 -0
  4. package/dist/browser/docs/in-app-docs.docblock.js +50 -0
  5. package/dist/browser/docs/index.js +47 -0
  6. package/dist/browser/example.js +38 -0
  7. package/dist/browser/index.js +136 -0
  8. package/dist/browser/ui/InAppDocsViewer.js +100 -0
  9. package/dist/browser/ui/index.js +100 -0
  10. package/dist/docs/in-app-docs.docblock.d.ts +2 -7
  11. package/dist/docs/in-app-docs.docblock.d.ts.map +1 -1
  12. package/dist/docs/in-app-docs.docblock.js +33 -47
  13. package/dist/docs/index.d.ts +2 -1
  14. package/dist/docs/index.d.ts.map +1 -0
  15. package/dist/docs/index.js +48 -1
  16. package/dist/example.d.ts +2 -7
  17. package/dist/example.d.ts.map +1 -1
  18. package/dist/example.js +36 -50
  19. package/dist/index.d.ts +4 -5
  20. package/dist/index.d.ts.map +1 -0
  21. package/dist/index.js +136 -5
  22. package/dist/node/docs/in-app-docs.docblock.js +50 -0
  23. package/dist/node/docs/index.js +47 -0
  24. package/dist/node/example.js +38 -0
  25. package/dist/node/index.js +136 -0
  26. package/dist/node/ui/InAppDocsViewer.js +100 -0
  27. package/dist/node/ui/index.js +100 -0
  28. package/dist/ui/InAppDocsViewer.d.ts +2 -6
  29. package/dist/ui/InAppDocsViewer.d.ts.map +1 -1
  30. package/dist/ui/InAppDocsViewer.js +97 -63
  31. package/dist/ui/index.d.ts +2 -2
  32. package/dist/ui/index.d.ts.map +1 -0
  33. package/dist/ui/index.js +100 -2
  34. package/package.json +78 -26
  35. package/src/ui/InAppDocsViewer.tsx +1 -1
  36. package/tsdown.config.js +1 -2
  37. package/.turbo/turbo-build$colon$bundle.log +0 -28
  38. package/dist/docs/in-app-docs.docblock.js.map +0 -1
  39. package/dist/example.js.map +0 -1
  40. package/dist/ui/InAppDocsViewer.js.map +0 -1
  41. package/tsconfig.tsbuildinfo +0 -1
@@ -1,65 +1,51 @@
1
+ // @bun
2
+ // src/docs/in-app-docs.docblock.ts
1
3
  import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
4
+ var inAppDocs = [
5
+ {
6
+ id: "docs.examples.in-app-docs",
7
+ title: "In\u2011App Docs \u2014 Overview",
8
+ summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
9
+ kind: "goal",
10
+ visibility: "public",
11
+ route: "/docs/examples/in-app-docs",
12
+ tags: ["documentation", "overview", "guide"],
13
+ body: `## Purpose
14
+ 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.
2
15
 
3
- //#region src/docs/in-app-docs.docblock.ts
4
- /**
5
- * DocBlocks for the in-app documentation example.
6
- *
7
- * These blocks provide publicly visible guides aimed at non‑technical users.
8
- * Each DocBlock is associated with a route under /docs/examples/in-app-docs
9
- * and will be rendered in the ContractSpec sandbox or within your app if you
10
- * integrate the documentation.
11
- */
12
- const inAppDocs = [{
13
- id: "docs.examples.in-app-docs",
14
- title: "In‑App Docs — Overview",
15
- summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
16
- kind: "goal",
17
- visibility: "public",
18
- route: "/docs/examples/in-app-docs",
19
- tags: [
20
- "documentation",
21
- "overview",
22
- "guide"
23
- ],
24
- body: `## Purpose
25
- 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.
26
-
27
- 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.
16
+ 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.
28
17
 
29
18
  ## What you'll learn
30
- * How to define DocBlock objects with public visibility and user‑friendly routes.
31
- * How to structure an overview page for your in‑app guide using Markdown.
19
+ * How to define DocBlock objects with public visibility and user\u2011friendly routes.
20
+ * How to structure an overview page for your in\u2011app guide using Markdown.
32
21
  * How to register your DocBlocks so they show up in the sandbox and in your application.
33
22
 
34
23
  Use this example as a template for documenting your own frontend workflows.`
35
- }, {
36
- id: "docs.examples.in-app-docs.usage",
37
- title: "In‑App Docs — Using the Application",
38
- summary: "Step‑by‑step guide for end users to navigate and use the example application.",
39
- kind: "usage",
40
- visibility: "public",
41
- route: "/docs/examples/in-app-docs/usage",
42
- tags: [
43
- "documentation",
44
- "usage",
45
- "guide"
46
- ],
47
- body: `## Getting Started
24
+ },
25
+ {
26
+ id: "docs.examples.in-app-docs.usage",
27
+ title: "In\u2011App Docs \u2014 Using the Application",
28
+ summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
29
+ kind: "usage",
30
+ visibility: "public",
31
+ route: "/docs/examples/in-app-docs/usage",
32
+ tags: ["documentation", "usage", "guide"],
33
+ body: `## Getting Started
48
34
  1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
49
35
  2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
50
36
  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**.
51
37
 
52
38
  ## Tips
53
- * Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
54
- * Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
39
+ * Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
40
+ * Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
55
41
  * Need to find something quickly? Use the search bar or filters at the top of lists.
56
42
 
57
43
  ## Next Steps
58
44
  Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
59
45
  This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
60
- }];
46
+ }
47
+ ];
61
48
  registerDocBlocks(inAppDocs);
62
-
63
- //#endregion
64
- export { inAppDocs };
65
- //# sourceMappingURL=in-app-docs.docblock.js.map
49
+ export {
50
+ inAppDocs
51
+ };
@@ -1 +1,2 @@
1
- import "./in-app-docs.docblock.js";
1
+ import './in-app-docs.docblock';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/docs/index.ts"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC"}
@@ -1 +1,48 @@
1
- import "./in-app-docs.docblock.js";
1
+ // @bun
2
+ // src/docs/in-app-docs.docblock.ts
3
+ import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
4
+ var inAppDocs = [
5
+ {
6
+ id: "docs.examples.in-app-docs",
7
+ title: "In\u2011App Docs \u2014 Overview",
8
+ summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
9
+ kind: "goal",
10
+ visibility: "public",
11
+ route: "/docs/examples/in-app-docs",
12
+ tags: ["documentation", "overview", "guide"],
13
+ body: `## Purpose
14
+ 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.
15
+
16
+ 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.
17
+
18
+ ## What you'll learn
19
+ * How to define DocBlock objects with public visibility and user\u2011friendly routes.
20
+ * How to structure an overview page for your in\u2011app guide using Markdown.
21
+ * How to register your DocBlocks so they show up in the sandbox and in your application.
22
+
23
+ Use this example as a template for documenting your own frontend workflows.`
24
+ },
25
+ {
26
+ id: "docs.examples.in-app-docs.usage",
27
+ title: "In\u2011App Docs \u2014 Using the Application",
28
+ summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
29
+ kind: "usage",
30
+ visibility: "public",
31
+ route: "/docs/examples/in-app-docs/usage",
32
+ tags: ["documentation", "usage", "guide"],
33
+ body: `## Getting Started
34
+ 1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
35
+ 2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
36
+ 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**.
37
+
38
+ ## Tips
39
+ * Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
40
+ * Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
41
+ * Need to find something quickly? Use the search bar or filters at the top of lists.
42
+
43
+ ## Next Steps
44
+ Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
45
+ This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
46
+ }
47
+ ];
48
+ registerDocBlocks(inAppDocs);
package/dist/example.d.ts CHANGED
@@ -1,14 +1,9 @@
1
- import * as _contractspec_lib_contracts0 from "@contractspec/lib.contracts";
2
-
3
- //#region src/example.d.ts
4
-
5
1
  /**
6
2
  * Example specification for the in-app documentation example.
7
3
  *
8
4
  * This example demonstrates how to use DocBlock to build public documentation
9
5
  * aimed at end users directly within the application UI.
10
6
  */
11
- declare const example: _contractspec_lib_contracts0.ExampleSpec;
12
- //#endregion
13
- export { example as default };
7
+ declare const example: import("@contractspec/lib.contracts").ExampleSpec;
8
+ export default example;
14
9
  //# sourceMappingURL=example.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"example.d.ts","names":[],"sources":["../src/example.ts"],"sourcesContent":[],"mappings":";;;;;;;AAQa;;;cAAP,SA0CJ,4BAAA,CA1CW"}
1
+ {"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../src/example.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,QAAA,MAAM,OAAO,mDA0CX,CAAC;AAEH,eAAe,OAAO,CAAC"}
package/dist/example.js CHANGED
@@ -1,53 +1,39 @@
1
+ // @bun
2
+ // src/example.ts
1
3
  import { defineExample } from "@contractspec/lib.contracts";
2
-
3
- //#region src/example.ts
4
- /**
5
- * Example specification for the in-app documentation example.
6
- *
7
- * This example demonstrates how to use DocBlock to build public documentation
8
- * aimed at end users directly within the application UI.
9
- */
10
- const example = defineExample({
11
- meta: {
12
- key: "in-app-docs",
13
- version: "1.0.0",
14
- title: "In‑App Documentation Example",
15
- 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.",
16
- kind: "ui",
17
- visibility: "public",
18
- stability: "experimental",
19
- owners: ["@docs-team"],
20
- tags: [
21
- "documentation",
22
- "guide",
23
- "ui"
24
- ]
25
- },
26
- docs: {
27
- rootDocId: "docs.examples.in-app-docs",
28
- usageDocId: "docs.examples.in-app-docs.usage",
29
- goalDocId: "docs.examples.in-app-docs"
30
- },
31
- entrypoints: {
32
- packageName: "@contractspec/example.in-app-docs",
33
- docs: "./docs",
34
- ui: "./ui"
35
- },
36
- surfaces: {
37
- templates: false,
38
- sandbox: {
39
- enabled: true,
40
- modes: ["markdown"]
41
- },
42
- studio: {
43
- enabled: false,
44
- installable: false
45
- },
46
- mcp: { enabled: false }
47
- }
4
+ var example = defineExample({
5
+ meta: {
6
+ key: "in-app-docs",
7
+ version: "1.0.0",
8
+ title: "In\u2011App Documentation Example",
9
+ description: "Demonstrates using DocBlock to create user\u2011facing guides that live inside your application's frontend. It shows how to structure a public, non\u2011technical user guide using ContractSpec.",
10
+ kind: "ui",
11
+ visibility: "public",
12
+ stability: "experimental",
13
+ owners: ["@docs-team"],
14
+ tags: ["documentation", "guide", "ui"]
15
+ },
16
+ docs: {
17
+ rootDocId: "docs.examples.in-app-docs",
18
+ usageDocId: "docs.examples.in-app-docs.usage",
19
+ goalDocId: "docs.examples.in-app-docs"
20
+ },
21
+ entrypoints: {
22
+ packageName: "@contractspec/example.in-app-docs",
23
+ docs: "./docs",
24
+ ui: "./ui"
25
+ },
26
+ surfaces: {
27
+ templates: false,
28
+ sandbox: {
29
+ enabled: true,
30
+ modes: ["markdown"]
31
+ },
32
+ studio: { enabled: false, installable: false },
33
+ mcp: { enabled: false }
34
+ }
48
35
  });
49
36
  var example_default = example;
50
-
51
- //#endregion
52
- export { example_default as default };
53
- //# sourceMappingURL=example.js.map
37
+ export {
38
+ example_default as default
39
+ };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import "./docs/index.js";
2
- import example from "./example.js";
3
- import InAppDocsViewer from "./ui/InAppDocsViewer.js";
4
- import "./ui/index.js";
5
- export { InAppDocsViewer, example };
1
+ export { default as example } from './example';
2
+ export * from './ui';
3
+ import './docs';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAG/C,cAAc,MAAM,CAAC;AAGrB,OAAO,QAAQ,CAAC"}
package/dist/index.js CHANGED
@@ -1,6 +1,137 @@
1
- import example_default from "./example.js";
2
- import InAppDocsViewer_default from "./ui/InAppDocsViewer.js";
3
- import "./ui/index.js";
4
- import "./docs/index.js";
1
+ // @bun
2
+ // src/docs/in-app-docs.docblock.ts
3
+ import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
4
+ var inAppDocs = [
5
+ {
6
+ id: "docs.examples.in-app-docs",
7
+ title: "In\u2011App Docs \u2014 Overview",
8
+ summary: "Overview of the in\u2011app documentation example demonstrating how DocBlock can serve end\u2011user guides.",
9
+ kind: "goal",
10
+ visibility: "public",
11
+ route: "/docs/examples/in-app-docs",
12
+ tags: ["documentation", "overview", "guide"],
13
+ body: `## Purpose
14
+ 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.
5
15
 
6
- export { InAppDocsViewer_default as InAppDocsViewer, example_default as example };
16
+ 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.
17
+
18
+ ## What you'll learn
19
+ * How to define DocBlock objects with public visibility and user\u2011friendly routes.
20
+ * How to structure an overview page for your in\u2011app guide using Markdown.
21
+ * How to register your DocBlocks so they show up in the sandbox and in your application.
22
+
23
+ Use this example as a template for documenting your own frontend workflows.`
24
+ },
25
+ {
26
+ id: "docs.examples.in-app-docs.usage",
27
+ title: "In\u2011App Docs \u2014 Using the Application",
28
+ summary: "Step\u2011by\u2011step guide for end users to navigate and use the example application.",
29
+ kind: "usage",
30
+ visibility: "public",
31
+ route: "/docs/examples/in-app-docs/usage",
32
+ tags: ["documentation", "usage", "guide"],
33
+ body: `## Getting Started
34
+ 1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
35
+ 2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
36
+ 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**.
37
+
38
+ ## Tips
39
+ * Look for information icons (\u2139\uFE0F) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
40
+ * Use keyboard shortcuts\u2014such as **Ctrl+S** to save or **Ctrl+K** to open the command palette\u2014for quicker navigation.
41
+ * Need to find something quickly? Use the search bar or filters at the top of lists.
42
+
43
+ ## Next Steps
44
+ Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
45
+ This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
46
+ }
47
+ ];
48
+ registerDocBlocks(inAppDocs);
49
+ // src/example.ts
50
+ import { defineExample } from "@contractspec/lib.contracts";
51
+ var example = defineExample({
52
+ meta: {
53
+ key: "in-app-docs",
54
+ version: "1.0.0",
55
+ title: "In\u2011App Documentation Example",
56
+ description: "Demonstrates using DocBlock to create user\u2011facing guides that live inside your application's frontend. It shows how to structure a public, non\u2011technical user guide using ContractSpec.",
57
+ kind: "ui",
58
+ visibility: "public",
59
+ stability: "experimental",
60
+ owners: ["@docs-team"],
61
+ tags: ["documentation", "guide", "ui"]
62
+ },
63
+ docs: {
64
+ rootDocId: "docs.examples.in-app-docs",
65
+ usageDocId: "docs.examples.in-app-docs.usage",
66
+ goalDocId: "docs.examples.in-app-docs"
67
+ },
68
+ entrypoints: {
69
+ packageName: "@contractspec/example.in-app-docs",
70
+ docs: "./docs",
71
+ ui: "./ui"
72
+ },
73
+ surfaces: {
74
+ templates: false,
75
+ sandbox: {
76
+ enabled: true,
77
+ modes: ["markdown"]
78
+ },
79
+ studio: { enabled: false, installable: false },
80
+ mcp: { enabled: false }
81
+ }
82
+ });
83
+ var example_default = example;
84
+
85
+ // src/ui/InAppDocsViewer.tsx
86
+ import { useState } from "react";
87
+ import { MarkdownRenderer } from "@contractspec/lib.example-shared-ui";
88
+ import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
89
+ "use client";
90
+ var InAppDocsViewer = () => {
91
+ const [activeId, setActiveId] = useState(inAppDocs[0]?.id ?? "");
92
+ const activeDoc = inAppDocs.find((doc) => doc.id === activeId);
93
+ return /* @__PURE__ */ jsxDEV("div", {
94
+ style: { display: "flex", height: "100%", gap: "1rem" },
95
+ children: [
96
+ /* @__PURE__ */ jsxDEV("nav", {
97
+ style: { width: "220px", borderRight: "1px solid #eee" },
98
+ children: /* @__PURE__ */ jsxDEV("ul", {
99
+ style: { listStyle: "none", padding: 0, margin: 0 },
100
+ children: inAppDocs.map((doc) => /* @__PURE__ */ jsxDEV("li", {
101
+ style: { marginBottom: "0.5rem" },
102
+ children: /* @__PURE__ */ jsxDEV("button", {
103
+ onClick: () => setActiveId(doc.id),
104
+ style: {
105
+ background: doc.id === activeId ? "#f0f0f0" : "transparent",
106
+ border: "none",
107
+ padding: "0.5rem 0.75rem",
108
+ cursor: "pointer",
109
+ textAlign: "left",
110
+ width: "100%"
111
+ },
112
+ children: doc.title
113
+ }, undefined, false, undefined, this)
114
+ }, doc.id, false, undefined, this))
115
+ }, undefined, false, undefined, this)
116
+ }, undefined, false, undefined, this),
117
+ /* @__PURE__ */ jsxDEV("main", {
118
+ style: { flexGrow: 1, padding: "1rem", overflowY: "auto" },
119
+ children: activeDoc && /* @__PURE__ */ jsxDEV(Fragment, {
120
+ children: [
121
+ /* @__PURE__ */ jsxDEV("h1", {
122
+ children: activeDoc.title
123
+ }, undefined, false, undefined, this),
124
+ /* @__PURE__ */ jsxDEV(MarkdownRenderer, {
125
+ content: activeDoc.body
126
+ }, undefined, false, undefined, this)
127
+ ]
128
+ }, undefined, true, undefined, this)
129
+ }, undefined, false, undefined, this)
130
+ ]
131
+ }, undefined, true, undefined, this);
132
+ };
133
+ var InAppDocsViewer_default = InAppDocsViewer;
134
+ export {
135
+ example_default as example,
136
+ InAppDocsViewer_default as InAppDocsViewer
137
+ };
@@ -0,0 +1,50 @@
1
+ // src/docs/in-app-docs.docblock.ts
2
+ import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
3
+ var inAppDocs = [
4
+ {
5
+ id: "docs.examples.in-app-docs",
6
+ title: "In‑App Docs — Overview",
7
+ summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
8
+ kind: "goal",
9
+ visibility: "public",
10
+ route: "/docs/examples/in-app-docs",
11
+ tags: ["documentation", "overview", "guide"],
12
+ body: `## Purpose
13
+ 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.
14
+
15
+ 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.
16
+
17
+ ## What you'll learn
18
+ * How to define DocBlock objects with public visibility and user‑friendly routes.
19
+ * How to structure an overview page for your in‑app guide using Markdown.
20
+ * How to register your DocBlocks so they show up in the sandbox and in your application.
21
+
22
+ Use this example as a template for documenting your own frontend workflows.`
23
+ },
24
+ {
25
+ id: "docs.examples.in-app-docs.usage",
26
+ title: "In‑App Docs — Using the Application",
27
+ summary: "Step‑by‑step guide for end users to navigate and use the example application.",
28
+ kind: "usage",
29
+ visibility: "public",
30
+ route: "/docs/examples/in-app-docs/usage",
31
+ tags: ["documentation", "usage", "guide"],
32
+ body: `## Getting Started
33
+ 1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
34
+ 2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
35
+ 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**.
36
+
37
+ ## Tips
38
+ * Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
39
+ * Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
40
+ * Need to find something quickly? Use the search bar or filters at the top of lists.
41
+
42
+ ## Next Steps
43
+ Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
44
+ This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
45
+ }
46
+ ];
47
+ registerDocBlocks(inAppDocs);
48
+ export {
49
+ inAppDocs
50
+ };
@@ -0,0 +1,47 @@
1
+ // src/docs/in-app-docs.docblock.ts
2
+ import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
3
+ var inAppDocs = [
4
+ {
5
+ id: "docs.examples.in-app-docs",
6
+ title: "In‑App Docs — Overview",
7
+ summary: "Overview of the in‑app documentation example demonstrating how DocBlock can serve end‑user guides.",
8
+ kind: "goal",
9
+ visibility: "public",
10
+ route: "/docs/examples/in-app-docs",
11
+ tags: ["documentation", "overview", "guide"],
12
+ body: `## Purpose
13
+ 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.
14
+
15
+ 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.
16
+
17
+ ## What you'll learn
18
+ * How to define DocBlock objects with public visibility and user‑friendly routes.
19
+ * How to structure an overview page for your in‑app guide using Markdown.
20
+ * How to register your DocBlocks so they show up in the sandbox and in your application.
21
+
22
+ Use this example as a template for documenting your own frontend workflows.`
23
+ },
24
+ {
25
+ id: "docs.examples.in-app-docs.usage",
26
+ title: "In‑App Docs — Using the Application",
27
+ summary: "Step‑by‑step guide for end users to navigate and use the example application.",
28
+ kind: "usage",
29
+ visibility: "public",
30
+ route: "/docs/examples/in-app-docs/usage",
31
+ tags: ["documentation", "usage", "guide"],
32
+ body: `## Getting Started
33
+ 1. **Sign in**. Launch the app and enter your credentials. New users can click **Create Account** to register.
34
+ 2. **Explore the dashboard**. Use the sidebar or navigation bar to access sections like Dashboard, Profile, and Settings.
35
+ 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**.
36
+
37
+ ## Tips
38
+ * Look for information icons (ℹ️) throughout the UI. Hover or click these icons to display contextual help powered by DocBlock.
39
+ * Use keyboard shortcuts—such as **Ctrl+S** to save or **Ctrl+K** to open the command palette—for quicker navigation.
40
+ * Need to find something quickly? Use the search bar or filters at the top of lists.
41
+
42
+ ## Next Steps
43
+ Continue exploring the different screens. Try editing or deleting items, adjusting your profile settings, or experimenting with filters.
44
+ This guide is available via the help menu inside the app, so you can reference it without leaving your workflow.`
45
+ }
46
+ ];
47
+ registerDocBlocks(inAppDocs);
@@ -0,0 +1,38 @@
1
+ // src/example.ts
2
+ import { defineExample } from "@contractspec/lib.contracts";
3
+ var example = defineExample({
4
+ meta: {
5
+ key: "in-app-docs",
6
+ version: "1.0.0",
7
+ title: "In‑App Documentation Example",
8
+ 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.",
9
+ kind: "ui",
10
+ visibility: "public",
11
+ stability: "experimental",
12
+ owners: ["@docs-team"],
13
+ tags: ["documentation", "guide", "ui"]
14
+ },
15
+ docs: {
16
+ rootDocId: "docs.examples.in-app-docs",
17
+ usageDocId: "docs.examples.in-app-docs.usage",
18
+ goalDocId: "docs.examples.in-app-docs"
19
+ },
20
+ entrypoints: {
21
+ packageName: "@contractspec/example.in-app-docs",
22
+ docs: "./docs",
23
+ ui: "./ui"
24
+ },
25
+ surfaces: {
26
+ templates: false,
27
+ sandbox: {
28
+ enabled: true,
29
+ modes: ["markdown"]
30
+ },
31
+ studio: { enabled: false, installable: false },
32
+ mcp: { enabled: false }
33
+ }
34
+ });
35
+ var example_default = example;
36
+ export {
37
+ example_default as default
38
+ };