@arkcit/engine-react 0.3.3 → 0.3.5

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 (7) hide show
  1. package/dist/engine.js +58 -11
  2. package/dist/index.js +68 -12
  3. package/dist/materialization.js +44 -10
  4. package/dist/rendering.d.ts +8 -4
  5. package/dist/rendering.js +67 -11
  6. package/dist/static-engine.js +58 -11
  7. package/package.json +4 -4
package/dist/engine.js CHANGED
@@ -73,16 +73,33 @@ import {
73
73
  } from "@arkcit/engine-render-layer";
74
74
 
75
75
  // src/rendering/gridItemWrapperProps.ts
76
- var getGridItemWrapperProps = (colSpan) => ({
77
- className: "w-full min-w-0",
78
- style: {
79
- gridColumn: `span ${colSpan} / span ${colSpan}`
76
+ var GRID_ITEM_RESPONSIVE_STYLE = `
77
+ .arkcit-grid-item-responsive {
78
+ grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
79
+ }
80
+
81
+ @media (min-width: 768px) {
82
+ .arkcit-grid-item-responsive {
83
+ grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
80
84
  }
81
- });
85
+ }
86
+ `;
87
+ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
88
+ const style = {
89
+ "--arkcit-grid-col-base": String(mobileColSpan),
90
+ "--arkcit-grid-col-md": String(colSpan),
91
+ "--arkcit-grid-col-offset-base": String(mobileColOffset),
92
+ "--arkcit-grid-col-offset-md": String(colOffset)
93
+ };
94
+ return {
95
+ className: "w-full min-w-0 arkcit-grid-item-responsive",
96
+ style
97
+ };
98
+ };
82
99
 
83
100
  // src/materialization/materializeChildContent.tsx
84
101
  import React2 from "react";
85
- import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
102
+ import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
86
103
  var materializeChildContent = ({
87
104
  descriptor,
88
105
  renderSafeNode
@@ -92,14 +109,31 @@ var materializeChildContent = ({
92
109
  }
93
110
  const renderDescriptor = (childDescriptor) => {
94
111
  if (childDescriptor.kind === "grid-item") {
95
- return /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
112
+ return /* @__PURE__ */ jsx3(
113
+ "div",
114
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
115
+ childDescriptor.colSpan,
116
+ childDescriptor.mobileColSpan,
117
+ childDescriptor.colOffset,
118
+ childDescriptor.mobileColOffset
119
+ )), {
120
+ children: renderSafeNode(childDescriptor.child)
121
+ }),
122
+ childDescriptor.child.id
123
+ );
96
124
  }
97
125
  return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
98
126
  };
99
127
  if (descriptor.kind === "single") {
100
- return renderDescriptor(descriptor.child);
128
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
129
+ descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
130
+ renderDescriptor(descriptor.child)
131
+ ] });
101
132
  }
102
- return /* @__PURE__ */ jsx3(Fragment, { children: descriptor.children.map(renderDescriptor) });
133
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
134
+ descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
135
+ descriptor.children.map(renderDescriptor)
136
+ ] });
103
137
  };
104
138
 
105
139
  // src/rendering/prepareRenderableChildren.tsx
@@ -117,10 +151,23 @@ var prepareRenderableChildren = ({
117
151
  });
118
152
  const children = resolvedDescriptors.map((descriptor) => {
119
153
  if (descriptor.kind === "grid-item") {
120
- return /* @__PURE__ */ jsx4("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
154
+ return /* @__PURE__ */ jsx4(
155
+ "div",
156
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
157
+ descriptor.colSpan,
158
+ descriptor.mobileColSpan,
159
+ descriptor.colOffset,
160
+ descriptor.mobileColOffset
161
+ )), {
162
+ children: renderSafeNode(descriptor.child)
163
+ }),
164
+ descriptor.child.id
165
+ );
121
166
  }
122
167
  return /* @__PURE__ */ jsx4(React3.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
123
168
  });
169
+ const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
170
+ const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx4("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
124
171
  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
125
172
  childDescriptors: resolvedDescriptors
126
173
  });
@@ -129,7 +176,7 @@ var prepareRenderableChildren = ({
129
176
  renderSafeNode
130
177
  });
131
178
  return {
132
- children,
179
+ children: wrappedChildren,
133
180
  resolvedChildContent,
134
181
  childDescriptors: resolvedDescriptors,
135
182
  childContentDescriptor: resolvedChildContentDescriptor
package/dist/index.js CHANGED
@@ -450,16 +450,33 @@ import {
450
450
  } from "@arkcit/engine-render-layer";
451
451
 
452
452
  // src/rendering/gridItemWrapperProps.ts
453
- var getGridItemWrapperProps = (colSpan) => ({
454
- className: "w-full min-w-0",
455
- style: {
456
- gridColumn: `span ${colSpan} / span ${colSpan}`
453
+ var GRID_ITEM_RESPONSIVE_STYLE = `
454
+ .arkcit-grid-item-responsive {
455
+ grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
456
+ }
457
+
458
+ @media (min-width: 768px) {
459
+ .arkcit-grid-item-responsive {
460
+ grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
457
461
  }
458
- });
462
+ }
463
+ `;
464
+ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
465
+ const style = {
466
+ "--arkcit-grid-col-base": String(mobileColSpan),
467
+ "--arkcit-grid-col-md": String(colSpan),
468
+ "--arkcit-grid-col-offset-base": String(mobileColOffset),
469
+ "--arkcit-grid-col-offset-md": String(colOffset)
470
+ };
471
+ return {
472
+ className: "w-full min-w-0 arkcit-grid-item-responsive",
473
+ style
474
+ };
475
+ };
459
476
 
460
477
  // src/materialization/materializeChildContent.tsx
461
478
  import React5 from "react";
462
- import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
479
+ import { Fragment as Fragment2, jsx as jsx6, jsxs } from "react/jsx-runtime";
463
480
  var materializeChildContent = ({
464
481
  descriptor,
465
482
  renderSafeNode
@@ -469,14 +486,31 @@ var materializeChildContent = ({
469
486
  }
470
487
  const renderDescriptor = (childDescriptor) => {
471
488
  if (childDescriptor.kind === "grid-item") {
472
- return /* @__PURE__ */ jsx6("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
489
+ return /* @__PURE__ */ jsx6(
490
+ "div",
491
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
492
+ childDescriptor.colSpan,
493
+ childDescriptor.mobileColSpan,
494
+ childDescriptor.colOffset,
495
+ childDescriptor.mobileColOffset
496
+ )), {
497
+ children: renderSafeNode(childDescriptor.child)
498
+ }),
499
+ childDescriptor.child.id
500
+ );
473
501
  }
474
502
  return /* @__PURE__ */ jsx6(React5.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
475
503
  };
476
504
  if (descriptor.kind === "single") {
477
- return renderDescriptor(descriptor.child);
505
+ return /* @__PURE__ */ jsxs(Fragment2, { children: [
506
+ descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx6("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
507
+ renderDescriptor(descriptor.child)
508
+ ] });
478
509
  }
479
- return /* @__PURE__ */ jsx6(Fragment2, { children: descriptor.children.map(renderDescriptor) });
510
+ return /* @__PURE__ */ jsxs(Fragment2, { children: [
511
+ descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx6("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
512
+ descriptor.children.map(renderDescriptor)
513
+ ] });
480
514
  };
481
515
 
482
516
  // src/rendering/prepareRenderableChildren.tsx
@@ -494,10 +528,23 @@ var prepareRenderableChildren = ({
494
528
  });
495
529
  const children = resolvedDescriptors.map((descriptor) => {
496
530
  if (descriptor.kind === "grid-item") {
497
- return /* @__PURE__ */ jsx7("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
531
+ return /* @__PURE__ */ jsx7(
532
+ "div",
533
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
534
+ descriptor.colSpan,
535
+ descriptor.mobileColSpan,
536
+ descriptor.colOffset,
537
+ descriptor.mobileColOffset
538
+ )), {
539
+ children: renderSafeNode(descriptor.child)
540
+ }),
541
+ descriptor.child.id
542
+ );
498
543
  }
499
544
  return /* @__PURE__ */ jsx7(React6.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
500
545
  });
546
+ const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
547
+ const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx7("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
501
548
  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
502
549
  childDescriptors: resolvedDescriptors
503
550
  });
@@ -506,7 +553,7 @@ var prepareRenderableChildren = ({
506
553
  renderSafeNode
507
554
  });
508
555
  return {
509
- children,
556
+ children: wrappedChildren,
510
557
  resolvedChildContent,
511
558
  childDescriptors: resolvedDescriptors,
512
559
  childContentDescriptor: resolvedChildContentDescriptor
@@ -1078,7 +1125,7 @@ var buildCoverMedia = ({
1078
1125
  {
1079
1126
  src: mediaSrc,
1080
1127
  alt: mediaAlt || "Cover media",
1081
- className: "h-full w-full object-cover"
1128
+ className: "h-full w-full object-contain"
1082
1129
  }
1083
1130
  ) });
1084
1131
  }
@@ -1294,6 +1341,11 @@ var configurePreviewLinkBehavior = (componentProps) => {
1294
1341
  };
1295
1342
 
1296
1343
  // src/rendering/finalizeRenderedNode.tsx
1344
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
1345
+ var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
1346
+ var hasExplicitStudioSizing = (studioSizing) => Boolean(
1347
+ studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
1348
+ );
1297
1349
  var finalizeRenderedNode = ({
1298
1350
  node,
1299
1351
  children,
@@ -1305,6 +1357,10 @@ var finalizeRenderedNode = ({
1305
1357
  plans: providedPlans,
1306
1358
  dependencies
1307
1359
  }) => {
1360
+ if (RESPONSIVE_MEDIA_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
1361
+ const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
1362
+ componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
1363
+ }
1308
1364
  const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
1309
1365
  node,
1310
1366
  componentProps,
package/dist/materialization.js CHANGED
@@ -34,7 +34,7 @@ var buildCoverMedia = ({
34
34
  {
35
35
  src: mediaSrc,
36
36
  alt: mediaAlt || "Cover media",
37
- className: "h-full w-full object-cover"
37
+ className: "h-full w-full object-contain"
38
38
  }
39
39
  ) });
40
40
  }
@@ -221,15 +221,32 @@ var materializeBoundTable = ({
221
221
  import React3 from "react";
222
222
 
223
223
  // src/rendering/gridItemWrapperProps.ts
224
- var getGridItemWrapperProps = (colSpan) => ({
225
- className: "w-full min-w-0",
226
- style: {
227
- gridColumn: `span ${colSpan} / span ${colSpan}`
224
+ var GRID_ITEM_RESPONSIVE_STYLE = `
225
+ .arkcit-grid-item-responsive {
226
+ grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
227
+ }
228
+
229
+ @media (min-width: 768px) {
230
+ .arkcit-grid-item-responsive {
231
+ grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
228
232
  }
229
- });
233
+ }
234
+ `;
235
+ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
236
+ const style = {
237
+ "--arkcit-grid-col-base": String(mobileColSpan),
238
+ "--arkcit-grid-col-md": String(colSpan),
239
+ "--arkcit-grid-col-offset-base": String(mobileColOffset),
240
+ "--arkcit-grid-col-offset-md": String(colOffset)
241
+ };
242
+ return {
243
+ className: "w-full min-w-0 arkcit-grid-item-responsive",
244
+ style
245
+ };
246
+ };
230
247
 
231
248
  // src/materialization/materializeChildContent.tsx
232
- import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
249
+ import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
233
250
  var materializeChildContent = ({
234
251
  descriptor,
235
252
  renderSafeNode
@@ -239,14 +256,31 @@ var materializeChildContent = ({
239
256
  }
240
257
  const renderDescriptor = (childDescriptor) => {
241
258
  if (childDescriptor.kind === "grid-item") {
242
- return /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
259
+ return /* @__PURE__ */ jsx2(
260
+ "div",
261
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
262
+ childDescriptor.colSpan,
263
+ childDescriptor.mobileColSpan,
264
+ childDescriptor.colOffset,
265
+ childDescriptor.mobileColOffset
266
+ )), {
267
+ children: renderSafeNode(childDescriptor.child)
268
+ }),
269
+ childDescriptor.child.id
270
+ );
243
271
  }
244
272
  return /* @__PURE__ */ jsx2(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
245
273
  };
246
274
  if (descriptor.kind === "single") {
247
- return renderDescriptor(descriptor.child);
275
+ return /* @__PURE__ */ jsxs(Fragment2, { children: [
276
+ descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
277
+ renderDescriptor(descriptor.child)
278
+ ] });
248
279
  }
249
- return /* @__PURE__ */ jsx2(Fragment2, { children: descriptor.children.map(renderDescriptor) });
280
+ return /* @__PURE__ */ jsxs(Fragment2, { children: [
281
+ descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
282
+ descriptor.children.map(renderDescriptor)
283
+ ] });
250
284
  };
251
285
 
252
286
  // src/materialization/materializeCoverContent.tsx
package/dist/rendering.d.ts CHANGED
@@ -35,11 +35,15 @@ type FinalizeRenderedNodeParams = {
35
35
  };
36
36
  declare const finalizeRenderedNode: ({ node, children, componentProps, registryComponent, runtime, isStudioRendererContext, studioSizing, plans: providedPlans, dependencies, }: FinalizeRenderedNodeParams) => React__default.ReactNode | null;
37
37
 
38
- declare const getGridItemWrapperProps: (colSpan: number) => {
38
+ type GridItemWrapperStyle = React__default.CSSProperties & {
39
+ "--arkcit-grid-col-base": string;
40
+ "--arkcit-grid-col-md": string;
41
+ "--arkcit-grid-col-offset-base": string;
42
+ "--arkcit-grid-col-offset-md": string;
43
+ };
44
+ declare const getGridItemWrapperProps: (colSpan: number, mobileColSpan?: number, colOffset?: number, mobileColOffset?: number) => {
39
45
  className: string;
40
- style: {
41
- gridColumn: string;
42
- };
46
+ style: GridItemWrapperStyle;
43
47
  };
44
48
 
45
49
  declare const buildNodeResetToken: (node: UINode) => string;
package/dist/rendering.js CHANGED
@@ -174,6 +174,11 @@ var materializeBoundTable = ({
174
174
  };
175
175
 
176
176
  // src/rendering/finalizeRenderedNode.tsx
177
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
178
+ var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
179
+ var hasExplicitStudioSizing = (studioSizing) => Boolean(
180
+ studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
181
+ );
177
182
  var finalizeRenderedNode = ({
178
183
  node,
179
184
  children,
@@ -185,6 +190,10 @@ var finalizeRenderedNode = ({
185
190
  plans: providedPlans,
186
191
  dependencies
187
192
  }) => {
193
+ if (RESPONSIVE_MEDIA_NODE_TYPES.has(node.type) && hasExplicitStudioSizing(studioSizing)) {
194
+ const currentClassName = typeof componentProps.className === "string" ? componentProps.className : "";
195
+ componentProps.className = [currentClassName, RESPONSIVE_MEDIA_CLASS_NAME].filter(Boolean).join(" ");
196
+ }
188
197
  const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
189
198
  node,
190
199
  componentProps,
@@ -230,12 +239,29 @@ var finalizeRenderedNode = ({
230
239
  };
231
240
 
232
241
  // src/rendering/gridItemWrapperProps.ts
233
- var getGridItemWrapperProps = (colSpan) => ({
234
- className: "w-full min-w-0",
235
- style: {
236
- gridColumn: `span ${colSpan} / span ${colSpan}`
242
+ var GRID_ITEM_RESPONSIVE_STYLE = `
243
+ .arkcit-grid-item-responsive {
244
+ grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
245
+ }
246
+
247
+ @media (min-width: 768px) {
248
+ .arkcit-grid-item-responsive {
249
+ grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
237
250
  }
238
- });
251
+ }
252
+ `;
253
+ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
254
+ const style = {
255
+ "--arkcit-grid-col-base": String(mobileColSpan),
256
+ "--arkcit-grid-col-md": String(colSpan),
257
+ "--arkcit-grid-col-offset-base": String(mobileColOffset),
258
+ "--arkcit-grid-col-offset-md": String(colOffset)
259
+ };
260
+ return {
261
+ className: "w-full min-w-0 arkcit-grid-item-responsive",
262
+ style
263
+ };
264
+ };
239
265
 
240
266
  // src/rendering/nodeResetToken.ts
241
267
  import { isValidElement } from "react";
@@ -274,7 +300,7 @@ import {
274
300
 
275
301
  // src/materialization/materializeChildContent.tsx
276
302
  import React3 from "react";
277
- import { Fragment, jsx } from "react/jsx-runtime";
303
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
278
304
  var materializeChildContent = ({
279
305
  descriptor,
280
306
  renderSafeNode
@@ -284,14 +310,31 @@ var materializeChildContent = ({
284
310
  }
285
311
  const renderDescriptor = (childDescriptor) => {
286
312
  if (childDescriptor.kind === "grid-item") {
287
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
313
+ return /* @__PURE__ */ jsx(
314
+ "div",
315
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
316
+ childDescriptor.colSpan,
317
+ childDescriptor.mobileColSpan,
318
+ childDescriptor.colOffset,
319
+ childDescriptor.mobileColOffset
320
+ )), {
321
+ children: renderSafeNode(childDescriptor.child)
322
+ }),
323
+ childDescriptor.child.id
324
+ );
288
325
  }
289
326
  return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
290
327
  };
291
328
  if (descriptor.kind === "single") {
292
- return renderDescriptor(descriptor.child);
329
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
330
+ descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
331
+ renderDescriptor(descriptor.child)
332
+ ] });
293
333
  }
294
- return /* @__PURE__ */ jsx(Fragment, { children: descriptor.children.map(renderDescriptor) });
334
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
335
+ descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
336
+ descriptor.children.map(renderDescriptor)
337
+ ] });
295
338
  };
296
339
 
297
340
  // src/rendering/prepareRenderableChildren.tsx
@@ -309,10 +352,23 @@ var prepareRenderableChildren = ({
309
352
  });
310
353
  const children = resolvedDescriptors.map((descriptor) => {
311
354
  if (descriptor.kind === "grid-item") {
312
- return /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
355
+ return /* @__PURE__ */ jsx2(
356
+ "div",
357
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
358
+ descriptor.colSpan,
359
+ descriptor.mobileColSpan,
360
+ descriptor.colOffset,
361
+ descriptor.mobileColOffset
362
+ )), {
363
+ children: renderSafeNode(descriptor.child)
364
+ }),
365
+ descriptor.child.id
366
+ );
313
367
  }
314
368
  return /* @__PURE__ */ jsx2(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
315
369
  });
370
+ const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
371
+ const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
316
372
  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
317
373
  childDescriptors: resolvedDescriptors
318
374
  });
@@ -321,7 +377,7 @@ var prepareRenderableChildren = ({
321
377
  renderSafeNode
322
378
  });
323
379
  return {
324
- children,
380
+ children: wrappedChildren,
325
381
  resolvedChildContent,
326
382
  childDescriptors: resolvedDescriptors,
327
383
  childContentDescriptor: resolvedChildContentDescriptor
package/dist/static-engine.js CHANGED
@@ -46,16 +46,33 @@ import {
46
46
  } from "@arkcit/engine-render-layer";
47
47
 
48
48
  // src/rendering/gridItemWrapperProps.ts
49
- var getGridItemWrapperProps = (colSpan) => ({
50
- className: "w-full min-w-0",
51
- style: {
52
- gridColumn: `span ${colSpan} / span ${colSpan}`
49
+ var GRID_ITEM_RESPONSIVE_STYLE = `
50
+ .arkcit-grid-item-responsive {
51
+ grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
52
+ }
53
+
54
+ @media (min-width: 768px) {
55
+ .arkcit-grid-item-responsive {
56
+ grid-column: calc(var(--arkcit-grid-col-offset-md, var(--arkcit-grid-col-offset-base, 0)) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
53
57
  }
54
- });
58
+ }
59
+ `;
60
+ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobileColOffset = 0) => {
61
+ const style = {
62
+ "--arkcit-grid-col-base": String(mobileColSpan),
63
+ "--arkcit-grid-col-md": String(colSpan),
64
+ "--arkcit-grid-col-offset-base": String(mobileColOffset),
65
+ "--arkcit-grid-col-offset-md": String(colOffset)
66
+ };
67
+ return {
68
+ className: "w-full min-w-0 arkcit-grid-item-responsive",
69
+ style
70
+ };
71
+ };
55
72
 
56
73
  // src/materialization/materializeChildContent.tsx
57
74
  import React from "react";
58
- import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
75
+ import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
59
76
  var materializeChildContent = ({
60
77
  descriptor,
61
78
  renderSafeNode
@@ -65,14 +82,31 @@ var materializeChildContent = ({
65
82
  }
66
83
  const renderDescriptor = (childDescriptor) => {
67
84
  if (childDescriptor.kind === "grid-item") {
68
- return /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
85
+ return /* @__PURE__ */ jsx2(
86
+ "div",
87
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
88
+ childDescriptor.colSpan,
89
+ childDescriptor.mobileColSpan,
90
+ childDescriptor.colOffset,
91
+ childDescriptor.mobileColOffset
92
+ )), {
93
+ children: renderSafeNode(childDescriptor.child)
94
+ }),
95
+ childDescriptor.child.id
96
+ );
69
97
  }
70
98
  return /* @__PURE__ */ jsx2(React.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
71
99
  };
72
100
  if (descriptor.kind === "single") {
73
- return renderDescriptor(descriptor.child);
101
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
102
+ descriptor.child.kind === "grid-item" ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
103
+ renderDescriptor(descriptor.child)
104
+ ] });
74
105
  }
75
- return /* @__PURE__ */ jsx2(Fragment, { children: descriptor.children.map(renderDescriptor) });
106
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
107
+ descriptor.children.some((child) => child.kind === "grid-item") ? /* @__PURE__ */ jsx2("style", { children: GRID_ITEM_RESPONSIVE_STYLE }) : null,
108
+ descriptor.children.map(renderDescriptor)
109
+ ] });
76
110
  };
77
111
 
78
112
  // src/rendering/prepareRenderableChildren.tsx
@@ -90,10 +124,23 @@ var prepareRenderableChildren = ({
90
124
  });
91
125
  const children = resolvedDescriptors.map((descriptor) => {
92
126
  if (descriptor.kind === "grid-item") {
93
- return /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
127
+ return /* @__PURE__ */ jsx3(
128
+ "div",
129
+ __spreadProps(__spreadValues({}, getGridItemWrapperProps(
130
+ descriptor.colSpan,
131
+ descriptor.mobileColSpan,
132
+ descriptor.colOffset,
133
+ descriptor.mobileColOffset
134
+ )), {
135
+ children: renderSafeNode(descriptor.child)
136
+ }),
137
+ descriptor.child.id
138
+ );
94
139
  }
95
140
  return /* @__PURE__ */ jsx3(React2.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
96
141
  });
142
+ const hasGridItems = resolvedDescriptors.some((descriptor) => descriptor.kind === "grid-item");
143
+ const wrappedChildren = hasGridItems ? [/* @__PURE__ */ jsx3("style", { children: GRID_ITEM_RESPONSIVE_STYLE }, "arkcit-grid-item-responsive-style"), ...children] : children;
97
144
  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
98
145
  childDescriptors: resolvedDescriptors
99
146
  });
@@ -102,7 +149,7 @@ var prepareRenderableChildren = ({
102
149
  renderSafeNode
103
150
  });
104
151
  return {
105
- children,
152
+ children: wrappedChildren,
106
153
  resolvedChildContent,
107
154
  childDescriptors: resolvedDescriptors,
108
155
  childContentDescriptor: resolvedChildContentDescriptor
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arkcit/engine-react",
3
3
  "private": false,
4
- "version": "0.3.3",
4
+ "version": "0.3.5",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "description": "React-specific renderer package for the Arkcit engine platform.",
@@ -75,10 +75,10 @@
75
75
  "test": "npm run test:smoke && npm run test:unit"
76
76
  },
77
77
  "dependencies": {
78
- "@arkcit/engine-core": "^0.3.1",
79
- "@arkcit/engine-render-layer": "^0.3.1",
78
+ "@arkcit/engine-core": "^0.3.2",
79
+ "@arkcit/engine-render-layer": "^0.3.2",
80
80
  "@arkcit/engine-runtime": "^0.3.1",
81
- "@arkcit/engine-schema": "^0.3.1"
81
+ "@arkcit/engine-schema": "^0.3.2"
82
82
  },
83
83
  "peerDependencies": {
84
84
  "react": "^19.1.0",