@measured/puck-plugin-heading-analyzer 0.20.0-canary.f73c8fa0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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 = { "HeadingAnalyzer": "_HeadingAnalyzer_yg0s7_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_yg0s7_6", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_yg0s7_10", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_yg0s7_14" };
308
+ var HeadingAnalyzer_module_default = { "HeadingAnalyzer": "_HeadingAnalyzer_116v6_1", "HeadingAnalyzer-cssWarning": "_HeadingAnalyzer-cssWarning_116v6_5", "HeadingAnalyzerItem": "_HeadingAnalyzerItem_116v6_9", "HeadingAnalyzerItem--missing": "_HeadingAnalyzerItem--missing_116v6_13" };
309
309
 
310
310
  // src/HeadingAnalyzer.tsx
311
311
  import { createUsePuck } from "@measured/puck";
312
312
 
313
- // ../core/components/OutlineList/index.tsx
313
+ // ../core/components/SidebarSection/index.tsx
314
314
  init_react_import();
315
315
 
316
- // css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
316
+ // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
317
317
  init_react_import();
318
- var styles_module_default = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
318
+ 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" };
319
319
 
320
320
  // ../core/lib/get-class-name-factory.ts
321
321
  init_react_import();
@@ -344,50 +344,29 @@ var getClassNameFactory = (rootClass, styles, config = { baseClass: "" }) => (op
344
344
  };
345
345
  var get_class_name_factory_default = getClassNameFactory;
346
346
 
347
- // ../core/components/OutlineList/index.tsx
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 = { "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" };
353
+
354
+ // ../core/components/Heading/index.tsx
348
355
  import { jsx } from "react/jsx-runtime";
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
- }) => {
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";
359
359
  return /* @__PURE__ */ jsx(
360
- "li",
360
+ Tag,
361
361
  {
362
- className: getClassNameItem({ clickable: !!onClick }),
363
- onClick,
362
+ className: getClassName({
363
+ [size]: true
364
+ }),
364
365
  children
365
366
  }
366
367
  );
367
368
  };
368
369
 
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
-
391
370
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
392
371
  init_react_import();
393
372
 
@@ -475,29 +454,15 @@ var createLucideIcon = (iconName, iconNode) => {
475
454
  return Component;
476
455
  };
477
456
 
478
- // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
457
+ // ../../node_modules/lucide-react/dist/esm/icons/chevron-right.js
479
458
  init_react_import();
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" }]
459
+ var ChevronRight = createLucideIcon("ChevronRight", [
460
+ ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
485
461
  ]);
486
462
 
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
463
+ // ../core/lib/use-breadcrumbs.ts
500
464
  init_react_import();
465
+ import { useMemo } from "react";
501
466
 
502
467
  // ../core/store/index.ts
503
468
  init_react_import();
@@ -1952,8 +1917,7 @@ var defaultAppState = {
1952
1917
  options: [],
1953
1918
  controlsVisible: true
1954
1919
  },
1955
- field: { focus: null },
1956
- plugin: { current: null }
1920
+ field: { focus: null }
1957
1921
  },
1958
1922
  indexes: {
1959
1923
  nodes: {},
@@ -2139,14 +2103,203 @@ var createAppStore = (initialAppStore) => create()(
2139
2103
  })
2140
2104
  );
2141
2105
  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();
2142
2173
 
2143
2174
  // ../core/lib/get-zoom-config.ts
2144
2175
  init_react_import();
2145
2176
 
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 = { "Loader": "_Loader_nacdm_13", "loader-animation": "_loader-animation_nacdm_1" };
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 = { "OutlineList": "_OutlineList_w4lzv_1", "OutlineListItem": "_OutlineListItem_w4lzv_25", "OutlineListItem--clickable": "_OutlineListItem--clickable_w4lzv_45" };
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
+
2146
2299
  // src/HeadingAnalyzer.tsx
2147
2300
  import ReactFromJSONModule from "react-from-json";
2148
- import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
2149
- var getClassName2 = get_class_name_factory_default("HeadingAnalyzer", HeadingAnalyzer_module_default);
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
2303
  var getClassNameItem2 = get_class_name_factory_default("HeadingAnalyzerItem", HeadingAnalyzer_module_default);
2151
2304
  var ReactFromJSON = ReactFromJSONModule.default || ReactFromJSONModule;
2152
2305
  var getOutline = ({ frame } = {}) => {
@@ -2237,11 +2390,11 @@ var HeadingAnalyzer = () => {
2237
2390
  frameObserver.disconnect();
2238
2391
  };
2239
2392
  }, [data]);
2240
- return /* @__PURE__ */ jsxs("div", { className: getClassName2(), children: [
2241
- /* @__PURE__ */ jsxs(
2393
+ return /* @__PURE__ */ jsxs2("div", { className: getClassName5(), children: [
2394
+ /* @__PURE__ */ jsxs2(
2242
2395
  "small",
2243
2396
  {
2244
- className: getClassName2("cssWarning"),
2397
+ className: getClassName5("cssWarning"),
2245
2398
  style: {
2246
2399
  color: "var(--puck-color-red-04)",
2247
2400
  display: "block",
@@ -2250,19 +2403,19 @@ var HeadingAnalyzer = () => {
2250
2403
  children: [
2251
2404
  "Heading analyzer styles not loaded. Please review the",
2252
2405
  " ",
2253
- /* @__PURE__ */ jsx2("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2406
+ /* @__PURE__ */ jsx5("a", { href: "https://github.com/measuredco/puck/blob/main/packages/plugin-heading-analyzer/README.md", children: "README" }),
2254
2407
  "."
2255
2408
  ]
2256
2409
  }
2257
2410
  ),
2258
- hierarchy.length === 0 && /* @__PURE__ */ jsx2("div", { children: "No headings." }),
2259
- /* @__PURE__ */ jsx2(OutlineList, { children: /* @__PURE__ */ jsx2(
2411
+ hierarchy.length === 0 && /* @__PURE__ */ jsx5("div", { children: "No headings." }),
2412
+ /* @__PURE__ */ jsx5(OutlineList, { children: /* @__PURE__ */ jsx5(
2260
2413
  ReactFromJSON,
2261
2414
  {
2262
2415
  mapping: {
2263
- Root: (props) => /* @__PURE__ */ jsx2(Fragment, { children: props.children }),
2264
- OutlineListItem: (props) => /* @__PURE__ */ jsxs(OutlineList.Item, { children: [
2265
- /* @__PURE__ */ jsx2(OutlineList.Clickable, { children: /* @__PURE__ */ jsx2(
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(
2266
2419
  "small",
2267
2420
  {
2268
2421
  className: getClassNameItem2({ missing: props.missing }),
@@ -2280,14 +2433,14 @@ var HeadingAnalyzer = () => {
2280
2433
  }, 2e3);
2281
2434
  }
2282
2435
  },
2283
- children: props.missing ? /* @__PURE__ */ jsxs(Fragment, { children: [
2284
- /* @__PURE__ */ jsxs("b", { children: [
2436
+ children: props.missing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
2437
+ /* @__PURE__ */ jsxs2("b", { children: [
2285
2438
  "H",
2286
2439
  props.rank
2287
2440
  ] }),
2288
2441
  ": Missing"
2289
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2290
- /* @__PURE__ */ jsxs("b", { children: [
2442
+ ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
2443
+ /* @__PURE__ */ jsxs2("b", { children: [
2291
2444
  "H",
2292
2445
  props.rank
2293
2446
  ] }),
@@ -2296,7 +2449,7 @@ var HeadingAnalyzer = () => {
2296
2449
  ] })
2297
2450
  }
2298
2451
  ) }),
2299
- /* @__PURE__ */ jsx2(OutlineList, { children: props.children })
2452
+ /* @__PURE__ */ jsx5(OutlineList, { children: props.children })
2300
2453
  ] })
2301
2454
  },
2302
2455
  entry: {
@@ -2317,10 +2470,12 @@ var HeadingAnalyzer = () => {
2317
2470
  ] });
2318
2471
  };
2319
2472
  var headingAnalyzer = {
2320
- name: "heading-analyzer",
2321
- label: "Audit",
2322
- render: HeadingAnalyzer,
2323
- icon: /* @__PURE__ */ jsx2(Heading1, {})
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
+ }
2324
2479
  };
2325
2480
  var HeadingAnalyzer_default = headingAnalyzer;
2326
2481
  export {
@@ -2367,7 +2522,7 @@ lucide-react/dist/esm/createLucideIcon.js:
2367
2522
  * See the LICENSE file in the root directory of this source tree.
2368
2523
  *)
2369
2524
 
2370
- lucide-react/dist/esm/icons/heading-1.js:
2525
+ lucide-react/dist/esm/icons/chevron-right.js:
2371
2526
  (**
2372
2527
  * @license lucide-react v0.468.0 - ISC
2373
2528
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck-plugin-heading-analyzer",
3
- "version": "0.20.0-canary.f73c8fa0",
3
+ "version": "0.20.0",
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.0-canary.f73c8fa0",
28
+ "@measured/puck": "^0.20.0",
29
29
  "@types/react": "^19.0.1",
30
30
  "@types/react-dom": "^19.0.2",
31
31
  "eslint": "^7.32.0",