Updates to ui, lightspark-sdk (#475)

* [nage] add details panel component, add table view for api tokens, add TextInput and DropdownInput components (#19644)

- adds table for api tokens w temporary data
- adds detail panel component that opens when clicking add token
- uses react context to handle button in the tab bar opening the api token panel

![Screenshot 2025-08-06 at 2.20.08 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/3f98da2a-9fb2-44ac-90a6-0c51fecfb9d8.png)

![Screenshot 2025-08-06 at 2.20.49 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/086f6ae1-6edb-49ae-a593-9cc61243072a.png)

GitOrigin-RevId: fd8413408c5007db784d07a962b1f565fc35b8a0

* [Nage] Add skeleton control center (#19499)

![Screenshot 2025-08-06 at 5.16.56 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/494ef388-6fcd-4a67-82ca-0bd1da2ce54d.png)

![Screenshot 2025-08-06 at 5.16.59 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/e12edd93-04b7-4c24-a1b4-12978a18e0cc.png)

GitOrigin-RevId: abddd8eb5c7446b43d692167f5df22b5d58ca51d

* [nage] add zustand state for nage, add dropdown component (#19720)

- adds state to site global store for nage
- adds Dropdown component styled for nage
- todo: add queries for platforms (hardcoded sandbox and prod)

![Screenshot 2025-08-08 at 1.15.05 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/69ffdcbb-8af2-4038-bd78-bafd6586e179.png)

![Screenshot 2025-08-08 at 1.15.37 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/da0bc733-8a6f-49b4-b079-e163a0c83e04.png)

GitOrigin-RevId: 54f55115dc537f3411e63630e5829453addd6798

* Add preliminary UI for account configuration (#19697)

![Screenshot 2025-08-11 at 5.08.47 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/babbadf6-85d7-4299-ae3e-d9b4c8805b02.png)

GitOrigin-RevId: 68f907519ef956a8935c7ff2304910885921c073

* [lightspark-sdk] Handle double-encoded variables from WASM in RemoteSigningWebhookHandler (#19946)

## Reason

@pengying discovered that apps/remote-signing-server is failing due to
variables being sent to sparkcore as a string instead of a plain object.
We discovered this is because the variables returned from a WASM call is
double-encoded JSON. The code is not widely used which explains why we
haven't noticed until now.

## Overview

For large or complex changes, describe what is being changed.

## Test Plan

Tested manually and ensure no existing tests are broken.

GitOrigin-RevId: 347cb22a77fcc6f61fc3cffdd879078ac9d4982c

* chore: adding changesets for sdk

---------

Co-authored-by: Brian Siao Tick Chong <bsiaotickchong@gmail.com>
Co-authored-by: Jason Wang <jason@lightspark.com>
Co-authored-by: Corey Martin <coreyn.martin@gmail.com>
Co-authored-by: Peng Ying <peng@lightspark.com>

Author: 5 people

.changeset/hot-bags-rescue.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/lightspark-sdk": patch
+---
+
+fix: wasm returned a double stringified json object where the webhook signing handler only expected it to be stringifed once. This change parses the string twice.

.changeset/slimy-walls-make.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+feat: New UI elements for Lightspark FE

packages/lightspark-sdk/src/webhooks.ts

@@ -84,7 +84,26 @@ export class RemoteSigningWebhookHandler {
     if (!response) {
       return;
     }
-    const variables = JSON.parse(response.variables);
+
+    /* WASM returns a double-encoded JSON string for variables: */
+    let jsonVariablesString: string;
+    let variables: {
+      [key: string]: unknown;
+    };
+    try {
+      jsonVariablesString = JSON.parse(response.variables);
+    } catch (e) {
+      throw new LightsparkSigningException(
+        "Unable to get JSON variables string from response",
+      );
+    }
+    try {
+      variables = JSON.parse(jsonVariablesString);
+    } catch (e) {
+      throw new LightsparkSigningException(
+        "Unable to parse JSON variables from response",
+      );
+    }
     return this.client.executeRawQuery({
       queryPayload: response.query,
       variables,

packages/ui/src/components/Button.tsx

@@ -99,6 +99,7 @@ export type ButtonProps = {
   ml?: number | "auto";
   mb?: number | "auto";
   fullWidth?: boolean | undefined;
+  spaceBetween?: boolean | undefined;
   type?: "button" | "submit";
   newTab?: boolean;
   tooltipText?: string | undefined;
@@ -272,6 +273,7 @@ export const Button = forwardRef<
     loading = false,
     loadingKind = "primary",
     fullWidth = false,
+    spaceBetween = false,
     disabled = false,
     mt = 0,
     ml = 0,
@@ -325,7 +327,7 @@ export const Button = forwardRef<
         css={{
           display: "flex",
           alignItems: "center",
-          justifyContent: "center",
+          justifyContent: spaceBetween ? "space-between" : "center",
           gap: "8px",
         }}
       >

packages/ui/src/components/DataManagerTable/DataManagerTable.tsx

@@ -1056,7 +1056,10 @@ const PageNumberButton = styled.button<{ isCurrentPage: boolean }>`
   border: none;
   background-color: transparent;
   &:hover {
-    border: 0.5px solid ${colors["black-10"]};
+    background-color: ${colors["black-04"]};
+  }
+  &:active {
+    background-color: ${colors["black-10"]};
   }
   ${({ isCurrentPage }) =>
     isCurrentPage

packages/ui/src/components/Dropdown.tsx

@@ -72,14 +72,14 @@ type DropdownItemType = {
 
 type DropdownGetProps = WithTheme<{ isOpen: boolean }>;
 
-type DropdownBorderRadius = 8 | 12;
+type DropdownBorderRadius = 6 | 8 | 12;
 
 type CommonSimpleDropdownButton = {
   id?: string;
   getCSS?: ({ isOpen, theme }: DropdownGetProps) => CSSInterpolation;
 };
 
-type SimpleDropdownButton =
+export type SimpleDropdownButton =
   | (CommonSimpleDropdownButton & {
       label: string;
     })
@@ -100,6 +100,7 @@ type DropdownProps = {
   verticalPlacement?: "top" | "bottom";
   footer?: ReactNode | null;
   getCSS?: ({ isOpen, theme }: DropdownGetProps) => CSSObject;
+  getDropdownItemsCSS?: ({ isOpen, theme }: DropdownGetProps) => CSSObject;
   onOpen?: () => void;
   onClose?: () => void;
   isOpen?: boolean;
@@ -113,6 +114,7 @@ export function Dropdown({
   horizontalScrollRef,
   onClickDropdownItems,
   getCSS,
+  getDropdownItemsCSS,
   isOpen: isOpenProp,
   onOpen,
   onClose,
@@ -368,6 +370,8 @@ export function Dropdown({
   }
 
   const containerCSS = getCSS && getCSS({ isOpen, theme });
+  const dropdownItemsCSS =
+    getDropdownItemsCSS && getDropdownItemsCSS({ isOpen, theme });
 
   return (
     <div
@@ -386,6 +390,7 @@ export function Dropdown({
               maxWidth={maxDropdownItemsWidth}
               hasItems={dropdownItems ? dropdownItems.length > 0 : false}
               borderRadius={borderRadius}
+              css={dropdownItemsCSS}
             >
               {dropdownItems?.map((dropdownItem, i) => {
                 return (

packages/ui/src/components/Modal.tsx

@@ -121,6 +121,7 @@ type ModalProps = {
   drawerCloseButton?: boolean;
   drawerAlignBottom?: boolean | undefined;
   drawerDisableTouchMove?: boolean | undefined;
+  voidOverlayBackground?: boolean | undefined;
 };
 
 export function Modal({
@@ -161,6 +162,7 @@ export function Modal({
   drawerCloseButton = true,
   drawerAlignBottom,
   drawerDisableTouchMove,
+  voidOverlayBackground,
 }: ModalProps) {
   const visibleChangedRef = useRef(false);
   const [visibleChanged, setVisibleChanged] = useState(false);
@@ -428,7 +430,10 @@ export function Modal({
     content = (
       <Fragment>
         {!(smKind === "fullscreen" && bp.isSm()) ? (
-          <ModalOverlay ref={overlayRef} />
+          <ModalOverlay
+            ref={overlayRef}
+            voidOverlayBackground={voidOverlayBackground ?? false}
+          />
         ) : null}
         <ModalContainer
           aria-modal
@@ -486,14 +491,15 @@ const DefaultFocusTarget = styled(UnstyledButton)`
   height: 0;
 `;
 
-const ModalOverlay = styled.div`
+const ModalOverlay = styled.div<{ voidOverlayBackground?: boolean }>`
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: ${z.modalOverlay};
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
+  background: ${({ voidOverlayBackground }) =>
+    voidOverlayBackground ? "transparent" : "rgba(0, 0, 0, 0.5)"};
 `;
 
 const ModalContainer = styled.div<{ top: number }>`

packages/ui/src/components/TextInput.tsx

@@ -23,20 +23,23 @@ import {
   type TextInputBorderRadius,
 } from "../styles/fields.js";
 import {
+  getBackgroundColor,
   getFontColor,
   type FontColorKey,
   type ThemeOrColorKey,
 } from "../styles/themes.js";
 import { applyTypography } from "../styles/typography.js";
 import { z } from "../styles/z-index.js";
 import type { ToReactNodesArgs } from "../utils/toReactNodes/toReactNodes.js";
+import { toReactNodes } from "../utils/toReactNodes/toReactNodes.js";
 import { CheckboxContainer } from "./Checkbox.js";
 import { Icon, IconContainer } from "./Icon/Icon.js";
 import { type IconName } from "./Icon/types.js";
 import { Loading } from "./Loading.js";
 import { ToggleContainer } from "./Toggle.js";
 import { Tooltip } from "./Tooltip.js";
 import { UnstyledButton } from "./UnstyledButton.js";
+import { type TypographyPropsWithoutChildren } from "./typography/renderTypography.js";
 import {
   type PartialSimpleTypographyProps,
   type RequiredSimpleTypographyProps,
@@ -53,6 +56,16 @@ export type IconWidth = (typeof iconWidths)[number];
 export const iconStrokeWidths = [1, 1.5, 2] as const;
 export type IconStrokeWidth = (typeof iconStrokeWidths)[number];
 
+export type TextLabelOptions = {
+  backgroundColor?: ThemeOrColorKey;
+  borderRadius?: TextInputBorderRadius;
+  paddingX?: number;
+  paddingY?: number;
+  typography?: TypographyPropsWithoutChildren;
+  position?: "absolute" | "relative";
+  marginBottom?: number;
+};
+
 export type TextInputProps = {
   disabled?: boolean | undefined;
   error?: string | ToReactNodesArgs | undefined;
@@ -101,6 +114,7 @@ export type TextInputProps = {
   hideNonErrorsIfBlurred?: boolean | undefined;
   hintTooltip?: string | undefined;
   label?: string;
+  labelOptions?: TextLabelOptions;
   rightButtonText?: string | undefined;
   onRightButtonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   typography?: PartialSimpleTypographyProps | undefined;
@@ -342,7 +356,14 @@ export function TextInput(textInputProps: TextInputProps) {
   return (
     <StyledTextInput widthProp={textInputWidth} marginTop={props.marginTop}>
       {props.label ? (
-        <TextInputLabel hasError={hasError}>{props.label}</TextInputLabel>
+        <TextInputLabel hasError={hasError} labelOptions={props.labelOptions}>
+          {props.labelOptions?.typography
+            ? toReactNodes({
+                text: props.label,
+                typography: props.labelOptions.typography,
+              })
+            : props.label}
+        </TextInputLabel>
       ) : null}
       {select && (
         <TextInputSelect
@@ -486,18 +507,46 @@ const RightButton = styled(UnstyledButton)`
   padding: 8px 10px;
 `;
 
-const TextInputLabel = styled.label<{ hasError: boolean }>`
-  ${standardBorderRadius(8)}
+const TextInputLabel = styled.label<{
+  hasError: boolean;
+  labelOptions?: TextLabelOptions | undefined;
+}>`
+  ${({ labelOptions }) =>
+    labelOptions?.borderRadius
+      ? `${labelOptions.borderRadius}px`
+      : standardBorderRadius(8)};
   font-size: 10px;
-  position: absolute;
+  position: ${({ labelOptions }) => labelOptions?.position || "absolute"};
   z-index: ${z.textInput + 1};
-  background-color: ${({ theme }) => theme.bg};
+  background-color: ${({ theme, labelOptions }) =>
+    labelOptions?.backgroundColor
+      ? getBackgroundColor(theme, labelOptions.backgroundColor)
+      : theme.bg};
   color: ${({ theme, hasError }) =>
     hasError ? theme.danger : theme.mcNeutral};
   font-weight: 600;
-  padding: 4px 6px;
-  left: 12px;
-  top: -10px;
+  padding-left: ${({ labelOptions }) =>
+    labelOptions?.paddingX === undefined
+      ? "6px"
+      : `${labelOptions.paddingX}px`};
+  padding-right: ${({ labelOptions }) =>
+    labelOptions?.paddingX === undefined
+      ? "6px"
+      : `${labelOptions.paddingX}px`};
+  padding-top: ${({ labelOptions }) =>
+    labelOptions?.paddingY === undefined
+      ? "4px"
+      : `${labelOptions.paddingY}px`};
+  padding-bottom: ${({ labelOptions }) =>
+    labelOptions?.paddingY === undefined
+      ? "4px"
+      : `${labelOptions.paddingY}px`};
+  left: ${({ labelOptions }) =>
+    labelOptions?.position === "relative" ? "0" : "12px"};
+  top: ${({ labelOptions }) =>
+    labelOptions?.position === "relative" ? "0" : "-10px"};
+  margin-bottom: ${({ labelOptions }) =>
+    labelOptions?.marginBottom ? `${labelOptions.marginBottom}px` : "0"};
 `;
 
 export const TextInputHalfRow = styled.div`
@@ -514,6 +563,8 @@ const StyledTextInput = styled.div<{
   widthProp: string;
   marginTop: number | undefined;
 }>`
+  display: flex;
+  flex-direction: column;
   width: ${({ widthProp }) => widthProp};
   position: relative;
   /* Apply marginTop to every TextInput when specified */

packages/ui/src/icons/central/Brackets1.tsx

@@ -0,0 +1,19 @@
+import { type PathProps } from "../types.js";
+
+export function Brackets1({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.25 3.75H6.75C5.09315 3.75 3.75 5.09315 3.75 6.75V17.25C3.75 18.9069 5.09315 20.25 6.75 20.25H7.25M16.75 3.75H17.25C18.9069 3.75 20.25 5.09315 20.25 6.75V17.25C20.25 18.9069 18.9069 20.25 17.25 20.25H16.75"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
+      />
+    </svg>
+  );
+}

packages/ui/src/icons/central/Moon.tsx

@@ -0,0 +1,19 @@
+import { type PathProps } from "../types.js";
+
+export function Moon({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+}: PathProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21.2481 11.8112C20.1889 12.56 18.8958 13 17.5 13C13.9101 13 11 10.0899 11 6.5C11 5.10416 11.44 3.81108 12.1888 2.75189C12.126 2.75063 12.0631 2.75 12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 11.9369 21.2494 11.874 21.2481 11.8112Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeLinejoin={strokeLinejoin}
+      />
+    </svg>
+  );
+}