@principal-ai/principal-view-react 0.16.46 → 0.16.47
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/subsystem/ComponentDeclaration.d.ts.map +1 -1
- package/dist/subsystem/ComponentDeclaration.js +34 -5
- package/dist/subsystem/ComponentDeclaration.js.map +1 -1
- package/dist/subsystem/tokenizeComponent.d.ts +1 -1
- package/dist/subsystem/tokenizeComponent.d.ts.map +1 -1
- package/dist/subsystem/tokenizeComponent.js +2 -2
- package/dist/subsystem/tokenizeComponent.js.map +1 -1
- package/package.json +1 -1
- package/src/subsystem/ComponentDeclaration.tsx +34 -4
- package/src/subsystem/tokenizeComponent.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentDeclaration.d.ts","sourceRoot":"","sources":["../../src/subsystem/ComponentDeclaration.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,SAAS,CAAC;AAgCjB;kEACkE;AAClE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;+DAC2D;IAC3D,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,eAAiC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,
|
|
1
|
+
{"version":3,"file":"ComponentDeclaration.d.ts","sourceRoot":"","sources":["../../src/subsystem/ComponentDeclaration.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,SAAS,CAAC;AAgCjB;kEACkE;AAClE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,6DAA6D;IAC7D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;+DAC2D;IAC3D,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,iFAAiF;AACjF,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,eAAiC,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAkPrI"}
|
|
@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
|
|
|
6
6
|
* members as signatures. Graphify relationship drill-downs appear as trailing
|
|
7
7
|
* comments. File content lives in the bottom FileDrawer, not here.
|
|
8
8
|
*/
|
|
9
|
-
import { useEffect, useState } from 'react';
|
|
9
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
10
10
|
import { AlignLeft, FileText } from 'lucide-react';
|
|
11
11
|
import { useTheme } from '@principal-ade/industry-theme';
|
|
12
12
|
import { KIND_COLOR, formatPurl, } from './model';
|
|
@@ -115,6 +115,35 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
115
115
|
textDecoration: fileHovered && onOpenFile ? 'underline' : undefined,
|
|
116
116
|
textUnderlineOffset: 2,
|
|
117
117
|
}, children: component.file }) }), 'file'));
|
|
118
|
+
// --- Container width measurement --------------------------------------
|
|
119
|
+
// Approximate character count from the container's clientWidth so Prettier
|
|
120
|
+
// wraps at the same column the code block will actually use.
|
|
121
|
+
const containerRef = useRef(null);
|
|
122
|
+
const [printWidth, setPrintWidth] = useState(80);
|
|
123
|
+
const measure = useCallback(() => {
|
|
124
|
+
const el = containerRef.current;
|
|
125
|
+
if (!el)
|
|
126
|
+
return;
|
|
127
|
+
const ch = el.querySelector('[data-declaration-line]');
|
|
128
|
+
if (ch) {
|
|
129
|
+
// Use the width of a single `ch` unit from the monospace container.
|
|
130
|
+
const charWidth = ch.getBoundingClientRect().width || 8.4;
|
|
131
|
+
setPrintWidth(Math.max(40, Math.floor(el.clientWidth / charWidth)));
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
// Fallback: assume ~8.4 px per char at 14px monospace.
|
|
135
|
+
setPrintWidth(Math.max(40, Math.floor(el.clientWidth / 8.4)));
|
|
136
|
+
}
|
|
137
|
+
}, []);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
measure();
|
|
140
|
+
const el = containerRef.current;
|
|
141
|
+
if (!el)
|
|
142
|
+
return;
|
|
143
|
+
const ro = new ResizeObserver(measure);
|
|
144
|
+
ro.observe(el);
|
|
145
|
+
return () => ro.disconnect();
|
|
146
|
+
}, [measure]);
|
|
118
147
|
// --- Declaration tokens ------------------------------------------------
|
|
119
148
|
// Tokenize asynchronously via Prettier + highlight.js. Pre-tokenized
|
|
120
149
|
// tokens from the wire skip the pipeline entirely.
|
|
@@ -125,12 +154,12 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
125
154
|
return;
|
|
126
155
|
}
|
|
127
156
|
let cancelled = false;
|
|
128
|
-
tokenizeComponent(component).then((t) => {
|
|
157
|
+
tokenizeComponent(component, printWidth).then((t) => {
|
|
129
158
|
if (!cancelled)
|
|
130
159
|
setTokens(t);
|
|
131
160
|
});
|
|
132
161
|
return () => { cancelled = true; };
|
|
133
|
-
}, [component]);
|
|
162
|
+
}, [component, printWidth]);
|
|
134
163
|
const declLines = [[]];
|
|
135
164
|
let di = 0;
|
|
136
165
|
for (const tok of tokens) {
|
|
@@ -144,7 +173,7 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
144
173
|
for (let li = 0; li < declLines.length; li++) {
|
|
145
174
|
if (declLines[li].length === 0)
|
|
146
175
|
continue;
|
|
147
|
-
lines.push(_jsx("div", { style: { display: 'flex', alignItems: 'center', whiteSpace: 'pre', minHeight: 18 }, children: declLines[li] }, `decl-${li}`));
|
|
176
|
+
lines.push(_jsx("div", { "data-declaration-line": true, style: { display: 'flex', alignItems: 'center', whiteSpace: 'pre', minHeight: 18 }, children: declLines[li] }, `decl-${li}`));
|
|
148
177
|
}
|
|
149
178
|
// Purpose prose follows the declaration — identity and syntax first, the
|
|
150
179
|
// explanation underneath. Newlines split into separate prose lines so a
|
|
@@ -153,7 +182,7 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
153
182
|
lines.push(line(_jsx("div", { style: { height: 6 } }), 'purpose-gap'));
|
|
154
183
|
component.purpose.split("\n").forEach((purposeLine, i) => lines.push(line(_jsx("span", { style: { ...purposeStyle, display: 'block' }, children: purposeLine.trim() }, `purpose${i}`), `purpose${i}`)));
|
|
155
184
|
}
|
|
156
|
-
return (_jsx("div", { style: {
|
|
185
|
+
return (_jsx("div", { ref: containerRef, style: {
|
|
157
186
|
background: theme.colors.backgroundSecondary,
|
|
158
187
|
padding: '10px 12px',
|
|
159
188
|
fontFamily: theme.fonts.monospace,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentDeclaration.js","sourceRoot":"","sources":["../../src/subsystem/ComponentDeclaration.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ComponentDeclaration.js","sourceRoot":"","sources":["../../src/subsystem/ComponentDeclaration.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,5 +15,5 @@ import type { SubsystemComponent, SubsystemDeclToken } from './model';
|
|
|
15
15
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
16
16
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
17
17
|
*/
|
|
18
|
-
export declare function tokenizeComponent(component: SubsystemComponent): Promise<SubsystemDeclToken[]>;
|
|
18
|
+
export declare function tokenizeComponent(component: SubsystemComponent, printWidth?: number): Promise<SubsystemDeclToken[]>;
|
|
19
19
|
//# sourceMappingURL=tokenizeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeComponent.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBtE;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"tokenizeComponent.d.ts","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAyBtE;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,SAAK,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC,CA2BrH"}
|
|
@@ -32,7 +32,7 @@ async function getPrettier() {
|
|
|
32
32
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
33
33
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
34
34
|
*/
|
|
35
|
-
export async function tokenizeComponent(component) {
|
|
35
|
+
export async function tokenizeComponent(component, printWidth = 80) {
|
|
36
36
|
// Pre-tokenized tokens from the wire take precedence.
|
|
37
37
|
if (component.tokens)
|
|
38
38
|
return component.tokens;
|
|
@@ -54,7 +54,7 @@ export async function tokenizeComponent(component) {
|
|
|
54
54
|
const formatted = await prettier.format(raw, {
|
|
55
55
|
parser: 'typescript',
|
|
56
56
|
plugins: [plugins.typescript, plugins.estree],
|
|
57
|
-
printWidth
|
|
57
|
+
printWidth,
|
|
58
58
|
});
|
|
59
59
|
return tokenizeFormatted(formatted);
|
|
60
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,8CAA8C;AAC9C,IAAI,eAAe,GAAyD,IAAI,CAAC;AACjF,IAAI,sBAAsB,GAGd,IAAI,CAAC;AAEjB,KAAK,UAAU,WAAW;IACxB,IAAI,CAAC,eAAe,EAAE;QACpB,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,sBAAsB,EAAE;QAC3B,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC;YACnC,MAAM,CAAC,6BAA6B,CAAC;YACrC,MAAM,CAAC,yBAAyB,CAAC;SAClC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7D;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACzF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,SAA6B;
|
|
1
|
+
{"version":3,"file":"tokenizeComponent.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,8CAA8C;AAC9C,IAAI,eAAe,GAAyD,IAAI,CAAC;AACjF,IAAI,sBAAsB,GAGd,IAAI,CAAC;AAEjB,KAAK,UAAU,WAAW;IACxB,IAAI,CAAC,eAAe,EAAE;QACpB,eAAe,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,sBAAsB,EAAE;QAC3B,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC;YACnC,MAAM,CAAC,6BAA6B,CAAC;YACrC,MAAM,CAAC,yBAAyB,CAAC;SAClC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7D;IACD,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,sBAAsB,CAAC,CAAC,CAAC;IACzF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,SAA6B,EAAE,UAAU,GAAG,EAAE;IACpF,sDAAsD;IACtD,IAAI,SAAS,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC,MAAM,CAAC;IAE9C,yDAAyD;IACzD,MAAM,IAAI,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,IAAI,SAAS,CAAC,IAAI,CAAC;IACtD,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;QAC9F,OAAO;YACL,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;YACrC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;YAClC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;YAClC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC/B,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE;SACnC,CAAC;KACH;IAED,+BAA+B;IAC/B,MAAM,GAAG,GAAG,yBAAyB,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,WAAW,EAAE,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE;QAC3C,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC;QAC7C,UAAU;KACX,CAAC,CAAC;IAEH,OAAO,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACtC,CAAC"}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* comments. File content lives in the bottom FileDrawer, not here.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { useEffect, useState, type ReactNode } from 'react';
|
|
9
|
+
import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
|
|
10
10
|
import { AlignLeft, FileText } from 'lucide-react';
|
|
11
11
|
import { useTheme } from '@principal-ade/industry-theme';
|
|
12
12
|
import {
|
|
@@ -201,6 +201,35 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
201
201
|
),
|
|
202
202
|
);
|
|
203
203
|
|
|
204
|
+
// --- Container width measurement --------------------------------------
|
|
205
|
+
// Approximate character count from the container's clientWidth so Prettier
|
|
206
|
+
// wraps at the same column the code block will actually use.
|
|
207
|
+
const containerRef = useRef<HTMLDivElement>(null);
|
|
208
|
+
const [printWidth, setPrintWidth] = useState(80);
|
|
209
|
+
|
|
210
|
+
const measure = useCallback(() => {
|
|
211
|
+
const el = containerRef.current;
|
|
212
|
+
if (!el) return;
|
|
213
|
+
const ch = el.querySelector('[data-declaration-line]');
|
|
214
|
+
if (ch) {
|
|
215
|
+
// Use the width of a single `ch` unit from the monospace container.
|
|
216
|
+
const charWidth = ch.getBoundingClientRect().width || 8.4;
|
|
217
|
+
setPrintWidth(Math.max(40, Math.floor(el.clientWidth / charWidth)));
|
|
218
|
+
} else {
|
|
219
|
+
// Fallback: assume ~8.4 px per char at 14px monospace.
|
|
220
|
+
setPrintWidth(Math.max(40, Math.floor(el.clientWidth / 8.4)));
|
|
221
|
+
}
|
|
222
|
+
}, []);
|
|
223
|
+
|
|
224
|
+
useEffect(() => {
|
|
225
|
+
measure();
|
|
226
|
+
const el = containerRef.current;
|
|
227
|
+
if (!el) return;
|
|
228
|
+
const ro = new ResizeObserver(measure);
|
|
229
|
+
ro.observe(el);
|
|
230
|
+
return () => ro.disconnect();
|
|
231
|
+
}, [measure]);
|
|
232
|
+
|
|
204
233
|
// --- Declaration tokens ------------------------------------------------
|
|
205
234
|
// Tokenize asynchronously via Prettier + highlight.js. Pre-tokenized
|
|
206
235
|
// tokens from the wire skip the pipeline entirely.
|
|
@@ -211,11 +240,11 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
211
240
|
return;
|
|
212
241
|
}
|
|
213
242
|
let cancelled = false;
|
|
214
|
-
tokenizeComponent(component).then((t) => {
|
|
243
|
+
tokenizeComponent(component, printWidth).then((t) => {
|
|
215
244
|
if (!cancelled) setTokens(t);
|
|
216
245
|
});
|
|
217
246
|
return () => { cancelled = true; };
|
|
218
|
-
}, [component]);
|
|
247
|
+
}, [component, printWidth]);
|
|
219
248
|
const declLines: ReactNode[][] = [[]];
|
|
220
249
|
let di = 0;
|
|
221
250
|
for (const tok of tokens) {
|
|
@@ -233,7 +262,7 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
233
262
|
for (let li = 0; li < declLines.length; li++) {
|
|
234
263
|
if (declLines[li].length === 0) continue;
|
|
235
264
|
lines.push(
|
|
236
|
-
<div key={`decl-${li}`} style={{ display: 'flex', alignItems: 'center', whiteSpace: 'pre', minHeight: 18 }}>
|
|
265
|
+
<div key={`decl-${li}`} data-declaration-line style={{ display: 'flex', alignItems: 'center', whiteSpace: 'pre', minHeight: 18 }}>
|
|
237
266
|
{declLines[li]}
|
|
238
267
|
</div>,
|
|
239
268
|
);
|
|
@@ -258,6 +287,7 @@ export function ComponentDeclaration({ component, onOpenFile, onRelatedSelect: _
|
|
|
258
287
|
|
|
259
288
|
return (
|
|
260
289
|
<div
|
|
290
|
+
ref={containerRef}
|
|
261
291
|
style={{
|
|
262
292
|
background: theme.colors.backgroundSecondary,
|
|
263
293
|
padding: '10px 12px',
|
|
@@ -40,7 +40,7 @@ async function getPrettier() {
|
|
|
40
40
|
* it's returned as-is. Otherwise the pipeline generates a TypeScript
|
|
41
41
|
* declaration string, formats it with Prettier, and tokenizes the output.
|
|
42
42
|
*/
|
|
43
|
-
export async function tokenizeComponent(component: SubsystemComponent): Promise<SubsystemDeclToken[]> {
|
|
43
|
+
export async function tokenizeComponent(component: SubsystemComponent, printWidth = 80): Promise<SubsystemDeclToken[]> {
|
|
44
44
|
// Pre-tokenized tokens from the wire take precedence.
|
|
45
45
|
if (component.tokens) return component.tokens;
|
|
46
46
|
|
|
@@ -63,7 +63,7 @@ export async function tokenizeComponent(component: SubsystemComponent): Promise<
|
|
|
63
63
|
const formatted = await prettier.format(raw, {
|
|
64
64
|
parser: 'typescript',
|
|
65
65
|
plugins: [plugins.typescript, plugins.estree],
|
|
66
|
-
printWidth
|
|
66
|
+
printWidth,
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
return tokenizeFormatted(formatted);
|