@orion-studios/payload-studio 0.6.0-beta.16 → 0.6.0-beta.160

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 (38) hide show
  1. package/dist/admin/client.js +2056 -543
  2. package/dist/admin/client.mjs +2101 -601
  3. package/dist/admin/index.js +124 -15
  4. package/dist/admin/index.mjs +2 -2
  5. package/dist/admin-app/client.js +14 -5
  6. package/dist/admin-app/client.mjs +1 -1
  7. package/dist/admin-app/styles.css +257 -0
  8. package/dist/admin.css +80 -0
  9. package/dist/builder-v2/client.d.mts +18 -0
  10. package/dist/builder-v2/client.d.ts +18 -0
  11. package/dist/builder-v2/client.js +4109 -0
  12. package/dist/builder-v2/client.mjs +3984 -0
  13. package/dist/builder-v2/index.d.mts +249 -0
  14. package/dist/builder-v2/index.d.ts +249 -0
  15. package/dist/builder-v2/index.js +805 -0
  16. package/dist/builder-v2/index.mjs +755 -0
  17. package/dist/builder-v2/styles.css +2693 -0
  18. package/dist/{chunk-XKUTZ7IU.mjs → chunk-276KAPGM.mjs} +56 -5
  19. package/dist/{chunk-PF3EBZXF.mjs → chunk-7ZMXZRBP.mjs} +39 -3
  20. package/dist/{chunk-XZQILJK3.mjs → chunk-KHK6RTGC.mjs} +127 -18
  21. package/dist/{chunk-KPIX7OSV.mjs → chunk-NF37A575.mjs} +14 -5
  22. package/dist/{chunk-OTHERBGX.mjs → chunk-ZADL33R6.mjs} +1 -1
  23. package/dist/{index-Cv-6qnrw.d.mts → index-D5zrOdyv.d.mts} +3 -1
  24. package/dist/{index-Crx_MtPw.d.ts → index-Dv-Alx4h.d.ts} +3 -1
  25. package/dist/index.d.mts +1 -1
  26. package/dist/index.d.ts +1 -1
  27. package/dist/index.js +215 -19
  28. package/dist/index.mjs +10 -10
  29. package/dist/nextjs/index.js +39 -3
  30. package/dist/nextjs/index.mjs +2 -2
  31. package/dist/studio-pages/builder.css +66 -5
  32. package/dist/studio-pages/client.js +618 -73
  33. package/dist/studio-pages/client.mjs +641 -96
  34. package/dist/studio-pages/index.d.mts +1 -1
  35. package/dist/studio-pages/index.d.ts +1 -1
  36. package/dist/studio-pages/index.js +91 -4
  37. package/dist/studio-pages/index.mjs +3 -3
  38. package/package.json +22 -3
@@ -323,6 +323,49 @@ function configureAdmin(config) {
323
323
  }
324
324
  };
325
325
  };
326
+ const attachStudioEditRedirectToCollection = (collection, options) => {
327
+ if (!studioEnabled) {
328
+ return collection;
329
+ }
330
+ const collectionWithBreadcrumb = attachStudioBackBreadcrumbToCollection(collection);
331
+ const existingViews = collectionWithBreadcrumb.admin?.components?.views;
332
+ const existingEditViews = existingViews?.edit;
333
+ const hasCustomEditView = Boolean(
334
+ existingEditViews?.root || existingEditViews?.default && typeof existingEditViews.default === "object" && existingEditViews.default.Component
335
+ );
336
+ if (hasCustomEditView) {
337
+ return collectionWithBreadcrumb;
338
+ }
339
+ return {
340
+ ...collectionWithBreadcrumb,
341
+ admin: {
342
+ ...collectionWithBreadcrumb.admin,
343
+ components: {
344
+ ...collectionWithBreadcrumb.admin?.components,
345
+ views: {
346
+ ...existingViews,
347
+ edit: {
348
+ ...existingEditViews,
349
+ default: {
350
+ ...typeof existingEditViews?.default === "object" ? existingEditViews.default : {},
351
+ Component: {
352
+ exportName: "StudioDocumentRedirect",
353
+ path: clientPath,
354
+ clientProps: {
355
+ description: options.description,
356
+ ...options.emptyHref ? { emptyHref: options.emptyHref } : {},
357
+ ...options.emptyLabel ? { emptyLabel: options.emptyLabel } : {},
358
+ pathBase: options.pathBase,
359
+ title: options.title
360
+ }
361
+ }
362
+ }
363
+ }
364
+ }
365
+ }
366
+ }
367
+ };
368
+ };
326
369
  return {
327
370
  admin: {
328
371
  css: cssPath,
@@ -364,6 +407,7 @@ function configureAdmin(config) {
364
407
  },
365
408
  ...studioEnabled ? {
366
409
  studioGlobals: {
410
+ exact: true,
367
411
  path: globalsBasePath,
368
412
  Component: {
369
413
  exportName: "AdminStudioGlobalsView",
@@ -375,10 +419,11 @@ function configureAdmin(config) {
375
419
  }
376
420
  }
377
421
  },
378
- studioPages: {
379
- path: pagesBasePath,
422
+ studioPageNew: {
423
+ exact: true,
424
+ path: `${pagesBasePath}/new`,
380
425
  Component: {
381
- exportName: "AdminStudioPagesListView",
426
+ exportName: "AdminStudioNewPageView",
382
427
  path: clientPath,
383
428
  clientProps: {
384
429
  ...studioNavClientProps,
@@ -387,6 +432,7 @@ function configureAdmin(config) {
387
432
  }
388
433
  },
389
434
  studioPageEditor: {
435
+ exact: true,
390
436
  path: `${pagesBasePath}/:id`,
391
437
  Component: {
392
438
  exportName: "AdminStudioPageEditView",
@@ -397,10 +443,11 @@ function configureAdmin(config) {
397
443
  }
398
444
  }
399
445
  },
400
- studioPageNew: {
401
- path: `${pagesBasePath}/new`,
446
+ studioPages: {
447
+ exact: true,
448
+ path: pagesBasePath,
402
449
  Component: {
403
- exportName: "AdminStudioNewPageView",
450
+ exportName: "AdminStudioPagesListView",
404
451
  path: clientPath,
405
452
  clientProps: {
406
453
  ...studioNavClientProps,
@@ -409,6 +456,7 @@ function configureAdmin(config) {
409
456
  }
410
457
  },
411
458
  studioContactForm: {
459
+ exact: true,
412
460
  path: contactFormStudioPath,
413
461
  Component: {
414
462
  exportName: "AdminStudioContactFormView",
@@ -421,7 +469,47 @@ function configureAdmin(config) {
421
469
  }
422
470
  },
423
471
  ...formsEnabled ? {
472
+ studioFormSubmission: {
473
+ exact: true,
474
+ path: `${formsBasePath}/submissions/:id`,
475
+ Component: {
476
+ exportName: "AdminStudioFormSubmissionView",
477
+ path: clientPath,
478
+ clientProps: {
479
+ ...studioNavClientProps,
480
+ formsCollectionSlug,
481
+ formSubmissionsCollectionSlug,
482
+ formUploadsCollectionSlug
483
+ }
484
+ }
485
+ },
486
+ studioFormUpload: {
487
+ exact: true,
488
+ path: `${formsBasePath}/uploads/:id`,
489
+ Component: {
490
+ exportName: "AdminStudioFormUploadView",
491
+ path: clientPath,
492
+ clientProps: {
493
+ ...studioNavClientProps,
494
+ formUploadsCollectionSlug
495
+ }
496
+ }
497
+ },
498
+ studioFormDetail: {
499
+ exact: true,
500
+ path: `${formsBasePath}/:id`,
501
+ Component: {
502
+ exportName: "AdminStudioFormDetailView",
503
+ path: clientPath,
504
+ clientProps: {
505
+ ...studioNavClientProps,
506
+ formsCollectionSlug,
507
+ formSubmissionsCollectionSlug
508
+ }
509
+ }
510
+ },
424
511
  studioForms: {
512
+ exact: true,
425
513
  path: formsBasePath,
426
514
  Component: {
427
515
  exportName: "AdminStudioFormsView",
@@ -435,10 +523,11 @@ function configureAdmin(config) {
435
523
  }
436
524
  }
437
525
  } : {},
438
- studioMedia: {
439
- path: mediaBasePath,
526
+ studioMediaItem: {
527
+ exact: true,
528
+ path: `${mediaBasePath}/:id`,
440
529
  Component: {
441
- exportName: "AdminStudioMediaView",
530
+ exportName: "AdminStudioMediaItemView",
442
531
  path: clientPath,
443
532
  clientProps: {
444
533
  ...studioNavClientProps,
@@ -446,10 +535,11 @@ function configureAdmin(config) {
446
535
  }
447
536
  }
448
537
  },
449
- studioMediaItem: {
450
- path: `${mediaBasePath}/:id`,
538
+ studioMedia: {
539
+ exact: true,
540
+ path: mediaBasePath,
451
541
  Component: {
452
- exportName: "AdminStudioMediaItemView",
542
+ exportName: "AdminStudioMediaView",
453
543
  path: clientPath,
454
544
  clientProps: {
455
545
  ...studioNavClientProps,
@@ -458,6 +548,7 @@ function configureAdmin(config) {
458
548
  }
459
549
  },
460
550
  studioTools: {
551
+ exact: true,
461
552
  path: toolsBasePath,
462
553
  Component: {
463
554
  exportName: "AdminStudioToolsView",
@@ -611,13 +702,31 @@ function configureAdmin(config) {
611
702
  return attachStudioBackBreadcrumbToCollection(mediaCollection);
612
703
  },
613
704
  wrapFormsCollection(formsCollection) {
614
- return attachStudioBackBreadcrumbToCollection(formsCollection);
705
+ return attachStudioEditRedirectToCollection(formsCollection, {
706
+ description: "Redirecting to the Studio form workspace.",
707
+ emptyHref: formsBasePath,
708
+ emptyLabel: "Open Forms",
709
+ pathBase: formsBasePath,
710
+ title: "Opening Form..."
711
+ });
615
712
  },
616
713
  wrapFormSubmissionsCollection(formSubmissionsCollection) {
617
- return attachStudioBackBreadcrumbToCollection(formSubmissionsCollection);
714
+ return attachStudioEditRedirectToCollection(formSubmissionsCollection, {
715
+ description: "Redirecting to the Studio submission workspace.",
716
+ emptyHref: formsBasePath,
717
+ emptyLabel: "Open Forms",
718
+ pathBase: `${formsBasePath}/submissions`,
719
+ title: "Opening Submission..."
720
+ });
618
721
  },
619
722
  wrapFormUploadsCollection(formUploadsCollection) {
620
- return attachStudioBackBreadcrumbToCollection(formUploadsCollection);
723
+ return attachStudioEditRedirectToCollection(formUploadsCollection, {
724
+ description: "Redirecting to the Studio upload workspace.",
725
+ emptyHref: formsBasePath,
726
+ emptyLabel: "Open Forms",
727
+ pathBase: `${formsBasePath}/uploads`,
728
+ title: "Opening Upload..."
729
+ });
621
730
  },
622
731
  wrapGlobals(globals2) {
623
732
  const labelMap = {
@@ -7,14 +7,14 @@ import {
7
7
  socialMediaConnectionsField,
8
8
  themePreferenceField,
9
9
  withTooltips
10
- } from "../chunk-XZQILJK3.mjs";
11
- import "../chunk-W2UOCJDX.mjs";
10
+ } from "../chunk-KHK6RTGC.mjs";
12
11
  import {
13
12
  SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
14
13
  SOCIAL_MEDIA_ICON_OPTIONS,
15
14
  SOCIAL_MEDIA_PLATFORMS,
16
15
  SOCIAL_MEDIA_PLATFORM_LABELS
17
16
  } from "../chunk-ZTXJG4K5.mjs";
17
+ import "../chunk-W2UOCJDX.mjs";
18
18
  import "../chunk-6BWS3CLP.mjs";
19
19
  export {
20
20
  SOCIAL_MEDIA_DEFAULT_ICON_BY_PLATFORM,
@@ -111,6 +111,14 @@ function NavIcon({ name }) {
111
111
  return null;
112
112
  }
113
113
  }
114
+ function LogoutIcon() {
115
+ const props = { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: iconStyle };
116
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, "aria-hidden": "true", children: [
117
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" }),
118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "10 17 5 12 10 7" }),
119
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "17", y2: "12" })
120
+ ] });
121
+ }
114
122
  function AdminShellClient({
115
123
  children,
116
124
  brandName,
@@ -122,14 +130,12 @@ function AdminShellClient({
122
130
  onLogout,
123
131
  storageKey = "orion-admin-shell-collapsed"
124
132
  }) {
125
- const [collapsed, setCollapsed] = (0, import_react.useState)(false);
133
+ const [collapsed, setCollapsed] = (0, import_react.useState)(true);
126
134
  const [loggingOut, setLoggingOut] = (0, import_react.useState)(false);
127
135
  (0, import_react.useEffect)(() => {
128
136
  try {
129
137
  const stored = window.localStorage.getItem(storageKey);
130
- if (stored === "1") {
131
- setCollapsed(true);
132
- }
138
+ setCollapsed(stored === "1");
133
139
  } catch {
134
140
  }
135
141
  }, [storageKey]);
@@ -191,7 +197,10 @@ function AdminShellClient({
191
197
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-admin-user-label", children: "Signed in as" }),
192
198
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "orion-admin-user-email", children: userEmail })
193
199
  ] }) : null,
194
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: loggingOut ? "..." : "Log out" })
200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "orion-admin-logout", disabled: loggingOut, onClick: handleLogout, type: "button", children: [
201
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoutIcon, {}),
202
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: loggingOut ? "Logging out..." : "Log out" })
203
+ ] })
195
204
  ] })
196
205
  ] }),
197
206
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "orion-admin-main", children })
@@ -8,7 +8,7 @@ import {
8
8
  MediaUploadForm,
9
9
  SiteFooterPreview,
10
10
  SiteHeaderPreview
11
- } from "../chunk-KPIX7OSV.mjs";
11
+ } from "../chunk-NF37A575.mjs";
12
12
  import "../chunk-ROTPP5CU.mjs";
13
13
 
14
14
  // src/admin-app/components/PageEditorFrame.tsx
@@ -299,16 +299,34 @@
299
299
  }
300
300
 
301
301
  .orion-admin-logout {
302
+ align-items: center;
302
303
  background: transparent;
303
304
  border: 1px solid var(--orion-admin-border);
304
305
  border-radius: var(--orion-admin-radius-xs);
305
306
  color: var(--orion-admin-text);
306
307
  cursor: pointer;
308
+ display: inline-flex;
307
309
  font-weight: 700;
310
+ gap: 0.45rem;
311
+ justify-content: center;
308
312
  margin-top: 0.6rem;
309
313
  padding: 0.4rem 0.65rem;
310
314
  }
311
315
 
316
+ .orion-admin-logout svg {
317
+ flex: 0 0 auto;
318
+ }
319
+
320
+ .is-collapsed .orion-admin-logout {
321
+ height: 48px;
322
+ padding: 0;
323
+ width: 48px;
324
+ }
325
+
326
+ .is-collapsed .orion-admin-logout span {
327
+ display: none;
328
+ }
329
+
312
330
  .orion-admin-logout:hover:not(:disabled) {
313
331
  background: var(--orion-admin-control-hover-bg);
314
332
  }
@@ -1627,6 +1645,245 @@
1627
1645
  gap: 0.75rem;
1628
1646
  }
1629
1647
 
1648
+ .orion-admin-workflow-editor {
1649
+ gap: 1rem;
1650
+ }
1651
+
1652
+ .orion-admin-workflow-editor-header,
1653
+ .orion-admin-field-list-header {
1654
+ align-items: flex-start;
1655
+ display: flex;
1656
+ flex-wrap: wrap;
1657
+ gap: 0.8rem;
1658
+ justify-content: space-between;
1659
+ }
1660
+
1661
+ .orion-admin-workflow-node {
1662
+ align-items: center;
1663
+ background:
1664
+ linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-card-bg) 88%, white), var(--orion-admin-card-bg));
1665
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 80%, transparent);
1666
+ border-radius: var(--orion-admin-radius-md);
1667
+ display: grid;
1668
+ gap: 0.75rem;
1669
+ grid-template-columns: auto minmax(0, 1fr) auto;
1670
+ padding: 0.85rem;
1671
+ position: relative;
1672
+ }
1673
+
1674
+ .orion-admin-step-editor:not(:last-child)::after {
1675
+ background: color-mix(in srgb, var(--orion-admin-accent) 34%, var(--orion-admin-card-border));
1676
+ bottom: -0.85rem;
1677
+ content: '';
1678
+ height: 0.85rem;
1679
+ left: 1.42rem;
1680
+ position: absolute;
1681
+ width: 2px;
1682
+ }
1683
+
1684
+ .orion-admin-workflow-node-number,
1685
+ .orion-admin-step-editor-index,
1686
+ .orion-admin-field-order {
1687
+ align-items: center;
1688
+ background: var(--orion-admin-accent-subtle);
1689
+ border: 1px solid var(--orion-admin-accent-border);
1690
+ border-radius: var(--orion-admin-radius-pill);
1691
+ color: var(--orion-admin-accent);
1692
+ display: inline-flex;
1693
+ flex: 0 0 auto;
1694
+ font-size: 0.78rem;
1695
+ font-variant-numeric: tabular-nums;
1696
+ font-weight: 900;
1697
+ justify-content: center;
1698
+ line-height: 1;
1699
+ text-align: center;
1700
+ }
1701
+
1702
+ .orion-admin-workflow-node-number {
1703
+ box-sizing: border-box;
1704
+ height: 2rem;
1705
+ padding-top: 5px;
1706
+ width: 2rem;
1707
+ }
1708
+
1709
+ .orion-admin-workflow-node-body {
1710
+ display: grid;
1711
+ gap: 0.18rem;
1712
+ min-width: 0;
1713
+ }
1714
+
1715
+ .orion-admin-workflow-node-body strong,
1716
+ .orion-admin-step-editor-title,
1717
+ .orion-admin-field-editor-title {
1718
+ color: var(--orion-admin-text);
1719
+ overflow-wrap: anywhere;
1720
+ }
1721
+
1722
+ .orion-admin-workflow-node-body span,
1723
+ .orion-admin-workflow-node-destination,
1724
+ .orion-admin-step-editor-meta,
1725
+ .orion-admin-field-editor-meta,
1726
+ .orion-admin-field-list-header span {
1727
+ color: var(--orion-admin-muted);
1728
+ font-size: 0.86rem;
1729
+ }
1730
+
1731
+ .orion-admin-workflow-node-destination {
1732
+ background: color-mix(in srgb, var(--orion-admin-card-bg) 78%, white);
1733
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
1734
+ border-radius: var(--orion-admin-radius-pill);
1735
+ font-weight: 800;
1736
+ padding: 0.35rem 0.65rem;
1737
+ white-space: nowrap;
1738
+ }
1739
+
1740
+ .orion-admin-step-editor-list,
1741
+ .orion-admin-field-editor-list {
1742
+ display: grid;
1743
+ gap: 0.85rem;
1744
+ }
1745
+
1746
+ .orion-admin-step-editor,
1747
+ .orion-admin-field-editor {
1748
+ background: color-mix(in srgb, var(--orion-admin-card-bg) 92%, white);
1749
+ border: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 84%, transparent);
1750
+ border-radius: var(--orion-admin-radius-md);
1751
+ overflow: hidden;
1752
+ position: relative;
1753
+ }
1754
+
1755
+ .orion-admin-step-editor {
1756
+ background:
1757
+ linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-card-bg) 97%, white), var(--orion-admin-card-bg));
1758
+ box-shadow:
1759
+ 0 1px 0 color-mix(in srgb, var(--orion-admin-card-bg) 88%, white) inset,
1760
+ 0 10px 24px color-mix(in srgb, var(--orion-admin-text) 5%, transparent);
1761
+ }
1762
+
1763
+ .orion-admin-step-editor[open] {
1764
+ background:
1765
+ linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-accent-subtle) 38%, var(--orion-admin-card-bg)), var(--orion-admin-card-bg));
1766
+ border-color: color-mix(in srgb, var(--orion-admin-accent) 34%, var(--orion-admin-card-border));
1767
+ }
1768
+
1769
+ .orion-admin-step-editor[open]::before {
1770
+ background: linear-gradient(180deg, var(--orion-admin-accent), color-mix(in srgb, var(--orion-admin-accent) 46%, var(--brand-secondary)));
1771
+ bottom: 0;
1772
+ content: '';
1773
+ left: 0;
1774
+ position: absolute;
1775
+ top: 0;
1776
+ width: 4px;
1777
+ }
1778
+
1779
+ .orion-admin-step-editor-summary,
1780
+ .orion-admin-field-editor-summary {
1781
+ align-items: center;
1782
+ cursor: pointer;
1783
+ display: grid;
1784
+ gap: 0.65rem;
1785
+ grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto auto;
1786
+ list-style: none;
1787
+ min-height: 52px;
1788
+ padding: 0.75rem 0.9rem;
1789
+ }
1790
+
1791
+ .orion-admin-step-editor-summary {
1792
+ padding-left: 1rem;
1793
+ }
1794
+
1795
+ .orion-admin-step-editor-summary::-webkit-details-marker,
1796
+ .orion-admin-field-editor-summary::-webkit-details-marker {
1797
+ display: none;
1798
+ }
1799
+
1800
+ .orion-admin-step-editor-summary::after,
1801
+ .orion-admin-field-editor-summary::after {
1802
+ color: var(--orion-admin-muted);
1803
+ content: 'Edit';
1804
+ font-size: 0.78rem;
1805
+ font-weight: 900;
1806
+ justify-self: end;
1807
+ text-transform: uppercase;
1808
+ }
1809
+
1810
+ .orion-admin-step-editor[open] > .orion-admin-step-editor-summary::after,
1811
+ .orion-admin-field-editor[open] > .orion-admin-field-editor-summary::after {
1812
+ content: 'Hide';
1813
+ }
1814
+
1815
+ .orion-admin-step-editor-index {
1816
+ min-height: 1.8rem;
1817
+ padding: 0 0.58rem;
1818
+ }
1819
+
1820
+ .orion-admin-field-order {
1821
+ box-sizing: border-box;
1822
+ height: 1.75rem;
1823
+ padding-top: 5px;
1824
+ width: 1.75rem;
1825
+ }
1826
+
1827
+ .orion-admin-step-editor-body,
1828
+ .orion-admin-field-editor-body {
1829
+ border-top: 1px solid color-mix(in srgb, var(--orion-admin-card-border) 72%, transparent);
1830
+ display: grid;
1831
+ gap: 0.85rem;
1832
+ padding: 0.95rem;
1833
+ }
1834
+
1835
+ .orion-admin-step-editor-body {
1836
+ background: color-mix(in srgb, var(--orion-admin-card-bg) 86%, var(--orion-admin-main-bg));
1837
+ padding-left: 1.15rem;
1838
+ }
1839
+
1840
+ .orion-admin-step-editor-actions {
1841
+ display: flex;
1842
+ flex-wrap: wrap;
1843
+ gap: 0.55rem;
1844
+ }
1845
+
1846
+ .orion-admin-step-settings-grid {
1847
+ display: grid;
1848
+ gap: 0.75rem;
1849
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1850
+ }
1851
+
1852
+ .orion-admin-field-editor {
1853
+ background: color-mix(in srgb, var(--orion-admin-main-bg) 72%, var(--orion-admin-card-bg));
1854
+ border-color: color-mix(in srgb, var(--brand-secondary) 22%, var(--orion-admin-card-border));
1855
+ border-radius: var(--orion-admin-radius-sm);
1856
+ box-shadow: none;
1857
+ }
1858
+
1859
+ .orion-admin-field-editor-summary {
1860
+ grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto) auto;
1861
+ padding: 0.68rem 0.75rem;
1862
+ }
1863
+
1864
+ .orion-admin-field-editor-list {
1865
+ background:
1866
+ linear-gradient(180deg, color-mix(in srgb, var(--orion-admin-main-bg) 74%, var(--orion-admin-card-bg)), color-mix(in srgb, var(--orion-admin-main-bg) 88%, white));
1867
+ border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, var(--orion-admin-card-border));
1868
+ border-radius: var(--orion-admin-radius-md);
1869
+ padding: 0.7rem;
1870
+ }
1871
+
1872
+ .orion-admin-field-order {
1873
+ background: color-mix(in srgb, var(--brand-secondary) 10%, var(--orion-admin-card-bg));
1874
+ border-color: color-mix(in srgb, var(--brand-secondary) 32%, var(--orion-admin-card-border));
1875
+ color: color-mix(in srgb, var(--brand-secondary) 74%, var(--orion-admin-text));
1876
+ }
1877
+
1878
+ .orion-admin-field-editor-meta {
1879
+ background: color-mix(in srgb, var(--brand-secondary) 8%, var(--orion-admin-card-bg));
1880
+ border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, transparent);
1881
+ border-radius: var(--orion-admin-radius-pill);
1882
+ font-weight: 800;
1883
+ justify-self: end;
1884
+ padding: 0.28rem 0.55rem;
1885
+ }
1886
+
1630
1887
  .orion-admin-response-stack.is-scrollable {
1631
1888
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
1632
1889
  max-height: 34rem;
package/dist/admin.css CHANGED
@@ -562,6 +562,86 @@ body.orion-studio-shell-active .template-default__nav-toggler-wrapper {
562
562
  min-width: 0 !important;
563
563
  }
564
564
 
565
+ /* Payload fallback pages, including /admin/unauthorized, do not use the custom
566
+ Studio shell. Keep them readable and aligned with the Orion CMS theme. */
567
+ body:not(.orion-studio-shell-active) .template-default,
568
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) {
569
+ background:
570
+ radial-gradient(circle at top left, color-mix(in srgb, var(--brand-secondary) 10%, transparent), transparent 30rem),
571
+ linear-gradient(180deg, var(--admin-bg), color-mix(in srgb, var(--admin-bg) 90%, white)) !important;
572
+ color: var(--admin-text) !important;
573
+ }
574
+
575
+ body:not(.orion-studio-shell-active) .template-default__wrap,
576
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap {
577
+ align-items: center !important;
578
+ display: flex !important;
579
+ justify-content: center !important;
580
+ min-height: 100vh !important;
581
+ padding: clamp(1.5rem, 4vw, 4rem) !important;
582
+ }
583
+
584
+ body:not(.orion-studio-shell-active) .template-default__wrap > *:not(.template-default__nav-toggler-wrapper),
585
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap > * {
586
+ background: var(--admin-card-bg) !important;
587
+ border: 1px solid var(--admin-card-border) !important;
588
+ border-radius: var(--admin-radius-lg) !important;
589
+ box-shadow: var(--admin-card-shadow-hover) !important;
590
+ color: var(--admin-text) !important;
591
+ max-width: 34rem !important;
592
+ padding: clamp(1.5rem, 4vw, 2.5rem) !important;
593
+ width: min(100%, 34rem) !important;
594
+ }
595
+
596
+ body:not(.orion-studio-shell-active) .template-default__wrap h1,
597
+ body:not(.orion-studio-shell-active) .template-default__wrap h2,
598
+ body:not(.orion-studio-shell-active) .template-default__wrap h3,
599
+ body:not(.orion-studio-shell-active) .template-default__wrap p,
600
+ body:not(.orion-studio-shell-active) .template-default__wrap span,
601
+ body:not(.orion-studio-shell-active) .template-default__wrap div,
602
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap h1,
603
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap h2,
604
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap h3,
605
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap p,
606
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap span,
607
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap div {
608
+ color: var(--admin-text) !important;
609
+ }
610
+
611
+ body:not(.orion-studio-shell-active) .template-default__wrap p,
612
+ body:not(.orion-studio-shell-active) .template-default__wrap .description,
613
+ body:not(.orion-studio-shell-active) .template-default__wrap [class*='description'],
614
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap p,
615
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap .description,
616
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap [class*='description'] {
617
+ color: var(--admin-text-muted) !important;
618
+ }
619
+
620
+ body:not(.orion-studio-shell-active) .template-default__wrap .btn,
621
+ body:not(.orion-studio-shell-active) .template-default__wrap button,
622
+ body:not(.orion-studio-shell-active) .template-default__wrap a[href*='logout'],
623
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap .btn,
624
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap button,
625
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap a[href*='logout'] {
626
+ background: var(--admin-accent) !important;
627
+ border: 1px solid var(--admin-accent) !important;
628
+ border-radius: var(--admin-radius-sm) !important;
629
+ color: var(--admin-text-inverse) !important;
630
+ font-weight: 800 !important;
631
+ min-height: 2.75rem !important;
632
+ padding: 0.75rem 1rem !important;
633
+ }
634
+
635
+ body:not(.orion-studio-shell-active) .template-default__wrap .btn:hover,
636
+ body:not(.orion-studio-shell-active) .template-default__wrap button:hover,
637
+ body:not(.orion-studio-shell-active) .template-default__wrap a[href*='logout']:hover,
638
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap .btn:hover,
639
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap button:hover,
640
+ body:not(.orion-studio-shell-active) .template-minimal:not(.login) .template-minimal__wrap a[href*='logout']:hover {
641
+ background: var(--admin-accent-hover) !important;
642
+ border-color: var(--admin-accent-hover) !important;
643
+ }
644
+
565
645
  .admin-studio-brand {
566
646
  padding-left: 0 !important;
567
647
  }
@@ -0,0 +1,18 @@
1
+ import type { FC } from 'react'
2
+
3
+ export type {
4
+ BuilderV2EditorInitialData,
5
+ BuilderV2EditorProps,
6
+ BuilderV2PageTreeNode,
7
+ BuilderV2PermissionSet,
8
+ BuilderV2ProjectAdapter,
9
+ BuilderV2ProjectComponentDefinition,
10
+ BuilderV2RuntimeComponent,
11
+ BuilderV2RuntimeComponentProps,
12
+ BuilderV2TraitDefinition,
13
+ BuilderV2ThemeTokens,
14
+ BuilderV2ValidationIssue,
15
+ BuilderV2VersionSnapshot,
16
+ } from './types'
17
+
18
+ export declare const GrapesPageEditor: FC<import('./types').BuilderV2EditorProps>