@measured/puck-plugin-heading-analyzer 0.20.1-canary.d7404af9 → 0.21.0-canary.d32e582b

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 (6) hide show
  1. package/dist/index.css +16 -160
  2. package/dist/index.d.mts +17 -7
  3. package/dist/index.d.ts +17 -7
  4. package/dist/index.js +88 -241
  5. package/dist/index.mjs +85 -238
  6. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,164 +1,20 @@
1
1
  /* css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css/#css-module-data */
2
- .HeadingAnalyzer {
2
+ ._HeadingAnalyzer_yg0s7_1 {
3
3
  display: block;
4
+ padding: 16px;
4
5
  }
5
- .HeadingAnalyzer-cssWarning {
6
+ ._HeadingAnalyzer-cssWarning_yg0s7_6 {
6
7
  display: none !important;
7
8
  }
8
- .HeadingAnalyzerItem {
9
+ ._HeadingAnalyzerItem_yg0s7_10 {
9
10
  display: inline;
10
11
  }
11
- .HeadingAnalyzerItem--missing {
12
+ ._HeadingAnalyzerItem--missing_yg0s7_14 {
12
13
  color: var(--puck-color-red-04);
13
14
  }
14
15
 
15
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
16
- .SidebarSection {
17
- display: flex;
18
- position: relative;
19
- flex-direction: column;
20
- color: var(--puck-color-black);
21
- }
22
- .SidebarSection:last-of-type {
23
- flex-grow: 1;
24
- }
25
- .SidebarSection-title {
26
- background: var(--puck-color-white);
27
- padding: 16px;
28
- border-bottom: 1px solid var(--puck-color-grey-09);
29
- border-top: 1px solid var(--puck-color-grey-09);
30
- overflow-x: auto;
31
- }
32
- .SidebarSection--noBorderTop > .SidebarSection-title {
33
- border-top: 0px;
34
- }
35
- .SidebarSection-content {
36
- padding: 16px;
37
- }
38
- .SidebarSection--noPadding > .SidebarSection-content {
39
- padding: 0px;
40
- }
41
- .SidebarSection--noPadding > .SidebarSection-content:last-child {
42
- padding-bottom: 4px;
43
- }
44
- .SidebarSection:last-of-type .SidebarSection-content {
45
- border-bottom: none;
46
- flex-grow: 1;
47
- }
48
- .SidebarSection-breadcrumbLabel {
49
- background: none;
50
- border: 0;
51
- border-radius: 2px;
52
- color: var(--puck-color-azure-04);
53
- cursor: pointer;
54
- font: inherit;
55
- flex-shrink: 0;
56
- padding: 0;
57
- transition: color 50ms ease-in;
58
- }
59
- .SidebarSection-breadcrumbLabel:focus-visible {
60
- outline: 2px solid var(--puck-color-azure-05);
61
- outline-offset: 2px;
62
- }
63
- @media (hover: hover) and (pointer: fine) {
64
- .SidebarSection-breadcrumbLabel:hover {
65
- color: var(--puck-color-azure-03);
66
- transition: none;
67
- }
68
- }
69
- .SidebarSection-breadcrumbLabel:active {
70
- color: var(--puck-color-azure-02);
71
- transition: none;
72
- }
73
- .SidebarSection-breadcrumbs {
74
- align-items: center;
75
- display: flex;
76
- gap: 4px;
77
- }
78
- .SidebarSection-breadcrumb {
79
- align-items: center;
80
- display: flex;
81
- gap: 4px;
82
- }
83
- .SidebarSection-heading {
84
- padding-inline-end: 16px;
85
- }
86
- .SidebarSection-loadingOverlay {
87
- background: var(--puck-color-white);
88
- display: flex;
89
- justify-content: center;
90
- align-items: center;
91
- height: 100%;
92
- width: 100%;
93
- top: 0;
94
- position: absolute;
95
- z-index: 1;
96
- pointer-events: all;
97
- box-sizing: border-box;
98
- opacity: 0.8;
99
- }
100
-
101
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
102
- .Heading {
103
- display: block;
104
- color: var(--puck-color-black);
105
- font-weight: 700;
106
- margin: 0;
107
- }
108
- .Heading b {
109
- font-weight: 700;
110
- }
111
- .Heading--xxxxl {
112
- font-size: var(--puck-font-size-xxxxl);
113
- letter-spacing: 0.08ch;
114
- font-weight: 800;
115
- }
116
- .Heading--xxxl {
117
- font-size: var(--puck-font-size-xxxl);
118
- }
119
- .Heading--xxl {
120
- font-size: var(--puck-font-size-xxl);
121
- }
122
- .Heading--xl {
123
- font-size: var(--puck-font-size-xl);
124
- }
125
- .Heading--l {
126
- font-size: var(--puck-font-size-l);
127
- }
128
- .Heading--m {
129
- font-size: var(--puck-font-size-m);
130
- }
131
- .Heading--s {
132
- font-size: var(--puck-font-size-s);
133
- }
134
- .Heading--xs {
135
- font-size: var(--puck-font-size-xs);
136
- }
137
-
138
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
139
- @keyframes loader-animation {
140
- 0% {
141
- transform: rotate(0deg) scale(1);
142
- }
143
- 50% {
144
- transform: rotate(180deg) scale(0.8);
145
- }
146
- 100% {
147
- transform: rotate(360deg) scale(1);
148
- }
149
- }
150
- .Loader {
151
- background: transparent;
152
- border-radius: 100%;
153
- border: 2px solid currentColor;
154
- border-bottom-color: transparent;
155
- display: inline-block;
156
- animation: loader-animation 1s 0s infinite linear;
157
- animation-fill-mode: both;
158
- }
159
-
160
16
  /* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
161
- .OutlineList {
17
+ ._OutlineList_w4lzv_1 {
162
18
  color: var(--puck-color-grey-03);
163
19
  font-family: var(--puck-font-family);
164
20
  margin: 0;
@@ -166,7 +22,7 @@
166
22
  position: relative;
167
23
  list-style: none;
168
24
  }
169
- .OutlineList::before {
25
+ ._OutlineList_w4lzv_1::before {
170
26
  background: var(--puck-color-grey-08);
171
27
  position: absolute;
172
28
  left: -1px;
@@ -175,15 +31,15 @@
175
31
  height: calc(100% - 9px);
176
32
  content: "";
177
33
  }
178
- .OutlineList:dir(rtl)::before {
34
+ ._OutlineList_w4lzv_1:dir(rtl)::before {
179
35
  left: unset;
180
36
  right: -1px;
181
37
  }
182
- .OutlineListItem {
38
+ ._OutlineListItem_w4lzv_25 {
183
39
  position: relative;
184
40
  margin-bottom: 4px;
185
41
  }
186
- .OutlineListItem::before {
42
+ ._OutlineListItem_w4lzv_25::before {
187
43
  background: var(--puck-color-grey-08);
188
44
  position: absolute;
189
45
  left: -17px;
@@ -192,28 +48,28 @@
192
48
  height: 1px;
193
49
  content: "";
194
50
  }
195
- .OutlineListItem:dir(rtl)::before {
51
+ ._OutlineListItem_w4lzv_25:dir(rtl)::before {
196
52
  left: unset;
197
53
  right: -17px;
198
54
  }
199
- .OutlineListItem--clickable {
55
+ ._OutlineListItem--clickable_w4lzv_45 {
200
56
  cursor: pointer;
201
57
  transition: color 50ms ease-in;
202
58
  }
203
- .OutlineListItem--clickable:focus-visible {
59
+ ._OutlineListItem--clickable_w4lzv_45:focus-visible {
204
60
  outline: 2px solid var(--puck-color-azure-05);
205
61
  outline-offset: 2px;
206
62
  }
207
63
  @media (hover: hover) and (pointer: fine) {
208
- .OutlineListItem--clickable:hover {
64
+ ._OutlineListItem--clickable_w4lzv_45:hover {
209
65
  color: var(--puck-color-azure-04);
210
66
  transition: none;
211
67
  }
212
68
  }
213
- .OutlineListItem--clickable:active {
69
+ ._OutlineListItem--clickable_w4lzv_45:active {
214
70
  color: var(--puck-color-azure-03);
215
71
  transition: none;
216
72
  }
217
- .OutlineListItem > .OutlineList {
73
+ ._OutlineListItem_w4lzv_25 > ._OutlineList_w4lzv_1 {
218
74
  margin: 8px 0;
219
75
  }
package/dist/index.d.mts CHANGED
@@ -301,6 +301,7 @@ type Metadata = {
301
301
  type ItemWithId = {
302
302
  _arrayId: string;
303
303
  _originalIndex: number;
304
+ _currentIndex: number;
304
305
  };
305
306
  type ArrayState = {
306
307
  items: ItemWithId[];
@@ -311,6 +312,7 @@ type UiState = {
311
312
  rightSideBarVisible: boolean;
312
313
  leftSideBarWidth?: number | null;
313
314
  rightSideBarWidth?: number | null;
315
+ mobilePanelExpanded?: boolean;
314
316
  itemSelector: ItemSelector | null;
315
317
  arrayState: Record<string, ArrayState | undefined>;
316
318
  previewMode: "interactive" | "edit";
@@ -323,7 +325,7 @@ type UiState = {
323
325
  isDragging: boolean;
324
326
  viewports: {
325
327
  current: {
326
- width: number;
328
+ width: number | "100%";
327
329
  height: number | "auto";
328
330
  };
329
331
  controlsVisible: boolean;
@@ -332,6 +334,9 @@ type UiState = {
332
334
  field: {
333
335
  focus?: string | null;
334
336
  };
337
+ plugin: {
338
+ current: string | null;
339
+ };
335
340
  };
336
341
  type AppState<UserData extends Data = Data> = {
337
342
  data: UserData;
@@ -381,6 +386,11 @@ type LeftOrExactRight<Union, Left, Right> = (Left & Union extends Right ? Exact<
381
386
  type AssertHasValue<T, True = T, False = never> = [keyof T] extends [
382
387
  never
383
388
  ] ? False : True;
389
+ type RenderFunc<Props extends {
390
+ [key: string]: any;
391
+ } = {
392
+ children: ReactNode;
393
+ }> = (props: Props) => ReactElement;
384
394
 
385
395
  type MapFnParams<ThisField = Field> = {
386
396
  value: any;
@@ -404,11 +414,6 @@ G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>, UserField extends
404
414
  [Type in UserField["type"]]: FieldTransformFn<ExtractField<UserField, Type>>;
405
415
  }>;
406
416
 
407
- type RenderFunc<Props extends {
408
- [key: string]: any;
409
- } = {
410
- children: ReactNode;
411
- }> = (props: Props) => ReactElement;
412
417
  declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
413
418
  type OverrideKey = (typeof overrideKeys)[number];
414
419
  type OverridesGeneric<Shape extends {
@@ -479,7 +484,7 @@ type DragAxis = "dynamic" | "y" | "x";
479
484
 
480
485
  type iconTypes = "Smartphone" | "Monitor" | "Tablet";
481
486
  type Viewport = {
482
- width: number;
487
+ width: number | "100%";
483
488
  height?: number | "auto";
484
489
  label?: string;
485
490
  icon?: iconTypes | ReactNode;
@@ -493,8 +498,13 @@ type Permissions = {
493
498
  insert: boolean;
494
499
  } & Record<string, boolean>;
495
500
  type Plugin<UserConfig extends Config = Config> = {
501
+ name?: string;
502
+ label?: string;
503
+ icon?: ReactNode;
504
+ render?: () => ReactElement;
496
505
  overrides?: Partial<Overrides<UserConfig>>;
497
506
  fieldTransforms?: FieldTransforms<UserConfig>;
507
+ mobilePanelHeight?: "toggle" | "min-content";
498
508
  };
499
509
  type Slot<Props extends {
500
510
  [key: string]: DefaultComponentProps;
package/dist/index.d.ts CHANGED
@@ -301,6 +301,7 @@ type Metadata = {
301
301
  type ItemWithId = {
302
302
  _arrayId: string;
303
303
  _originalIndex: number;
304
+ _currentIndex: number;
304
305
  };
305
306
  type ArrayState = {
306
307
  items: ItemWithId[];
@@ -311,6 +312,7 @@ type UiState = {
311
312
  rightSideBarVisible: boolean;
312
313
  leftSideBarWidth?: number | null;
313
314
  rightSideBarWidth?: number | null;
315
+ mobilePanelExpanded?: boolean;
314
316
  itemSelector: ItemSelector | null;
315
317
  arrayState: Record<string, ArrayState | undefined>;
316
318
  previewMode: "interactive" | "edit";
@@ -323,7 +325,7 @@ type UiState = {
323
325
  isDragging: boolean;
324
326
  viewports: {
325
327
  current: {
326
- width: number;
328
+ width: number | "100%";
327
329
  height: number | "auto";
328
330
  };
329
331
  controlsVisible: boolean;
@@ -332,6 +334,9 @@ type UiState = {
332
334
  field: {
333
335
  focus?: string | null;
334
336
  };
337
+ plugin: {
338
+ current: string | null;
339
+ };
335
340
  };
336
341
  type AppState<UserData extends Data = Data> = {
337
342
  data: UserData;
@@ -381,6 +386,11 @@ type LeftOrExactRight<Union, Left, Right> = (Left & Union extends Right ? Exact<
381
386
  type AssertHasValue<T, True = T, False = never> = [keyof T] extends [
382
387
  never
383
388
  ] ? False : True;
389
+ type RenderFunc<Props extends {
390
+ [key: string]: any;
391
+ } = {
392
+ children: ReactNode;
393
+ }> = (props: Props) => ReactElement;
384
394
 
385
395
  type MapFnParams<ThisField = Field> = {
386
396
  value: any;
@@ -404,11 +414,6 @@ G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>, UserField extends
404
414
  [Type in UserField["type"]]: FieldTransformFn<ExtractField<UserField, Type>>;
405
415
  }>;
406
416
 
407
- type RenderFunc<Props extends {
408
- [key: string]: any;
409
- } = {
410
- children: ReactNode;
411
- }> = (props: Props) => ReactElement;
412
417
  declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
413
418
  type OverrideKey = (typeof overrideKeys)[number];
414
419
  type OverridesGeneric<Shape extends {
@@ -479,7 +484,7 @@ type DragAxis = "dynamic" | "y" | "x";
479
484
 
480
485
  type iconTypes = "Smartphone" | "Monitor" | "Tablet";
481
486
  type Viewport = {
482
- width: number;
487
+ width: number | "100%";
483
488
  height?: number | "auto";
484
489
  label?: string;
485
490
  icon?: iconTypes | ReactNode;
@@ -493,8 +498,13 @@ type Permissions = {
493
498
  insert: boolean;
494
499
  } & Record<string, boolean>;
495
500
  type Plugin<UserConfig extends Config = Config> = {
501
+ name?: string;
502
+ label?: string;
503
+ icon?: ReactNode;
504
+ render?: () => ReactElement;
496
505
  overrides?: Partial<Overrides<UserConfig>>;
497
506
  fieldTransforms?: FieldTransforms<UserConfig>;
507
+ mobilePanelHeight?: "toggle" | "min-content";
498
508
  };
499
509
  type Slot<Props extends {
500
510
  [key: string]: DefaultComponentProps;
package/dist/index.js CHANGED
@@ -313,21 +313,21 @@ init_react_import();
313
313
 
314
314
  // src/HeadingAnalyzer.tsx
315
315
  init_react_import();
316
- var import_react11 = require("react");
316
+ var import_react10 = require("react");
317
317
 
318
318
  // css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css#css-module
319
319
  init_react_import();
320
- var HeadingAnalyzer_module_default = {};
320
+ var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_yg0s7_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_yg0s7_6", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_yg0s7_10", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_yg0s7_14" };
321
321
 
322
322
  // src/HeadingAnalyzer.tsx
323
323
  var import_puck = require("@measured/puck");
324
324
 
325
- // ../core/components/SidebarSection/index.tsx
325
+ // ../core/components/OutlineList/index.tsx
326
326
  init_react_import();
327
327
 
328
- // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
328
+ // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
329
329
  init_react_import();
330
- var styles_module_default = {};
330
+ var styles_module_default = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
331
331
 
332
332
  // ../core/lib/get-class-name-factory.ts
333
333
  init_react_import();
@@ -356,29 +356,50 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
356
356
  };
357
357
  var get_class_name_factory_default = getClassNameFactory;
358
358
 
359
- // ../core/components/Heading/index.tsx
360
- init_react_import();
361
-
362
- // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
363
- init_react_import();
364
- var styles_module_default2 = {};
365
-
366
- // ../core/components/Heading/index.tsx
359
+ // ../core/components/OutlineList/index.tsx
367
360
  var import_jsx_runtime = require("react/jsx-runtime");
368
- var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
369
- var Heading = ({ children, rank, size = "m" }) => {
370
- const Tag = rank ? `h${rank}` : "span";
361
+ var getClassName = get_class_name_factory_default("OutlineList", styles_module_default);
362
+ var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default);
363
+ var OutlineList = ({ children }) => {
364
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: getClassName(), children });
365
+ };
366
+ OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getClassNameItem({ clickable: true }), children });
367
+ OutlineList.Item = ({
368
+ children,
369
+ onClick
370
+ }) => {
371
371
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
372
- Tag,
372
+ "li",
373
373
  {
374
- className: getClassName({
375
- [size]: true
376
- }),
374
+ className: getClassNameItem({ clickable: !!onClick }),
375
+ onClick,
377
376
  children
378
377
  }
379
378
  );
380
379
  };
381
380
 
381
+ // ../core/lib/scroll-into-view.ts
382
+ init_react_import();
383
+ var scrollIntoView = (el) => {
384
+ const oldStyle = __spreadValues({}, el.style);
385
+ el.style.scrollMargin = "256px";
386
+ if (el) {
387
+ el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
388
+ el.style.scrollMargin = oldStyle.scrollMargin || "";
389
+ }
390
+ };
391
+
392
+ // ../core/lib/get-frame.ts
393
+ init_react_import();
394
+ var getFrame = () => {
395
+ if (typeof window === "undefined") return;
396
+ let frameEl = document.querySelector("#preview-frame");
397
+ if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
398
+ return frameEl.contentDocument || document;
399
+ }
400
+ return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
401
+ };
402
+
382
403
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
383
404
  init_react_import();
384
405
 
@@ -466,15 +487,29 @@ var createLucideIcon = (iconName, iconNode) => {
466
487
  return Component;
467
488
  };
468
489
 
469
- // ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
490
+ // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
470
491
  init_react_import();
471
- var ChevronRight = createLucideIcon("ChevronRight", [
472
- ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
492
+ var Heading1 = createLucideIcon("Heading1", [
493
+ ["path", { d: "M4 12h8", key: "17cfdx" }],
494
+ ["path", { d: "M4 18V6", key: "1rz3zl" }],
495
+ ["path", { d: "M12 18V6", key: "zqpxq5" }],
496
+ ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
473
497
  ]);
474
498
 
475
- // ../core/lib/use-breadcrumbs.ts
499
+ // ../core/lib/index.ts
500
+ init_react_import();
501
+
502
+ // ../core/lib/filter.ts
503
+ init_react_import();
504
+
505
+ // ../core/lib/data/reorder.ts
506
+ init_react_import();
507
+
508
+ // ../core/lib/data/replace.ts
509
+ init_react_import();
510
+
511
+ // ../core/lib/use-reset-auto-zoom.ts
476
512
  init_react_import();
477
- var import_react10 = require("react");
478
513
 
479
514
  // ../core/store/index.ts
480
515
  init_react_import();
@@ -1444,7 +1479,8 @@ init_react_import();
1444
1479
  var defaultViewports = [
1445
1480
  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1446
1481
  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1447
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1482
+ { width: 1280, height: "auto", icon: "Monitor", label: "Large" },
1483
+ { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
1448
1484
  ];
1449
1485
 
1450
1486
  // ../../node_modules/zustand/esm/vanilla.mjs
@@ -1929,7 +1965,8 @@ var defaultAppState = {
1929
1965
  options: [],
1930
1966
  controlsVisible: true
1931
1967
  },
1932
- field: { focus: null }
1968
+ field: { focus: null },
1969
+ plugin: { current: null }
1933
1970
  },
1934
1971
  indexes: {
1935
1972
  nodes: {},
@@ -1945,6 +1982,7 @@ var createAppStore = (initialAppStore) => create()(
1945
1982
  subscribeWithSelector((set, get) => {
1946
1983
  var _a, _b;
1947
1984
  return __spreadProps(__spreadValues({
1985
+ instanceId: generateId(),
1948
1986
  state: defaultAppState,
1949
1987
  config: { components: {} },
1950
1988
  componentState: {},
@@ -2115,203 +2153,14 @@ var createAppStore = (initialAppStore) => create()(
2115
2153
  })
2116
2154
  );
2117
2155
  var appStoreContext = (0, import_react9.createContext)(createAppStore());
2118
- function useAppStore(selector) {
2119
- const context = (0, import_react9.useContext)(appStoreContext);
2120
- return useStore(context, selector);
2121
- }
2122
- function useAppStoreApi() {
2123
- return (0, import_react9.useContext)(appStoreContext);
2124
- }
2125
-
2126
- // ../core/lib/use-breadcrumbs.ts
2127
- var useBreadcrumbs = (renderCount) => {
2128
- const selectedId = useAppStore((s) => {
2129
- var _a;
2130
- return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
2131
- });
2132
- const config = useAppStore((s) => s.config);
2133
- const path = useAppStore((s) => {
2134
- var _a;
2135
- return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
2136
- });
2137
- const appStore = useAppStoreApi();
2138
- return (0, import_react10.useMemo)(() => {
2139
- const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
2140
- var _a, _b, _c;
2141
- const [componentId] = zoneCompound.split(":");
2142
- if (componentId === "root") {
2143
- return {
2144
- label: "Page",
2145
- selector: null
2146
- };
2147
- }
2148
- const node = appStore.getState().state.indexes.nodes[componentId];
2149
- const parentId = node.path[node.path.length - 1];
2150
- const contentIds = ((_a = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _a.contentIds) || [];
2151
- const index = contentIds.indexOf(componentId);
2152
- const label = node ? (_c = (_b = config.components[node.data.type]) == null ? void 0 : _b.label) != null ? _c : node.data.type : "Component";
2153
- return {
2154
- label,
2155
- selector: node ? {
2156
- index,
2157
- zone: node.path[node.path.length - 1]
2158
- } : null
2159
- };
2160
- })) || [];
2161
- if (renderCount) {
2162
- return breadcrumbs.slice(breadcrumbs.length - renderCount);
2163
- }
2164
- return breadcrumbs;
2165
- }, [path, renderCount]);
2166
- };
2167
-
2168
- // ../core/components/Loader/index.tsx
2169
- init_react_import();
2170
-
2171
- // ../core/lib/index.ts
2172
- init_react_import();
2173
-
2174
- // ../core/lib/filter.ts
2175
- init_react_import();
2176
-
2177
- // ../core/lib/data/reorder.ts
2178
- init_react_import();
2179
-
2180
- // ../core/lib/data/replace.ts
2181
- init_react_import();
2182
-
2183
- // ../core/lib/use-reset-auto-zoom.ts
2184
- init_react_import();
2185
2156
 
2186
2157
  // ../core/lib/get-zoom-config.ts
2187
2158
  init_react_import();
2188
2159
 
2189
- // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
2190
- init_react_import();
2191
- var styles_module_default3 = {};
2192
-
2193
- // ../core/components/Loader/index.tsx
2194
- var import_jsx_runtime2 = require("react/jsx-runtime");
2195
- var getClassName2 = get_class_name_factory_default("Loader", styles_module_default3);
2196
- var Loader = (_a) => {
2197
- var _b = _a, {
2198
- color,
2199
- size = 16
2200
- } = _b, props = __objRest(_b, [
2201
- "color",
2202
- "size"
2203
- ]);
2204
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2205
- "span",
2206
- __spreadValues({
2207
- className: getClassName2(),
2208
- style: {
2209
- width: size,
2210
- height: size,
2211
- color
2212
- },
2213
- "aria-label": "loading"
2214
- }, props)
2215
- );
2216
- };
2217
-
2218
- // ../core/components/SidebarSection/index.tsx
2219
- var import_jsx_runtime3 = require("react/jsx-runtime");
2220
- var getClassName3 = get_class_name_factory_default("SidebarSection", styles_module_default);
2221
- var SidebarSection = ({
2222
- children,
2223
- title,
2224
- background,
2225
- showBreadcrumbs,
2226
- noBorderTop,
2227
- noPadding,
2228
- isLoading
2229
- }) => {
2230
- const setUi = useAppStore((s) => s.setUi);
2231
- const breadcrumbs = useBreadcrumbs(1);
2232
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2233
- "div",
2234
- {
2235
- className: getClassName3({ noBorderTop, noPadding }),
2236
- style: { background },
2237
- children: [
2238
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("title"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName3("breadcrumbs"), children: [
2239
- showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName3("breadcrumb"), children: [
2240
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2241
- "button",
2242
- {
2243
- type: "button",
2244
- className: getClassName3("breadcrumbLabel"),
2245
- onClick: () => setUi({ itemSelector: breadcrumb.selector }),
2246
- children: breadcrumb.label
2247
- }
2248
- ),
2249
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRight, { size: 16 })
2250
- ] }, i)) : null,
2251
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
2252
- ] }) }),
2253
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("content"), children }),
2254
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: 32 }) })
2255
- ]
2256
- }
2257
- );
2258
- };
2259
-
2260
- // ../core/components/OutlineList/index.tsx
2261
- init_react_import();
2262
-
2263
- // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
2264
- init_react_import();
2265
- var styles_module_default4 = {};
2266
-
2267
- // ../core/components/OutlineList/index.tsx
2268
- var import_jsx_runtime4 = require("react/jsx-runtime");
2269
- var getClassName4 = get_class_name_factory_default("OutlineList", styles_module_default4);
2270
- var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default4);
2271
- var OutlineList = ({ children }) => {
2272
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: getClassName4(), children });
2273
- };
2274
- OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem({ clickable: true }), children });
2275
- OutlineList.Item = ({
2276
- children,
2277
- onClick
2278
- }) => {
2279
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2280
- "li",
2281
- {
2282
- className: getClassNameItem({ clickable: !!onClick }),
2283
- onClick,
2284
- children
2285
- }
2286
- );
2287
- };
2288
-
2289
- // ../core/lib/scroll-into-view.ts
2290
- init_react_import();
2291
- var scrollIntoView = (el) => {
2292
- const oldStyle = __spreadValues({}, el.style);
2293
- el.style.scrollMargin = "256px";
2294
- if (el) {
2295
- el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
2296
- el.style.scrollMargin = oldStyle.scrollMargin || "";
2297
- }
2298
- };
2299
-
2300
- // ../core/lib/get-frame.ts
2301
- init_react_import();
2302
- var getFrame = () => {
2303
- if (typeof window === "undefined") return;
2304
- let frameEl = document.querySelector("#preview-frame");
2305
- if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
2306
- return frameEl.contentDocument || document;
2307
- }
2308
- return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
2309
- };
2310
-
2311
2160
  // src/HeadingAnalyzer.tsx
2312
2161
  var import_react_from_json = __toESM(require("react-from-json"));
2313
- var import_jsx_runtime5 = require("react/jsx-runtime");
2314
- var getClassName5 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2162
+ var import_jsx_runtime2 = require("react/jsx-runtime");
2163
+ var getClassName2 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2315
2164
  var getClassNameItem2 = get_class_name_factory_default("HeadingAnalyzerItem", HeadingAnalyzer_module_default);
2316
2165
  var ReactFromJSON = import_react_from_json.default.default || import_react_from_json.default;
2317
2166
  var getOutline = ({ frame } = {}) => {
@@ -2366,8 +2215,8 @@ function buildHierarchy(frame) {
2366
2215
  var usePuck = (0, import_puck.createUsePuck)();
2367
2216
  var HeadingAnalyzer = () => {
2368
2217
  const data = usePuck((s) => s.appState.data);
2369
- const [hierarchy, setHierarchy] = (0, import_react11.useState)([]);
2370
- (0, import_react11.useEffect)(() => {
2218
+ const [hierarchy, setHierarchy] = (0, import_react10.useState)([]);
2219
+ (0, import_react10.useEffect)(() => {
2371
2220
  const frame = getFrame();
2372
2221
  let entry = frame == null ? void 0 : frame.querySelector(`[data-puck-entry]`);
2373
2222
  const createHierarchy = () => {
@@ -2402,11 +2251,11 @@ var HeadingAnalyzer = () => {
2402
2251
  frameObserver.disconnect();
2403
2252
  };
2404
2253
  }, [data]);
2405
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName5(), children: [
2406
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2254
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2(), children: [
2255
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2407
2256
  "small",
2408
2257
  {
2409
- className: getClassName5("cssWarning"),
2258
+ className: getClassName2("cssWarning"),
2410
2259
  style: {
2411
2260
  color: "var(--puck-color-red-04)",
2412
2261
  display: "block",
@@ -2415,19 +2264,19 @@ var HeadingAnalyzer = () => {
2415
2264
  children: [
2416
2265
  "Heading analyzer styles not loaded. Please review the",
2417
2266
  " ",
2418
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2267
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2419
2268
  "."
2420
2269
  ]
2421
2270
  }
2422
2271
  ),
2423
- hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "No headings." }),
2424
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2272
+ hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No headings." }),
2273
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2425
2274
  ReactFromJSON,
2426
2275
  {
2427
2276
  mapping: {
2428
- Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.children }),
2429
- OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OutlineList.Item, { children: [
2430
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2277
+ Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }),
2278
+ OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OutlineList.Item, { children: [
2279
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2431
2280
  "small",
2432
2281
  {
2433
2282
  className: getClassNameItem2({ missing: props.missing }),
@@ -2445,14 +2294,14 @@ var HeadingAnalyzer = () => {
2445
2294
  }, 2e3);
2446
2295
  }
2447
2296
  },
2448
- children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2449
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
2297
+ children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2298
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
2450
2299
  "H",
2451
2300
  props.rank
2452
2301
  ] }),
2453
2302
  ": Missing"
2454
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2455
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
2303
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2304
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
2456
2305
  "H",
2457
2306
  props.rank
2458
2307
  ] }),
@@ -2461,7 +2310,7 @@ var HeadingAnalyzer = () => {
2461
2310
  ] })
2462
2311
  }
2463
2312
  ) }),
2464
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList, { children: props.children })
2313
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
2465
2314
  ] })
2466
2315
  },
2467
2316
  entry: {
@@ -2482,12 +2331,10 @@ var HeadingAnalyzer = () => {
2482
2331
  ] });
2483
2332
  };
2484
2333
  var headingAnalyzer = {
2485
- overrides: {
2486
- fields: ({ children, itemSelector }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2487
- children,
2488
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: itemSelector ? "none" : "block" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SidebarSection, { title: "Heading Outline", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeadingAnalyzer, {}) }) })
2489
- ] })
2490
- }
2334
+ name: "heading-analyzer",
2335
+ label: "Audit",
2336
+ render: HeadingAnalyzer,
2337
+ icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading1, {})
2491
2338
  };
2492
2339
  var HeadingAnalyzer_default = headingAnalyzer;
2493
2340
  /*! Bundled license information:
@@ -2531,7 +2378,7 @@ lucide-react/dist/esm/createLucideIcon.js:
2531
2378
  * See the LICENSE file in the root directory of this source tree.
2532
2379
  *)
2533
2380
 
2534
- lucide-react/dist/esm/icons/chevron-right.js:
2381
+ lucide-react/dist/esm/icons/heading-1.js:
2535
2382
  (**
2536
2383
  * @license lucide-react v0.468.0 - ISC
2537
2384
  *
package/dist/index.mjs CHANGED
@@ -305,17 +305,17 @@ import { useEffect as useEffect5, useState } from "react";
305
305
 
306
306
  // css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css#css-module
307
307
  init_react_import();
308
- var HeadingAnalyzer_module_default = {};
308
+ var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_yg0s7_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_yg0s7_6", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_yg0s7_10", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_yg0s7_14" };
309
309
 
310
310
  // src/HeadingAnalyzer.tsx
311
311
  import { createUsePuck } from "@measured/puck";
312
312
 
313
- // ../core/components/SidebarSection/index.tsx
313
+ // ../core/components/OutlineList/index.tsx
314
314
  init_react_import();
315
315
 
316
- // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
316
+ // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
317
317
  init_react_import();
318
- var styles_module_default = {};
318
+ var styles_module_default = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
319
319
 
320
320
  // ../core/lib/get-class-name-factory.ts
321
321
  init_react_import();
@@ -344,29 +344,50 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
344
344
  };
345
345
  var get_class_name_factory_default = getClassNameFactory;
346
346
 
347
- // ../core/components/Heading/index.tsx
348
- init_react_import();
349
-
350
- // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
351
- init_react_import();
352
- var styles_module_default2 = {};
353
-
354
- // ../core/components/Heading/index.tsx
347
+ // ../core/components/OutlineList/index.tsx
355
348
  import { jsx } from "react/jsx-runtime";
356
- var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
357
- var Heading = ({ children, rank, size = "m" }) => {
358
- const Tag = rank ? `h${rank}` : "span";
349
+ var getClassName = get_class_name_factory_default("OutlineList", styles_module_default);
350
+ var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default);
351
+ var OutlineList = ({ children }) => {
352
+ return /* @__PURE__ */ jsx("ul", { className: getClassName(), children });
353
+ };
354
+ OutlineList.Clickable = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassNameItem({ clickable: true }), children });
355
+ OutlineList.Item = ({
356
+ children,
357
+ onClick
358
+ }) => {
359
359
  return /* @__PURE__ */ jsx(
360
- Tag,
360
+ "li",
361
361
  {
362
- className: getClassName({
363
- [size]: true
364
- }),
362
+ className: getClassNameItem({ clickable: !!onClick }),
363
+ onClick,
365
364
  children
366
365
  }
367
366
  );
368
367
  };
369
368
 
369
+ // ../core/lib/scroll-into-view.ts
370
+ init_react_import();
371
+ var scrollIntoView = (el) => {
372
+ const oldStyle = __spreadValues({}, el.style);
373
+ el.style.scrollMargin = "256px";
374
+ if (el) {
375
+ el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
376
+ el.style.scrollMargin = oldStyle.scrollMargin || "";
377
+ }
378
+ };
379
+
380
+ // ../core/lib/get-frame.ts
381
+ init_react_import();
382
+ var getFrame = () => {
383
+ if (typeof window === "undefined") return;
384
+ let frameEl = document.querySelector("#preview-frame");
385
+ if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
386
+ return frameEl.contentDocument || document;
387
+ }
388
+ return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
389
+ };
390
+
370
391
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
371
392
  init_react_import();
372
393
 
@@ -454,15 +475,29 @@ var createLucideIcon = (iconName, iconNode) => {
454
475
  return Component;
455
476
  };
456
477
 
457
- // ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
478
+ // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
458
479
  init_react_import();
459
- var ChevronRight = createLucideIcon("ChevronRight", [
460
- ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
480
+ var Heading1 = createLucideIcon("Heading1", [
481
+ ["path", { d: "M4 12h8", key: "17cfdx" }],
482
+ ["path", { d: "M4 18V6", key: "1rz3zl" }],
483
+ ["path", { d: "M12 18V6", key: "zqpxq5" }],
484
+ ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
461
485
  ]);
462
486
 
463
- // ../core/lib/use-breadcrumbs.ts
487
+ // ../core/lib/index.ts
488
+ init_react_import();
489
+
490
+ // ../core/lib/filter.ts
491
+ init_react_import();
492
+
493
+ // ../core/lib/data/reorder.ts
494
+ init_react_import();
495
+
496
+ // ../core/lib/data/replace.ts
497
+ init_react_import();
498
+
499
+ // ../core/lib/use-reset-auto-zoom.ts
464
500
  init_react_import();
465
- import { useMemo } from "react";
466
501
 
467
502
  // ../core/store/index.ts
468
503
  init_react_import();
@@ -1432,7 +1467,8 @@ init_react_import();
1432
1467
  var defaultViewports = [
1433
1468
  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1434
1469
  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1435
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1470
+ { width: 1280, height: "auto", icon: "Monitor", label: "Large" },
1471
+ { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
1436
1472
  ];
1437
1473
 
1438
1474
  // ../../node_modules/zustand/esm/vanilla.mjs
@@ -1917,7 +1953,8 @@ var defaultAppState = {
1917
1953
  options: [],
1918
1954
  controlsVisible: true
1919
1955
  },
1920
- field: { focus: null }
1956
+ field: { focus: null },
1957
+ plugin: { current: null }
1921
1958
  },
1922
1959
  indexes: {
1923
1960
  nodes: {},
@@ -1933,6 +1970,7 @@ var createAppStore = (initialAppStore) => create()(
1933
1970
  subscribeWithSelector((set, get) => {
1934
1971
  var _a, _b;
1935
1972
  return __spreadProps(__spreadValues({
1973
+ instanceId: generateId(),
1936
1974
  state: defaultAppState,
1937
1975
  config: { components: {} },
1938
1976
  componentState: {},
@@ -2103,203 +2141,14 @@ var createAppStore = (initialAppStore) => create()(
2103
2141
  })
2104
2142
  );
2105
2143
  var appStoreContext = createContext(createAppStore());
2106
- function useAppStore(selector) {
2107
- const context = useContext(appStoreContext);
2108
- return useStore(context, selector);
2109
- }
2110
- function useAppStoreApi() {
2111
- return useContext(appStoreContext);
2112
- }
2113
-
2114
- // ../core/lib/use-breadcrumbs.ts
2115
- var useBreadcrumbs = (renderCount) => {
2116
- const selectedId = useAppStore((s) => {
2117
- var _a;
2118
- return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
2119
- });
2120
- const config = useAppStore((s) => s.config);
2121
- const path = useAppStore((s) => {
2122
- var _a;
2123
- return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
2124
- });
2125
- const appStore = useAppStoreApi();
2126
- return useMemo(() => {
2127
- const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
2128
- var _a, _b, _c;
2129
- const [componentId] = zoneCompound.split(":");
2130
- if (componentId === "root") {
2131
- return {
2132
- label: "Page",
2133
- selector: null
2134
- };
2135
- }
2136
- const node = appStore.getState().state.indexes.nodes[componentId];
2137
- const parentId = node.path[node.path.length - 1];
2138
- const contentIds = ((_a = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _a.contentIds) || [];
2139
- const index = contentIds.indexOf(componentId);
2140
- const label = node ? (_c = (_b = config.components[node.data.type]) == null ? void 0 : _b.label) != null ? _c : node.data.type : "Component";
2141
- return {
2142
- label,
2143
- selector: node ? {
2144
- index,
2145
- zone: node.path[node.path.length - 1]
2146
- } : null
2147
- };
2148
- })) || [];
2149
- if (renderCount) {
2150
- return breadcrumbs.slice(breadcrumbs.length - renderCount);
2151
- }
2152
- return breadcrumbs;
2153
- }, [path, renderCount]);
2154
- };
2155
-
2156
- // ../core/components/Loader/index.tsx
2157
- init_react_import();
2158
-
2159
- // ../core/lib/index.ts
2160
- init_react_import();
2161
-
2162
- // ../core/lib/filter.ts
2163
- init_react_import();
2164
-
2165
- // ../core/lib/data/reorder.ts
2166
- init_react_import();
2167
-
2168
- // ../core/lib/data/replace.ts
2169
- init_react_import();
2170
-
2171
- // ../core/lib/use-reset-auto-zoom.ts
2172
- init_react_import();
2173
2144
 
2174
2145
  // ../core/lib/get-zoom-config.ts
2175
2146
  init_react_import();
2176
2147
 
2177
- // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
2178
- init_react_import();
2179
- var styles_module_default3 = {};
2180
-
2181
- // ../core/components/Loader/index.tsx
2182
- import { jsx as jsx2 } from "react/jsx-runtime";
2183
- var getClassName2 = get_class_name_factory_default("Loader", styles_module_default3);
2184
- var Loader = (_a) => {
2185
- var _b = _a, {
2186
- color,
2187
- size = 16
2188
- } = _b, props = __objRest(_b, [
2189
- "color",
2190
- "size"
2191
- ]);
2192
- return /* @__PURE__ */ jsx2(
2193
- "span",
2194
- __spreadValues({
2195
- className: getClassName2(),
2196
- style: {
2197
- width: size,
2198
- height: size,
2199
- color
2200
- },
2201
- "aria-label": "loading"
2202
- }, props)
2203
- );
2204
- };
2205
-
2206
- // ../core/components/SidebarSection/index.tsx
2207
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
2208
- var getClassName3 = get_class_name_factory_default("SidebarSection", styles_module_default);
2209
- var SidebarSection = ({
2210
- children,
2211
- title,
2212
- background,
2213
- showBreadcrumbs,
2214
- noBorderTop,
2215
- noPadding,
2216
- isLoading
2217
- }) => {
2218
- const setUi = useAppStore((s) => s.setUi);
2219
- const breadcrumbs = useBreadcrumbs(1);
2220
- return /* @__PURE__ */ jsxs(
2221
- "div",
2222
- {
2223
- className: getClassName3({ noBorderTop, noPadding }),
2224
- style: { background },
2225
- children: [
2226
- /* @__PURE__ */ jsx3("div", { className: getClassName3("title"), children: /* @__PURE__ */ jsxs("div", { className: getClassName3("breadcrumbs"), children: [
2227
- showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs("div", { className: getClassName3("breadcrumb"), children: [
2228
- /* @__PURE__ */ jsx3(
2229
- "button",
2230
- {
2231
- type: "button",
2232
- className: getClassName3("breadcrumbLabel"),
2233
- onClick: () => setUi({ itemSelector: breadcrumb.selector }),
2234
- children: breadcrumb.label
2235
- }
2236
- ),
2237
- /* @__PURE__ */ jsx3(ChevronRight, { size: 16 })
2238
- ] }, i)) : null,
2239
- /* @__PURE__ */ jsx3("div", { className: getClassName3("heading"), children: /* @__PURE__ */ jsx3(Heading, { rank: "2", size: "xs", children: title }) })
2240
- ] }) }),
2241
- /* @__PURE__ */ jsx3("div", { className: getClassName3("content"), children }),
2242
- isLoading && /* @__PURE__ */ jsx3("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ jsx3(Loader, { size: 32 }) })
2243
- ]
2244
- }
2245
- );
2246
- };
2247
-
2248
- // ../core/components/OutlineList/index.tsx
2249
- init_react_import();
2250
-
2251
- // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
2252
- init_react_import();
2253
- var styles_module_default4 = {};
2254
-
2255
- // ../core/components/OutlineList/index.tsx
2256
- import { jsx as jsx4 } from "react/jsx-runtime";
2257
- var getClassName4 = get_class_name_factory_default("OutlineList", styles_module_default4);
2258
- var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default4);
2259
- var OutlineList = ({ children }) => {
2260
- return /* @__PURE__ */ jsx4("ul", { className: getClassName4(), children });
2261
- };
2262
- OutlineList.Clickable = ({ children }) => /* @__PURE__ */ jsx4("div", { className: getClassNameItem({ clickable: true }), children });
2263
- OutlineList.Item = ({
2264
- children,
2265
- onClick
2266
- }) => {
2267
- return /* @__PURE__ */ jsx4(
2268
- "li",
2269
- {
2270
- className: getClassNameItem({ clickable: !!onClick }),
2271
- onClick,
2272
- children
2273
- }
2274
- );
2275
- };
2276
-
2277
- // ../core/lib/scroll-into-view.ts
2278
- init_react_import();
2279
- var scrollIntoView = (el) => {
2280
- const oldStyle = __spreadValues({}, el.style);
2281
- el.style.scrollMargin = "256px";
2282
- if (el) {
2283
- el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
2284
- el.style.scrollMargin = oldStyle.scrollMargin || "";
2285
- }
2286
- };
2287
-
2288
- // ../core/lib/get-frame.ts
2289
- init_react_import();
2290
- var getFrame = () => {
2291
- if (typeof window === "undefined") return;
2292
- let frameEl = document.querySelector("#preview-frame");
2293
- if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
2294
- return frameEl.contentDocument || document;
2295
- }
2296
- return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
2297
- };
2298
-
2299
2148
  // src/HeadingAnalyzer.tsx
2300
2149
  import ReactFromJSONModule from "react-from-json";
2301
- import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
2302
- var getClassName5 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2150
+ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
2151
+ var getClassName2 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2303
2152
  var getClassNameItem2 = get_class_name_factory_default("HeadingAnalyzerItem", HeadingAnalyzer_module_default);
2304
2153
  var ReactFromJSON = ReactFromJSONModule.default || ReactFromJSONModule;
2305
2154
  var getOutline = ({ frame } = {}) => {
@@ -2390,11 +2239,11 @@ var HeadingAnalyzer = () => {
2390
2239
  frameObserver.disconnect();
2391
2240
  };
2392
2241
  }, [data]);
2393
- return /* @__PURE__ */ jsxs2("div", { className: getClassName5(), children: [
2394
- /* @__PURE__ */ jsxs2(
2242
+ return /* @__PURE__ */ jsxs("div", { className: getClassName2(), children: [
2243
+ /* @__PURE__ */ jsxs(
2395
2244
  "small",
2396
2245
  {
2397
- className: getClassName5("cssWarning"),
2246
+ className: getClassName2("cssWarning"),
2398
2247
  style: {
2399
2248
  color: "var(--puck-color-red-04)",
2400
2249
  display: "block",
@@ -2403,19 +2252,19 @@ var HeadingAnalyzer = () => {
2403
2252
  children: [
2404
2253
  "Heading analyzer styles not loaded. Please review the",
2405
2254
  " ",
2406
- /* @__PURE__ */ jsx5("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2255
+ /* @__PURE__ */ jsx2("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2407
2256
  "."
2408
2257
  ]
2409
2258
  }
2410
2259
  ),
2411
- hierarchy.length === 0 && /* @__PURE__ */ jsx5("div", { children: "No headings." }),
2412
- /* @__PURE__ */ jsx5(OutlineList, { children: /* @__PURE__ */ jsx5(
2260
+ hierarchy.length === 0 && /* @__PURE__ */ jsx2("div", { children: "No headings." }),
2261
+ /* @__PURE__ */ jsx2(OutlineList, { children: /* @__PURE__ */ jsx2(
2413
2262
  ReactFromJSON,
2414
2263
  {
2415
2264
  mapping: {
2416
- Root: (props) => /* @__PURE__ */ jsx5(Fragment, { children: props.children }),
2417
- OutlineListItem: (props) => /* @__PURE__ */ jsxs2(OutlineList.Item, { children: [
2418
- /* @__PURE__ */ jsx5(OutlineList.Clickable, { children: /* @__PURE__ */ jsx5(
2265
+ Root: (props) => /* @__PURE__ */ jsx2(Fragment, { children: props.children }),
2266
+ OutlineListItem: (props) => /* @__PURE__ */ jsxs(OutlineList.Item, { children: [
2267
+ /* @__PURE__ */ jsx2(OutlineList.Clickable, { children: /* @__PURE__ */ jsx2(
2419
2268
  "small",
2420
2269
  {
2421
2270
  className: getClassNameItem2({ missing: props.missing }),
@@ -2433,14 +2282,14 @@ var HeadingAnalyzer = () => {
2433
2282
  }, 2e3);
2434
2283
  }
2435
2284
  },
2436
- children: props.missing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
2437
- /* @__PURE__ */ jsxs2("b", { children: [
2285
+ children: props.missing ? /* @__PURE__ */ jsxs(Fragment, { children: [
2286
+ /* @__PURE__ */ jsxs("b", { children: [
2438
2287
  "H",
2439
2288
  props.rank
2440
2289
  ] }),
2441
2290
  ": Missing"
2442
- ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
2443
- /* @__PURE__ */ jsxs2("b", { children: [
2291
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2292
+ /* @__PURE__ */ jsxs("b", { children: [
2444
2293
  "H",
2445
2294
  props.rank
2446
2295
  ] }),
@@ -2449,7 +2298,7 @@ var HeadingAnalyzer = () => {
2449
2298
  ] })
2450
2299
  }
2451
2300
  ) }),
2452
- /* @__PURE__ */ jsx5(OutlineList, { children: props.children })
2301
+ /* @__PURE__ */ jsx2(OutlineList, { children: props.children })
2453
2302
  ] })
2454
2303
  },
2455
2304
  entry: {
@@ -2470,12 +2319,10 @@ var HeadingAnalyzer = () => {
2470
2319
  ] });
2471
2320
  };
2472
2321
  var headingAnalyzer = {
2473
- overrides: {
2474
- fields: ({ children, itemSelector }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
2475
- children,
2476
- /* @__PURE__ */ jsx5("div", { style: { display: itemSelector ? "none" : "block" }, children: /* @__PURE__ */ jsx5(SidebarSection, { title: "Heading Outline", children: /* @__PURE__ */ jsx5(HeadingAnalyzer, {}) }) })
2477
- ] })
2478
- }
2322
+ name: "heading-analyzer",
2323
+ label: "Audit",
2324
+ render: HeadingAnalyzer,
2325
+ icon: /* @__PURE__ */ jsx2(Heading1, {})
2479
2326
  };
2480
2327
  var HeadingAnalyzer_default = headingAnalyzer;
2481
2328
  export {
@@ -2522,7 +2369,7 @@ lucide-react/dist/esm/createLucideIcon.js:
2522
2369
  * See the LICENSE file in the root directory of this source tree.
2523
2370
  *)
2524
2371
 
2525
- lucide-react/dist/esm/icons/chevron-right.js:
2372
+ lucide-react/dist/esm/icons/heading-1.js:
2526
2373
  (**
2527
2374
  * @license lucide-react v0.468.0 - ISC
2528
2375
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck-plugin-heading-analyzer",
3
- "version": "0.20.1-canary.d7404af9",
3
+ "version": "0.21.0-canary.d32e582b",
4
4
  "author": "Chris Villa <chris@puckeditor.com>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",
@@ -25,7 +25,7 @@
25
25
  "dist"
26
26
  ],
27
27
  "devDependencies": {
28
- "@measured/puck": "^0.20.1-canary.d7404af9",
28
+ "@measured/puck": "^0.21.0-canary.d32e582b",
29
29
  "@types/react": "^19.0.1",
30
30
  "@types/react-dom": "^19.0.2",
31
31
  "eslint": "^7.32.0",