@makeswift/runtime 0.29.0-canary.25 → 0.29.0-canary.26

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 (12) hide show
  1. package/dist/cjs/api/graphql-api-client.js +1 -1
  2. package/dist/cjs/api/rest-api-client.js +1 -1
  3. package/dist/cjs/api-handler/handlers/manifest.js +1 -1
  4. package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js +235 -26
  5. package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js.map +1 -1
  6. package/dist/esm/api/graphql-api-client.js +1 -1
  7. package/dist/esm/api/rest-api-client.js +1 -1
  8. package/dist/esm/api-handler/handlers/manifest.js +1 -1
  9. package/dist/esm/runtimes/react/components/preview-switcher/preview-toolbar.js +236 -27
  10. package/dist/esm/runtimes/react/components/preview-switcher/preview-toolbar.js.map +1 -1
  11. package/dist/types/runtimes/react/components/preview-switcher/preview-toolbar.d.ts.map +1 -1
  12. package/package.json +1 -1
package/dist/cjs/api/graphql-api-client.js CHANGED
@@ -27,7 +27,7 @@ class MakeswiftGraphQLApiClient {
27
27
  graphqlClient;
28
28
  constructor({ endpoint }) {
29
29
  this.graphqlClient = new import_client.GraphQLClient(endpoint, {
30
- "makeswift-runtime-version": "0.29.0-canary.25"
30
+ "makeswift-runtime-version": "0.29.0-canary.26"
31
31
  });
32
32
  }
33
33
  async getUnversionedResources({
package/dist/cjs/api/rest-api-client.js CHANGED
@@ -223,7 +223,7 @@ class MakeswiftRestAPIClient {
223
223
  const requestHeaders = new Headers({
224
224
  "x-api-key": this.apiKey,
225
225
  "makeswift-site-api-key": this.apiKey,
226
- "makeswift-runtime-version": "0.29.0-canary.25"
226
+ "makeswift-runtime-version": "0.29.0-canary.26"
227
227
  });
228
228
  if (siteVersion?.token) {
229
229
  requestUrl.searchParams.set("version", siteVersion.version);
package/dist/cjs/api-handler/handlers/manifest.js CHANGED
@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
28
28
  return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
29
29
  }
30
30
  return import_request_response.ApiResponse.json({
31
- version: "0.29.0-canary.25",
31
+ version: "0.29.0-canary.26",
32
32
  interactionMode: true,
33
33
  clientSideNavigation: false,
34
34
  elementFromPoint: false,
package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js CHANGED
@@ -23,48 +23,203 @@ __export(preview_toolbar_exports, {
23
23
  module.exports = __toCommonJS(preview_toolbar_exports);
24
24
  var import_jsx_runtime = require("react/jsx-runtime");
25
25
  var import_react = require("react");
26
- const makeswiftIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC";
27
26
  const styles = `
28
- .exit-preview-container {
27
+ .floating {
29
28
  position: fixed;
30
29
  bottom: 16px;
31
30
  right: 16px;
32
31
  z-index: 2147483647;
32
+
33
+ box-sizing: border-box;
34
+ display: flex;
35
+ align-items: center;
36
+ background: #0f1225;
37
+ border: 1px solid rgba(255, 255, 255, 0.15);
38
+ border-radius: 12px;
39
+ box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);
33
40
  }
34
41
 
35
- .exit-preview-button {
36
- background: #2e2e2e;
37
- padding: 10px 18px 10px 14px;
38
- border: 0px;
39
- border-radius: 32px;
40
- color: #efefef;
41
- box-shadow:
42
- 0 11px 40px 0 rgba(0, 0, 0, 0.25),
43
- 0 2px 10px 0 rgba(0, 0, 0, 0.12);
44
- transition: 150ms;
45
- text-decoration: none;
42
+ .preview-toolbar {
43
+ left: 16px;
44
+ gap: 24px;
45
+ max-width: 600px;
46
+ margin: 0 auto;
47
+ padding: 8px 8px 8px 16px;
46
48
 
47
49
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
48
50
  'Segoe UI Emoji';
49
- font-size: 14px;
51
+ font-size: 13px;
52
+ line-height: 22px;
53
+ }
54
+
55
+ @keyframes slide-in {
56
+ from {
57
+ transform: translateY(15px);
58
+ opacity: 0;
59
+ }
60
+ }
61
+
62
+ @keyframes slide-in-from-left {
63
+ from {
64
+ transform: translateX(-24px);
65
+ opacity: 0;
66
+ }
67
+ }
68
+
69
+ @keyframes slide-in-from-right {
70
+ from {
71
+ transform: translateX(24px);
72
+ opacity: 0;
73
+ }
74
+ }
75
+
76
+ @keyframes slide-out-to-right {
77
+ to {
78
+ transform: translateX(24px);
79
+ opacity: 0;
80
+ }
81
+ }
82
+
83
+ .preview-toolbar.show {
84
+ animation: slide-in 200ms ease-out;
85
+ }
86
+
87
+ .preview-toolbar.expand {
88
+ animation: slide-in-from-right 200ms ease-out;
89
+ }
90
+
91
+ .preview-toolbar.collapse {
92
+ animation: slide-out-to-right 150ms ease-in forwards;
93
+ }
94
+
95
+ .preview-toolbar-collapsed {
96
+ justify-content: center;
97
+ width: 48px;
98
+ height: 48px;
99
+ padding: 0;
50
100
  cursor: pointer;
101
+ animation: slide-in-from-left 200ms ease-out;
102
+ transition: background 150ms;
103
+ }
51
104
 
105
+ .preview-toolbar-collapsed.show {
106
+ animation: slide-in 200ms ease-out;
107
+ }
108
+
109
+ .preview-toolbar-collapsed:focus-visible {
110
+ outline: 2px solid #ffffff;
111
+ outline-offset: 2px;
112
+ }
113
+
114
+ .message {
115
+ flex: 1;
116
+ min-width: 0;
117
+ display: flex;
118
+ align-items: center;
119
+ gap: 12px;
120
+ color: #f2f3f8;
121
+ }
122
+
123
+ .message > .label {
124
+ overflow: hidden;
125
+ text-overflow: ellipsis;
126
+ white-space: nowrap;
127
+ }
128
+
129
+ .actions {
130
+ flex-shrink: 0;
52
131
  display: flex;
53
132
  align-items: center;
54
- gap: 6px;
133
+ gap: 4px;
55
134
  }
56
135
 
57
- .exit-preview-button > .label {
58
- transform: translateY(-1px);
136
+ .toolbar-button {
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ height: 30px;
141
+ border-radius: 6px;
142
+ transition: background 150ms;
143
+ }
144
+
145
+ .toolbar-button:focus-visible {
146
+ outline: 2px solid #ffffff;
147
+ outline-offset: -2px;
59
148
  }
60
149
 
61
- .exit-preview-container:hover > .exit-preview-button {
62
- transform: translateY(-2px);
63
- box-shadow:
64
- 0 15px 40px 0 rgba(0, 0, 0, 0.3),
65
- 0 6px 10px 0 rgba(0, 0, 0, 0.15);
150
+ .preview-toolbar-collapsed:hover,
151
+ .toolbar-button:hover {
152
+ background: #272a3b;
153
+ }
154
+
155
+ .view-live {
156
+ padding: 0 10px;
157
+ color: #ffffff;
158
+ font-weight: 600;
159
+ text-decoration: none;
160
+ }
161
+
162
+ .collapse-button {
163
+ width: 30px;
164
+ padding: 0;
165
+ border: 0;
166
+ background: transparent;
167
+ cursor: pointer;
168
+ }
169
+
170
+ .icon {
171
+ flex-shrink: 0;
66
172
  }
67
173
  `;
174
+ function MakeswiftLogoIcon() {
175
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
176
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
177
+ "path",
178
+ {
179
+ d: "M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z",
180
+ fill: "#EA3BAA"
181
+ }
182
+ ),
183
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
184
+ "path",
185
+ {
186
+ d: "M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z",
187
+ fill: "white"
188
+ }
189
+ )
190
+ ] });
191
+ }
192
+ function CloseIcon() {
193
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
194
+ "path",
195
+ {
196
+ d: "M3 3L9 9M9 3L3 9",
197
+ stroke: "#B8BAC7",
198
+ strokeWidth: "2",
199
+ strokeLinecap: "round",
200
+ strokeLinejoin: "round"
201
+ }
202
+ ) });
203
+ }
204
+ const toolbarAnimationClassName = {
205
+ shown: "show",
206
+ collapsing: "collapse",
207
+ expanding: "expand"
208
+ };
209
+ const SHOWN_STORAGE_KEY = "makeswift-preview-toolbar-shown";
210
+ function readStoredShown() {
211
+ try {
212
+ return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== "false";
213
+ } catch {
214
+ return true;
215
+ }
216
+ }
217
+ function writeStoredShown(shown) {
218
+ try {
219
+ window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown));
220
+ } catch {
221
+ }
222
+ }
68
223
  function PreviewToolbar() {
69
224
  const redirectLiveUrl = (0, import_react.useMemo)(() => {
70
225
  const currentUrl = new URL(window.location.href);
@@ -72,12 +227,66 @@ function PreviewToolbar() {
72
227
  currentUrl.searchParams.set("makeswift-redirect-live", encodeURIComponent(destination));
73
228
  return currentUrl.toString();
74
229
  }, []);
230
+ const [animationState, setAnimationState] = (0, import_react.useState)(
231
+ () => readStoredShown() ? "shown" : "initial-collapsed"
232
+ );
233
+ const expandButtonRef = (0, import_react.useRef)(null);
234
+ const collapseButtonRef = (0, import_react.useRef)(null);
235
+ (0, import_react.useEffect)(() => {
236
+ if (animationState === "collapsed")
237
+ expandButtonRef.current?.focus();
238
+ if (animationState === "expanding")
239
+ collapseButtonRef.current?.focus();
240
+ }, [animationState]);
241
+ const setShown = (shouldShow) => {
242
+ writeStoredShown(shouldShow);
243
+ setAnimationState(shouldShow ? "expanding" : "collapsing");
244
+ };
245
+ const handleAnimationEnd = () => {
246
+ if (animationState === "collapsing")
247
+ setAnimationState("collapsed");
248
+ };
75
249
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
76
250
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: styles } }),
77
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "exit-preview-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "exit-preview-button", href: redirectLiveUrl, children: [
78
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: makeswiftIcon, alt: "Makeswift Logo", width: 18, height: 18 }),
79
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Exit preview" })
80
- ] }) })
251
+ animationState === "initial-collapsed" || animationState === "collapsed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
252
+ "button",
253
+ {
254
+ ref: expandButtonRef,
255
+ type: "button",
256
+ className: `floating preview-toolbar-collapsed ${animationState === "initial-collapsed" ? "show" : ""}`,
257
+ "aria-label": "Expand preview toolbar",
258
+ onClick: () => setShown(true),
259
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MakeswiftLogoIcon, {})
260
+ }
261
+ ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
262
+ "div",
263
+ {
264
+ className: `floating preview-toolbar ${toolbarAnimationClassName[animationState]}`,
265
+ role: "region",
266
+ "aria-label": "Preview mode",
267
+ onAnimationEnd: handleAnimationEnd,
268
+ children: [
269
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message", children: [
270
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MakeswiftLogoIcon, {}),
271
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "You are in preview mode" })
272
+ ] }),
273
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "actions", children: [
274
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "toolbar-button view-live", href: redirectLiveUrl, children: "View live" }),
275
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
276
+ "button",
277
+ {
278
+ ref: collapseButtonRef,
279
+ type: "button",
280
+ className: "toolbar-button collapse-button",
281
+ "aria-label": "Collapse preview toolbar",
282
+ onClick: () => setShown(false),
283
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
284
+ }
285
+ )
286
+ ] })
287
+ ]
288
+ }
289
+ )
81
290
  ] });
82
291
  }
83
292
  // Annotate the CommonJS export names for ESM import in node:
package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nconst makeswiftIcon =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC'\n\nconst styles = `\n.exit-preview-container {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 2147483647;\n}\n\n.exit-preview-button {\n background: #2e2e2e;\n padding: 10px 18px 10px 14px;\n border: 0px;\n border-radius: 32px;\n color: #efefef;\n box-shadow:\n 0 11px 40px 0 rgba(0, 0, 0, 0.25),\n 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n transition: 150ms;\n text-decoration: none;\n\n font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n 'Segoe UI Emoji';\n font-size: 14px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.exit-preview-button > .label {\n transform: translateY(-1px);\n}\n\n.exit-preview-container:hover > .exit-preview-button {\n transform: translateY(-2px);\n box-shadow:\n 0 15px 40px 0 rgba(0, 0, 0, 0.3),\n 0 6px 10px 0 rgba(0, 0, 0, 0.15);\n}\n`\n\nexport function PreviewToolbar() {\n const redirectLiveUrl = useMemo(() => {\n const currentUrl = new URL(window.location.href)\n const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n return currentUrl.toString()\n }, [])\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: styles }} />\n <div className=\"exit-preview-container\">\n <a className=\"exit-preview-button\" href={redirectLiveUrl}>\n <img src={makeswiftIcon} alt=\"Makeswift Logo\" width={18} height={18} />\n <span className=\"label\">Exit preview</span>\n </a>\n </div>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAxDJ,mBAAwB;AAExB,MAAM,gBACJ;AAEF,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CR,SAAS,iBAAiB;AAC/B,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACpD,4CAAC,SAAI,WAAU,0BACb,uDAAC,OAAE,WAAU,uBAAsB,MAAM,iBACvC;AAAA,kDAAC,SAAI,KAAK,eAAe,KAAI,kBAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,MACrE,4CAAC,UAAK,WAAU,SAAQ,0BAAY;AAAA,OACtC,GACF;AAAA,KACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nconst styles = `\n.floating {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 2147483647;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: #0f1225;\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 12px;\n box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);\n}\n\n.preview-toolbar {\n left: 16px;\n gap: 24px;\n max-width: 600px;\n margin: 0 auto;\n padding: 8px 8px 8px 16px;\n\n font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n 'Segoe UI Emoji';\n font-size: 13px;\n line-height: 22px;\n}\n\n@keyframes slide-in {\n from {\n transform: translateY(15px);\n opacity: 0;\n }\n}\n\n@keyframes slide-in-from-left {\n from {\n transform: translateX(-24px);\n opacity: 0;\n }\n}\n\n@keyframes slide-in-from-right {\n from {\n transform: translateX(24px);\n opacity: 0;\n }\n}\n\n@keyframes slide-out-to-right {\n to {\n transform: translateX(24px);\n opacity: 0;\n }\n}\n\n.preview-toolbar.show {\n animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar.expand {\n animation: slide-in-from-right 200ms ease-out;\n}\n\n.preview-toolbar.collapse {\n animation: slide-out-to-right 150ms ease-in forwards;\n}\n\n.preview-toolbar-collapsed {\n justify-content: center;\n width: 48px;\n height: 48px;\n padding: 0;\n cursor: pointer;\n animation: slide-in-from-left 200ms ease-out;\n transition: background 150ms;\n}\n\n.preview-toolbar-collapsed.show {\n animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar-collapsed:focus-visible {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n\n.message {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n gap: 12px;\n color: #f2f3f8;\n}\n\n.message > .label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.toolbar-button {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 30px;\n border-radius: 6px;\n transition: background 150ms;\n}\n\n.toolbar-button:focus-visible {\n outline: 2px solid #ffffff;\n outline-offset: -2px;\n}\n\n.preview-toolbar-collapsed:hover,\n.toolbar-button:hover {\n background: #272a3b;\n}\n\n.view-live {\n padding: 0 10px;\n color: #ffffff;\n font-weight: 600;\n text-decoration: none;\n}\n\n.collapse-button {\n width: 30px;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.icon {\n flex-shrink: 0;\n}\n`\n\nfunction MakeswiftLogoIcon() {\n return (\n <svg className=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z\"\n fill=\"#EA3BAA\"\n />\n <path\n d=\"M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z\"\n fill=\"white\"\n />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg className=\"icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3 3L9 9M9 3L3 9\"\n stroke=\"#B8BAC7\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\ntype AnimationState = 'shown' | 'initial-collapsed' | 'collapsing' | 'collapsed' | 'expanding'\n\nconst toolbarAnimationClassName: Record<\n Exclude<AnimationState, 'initial-collapsed' | 'collapsed'>,\n string\n> = {\n shown: 'show',\n collapsing: 'collapse',\n expanding: 'expand',\n}\n\nconst SHOWN_STORAGE_KEY = 'makeswift-preview-toolbar-shown'\n\nfunction readStoredShown(): boolean {\n try {\n // Throws a SecurityError if session storage is disabled\n return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== 'false'\n } catch {\n return true\n }\n}\n\nfunction writeStoredShown(shown: boolean) {\n try {\n // Throws a SecurityError if session storage is disabled\n window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown))\n } catch {}\n}\n\nexport function PreviewToolbar() {\n const redirectLiveUrl = useMemo(() => {\n const currentUrl = new URL(window.location.href)\n const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n return currentUrl.toString()\n }, [])\n\n const [animationState, setAnimationState] = useState<AnimationState>(() =>\n readStoredShown() ? 'shown' : 'initial-collapsed',\n )\n\n const expandButtonRef = useRef<HTMLButtonElement>(null)\n const collapseButtonRef = useRef<HTMLButtonElement>(null)\n\n // Keep keyboard focus on the control that toggles back to the previous state.\n useEffect(() => {\n if (animationState === 'collapsed') expandButtonRef.current?.focus()\n if (animationState === 'expanding') collapseButtonRef.current?.focus()\n }, [animationState])\n\n const setShown = (shouldShow: boolean) => {\n writeStoredShown(shouldShow)\n setAnimationState(shouldShow ? 'expanding' : 'collapsing')\n }\n\n const handleAnimationEnd = () => {\n if (animationState === 'collapsing') setAnimationState('collapsed')\n }\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: styles }} />\n {animationState === 'initial-collapsed' || animationState === 'collapsed' ? (\n <button\n ref={expandButtonRef}\n type=\"button\"\n className={`floating preview-toolbar-collapsed ${animationState === 'initial-collapsed' ? 'show' : ''}`}\n aria-label=\"Expand preview toolbar\"\n onClick={() => setShown(true)}\n >\n <MakeswiftLogoIcon />\n </button>\n ) : (\n <div\n className={`floating preview-toolbar ${toolbarAnimationClassName[animationState]}`}\n role=\"region\"\n aria-label=\"Preview mode\"\n onAnimationEnd={handleAnimationEnd}\n >\n <div className=\"message\">\n <MakeswiftLogoIcon />\n <span className=\"label\">You are in preview mode</span>\n </div>\n <div className=\"actions\">\n <a className=\"toolbar-button view-live\" href={redirectLiveUrl}>\n View live\n </a>\n <button\n ref={collapseButtonRef}\n type=\"button\"\n className=\"toolbar-button collapse-button\"\n aria-label=\"Collapse preview toolbar\"\n onClick={() => setShown(false)}\n >\n <CloseIcon />\n </button>\n </div>\n </div>\n )}\n </>\n )\n}\n"],"mappings":"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","names":[]}
package/dist/esm/api/graphql-api-client.js CHANGED
@@ -4,7 +4,7 @@ class MakeswiftGraphQLApiClient {
4
4
  graphqlClient;
5
5
  constructor({ endpoint }) {
6
6
  this.graphqlClient = new GraphQLClient(endpoint, {
7
- "makeswift-runtime-version": "0.29.0-canary.25"
7
+ "makeswift-runtime-version": "0.29.0-canary.26"
8
8
  });
9
9
  }
10
10
  async getUnversionedResources({
package/dist/esm/api/rest-api-client.js CHANGED
@@ -188,7 +188,7 @@ class MakeswiftRestAPIClient {
188
188
  const requestHeaders = new Headers({
189
189
  "x-api-key": this.apiKey,
190
190
  "makeswift-site-api-key": this.apiKey,
191
- "makeswift-runtime-version": "0.29.0-canary.25"
191
+ "makeswift-runtime-version": "0.29.0-canary.26"
192
192
  });
193
193
  if (siteVersion?.token) {
194
194
  requestUrl.searchParams.set("version", siteVersion.version);
package/dist/esm/api-handler/handlers/manifest.js CHANGED
@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
8
8
  return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
9
9
  }
10
10
  return ApiResponse.json({
11
- version: "0.29.0-canary.25",
11
+ version: "0.29.0-canary.26",
12
12
  interactionMode: true,
13
13
  clientSideNavigation: false,
14
14
  elementFromPoint: false,
package/dist/esm/runtimes/react/components/preview-switcher/preview-toolbar.js CHANGED
@@ -1,47 +1,202 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { useMemo } from "react";
3
- const makeswiftIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC";
2
+ import { useEffect, useMemo, useRef, useState } from "react";
4
3
  const styles = `
5
- .exit-preview-container {
4
+ .floating {
6
5
  position: fixed;
7
6
  bottom: 16px;
8
7
  right: 16px;
9
8
  z-index: 2147483647;
9
+
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ align-items: center;
13
+ background: #0f1225;
14
+ border: 1px solid rgba(255, 255, 255, 0.15);
15
+ border-radius: 12px;
16
+ box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);
10
17
  }
11
18
 
12
- .exit-preview-button {
13
- background: #2e2e2e;
14
- padding: 10px 18px 10px 14px;
15
- border: 0px;
16
- border-radius: 32px;
17
- color: #efefef;
18
- box-shadow:
19
- 0 11px 40px 0 rgba(0, 0, 0, 0.25),
20
- 0 2px 10px 0 rgba(0, 0, 0, 0.12);
21
- transition: 150ms;
22
- text-decoration: none;
19
+ .preview-toolbar {
20
+ left: 16px;
21
+ gap: 24px;
22
+ max-width: 600px;
23
+ margin: 0 auto;
24
+ padding: 8px 8px 8px 16px;
23
25
 
24
26
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
25
27
  'Segoe UI Emoji';
26
- font-size: 14px;
28
+ font-size: 13px;
29
+ line-height: 22px;
30
+ }
31
+
32
+ @keyframes slide-in {
33
+ from {
34
+ transform: translateY(15px);
35
+ opacity: 0;
36
+ }
37
+ }
38
+
39
+ @keyframes slide-in-from-left {
40
+ from {
41
+ transform: translateX(-24px);
42
+ opacity: 0;
43
+ }
44
+ }
45
+
46
+ @keyframes slide-in-from-right {
47
+ from {
48
+ transform: translateX(24px);
49
+ opacity: 0;
50
+ }
51
+ }
52
+
53
+ @keyframes slide-out-to-right {
54
+ to {
55
+ transform: translateX(24px);
56
+ opacity: 0;
57
+ }
58
+ }
59
+
60
+ .preview-toolbar.show {
61
+ animation: slide-in 200ms ease-out;
62
+ }
63
+
64
+ .preview-toolbar.expand {
65
+ animation: slide-in-from-right 200ms ease-out;
66
+ }
67
+
68
+ .preview-toolbar.collapse {
69
+ animation: slide-out-to-right 150ms ease-in forwards;
70
+ }
71
+
72
+ .preview-toolbar-collapsed {
73
+ justify-content: center;
74
+ width: 48px;
75
+ height: 48px;
76
+ padding: 0;
27
77
  cursor: pointer;
78
+ animation: slide-in-from-left 200ms ease-out;
79
+ transition: background 150ms;
80
+ }
81
+
82
+ .preview-toolbar-collapsed.show {
83
+ animation: slide-in 200ms ease-out;
84
+ }
85
+
86
+ .preview-toolbar-collapsed:focus-visible {
87
+ outline: 2px solid #ffffff;
88
+ outline-offset: 2px;
89
+ }
28
90
 
91
+ .message {
92
+ flex: 1;
93
+ min-width: 0;
29
94
  display: flex;
30
95
  align-items: center;
31
- gap: 6px;
96
+ gap: 12px;
97
+ color: #f2f3f8;
32
98
  }
33
99
 
34
- .exit-preview-button > .label {
35
- transform: translateY(-1px);
100
+ .message > .label {
101
+ overflow: hidden;
102
+ text-overflow: ellipsis;
103
+ white-space: nowrap;
36
104
  }
37
105
 
38
- .exit-preview-container:hover > .exit-preview-button {
39
- transform: translateY(-2px);
40
- box-shadow:
41
- 0 15px 40px 0 rgba(0, 0, 0, 0.3),
42
- 0 6px 10px 0 rgba(0, 0, 0, 0.15);
106
+ .actions {
107
+ flex-shrink: 0;
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 4px;
111
+ }
112
+
113
+ .toolbar-button {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ height: 30px;
118
+ border-radius: 6px;
119
+ transition: background 150ms;
120
+ }
121
+
122
+ .toolbar-button:focus-visible {
123
+ outline: 2px solid #ffffff;
124
+ outline-offset: -2px;
125
+ }
126
+
127
+ .preview-toolbar-collapsed:hover,
128
+ .toolbar-button:hover {
129
+ background: #272a3b;
130
+ }
131
+
132
+ .view-live {
133
+ padding: 0 10px;
134
+ color: #ffffff;
135
+ font-weight: 600;
136
+ text-decoration: none;
137
+ }
138
+
139
+ .collapse-button {
140
+ width: 30px;
141
+ padding: 0;
142
+ border: 0;
143
+ background: transparent;
144
+ cursor: pointer;
145
+ }
146
+
147
+ .icon {
148
+ flex-shrink: 0;
43
149
  }
44
150
  `;
151
+ function MakeswiftLogoIcon() {
152
+ return /* @__PURE__ */ jsxs("svg", { className: "icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
153
+ /* @__PURE__ */ jsx(
154
+ "path",
155
+ {
156
+ d: "M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z",
157
+ fill: "#EA3BAA"
158
+ }
159
+ ),
160
+ /* @__PURE__ */ jsx(
161
+ "path",
162
+ {
163
+ d: "M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z",
164
+ fill: "white"
165
+ }
166
+ )
167
+ ] });
168
+ }
169
+ function CloseIcon() {
170
+ return /* @__PURE__ */ jsx("svg", { className: "icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
171
+ "path",
172
+ {
173
+ d: "M3 3L9 9M9 3L3 9",
174
+ stroke: "#B8BAC7",
175
+ strokeWidth: "2",
176
+ strokeLinecap: "round",
177
+ strokeLinejoin: "round"
178
+ }
179
+ ) });
180
+ }
181
+ const toolbarAnimationClassName = {
182
+ shown: "show",
183
+ collapsing: "collapse",
184
+ expanding: "expand"
185
+ };
186
+ const SHOWN_STORAGE_KEY = "makeswift-preview-toolbar-shown";
187
+ function readStoredShown() {
188
+ try {
189
+ return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== "false";
190
+ } catch {
191
+ return true;
192
+ }
193
+ }
194
+ function writeStoredShown(shown) {
195
+ try {
196
+ window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown));
197
+ } catch {
198
+ }
199
+ }
45
200
  function PreviewToolbar() {
46
201
  const redirectLiveUrl = useMemo(() => {
47
202
  const currentUrl = new URL(window.location.href);
@@ -49,12 +204,66 @@ function PreviewToolbar() {
49
204
  currentUrl.searchParams.set("makeswift-redirect-live", encodeURIComponent(destination));
50
205
  return currentUrl.toString();
51
206
  }, []);
207
+ const [animationState, setAnimationState] = useState(
208
+ () => readStoredShown() ? "shown" : "initial-collapsed"
209
+ );
210
+ const expandButtonRef = useRef(null);
211
+ const collapseButtonRef = useRef(null);
212
+ useEffect(() => {
213
+ if (animationState === "collapsed")
214
+ expandButtonRef.current?.focus();
215
+ if (animationState === "expanding")
216
+ collapseButtonRef.current?.focus();
217
+ }, [animationState]);
218
+ const setShown = (shouldShow) => {
219
+ writeStoredShown(shouldShow);
220
+ setAnimationState(shouldShow ? "expanding" : "collapsing");
221
+ };
222
+ const handleAnimationEnd = () => {
223
+ if (animationState === "collapsing")
224
+ setAnimationState("collapsed");
225
+ };
52
226
  return /* @__PURE__ */ jsxs(Fragment, { children: [
53
227
  /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
54
- /* @__PURE__ */ jsx("div", { className: "exit-preview-container", children: /* @__PURE__ */ jsxs("a", { className: "exit-preview-button", href: redirectLiveUrl, children: [
55
- /* @__PURE__ */ jsx("img", { src: makeswiftIcon, alt: "Makeswift Logo", width: 18, height: 18 }),
56
- /* @__PURE__ */ jsx("span", { className: "label", children: "Exit preview" })
57
- ] }) })
228
+ animationState === "initial-collapsed" || animationState === "collapsed" ? /* @__PURE__ */ jsx(
229
+ "button",
230
+ {
231
+ ref: expandButtonRef,
232
+ type: "button",
233
+ className: `floating preview-toolbar-collapsed ${animationState === "initial-collapsed" ? "show" : ""}`,
234
+ "aria-label": "Expand preview toolbar",
235
+ onClick: () => setShown(true),
236
+ children: /* @__PURE__ */ jsx(MakeswiftLogoIcon, {})
237
+ }
238
+ ) : /* @__PURE__ */ jsxs(
239
+ "div",
240
+ {
241
+ className: `floating preview-toolbar ${toolbarAnimationClassName[animationState]}`,
242
+ role: "region",
243
+ "aria-label": "Preview mode",
244
+ onAnimationEnd: handleAnimationEnd,
245
+ children: [
246
+ /* @__PURE__ */ jsxs("div", { className: "message", children: [
247
+ /* @__PURE__ */ jsx(MakeswiftLogoIcon, {}),
248
+ /* @__PURE__ */ jsx("span", { className: "label", children: "You are in preview mode" })
249
+ ] }),
250
+ /* @__PURE__ */ jsxs("div", { className: "actions", children: [
251
+ /* @__PURE__ */ jsx("a", { className: "toolbar-button view-live", href: redirectLiveUrl, children: "View live" }),
252
+ /* @__PURE__ */ jsx(
253
+ "button",
254
+ {
255
+ ref: collapseButtonRef,
256
+ type: "button",
257
+ className: "toolbar-button collapse-button",
258
+ "aria-label": "Collapse preview toolbar",
259
+ onClick: () => setShown(false),
260
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
261
+ }
262
+ )
263
+ ] })
264
+ ]
265
+ }
266
+ )
58
267
  ] });
59
268
  }
60
269
  export {
package/dist/esm/runtimes/react/components/preview-switcher/preview-toolbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nconst makeswiftIcon =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC'\n\nconst styles = `\n.exit-preview-container {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 2147483647;\n}\n\n.exit-preview-button {\n background: #2e2e2e;\n padding: 10px 18px 10px 14px;\n border: 0px;\n border-radius: 32px;\n color: #efefef;\n box-shadow:\n 0 11px 40px 0 rgba(0, 0, 0, 0.25),\n 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n transition: 150ms;\n text-decoration: none;\n\n font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n 'Segoe UI Emoji';\n font-size: 14px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.exit-preview-button > .label {\n transform: translateY(-1px);\n}\n\n.exit-preview-container:hover > .exit-preview-button {\n transform: translateY(-2px);\n box-shadow:\n 0 15px 40px 0 rgba(0, 0, 0, 0.3),\n 0 6px 10px 0 rgba(0, 0, 0, 0.15);\n}\n`\n\nexport function PreviewToolbar() {\n const redirectLiveUrl = useMemo(() => {\n const currentUrl = new URL(window.location.href)\n const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n return currentUrl.toString()\n }, [])\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: styles }} />\n <div className=\"exit-preview-container\">\n <a className=\"exit-preview-button\" href={redirectLiveUrl}>\n <img src={makeswiftIcon} alt=\"Makeswift Logo\" width={18} height={18} />\n <span className=\"label\">Exit preview</span>\n </a>\n </div>\n </>\n )\n}\n"],"mappings":"AAwDI,mBACE,KAEE,YAHJ;AAxDJ,SAAS,eAAe;AAExB,MAAM,gBACJ;AAEF,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CR,SAAS,iBAAiB;AAC/B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACpD,oBAAC,SAAI,WAAU,0BACb,+BAAC,OAAE,WAAU,uBAAsB,MAAM,iBACvC;AAAA,0BAAC,SAAI,KAAK,eAAe,KAAI,kBAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,MACrE,oBAAC,UAAK,WAAU,SAAQ,0BAAY;AAAA,OACtC,GACF;AAAA,KACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nconst styles = `\n.floating {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 2147483647;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: #0f1225;\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 12px;\n box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);\n}\n\n.preview-toolbar {\n left: 16px;\n gap: 24px;\n max-width: 600px;\n margin: 0 auto;\n padding: 8px 8px 8px 16px;\n\n font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n 'Segoe UI Emoji';\n font-size: 13px;\n line-height: 22px;\n}\n\n@keyframes slide-in {\n from {\n transform: translateY(15px);\n opacity: 0;\n }\n}\n\n@keyframes slide-in-from-left {\n from {\n transform: translateX(-24px);\n opacity: 0;\n }\n}\n\n@keyframes slide-in-from-right {\n from {\n transform: translateX(24px);\n opacity: 0;\n }\n}\n\n@keyframes slide-out-to-right {\n to {\n transform: translateX(24px);\n opacity: 0;\n }\n}\n\n.preview-toolbar.show {\n animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar.expand {\n animation: slide-in-from-right 200ms ease-out;\n}\n\n.preview-toolbar.collapse {\n animation: slide-out-to-right 150ms ease-in forwards;\n}\n\n.preview-toolbar-collapsed {\n justify-content: center;\n width: 48px;\n height: 48px;\n padding: 0;\n cursor: pointer;\n animation: slide-in-from-left 200ms ease-out;\n transition: background 150ms;\n}\n\n.preview-toolbar-collapsed.show {\n animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar-collapsed:focus-visible {\n outline: 2px solid #ffffff;\n outline-offset: 2px;\n}\n\n.message {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n gap: 12px;\n color: #f2f3f8;\n}\n\n.message > .label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.toolbar-button {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 30px;\n border-radius: 6px;\n transition: background 150ms;\n}\n\n.toolbar-button:focus-visible {\n outline: 2px solid #ffffff;\n outline-offset: -2px;\n}\n\n.preview-toolbar-collapsed:hover,\n.toolbar-button:hover {\n background: #272a3b;\n}\n\n.view-live {\n padding: 0 10px;\n color: #ffffff;\n font-weight: 600;\n text-decoration: none;\n}\n\n.collapse-button {\n width: 30px;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.icon {\n flex-shrink: 0;\n}\n`\n\nfunction MakeswiftLogoIcon() {\n return (\n <svg className=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z\"\n fill=\"#EA3BAA\"\n />\n <path\n d=\"M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z\"\n fill=\"white\"\n />\n </svg>\n )\n}\n\nfunction CloseIcon() {\n return (\n <svg className=\"icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M3 3L9 9M9 3L3 9\"\n stroke=\"#B8BAC7\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\n\ntype AnimationState = 'shown' | 'initial-collapsed' | 'collapsing' | 'collapsed' | 'expanding'\n\nconst toolbarAnimationClassName: Record<\n Exclude<AnimationState, 'initial-collapsed' | 'collapsed'>,\n string\n> = {\n shown: 'show',\n collapsing: 'collapse',\n expanding: 'expand',\n}\n\nconst SHOWN_STORAGE_KEY = 'makeswift-preview-toolbar-shown'\n\nfunction readStoredShown(): boolean {\n try {\n // Throws a SecurityError if session storage is disabled\n return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== 'false'\n } catch {\n return true\n }\n}\n\nfunction writeStoredShown(shown: boolean) {\n try {\n // Throws a SecurityError if session storage is disabled\n window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown))\n } catch {}\n}\n\nexport function PreviewToolbar() {\n const redirectLiveUrl = useMemo(() => {\n const currentUrl = new URL(window.location.href)\n const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n return currentUrl.toString()\n }, [])\n\n const [animationState, setAnimationState] = useState<AnimationState>(() =>\n readStoredShown() ? 'shown' : 'initial-collapsed',\n )\n\n const expandButtonRef = useRef<HTMLButtonElement>(null)\n const collapseButtonRef = useRef<HTMLButtonElement>(null)\n\n // Keep keyboard focus on the control that toggles back to the previous state.\n useEffect(() => {\n if (animationState === 'collapsed') expandButtonRef.current?.focus()\n if (animationState === 'expanding') collapseButtonRef.current?.focus()\n }, [animationState])\n\n const setShown = (shouldShow: boolean) => {\n writeStoredShown(shouldShow)\n setAnimationState(shouldShow ? 'expanding' : 'collapsing')\n }\n\n const handleAnimationEnd = () => {\n if (animationState === 'collapsing') setAnimationState('collapsed')\n }\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: styles }} />\n {animationState === 'initial-collapsed' || animationState === 'collapsed' ? (\n <button\n ref={expandButtonRef}\n type=\"button\"\n className={`floating preview-toolbar-collapsed ${animationState === 'initial-collapsed' ? 'show' : ''}`}\n aria-label=\"Expand preview toolbar\"\n onClick={() => setShown(true)}\n >\n <MakeswiftLogoIcon />\n </button>\n ) : (\n <div\n className={`floating preview-toolbar ${toolbarAnimationClassName[animationState]}`}\n role=\"region\"\n aria-label=\"Preview mode\"\n onAnimationEnd={handleAnimationEnd}\n >\n <div className=\"message\">\n <MakeswiftLogoIcon />\n <span className=\"label\">You are in preview mode</span>\n </div>\n <div className=\"actions\">\n <a className=\"toolbar-button view-live\" href={redirectLiveUrl}>\n View live\n </a>\n <button\n ref={collapseButtonRef}\n type=\"button\"\n className=\"toolbar-button collapse-button\"\n aria-label=\"Collapse preview toolbar\"\n onClick={() => setShown(false)}\n >\n <CloseIcon />\n </button>\n </div>\n </div>\n )}\n </>\n )\n}\n"],"mappings":"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","names":[]}
package/dist/types/runtimes/react/components/preview-switcher/preview-toolbar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"names":[],"mappings":"AA+CA,wBAAgB,cAAc,4CAmB7B"}
1
+ {"version":3,"file":"preview-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"names":[],"mappings":"AAiNA,wBAAgB,cAAc,4CAwE7B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@makeswift/runtime",
3
- "version": "0.29.0-canary.25",
3
+ "version": "0.29.0-canary.26",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "url": "makeswift/makeswift",