@arcanejs/toolkit-frontend 0.9.0 → 0.10.0

package/dist/components/index.mjs

@@ -2,28 +2,19 @@ import {
   Icon,
   TRANSPARENCY_SVG_URI,
   core_exports
-} from "../chunk-GMPDVDSW.mjs";
+} from "../chunk-TOVGDMHN.mjs";
 import {
-  buttonPressed,
-  buttonStateNormal,
-  buttonStateNormalActive,
-  buttonStateNormalHover,
-  rectButton,
-  touchIndicatorNormal,
-  touchIndicatorTouching
-} from "../chunk-6XOE7F7U.mjs";
-import {
-  calculateClass,
+  cn,
   trackTouch,
   usePressable
-} from "../chunk-PTANIWKR.mjs";
+} from "../chunk-2HBLGAG3.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";
@@ -37,23 +28,6 @@ var StageContext = createContext(
 
 // src/components/button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var TOUCH_INDICATOR_CLASS = "touch-indicator";
-var LOADING_CLASS = "loading";
-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 { call } = React.useContext(StageContext);
   const [localState, setLocalState] = React.useState(null);
@@ -76,59 +50,56 @@ var Button = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: calculateClass(
-        props.className,
-        (touching || state.state === "pressed") && TOUCHING_CLASS,
-        state.state === "loading" && LOADING_CLASS,
-        state.state === "error" && ERROR_CLASS
+      className: cn(
+        `
+          relative box-border flex h-arcane-btn cursor-pointer items-center
+          justify-center overflow-visible rounded-arcane-btn border
+          border-arcane-btn-border bg-arcane-grad-btn text-arcane-btn-text
+          shadow-arcane-btn transition-all duration-200 outline-none
+          text-shadow-arcane-btn
+          hover:bg-arcane-grad-btn-hover
+          active:bg-arcane-grad-btn-active active:shadow-arcane-btn-active
+          active:duration-50 active:text-shadow-arcane-btn-active
+        `,
+        (touching || state.state === "pressed" || state.state === "loading") && "bg-arcane-grad-btn-active",
+        (touching || state.state === "pressed" || state.state === "loading") && "text-shadow-arcane-btn-active",
+        (touching || state.state === "pressed" || state.state === "loading") && "shadow-arcane-btn-active",
+        (touching || state.state === "pressed" || state.state === "loading") && "duration-50",
+        state.state === "error" && "border-arcane-btn-err text-arcane-btn-err",
+        props.className
       ),
       ...handlers,
       title: state.state === "error" ? state.error : void 0,
       children: [
-        /* @__PURE__ */ jsx("div", { className: TOUCH_INDICATOR_CLASS }),
-        /* @__PURE__ */ jsxs(ButtonContents, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              `
+            pointer-events-none absolute -inset-1.5 rounded-md border-2
+            border-transparent bg-transparent transition-colors duration-300
+          `,
+              (touching || state.state === "loading") && "border-arcane-hint bg-arcane-hint-soft duration-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center px-0.5"), children: [
           props.info.icon && /* @__PURE__ */ jsx(Icon, { icon: props.info.icon }),
-          props.info.text && /* @__PURE__ */ jsx(ButtonLabel, { children: props.info.text })
+          props.info.text && /* @__PURE__ */ jsx("span", { className: cn("px-1"), children: props.info.text })
         ] })
       ]
     }
   );
 };
-var StyledButton = styled(Button)`
-  ${rectButton}
-  outline: none;
-  height: 30px;
-  position: relative;
-  overflow: visible;
-
-  .${TOUCH_INDICATOR_CLASS} {
-    ${touchIndicatorNormal}
-  }
-
-  &.${ERROR_CLASS} {
-    color: ${(p) => p.theme.colorRed};
-    border-color: ${(p) => p.theme.colorRed};
-  }
-
-  &.${TOUCHING_CLASS}, &.${LOADING_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) {
@@ -143,104 +114,24 @@ function nextColor(currentColor) {
 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 }) });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "p-2 shadow-arcane-box-inset",
+        color === "dark" && "bg-arcane-bg-dark-1",
+        color === "lighter" && "bg-arcane-bg",
+        color === "lighterer" && "bg-arcane-bg-light-1",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2(LastNestedColor.Provider, { value: nextColor(color), children })
+    }
+  );
 };
 NestedContent.displayName = "NestedContent";
-var StyledNestedContent = styled2(NestedContent)`
-  padding: ${(p) => p.theme.sizingPx.spacing / 2}px;
-  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
-
-  &.color-dark {
-    background: ${(p) => p.theme.bgDark1};
-  }
-
-  &.color-lighter {
-    background: ${(p) => p.theme.bg};
-  }
-
-  &.color-lighterer {
-    background: ${(p) => p.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: ${(p) => p.theme.borderDark};
-  border-bottom: 1px solid ${(p) => p.theme.borderDark};
-
-  &.touching {
-    background: ${(p) => p.theme.bgDark1};
-  }
-
-  &.collapsed {
-    border-bottom: none;
-  }
-
-  > * {
-    margin: 0 3px;
-  }
-`;
-var Label = styled3.span`
-  display: inline-block;
-  border-radius: 3px;
-  background: ${(p) => p.theme.bg};
-  border: 1px solid ${(p) => p.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: ${(p) => p.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: ${(p) => p.theme.textMuted};
-  }
-
-  &:hover {
-    background: ${(p) => p.theme.bg};
-
-    > .icon {
-      color: ${(p) => p.theme.hint};
-    }
-  }
-`;
-var TitleInput = styled3.input`
-  background: none;
-  border: none;
-  outline: none;
-  color: ${(p) => p.theme.textNormal};
-`;
 var GroupStateContext = React3.createContext({
   isCollapsed: () => {
     throw new Error("missing GroupStateContext");
@@ -274,7 +165,18 @@ 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 children = /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "flex gap-2",
+        info.direction === "vertical" && "flex-col",
+        info.direction === "horizontal" && "items-center",
+        info.wrap ? "flex-wrap" : "flex-nowrap"
+      ),
+      children: info.children.map(renderComponent)
+    }
+  );
   const collapsible = !!info.defaultCollapsibleState;
   const collapsed = info.defaultCollapsibleState ? groupState.isCollapsed(info.key, info.defaultCollapsibleState) : false;
   const collapsePressable = usePressable(
@@ -303,101 +205,146 @@ var Group = ({ className, info }) => {
     }
   };
   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
-  ] });
+  const childrenElements = hasBorder ? /* @__PURE__ */ jsx3(NestedContent, { children }) : children;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        hasBorder ? "border border-arcane-btn-border" : "m-0 border-none",
+        className
+      ),
+      children: [
+        displayHeader ? /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              `
+              flex items-center gap-0.5 border-b border-arcane-btn-border
+              bg-arcane-btn-border p-1
+            `,
+              collapsePressable.touching && "bg-arcane-bg-dark-1",
+              collapsible && collapsed && "border-b-0"
+            ),
+            children: [
+              collapsible && /* @__PURE__ */ jsx3(
+                Icon,
+                {
+                  className: cn("mx-0.5 cursor-pointer"),
+                  icon: collapsed ? "arrow_right" : "arrow_drop_down",
+                  ...collapsePressable.handlers
+                }
+              ),
+              info.labels?.map((l, index) => /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: cn(
+                    `
+                  mx-0.5 inline-block rounded-arcane-btn border
+                  border-arcane-bg-light-1 bg-arcane-bg px-1 py-0.5
+                `
+                  ),
+                  children: l.text
+                },
+                `${l.text}-${index}`
+              )),
+              showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  className: cn(
+                    `
+                      border-none bg-transparent px-0.5 text-arcane-normal
+                      text-arcane-text outline-none
+                    `
+                  ),
+                  ref: (input) => input?.focus(),
+                  onBlur: updateTitle,
+                  onKeyDown: keyDown,
+                  defaultValue: info.title
+                }
+              ) : /* @__PURE__ */ jsxs2(
+                "span",
+                {
+                  className: cn(
+                    `
+                      group flex cursor-pointer items-center gap-0.5
+                      rounded-arcane-btn px-0.5 text-arcane-normal
+                      hover:bg-arcane-bg
+                    `
+                  ),
+                  onClick: () => setEditingTitle(true),
+                  children: [
+                    /* @__PURE__ */ jsx3("span", { children: info.title }),
+                    /* @__PURE__ */ jsx3(
+                      Icon,
+                      {
+                        className: cn(
+                          `
+                        text-arcane-text-muted
+                        group-hover:text-arcane-hint
+                      `
+                        ),
+                        icon: "edit"
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx3("span", { children: info.title })),
+              collapsible ? /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: cn("mx-0.5 h-arcane-btn grow cursor-pointer"),
+                  ...collapsePressable.handlers
+                }
+              ) : /* @__PURE__ */ jsx3("span", { className: cn("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 ${(p) => p.theme.borderDark};
-
-  > .title {
-    padding: 5px;
-    background: ${(p) => p.theme.borderDark};
-    border-bottom: 1px solid ${(p) => p.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;
-`;
+var Label = ({ className, info }) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    className: cn(
+      "font-normal whitespace-nowrap",
+      info.bold && "font-bold",
+      className
+    ),
+    children: info.text
+  }
+);
 
 // 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 ${(p) => p.theme.borderDark};
-
-  &.${CLS_GROW} {
-    flex-grow: 1;
+var Rect = ({ className, info }) => /* @__PURE__ */ jsx5(
+  "div",
+  {
+    className: cn(
+      `
+        h-arcane-rect min-w-arcane-rect overflow-hidden rounded-arcane-btn
+        border border-arcane-btn-border bg-repeat
+      `,
+      info.grow && "grow",
+      className
+    ),
+    style: {
+      backgroundImage: `url('${TRANSPARENCY_SVG_URI}')`,
+      backgroundSize: "10px"
+    },
+    children: /* @__PURE__ */ jsx5("div", { className: cn("size-full"), style: { backgroundColor: info.color } })
   }
-`;
-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;
@@ -530,15 +477,29 @@ var SliderButton = ({ info, className }) => {
   return /* @__PURE__ */ jsx6(
     "div",
     {
-      className: calculateClass(
-        className,
-        `state-${state.state}`,
-        info.grow && CLASS_GROW
+      className: cn(
+        "relative min-h-arcane-btn min-w-arcane-slider-min",
+        info.grow && "grow",
+        state.state === "touching" && "z-arcane-slider-touching",
+        className
       ),
       children: /* @__PURE__ */ jsxs3(
         "div",
         {
-          className: "inner",
+          className: cn(
+            `
+            absolute inset-y-0 left-0 flex w-full cursor-pointer items-center
+            rounded-arcane-btn border border-arcane-btn-border
+            bg-arcane-grad-btn px-arcane-slider-pad text-arcane-text
+            shadow-arcane-btn transition-all duration-200 text-shadow-arcane-btn
+            hover:bg-arcane-grad-btn-hover
+          `,
+            state.state === "mouse-down" && `
+              !bg-arcane-grad-btn-active !text-shadow-arcane-btn-active
+              !shadow-arcane-btn-active !duration-50
+            `,
+            state.state === "touching" && "!w-arcane-slider-open !bg-arcane-bg-dark-1"
+          ),
           onMouseDown: () => setState({ state: "mouse-down" }),
           onMouseUp: () => input.current?.focus(),
           onTouchStart,
@@ -547,6 +508,19 @@ var SliderButton = ({ info, className }) => {
             /* @__PURE__ */ jsx6(
               "input",
               {
+                className: cn(
+                  `
+              pointer-events-none -mx-arcane-slider-input-hidden my-0 w-0
+              overflow-hidden rounded-arcane-btn border border-arcane-btn-border
+              bg-arcane-bg-dark-1 px-arcane-slider-input-px py-0
+              text-arcane-text opacity-0 shadow-arcane-box-inset transition-all
+              duration-200
+            `,
+                  state.state === "focused" && `
+                mx-0 w-3/5
+                opacity-100
+              `
+                ),
                 type: "text",
                 ref: input,
                 onFocus,
@@ -554,158 +528,67 @@ var SliderButton = ({ info, className }) => {
                 onKeyDown
               }
             ),
-            /* @__PURE__ */ jsx6("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
             /* @__PURE__ */ jsx6(
               "div",
               {
-                className: calculateClass(
-                  CLASS_SLIDER_DISPLAY,
-                  sliderGradient && CLASS_GRADIENT
+                className: cn(
+                  `
+              -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
+              leading-arcane-slider-value-hidden opacity-0
+            `,
+                  state.state === "touching" && "mx-arcane-slider-pad opacity-100"
+                ),
+                children: valueDisplay
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: cn(
+                  `
+              mx-arcane-slider-pad h-arcane-slider-display grow border
+              border-arcane-btn-border bg-arcane-bg-dark-1
+            `,
+                  sliderGradient && "h-arcane-slider-gradient-display"
                 ),
                 style: sliderGradient,
-                children: /* @__PURE__ */ jsx6("div", { className: "inner", style: { width: valueCSSPercent } })
+                children: /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    className: cn(
+                      `h-full bg-arcane-hint`,
+                      sliderGradient && `border-arcane-btn-border relative border-r-[2px] bg-transparent`,
+                      sliderGradient && `before:absolute before:w-[4px] before:-top-[5px] before:-bottom-[5px] before:-right-[3px] before:bg-arcane-btn-border`,
+                      sliderGradient && `after:absolute after:w-[2px] after:-top-[4px] after:-bottom-[4px] after:-right-[2px] after:bg-arcane-btn-text`
+                    ),
+                    style: { width: valueCSSPercent }
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsx6("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: cn(
+                  `
+              -mx-arcane-slider-value-hidden w-arcane-slider-value text-center
+              leading-arcane-slider-value-hidden opacity-0
+            `,
+                  state.state === "touching" && "mx-arcane-slider-pad opacity-100"
+                ),
+                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 ${(p) => p.theme.borderDark};
-    ${buttonStateNormal}
-
-    > input {
-      color: ${(p) => p.theme.textNormal};
-      opacity: 0;
-      margin: 0 -9px;
-      padding: 6px 8px;
-      width: 0;
-      pointer-events: none;
-      transition: all 200ms;
-      border-radius: 3px;
-      background: ${(p) => p.theme.bgDark1};
-      border: 1px solid ${(p) => p.theme.borderDark};
-      overflow: hidden;
-      box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
-    }
-
-    > .${CLASS_SLIDER_DISPLAY} {
-      flex-grow: 1;
-      margin: 0 ${SLIDER_PADDING / 2}px;
-      height: 4px;
-      background: ${(p) => p.theme.bgDark1};
-      border: 1px solid ${(p) => p.theme.borderDark};
-
-      > .inner {
-        height: 100%;
-        background: ${(p) => p.theme.hint};
-      }
-
-      &.${CLASS_GRADIENT} {
-        height: 10px;
-
-        > .inner {
-          position: relative;
-          background: none;
-          border-right: 2px solid ${(p) => p.theme.borderDark};
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: 4px;
-            top: -5px;
-            bottom: -5px;
-            right: -3px;
-            background: ${(p) => p.theme.borderDark};
-          }
-
-          &::after {
-            content: '';
-            position: absolute;
-            width: 2px;
-            top: -4px;
-            bottom: -4px;
-            right: -2px;
-            background: ${(p) => p.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: ${(p) => p.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);
@@ -738,180 +621,152 @@ var Switch = ({ className, info }) => {
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: calculateClass(className, touching && CLASS_TOUCHING),
+      className: cn("relative", className),
       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" })
-        ] }) })
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: cn(
+              `
+            pointer-events-none absolute -inset-arcane-touch-indicator
+            rounded-arcane-touch-indicator border-2 border-transparent
+            bg-transparent transition-colors duration-300
+          `,
+              touching && "border-arcane-hint bg-arcane-hint-soft duration-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: cn(
+              `
+            relative block h-arcane-switch-knob w-arcane-switch-track
+            min-w-arcane-switch-track overflow-hidden rounded-arcane-btn border
+            border-arcane-btn-border
+          `
+            ),
+            children: /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: cn(
+                  `absolute top-0 left-0 cursor-pointer transition-all duration-300`,
+                  info.state === "on" && "left-arcane-switch-label"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      className: cn(
+                        `
+                absolute top-0 -left-arcane-switch-label h-arcane-switch-knob
+                w-arcane-switch-label bg-arcane-grad-hint-pressed text-center
+                leading-arcane-switch-label shadow-arcane-btn-active
+                text-shadow-arcane-btn-active
+              `
+                      ),
+                      children: "ON"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      className: cn(
+                        `
+                absolute top-0 left-arcane-switch-off-left h-arcane-switch-knob
+                w-arcane-switch-label bg-arcane-grad-btn-active text-center
+                leading-arcane-switch-label shadow-arcane-btn-active
+                text-shadow-arcane-btn-active
+              `
+                      ),
+                      children: "OFF"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      className: cn(
+                        `
+                absolute -top-px -left-px size-arcane-btn rounded-arcane-btn
+                border border-arcane-btn-border bg-arcane-grad-btn
+                shadow-arcane-btn text-shadow-arcane-btn
+                hover:bg-arcane-grad-btn-hover
+              `
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
       ]
     }
   );
 };
-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 ${(p) => p.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: ${(p) => p.theme.shadows.textShadowActive};
-        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: ${(p) => p.theme.gradients.hintPressed};
-      }
-
-      > .button {
-        top: -1px;
-        left: -1px;
-        width: ${BUTTON_WIDTH}px;
-        background: ${(p) => p.theme.gradients.button};
-        text-shadow: ${(p) => p.theme.shadows.textShadow};
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
-        border-radius: 3px;
-        border: 1px solid ${(p) => p.theme.borderDark};
-      }
-
-      > .off-text {
-        background: ${(p) => p.theme.gradients.buttonActive};
-        left: ${BUTTON_WIDTH - 2}px;
-      }
-
-      &.on {
-        left: 40px;
-      }
-
-      &:hover > .button {
-        background: ${(p) => p.theme.gradients.buttonHover};
-      }
-    }
-  }
-
-  .${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: ${(p) => p.theme.borderDark};
-  border: 1px solid ${(p) => p.theme.borderDark};
-`;
-var TabList = styled8.div`
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid ${(p) => p.theme.borderDark};
-`;
-var TabItem = styled8.div`
-  height: ${(p) => p.theme.sizingPx.spacing * 3}px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 ${(p) => p.theme.sizingPx.spacing}px;
-  cursor: pointer;
-  background: ${(p) => p.theme.bgDark1};
-  margin-right: 1px;
-
-  &:hover,
-  &.touching {
-    background: ${(p) => p.theme.bgLight1};
-  }
-
-  &.current {
-    color: ${(p) => p.theme.hint};
-
-    &::after {
-      content: '';
-      border-bottom: 2px solid ${(p) => p.theme.hint};
-      display: block;
-      margin-top: ${(p) => p.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) })
-  ] });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cn(
+        "flex flex-col border border-arcane-btn-border bg-arcane-btn-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: cn("flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              `
+                relative mr-px flex h-arcane-tabs-item cursor-pointer
+                items-center bg-arcane-bg-dark-1 px-arcane
+                hover:bg-arcane-bg-light-1
+              `,
+              touching === i && "bg-arcane-bg-light-1",
+              currentTab === i && "text-arcane-hint"
+            ),
+            onClick: () => setCurrentTab(i),
+            onTouchStart: (event) => {
+              event.preventDefault();
+              setTouching(i);
+            },
+            onTouchEnd: (event) => {
+              event.preventDefault();
+              setTouching(null);
+              setCurrentTab(i);
+            },
+            children: [
+              tab2.name,
+              currentTab === i ? /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  className: cn(
+                    "absolute inset-x-2 bottom-1 h-0.5 bg-arcane-hint"
+                  )
+                }
+              ) : null
+            ]
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx8(NestedContent, { 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);
@@ -924,7 +779,14 @@ var TextInput = ({ className, info }) => {
   return /* @__PURE__ */ jsx9(
     "input",
     {
-      className,
+      className: cn(
+        `
+          relative box-border overflow-hidden rounded-arcane-btn border
+          border-arcane-btn-border bg-arcane-bg-dark-1 px-1 py-0.5
+          text-arcane-text shadow-arcane-box-inset text-shadow-arcane-btn
+        `,
+        className
+      ),
       defaultValue: info.value,
       ref,
       onChange: (ev) => sendMessage?.({
@@ -937,67 +799,13 @@ var TextInput = ({ className, info }) => {
     }
   );
 };
-var StyledTextInput = styled9(TextInput)`
-  position: relative;
-  box-sizing: border-box;
-  padding: 6px 8px;
-  border-radius: 3px;
-  background: ${(p) => p.theme.bgDark1};
-  border: 1px solid ${(p) => p.theme.borderDark};
-  overflow: hidden;
-  box-shadow: ${(p) => p.theme.shadows.boxShadowInset};
-  color: ${(p) => p.theme.textNormal};
-  text-shadow: ${(p) => p.theme.shadows.textShadow};
-
-  @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 React8, { useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
 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 ${(p) => p.theme.borderDark};
-  background: ${(p) => p.theme.borderDark};
-`;
-var Fill = styled10.div`
-  height: 100%;
-  background: ${(p) => p.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 { timeDifferenceMs } = useContext2(StageContext);
   const frameState = React8.useRef({
     animationFrame: -1,
     state: null
@@ -1011,7 +819,7 @@ var Timeline = (props) => {
       }
       if (info.state.state === "playing") {
         setCurrentTimeMillis(
-          (Date.now() - info.state.effectiveStartTime) * info.state.speed
+          (Date.now() - (timeDifferenceMs ?? 0) - info.state.effectiveStartTime) * info.state.speed
         );
         frameState.current.animationFrame = window.requestAnimationFrame(
           recalculateCurrentTimeMillis
@@ -1024,31 +832,44 @@ var Timeline = (props) => {
     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))
+  }, [frameState, info.state, timeDifferenceMs]);
+  return /* @__PURE__ */ jsxs6("div", { className: cn("grow", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: cn("flex"), children: [
+      /* @__PURE__ */ jsxs6("div", { className: cn("grow"), children: [
+        info.title && /* @__PURE__ */ jsx10("div", { className: cn("mb-2 text-arcane-title font-bold"), children: info.title }),
+        info.subtitles?.map((subtitle, k) => /* @__PURE__ */ jsx10("div", { className: cn("mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))
       ] }),
-      /* @__PURE__ */ jsxs6(SourceData, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col items-end justify-center"), children: [
         info.source?.name,
         /* @__PURE__ */ jsx10(
-          IndicatorIcon,
+          Icon,
           {
+            className: cn("text-arcane-timeline-indicator"),
             icon: info.state.state === "playing" ? "play_arrow" : "pause"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx10(Bar, { children: /* @__PURE__ */ jsx10(
-      Fill,
+    /* @__PURE__ */ jsx10(
+      "div",
       {
-        style: {
-          width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
-        }
+        className: cn(
+          `
+            h-arcane-timeline-bar w-full border border-arcane-btn-border
+            bg-arcane-btn-border
+          `
+        ),
+        children: /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: cn("h-full bg-arcane-hint"),
+            style: {
+              width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
+            }
+          }
+        )
       }
-    ) })
+    )
   ] });
 };
 
@@ -1062,23 +883,24 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
     }
     switch (info.component) {
       case "button":
-        return /* @__PURE__ */ jsx11(StyledButton, { info }, info.key);
+        return /* @__PURE__ */ jsx11(Button, { info }, info.key);
       case "group":
-        return /* @__PURE__ */ jsx11(StyledGroup, { info }, info.key);
+        return /* @__PURE__ */ jsx11(Group, { info }, info.key);
       case "label":
-        return /* @__PURE__ */ jsx11(StyledLabel, { info }, info.key);
+        return /* @__PURE__ */ jsx11(Label, { info }, info.key);
       case "rect":
         return /* @__PURE__ */ jsx11(Rect, { info }, info.key);
       case "slider_button":
-        return /* @__PURE__ */ jsx11(StyledSliderButton, { info }, info.key);
+        return /* @__PURE__ */ jsx11(SliderButton, { info }, info.key);
       case "switch":
-        return /* @__PURE__ */ jsx11(StyledSwitch, { info }, info.key);
+        return /* @__PURE__ */ jsx11(Switch, { info }, info.key);
       case "tabs":
         return /* @__PURE__ */ jsx11(Tabs, { info }, info.key);
       case "text-input":
-        return /* @__PURE__ */ jsx11(StyledTextInput, { info }, info.key);
+        return /* @__PURE__ */ jsx11(TextInput, { info }, info.key);
       case "timeline":
         return /* @__PURE__ */ jsx11(Timeline, { info }, info.key);
+      // Parent-Specific Components
       case "group-header":
       case "tab":
         throw new Error(
@@ -1088,18 +910,18 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
   }
 };
 export {
-  StyledButton as Button,
+  Button,
   CORE_FRONTEND_COMPONENT_RENDERER,
-  StyledGroup as Group,
+  Group,
   GroupStateWrapper,
-  StyledLabel as Label,
-  StyledNestedContent as NestedContent,
+  Label,
+  NestedContent,
   Rect,
-  StyledSliderButton as SliderButton,
+  SliderButton,
   StageContext,
-  StyledSwitch as Switch,
+  Switch,
   Tabs,
-  StyledTextInput as TextInput,
+  TextInput,
   Timeline,
   core_exports as code
 };