@backmatter/studio 0.0.1

package/src/ui/Button.tsx

@@ -0,0 +1,167 @@
+// packages/studio/src/ui/Button.tsx
+import type { ComponentPropsWithoutRef } from "react";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Link } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md";
+
+type Common = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: React.ReactNode;
+  disabled?: boolean;
+};
+
+const hover = "@media (hover: hover)";
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  disabled,
+  children,
+  type = "button",
+  ...rest
+}: Common &
+  Omit<ComponentPropsWithoutRef<"button">, "className" | "style" | "type"> & {
+    type?: "button" | "submit" | "reset";
+  }) {
+  return (
+    <BaseButton
+      type={type}
+      disabled={disabled}
+      {...stylex.props(
+        styles.base,
+        size === "sm" && styles.sm,
+        variant === "primary" && styles.primary,
+        variant === "secondary" && styles.secondary,
+        variant === "ghost" && styles.ghost,
+        variant === "danger" && styles.danger,
+        disabled && styles.disabled,
+      )}
+      {...rest}
+    >
+      {children}
+    </BaseButton>
+  );
+}
+
+export function ButtonLink({
+  variant = "primary",
+  size = "md",
+  to,
+  href,
+  children,
+  disabled,
+  newTab = true,
+}: Common & { to?: string; href?: string; newTab?: boolean }) {
+  const sx = stylex.props(
+    styles.base,
+    size === "sm" && styles.sm,
+    variant === "primary" && styles.primary,
+    variant === "secondary" && styles.secondary,
+    variant === "ghost" && styles.ghost,
+    variant === "danger" && styles.danger,
+    disabled && styles.disabled,
+  );
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={newTab ? "_blank" : undefined}
+        rel={newTab ? "noreferrer" : undefined}
+        aria-disabled={disabled || undefined}
+        {...sx}
+      >
+        {children}
+      </a>
+    );
+  }
+  if (!to) return null;
+  return (
+    <Link to={to} aria-disabled={disabled || undefined} {...sx}>
+      {children}
+    </Link>
+  );
+}
+
+const styles = stylex.create({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: space.sm,
+    minHeight: "28px",
+    paddingInline: space.lg,
+    paddingBlock: space.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    fontSize: type.sm,
+    fontWeight: 500,
+    lineHeight: 1.2,
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+    transitionProperty: "background-color, border-color, color, opacity",
+    transitionDuration: "120ms",
+    transitionTimingFunction: "ease",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  sm: {
+    minHeight: "22px",
+    paddingInline: space.md,
+    paddingBlock: "2px",
+    borderRadius: radius.sm,
+    fontSize: type.xs,
+  },
+  primary: {
+    backgroundColor: colors.accent,
+    borderColor: colors.accent,
+    color: colors.textInverse,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.accentHover,
+        borderColor: colors.accentHover,
+      },
+    },
+  },
+  secondary: {
+    backgroundColor: colors.bgSurface,
+    borderColor: colors.border,
+    color: colors.text,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    color: colors.text,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  danger: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    color: colors.danger,
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  disabled: {
+    opacity: 0.55,
+    cursor: "not-allowed",
+    pointerEvents: "none",
+  },
+});

package/src/ui/ConfirmDialog.tsx

@@ -0,0 +1,141 @@
+// packages/studio/src/ui/ConfirmDialog.tsx
+//
+// Base UI AlertDialog replacing `window.confirm`. Controlled by the caller:
+//
+//   const [pending, setPending] = useState<Thing | null>(null);
+//   <ConfirmDialog open={pending !== null} onOpenChange={(o) => !o && setPending(null)}
+//     title="Delete chat?" description={…} confirmLabel="Delete" destructive
+//     onConfirm={() => remove(pending!)} />
+import type { ReactNode } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Button } from "./Button";
+import { cx, isTransitioning } from "./popup";
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  busy = false,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  confirmLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  destructive?: boolean;
+  /** Keeps the dialog open and disables actions while the confirm runs. */
+  busy?: boolean;
+  onConfirm: () => void | Promise<void>;
+}) {
+  return (
+    <AlertDialog.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialog.Portal>
+        <AlertDialog.Backdrop
+          className={(state) =>
+            cx(styles.backdrop, isTransitioning(state.transitionStatus) && styles.backdropHidden)
+          }
+        />
+        <AlertDialog.Popup
+          className={(state) =>
+            cx(styles.popup, isTransitioning(state.transitionStatus) && styles.popupHidden)
+          }
+        >
+          <AlertDialog.Title className={cx(styles.title)}>{title}</AlertDialog.Title>
+          {description ? (
+            <AlertDialog.Description className={cx(styles.description)}>
+              {description}
+            </AlertDialog.Description>
+          ) : null}
+          <div {...stylex.props(styles.actions)}>
+            <AlertDialog.Close
+              render={
+                <Button variant="secondary" disabled={busy}>
+                  {cancelLabel}
+                </Button>
+              }
+            />
+            <Button
+              variant={destructive ? "danger" : "primary"}
+              disabled={busy}
+              onClick={() => void onConfirm()}
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+const styles = stylex.create({
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.overlay,
+    backgroundColor: colors.overlay,
+    transitionProperty: "opacity",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  backdropHidden: {
+    opacity: 0,
+  },
+  popup: {
+    position: "fixed",
+    left: "50%",
+    top: "50%",
+    zIndex: z.palette,
+    boxSizing: "border-box",
+    width: "min(400px, calc(100vw - 32px))",
+    transform: "translate(-50%, -50%)",
+    padding: space.xl,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    boxShadow: "0 16px 48px rgba(24, 24, 27, 0.2)",
+    outline: "none",
+    transitionProperty: "opacity, transform",
+    transitionDuration: "120ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  popupHidden: {
+    opacity: 0,
+    transform: "translate(-50%, -50%) scale(0.97)",
+  },
+  title: {
+    margin: 0,
+    fontSize: type.lg,
+    fontWeight: 600,
+    lineHeight: 1.3,
+  },
+  description: {
+    marginTop: space.sm,
+    marginBottom: 0,
+    fontSize: type.md,
+    lineHeight: 1.5,
+    color: colors.textMuted,
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: space.sm,
+    marginTop: space.xl,
+  },
+});

package/src/ui/Field.tsx

@@ -0,0 +1,45 @@
+// packages/studio/src/ui/Field.tsx
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+
+export function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  /** Functional note under the control: counts, ids, shortcuts. */
+  hint?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <label {...stylex.props(styles.field)}>
+      <span {...stylex.props(styles.label)}>{label}</span>
+      {children}
+      {hint ? <span {...stylex.props(styles.hint)}>{hint}</span> : null}
+    </label>
+  );
+}
+
+const styles = stylex.create({
+  field: {
+    display: "block",
+    fontSize: type.md,
+  },
+  label: {
+    display: "block",
+    marginBottom: space.sm,
+    color: colors.textMuted,
+    fontSize: type.sm,
+    fontWeight: 500,
+  },
+  hint: {
+    display: "block",
+    marginTop: space.sm,
+    color: colors.textMuted,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    fontWeight: 400,
+    lineHeight: 1.45,
+  },
+});

package/src/ui/Input.tsx

@@ -0,0 +1,183 @@
+// packages/studio/src/ui/Input.tsx
+import type { ComponentPropsWithoutRef } from "react";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "./popup";
+
+type Props = Omit<ComponentPropsWithoutRef<"input">, "className" | "style">;
+
+export function Input(props: Props) {
+  return <BaseInput {...props} {...stylex.props(styles.input)} />;
+}
+
+export type SelectOption = { value: string; label: string; disabled?: boolean };
+
+/** Form select built on Base UI `Select`; styled like `Input`. */
+export function Select({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select…",
+  name,
+  disabled,
+  "aria-label": ariaLabel,
+  id,
+}: {
+  options: SelectOption[];
+  value: string | null;
+  onValueChange: (value: string | null) => void;
+  placeholder?: string;
+  name?: string;
+  disabled?: boolean;
+  "aria-label"?: string;
+  id?: string;
+}) {
+  return (
+    <BaseSelect.Root
+      items={options}
+      value={value}
+      onValueChange={(next) => onValueChange(typeof next === "string" ? next : null)}
+      name={name}
+      disabled={disabled}
+    >
+      <BaseSelect.Trigger
+        id={id}
+        aria-label={ariaLabel}
+        className={cx(styles.input, styles.selectTrigger)}
+      >
+        <BaseSelect.Value placeholder={placeholder} className={cx(styles.selectValue)} />
+        <BaseSelect.Icon className={cx(styles.selectIcon)}>
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+            <path
+              d="M4.5 6.25 8 9.75l3.5-3.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner
+          side="bottom"
+          align="start"
+          sideOffset={4}
+          alignItemWithTrigger={false}
+          className={cx(popup.positioner)}
+        >
+          <BaseSelect.Popup className={(state) => popupClassName(state, styles.selectPopup)}>
+            <BaseSelect.List>
+              {options.map((opt) => (
+                <BaseSelect.Item
+                  key={opt.value}
+                  value={opt.value}
+                  label={opt.label}
+                  disabled={opt.disabled}
+                  className={(state) =>
+                    cx(
+                      popup.item,
+                      state.highlighted && popup.itemHighlighted,
+                      state.selected && popup.itemSelected,
+                      state.disabled && popup.itemDisabled,
+                    )
+                  }
+                >
+                  <span {...stylex.props(popup.itemIndicator)}>
+                    <BaseSelect.ItemIndicator>
+                      <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+                        <path
+                          d="M3.5 8.5 6.5 11.5 12.5 4.5"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </BaseSelect.ItemIndicator>
+                  </span>
+                  <BaseSelect.ItemText>{opt.label}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}
+
+export function Textarea({
+  mono,
+  ...props
+}: Omit<ComponentPropsWithoutRef<"textarea">, "className" | "style"> & {
+  mono?: boolean;
+}) {
+  return (
+    <textarea
+      {...props}
+      {...stylex.props(styles.input, styles.textarea, mono && styles.mono)}
+    />
+  );
+}
+
+const styles = stylex.create({
+  input: {
+    width: "100%",
+    minHeight: "32px",
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgInput,
+    color: colors.text,
+    fontSize: type.md,
+    outline: "none",
+    ":focus": {
+      borderColor: colors.focus,
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -1,
+    },
+    ":disabled": {
+      opacity: 0.55,
+    },
+  },
+  selectTrigger: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.sm,
+    textAlign: "left",
+    fontFamily: type.sans,
+    cursor: "pointer",
+  },
+  selectValue: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  selectIcon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  selectPopup: {
+    minWidth: "var(--anchor-width)",
+  },
+  textarea: {
+    minHeight: "8rem",
+    resize: "vertical",
+    lineHeight: 1.5,
+  },
+  mono: {
+    fontFamily: type.mono,
+    fontSize: type.sm,
+  },
+});

package/src/ui/ListRow.tsx

@@ -0,0 +1,88 @@
+// packages/studio/src/ui/ListRow.tsx
+import { Link } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+
+const hover = "@media (hover: hover)";
+
+export function ListRow({
+  to,
+  title,
+  meta,
+  trailing,
+}: {
+  to: string;
+  title: string;
+  meta?: string;
+  trailing?: string;
+}) {
+  return (
+    <Link to={to} {...stylex.props(styles.row)}>
+      <span {...stylex.props(styles.body)}>
+        <span {...stylex.props(styles.title)}>{title}</span>
+        {meta ? <span {...stylex.props(styles.meta)}>{meta}</span> : null}
+      </span>
+      {trailing ? (
+        <span {...stylex.props(styles.trailing)}>{trailing}</span>
+      ) : null}
+    </Link>
+  );
+}
+
+export function List({ children }: { children: React.ReactNode }) {
+  return <div {...stylex.props(styles.list)}>{children}</div>;
+}
+
+const styles = stylex.create({
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    overflow: "hidden",
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    minHeight: "32px",
+    paddingInline: space.lg,
+    paddingBlock: space.md,
+    textDecoration: "none",
+    color: colors.text,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    ":last-child": {
+      borderBottomWidth: 0,
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  body: {
+    display: "flex",
+    minWidth: 0,
+    flexDirection: "column",
+    gap: 2,
+  },
+  title: {
+    fontSize: type.md,
+    fontWeight: 500,
+  },
+  meta: {
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  trailing: {
+    flexShrink: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+});