@arcanewizards/timecode-toolbox 0.1.4 → 0.1.5

package/dist/components/frontend/index.mjs

@@ -15972,7 +15972,7 @@ import {
   useCallback as useCallback24,
   useContext as useContext17,
   useEffect as useEffect34,
-  useMemo as useMemo17,
+  useMemo as useMemo19,
   useState as useState36
 } from "react";
 
@@ -16016,6 +16016,10 @@ var STRINGS = {
   },
   inputs: {
     title: "INPUTS",
+    unnamed: "Unnamed Input",
+    enable: "Enable Input",
+    disable: "Disable Input",
+    edit: "Edit Input",
     noChildren: "No inputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Input`,
@@ -16039,6 +16043,8 @@ var STRINGS = {
   delay: (delayMs) => `Delay: ${MS_FORMAT.format(delayMs)}`,
   generators: {
     title: "GENERATORS",
+    unnamed: "Unnamed Generator",
+    edit: "Edit Generator",
     noChildren: "No generators yet. Please add one using the buttons below.",
     type: {
       clock: "Clock"
@@ -16050,6 +16056,11 @@ var STRINGS = {
   },
   outputs: {
     title: "OUTPUTS",
+    unnamed: "Unnamed Output",
+    enable: "Enable Output",
+    disable: "Disable Output",
+    link: "Link Output",
+    edit: "Edit Output",
     noChildren: "No outputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Output`,
@@ -16394,7 +16405,9 @@ var TimecodeDisplay = ({
   id,
   timecode: { state, metadata },
   config,
-  headerComponents
+  headerComponents,
+  disabled,
+  rootState
 }) => {
   const { handlers, callHandler } = useApplicationHandlers();
   const hooks = id && getTreeValue(handlers, id);
@@ -16445,29 +16458,41 @@ var TimecodeDisplay = ({
           )
         ),
         children: [
-          headerComponents && /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
+          headerComponents && /* @__PURE__ */ jsx26("div", { className: "flex gap-0.25", children: headerComponents }),
           /* @__PURE__ */ jsx26(
             SizeAwareDiv,
             {
-              className: cn(
-                "relative min-h-timecode-min-height grow",
-                cnd(state?.state === "stopped", "opacity-50"),
-                cnd(
-                  hooks?.play && hooks?.pause,
-                  `
-                cursor-pointer
-                hover:opacity-100
-              `
-                )
-              ),
+              className: "relative min-h-timecode-min-height grow",
               onClick: toggle,
-              children: /* @__PURE__ */ jsx26("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx26("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ jsx26(
-                ActiveTimecodeText,
+              children: disabled ? /* @__PURE__ */ jsx26(
+                SizeAwareDiv,
+                {
+                  className: "\n                pointer-events-none absolute inset-0 flex items-center\n                justify-center\n              ",
+                  children: /* @__PURE__ */ jsx26(Icon2, { icon: "pause", className: "text-timecode-adaptive" })
+                }
+              ) : /* @__PURE__ */ jsx26(
+                "div",
                 {
-                  effectiveStartTimeMillis: state.effectiveStartTimeMillis,
-                  speed: state.speed
+                  className: cn(
+                    "absolute inset-0 flex items-center justify-center",
+                    cnd(state?.state === "stopped", "opacity-50"),
+                    cnd(
+                      hooks?.play && hooks?.pause,
+                      `
+                    cursor-pointer
+                    hover:opacity-100
+                  `
+                    )
+                  ),
+                  children: /* @__PURE__ */ jsx26("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ jsx26(
+                    ActiveTimecodeText,
+                    {
+                      effectiveStartTimeMillis: state.effectiveStartTimeMillis,
+                      speed: state.speed
+                    }
+                  ) })
                 }
-              ) }) })
+              )
             }
           ),
           hooks?.pause || hooks?.play ? /* @__PURE__ */ jsxs9("div", { className: "flex justify-center gap-px", children: [
@@ -16555,9 +16580,53 @@ var TimecodeDisplay = ({
           metadata.artist && /* @__PURE__ */ jsx26("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
         ] })
       }
-    ) : null
+    ) : null,
+    rootState.errors.length > 0 && /* @__PURE__ */ jsx26("div", { className: "flex gap-px", children: rootState.errors.map((error, index2) => /* @__PURE__ */ jsx26(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-red-background p-0.5\n                text-sigil-usage-red-text\n              ",
+        children: error
+      },
+      index2
+    )) }),
+    rootState.warnings.length > 0 && /* @__PURE__ */ jsx26("div", { className: "flex gap-px", children: rootState.warnings.map((warning, index2) => /* @__PURE__ */ jsx26(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-orange-background p-0.5\n                text-sigil-usage-orange-text\n              ",
+        children: warning
+      },
+      index2
+    )) })
   ] });
 };
+var getLinkedSourceInfo = (link, config) => {
+  if (!link) {
+    return void 0;
+  }
+  let info = void 0;
+  if (link[0] === "input") {
+    const input = config.inputs?.[link[1]];
+    if (input) {
+      info = {
+        color: input.color,
+        type: STRINGS.protocols[input.definition.type].short,
+        name: input.name ? [input.name] : [],
+        namePlaceholder: STRINGS.inputs.unnamed
+      };
+    }
+  } else if (link[0] === "generator") {
+    const generator = config.generators?.[link[1]];
+    if (generator) {
+      info = {
+        color: generator.color,
+        type: STRINGS.generators.type[generator.definition.type],
+        name: generator.name ? [generator.name] : [],
+        namePlaceholder: STRINGS.generators.unnamed
+      };
+    }
+  }
+  return info;
+};
 var EMPTY_TIMECODE = {
   name: null,
   state: {
@@ -16576,8 +16645,10 @@ var TimecodeTreeDisplay = ({
   id,
   type,
   name,
+  link,
   color,
   timecode,
+  rootState,
   namePlaceholder,
   buttons,
   assignToOutput
@@ -16591,8 +16662,8 @@ var TimecodeTreeDisplay = ({
       });
     }
   }, [id, openNewWidow]);
-  name = timecode?.name ? [...name, timecode.name] : name;
-  if (isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
+  name = timecode !== "disabled" && timecode?.name ? [...name, timecode.name] : name;
+  if (timecode !== "disabled" && isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
     return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ jsx26(
       TimecodeTreeDisplay,
       {
@@ -16602,6 +16673,7 @@ var TimecodeTreeDisplay = ({
         name,
         color: timecode.color ?? color,
         timecode: child,
+        rootState,
         namePlaceholder,
         buttons,
         assignToOutput
@@ -16619,28 +16691,67 @@ var TimecodeTreeDisplay = ({
           TimecodeDisplay,
           {
             id,
-            timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+            timecode: timecode !== "disabled" && isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+            rootState,
+            disabled: timecode === "disabled",
             config,
             headerComponents: /* @__PURE__ */ jsxs9(Fragment8, { children: [
-              /* @__PURE__ */ jsxs9("div", { className: "flex grow items-start gap-0.25", children: [
-                /* @__PURE__ */ jsx26(
-                  "div",
-                  {
-                    className: "\n                  m-0.25 rounded-md border border-sigil-bg-light\n                  bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control\n                  text-timecode-usage-text\n                ",
-                    children: type
-                  }
-                ),
-                /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx26("div", { className: "flex grow basis-0 items-start gap-0.25", children: /* @__PURE__ */ jsxs9("div", { className: "grow", children: [
+                /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-0.25", children: [
+                  /* @__PURE__ */ jsx26(
+                    "div",
+                    {
+                      className: "\n                      m-0.25 rounded-md border border-sigil-bg-light\n                      bg-timecode-usage-foreground px-1 py-0.25\n                      text-sigil-control text-timecode-usage-text\n                    ",
+                      children: type
+                    }
+                  ),
+                  /* @__PURE__ */ jsx26(
+                    "div",
+                    {
+                      className: cn(
+                        "w-0 grow truncate p-0.5",
+                        cnd(name.length, "font-bold", "italic opacity-50")
+                      ),
+                      children: name.length ? name.join(" / ") : namePlaceholder
+                    }
+                  )
+                ] }),
+                link && /* @__PURE__ */ jsxs9(
                   "div",
                   {
-                    className: cn(
-                      "grow basis-0 truncate p-0.5",
-                      cnd(name.length, "font-bold", "italic opacity-50")
+                    className: "\n                      flex items-center gap-0.25 text-timecode-usage-foreground\n                    ",
+                    style: cssSigilColorUsageVariables(
+                      "timecode-usage",
+                      // Override timecode color with the user hint preferences
+                      // when no color is specified
+                      // as that will be what's used by the linked input/generator
+                      sigilColorUsage(link.color ?? "hint")
                     ),
-                    children: name.length ? name.join(" / ") : namePlaceholder
+                    children: [
+                      /* @__PURE__ */ jsxs9(
+                        "div",
+                        {
+                          className: "\n                        m-0.25 flex items-center gap-0.25 rounded-md border\n                        border-sigil-bg-light bg-timecode-usage-foreground px-1\n                        py-0.25 text-sigil-control text-timecode-usage-text\n                      ",
+                          children: [
+                            /* @__PURE__ */ jsx26(Icon2, { icon: "link", className: "text-[120%]" }),
+                            /* @__PURE__ */ jsx26("span", { children: link.type })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx26(
+                        "div",
+                        {
+                          className: cn(
+                            "w-0 grow truncate p-0.5",
+                            cnd(link.name.length, "font-bold", "italic opacity-50")
+                          ),
+                          children: link.name.length ? link.name.join(" / ") : link.namePlaceholder
+                        }
+                      )
+                    ]
                   }
                 )
-              ] }),
+              ] }) }),
               /* @__PURE__ */ jsxs9(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
                 /* @__PURE__ */ jsx26(
                   ControlButton,
@@ -16678,7 +16789,7 @@ var FullscreenTimecodeDisplay = ({
       return getTimecodeInstance(applicationState, id);
     } else {
       const c = config.outputs[id[1]];
-      if (!c) {
+      if (!c || !c.enabled) {
         return null;
       }
       return augmentUpstreamTimecodeWithOutputMetadata(
@@ -16687,6 +16798,15 @@ var FullscreenTimecodeDisplay = ({
       );
     }
   }, [applicationState, id, config.outputs]);
+  const linkedSourceInfo = useMemo13(() => {
+    if (isOutputInstanceId(id)) {
+      const c = config.outputs[id[1]];
+      if (c?.link) {
+        return getLinkedSourceInfo(c.link, config);
+      }
+    }
+    return void 0;
+  }, [id, config]);
   const instanceConfig = useMemo13(() => {
     if (isInputInstanceId(id)) {
       const c = config.inputs[id[1]];
@@ -16698,7 +16818,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Input`
+        namePlaceholder: STRINGS.inputs.unnamed,
+        disabled: !c.enabled
       };
     } else if (isGeneratorInstanceId(id)) {
       const c = config.generators[id[1]];
@@ -16710,7 +16831,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.generators.type[c.definition.type],
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Generator`
+        namePlaceholder: STRINGS.generators.unnamed,
+        disabled: false
       };
     } else {
       const c = config.outputs[id[1]];
@@ -16722,10 +16844,29 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Output`
+        namePlaceholder: STRINGS.outputs.unnamed,
+        disabled: !c.enabled
       };
     }
   }, [id, config]);
+  const rootState = useMemo13(() => {
+    if (isInputInstanceId(id)) {
+      return {
+        errors: applicationState.inputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.inputs?.[id[1]]?.warnings ?? []
+      };
+    } else if (isGeneratorInstanceId(id)) {
+      return {
+        errors: [],
+        warnings: []
+      };
+    } else {
+      return {
+        errors: applicationState.outputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.outputs?.[id[1]]?.warnings ?? []
+      };
+    }
+  }, [id, applicationState]);
   if (!instanceConfig) {
     return /* @__PURE__ */ jsxs9(
       SizeAwareDiv,
@@ -16746,9 +16887,11 @@ var FullscreenTimecodeDisplay = ({
         TimecodeTreeDisplay,
         {
           id,
-          timecode,
+          timecode: instanceConfig.disabled ? "disabled" : timecode,
+          rootState,
           assignToOutput: null,
           buttons: null,
+          link: linkedSourceInfo,
           ...instanceConfig
         }
       )
@@ -17186,7 +17329,7 @@ var OutputDisplay = ({
   setAssignToOutput
 }) => {
   const applicationState = useApplicationState();
-  const { updateConfig } = useContext10(ConfigContext);
+  const { config: allConfig, updateConfig } = useContext10(ConfigContext);
   const clearLink = useCallback14(() => {
     updateConfig((current) => {
       const currentOutput = current.outputs?.[uuid];
@@ -17214,6 +17357,10 @@ var OutputDisplay = ({
     const tc = config.link && getTimecodeInstance(applicationState, config.link);
     return augmentUpstreamTimecodeWithOutputMetadata(tc, config);
   }, [applicationState, config]);
+  const link = useMemo14(
+    () => getLinkedSourceInfo(config.link, allConfig),
+    [config.link, allConfig]
+  );
   const toggleEnabled = useCallback14(() => {
     updateConfig((current) => {
       const existing = current.outputs?.[uuid];
@@ -17232,6 +17379,13 @@ var OutputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = useMemo14(
+    () => ({
+      errors: applicationState.outputs[uuid]?.errors ?? [],
+      warnings: applicationState.outputs[uuid]?.warnings ?? []
+    }),
+    [applicationState.outputs, uuid]
+  );
   return /* @__PURE__ */ jsxs11(
     "div",
     {
@@ -17250,23 +17404,25 @@ var OutputDisplay = ({
             type: STRINGS.protocols[config.definition.type].short,
             name: config.name ? [config.name] : [],
             color: config.color,
-            timecode: config.enabled ? timecode : null,
-            namePlaceholder: `Unnamed Output`,
+            timecode: config.enabled ? timecode : "disabled",
+            rootState,
+            namePlaceholder: STRINGS.outputs.unnamed,
+            link,
             buttons: /* @__PURE__ */ jsxs11(Fragment9, { children: [
               /* @__PURE__ */ jsx28(
                 ControlButton,
                 {
                   variant: "large",
-                  title: config.enabled ? "Stop Input" : "Start Input",
+                  title: config.enabled ? STRINGS.outputs.disable : STRINGS.outputs.enable,
                   onClick: toggleEnabled,
-                  icon: config.enabled ? "stop" : "play_arrow"
+                  icon: config.enabled ? "pause" : "play_arrow"
                 }
               ),
               /* @__PURE__ */ jsx28(
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Link Output",
+                  title: STRINGS.outputs.link,
                   active: assignToOutput === uuid,
                   onClick: linkCallback,
                   icon: config.link ? "link" : "link_off"
@@ -17276,7 +17432,7 @@ var OutputDisplay = ({
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Edit Output",
+                  title: STRINGS.outputs.edit,
                   onClick: () => setDialogMode({
                     section: { type: "outputs", output: config.definition.type },
                     target: { type: "edit", uuid }
@@ -17346,7 +17502,7 @@ var OutputsSection = ({
 };
 
 // src/components/frontend/toolbox/generators.tsx
-import { useCallback as useCallback15, useContext as useContext11, useState as useState26 } from "react";
+import { useCallback as useCallback15, useContext as useContext11, useMemo as useMemo15, useState as useState26 } from "react";
 import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 var ClockSpecificSettings = ({
   data,
@@ -17534,6 +17690,7 @@ var GeneratorDisplay = ({
 }) => {
   const { generators } = useApplicationState();
   const state = generators[uuid];
+  const rootState = useMemo15(() => ({ errors: [], warnings: [] }), []);
   return /* @__PURE__ */ jsx29(
     TimecodeTreeDisplay,
     {
@@ -17543,12 +17700,13 @@ var GeneratorDisplay = ({
       name: config.name ? [config.name] : [],
       color: config.color,
       timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Generator`,
+      rootState,
+      namePlaceholder: STRINGS.generators.unnamed,
       buttons: /* @__PURE__ */ jsx29(Fragment10, { children: /* @__PURE__ */ jsx29(
         ControlButton,
         {
           variant: "large",
-          title: "Edit Generator",
+          title: STRINGS.generators.edit,
           onClick: () => setDialogMode({
             section: {
               type: "generators",
@@ -17606,7 +17764,13 @@ var GeneratorsSection = ({
 };
 
 // src/components/frontend/toolbox/inputs.tsx
-import { useCallback as useCallback16, useContext as useContext12, useEffect as useEffect27, useState as useState27 } from "react";
+import {
+  useCallback as useCallback16,
+  useContext as useContext12,
+  useEffect as useEffect27,
+  useMemo as useMemo16,
+  useState as useState27
+} from "react";
 import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 var DmxConnectionSettings2 = ({
   data,
@@ -17937,6 +18101,10 @@ var InputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = useMemo16(
+    () => ({ errors: state?.errors ?? [], warnings: state?.warnings ?? [] }),
+    [state?.errors, state?.warnings]
+  );
   return /* @__PURE__ */ jsx30(
     TimecodeTreeDisplay,
     {
@@ -17945,23 +18113,24 @@ var InputDisplay = ({
       type: STRINGS.protocols[config.definition.type].short,
       name: config.name ? [config.name] : [],
       color: config.color,
-      timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Input`,
+      timecode: config.enabled ? state?.timecode ?? null : "disabled",
+      rootState,
+      namePlaceholder: STRINGS.inputs.unnamed,
       buttons: /* @__PURE__ */ jsxs13(Fragment11, { children: [
         /* @__PURE__ */ jsx30(
           ControlButton,
           {
             variant: "large",
-            title: config.enabled ? "Stop Input" : "Start Input",
+            title: config.enabled ? STRINGS.inputs.disable : STRINGS.inputs.enable,
             onClick: toggleEnabled,
-            icon: config.enabled ? "stop" : "play_arrow"
+            icon: config.enabled ? "pause" : "play_arrow"
           }
         ),
         /* @__PURE__ */ jsx30(
           ControlButton,
           {
             variant: "large",
-            title: "Edit Input",
+            title: STRINGS.inputs.edit,
             onClick: () => setDialogMode({
               section: { type: "inputs", input: config.definition.type },
               target: { type: "edit", uuid }
@@ -18104,7 +18273,7 @@ import {
   useCallback as useCallback18,
   useContext as useContext13,
   useEffect as useEffect29,
-  useMemo as useMemo15,
+  useMemo as useMemo17,
   useRef as useRef17,
   useState as useState29
 } from "react";
@@ -18281,7 +18450,7 @@ var AppPortConfig = () => {
   const currentPortString = !port ? "" : typeof port === "string" ? port : portString(port);
   const hasNetworkChanges = nextPort !== null || nextInterface !== null;
   const nextUrlRef = useRef17(null);
-  const validatedPort = useMemo15(() => {
+  const validatedPort = useMemo17(() => {
     if (nextPort === null) {
       return { type: "unchanged" };
     }
@@ -19157,7 +19326,7 @@ var TooltipWrapper2 = ({
 };
 
 // ../../packages/sigil/src/frontend/input.ts
-import { useMemo as useMemo16, useState as useState34 } from "react";
+import { useMemo as useMemo18, useState as useState34 } from "react";
 var usePressable3 = (click) => {
   const [touching, setTouching] = useState34(false);
   return {
@@ -19185,7 +19354,7 @@ var useLongPressable3 = ({
   onRelease
 }) => {
   const [touching, setTouching] = useState34(false);
-  return useMemo16(
+  return useMemo18(
     () => ({
       touching,
       handlers: {
@@ -19703,7 +19872,7 @@ var ToolboxRoot = ({ info }) => {
     },
     [sendMessage, info.key, config]
   );
-  const configContext = useMemo17(
+  const configContext = useMemo19(
     () => ({
       config,
       network: info.network,
@@ -19722,12 +19891,12 @@ var ToolboxRoot = ({ info }) => {
       action: "toolbox-root-get-network-interfaces"
     });
   }, [call, info.key]);
-  const networkContextValue = useMemo17(() => {
+  const networkContextValue = useMemo19(() => {
     return {
       getNetworkInterfaces
     };
   }, [getNetworkInterfaces]);
-  const assignToOutputCallback = useMemo17(() => {
+  const assignToOutputCallback = useMemo19(() => {
     if (!assignToOutput) {
       return null;
     }
@@ -19769,18 +19938,18 @@ var ToolboxRoot = ({ info }) => {
     },
     [call, info.key]
   );
-  const handlers = useMemo17(
+  const handlers = useMemo19(
     () => ({
       handlers: info.handlers,
       callHandler
     }),
     [info.handlers, callHandler]
   );
-  const windowedTimecodeId = useMemo17(
+  const windowedTimecodeId = useMemo19(
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const root = useMemo17(
+  const root = useMemo19(
     () => windowedTimecodeId ? /* @__PURE__ */ jsx51(Layout, { modes: null, children: /* @__PURE__ */ jsx51(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ jsxs27(Fragment18, { children: [
       /* @__PURE__ */ jsx51(
         Layout,

package/dist/entrypoint.css

@@ -823,6 +823,9 @@ body.touch-mode * {
     );
   }
 }
+.pointer-events-none {
+  pointer-events: none;
+}
 .visible {
   visibility: visible;
 }
@@ -891,6 +894,9 @@ body.touch-mode * {
 .min-h-timecode-min-height {
   min-height: var(--timecode-min-height);
 }
+.w-0 {
+  width: 0px;
+}
 .w-full {
   width: 100%;
 }
@@ -1052,6 +1058,9 @@ body.touch-mode * {
 .text-\[80\%\] {
   font-size: 80%;
 }
+.text-\[120\%\] {
+  font-size: 120%;
+}
 .text-arcane-normal {
   font-size: 1em;
 }