@wireweave/core 2.4.0 → 2.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.
- package/dist/index.cjs +861 -245
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +861 -245
- package/dist/parser.cjs +604 -243
- package/dist/parser.d.cts +1 -1
- package/dist/parser.d.ts +1 -1
- package/dist/parser.js +604 -243
- package/dist/renderer.cjs +230 -2
- package/dist/renderer.d.cts +4 -1
- package/dist/renderer.d.ts +4 -1
- package/dist/renderer.js +230 -2
- package/dist/{types-D_1QkAXo.d.cts → types-EbEsGNxL.d.cts} +72 -4
- package/dist/{types-D_1QkAXo.d.ts → types-EbEsGNxL.d.ts} +72 -4
- package/package.json +1 -1
package/dist/renderer.cjs
CHANGED
|
@@ -1322,6 +1322,106 @@ function generateAccessibilityStyles(prefix) {
|
|
|
1322
1322
|
}`;
|
|
1323
1323
|
}
|
|
1324
1324
|
|
|
1325
|
+
// src/renderer/styles/annotation.ts
|
|
1326
|
+
function generateAnnotationStyles(_theme, prefix) {
|
|
1327
|
+
return `/* Annotation Components */
|
|
1328
|
+
|
|
1329
|
+
/* Marker - Number marker for referencing */
|
|
1330
|
+
.${prefix}-marker {
|
|
1331
|
+
display: inline-flex;
|
|
1332
|
+
align-items: center;
|
|
1333
|
+
justify-content: center;
|
|
1334
|
+
width: 20px;
|
|
1335
|
+
height: 20px;
|
|
1336
|
+
border-radius: 50%;
|
|
1337
|
+
background: #3b82f6;
|
|
1338
|
+
border: 2px solid #2563eb;
|
|
1339
|
+
color: white;
|
|
1340
|
+
font-size: 11px;
|
|
1341
|
+
font-weight: 600;
|
|
1342
|
+
line-height: 1;
|
|
1343
|
+
z-index: 10;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
/* Annotations Panel - Documentation container */
|
|
1347
|
+
.${prefix}-annotations {
|
|
1348
|
+
background: #fafafa;
|
|
1349
|
+
border: 2px dashed #d1d5db;
|
|
1350
|
+
border-radius: 8px;
|
|
1351
|
+
padding: 16px;
|
|
1352
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
.${prefix}-annotations-header {
|
|
1356
|
+
display: flex;
|
|
1357
|
+
align-items: center;
|
|
1358
|
+
gap: 8px;
|
|
1359
|
+
font-weight: 600;
|
|
1360
|
+
font-size: 14px;
|
|
1361
|
+
color: #6b7280;
|
|
1362
|
+
margin-bottom: 16px;
|
|
1363
|
+
padding-bottom: 8px;
|
|
1364
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.${prefix}-annotations-icon {
|
|
1368
|
+
font-size: 16px;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
.${prefix}-annotations-content {
|
|
1372
|
+
display: flex;
|
|
1373
|
+
flex-direction: column;
|
|
1374
|
+
gap: 12px;
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
/* Annotation Item - Individual entry */
|
|
1378
|
+
.${prefix}-annotation-item {
|
|
1379
|
+
display: flex;
|
|
1380
|
+
flex-direction: column;
|
|
1381
|
+
gap: 4px;
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
.${prefix}-annotation-item-header {
|
|
1385
|
+
display: flex;
|
|
1386
|
+
align-items: center;
|
|
1387
|
+
gap: 8px;
|
|
1388
|
+
}
|
|
1389
|
+
|
|
1390
|
+
.${prefix}-annotation-marker {
|
|
1391
|
+
display: inline-flex;
|
|
1392
|
+
align-items: center;
|
|
1393
|
+
justify-content: center;
|
|
1394
|
+
width: 18px;
|
|
1395
|
+
height: 18px;
|
|
1396
|
+
border-radius: 50%;
|
|
1397
|
+
background: #3b82f6;
|
|
1398
|
+
color: white;
|
|
1399
|
+
font-size: 10px;
|
|
1400
|
+
font-weight: 600;
|
|
1401
|
+
flex-shrink: 0;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
.${prefix}-annotation-item-title {
|
|
1405
|
+
font-weight: 500;
|
|
1406
|
+
font-size: 13px;
|
|
1407
|
+
color: #374151;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.${prefix}-annotation-item-content {
|
|
1411
|
+
padding-left: 26px;
|
|
1412
|
+
font-size: 12px;
|
|
1413
|
+
color: #6b7280;
|
|
1414
|
+
line-height: 1.5;
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.${prefix}-annotation-item-content p,
|
|
1418
|
+
.${prefix}-annotation-item-content .${prefix}-text {
|
|
1419
|
+
margin: 0;
|
|
1420
|
+
font-size: 12px;
|
|
1421
|
+
color: #6b7280;
|
|
1422
|
+
}`;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1325
1425
|
// src/renderer/styles-components.ts
|
|
1326
1426
|
function generateComponentStyles(_theme, prefix = "wf") {
|
|
1327
1427
|
const parts = [
|
|
@@ -1335,7 +1435,8 @@ function generateComponentStyles(_theme, prefix = "wf") {
|
|
|
1335
1435
|
generateOverlayStyles(_theme, prefix),
|
|
1336
1436
|
generateNavigationStyles(_theme, prefix),
|
|
1337
1437
|
generateSemanticMarkerStyles(_theme, prefix),
|
|
1338
|
-
generateAccessibilityStyles(prefix)
|
|
1438
|
+
generateAccessibilityStyles(prefix),
|
|
1439
|
+
generateAnnotationStyles(_theme, prefix)
|
|
1339
1440
|
];
|
|
1340
1441
|
return parts.join("\n\n");
|
|
1341
1442
|
}
|
|
@@ -49392,6 +49493,117 @@ function renderDivider(node, ctx) {
|
|
|
49392
49493
|
return `<hr class="${ctx.prefix}-divider"${styleAttr} />`;
|
|
49393
49494
|
}
|
|
49394
49495
|
|
|
49496
|
+
// src/renderer/html/renderers/annotation.ts
|
|
49497
|
+
var MARKER_COLORS = {
|
|
49498
|
+
blue: { bg: "#3b82f6", border: "#2563eb" },
|
|
49499
|
+
red: { bg: "#ef4444", border: "#dc2626" },
|
|
49500
|
+
green: { bg: "#22c55e", border: "#16a34a" },
|
|
49501
|
+
yellow: { bg: "#eab308", border: "#ca8a04" },
|
|
49502
|
+
purple: { bg: "#a855f7", border: "#9333ea" },
|
|
49503
|
+
orange: { bg: "#f97316", border: "#ea580c" }
|
|
49504
|
+
};
|
|
49505
|
+
function getAnchorStyles(anchor) {
|
|
49506
|
+
if (!anchor) return "";
|
|
49507
|
+
const styles = ["position: absolute"];
|
|
49508
|
+
switch (anchor) {
|
|
49509
|
+
case "top-left":
|
|
49510
|
+
styles.push("top: -8px", "left: -8px");
|
|
49511
|
+
break;
|
|
49512
|
+
case "top-center":
|
|
49513
|
+
styles.push("top: -8px", "left: 50%", "transform: translateX(-50%)");
|
|
49514
|
+
break;
|
|
49515
|
+
case "top-right":
|
|
49516
|
+
styles.push("top: -8px", "right: -8px");
|
|
49517
|
+
break;
|
|
49518
|
+
case "center-left":
|
|
49519
|
+
styles.push("top: 50%", "left: -8px", "transform: translateY(-50%)");
|
|
49520
|
+
break;
|
|
49521
|
+
case "center":
|
|
49522
|
+
styles.push("top: 50%", "left: 50%", "transform: translate(-50%, -50%)");
|
|
49523
|
+
break;
|
|
49524
|
+
case "center-right":
|
|
49525
|
+
styles.push("top: 50%", "right: -8px", "transform: translateY(-50%)");
|
|
49526
|
+
break;
|
|
49527
|
+
case "bottom-left":
|
|
49528
|
+
styles.push("bottom: -8px", "left: -8px");
|
|
49529
|
+
break;
|
|
49530
|
+
case "bottom-center":
|
|
49531
|
+
styles.push("bottom: -8px", "left: 50%", "transform: translateX(-50%)");
|
|
49532
|
+
break;
|
|
49533
|
+
case "bottom-right":
|
|
49534
|
+
styles.push("bottom: -8px", "right: -8px");
|
|
49535
|
+
break;
|
|
49536
|
+
}
|
|
49537
|
+
return styles.join("; ");
|
|
49538
|
+
}
|
|
49539
|
+
function renderMarker(node, ctx) {
|
|
49540
|
+
const color = node.color || "blue";
|
|
49541
|
+
const colorConfig = MARKER_COLORS[color] || MARKER_COLORS.blue;
|
|
49542
|
+
const baseStyles = [
|
|
49543
|
+
"display: inline-flex",
|
|
49544
|
+
"align-items: center",
|
|
49545
|
+
"justify-content: center",
|
|
49546
|
+
"width: 20px",
|
|
49547
|
+
"height: 20px",
|
|
49548
|
+
"border-radius: 50%",
|
|
49549
|
+
`background: ${colorConfig.bg}`,
|
|
49550
|
+
`border: 2px solid ${colorConfig.border}`,
|
|
49551
|
+
"color: white",
|
|
49552
|
+
"font-size: 11px",
|
|
49553
|
+
"font-weight: 600",
|
|
49554
|
+
"line-height: 1",
|
|
49555
|
+
"z-index: 10"
|
|
49556
|
+
];
|
|
49557
|
+
const anchorStyles = getAnchorStyles(node.anchor);
|
|
49558
|
+
const commonStyles = ctx.buildCommonStyles(node);
|
|
49559
|
+
const allStyles = [
|
|
49560
|
+
...baseStyles,
|
|
49561
|
+
...anchorStyles ? [anchorStyles] : [],
|
|
49562
|
+
...commonStyles ? [commonStyles] : []
|
|
49563
|
+
].join("; ");
|
|
49564
|
+
return `<span class="${ctx.prefix}-marker" style="${allStyles}" aria-label="Marker ${node.number}">${node.number}</span>`;
|
|
49565
|
+
}
|
|
49566
|
+
function renderAnnotations(node, ctx) {
|
|
49567
|
+
const title = node.title || "\uD654\uBA74 \uC124\uBA85";
|
|
49568
|
+
const commonStyles = ctx.buildCommonStyles(node);
|
|
49569
|
+
const styleAttr = commonStyles ? ` style="${commonStyles}"` : "";
|
|
49570
|
+
const items = (node.children || []).map((child) => renderAnnotationItem(child, ctx)).join("\n");
|
|
49571
|
+
return `<aside class="${ctx.prefix}-annotations" data-role="documentation" aria-label="${ctx.escapeHtml(title)}"${styleAttr}>
|
|
49572
|
+
<header class="${ctx.prefix}-annotations-header">
|
|
49573
|
+
<span class="${ctx.prefix}-annotations-icon" aria-hidden="true">📋</span>
|
|
49574
|
+
<span>${ctx.escapeHtml(title)}</span>
|
|
49575
|
+
</header>
|
|
49576
|
+
<div class="${ctx.prefix}-annotations-content">
|
|
49577
|
+
${items}
|
|
49578
|
+
</div>
|
|
49579
|
+
</aside>`;
|
|
49580
|
+
}
|
|
49581
|
+
function renderAnnotationItem(node, ctx) {
|
|
49582
|
+
const color = MARKER_COLORS.blue;
|
|
49583
|
+
const markerStyle = [
|
|
49584
|
+
"display: inline-flex",
|
|
49585
|
+
"align-items: center",
|
|
49586
|
+
"justify-content: center",
|
|
49587
|
+
"width: 18px",
|
|
49588
|
+
"height: 18px",
|
|
49589
|
+
"border-radius: 50%",
|
|
49590
|
+
`background: ${color.bg}`,
|
|
49591
|
+
"color: white",
|
|
49592
|
+
"font-size: 10px",
|
|
49593
|
+
"font-weight: 600",
|
|
49594
|
+
"flex-shrink: 0"
|
|
49595
|
+
].join("; ");
|
|
49596
|
+
const children = node.children || [];
|
|
49597
|
+
const content = children.length > 0 ? ctx.renderChildren(children) : "";
|
|
49598
|
+
return `<div class="${ctx.prefix}-annotation-item">
|
|
49599
|
+
<div class="${ctx.prefix}-annotation-item-header">
|
|
49600
|
+
<span class="${ctx.prefix}-annotation-marker" style="${markerStyle}">${node.number}</span>
|
|
49601
|
+
<span class="${ctx.prefix}-annotation-item-title">${ctx.escapeHtml(node.title)}</span>
|
|
49602
|
+
</div>
|
|
49603
|
+
${content ? `<div class="${ctx.prefix}-annotation-item-content">${content}</div>` : ""}
|
|
49604
|
+
</div>`;
|
|
49605
|
+
}
|
|
49606
|
+
|
|
49395
49607
|
// src/renderer/html/index.ts
|
|
49396
49608
|
var SPACING_TOKENS = {
|
|
49397
49609
|
0: "0px",
|
|
@@ -49522,7 +49734,11 @@ var HtmlRenderer = class extends BaseRenderer {
|
|
|
49522
49734
|
Tabs: (node) => this.renderTabs(node),
|
|
49523
49735
|
Breadcrumb: (node) => this.renderBreadcrumb(node),
|
|
49524
49736
|
// Other
|
|
49525
|
-
Divider: (node) => this.renderDivider(node)
|
|
49737
|
+
Divider: (node) => this.renderDivider(node),
|
|
49738
|
+
// Annotation nodes
|
|
49739
|
+
Marker: (node) => this.renderMarker(node),
|
|
49740
|
+
Annotations: (node) => this.renderAnnotations(node),
|
|
49741
|
+
AnnotationItem: (node) => this.renderAnnotationItem(node)
|
|
49526
49742
|
};
|
|
49527
49743
|
}
|
|
49528
49744
|
/**
|
|
@@ -49944,6 +50160,18 @@ ${title}${children}
|
|
|
49944
50160
|
renderDivider(node) {
|
|
49945
50161
|
return renderDivider(node, this.getRenderContext());
|
|
49946
50162
|
}
|
|
50163
|
+
// ===========================================
|
|
50164
|
+
// Annotation Renderers
|
|
50165
|
+
// ===========================================
|
|
50166
|
+
renderMarker(node) {
|
|
50167
|
+
return renderMarker(node, this.getRenderContext());
|
|
50168
|
+
}
|
|
50169
|
+
renderAnnotations(node) {
|
|
50170
|
+
return renderAnnotations(node, this.getRenderContext());
|
|
50171
|
+
}
|
|
50172
|
+
renderAnnotationItem(node) {
|
|
50173
|
+
return renderAnnotationItem(node, this.getRenderContext());
|
|
50174
|
+
}
|
|
49947
50175
|
};
|
|
49948
50176
|
function createHtmlRenderer(options) {
|
|
49949
50177
|
return new HtmlRenderer(options);
|
package/dist/renderer.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-
|
|
1
|
+
import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-EbEsGNxL.cjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Renderer type definitions for wireweave
|
|
@@ -313,6 +313,9 @@ declare class HtmlRenderer extends BaseRenderer {
|
|
|
313
313
|
private renderTabs;
|
|
314
314
|
private renderBreadcrumb;
|
|
315
315
|
private renderDivider;
|
|
316
|
+
private renderMarker;
|
|
317
|
+
private renderAnnotations;
|
|
318
|
+
private renderAnnotationItem;
|
|
316
319
|
}
|
|
317
320
|
/**
|
|
318
321
|
* Create a new HTML renderer instance
|
package/dist/renderer.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-
|
|
1
|
+
import { a1 as WireframeDocument, A as AnyNode, P as PageNode } from './types-EbEsGNxL.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Renderer type definitions for wireweave
|
|
@@ -313,6 +313,9 @@ declare class HtmlRenderer extends BaseRenderer {
|
|
|
313
313
|
private renderTabs;
|
|
314
314
|
private renderBreadcrumb;
|
|
315
315
|
private renderDivider;
|
|
316
|
+
private renderMarker;
|
|
317
|
+
private renderAnnotations;
|
|
318
|
+
private renderAnnotationItem;
|
|
316
319
|
}
|
|
317
320
|
/**
|
|
318
321
|
* Create a new HTML renderer instance
|
package/dist/renderer.js
CHANGED
|
@@ -1284,6 +1284,106 @@ function generateAccessibilityStyles(prefix) {
|
|
|
1284
1284
|
}`;
|
|
1285
1285
|
}
|
|
1286
1286
|
|
|
1287
|
+
// src/renderer/styles/annotation.ts
|
|
1288
|
+
function generateAnnotationStyles(_theme, prefix) {
|
|
1289
|
+
return `/* Annotation Components */
|
|
1290
|
+
|
|
1291
|
+
/* Marker - Number marker for referencing */
|
|
1292
|
+
.${prefix}-marker {
|
|
1293
|
+
display: inline-flex;
|
|
1294
|
+
align-items: center;
|
|
1295
|
+
justify-content: center;
|
|
1296
|
+
width: 20px;
|
|
1297
|
+
height: 20px;
|
|
1298
|
+
border-radius: 50%;
|
|
1299
|
+
background: #3b82f6;
|
|
1300
|
+
border: 2px solid #2563eb;
|
|
1301
|
+
color: white;
|
|
1302
|
+
font-size: 11px;
|
|
1303
|
+
font-weight: 600;
|
|
1304
|
+
line-height: 1;
|
|
1305
|
+
z-index: 10;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
/* Annotations Panel - Documentation container */
|
|
1309
|
+
.${prefix}-annotations {
|
|
1310
|
+
background: #fafafa;
|
|
1311
|
+
border: 2px dashed #d1d5db;
|
|
1312
|
+
border-radius: 8px;
|
|
1313
|
+
padding: 16px;
|
|
1314
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
.${prefix}-annotations-header {
|
|
1318
|
+
display: flex;
|
|
1319
|
+
align-items: center;
|
|
1320
|
+
gap: 8px;
|
|
1321
|
+
font-weight: 600;
|
|
1322
|
+
font-size: 14px;
|
|
1323
|
+
color: #6b7280;
|
|
1324
|
+
margin-bottom: 16px;
|
|
1325
|
+
padding-bottom: 8px;
|
|
1326
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1327
|
+
}
|
|
1328
|
+
|
|
1329
|
+
.${prefix}-annotations-icon {
|
|
1330
|
+
font-size: 16px;
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
.${prefix}-annotations-content {
|
|
1334
|
+
display: flex;
|
|
1335
|
+
flex-direction: column;
|
|
1336
|
+
gap: 12px;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
/* Annotation Item - Individual entry */
|
|
1340
|
+
.${prefix}-annotation-item {
|
|
1341
|
+
display: flex;
|
|
1342
|
+
flex-direction: column;
|
|
1343
|
+
gap: 4px;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
.${prefix}-annotation-item-header {
|
|
1347
|
+
display: flex;
|
|
1348
|
+
align-items: center;
|
|
1349
|
+
gap: 8px;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.${prefix}-annotation-marker {
|
|
1353
|
+
display: inline-flex;
|
|
1354
|
+
align-items: center;
|
|
1355
|
+
justify-content: center;
|
|
1356
|
+
width: 18px;
|
|
1357
|
+
height: 18px;
|
|
1358
|
+
border-radius: 50%;
|
|
1359
|
+
background: #3b82f6;
|
|
1360
|
+
color: white;
|
|
1361
|
+
font-size: 10px;
|
|
1362
|
+
font-weight: 600;
|
|
1363
|
+
flex-shrink: 0;
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
.${prefix}-annotation-item-title {
|
|
1367
|
+
font-weight: 500;
|
|
1368
|
+
font-size: 13px;
|
|
1369
|
+
color: #374151;
|
|
1370
|
+
}
|
|
1371
|
+
|
|
1372
|
+
.${prefix}-annotation-item-content {
|
|
1373
|
+
padding-left: 26px;
|
|
1374
|
+
font-size: 12px;
|
|
1375
|
+
color: #6b7280;
|
|
1376
|
+
line-height: 1.5;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.${prefix}-annotation-item-content p,
|
|
1380
|
+
.${prefix}-annotation-item-content .${prefix}-text {
|
|
1381
|
+
margin: 0;
|
|
1382
|
+
font-size: 12px;
|
|
1383
|
+
color: #6b7280;
|
|
1384
|
+
}`;
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1287
1387
|
// src/renderer/styles-components.ts
|
|
1288
1388
|
function generateComponentStyles(_theme, prefix = "wf") {
|
|
1289
1389
|
const parts = [
|
|
@@ -1297,7 +1397,8 @@ function generateComponentStyles(_theme, prefix = "wf") {
|
|
|
1297
1397
|
generateOverlayStyles(_theme, prefix),
|
|
1298
1398
|
generateNavigationStyles(_theme, prefix),
|
|
1299
1399
|
generateSemanticMarkerStyles(_theme, prefix),
|
|
1300
|
-
generateAccessibilityStyles(prefix)
|
|
1400
|
+
generateAccessibilityStyles(prefix),
|
|
1401
|
+
generateAnnotationStyles(_theme, prefix)
|
|
1301
1402
|
];
|
|
1302
1403
|
return parts.join("\n\n");
|
|
1303
1404
|
}
|
|
@@ -49354,6 +49455,117 @@ function renderDivider(node, ctx) {
|
|
|
49354
49455
|
return `<hr class="${ctx.prefix}-divider"${styleAttr} />`;
|
|
49355
49456
|
}
|
|
49356
49457
|
|
|
49458
|
+
// src/renderer/html/renderers/annotation.ts
|
|
49459
|
+
var MARKER_COLORS = {
|
|
49460
|
+
blue: { bg: "#3b82f6", border: "#2563eb" },
|
|
49461
|
+
red: { bg: "#ef4444", border: "#dc2626" },
|
|
49462
|
+
green: { bg: "#22c55e", border: "#16a34a" },
|
|
49463
|
+
yellow: { bg: "#eab308", border: "#ca8a04" },
|
|
49464
|
+
purple: { bg: "#a855f7", border: "#9333ea" },
|
|
49465
|
+
orange: { bg: "#f97316", border: "#ea580c" }
|
|
49466
|
+
};
|
|
49467
|
+
function getAnchorStyles(anchor) {
|
|
49468
|
+
if (!anchor) return "";
|
|
49469
|
+
const styles = ["position: absolute"];
|
|
49470
|
+
switch (anchor) {
|
|
49471
|
+
case "top-left":
|
|
49472
|
+
styles.push("top: -8px", "left: -8px");
|
|
49473
|
+
break;
|
|
49474
|
+
case "top-center":
|
|
49475
|
+
styles.push("top: -8px", "left: 50%", "transform: translateX(-50%)");
|
|
49476
|
+
break;
|
|
49477
|
+
case "top-right":
|
|
49478
|
+
styles.push("top: -8px", "right: -8px");
|
|
49479
|
+
break;
|
|
49480
|
+
case "center-left":
|
|
49481
|
+
styles.push("top: 50%", "left: -8px", "transform: translateY(-50%)");
|
|
49482
|
+
break;
|
|
49483
|
+
case "center":
|
|
49484
|
+
styles.push("top: 50%", "left: 50%", "transform: translate(-50%, -50%)");
|
|
49485
|
+
break;
|
|
49486
|
+
case "center-right":
|
|
49487
|
+
styles.push("top: 50%", "right: -8px", "transform: translateY(-50%)");
|
|
49488
|
+
break;
|
|
49489
|
+
case "bottom-left":
|
|
49490
|
+
styles.push("bottom: -8px", "left: -8px");
|
|
49491
|
+
break;
|
|
49492
|
+
case "bottom-center":
|
|
49493
|
+
styles.push("bottom: -8px", "left: 50%", "transform: translateX(-50%)");
|
|
49494
|
+
break;
|
|
49495
|
+
case "bottom-right":
|
|
49496
|
+
styles.push("bottom: -8px", "right: -8px");
|
|
49497
|
+
break;
|
|
49498
|
+
}
|
|
49499
|
+
return styles.join("; ");
|
|
49500
|
+
}
|
|
49501
|
+
function renderMarker(node, ctx) {
|
|
49502
|
+
const color = node.color || "blue";
|
|
49503
|
+
const colorConfig = MARKER_COLORS[color] || MARKER_COLORS.blue;
|
|
49504
|
+
const baseStyles = [
|
|
49505
|
+
"display: inline-flex",
|
|
49506
|
+
"align-items: center",
|
|
49507
|
+
"justify-content: center",
|
|
49508
|
+
"width: 20px",
|
|
49509
|
+
"height: 20px",
|
|
49510
|
+
"border-radius: 50%",
|
|
49511
|
+
`background: ${colorConfig.bg}`,
|
|
49512
|
+
`border: 2px solid ${colorConfig.border}`,
|
|
49513
|
+
"color: white",
|
|
49514
|
+
"font-size: 11px",
|
|
49515
|
+
"font-weight: 600",
|
|
49516
|
+
"line-height: 1",
|
|
49517
|
+
"z-index: 10"
|
|
49518
|
+
];
|
|
49519
|
+
const anchorStyles = getAnchorStyles(node.anchor);
|
|
49520
|
+
const commonStyles = ctx.buildCommonStyles(node);
|
|
49521
|
+
const allStyles = [
|
|
49522
|
+
...baseStyles,
|
|
49523
|
+
...anchorStyles ? [anchorStyles] : [],
|
|
49524
|
+
...commonStyles ? [commonStyles] : []
|
|
49525
|
+
].join("; ");
|
|
49526
|
+
return `<span class="${ctx.prefix}-marker" style="${allStyles}" aria-label="Marker ${node.number}">${node.number}</span>`;
|
|
49527
|
+
}
|
|
49528
|
+
function renderAnnotations(node, ctx) {
|
|
49529
|
+
const title = node.title || "\uD654\uBA74 \uC124\uBA85";
|
|
49530
|
+
const commonStyles = ctx.buildCommonStyles(node);
|
|
49531
|
+
const styleAttr = commonStyles ? ` style="${commonStyles}"` : "";
|
|
49532
|
+
const items = (node.children || []).map((child) => renderAnnotationItem(child, ctx)).join("\n");
|
|
49533
|
+
return `<aside class="${ctx.prefix}-annotations" data-role="documentation" aria-label="${ctx.escapeHtml(title)}"${styleAttr}>
|
|
49534
|
+
<header class="${ctx.prefix}-annotations-header">
|
|
49535
|
+
<span class="${ctx.prefix}-annotations-icon" aria-hidden="true">📋</span>
|
|
49536
|
+
<span>${ctx.escapeHtml(title)}</span>
|
|
49537
|
+
</header>
|
|
49538
|
+
<div class="${ctx.prefix}-annotations-content">
|
|
49539
|
+
${items}
|
|
49540
|
+
</div>
|
|
49541
|
+
</aside>`;
|
|
49542
|
+
}
|
|
49543
|
+
function renderAnnotationItem(node, ctx) {
|
|
49544
|
+
const color = MARKER_COLORS.blue;
|
|
49545
|
+
const markerStyle = [
|
|
49546
|
+
"display: inline-flex",
|
|
49547
|
+
"align-items: center",
|
|
49548
|
+
"justify-content: center",
|
|
49549
|
+
"width: 18px",
|
|
49550
|
+
"height: 18px",
|
|
49551
|
+
"border-radius: 50%",
|
|
49552
|
+
`background: ${color.bg}`,
|
|
49553
|
+
"color: white",
|
|
49554
|
+
"font-size: 10px",
|
|
49555
|
+
"font-weight: 600",
|
|
49556
|
+
"flex-shrink: 0"
|
|
49557
|
+
].join("; ");
|
|
49558
|
+
const children = node.children || [];
|
|
49559
|
+
const content = children.length > 0 ? ctx.renderChildren(children) : "";
|
|
49560
|
+
return `<div class="${ctx.prefix}-annotation-item">
|
|
49561
|
+
<div class="${ctx.prefix}-annotation-item-header">
|
|
49562
|
+
<span class="${ctx.prefix}-annotation-marker" style="${markerStyle}">${node.number}</span>
|
|
49563
|
+
<span class="${ctx.prefix}-annotation-item-title">${ctx.escapeHtml(node.title)}</span>
|
|
49564
|
+
</div>
|
|
49565
|
+
${content ? `<div class="${ctx.prefix}-annotation-item-content">${content}</div>` : ""}
|
|
49566
|
+
</div>`;
|
|
49567
|
+
}
|
|
49568
|
+
|
|
49357
49569
|
// src/renderer/html/index.ts
|
|
49358
49570
|
var SPACING_TOKENS = {
|
|
49359
49571
|
0: "0px",
|
|
@@ -49484,7 +49696,11 @@ var HtmlRenderer = class extends BaseRenderer {
|
|
|
49484
49696
|
Tabs: (node) => this.renderTabs(node),
|
|
49485
49697
|
Breadcrumb: (node) => this.renderBreadcrumb(node),
|
|
49486
49698
|
// Other
|
|
49487
|
-
Divider: (node) => this.renderDivider(node)
|
|
49699
|
+
Divider: (node) => this.renderDivider(node),
|
|
49700
|
+
// Annotation nodes
|
|
49701
|
+
Marker: (node) => this.renderMarker(node),
|
|
49702
|
+
Annotations: (node) => this.renderAnnotations(node),
|
|
49703
|
+
AnnotationItem: (node) => this.renderAnnotationItem(node)
|
|
49488
49704
|
};
|
|
49489
49705
|
}
|
|
49490
49706
|
/**
|
|
@@ -49906,6 +50122,18 @@ ${title}${children}
|
|
|
49906
50122
|
renderDivider(node) {
|
|
49907
50123
|
return renderDivider(node, this.getRenderContext());
|
|
49908
50124
|
}
|
|
50125
|
+
// ===========================================
|
|
50126
|
+
// Annotation Renderers
|
|
50127
|
+
// ===========================================
|
|
50128
|
+
renderMarker(node) {
|
|
50129
|
+
return renderMarker(node, this.getRenderContext());
|
|
50130
|
+
}
|
|
50131
|
+
renderAnnotations(node) {
|
|
50132
|
+
return renderAnnotations(node, this.getRenderContext());
|
|
50133
|
+
}
|
|
50134
|
+
renderAnnotationItem(node) {
|
|
50135
|
+
return renderAnnotationItem(node, this.getRenderContext());
|
|
50136
|
+
}
|
|
49909
50137
|
};
|
|
49910
50138
|
function createHtmlRenderer(options) {
|
|
49911
50139
|
return new HtmlRenderer(options);
|
|
@@ -506,6 +506,73 @@ interface BreadcrumbNode extends BaseNode, CommonProps {
|
|
|
506
506
|
interface DividerComponentNode extends BaseNode, CommonProps {
|
|
507
507
|
type: 'Divider';
|
|
508
508
|
}
|
|
509
|
+
type MarkerColor = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange';
|
|
510
|
+
/**
|
|
511
|
+
* Marker - Number marker for referencing in annotations
|
|
512
|
+
*
|
|
513
|
+
* Displays a numbered circle that can be placed on UI elements.
|
|
514
|
+
* Recommended to use inside `relative` with `anchor` for positioning outside the UI.
|
|
515
|
+
*
|
|
516
|
+
* Example:
|
|
517
|
+
* ```wireframe
|
|
518
|
+
* relative {
|
|
519
|
+
* button "Submit"
|
|
520
|
+
* marker 1 anchor=top-right
|
|
521
|
+
* }
|
|
522
|
+
* ```
|
|
523
|
+
*/
|
|
524
|
+
interface MarkerNode extends BaseNode, CommonProps {
|
|
525
|
+
type: 'Marker';
|
|
526
|
+
/** The marker number (1, 2, 3, ...) */
|
|
527
|
+
number: number;
|
|
528
|
+
/** Marker color */
|
|
529
|
+
color?: MarkerColor;
|
|
530
|
+
/** Anchor position when inside a relative container */
|
|
531
|
+
anchor?: AnchorPosition;
|
|
532
|
+
}
|
|
533
|
+
/**
|
|
534
|
+
* Annotations - Documentation panel for screen specifications
|
|
535
|
+
*
|
|
536
|
+
* Container for annotation items that describe UI elements.
|
|
537
|
+
* Visually distinct from wireframe UI with dashed border and different background.
|
|
538
|
+
* Rendered with data-role="documentation" for LLM recognition.
|
|
539
|
+
*
|
|
540
|
+
* Example:
|
|
541
|
+
* ```wireframe
|
|
542
|
+
* annotations title="화면 설명" {
|
|
543
|
+
* item 1 "이메일 입력" { text "유효성 검사 적용" }
|
|
544
|
+
* item 2 "로그인 버튼" { text "OAuth 연동" }
|
|
545
|
+
* }
|
|
546
|
+
* ```
|
|
547
|
+
*/
|
|
548
|
+
interface AnnotationsNode extends BaseNode, CommonProps {
|
|
549
|
+
type: 'Annotations';
|
|
550
|
+
/** Panel title (default: "화면 설명" or "Annotations") */
|
|
551
|
+
title?: string;
|
|
552
|
+
children: AnnotationItemNode[];
|
|
553
|
+
}
|
|
554
|
+
/**
|
|
555
|
+
* AnnotationItem - Individual annotation entry
|
|
556
|
+
*
|
|
557
|
+
* Represents a single annotation with a marker number, title, and description content.
|
|
558
|
+
*
|
|
559
|
+
* Example:
|
|
560
|
+
* ```wireframe
|
|
561
|
+
* item 1 "이메일 입력" {
|
|
562
|
+
* text "- 유효성 검사 적용"
|
|
563
|
+
* text "- 최대 255자"
|
|
564
|
+
* }
|
|
565
|
+
* ```
|
|
566
|
+
*/
|
|
567
|
+
interface AnnotationItemNode extends BaseNode {
|
|
568
|
+
type: 'AnnotationItem';
|
|
569
|
+
/** The marker number this item references */
|
|
570
|
+
number: number;
|
|
571
|
+
/** Item title */
|
|
572
|
+
title: string;
|
|
573
|
+
/** Description content (Text nodes) */
|
|
574
|
+
children: AnyNode[];
|
|
575
|
+
}
|
|
509
576
|
type LayoutNode = PageNode | HeaderNode | MainNode | FooterNode | SidebarNode | SectionNode;
|
|
510
577
|
type GridNode = RowNode | ColNode | StackNode | RelativeNode;
|
|
511
578
|
type ContainerComponentNode = CardNode | ModalNode | DrawerNode | AccordionNode;
|
|
@@ -516,9 +583,10 @@ type DataNode = TableNode | ListNode;
|
|
|
516
583
|
type FeedbackNode = AlertNode | ToastNode | ProgressNode | SpinnerNode;
|
|
517
584
|
type OverlayNode = TooltipNode | PopoverNode | DropdownNode;
|
|
518
585
|
type NavigationNode = NavNode | TabsNode | BreadcrumbNode;
|
|
519
|
-
type
|
|
520
|
-
type
|
|
586
|
+
type AnnotationNode = MarkerNode | AnnotationsNode | AnnotationItemNode;
|
|
587
|
+
type ContainerNode = LayoutNode | GridNode | ContainerComponentNode | PopoverNode | TooltipNode | AnnotationsNode | AnnotationItemNode;
|
|
588
|
+
type LeafNode = TextContentNode | InputComponentNode | ButtonNode | DisplayNode | DataNode | FeedbackNode | DropdownNode | NavigationNode | DividerComponentNode | MarkerNode;
|
|
521
589
|
type AnyNode = ContainerNode | LeafNode;
|
|
522
|
-
type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Stack' | 'Relative' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider';
|
|
590
|
+
type NodeType = 'Document' | 'Page' | 'Header' | 'Main' | 'Footer' | 'Sidebar' | 'Section' | 'Row' | 'Col' | 'Stack' | 'Relative' | 'Card' | 'Modal' | 'Drawer' | 'Accordion' | 'Text' | 'Title' | 'Link' | 'Input' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'Button' | 'Image' | 'Placeholder' | 'Avatar' | 'Badge' | 'Icon' | 'Table' | 'List' | 'Alert' | 'Toast' | 'Progress' | 'Spinner' | 'Tooltip' | 'Popover' | 'Dropdown' | 'Nav' | 'Tabs' | 'Breadcrumb' | 'Divider' | 'Marker' | 'Annotations' | 'AnnotationItem';
|
|
523
591
|
|
|
524
|
-
export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AnchorPosition as a4,
|
|
592
|
+
export type { ToastNode as $, AnyNode as A, BadgeNode as B, CardNode as C, DataNode as D, RowNode as E, FeedbackNode as F, GridNode as G, HeaderNode as H, IconNode as I, SelectNode as J, SidebarNode as K, LayoutNode as L, MainNode as M, NavNode as N, OverlayNode as O, PageNode as P, SliderNode as Q, RadioNode as R, SectionNode as S, SpinnerNode as T, SwitchNode as U, TableNode as V, TabsNode as W, TextContentNode as X, TextNode as Y, TextareaNode as Z, TitleNode as _, AccordionNode as a, TooltipNode as a0, WireframeDocument as a1, AlertVariant as a2, AlignValue as a3, AnchorPosition as a4, AnnotationItemNode as a5, AnnotationNode as a6, AnnotationsNode as a7, AppearanceProps as a8, AvatarSize as a9, NavChild as aA, NavDivider as aB, NavGroupNode as aC, NavItem as aD, Position as aE, PositionProps as aF, RelativeNode as aG, SelectOption as aH, ShadowValue as aI, SizeProps as aJ, SourceLocation as aK, SpacingProps as aL, SpacingValue as aM, SpinnerSize as aN, SpinnerSizeToken as aO, StackNode as aP, TabNode as aQ, TextAlign as aR, TextSize as aS, TextSizeToken as aT, TextWeight as aU, TitleLevel as aV, ToastPosition as aW, TooltipPosition as aX, ValueWithUnit as aY, WidthValue as aZ, AvatarSizeToken as aa, BadgeSize as ab, BadgeSizeToken as ac, BadgeVariant as ad, BaseNode as ae, BreadcrumbItem as af, ButtonSize as ag, ButtonSizeToken as ah, ButtonVariant as ai, CommonProps as aj, DirectionValue as ak, DividerNode as al, DrawerPosition as am, DropdownItemNode as an, FlexProps as ao, GridProps as ap, HeightValue as aq, IconSize as ar, IconSizeToken as as, InputType as at, InteractiveProps as au, JustifyValue as av, ListItemNode as aw, MarkerColor as ax, MarkerNode as ay, NavBlockItem as az, AlertNode as b, AvatarNode as c, BreadcrumbNode as d, ButtonNode as e, CheckboxNode as f, ColNode as g, ContainerComponentNode as h, ContainerNode as i, DisplayNode as j, DividerComponentNode as k, DrawerNode as l, DropdownNode as m, FooterNode as n, ImageNode as o, InputComponentNode as p, InputNode as q, LeafNode as r, LinkNode as s, ListNode as t, ModalNode as u, NavigationNode as v, NodeType as w, PlaceholderNode as x, PopoverNode as y, ProgressNode as z };
|