@scalepad/ui 0.1.0

package/src/components/EditableText/EditableText.tsx

@@ -0,0 +1,377 @@
+/**
+ * EditableText Component
+ *
+ * Displays a value as plain text; switches to an input when clicked (or
+ * focused via keyboard) and commits the new value on blur or Enter.
+ * Escape cancels and reverts to the original value.
+ *
+ * Works in both controlled and uncontrolled modes:
+ * - Controlled: pass `value` + `onSave`. Parent owns the value; the
+ *   component only reports commits.
+ * - Uncontrolled: pass `defaultValue` + `onSave`. The component owns
+ *   the current value internally.
+ *
+ * `onSave` may be async. While a save is in flight the input is disabled
+ * and shows a saving state; if the promise rejects, edit mode stays open
+ * and the error is shown so the user can retry or cancel.
+ *
+ * @example
+ * // Uncontrolled
+ * <EditableText defaultValue="Untitled" onSave={(v) => console.log(v)} />
+ *
+ * @example
+ * // Controlled, async
+ * <EditableText
+ *   value={name}
+ *   onSave={async (v) => { await api.rename(v); setName(v); }}
+ *   placeholder="Add a name"
+ * />
+ */
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+
+import { Pencil } from 'lucide-react';
+
+import { TextInput } from '../TextInput';
+import { Text } from '../Typography';
+
+export interface EditableTextProps {
+  /** Controlled value. If provided, the parent owns the value. */
+  value?: string;
+  /** Initial value for uncontrolled use. Ignored if `value` is set. */
+  defaultValue?: string;
+  /**
+   * Called when the user commits an edit (blur or Enter).
+   * May return a Promise — while pending the input shows a saving state.
+   * If it rejects, edit mode stays open and the error is displayed.
+   */
+  onSave: (nextValue: string) => void | Promise<void>;
+  /** Text shown (in a muted style) when the current value is empty. */
+  placeholder?: string;
+  /** Input placeholder when in edit mode. Defaults to `placeholder`. */
+  inputPlaceholder?: string;
+  /** Accessible label; required for screen readers if there's no visible label. */
+  ariaLabel?: string;
+  /** When true, the field cannot enter edit mode and the pencil is hidden. */
+  disabled?: boolean;
+  /**
+   * Optional validator run before `onSave`.
+   * Return `null` for valid, or an error message string to block the commit.
+   */
+  validate?: (value: string) => string | null;
+  /**
+   * When true, a commit is blocked and an inline error is shown if the
+   * trimmed input value is empty.
+   */
+  required?: boolean;
+  /**
+   * Error message shown when `required` fails.
+   * Defaults to "This field is required".
+   */
+  requiredMessage?: string;
+  /** Trim whitespace before validating/committing. Defaults to true. */
+  trim?: boolean;
+  /** Maximum characters. Passed through to the input. */
+  maxLength?: number;
+  /** Custom render for the read-only display. Receives the current value. */
+  renderDisplay?: (value: string, isEmpty: boolean) => ReactNode;
+  /** Called whenever edit mode starts. */
+  onEditStart?: () => void;
+  /** Called whenever edit mode ends (commit or cancel). */
+  onEditEnd?: () => void;
+}
+
+export interface EditableTextHandle {
+  /** Programmatically enter edit mode. */
+  startEditing: () => void;
+  /** Commit the current draft (same as blur/Enter). */
+  commit: () => void;
+  /** Cancel editing and revert (same as Escape). */
+  cancel: () => void;
+}
+
+export const EditableText = forwardRef<EditableTextHandle, EditableTextProps>(
+  (
+    {
+      value,
+      defaultValue = '',
+      onSave,
+      placeholder = 'Click to edit',
+      inputPlaceholder,
+      ariaLabel,
+      disabled = false,
+      validate,
+      required = false,
+      requiredMessage,
+      trim = true,
+      maxLength,
+      renderDisplay,
+      onEditStart,
+      onEditEnd,
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? (value as string) : internalValue;
+
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState(currentValue);
+    const [error, setError] = useState<string | null>(null);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    // Once an edit session ends (commit or cancel), any follow-on blur
+    // that fires in the same tick should be a no-op. Cleared when we
+    // re-enter edit mode.
+    const settledRef = useRef(false);
+
+    const stopEditing = useCallback(() => {
+      settledRef.current = true;
+      setIsEditing(false);
+      setError(null);
+      onEditEnd?.();
+    }, [onEditEnd]);
+
+    const startEditing = useCallback(() => {
+      if (disabled || isEditing) return;
+      settledRef.current = false;
+      setDraft(currentValue);
+      setError(null);
+      setIsEditing(true);
+      onEditStart?.();
+    }, [currentValue, disabled, isEditing, onEditStart]);
+
+    const cancel = useCallback(() => {
+      if (!isEditing || settledRef.current) return;
+      stopEditing();
+    }, [isEditing, stopEditing]);
+
+    const commit = useCallback(() => {
+      if (!isEditing || settledRef.current || isSaving) return;
+
+      const next = trim ? draft.trim() : draft;
+
+      if (required && draft.trim().length === 0) {
+        setError(requiredMessage ?? 'This field is required');
+        return;
+      }
+
+      if (next === currentValue) {
+        stopEditing();
+        return;
+      }
+
+      if (validate) {
+        const message = validate(next);
+        if (message != null) {
+          setError(message);
+          return;
+        }
+      }
+
+      setIsSaving(true);
+
+      // Exit edit mode immediately so the optimistic cache update (owned
+      // by the parent's mutation) can flip us back to display mode without
+      // waiting on the network round-trip.
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      stopEditing();
+
+      Promise.resolve(onSave(next))
+        .catch(err => {
+          // Late failure: we already exited edit mode. Roll back the
+          // local display value (for uncontrolled use), re-open edit
+          // mode with the user's attempted value, and surface the error.
+          if (!isControlled) {
+            setInternalValue(currentValue);
+          }
+          settledRef.current = false;
+          setDraft(next);
+          setError(err instanceof Error ? err.message : 'Unable to save');
+          setIsEditing(true);
+        })
+        .finally(() => {
+          setIsSaving(false);
+        });
+    }, [
+      currentValue,
+      draft,
+      isControlled,
+      isEditing,
+      isSaving,
+      onSave,
+      required,
+      requiredMessage,
+      stopEditing,
+      trim,
+      validate,
+    ]);
+
+    useImperativeHandle(ref, () => ({ startEditing, commit, cancel }), [
+      startEditing,
+      commit,
+      cancel,
+    ]);
+
+    // Focus + select-all when we enter edit mode.
+    useEffect(() => {
+      if (isEditing && inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, [isEditing]);
+
+    // If the external value changes while we're NOT editing, keep the
+    // draft in sync so a later edit starts from the right place.
+    useEffect(() => {
+      if (!isEditing) {
+        setDraft(currentValue);
+      }
+    }, [currentValue, isEditing]);
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        void commit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        cancel();
+      }
+    };
+
+    const isEmpty = currentValue.length === 0;
+
+    if (isEditing) {
+      return (
+        <TextInput
+          ref={inputRef}
+          value={draft}
+          onChange={e => {
+            setDraft(e.currentTarget.value);
+            if (error) setError(null);
+          }}
+          onBlur={() => {
+            void commit();
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={inputPlaceholder ?? placeholder}
+          aria-label={ariaLabel}
+          maxLength={maxLength}
+          error={error ?? undefined}
+        />
+      );
+    }
+
+    if (renderDisplay) {
+      return (
+        <DisplayShell
+          onStart={startEditing}
+          disabled={disabled}
+          ariaLabel={ariaLabel}
+        >
+          {renderDisplay(currentValue, isEmpty)}
+        </DisplayShell>
+      );
+    }
+
+    return (
+      <DisplayShell
+        onStart={startEditing}
+        disabled={disabled}
+        ariaLabel={ariaLabel}
+      >
+        <Text
+          variant="body1"
+          c={isEmpty ? 'text.subdued.default' : undefined}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {isEmpty ? placeholder : currentValue}
+        </Text>
+      </DisplayShell>
+    );
+  },
+);
+
+interface DisplayShellProps {
+  onStart: () => void;
+  disabled: boolean;
+  ariaLabel?: string;
+  children: ReactNode;
+}
+
+function DisplayShell({
+  onStart,
+  disabled,
+  ariaLabel,
+  children,
+}: DisplayShellProps) {
+  const [hover, setHover] = useState(false);
+
+  const showAffordance = hover && !disabled;
+
+  return (
+    <button
+      type="button"
+      onClick={onStart}
+      onFocus={() => setHover(true)}
+      onBlur={() => setHover(false)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: '2px 22px 2px 6px',
+        margin: '-2px -6px',
+        background: 'transparent',
+        border: '1px solid transparent',
+        borderColor: showAffordance
+          ? 'var(--color-stroke-subdued-default)'
+          : 'transparent',
+        borderRadius: 'var(--radius-lg)',
+        cursor: disabled ? 'default' : 'text',
+        textAlign: 'left',
+        font: 'inherit',
+        color: 'inherit',
+        width: '100%',
+        maxWidth: '100%',
+      }}
+    >
+      {children}
+      <Pencil
+        size={14}
+        aria-hidden
+        style={{
+          position: 'absolute',
+          right: 6,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          opacity: showAffordance ? 0.6 : 0,
+          transition: 'opacity 120ms ease',
+        }}
+      />
+    </button>
+  );
+}

package/src/components/EditableText/index.ts

@@ -0,0 +1,2 @@
+export { EditableText } from './EditableText';
+export type { EditableTextHandle, EditableTextProps } from './EditableText';

package/src/components/EmptyState/EmptyState.figma.tsx

@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+
+import { EmptyState } from './EmptyState';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  EmptyState,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=2037%3A2949',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "showLearnMore": figma.boolean('Show "Learn More"'),
+      // "layout": figma.enum('Layout', {
+      //   "1 Button": "1-button",
+      //   "2 Buttons": "2-buttons",
+      //   "No Buttons": "no-buttons"
+      // })
+    },
+    example: _props => (
+      <EmptyState
+        title="No results found"
+        description="Try adjusting your filters."
+      />
+    ),
+  },
+);

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,230 @@
+import type { ElementType, FunctionComponent, ReactNode } from 'react';
+
+import { SearchX } from 'lucide-react';
+
+import { Box, Card, Stack } from '@mantine/core';
+
+import { tokens } from '../../theme/themeContract.css';
+import { toCssVar, type BackgroundColorVar } from '../../theme/themeVars';
+import { Button } from '../Button';
+import { Text } from '../Typography';
+
+export interface EmptyStateAction {
+  label: string;
+  onClick?: () => void;
+  /** React Router Link component or other polymorphic component */
+  component?: ElementType;
+  /** Link destination (when using component) */
+  to?: string;
+  /** Icon to show on the right side of button */
+  rightSection?: ReactNode;
+}
+
+export interface EmptyStateProps {
+  /**
+   * The icon to display at the top of the empty state
+   * @default <SearchX size={48} strokeWidth={1.5} />
+   */
+  icon?: ReactNode;
+  /**
+   * Icon container variant
+   * - 'bordered': Default dimmed bordered box
+   * - 'filled': Filled background (use with iconBg prop)
+   * @default 'bordered'
+   */
+  iconVariant?: 'bordered' | 'filled';
+  /**
+   * Background color for filled icon variant (theme contract background token).
+   * Only used when iconVariant='filled'. Pass tokens.color.background.* from @acme/ui.
+   */
+  iconBg?: BackgroundColorVar;
+  /**
+   * Icon size (width and height in pixels)
+   * @default 64 for 'bordered', 36 for 'filled'
+   */
+  iconSize?: number;
+  /**
+   * The title/heading text
+   */
+  title?: string;
+  /**
+   * The description/body text
+   */
+  description?: string;
+  /**
+   * Primary action button configuration
+   */
+  action?: EmptyStateAction;
+  /**
+   * Secondary action button configuration (ghost variant)
+   */
+  secondaryAction?: EmptyStateAction;
+  /**
+   * Maximum width of the content area
+   * @default 500
+   */
+  maxWidth?: number | string;
+  /**
+   * Wrap content in a Card with background and border
+   * @default false
+   */
+  showCard?: boolean;
+  /**
+   * Card background (theme contract background token). Only used when showCard=true.
+   * Pass tokens.color.background.* from @acme/ui.
+   */
+  cardBg?: BackgroundColorVar;
+}
+
+/**
+ * EmptyState component
+ * Displays a centered empty state with icon, title, description, and optional action buttons
+ *
+ * Supports two main variants:
+ * 1. Default transparent layout (used in tables, lists)
+ * 2. Card variant with background (used for full-page empty states)
+ *
+ * @example
+ * // Simple table empty state
+ * <EmptyState
+ *   title="No results found"
+ *   description="Try adjusting your filters"
+ *   action={{ label: 'Clear filters', onClick: clearFilters }}
+ * />
+ *
+ * @example
+ * // Full-page empty state with card (use theme contract tokens only)
+ * <EmptyState
+ *   icon={<Cloud size={20} />}
+ *   iconVariant="filled"
+ *   iconBg={tokens.color.background.primaryLight}
+ *   title="No Apps Detected Yet"
+ *   description="Deploy agents to start seeing data"
+ *   action={{ label: 'Deploy', onClick: deploy }}
+ *   secondaryAction={{ label: 'Learn More', onClick: learnMore }}
+ *   showCard
+ *   maxWidth={420}
+ * />
+ */
+export function EmptyState({
+  icon = <SearchX size={48} strokeWidth={1.5} />,
+  iconVariant = 'bordered',
+  iconBg,
+  iconSize,
+  title,
+  description,
+  action,
+  secondaryAction,
+  maxWidth = 500,
+  showCard = false,
+  cardBg = tokens.color.background.subduedLight,
+}: EmptyStateProps) {
+  // Determine icon size based on variant if not explicitly set
+  const computedIconSize = iconSize ?? (iconVariant === 'filled' ? 36 : 64);
+
+  const iconElement =
+    iconVariant === 'filled' ? (
+      <Box
+        w={computedIconSize}
+        h={computedIconSize}
+        p="xs"
+        display="flex"
+        style={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: iconBg != null ? toCssVar(iconBg) : undefined,
+          borderRadius: 'var(--radius-sm)',
+        }}
+      >
+        {icon}
+      </Box>
+    ) : (
+      <Box
+        c="text.subdued.default"
+        bd="1px solid var(--color-general-border)"
+        bdrs="md"
+        w={computedIconSize}
+        h={computedIconSize}
+        display="flex"
+        style={{ alignItems: 'center', justifyContent: 'center' }}
+      >
+        {icon}
+      </Box>
+    );
+
+  const content = (
+    <Stack gap="md" align="center">
+      {iconElement}
+
+      <Stack gap="xs" align="center" maw={400}>
+        {title && (
+          <Text variant="body1.stronger" ta="center">
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text variant="caption1" c="text.subdued.default" ta="center">
+            {description}
+          </Text>
+        )}
+      </Stack>
+
+      {action && (
+        <Button
+          variant="primary"
+          onClick={action.onClick}
+          component={
+            action.component as
+              | FunctionComponent<Record<string, unknown>>
+              | undefined
+          }
+          to={action.to}
+          radius="lg"
+          size="sm"
+          mt="md"
+        >
+          {action.label}
+        </Button>
+      )}
+
+      {secondaryAction && (
+        <Button
+          variant="ghost"
+          color="dark"
+          onClick={secondaryAction.onClick}
+          component={
+            secondaryAction.component as
+              | FunctionComponent<Record<string, unknown>>
+              | undefined
+          }
+          to={secondaryAction.to}
+          rightSection={secondaryAction.rightSection}
+          radius="lg"
+          size="sm"
+        >
+          {secondaryAction.label}
+        </Button>
+      )}
+    </Stack>
+  );
+
+  if (showCard) {
+    return (
+      <Card
+        p="2xl"
+        w={maxWidth}
+        bg={cardBg != null ? toCssVar(cardBg) : undefined}
+        bd="1px solid var(--color-general-border)"
+        radius="lg"
+      >
+        {content}
+      </Card>
+    );
+  }
+
+  return (
+    <Box py="2xl" maw={maxWidth} mx="auto">
+      {content}
+    </Box>
+  );
+}

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateAction, EmptyStateProps } from './EmptyState';