@measured/puck-plugin-heading-analyzer 0.21.0-canary.2e1b5267 → 0.21.0-canary.5333fc7e

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 +149 -5
  2. package/dist/index.d.mts +7 -17
  3. package/dist/index.d.ts +7 -17
  4. package/dist/index.js +241 -88
  5. package/dist/index.mjs +238 -85
  6. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,18 +1,162 @@
1
1
  /* css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css/#css-module-data */
2
- ._HeadingAnalyzer_yg0s7_1 {
2
+ ._HeadingAnalyzer_116v6_1 {
3
3
  display: block;
4
- padding: 16px;
5
4
  }
6
- ._HeadingAnalyzer-cssWarning_yg0s7_6 {
5
+ ._HeadingAnalyzer-cssWarning_116v6_5 {
7
6
  display: none !important;
8
7
  }
9
- ._HeadingAnalyzerItem_yg0s7_10 {
8
+ ._HeadingAnalyzerItem_116v6_9 {
10
9
  display: inline;
11
10
  }
12
- ._HeadingAnalyzerItem--missing_yg0s7_14 {
11
+ ._HeadingAnalyzerItem--missing_116v6_13 {
13
12
  color: var(--puck-color-red-04);
14
13
  }
15
14
 
15
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
16
+ ._SidebarSection_8boj8_1 {
17
+ display: flex;
18
+ position: relative;
19
+ flex-direction: column;
20
+ color: var(--puck-color-black);
21
+ }
22
+ ._SidebarSection_8boj8_1:last-of-type {
23
+ flex-grow: 1;
24
+ }
25
+ ._SidebarSection-title_8boj8_12 {
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_8boj8_20 > ._SidebarSection-title_8boj8_12 {
33
+ border-top: 0px;
34
+ }
35
+ ._SidebarSection-content_8boj8_24 {
36
+ padding: 16px;
37
+ }
38
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
39
+ padding: 0px;
40
+ }
41
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
42
+ padding-bottom: 4px;
43
+ }
44
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
45
+ border-bottom: none;
46
+ flex-grow: 1;
47
+ }
48
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
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_8boj8_41: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_8boj8_41:hover {
65
+ color: var(--puck-color-azure-03);
66
+ transition: none;
67
+ }
68
+ }
69
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
70
+ color: var(--puck-color-azure-02);
71
+ transition: none;
72
+ }
73
+ ._SidebarSection-breadcrumbs_8boj8_70 {
74
+ align-items: center;
75
+ display: flex;
76
+ gap: 4px;
77
+ }
78
+ ._SidebarSection-breadcrumb_8boj8_41 {
79
+ align-items: center;
80
+ display: flex;
81
+ gap: 4px;
82
+ }
83
+ ._SidebarSection-heading_8boj8_82 {
84
+ padding-inline-end: 16px;
85
+ }
86
+ ._SidebarSection-loadingOverlay_8boj8_86 {
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_qxrry_1 {
103
+ display: block;
104
+ color: var(--puck-color-black);
105
+ font-weight: 700;
106
+ margin: 0;
107
+ }
108
+ ._Heading_qxrry_1 b {
109
+ font-weight: 700;
110
+ }
111
+ ._Heading--xxxxl_qxrry_12 {
112
+ font-size: var(--puck-font-size-xxxxl);
113
+ letter-spacing: 0.08ch;
114
+ font-weight: 800;
115
+ }
116
+ ._Heading--xxxl_qxrry_18 {
117
+ font-size: var(--puck-font-size-xxxl);
118
+ }
119
+ ._Heading--xxl_qxrry_22 {
120
+ font-size: var(--puck-font-size-xxl);
121
+ }
122
+ ._Heading--xl_qxrry_26 {
123
+ font-size: var(--puck-font-size-xl);
124
+ }
125
+ ._Heading--l_qxrry_30 {
126
+ font-size: var(--puck-font-size-l);
127
+ }
128
+ ._Heading--m_qxrry_34 {
129
+ font-size: var(--puck-font-size-m);
130
+ }
131
+ ._Heading--s_qxrry_38 {
132
+ font-size: var(--puck-font-size-s);
133
+ }
134
+ ._Heading--xs_qxrry_42 {
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_nacdm_1 {
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_nacdm_13 {
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_nacdm_1 1s 0s infinite linear;
157
+ animation-fill-mode: both;
158
+ }
159
+
16
160
  /* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
17
161
  ._OutlineList_w4lzv_1 {
18
162
  color: var(--puck-color-grey-03);
package/dist/index.d.mts CHANGED
@@ -302,7 +302,6 @@ type Metadata = {
302
302
  type ItemWithId = {
303
303
  _arrayId: string;
304
304
  _originalIndex: number;
305
- _currentIndex: number;
306
305
  };
307
306
  type ArrayState = {
308
307
  items: ItemWithId[];
@@ -313,7 +312,6 @@ type UiState = {
313
312
  rightSideBarVisible: boolean;
314
313
  leftSideBarWidth?: number | null;
315
314
  rightSideBarWidth?: number | null;
316
- mobilePanelExpanded?: boolean;
317
315
  itemSelector: ItemSelector | null;
318
316
  arrayState: Record<string, ArrayState | undefined>;
319
317
  previewMode: "interactive" | "edit";
@@ -326,7 +324,7 @@ type UiState = {
326
324
  isDragging: boolean;
327
325
  viewports: {
328
326
  current: {
329
- width: number | "100%";
327
+ width: number;
330
328
  height: number | "auto";
331
329
  };
332
330
  controlsVisible: boolean;
@@ -335,9 +333,6 @@ type UiState = {
335
333
  field: {
336
334
  focus?: string | null;
337
335
  };
338
- plugin: {
339
- current: string | null;
340
- };
341
336
  };
342
337
  type AppState<UserData extends Data = Data> = {
343
338
  data: UserData;
@@ -387,11 +382,6 @@ type LeftOrExactRight<Union, Left, Right> = (Left & Union extends Right ? Exact<
387
382
  type AssertHasValue<T, True = T, False = never> = [keyof T] extends [
388
383
  never
389
384
  ] ? False : True;
390
- type RenderFunc<Props extends {
391
- [key: string]: any;
392
- } = {
393
- children: ReactNode;
394
- }> = (props: Props) => ReactElement;
395
385
 
396
386
  type MapFnParams<ThisField = Field> = {
397
387
  value: any;
@@ -415,6 +405,11 @@ G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>, UserField extends
415
405
  [Type in UserField["type"]]: FieldTransformFn<ExtractField<UserField, Type>>;
416
406
  }>;
417
407
 
408
+ type RenderFunc<Props extends {
409
+ [key: string]: any;
410
+ } = {
411
+ children: ReactNode;
412
+ }> = (props: Props) => ReactElement;
418
413
  declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
419
414
  type OverrideKey = (typeof overrideKeys)[number];
420
415
  type OverridesGeneric<Shape extends {
@@ -485,7 +480,7 @@ type DragAxis = "dynamic" | "y" | "x";
485
480
 
486
481
  type iconTypes = "Smartphone" | "Monitor" | "Tablet";
487
482
  type Viewport = {
488
- width: number | "100%";
483
+ width: number;
489
484
  height?: number | "auto";
490
485
  label?: string;
491
486
  icon?: iconTypes | ReactNode;
@@ -499,13 +494,8 @@ type Permissions = {
499
494
  insert: boolean;
500
495
  } & Record<string, boolean>;
501
496
  type Plugin<UserConfig extends Config = Config> = {
502
- name?: string;
503
- label?: string;
504
- icon?: ReactNode;
505
- render?: () => ReactElement;
506
497
  overrides?: Partial<Overrides<UserConfig>>;
507
498
  fieldTransforms?: FieldTransforms<UserConfig>;
508
- mobilePanelHeight?: "toggle" | "min-content";
509
499
  };
510
500
  type Slot<Props extends {
511
501
  [key: string]: DefaultComponentProps;
package/dist/index.d.ts CHANGED
@@ -302,7 +302,6 @@ type Metadata = {
302
302
  type ItemWithId = {
303
303
  _arrayId: string;
304
304
  _originalIndex: number;
305
- _currentIndex: number;
306
305
  };
307
306
  type ArrayState = {
308
307
  items: ItemWithId[];
@@ -313,7 +312,6 @@ type UiState = {
313
312
  rightSideBarVisible: boolean;
314
313
  leftSideBarWidth?: number | null;
315
314
  rightSideBarWidth?: number | null;
316
- mobilePanelExpanded?: boolean;
317
315
  itemSelector: ItemSelector | null;
318
316
  arrayState: Record<string, ArrayState | undefined>;
319
317
  previewMode: "interactive" | "edit";
@@ -326,7 +324,7 @@ type UiState = {
326
324
  isDragging: boolean;
327
325
  viewports: {
328
326
  current: {
329
- width: number | "100%";
327
+ width: number;
330
328
  height: number | "auto";
331
329
  };
332
330
  controlsVisible: boolean;
@@ -335,9 +333,6 @@ type UiState = {
335
333
  field: {
336
334
  focus?: string | null;
337
335
  };
338
- plugin: {
339
- current: string | null;
340
- };
341
336
  };
342
337
  type AppState<UserData extends Data = Data> = {
343
338
  data: UserData;
@@ -387,11 +382,6 @@ type LeftOrExactRight<Union, Left, Right> = (Left & Union extends Right ? Exact<
387
382
  type AssertHasValue<T, True = T, False = never> = [keyof T] extends [
388
383
  never
389
384
  ] ? False : True;
390
- type RenderFunc<Props extends {
391
- [key: string]: any;
392
- } = {
393
- children: ReactNode;
394
- }> = (props: Props) => ReactElement;
395
385
 
396
386
  type MapFnParams<ThisField = Field> = {
397
387
  value: any;
@@ -415,6 +405,11 @@ G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>, UserField extends
415
405
  [Type in UserField["type"]]: FieldTransformFn<ExtractField<UserField, Type>>;
416
406
  }>;
417
407
 
408
+ type RenderFunc<Props extends {
409
+ [key: string]: any;
410
+ } = {
411
+ children: ReactNode;
412
+ }> = (props: Props) => ReactElement;
418
413
  declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
419
414
  type OverrideKey = (typeof overrideKeys)[number];
420
415
  type OverridesGeneric<Shape extends {
@@ -485,7 +480,7 @@ type DragAxis = "dynamic" | "y" | "x";
485
480
 
486
481
  type iconTypes = "Smartphone" | "Monitor" | "Tablet";
487
482
  type Viewport = {
488
- width: number | "100%";
483
+ width: number;
489
484
  height?: number | "auto";
490
485
  label?: string;
491
486
  icon?: iconTypes | ReactNode;
@@ -499,13 +494,8 @@ type Permissions = {
499
494
  insert: boolean;
500
495
  } & Record<string, boolean>;
501
496
  type Plugin<UserConfig extends Config = Config> = {
502
- name?: string;
503
- label?: string;
504
- icon?: ReactNode;
505
- render?: () => ReactElement;
506
497
  overrides?: Partial<Overrides<UserConfig>>;
507
498
  fieldTransforms?: FieldTransforms<UserConfig>;
508
- mobilePanelHeight?: "toggle" | "min-content";
509
499
  };
510
500
  type Slot<Props extends {
511
501
  [key: string]: DefaultComponentProps;
package/dist/index.js CHANGED
@@ -277,21 +277,21 @@ init_react_import();
277
277
 
278
278
  // src/HeadingAnalyzer.tsx
279
279
  init_react_import();
280
- var import_react10 = require("react");
280
+ var import_react11 = require("react");
281
281
 
282
282
  // css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css#css-module
283
283
  init_react_import();
284
- var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_yg0s7_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_yg0s7_6", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_yg0s7_10", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_yg0s7_14" };
284
+ var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_116v6_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_116v6_5", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_116v6_9", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_116v6_13" };
285
285
 
286
286
  // src/HeadingAnalyzer.tsx
287
287
  var import_puck = require("@measured/puck");
288
288
 
289
- // ../core/components/OutlineList/index.tsx
289
+ // ../core/components/SidebarSection/index.tsx
290
290
  init_react_import();
291
291
 
292
- // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
292
+ // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
293
293
  init_react_import();
294
- var styles_module_default = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
294
+ var styles_module_default = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
295
295
 
296
296
  // ../core/lib/get-class-name-factory.ts
297
297
  init_react_import();
@@ -320,50 +320,29 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
320
320
  };
321
321
  var get_class_name_factory_default = getClassNameFactory;
322
322
 
323
- // ../core/components/OutlineList/index.tsx
323
+ // ../core/components/Heading/index.tsx
324
+ init_react_import();
325
+
326
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
327
+ init_react_import();
328
+ var styles_module_default2 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
329
+
330
+ // ../core/components/Heading/index.tsx
324
331
  var import_jsx_runtime = require("react/jsx-runtime");
325
- var getClassName = get_class_name_factory_default("OutlineList", styles_module_default);
326
- var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default);
327
- var OutlineList = ({ children }) => {
328
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: getClassName(), children });
329
- };
330
- OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getClassNameItem({ clickable: true }), children });
331
- OutlineList.Item = ({
332
- children,
333
- onClick
334
- }) => {
332
+ var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
333
+ var Heading = ({ children, rank, size = "m" }) => {
334
+ const Tag = rank ? `h${rank}` : "span";
335
335
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
336
- "li",
336
+ Tag,
337
337
  {
338
- className: getClassNameItem({ clickable: !!onClick }),
339
- onClick,
338
+ className: getClassName({
339
+ [size]: true
340
+ }),
340
341
  children
341
342
  }
342
343
  );
343
344
  };
344
345
 
345
- // ../core/lib/scroll-into-view.ts
346
- init_react_import();
347
- var scrollIntoView = (el) => {
348
- const oldStyle = __spreadValues({}, el.style);
349
- el.style.scrollMargin = "256px";
350
- if (el) {
351
- el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
352
- el.style.scrollMargin = oldStyle.scrollMargin || "";
353
- }
354
- };
355
-
356
- // ../core/lib/get-frame.ts
357
- init_react_import();
358
- var getFrame = () => {
359
- if (typeof window === "undefined") return;
360
- let frameEl = document.querySelector("#preview-frame");
361
- if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
362
- return frameEl.contentDocument || document;
363
- }
364
- return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
365
- };
366
-
367
346
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
368
347
  init_react_import();
369
348
 
@@ -451,29 +430,15 @@ var createLucideIcon = (iconName, iconNode) => {
451
430
  return Component;
452
431
  };
453
432
 
454
- // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
433
+ // ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
455
434
  init_react_import();
456
- var Heading1 = createLucideIcon("Heading1", [
457
- ["path", { d: "M4 12h8", key: "17cfdx" }],
458
- ["path", { d: "M4 18V6", key: "1rz3zl" }],
459
- ["path", { d: "M12 18V6", key: "zqpxq5" }],
460
- ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
435
+ var ChevronRight = createLucideIcon("ChevronRight", [
436
+ ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
461
437
  ]);
462
438
 
463
- // ../core/lib/index.ts
464
- init_react_import();
465
-
466
- // ../core/lib/filter.ts
467
- init_react_import();
468
-
469
- // ../core/lib/data/reorder.ts
470
- init_react_import();
471
-
472
- // ../core/lib/data/replace.ts
473
- init_react_import();
474
-
475
- // ../core/lib/use-reset-auto-zoom.ts
439
+ // ../core/lib/use-breadcrumbs.ts
476
440
  init_react_import();
441
+ var import_react10 = require("react");
477
442
 
478
443
  // ../core/store/index.ts
479
444
  init_react_import();
@@ -1443,8 +1408,7 @@ init_react_import();
1443
1408
  var defaultViewports = [
1444
1409
  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1445
1410
  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1446
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" },
1447
- { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
1411
+ { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1448
1412
  ];
1449
1413
 
1450
1414
  // ../../node_modules/zustand/esm/vanilla.mjs
@@ -2340,8 +2304,7 @@ var defaultAppState = {
2340
2304
  options: [],
2341
2305
  controlsVisible: true
2342
2306
  },
2343
- field: { focus: null },
2344
- plugin: { current: null }
2307
+ field: { focus: null }
2345
2308
  },
2346
2309
  indexes: {
2347
2310
  nodes: {},
@@ -2357,7 +2320,6 @@ var createAppStore = (initialAppStore) => create()(
2357
2320
  subscribeWithSelector((set, get) => {
2358
2321
  var _a, _b;
2359
2322
  return __spreadProps(__spreadValues({
2360
- instanceId: generateId(),
2361
2323
  state: defaultAppState,
2362
2324
  config: { components: {} },
2363
2325
  componentState: {},
@@ -2528,14 +2490,203 @@ var createAppStore = (initialAppStore) => create()(
2528
2490
  })
2529
2491
  );
2530
2492
  var appStoreContext = (0, import_react9.createContext)(createAppStore());
2493
+ function useAppStore(selector) {
2494
+ const context = (0, import_react9.useContext)(appStoreContext);
2495
+ return useStore(context, selector);
2496
+ }
2497
+ function useAppStoreApi() {
2498
+ return (0, import_react9.useContext)(appStoreContext);
2499
+ }
2500
+
2501
+ // ../core/lib/use-breadcrumbs.ts
2502
+ var useBreadcrumbs = (renderCount) => {
2503
+ const selectedId = useAppStore((s) => {
2504
+ var _a;
2505
+ return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
2506
+ });
2507
+ const config = useAppStore((s) => s.config);
2508
+ const path = useAppStore((s) => {
2509
+ var _a;
2510
+ return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
2511
+ });
2512
+ const appStore = useAppStoreApi();
2513
+ return (0, import_react10.useMemo)(() => {
2514
+ const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
2515
+ var _a, _b, _c;
2516
+ const [componentId] = zoneCompound.split(":");
2517
+ if (componentId === "root") {
2518
+ return {
2519
+ label: "Page",
2520
+ selector: null
2521
+ };
2522
+ }
2523
+ const node = appStore.getState().state.indexes.nodes[componentId];
2524
+ const parentId = node.path[node.path.length - 1];
2525
+ const contentIds = ((_a = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _a.contentIds) || [];
2526
+ const index = contentIds.indexOf(componentId);
2527
+ const label = node ? (_c = (_b = config.components[node.data.type]) == null ? void 0 : _b.label) != null ? _c : node.data.type : "Component";
2528
+ return {
2529
+ label,
2530
+ selector: node ? {
2531
+ index,
2532
+ zone: node.path[node.path.length - 1]
2533
+ } : null
2534
+ };
2535
+ })) || [];
2536
+ if (renderCount) {
2537
+ return breadcrumbs.slice(breadcrumbs.length - renderCount);
2538
+ }
2539
+ return breadcrumbs;
2540
+ }, [path, renderCount]);
2541
+ };
2542
+
2543
+ // ../core/components/Loader/index.tsx
2544
+ init_react_import();
2545
+
2546
+ // ../core/lib/index.ts
2547
+ init_react_import();
2548
+
2549
+ // ../core/lib/filter.ts
2550
+ init_react_import();
2551
+
2552
+ // ../core/lib/data/reorder.ts
2553
+ init_react_import();
2554
+
2555
+ // ../core/lib/data/replace.ts
2556
+ init_react_import();
2557
+
2558
+ // ../core/lib/use-reset-auto-zoom.ts
2559
+ init_react_import();
2531
2560
 
2532
2561
  // ../core/lib/get-zoom-config.ts
2533
2562
  init_react_import();
2534
2563
 
2564
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
2565
+ init_react_import();
2566
+ var styles_module_default3 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
2567
+
2568
+ // ../core/components/Loader/index.tsx
2569
+ var import_jsx_runtime2 = require("react/jsx-runtime");
2570
+ var getClassName2 = get_class_name_factory_default("Loader", styles_module_default3);
2571
+ var Loader = (_a) => {
2572
+ var _b = _a, {
2573
+ color,
2574
+ size = 16
2575
+ } = _b, props = __objRest(_b, [
2576
+ "color",
2577
+ "size"
2578
+ ]);
2579
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2580
+ "span",
2581
+ __spreadValues({
2582
+ className: getClassName2(),
2583
+ style: {
2584
+ width: size,
2585
+ height: size,
2586
+ color
2587
+ },
2588
+ "aria-label": "loading"
2589
+ }, props)
2590
+ );
2591
+ };
2592
+
2593
+ // ../core/components/SidebarSection/index.tsx
2594
+ var import_jsx_runtime3 = require("react/jsx-runtime");
2595
+ var getClassName3 = get_class_name_factory_default("SidebarSection", styles_module_default);
2596
+ var SidebarSection = ({
2597
+ children,
2598
+ title,
2599
+ background,
2600
+ showBreadcrumbs,
2601
+ noBorderTop,
2602
+ noPadding,
2603
+ isLoading
2604
+ }) => {
2605
+ const setUi = useAppStore((s) => s.setUi);
2606
+ const breadcrumbs = useBreadcrumbs(1);
2607
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
2608
+ "div",
2609
+ {
2610
+ className: getClassName3({ noBorderTop, noPadding }),
2611
+ style: { background },
2612
+ children: [
2613
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("title"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName3("breadcrumbs"), children: [
2614
+ showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName3("breadcrumb"), children: [
2615
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
2616
+ "button",
2617
+ {
2618
+ type: "button",
2619
+ className: getClassName3("breadcrumbLabel"),
2620
+ onClick: () => setUi({ itemSelector: breadcrumb.selector }),
2621
+ children: breadcrumb.label
2622
+ }
2623
+ ),
2624
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRight, { size: 16 })
2625
+ ] }, i)) : null,
2626
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, { rank: "2", size: "xs", children: title }) })
2627
+ ] }) }),
2628
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("content"), children }),
2629
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Loader, { size: 32 }) })
2630
+ ]
2631
+ }
2632
+ );
2633
+ };
2634
+
2635
+ // ../core/components/OutlineList/index.tsx
2636
+ init_react_import();
2637
+
2638
+ // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
2639
+ init_react_import();
2640
+ var styles_module_default4 = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
2641
+
2642
+ // ../core/components/OutlineList/index.tsx
2643
+ var import_jsx_runtime4 = require("react/jsx-runtime");
2644
+ var getClassName4 = get_class_name_factory_default("OutlineList", styles_module_default4);
2645
+ var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default4);
2646
+ var OutlineList = ({ children }) => {
2647
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: getClassName4(), children });
2648
+ };
2649
+ OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassNameItem({ clickable: true }), children });
2650
+ OutlineList.Item = ({
2651
+ children,
2652
+ onClick
2653
+ }) => {
2654
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2655
+ "li",
2656
+ {
2657
+ className: getClassNameItem({ clickable: !!onClick }),
2658
+ onClick,
2659
+ children
2660
+ }
2661
+ );
2662
+ };
2663
+
2664
+ // ../core/lib/scroll-into-view.ts
2665
+ init_react_import();
2666
+ var scrollIntoView = (el) => {
2667
+ const oldStyle = __spreadValues({}, el.style);
2668
+ el.style.scrollMargin = "256px";
2669
+ if (el) {
2670
+ el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
2671
+ el.style.scrollMargin = oldStyle.scrollMargin || "";
2672
+ }
2673
+ };
2674
+
2675
+ // ../core/lib/get-frame.ts
2676
+ init_react_import();
2677
+ var getFrame = () => {
2678
+ if (typeof window === "undefined") return;
2679
+ let frameEl = document.querySelector("#preview-frame");
2680
+ if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
2681
+ return frameEl.contentDocument || document;
2682
+ }
2683
+ return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
2684
+ };
2685
+
2535
2686
  // src/HeadingAnalyzer.tsx
2536
2687
  var import_react_from_json = __toESM(require("react-from-json"));
2537
- var import_jsx_runtime2 = require("react/jsx-runtime");
2538
- var getClassName2 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2688
+ var import_jsx_runtime5 = require("react/jsx-runtime");
2689
+ var getClassName5 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2539
2690
  var getClassNameItem2 = get_class_name_factory_default("HeadingAnalyzerItem", HeadingAnalyzer_module_default);
2540
2691
  var ReactFromJSON = import_react_from_json.default.default || import_react_from_json.default;
2541
2692
  var getOutline = ({ frame } = {}) => {
@@ -2590,8 +2741,8 @@ function buildHierarchy(frame) {
2590
2741
  var usePuck = (0, import_puck.createUsePuck)();
2591
2742
  var HeadingAnalyzer = () => {
2592
2743
  const data = usePuck((s) => s.appState.data);
2593
- const [hierarchy, setHierarchy] = (0, import_react10.useState)([]);
2594
- (0, import_react10.useEffect)(() => {
2744
+ const [hierarchy, setHierarchy] = (0, import_react11.useState)([]);
2745
+ (0, import_react11.useEffect)(() => {
2595
2746
  const frame = getFrame();
2596
2747
  let entry = frame == null ? void 0 : frame.querySelector(`[data-puck-entry]`);
2597
2748
  const createHierarchy = () => {
@@ -2626,11 +2777,11 @@ var HeadingAnalyzer = () => {
2626
2777
  frameObserver.disconnect();
2627
2778
  };
2628
2779
  }, [data]);
2629
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName2(), children: [
2630
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
2780
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: getClassName5(), children: [
2781
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
2631
2782
  "small",
2632
2783
  {
2633
- className: getClassName2("cssWarning"),
2784
+ className: getClassName5("cssWarning"),
2634
2785
  style: {
2635
2786
  color: "var(--puck-color-red-04)",
2636
2787
  display: "block",
@@ -2639,19 +2790,19 @@ var HeadingAnalyzer = () => {
2639
2790
  children: [
2640
2791
  "Heading analyzer styles not loaded. Please review the",
2641
2792
  " ",
2642
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2793
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2643
2794
  "."
2644
2795
  ]
2645
2796
  }
2646
2797
  ),
2647
- hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "No headings." }),
2648
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2798
+ hierarchy.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: "No headings." }),
2799
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2649
2800
  ReactFromJSON,
2650
2801
  {
2651
2802
  mapping: {
2652
- Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }),
2653
- OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OutlineList.Item, { children: [
2654
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2803
+ Root: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: props.children }),
2804
+ OutlineListItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OutlineList.Item, { children: [
2805
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList.Clickable, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2655
2806
  "small",
2656
2807
  {
2657
2808
  className: getClassNameItem2({ missing: props.missing }),
@@ -2669,14 +2820,14 @@ var HeadingAnalyzer = () => {
2669
2820
  }, 2e3);
2670
2821
  }
2671
2822
  },
2672
- children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2673
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
2823
+ children: props.missing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2824
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
2674
2825
  "H",
2675
2826
  props.rank
2676
2827
  ] }),
2677
2828
  ": Missing"
2678
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2679
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("b", { children: [
2829
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2830
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
2680
2831
  "H",
2681
2832
  props.rank
2682
2833
  ] }),
@@ -2685,7 +2836,7 @@ var HeadingAnalyzer = () => {
2685
2836
  ] })
2686
2837
  }
2687
2838
  ) }),
2688
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OutlineList, { children: props.children })
2839
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OutlineList, { children: props.children })
2689
2840
  ] })
2690
2841
  },
2691
2842
  entry: {
@@ -2706,10 +2857,12 @@ var HeadingAnalyzer = () => {
2706
2857
  ] });
2707
2858
  };
2708
2859
  var headingAnalyzer = {
2709
- name: "heading-analyzer",
2710
- label: "Audit",
2711
- render: HeadingAnalyzer,
2712
- icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Heading1, {})
2860
+ overrides: {
2861
+ fields: ({ children, itemSelector }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2862
+ children,
2863
+ /* @__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, {}) }) })
2864
+ ] })
2865
+ }
2713
2866
  };
2714
2867
  var HeadingAnalyzer_default = headingAnalyzer;
2715
2868
  /*! Bundled license information:
@@ -2753,7 +2906,7 @@ lucide-react/dist/esm/createLucideIcon.js:
2753
2906
  * See the LICENSE file in the root directory of this source tree.
2754
2907
  *)
2755
2908
 
2756
- lucide-react/dist/esm/icons/heading-1.js:
2909
+ lucide-react/dist/esm/icons/chevron-right.js:
2757
2910
  (**
2758
2911
  * @license lucide-react v0.468.0 - ISC
2759
2912
  *
package/dist/index.mjs CHANGED
@@ -269,17 +269,17 @@ import { useEffect as useEffect5, useState } from "react";
269
269
 
270
270
  // css-module:/home/runner/work/puck/puck/packages/plugin-heading-analyzer/src/HeadingAnalyzer.module.css#css-module
271
271
  init_react_import();
272
- var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_yg0s7_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_yg0s7_6", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_yg0s7_10", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_yg0s7_14" };
272
+ var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_116v6_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_116v6_5", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_116v6_9", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_116v6_13" };
273
273
 
274
274
  // src/HeadingAnalyzer.tsx
275
275
  import { createUsePuck } from "@measured/puck";
276
276
 
277
- // ../core/components/OutlineList/index.tsx
277
+ // ../core/components/SidebarSection/index.tsx
278
278
  init_react_import();
279
279
 
280
- // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
280
+ // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
281
281
  init_react_import();
282
- var styles_module_default = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
282
+ var styles_module_default = { "SidebarSection": "_SidebarSection_8boj8_1", "SidebarSection-title": "_SidebarSection-title_8boj8_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_8boj8_20", "SidebarSection-content": "_SidebarSection-content_8boj8_24", "SidebarSection--noPadding": "_SidebarSection--noPadding_8boj8_28", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_8boj8_41", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_8boj8_70", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_8boj8_41", "SidebarSection-heading": "_SidebarSection-heading_8boj8_82", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_8boj8_86" };
283
283
 
284
284
  // ../core/lib/get-class-name-factory.ts
285
285
  init_react_import();
@@ -308,50 +308,29 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
308
308
  };
309
309
  var get_class_name_factory_default = getClassNameFactory;
310
310
 
311
- // ../core/components/OutlineList/index.tsx
311
+ // ../core/components/Heading/index.tsx
312
+ init_react_import();
313
+
314
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
315
+ init_react_import();
316
+ var styles_module_default2 = { "Heading": "_Heading_qxrry_1", "Heading--xxxxl": "_Heading--xxxxl_qxrry_12", "Heading--xxxl": "_Heading--xxxl_qxrry_18", "Heading--xxl": "_Heading--xxl_qxrry_22", "Heading--xl": "_Heading--xl_qxrry_26", "Heading--l": "_Heading--l_qxrry_30", "Heading--m": "_Heading--m_qxrry_34", "Heading--s": "_Heading--s_qxrry_38", "Heading--xs": "_Heading--xs_qxrry_42" };
317
+
318
+ // ../core/components/Heading/index.tsx
312
319
  import { jsx } from "react/jsx-runtime";
313
- var getClassName = get_class_name_factory_default("OutlineList", styles_module_default);
314
- var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default);
315
- var OutlineList = ({ children }) => {
316
- return /* @__PURE__ */ jsx("ul", { className: getClassName(), children });
317
- };
318
- OutlineList.Clickable = ({ children }) => /* @__PURE__ */ jsx("div", { className: getClassNameItem({ clickable: true }), children });
319
- OutlineList.Item = ({
320
- children,
321
- onClick
322
- }) => {
320
+ var getClassName = get_class_name_factory_default("Heading", styles_module_default2);
321
+ var Heading = ({ children, rank, size = "m" }) => {
322
+ const Tag = rank ? `h${rank}` : "span";
323
323
  return /* @__PURE__ */ jsx(
324
- "li",
324
+ Tag,
325
325
  {
326
- className: getClassNameItem({ clickable: !!onClick }),
327
- onClick,
326
+ className: getClassName({
327
+ [size]: true
328
+ }),
328
329
  children
329
330
  }
330
331
  );
331
332
  };
332
333
 
333
- // ../core/lib/scroll-into-view.ts
334
- init_react_import();
335
- var scrollIntoView = (el) => {
336
- const oldStyle = __spreadValues({}, el.style);
337
- el.style.scrollMargin = "256px";
338
- if (el) {
339
- el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
340
- el.style.scrollMargin = oldStyle.scrollMargin || "";
341
- }
342
- };
343
-
344
- // ../core/lib/get-frame.ts
345
- init_react_import();
346
- var getFrame = () => {
347
- if (typeof window === "undefined") return;
348
- let frameEl = document.querySelector("#preview-frame");
349
- if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
350
- return frameEl.contentDocument || document;
351
- }
352
- return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
353
- };
354
-
355
334
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
356
335
  init_react_import();
357
336
 
@@ -439,29 +418,15 @@ var createLucideIcon = (iconName, iconNode) => {
439
418
  return Component;
440
419
  };
441
420
 
442
- // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
421
+ // ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
443
422
  init_react_import();
444
- var Heading1 = createLucideIcon("Heading1", [
445
- ["path", { d: "M4 12h8", key: "17cfdx" }],
446
- ["path", { d: "M4 18V6", key: "1rz3zl" }],
447
- ["path", { d: "M12 18V6", key: "zqpxq5" }],
448
- ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
423
+ var ChevronRight = createLucideIcon("ChevronRight", [
424
+ ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
449
425
  ]);
450
426
 
451
- // ../core/lib/index.ts
452
- init_react_import();
453
-
454
- // ../core/lib/filter.ts
455
- init_react_import();
456
-
457
- // ../core/lib/data/reorder.ts
458
- init_react_import();
459
-
460
- // ../core/lib/data/replace.ts
461
- init_react_import();
462
-
463
- // ../core/lib/use-reset-auto-zoom.ts
427
+ // ../core/lib/use-breadcrumbs.ts
464
428
  init_react_import();
429
+ import { useMemo } from "react";
465
430
 
466
431
  // ../core/store/index.ts
467
432
  init_react_import();
@@ -1431,8 +1396,7 @@ init_react_import();
1431
1396
  var defaultViewports = [
1432
1397
  { width: 360, height: "auto", icon: "Smartphone", label: "Small" },
1433
1398
  { width: 768, height: "auto", icon: "Tablet", label: "Medium" },
1434
- { width: 1280, height: "auto", icon: "Monitor", label: "Large" },
1435
- { width: "100%", height: "auto", icon: "FullWidth", label: "Full-width" }
1399
+ { width: 1280, height: "auto", icon: "Monitor", label: "Large" }
1436
1400
  ];
1437
1401
 
1438
1402
  // ../../node_modules/zustand/esm/vanilla.mjs
@@ -2328,8 +2292,7 @@ var defaultAppState = {
2328
2292
  options: [],
2329
2293
  controlsVisible: true
2330
2294
  },
2331
- field: { focus: null },
2332
- plugin: { current: null }
2295
+ field: { focus: null }
2333
2296
  },
2334
2297
  indexes: {
2335
2298
  nodes: {},
@@ -2345,7 +2308,6 @@ var createAppStore = (initialAppStore) => create()(
2345
2308
  subscribeWithSelector((set, get) => {
2346
2309
  var _a, _b;
2347
2310
  return __spreadProps(__spreadValues({
2348
- instanceId: generateId(),
2349
2311
  state: defaultAppState,
2350
2312
  config: { components: {} },
2351
2313
  componentState: {},
@@ -2516,14 +2478,203 @@ var createAppStore = (initialAppStore) => create()(
2516
2478
  })
2517
2479
  );
2518
2480
  var appStoreContext = createContext(createAppStore());
2481
+ function useAppStore(selector) {
2482
+ const context = useContext(appStoreContext);
2483
+ return useStore(context, selector);
2484
+ }
2485
+ function useAppStoreApi() {
2486
+ return useContext(appStoreContext);
2487
+ }
2488
+
2489
+ // ../core/lib/use-breadcrumbs.ts
2490
+ var useBreadcrumbs = (renderCount) => {
2491
+ const selectedId = useAppStore((s) => {
2492
+ var _a;
2493
+ return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
2494
+ });
2495
+ const config = useAppStore((s) => s.config);
2496
+ const path = useAppStore((s) => {
2497
+ var _a;
2498
+ return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
2499
+ });
2500
+ const appStore = useAppStoreApi();
2501
+ return useMemo(() => {
2502
+ const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
2503
+ var _a, _b, _c;
2504
+ const [componentId] = zoneCompound.split(":");
2505
+ if (componentId === "root") {
2506
+ return {
2507
+ label: "Page",
2508
+ selector: null
2509
+ };
2510
+ }
2511
+ const node = appStore.getState().state.indexes.nodes[componentId];
2512
+ const parentId = node.path[node.path.length - 1];
2513
+ const contentIds = ((_a = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _a.contentIds) || [];
2514
+ const index = contentIds.indexOf(componentId);
2515
+ const label = node ? (_c = (_b = config.components[node.data.type]) == null ? void 0 : _b.label) != null ? _c : node.data.type : "Component";
2516
+ return {
2517
+ label,
2518
+ selector: node ? {
2519
+ index,
2520
+ zone: node.path[node.path.length - 1]
2521
+ } : null
2522
+ };
2523
+ })) || [];
2524
+ if (renderCount) {
2525
+ return breadcrumbs.slice(breadcrumbs.length - renderCount);
2526
+ }
2527
+ return breadcrumbs;
2528
+ }, [path, renderCount]);
2529
+ };
2530
+
2531
+ // ../core/components/Loader/index.tsx
2532
+ init_react_import();
2533
+
2534
+ // ../core/lib/index.ts
2535
+ init_react_import();
2536
+
2537
+ // ../core/lib/filter.ts
2538
+ init_react_import();
2539
+
2540
+ // ../core/lib/data/reorder.ts
2541
+ init_react_import();
2542
+
2543
+ // ../core/lib/data/replace.ts
2544
+ init_react_import();
2545
+
2546
+ // ../core/lib/use-reset-auto-zoom.ts
2547
+ init_react_import();
2519
2548
 
2520
2549
  // ../core/lib/get-zoom-config.ts
2521
2550
  init_react_import();
2522
2551
 
2552
+ // css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css#css-module
2553
+ init_react_import();
2554
+ var styles_module_default3 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
2555
+
2556
+ // ../core/components/Loader/index.tsx
2557
+ import { jsx as jsx2 } from "react/jsx-runtime";
2558
+ var getClassName2 = get_class_name_factory_default("Loader", styles_module_default3);
2559
+ var Loader = (_a) => {
2560
+ var _b = _a, {
2561
+ color,
2562
+ size = 16
2563
+ } = _b, props = __objRest(_b, [
2564
+ "color",
2565
+ "size"
2566
+ ]);
2567
+ return /* @__PURE__ */ jsx2(
2568
+ "span",
2569
+ __spreadValues({
2570
+ className: getClassName2(),
2571
+ style: {
2572
+ width: size,
2573
+ height: size,
2574
+ color
2575
+ },
2576
+ "aria-label": "loading"
2577
+ }, props)
2578
+ );
2579
+ };
2580
+
2581
+ // ../core/components/SidebarSection/index.tsx
2582
+ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
2583
+ var getClassName3 = get_class_name_factory_default("SidebarSection", styles_module_default);
2584
+ var SidebarSection = ({
2585
+ children,
2586
+ title,
2587
+ background,
2588
+ showBreadcrumbs,
2589
+ noBorderTop,
2590
+ noPadding,
2591
+ isLoading
2592
+ }) => {
2593
+ const setUi = useAppStore((s) => s.setUi);
2594
+ const breadcrumbs = useBreadcrumbs(1);
2595
+ return /* @__PURE__ */ jsxs(
2596
+ "div",
2597
+ {
2598
+ className: getClassName3({ noBorderTop, noPadding }),
2599
+ style: { background },
2600
+ children: [
2601
+ /* @__PURE__ */ jsx3("div", { className: getClassName3("title"), children: /* @__PURE__ */ jsxs("div", { className: getClassName3("breadcrumbs"), children: [
2602
+ showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs("div", { className: getClassName3("breadcrumb"), children: [
2603
+ /* @__PURE__ */ jsx3(
2604
+ "button",
2605
+ {
2606
+ type: "button",
2607
+ className: getClassName3("breadcrumbLabel"),
2608
+ onClick: () => setUi({ itemSelector: breadcrumb.selector }),
2609
+ children: breadcrumb.label
2610
+ }
2611
+ ),
2612
+ /* @__PURE__ */ jsx3(ChevronRight, { size: 16 })
2613
+ ] }, i)) : null,
2614
+ /* @__PURE__ */ jsx3("div", { className: getClassName3("heading"), children: /* @__PURE__ */ jsx3(Heading, { rank: "2", size: "xs", children: title }) })
2615
+ ] }) }),
2616
+ /* @__PURE__ */ jsx3("div", { className: getClassName3("content"), children }),
2617
+ isLoading && /* @__PURE__ */ jsx3("div", { className: getClassName3("loadingOverlay"), children: /* @__PURE__ */ jsx3(Loader, { size: 32 }) })
2618
+ ]
2619
+ }
2620
+ );
2621
+ };
2622
+
2623
+ // ../core/components/OutlineList/index.tsx
2624
+ init_react_import();
2625
+
2626
+ // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
2627
+ init_react_import();
2628
+ var styles_module_default4 = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
2629
+
2630
+ // ../core/components/OutlineList/index.tsx
2631
+ import { jsx as jsx4 } from "react/jsx-runtime";
2632
+ var getClassName4 = get_class_name_factory_default("OutlineList", styles_module_default4);
2633
+ var getClassNameItem = get_class_name_factory_default("OutlineListItem", styles_module_default4);
2634
+ var OutlineList = ({ children }) => {
2635
+ return /* @__PURE__ */ jsx4("ul", { className: getClassName4(), children });
2636
+ };
2637
+ OutlineList.Clickable = ({ children }) => /* @__PURE__ */ jsx4("div", { className: getClassNameItem({ clickable: true }), children });
2638
+ OutlineList.Item = ({
2639
+ children,
2640
+ onClick
2641
+ }) => {
2642
+ return /* @__PURE__ */ jsx4(
2643
+ "li",
2644
+ {
2645
+ className: getClassNameItem({ clickable: !!onClick }),
2646
+ onClick,
2647
+ children
2648
+ }
2649
+ );
2650
+ };
2651
+
2652
+ // ../core/lib/scroll-into-view.ts
2653
+ init_react_import();
2654
+ var scrollIntoView = (el) => {
2655
+ const oldStyle = __spreadValues({}, el.style);
2656
+ el.style.scrollMargin = "256px";
2657
+ if (el) {
2658
+ el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
2659
+ el.style.scrollMargin = oldStyle.scrollMargin || "";
2660
+ }
2661
+ };
2662
+
2663
+ // ../core/lib/get-frame.ts
2664
+ init_react_import();
2665
+ var getFrame = () => {
2666
+ if (typeof window === "undefined") return;
2667
+ let frameEl = document.querySelector("#preview-frame");
2668
+ if ((frameEl == null ? void 0 : frameEl.tagName) === "IFRAME") {
2669
+ return frameEl.contentDocument || document;
2670
+ }
2671
+ return (frameEl == null ? void 0 : frameEl.ownerDocument) || document;
2672
+ };
2673
+
2523
2674
  // src/HeadingAnalyzer.tsx
2524
2675
  import ReactFromJSONModule from "react-from-json";
2525
- import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
2526
- var getClassName2 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2676
+ import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
2677
+ var getClassName5 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
2527
2678
  var getClassNameItem2 = get_class_name_factory_default("HeadingAnalyzerItem", HeadingAnalyzer_module_default);
2528
2679
  var ReactFromJSON = ReactFromJSONModule.default || ReactFromJSONModule;
2529
2680
  var getOutline = ({ frame } = {}) => {
@@ -2614,11 +2765,11 @@ var HeadingAnalyzer = () => {
2614
2765
  frameObserver.disconnect();
2615
2766
  };
2616
2767
  }, [data]);
2617
- return /* @__PURE__ */ jsxs("div", { className: getClassName2(), children: [
2618
- /* @__PURE__ */ jsxs(
2768
+ return /* @__PURE__ */ jsxs2("div", { className: getClassName5(), children: [
2769
+ /* @__PURE__ */ jsxs2(
2619
2770
  "small",
2620
2771
  {
2621
- className: getClassName2("cssWarning"),
2772
+ className: getClassName5("cssWarning"),
2622
2773
  style: {
2623
2774
  color: "var(--puck-color-red-04)",
2624
2775
  display: "block",
@@ -2627,19 +2778,19 @@ var HeadingAnalyzer = () => {
2627
2778
  children: [
2628
2779
  "Heading analyzer styles not loaded. Please review the",
2629
2780
  " ",
2630
- /* @__PURE__ */ jsx2("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2781
+ /* @__PURE__ */ jsx5("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2631
2782
  "."
2632
2783
  ]
2633
2784
  }
2634
2785
  ),
2635
- hierarchy.length === 0 && /* @__PURE__ */ jsx2("div", { children: "No headings." }),
2636
- /* @__PURE__ */ jsx2(OutlineList, { children: /* @__PURE__ */ jsx2(
2786
+ hierarchy.length === 0 && /* @__PURE__ */ jsx5("div", { children: "No headings." }),
2787
+ /* @__PURE__ */ jsx5(OutlineList, { children: /* @__PURE__ */ jsx5(
2637
2788
  ReactFromJSON,
2638
2789
  {
2639
2790
  mapping: {
2640
- Root: (props) => /* @__PURE__ */ jsx2(Fragment, { children: props.children }),
2641
- OutlineListItem: (props) => /* @__PURE__ */ jsxs(OutlineList.Item, { children: [
2642
- /* @__PURE__ */ jsx2(OutlineList.Clickable, { children: /* @__PURE__ */ jsx2(
2791
+ Root: (props) => /* @__PURE__ */ jsx5(Fragment, { children: props.children }),
2792
+ OutlineListItem: (props) => /* @__PURE__ */ jsxs2(OutlineList.Item, { children: [
2793
+ /* @__PURE__ */ jsx5(OutlineList.Clickable, { children: /* @__PURE__ */ jsx5(
2643
2794
  "small",
2644
2795
  {
2645
2796
  className: getClassNameItem2({ missing: props.missing }),
@@ -2657,14 +2808,14 @@ var HeadingAnalyzer = () => {
2657
2808
  }, 2e3);
2658
2809
  }
2659
2810
  },
2660
- children: props.missing ? /* @__PURE__ */ jsxs(Fragment, { children: [
2661
- /* @__PURE__ */ jsxs("b", { children: [
2811
+ children: props.missing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
2812
+ /* @__PURE__ */ jsxs2("b", { children: [
2662
2813
  "H",
2663
2814
  props.rank
2664
2815
  ] }),
2665
2816
  ": Missing"
2666
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2667
- /* @__PURE__ */ jsxs("b", { children: [
2817
+ ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
2818
+ /* @__PURE__ */ jsxs2("b", { children: [
2668
2819
  "H",
2669
2820
  props.rank
2670
2821
  ] }),
@@ -2673,7 +2824,7 @@ var HeadingAnalyzer = () => {
2673
2824
  ] })
2674
2825
  }
2675
2826
  ) }),
2676
- /* @__PURE__ */ jsx2(OutlineList, { children: props.children })
2827
+ /* @__PURE__ */ jsx5(OutlineList, { children: props.children })
2677
2828
  ] })
2678
2829
  },
2679
2830
  entry: {
@@ -2694,10 +2845,12 @@ var HeadingAnalyzer = () => {
2694
2845
  ] });
2695
2846
  };
2696
2847
  var headingAnalyzer = {
2697
- name: "heading-analyzer",
2698
- label: "Audit",
2699
- render: HeadingAnalyzer,
2700
- icon: /* @__PURE__ */ jsx2(Heading1, {})
2848
+ overrides: {
2849
+ fields: ({ children, itemSelector }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
2850
+ children,
2851
+ /* @__PURE__ */ jsx5("div", { style: { display: itemSelector ? "none" : "block" }, children: /* @__PURE__ */ jsx5(SidebarSection, { title: "Heading Outline", children: /* @__PURE__ */ jsx5(HeadingAnalyzer, {}) }) })
2852
+ ] })
2853
+ }
2701
2854
  };
2702
2855
  var HeadingAnalyzer_default = headingAnalyzer;
2703
2856
  export {
@@ -2744,7 +2897,7 @@ lucide-react/dist/esm/createLucideIcon.js:
2744
2897
  * See the LICENSE file in the root directory of this source tree.
2745
2898
  *)
2746
2899
 
2747
- lucide-react/dist/esm/icons/heading-1.js:
2900
+ lucide-react/dist/esm/icons/chevron-right.js:
2748
2901
  (**
2749
2902
  * @license lucide-react v0.468.0 - ISC
2750
2903
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck-plugin-heading-analyzer",
3
- "version": "0.21.0-canary.2e1b5267",
3
+ "version": "0.21.0-canary.5333fc7e",
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.21.0-canary.2e1b5267",
28
+ "@measured/puck": "^0.21.0-canary.5333fc7e",
29
29
  "@types/react": "^19.0.1",
30
30
  "@types/react-dom": "^19.0.2",
31
31
  "eslint": "^7.32.0",