@arkcit/engine-react 0.3.4 → 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 +59 -12
  3. package/dist/materialization.js +44 -10
  4. package/dist/rendering.d.ts +8 -4
  5. package/dist/rendering.js +58 -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
  }
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
@@ -239,12 +239,29 @@ var finalizeRenderedNode = ({
239
239
  };
240
240
 
241
241
  // src/rendering/gridItemWrapperProps.ts
242
- var getGridItemWrapperProps = (colSpan) => ({
243
- className: "w-full min-w-0",
244
- style: {
245
- 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));
246
250
  }
247
- });
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
+ };
248
265
 
249
266
  // src/rendering/nodeResetToken.ts
250
267
  import { isValidElement } from "react";
@@ -283,7 +300,7 @@ import {
283
300
 
284
301
  // src/materialization/materializeChildContent.tsx
285
302
  import React3 from "react";
286
- import { Fragment, jsx } from "react/jsx-runtime";
303
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
287
304
  var materializeChildContent = ({
288
305
  descriptor,
289
306
  renderSafeNode
@@ -293,14 +310,31 @@ var materializeChildContent = ({
293
310
  }
294
311
  const renderDescriptor = (childDescriptor) => {
295
312
  if (childDescriptor.kind === "grid-item") {
296
- 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
+ );
297
325
  }
298
326
  return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
299
327
  };
300
328
  if (descriptor.kind === "single") {
301
- 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
+ ] });
302
333
  }
303
- 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
+ ] });
304
338
  };
305
339
 
306
340
  // src/rendering/prepareRenderableChildren.tsx
@@ -318,10 +352,23 @@ var prepareRenderableChildren = ({
318
352
  });
319
353
  const children = resolvedDescriptors.map((descriptor) => {
320
354
  if (descriptor.kind === "grid-item") {
321
- 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
+ );
322
367
  }
323
368
  return /* @__PURE__ */ jsx2(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
324
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;
325
372
  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
326
373
  childDescriptors: resolvedDescriptors
327
374
  });
@@ -330,7 +377,7 @@ var prepareRenderableChildren = ({
330
377
  renderSafeNode
331
378
  });
332
379
  return {
333
- children,
380
+ children: wrappedChildren,
334
381
  resolvedChildContent,
335
382
  childDescriptors: resolvedDescriptors,
336
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.4",
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",