@arkcit/engine-react 0.3.5 → 0.3.6

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/engine.js +14 -2
  2. package/dist/index.js +19 -8
  3. package/dist/materialization.js +18 -7
  4. package/dist/rendering.js +15 -3
  5. package/dist/static-engine.js +14 -2
  6. package/package.json +1 -1
package/dist/engine.js CHANGED
@@ -75,12 +75,20 @@ import {
75
75
  // src/rendering/gridItemWrapperProps.ts
76
76
  var GRID_ITEM_RESPONSIVE_STYLE = `
77
77
  .arkcit-grid-item-responsive {
78
+ grid-column: span var(--arkcit-grid-col-base, 12);
79
+ }
80
+
81
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
78
82
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
79
83
  }
80
84
 
81
85
  @media (min-width: 768px) {
82
86
  .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));
87
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
88
+ }
89
+
90
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
91
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
84
92
  }
85
93
  }
86
94
  `;
@@ -92,7 +100,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
92
100
  "--arkcit-grid-col-offset-md": String(colOffset)
93
101
  };
94
102
  return {
95
- className: "w-full min-w-0 arkcit-grid-item-responsive",
103
+ className: [
104
+ "w-full min-w-0 arkcit-grid-item-responsive",
105
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
106
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
107
+ ].filter(Boolean).join(" "),
96
108
  style
97
109
  };
98
110
  };
package/dist/index.js CHANGED
@@ -452,12 +452,20 @@ import {
452
452
  // src/rendering/gridItemWrapperProps.ts
453
453
  var GRID_ITEM_RESPONSIVE_STYLE = `
454
454
  .arkcit-grid-item-responsive {
455
+ grid-column: span var(--arkcit-grid-col-base, 12);
456
+ }
457
+
458
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
455
459
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
456
460
  }
457
461
 
458
462
  @media (min-width: 768px) {
459
463
  .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));
464
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
465
+ }
466
+
467
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
468
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
461
469
  }
462
470
  }
463
471
  `;
@@ -469,7 +477,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
469
477
  "--arkcit-grid-col-offset-md": String(colOffset)
470
478
  };
471
479
  return {
472
- className: "w-full min-w-0 arkcit-grid-item-responsive",
480
+ className: [
481
+ "w-full min-w-0 arkcit-grid-item-responsive",
482
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
483
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
484
+ ].filter(Boolean).join(" "),
473
485
  style
474
486
  };
475
487
  };
@@ -1112,7 +1124,6 @@ var useUIEngineEffects = ({
1112
1124
  // src/materialization/contentStudio.tsx
1113
1125
  import React9 from "react";
1114
1126
  import { Fragment as Fragment3, jsx as jsx11 } from "react/jsx-runtime";
1115
- var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
1116
1127
  var buildCoverMedia = ({
1117
1128
  mediaSource,
1118
1129
  mediaSrc,
@@ -1120,21 +1131,21 @@ var buildCoverMedia = ({
1120
1131
  }) => {
1121
1132
  if (mediaSource === "none") return void 0;
1122
1133
  if (mediaSource === "image" && mediaSrc) {
1123
- return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
1134
+ return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
1124
1135
  "img",
1125
1136
  {
1126
1137
  src: mediaSrc,
1127
1138
  alt: mediaAlt || "Cover media",
1128
- className: "h-full w-full object-contain"
1139
+ className: "block h-full w-full object-cover"
1129
1140
  }
1130
1141
  ) });
1131
1142
  }
1132
1143
  if (mediaSource === "video" && mediaSrc) {
1133
- return /* @__PURE__ */ jsx11("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx11(
1144
+ return /* @__PURE__ */ jsx11("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx11(
1134
1145
  "video",
1135
1146
  {
1136
1147
  src: mediaSrc,
1137
- className: "h-full w-full object-cover",
1148
+ className: "block h-full w-full object-cover",
1138
1149
  controls: true,
1139
1150
  preload: "metadata"
1140
1151
  }
@@ -1341,7 +1352,7 @@ var configurePreviewLinkBehavior = (componentProps) => {
1341
1352
  };
1342
1353
 
1343
1354
  // src/rendering/finalizeRenderedNode.tsx
1344
- var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover"]);
1355
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
1345
1356
  var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
1346
1357
  var hasExplicitStudioSizing = (studioSizing) => Boolean(
1347
1358
  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
package/dist/materialization.js CHANGED
@@ -21,7 +21,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
21
  // src/materialization/contentStudio.tsx
22
22
  import React from "react";
23
23
  import { Fragment, jsx } from "react/jsx-runtime";
24
- var COVER_MEDIA_FRAME_CLASSNAME = "h-56 w-full overflow-hidden rounded-xl bg-surface ring-1 ring-border/60";
25
24
  var buildCoverMedia = ({
26
25
  mediaSource,
27
26
  mediaSrc,
@@ -29,21 +28,21 @@ var buildCoverMedia = ({
29
28
  }) => {
30
29
  if (mediaSource === "none") return void 0;
31
30
  if (mediaSource === "image" && mediaSrc) {
32
- return /* @__PURE__ */ jsx("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx(
31
+ return /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx(
33
32
  "img",
34
33
  {
35
34
  src: mediaSrc,
36
35
  alt: mediaAlt || "Cover media",
37
- className: "h-full w-full object-contain"
36
+ className: "block h-full w-full object-cover"
38
37
  }
39
38
  ) });
40
39
  }
41
40
  if (mediaSource === "video" && mediaSrc) {
42
- return /* @__PURE__ */ jsx("div", { className: COVER_MEDIA_FRAME_CLASSNAME, children: /* @__PURE__ */ jsx(
41
+ return /* @__PURE__ */ jsx("div", { className: "h-full w-full bg-transparent", children: /* @__PURE__ */ jsx(
43
42
  "video",
44
43
  {
45
44
  src: mediaSrc,
46
- className: "h-full w-full object-cover",
45
+ className: "block h-full w-full object-cover",
47
46
  controls: true,
48
47
  preload: "metadata"
49
48
  }
@@ -223,12 +222,20 @@ import React3 from "react";
223
222
  // src/rendering/gridItemWrapperProps.ts
224
223
  var GRID_ITEM_RESPONSIVE_STYLE = `
225
224
  .arkcit-grid-item-responsive {
225
+ grid-column: span var(--arkcit-grid-col-base, 12);
226
+ }
227
+
228
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
226
229
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
227
230
  }
228
231
 
229
232
  @media (min-width: 768px) {
230
233
  .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));
234
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
235
+ }
236
+
237
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
238
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
232
239
  }
233
240
  }
234
241
  `;
@@ -240,7 +247,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
240
247
  "--arkcit-grid-col-offset-md": String(colOffset)
241
248
  };
242
249
  return {
243
- className: "w-full min-w-0 arkcit-grid-item-responsive",
250
+ className: [
251
+ "w-full min-w-0 arkcit-grid-item-responsive",
252
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
253
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
254
+ ].filter(Boolean).join(" "),
244
255
  style
245
256
  };
246
257
  };
package/dist/rendering.js CHANGED
@@ -174,7 +174,7 @@ 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"]);
177
+ var RESPONSIVE_MEDIA_NODE_TYPES = /* @__PURE__ */ new Set(["Image", "Video", "EmbeddedVideo", "Cover", "Document"]);
178
178
  var RESPONSIVE_MEDIA_CLASS_NAME = "max-md:!w-full max-md:![flex-basis:100%!important] max-md:!h-auto";
179
179
  var hasExplicitStudioSizing = (studioSizing) => Boolean(
180
180
  studioSizing && (studioSizing.widthPct !== null || studioSizing.heightPct !== null || studioSizing.heightPx !== null)
@@ -241,12 +241,20 @@ var finalizeRenderedNode = ({
241
241
  // src/rendering/gridItemWrapperProps.ts
242
242
  var GRID_ITEM_RESPONSIVE_STYLE = `
243
243
  .arkcit-grid-item-responsive {
244
+ grid-column: span var(--arkcit-grid-col-base, 12);
245
+ }
246
+
247
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
244
248
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
245
249
  }
246
250
 
247
251
  @media (min-width: 768px) {
248
252
  .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));
253
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
254
+ }
255
+
256
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
257
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
250
258
  }
251
259
  }
252
260
  `;
@@ -258,7 +266,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
258
266
  "--arkcit-grid-col-offset-md": String(colOffset)
259
267
  };
260
268
  return {
261
- className: "w-full min-w-0 arkcit-grid-item-responsive",
269
+ className: [
270
+ "w-full min-w-0 arkcit-grid-item-responsive",
271
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
272
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
273
+ ].filter(Boolean).join(" "),
262
274
  style
263
275
  };
264
276
  };
package/dist/static-engine.js CHANGED
@@ -48,12 +48,20 @@ import {
48
48
  // src/rendering/gridItemWrapperProps.ts
49
49
  var GRID_ITEM_RESPONSIVE_STYLE = `
50
50
  .arkcit-grid-item-responsive {
51
+ grid-column: span var(--arkcit-grid-col-base, 12);
52
+ }
53
+
54
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-base {
51
55
  grid-column: calc(var(--arkcit-grid-col-offset-base, 0) + 1) / span var(--arkcit-grid-col-base, 12);
52
56
  }
53
57
 
54
58
  @media (min-width: 768px) {
55
59
  .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));
60
+ grid-column: span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
61
+ }
62
+
63
+ .arkcit-grid-item-responsive.arkcit-grid-item-offset-md {
64
+ grid-column: calc(var(--arkcit-grid-col-offset-md, 0) + 1) / span var(--arkcit-grid-col-md, var(--arkcit-grid-col-base, 12));
57
65
  }
58
66
  }
59
67
  `;
@@ -65,7 +73,11 @@ var getGridItemWrapperProps = (colSpan, mobileColSpan = 12, colOffset = 0, mobil
65
73
  "--arkcit-grid-col-offset-md": String(colOffset)
66
74
  };
67
75
  return {
68
- className: "w-full min-w-0 arkcit-grid-item-responsive",
76
+ className: [
77
+ "w-full min-w-0 arkcit-grid-item-responsive",
78
+ mobileColOffset > 0 ? "arkcit-grid-item-offset-base" : "",
79
+ colOffset > 0 ? "arkcit-grid-item-offset-md" : ""
80
+ ].filter(Boolean).join(" "),
69
81
  style
70
82
  };
71
83
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arkcit/engine-react",
3
3
  "private": false,
4
- "version": "0.3.5",
4
+ "version": "0.3.6",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "description": "React-specific renderer package for the Arkcit engine platform.",