tinacms 0.65.1 → 0.66.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/dist/admin/api.d.ts +2 -4
  3. package/dist/admin/components/GetCollections.d.ts +5 -1
  4. package/dist/admin/components/Page.d.ts +26 -0
  5. package/dist/admin/components/Sidebar.d.ts +1 -0
  6. package/dist/admin/pages/ScreenPage.d.ts +14 -0
  7. package/dist/index.es.js +629 -521
  8. package/dist/index.js +626 -518
  9. package/dist/style.css +191 -202
  10. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -726,6 +726,104 @@ mutation addPendingDocumentMutation(
726
726
  return false;
727
727
  }
728
728
  }
729
+ class TinaAdminApi {
730
+ constructor(cms) {
731
+ this.api = cms.api.tina;
732
+ }
733
+ async fetchCollections() {
734
+ const response = await this.api.request(`#graphql
735
+ query{
736
+ getCollections {
737
+ label,
738
+ name
739
+ }
740
+ }`, { variables: {} });
741
+ return response;
742
+ }
743
+ async fetchCollection(collectionName, includeDocuments) {
744
+ const response = await this.api.request(`#graphql
745
+ query($collection: String!, $includeDocuments: Boolean!){
746
+ getCollection(collection: $collection){
747
+ name
748
+ label
749
+ format
750
+ templates
751
+ documents @include(if: $includeDocuments) {
752
+ totalCount
753
+ edges {
754
+ node {
755
+ ... on Document {
756
+ sys {
757
+ template
758
+ breadcrumbs
759
+ path
760
+ basename
761
+ relativePath
762
+ filename
763
+ extension
764
+ }
765
+ }
766
+ }
767
+ }
768
+ }
769
+ }
770
+ }`, { variables: { collection: collectionName, includeDocuments } });
771
+ return response;
772
+ }
773
+ async fetchDocument(collectionName, relativePath) {
774
+ const response = await this.api.request(`#graphql
775
+ query($collection: String!, $relativePath: String!) {
776
+ getDocument(collection:$collection, relativePath:$relativePath) {
777
+ ... on Document {
778
+ form
779
+ values
780
+ }
781
+ }
782
+ }`, { variables: { collection: collectionName, relativePath } });
783
+ return response;
784
+ }
785
+ async fetchDocumentFields() {
786
+ const response = await this.api.request(`#graphql
787
+ query {
788
+ getDocumentFields
789
+ }`, { variables: {} });
790
+ return response;
791
+ }
792
+ async createDocument(collectionName, relativePath, params) {
793
+ const response = await this.api.request(`#graphql
794
+ mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
795
+ createDocument(
796
+ collection: $collection,
797
+ relativePath: $relativePath,
798
+ params: $params
799
+ ){__typename}
800
+ }`, {
801
+ variables: {
802
+ collection: collectionName,
803
+ relativePath,
804
+ params
805
+ }
806
+ });
807
+ return response;
808
+ }
809
+ async updateDocument(collectionName, relativePath, params) {
810
+ const response = await this.api.request(`#graphql
811
+ mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
812
+ updateDocument(
813
+ collection: $collection,
814
+ relativePath: $relativePath,
815
+ params: $params
816
+ ){__typename}
817
+ }`, {
818
+ variables: {
819
+ collection: collectionName,
820
+ relativePath,
821
+ params
822
+ }
823
+ });
824
+ return response;
825
+ }
826
+ }
729
827
  function sleep(ms) {
730
828
  return new Promise((resolve) => setTimeout(resolve, ms));
731
829
  }
@@ -823,6 +921,11 @@ mutation addPendingDocumentMutation(
823
921
  return newBranch;
824
922
  };
825
923
  setupMedia();
924
+ React__default["default"].useMemo(() => {
925
+ if (cms.flags.get("tina-admin") === true) {
926
+ cms.registerApi("admin", new TinaAdminApi(cms));
927
+ }
928
+ }, [cms, cms.flags.get("tina-admin")]);
826
929
  const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
827
930
  React__default["default"].useEffect(() => {
828
931
  cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -1924,40 +2027,49 @@ Document
1924
2027
  position: relative !important;
1925
2028
  }
1926
2029
 
1927
- .tina-tailwind .bottom-3 {
1928
- bottom: 12px !important;
1929
- }
1930
-
1931
- .tina-tailwind .right-5 {
1932
- right: 20px !important;
2030
+ .tina-tailwind .left-0 {
2031
+ left: 0px !important;
1933
2032
  }
1934
2033
 
1935
2034
  .tina-tailwind .right-0 {
1936
2035
  right: 0px !important;
1937
2036
  }
1938
2037
 
2038
+ .tina-tailwind .bottom-2 {
2039
+ bottom: 8px !important;
2040
+ }
2041
+
2042
+ .tina-tailwind .right-5 {
2043
+ right: 20px !important;
2044
+ }
2045
+
1939
2046
  .tina-tailwind .z-50 {
1940
2047
  z-index: 50 !important;
1941
2048
  }
1942
2049
 
1943
- .tina-tailwind .-ml-1 {
1944
- margin-left: -4px !important;
2050
+ .tina-tailwind .mx-auto {
2051
+ margin-left: auto !important;
2052
+ margin-right: auto !important;
1945
2053
  }
1946
2054
 
1947
- .tina-tailwind .mr-1\\.5 {
1948
- margin-right: 6px !important;
2055
+ .tina-tailwind .mr-2 {
2056
+ margin-right: 8px !important;
1949
2057
  }
1950
2058
 
1951
- .tina-tailwind .mr-1 {
1952
- margin-right: 4px !important;
2059
+ .tina-tailwind .mb-2 {
2060
+ margin-bottom: 8px !important;
1953
2061
  }
1954
2062
 
1955
- .tina-tailwind .mb-3 {
1956
- margin-bottom: 12px !important;
2063
+ .tina-tailwind .mb-1 {
2064
+ margin-bottom: 4px !important;
1957
2065
  }
1958
2066
 
1959
- .tina-tailwind .mr-2 {
1960
- margin-right: 8px !important;
2067
+ .tina-tailwind .-mt-0\\.5 {
2068
+ margin-top: -2px !important;
2069
+ }
2070
+
2071
+ .tina-tailwind .-mt-0 {
2072
+ margin-top: 0px !important;
1961
2073
  }
1962
2074
 
1963
2075
  .tina-tailwind .ml-1 {
@@ -1968,16 +2080,12 @@ Document
1968
2080
  margin-top: 8px !important;
1969
2081
  }
1970
2082
 
1971
- .tina-tailwind .mt-8 {
1972
- margin-top: 32px !important;
1973
- }
1974
-
1975
- .tina-tailwind .mb-0\\.5 {
1976
- margin-bottom: 2px !important;
2083
+ .tina-tailwind .mr-1\\.5 {
2084
+ margin-right: 6px !important;
1977
2085
  }
1978
2086
 
1979
- .tina-tailwind .mb-0 {
1980
- margin-bottom: 0px !important;
2087
+ .tina-tailwind .mr-1 {
2088
+ margin-right: 4px !important;
1981
2089
  }
1982
2090
 
1983
2091
  .tina-tailwind .block {
@@ -2008,10 +2116,18 @@ Document
2008
2116
  height: auto !important;
2009
2117
  }
2010
2118
 
2119
+ .tina-tailwind .h-full {
2120
+ height: 100% !important;
2121
+ }
2122
+
2011
2123
  .tina-tailwind .h-6 {
2012
2124
  height: 24px !important;
2013
2125
  }
2014
2126
 
2127
+ .tina-tailwind .h-10 {
2128
+ height: 40px !important;
2129
+ }
2130
+
2015
2131
  .tina-tailwind .h-5 {
2016
2132
  height: 20px !important;
2017
2133
  }
@@ -2024,48 +2140,48 @@ Document
2024
2140
  width: 40px !important;
2025
2141
  }
2026
2142
 
2027
- .tina-tailwind .w-80 {
2028
- width: 320px !important;
2029
- }
2030
-
2031
- .tina-tailwind .w-2\\/3 {
2032
- width: 66.666667% !important;
2033
- }
2034
-
2035
- .tina-tailwind .w-6 {
2036
- width: 24px !important;
2037
- }
2038
-
2039
2143
  .tina-tailwind .w-auto {
2040
2144
  width: auto !important;
2041
2145
  }
2042
2146
 
2147
+ .tina-tailwind .w-5 {
2148
+ width: 20px !important;
2149
+ }
2150
+
2043
2151
  .tina-tailwind .w-56 {
2044
2152
  width: 224px !important;
2045
2153
  }
2046
2154
 
2047
- .tina-tailwind .min-w-full {
2048
- min-width: 100% !important;
2155
+ .tina-tailwind .w-0 {
2156
+ width: 0px !important;
2157
+ }
2158
+
2159
+ .tina-tailwind .w-6 {
2160
+ width: 24px !important;
2049
2161
  }
2050
2162
 
2051
2163
  .tina-tailwind .max-w-lg {
2052
2164
  max-width: 32rem !important;
2053
2165
  }
2054
2166
 
2055
- .tina-tailwind .max-w-screen-md {
2056
- max-width: 768px !important;
2167
+ .tina-tailwind .max-w-screen-xl {
2168
+ max-width: 1280px !important;
2169
+ }
2170
+
2171
+ .tina-tailwind .max-w-form {
2172
+ max-width: 900px !important;
2057
2173
  }
2058
2174
 
2059
- .tina-tailwind .max-w-xs {
2060
- max-width: 20rem !important;
2175
+ .tina-tailwind .max-w-full {
2176
+ max-width: 100% !important;
2061
2177
  }
2062
2178
 
2063
2179
  .tina-tailwind .flex-1 {
2064
2180
  flex: 1 1 0% !important;
2065
2181
  }
2066
2182
 
2067
- .tina-tailwind .flex-shrink-0 {
2068
- flex-shrink: 0 !important;
2183
+ .tina-tailwind .table-auto {
2184
+ table-layout: auto !important;
2069
2185
  }
2070
2186
 
2071
2187
  .tina-tailwind .origin-top-right {
@@ -2087,16 +2203,6 @@ Document
2087
2203
  transform: var(--tw-transform) !important;
2088
2204
  }
2089
2205
 
2090
- .tina-tailwind .rotate-90 {
2091
- --tw-rotate: 90deg !important;
2092
- transform: var(--tw-transform) !important;
2093
- }
2094
-
2095
- .tina-tailwind .rotate-0 {
2096
- --tw-rotate: 0deg !important;
2097
- transform: var(--tw-transform) !important;
2098
- }
2099
-
2100
2206
  .tina-tailwind .scale-95 {
2101
2207
  --tw-scale-x: .95 !important;
2102
2208
  --tw-scale-y: .95 !important;
@@ -2129,14 +2235,6 @@ Document
2129
2235
  align-items: stretch !important;
2130
2236
  }
2131
2237
 
2132
- .tina-tailwind .justify-start {
2133
- justify-content: flex-start !important;
2134
- }
2135
-
2136
- .tina-tailwind .justify-end {
2137
- justify-content: flex-end !important;
2138
- }
2139
-
2140
2238
  .tina-tailwind .justify-center {
2141
2239
  justify-content: center !important;
2142
2240
  }
@@ -2157,18 +2255,10 @@ Document
2157
2255
  gap: 16px !important;
2158
2256
  }
2159
2257
 
2160
- .tina-tailwind .gap-1 {
2161
- gap: 4px !important;
2162
- }
2163
-
2164
2258
  .tina-tailwind .gap-3 {
2165
2259
  gap: 12px !important;
2166
2260
  }
2167
2261
 
2168
- .tina-tailwind .gap-1\\.5 {
2169
- gap: 6px !important;
2170
- }
2171
-
2172
2262
  .tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
2173
2263
  --tw-divide-y-reverse: 0 !important;
2174
2264
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
@@ -2183,10 +2273,6 @@ Document
2183
2273
  overflow-y: auto !important;
2184
2274
  }
2185
2275
 
2186
- .tina-tailwind .overflow-ellipsis {
2187
- text-overflow: ellipsis !important;
2188
- }
2189
-
2190
2276
  .tina-tailwind .whitespace-nowrap {
2191
2277
  white-space: nowrap !important;
2192
2278
  }
@@ -2211,10 +2297,6 @@ Document
2211
2297
  border-bottom-width: 1px !important;
2212
2298
  }
2213
2299
 
2214
- .tina-tailwind .border-r {
2215
- border-right-width: 1px !important;
2216
- }
2217
-
2218
2300
  .tina-tailwind .border-gray-200 {
2219
2301
  --tw-border-opacity: 1 !important;
2220
2302
  border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
@@ -2234,8 +2316,9 @@ Document
2234
2316
  background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
2235
2317
  }
2236
2318
 
2237
- .tina-tailwind .bg-transparent {
2238
- background-color: transparent !important;
2319
+ .tina-tailwind .bg-blue-500 {
2320
+ --tw-bg-opacity: 1 !important;
2321
+ background-color: rgba(0, 132, 255, var(--tw-bg-opacity)) !important;
2239
2322
  }
2240
2323
 
2241
2324
  .tina-tailwind .bg-gradient-to-b {
@@ -2247,19 +2330,10 @@ Document
2247
2330
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;
2248
2331
  }
2249
2332
 
2250
- .tina-tailwind .from-white {
2251
- --tw-gradient-from: #fff !important;
2252
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)) !important;
2253
- }
2254
-
2255
2333
  .tina-tailwind .to-gray-900 {
2256
2334
  --tw-gradient-to: #252336 !important;
2257
2335
  }
2258
2336
 
2259
- .tina-tailwind .to-gray-50 {
2260
- --tw-gradient-to: #F6F6F9 !important;
2261
- }
2262
-
2263
2337
  .tina-tailwind .px-4 {
2264
2338
  padding-left: 16px !important;
2265
2339
  padding-right: 16px !important;
@@ -2280,6 +2354,21 @@ Document
2280
2354
  padding-bottom: 16px !important;
2281
2355
  }
2282
2356
 
2357
+ .tina-tailwind .px-12 {
2358
+ padding-left: 48px !important;
2359
+ padding-right: 48px !important;
2360
+ }
2361
+
2362
+ .tina-tailwind .py-10 {
2363
+ padding-top: 40px !important;
2364
+ padding-bottom: 40px !important;
2365
+ }
2366
+
2367
+ .tina-tailwind .px-20 {
2368
+ padding-left: 80px !important;
2369
+ padding-right: 80px !important;
2370
+ }
2371
+
2283
2372
  .tina-tailwind .px-6 {
2284
2373
  padding-left: 24px !important;
2285
2374
  padding-right: 24px !important;
@@ -2295,47 +2384,22 @@ Document
2295
2384
  padding-bottom: 8px !important;
2296
2385
  }
2297
2386
 
2298
- .tina-tailwind .py-7 {
2299
- padding-top: 28px !important;
2300
- padding-bottom: 28px !important;
2301
- }
2302
-
2303
- .tina-tailwind .px-8 {
2304
- padding-left: 32px !important;
2305
- padding-right: 32px !important;
2306
- }
2307
-
2308
- .tina-tailwind .py-2\\.5 {
2309
- padding-top: 10px !important;
2310
- padding-bottom: 10px !important;
2311
- }
2312
-
2313
- .tina-tailwind .py-14 {
2314
- padding-top: 56px !important;
2315
- padding-bottom: 56px !important;
2316
- }
2317
-
2318
2387
  .tina-tailwind .py-3 {
2319
2388
  padding-top: 12px !important;
2320
2389
  padding-bottom: 12px !important;
2321
2390
  }
2322
2391
 
2323
- .tina-tailwind .py-1\\.5 {
2324
- padding-top: 6px !important;
2325
- padding-bottom: 6px !important;
2326
- }
2327
-
2328
- .tina-tailwind .py-10 {
2329
- padding-top: 40px !important;
2330
- padding-bottom: 40px !important;
2392
+ .tina-tailwind .px-8 {
2393
+ padding-left: 32px !important;
2394
+ padding-right: 32px !important;
2331
2395
  }
2332
2396
 
2333
- .tina-tailwind .pt-16 {
2334
- padding-top: 64px !important;
2397
+ .tina-tailwind .pb-4 {
2398
+ padding-bottom: 16px !important;
2335
2399
  }
2336
2400
 
2337
- .tina-tailwind .pb-10 {
2338
- padding-bottom: 40px !important;
2401
+ .tina-tailwind .pt-18 {
2402
+ padding-top: 72px !important;
2339
2403
  }
2340
2404
 
2341
2405
  .tina-tailwind .text-left {
@@ -2360,40 +2424,26 @@ Document
2360
2424
  line-height: 1.5 !important;
2361
2425
  }
2362
2426
 
2363
- .tina-tailwind .text-lg {
2364
- font-size: 18px !important;
2365
- line-height: 1.55 !important;
2366
- }
2367
-
2368
2427
  .tina-tailwind .text-sm {
2369
2428
  font-size: 14px !important;
2370
2429
  line-height: 1.43 !important;
2371
2430
  }
2372
2431
 
2432
+ .tina-tailwind .text-xl {
2433
+ font-size: 20px !important;
2434
+ line-height: 1.4 !important;
2435
+ }
2436
+
2373
2437
  .tina-tailwind .text-md {
2374
2438
  font-size: 16px !important;
2375
2439
  line-height: 1.5 !important;
2376
2440
  }
2377
2441
 
2378
- .tina-tailwind .text-3xl {
2379
- font-size: 30px !important;
2380
- line-height: 1.2 !important;
2381
- }
2382
-
2383
2442
  .tina-tailwind .text-xs {
2384
2443
  font-size: 13px !important;
2385
2444
  line-height: 1.33 !important;
2386
2445
  }
2387
2446
 
2388
- .tina-tailwind .text-4xl {
2389
- font-size: 36px !important;
2390
- line-height: 1.1 !important;
2391
- }
2392
-
2393
- .tina-tailwind .font-bold {
2394
- font-weight: 700 !important;
2395
- }
2396
-
2397
2447
  .tina-tailwind .font-medium {
2398
2448
  font-weight: 500 !important;
2399
2449
  }
@@ -2410,14 +2460,18 @@ Document
2410
2460
  line-height: 1.5 !important;
2411
2461
  }
2412
2462
 
2413
- .tina-tailwind .leading-4 {
2414
- line-height: 16px !important;
2463
+ .tina-tailwind .leading-tight {
2464
+ line-height: 1.25 !important;
2415
2465
  }
2416
2466
 
2417
2467
  .tina-tailwind .leading-5 {
2418
2468
  line-height: 20px !important;
2419
2469
  }
2420
2470
 
2471
+ .tina-tailwind .leading-4 {
2472
+ line-height: 16px !important;
2473
+ }
2474
+
2421
2475
  .tina-tailwind .tracking-wide {
2422
2476
  letter-spacing: 0.025em !important;
2423
2477
  }
@@ -2427,24 +2481,23 @@ Document
2427
2481
  color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;
2428
2482
  }
2429
2483
 
2430
- .tina-tailwind .text-gray-800 {
2484
+ .tina-tailwind .text-blue-600 {
2431
2485
  --tw-text-opacity: 1 !important;
2432
- color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
2486
+ color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2433
2487
  }
2434
2488
 
2435
- .tina-tailwind .text-gray-600 {
2489
+ .tina-tailwind .text-gray-500 {
2436
2490
  --tw-text-opacity: 1 !important;
2437
- color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
2491
+ color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
2438
2492
  }
2439
2493
 
2440
- .tina-tailwind .text-blue-400 {
2494
+ .tina-tailwind .text-gray-400 {
2441
2495
  --tw-text-opacity: 1 !important;
2442
- color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2496
+ color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
2443
2497
  }
2444
2498
 
2445
- .tina-tailwind .text-blue-600 {
2446
- --tw-text-opacity: 1 !important;
2447
- color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2499
+ .tina-tailwind .text-current {
2500
+ color: currentColor !important;
2448
2501
  }
2449
2502
 
2450
2503
  .tina-tailwind .text-white {
@@ -2452,56 +2505,66 @@ Document
2452
2505
  color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
2453
2506
  }
2454
2507
 
2455
- .tina-tailwind .text-gray-400 {
2508
+ .tina-tailwind .text-gray-600 {
2456
2509
  --tw-text-opacity: 1 !important;
2457
- color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
2510
+ color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
2458
2511
  }
2459
2512
 
2460
- .tina-tailwind .text-gray-300 {
2513
+ .tina-tailwind .text-gray-800 {
2461
2514
  --tw-text-opacity: 1 !important;
2462
- color: rgba(178, 173, 190, var(--tw-text-opacity)) !important;
2515
+ color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
2463
2516
  }
2464
2517
 
2465
- .tina-tailwind .text-gray-500 {
2518
+ .tina-tailwind .text-gray-900 {
2466
2519
  --tw-text-opacity: 1 !important;
2467
- color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
2520
+ color: rgba(37, 35, 54, var(--tw-text-opacity)) !important;
2468
2521
  }
2469
2522
 
2470
- .tina-tailwind .underline {
2471
- text-decoration: underline !important;
2523
+ .tina-tailwind .text-blue-500 {
2524
+ --tw-text-opacity: 1 !important;
2525
+ color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
2472
2526
  }
2473
2527
 
2474
- .tina-tailwind .opacity-80 {
2475
- opacity: .8 !important;
2528
+ .tina-tailwind .text-blue-400 {
2529
+ --tw-text-opacity: 1 !important;
2530
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2476
2531
  }
2477
2532
 
2478
- .tina-tailwind .opacity-50 {
2479
- opacity: .5 !important;
2533
+ .tina-tailwind .underline {
2534
+ text-decoration: underline !important;
2480
2535
  }
2481
2536
 
2482
2537
  .tina-tailwind .opacity-100 {
2483
2538
  opacity: 1 !important;
2484
2539
  }
2485
2540
 
2486
- .tina-tailwind .opacity-0 {
2487
- opacity: 0 !important;
2488
- }
2489
-
2490
2541
  .tina-tailwind .opacity-90 {
2491
2542
  opacity: .9 !important;
2492
2543
  }
2493
2544
 
2545
+ .tina-tailwind .opacity-80 {
2546
+ opacity: .8 !important;
2547
+ }
2548
+
2549
+ .tina-tailwind .opacity-50 {
2550
+ opacity: .5 !important;
2551
+ }
2552
+
2494
2553
  .tina-tailwind .opacity-70 {
2495
2554
  opacity: .7 !important;
2496
2555
  }
2497
2556
 
2557
+ .tina-tailwind .opacity-0 {
2558
+ opacity: 0 !important;
2559
+ }
2560
+
2498
2561
  .tina-tailwind .shadow-lg {
2499
2562
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
2500
2563
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2501
2564
  }
2502
2565
 
2503
- .tina-tailwind .shadow-sm {
2504
- --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2566
+ .tina-tailwind .shadow-2xl {
2567
+ --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
2505
2568
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2506
2569
  }
2507
2570
 
@@ -2510,6 +2573,11 @@ Document
2510
2573
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2511
2574
  }
2512
2575
 
2576
+ .tina-tailwind .shadow-sm {
2577
+ --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
2578
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2579
+ }
2580
+
2513
2581
  .tina-tailwind .ring-1 {
2514
2582
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2515
2583
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
@@ -2529,14 +2597,14 @@ Document
2529
2597
  filter: var(--tw-filter) !important;
2530
2598
  }
2531
2599
 
2532
- .tina-tailwind .transition-colors {
2533
- transition-property: background-color, border-color, color, fill, stroke !important;
2600
+ .tina-tailwind .transition-opacity {
2601
+ transition-property: opacity !important;
2534
2602
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2535
2603
  transition-duration: 150ms !important;
2536
2604
  }
2537
2605
 
2538
- .tina-tailwind .transition-opacity {
2539
- transition-property: opacity !important;
2606
+ .tina-tailwind .transition-colors {
2607
+ transition-property: background-color, border-color, color, fill, stroke !important;
2540
2608
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2541
2609
  transition-duration: 150ms !important;
2542
2610
  }
@@ -2553,38 +2621,55 @@ Document
2553
2621
  transition-duration: 150ms !important;
2554
2622
  }
2555
2623
 
2556
- .tina-tailwind .duration-150 {
2557
- transition-duration: 150ms !important;
2558
- }
2559
-
2560
2624
  .tina-tailwind .duration-300 {
2561
2625
  transition-duration: 300ms !important;
2562
2626
  }
2563
2627
 
2564
- .tina-tailwind .duration-75 {
2565
- transition-duration: 75ms !important;
2628
+ .tina-tailwind .duration-150 {
2629
+ transition-duration: 150ms !important;
2566
2630
  }
2567
2631
 
2568
2632
  .tina-tailwind .duration-100 {
2569
2633
  transition-duration: 100ms !important;
2570
2634
  }
2571
2635
 
2636
+ .tina-tailwind .duration-75 {
2637
+ transition-duration: 75ms !important;
2638
+ }
2639
+
2572
2640
  .tina-tailwind .ease-out {
2573
2641
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
2574
2642
  }
2575
2643
 
2644
+ .tina-tailwind .ease-in {
2645
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
2646
+ }
2647
+
2576
2648
  .tina-tailwind .ease-in-out {
2577
2649
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
2578
2650
  }
2579
2651
 
2580
- .tina-tailwind .ease-in {
2581
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
2582
- }
2652
+ .tina-tailwind .icon-parent svg {
2653
+ fill: currentColor !important;
2654
+ }
2583
2655
 
2584
2656
  .tina-tailwind {
2585
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2586
- --tw-text-opacity: 1;
2587
- color: rgba(86, 81, 101, var(--tw-text-opacity));
2657
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2658
+ --tw-text-opacity: 1;
2659
+ color: rgba(86, 81, 101, var(--tw-text-opacity));
2660
+ }
2661
+
2662
+ .first\\:pt-3:first-child {
2663
+ padding-top: 12px !important;
2664
+ }
2665
+
2666
+ .last\\:pb-3:last-child {
2667
+ padding-bottom: 12px !important;
2668
+ }
2669
+
2670
+ .hover\\:bg-blue-600:hover {
2671
+ --tw-bg-opacity: 1 !important;
2672
+ background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
2588
2673
  }
2589
2674
 
2590
2675
  .hover\\:bg-gray-50:hover {
@@ -2597,9 +2682,9 @@ Document
2597
2682
  color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
2598
2683
  }
2599
2684
 
2600
- .hover\\:text-blue-500:hover {
2685
+ .hover\\:text-blue-400:hover {
2601
2686
  --tw-text-opacity: 1 !important;
2602
- color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
2687
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2603
2688
  }
2604
2689
 
2605
2690
  .hover\\:opacity-100:hover {
@@ -2610,31 +2695,38 @@ Document
2610
2695
  opacity: .8 !important;
2611
2696
  }
2612
2697
 
2613
- .focus\\:outline-none:focus {
2614
- outline: 2px solid transparent !important;
2615
- outline-offset: 2px !important;
2698
+ .focus\\:text-blue-400:focus {
2699
+ --tw-text-opacity: 1 !important;
2700
+ color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
2616
2701
  }
2617
2702
 
2618
- .group:hover .group-hover\\:opacity-100 {
2619
- opacity: 1 !important;
2703
+ .focus\\:underline:focus {
2704
+ text-decoration: underline !important;
2620
2705
  }
2621
2706
 
2622
- .group:hover .group-hover\\:opacity-80 {
2623
- opacity: .8 !important;
2707
+ .focus\\:shadow-outline:focus {
2708
+ --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
2709
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
2624
2710
  }
2625
2711
 
2626
- @media (min-width: 640px) {
2712
+ .focus\\:outline-none:focus {
2713
+ outline: 2px solid transparent !important;
2714
+ outline-offset: 2px !important;
2715
+ }
2627
2716
 
2628
- .sm\\:rounded-lg {
2629
- border-radius: 8px !important;
2630
- }
2717
+ .focus\\:ring-2:focus {
2718
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
2719
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
2720
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
2631
2721
  }
2632
2722
 
2633
- @media (min-width: 1024px) {
2723
+ .focus\\:ring-blue-500:focus {
2724
+ --tw-ring-opacity: 1 !important;
2725
+ --tw-ring-color: rgba(0, 132, 255, var(--tw-ring-opacity)) !important;
2726
+ }
2634
2727
 
2635
- .lg\\:w-96 {
2636
- width: 384px !important;
2637
- }
2728
+ .group:hover .group-hover\\:opacity-100 {
2729
+ opacity: 1 !important;
2638
2730
  }
2639
2731
  `;
2640
2732
  function useTina({
@@ -2806,7 +2898,7 @@ Document
2806
2898
  variables: props.variables,
2807
2899
  data: props.data
2808
2900
  });
2809
- return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(isLoading ? props : __spreadProps(__spreadValues({}, props), { data: liveData })));
2901
+ return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(isLoading || !props.query ? props : __spreadProps(__spreadValues({}, props), { data: liveData })));
2810
2902
  };
2811
2903
  const TinaDataProvider = ({
2812
2904
  children,
@@ -2849,7 +2941,7 @@ Document
2849
2941
  });
2850
2942
  React__default["default"].useEffect(() => {
2851
2943
  onPayloadStateChange({ payload, isLoading });
2852
- }, [JSON.stringify(payload)]);
2944
+ }, [JSON.stringify(payload), isLoading]);
2853
2945
  return isLoading ? /* @__PURE__ */ React__default["default"].createElement(Loader, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)) : null;
2854
2946
  };
2855
2947
  const Loader = (props) => {
@@ -3084,210 +3176,70 @@ This will work when developing locally but NOT when deployed to production.
3084
3176
  return elem(conf);
3085
3177
  }) : elem(DefaultContext);
3086
3178
  }
3087
- function BiEdit(props) {
3088
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
3089
- }
3090
- function BiExit(props) {
3091
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
3092
- }
3093
- function BiLinkExternal(props) {
3094
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z" } }, { "tag": "path", "attr": { "d": "M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z" } }] })(props);
3095
- }
3096
- function BiLogIn(props) {
3097
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3098
- }
3099
- function BiLogOut(props) {
3100
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3101
- }
3102
3179
  function ImFilesEmpty(props) {
3103
3180
  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
3104
3181
  }
3105
- function VscOpenPreview(props) {
3106
- return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
3107
- }
3108
- class TinaAdminApi {
3109
- constructor(TinaApi) {
3110
- this.api = TinaApi;
3111
- }
3112
- async fetchCollections() {
3113
- const response = await this.api.request(`query{ getCollections { label, name } }`, { variables: {} });
3114
- return response;
3115
- }
3116
- async fetchCollection(collectionName, includeDocuments) {
3117
- const response = await this.api.request(`
3118
- query($collection: String!, $includeDocuments: Boolean!){
3119
- getCollection(collection: $collection){
3120
- name
3121
- label
3122
- format
3123
- templates
3124
- documents @include(if: $includeDocuments) {
3125
- totalCount
3126
- edges {
3127
- node {
3128
- ... on Document {
3129
- sys {
3130
- template
3131
- breadcrumbs
3132
- path
3133
- basename
3134
- relativePath
3135
- filename
3136
- extension
3137
- }
3138
- }
3139
- }
3140
- }
3141
- }
3142
- }
3143
- }`, { variables: { collection: collectionName, includeDocuments } });
3144
- return response;
3145
- }
3146
- async fetchDocument(collectionName, relativePath) {
3147
- const response = await this.api.request(`
3148
- query($collection: String!, $relativePath: String!) {
3149
- getDocument(collection:$collection, relativePath:$relativePath) {
3150
- ... on Document {
3151
- form
3152
- values
3153
- }
3154
- }
3155
- }`, { variables: { collection: collectionName, relativePath } });
3156
- return response;
3157
- }
3158
- async fetchDocumentFields() {
3159
- const response = await this.api.request(`query { getDocumentFields }`, { variables: {} });
3160
- return response;
3161
- }
3162
- async createDocument(collectionName, relativePath, params) {
3163
- const response = await this.api.request(`#graphql
3164
- mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
3165
- createDocument(
3166
- collection: $collection,
3167
- relativePath: $relativePath,
3168
- params: $params
3169
- ){__typename}
3170
- }`, {
3171
- variables: {
3172
- collection: collectionName,
3173
- relativePath,
3174
- params
3175
- }
3176
- });
3177
- return response;
3178
- }
3179
- async updateDocument(collectionName, relativePath, params) {
3180
- const response = await this.api.request(`#graphql
3181
- mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
3182
- updateDocument(
3183
- collection: $collection,
3184
- relativePath: $relativePath,
3185
- params: $params
3186
- ){__typename}
3187
- }`, {
3188
- variables: {
3189
- collection: collectionName,
3190
- relativePath,
3191
- params
3192
- }
3193
- });
3194
- return response;
3195
- }
3196
- }
3197
3182
  const useGetCollections = (cms) => {
3198
- const api = new TinaAdminApi(cms.api.tina);
3199
- const [collections, setCollections] = React.useState([]);
3183
+ const api = new TinaAdminApi(cms);
3184
+ const [info, setInfo] = React.useState({ collections: [], loading: true, error: false });
3200
3185
  React.useEffect(() => {
3201
3186
  const fetchCollections = async () => {
3202
3187
  const response = await api.fetchCollections();
3203
- setCollections(response.getCollections);
3188
+ setInfo({
3189
+ collections: response.getCollections,
3190
+ loading: false,
3191
+ error: false
3192
+ });
3204
3193
  };
3205
3194
  fetchCollections();
3206
3195
  }, [cms]);
3207
- return collections;
3196
+ return info;
3208
3197
  };
3209
3198
  const GetCollections = ({ cms, children }) => {
3210
- const collections = useGetCollections(cms);
3199
+ const { collections, loading, error } = useGetCollections(cms);
3211
3200
  if (!collections)
3212
3201
  return null;
3213
- return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections));
3202
+ return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections, loading, error));
3203
+ };
3204
+ const slugify = (text) => {
3205
+ return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
3214
3206
  };
3215
3207
  const Sidebar = ({ cms }) => {
3216
- const { setEdit } = sharedctx.useEditState();
3217
- const logout2 = () => setEdit(false);
3208
+ const screens = cms.plugins.getType("screen").all();
3218
3209
  return /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
3219
3210
  cms
3220
- }, (collections) => /* @__PURE__ */ React__default["default"].createElement("div", {
3221
- className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
3222
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3223
- className: "border-b border-gray-200"
3224
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
3225
- as: "div",
3226
- className: "relative block"
3227
- }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3228
- className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
3229
- }, /* @__PURE__ */ React__default["default"].createElement("span", {
3230
- className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
3231
- }, /* @__PURE__ */ React__default["default"].createElement("svg", {
3232
- viewBox: "0 0 32 32",
3233
- fill: "#EC4815",
3234
- xmlns: "http://www.w3.org/2000/svg",
3235
- className: "w-10 h-auto -ml-1"
3236
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3237
- d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
3238
- }), /* @__PURE__ */ React__default["default"].createElement("path", {
3239
- d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
3240
- })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin")), /* @__PURE__ */ React__default["default"].createElement("svg", {
3241
- width: "20",
3242
- height: "20",
3243
- viewBox: "0 0 20 20",
3244
- fill: "none",
3245
- xmlns: "http://www.w3.org/2000/svg",
3246
- className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
3247
- }, /* @__PURE__ */ React__default["default"].createElement("g", {
3248
- opacity: "0.3"
3249
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3250
- d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
3251
- fill: "currentColor"
3252
- })))), /* @__PURE__ */ React__default["default"].createElement("div", {
3253
- className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
3254
- }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3255
- enter: "transition duration-150 ease-out",
3256
- enterFrom: "transform opacity-0 -translate-y-2",
3257
- enterTo: "transform opacity-100 translate-y-0",
3258
- leave: "transition duration-75 ease-in",
3259
- leaveFrom: "transform opacity-100 translate-y-0",
3260
- leaveTo: "transform opacity-0 -translate-y-2"
3261
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
3262
- className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
3263
- }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("a", {
3264
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
3265
- href: "/"
3266
- }, /* @__PURE__ */ React__default["default"].createElement(VscOpenPreview, {
3267
- className: "w-6 h-auto mr-1.5 text-blue-400"
3268
- }), " ", "View Website")), /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, null, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
3269
- className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
3270
- onClick: () => logout2()
3271
- }, /* @__PURE__ */ React__default["default"].createElement(BiExit, {
3272
- className: "w-6 h-auto mr-1.5 text-blue-400"
3273
- }), " ", "Log out")))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
3274
- className: "px-6 py-7 flex-1"
3275
- }, /* @__PURE__ */ React__default["default"].createElement("h4", {
3276
- className: "uppercase font-bold text-sm mb-3"
3277
- }, "Collections"), /* @__PURE__ */ React__default["default"].createElement("ul", {
3278
- className: "flex flex-col gap-4"
3279
- }, collections.map((collection) => {
3280
- return /* @__PURE__ */ React__default["default"].createElement("li", {
3281
- key: `${collection.name}-link`
3282
- }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
3283
- className: ({ isActive }) => {
3284
- return `text-lg tracking-wide ${isActive ? "text-blue-600" : ""} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3285
- },
3286
- to: `/admin/collections/${collection.name}`
3287
- }, /* @__PURE__ */ React__default["default"].createElement(ImFilesEmpty, {
3288
- className: "mr-2 h-6 opacity-80 w-auto"
3289
- }), " ", collection.label));
3290
- })))));
3211
+ }, (collections, loading, error) => /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
3212
+ sidebarWidth: 360,
3213
+ showCollections: true,
3214
+ collectionsInfo: {
3215
+ collections,
3216
+ loading,
3217
+ error
3218
+ },
3219
+ screens,
3220
+ contentCreators: [],
3221
+ RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3222
+ label: view.name,
3223
+ to: `screens/${slugify(view.name)}`,
3224
+ Icon: view.Icon ? view.Icon : ImFilesEmpty
3225
+ }),
3226
+ RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
3227
+ label: collection.label,
3228
+ to: `collections/${collection.name}`,
3229
+ Icon: ImFilesEmpty
3230
+ })
3231
+ }));
3232
+ };
3233
+ const SidebarLink = (props) => {
3234
+ const { to, label, Icon } = props;
3235
+ return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.NavLink, {
3236
+ className: ({ isActive }) => {
3237
+ return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
3238
+ },
3239
+ to
3240
+ }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
3241
+ className: "mr-2 h-6 opacity-80 w-auto"
3242
+ }), " ", label);
3291
3243
  };
3292
3244
  const GetCMS = ({ children }) => {
3293
3245
  try {
@@ -3297,6 +3249,21 @@ This will work when developing locally but NOT when deployed to production.
3297
3249
  return null;
3298
3250
  }
3299
3251
  };
3252
+ function BiEdit(props) {
3253
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
3254
+ }
3255
+ function BiExit(props) {
3256
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
3257
+ }
3258
+ function BiLogIn(props) {
3259
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3260
+ }
3261
+ function BiLogOut(props) {
3262
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
3263
+ }
3264
+ function BiPlus(props) {
3265
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
3266
+ }
3300
3267
  function MdOutlineArrowBack(props) {
3301
3268
  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
3302
3269
  }
@@ -3365,25 +3332,50 @@ This will work when developing locally but NOT when deployed to production.
3365
3332
  className: "w-6 h-auto mr-1.5 opacity-80"
3366
3333
  }), " Log out"));
3367
3334
  };
3368
- const DashboardPage = () => {
3335
+ const PageWrapper = ({
3336
+ children
3337
+ }) => {
3369
3338
  return /* @__PURE__ */ React__default["default"].createElement("div", {
3370
- className: "h-screen overflow-y-auto flex flex-col justify-start items-stretch"
3371
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3372
- className: "flex-0 px-6 pt-16 pb-10 w-full flex justify-center bg-white border-b border-gray-150"
3373
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3374
- className: "max-w-screen-md w-full"
3375
- }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3376
- className: "text-4xl"
3377
- }, "Welcome to Tina CMS."))), /* @__PURE__ */ React__default["default"].createElement("div", {
3378
- className: "w-full px-6 py-10 flex justify-center"
3379
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3380
- className: "max-w-screen-md w-full"
3381
- }, /* @__PURE__ */ React__default["default"].createElement("p", {
3382
- className: "text-gray-700 text-lg"
3383
- }, "This is your dashboard for editing or creating content. Select a collection on the left to begin."))));
3339
+ className: "relative left-0 w-full h-full bg-gray-50 shadow-2xl overflow-hidden transition-opacity duration-300 ease-out flex flex-col opacity-100"
3340
+ }, children);
3341
+ };
3342
+ const PageHeader = ({
3343
+ isLocalMode,
3344
+ children
3345
+ }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3346
+ className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
3347
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3348
+ className: "w-full mx-auto max-w-screen-xl"
3349
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3350
+ className: "w-full flex justify-between items-end"
3351
+ }, children))));
3352
+ const PageBody = ({
3353
+ children
3354
+ }) => /* @__PURE__ */ React__default["default"].createElement("div", {
3355
+ className: "py-10 px-12"
3356
+ }, children);
3357
+ const PageBodyNarrow = ({
3358
+ children
3359
+ }) => /* @__PURE__ */ React__default["default"].createElement("div", {
3360
+ className: "py-10 px-12"
3361
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3362
+ className: "w-full mx-auto max-w-screen-xl"
3363
+ }, children));
3364
+ const DashboardPage = () => {
3365
+ return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3366
+ var _a, _b;
3367
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
3368
+ isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
3369
+ }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3370
+ className: "text-2xl text-gray-700"
3371
+ }, "Welcome to Tina!")), /* @__PURE__ */ React__default["default"].createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
3372
+ });
3384
3373
  };
3374
+ function FiMoreVertical(props) {
3375
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" } }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" } }] })(props);
3376
+ }
3385
3377
  const useGetCollection = (cms, collectionName, includeDocuments = true) => {
3386
- const api = new TinaAdminApi(cms.api.tina);
3378
+ const api = new TinaAdminApi(cms);
3387
3379
  const [collection, setCollection] = React.useState(void 0);
3388
3380
  React.useEffect(() => {
3389
3381
  const fetchCollection = async () => {
@@ -3410,22 +3402,11 @@ This will work when developing locally but NOT when deployed to production.
3410
3402
  return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
3411
3403
  as: "div",
3412
3404
  className: "relative inline-block text-left"
3413
- }, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3414
- className: "inline-flex items-center px-8 py-2.5 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out",
3415
- style: { background: "#0084FF" }
3416
- }, "Create New", /* @__PURE__ */ React__default["default"].createElement("svg", {
3417
- width: "20",
3418
- height: "20",
3419
- viewBox: "0 0 20 20",
3420
- fill: "none",
3421
- xmlns: "http://www.w3.org/2000/svg",
3422
- className: `ml-1 flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
3423
- }, /* @__PURE__ */ React__default["default"].createElement("g", {
3424
- opacity: "1.0"
3425
- }, /* @__PURE__ */ React__default["default"].createElement("path", {
3426
- d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
3427
- fill: "currentColor"
3428
- }))))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3405
+ }, () => /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3406
+ className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
3407
+ }, "Create New ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
3408
+ className: "w-5 h-full ml-1 opacity-70"
3409
+ }))), /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3429
3410
  as: React.Fragment,
3430
3411
  enter: "transition ease-out duration-100",
3431
3412
  enterFrom: "transform opacity-0 scale-95",
@@ -3440,13 +3421,13 @@ This will work when developing locally but NOT when deployed to production.
3440
3421
  }, templates.map((template) => /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, {
3441
3422
  key: `${template.label}-${template.name}`
3442
3423
  }, ({ active }) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3443
- to: `${location.pathname}/${template.name}/new`,
3424
+ to: `${template.name}/new`,
3444
3425
  className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
3445
3426
  }, template.label))))))));
3446
3427
  };
3447
3428
  const CollectionListPage = () => {
3448
- const location2 = reactRouterDom.useLocation();
3449
3429
  const { collectionName } = reactRouterDom.useParams();
3430
+ const navigate = reactRouterDom.useNavigate();
3450
3431
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3451
3432
  const plugins = cms.plugins.all("tina-admin");
3452
3433
  const routeMapping = plugins.find(({ name }) => name === "route-mapping");
@@ -3455,68 +3436,117 @@ This will work when developing locally but NOT when deployed to production.
3455
3436
  collectionName,
3456
3437
  includeDocuments: true
3457
3438
  }, (collection) => {
3439
+ var _a, _b;
3458
3440
  const totalCount = collection.documents.totalCount;
3459
3441
  const documents = collection.documents.edges;
3460
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3461
- className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
3462
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3463
- className: "max-w-screen-md w-full"
3464
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3465
- className: "w-full flex justify-between items-end"
3466
- }, /* @__PURE__ */ React__default["default"].createElement("h3", {
3467
- className: "text-3xl"
3442
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
3443
+ isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
3444
+ }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
3445
+ className: "text-2xl text-gray-700"
3468
3446
  }, collection.label), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3469
- to: `${location2.pathname}/new`,
3470
- className: "inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-out",
3471
- style: { background: "#0084FF" }
3472
- }, "Create New"), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
3447
+ to: `new`,
3448
+ className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
3449
+ }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
3450
+ className: "w-5 h-full ml-1 opacity-70"
3451
+ })), collection.templates && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
3473
3452
  templates: collection.templates
3474
- })), totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
3475
- className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
3476
- }, /* @__PURE__ */ React__default["default"].createElement("table", {
3477
- className: "min-w-full"
3453
+ }))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
3454
+ className: "w-full mx-auto max-w-screen-xl"
3455
+ }, totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("table", {
3456
+ className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
3478
3457
  }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
3479
- className: "bg-white divide-y divide-gray-150"
3458
+ className: "divide-y divide-gray-150"
3480
3459
  }, documents.map((document) => {
3481
- const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
3460
+ const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
3482
3461
  return /* @__PURE__ */ React__default["default"].createElement("tr", {
3483
- key: document.node.sys.relativePath
3462
+ key: `document-${document.node.sys.filename}`,
3463
+ className: ""
3484
3464
  }, /* @__PURE__ */ React__default["default"].createElement("td", {
3485
- className: "px-5 py-3 whitespace-nowrap"
3486
- }, /* @__PURE__ */ React__default["default"].createElement("span", {
3487
- className: "block text-xs mb-0.5 text-gray-400 uppercase"
3488
- }, "Filename"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3489
- to: `${location2.pathname}/${document.node.sys.filename}`,
3490
- className: "h-5 leading-5 flex max-w-xs"
3465
+ className: "px-6 py-2 whitespace-nowrap"
3466
+ }, overrideRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
3467
+ className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
3468
+ href: `${overrideRoute}`
3469
+ }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3470
+ className: "inline-block h-6 w-auto opacity-70"
3471
+ }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
3472
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3473
+ }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
3474
+ className: "h-5 leading-5 block whitespace-nowrap"
3475
+ }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3476
+ className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
3477
+ to: `${document.node.sys.filename}`
3478
+ }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3479
+ className: "inline-block h-6 w-auto opacity-70"
3480
+ }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
3481
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3482
+ }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
3483
+ className: "h-5 leading-5 block whitespace-nowrap"
3484
+ }, document.node.sys.filename)))), /* @__PURE__ */ React__default["default"].createElement("td", {
3485
+ className: "px-6 py-4 whitespace-nowrap"
3491
3486
  }, /* @__PURE__ */ React__default["default"].createElement("span", {
3492
- className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
3493
- }, document.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
3494
- className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
3495
- }, document.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
3496
- className: "px-5 py-3 whitespace-nowrap"
3487
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3488
+ }, "Extension"), /* @__PURE__ */ React__default["default"].createElement("span", {
3489
+ className: "h-5 leading-5 block text-sm font-medium text-gray-900"
3490
+ }, document.node.sys.extension)), /* @__PURE__ */ React__default["default"].createElement("td", {
3491
+ className: "px-6 py-4 whitespace-nowrap"
3497
3492
  }, /* @__PURE__ */ React__default["default"].createElement("span", {
3498
- className: "block text-xs mb-0.5 text-gray-400 uppercase"
3493
+ className: "block text-xs text-gray-400 mb-1 uppercase"
3499
3494
  }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
3500
- className: "h-5 block leading-5 font-regular text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-500"
3501
- }, document.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
3502
- className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
3503
- }, livesiteRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
3504
- href: livesiteRoute,
3505
- className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full transition-all ease-out duration-150 text-gray-500 hover:text-blue-500"
3506
- }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
3507
- className: "inline-block h-5 w-auto opacity-70"
3508
- }), " ", "View"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3509
- to: `${location2.pathname}/${document.node.sys.filename}`,
3510
- className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full border border-gray-150 transition-all ease-out duration-150 text-gray-700 hover:bg-gray-50 hover:text-blue-500"
3511
- }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
3512
- className: "inline-block h-5 w-auto opacity-70"
3513
- }), " ", "Edit")));
3514
- }))))));
3495
+ className: "h-5 leading-5 block text-sm font-medium text-gray-900"
3496
+ }, document.node.sys.template)), overrideRoute && /* @__PURE__ */ React__default["default"].createElement("td", {
3497
+ className: "w-0"
3498
+ }, /* @__PURE__ */ React__default["default"].createElement(OverflowMenu, {
3499
+ items: [
3500
+ {
3501
+ label: "Edit in Admin",
3502
+ icon: BiEdit,
3503
+ onClick: () => {
3504
+ navigate(`${document.node.sys.filename}`, { replace: true });
3505
+ }
3506
+ }
3507
+ ]
3508
+ })));
3509
+ })))))));
3515
3510
  });
3516
3511
  });
3517
3512
  };
3513
+ const OverflowMenu = ({ items = [] }) => {
3514
+ if (items.length === 0)
3515
+ return null;
3516
+ return /* @__PURE__ */ React__default["default"].createElement(react.Menu, null, ({ open }) => /* @__PURE__ */ React__default["default"].createElement("div", {
3517
+ className: "relative"
3518
+ }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Button, {
3519
+ className: `flex-1 group px-5 py-3 flex justify-between items-center transition-all duration-300 ease-in-out transform`
3520
+ }, /* @__PURE__ */ React__default["default"].createElement(FiMoreVertical, {
3521
+ className: `flex-0 w-6 h-full inline-block text-gray-400 transition-all duration-300 ease-in-out transform ${open ? `opacity-100 text-blue-500` : `opacity-70 group-hover:opacity-100`}`
3522
+ })), /* @__PURE__ */ React__default["default"].createElement("div", {
3523
+ className: "transform translate-y-full absolute bottom-2 right-5 z-50"
3524
+ }, /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
3525
+ enter: "transition duration-150 ease-out",
3526
+ enterFrom: "transform opacity-0 -translate-y-2",
3527
+ enterTo: "transform opacity-100 translate-y-0",
3528
+ leave: "transition duration-75 ease-in",
3529
+ leaveFrom: "transform opacity-100 translate-y-0",
3530
+ leaveTo: "transform opacity-0 -translate-y-2"
3531
+ }, /* @__PURE__ */ React__default["default"].createElement(react.Menu.Items, {
3532
+ className: "bg-white border border-gray-150 rounded-lg shadow-lg"
3533
+ }, items.map((item) => {
3534
+ const Icon = item.icon ? item.icon : BiExit;
3535
+ return /* @__PURE__ */ React__default["default"].createElement(react.Menu.Item, {
3536
+ key: `menu-item-${item.label}`
3537
+ }, ({ active }) => /* @__PURE__ */ React__default["default"].createElement("button", {
3538
+ className: `w-full text-base px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 ${active && "text-blue-400 bg-gray-50 opacity-100"}`,
3539
+ onClick: item.onClick
3540
+ }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
3541
+ className: "w-6 h-auto mr-2 text-blue-400"
3542
+ }), " ", item.label));
3543
+ }))))));
3544
+ };
3545
+ function HiChevronRight(props) {
3546
+ return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
3547
+ }
3518
3548
  const useGetDocumentFields = (cms, collectionName, templateName) => {
3519
- const api = new TinaAdminApi(cms.api.tina);
3549
+ const api = new TinaAdminApi(cms);
3520
3550
  const [info, setInfo] = React.useState({
3521
3551
  collection: void 0,
3522
3552
  template: void 0,
@@ -3561,7 +3591,7 @@ This will work when developing locally but NOT when deployed to production.
3561
3591
  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
3562
3592
  };
3563
3593
  const createDocument = async (cms, collection, template, mutationInfo, values) => {
3564
- const api = new TinaAdminApi(cms.api.tina);
3594
+ const api = new TinaAdminApi(cms);
3565
3595
  const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
3566
3596
  const { includeCollection, includeTemplate } = mutationInfo;
3567
3597
  const params = transformDocumentIntoMutationRequestPayload(__spreadValues(__spreadValues({
@@ -3574,13 +3604,24 @@ This will work when developing locally but NOT when deployed to production.
3574
3604
  };
3575
3605
  const CollectionCreatePage = () => {
3576
3606
  const { collectionName, templateName } = reactRouterDom.useParams();
3577
- const navigate = reactRouterDom.useNavigate();
3578
3607
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
3579
3608
  cms,
3580
3609
  collectionName,
3581
3610
  templateName
3582
- }, ({ collection, template, fields, mutationInfo }) => {
3583
- const form = new toolkit.Form({
3611
+ }, ({ collection, template, fields, mutationInfo }) => /* @__PURE__ */ React__default["default"].createElement(RenderForm$1, {
3612
+ cms,
3613
+ collection,
3614
+ template,
3615
+ fields,
3616
+ mutationInfo
3617
+ })));
3618
+ };
3619
+ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
3620
+ var _a, _b;
3621
+ const navigate = reactRouterDom.useNavigate();
3622
+ const [formIsPristine, setFormIsPristine] = React.useState(true);
3623
+ const form = React.useMemo(() => {
3624
+ return new toolkit.Form({
3584
3625
  id: "create-form",
3585
3626
  label: "form",
3586
3627
  fields: [
@@ -3595,22 +3636,34 @@ This will work when developing locally but NOT when deployed to production.
3595
3636
  ],
3596
3637
  onSubmit: async (values) => {
3597
3638
  await createDocument(cms, collection, template, mutationInfo, values);
3598
- navigate(`/admin/collections/${collection.name}`);
3639
+ navigate(`/collections/${collection.name}`);
3599
3640
  }
3600
3641
  });
3601
- const formLabel = template ? `${collection.label} - Create New ${template.label}` : `${collection.label} - Create New`;
3602
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3603
- className: "w-full h-screen"
3604
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3605
- className: "flex flex-col items-center w-full flex-1"
3606
- }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
3607
- label: formLabel,
3608
- form
3609
- })));
3610
- }));
3642
+ }, [cms, collection, template, fields, mutationInfo]);
3643
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3644
+ className: "py-4 px-20 border-b border-gray-200 bg-white"
3645
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3646
+ className: "max-w-form mx-auto"
3647
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3648
+ className: "mb-2"
3649
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
3650
+ className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
3651
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3652
+ to: `/collections/${collection.name}`,
3653
+ className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
3654
+ }, collection.label), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
3655
+ className: "inline-block -mt-0.5 opacity-50"
3656
+ })), /* @__PURE__ */ React__default["default"].createElement("span", {
3657
+ className: "text-xl text-gray-700 font-medium leading-tight"
3658
+ }, "Create New")), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
3659
+ pristine: formIsPristine
3660
+ }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
3661
+ form,
3662
+ onPristineChange: setFormIsPristine
3663
+ })));
3611
3664
  };
3612
3665
  const useGetDocument = (cms, collectionName, relativePath) => {
3613
- const api = new TinaAdminApi(cms.api.tina);
3666
+ const api = new TinaAdminApi(cms);
3614
3667
  const [document, setDocument] = React.useState(void 0);
3615
3668
  React.useEffect(() => {
3616
3669
  const fetchDocument = async () => {
@@ -3634,7 +3687,7 @@ This will work when developing locally but NOT when deployed to production.
3634
3687
  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document));
3635
3688
  };
3636
3689
  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
3637
- const api = new TinaAdminApi(cms.api.tina);
3690
+ const api = new TinaAdminApi(cms);
3638
3691
  const { includeCollection, includeTemplate } = mutationInfo;
3639
3692
  const params = transformDocumentIntoMutationRequestPayload(values, {
3640
3693
  includeCollection,
@@ -3644,7 +3697,6 @@ This will work when developing locally but NOT when deployed to production.
3644
3697
  };
3645
3698
  const CollectionUpdatePage = () => {
3646
3699
  const { collectionName, filename } = reactRouterDom.useParams();
3647
- const navigate = reactRouterDom.useNavigate();
3648
3700
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
3649
3701
  cms,
3650
3702
  collectionName
@@ -3654,28 +3706,77 @@ This will work when developing locally but NOT when deployed to production.
3654
3706
  cms,
3655
3707
  collectionName: collection.name,
3656
3708
  relativePath
3657
- }, (document) => {
3658
- const form = new toolkit.Form({
3659
- id: "update-form",
3660
- label: "form",
3661
- fields: document.form.fields,
3662
- initialValues: document.values,
3663
- onSubmit: async (values) => {
3664
- await updateDocument(cms, relativePath, collection, mutationInfo, values);
3665
- navigate(`/collections/${collection.name}`);
3666
- }
3667
- });
3668
- return /* @__PURE__ */ React__default["default"].createElement("div", {
3669
- className: "w-full h-screen"
3670
- }, /* @__PURE__ */ React__default["default"].createElement("div", {
3671
- className: "flex flex-col items-center w-full flex-1"
3672
- }, /* @__PURE__ */ React__default["default"].createElement(toolkit.FullscreenFormBuilder, {
3673
- label: collection.label + ` - ` + filename,
3674
- form
3675
- })));
3676
- });
3709
+ }, (document) => /* @__PURE__ */ React__default["default"].createElement(RenderForm, {
3710
+ cms,
3711
+ document,
3712
+ filename,
3713
+ relativePath,
3714
+ collection,
3715
+ mutationInfo
3716
+ }));
3677
3717
  }));
3678
3718
  };
3719
+ const RenderForm = ({
3720
+ cms,
3721
+ document,
3722
+ filename,
3723
+ relativePath,
3724
+ collection,
3725
+ mutationInfo
3726
+ }) => {
3727
+ var _a, _b;
3728
+ const navigate = reactRouterDom.useNavigate();
3729
+ const [formIsPristine, setFormIsPristine] = React.useState(true);
3730
+ const form = React.useMemo(() => {
3731
+ return new toolkit.Form({
3732
+ id: "update-form",
3733
+ label: "form",
3734
+ fields: document.form.fields,
3735
+ initialValues: document.values,
3736
+ onSubmit: async (values) => {
3737
+ await updateDocument(cms, relativePath, collection, mutationInfo, values);
3738
+ navigate(`/collections/${collection.name}`);
3739
+ }
3740
+ });
3741
+ }, [cms, document, relativePath, collection, mutationInfo]);
3742
+ return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3743
+ className: "py-4 px-20 border-b border-gray-200 bg-white"
3744
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3745
+ className: "max-w-form mx-auto"
3746
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3747
+ className: "mb-2"
3748
+ }, /* @__PURE__ */ React__default["default"].createElement("span", {
3749
+ className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
3750
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
3751
+ to: `/collections/${collection.name}`,
3752
+ className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
3753
+ }, collection.label), /* @__PURE__ */ React__default["default"].createElement(HiChevronRight, {
3754
+ className: "inline-block -mt-0.5 opacity-50"
3755
+ })), /* @__PURE__ */ React__default["default"].createElement("span", {
3756
+ className: "text-xl text-gray-700 font-medium leading-tight"
3757
+ }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormStatus, {
3758
+ pristine: formIsPristine
3759
+ }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
3760
+ form,
3761
+ onPristineChange: setFormIsPristine
3762
+ })));
3763
+ };
3764
+ const ScreenPage = () => {
3765
+ const { screenName } = reactRouterDom.useParams();
3766
+ return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3767
+ var _a, _b;
3768
+ const screens = cms.plugins.getType("screen").all();
3769
+ const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
3770
+ return /* @__PURE__ */ React__default["default"].createElement("div", {
3771
+ className: "relative w-full h-full flex flex-col items-stretch justify-between"
3772
+ }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
3773
+ className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
3774
+ }, /* @__PURE__ */ React__default["default"].createElement(selectedScreen.Component, {
3775
+ close: () => {
3776
+ }
3777
+ })));
3778
+ });
3779
+ };
3679
3780
  const Redirect = () => {
3680
3781
  React__default["default"].useEffect(() => {
3681
3782
  if (window) {
@@ -3696,34 +3797,41 @@ This will work when developing locally but NOT when deployed to production.
3696
3797
  return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
3697
3798
  const isTinaAdminEnabled = cms.flags.get("tina-admin");
3698
3799
  if (isTinaAdminEnabled) {
3699
- return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
3800
+ return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
3801
+ basename: "/admin"
3802
+ }, /* @__PURE__ */ React__default["default"].createElement("div", {
3700
3803
  className: "flex items-stretch h-screen overflow-hidden"
3701
3804
  }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
3702
3805
  cms
3703
3806
  }), /* @__PURE__ */ React__default["default"].createElement("div", {
3704
3807
  className: "flex-1"
3705
3808
  }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3706
- path: "/admin/collections/:collectionName/new",
3809
+ path: "collections/:collectionName/new",
3707
3810
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
3708
3811
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3709
- path: "/admin/collections/:collectionName/:templateName/new",
3812
+ path: "collections/:collectionName/:templateName/new",
3710
3813
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
3711
3814
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3712
- path: "/admin/collections/:collectionName/:filename",
3815
+ path: "collections/:collectionName/:filename",
3713
3816
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
3714
3817
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3715
- path: "/admin/collections/:collectionName",
3818
+ path: "collections/:collectionName",
3716
3819
  element: /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)
3717
3820
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3718
- path: "/admin",
3821
+ path: "screens/:screenName",
3822
+ element: /* @__PURE__ */ React__default["default"].createElement(ScreenPage, null)
3823
+ }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3824
+ path: "/",
3719
3825
  element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
3720
3826
  }))))));
3721
3827
  } else {
3722
- return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3723
- path: "/admin/logout",
3828
+ return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
3829
+ basename: "/admin"
3830
+ }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3831
+ path: "logout",
3724
3832
  element: /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)
3725
3833
  }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
3726
- path: "/admin",
3834
+ path: "/",
3727
3835
  element: /* @__PURE__ */ React__default["default"].createElement(Redirect, null)
3728
3836
  }))));
3729
3837
  }