@cardenelabs/cdl 0.41.0 → 0.42.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/CHANGELOG.md +88 -1
- package/dist/index.cjs +31 -68
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +31 -68
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +11 -44
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +11 -44
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/layout/spec.ts +8 -3
- package/src/visual-validate.ts +131 -104
package/dist/index.d.cts
CHANGED
|
@@ -1581,7 +1581,7 @@ interface Violation {
|
|
|
1581
1581
|
detail: string;
|
|
1582
1582
|
severity: "error" | "warn";
|
|
1583
1583
|
}
|
|
1584
|
-
type VisualAxis = "node-visibility" | "edge-label-overlap" | "edge-label-proximity" | "text-readability" | "row-format" | "alignment" | "clearance" | "arrow-endpoint-anchoring" | "label-char-range" | "node-overlap" | "edge-crossing" | "edge-node-cross" | "edge-segment-orthogonality" | "label-inside-viewbox" | "lane-cx-consistency" | "row-vertical-spacing" | "group-boundary-clearance" | "node-vertical-clearance" | "lane-lane-gap" | "arrow-marker-clearance" | "grid-alignment" | "phase-layout-stability" | "responsive-viewport" | "accessibility-basics" | "animation-frame-integrity" | "i18n-cjk-detection" | "contrast-basics" | "print-media-compat" | "color-blind-safety" | "marker-gradient-def-integrity" | "
|
|
1584
|
+
type VisualAxis = "node-visibility" | "edge-label-overlap" | "edge-label-proximity" | "text-readability" | "row-format" | "alignment" | "clearance" | "arrow-endpoint-anchoring" | "label-char-range" | "node-overlap" | "edge-crossing" | "edge-node-cross" | "edge-segment-orthogonality" | "label-inside-viewbox" | "lane-cx-consistency" | "row-vertical-spacing" | "group-boundary-clearance" | "node-vertical-clearance" | "lane-lane-gap" | "arrow-marker-clearance" | "grid-alignment" | "phase-layout-stability" | "responsive-viewport" | "accessibility-basics" | "animation-frame-integrity" | "i18n-cjk-detection" | "contrast-basics" | "print-media-compat" | "color-blind-safety" | "marker-gradient-def-integrity" | "dom-complexity-budget" | "reduced-motion-compat" | "touch-target-size" | "row-content-typing" | "terminal-safe-text" | "gpu-layer-efficiency" | "svg-injection-safety" | "seo-metadata-quality" | "bidi-hyphenation" | "structured-data-extraction" | "diagram-version-semver" | "migration-path-consistency" | "axis-coverage-meta" | "axis-documentation-completeness" | "fixture-drift-detection" | "locale-parity" | "validate-performance-budget" | "node-inside-viewbox" | "shape-label-dropped" | "box-line-dropped" | "node-inside-lane" | "edge-inside-viewbox" | "lane-label-inside-viewbox" | "lane-label-overlap" | "row-alignment" | "column-alignment" | "edge-stubout-min" | "fan-origin-single-point" | "detour-slot-distinct" | "arrow-endpoint-center" | "lane-border-clearance" | "row-gap-uniform" | "column-gap-uniform" | "rows-not-rendered" | "title-row-overlap" | "malformed-input" | "validation-interrupted";
|
|
1585
1585
|
/**
|
|
1586
1586
|
* 検査の用途。 用途によって見るべき軸が違う。
|
|
1587
1587
|
*
|
package/dist/index.d.ts
CHANGED
|
@@ -1581,7 +1581,7 @@ interface Violation {
|
|
|
1581
1581
|
detail: string;
|
|
1582
1582
|
severity: "error" | "warn";
|
|
1583
1583
|
}
|
|
1584
|
-
type VisualAxis = "node-visibility" | "edge-label-overlap" | "edge-label-proximity" | "text-readability" | "row-format" | "alignment" | "clearance" | "arrow-endpoint-anchoring" | "label-char-range" | "node-overlap" | "edge-crossing" | "edge-node-cross" | "edge-segment-orthogonality" | "label-inside-viewbox" | "lane-cx-consistency" | "row-vertical-spacing" | "group-boundary-clearance" | "node-vertical-clearance" | "lane-lane-gap" | "arrow-marker-clearance" | "grid-alignment" | "phase-layout-stability" | "responsive-viewport" | "accessibility-basics" | "animation-frame-integrity" | "i18n-cjk-detection" | "contrast-basics" | "print-media-compat" | "color-blind-safety" | "marker-gradient-def-integrity" | "
|
|
1584
|
+
type VisualAxis = "node-visibility" | "edge-label-overlap" | "edge-label-proximity" | "text-readability" | "row-format" | "alignment" | "clearance" | "arrow-endpoint-anchoring" | "label-char-range" | "node-overlap" | "edge-crossing" | "edge-node-cross" | "edge-segment-orthogonality" | "label-inside-viewbox" | "lane-cx-consistency" | "row-vertical-spacing" | "group-boundary-clearance" | "node-vertical-clearance" | "lane-lane-gap" | "arrow-marker-clearance" | "grid-alignment" | "phase-layout-stability" | "responsive-viewport" | "accessibility-basics" | "animation-frame-integrity" | "i18n-cjk-detection" | "contrast-basics" | "print-media-compat" | "color-blind-safety" | "marker-gradient-def-integrity" | "dom-complexity-budget" | "reduced-motion-compat" | "touch-target-size" | "row-content-typing" | "terminal-safe-text" | "gpu-layer-efficiency" | "svg-injection-safety" | "seo-metadata-quality" | "bidi-hyphenation" | "structured-data-extraction" | "diagram-version-semver" | "migration-path-consistency" | "axis-coverage-meta" | "axis-documentation-completeness" | "fixture-drift-detection" | "locale-parity" | "validate-performance-budget" | "node-inside-viewbox" | "shape-label-dropped" | "box-line-dropped" | "node-inside-lane" | "edge-inside-viewbox" | "lane-label-inside-viewbox" | "lane-label-overlap" | "row-alignment" | "column-alignment" | "edge-stubout-min" | "fan-origin-single-point" | "detour-slot-distinct" | "arrow-endpoint-center" | "lane-border-clearance" | "row-gap-uniform" | "column-gap-uniform" | "rows-not-rendered" | "title-row-overlap" | "malformed-input" | "validation-interrupted";
|
|
1585
1585
|
/**
|
|
1586
1586
|
* 検査の用途。 用途によって見るべき軸が違う。
|
|
1587
1587
|
*
|
package/dist/index.js
CHANGED
|
@@ -15533,7 +15533,6 @@ function emptyCounts() {
|
|
|
15533
15533
|
"print-media-compat": 0,
|
|
15534
15534
|
"color-blind-safety": 0,
|
|
15535
15535
|
"marker-gradient-def-integrity": 0,
|
|
15536
|
-
"subpixel-precision": 0,
|
|
15537
15536
|
"dom-complexity-budget": 0,
|
|
15538
15537
|
"reduced-motion-compat": 0,
|
|
15539
15538
|
"touch-target-size": 0,
|
|
@@ -16928,7 +16927,10 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
16928
16927
|
} catch {
|
|
16929
16928
|
}
|
|
16930
16929
|
}
|
|
16931
|
-
const
|
|
16930
|
+
const RESPONSIVE_REF_CONTAINER_PX = 1100;
|
|
16931
|
+
const RESPONSIVE_MIN_ON_SCREEN_FONT_PX = 12;
|
|
16932
|
+
const RESPONSIVE_BASE_FONT_WORLD = 22;
|
|
16933
|
+
const RESPONSIVE_MAX_VIEWBOX_W = RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX / RESPONSIVE_MIN_ON_SCREEN_FONT_PX;
|
|
16932
16934
|
const vbResp = laid.viewBox;
|
|
16933
16935
|
if (!(vbResp.w > 0) || !(vbResp.h > 0) || !Number.isFinite(vbResp.w) || !Number.isFinite(vbResp.h)) {
|
|
16934
16936
|
push(
|
|
@@ -16936,15 +16938,13 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
16936
16938
|
`viewBox \u5BF8\u6CD5 ${vbResp.w}\xD7${vbResp.h} \u304C\u63CF\u753B\u4E0D\u80FD (\u6B63\u306E\u6709\u9650\u5024\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308B)`,
|
|
16937
16939
|
"warn"
|
|
16938
16940
|
);
|
|
16939
|
-
} else {
|
|
16940
|
-
const
|
|
16941
|
-
|
|
16942
|
-
|
|
16943
|
-
|
|
16944
|
-
|
|
16945
|
-
|
|
16946
|
-
);
|
|
16947
|
-
}
|
|
16941
|
+
} else if (vbResp.w > RESPONSIVE_MAX_VIEWBOX_W) {
|
|
16942
|
+
const \u753B\u9762\u4E0A\u306E\u5B57 = RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX / vbResp.w;
|
|
16943
|
+
push(
|
|
16944
|
+
"responsive-viewport",
|
|
16945
|
+
`viewBox width ${vbResp.w} \u304C\u4E0A\u9650 ${RESPONSIVE_MAX_VIEWBOX_W.toFixed(0)} \u8D85\u3048 (\u89AA\u5E45 ${RESPONSIVE_REF_CONTAINER_PX}px \u3067\u7BB1\u306E\u984C\u304C ${\u753B\u9762\u4E0A\u306E\u5B57.toFixed(1)}px\u3001 \u4E0B\u9650 ${RESPONSIVE_MIN_ON_SCREEN_FONT_PX}px)`,
|
|
16946
|
+
"warn"
|
|
16947
|
+
);
|
|
16948
16948
|
}
|
|
16949
16949
|
if (!(diag.topic?.trim() ?? "")) {
|
|
16950
16950
|
push(
|
|
@@ -17116,39 +17116,6 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
17116
17116
|
);
|
|
17117
17117
|
}
|
|
17118
17118
|
}
|
|
17119
|
-
const SUBPIXEL_TOL = 0.5;
|
|
17120
|
-
function isSubpixel(v) {
|
|
17121
|
-
const nearestHalf = Math.round(v * 2) / 2;
|
|
17122
|
-
return Math.abs(v - nearestHalf) > SUBPIXEL_TOL / 10;
|
|
17123
|
-
}
|
|
17124
|
-
for (const n of laid.nodes) {
|
|
17125
|
-
if (n.id.endsWith("-spacer") || /^s\d+-/.test(n.id)) continue;
|
|
17126
|
-
if (isSubpixel(n.cx) || isSubpixel(n.cy)) {
|
|
17127
|
-
push(
|
|
17128
|
-
"subpixel-precision",
|
|
17129
|
-
`node "${n.id}" \u5EA7\u6A19 (${n.cx.toFixed(2)}, ${n.cy.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
|
|
17130
|
-
"warn"
|
|
17131
|
-
);
|
|
17132
|
-
}
|
|
17133
|
-
}
|
|
17134
|
-
for (const e of laid.edges) {
|
|
17135
|
-
if (isSubpixel(e.labelX) || isSubpixel(e.labelY)) {
|
|
17136
|
-
push(
|
|
17137
|
-
"subpixel-precision",
|
|
17138
|
-
`edge "${e.id}" label \u5EA7\u6A19 (${e.labelX.toFixed(2)}, ${e.labelY.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
|
|
17139
|
-
"warn"
|
|
17140
|
-
);
|
|
17141
|
-
}
|
|
17142
|
-
}
|
|
17143
|
-
for (const l of laid.lanes) {
|
|
17144
|
-
if (isSubpixel(l.x) || isSubpixel(l.y)) {
|
|
17145
|
-
push(
|
|
17146
|
-
"subpixel-precision",
|
|
17147
|
-
`lane "${l.id}" \u5EA7\u6A19 (${l.x.toFixed(2)}, ${l.y.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
|
|
17148
|
-
"warn"
|
|
17149
|
-
);
|
|
17150
|
-
}
|
|
17151
|
-
}
|
|
17152
17119
|
const DOM_COMPLEXITY_BUDGET = 400;
|
|
17153
17120
|
const totalElements = laid.nodes.length + laid.edges.length + laid.lanes.length + diag.phases.length;
|
|
17154
17121
|
if (totalElements > DOM_COMPLEXITY_BUDGET) {
|
|
@@ -17705,6 +17672,24 @@ function visualValidateAll(diagrams, opts) {
|
|
|
17705
17672
|
metaViolations
|
|
17706
17673
|
};
|
|
17707
17674
|
}
|
|
17675
|
+
var PERF_BUDGET_TOTAL_MS = 5e3;
|
|
17676
|
+
var PERF_SLOWEST_SAMPLE = 5;
|
|
17677
|
+
function perfBudgetViolations(durations, diagrams = []) {
|
|
17678
|
+
const total = durations.reduce((s, d) => s + d, 0);
|
|
17679
|
+
if (total <= PERF_BUDGET_TOTAL_MS) return [];
|
|
17680
|
+
const \u91CD\u3044\u9806 = durations.map((ms, i) => ({ id: diagrams[i]?.id ?? "?", ms })).sort((a, b) => b.ms - a.ms);
|
|
17681
|
+
const \u629C\u7C8B = \u91CD\u3044\u9806.slice(0, PERF_SLOWEST_SAMPLE);
|
|
17682
|
+
const \u6B8B\u308A = \u91CD\u3044\u9806.length - \u629C\u7C8B.length;
|
|
17683
|
+
const \u5185\u8A33 = \u629C\u7C8B.map((d) => `"${d.id}" ${d.ms}ms`).join(" / ") + (\u6B8B\u308A > 0 ? `\u3001 \u6B8B\u308A ${\u6B8B\u308A} \u56F3\u306F\u51FA\u3057\u3066\u3044\u306A\u3044` : "");
|
|
17684
|
+
return [
|
|
17685
|
+
{
|
|
17686
|
+
axis: "validate-performance-budget",
|
|
17687
|
+
diagramId: "__meta__",
|
|
17688
|
+
detail: `visualValidateAll \u5168 ${durations.length} \u56F3\u306E\u7D2F\u8A08 ${total}ms > ${PERF_BUDGET_TOTAL_MS}ms budget (\u91CD\u3044\u9806 ${\u5185\u8A33})`,
|
|
17689
|
+
severity: "warn"
|
|
17690
|
+
}
|
|
17691
|
+
];
|
|
17692
|
+
}
|
|
17708
17693
|
function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports = []) {
|
|
17709
17694
|
const out = [];
|
|
17710
17695
|
const totalErrors = reports.reduce(
|
|
@@ -17720,27 +17705,7 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
|
|
|
17720
17705
|
severity: "warn"
|
|
17721
17706
|
});
|
|
17722
17707
|
}
|
|
17723
|
-
|
|
17724
|
-
const PERF_BUDGET_TOTAL_MS = 5e3;
|
|
17725
|
-
const overBudgetIdx = durations.findIndex((d) => d > PERF_BUDGET_PER_DIAGRAM_MS);
|
|
17726
|
-
if (overBudgetIdx >= 0) {
|
|
17727
|
-
const did = diagrams[overBudgetIdx]?.id ?? "?";
|
|
17728
|
-
out.push({
|
|
17729
|
-
axis: "validate-performance-budget",
|
|
17730
|
-
diagramId: did,
|
|
17731
|
-
detail: `diagram "${did}" validate ${durations[overBudgetIdx]}ms > ${PERF_BUDGET_PER_DIAGRAM_MS}ms budget`,
|
|
17732
|
-
severity: "warn"
|
|
17733
|
-
});
|
|
17734
|
-
}
|
|
17735
|
-
const totalDur = durations.reduce((s, d) => s + d, 0);
|
|
17736
|
-
if (totalDur > PERF_BUDGET_TOTAL_MS) {
|
|
17737
|
-
out.push({
|
|
17738
|
-
axis: "validate-performance-budget",
|
|
17739
|
-
diagramId: "__meta__",
|
|
17740
|
-
detail: `visualValidateAll \u5168 diagram \u7D2F\u8A08 ${totalDur}ms > ${PERF_BUDGET_TOTAL_MS}ms budget`,
|
|
17741
|
-
severity: "warn"
|
|
17742
|
-
});
|
|
17743
|
-
}
|
|
17708
|
+
out.push(...perfBudgetViolations(durations, diagrams));
|
|
17744
17709
|
const DEAD_ALLOWLIST = [
|
|
17745
17710
|
// catalog で自然発火なしを許容する security / migration / performance / meta / dev-quality axis 群。
|
|
17746
17711
|
// 実 diagram に該当データ (XSS / migration list / oversized / broken doc) が混入するのが稀なため。
|
|
@@ -17781,7 +17746,6 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
|
|
|
17781
17746
|
"print-media-compat",
|
|
17782
17747
|
"color-blind-safety",
|
|
17783
17748
|
"marker-gradient-def-integrity",
|
|
17784
|
-
"subpixel-precision",
|
|
17785
17749
|
"dom-complexity-budget",
|
|
17786
17750
|
"reduced-motion-compat",
|
|
17787
17751
|
"touch-target-size",
|
|
@@ -17850,7 +17814,6 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
|
|
|
17850
17814
|
"print-media-compat",
|
|
17851
17815
|
"color-blind-safety",
|
|
17852
17816
|
"marker-gradient-def-integrity",
|
|
17853
|
-
"subpixel-precision",
|
|
17854
17817
|
"dom-complexity-budget",
|
|
17855
17818
|
"reduced-motion-compat",
|
|
17856
17819
|
"touch-target-size",
|
|
@@ -17898,7 +17861,7 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
|
|
|
17898
17861
|
});
|
|
17899
17862
|
}
|
|
17900
17863
|
}
|
|
17901
|
-
const EXPECTED_AXIS_COUNT =
|
|
17864
|
+
const EXPECTED_AXIS_COUNT = 66;
|
|
17902
17865
|
if (allAxes.length !== EXPECTED_AXIS_COUNT) {
|
|
17903
17866
|
out.push({
|
|
17904
17867
|
axis: "axis-documentation-completeness",
|