@arcanejs/toolkit-frontend 0.8.0 → 0.10.0

package/dist/components/index.js

@@ -2,28 +2,19 @@
 
 
 
-var _chunkUHFE2X4Vjs = require('../chunk-UHFE2X4V.js');
+var _chunkLXNJPBVTjs = require('../chunk-LXNJPBVT.js');
 
 
 
 
-
-
-
-
-var _chunkZHJBPEPYjs = require('../chunk-ZHJBPEPY.js');
-
-
-
-
-var _chunkTMN35K5Yjs = require('../chunk-TMN35K5Y.js');
+var _chunkGBYIEWGNjs = require('../chunk-GBYIEWGN.js');
+require('../chunk-MLKGABMK.js');
 
 // src/components/index.tsx
 var _core = require('@arcanejs/protocol/core');
 
 // src/components/button.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _styledcomponents = require('styled-components');
 
 // src/components/context.ts
 
@@ -37,28 +28,11 @@ var StageContext = _react.createContext.call(void 0,
 
 // src/components/button.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var TOUCH_INDICATOR_CLASS = "touch-indicator";
-var LOADING_CLASS = "loading";
-var TOUCHING_CLASS = "touching";
-var ERROR_CLASS = "error";
-var ButtonContents = _styledcomponents.styled.div`
-  padding: 6px 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  > * {
-    padding: 0;
-  }
-`;
-var ButtonLabel = _styledcomponents.styled.span`
-  padding: 0 4px;
-`;
 var Button = (props) => {
   const { call } = _react2.default.useContext(StageContext);
   const [localState, setLocalState] = _react2.default.useState(null);
   const state = _nullishCoalesce(localState, () => ( props.info.state));
-  const { touching, handlers } = _chunkTMN35K5Yjs.usePressable.call(void 0, async () => {
+  const { touching, handlers } = _chunkGBYIEWGNjs.usePressable.call(void 0, async () => {
     try {
       if (!call) return;
       setLocalState({ state: "loading" });
@@ -76,48 +50,47 @@ var Button = (props) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
-        props.className,
-        (touching || state.state === "pressed") && TOUCHING_CLASS,
-        state.state === "loading" && LOADING_CLASS,
-        state.state === "error" && ERROR_CLASS
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        `
+          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__ */ _jsxruntime.jsx.call(void 0, "div", { className: TOUCH_INDICATOR_CLASS }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonContents, { children: [
-          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { icon: props.info.icon }),
-          props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLabel, { children: props.info.text })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, 
+              `
+            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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex items-center justify-center px-0.5"), children: [
+          props.info.icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLXNJPBVTjs.Icon, { icon: props.info.icon }),
+          props.info.text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "px-1"), children: props.info.text })
         ] })
       ]
     }
   );
 };
-var StyledButton = _styledcomponents.styled.call(void 0, Button)`
-  ${_chunkZHJBPEPYjs.rectButton}
-  outline: none;
-  height: 30px;
-  position: relative;
-  overflow: visible;
-
-  .${TOUCH_INDICATOR_CLASS} {
-    ${_chunkZHJBPEPYjs.touchIndicatorNormal}
-  }
-
-  &.${ERROR_CLASS} {
-    color: ${(p) => p.theme.colorRed};
-    border-color: ${(p) => p.theme.colorRed};
-  }
-
-  &.${TOUCHING_CLASS}, &.${LOADING_CLASS} {
-    ${_chunkZHJBPEPYjs.buttonStateNormalActive}
-
-    .${TOUCH_INDICATOR_CLASS} {
-      ${_chunkZHJBPEPYjs.touchIndicatorTouching}
-    }
-  }
-`;
 
 // src/components/group.tsx
 
@@ -125,11 +98,9 @@ var StyledButton = _styledcomponents.styled.call(void 0, Button)`
 
 
 
-
 // src/components/nesting.tsx
 
 
-
 function nextColor(currentColor) {
   switch (currentColor) {
     case "dark":
@@ -143,104 +114,24 @@ function nextColor(currentColor) {
 var LastNestedColor = _react2.default.createContext("dark");
 var NestedContent = ({ className, children }) => {
   const color = _react2.default.useContext(LastNestedColor);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, `color-${color}`), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, LastNestedColor.Provider, { value: nextColor(color), children })
+    }
+  );
 };
 NestedContent.displayName = "NestedContent";
-var StyledNestedContent = _styledcomponents.styled.call(void 0, 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
 
-var CollapseIcon = _styledcomponents.styled.call(void 0, (0, _chunkUHFE2X4Vjs.Icon))({
-  cursor: "pointer"
-});
-var Header = _styledcomponents.styled.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 = _styledcomponents.styled.span`
-  display: inline-block;
-  border-radius: 3px;
-  background: ${(p) => p.theme.bg};
-  border: 1px solid ${(p) => p.theme.bgLight1};
-  padding: 3px 4px;
-`;
-var Grow = _styledcomponents.styled.span({
-  flexGrow: "1"
-});
-var CollapseBar = _styledcomponents.styled.span({
-  flexGrow: "1",
-  cursor: "pointer",
-  height: "30px"
-});
-var GroupChildren = _styledcomponents.styled.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 = _styledcomponents.styled.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 = _styledcomponents.styled.input`
-  background: none;
-  border: none;
-  outline: none;
-  color: ${(p) => p.theme.textNormal};
-`;
 var GroupStateContext = _react2.default.createContext({
   isCollapsed: () => {
     throw new Error("missing GroupStateContext");
@@ -274,10 +165,21 @@ var Group = ({ className, info }) => {
   const groupState = _react.useContext.call(void 0, GroupStateContext);
   const { renderComponent, sendMessage } = _react.useContext.call(void 0, StageContext);
   const [editingTitle, setEditingTitle] = _react.useState.call(void 0, false);
-  const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GroupChildren, { info, children: info.children.map(renderComponent) });
+  const children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        "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 = _chunkTMN35K5Yjs.usePressable.call(void 0, 
+  const collapsePressable = _chunkGBYIEWGNjs.usePressable.call(void 0, 
     () => groupState.toggleCollapsed(info.key)
   );
   const showTitle = info.title || info.editableTitle;
@@ -303,101 +205,146 @@ var Group = ({ className, info }) => {
     }
   };
   const hasBorder = info.border || displayHeader;
-  const childrenElements = hasBorder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledNestedContent, { children }) : children;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, !hasBorder && "no-border"), children: [
-    displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Header,
-      {
-        className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
-          collapsePressable.touching && "touching",
-          collapsible && collapsed && "collapsed"
-        ),
-        children: [
-          collapsible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            CollapseIcon,
-            {
-              icon: collapsed ? "arrow_right" : "arrow_drop_down",
-              ...collapsePressable.handlers
-            }
-          ),
-          _optionalChain([info, 'access', _7 => _7.labels, 'optionalAccess', _8 => _8.map, 'call', _9 => _9((l) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { children: l.text }))]),
-          showTitle && (info.editableTitle ? editingTitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            TitleInput,
-            {
-              ref: (input) => _optionalChain([input, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]),
-              onBlur: updateTitle,
-              onKeyDown: keyDown,
-              defaultValue: info.title
-            }
-          ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EditableTitle, { onClick: () => setEditingTitle(true), children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUHFE2X4Vjs.Icon, { className: "icon", icon: "edit" })
-          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title })),
-          collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseBar, { ...collapsePressable.handlers }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Grow, {}),
-          _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
-        ]
-      }
-    ) : null,
-    collapsible && collapsed ? null : childrenElements
-  ] });
+  const childrenElements = hasBorder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NestedContent, { children }) : children;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        hasBorder ? "border border-arcane-btn-border" : "m-0 border-none",
+        className
+      ),
+      children: [
+        displayHeader ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, 
+              `
+              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__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkLXNJPBVTjs.Icon,
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 cursor-pointer"),
+                  icon: collapsed ? "arrow_right" : "arrow_drop_down",
+                  ...collapsePressable.handlers
+                }
+              ),
+              _optionalChain([info, 'access', _7 => _7.labels, 'optionalAccess', _8 => _8.map, 'call', _9 => _9((l, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                    `
+                  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__ */ _jsxruntime.jsx.call(void 0, 
+                "input",
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                    `
+                      border-none bg-transparent px-0.5 text-arcane-normal
+                      text-arcane-text outline-none
+                    `
+                  ),
+                  ref: (input) => _optionalChain([input, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]),
+                  onBlur: updateTitle,
+                  onKeyDown: keyDown,
+                  defaultValue: info.title
+                }
+              ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "span",
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                    `
+                      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__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _chunkLXNJPBVTjs.Icon,
+                      {
+                        className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                          `
+                        text-arcane-text-muted
+                        group-hover:text-arcane-hint
+                      `
+                        ),
+                        icon: "edit"
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: info.title })),
+              collapsible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, "mx-0.5 h-arcane-btn grow cursor-pointer"),
+                  ...collapsePressable.handlers
+                }
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow") }),
+              _optionalChain([info, 'access', _12 => _12.headers, 'optionalAccess', _13 => _13.map, 'call', _14 => _14((h) => h.children.map((c) => renderComponent(c)))])
+            ]
+          }
+        ) : null,
+        collapsible && collapsed ? null : childrenElements
+      ]
+    }
+  );
 };
 Group.displayName = "Group";
-var StyledGroup = _styledcomponents.styled.call(void 0, 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
 
-
-var Label2 = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: info.text });
-var StyledLabel = _styledcomponents.styled.call(void 0, Label2)`
-  font-weight: ${(p) => p.info.bold ? "bold" : "normal"};
-  white-space: nowrap;
-`;
+var Label = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _chunkGBYIEWGNjs.cn.call(void 0, 
+      "font-normal whitespace-nowrap",
+      info.bold && "font-bold",
+      className
+    ),
+    children: info.text
+  }
+);
 
 // src/components/rect.tsx
 
-
-var CLS_GROW = "grow";
-var Wrapper = _styledcomponents.styled.div`
-  min-width: 30px;
-  height: 30px;
-  border-radius: 3px;
-  overflow: hidden;
-  background: url('${_chunkUHFE2X4Vjs.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__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _chunkGBYIEWGNjs.cn.call(void 0, 
+      `
+        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('${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI}')`,
+      backgroundSize: "10px"
+    },
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "size-full"), style: { backgroundColor: info.color } })
   }
-`;
-var Inner = _styledcomponents.styled.div`
-  width: 100%;
-  height: 100%;
-`;
-var Rect = ({ className, info }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Wrapper, { className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, info.grow && CLS_GROW), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Inner, { style: { backgroundColor: info.color } }) });
+);
 
 // src/components/slider-button.tsx
 
 
-
-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;
@@ -488,7 +435,7 @@ var SliderButton = ({ info, className }) => {
         touch.pageX
       );
       const start = onDown(cursorPosition);
-      _chunkTMN35K5Yjs.trackTouch.call(void 0, 
+      _chunkGBYIEWGNjs.trackTouch.call(void 0, 
         touch,
         (p) => {
           const amntDiff = (p.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
@@ -525,20 +472,34 @@ var SliderButton = ({ info, className }) => {
   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(${_chunkUHFE2X4Vjs.TRANSPARENCY_SVG_URI})`
+    background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${_chunkLXNJPBVTjs.TRANSPARENCY_SVG_URI})`
   } : void 0;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
-        className,
-        `state-${state.state}`,
-        info.grow && CLASS_GROW
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        "relative min-h-arcane-btn min-w-arcane-slider-min",
+        info.grow && "grow",
+        state.state === "touching" && "z-arcane-slider-touching",
+        className
       ),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
-          className: "inner",
+          className: _chunkGBYIEWGNjs.cn.call(void 0, 
+            `
+            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: () => _optionalChain([input, 'access', _19 => _19.current, 'optionalAccess', _20 => _20.focus, 'call', _21 => _21()]),
           onTouchStart,
@@ -547,6 +508,19 @@ var SliderButton = ({ info, className }) => {
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
+                className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                  `
+              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__ */ _jsxruntime.jsx.call(void 0, "div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "div",
               {
-                className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
-                  CLASS_SLIDER_DISPLAY,
-                  sliderGradient && CLASS_GRADIENT
+                className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                  `
+              -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__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                  `
+              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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "inner", style: { width: valueCSSPercent } })
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                      `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__ */ _jsxruntime.jsx.call(void 0, "div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                  `
+              -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 = _styledcomponents.styled.call(void 0, 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};
-    ${_chunkZHJBPEPYjs.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 {
-      ${_chunkZHJBPEPYjs.buttonStateNormalHover}
-    }
-  }
-
-  &.state-mouse-down {
-    > .inner {
-      ${_chunkZHJBPEPYjs.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
 
 
-
-var CLASS_TOUCHING = "touching";
-var TOUCH_INDICATOR_CLASS2 = "touch-indicator";
 var Switch = ({ className, info }) => {
   const { sendMessage } = _react2.default.useContext(StageContext);
   const [touching, setTouching] = _react.useState.call(void 0, false);
@@ -738,181 +621,153 @@ var Switch = ({ className, info }) => {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunkTMN35K5Yjs.calculateClass.call(void 0, className, touching && CLASS_TOUCHING),
+      className: _chunkGBYIEWGNjs.cn.call(void 0, "relative", className),
       onClick,
       onTouchStart,
       onTouchEnd,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TOUCH_INDICATOR_CLASS2 }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "inner", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "slider" + (info.state === "on" ? " on" : ""), children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "on-text", children: "ON" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "off-text", children: "OFF" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "button" })
-        ] }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, 
+              `
+            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__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, 
+              `
+            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__ */ _jsxruntime.jsxs.call(void 0, 
+              "div",
+              {
+                className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                  `absolute top-0 left-0 cursor-pointer transition-all duration-300`,
+                  info.state === "on" && "left-arcane-switch-label"
+                ),
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "div",
+                    {
+                      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                        `
+                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__ */ _jsxruntime.jsx.call(void 0, 
+                    "div",
+                    {
+                      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                        `
+                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__ */ _jsxruntime.jsx.call(void 0, 
+                    "div",
+                    {
+                      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                        `
+                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 = _styledcomponents.styled.call(void 0, 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} {
-    ${_chunkZHJBPEPYjs.touchIndicatorNormal}
-  }
-
-  &.${CLASS_TOUCHING} {
-    .${TOUCH_INDICATOR_CLASS2} {
-      ${_chunkZHJBPEPYjs.touchIndicatorTouching}
-    }
-  }
-`;
 
 // src/components/tabs.tsx
 
 
-
-var Wrapper2 = _styledcomponents.styled.div`
-  display: flex;
-  flex-direction: column;
-  background: ${(p) => p.theme.borderDark};
-  border: 1px solid ${(p) => p.theme.borderDark};
-`;
-var TabList = _styledcomponents.styled.div`
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid ${(p) => p.theme.borderDark};
-`;
-var TabItem = _styledcomponents.styled.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 } = _react2.default.useContext(StageContext);
   const [touching, setTouching] = _react2.default.useState(null);
   const [currentTab, setCurrentTab] = _react2.default.useState(0);
   const tab = props.info.tabs[currentTab];
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Wrapper2, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabList, { children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      TabItem,
-      {
-        className: _chunkTMN35K5Yjs.calculateClass.call(void 0, 
-          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__ */ _jsxruntime.jsx.call(void 0, StyledNestedContent, { children: _optionalChain([tab, 'optionalAccess', _23 => _23.child]) && renderComponent(tab.child) })
-  ] });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        "flex flex-col border border-arcane-btn-border bg-arcane-btn-border"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-row border-b border-arcane-btn-border"), children: props.info.tabs.map((tab2, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, 
+              `
+                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__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  className: _chunkGBYIEWGNjs.cn.call(void 0, 
+                    "absolute inset-x-2 bottom-1 h-0.5 bg-arcane-hint"
+                  )
+                }
+              ) : null
+            ]
+          },
+          i
+        )) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NestedContent, { children: _optionalChain([tab, 'optionalAccess', _23 => _23.child]) && renderComponent(tab.child) })
+      ]
+    }
+  );
 };
 
 // src/components/text-input.tsx
 
 
-
 var TextInput = ({ className, info }) => {
   const { sendMessage } = _react2.default.useContext(StageContext);
   const ref = _react2.default.useRef(null);
@@ -924,7 +779,14 @@ var TextInput = ({ className, info }) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "input",
     {
-      className,
+      className: _chunkGBYIEWGNjs.cn.call(void 0, 
+        `
+          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) => _optionalChain([sendMessage, 'optionalCall', _24 => _24({
@@ -937,67 +799,13 @@ var TextInput = ({ className, info }) => {
     }
   );
 };
-var StyledTextInput = _styledcomponents.styled.call(void 0, 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
 
 
-
-var Wrapper3 = _styledcomponents.styled.div`
-  flex-grow: 1;
-`;
-var Data = _styledcomponents.styled.div`
-  display: flex;
-`;
-var Metadata = _styledcomponents.styled.div`
-  flex-grow: 1;
-`;
-var SourceData = _styledcomponents.styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: end;
-  justify-content: center;
-`;
-var IndicatorIcon = _styledcomponents.styled.call(void 0, _chunkUHFE2X4Vjs.Icon)`
-  font-size: 40px;
-`;
-var Bar = _styledcomponents.styled.div`
-  width: 100%;
-  height: 10px;
-  border: 1px solid ${(p) => p.theme.borderDark};
-  background: ${(p) => p.theme.borderDark};
-`;
-var Fill = _styledcomponents.styled.div`
-  height: 100%;
-  background: ${(p) => p.theme.hint};
-`;
-var Title = _styledcomponents.styled.div`
-  font-size: 1.5em;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-`;
-var Subtitle = _styledcomponents.styled.div`
-  font-size: 1em;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-`;
 var Timeline = (props) => {
   const { className, info } = props;
+  const { timeDifferenceMs } = _react.useContext.call(void 0, StageContext);
   const frameState = _react2.default.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() - (_nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, Wrapper3, { className, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Data, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Metadata, { children: [
-        info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { children: info.title }),
-        _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subtitle, { children: subtitle }, k))])
+  }, [frameState, info.state, timeDifferenceMs]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "grow"), children: [
+        info.title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-title font-bold"), children: info.title }),
+        _optionalChain([info, 'access', _25 => _25.subtitles, 'optionalAccess', _26 => _26.map, 'call', _27 => _27((subtitle, k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "mb-2 text-arcane-subtitle font-bold"), children: subtitle }, k))])
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SourceData, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkGBYIEWGNjs.cn.call(void 0, "flex flex-col items-end justify-center"), children: [
         _optionalChain([info, 'access', _28 => _28.source, 'optionalAccess', _29 => _29.name]),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IndicatorIcon,
+          _chunkLXNJPBVTjs.Icon,
           {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, "text-arcane-timeline-indicator"),
             icon: info.state.state === "playing" ? "play_arrow" : "pause"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Bar, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Fill,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
       {
-        style: {
-          width: `${Math.min(100, 100 * currentTimeMillis / info.state.totalTimeMillis)}%`
-        }
+        className: _chunkGBYIEWGNjs.cn.call(void 0, 
+          `
+            h-arcane-timeline-bar w-full border border-arcane-btn-border
+            bg-arcane-btn-border
+          `
+        ),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkGBYIEWGNjs.cn.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, StyledButton, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { info }, info.key);
       case "group":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledGroup, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Group, { info }, info.key);
       case "label":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLabel, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { info }, info.key);
       case "rect":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Rect, { info }, info.key);
       case "slider_button":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSliderButton, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SliderButton, { info }, info.key);
       case "switch":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledSwitch, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Switch, { info }, info.key);
       case "tabs":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tabs, { info }, info.key);
       case "text-input":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTextInput, { info }, info.key);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput, { info }, info.key);
       case "timeline":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Timeline, { info }, info.key);
+      // Parent-Specific Components
       case "group-header":
       case "tab":
         throw new Error(
@@ -1102,4 +924,4 @@ var CORE_FRONTEND_COMPONENT_RENDERER = {
 
 
 
-exports.Button = StyledButton; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = StyledGroup; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = StyledLabel; exports.NestedContent = StyledNestedContent; exports.Rect = Rect; exports.SliderButton = StyledSliderButton; exports.StageContext = StageContext; exports.Switch = StyledSwitch; exports.Tabs = Tabs; exports.TextInput = StyledTextInput; exports.Timeline = Timeline; exports.code = _chunkUHFE2X4Vjs.core_exports;
+exports.Button = Button; exports.CORE_FRONTEND_COMPONENT_RENDERER = CORE_FRONTEND_COMPONENT_RENDERER; exports.Group = Group; exports.GroupStateWrapper = GroupStateWrapper; exports.Label = Label; exports.NestedContent = NestedContent; exports.Rect = Rect; exports.SliderButton = SliderButton; exports.StageContext = StageContext; exports.Switch = Switch; exports.Tabs = Tabs; exports.TextInput = TextInput; exports.Timeline = Timeline; exports.code = _chunkLXNJPBVTjs.core_exports;