@silverpoint/core 0.6.0 → 0.7.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/README.md +14 -0
- package/dist/catalog.d.ts +2 -2
- package/dist/catalog.js +4 -2
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-OLYKR5PS.js → chunk-46QELMCG.js} +8 -213
- package/dist/chunk-46QELMCG.js.map +1 -0
- package/dist/chunk-5MP3BLZK.js +48 -0
- package/dist/chunk-5MP3BLZK.js.map +1 -0
- package/dist/chunk-6YFO7OP3.js +84 -0
- package/dist/chunk-6YFO7OP3.js.map +1 -0
- package/dist/chunk-ANJSW5JX.js +93 -0
- package/dist/chunk-ANJSW5JX.js.map +1 -0
- package/dist/{chunk-PD4MD7JU.js → chunk-E5CC2NNQ.js} +5 -3
- package/dist/chunk-E5CC2NNQ.js.map +1 -0
- package/dist/chunk-G7N4X5XD.js +12 -0
- package/dist/chunk-G7N4X5XD.js.map +1 -0
- package/dist/chunk-NI7B6UEO.js +24 -0
- package/dist/chunk-NI7B6UEO.js.map +1 -0
- package/dist/chunk-WYFRHI4S.js +179 -0
- package/dist/chunk-WYFRHI4S.js.map +1 -0
- package/dist/contrast-siWF_R5o.d.ts +30 -0
- package/dist/dashboard-demos.d.ts +2 -2
- package/dist/index.d.ts +13 -10
- package/dist/index.js +20 -9
- package/dist/index.js.map +1 -1
- package/dist/{model-CLhtoG75.d.ts → model-DVVt59AB.d.ts} +1 -1
- package/dist/palettes.d.ts +29 -0
- package/dist/palettes.js +79 -0
- package/dist/palettes.js.map +1 -0
- package/dist/{props-Dq8FC8GG.d.ts → props-BZ9CcrGv.d.ts} +53 -1
- package/dist/timeline.d.ts +90 -0
- package/dist/timeline.js +125 -0
- package/dist/timeline.js.map +1 -0
- package/dist/{types-B81k-s9_.d.ts → types-BT3Xm7fP.d.ts} +3 -1
- package/dist/types-D5ys35fF.d.ts +576 -0
- package/dist/types-DHBJ0PzV.d.ts +57 -0
- package/dist/ui-demos.d.ts +14 -3
- package/dist/ui-demos.js +163 -1
- package/dist/ui-demos.js.map +1 -1
- package/dist/ui.d.ts +346 -325
- package/dist/ui.js +932 -118
- package/dist/ui.js.map +1 -1
- package/dist/view-DteS9glE.d.ts +82 -0
- package/package.json +13 -1
- package/dist/chunk-OLYKR5PS.js.map +0 -1
- package/dist/chunk-PD4MD7JU.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { m as CommonChartProps, am as Ground, G as Geometry } from './props-
|
|
1
|
+
import { m as CommonChartProps, am as Ground, G as Geometry } from './props-BZ9CcrGv.js';
|
|
2
2
|
|
|
3
3
|
/** Tabular alternative of a chart's data, already formatted (REQ-121). */
|
|
4
4
|
interface DataTable {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { au as Palette } from './props-BZ9CcrGv.js';
|
|
2
|
+
export { aD as PALETTE_PROPERTIES, aE as nestProvider, aF as paletteStyle, aG as resolvePalette } from './props-BZ9CcrGv.js';
|
|
3
|
+
export { a as PALETTE_PAIRS, P as PaletteFinding, c as checkPalette, b as contrastRatio } from './contrast-siWF_R5o.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* The palette presets (REQ-463, Data Model §2.26): named after historical drawing media, each
|
|
7
|
+
* passing every pair of Data Model §3.9 (REQ-464, verified by the contrast gate). A subpath of its
|
|
8
|
+
* own, with the palette API (resolution, declarations, contrast), so the main entry stays inside its
|
|
9
|
+
* 45 kB budget (REQ-164) and an application ships only the presets it imports.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/** The silverpoint ground's own inks on cream: what a chart draws with no palette. */
|
|
13
|
+
declare const silverpoint: Palette;
|
|
14
|
+
/** Red chalk, as in Leonardo's and Andrea del Sarto's studies. */
|
|
15
|
+
declare const sanguine: Palette;
|
|
16
|
+
/** Sepia wash and bistre. */
|
|
17
|
+
declare const sepia: Palette;
|
|
18
|
+
/** Iron-gall ink: the blue-black of manuscripts. */
|
|
19
|
+
declare const ironGall: Palette;
|
|
20
|
+
/** Verdigris, the copper green of illuminators. */
|
|
21
|
+
declare const verdigris: Palette;
|
|
22
|
+
/** Indigo, the dyers' and printers' blue. */
|
|
23
|
+
declare const indigo: Palette;
|
|
24
|
+
/** The six presets by name. */
|
|
25
|
+
declare const PALETTES: Readonly<Record<string, Palette>>;
|
|
26
|
+
/** Written out, not `Object.keys(PALETTES)`: a call the bundler cannot drop would keep every preset. */
|
|
27
|
+
declare const PALETTE_NAMES: readonly string[];
|
|
28
|
+
|
|
29
|
+
export { PALETTES, PALETTE_NAMES, Palette, indigo, ironGall, sanguine, sepia, silverpoint, verdigris };
|
package/dist/palettes.js
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
export { PALETTE_PAIRS, PALETTE_PROPERTIES, checkPalette, contrastRatio, nestProvider, paletteStyle, resolvePalette } from './chunk-ANJSW5JX.js';
|
|
2
|
+
import './chunk-5MP3BLZK.js';
|
|
3
|
+
import './chunk-WYFRHI4S.js';
|
|
4
|
+
|
|
5
|
+
// src/palettes.ts
|
|
6
|
+
var preset = (palette) => Object.freeze({ ...palette });
|
|
7
|
+
var silverpoint = /* @__PURE__ */ preset({
|
|
8
|
+
substrate: "#EDE7DA",
|
|
9
|
+
ink: "#5A5E65",
|
|
10
|
+
inkSecondary: "#685C4D",
|
|
11
|
+
heighten: "#FFFFFF",
|
|
12
|
+
rule: "#737A82",
|
|
13
|
+
grid: "#737A82",
|
|
14
|
+
text: "#3F4348",
|
|
15
|
+
textMuted: "#5A5E65"
|
|
16
|
+
});
|
|
17
|
+
var sanguine = /* @__PURE__ */ preset({
|
|
18
|
+
substrate: "#F2E8DC",
|
|
19
|
+
ink: "#8A3A24",
|
|
20
|
+
inkSecondary: "#6A4A3A",
|
|
21
|
+
heighten: "#FFFFFF",
|
|
22
|
+
rule: "#9A6450",
|
|
23
|
+
grid: "#9A6450",
|
|
24
|
+
text: "#4A2216",
|
|
25
|
+
textMuted: "#7A3E2C"
|
|
26
|
+
});
|
|
27
|
+
var sepia = /* @__PURE__ */ preset({
|
|
28
|
+
substrate: "#F0E6D2",
|
|
29
|
+
ink: "#6B4C2C",
|
|
30
|
+
inkSecondary: "#5A5148",
|
|
31
|
+
heighten: "#FFFFFF",
|
|
32
|
+
rule: "#8A6E52",
|
|
33
|
+
grid: "#8A6E52",
|
|
34
|
+
text: "#3B2A18",
|
|
35
|
+
textMuted: "#6B4C2C"
|
|
36
|
+
});
|
|
37
|
+
var ironGall = /* @__PURE__ */ preset({
|
|
38
|
+
substrate: "#EEEAE0",
|
|
39
|
+
ink: "#3C4858",
|
|
40
|
+
inkSecondary: "#6A4E36",
|
|
41
|
+
heighten: "#FFFFFF",
|
|
42
|
+
rule: "#6C7584",
|
|
43
|
+
grid: "#6C7584",
|
|
44
|
+
text: "#232B36",
|
|
45
|
+
textMuted: "#4A5566"
|
|
46
|
+
});
|
|
47
|
+
var verdigris = /* @__PURE__ */ preset({
|
|
48
|
+
substrate: "#E7EDE6",
|
|
49
|
+
ink: "#2C6355",
|
|
50
|
+
inkSecondary: "#65563F",
|
|
51
|
+
heighten: "#FFFFFF",
|
|
52
|
+
rule: "#5C7B71",
|
|
53
|
+
grid: "#5C7B71",
|
|
54
|
+
text: "#1F3D36",
|
|
55
|
+
textMuted: "#3E6A5E"
|
|
56
|
+
});
|
|
57
|
+
var indigo = /* @__PURE__ */ preset({
|
|
58
|
+
substrate: "#E9EAF1",
|
|
59
|
+
ink: "#3A4884",
|
|
60
|
+
inkSecondary: "#675641",
|
|
61
|
+
heighten: "#FFFFFF",
|
|
62
|
+
rule: "#68709A",
|
|
63
|
+
grid: "#68709A",
|
|
64
|
+
text: "#232C52",
|
|
65
|
+
textMuted: "#4A5590"
|
|
66
|
+
});
|
|
67
|
+
var PALETTES = /* @__PURE__ */ Object.freeze({
|
|
68
|
+
silverpoint,
|
|
69
|
+
sanguine,
|
|
70
|
+
sepia,
|
|
71
|
+
ironGall,
|
|
72
|
+
verdigris,
|
|
73
|
+
indigo
|
|
74
|
+
});
|
|
75
|
+
var PALETTE_NAMES = /* @__PURE__ */ Object.freeze(["silverpoint", "sanguine", "sepia", "ironGall", "verdigris", "indigo"]);
|
|
76
|
+
|
|
77
|
+
export { PALETTES, PALETTE_NAMES, indigo, ironGall, sanguine, sepia, silverpoint, verdigris };
|
|
78
|
+
//# sourceMappingURL=palettes.js.map
|
|
79
|
+
//# sourceMappingURL=palettes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/palettes.ts"],"names":[],"mappings":";;;;;AAWA,IAAM,MAAA,GAAS,CAAC,OAAA,KAAuD,MAAA,CAAO,OAAO,EAAE,GAAG,SAAS,CAAA;AAG5F,IAAM,8BAA8B,MAAA,CAAO;AAAA,EAChD,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,2BAA2B,MAAA,CAAO;AAAA,EAC7C,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,wBAAwB,MAAA,CAAO;AAAA,EAC1C,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,2BAA2B,MAAA,CAAO;AAAA,EAC7C,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,4BAA4B,MAAA,CAAO;AAAA,EAC9C,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,yBAAyB,MAAA,CAAO;AAAA,EAC3C,SAAA,EAAW,SAAA;AAAA,EACX,GAAA,EAAK,SAAA;AAAA,EACL,YAAA,EAAc,SAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC;AAGM,IAAM,QAAA,0BAAqE,MAAA,CAAO;AAAA,EACvF,WAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAGM,IAAM,aAAA,mBAAmD,MAAA,CAAO,MAAA,CAAO,CAAC,aAAA,EAAe,YAAY,OAAA,EAAS,UAAA,EAAY,WAAA,EAAa,QAAQ,CAAC","file":"palettes.js","sourcesContent":["/**\n * The palette presets (REQ-463, Data Model §2.26): named after historical drawing media, each\n * passing every pair of Data Model §3.9 (REQ-464, verified by the contrast gate). A subpath of its\n * own, with the palette API (resolution, declarations, contrast), so the main entry stays inside its\n * 45 kB budget (REQ-164) and an application ships only the presets it imports.\n */\nimport type { Palette } from './palette/palette';\n\nexport { nestProvider, PALETTE_PROPERTIES, paletteStyle, resolvePalette } from './palette/palette';\nexport { checkPalette, contrastRatio, PALETTE_PAIRS, type PaletteFinding } from './palette/contrast';\n\nconst preset = (palette: Required<Omit<Palette, 'focus'>>): Palette => Object.freeze({ ...palette });\n\n/** The silverpoint ground's own inks on cream: what a chart draws with no palette. */\nexport const silverpoint = /* @__PURE__ */ preset({\n substrate: '#EDE7DA',\n ink: '#5A5E65',\n inkSecondary: '#685C4D',\n heighten: '#FFFFFF',\n rule: '#737A82',\n grid: '#737A82',\n text: '#3F4348',\n textMuted: '#5A5E65',\n});\n\n/** Red chalk, as in Leonardo's and Andrea del Sarto's studies. */\nexport const sanguine = /* @__PURE__ */ preset({\n substrate: '#F2E8DC',\n ink: '#8A3A24',\n inkSecondary: '#6A4A3A',\n heighten: '#FFFFFF',\n rule: '#9A6450',\n grid: '#9A6450',\n text: '#4A2216',\n textMuted: '#7A3E2C',\n});\n\n/** Sepia wash and bistre. */\nexport const sepia = /* @__PURE__ */ preset({\n substrate: '#F0E6D2',\n ink: '#6B4C2C',\n inkSecondary: '#5A5148',\n heighten: '#FFFFFF',\n rule: '#8A6E52',\n grid: '#8A6E52',\n text: '#3B2A18',\n textMuted: '#6B4C2C',\n});\n\n/** Iron-gall ink: the blue-black of manuscripts. */\nexport const ironGall = /* @__PURE__ */ preset({\n substrate: '#EEEAE0',\n ink: '#3C4858',\n inkSecondary: '#6A4E36',\n heighten: '#FFFFFF',\n rule: '#6C7584',\n grid: '#6C7584',\n text: '#232B36',\n textMuted: '#4A5566',\n});\n\n/** Verdigris, the copper green of illuminators. */\nexport const verdigris = /* @__PURE__ */ preset({\n substrate: '#E7EDE6',\n ink: '#2C6355',\n inkSecondary: '#65563F',\n heighten: '#FFFFFF',\n rule: '#5C7B71',\n grid: '#5C7B71',\n text: '#1F3D36',\n textMuted: '#3E6A5E',\n});\n\n/** Indigo, the dyers' and printers' blue. */\nexport const indigo = /* @__PURE__ */ preset({\n substrate: '#E9EAF1',\n ink: '#3A4884',\n inkSecondary: '#675641',\n heighten: '#FFFFFF',\n rule: '#68709A',\n grid: '#68709A',\n text: '#232C52',\n textMuted: '#4A5590',\n});\n\n/** The six presets by name. */\nexport const PALETTES: Readonly<Record<string, Palette>> = /* @__PURE__ */ Object.freeze({\n silverpoint,\n sanguine,\n sepia,\n ironGall,\n verdigris,\n indigo,\n});\n\n/** Written out, not `Object.keys(PALETTES)`: a call the bundler cannot drop would keep every preset. */\nexport const PALETTE_NAMES: readonly string[] = /* @__PURE__ */ Object.freeze(['silverpoint', 'sanguine', 'sepia', 'ironGall', 'verdigris', 'indigo']);\n\nexport type { Palette } from './palette/palette';\n"]}
|
|
@@ -200,6 +200,10 @@ interface UiTokens {
|
|
|
200
200
|
disabled: ToneStep;
|
|
201
201
|
alertError: ToneStep;
|
|
202
202
|
}>;
|
|
203
|
+
/** Tonal level of the hatched backdrop behind a modal overlay; unhatched (weight grounds, precision) it is the opaque substrate. Default `2` (REQ-499). */
|
|
204
|
+
readonly backdrop?: ToneStep;
|
|
205
|
+
/** Level of a table's striped and hovered rows. Default `1` (REQ-475). */
|
|
206
|
+
readonly rowTone?: ToneStep;
|
|
203
207
|
}
|
|
204
208
|
/** Name of a registered ground. */
|
|
205
209
|
type GroundName = 'silverpoint' | (string & {});
|
|
@@ -242,6 +246,47 @@ interface Ground {
|
|
|
242
246
|
/** Name of a registered ground, or a complete ground. */
|
|
243
247
|
type GroundRef = GroundName | Ground;
|
|
244
248
|
|
|
249
|
+
/**
|
|
250
|
+
* The colours of one ground's inks, for one element or one section (REQ-460, Data Model §2.26).
|
|
251
|
+
* Every field is optional: an unset field keeps the ground's own. Values are any CSS colour;
|
|
252
|
+
* `checkPalette` can only measure hex values.
|
|
253
|
+
*/
|
|
254
|
+
interface Palette {
|
|
255
|
+
/** The prepared ground the drawing sits on. */
|
|
256
|
+
readonly substrate?: string;
|
|
257
|
+
/** The main series and the frames of UI components. */
|
|
258
|
+
readonly ink?: string;
|
|
259
|
+
/** The second series and the hatch of tones. */
|
|
260
|
+
readonly inkSecondary?: string;
|
|
261
|
+
/** White heightening on the live value (always outlined with `ink`). */
|
|
262
|
+
readonly heighten?: string;
|
|
263
|
+
/** Rules and baselines. */
|
|
264
|
+
readonly rule?: string;
|
|
265
|
+
/** Grid lines. */
|
|
266
|
+
readonly grid?: string;
|
|
267
|
+
/** Large figures and primary labels. */
|
|
268
|
+
readonly text?: string;
|
|
269
|
+
/** Axis labels and secondary text. */
|
|
270
|
+
readonly textMuted?: string;
|
|
271
|
+
/** Focus ring of UI components; `ink` by default. */
|
|
272
|
+
readonly focus?: string;
|
|
273
|
+
}
|
|
274
|
+
/** Field → custom property, in the order of every emitted declaration (REQ-461). */
|
|
275
|
+
declare const PALETTE_PROPERTIES: Readonly<Record<keyof Palette, `--sp-${string}`>>;
|
|
276
|
+
/**
|
|
277
|
+
* The palettes of an element's layers merged field by field, a later layer winning: call it as
|
|
278
|
+
* `resolvePalette(provider, cell, element)` (REQ-462). Unknown fields and unsafe values are dropped
|
|
279
|
+
* with `SP024`; a weak hex pair is kept and warned `SP023` (REQ-466, REQ-467).
|
|
280
|
+
*/
|
|
281
|
+
declare function resolvePalette(...layers: readonly (Palette | undefined)[]): Palette | undefined;
|
|
282
|
+
/** `--sp-ink:#8A3A24;--sp-text:#4A2216`: a palette's declarations, in PALETTE_PROPERTIES order; '' for none (REQ-461). */
|
|
283
|
+
declare function paletteStyle(palette: Palette | undefined): string;
|
|
284
|
+
/**
|
|
285
|
+
* A provider inside another (REQ-462): the inner one's set fields win, the rest is the outer's, and
|
|
286
|
+
* the palettes merge field by field, so a nested provider re-colours a section and keeps the rest.
|
|
287
|
+
*/
|
|
288
|
+
declare function nestProvider(outer: ProviderConfig | undefined, own: ProviderConfig): ProviderConfig;
|
|
289
|
+
|
|
245
290
|
/** Props present in every chart, identical in React and Angular (REQ-094). */
|
|
246
291
|
interface CommonChartProps {
|
|
247
292
|
/**
|
|
@@ -256,6 +301,11 @@ interface CommonChartProps {
|
|
|
256
301
|
substrate?: SubstrateName;
|
|
257
302
|
/** `ink` by default; `precision` disables inking (REQ-021). */
|
|
258
303
|
mode?: InkMode;
|
|
304
|
+
/**
|
|
305
|
+
* Colours over the ground's, field by field, written on the root's `style` (REQ-461). Merged over
|
|
306
|
+
* the dashboard's and the provider's (REQ-462); presets are on `@silverpoint/core/palettes`.
|
|
307
|
+
*/
|
|
308
|
+
palette?: Palette;
|
|
259
309
|
/** Seed. If omitted, it is derived from `id` stably (REQ-003). */
|
|
260
310
|
seed?: Seed;
|
|
261
311
|
/** Stable identifier. If omitted, it is generated deterministically. */
|
|
@@ -304,6 +354,8 @@ interface ProviderConfig {
|
|
|
304
354
|
substrate?: SubstrateName;
|
|
305
355
|
mode?: InkMode;
|
|
306
356
|
locale?: string;
|
|
357
|
+
/** Colours for every chart and component below, under their own and their dashboard's (REQ-462). */
|
|
358
|
+
palette?: Palette;
|
|
307
359
|
}
|
|
308
360
|
/** `BulletChart` (REQ-069): one bar per target, with a marker at the target. Values in 0-100. */
|
|
309
361
|
interface BulletChartProps extends CommonChartProps {
|
|
@@ -942,4 +994,4 @@ interface NetworkChartProps extends CommonChartProps {
|
|
|
942
994
|
iterations?: number;
|
|
943
995
|
}
|
|
944
996
|
|
|
945
|
-
export type
|
|
997
|
+
export { type ComposedChartProps as $, type ActiveItem as A, type BoxPlotChartProps as B, type ConnectedScatterChartProps as C, type DumbbellChartProps as D, type EcdfChartProps as E, type PyramidChartProps as F, type Geometry as G, type HistogramChartProps as H, type IntervalChartProps as I, type HeatmapChartProps as J, type TreemapChartProps as K, type LollipopChartProps as L, type MarimekkoChartProps as M, type NetworkChartProps as N, type SankeyChartProps as O, type ParallelCoordinatesChartProps as P, type ActivityGridProps as Q, type RidgelineChartProps as R, type SlopeChartProps as S, type TreeChartProps as T, type StepChartProps as U, type ViolinChartProps as V, type WaffleChartProps as W, type SparklineRowsProps as X, type KpiCardProps as Y, type BarChartProps as Z, type StackedBarChartProps as _, type BeeswarmChartProps as a, type WaterfallChartProps as a0, type FunnelChartProps as a1, type DonutChartProps as a2, type RadarChartProps as a3, type PolarBarChartProps as a4, type CoxcombChartProps as a5, type RadialArcGroupProps as a6, type RadialRingsProps as a7, type GaugeArcProps as a8, type MeterChartProps as a9, type ToneSpec as aA, type UiTokens as aB, type WeightToneSpec as aC, PALETTE_PROPERTIES as aD, nestProvider as aE, paletteStyle as aF, resolvePalette as aG, type WindRoseProps as aa, type ChordRingProps as ab, type OrbitChartProps as ac, type VolvelleChartProps as ad, type CandlestickChartProps as ae, type AreaChartProps as af, type RangeBandChartProps as ag, type StreamChartProps as ah, type ScatterChartProps as ai, type BubbleChartProps as aj, type Accessor as ak, type ChartOrientation as al, type Ground as am, type GroundName as an, type HatchToneSpec as ao, type HitArea as ap, type InkOptions as aq, type LabelKind as ar, type LineCurve as as, type NetworkNode as at, type Palette as au, type StrokePart as av, type StrokeRole as aw, type Tile as ax, type TonalRamp as ay, type ToneLevel as az, type BumpChartProps as b, type ErrorBarChartProps as c, type DivergingBarChartProps as d, type SquarifiedTreemapProps as e, type SunburstChartProps as f, type PolarLineChartProps as g, type PolarScatterChartProps as h, type DensityBinChartProps as i, type ContourChartProps as j, type DelaunayChartProps as k, type VectorFieldChartProps as l, type CommonChartProps as m, type Seed as n, type Stroke as o, type StrokePaint as p, type InkMode as q, type TextLabel as r, type Inker as s, type GroundRef as t, type SubstrateName as u, type ProviderConfig as v, type LineChartProps as w, type Datum as x, type Rect as y, type BulletChartProps as z };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { S as SpTimelineProps, T as TimelineData } from './types-DHBJ0PzV.js';
|
|
2
|
+
export { a as TimelineDate, b as TimelineEra, c as TimelineSlide, d as TimelineText } from './types-DHBJ0PzV.js';
|
|
3
|
+
import { U as UiResolved, a as UiElement } from './view-DteS9glE.js';
|
|
4
|
+
import './types-D5ys35fF.js';
|
|
5
|
+
import './props-BZ9CcrGv.js';
|
|
6
|
+
|
|
7
|
+
/** The frame kinds TimelineJS's pieces borrow, one hidden probe each (DD-042). */
|
|
8
|
+
declare const TIMELINE_FRAMES: readonly ["control", "card", "round", "box", "pill"];
|
|
9
|
+
/** The tonal levels its eras and selection borrow, one hidden probe each. */
|
|
10
|
+
declare const TIMELINE_TONES: readonly ["1", "2", "3", "4"];
|
|
11
|
+
/** A resolved style, as much of `CSSStyleDeclaration` as this reads. */
|
|
12
|
+
interface InkStyle {
|
|
13
|
+
getPropertyValue(name: string): string;
|
|
14
|
+
}
|
|
15
|
+
interface InkView {
|
|
16
|
+
getComputedStyle(element: never): InkStyle;
|
|
17
|
+
readonly MutationObserver: new (callback: () => void) => {
|
|
18
|
+
observe(target: never, options: {
|
|
19
|
+
readonly attributes: boolean;
|
|
20
|
+
readonly attributeFilter: string[];
|
|
21
|
+
}): void;
|
|
22
|
+
disconnect(): void;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
/** The timeline's surface: where the `--sp-kl-*` properties are written. */
|
|
26
|
+
interface TimelineInkHost {
|
|
27
|
+
getAttribute(name: string): string | null;
|
|
28
|
+
setAttribute(name: string, value: string): void;
|
|
29
|
+
readonly style: {
|
|
30
|
+
setProperty(name: string, value: string): void;
|
|
31
|
+
};
|
|
32
|
+
readonly ownerDocument: {
|
|
33
|
+
readonly defaultView: InkView | null;
|
|
34
|
+
} | null;
|
|
35
|
+
}
|
|
36
|
+
/** The hidden probe holding one `sp-frame` per kind and one `sp-tone` per level. */
|
|
37
|
+
interface TimelineInkProbe {
|
|
38
|
+
querySelector(selector: string): unknown;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* The hand on TimelineJS's own DOM (REQ-512, DD-042): reads the ground's resolved frame masks and
|
|
42
|
+
* tones from the probes and republishes them on the host as `--sp-kl-*`; every mask is `none`
|
|
43
|
+
* outside the `ink` mode or when `inked` is false. It re-reads when the host's ground, substrate,
|
|
44
|
+
* mode or frame changes, until the returned cleanup runs. Client only.
|
|
45
|
+
*/
|
|
46
|
+
declare function timelineInk(host: TimelineInkHost, probe: TimelineInkProbe, inked?: boolean): () => void;
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* `SpTimeline`'s server markup (REQ-513, DD-042): the surface, the hidden probes `timelineInk`
|
|
50
|
+
* reads, and an empty mount TimelineJS fills on the client. Nothing of `data` is drawn here but the
|
|
51
|
+
* region's name; TimelineJS's DOM is third-party markup, outside the tree gate (Art. 3 as amended).
|
|
52
|
+
*/
|
|
53
|
+
declare function timelineView(props: SpTimelineProps, r: UiResolved, state?: {
|
|
54
|
+
readonly failed?: boolean;
|
|
55
|
+
}): UiElement;
|
|
56
|
+
|
|
57
|
+
/** TimelineJS's events and the name each framework forwards them under (REQ-514). */
|
|
58
|
+
declare const TIMELINE_EVENTS: readonly [readonly ["change", "change"], readonly ["loaded", "loaded"], readonly ["nav_next", "navNext"], readonly ["nav_previous", "navPrevious"], readonly ["zoom_in", "zoomIn"], readonly ["zoom_out", "zoomOut"], readonly ["back_to_start", "backToStart"]];
|
|
59
|
+
/** The options TimelineJS receives: `font` and `theme` belong to the skin and are dropped (REQ-514). */
|
|
60
|
+
declare function timelineOptions(options?: Readonly<Record<string, unknown>>): Record<string, unknown>;
|
|
61
|
+
/** As much of TimelineJS's module as `timelineMount` uses. */
|
|
62
|
+
interface TimelineJsModule {
|
|
63
|
+
readonly Timeline: new (element: never, data: TimelineData, options: Record<string, unknown>) => {
|
|
64
|
+
on(event: string, handler: (payload: unknown) => void): unknown;
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
/** The surface `timelineView` drew, found in the page. */
|
|
68
|
+
interface TimelineMountHost extends TimelineInkHost {
|
|
69
|
+
querySelector(selector: string): unknown;
|
|
70
|
+
}
|
|
71
|
+
interface TimelineMountOptions {
|
|
72
|
+
readonly load: () => Promise<TimelineJsModule>;
|
|
73
|
+
readonly data: TimelineData;
|
|
74
|
+
readonly options?: Readonly<Record<string, unknown>>;
|
|
75
|
+
readonly inked?: boolean;
|
|
76
|
+
/** One of `TIMELINE_EVENTS`' forwarded names, with a payload only for `change` and `loaded`. */
|
|
77
|
+
readonly emit: (event: string, ...value: unknown[]) => void;
|
|
78
|
+
readonly failed: () => void;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* The client half of `SpTimeline` (REQ-513..REQ-515, DD-042): inks the surface from its probes,
|
|
82
|
+
* loads TimelineJS through the adapter's `load`, builds it in the mount and forwards its events
|
|
83
|
+
* under `TIMELINE_EVENTS`' names, with a copy of the data. A load that fails, or a TimelineJS that
|
|
84
|
+
* throws as it is built, warns `SP025` and calls `failed`; nothing throws.
|
|
85
|
+
* TimelineJS is built in a container of its own inside the mount, since it rewrites its container's
|
|
86
|
+
* `className`; the returned cleanup cancels a pending load, stops the inking and removes that container.
|
|
87
|
+
*/
|
|
88
|
+
declare function timelineMount(host: TimelineMountHost, mount: TimelineMountOptions): () => void;
|
|
89
|
+
|
|
90
|
+
export { SpTimelineProps, TIMELINE_EVENTS, TIMELINE_FRAMES, TIMELINE_TONES, TimelineData, type TimelineInkHost, type TimelineInkProbe, type TimelineJsModule, type TimelineMountHost, type TimelineMountOptions, timelineInk, timelineMount, timelineOptions, timelineView };
|
package/dist/timeline.js
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { uiRequireName } from './chunk-G7N4X5XD.js';
|
|
2
|
+
import { cssLength, el, root, frame, slot } from './chunk-6YFO7OP3.js';
|
|
3
|
+
import { diagnose } from './chunk-WYFRHI4S.js';
|
|
4
|
+
|
|
5
|
+
// src/timeline/ink.ts
|
|
6
|
+
var TIMELINE_FRAMES = Object.freeze(["control", "card", "round", "box", "pill"]);
|
|
7
|
+
var TIMELINE_TONES = Object.freeze(["1", "2", "3", "4"]);
|
|
8
|
+
function timelineInk(host, probe, inked = true) {
|
|
9
|
+
const view = host.ownerDocument?.defaultView;
|
|
10
|
+
if (!view) return () => {
|
|
11
|
+
};
|
|
12
|
+
const read = (selector, name, fallback) => {
|
|
13
|
+
const piece = probe.querySelector(selector);
|
|
14
|
+
return (piece ? view.getComputedStyle(piece).getPropertyValue(name).trim() : "") || fallback;
|
|
15
|
+
};
|
|
16
|
+
const ink = () => {
|
|
17
|
+
const usable = inked && host.getAttribute("data-mode") === "ink";
|
|
18
|
+
let anyMask = false;
|
|
19
|
+
let anyTone = false;
|
|
20
|
+
for (const kind of TIMELINE_FRAMES) {
|
|
21
|
+
const piece = `[part='sp-frame'][data-kind='${kind}']`;
|
|
22
|
+
const mask = usable ? read(piece, "--sp-ui-mask", "none") : "none";
|
|
23
|
+
anyMask ||= mask !== "none";
|
|
24
|
+
host.style.setProperty(`--sp-kl-mask-${kind}`, mask);
|
|
25
|
+
host.style.setProperty(`--sp-kl-mask-position-${kind}`, read(piece, "--sp-ui-mask-position", "center"));
|
|
26
|
+
host.style.setProperty(`--sp-kl-mask-size-${kind}`, read(piece, "--sp-ui-mask-size", "100% 100%"));
|
|
27
|
+
}
|
|
28
|
+
for (const level of TIMELINE_TONES) {
|
|
29
|
+
const piece = `[part='sp-tone'][data-tone='${level}']`;
|
|
30
|
+
const tone = read(piece, "--sp-ui-tone", "none");
|
|
31
|
+
anyTone ||= tone !== "none";
|
|
32
|
+
host.style.setProperty(`--sp-kl-tone-${level}`, tone);
|
|
33
|
+
host.style.setProperty(`--sp-kl-tone-size-${level}`, read(piece, "--sp-ui-tone-size", "auto"));
|
|
34
|
+
}
|
|
35
|
+
host.setAttribute("data-kl-inked", String(anyMask));
|
|
36
|
+
host.setAttribute("data-kl-toned", String(anyTone));
|
|
37
|
+
};
|
|
38
|
+
ink();
|
|
39
|
+
const observer = new view.MutationObserver(ink);
|
|
40
|
+
observer.observe(host, { attributes: true, attributeFilter: ["data-mode", "data-substrate", "data-ground", "data-frame", "class"] });
|
|
41
|
+
return () => observer.disconnect();
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// src/timeline/view.ts
|
|
45
|
+
function timelineView(props, r, state = {}) {
|
|
46
|
+
const card = props.card !== false;
|
|
47
|
+
const label = props.label ?? props.data.title?.text?.headline;
|
|
48
|
+
uiRequireName("SpTimeline", void 0, label);
|
|
49
|
+
const height = cssLength(props.height, "SpTimeline", "height") ?? "600px";
|
|
50
|
+
return el(
|
|
51
|
+
"section",
|
|
52
|
+
root("timeline", props, r, {
|
|
53
|
+
id: props.id,
|
|
54
|
+
"aria-label": label,
|
|
55
|
+
"data-kl-card": String(card),
|
|
56
|
+
// timelineInk sets it on the client, once a probe resolves a mask.
|
|
57
|
+
"data-kl-inked": "false",
|
|
58
|
+
style: `height:${height}`
|
|
59
|
+
}),
|
|
60
|
+
[
|
|
61
|
+
...card ? [frame("card")] : [],
|
|
62
|
+
el(
|
|
63
|
+
"span",
|
|
64
|
+
{ class: "sp-kl-probe", "aria-hidden": "true" },
|
|
65
|
+
[
|
|
66
|
+
...TIMELINE_FRAMES.map((kind) => el("span", { part: "sp-frame", "data-kind": kind })),
|
|
67
|
+
...TIMELINE_TONES.map((level) => el("span", { part: "sp-tone", "data-tone": level }))
|
|
68
|
+
],
|
|
69
|
+
"probe"
|
|
70
|
+
),
|
|
71
|
+
// Once the load has failed, the consumer's fallback fills the mount (REQ-515); never on the server.
|
|
72
|
+
el("div", { class: "sp-kl-mount" }, state.failed ? [slot("fallback")] : [], "mount")
|
|
73
|
+
]
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// src/timeline/mount.ts
|
|
78
|
+
var TIMELINE_EVENTS = Object.freeze([
|
|
79
|
+
["change", "change"],
|
|
80
|
+
["loaded", "loaded"],
|
|
81
|
+
["nav_next", "navNext"],
|
|
82
|
+
["nav_previous", "navPrevious"],
|
|
83
|
+
["zoom_in", "zoomIn"],
|
|
84
|
+
["zoom_out", "zoomOut"],
|
|
85
|
+
["back_to_start", "backToStart"]
|
|
86
|
+
]);
|
|
87
|
+
function timelineOptions(options) {
|
|
88
|
+
const { font: _font, theme: _theme, ...rest } = options ?? {};
|
|
89
|
+
return rest;
|
|
90
|
+
}
|
|
91
|
+
function timelineMount(host, mount) {
|
|
92
|
+
const stopInk = timelineInk(host, host.querySelector(".sp-kl-probe") ?? host, mount.inked);
|
|
93
|
+
const target = host.querySelector(".sp-kl-mount");
|
|
94
|
+
let live = true;
|
|
95
|
+
let box;
|
|
96
|
+
const fail = (error) => {
|
|
97
|
+
if (!live) return;
|
|
98
|
+
box?.remove();
|
|
99
|
+
box = void 0;
|
|
100
|
+
diagnose("SP025", "SpTimeline", { property: "load", message: error instanceof Error ? error.message : void 0 });
|
|
101
|
+
mount.failed();
|
|
102
|
+
};
|
|
103
|
+
mount.load().then(({ Timeline }) => {
|
|
104
|
+
if (!live || !target?.ownerDocument) return;
|
|
105
|
+
box = target.ownerDocument.createElement("div");
|
|
106
|
+
target.append(box);
|
|
107
|
+
const timeline = new Timeline(box, structuredClone(mount.data), timelineOptions(mount.options));
|
|
108
|
+
for (const [name, as] of TIMELINE_EVENTS) {
|
|
109
|
+
timeline.on(name, (payload) => {
|
|
110
|
+
if (name === "change") mount.emit(as, payload?.unique_id);
|
|
111
|
+
else if (name === "loaded") mount.emit(as, payload);
|
|
112
|
+
else mount.emit(as);
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
}).catch(fail);
|
|
116
|
+
return () => {
|
|
117
|
+
live = false;
|
|
118
|
+
stopInk();
|
|
119
|
+
box?.remove();
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
export { TIMELINE_EVENTS, TIMELINE_FRAMES, TIMELINE_TONES, timelineInk, timelineMount, timelineOptions, timelineView };
|
|
124
|
+
//# sourceMappingURL=timeline.js.map
|
|
125
|
+
//# sourceMappingURL=timeline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/timeline/ink.ts","../src/timeline/view.ts","../src/timeline/mount.ts"],"names":[],"mappings":"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","file":"timeline.js","sourcesContent":["/** The frame kinds TimelineJS's pieces borrow, one hidden probe each (DD-042). */\nexport const TIMELINE_FRAMES = Object.freeze(['control', 'card', 'round', 'box', 'pill'] as const);\n/** The tonal levels its eras and selection borrow, one hidden probe each. */\nexport const TIMELINE_TONES = Object.freeze(['1', '2', '3', '4'] as const);\n\n/** A resolved style, as much of `CSSStyleDeclaration` as this reads. */\ninterface InkStyle {\n getPropertyValue(name: string): string;\n}\n\ninterface InkView {\n getComputedStyle(element: never): InkStyle;\n readonly MutationObserver: new (callback: () => void) => {\n observe(target: never, options: { readonly attributes: boolean; readonly attributeFilter: string[] }): void;\n disconnect(): void;\n };\n}\n\n/** The timeline's surface: where the `--sp-kl-*` properties are written. */\nexport interface TimelineInkHost {\n getAttribute(name: string): string | null;\n setAttribute(name: string, value: string): void;\n readonly style: { setProperty(name: string, value: string): void };\n readonly ownerDocument: { readonly defaultView: InkView | null } | null;\n}\n\n/** The hidden probe holding one `sp-frame` per kind and one `sp-tone` per level. */\nexport interface TimelineInkProbe {\n querySelector(selector: string): unknown;\n}\n\n/**\n * The hand on TimelineJS's own DOM (REQ-512, DD-042): reads the ground's resolved frame masks and\n * tones from the probes and republishes them on the host as `--sp-kl-*`; every mask is `none`\n * outside the `ink` mode or when `inked` is false. It re-reads when the host's ground, substrate,\n * mode or frame changes, until the returned cleanup runs. Client only.\n */\nexport function timelineInk(host: TimelineInkHost, probe: TimelineInkProbe, inked = true): () => void {\n const view = host.ownerDocument?.defaultView;\n if (!view) return () => {};\n const read = (selector: string, name: string, fallback: string): string => {\n const piece = probe.querySelector(selector);\n return (piece ? view.getComputedStyle(piece as never).getPropertyValue(name).trim() : '') || fallback;\n };\n const ink = () => {\n const usable = inked && host.getAttribute('data-mode') === 'ink';\n let anyMask = false;\n let anyTone = false;\n for (const kind of TIMELINE_FRAMES) {\n const piece = `[part='sp-frame'][data-kind='${kind}']`;\n const mask = usable ? read(piece, '--sp-ui-mask', 'none') : 'none';\n anyMask ||= mask !== 'none';\n host.style.setProperty(`--sp-kl-mask-${kind}`, mask);\n host.style.setProperty(`--sp-kl-mask-position-${kind}`, read(piece, '--sp-ui-mask-position', 'center'));\n host.style.setProperty(`--sp-kl-mask-size-${kind}`, read(piece, '--sp-ui-mask-size', '100% 100%'));\n }\n for (const level of TIMELINE_TONES) {\n const piece = `[part='sp-tone'][data-tone='${level}']`;\n const tone = read(piece, '--sp-ui-tone', 'none');\n anyTone ||= tone !== 'none';\n host.style.setProperty(`--sp-kl-tone-${level}`, tone);\n host.style.setProperty(`--sp-kl-tone-size-${level}`, read(piece, '--sp-ui-tone-size', 'auto'));\n }\n host.setAttribute('data-kl-inked', String(anyMask));\n host.setAttribute('data-kl-toned', String(anyTone));\n };\n ink();\n const observer = new view.MutationObserver(ink);\n observer.observe(host as never, { attributes: true, attributeFilter: ['data-mode', 'data-substrate', 'data-ground', 'data-frame', 'class'] });\n return () => observer.disconnect();\n}\n","import { uiRequireName } from '../ui/names';\nimport type { UiElement, UiResolved } from '../ui/view';\nimport { cssLength, el, frame, root, slot } from '../ui/view-kit';\nimport { TIMELINE_FRAMES, TIMELINE_TONES } from './ink';\nimport type { SpTimelineProps } from './types';\n\n/**\n * `SpTimeline`'s server markup (REQ-513, DD-042): the surface, the hidden probes `timelineInk`\n * reads, and an empty mount TimelineJS fills on the client. Nothing of `data` is drawn here but the\n * region's name; TimelineJS's DOM is third-party markup, outside the tree gate (Art. 3 as amended).\n */\nexport function timelineView(props: SpTimelineProps, r: UiResolved, state: { readonly failed?: boolean } = {}): UiElement {\n const card = props.card !== false;\n const label = props.label ?? props.data.title?.text?.headline;\n uiRequireName('SpTimeline', undefined, label);\n const height = cssLength(props.height, 'SpTimeline', 'height') ?? '600px';\n return el(\n 'section',\n root('timeline', props, r, {\n id: props.id,\n 'aria-label': label,\n 'data-kl-card': String(card),\n // timelineInk sets it on the client, once a probe resolves a mask.\n 'data-kl-inked': 'false',\n style: `height:${height}`,\n }),\n [\n ...(card ? [frame('card')] : []),\n el(\n 'span',\n { class: 'sp-kl-probe', 'aria-hidden': 'true' },\n [\n ...TIMELINE_FRAMES.map((kind) => el('span', { part: 'sp-frame', 'data-kind': kind })),\n ...TIMELINE_TONES.map((level) => el('span', { part: 'sp-tone', 'data-tone': level })),\n ],\n 'probe',\n ),\n // Once the load has failed, the consumer's fallback fills the mount (REQ-515); never on the server.\n el('div', { class: 'sp-kl-mount' }, state.failed ? [slot('fallback')] : [], 'mount'),\n ],\n );\n}\n","import { diagnose } from '../diagnostics/diagnose';\nimport { timelineInk, type TimelineInkHost, type TimelineInkProbe } from './ink';\nimport type { TimelineData } from './types';\n\n/** TimelineJS's events and the name each framework forwards them under (REQ-514). */\nexport const TIMELINE_EVENTS = Object.freeze([\n ['change', 'change'],\n ['loaded', 'loaded'],\n ['nav_next', 'navNext'],\n ['nav_previous', 'navPrevious'],\n ['zoom_in', 'zoomIn'],\n ['zoom_out', 'zoomOut'],\n ['back_to_start', 'backToStart'],\n] as const);\n\n/** The options TimelineJS receives: `font` and `theme` belong to the skin and are dropped (REQ-514). */\nexport function timelineOptions(options?: Readonly<Record<string, unknown>>): Record<string, unknown> {\n const { font: _font, theme: _theme, ...rest } = options ?? {};\n return rest;\n}\n\n/** As much of TimelineJS's module as `timelineMount` uses. */\nexport interface TimelineJsModule {\n readonly Timeline: new (element: never, data: TimelineData, options: Record<string, unknown>) => {\n on(event: string, handler: (payload: unknown) => void): unknown;\n };\n}\n\n/** TimelineJS's container. */\ninterface TimelineMountBox {\n remove(): void;\n}\n\n/** The surface's mount, as much of it as `timelineMount` uses. */\ninterface TimelineMountTarget {\n append(child: never): void;\n readonly ownerDocument: { createElement(tag: 'div'): TimelineMountBox } | null;\n}\n\n/** The surface `timelineView` drew, found in the page. */\nexport interface TimelineMountHost extends TimelineInkHost {\n querySelector(selector: string): unknown;\n}\n\nexport interface TimelineMountOptions {\n readonly load: () => Promise<TimelineJsModule>;\n readonly data: TimelineData;\n readonly options?: Readonly<Record<string, unknown>>;\n readonly inked?: boolean;\n /** One of `TIMELINE_EVENTS`' forwarded names, with a payload only for `change` and `loaded`. */\n readonly emit: (event: string, ...value: unknown[]) => void;\n readonly failed: () => void;\n}\n\n/**\n * The client half of `SpTimeline` (REQ-513..REQ-515, DD-042): inks the surface from its probes,\n * loads TimelineJS through the adapter's `load`, builds it in the mount and forwards its events\n * under `TIMELINE_EVENTS`' names, with a copy of the data. A load that fails, or a TimelineJS that\n * throws as it is built, warns `SP025` and calls `failed`; nothing throws.\n * TimelineJS is built in a container of its own inside the mount, since it rewrites its container's\n * `className`; the returned cleanup cancels a pending load, stops the inking and removes that container.\n */\nexport function timelineMount(host: TimelineMountHost, mount: TimelineMountOptions): () => void {\n const stopInk = timelineInk(host, host.querySelector('.sp-kl-probe') as TimelineInkProbe ?? host, mount.inked);\n const target = host.querySelector('.sp-kl-mount') as TimelineMountTarget | null;\n let live = true;\n /** TimelineJS's container: a `<div>` of its own, which it may restyle; the mount stays the framework's. */\n let box: TimelineMountBox | undefined;\n const fail = (error: unknown) => {\n if (!live) return;\n // Whatever TimelineJS wrote before it threw goes with its container: the mount is the fallback's.\n box?.remove();\n box = undefined;\n diagnose('SP025', 'SpTimeline', { property: 'load', message: error instanceof Error ? error.message : undefined });\n mount.failed();\n };\n mount\n .load()\n .then(({ Timeline }) => {\n if (!live || !target?.ownerDocument) return;\n box = target.ownerDocument.createElement('div');\n target.append(box as never);\n // TimelineJS writes into its data (each slide's `unique_id`): a copy, never the consumer's.\n const timeline = new Timeline(box as never, structuredClone(mount.data), timelineOptions(mount.options));\n for (const [name, as] of TIMELINE_EVENTS) {\n timeline.on(name, (payload) => {\n if (name === 'change') mount.emit(as, (payload as { unique_id?: string } | undefined)?.unique_id);\n else if (name === 'loaded') mount.emit(as, payload);\n else mount.emit(as);\n });\n }\n })\n .catch(fail);\n return () => {\n live = false;\n stopInk();\n box?.remove();\n };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as GroundRef, u as SubstrateName, q as InkMode, v as ProviderConfig } from './props-
|
|
1
|
+
import { t as GroundRef, u as SubstrateName, q as InkMode, au as Palette, v as ProviderConfig } from './props-BZ9CcrGv.js';
|
|
2
2
|
|
|
3
3
|
/** The three container breakpoints; their widths are fixed (TD DD-014). */
|
|
4
4
|
type DashboardBreakpoint = 'sm' | 'md' | 'lg';
|
|
@@ -53,6 +53,8 @@ type DashboardProps = DashboardName & {
|
|
|
53
53
|
substrate?: SubstrateName;
|
|
54
54
|
mode?: InkMode;
|
|
55
55
|
locale?: string;
|
|
56
|
+
/** The section's colours, written on its root and merged under every chart's and component's own (REQ-462). */
|
|
57
|
+
palette?: Palette;
|
|
56
58
|
className?: string;
|
|
57
59
|
};
|
|
58
60
|
interface DashboardCellProps {
|