codeapp-js 0.1.1 → 0.2.2

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 (121) hide show
  1. package/codeApp/dist/codeapp.js +552 -78
  2. package/codeApp/dist/power-apps-data.js +2531 -2531
  3. package/dev files/outlook.js +218 -9
  4. package/examples/combined demo/dist/codeapp.js +1098 -0
  5. package/examples/combined demo/dist/index.js +69 -114
  6. package/examples/combined demo/dist/power-apps-data.js +646 -170
  7. package/examples/combined demo/power.config.json +42 -42
  8. package/examples/dataverse Demo/dist/codeapp.js +1085 -0
  9. package/examples/dataverse Demo/dist/index.html +54 -54
  10. package/examples/dataverse Demo/dist/index.js +82 -70
  11. package/examples/dataverse Demo/dist/power-apps-data.js +551 -170
  12. package/examples/dataverse Demo/power.config.json +34 -34
  13. package/examples/dataverse Demo/readme.md +79 -79
  14. package/examples/groups Demo/dist/codeapp.js +1085 -0
  15. package/examples/groups Demo/dist/index.js +27 -27
  16. package/examples/groups Demo/dist/power-apps-data.js +551 -170
  17. package/examples/kanban/dist/dataverse.js +94 -94
  18. package/examples/kanban/dist/environmentVar.js +55 -55
  19. package/examples/kanban/dist/office365groups.js +97 -97
  20. package/examples/kanban/dist/office365users.js +169 -169
  21. package/examples/kanban/dist/outlook.js +162 -162
  22. package/examples/kanban/dist/power-apps-data.js +560 -138
  23. package/examples/kanban/dist/sharepoint.js +339 -339
  24. package/examples/myProfile/dist/index.html +184 -184
  25. package/examples/myProfile/dist/index.js +141 -141
  26. package/examples/myProfile/dist/office365users.js +169 -169
  27. package/examples/myProfile/dist/power-apps-data.js +560 -138
  28. package/examples/myProfile/power.config.json +22 -22
  29. package/examples/myProfile/readme.md +79 -79
  30. package/examples/outlook Demo/dist/codeapp.js +1085 -0
  31. package/examples/outlook Demo/dist/index.html +35 -35
  32. package/examples/outlook Demo/dist/index.js +170 -166
  33. package/examples/outlook Demo/dist/outlook.js +121 -121
  34. package/examples/outlook Demo/dist/power-apps-data.js +551 -170
  35. package/examples/outlook Demo/dist/styles.css +84 -84
  36. package/examples/outlook Demo/readme.md +82 -82
  37. package/examples/outlook Demo2/OutlookDemo_1_0_0_1.zip +0 -0
  38. package/examples/outlook Demo2/agent/decision-log.md +7 -0
  39. package/examples/outlook Demo2/dist/codeapp.js +1334 -0
  40. package/examples/outlook Demo2/dist/icon-512.png +0 -0
  41. package/examples/outlook Demo2/dist/index.html +98 -0
  42. package/examples/outlook Demo2/dist/index.js +346 -0
  43. package/examples/outlook Demo2/dist/power-apps-data.js +3007 -0
  44. package/examples/outlook Demo2/dist/styles.css +639 -0
  45. package/examples/outlook Demo2/power.config.json +23 -0
  46. package/examples/outlook Demo2/src/generated/index.ts +14 -0
  47. package/examples/outlook Demo2/src/generated/models/Office365GroupsModel.ts +363 -0
  48. package/examples/outlook Demo2/src/generated/models/Office365OutlookModel.ts +2046 -0
  49. package/examples/outlook Demo2/src/generated/models/Office365UsersModel.ts +254 -0
  50. package/examples/outlook Demo2/src/generated/services/Office365GroupsService.ts +326 -0
  51. package/examples/outlook Demo2/src/generated/services/Office365OutlookService.ts +2476 -0
  52. package/examples/outlook Demo2/src/generated/services/Office365UsersService.ts +358 -0
  53. package/examples/planning Poker/.vscode/settings.json +4 -4
  54. package/examples/planning Poker/additional files/customizations (tables).xml +6428 -6428
  55. package/examples/planning Poker/additional files/dataverse-tables.json +165 -165
  56. package/examples/planning Poker/additional files/readme.md +122 -122
  57. package/examples/planning Poker/dist/dataverse.js +78 -78
  58. package/examples/planning Poker/dist/index.html +198 -198
  59. package/examples/planning Poker/dist/index.js +954 -954
  60. package/examples/planning Poker/dist/power-apps-data.js +560 -138
  61. package/examples/planning Poker/dist/styles.css +815 -815
  62. package/examples/sharePoint Demo/agent/decision-log.md +5 -5
  63. package/examples/sharePoint Demo/dist/codeapp.js +1085 -0
  64. package/examples/sharePoint Demo/dist/index.js +44 -51
  65. package/examples/sharePoint Demo/dist/power-apps-data.js +551 -170
  66. package/examples/sharePoint Demo/power.config.json +22 -22
  67. package/examples/solution explorer/agent/decision-log.md +27 -0
  68. package/examples/solution explorer/agent/mockup-01-swiss-grid.html +452 -0
  69. package/examples/solution explorer/agent/mockup-02-dark-glass.html +496 -0
  70. package/examples/solution explorer/agent/mockup-03-paper-console.html +510 -0
  71. package/examples/solution explorer/agent/mockup-04-neon-noir.html +546 -0
  72. package/examples/solution explorer/agent/mockup-05-zen-garden.html +534 -0
  73. package/examples/solution explorer/dist/codeapp.js +1098 -0
  74. package/examples/solution explorer/dist/icon-512.png +0 -0
  75. package/examples/solution explorer/dist/index.html +80 -0
  76. package/examples/solution explorer/dist/index.js +735 -0
  77. package/examples/solution explorer/dist/power-apps-data.js +3007 -0
  78. package/examples/solution explorer/dist/styles.css +571 -0
  79. package/examples/solution explorer/power.config.json +151 -0
  80. package/examples/todo/dist/dataverse.js +64 -64
  81. package/examples/todo/dist/index.html +75 -75
  82. package/examples/todo/dist/index.js +8 -8
  83. package/examples/todo/dist/power-apps-data.js +560 -138
  84. package/examples/todo/dist/renderer.js +375 -375
  85. package/examples/todo/dist/styles.css +691 -691
  86. package/examples/todo/power.config.json +34 -34
  87. package/package.json +1 -8
  88. package/docs-mockups/atelier/index.html +0 -120
  89. package/docs-mockups/atelier/script.js +0 -23
  90. package/docs-mockups/atelier/styles.css +0 -361
  91. package/docs-mockups/field-guide/index.html +0 -112
  92. package/docs-mockups/field-guide/script.js +0 -20
  93. package/docs-mockups/field-guide/styles.css +0 -272
  94. package/docs-mockups/index.html +0 -80
  95. package/docs-mockups/maker-hub/index.html +0 -178
  96. package/docs-mockups/maker-hub/script.js +0 -20
  97. package/docs-mockups/maker-hub/styles.css +0 -404
  98. package/docs-mockups/script.js +0 -26
  99. package/docs-mockups/signal/index.html +0 -146
  100. package/docs-mockups/signal/script.js +0 -20
  101. package/docs-mockups/signal/styles.css +0 -314
  102. package/docs-mockups/styles.css +0 -287
  103. package/examples/combined demo/dist/dataverse.js +0 -86
  104. package/examples/combined demo/dist/environmentVar.js +0 -55
  105. package/examples/combined demo/dist/office365groups.js +0 -97
  106. package/examples/combined demo/dist/office365users.js +0 -169
  107. package/examples/combined demo/dist/outlook.js +0 -162
  108. package/examples/combined demo/dist/sharepoint.js +0 -339
  109. package/examples/dataverse Demo/dist/dataverse.js +0 -86
  110. package/examples/groups Demo/dist/dataverse.js +0 -86
  111. package/examples/groups Demo/dist/environmentVar.js +0 -55
  112. package/examples/groups Demo/dist/office365groups.js +0 -97
  113. package/examples/groups Demo/dist/office365users.js +0 -169
  114. package/examples/groups Demo/dist/outlook.js +0 -162
  115. package/examples/groups Demo/dist/sharepoint.js +0 -339
  116. package/examples/sharePoint Demo/dist/dataverse.js +0 -94
  117. package/examples/sharePoint Demo/dist/environmentVar.js +0 -55
  118. package/examples/sharePoint Demo/dist/office365groups.js +0 -97
  119. package/examples/sharePoint Demo/dist/office365users.js +0 -169
  120. package/examples/sharePoint Demo/dist/outlook.js +0 -162
  121. package/examples/sharePoint Demo/dist/sharepoint.js +0 -339
package/examples/todo/power.config.json CHANGED
@@ -1,35 +1,35 @@
1
- {
2
- "appDisplayName": "Todo",
3
- "description": "A task management app backed by the Dataverse task table.",
4
- "environmentId": "<ENVIRONMENT_ID>",
5
- "buildPath": "./dist",
6
- "buildEntryPoint": "index.html",
7
- "logoPath": "icon192.png",
8
- "localAppUrl": "http://localhost:3000",
9
- "region": "prod",
10
- "connectionReferences": {
11
- "dataverse": {
12
- "id": "/providers/Microsoft.PowerApps/apis/shared_commondataserviceforapps",
13
- "displayName": "Microsoft Dataverse",
14
- "dataSources": [
15
- "commondataserviceforapps"
16
- ],
17
- "authenticationType": null,
18
- "sharedConnectionId": null,
19
- "dataSets": {}
20
- }
21
- },
22
- "databaseReferences": {
23
- "default.cds": {
24
- "databaseDetails": null,
25
- "dataSources": {
26
- "tasks": {
27
- "entitySetName": "tasks",
28
- "logicalName": "task",
29
- "isHidden": false
30
- }
31
- },
32
- "actions": null
33
- }
34
- }
1
+ {
2
+ "appDisplayName": "Todo",
3
+ "description": "A task management app backed by the Dataverse task table.",
4
+ "environmentId": "<ENVIRONMENT_ID>",
5
+ "buildPath": "./dist",
6
+ "buildEntryPoint": "index.html",
7
+ "logoPath": "icon192.png",
8
+ "localAppUrl": "http://localhost:3000",
9
+ "region": "prod",
10
+ "connectionReferences": {
11
+ "dataverse": {
12
+ "id": "/providers/Microsoft.PowerApps/apis/shared_commondataserviceforapps",
13
+ "displayName": "Microsoft Dataverse",
14
+ "dataSources": [
15
+ "commondataserviceforapps"
16
+ ],
17
+ "authenticationType": null,
18
+ "sharedConnectionId": null,
19
+ "dataSets": {}
20
+ }
21
+ },
22
+ "databaseReferences": {
23
+ "default.cds": {
24
+ "databaseDetails": null,
25
+ "dataSources": {
26
+ "tasks": {
27
+ "entitySetName": "tasks",
28
+ "logicalName": "task",
29
+ "isHidden": false
30
+ }
31
+ },
32
+ "actions": null
33
+ }
34
+ }
35
35
  }
package/package.json CHANGED
@@ -1,20 +1,13 @@
1
1
  {
2
2
  "name": "codeapp-js",
3
- "version": "0.1.1",
3
+ "version": "0.2.2",
4
4
  "private": false,
5
5
  "description": "JavaScript library with samples and starter app for Power Apps Code Apps.",
6
6
  "scripts": {
7
- "build": "npm run build:sdk",
8
- "build:sdk": "node ./scripts/build-power-sdk.mjs",
9
- "postinstall": "npm run build:sdk",
10
7
  "start": "http-server . -p 4173 -c-1",
11
8
  "start:codeapp": "http-server . -p 4173 -c-1 -o /codeApp/dist/"
12
9
  },
13
- "dependencies": {
14
- "@microsoft/power-apps": "1.0.4"
15
- },
16
10
  "devDependencies": {
17
- "esbuild": "0.25.1",
18
11
  "http-server": "14.1.1"
19
12
  }
20
13
  }
package/docs-mockups/atelier/index.html DELETED
@@ -1,120 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Atelier Ledger | codeapp-js Docs</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
10
- <link rel="stylesheet" href="./styles.css">
11
- </head>
12
- <body>
13
- <div class="pageShell">
14
- <header class="topbar">
15
- <a class="brand" href="../index.html">codeapp-js</a>
16
- <nav>
17
- <a href="#overview">Overview</a>
18
- <a href="#install">Install</a>
19
- <a href="#config">Config</a>
20
- <a href="#examples">Examples</a>
21
- </nav>
22
- </header>
23
-
24
- <main>
25
- <section class="hero" id="overview">
26
- <div class="heroCopy">
27
- <p class="eyebrow">Editorial Concept</p>
28
- <h1>Documentation that sells the craft, not just the commands.</h1>
29
- <p class="intro">codeapp-js wraps the Power Apps Code Apps workflow in a cleaner JavaScript-first package: generated services, connector libraries, and a repo layout that feels familiar to frontend developers.</p>
30
- <div class="heroActions">
31
- <button class="primaryButton" id="copyInstallButton">Copy install command</button>
32
- <a class="secondaryButton" href="#config">See config anatomy</a>
33
- </div>
34
- </div>
35
- <div class="heroPanel">
36
- <p class="panelKicker">Starter flow</p>
37
- <ol>
38
- <li>Install the package and local dependencies.</li>
39
- <li>Authenticate with `pac auth create`.</li>
40
- <li>Add tables and connectors in `power.config.json`.</li>
41
- <li>Run `pac code push` to generate services.</li>
42
- </ol>
43
- <div class="miniStatRow">
44
- <div>
45
- <strong>5</strong>
46
- <span>connector families</span>
47
- </div>
48
- <div>
49
- <strong>4173</strong>
50
- <span>default local port</span>
51
- </div>
52
- </div>
53
- </div>
54
- </section>
55
-
56
- <section class="splitSection" id="install">
57
- <article class="paperCard commandCard">
58
- <p class="sectionLabel">Quick start</p>
59
- <h2>Start with the exact workflow your repo already expects.</h2>
60
- <pre><code id="installSnippet">npm install codeapp-js
61
- npm start
62
- pac auth create</code></pre>
63
- </article>
64
- <article class="paperCard proseCard">
65
- <p class="sectionLabel">Why it lands well</p>
66
- <p>The package stays close to the Power Apps mental model, but frames it in a frontend repo structure: generated services in `src/generated`, a simple `power.config.json`, and local serving from the repository root.</p>
67
- <div class="connectorRow">
68
- <span>Dataverse</span>
69
- <span>Outlook</span>
70
- <span>SharePoint</span>
71
- <span>Groups</span>
72
- <span>Users</span>
73
- </div>
74
- </article>
75
- </section>
76
-
77
- <section class="storyGrid" id="config">
78
- <article class="storyCard accentCard">
79
- <p class="sectionLabel">Configuration</p>
80
- <h2>`power.config.json` becomes the center of gravity.</h2>
81
- <p>Describe Dataverse tables in `databaseReferences.default.cds.dataSources`, then add connector references for Outlook, SharePoint, Groups, and Users. The docs style here treats config like a system diagram rather than a dump of JSON.</p>
82
- </article>
83
- <article class="storyCard quoteCard">
84
- <p class="quote">“The docs feel premium and narrative-driven, which is useful if the package needs credibility with both makers and JavaScript developers.”</p>
85
- </article>
86
- <article class="storyCard codeCard">
87
- <p class="sectionLabel">Generated output</p>
88
- <code>src/generated/services/AccountsService.ts</code>
89
- <code>src/generated/models/AccountsModel.ts</code>
90
- <code>examples/todo/dist/</code>
91
- </article>
92
- </section>
93
-
94
- <section class="examplesSection" id="examples">
95
- <div class="examplesHeader">
96
- <p class="sectionLabel">Examples</p>
97
- <h2>Anchor the package with sample-driven documentation.</h2>
98
- </div>
99
- <div class="exampleCards">
100
- <article>
101
- <h3>Starter app</h3>
102
- <p>Focus on the smallest successful path from install to `codeApp/dist/`.</p>
103
- </article>
104
- <article>
105
- <h3>Connector demos</h3>
106
- <p>Show SharePoint, Outlook, Groups, and Users as self-contained demos with short “what it proves” summaries.</p>
107
- </article>
108
- <article>
109
- <h3>Generated service reference</h3>
110
- <p>Document the generated files once, then reuse the structure across every example.</p>
111
- </article>
112
- </div>
113
- </section>
114
- </main>
115
- </div>
116
-
117
- <div class="toast" id="toast" aria-live="polite"></div>
118
- <script src="./script.js"></script>
119
- </body>
120
- </html>
package/docs-mockups/atelier/script.js DELETED
@@ -1,23 +0,0 @@
1
- const eCopyInstallButton = document.getElementById('copyInstallButton');
2
- const eInstallSnippet = document.getElementById('installSnippet');
3
- const eToast = document.getElementById('toast');
4
-
5
- const showToast = (sMessage) => {
6
- eToast.textContent = sMessage;
7
- eToast.classList.add('is-visible');
8
-
9
- window.setTimeout(() => {
10
- eToast.classList.remove('is-visible');
11
- }, 1800);
12
- };
13
-
14
- const copyInstallSnippet = async () => {
15
- try {
16
- await navigator.clipboard.writeText(eInstallSnippet.textContent);
17
- showToast('Install command copied');
18
- } catch (oError) {
19
- showToast('Clipboard unavailable in this browser');
20
- }
21
- };
22
-
23
- eCopyInstallButton.addEventListener('click', copyInstallSnippet);
package/docs-mockups/atelier/styles.css DELETED
@@ -1,361 +0,0 @@
1
- :root {
2
- --bg: #f8f1e7;
3
- --paper: rgba(255, 252, 247, 0.86);
4
- --ink: #211715;
5
- --muted: #66564e;
6
- --line: rgba(33, 23, 21, 0.12);
7
- --accent: #8b3d2e;
8
- --accent-soft: #e7d3c6;
9
- --green: #0d6b63;
10
- --shadow: 0 24px 60px rgba(91, 57, 27, 0.12);
11
- }
12
-
13
- * {
14
- box-sizing: border-box;
15
- }
16
-
17
- html {
18
- scroll-behavior: smooth;
19
- }
20
-
21
- body {
22
- margin: 0;
23
- min-height: 100vh;
24
- background:
25
- radial-gradient(circle at top right, rgba(13, 107, 99, 0.14), transparent 24%),
26
- radial-gradient(circle at 10% 10%, rgba(139, 61, 46, 0.14), transparent 25%),
27
- linear-gradient(180deg, #fbf5ec, var(--bg));
28
- color: var(--ink);
29
- font-family: 'Manrope', sans-serif;
30
- }
31
-
32
- .pageShell {
33
- width: min(1180px, calc(100% - 48px));
34
- margin: 0 auto;
35
- padding-bottom: 56px;
36
- }
37
-
38
- .topbar {
39
- display: flex;
40
- justify-content: space-between;
41
- align-items: center;
42
- padding: 22px 0;
43
- }
44
-
45
- .brand,
46
- .topbar nav a {
47
- color: var(--ink);
48
- text-decoration: none;
49
- }
50
-
51
- .brand {
52
- font-family: 'Cormorant Garamond', serif;
53
- font-size: 1.9rem;
54
- font-weight: 700;
55
- }
56
-
57
- .topbar nav {
58
- display: flex;
59
- gap: 18px;
60
- }
61
-
62
- .topbar nav a {
63
- font-size: 0.95rem;
64
- font-weight: 700;
65
- }
66
-
67
- .hero {
68
- display: grid;
69
- grid-template-columns: 1.3fr 0.9fr;
70
- gap: 28px;
71
- padding: 48px 0 28px;
72
- align-items: stretch;
73
- }
74
-
75
- .heroCopy h1,
76
- .splitSection h2,
77
- .storyCard h2,
78
- .examplesHeader h2 {
79
- font-family: 'Cormorant Garamond', serif;
80
- font-weight: 700;
81
- }
82
-
83
- .heroCopy h1 {
84
- margin: 10px 0 0;
85
- font-size: clamp(3.4rem, 7vw, 6rem);
86
- line-height: 0.92;
87
- }
88
-
89
- .eyebrow,
90
- .sectionLabel,
91
- .panelKicker {
92
- margin: 0;
93
- color: var(--accent);
94
- font-size: 0.84rem;
95
- font-weight: 800;
96
- letter-spacing: 0.16em;
97
- text-transform: uppercase;
98
- }
99
-
100
- .intro {
101
- max-width: 640px;
102
- margin: 20px 0 0;
103
- color: var(--muted);
104
- font-size: 1.06rem;
105
- line-height: 1.8;
106
- }
107
-
108
- .heroActions {
109
- display: flex;
110
- flex-wrap: wrap;
111
- gap: 14px;
112
- margin-top: 28px;
113
- }
114
-
115
- .primaryButton,
116
- .secondaryButton {
117
- border-radius: 999px;
118
- padding: 14px 20px;
119
- font: inherit;
120
- font-weight: 800;
121
- }
122
-
123
- .primaryButton {
124
- border: 0;
125
- background: var(--ink);
126
- color: #fffaf6;
127
- cursor: pointer;
128
- }
129
-
130
- .secondaryButton {
131
- border: 1px solid var(--line);
132
- background: rgba(255, 250, 246, 0.8);
133
- color: var(--ink);
134
- text-decoration: none;
135
- }
136
-
137
- .heroPanel,
138
- .paperCard,
139
- .storyCard,
140
- .exampleCards article {
141
- border: 1px solid var(--line);
142
- border-radius: 30px;
143
- background: var(--paper);
144
- box-shadow: var(--shadow);
145
- backdrop-filter: blur(14px);
146
- }
147
-
148
- .heroPanel {
149
- padding: 28px;
150
- }
151
-
152
- .heroPanel ol {
153
- margin: 18px 0 0;
154
- padding-left: 18px;
155
- line-height: 1.8;
156
- }
157
-
158
- .miniStatRow {
159
- display: grid;
160
- grid-template-columns: repeat(2, minmax(0, 1fr));
161
- gap: 14px;
162
- margin-top: 22px;
163
- }
164
-
165
- .miniStatRow div {
166
- padding: 18px;
167
- border-radius: 22px;
168
- background: linear-gradient(135deg, rgba(231, 211, 198, 0.86), rgba(255, 252, 247, 0.6));
169
- }
170
-
171
- .miniStatRow strong {
172
- display: block;
173
- font-size: 1.7rem;
174
- }
175
-
176
- .miniStatRow span {
177
- color: var(--muted);
178
- }
179
-
180
- .splitSection {
181
- display: grid;
182
- grid-template-columns: 1.1fr 0.9fr;
183
- gap: 22px;
184
- margin-top: 22px;
185
- }
186
-
187
- .paperCard {
188
- padding: 28px;
189
- }
190
-
191
- .paperCard h2 {
192
- margin: 12px 0 12px;
193
- font-size: clamp(2rem, 3.5vw, 3rem);
194
- line-height: 1;
195
- }
196
-
197
- pre {
198
- overflow-x: auto;
199
- margin: 0;
200
- padding: 20px;
201
- border-radius: 22px;
202
- background: #201816;
203
- color: #f6ebe1;
204
- }
205
-
206
- code {
207
- font-family: 'Courier New', monospace;
208
- }
209
-
210
- .proseCard p {
211
- color: var(--muted);
212
- line-height: 1.8;
213
- }
214
-
215
- .connectorRow {
216
- display: flex;
217
- flex-wrap: wrap;
218
- gap: 10px;
219
- margin-top: 18px;
220
- }
221
-
222
- .connectorRow span {
223
- padding: 9px 12px;
224
- border: 1px solid var(--line);
225
- border-radius: 999px;
226
- background: rgba(255, 252, 247, 0.78);
227
- font-size: 0.88rem;
228
- font-weight: 800;
229
- }
230
-
231
- .storyGrid {
232
- display: grid;
233
- grid-template-columns: 1.2fr 0.9fr 0.9fr;
234
- gap: 22px;
235
- margin-top: 22px;
236
- }
237
-
238
- .storyCard {
239
- min-height: 240px;
240
- padding: 28px;
241
- }
242
-
243
- .accentCard {
244
- background: linear-gradient(145deg, rgba(13, 107, 99, 0.94), rgba(5, 58, 53, 0.92));
245
- color: #effcf8;
246
- }
247
-
248
- .accentCard .sectionLabel,
249
- .accentCard p {
250
- color: rgba(239, 252, 248, 0.78);
251
- }
252
-
253
- .accentCard h2 {
254
- margin: 14px 0;
255
- font-size: clamp(2rem, 3vw, 3.2rem);
256
- }
257
-
258
- .quoteCard {
259
- display: flex;
260
- align-items: end;
261
- background: linear-gradient(180deg, rgba(231, 211, 198, 0.68), rgba(255, 252, 247, 0.88));
262
- }
263
-
264
- .quote {
265
- margin: 0;
266
- font-family: 'Cormorant Garamond', serif;
267
- font-size: 2rem;
268
- line-height: 1.1;
269
- }
270
-
271
- .codeCard {
272
- display: grid;
273
- gap: 12px;
274
- }
275
-
276
- .codeCard code {
277
- display: block;
278
- padding: 16px;
279
- border-radius: 18px;
280
- background: rgba(255, 252, 247, 0.84);
281
- border: 1px solid var(--line);
282
- }
283
-
284
- .examplesSection {
285
- margin-top: 22px;
286
- padding: 30px 0 0;
287
- }
288
-
289
- .examplesHeader h2 {
290
- margin: 12px 0 0;
291
- font-size: clamp(2rem, 4vw, 3.5rem);
292
- }
293
-
294
- .exampleCards {
295
- display: grid;
296
- grid-template-columns: repeat(3, minmax(0, 1fr));
297
- gap: 18px;
298
- margin-top: 22px;
299
- }
300
-
301
- .exampleCards article {
302
- padding: 24px;
303
- }
304
-
305
- .exampleCards h3 {
306
- margin: 0 0 12px;
307
- font-size: 1.3rem;
308
- }
309
-
310
- .exampleCards p {
311
- margin: 0;
312
- color: var(--muted);
313
- line-height: 1.7;
314
- }
315
-
316
- .toast {
317
- position: fixed;
318
- right: 20px;
319
- bottom: 20px;
320
- padding: 12px 16px;
321
- border-radius: 999px;
322
- background: var(--ink);
323
- color: #fffaf6;
324
- opacity: 0;
325
- transform: translateY(12px);
326
- transition: opacity 180ms ease, transform 180ms ease;
327
- }
328
-
329
- .toast.is-visible {
330
- opacity: 1;
331
- transform: translateY(0);
332
- }
333
-
334
- @media (max-width: 980px) {
335
- .hero,
336
- .splitSection,
337
- .storyGrid,
338
- .exampleCards {
339
- grid-template-columns: 1fr;
340
- }
341
- }
342
-
343
- @media (max-width: 720px) {
344
- .pageShell {
345
- width: min(100% - 28px, 1180px);
346
- }
347
-
348
- .topbar {
349
- flex-direction: column;
350
- gap: 12px;
351
- align-items: flex-start;
352
- }
353
-
354
- .topbar nav {
355
- flex-wrap: wrap;
356
- }
357
-
358
- .heroActions {
359
- flex-direction: column;
360
- }
361
- }