@arcanejs/toolkit-frontend 0.3.0

package/dist/components/index.mjs

@@ -0,0 +1,1100 @@
+import {
+  Icon,
+  TRANSPARENCY_SVG_URI,
+  core_exports
+} from "../chunk-UJVH3PQF.mjs";
+import {
+  THEME,
+  buttonPressed,
+  buttonStateNormal,
+  buttonStateNormalActive,
+  buttonStateNormalHover,
+  rectButton,
+  touchIndicatorNormal,
+  touchIndicatorTouching
+} from "../chunk-6Z2ACPNM.mjs";
+import {
+  calculateClass,
+  trackTouch,
+  usePressable
+} from "../chunk-35U577MM.mjs";
+import "../chunk-7P6ASYW6.mjs";
+
+// src/components/index.tsx
+import { isCoreComponent } from "@arcanejs/protocol/core";
+
+// src/components/button.tsx
+import React from "react";
+import { styled } from "styled-components";
+
+// src/components/context.ts
+import { createContext } from "react";
+var StageContext = createContext({
+  sendMessage: null,
+  renderComponent: () => {
+    throw new Error(`missing root context`);
+  }
+});
+
+// src/components/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TOUCH_INDICATOR_CLASS = "touch-indicator";
+var TOUCHING_CLASS = "touching";
+var ERROR_CLASS = "error";
+var ButtonContents = styled.div`
+  padding: 6px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > * {
+    padding: 0;
+  }
+`;
+var ButtonLabel = styled.span`
+  padding: 0 4px;
+`;
+var Button = (props) => {
+  const { sendMessage } = React.useContext(StageContext);
+  const { touching, handlers } = usePressable(
+    () => sendMessage?.({
+      type: "component-message",
+      namespace: "core",
+      componentKey: props.info.key,
+      component: "button"
+    })
+  );
+  const { state } = props.info;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: calculateClass(
+        props.className,
+        touching || state.state === "pressed" ? TOUCHING_CLASS : null,
+        state.state === "error" && ERROR_CLASS
+      ),
+      ...handlers,
+      title: state.state === "error" ? state.error : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: TOUCH_INDICATOR_CLASS }),
+        /* @__PURE__ */ jsxs(ButtonContents, { children: [
+          props.info.icon && /* @__PURE__ */ jsx(Icon, { icon: props.info.icon }),
+          props.info.text && /* @__PURE__ */ jsx(ButtonLabel, { children: props.info.text })
+        ] })
+      ]
+    }
+  );
+};
+var StyledButton = styled(Button)`
+  ${rectButton}
+  outline: none;
+  height: 30px;
+  position: relative;
+  overflow: visible;
+
+  .${TOUCH_INDICATOR_CLASS} {
+    ${touchIndicatorNormal}
+  }
+
+  &.${ERROR_CLASS} {
+    color: ${THEME.colorRed};
+    border-color: ${THEME.colorRed};
+  }
+
+  &.${TOUCHING_CLASS} {
+    ${buttonStateNormalActive}
+
+    .${TOUCH_INDICATOR_CLASS} {
+      ${touchIndicatorTouching}
+    }
+  }
+`;
+
+// src/components/group.tsx
+import React3, {
+  useContext,
+  useState
+} from "react";
+import { styled as styled3 } from "styled-components";
+
+// src/components/nesting.tsx
+import React2 from "react";
+import { styled as styled2 } from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function nextColor(currentColor) {
+  switch (currentColor) {
+    case "dark":
+      return "lighter";
+    case "lighter":
+      return "dark";
+    case "lighterer":
+      return "dark";
+  }
+}
+var LastNestedColor = React2.createContext("dark");
+var NestedContent = ({ className, children }) => {
+  const color = React2.useContext(LastNestedColor);
+  return /* @__PURE__ */ jsx2("div", { className: calculateClass(className, `color-${color}`), children: /* @__PURE__ */ jsx2(LastNestedColor.Provider, { value: nextColor(color), children }) });
+};
+NestedContent.displayName = "NestedContent";
+var StyledNestedContent = styled2(NestedContent)`
+  padding: ${THEME.sizingPx.spacing / 2}px;
+  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+
+  &.color-dark {
+    background: ${THEME.bgDark1};
+  }
+
+  &.color-lighter {
+    background: ${THEME.bg};
+  }
+
+  &.color-lighterer {
+    background: ${THEME.bgLight1};
+  }
+`;
+
+// src/components/group.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CollapseIcon = styled3(Icon)({
+  cursor: "pointer"
+});
+var Header = styled3.div`
+  display: flex;
+  align-items: center;
+  padding: 5px 2px;
+  background: ${THEME.borderDark};
+  border-bottom: 1px solid ${THEME.borderDark};
+
+  &.touching {
+    background: ${THEME.bgDark1};
+  }
+
+  &.collapsed {
+    border-bottom: none;
+  }
+
+  > * {
+    margin: 0 3px;
+  }
+`;
+var Label = styled3.span`
+  display: inline-block;
+  border-radius: 3px;
+  background: ${THEME.bg};
+  border: 1px solid ${THEME.bgLight1};
+  padding: 3px 4px;
+`;
+var Grow = styled3.span({
+  flexGrow: "1"
+});
+var CollapseBar = styled3.span({
+  flexGrow: "1",
+  cursor: "pointer",
+  height: "30px"
+});
+var GroupChildren = styled3.div`
+  display: flex;
+  flex-direction: ${(p) => p.info.direction === "vertical" ? "column" : "row"};
+  flex-wrap: ${(p) => p.info.wrap ? "wrap" : "nowrap"};
+  ${(p) => p.info.direction === "vertical" ? "" : "align-items: center;"}
+
+  > * {
+    margin: ${THEME.sizingPx.spacing / 2}px;
+  }
+`;
+var EditableTitle = styled3.span`
+  display: flex;
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 3px 2px;
+
+  > * {
+    margin: 0 2px;
+  }
+
+  > .icon {
+    color: ${THEME.bg};
+  }
+
+  &:hover {
+    background: ${THEME.bg};
+
+    > .icon {
+      color: ${THEME.hint};
+    }
+  }
+`;
+var TitleInput = styled3.input`
+  background: none;
+  border: none;
+  outline: none;
+  color: ${THEME.textNormal};
+`;
+var GroupStateContext = React3.createContext({
+  isCollapsed: () => {
+    throw new Error("missing GroupStateContext");
+  },
+  toggleCollapsed: () => {
+    throw new Error("missing GroupStateContext");
+  }
+});
+var GroupStateWrapper = ({ openByDefault, children }) => {
+  const [state, setState] = useState({});
+  const isCollapsed = (key, defaultState) => {
+    let match = state[key];
+    if (!match) {
+      match = defaultState === "auto" ? openByDefault ? "open" : "closed" : defaultState;
+      setState((current) => ({
+        ...current,
+        [key]: match
+      }));
+    }
+    return match === "closed";
+  };
+  const toggleCollapsed = (key) => {
+    setState((current) => ({
+      ...current,
+      [key]: current[key] === "closed" ? "open" : "closed"
+    }));
+  };
+  return /* @__PURE__ */ jsx3(GroupStateContext.Provider, { value: { isCollapsed, toggleCollapsed }, children });
+};
+var Group = ({ className, info }) => {
+  const groupState = useContext(GroupStateContext);
+  const { renderComponent, sendMessage } = useContext(StageContext);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const children = /* @__PURE__ */ jsx3(GroupChildren, { info, children: info.children.map(renderComponent) });
+  const collapsible = !!info.defaultCollapsibleState;
+  const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
+  const collapsePressable = usePressable(
+    () => groupState.toggleCollapsed(info.key)
+  );
+  const showTitle = info.title || info.editableTitle;
+  const displayHeader = [
+    showTitle,
+    info.labels?.length,
+    info.headers?.length,
+    collapsible
+  ].some((v) => v);
+  const updateTitle = (e) => {
+    sendMessage?.({
+      type: "component-message",
+      namespace: "core",
+      componentKey: info.key,
+      component: "group",
+      title: e.currentTarget.value
+    });
+    setEditingTitle(false);
+  };
+  const keyDown = (e) => {
+    if (e.key == "Enter") {
+      updateTitle(e);
+    }
+  };
+  const hasBorder = info.border || displayHeader;
+  const childrenElements = hasBorder ? /* @__PURE__ */ jsx3(StyledNestedContent, { children }) : children;
+  return /* @__PURE__ */ jsxs2("div", { className: calculateClass(className, !hasBorder && "no-border"), children: [
+    displayHeader ? /* @__PURE__ */ jsxs2(
+      Header,
+      {
+        className: calculateClass(
+          collapsePressable.touching && "touching",
+          collapsible && collapsed && "collapsed"
+        ),
+        children: [
+          collapsible && /* @__PURE__ */ jsx3(
+            CollapseIcon,
+            {
+              icon: collapsed ? "arrow_right" : "arrow_drop_down",
+              ...collapsePressable.handlers
+            }
+          ),
+          info.labels?.map((l) => /* @__PURE__ */ jsx3(Label, { children: l.text })),
+          showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ jsx3(
+            TitleInput,
+            {
+              ref: (input) => input?.focus(),
+              onBlur: updateTitle,
+              onKeyDown: keyDown,
+              defaultValue: info.title
+            }
+          ) : /* @__PURE__ */ jsxs2(EditableTitle, { onClick: () => setEditingTitle(true), children: [
+            /* @__PURE__ */ jsx3("span", { children: info.title }),
+            /* @__PURE__ */ jsx3(Icon, { className: "icon", icon: "edit" })
+          ] }) : /* @__PURE__ */ jsx3("span", { children: info.title })),
+          collapsible ? /* @__PURE__ */ jsx3(CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ jsx3(Grow, {}),
+          info.headers?.map((h) => h.children.map((c) => renderComponent(c)))
+        ]
+      }
+    ) : null,
+    collapsible && collapsed ? null : childrenElements
+  ] });
+};
+Group.displayName = "Group";
+var StyledGroup = styled3(Group)`
+  border: 1px solid ${THEME.borderDark};
+
+  > .title {
+    padding: 5px;
+    background: ${THEME.borderDark};
+    border-bottom: 1px solid ${THEME.borderDark};
+  }
+
+  &.no-border {
+    border: none;
+    margin: 0 !important;
+  }
+`;
+
+// src/components/label.tsx
+import { styled as styled4 } from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Label2 = ({ className, info }) => /* @__PURE__ */ jsx4("div", { className, children: info.text });
+var StyledLabel = styled4(Label2)`
+  font-weight: ${(p) => p.info.bold ? "bold" : "normal"};
+  white-space: nowrap;
+`;
+
+// src/components/rect.tsx
+import { styled as styled5 } from "styled-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CLS_GROW = "grow";
+var Wrapper = styled5.div`
+  min-width: 30px;
+  height: 30px;
+  border-radius: 3px;
+  overflow: hidden;
+  background: url('${TRANSPARENCY_SVG_URI}');
+  background-repeat: repeat;
+  background-size: 10px;
+  border: 1px solid ${THEME.borderDark};
+
+  &.${CLS_GROW} {
+    flex-grow: 1;
+  }
+`;
+var Inner = styled5.div`
+  width: 100%;
+  height: 100%;
+`;
+var Rect = ({ className, info }) => /* @__PURE__ */ jsx5(Wrapper, { className: calculateClass(className, info.grow && CLS_GROW), children: /* @__PURE__ */ jsx5(Inner, { style: { backgroundColor: info.color } }) });
+
+// src/components/slider-button.tsx
+import React4, { useCallback } from "react";
+import { styled as styled6 } from "styled-components";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CLASS_SLIDER_DISPLAY = "slider-display";
+var CLASS_SLIDER_VALUE = "slider-value";
+var CLASS_GRADIENT = "gradient";
+var CLASS_GROW = "grow";
+var OPEN_SLIDER_WIDTH = 400;
+var SLIDER_PADDING = 15;
+var SLIDER_VALUE_WIDTH = 60;
+var OPEN_SLIDER_INNER_WIDTH = OPEN_SLIDER_WIDTH - SLIDER_PADDING * 4 - SLIDER_VALUE_WIDTH * 2;
+var KEYS = {
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  Enter: "Enter",
+  Escape: "Escape"
+};
+var NUMBER_FORMATTER = new Intl.NumberFormat(void 0, {
+  // A large enough value for most usecases,
+  // but to avoid inaccuracies from floating-point maths
+  maximumFractionDigits: 10
+});
+var getRelativeCursorPosition = (elem, pageX) => {
+  const rect = elem.getBoundingClientRect();
+  return pageX - rect.left;
+};
+var SliderButton = ({ info, className }) => {
+  const { sendMessage } = React4.useContext(StageContext);
+  const [state, setState] = React4.useState({ state: "closed" });
+  const input = React4.useRef(null);
+  const displayValue = (value2) => {
+    if (info.max === 1 && info.min === 0) {
+      return `${Math.round(value2 * 100)}%`;
+    }
+    return NUMBER_FORMATTER.format(value2);
+  };
+  const sendValue = useCallback(
+    (value2) => sendMessage?.({
+      type: "component-message",
+      namespace: "core",
+      componentKey: info.key,
+      component: "slider_button",
+      value: value2
+    }),
+    [sendMessage, info.key]
+  );
+  const sanitizeValue = useCallback(
+    (value2) => {
+      const i = Math.round((value2 - info.min) / info.step);
+      const v = i * info.step + info.min;
+      return Math.max(info.min, Math.min(info.max, v));
+    },
+    [info.min, info.max, info.step]
+  );
+  const getNewValue = useCallback(
+    (startValue, diff) => {
+      return sanitizeValue((startValue || 0) + diff);
+    },
+    [sanitizeValue]
+  );
+  const getCurrentInputValue = useCallback(
+    (e) => {
+      const float = parseFloat(e.currentTarget.value);
+      return sanitizeValue(isNaN(float) ? info.value || 0 : float);
+    },
+    [info.value, sanitizeValue]
+  );
+  const onKeyDown = (e) => {
+    if (e.key === KEYS.ArrowDown || e.key === KEYS.ArrowUp) {
+      const currentValue = getCurrentInputValue(e);
+      const diff = e.key === KEYS.ArrowUp ? info.step : -info.step;
+      const newValue = sanitizeValue(currentValue + diff);
+      e.currentTarget.value = NUMBER_FORMATTER.format(newValue);
+      sendValue(newValue);
+    } else if (e.key === KEYS.Enter) {
+      const sanitizedValue = getCurrentInputValue(e);
+      sendValue(sanitizedValue);
+      e.currentTarget.value = NUMBER_FORMATTER.format(sanitizedValue);
+    } else if (e.key === KEYS.Escape) {
+      input.current?.blur();
+    }
+  };
+  const onFocus = (e) => {
+    setState({ state: "focused" });
+    e.currentTarget.value = `${info.value || 0}`;
+  };
+  const onBlur = () => {
+    setState({ state: "closed" });
+  };
+  const onTouchStart = (e) => {
+    for (const touch of Array.from(e.changedTouches)) {
+      const originalPageX = touch.pageX;
+      const cursorPosition = getRelativeCursorPosition(
+        e.currentTarget,
+        touch.pageX
+      );
+      const start = onDown(cursorPosition);
+      trackTouch(
+        touch,
+        (p) => {
+          const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
+          const newValueDiff = (info.max - info.min) * amntDiff;
+          sendValue(getNewValue(start.startValue, newValueDiff));
+          setState({ ...start, diff: newValueDiff });
+        },
+        (p) => {
+          const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
+          const newValueDiff = (info.max - info.min) * amntDiff;
+          sendValue(getNewValue(start.startValue, newValueDiff));
+          setState({ state: "closed" });
+        }
+      );
+      return;
+    }
+  };
+  const onDown = (cursorStartPosition) => {
+    const value2 = info.value === null ? 0 : info.value;
+    const amnt = (value2 - info.min) / (info.max - info.min);
+    const innerLeft = cursorStartPosition - amnt * OPEN_SLIDER_INNER_WIDTH - SLIDER_PADDING * 2 - SLIDER_VALUE_WIDTH + "px";
+    const start = {
+      state: "touching",
+      startValue: info.value,
+      startX: cursorStartPosition,
+      innerLeft,
+      diff: 0
+    };
+    setState(start);
+    return start;
+  };
+  const value = state.state === "touching" ? getNewValue(state.startValue, state.diff) : info.value;
+  const valueDisplay = value !== null ? displayValue(value) : "";
+  const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
+  const gradientStops = info.gradient && info.gradient.map((g) => `${g.color} ${g.position * 100}%`);
+  const sliderGradient = gradientStops ? {
+    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${TRANSPARENCY_SVG_URI})`
+  } : void 0;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: calculateClass(
+        className,
+        `state-${state.state}`,
+        info.grow && CLASS_GROW
+      ),
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: "inner",
+          onMouseDown: () => setState({ state: "mouse-down" }),
+          onMouseUp: () => input.current?.focus(),
+          onTouchStart,
+          style: state.state === "touching" ? { left: state.innerLeft } : {},
+          children: [
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                type: "text",
+                ref: input,
+                onFocus,
+                onBlur,
+                onKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: calculateClass(
+                  CLASS_SLIDER_DISPLAY,
+                  sliderGradient && CLASS_GRADIENT
+                ),
+                style: sliderGradient,
+                children: /* @__PURE__ */ jsx6("div", { className: "inner", style: { width: valueCSSPercent } })
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
+          ]
+        }
+      )
+    }
+  );
+};
+var StyledSliderButton = styled6(SliderButton)`
+  position: relative;
+  min-width: 100px;
+  min-height: 30px;
+
+  &.${CLASS_GROW} {
+    flex-grow: 1;
+  }
+
+  > .inner {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    padding: 0 ${SLIDER_PADDING / 2}px;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    cursor: pointer;
+    transition: all 200ms;
+    border-radius: 3px;
+    border: 1px solid ${THEME.borderDark};
+    ${buttonStateNormal}
+
+    > input {
+      color: ${THEME.textNormal};
+      opacity: 0;
+      margin: 0 -9px;
+      padding: 6px 8px;
+      width: 0;
+      pointer-events: none;
+      transition: all 200ms;
+      border-radius: 3px;
+      background: ${THEME.bgDark1};
+      border: 1px solid ${THEME.borderDark};
+      overflow: hidden;
+      box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+    }
+
+    > .${CLASS_SLIDER_DISPLAY} {
+      flex-grow: 1;
+      margin: 0 ${SLIDER_PADDING / 2}px;
+      height: 4px;
+      background: ${THEME.bgDark1};
+      border: 1px solid ${THEME.borderDark};
+
+      > .inner {
+        height: 100%;
+        background: ${THEME.hint};
+      }
+
+      &.${CLASS_GRADIENT} {
+        height: 10px;
+
+        > .inner {
+          position: relative;
+          background: none;
+          border-right: 2px solid ${THEME.borderDark};
+
+          &::before {
+            content: '';
+            position: absolute;
+            width: 4px;
+            top: -5px;
+            bottom: -5px;
+            right: -3px;
+            background: ${THEME.borderDark};
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 2px;
+            top: -4px;
+            bottom: -4px;
+            right: -2px;
+            background: ${THEME.textNormal};
+          }
+        }
+      }
+    }
+
+    > .${CLASS_SLIDER_VALUE} {
+      width: ${SLIDER_VALUE_WIDTH}px;
+      margin: 0 -${SLIDER_VALUE_WIDTH / 2}px;
+      line-height: 30px;
+      text-align: center;
+      opacity: 0;
+    }
+
+    &:hover {
+      ${buttonStateNormalHover}
+    }
+  }
+
+  &.state-mouse-down {
+    > .inner {
+      ${buttonPressed}
+    }
+  }
+
+  &.state-focused {
+    > .inner {
+      > input {
+        opacity: 1;
+        width: 60%;
+        padding: 0 5px;
+        margin: 0;
+      }
+    }
+  }
+
+  &.state-touching {
+    z-index: 100;
+
+    .inner {
+      background: ${THEME.bgDark1};
+      width: ${OPEN_SLIDER_WIDTH}px;
+
+      > .${CLASS_SLIDER_VALUE} {
+        opacity: 1;
+        margin: 0 ${SLIDER_PADDING / 2}px;
+      }
+    }
+  }
+`;
+
+// src/components/switch.tsx
+import React5, { useMemo, useState as useState2 } from "react";
+import { styled as styled7 } from "styled-components";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var CLASS_TOUCHING = "touching";
+var TOUCH_INDICATOR_CLASS2 = "touch-indicator";
+var Switch = ({ className, info }) => {
+  const { sendMessage } = React5.useContext(StageContext);
+  const [touching, setTouching] = useState2(false);
+  const onClick = useMemo(
+    () => () => {
+      sendMessage?.({
+        type: "component-message",
+        namespace: "core",
+        componentKey: info.key,
+        component: "switch"
+      });
+    },
+    [sendMessage, info.key]
+  );
+  const onTouchStart = useMemo(
+    () => (event) => {
+      event.preventDefault();
+      setTouching(true);
+    },
+    []
+  );
+  const onTouchEnd = useMemo(
+    () => (event) => {
+      event.preventDefault();
+      setTouching(false);
+      onClick();
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: calculateClass(className, touching && CLASS_TOUCHING),
+      onClick,
+      onTouchStart,
+      onTouchEnd,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: TOUCH_INDICATOR_CLASS2 }),
+        /* @__PURE__ */ jsx7("div", { className: "inner", children: /* @__PURE__ */ jsxs4("div", { className: "slider" + (info.state === "on" ? " on" : ""), children: [
+          /* @__PURE__ */ jsx7("div", { className: "on-text", children: "ON" }),
+          /* @__PURE__ */ jsx7("div", { className: "off-text", children: "OFF" }),
+          /* @__PURE__ */ jsx7("div", { className: "button" })
+        ] }) })
+      ]
+    }
+  );
+};
+var SWITCH_HEIGHT = 30;
+var BUTTON_WIDTH = 30;
+var TEXT_WIDTH = 40;
+var StyledSwitch = styled7(Switch)`
+  position: relative;
+
+  .inner {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
+    min-width: ${BUTTON_WIDTH + TEXT_WIDTH}px;
+    height: ${SWITCH_HEIGHT}px;
+    border-radius: 3px;
+    border: 1px solid ${THEME.borderDark};
+
+    > .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      cursor: pointer;
+      transition: left 300ms;
+
+      > .on-text,
+      .off-text,
+      .button {
+        position: absolute;
+        height: ${SWITCH_HEIGHT}px;
+      }
+
+      > .on-text,
+      .off-text {
+        width: ${TEXT_WIDTH}px;
+        text-align: center;
+        top: 0;
+        line-height: ${SWITCH_HEIGHT - 2}px;
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+        box-shadow:
+          inset 0 1px 2px rgba(0, 0, 0, 0.2),
+          0 1px 0 0 rgba(255, 255, 255, 0.15);
+      }
+
+      > .on-text {
+        left: -40px;
+        background: linear-gradient(
+          to bottom,
+          ${THEME.hintDark1},
+          ${THEME.hint}
+        );
+      }
+
+      > .button {
+        top: -1px;
+        left: -1px;
+        width: ${BUTTON_WIDTH}px;
+        background: linear-gradient(to bottom, #4f5053, #343436);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
+        border-radius: 3px;
+        border: 1px solid ${THEME.borderDark};
+      }
+
+      > .off-text {
+        background: linear-gradient(to bottom, #242525, #37383a);
+        left: ${BUTTON_WIDTH - 2}px;
+      }
+
+      &.on {
+        left: 40px;
+      }
+
+      &:hover > .button {
+        background: linear-gradient(to bottom, #5e6064, #393a3b);
+      }
+    }
+  }
+
+  .${TOUCH_INDICATOR_CLASS2} {
+    ${touchIndicatorNormal}
+  }
+
+  &.${CLASS_TOUCHING} {
+    .${TOUCH_INDICATOR_CLASS2} {
+      ${touchIndicatorTouching}
+    }
+  }
+`;
+
+// src/components/tabs.tsx
+import React6 from "react";
+import { styled as styled8 } from "styled-components";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Wrapper2 = styled8.div`
+  display: flex;
+  flex-direction: column;
+  background: ${THEME.borderDark};
+  border: 1px solid ${THEME.borderDark};
+`;
+var TabList = styled8.div`
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid ${THEME.borderDark};
+`;
+var TabItem = styled8.div`
+  height: ${THEME.sizingPx.spacing * 3}px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 ${THEME.sizingPx.spacing}px;
+  cursor: pointer;
+  background: ${THEME.bgDark1};
+  margin-right: 1px;
+
+  &:hover,
+  &.touching {
+    background: ${THEME.bgLight1};
+  }
+
+  &.current {
+    color: ${THEME.hint};
+
+    &::after {
+      content: '';
+      border-bottom: 2px solid ${THEME.hint};
+      display: block;
+      margin-top: ${THEME.sizingPx.spacing / 2}px;
+    }
+  }
+`;
+var Tabs = (props) => {
+  const { renderComponent } = React6.useContext(StageContext);
+  const [touching, setTouching] = React6.useState(null);
+  const [currentTab, setCurrentTab] = React6.useState(0);
+  const tab = props.info.tabs[currentTab];
+  return /* @__PURE__ */ jsxs5(Wrapper2, { children: [
+    /* @__PURE__ */ jsx8(TabList, { children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ jsx8(
+      TabItem,
+      {
+        className: calculateClass(
+          touching === i && "touching",
+          currentTab === i && "current"
+        ),
+        onClick: () => setCurrentTab(i),
+        onTouchStart: (event) => {
+          event.preventDefault();
+          setTouching(i);
+        },
+        onTouchEnd: (event) => {
+          event.preventDefault();
+          setTouching(null);
+          setCurrentTab(i);
+        },
+        children: tab2.name
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx8(StyledNestedContent, { children: tab?.child && renderComponent(tab.child) })
+  ] });
+};
+
+// src/components/text-input.tsx
+import React7, { useEffect } from "react";
+import { styled as styled9 } from "styled-components";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TextInput = ({ className, info }) => {
+  const { sendMessage } = React7.useContext(StageContext);
+  const ref = React7.useRef(null);
+  useEffect(() => {
+    if (ref.current && ref.current.value !== info.value) {
+      ref.current.value = info.value;
+    }
+  }, [info.value]);
+  return /* @__PURE__ */ jsx9(
+    "input",
+    {
+      className,
+      defaultValue: info.value,
+      ref,
+      onChange: (ev) => sendMessage?.({
+        type: "component-message",
+        namespace: "core",
+        componentKey: info.key,
+        component: "text-input",
+        value: ev.target.value
+      })
+    }
+  );
+};
+var StyledTextInput = styled9(TextInput)`
+  position: relative;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border-radius: 3px;
+  background: ${THEME.bgDark1};
+  border: 1px solid ${THEME.borderDark};
+  overflow: hidden;
+  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  color: ${THEME.textNormal};
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+
+  @media (max-width: 500px) {
+    flex-basis: 100%;
+  }
+`;
+
+// src/components/timeline.tsx
+import React8, { useEffect as useEffect2, useState as useState3 } from "react";
+import { styled as styled10 } from "styled-components";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Wrapper3 = styled10.div`
+  flex-grow: 1;
+`;
+var Data = styled10.div`
+  display: flex;
+`;
+var Metadata = styled10.div`
+  flex-grow: 1;
+`;
+var SourceData = styled10.div`
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
+`;
+var IndicatorIcon = styled10(Icon)`
+  font-size: 40px;
+`;
+var Bar = styled10.div`
+  width: 100%;
+  height: 10px;
+  border: 1px solid ${THEME.borderDark};
+  background: ${THEME.borderDark};
+`;
+var Fill = styled10.div`
+  height: 100%;
+  background: ${THEME.hint};
+`;
+var Title = styled10.div`
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+`;
+var Subtitle = styled10.div`
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+`;
+var Timeline = (props) => {
+  const { className, info } = props;
+  const frameState = React8.useRef({
+    animationFrame: -1,
+    state: null
+  });
+  const [currentTimeMillis, setCurrentTimeMillis] = useState3(0);
+  useEffect2(() => {
+    frameState.current.state = info.state;
+    const recalculateCurrentTimeMillis = () => {
+      if (frameState.current.state !== info.state) {
+        return;
+      }
+      if (info.state.state === "playing") {
+        setCurrentTimeMillis(
+          (Date.now() - info.state.effectiveStartTime) * info.state.speed
+        );
+        frameState.current.animationFrame = window.requestAnimationFrame(
+          recalculateCurrentTimeMillis
+        );
+      } else {
+        setCurrentTimeMillis(info.state.currentTimeMillis);
+      }
+    };
+    recalculateCurrentTimeMillis();
+    return () => {
+      window.cancelAnimationFrame(frameState.current.animationFrame);
+    };
+  }, [frameState, info.state]);
+  return /* @__PURE__ */ jsxs6(Wrapper3, { className, children: [
+    /* @__PURE__ */ jsxs6(Data, { children: [
+      /* @__PURE__ */ jsxs6(Metadata, { children: [
+        info.title && /* @__PURE__ */ jsx10(Title, { children: info.title }),
+        info.subtitles?.map((subtitle, k) => /* @__PURE__ */ jsx10(Subtitle, { children: subtitle }, k))
+      ] }),
+      /* @__PURE__ */ jsxs6(SourceData, { children: [
+        info.source?.name,
+        /* @__PURE__ */ jsx10(
+          IndicatorIcon,
+          {
+            icon: info.state.state === "playing" ? "play_arrow" : "pause"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10(Bar, { children: /* @__PURE__ */ jsx10(
+      Fill,
+      {
+        style: {
+          width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
+        }
+      }
+    ) })
+  ] });
+};
+
+// src/components/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CORE_FRONTEND_COMPONENT_RENDERER = {
+  namespace: "core",
+  render: (info) => {
+    if (!isCoreComponent(info)) {
+      throw new Error(`Cannot render non-core component ${info.namespace}`);
+    }
+    switch (info.component) {
+      case "button":
+        return /* @__PURE__ */ jsx11(StyledButton, { info }, info.key);
+      case "group":
+        return /* @__PURE__ */ jsx11(StyledGroup, { info }, info.key);
+      case "label":
+        return /* @__PURE__ */ jsx11(StyledLabel, { info }, info.key);
+      case "rect":
+        return /* @__PURE__ */ jsx11(Rect, { info }, info.key);
+      case "slider_button":
+        return /* @__PURE__ */ jsx11(StyledSliderButton, { info }, info.key);
+      case "switch":
+        return /* @__PURE__ */ jsx11(StyledSwitch, { info }, info.key);
+      case "tabs":
+        return /* @__PURE__ */ jsx11(Tabs, { info }, info.key);
+      case "text-input":
+        return /* @__PURE__ */ jsx11(StyledTextInput, { info }, info.key);
+      case "timeline":
+        return /* @__PURE__ */ jsx11(Timeline, { info }, info.key);
+      case "group-header":
+      case "tab":
+        throw new Error(
+          `Cannot render ${info.component} outside of expected parents`
+        );
+    }
+  }
+};
+export {
+  StyledButton as Button,
+  CORE_FRONTEND_COMPONENT_RENDERER,
+  StyledGroup as Group,
+  GroupStateWrapper,
+  StyledLabel as Label,
+  StyledNestedContent as NestedContent,
+  Rect,
+  StyledSliderButton as SliderButton,
+  StageContext,
+  StyledSwitch as Switch,
+  Tabs,
+  StyledTextInput as TextInput,
+  Timeline,
+  core_exports as code
+};