@standhigher/puck-page-builder 0.12.7 → 0.12.9

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 (10) hide show
  1. package/README.md +1 -1
  2. package/dist/{chunk-RLKWR5JM.js → chunk-UWS3OP2P.js} +12 -2
  3. package/dist/extensions.d.ts +8 -2
  4. package/dist/extensions.js +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +256 -202
  7. package/dist/runtime.d.ts +1 -1
  8. package/dist/runtime.js +1 -1
  9. package/package.json +1 -1
  10. package/src/styles.css +19 -11
package/dist/runtime.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { WebRenderer, WebRendererProps } from './renderer.js';
2
2
  export { B as BlockDefinition, a as BlockEditorProps, b as BlockOperation, c as BlockPolicy, d as BlockVariantDefinition, D as DataSourceDefinition, E as EditorAction, e as EditorActionPosition, f as EditorOperationPolicy, g as ExtensionActionContext, h as ExtensionRegistry, i as ExtensionRegistryError, j as ExtensionRegistryErrorCode, k as ExtensionRegistryOptions, l as ExtensionTarget, F as FieldConfig, m as FieldDefinition, n as FieldProps, o as FieldValidation, L as LifecycleHooks, P as PageBuilderExtension, R as RendererDefinition, T as TemplateDefinition, p as TemplateRegistry, q as TemplateSource, U as UISlotContribution, r as UISlotName, V as ValidationIssue, s as createExtensionRegistry, t as createTemplateRegistry } from './registry-BkqtMP-A.js';
3
- export { ProductReference, isProductReference, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, parseProductReferences, toProductReferenceJson, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.js';
3
+ export { ProductReference, ProductReferenceMoney, isProductReference, maximumBlockInstances, mergeBlockPolicies, minimumBlockInstances, parseProductReferences, toProductReferenceJson, validateBlockPolicy, validateFieldValue, validatePageDocumentWithRegistry } from './extensions.js';
4
4
  export { BlockNode, BlockStyleOverrides, DataBinding, JsonPrimitive, JsonValue, PageDocument, PageDocumentIssue, PageDocumentMigration, PageDocumentSchemaVersion, PageDocumentValidation, PageSettings, RenderTarget, createPageDocument, migratePageDocument, validatePageDocument } from './schema.js';
5
5
  export { ThemeTokenName, ThemeTokenValidation, ThemeTokens, mergeThemeTokens, normalizeThemeTokens, systemThemeTokens, toThemeStyle } from './theme.js';
6
6
  import 'react';
package/dist/runtime.js CHANGED
@@ -13,7 +13,7 @@ import {
13
13
  validateBlockPolicy,
14
14
  validateFieldValue,
15
15
  validatePageDocumentWithRegistry
16
- } from "./chunk-RLKWR5JM.js";
16
+ } from "./chunk-UWS3OP2P.js";
17
17
  import {
18
18
  WebRenderer
19
19
  } from "./chunk-KYXIXIWK.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@standhigher/puck-page-builder",
3
- "version": "0.12.7",
3
+ "version": "0.12.9",
4
4
  "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
5
5
  "type": "module",
6
6
  "repository": {
package/src/styles.css CHANGED
@@ -27,7 +27,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
27
27
  .pb-zoom-control .Polaris-Select__Input { padding-top: 4px; padding-bottom: 4px; }
28
28
  .pb-page-status-card { display: grid; gap: 2px; margin-top: var(--builder-space-1); }
29
29
  .pb-page-status-card p { margin: 0; }
30
- .pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 320px); min-height: calc(100vh - 56px); }
30
+ .pb-workspace { display: grid; grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr) minmax(260px, 320px); width: 100%; min-width: 0; min-height: calc(100vh - 56px); overflow-x: hidden; }
31
31
  .pb-workspace--left-closed:not(.pb-workspace--right-closed) { grid-template-columns: 64px minmax(0, 1fr) minmax(300px, 320px); }
32
32
  .pb-workspace--right-closed:not(.pb-workspace--left-closed) { grid-template-columns: 64px minmax(260px, 300px) minmax(0, 1fr); }
33
33
  .pb-workspace--left-closed.pb-workspace--right-closed { grid-template-columns: 64px minmax(0, 1fr); }
@@ -35,6 +35,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
35
35
  .pb-tool-rail .Polaris-Button { min-width: 44px; min-height: 44px; }
36
36
  .pb-left-panel, .pb-right-panel { display: flex; flex-direction: column; gap: var(--builder-space-4); min-width: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-surface); }
37
37
  .pb-left-panel { border-right: 1px solid var(--builder-border); }
38
+ .pb-panel-header { width: 100%; }
39
+ .pb-panel-header .Polaris-InlineStack { width: 100%; }
40
+ .pb-panel-header .Polaris-Button { min-width: 32px; min-height: 32px; }
38
41
  .pb-right-panel { border-left: 1px solid var(--builder-border); background: #f8fafc; }
39
42
  .pb-right-panel > h2 { margin: 0; color: #475569; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
40
43
  .pb-inspector { display: grid; gap: var(--builder-space-3); }
@@ -73,7 +76,10 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
73
76
  .pb-asset-picker { display: grid; gap: 8px; }
74
77
  .pb-asset-picker__preview { display: block; width: 100%; aspect-ratio: 20 / 9; object-fit: fill; object-position: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
75
78
  .pb-inspector__hint { margin: 0; padding: 0 var(--builder-space-2); color: #64748b; font-size: 12px; line-height: 1.5; }
76
- .pb-inspector-actions { padding-top: var(--builder-space-2); border-top: 1px solid #e2e8f0; }
79
+ .pb-inspector-actions { min-width: 0; padding-top: var(--builder-space-2); border-top: 1px solid #e2e8f0; }
80
+ .pb-inspector-actions .Polaris-ButtonGroup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: var(--builder-space-2); }
81
+ .pb-inspector-actions .Polaris-ButtonGroup__Item { min-width: 0; margin: 0; }
82
+ .pb-inspector-actions .Polaris-ButtonGroup__Item .Polaris-Button { width: 100%; justify-content: center; }
77
83
  .pb-delete-confirmation-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--builder-space-4); background: rgb(15 23 42 / 42%); }
78
84
  .pb-delete-confirmation { display: grid; gap: var(--builder-space-4); width: min(100%, 420px); padding: var(--builder-space-5); border-radius: 12px; color: #0f172a; background: #fff; box-shadow: 0 20px 50px rgb(15 23 42 / 25%); }
79
85
  .pb-delete-confirmation h2, .pb-delete-confirmation p { margin: 0; }
@@ -90,9 +96,9 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
90
96
  .pb-canvas-area { display: flex; flex-direction: column; gap: var(--builder-space-3); min-width: 0; min-height: 0; padding: var(--builder-space-4); overflow: auto; background: var(--builder-canvas-bg); }
91
97
  .pb-canvas-toolbar { padding: var(--builder-space-2); border: 1px solid var(--builder-border); border-radius: var(--builder-panel-radius); background: var(--builder-surface); }
92
98
  .pb-canvas-stage { position: relative; display: block; padding: 0; height: auto; }
93
- .pb-canvas-frame { --puck-color-line-placeholder: var(--builder-accent); --puck-line-placeholder-width: 3px; width: 100%; height: auto; margin: 0 auto; overflow: visible; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transition: width 160ms ease, transform 160ms ease; }
94
- .pb-canvas-frame iframe { display: block; width: 100%; height: auto !important; min-height: 0 !important; border: 0; }
95
- .pb-canvas-frame [class*="PuckPreview"] { position: relative; height: auto !important; }
99
+ .pb-canvas-frame { --puck-color-line-placeholder: var(--builder-accent); --puck-line-placeholder-width: 3px; width: 100%; height: auto; margin: 0 auto; overflow: visible; border: 1px solid var(--builder-border); border-radius: var(--builder-canvas-radius); background: var(--builder-surface); box-shadow: var(--builder-canvas-shadow); transform-origin: top center; transition: width 160ms ease, transform 160ms ease; }
100
+ .pb-canvas-frame iframe { display: block; width: 100%; height: auto; min-height: 0; border: 0; }
101
+ .pb-canvas-frame [class*="PuckPreview"]:not(iframe) { position: relative; height: auto !important; }
96
102
  .pb-canvas-frame [data-puck-component] { cursor: grab; }
97
103
  .pb-canvas-frame [data-puck-component]:active, .pb-canvas-frame [data-dnd-dragging] { cursor: grabbing; }
98
104
  .pb-canvas-frame [data-puck-disabled] { cursor: pointer; }
@@ -108,9 +114,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
108
114
  .pb-canvas-frame--tablet { width: min(100%, 768px); }
109
115
  .pb-canvas-frame--mobile { width: min(100%, 390px); }
110
116
  .pb-canvas-frame--full { width: 100%; }
111
- .pb-canvas-frame--zoom-50 { zoom: 0.5; }
112
- .pb-canvas-frame--zoom-70 { zoom: 0.7; }
113
- .pb-canvas-frame--zoom-100 { zoom: 1; }
117
+ .pb-canvas-frame--zoom-50, .pb-canvas-frame--zoom-70, .pb-canvas-frame--zoom-100 { transform-origin: top center; }
114
118
  .pb-canvas-overlay { position: absolute; top: var(--builder-space-2); left: 50%; display: flex; gap: var(--builder-space-2); padding: var(--builder-space-1) var(--builder-space-2); border: 2px solid var(--builder-accent); border-radius: var(--builder-control-radius); color: var(--builder-accent); background: var(--builder-surface); font-size: 12px; font-weight: 600; transform: translateX(-50%); box-shadow: var(--builder-canvas-shadow); pointer-events: none; }
115
119
  .pb-canvas-overlay span:last-child { color: var(--builder-text-muted); font-weight: 500; }
116
120
  .pb-collapsed-actions { display: flex; gap: var(--builder-space-2); }
@@ -124,7 +128,7 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
124
128
  .pb-document-block span { font-size: 14px; font-weight: 600; }
125
129
  .pb-document-block small { grid-column: 2; color: var(--builder-text-muted); }
126
130
  .pb-document-block-row { display: flex; align-items: center; gap: var(--builder-space-2); padding: var(--builder-space-2); border: 1px solid transparent; border-radius: var(--builder-panel-radius); background: transparent; }
127
- .pb-document-block-row--library { width: 100%; flex-direction: column; align-items: flex-start; text-align: left; color: var(--builder-text); font: inherit; cursor: grab; }
131
+ .pb-document-block-row--library { width: 100%; flex-direction: column; align-items: flex-start; padding-right: var(--builder-space-2); text-align: left; color: var(--builder-text); font: inherit; cursor: grab; }
128
132
  .pb-document-block-row--library:active { cursor: grabbing; }
129
133
  .pb-document-block-row--library[aria-disabled="true"] { cursor: default; }
130
134
  .pb-document-block-row--dragging { opacity: 0.55; }
@@ -132,8 +136,12 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
132
136
  .pb-document-block-row--drop-after { box-shadow: inset 0 -3px 0 0 var(--builder-accent); }
133
137
  .pb-document-block-row--library[type="button"] { cursor: pointer; }
134
138
  .pb-library-block-title { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--builder-space-2); }
135
- .pb-library-block-drag-hint { display: inline-flex; color: var(--builder-text-muted); pointer-events: none; }
136
- .pb-library-block-drag-hint svg { width: 16px; height: 16px; }
139
+ .pb-library-block-controls { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; margin-right: 0; }
140
+ .pb-library-block-drag-hint { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--builder-text-muted); pointer-events: none; }
141
+ .pb-library-block-drag-hint svg { width: 20px; height: 20px; }
142
+ .pb-library-block-controls .Polaris-Button { min-width: 32px; min-height: 32px; padding: 0; }
143
+ .pb-library-block-controls .Polaris-Button svg { width: 20px; height: 20px; }
144
+ .pb-library-block-controls .Polaris-Button:disabled { color: var(--builder-text-muted); opacity: .55; }
137
145
  .pb-document-block-row:hover { background: var(--builder-surface-subtle); }
138
146
  .pb-document-block-row--selected { border-color: var(--builder-accent); background: var(--builder-accent-subtle); }
139
147
  .pb-editor-status { display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 100dvh; padding: var(--builder-space-6); }