@sanity/ui-workshop
Version:
An environment for designing, reviewing, and quality-testing React components.
1,259 lines (1,258 loc) • 84.7 kB
JavaScript
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { Flex, Box, Checkbox, Text, TextInput, Select, TextArea, Card, Code, Stack, Heading, Button, Spinner, ErrorBoundary, ToastProvider, BoundaryElementProvider, PortalProvider, Tab, Layer, TabList, TabPanel, Breadcrumbs, MenuButton, MenuItem, Menu, useMediaIndex, Inline, Tree, TreeItem, Container, usePrefersDark, ThemeProvider, studioTheme } from "@sanity/ui";
import { createContext, useContext, memo, useRef, useState, useEffect, createElement, Suspense, StrictMode } from "react";
import isEqual from "lodash/isEqual.js";
import pako from "pako";
import { createRoot } from "react-dom/client";
import { createGlobalStyle, styled } from "styled-components";
import debounce from "lodash/debounce.js";
import { LaunchIcon, MoonIcon, SunIcon, SelectIcon, MenuIcon, ControlsIcon, SearchIcon } from "@sanity/icons";
import { flushSync } from "react-dom";
import { set } from "segmented-property";
function defineConfig(config) {
return config;
}
function defineRuntime(config) {
return config;
}
function defineScope(scope) {
return scope;
}
const EMPTY_ARRAY = [], EMPTY_RECORD = {}, DEFAULT_VIEWPORT_VALUE = "auto", DEFAULT_ZOOM_VALUE = 1, VIEWPORT_OPTIONS = [{
name: "auto",
title: "Full",
rect: {
width: "auto"
}
}, {
name: "768",
title: "768px",
rect: {
width: 768
}
}, {
name: "375",
title: "375px",
rect: {
width: 375,
height: 667
}
}, {
name: "320",
title: "320px",
rect: {
width: 320,
height: 568
}
}], ZOOM_OPTIONS = [{
value: 0.5,
title: "50%"
}, {
value: 0.75,
title: "75%"
}, {
value: 1,
title: "100%"
}, {
value: 1.5,
title: "150%"
}, {
value: 2,
title: "200%"
}, {
value: 3,
title: "300%"
}];
function createPubsub() {
const subscribers = /* @__PURE__ */ new Set();
return {
publish(msg) {
for (const subscriber of subscribers)
subscriber(msg);
},
subscribe(subscriber) {
return subscribers.add(subscriber), () => {
subscribers.delete(subscriber);
};
}
};
}
const qs = {
parse(str) {
const params = new URLSearchParams("?" + str), q = {};
return params.forEach((value, key) => {
q[key] = value;
}), q;
},
stringify(q) {
return Object.entries(q).map(([key, value]) => `${key}=${value}`).join("&");
}
};
function resolveLocation(scopes, path) {
const segments = path.split("/").slice(1).filter(Boolean), p = segments.join("/");
if (segments.length === 0)
return {
scope: null,
story: null
};
for (const scope of scopes)
for (const story of scope.stories) {
const storyPath = [scope.name, story.name].filter(Boolean).join("/");
if (p === storyPath)
return {
scope,
story
};
}
return {
scope: null,
story: null
};
}
function buildFrameUrl(params) {
const {
baseUrl = "/frame/",
path,
payload,
scheme,
viewport,
zoom
} = params;
return [baseUrl, `?path=${encodeURIComponent(path)}`, `&scheme=${scheme}`, `&viewport=${viewport}`, `&zoom=${zoom}`, ...Object.entries(payload).map(([key, value]) => `&${key}=${value}`)].join("");
}
const PropsContext = createContext(null);
function useProps() {
const props = useContext(PropsContext);
if (!props)
throw new Error("Props: missing context value");
return props;
}
const BooleanProp = memo(function(props) {
const $ = c(12), {
schema,
value
} = props, {
setPropValue
} = useProps();
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
lineHeight: 0
}, $[0] = t0) : t0 = $[0];
const t1 = value || !1;
let t2;
$[1] !== schema.name || $[2] !== setPropValue ? (t2 = (event) => setPropValue(schema.name, event.currentTarget.checked), $[1] = schema.name, $[2] = setPropValue, $[3] = t2) : t2 = $[3];
let t3;
$[4] !== t1 || $[5] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { marginRight: 2, style: t0, children: /* @__PURE__ */ jsx(Checkbox, { checked: t1, onChange: t2 }) }), $[4] = t1, $[5] = t2, $[6] = t3) : t3 = $[6];
let t4;
$[7] !== schema.name ? (t4 = /* @__PURE__ */ jsx(Box, { paddingY: 1, children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: schema.name }) }), $[7] = schema.name, $[8] = t4) : t4 = $[8];
let t5;
return $[9] !== t3 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Flex, { as: "label", padding: 3, children: [
t3,
t4
] }), $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11], t5;
}), NumberProp = memo(function(props) {
const $ = c(12), {
schema,
value: t0
} = props, value = t0 === void 0 ? "" : t0, {
setPropValue
} = useProps();
let t1;
$[0] !== schema.name ? (t1 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: schema.name }), $[0] = schema.name, $[1] = t1) : t1 = $[1];
let t2;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [2, 2, 1], $[2] = t2) : t2 = $[2];
let t3;
$[3] !== schema.name || $[4] !== setPropValue ? (t3 = (event) => setPropValue(schema.name, Number(event.currentTarget.value)), $[3] = schema.name, $[4] = setPropValue, $[5] = t3) : t3 = $[5];
let t4;
$[6] !== t3 || $[7] !== value ? (t4 = /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(TextInput, { fontSize: t2, onChange: t3, padding: 2, value }) }), $[6] = t3, $[7] = value, $[8] = t4) : t4 = $[8];
let t5;
return $[9] !== t1 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
t1,
t4
] }), $[9] = t1, $[10] = t4, $[11] = t5) : t5 = $[11], t5;
}), SelectProp = memo(function(props) {
const $ = c(19), {
schema,
value: valueProp
} = props, {
setPropValue
} = useProps();
let t0;
bb0: {
if ($[0] !== schema.options || $[1] !== valueProp) {
const entries = Object.entries(schema.options);
for (const [k, v] of entries)
if (v === valueProp) {
t0 = k;
break bb0;
}
$[0] = schema.options, $[1] = valueProp, $[2] = t0;
} else
t0 = $[2];
t0 = "";
}
const value = t0;
let t1;
$[3] !== schema.name ? (t1 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: schema.name }), $[3] = schema.name, $[4] = t1) : t1 = $[4];
let t2;
$[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [2, 2, 1], $[5] = t2) : t2 = $[5];
let t3;
$[6] !== schema.name || $[7] !== schema.options || $[8] !== setPropValue ? (t3 = (event) => {
const optionKey = event.currentTarget.value, optionValue = schema.options[optionKey];
setPropValue(schema.name, optionValue);
}, $[6] = schema.name, $[7] = schema.options, $[8] = setPropValue, $[9] = t3) : t3 = $[9];
const t4 = String(value || "");
let t5;
$[10] !== schema.options ? (t5 = Object.entries(schema.options).map(_temp$3), $[10] = schema.options, $[11] = t5) : t5 = $[11];
let t6;
$[12] !== t3 || $[13] !== t4 || $[14] !== t5 ? (t6 = /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Select, { fontSize: t2, onChange: t3, padding: 2, radius: 2, value: t4, children: t5 }) }), $[12] = t3, $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
let t7;
return $[16] !== t1 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
t1,
t6
] }), $[16] = t1, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
});
function _temp$3(t0) {
const [key] = t0;
return /* @__PURE__ */ jsx("option", { value: key, children: key }, key);
}
const StringProp = memo(function(props) {
const $ = c(12), {
schema,
value
} = props, {
setPropValue
} = useProps();
let t0;
$[0] !== schema.name ? (t0 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: schema.name }), $[0] = schema.name, $[1] = t0) : t0 = $[1];
let t1;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [2, 2, 1], $[2] = t1) : t1 = $[2];
let t2;
$[3] !== schema.name || $[4] !== setPropValue ? (t2 = (event) => setPropValue(schema.name, event.currentTarget.value), $[3] = schema.name, $[4] = setPropValue, $[5] = t2) : t2 = $[5];
const t3 = value || "";
let t4;
$[6] !== t2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(TextInput, { fontSize: t1, onChange: t2, padding: 2, value: t3 }) }), $[6] = t2, $[7] = t3, $[8] = t4) : t4 = $[8];
let t5;
return $[9] !== t0 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
t0,
t4
] }), $[9] = t0, $[10] = t4, $[11] = t5) : t5 = $[11], t5;
}), TextProp = memo(function(props) {
const $ = c(12), {
schema,
value
} = props, {
setPropValue
} = useProps();
let t0;
$[0] !== schema.name ? (t0 = /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: schema.name }), $[0] = schema.name, $[1] = t0) : t0 = $[1];
let t1;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [2, 2, 1], $[2] = t1) : t1 = $[2];
let t2;
$[3] !== schema.name || $[4] !== setPropValue ? (t2 = (event) => setPropValue(schema.name, event.currentTarget.value), $[3] = schema.name, $[4] = setPropValue, $[5] = t2) : t2 = $[5];
const t3 = value || "";
let t4;
$[6] !== t2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(TextArea, { fontSize: t1, onChange: t2, rows: 4, value: t3 }) }), $[6] = t2, $[7] = t3, $[8] = t4) : t4 = $[8];
let t5;
return $[9] !== t0 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
t0,
t4
] }), $[9] = t0, $[10] = t4, $[11] = t5) : t5 = $[11], t5;
});
function Prop(props) {
const $ = c(18), {
schema,
value
} = props;
if (schema.type === "boolean") {
let t02;
return $[0] !== schema || $[1] !== value ? (t02 = /* @__PURE__ */ jsx(BooleanProp, { schema, value }), $[0] = schema, $[1] = value, $[2] = t02) : t02 = $[2], t02;
}
if (schema.type === "number") {
let t02;
return $[3] !== schema || $[4] !== value ? (t02 = /* @__PURE__ */ jsx(NumberProp, { schema, value }), $[3] = schema, $[4] = value, $[5] = t02) : t02 = $[5], t02;
}
if (schema.type === "select") {
let t02;
return $[6] !== schema || $[7] !== value ? (t02 = /* @__PURE__ */ jsx(SelectProp, { schema, value }), $[6] = schema, $[7] = value, $[8] = t02) : t02 = $[8], t02;
}
if (schema.type === "string") {
let t02;
return $[9] !== schema || $[10] !== value ? (t02 = /* @__PURE__ */ jsx(StringProp, { schema, value }), $[9] = schema, $[10] = value, $[11] = t02) : t02 = $[11], t02;
}
if (schema.type === "text") {
let t02;
return $[12] !== schema || $[13] !== value ? (t02 = /* @__PURE__ */ jsx(TextProp, { schema, value }), $[12] = schema, $[13] = value, $[14] = t02) : t02 = $[14], t02;
}
const t0 = schema, t1 = schema;
let t2;
return $[15] !== t0.name || $[16] !== t1.type ? (t2 = /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsxs(Text, { size: 1, weight: "semibold", children: [
"Unknown Prop type:",
" ",
/* @__PURE__ */ jsxs("code", { children: [
t0.name,
": ",
t1.type
] })
] }) }), $[15] = t0.name, $[16] = t1.type, $[17] = t2) : t2 = $[17], t2;
}
const PropsInspector = memo(function() {
const $ = c(8), {
schemas,
value
} = useProps();
let t0;
$[0] !== schemas.length ? (t0 = schemas.length === 0 && /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: [2, 2, 1], children: "No properties" }) }), $[0] = schemas.length, $[1] = t0) : t0 = $[1];
let t1;
$[2] !== schemas || $[3] !== value ? (t1 = schemas.length > 0 && schemas.map((schema, schemaIndex) => /* @__PURE__ */ jsx(Prop, { schema, value: value[schema.name] === void 0 ? schema.defaultValue : value[schema.name] }, schemaIndex)), $[2] = schemas, $[3] = value, $[4] = t1) : t1 = $[4];
let t2;
return $[5] !== t0 || $[6] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Box, { padding: 2, children: [
t0,
t1
] }), $[5] = t0, $[6] = t1, $[7] = t2) : t2 = $[7], t2;
}), WorkshopContext = createContext(null);
function useWorkshop() {
const workshop = useContext(WorkshopContext);
if (!workshop)
throw new Error("Workshop: missing context value");
return workshop;
}
const btoa = typeof window > "u" ? (str) => Buffer.from(str, "binary").toString("base64") : window.btoa, atob = typeof window > "u" ? (str) => Buffer.from(str, "base64").toString("binary") : window.atob;
function uint8ArrayToBase64(uint8array) {
let str = "";
for (let i = 0, {
length
} = uint8array; i < length; i++)
str += String.fromCharCode(uint8array[i]);
return btoa(str);
}
function base64ToUint8Array(base64) {
const binStr = atob(base64), len = binStr.length, bytes = new Uint8Array(len);
for (let i = 0; i < len; i++)
bytes[i] = binStr.charCodeAt(i);
return bytes;
}
function decode(input) {
if (input.length === 0) return "";
const arr = base64ToUint8Array(input);
return pako.inflate(arr, {
to: "string"
});
}
function encode(input) {
if (input.length === 0) return "";
const arr = pako.deflate(input);
return uint8ArrayToBase64(arr);
}
function encodeValue(val) {
return encode(JSON.stringify(val));
}
function decodeValue(val) {
try {
return JSON.parse(decode(val));
} catch {
return EMPTY_RECORD;
}
}
function propsReducer(state, msg) {
return msg.type === "workshop/props/setValue" ? state.value === msg.value ? state : {
...state,
value: msg.value
} : msg.type === "workshop/props/registerProp" ? state.schemas.some((s) => s.name === msg.schema.name) ? state : {
...state,
schemas: state.schemas.concat([msg.schema])
} : msg.type === "workshop/props/setPropValue" ? state.value[msg.name] === msg.value ? state : {
...state,
value: {
...state.value,
[msg.name]: msg.value
}
} : state;
}
const PropsProvider = memo(function(props) {
const $ = c(27), {
children
} = props, {
channel,
broadcast,
payload
} = useWorkshop(), encodedValue = payload.value, encodedValueRef = useRef(encodedValue);
let t0;
$[0] !== encodedValue ? (t0 = () => ({
schemas: EMPTY_ARRAY,
value: decodeValue(String(encodedValue))
}), $[0] = encodedValue, $[1] = t0) : t0 = $[1];
const [t1, setState] = useState(t0), {
schemas,
value
} = t1;
let t2;
$[2] !== broadcast ? (t2 = (schema) => {
broadcast({
type: "workshop/props/registerProp",
schema
});
}, $[2] = broadcast, $[3] = t2) : t2 = $[3];
const registerProp = t2;
let t3;
$[4] !== broadcast ? (t3 = (name) => {
broadcast({
type: "workshop/props/unregisterProp",
name
});
}, $[4] = broadcast, $[5] = t3) : t3 = $[5];
const unregisterProp = t3;
let t4;
$[6] !== broadcast ? (t4 = (name_0, _value) => {
broadcast({
type: "workshop/props/setPropValue",
name: name_0,
value: _value
});
}, $[6] = broadcast, $[7] = t4) : t4 = $[7];
const setPropValue = t4;
let t5, t6;
$[8] !== registerProp || $[9] !== schemas || $[10] !== setPropValue || $[11] !== unregisterProp || $[12] !== value ? (t6 = {
registerProp,
schemas,
setPropValue,
unregisterProp,
value
}, $[8] = registerProp, $[9] = schemas, $[10] = setPropValue, $[11] = unregisterProp, $[12] = value, $[13] = t6) : t6 = $[13], t5 = t6;
const ctx = t5;
let t7, t8;
$[14] !== channel ? (t7 = () => channel.subscribe((msg) => {
setState((prevState) => {
const nextState = msg.type === "workshop/setPath" ? {
schemas: EMPTY_ARRAY,
value: EMPTY_RECORD
} : propsReducer(prevState, msg);
return isEqual(prevState, nextState) ? prevState : nextState;
});
}), t8 = [channel], $[14] = channel, $[15] = t7, $[16] = t8) : (t7 = $[15], t8 = $[16]), useEffect(t7, t8);
let t10, t9;
$[17] !== broadcast || $[18] !== value ? (t9 = () => {
const nextEncodedValue = encodeValue(value);
encodedValueRef.current !== nextEncodedValue && (encodedValueRef.current = nextEncodedValue, broadcast({
type: "workshop/setPayloadValue",
key: "value",
value: nextEncodedValue
}));
}, t10 = [broadcast, value], $[17] = broadcast, $[18] = value, $[19] = t10, $[20] = t9) : (t10 = $[19], t9 = $[20]), useEffect(t9, t10);
let t11, t12;
$[21] !== encodedValue ? (t11 = () => {
encodedValueRef.current !== encodedValue && (encodedValueRef.current = encodedValue, setState((prevState_0) => {
const nextValue = decodeValue(String(encodedValue)) || {};
return isEqual(prevState_0.value, nextValue) ? prevState_0 : {
...prevState_0,
value: nextValue
};
}));
}, t12 = [encodedValue], $[21] = encodedValue, $[22] = t11, $[23] = t12) : (t11 = $[22], t12 = $[23]), useEffect(t11, t12);
let t13;
return $[24] !== children || $[25] !== ctx ? (t13 = /* @__PURE__ */ jsx(PropsContext.Provider, { value: ctx, children }), $[24] = children, $[25] = ctx, $[26] = t13) : t13 = $[26], t13;
});
function useBoolean(name, defaultValue, t0) {
const $ = c(7), groupName = t0 === void 0 ? "Props" : t0, {
registerProp,
unregisterProp,
value
} = useProps();
let t1, t2;
return $[0] !== defaultValue || $[1] !== groupName || $[2] !== name || $[3] !== registerProp || $[4] !== unregisterProp ? (t1 = () => (registerProp({
type: "boolean",
groupName,
name,
defaultValue
}), () => unregisterProp(name)), t2 = [defaultValue, groupName, name, registerProp, unregisterProp], $[0] = defaultValue, $[1] = groupName, $[2] = name, $[3] = registerProp, $[4] = unregisterProp, $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2), value[name] === void 0 ? defaultValue : value[name];
}
function useNumber(name, defaultValue, t0) {
const $ = c(7), groupName = t0 === void 0 ? "Props" : t0, {
registerProp,
unregisterProp,
value
} = useProps();
let t1, t2;
return $[0] !== defaultValue || $[1] !== groupName || $[2] !== name || $[3] !== registerProp || $[4] !== unregisterProp ? (t1 = () => (registerProp({
type: "number",
groupName,
name,
defaultValue
}), () => unregisterProp(name)), t2 = [defaultValue, groupName, name, registerProp, unregisterProp], $[0] = defaultValue, $[1] = groupName, $[2] = name, $[3] = registerProp, $[4] = unregisterProp, $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2), value[name] === void 0 ? defaultValue : value[name];
}
function useSelect(name, options, defaultValue, t0) {
const $ = c(8), groupName = t0 === void 0 ? "Props" : t0, {
registerProp,
unregisterProp,
value
} = useProps();
let t1, t2;
return $[0] !== defaultValue || $[1] !== groupName || $[2] !== name || $[3] !== options || $[4] !== registerProp || $[5] !== unregisterProp ? (t1 = () => (registerProp({
type: "select",
groupName,
name,
options,
defaultValue
}), () => unregisterProp(name)), t2 = [defaultValue, groupName, name, options, registerProp, unregisterProp], $[0] = defaultValue, $[1] = groupName, $[2] = name, $[3] = options, $[4] = registerProp, $[5] = unregisterProp, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), useEffect(t1, t2), value[name] === void 0 ? defaultValue : value[name];
}
function useString(name, defaultValue, t0) {
const $ = c(7), groupName = t0 === void 0 ? "Props" : t0, {
registerProp,
unregisterProp,
value
} = useProps();
let t1, t2;
return $[0] !== defaultValue || $[1] !== groupName || $[2] !== name || $[3] !== registerProp || $[4] !== unregisterProp ? (t1 = () => (registerProp({
type: "string",
groupName,
name,
defaultValue
}), () => unregisterProp(name)), t2 = [defaultValue, groupName, name, registerProp, unregisterProp], $[0] = defaultValue, $[1] = groupName, $[2] = name, $[3] = registerProp, $[4] = unregisterProp, $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2), value[name] === void 0 ? defaultValue : value[name];
}
function useText(name, defaultValue, t0) {
const $ = c(7), groupName = t0 === void 0 ? "Props" : t0, {
registerProp,
unregisterProp,
value
} = useProps();
let t1, t2;
return $[0] !== defaultValue || $[1] !== groupName || $[2] !== name || $[3] !== registerProp || $[4] !== unregisterProp ? (t1 = () => (registerProp({
type: "text",
groupName,
name,
defaultValue
}), () => unregisterProp(name)), t2 = [defaultValue, groupName, name, registerProp, unregisterProp], $[0] = defaultValue, $[1] = groupName, $[2] = name, $[3] = registerProp, $[4] = unregisterProp, $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2), value[name] === void 0 ? defaultValue : value[name];
}
function propsPlugin() {
return {
name: "props",
title: "Properties",
inspector: PropsInspector,
provider: PropsProvider
};
}
const WorkshopProvider = memo(function(props) {
const $ = c(29), {
broadcast,
children,
channel,
config,
frameReady,
origin,
path,
payload,
scheme,
viewport: t0,
zoom: t1
} = props, viewport = t0 === void 0 ? "auto" : t0, zoom = t1 === void 0 ? 1 : t1, {
plugins: t2,
collections: t3,
frameUrl: t4,
scopes,
title: t5
} = config, pluginsProp = t2 === void 0 ? EMPTY_ARRAY : t2, collections = t3 === void 0 ? EMPTY_ARRAY : t3, frameUrl = t4 === void 0 ? "/frame/" : t4, title = t5 === void 0 ? "Workshop" : t5;
if (!payload)
throw new Error("missing `payload` property");
let t6, t7;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t7 = propsPlugin(), $[0] = t7) : t7 = $[0];
let t8;
$[1] !== pluginsProp ? (t8 = [t7, ...pluginsProp], $[1] = pluginsProp, $[2] = t8) : t8 = $[2], t6 = t8;
const plugins = t6;
let t9, t10;
$[3] !== path || $[4] !== scopes ? (t10 = resolveLocation(scopes, path), $[3] = path, $[4] = scopes, $[5] = t10) : t10 = $[5], t9 = t10;
const {
scope,
story
} = t9;
let wrappedChildren = children;
if ($[6] !== plugins || $[7] !== wrappedChildren) {
for (const plugin of plugins)
if (plugin.provider) {
const Provider = plugin.provider;
wrappedChildren = /* @__PURE__ */ jsx(Provider, { options: plugin.options || EMPTY_RECORD, children: wrappedChildren });
}
$[6] = plugins, $[7] = wrappedChildren, $[8] = wrappedChildren;
} else
wrappedChildren = $[8];
let t11;
$[9] !== broadcast || $[10] !== channel || $[11] !== collections || $[12] !== frameReady || $[13] !== frameUrl || $[14] !== origin || $[15] !== path || $[16] !== payload || $[17] !== plugins || $[18] !== scheme || $[19] !== scope || $[20] !== scopes || $[21] !== story || $[22] !== title || $[23] !== viewport || $[24] !== zoom ? (t11 = {
plugins,
broadcast,
channel,
collections,
frameReady,
frameUrl,
origin,
path,
payload,
scheme,
scope,
scopes,
story,
title,
viewport,
zoom
}, $[9] = broadcast, $[10] = channel, $[11] = collections, $[12] = frameReady, $[13] = frameUrl, $[14] = origin, $[15] = path, $[16] = payload, $[17] = plugins, $[18] = scheme, $[19] = scope, $[20] = scopes, $[21] = story, $[22] = title, $[23] = viewport, $[24] = zoom, $[25] = t11) : t11 = $[25];
let t12;
return $[26] !== t11 || $[27] !== wrappedChildren ? (t12 = /* @__PURE__ */ jsx(WorkshopContext.Provider, { value: t11, children: wrappedChildren }), $[26] = t11, $[27] = wrappedChildren, $[28] = t12) : t12 = $[28], t12;
});
WorkshopProvider.displayName = "Memo(WorkshopProvider)";
function workshopReducer(state, msg) {
if (msg.type === "workshop/frameReady")
return {
...state,
frameReady: !0
};
if (msg.type === "workshop/setState")
return isEqual(state, msg.value) ? state : msg.value;
if (msg.type === "workshop/setZoom")
return state.zoom === msg.value ? state : {
...state,
zoom: msg.value
};
if (msg.type === "workshop/setViewport")
return state.viewport === msg.value ? state : {
...state,
viewport: msg.value
};
if (msg.type === "workshop/toggleScheme")
return {
...state,
scheme: state.scheme === "light" ? "dark" : "light"
};
if (msg.type === "workshop/setScheme")
return state.scheme === msg.value ? state : {
...state,
scheme: msg.value
};
if (msg.type === "workshop/setPath")
return state.path === msg.value ? state : {
...state,
path: msg.value
};
if (msg.type === "workshop/setPayload")
return isEqual(state.payload, msg.value) ? state : {
...state,
payload: msg.value
};
if (msg.type === "workshop/setPayloadValue") {
const payload = {
...state.payload,
[msg.key]: msg.value
};
return isEqual(state.payload, payload) ? state : {
...state,
payload
};
}
return state;
}
const ROOT_PATH = (() => {
try {
return process.env.ROOT_PATH;
} catch {
return;
}
})(), RE_URL = /http:\/\/([^:/\s]+)(:[0-9]+)?/g, RE_VITE_FS_PREFIX = /\/@fs\//g, RE_VITE_FS_SUFFIX = /\?([a-z]{1})=([0-9]+)/g;
function formatStack(stack) {
let ret = decodeURIComponent(stack);
return ret = stack.replace(RE_URL, "").replace(RE_VITE_FS_PREFIX, "/").replace(RE_VITE_FS_SUFFIX, ""), ROOT_PATH ? replaceRootPath(ret, ROOT_PATH + "/") : ret;
}
function replaceRootPath(str, rootPath) {
const re = new RegExp(rootPath.replace(/\//g, "\\/"), "g");
return str.replace(re, "");
}
const WorkshopCanvas$1 = memo(function() {
const $ = c(21), {
story
} = useWorkshop();
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
error: null,
errorInfo: null
}, $[0] = t0) : t0 = $[0];
const [state, setState] = useState(t0);
let t1;
$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (t22) => {
const {
error,
info: errorInfo
} = t22;
setState({
error,
errorInfo
});
}, $[1] = t1) : t1 = $[1];
const catchError = t1;
let t2;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => {
setState({
error: null,
errorInfo: null
});
}, $[2] = t2) : t2 = $[2];
const handleRetry = t2;
if (!story) {
let t32;
return $[3] === Symbol.for("react.memo_cache_sentinel") ? (t32 = /* @__PURE__ */ jsx(Fragment, {}), $[3] = t32) : t32 = $[3], t32;
}
if (state.error) {
let t32;
return $[4] !== state.error || $[5] !== state.errorInfo ? (t32 = /* @__PURE__ */ jsx(Card, { as: "main", height: "fill", overflow: "auto", tone: "critical", children: /* @__PURE__ */ jsx(ErrorScreen, { error: state.error, errorInfo: state.errorInfo, onRetry: handleRetry }) }), $[4] = state.error, $[5] = state.errorInfo, $[6] = t32) : t32 = $[6], t32;
}
let t3;
$[7] !== story.title ? (t3 = /* @__PURE__ */ jsx("h1", { hidden: !0, children: story.title }), $[7] = story.title, $[8] = t3) : t3 = $[8];
let t4;
$[9] !== story ? (t4 = /* @__PURE__ */ jsx(LoadingScreen, { story }), $[9] = story, $[10] = t4) : t4 = $[10];
let t5;
$[11] !== story.component ? (t5 = createElement(story.component), $[11] = story.component, $[12] = t5) : t5 = $[12];
let t6;
$[13] !== t5 ? (t6 = /* @__PURE__ */ jsx(Card, { as: "main", height: "fill", children: /* @__PURE__ */ jsx(ErrorBoundary, { onCatch: catchError, children: t5 }) }), $[13] = t5, $[14] = t6) : t6 = $[14];
let t7;
$[15] !== t4 || $[16] !== t6 ? (t7 = /* @__PURE__ */ jsx(Suspense, { fallback: t4, children: t6 }), $[15] = t4, $[16] = t6, $[17] = t7) : t7 = $[17];
let t8;
return $[18] !== t3 || $[19] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
t3,
t7
] }), $[18] = t3, $[19] = t7, $[20] = t8) : t8 = $[20], t8;
}), LoadingScreen = memo(function(props) {
const $ = c(5), {
story
} = props;
let t0;
$[0] !== story.title ? (t0 = /* @__PURE__ */ jsxs("h1", { hidden: !0, children: [
"Loading ",
/* @__PURE__ */ jsx("em", { children: story.title }),
"\u2026"
] }), $[0] = story.title, $[1] = t0) : t0 = $[1];
let t1;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Flex, { align: "center", as: "main", height: "fill", justify: "center", children: /* @__PURE__ */ jsx(Spinner, { muted: !0 }) }), $[2] = t1) : t1 = $[2];
let t2;
return $[3] !== t0 ? (t2 = /* @__PURE__ */ jsxs(Fragment, { children: [
t0,
t1
] }), $[3] = t0, $[4] = t2) : t2 = $[4], t2;
}), ErrorScreen = memo(function(props) {
const $ = c(14), {
error,
errorInfo,
onRetry
} = props;
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [1, 1, 2], $[0] = t0) : t0 = $[0];
let t1;
$[1] !== error.message ? (t1 = /* @__PURE__ */ jsx(Heading, { as: "h1", size: t0, children: error.message }), $[1] = error.message, $[2] = t1) : t1 = $[2];
let t2;
$[3] !== onRetry ? (t2 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { onClick: onRetry, text: "Retry" }) }), $[3] = onRetry, $[4] = t2) : t2 = $[4];
let t3;
$[5] !== error.stack ? (t3 = error.stack && /* @__PURE__ */ jsx(Code, { size: 1, children: formatStack(error.stack) }), $[5] = error.stack, $[6] = t3) : t3 = $[6];
let t4;
$[7] !== errorInfo ? (t4 = errorInfo?.componentStack && /* @__PURE__ */ jsx(Code, { size: 1, children: "Component stack:" + formatStack(errorInfo.componentStack) }), $[7] = errorInfo, $[8] = t4) : t4 = $[8];
let t5;
return $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
t1,
t2,
t3,
t4
] }) }), $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5) : t5 = $[13], t5;
});
function isArray(value) {
return Array.isArray(value);
}
function isRecord(value) {
return !!value && typeof value == "object" && !Array.isArray(value);
}
function createMainController() {
const _subscribers = /* @__PURE__ */ new Set();
let _msgQueue = [], _flushTimeout = null;
function _flush() {
_flushTimeout && clearInterval(_flushTimeout), _flushTimeout = setTimeout(() => {
window.parent.postMessage(_msgQueue), _msgQueue = [], _flushTimeout = null;
}, 0);
}
function _handleMessage(event) {
const msgs = event.data;
if (isArray(msgs)) {
for (const msg of msgs)
if (isRecord(msg) && typeof msg.type == "string" && msg.type.startsWith("workshop/"))
for (const subscriber of _subscribers)
subscriber(msg);
}
}
function _mount() {
window.addEventListener("message", _handleMessage, !1);
}
function _unmount() {
window.removeEventListener("message", _handleMessage, !1);
}
return {
message: {
publish(msg) {
_msgQueue.push(msg), _flush();
},
subscribe(subscriber) {
return _subscribers.add(subscriber), _subscribers.size === 1 && _mount(), () => {
_subscribers.delete(subscriber), _subscribers.size === 0 && _unmount();
};
}
}
};
}
function getStateFromLocation$1() {
const query = typeof window > "u" ? {} : qs.parse(window.location.search.slice(1)), {
path = "/",
scheme,
viewport,
zoom,
...payload
} = query;
return {
frameReady: !1,
path,
payload,
scheme: typeof scheme == "string" ? scheme : "light",
viewport: typeof viewport == "string" ? viewport : "auto",
zoom: typeof zoom == "string" ? Number(zoom) : 1
};
}
const WorkshopFrame = memo(function(props) {
const $ = c(28), {
config,
setScheme
} = props;
let t0, t1;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = createMainController(), $[0] = t1) : t1 = $[0], t0 = t1;
const main = t0;
let t2, t3;
$[1] === Symbol.for("react.memo_cache_sentinel") ? (t3 = createPubsub(), $[1] = t3) : t3 = $[1], t2 = t3;
const channel = t2, [boundaryElement, setBoundaryElement] = useState(null), [portalElement, setPortalElement] = useState(null);
let t4;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (msg) => {
channel.publish(msg), main.message.publish(msg);
}, $[2] = t4) : t4 = $[2];
const broadcast = t4, [t5, setState] = useState(_temp$2), {
frameReady,
path,
payload,
scheme,
viewport,
zoom
} = t5;
let t6, t7;
$[3] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => channel.subscribe((msg_0) => setState((s) => workshopReducer(s, msg_0))), t7 = [channel], $[3] = t6, $[4] = t7) : (t6 = $[3], t7 = $[4]), useEffect(t6, t7);
let t8, t9;
$[5] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => main.message.subscribe(channel.publish), t9 = [channel, main], $[5] = t8, $[6] = t9) : (t8 = $[5], t9 = $[6]), useEffect(t8, t9);
let t10, t11;
$[7] !== scheme || $[8] !== setScheme ? (t10 = () => setScheme(scheme), t11 = [setScheme, scheme], $[7] = scheme, $[8] = setScheme, $[9] = t10, $[10] = t11) : (t10 = $[9], t11 = $[10]), useEffect(t10, t11);
let t12, t13;
$[11] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => broadcast({
type: "workshop/frameReady"
}), t13 = [broadcast], $[11] = t12, $[12] = t13) : (t12 = $[11], t13 = $[12]), useEffect(t12, t13);
let t14;
$[13] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsxs(Card, { height: "fill", ref: setBoundaryElement, children: [
/* @__PURE__ */ jsx(WorkshopCanvas$1, {}),
/* @__PURE__ */ jsx("div", { "data-portal": "", ref: setPortalElement })
] }), $[13] = t14) : t14 = $[13];
let t15;
$[14] !== config || $[15] !== frameReady || $[16] !== path || $[17] !== payload || $[18] !== scheme || $[19] !== viewport || $[20] !== zoom ? (t15 = /* @__PURE__ */ jsx(WorkshopProvider, { broadcast, config, channel, frameReady, origin: "frame", path, payload, scheme, viewport, zoom, children: t14 }), $[14] = config, $[15] = frameReady, $[16] = path, $[17] = payload, $[18] = scheme, $[19] = viewport, $[20] = zoom, $[21] = t15) : t15 = $[21];
let t16;
$[22] !== portalElement || $[23] !== t15 ? (t16 = /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: t15 }), $[22] = portalElement, $[23] = t15, $[24] = t16) : t16 = $[24];
let t17;
return $[25] !== boundaryElement || $[26] !== t16 ? (t17 = /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(BoundaryElementProvider, { element: boundaryElement, children: t16 }) }), $[25] = boundaryElement, $[26] = t16, $[27] = t17) : t17 = $[27], t17;
});
function _temp$2() {
return getStateFromLocation$1();
}
function _buildLocationUrl(loc) {
const search = qs.stringify(loc.query || {});
return `${loc.path}${search ? `?${search}` : ""}`;
}
function _getStateFromWindow() {
return {
path: location.pathname,
query: qs.parse(location.search.substr(1))
};
}
function createLocationStore() {
const _subscribers = /* @__PURE__ */ new Set();
function _handlePopState() {
_notifySubscribers({
type: "pop",
..._getStateFromWindow()
});
}
function _notifySubscribers(loc) {
for (const subscriber of _subscribers)
subscriber(loc);
}
function _mount() {
window.addEventListener("popstate", _handlePopState);
}
function _unmount() {
window.removeEventListener("popstate", _handlePopState);
}
return {
get() {
return _getStateFromWindow();
},
push(nextLocation) {
window.history.pushState(null, document.title, _buildLocationUrl(nextLocation)), _notifySubscribers({
type: "push",
...nextLocation
});
},
replace(nextLocation) {
window.history.replaceState(null, document.title, _buildLocationUrl(nextLocation)), _notifySubscribers({
type: "replace",
...nextLocation
});
},
subscribe(subscribe) {
return _subscribers.add(subscribe), _subscribers.size === 1 && _mount(), () => {
_subscribers.delete(subscribe), _subscribers.size === 0 && _unmount();
};
}
};
}
const GlobalStyle = createGlobalStyle`
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-Regular.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-Italic.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-Medium.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-MediumItalic.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-Bold.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-BoldItalic.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-Black.woff2") format("woff2");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("https://studio-static.sanity.io/Inter-BlackItalic.woff2") format("woff2");
}
body {
background-color: ${({
theme
}) => theme.sanity.color.base.bg};
}
`, MemoTab = memo(Tab), Root$4 = styled(Card).withConfig({
displayName: "Root",
componentId: "sc-1l0234w-0"
})`line-height:0;@media screen and (max-width:${({
theme
}) => theme.sanity.media[1] - 1}px){text-align:center;}`, InspectorHeader = memo(function(props) {
const $ = c(10), {
currentTabId,
onTabChange,
tabs
} = props;
let t0, t1;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = {
flex: "none",
position: "sticky",
top: 0
}, $[0] = t1) : t1 = $[0], t0 = t1;
const layerStyle = t0;
let t2, t3;
if ($[1] !== currentTabId || $[2] !== onTabChange || $[3] !== tabs) {
let t42;
$[5] !== currentTabId || $[6] !== onTabChange ? (t42 = (tab) => /* @__PURE__ */ jsx(InspectorTabView, { onTabChange, selected: tab.id === currentTabId, tab }, tab.id), $[5] = currentTabId, $[6] = onTabChange, $[7] = t42) : t42 = $[7], t3 = tabs.map(t42), $[1] = currentTabId, $[2] = onTabChange, $[3] = tabs, $[4] = t3;
} else
t3 = $[4];
t2 = t3;
const children = t2;
let t4;
return $[8] !== children ? (t4 = /* @__PURE__ */ jsx(Layer, { style: layerStyle, children: /* @__PURE__ */ jsx(Root$4, { padding: 2, shadow: 1, children: /* @__PURE__ */ jsx(TabList, { space: 1, children }) }) }), $[8] = children, $[9] = t4) : t4 = $[9], t4;
});
function InspectorTabView(props) {
const $ = c(11), {
onTabChange,
selected,
tab
} = props;
let t0;
$[0] !== onTabChange || $[1] !== tab.id ? (t0 = () => {
onTabChange(tab.id);
}, $[0] = onTabChange, $[1] = tab.id, $[2] = t0) : t0 = $[2];
const handleClick = t0, t1 = `${tab.id}-panel`;
let t2;
$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [2, 2, 1], $[3] = t2) : t2 = $[3];
let t3;
return $[4] !== handleClick || $[5] !== selected || $[6] !== t1 || $[7] !== tab.id || $[8] !== tab.label || $[9] !== tab.tone ? (t3 = /* @__PURE__ */ jsx(MemoTab, { "aria-controls": t1, fontSize: t2, id: tab.id, label: tab.label, onClick: handleClick, selected, tone: tab.tone }), $[4] = handleClick, $[5] = selected, $[6] = t1, $[7] = tab.id, $[8] = tab.label, $[9] = tab.tone, $[10] = t3) : t3 = $[10], t3;
}
const Root$3 = styled(Card).withConfig({
displayName: "Root",
componentId: "sc-vkb8p1-0"
})`overflow:hidden;@media screen and (min-width:${({
theme
}) => theme.sanity.media[1]}px){border-left:1px solid var(--card-border-color);min-width:180px;max-width:300px;overflow:auto;}`, MemoRender = memo(function(props) {
const $ = c(3), {
component: Component,
options
} = props;
let t0;
return $[0] !== Component || $[1] !== options ? (t0 = /* @__PURE__ */ jsx(Component, { options }), $[0] = Component, $[1] = options, $[2] = t0) : t0 = $[2], t0;
}), WorkshopInspector = memo(function(props) {
const $ = c(23), {
expanded
} = props, {
plugins
} = useWorkshop(), tabs = plugins.filter(_temp$1).map(_temp2$1), [tabId, setTabId] = useState(tabs.length > 0 ? tabs[0].id : null);
let t0;
$[0] !== tabId ? (t0 = (tab) => tab.id === tabId, $[0] = tabId, $[1] = t0) : t0 = $[1];
const currentTab = tabs.find(t0), showTabs = tabs.length > 1;
let t1;
$[2] !== expanded ? (t1 = expanded ? ["block"] : ["none", "none", "block"], $[2] = expanded, $[3] = t1) : t1 = $[3];
const display = t1;
let t2;
$[4] !== setTabId || $[5] !== showTabs || $[6] !== tabId || $[7] !== tabs ? (t2 = showTabs && /* @__PURE__ */ jsx(InspectorHeader, { currentTabId: tabId, onTabChange: setTabId, tabs }), $[4] = setTabId, $[5] = showTabs, $[6] = tabId, $[7] = tabs, $[8] = t2) : t2 = $[8];
let t3;
$[9] !== showTabs || $[10] !== tabId || $[11] !== tabs ? (t3 = showTabs && tabs.map((tab_0) => /* @__PURE__ */ jsx(TabPanel, { "aria-labelledby": `${tab_0.id}-tab`, flex: 1, hidden: tab_0.id !== tabId, id: `${tab_0.id}-panel`, overflow: "auto", children: tab_0.plugin.inspector && /* @__PURE__ */ jsx(MemoRender, { component: tab_0.plugin.inspector, options: tab_0.plugin.options || EMPTY_RECORD }) }, tab_0.id)), $[9] = showTabs, $[10] = tabId, $[11] = tabs, $[12] = t3) : t3 = $[12];
let t4;
$[13] !== currentTab || $[14] !== showTabs ? (t4 = !showTabs && currentTab?.plugin.inspector && /* @__PURE__ */ jsx(Box, { flex: 1, overflow: "auto", children: /* @__PURE__ */ jsx(MemoRender, { component: currentTab.plugin.inspector, options: currentTab.plugin.options || EMPTY_RECORD }) }), $[13] = currentTab, $[14] = showTabs, $[15] = t4) : t4 = $[15];
let t5;
$[16] !== t2 || $[17] !== t3 || $[18] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Flex, { direction: "column", height: "fill", children: [
t2,
t3,
t4
] }), $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5) : t5 = $[19];
let t6;
return $[20] !== display || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$3, { display, flex: 1, children: t5 }), $[20] = display, $[21] = t5, $[22] = t6) : t6 = $[22], t6;
});
function _temp$1(plugin) {
return plugin.inspector;
}
function _temp2$1(plugin_0) {
return {
id: plugin_0.name,
label: plugin_0.title,
tone: void 0,
plugin: plugin_0
};
}
function NavbarBreadcrumbs() {
const $ = c(7), {
broadcast,
scope,
story,
title
} = useWorkshop();
let t0;
$[0] !== broadcast ? (t0 = (event) => {
event.preventDefault(), broadcast({
type: "workshop/setPath",
value: "/"
});
}, $[0] = broadcast, $[1] = t0) : t0 = $[1];
const handleHomeClick = t0, t1 = scope?.title, t2 = story?.title;
let t3;
return $[2] !== handleHomeClick || $[3] !== t1 || $[4] !== t2 || $[5] !== title ? (t3 = /* @__PURE__ */ jsx(NavbarBreadcrumbsView, { onHomeClick: handleHomeClick, scopeTitle: t1, storyTitle: t2, title }), $[2] = handleHomeClick, $[3] = t1, $[4] = t2, $[5] = title, $[6] = t3) : t3 = $[6], t3;
}
const NavbarBreadcrumbsView = memo(function(props) {
const $ = c(14), {
onHomeClick,
scopeTitle,
storyTitle,
title
} = props;
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(Text, { muted: !0, size: [2, 2, 1], children: "/" }), $[0] = t0) : t0 = $[0];
let t1;
$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [2, 2, 1], $[1] = t1) : t1 = $[1];
let t2;
$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
color: "inherit"
}, $[2] = t2) : t2 = $[2];
let t3;
$[3] !== onHomeClick || $[4] !== title ? (t3 = /* @__PURE__ */ jsx(Text, { size: t1, weight: "bold", children: /* @__PURE__ */ jsx("a", { href: "/", onClick: onHomeClick, style: t2, children: title }) }), $[3] = onHomeClick, $[4] = title, $[5] = t3) : t3 = $[5];
let t4;
$[6] !== scopeTitle ? (t4 = scopeTitle && /* @__PURE__ */ jsx(Text, { align: "center", size: [2, 2, 1], children: scopeTitle }), $[6] = scopeTitle, $[7] = t4) : t4 = $[7];
let t5;
$[8] !== storyTitle ? (t5 = storyTitle && /* @__PURE__ */ jsx(Text, { size: [2, 2, 1], children: storyTitle }), $[8] = storyTitle, $[9] = t5) : t5 = $[9];
let t6;
return $[10] !== t3 || $[11] !== t4 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Breadcrumbs, { separator: t0, space: 2, children: [
t3,
t4,
t5
] }), $[10] = t3, $[11] = t4, $[12] = t5, $[13] = t6) : t6 = $[13], t6;
}), OpenCanvasButton = memo(function() {
const $ = c(11), {
frameUrl,
path,
payload,
scheme,
zoom,
viewport
} = useWorkshop();
let t0, t1;
$[0] !== frameUrl || $[1] !== path || $[2] !== payload || $[3] !== scheme || $[4] !== viewport || $[5] !== zoom ? (t1 = path === "/" ? void 0 : buildFrameUrl({
baseUrl: frameUrl,
path,
payload,
scheme,
zoom,
viewport
}), $[0] = frameUrl, $[1] = path, $[2] = payload, $[3] = scheme, $[4] = viewport, $[5] = zoom, $[6] = t1) : t1 = $[6], t0 = t1;
const canvasUrl = t0, t2 = canvasUrl ? "a" : "button", t3 = !canvasUrl;
let t4;
return $[7] !== canvasUrl || $[8] !== t2 || $[9] !== t3 ? (t4 = /* @__PURE__ */ jsx(Button, { as: t2, disabled: t3, fontSize: 1, href: canvasUrl, iconRight: LaunchIcon, mode: "ghost", padding: 2, rel: "noopener noreferrer", target: "_blank", text: "Open story" }), $[7] = canvasUrl, $[8] = t2, $[9] = t3, $[10] = t4) : t4 = $[10], t4;
});
function startViewTransition(cb) {
"startViewTransition" in document ? document.startViewTransition(() => flushSync(() => cb())) : cb();
}
function SchemeMenu() {
const $ = c(5), {
broadcast,
scheme
} = useWorkshop();
let t0;
$[0] !== broadcast ? (t0 = () => {
startViewTransition(() => broadcast({
type: "workshop/toggleScheme"
}));
}, $[0] = broadcast, $[1] = t0) : t0 = $[1];
const handleToggleScheme = t0, t1 = scheme === "dark";
let t2;
return $[2] !== handleToggleScheme || $[3] !== t1 ? (t2 = /* @__PURE__ */ jsx(SchemeMenuView, { dark: t1, onToggleScheme: handleToggleScheme }), $[2] = handleToggleScheme, $[3] = t1, $[4] = t2) : t2 = $[4], t2;
}
const SchemeMenuView = memo(function(props) {
const $ = c(3), {
dark,
onToggleScheme
} = props, t0 = dark ? MoonIcon : SunIcon;
let t1;
return $[0] !== onToggleScheme || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(Button, { fontSize: 1, icon: t0, mode: "bleed", onClick: onToggleScheme, padding: 2 }), $[0] = onToggleScheme, $[1] = t0, $[2] = t1) : t1 = $[2], t1;
}), ViewportMenu = memo(function() {
const $ = c(6), {
broadcast,
story,
viewport
} = useWorkshop();
let t0;
$[0] !== broadcast ? (t0 = (value) => {
startViewTransition(() => broadcast({
type: "workshop/setViewport",
value
}));
}, $[0] = broadcast, $[1] = t0) : t0 = $[1];
const setViewport = t0, t1 = !story;
let t2;
return $[2] !== setViewport || $[3] !== t1 || $[4] !== viewport ? (t2 = /* @__PURE__ */ jsx(ViewportMenuView, { disabled: t1, setViewport, viewport }), $[2] = setViewport, $[3] = t1, $[4] = viewport, $[5] = t2) : t2 = $[5], t2;
}), POPOVER_PROPS$1 = {
constrainSize: !0,
placement: "bottom",
portal: !0
}, ViewportMenuView = memo(function(props) {
const $ = c(13), {
disabled,
setViewport,
viewport
} = props;
let t0;
$[0] !== viewport ? (t0 = VIEWPORT_OPTIONS.find((o) => o.name === viewport)?.title, $[0] = viewport, $[1] = t0) : t0 = $[1];
let t1;
$[2] !== disabled || $[3] !== t0 ? (t1 = /* @__PURE__ */ jsx(Button, { disabled, fontSize: 1, iconRight: SelectIcon, mode: "ghost", padding: 2, text: t0 }), $[2] = disabled, $[3] = t0, $[4] = t1) : t1 = $[4];
let t2;
$[5] !== setViewport || $[6] !== viewport ? (t2 = VIEWPORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(MenuItem, { fontSize: 1, onClick: () => setViewport(option.name), padding: 2, selected: option.name === viewport, text: option.title }, option.name)), $[5] = setViewport, $[6] = viewport, $[7] = t2) : t2 = $[7];
let t3;
$[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Menu, { children: t2 }), $[8] = t2, $[9] = t3) : t3 = $[9];
let t4;
return $[10] !== t1 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsx(MenuButton, { button: t1, id: "viewport-menu", menu: t3, popover: POPOVER_PROPS$1 }), $[10] = t1, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
});
function ZoomMenu() {
const $ = c(6), {
broadcast,
story,
zoom
} = useWorkshop();
let t0;
$[0] !== broadcast ? (t0 = (value) => broadcast({
type: "workshop/setZoom",
value
}), $[0] = broadcast, $[1] = t0) : t0 = $[1];
const setZoom = t0, t1 = !story;
let t2;
return $[2] !== setZoom || $[3] !== t1 || $[4] !== zoom ? (t2 = /* @__PURE__ */ jsx(ZoomMenuView, { disabled: t1, setZoom, zoom }), $[2] = setZoom, $[3] = t1, $[4] = zoom, $[5] = t2) : t2 = $[5], t2;
}
const POPOVER_PROPS = {
constrainSize: !0,
placement: "bottom",
portal: !0
}, ZoomMenuView = memo(function(props) {
const $ = c(13), {
disabled,
setZoom,
zoom
} = props;
let t0;
$[0]