@power-maverick/tool-pcf-builder 0.0.1
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.
- package/README.md +280 -0
- package/dist/index.css +1 -0
- package/dist/index.html +13 -0
- package/dist/index.js +42 -0
- package/dist/index.js.map +1 -0
- package/npm-shrinkwrap.json +3324 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
# PCF Builder
|
|
2
|
+
|
|
3
|
+
A PowerPlatform ToolBox tool for building and managing Power Apps Component Framework (PCF) custom controls using React and Vite.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ React 18 with TypeScript
|
|
8
|
+
- ✅ Vite for fast development and building
|
|
9
|
+
- ✅ Access to ToolBox API via `window.toolboxAPI`
|
|
10
|
+
- ✅ PPTB-only integration (no DVDT support)
|
|
11
|
+
- ✅ Create new PCF controls with visual interface
|
|
12
|
+
- ✅ Edit existing PCF controls
|
|
13
|
+
- ✅ Build and test PCF projects
|
|
14
|
+
- ✅ Solution package creation
|
|
15
|
+
- ✅ Support for Field and Dataset templates
|
|
16
|
+
- ✅ Additional package integration (Fluent UI, React, etc.)
|
|
17
|
+
- ✅ Command execution and output display
|
|
18
|
+
|
|
19
|
+
## Structure
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
pcf-builder/
|
|
23
|
+
├── src/
|
|
24
|
+
│ ├── App.tsx # Main React component
|
|
25
|
+
│ ├── main.tsx # Entry point
|
|
26
|
+
│ ├── styles.css # Global styles
|
|
27
|
+
│ ├── models/
|
|
28
|
+
│ │ └── interfaces.ts # TypeScript interfaces
|
|
29
|
+
│ ├── components/ # React components (future)
|
|
30
|
+
│ ├── utils/ # Utility functions (future)
|
|
31
|
+
│ └── types/ # Type definitions (future)
|
|
32
|
+
├── index.html # HTML template
|
|
33
|
+
├── vite.config.ts # Vite configuration
|
|
34
|
+
├── package.json
|
|
35
|
+
├── tsconfig.json
|
|
36
|
+
└── README.md
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Installation
|
|
40
|
+
|
|
41
|
+
Install dependencies:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm install
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Development
|
|
48
|
+
|
|
49
|
+
Run development server:
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
npm run dev
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Build for production:
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm run build
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Preview production build:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
npm run preview
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Usage in ToolBox
|
|
68
|
+
|
|
69
|
+
1. Build the tool:
|
|
70
|
+
```bash
|
|
71
|
+
npm run build
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
2. The built files will be in the `dist/` directory:
|
|
75
|
+
- `index.html` - Main entry point
|
|
76
|
+
- `index.js` - Bundled application
|
|
77
|
+
- `index.css` - Compiled styles
|
|
78
|
+
|
|
79
|
+
3. Install the tool in PowerPlatform ToolBox through the UI or programmatically
|
|
80
|
+
|
|
81
|
+
## Key Concepts
|
|
82
|
+
|
|
83
|
+
### ToolBox API Integration
|
|
84
|
+
|
|
85
|
+
The tool integrates with PowerPlatform ToolBox via `window.toolboxAPI`:
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
// Get active connection
|
|
89
|
+
const connection = await window.toolboxAPI.connections.getActiveConnection();
|
|
90
|
+
|
|
91
|
+
// Show notification
|
|
92
|
+
await window.toolboxAPI.showNotification({
|
|
93
|
+
title: "Success",
|
|
94
|
+
body: "Operation completed successfully",
|
|
95
|
+
type: "success"
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
// Execute terminal command
|
|
99
|
+
const result = await window.toolboxAPI.terminal.executeCommand(command);
|
|
100
|
+
|
|
101
|
+
// File system operations
|
|
102
|
+
const folder = await window.toolboxAPI.fileSystem.selectFolder();
|
|
103
|
+
const file = await window.toolboxAPI.fileSystem.selectFile();
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**Important**: This tool is designed exclusively for PPTB and does not support DVDT (VS Code) integration.
|
|
107
|
+
|
|
108
|
+
### React Hooks
|
|
109
|
+
|
|
110
|
+
The tool demonstrates:
|
|
111
|
+
|
|
112
|
+
- `useState` for managing component state
|
|
113
|
+
- `useEffect` for initialization and side effects
|
|
114
|
+
- Type-safe event handling with TypeScript
|
|
115
|
+
- PPTB API integration patterns
|
|
116
|
+
|
|
117
|
+
### PCF Control Creation
|
|
118
|
+
|
|
119
|
+
The tool supports creating PCF controls with:
|
|
120
|
+
|
|
121
|
+
1. **Namespace** - Your organization/project namespace
|
|
122
|
+
2. **Control Name** - Technical name for the control
|
|
123
|
+
3. **Display Name** - User-friendly name (optional)
|
|
124
|
+
4. **Description** - Brief description (optional)
|
|
125
|
+
5. **Control Type** - Standard or Virtual
|
|
126
|
+
6. **Template** - Field (single field) or Dataset (grid)
|
|
127
|
+
7. **Additional Packages** - Optional npm packages (Fluent UI, React, etc.)
|
|
128
|
+
|
|
129
|
+
Example command generated:
|
|
130
|
+
```bash
|
|
131
|
+
pac pcf init --namespace Contoso --name MyControl --template field
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Building and Testing
|
|
135
|
+
|
|
136
|
+
The tool provides buttons to:
|
|
137
|
+
- **Build Project** - Runs `npm run build` in the project directory
|
|
138
|
+
- **Test Project** - Runs `npm start` to launch the test harness
|
|
139
|
+
|
|
140
|
+
### Solution Package Creation
|
|
141
|
+
|
|
142
|
+
Create solution packages with:
|
|
143
|
+
- **Publisher Name** - Name of the publisher
|
|
144
|
+
- **Publisher Prefix** - Short prefix for the publisher
|
|
145
|
+
- **Publisher Friendly Name** - Human-readable publisher name (optional)
|
|
146
|
+
|
|
147
|
+
The tool will:
|
|
148
|
+
1. Initialize a solution with `pac solution init`
|
|
149
|
+
2. Add PCF reference with `pac solution add-reference`
|
|
150
|
+
|
|
151
|
+
### Styling
|
|
152
|
+
|
|
153
|
+
Uses CSS with modern features:
|
|
154
|
+
|
|
155
|
+
- CSS Grid for layouts
|
|
156
|
+
- Flexbox for alignment
|
|
157
|
+
- Gradient backgrounds
|
|
158
|
+
- Responsive design
|
|
159
|
+
- Clean, professional UI matching PPTB style
|
|
160
|
+
|
|
161
|
+
## TypeScript
|
|
162
|
+
|
|
163
|
+
Full TypeScript support with:
|
|
164
|
+
|
|
165
|
+
- Type declarations for ToolBox API
|
|
166
|
+
- Strict type checking
|
|
167
|
+
- Modern ES2020 features
|
|
168
|
+
- React JSX types
|
|
169
|
+
- PCF-specific types
|
|
170
|
+
|
|
171
|
+
## PCF Workflow
|
|
172
|
+
|
|
173
|
+
The typical workflow:
|
|
174
|
+
|
|
175
|
+
1. **Create Control**: Use "New Control" tab to initialize a PCF project
|
|
176
|
+
2. **Edit Control**: Open the project folder to build and test
|
|
177
|
+
3. **Build**: Compile the control with `npm run build`
|
|
178
|
+
4. **Test**: Launch test harness with `npm start`
|
|
179
|
+
5. **Solution**: Create a solution package for deployment
|
|
180
|
+
6. **Deploy**: Use PPTB's deployment features or Power Apps CLI
|
|
181
|
+
|
|
182
|
+
## Command Execution
|
|
183
|
+
|
|
184
|
+
All commands are executed through PPTB's terminal API:
|
|
185
|
+
|
|
186
|
+
```typescript
|
|
187
|
+
const result = await window.toolboxAPI.terminal.executeCommand(command);
|
|
188
|
+
if (result.success) {
|
|
189
|
+
// Handle success
|
|
190
|
+
} else {
|
|
191
|
+
// Handle error
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
Commands include:
|
|
196
|
+
- `pac pcf init` - Initialize PCF control
|
|
197
|
+
- `npm run build` - Build the control
|
|
198
|
+
- `npm start` - Start test harness
|
|
199
|
+
- `pac solution init` - Create solution
|
|
200
|
+
- `pac solution add-reference` - Add PCF to solution
|
|
201
|
+
|
|
202
|
+
## Configuration Options
|
|
203
|
+
|
|
204
|
+
### Control Configuration
|
|
205
|
+
- Namespace, name, display name, description
|
|
206
|
+
- Control type (standard/virtual)
|
|
207
|
+
- Template (field/dataset)
|
|
208
|
+
- Additional npm packages
|
|
209
|
+
|
|
210
|
+
### Solution Configuration
|
|
211
|
+
- Publisher name and prefix
|
|
212
|
+
- Publisher friendly name
|
|
213
|
+
- Solution version (auto-managed)
|
|
214
|
+
|
|
215
|
+
## Output Display
|
|
216
|
+
|
|
217
|
+
All command outputs are displayed in a formatted pre-block with:
|
|
218
|
+
- Syntax highlighting
|
|
219
|
+
- Scrollable area
|
|
220
|
+
- Copy-friendly formatting
|
|
221
|
+
- Clear success/error indication
|
|
222
|
+
|
|
223
|
+
## Troubleshooting
|
|
224
|
+
|
|
225
|
+
### Build Issues
|
|
226
|
+
|
|
227
|
+
If builds fail, ensure:
|
|
228
|
+
- Node.js and npm are installed
|
|
229
|
+
- Power Apps CLI (pac) is installed
|
|
230
|
+
- Project folder is valid
|
|
231
|
+
- All dependencies are installed
|
|
232
|
+
|
|
233
|
+
### PPTB Integration Issues
|
|
234
|
+
|
|
235
|
+
Check:
|
|
236
|
+
1. `window.toolboxAPI` is available
|
|
237
|
+
2. Tool is running inside PPTB
|
|
238
|
+
3. Active connection is established
|
|
239
|
+
4. File system permissions are granted
|
|
240
|
+
|
|
241
|
+
## Prerequisites
|
|
242
|
+
|
|
243
|
+
Before using this tool, ensure you have:
|
|
244
|
+
|
|
245
|
+
1. **Node.js & npm**: Install from [nodejs.org](https://nodejs.org/) (LTS version recommended)
|
|
246
|
+
2. **Power Apps CLI**: Download from [aka.ms/PowerAppsCLI](https://aka.ms/PowerAppsCLI)
|
|
247
|
+
3. **PowerPlatform ToolBox**: The tool is designed for PPTB environment
|
|
248
|
+
|
|
249
|
+
## Features Not Included
|
|
250
|
+
|
|
251
|
+
This tool provides a visual interface for PCF development but does NOT include:
|
|
252
|
+
- Direct code editing (use your preferred IDE)
|
|
253
|
+
- Visual Studio integration (use external tools)
|
|
254
|
+
- Direct deployment to environments (use PPTB deployment features)
|
|
255
|
+
- Property/resource management (edit manifest manually)
|
|
256
|
+
|
|
257
|
+
## Contributing
|
|
258
|
+
|
|
259
|
+
Contributions are welcome! When contributing:
|
|
260
|
+
|
|
261
|
+
1. Maintain PPTB-only integration patterns
|
|
262
|
+
2. Keep webview bundle browser-only (no Node.js dependencies)
|
|
263
|
+
3. Test in PowerPlatform ToolBox
|
|
264
|
+
4. Update documentation as needed
|
|
265
|
+
5. Follow existing code style
|
|
266
|
+
|
|
267
|
+
## License
|
|
268
|
+
|
|
269
|
+
This project is licensed under the GPL-2.0 License - see the [LICENSE](../../LICENSE) file for details.
|
|
270
|
+
|
|
271
|
+
## Support
|
|
272
|
+
|
|
273
|
+
- **Issues**: [GitHub Issues](https://github.com/Power-Maverick/PPTB-Tools/issues)
|
|
274
|
+
- **Discussions**: [GitHub Discussions](https://github.com/Power-Maverick/PPTB-Tools/discussions)
|
|
275
|
+
|
|
276
|
+
## Reference
|
|
277
|
+
|
|
278
|
+
This tool is based on the PCF Custom Control Builder for XrmToolBox:
|
|
279
|
+
- Reference: [PCF-CustomControlBuilder](https://github.com/Power-Maverick/PCF-CustomControlBuilder)
|
|
280
|
+
- Adapted for PPTB with React + TypeScript + Vite stack
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._console_ops7f_1{background:#050914;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.06);padding:20px;box-shadow:inset 0 0 0 1px #0f172a99}._header_ops7f_9{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#fff9;margin-bottom:12px}._body_ops7f_17{max-height:260px;overflow:auto;line-height:1.45;color:#e2e8f0;font-family:JetBrains Mono,Consolas,monospace;font-size:.85rem;white-space:pre-wrap;margin:0}._panel_12mao_1{background:var(--color-surface);border-radius:var(--radius-lg);padding:28px;border:1px solid rgba(15,23,42,.08);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:20px}._header_12mao_12{display:flex;flex-direction:column;gap:12px}._kicker_12mao_18{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--color-muted)}._subtitle_12mao_25{font-size:1rem;color:var(--color-text);max-width:46ch}._section_12mao_31{display:flex;flex-direction:column;gap:12px}._controlGrid_12mao_37{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}._cell_12mao_43{min-width:0}._span4_12mao_47{grid-column:span 4}._span8_12mao_51{grid-column:span 8}._fullRow_12mao_55{grid-column:1 / -1}._helperText_12mao_59{font-size:.78rem;color:var(--color-muted);margin-top:6px}._helperText_12mao_59 code{background:#0f172a0f;padding:2px 6px;border-radius:var(--radius-sm)}._panelReadOnly_12mao_71 input[readonly],._panelReadOnly_12mao_71 textarea[readonly]{background:#0f172a0a;border-color:#0f172a1f;color:var(--color-muted);cursor:not-allowed}._panelReadOnly_12mao_71 select:disabled{background:#0f172a0a;border-color:#0f172a1f;color:var(--color-muted);cursor:not-allowed}._panelReadOnly_12mao_71 input[readonly]:focus,._panelReadOnly_12mao_71 textarea[readonly]:focus,._panelReadOnly_12mao_71 select:disabled:focus{box-shadow:none;outline:none}._toggleRow_12mao_93{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--color-muted)}._toggleRow_12mao_93 input[type=checkbox]{margin-top:4px}._toggleLabel_12mao_105{display:block;font-weight:600;margin-bottom:6px}._checkbox_12mao_111{flex:1}@media(max-width:960px){._spanTwo_12mao_116{grid-column:1 / -1}}@media(max-width:720px){._panel_12mao_1{padding:22px}}@media(max-width:960px){._controlGrid_12mao_37{grid-template-columns:repeat(6,minmax(0,1fr))}._span4_12mao_47,._span8_12mao_51{grid-column:span 6}}@media(max-width:640px){._controlGrid_12mao_37{grid-template-columns:repeat(1,minmax(0,1fr))}._span4_12mao_47,._span8_12mao_51,._fullRow_12mao_55{grid-column:span 1}}._wrapper_rnjwv_1{display:flex;flex-direction:column;gap:8px}._label_rnjwv_7{text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--color-muted)}._row_rnjwv_14{display:flex;gap:12px}._input_rnjwv_19{flex:1}._helper_rnjwv_23{font-size:.8rem;color:var(--color-muted)}@media(max-width:640px){._row_rnjwv_14{flex-direction:column}._input_rnjwv_19{width:100%}}._panel_1h319_1{background:var(--color-surface);border-radius:var(--radius-lg);padding:28px;border:1px solid rgba(15,23,42,.08);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:20px}._panelReadOnly_1h319_12 input[readonly]{background:#0f172a0a;border-color:#0f172a1f;color:var(--color-muted);cursor:not-allowed}._panelReadOnly_1h319_12 input[readonly]:focus{box-shadow:none;outline:none}._panelReadOnly_1h319_12 select:disabled{background:#0f172a0a;border-color:#0f172a1f;color:var(--color-muted);cursor:not-allowed}._panelReadOnly_1h319_12 select:disabled:focus{box-shadow:none;outline:none}._header_1h319_36{display:flex;flex-direction:column;gap:12px}._kicker_1h319_42{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--color-muted)}._subtitle_1h319_49{font-size:1rem;color:var(--color-text);max-width:52ch}._grid_1h319_55{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}._helperText_1h319_61{font-size:.8rem;color:var(--color-muted)}._helperText_1h319_61 code{background:#0f172a0f;padding:2px 6px;border-radius:var(--radius-sm)}._helperText_1h319_61 em{font-style:normal;color:var(--color-text);font-weight:600}._workspaceSummary_1h319_78{border-radius:var(--radius-md);border:1px dashed rgba(15,23,42,.12);padding:10px 14px;font-size:.85rem;color:var(--color-text)}@media(max-width:720px){._panel_1h319_1{padding:22px}}._tabShell_11n9g_1{width:100%;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;justify-content:space-between}._tabStrip_11n9g_10{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px;border-radius:999px;background:#ffffffd1;border:1px solid rgba(15,23,42,.08);box-shadow:0 8px 22px #0f172a14}._tabButton_11n9g_23{border:none;background:transparent;border-radius:999px;padding:8px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:color .2s ease,background .2s ease,box-shadow .2s ease;min-width:140px}._tabButton_11n9g_23:hover{color:var(--color-primary)}._active_11n9g_44{background:#2563eb1f;color:var(--color-primary);box-shadow:inset 0 0 0 1px #2563eb4d}._tabLabel_11n9g_50{font-size:.85rem;font-weight:600}._tabDescription_11n9g_55{font-size:.72rem;color:var(--color-muted)}._workspaceBadge_11n9g_60{flex:1 1;min-height:60px;border-radius:var(--radius-lg);border:1px dashed rgba(15,23,42,.14);background:#0f172a05;padding:12px 16px;display:flex;flex-direction:column;gap:4px;font-size:.85rem;overflow:hidden}._workspaceBadge_11n9g_60 span{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--color-muted)}._workspaceBadge_11n9g_60 strong{font-size:.85rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:720px){._tabStrip_11n9g_10,._workspaceBadge_11n9g_60{flex:1 1 100%}}:root{--color-bg: #f5f7fb;--color-surface: #ffffff;--color-border: #e2e8f0;--color-muted: #64748b;--color-text: #0f172a;--color-primary: #2563eb;--color-accent: #0ea5e9;--color-success: #0f9d58;--shadow-soft: 0 20px 45px rgba(15, 23, 42, .08);--radius-lg: 18px;--radius-md: 12px;--radius-sm: 8px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:linear-gradient(135deg,#eff3ff,#fdf2f8 40%,#eef9f2);color:var(--color-text)}#root{min-height:100vh}.app-root{min-height:100vh;padding:32px 16px 48px}.app-shell{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.panel-area{display:flex;flex-direction:column;gap:24px}.panel-stack{position:relative;width:100%;min-height:200px}.panel-card{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transform:translate(30px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.panel-card--active{opacity:1;transform:translate(0);pointer-events:auto;position:relative}.status-banner{border-radius:var(--radius-md);padding:14px 18px;font-size:.9rem;border:1px solid rgba(220,38,38,.2);background:#fef2f2e6;color:#991b1b}.loading-state,.empty-state{border-radius:var(--radius-md);background:#ffffffe6;border:1px dashed var(--color-border);padding:32px;text-align:center;color:var(--color-muted)}label{font-size:.82rem;font-weight:600;color:var(--color-text)}input,select,textarea{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:#fff;font-size:.92rem;transition:border-color .15s ease,box-shadow .15s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb26}textarea{min-height:96px;resize:vertical}.btn{border-radius:999px;padding:10px 20px;font-weight:600;font-size:.92rem;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 10px 30px #2563eb40}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 15px 30px #2563eb59}.btn-ghost{background:#0f172a0a;color:var(--color-text);border:1px solid rgba(15,23,42,.08)}.btn-ghost:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.btn-accent{background:var(--color-accent);color:#fff;box-shadow:0 10px 30px #0ea5e940}.btn-success{background:var(--color-success);color:#fff}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.command-console{background:#0b1120;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);color:#cbd5f5;font-family:JetBrains Mono,Fira Code,monospace;padding:18px;min-height:160px;box-shadow:inset 0 0 0 1px #ffffff0a}.command-console__header{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#cbd5e1b3;margin-bottom:8px}.command-console__body{max-height:260px;overflow:auto;white-space:pre-wrap;line-height:1.45}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000}.modal-card{width:100%;max-width:420px;background:var(--color-surface);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-soft);border:1px solid rgba(15,23,42,.08)}.modal-header h3{font-size:1.1rem;margin-bottom:6px}.modal-header p{color:var(--color-muted);font-size:.92rem}.modal-body{display:flex;flex-direction:column;gap:16px;margin-top:18px}.modal-actions{display:flex;justify-content:flex-end;gap:12px}@media(max-width:720px){.app-root{padding:24px 12px}.button-grid{grid-template-columns:1fr}}
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
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>PCF Builder</title>
|
|
7
|
+
<script type="module" crossorigin src="/index.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/index.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|