SY-1093 Additional Schematic Symbols, SY-975 Fix Nested Button Element in Schematic

client/py/examples/control/tpc/optimization_auto.py

@@ -127,7 +127,7 @@ def run_tpc(auto: Controller):
 
             dual_press_end = sy.TimeStamp.now()
             parent_rng.create_sub_range(
-                name=f"Dual Press Sequence",
+                name=f"Setup",
                 time_range=sy.TimeRange(dual_press_start, dual_press_end),
                 color="#D81E5B",
             )
@@ -158,7 +158,7 @@ def run_tpc(auto: Controller):
 
             press_tank_end = sy.TimeStamp.now()
             parent_rng.create_sub_range(
-                name=f"Press Tank Pressurization",
+                name=f"Pressurization",
                 time_range=sy.TimeRange(press_tank_start, press_tank_end),
                 color="#1E90FF",
             )
@@ -172,7 +172,7 @@ def run_tpc(auto: Controller):
             print("Test complete. Safeing System")
 
             rng = parent_rng.create_sub_range(
-                name=f"Bang Bang Sim",
+                name=f"Test",
                 time_range=sy.TimeRange(start, sy.TimeStamp.now()),
                 color="#bada55",
             )

console/src/layout/selectors.ts

@@ -96,9 +96,9 @@ export const selectFocused = (
   state: StoreState & Drift.StoreState,
   windowKey?: string,
 ): [string, string | null] => {
-  const window = selectWindow(state, windowKey);
-  if (window == null) throw new Error(`Window ${windowKey ?? ""} not found`);
-  return [window.key, selectSliceState(state).mosaics[window.key]?.focused ?? null];
+  const win = selectWindow(state, windowKey);
+  if (win == null) throw new Error(`Window ${windowKey ?? ""} not found`);
+  return [win.key, selectSliceState(state).mosaics[win.key]?.focused ?? null];
 };
 
 export const useSelectFocused = (): [string, string | null] =>

console/src/lineplot/toolbar/Axes.tsx

@@ -186,6 +186,7 @@ export const LinePlotAxisControls = ({
             bounds={{ lower: 1, upper: 200 }}
             value={axis.tickSpacing}
             onChange={handleTickSpacingChange}
+            endContent="px"
           />
         </Input.Item>
       </Align.Space>

console/src/main.tsx

@@ -9,8 +9,8 @@
 
 import "@/index.css";
 import "@synnaxlabs/media/dist/style.css";
-import "@synnaxlabs/pluto/dist/style.css";
 
+// import "@synnaxlabs/pluto/dist/style.css";
 import { Provider } from "@synnaxlabs/drift/react";
 import { type Haul, Pluto, type state, type Triggers } from "@synnaxlabs/pluto";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

console/src/schematic/Schematic.tsx

@@ -128,6 +128,7 @@ const SymbolRenderer = ({
 
   return (
     <C.Symbol
+      id={symbolKey}
       aetherKey={symbolKey}
       position={position}
       selected={selected}

console/src/schematic/toolbar/Symbols.tsx

@@ -100,7 +100,6 @@ const SymbolsButton = ({
   return (
     // @ts-expect-error - generic elements
     <Align.Space
-      el="button"
       className={CSS.BE("schematic-symbols", "button")}
       justify="spaceBetween"
       align="center"

pluto/src/align/Pack.css

@@ -20,6 +20,7 @@
     --tl: var(--pluto-pack-br) 0 0 0;
     --pluto-pack--middle: 0 !important;
     --all: var(--pluto-pack-br);
+    --pluto-pack-border-width: 1px;
 
     &.pluto--rounded {
         --pluto-pack-br: var(--pluto-back-br, var(--pluto-border-radius));
@@ -32,6 +33,7 @@
         &:not(.pluto-pack--shadow) > * {
             border: var(--pluto-border);
             border-color: var(--pluto-pack-border-shade);
+            border-width: var(--pluto-pack-border-width);
         }
 
         &.pluto-pack--shadow {
@@ -50,7 +52,7 @@
         --pluto-pack--first: var(--l);
         --pluto-pack--last: var(--r);
         --pluto-pack--only: var(--all);
-        --pluto-pack--x-margin: 0 0 0 -1px !important;
+        --pluto-pack--x-margin: 0 0 0 calc(-1 * var(--pluto-pack-border-width)) !important;
         --pluto-pack--x-first-y-first: var(--tl);
         --pluto-pack--x-first-y-last: var(--bl);
         --pluto-pack--x-first-y-only: var(--l);
@@ -61,7 +63,7 @@
         .pluto-pack--reverse {
             --pluto-pack--first: var(--r);
             --pluto-pack--last: var(--l);
-            --pluto-pack--x-margin: 0 -1px 0 0 !important;
+            --pluto-pack--x-margin: 0 calc(-1 * var(--pluto-pack-border-width)) 0 0 !important;
             --pluto-pack--x-first-y-first: var(--tr);
             --pluto-pack--x-first-y-last: var(--br);
             --pluto-pack--x-first-y-only: var(--r);
@@ -144,7 +146,7 @@
         --pluto-pack--first: var(--t);
         --pluto-pack--last: var(--b);
         --pluto-pack--only: var(--all);
-        --pluto-pack--y-margin: -1px 0 0 0 !important;
+        --pluto-pack--y-margin: calc(-1 * var(--pluto-pack-border-width)) 0 0 0 !important;
         --pluto-pack--y-first-x-first: var(--tl);
         --pluto-pack--y-first-x-last: var(--tr);
         --pluto-pack--y-first-x-only: var(--t);
@@ -155,7 +157,7 @@
         &.pluto-pack--reverse {
             --pluto-pack--first: 0 0 var(--pluto-pack-br) var(--pluto-pack-br) !important;
             --pluto-pack--last: var(--pluto-pack-br) var(--pluto-pack-br) 0 0 !important;
-            --pluto-pack--y-margin: 0 0 -1px 0 !important;
+            --pluto-pack--y-margin: 0 0 calc(-1 * var(--pluto-pack-border-width)) 0 !important;
             --pluto-pack--y-first-x-first: var(--bl);
             --pluto-pack--y-first-x-last: var(--br);
             --pluto-pack--y-first-x-only: var(--b);

pluto/src/align/Pack.tsx

@@ -13,13 +13,15 @@ import { type ForwardedRef, forwardRef, type ReactElement } from "react";
 
 import { Space, type SpaceElementType, type SpaceProps } from "@/align/Space";
 import { CSS } from "@/css";
+import { text } from "@/text/core";
 
 /** Props for the {@link Pack} component. */
 export type PackProps<E extends SpaceElementType = "div"> = Omit<
   SpaceProps<E>,
   "empty"
 > & {
   shadow?: boolean;
+  borderWidth?: number;
 };
 
 const CorePack = <E extends SpaceElementType = "div">(
@@ -29,38 +31,46 @@ const CorePack = <E extends SpaceElementType = "div">(
     reverse = false,
     direction = "x",
     bordered = true,
-    borderShade = 3,
+    borderShade = 3 as text.Shade,
     rounded = true,
     shadow = false,
+    borderWidth,
     style,
     ...props
   }: PackProps<E>,
   // select the correct type for the ref
   ref: ForwardedRef<JSX.IntrinsicElements[E]>,
-): ReactElement => (
-  // @ts-expect-error - generic element issues
-  <Space<E>
-    ref={ref}
-    direction={direction}
-    reverse={reverse}
-    className={CSS(
-      CSS.B("pack"),
-      shadow && CSS.BM("pack", "shadow"),
-      CSS.dir(direction),
-      typeof size !== "number" && CSS.BM("pack", size),
-      reverse && CSS.BM("pack", "reverse"),
-      className,
-    )}
-    style={{
-      ...style,
-      [CSS.var("pack-border-shade")]: CSS.shadeVar(borderShade),
-    }}
-    bordered={bordered}
-    rounded={rounded}
-    {...props}
-    empty
-  />
-);
+): ReactElement => {
+  const pStyle = {
+    [CSS.var("pack-border-shade")]: CSS.shadeVar(borderShade),
+    ...style,
+  };
+  if (borderWidth != null)
+    // @ts-expect-error - generic element issues
+    pStyle[CSS.var("pack-border-width")] = `${borderWidth}px`;
+
+  return (
+    // @ts-expect-error - generic element issues
+    <Space<E>
+      ref={ref}
+      direction={direction}
+      reverse={reverse}
+      className={CSS(
+        CSS.B("pack"),
+        shadow && CSS.BM("pack", "shadow"),
+        CSS.dir(direction),
+        typeof size !== "number" && CSS.BM("pack", size),
+        reverse && CSS.BM("pack", "reverse"),
+        className,
+      )}
+      style={pStyle}
+      bordered={bordered}
+      rounded={rounded}
+      {...props}
+      empty
+    />
+  );
+};
 
 /**
  * Packs elements together, setting their size and styling the borders between them so

pluto/src/align/Space.css

@@ -11,6 +11,7 @@
 
 .pluto-space {
     display: flex;
+    border-color: var(--pluto-space-border-shade);
 }
 
 .pluto-space--medium {

pluto/src/button/Button.css

@@ -16,6 +16,7 @@
 }
 
 .pluto-btn {
+    position: relative;
     margin: 0;
     cursor: pointer;
     border-radius: var(--pluto-border-radius);
@@ -32,6 +33,22 @@
         border-color 0.15s ease-in-out;
 }
 
+.pluto-btn__end-content {
+    position: absolute;
+    right: -0.5rem;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-right: 1.5rem;
+    pointer-events: none;
+    z-index: 0;
+    & > * {
+        color: var(--pluto-gray-l7);
+        transform: scale(0.8);
+    }
+}
+
 /* |||| FILLED |||| */
 
 .pluto-btn--filled {
@@ -56,20 +73,20 @@
     }
 
     &.pluto-btn--custom-color {
-        --pluto-bg: rgba(var(--pluto-btn-color), 0.75);
+        --pluto-bg: rgba(var(--pluto-btn-color), 1);
         background: var(--pluto-bg);
-        border-color: var(--pluto-bg) !important;
+        border-color: transparent !important;
 
         &:hover:not(.pluto--disabled) {
-            --pluto-bg: rgba(var(--pluto-btn-color), 1);
+            --pluto-bg: rgba(var(--pluto-btn-color), 0.85);
             background: var(--pluto-bg);
-            border-color: var(--pluto-bg) !important;
+            border-color: transparent !important;
         }
 
         &:active:not(.pluto--disabled) {
-            --pluto-bg: rgba(var(--pluto-btn-color), 0.6);
+            --pluto-bg: rgba(var(--pluto-btn-color), 0.7);
             background: var(--pluto-bg);
-            border-color: var(--pluto-bg) !important;
+            border-color: transparent !important;
         }
     }
 
@@ -117,6 +134,21 @@
     background: var(--pluto-bg);
     border: var(--pluto-border-width) solid var(--pluto-gray-l4);
 
+    &.pluto-btn--custom-color {
+        --pluto-bg: rgba(var(--pluto-btn-color), 1);
+        border-color: var(--pluto-bg) !important;
+
+        &:hover:not(.pluto--disabled) {
+            --pluto-bg: rgba(var(--pluto-btn-color), 0.75);
+            border-color: var(--pluto-bg) !important;
+        }
+
+        &:active:not(.pluto--disabled) {
+            --pluto-bg: rgba(var(--pluto-btn-color), 1);
+            border-color: var(--pluto-bg) !important;
+        }
+    }
+
     &.pluto--warning {
         border-color: var(--pluto-warning-z) !important;
         color: var(--pluto-warning-z);

pluto/src/button/Button.tsx

@@ -12,7 +12,12 @@ import "@/button/Button.css";
 import { Icon } from "@synnaxlabs/media";
 import { TimeSpan } from "@synnaxlabs/x/telem";
 import { toArray } from "@synnaxlabs/x/toArray";
-import { type ComponentPropsWithoutRef, type ReactElement, useCallback } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ReactElement,
+  ReactNode,
+  useCallback,
+} from "react";
 
 import { type Align } from "@/align";
 import { Color } from "@/color";
@@ -60,6 +65,7 @@ export type ButtonProps = Omit<
     iconSpacing?: Align.SpaceProps["size"];
     disabled?: boolean;
     delay?: number | TimeSpan;
+    endContent?: ReactNode;
   };
 
 /**
@@ -95,6 +101,7 @@ export const Button = Tooltip.wrap(
     color,
     status,
     style,
+    endContent,
     ...props
   }: ButtonProps): ReactElement => {
     if (loading) startIcon = [...toArray(startIcon), <Icon.Loading key="loader" />];
@@ -124,7 +131,8 @@ export const Button = Tooltip.wrap(
 
     const pStyle = { ...style };
     const res = Color.Color.z.safeParse(color);
-    const hasCustomColor = res.success && variant === "filled";
+    const hasCustomColor =
+      res.success && (variant === "filled" || variant === "outlined");
     if (hasCustomColor) {
       // @ts-expect-error - css variable
       pStyle[CSS.var("btn-color")] = res.data.rgbString;
@@ -162,6 +170,11 @@ export const Button = Tooltip.wrap(
         {...props}
       >
         {children}
+        {endContent != null ? (
+          <div className={CSS.BE("btn", "end-content")}>
+            {Text.formatChildren(level ?? Text.ComponentSizeLevels[size], endContent)}
+          </div>
+        ) : undefined}
       </Text.WithIcon>
     );
   },

pluto/src/color/Swatch/Swatch.css

@@ -14,12 +14,14 @@
     aspect-ratio: 1.5;
     transform: scale(0.8);
 
+    border-color: var(--pluto-gray-l4) !important;
+
     &.pluto--no-border {
         border-color: transparent;
     }
 
     &.pluto-haul-drop-region {
-        border: var(--pluto-border) !important;
+        border: var(--pluto-border-l4) !important;
         border-color: var(--haul-border-color) !important;
         background: var(--haul-background) !important;
     }