storybook 9.0.0-alpha.2 → 9.0.0-alpha.20

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.
Files changed (159) hide show
  1. package/README.md +1 -1
  2. package/assets/docs/addon-backgrounds.gif +0 -0
  3. package/assets/docs/addon-controls-args-annotated.png +0 -0
  4. package/assets/docs/addon-controls-args-background-color.png +0 -0
  5. package/assets/docs/addon-controls-args-background-string.png +0 -0
  6. package/assets/docs/addon-controls-args-docs.png +0 -0
  7. package/assets/docs/addon-controls-args-logging.png +0 -0
  8. package/assets/docs/addon-controls-args-no-annotation.png +0 -0
  9. package/assets/docs/addon-controls-args-reflow-slider.png +0 -0
  10. package/assets/docs/addon-controls-args-reflow.png +0 -0
  11. package/assets/docs/addon-controls-args-template.png +0 -0
  12. package/assets/docs/addon-controls-expanded.png +0 -0
  13. package/assets/docs/addon-controls-hero.gif +0 -0
  14. package/assets/docs/addon-controls-install.png +0 -0
  15. package/assets/docs/hero.gif +0 -0
  16. package/assets/docs/highlight.png +0 -0
  17. package/assets/docs/viewport.png +0 -0
  18. package/bin/index.cjs +2 -2
  19. package/dist/actions/decorator.d.ts +6 -0
  20. package/dist/actions/decorator.js +138 -0
  21. package/dist/actions/index.cjs +126 -0
  22. package/dist/actions/index.d.ts +102 -0
  23. package/dist/actions/index.js +111 -0
  24. package/dist/actions/preview.cjs +164 -0
  25. package/dist/actions/preview.d.ts +54 -0
  26. package/dist/actions/preview.js +155 -0
  27. package/dist/backgrounds/index.cjs +148 -0
  28. package/dist/backgrounds/index.d.ts +91 -0
  29. package/dist/backgrounds/index.js +130 -0
  30. package/dist/backgrounds/preview.cjs +143 -0
  31. package/dist/backgrounds/preview.d.ts +54 -0
  32. package/dist/backgrounds/preview.js +127 -0
  33. package/dist/bin/index.cjs +66 -89
  34. package/dist/bin/index.js +62 -85
  35. package/dist/builder-manager/index.cjs +523 -540
  36. package/dist/builder-manager/index.js +544 -561
  37. package/dist/channels/index.cjs +1026 -981
  38. package/dist/channels/index.js +1194 -1165
  39. package/dist/cli/bin/index.cjs +483 -483
  40. package/dist/cli/bin/index.js +495 -495
  41. package/dist/cli/index.cjs +2279 -2295
  42. package/dist/cli/index.d.ts +4 -8
  43. package/dist/cli/index.js +740 -756
  44. package/dist/client-logger/index.cjs +56 -88
  45. package/dist/client-logger/index.js +41 -47
  46. package/dist/common/index.cjs +2496 -2480
  47. package/dist/common/index.d.ts +5 -29
  48. package/dist/common/index.js +2679 -2663
  49. package/dist/component-testing/index.cjs +23 -0
  50. package/dist/component-testing/index.d.ts +3 -0
  51. package/dist/component-testing/index.js +5 -0
  52. package/dist/component-testing/preview.cjs +40 -0
  53. package/dist/component-testing/preview.d.ts +5 -0
  54. package/dist/component-testing/preview.js +25 -0
  55. package/dist/components/index.cjs +11709 -20418
  56. package/dist/components/index.d.ts +94 -346
  57. package/dist/components/index.js +5827 -19157
  58. package/dist/controls/decorator.d.ts +5 -0
  59. package/dist/controls/decorator.js +8 -0
  60. package/dist/controls/index.cjs +26 -0
  61. package/dist/controls/index.d.ts +39 -0
  62. package/dist/controls/index.js +6 -0
  63. package/dist/controls/preview.cjs +26 -0
  64. package/dist/controls/preview.d.ts +54 -0
  65. package/dist/controls/preview.js +9 -0
  66. package/dist/core-events/index.cjs +91 -106
  67. package/dist/core-events/index.d.ts +139 -104
  68. package/dist/core-events/index.js +79 -94
  69. package/dist/core-server/index.cjs +14413 -13924
  70. package/dist/core-server/index.d.ts +270 -3
  71. package/dist/core-server/index.js +14003 -13519
  72. package/dist/core-server/presets/common-manager.css +170 -0
  73. package/dist/core-server/presets/common-manager.js +12099 -17
  74. package/dist/core-server/presets/common-preset.cjs +2760 -2914
  75. package/dist/core-server/presets/common-preset.js +2852 -3007
  76. package/dist/csf/index.cjs +76 -120
  77. package/dist/csf/index.d.ts +2 -6
  78. package/dist/csf/index.js +69 -113
  79. package/dist/csf-tools/index.cjs +412 -403
  80. package/dist/csf-tools/index.d.ts +0 -4
  81. package/dist/csf-tools/index.js +410 -401
  82. package/dist/docs-tools/index.cjs +2569 -575
  83. package/dist/docs-tools/index.d.ts +2 -2
  84. package/dist/docs-tools/index.js +2557 -564
  85. package/dist/highlight/index.cjs +27 -0
  86. package/dist/highlight/index.d.ts +17 -0
  87. package/dist/highlight/index.js +7 -0
  88. package/dist/highlight/preview.cjs +81 -0
  89. package/dist/highlight/preview.d.ts +54 -0
  90. package/dist/highlight/preview.js +67 -0
  91. package/dist/instrumenter/index.cjs +2207 -2342
  92. package/dist/instrumenter/index.d.ts +8 -7
  93. package/dist/instrumenter/index.js +2438 -2620
  94. package/dist/manager/globals-module-info.cjs +290 -151
  95. package/dist/manager/globals-module-info.d.ts +1 -1
  96. package/dist/manager/globals-module-info.js +274 -135
  97. package/dist/manager/globals-runtime.js +60016 -28331
  98. package/dist/manager/globals.cjs +23 -19
  99. package/dist/manager/globals.d.ts +8 -5
  100. package/dist/manager/globals.js +10 -6
  101. package/dist/manager/runtime.js +4645 -3946
  102. package/dist/manager-api/index.cjs +4228 -3833
  103. package/dist/manager-api/index.d.ts +398 -102
  104. package/dist/manager-api/index.js +3676 -3291
  105. package/dist/manager-errors.d.ts +25 -1
  106. package/dist/manager-errors.js +42 -26
  107. package/dist/measure/index.cjs +474 -0
  108. package/dist/measure/index.d.ts +66 -0
  109. package/dist/measure/index.js +462 -0
  110. package/dist/measure/preview.cjs +464 -0
  111. package/dist/measure/preview.d.ts +59 -0
  112. package/dist/measure/preview.js +448 -0
  113. package/dist/outline/index.cjs +528 -0
  114. package/dist/outline/index.d.ts +66 -0
  115. package/dist/outline/index.js +500 -0
  116. package/dist/outline/preview.cjs +518 -0
  117. package/dist/outline/preview.d.ts +59 -0
  118. package/dist/outline/preview.js +486 -0
  119. package/dist/preview/globals.cjs +21 -17
  120. package/dist/preview/globals.d.ts +4 -1
  121. package/dist/preview/globals.js +6 -2
  122. package/dist/preview/runtime.js +45697 -6618
  123. package/dist/preview-api/index.cjs +1363 -1898
  124. package/dist/preview-api/index.d.ts +449 -498
  125. package/dist/preview-api/index.js +1622 -2095
  126. package/dist/preview-errors.cjs +99 -82
  127. package/dist/preview-errors.d.ts +25 -1
  128. package/dist/preview-errors.js +110 -94
  129. package/dist/router/index.cjs +847 -871
  130. package/dist/router/index.js +193 -199
  131. package/dist/server-errors.cjs +156 -125
  132. package/dist/server-errors.d.ts +28 -2
  133. package/dist/server-errors.js +150 -119
  134. package/dist/telemetry/index.cjs +1050 -1977
  135. package/dist/telemetry/index.d.ts +26 -5
  136. package/dist/telemetry/index.js +1085 -2008
  137. package/dist/test/index.cjs +35686 -0
  138. package/dist/test/index.d.ts +186 -0
  139. package/dist/test/index.js +33752 -0
  140. package/dist/test/preview.cjs +15870 -0
  141. package/dist/test/preview.d.ts +54 -0
  142. package/dist/test/preview.js +14441 -0
  143. package/dist/test/spy.cjs +258 -0
  144. package/dist/test/spy.d.ts +66 -0
  145. package/dist/test/spy.js +240 -0
  146. package/dist/theming/create.cjs +79 -2269
  147. package/dist/theming/create.js +67 -841
  148. package/dist/theming/index.cjs +1065 -3232
  149. package/dist/theming/index.js +951 -1719
  150. package/dist/types/index.cjs +11 -12
  151. package/dist/types/index.d.ts +612 -157
  152. package/dist/types/index.js +1 -2
  153. package/dist/viewport/index.cjs +310 -0
  154. package/dist/viewport/index.d.ts +320 -0
  155. package/dist/viewport/index.js +290 -0
  156. package/dist/viewport/preview.cjs +35 -0
  157. package/dist/viewport/preview.d.ts +68 -0
  158. package/dist/viewport/preview.js +19 -0
  159. package/package.json +359 -12
@@ -1,3 +1,17 @@
1
+ import { StoryId } from 'storybook/internal/csf';
2
+
3
+ type StatusValue = 'status-value:pending' | 'status-value:success' | 'status-value:error' | 'status-value:warning' | 'status-value:unknown';
4
+ type StatusTypeId = string;
5
+ interface Status {
6
+ value: StatusValue;
7
+ typeId: StatusTypeId;
8
+ storyId: StoryId;
9
+ title: string;
10
+ description: string;
11
+ data?: any;
12
+ sidebarContextMenu?: boolean;
13
+ }
14
+
1
15
  declare abstract class StorybookError extends Error {
2
16
  /** Category of the error. Used to classify the type of error, e.g., 'PREVIEW_API'. */
3
17
  readonly category: string;
@@ -61,5 +75,15 @@ declare class UncaughtManagerError extends StorybookError {
61
75
  error: Error;
62
76
  });
63
77
  }
78
+ declare class StatusTypeIdMismatchError extends StorybookError {
79
+ data: {
80
+ status: Status;
81
+ typeId: StatusTypeId;
82
+ };
83
+ constructor(data: {
84
+ status: Status;
85
+ typeId: StatusTypeId;
86
+ });
87
+ }
64
88
 
65
- export { Category, ProviderDoesNotExtendBaseProviderError, UncaughtManagerError };
89
+ export { Category, ProviderDoesNotExtendBaseProviderError, StatusTypeIdMismatchError, UncaughtManagerError };
@@ -1,15 +1,15 @@
1
- var g = Object.defineProperty;
2
- var t = (A, o) => g(A, "name", { value: o, configurable: !0 });
1
+ var R = Object.defineProperty;
2
+ var r = (A, s) => R(A, "name", { value: s, configurable: !0 });
3
3
 
4
4
  // src/storybook-error.ts
5
- function E({
5
+ function l({
6
6
  code: A,
7
- category: o
7
+ category: s
8
8
  }) {
9
9
  let e = String(A).padStart(4, "0");
10
- return `SB_${o}_${e}`;
10
+ return `SB_${s}_${e}`;
11
11
  }
12
- t(E, "parseErrorCode");
12
+ r(l, "parseErrorCode");
13
13
  var c = class c extends Error {
14
14
  constructor(e) {
15
15
  super(c.getFullMessage(e));
@@ -23,7 +23,7 @@ var c = class c extends Error {
23
23
  this.category = e.category, this.documentation = e.documentation ?? !1, this.code = e.code;
24
24
  }
25
25
  get fullErrorCode() {
26
- return E({ code: this.code, category: this.category });
26
+ return l({ code: this.code, category: this.category });
27
27
  }
28
28
  /** Overrides the default `Error.name` property in the format: SB_<CATEGORY>_<CODE>. */
29
29
  get name() {
@@ -33,27 +33,27 @@ var c = class c extends Error {
33
33
  /** Generates the error message along with additional documentation link (if applicable). */
34
34
  static getFullMessage({
35
35
  documentation: e,
36
- code: u,
37
- category: d,
36
+ code: p,
37
+ category: y,
38
38
  message: G
39
39
  }) {
40
- let s;
41
- return e === !0 ? s = `https://storybook.js.org/error/${E({ code: u, category: d })}` : typeof e == "string" ? s = e : Array.isArray(e) &&
42
- (s = `
43
- ${e.map((R) => ` - ${R}`).join(`
44
- `)}`), `${G}${s != null ? `
40
+ let n;
41
+ return e === !0 ? n = `https://storybook.js.org/error/${l({ code: p, category: y })}` : typeof e == "string" ? n = e : Array.isArray(e) &&
42
+ (n = `
43
+ ${e.map((g) => ` - ${g}`).join(`
44
+ `)}`), `${G}${n != null ? `
45
45
 
46
- More info: ${s}
46
+ More info: ${n}
47
47
  ` : ""}`;
48
48
  }
49
49
  };
50
- t(c, "StorybookError");
51
- var n = c;
50
+ r(c, "StorybookError");
51
+ var o = c;
52
52
 
53
53
  // src/manager-errors.ts
54
- var M = /* @__PURE__ */ ((r) => (r.MANAGER_UNCAUGHT = "MANAGER_UNCAUGHT", r.MANAGER_UI = "MANAGER_UI", r.MANAGER_API = "MANAGER_API", r.MANAGER_CLIENT_LOGGER =
55
- "MANAGER_CLIENT-LOGGER", r.MANAGER_CHANNELS = "MANAGER_CHANNELS", r.MANAGER_CORE_EVENTS = "MANAGER_CORE-EVENTS", r.MANAGER_ROUTER = "MANAGER\
56
- _ROUTER", r.MANAGER_THEMING = "MANAGER_THEMING", r))(M || {}), i = class i extends n {
54
+ var M = /* @__PURE__ */ ((t) => (t.MANAGER_UNCAUGHT = "MANAGER_UNCAUGHT", t.MANAGER_UI = "MANAGER_UI", t.MANAGER_API = "MANAGER_API", t.MANAGER_CLIENT_LOGGER =
55
+ "MANAGER_CLIENT-LOGGER", t.MANAGER_CHANNELS = "MANAGER_CHANNELS", t.MANAGER_CORE_EVENTS = "MANAGER_CORE-EVENTS", t.MANAGER_ROUTER = "MANAGER\
56
+ _ROUTER", t.MANAGER_THEMING = "MANAGER_THEMING", t))(M || {}), a = class a extends o {
57
57
  constructor() {
58
58
  super({
59
59
  category: "MANAGER_UI",
@@ -62,8 +62,8 @@ _ROUTER", r.MANAGER_THEMING = "MANAGER_THEMING", r))(M || {}), i = class i exten
62
62
  });
63
63
  }
64
64
  };
65
- t(i, "ProviderDoesNotExtendBaseProviderError");
66
- var l = i, a = class a extends n {
65
+ r(a, "ProviderDoesNotExtendBaseProviderError");
66
+ var d = a, u = class u extends o {
67
67
  constructor(e) {
68
68
  super({
69
69
  category: "MANAGER_UNCAUGHT",
@@ -74,10 +74,26 @@ var l = i, a = class a extends n {
74
74
  this.stack = e.error.stack;
75
75
  }
76
76
  };
77
- t(a, "UncaughtManagerError");
78
- var N = a;
77
+ r(u, "UncaughtManagerError");
78
+ var E = u, i = class i extends o {
79
+ constructor(e) {
80
+ super({
81
+ category: "MANAGER_API",
82
+ code: 1,
83
+ message: `Status has typeId "${e.status.typeId}" but was added to store with typeId "${e.typeId}". Full status: ${JSON.stringify(
84
+ e.status,
85
+ null,
86
+ 2
87
+ )}`
88
+ });
89
+ this.data = e;
90
+ }
91
+ };
92
+ r(i, "StatusTypeIdMismatchError");
93
+ var N = i;
79
94
  export {
80
95
  M as Category,
81
- l as ProviderDoesNotExtendBaseProviderError,
82
- N as UncaughtManagerError
96
+ d as ProviderDoesNotExtendBaseProviderError,
97
+ N as StatusTypeIdMismatchError,
98
+ E as UncaughtManagerError
83
99
  };
@@ -0,0 +1,474 @@
1
+ "use strict";
2
+ var v = Object.defineProperty;
3
+ var dt = Object.getOwnPropertyDescriptor;
4
+ var pt = Object.getOwnPropertyNames;
5
+ var ut = Object.prototype.hasOwnProperty;
6
+ var l = (e, t) => v(e, "name", { value: t, configurable: !0 });
7
+ var F = (e, t) => {
8
+ for (var o in t)
9
+ v(e, o, { get: t[o], enumerable: !0 });
10
+ }, ht = (e, t, o, i) => {
11
+ if (t && typeof t == "object" || typeof t == "function")
12
+ for (let n of pt(t))
13
+ !ut.call(e, n) && n !== o && v(e, n, { get: () => t[n], enumerable: !(i = dt(t, n)) || i.enumerable });
14
+ return e;
15
+ };
16
+ var bt = (e) => ht(v({}, "__esModule", { value: !0 }), e);
17
+
18
+ // src/measure/index.ts
19
+ var Ft = {};
20
+ F(Ft, {
21
+ default: () => Wt
22
+ });
23
+ module.exports = bt(Ft);
24
+ var nt = require("storybook/preview-api");
25
+
26
+ // src/measure/preview.ts
27
+ var H = {};
28
+ F(H, {
29
+ decorators: () => et,
30
+ default: () => Ht,
31
+ initialGlobals: () => ot
32
+ });
33
+ var tt = require("storybook/preview-api");
34
+
35
+ // src/measure/constants.ts
36
+ var R = "storybook/measure-addon", Bt = `${R}/tool`, Y = "measureEnabled", zt = {
37
+ RESULT: `${R}/result`,
38
+ REQUEST: `${R}/request`,
39
+ CLEAR: `${R}/clear`
40
+ };
41
+
42
+ // src/measure/withMeasure.ts
43
+ var A = require("storybook/preview-api");
44
+
45
+ // src/measure/box-model/canvas.ts
46
+ var E = require("@storybook/global");
47
+
48
+ // ../node_modules/tiny-invariant/dist/esm/tiny-invariant.js
49
+ var gt = process.env.NODE_ENV === "production", k = "Invariant failed";
50
+ function M(e, t) {
51
+ if (!e) {
52
+ if (gt)
53
+ throw new Error(k);
54
+ var o = typeof t == "function" ? t() : t, i = o ? "".concat(k, ": ").concat(o) : k;
55
+ throw new Error(i);
56
+ }
57
+ }
58
+ l(M, "invariant");
59
+
60
+ // src/measure/box-model/canvas.ts
61
+ function B() {
62
+ let e = E.global.document.documentElement, t = Math.max(e.scrollHeight, e.offsetHeight);
63
+ return { width: Math.max(e.scrollWidth, e.offsetWidth), height: t };
64
+ }
65
+ l(B, "getDocumentWidthAndHeight");
66
+ function wt() {
67
+ let e = E.global.document.createElement("canvas");
68
+ e.id = "storybook-addon-measure";
69
+ let t = e.getContext("2d");
70
+ M(t != null);
71
+ let { width: o, height: i } = B();
72
+ return T(e, t, { width: o, height: i }), e.style.position = "absolute", e.style.left = "0", e.style.top = "0", e.style.zIndex = "214748364\
73
+ 7", e.style.pointerEvents = "none", E.global.document.body.appendChild(e), { canvas: e, context: t, width: o, height: i };
74
+ }
75
+ l(wt, "createCanvas");
76
+ function T(e, t, { width: o, height: i }) {
77
+ e.style.width = `${o}px`, e.style.height = `${i}px`;
78
+ let n = E.global.window.devicePixelRatio;
79
+ e.width = Math.floor(o * n), e.height = Math.floor(i * n), t.scale(n, n);
80
+ }
81
+ l(T, "setCanvasWidthAndHeight");
82
+ var m = {};
83
+ function z() {
84
+ m.canvas || (m = wt());
85
+ }
86
+ l(z, "init");
87
+ function X() {
88
+ m.context && m.context.clearRect(0, 0, m.width ?? 0, m.height ?? 0);
89
+ }
90
+ l(X, "clear");
91
+ function $(e) {
92
+ X(), e(m.context);
93
+ }
94
+ l($, "draw");
95
+ function N() {
96
+ M(m.canvas, "Canvas should exist in the state."), M(m.context, "Context should exist in the state."), T(m.canvas, m.context, { width: 0, height: 0 });
97
+ let { width: e, height: t } = B();
98
+ T(m.canvas, m.context, { width: e, height: t }), m.width = e, m.height = t;
99
+ }
100
+ l(N, "rescale");
101
+ function O() {
102
+ m.canvas && (X(), m.canvas.parentNode?.removeChild(m.canvas), m = {});
103
+ }
104
+ l(O, "destroy");
105
+
106
+ // src/measure/box-model/visualizer.ts
107
+ var b = require("@storybook/global");
108
+
109
+ // src/measure/box-model/labels.ts
110
+ var w = {
111
+ margin: "#f6b26b",
112
+ border: "#ffe599",
113
+ padding: "#93c47d",
114
+ content: "#6fa8dc",
115
+ text: "#232020"
116
+ }, g = 6;
117
+ function I(e, { x: t, y: o, w: i, h: n, r }) {
118
+ t = t - i / 2, o = o - n / 2, i < 2 * r && (r = i / 2), n < 2 * r && (r = n / 2), e.beginPath(), e.moveTo(t + r, o), e.arcTo(t + i, o, t +
119
+ i, o + n, r), e.arcTo(t + i, o + n, t, o + n, r), e.arcTo(t, o + n, t, o, r), e.arcTo(t, o, t + i, o, r), e.closePath();
120
+ }
121
+ l(I, "roundedRect");
122
+ function Lt(e, { padding: t, border: o, width: i, height: n, top: r, left: a }) {
123
+ let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom, c = a + o.left + t.left, d = r + o.top + t.top;
124
+ return e === "top" ? c += s / 2 : e === "right" ? (c += s, d += f / 2) : e === "bottom" ? (c += s / 2, d += f) : e === "left" ? d += f / 2 :
125
+ e === "center" && (c += s / 2, d += f / 2), { x: c, y: d };
126
+ }
127
+ l(Lt, "positionCoordinate");
128
+ function yt(e, t, { margin: o, border: i, padding: n }, r, a) {
129
+ let s = /* @__PURE__ */ l((p) => 0, "shift"), f = 0, c = 0, d = a ? 1 : 0.5, u = a ? r * 2 : 0;
130
+ return e === "padding" ? s = /* @__PURE__ */ l((p) => n[p] * d + u, "shift") : e === "border" ? s = /* @__PURE__ */ l((p) => n[p] + i[p] *
131
+ d + u, "shift") : e === "margin" && (s = /* @__PURE__ */ l((p) => n[p] + i[p] + o[p] * d + u, "shift")), t === "top" ? c = -s("top") : t ===
132
+ "right" ? f = s("right") : t === "bottom" ? c = s("bottom") : t === "left" && (f = -s("left")), { offsetX: f, offsetY: c };
133
+ }
134
+ l(yt, "offset");
135
+ function Et(e, t) {
136
+ return Math.abs(e.x - t.x) < Math.abs(e.w + t.w) / 2 && Math.abs(e.y - t.y) < Math.abs(e.h + t.h) / 2;
137
+ }
138
+ l(Et, "collide");
139
+ function St(e, t, o) {
140
+ return e === "top" ? t.y = o.y - o.h - g : e === "right" ? t.x = o.x + o.w / 2 + g + t.w / 2 : e === "bottom" ? t.y = o.y + o.h + g : e ===
141
+ "left" && (t.x = o.x - o.w / 2 - g - t.w / 2), { x: t.x, y: t.y };
142
+ }
143
+ l(St, "overlapAdjustment");
144
+ function _(e, t, { x: o, y: i, w: n, h: r }, a) {
145
+ return I(e, { x: o, y: i, w: n, h: r, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle = w.text,
146
+ e.fillText(a, o, i), I(e, { x: o, y: i, w: n, h: r, r: 3 }), e.fillStyle = `${w[t]}dd`, e.fill(), e.strokeStyle = w[t], e.stroke(), e.fillStyle =
147
+ w.text, e.fillText(a, o, i), { x: o, y: i, w: n, h: r };
148
+ }
149
+ l(_, "textWithRect");
150
+ function q(e, t) {
151
+ e.font = "600 12px monospace", e.textBaseline = "middle", e.textAlign = "center";
152
+ let o = e.measureText(t), i = o.actualBoundingBoxAscent + o.actualBoundingBoxDescent, n = o.width + g * 2, r = i + g * 2;
153
+ return { w: n, h: r };
154
+ }
155
+ l(q, "configureText");
156
+ function Ct(e, t, { type: o, position: i = "center", text: n }, r, a = !1) {
157
+ let { x: s, y: f } = Lt(i, t), { offsetX: c, offsetY: d } = yt(o, i, t, g + 1, a);
158
+ s += c, f += d;
159
+ let { w: u, h: p } = q(e, n);
160
+ if (r && Et({ x: s, y: f, w: u, h: p }, r)) {
161
+ let C = St(i, { x: s, y: f, w: u, h: p }, r);
162
+ s = C.x, f = C.y;
163
+ }
164
+ return _(e, o, { x: s, y: f, w: u, h: p }, n);
165
+ }
166
+ l(Ct, "drawLabel");
167
+ function vt(e, { w: t, h: o }) {
168
+ let i = t * 0.5 + g, n = o * 0.5 + g;
169
+ return {
170
+ offsetX: (e.x === "left" ? -1 : 1) * i,
171
+ offsetY: (e.y === "top" ? -1 : 1) * n
172
+ };
173
+ }
174
+ l(vt, "floatingOffset");
175
+ function Rt(e, t, { type: o, text: i }) {
176
+ let { floatingAlignment: n, extremities: r } = t, a = r[n.x], s = r[n.y], { w: f, h: c } = q(e, i), { offsetX: d, offsetY: u } = vt(n, {
177
+ w: f,
178
+ h: c
179
+ });
180
+ return a += d, s += u, _(e, o, { x: a, y: s, w: f, h: c }, i);
181
+ }
182
+ l(Rt, "drawFloatingLabel");
183
+ function S(e, t, o, i) {
184
+ let n = [];
185
+ o.forEach((r, a) => {
186
+ let s = i && r.position === "center" ? Rt(e, t, r) : Ct(e, t, r, n[a - 1], i);
187
+ n[a] = s;
188
+ });
189
+ }
190
+ l(S, "drawStack");
191
+ function j(e, t, o, i) {
192
+ let n = o.reduce((r, a) => (Object.prototype.hasOwnProperty.call(r, a.position) || (r[a.position] = []), r[a.position]?.push(a), r), {});
193
+ n.top && S(e, t, n.top, i), n.right && S(e, t, n.right, i), n.bottom && S(e, t, n.bottom, i), n.left && S(e, t, n.left, i), n.center && S(
194
+ e, t, n.center, i);
195
+ }
196
+ l(j, "labelStacks");
197
+
198
+ // src/measure/box-model/visualizer.ts
199
+ var x = {
200
+ margin: "#f6b26ba8",
201
+ border: "#ffe599a8",
202
+ padding: "#93c47d8c",
203
+ content: "#6fa8dca8"
204
+ }, G = 30;
205
+ function h(e) {
206
+ return parseInt(e.replace("px", ""), 10);
207
+ }
208
+ l(h, "pxToNumber");
209
+ function L(e) {
210
+ return Number.isInteger(e) ? e : e.toFixed(2);
211
+ }
212
+ l(L, "round");
213
+ function P(e) {
214
+ return e.filter((t) => t.text !== 0 && t.text !== "0");
215
+ }
216
+ l(P, "filterZeroValues");
217
+ function Mt(e) {
218
+ let t = {
219
+ top: b.global.window.scrollY,
220
+ bottom: b.global.window.scrollY + b.global.window.innerHeight,
221
+ left: b.global.window.scrollX,
222
+ right: b.global.window.scrollX + b.global.window.innerWidth
223
+ }, o = {
224
+ top: Math.abs(t.top - e.top),
225
+ bottom: Math.abs(t.bottom - e.bottom),
226
+ left: Math.abs(t.left - e.left),
227
+ right: Math.abs(t.right - e.right)
228
+ };
229
+ return {
230
+ x: o.left > o.right ? "left" : "right",
231
+ y: o.top > o.bottom ? "top" : "bottom"
232
+ };
233
+ }
234
+ l(Mt, "floatingAlignment");
235
+ function xt(e) {
236
+ let t = b.global.getComputedStyle(e), { top: o, left: i, right: n, bottom: r, width: a, height: s } = e.getBoundingClientRect(), {
237
+ marginTop: f,
238
+ marginBottom: c,
239
+ marginLeft: d,
240
+ marginRight: u,
241
+ paddingTop: p,
242
+ paddingBottom: C,
243
+ paddingLeft: it,
244
+ paddingRight: rt,
245
+ borderBottomWidth: lt,
246
+ borderTopWidth: at,
247
+ borderLeftWidth: st,
248
+ borderRightWidth: ft
249
+ } = t;
250
+ o = o + b.global.window.scrollY, i = i + b.global.window.scrollX, r = r + b.global.window.scrollY, n = n + b.global.window.scrollX;
251
+ let y = {
252
+ top: h(f),
253
+ bottom: h(c),
254
+ left: h(d),
255
+ right: h(u)
256
+ }, ct = {
257
+ top: h(p),
258
+ bottom: h(C),
259
+ left: h(it),
260
+ right: h(rt)
261
+ }, mt = {
262
+ top: h(at),
263
+ bottom: h(lt),
264
+ left: h(st),
265
+ right: h(ft)
266
+ }, W = {
267
+ top: o - y.top,
268
+ bottom: r + y.bottom,
269
+ left: i - y.left,
270
+ right: n + y.right
271
+ };
272
+ return {
273
+ margin: y,
274
+ padding: ct,
275
+ border: mt,
276
+ top: o,
277
+ left: i,
278
+ bottom: r,
279
+ right: n,
280
+ width: a,
281
+ height: s,
282
+ extremities: W,
283
+ floatingAlignment: Mt(W)
284
+ };
285
+ }
286
+ l(xt, "measureElement");
287
+ function Dt(e, { margin: t, width: o, height: i, top: n, left: r, bottom: a, right: s }) {
288
+ let f = i + t.bottom + t.top;
289
+ e.fillStyle = x.margin, e.fillRect(r, n - t.top, o, t.top), e.fillRect(s, n - t.top, t.right, f), e.fillRect(r, a, o, t.bottom), e.fillRect(
290
+ r - t.left, n - t.top, t.left, f);
291
+ let c = [
292
+ {
293
+ type: "margin",
294
+ text: L(t.top),
295
+ position: "top"
296
+ },
297
+ {
298
+ type: "margin",
299
+ text: L(t.right),
300
+ position: "right"
301
+ },
302
+ {
303
+ type: "margin",
304
+ text: L(t.bottom),
305
+ position: "bottom"
306
+ },
307
+ {
308
+ type: "margin",
309
+ text: L(t.left),
310
+ position: "left"
311
+ }
312
+ ];
313
+ return P(c);
314
+ }
315
+ l(Dt, "drawMargin");
316
+ function kt(e, { padding: t, border: o, width: i, height: n, top: r, left: a, bottom: s, right: f }) {
317
+ let c = i - o.left - o.right, d = n - t.top - t.bottom - o.top - o.bottom;
318
+ e.fillStyle = x.padding, e.fillRect(a + o.left, r + o.top, c, t.top), e.fillRect(
319
+ f - t.right - o.right,
320
+ r + t.top + o.top,
321
+ t.right,
322
+ d
323
+ ), e.fillRect(
324
+ a + o.left,
325
+ s - t.bottom - o.bottom,
326
+ c,
327
+ t.bottom
328
+ ), e.fillRect(a + o.left, r + t.top + o.top, t.left, d);
329
+ let u = [
330
+ {
331
+ type: "padding",
332
+ text: t.top,
333
+ position: "top"
334
+ },
335
+ {
336
+ type: "padding",
337
+ text: t.right,
338
+ position: "right"
339
+ },
340
+ {
341
+ type: "padding",
342
+ text: t.bottom,
343
+ position: "bottom"
344
+ },
345
+ {
346
+ type: "padding",
347
+ text: t.left,
348
+ position: "left"
349
+ }
350
+ ];
351
+ return P(u);
352
+ }
353
+ l(kt, "drawPadding");
354
+ function Tt(e, { border: t, width: o, height: i, top: n, left: r, bottom: a, right: s }) {
355
+ let f = i - t.top - t.bottom;
356
+ e.fillStyle = x.border, e.fillRect(r, n, o, t.top), e.fillRect(r, a - t.bottom, o, t.bottom), e.fillRect(r, n + t.top, t.left, f), e.fillRect(
357
+ s - t.right, n + t.top, t.right, f);
358
+ let c = [
359
+ {
360
+ type: "border",
361
+ text: t.top,
362
+ position: "top"
363
+ },
364
+ {
365
+ type: "border",
366
+ text: t.right,
367
+ position: "right"
368
+ },
369
+ {
370
+ type: "border",
371
+ text: t.bottom,
372
+ position: "bottom"
373
+ },
374
+ {
375
+ type: "border",
376
+ text: t.left,
377
+ position: "left"
378
+ }
379
+ ];
380
+ return P(c);
381
+ }
382
+ l(Tt, "drawBorder");
383
+ function Pt(e, { padding: t, border: o, width: i, height: n, top: r, left: a }) {
384
+ let s = i - o.left - o.right - t.left - t.right, f = n - t.top - t.bottom - o.top - o.bottom;
385
+ return e.fillStyle = x.content, e.fillRect(
386
+ a + o.left + t.left,
387
+ r + o.top + t.top,
388
+ s,
389
+ f
390
+ ), [
391
+ {
392
+ type: "content",
393
+ position: "center",
394
+ text: `${L(s)} x ${L(f)}`
395
+ }
396
+ ];
397
+ }
398
+ l(Pt, "drawContent");
399
+ function At(e) {
400
+ return (t) => {
401
+ if (e && t) {
402
+ let o = xt(e), i = Dt(t, o), n = kt(t, o), r = Tt(t, o), a = Pt(t, o), s = o.width <= G * 3 || o.height <= G;
403
+ j(
404
+ t,
405
+ o,
406
+ [...a, ...n, ...r, ...i],
407
+ s
408
+ );
409
+ }
410
+ };
411
+ }
412
+ l(At, "drawBoxModel");
413
+ function V(e) {
414
+ $(At(e));
415
+ }
416
+ l(V, "drawSelectedElement");
417
+
418
+ // src/measure/util.ts
419
+ var K = require("@storybook/global");
420
+ var U = /* @__PURE__ */ l((e, t) => {
421
+ let o = K.global.document.elementFromPoint(e, t), i = /* @__PURE__ */ l((r) => {
422
+ if (r && r.shadowRoot) {
423
+ let a = r.shadowRoot.elementFromPoint(e, t);
424
+ return r.isEqualNode(a) ? r : a.shadowRoot ? i(a) : a;
425
+ }
426
+ return r;
427
+ }, "crawlShadows");
428
+ return i(o) || o;
429
+ }, "deepElementFromPoint");
430
+
431
+ // src/measure/withMeasure.ts
432
+ var Z, D = { x: 0, y: 0 };
433
+ function Q(e, t) {
434
+ Z = U(e, t), V(Z);
435
+ }
436
+ l(Q, "findAndDrawElement");
437
+ var J = /* @__PURE__ */ l((e, t) => {
438
+ let { measureEnabled: o } = t.globals || {};
439
+ return (0, A.useEffect)(() => {
440
+ let i = /* @__PURE__ */ l((n) => {
441
+ window.requestAnimationFrame(() => {
442
+ n.stopPropagation(), D.x = n.clientX, D.y = n.clientY;
443
+ });
444
+ }, "onPointerMove");
445
+ return document.addEventListener("pointermove", i), () => {
446
+ document.removeEventListener("pointermove", i);
447
+ };
448
+ }, []), (0, A.useEffect)(() => {
449
+ let i = /* @__PURE__ */ l((r) => {
450
+ window.requestAnimationFrame(() => {
451
+ r.stopPropagation(), Q(r.clientX, r.clientY);
452
+ });
453
+ }, "onPointerOver"), n = /* @__PURE__ */ l(() => {
454
+ window.requestAnimationFrame(() => {
455
+ N();
456
+ });
457
+ }, "onResize");
458
+ return t.viewMode === "story" && o && (document.addEventListener("pointerover", i), z(), window.addEventListener("resize", n), Q(D.x, D.
459
+ y)), () => {
460
+ window.removeEventListener("resize", n), O();
461
+ };
462
+ }, [o, t.viewMode]), e();
463
+ }, "withMeasure");
464
+
465
+ // src/measure/preview.ts
466
+ var et = [J], ot = {
467
+ [Y]: !1
468
+ }, Ht = /* @__PURE__ */ l(() => (0, tt.definePreview)({
469
+ decorators: et,
470
+ initialGlobals: ot
471
+ }), "default");
472
+
473
+ // src/measure/index.ts
474
+ var Wt = /* @__PURE__ */ l(() => (0, nt.definePreview)(H), "default");
@@ -0,0 +1,66 @@
1
+ import { Renderer as Renderer$1, ProjectAnnotations as ProjectAnnotations$1, StoryIdentifier, StoryContext, PartialStoryFn, LegacyStoryFn } from 'storybook/internal/csf';
2
+ import { NormalizedProjectAnnotations, ProjectAnnotations as ProjectAnnotations$2, ComposedStoryFn } from 'storybook/internal/types';
3
+
4
+ declare global {
5
+ interface SymbolConstructor {
6
+ readonly observable: symbol;
7
+ }
8
+ }
9
+
10
+ interface Renderer extends Renderer$1 {
11
+ }
12
+
13
+ type MaybePromise<T> = Promise<T> | T;
14
+ type TeardownRenderToCanvas = () => MaybePromise<void>;
15
+ type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
16
+ interface ProjectAnnotations<TRenderer extends Renderer> extends ProjectAnnotations$1<TRenderer> {
17
+ addons?: ProjectAnnotations<TRenderer>[];
18
+ testingLibraryRender?: (...args: never[]) => {
19
+ unmount: () => void;
20
+ };
21
+ renderToCanvas?: RenderToCanvas<TRenderer>;
22
+ }
23
+ declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
24
+ showMain: () => void;
25
+ showError: (error: {
26
+ title: string;
27
+ description: string;
28
+ }) => void;
29
+ showException: (err: Error) => void;
30
+ forceRemount: boolean;
31
+ storyContext: StoryContext<TRenderer>;
32
+ storyFn: PartialStoryFn<TRenderer>;
33
+ unboundStoryFn: LegacyStoryFn<TRenderer>;
34
+ };
35
+
36
+ declare global {
37
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
38
+ var defaultProjectAnnotations: ProjectAnnotations$2<any>;
39
+ }
40
+ type WrappedStoryRef = {
41
+ __pw_type: 'jsx' | 'importRef';
42
+ };
43
+ type UnwrappedJSXStoryRef = {
44
+ __pw_type: 'jsx';
45
+ type: UnwrappedImportStoryRef;
46
+ };
47
+ type UnwrappedImportStoryRef = ComposedStoryFn;
48
+ declare global {
49
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
50
+ }
51
+
52
+ interface MeasureParameters {
53
+ /**
54
+ * Measure configuration
55
+ *
56
+ * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
57
+ */
58
+ measure: {
59
+ /** Remove the addon panel and disable the addon's behavior */
60
+ disable?: boolean;
61
+ };
62
+ }
63
+
64
+ declare const _default: () => ProjectAnnotations<Renderer>;
65
+
66
+ export { type MeasureParameters, _default as default };