@alt-t4b/pm-web 0.1.0

package/src/api.ts

@@ -0,0 +1 @@
+export const API_BASE = import.meta.env.VITE_API_URL ?? "";

package/src/components/Badge.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from "./ThemeContext";
+
+type BadgeVariant = "active" | "paused" | "completed" | "archived" | "default";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+}
+
+export function Badge({ children, variant = "default" }: BadgeProps) {
+  const { theme } = useTheme();
+
+  const variantStyles: Record<BadgeVariant, React.CSSProperties> = {
+    active: {
+      background: `${theme.color.primary}22`,
+      color: theme.color.primary,
+    },
+    completed: {
+      background: `${theme.color.success}22`,
+      color: theme.color.success,
+    },
+    paused: {
+      background: theme.color.surfaceContainerHighest,
+      color: theme.color.textMuted,
+    },
+    archived: {
+      background: theme.color.surfaceContainerHigh,
+      color: theme.color.textFaint,
+    },
+    default: {
+      background: theme.color.surfaceContainerHigh,
+      color: theme.color.textMuted,
+    },
+  };
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        padding: "0.2rem 0.5rem",
+        borderRadius: theme.radius.md,
+        fontSize: "0.625rem",
+        fontWeight: 700,
+        fontFamily: theme.font.body,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        lineHeight: 1.4,
+        ...variantStyles[variant],
+      }}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,58 @@
+import { type ButtonHTMLAttributes } from "react";
+import { type Theme } from "./theme";
+import { useTheme } from "./ThemeContext";
+
+type ButtonVariant = "primary" | "ghost";
+type ButtonSize = "sm" | "md";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+function getVariantStyles(theme: Theme): Record<ButtonVariant, React.CSSProperties> {
+  return {
+    primary: {
+      background: `linear-gradient(135deg, ${theme.color.primaryContainer}, ${theme.color.primary})`,
+      color: theme.color.onPrimary,
+      border: "none",
+      boxShadow: theme.shadow.sm,
+    },
+    ghost: {
+      background: "transparent",
+      color: theme.color.textMuted,
+      border: "1px solid transparent",
+    },
+  };
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  style,
+  ...props
+}: ButtonProps) {
+  const { theme } = useTheme();
+
+  const sizeStyles: Record<ButtonSize, React.CSSProperties> = {
+    sm: { padding: "0.25rem 0.625rem", fontSize: theme.font.size.sm },
+    md: { padding: "0.5rem 1rem", fontSize: theme.font.size.md },
+  };
+
+  return (
+    <button
+      style={{
+        borderRadius: theme.radius.lg,
+        cursor: "pointer",
+        fontFamily: theme.font.body,
+        fontWeight: 500,
+        letterSpacing: "0.01em",
+        transition: "background 0.15s, opacity 0.15s",
+        ...getVariantStyles(theme)[variant],
+        ...sizeStyles[size],
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,40 @@
+import { type HTMLAttributes } from "react";
+import { type Theme } from "./theme";
+import { useTheme } from "./ThemeContext";
+
+type CardVariant = "default" | "flat";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: keyof Theme["spacing"];
+  variant?: CardVariant;
+}
+
+export function Card({ padding = "lg", variant = "default", style, ...props }: CardProps) {
+  const { theme } = useTheme();
+
+  const variantStyles: Record<CardVariant, React.CSSProperties> = {
+    default: {
+      background: theme.color.surfaceContainer,
+      border: `1px solid ${theme.color.borderSubtle}`,
+      boxShadow: "none",
+    },
+    flat: {
+      background: theme.color.surfaceContainerLow,
+      border: "none",
+      boxShadow: "none",
+    },
+  };
+
+  return (
+    <div
+      style={{
+        borderRadius: theme.radius.xl,
+        padding: theme.spacing[padding],
+        transition: "background 0.15s",
+        ...variantStyles[variant],
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/Icon.tsx

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from "react";
+
+interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  size?: number;
+}
+
+export function Icon({ name, size = 24, style, ...props }: IconProps) {
+  return (
+    <span
+      className="material-symbols-outlined"
+      style={{
+        fontSize: size,
+        lineHeight: 1,
+        ...style,
+      }}
+      {...props}
+    >
+      {name}
+    </span>
+  );
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,50 @@
+import { type ButtonHTMLAttributes } from "react";
+import { useTheme } from "./ThemeContext";
+import { Icon } from "./Icon";
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: string;
+  size?: number;
+  badge?: boolean;
+}
+
+export function IconButton({ icon, size = 24, badge, style, ...props }: IconButtonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <button
+      style={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 36,
+        height: 36,
+        borderRadius: theme.radius.full,
+        border: "none",
+        background: "transparent",
+        color: theme.color.textMuted,
+        cursor: "pointer",
+        transition: "background 0.15s, color 0.15s",
+        ...style,
+      }}
+      {...props}
+    >
+      <Icon name={icon} size={size} />
+      {badge && (
+        <span
+          style={{
+            position: "absolute",
+            top: 6,
+            right: 6,
+            width: 8,
+            height: 8,
+            borderRadius: theme.radius.full,
+            background: theme.color.danger,
+            border: `2px solid ${theme.color.surface}`,
+          }}
+        />
+      )}
+    </button>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,47 @@
+import { type InputHTMLAttributes } from "react";
+import { useTheme } from "./ThemeContext";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export function Input({ label, style, id, ...props }: InputProps) {
+  const { theme } = useTheme();
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: theme.spacing.xs }}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          style={{
+            fontSize: theme.font.size.xs,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            textTransform: "uppercase" as const,
+            color: theme.color.textFaint,
+            fontFamily: theme.font.body,
+          }}
+        >
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        style={{
+          padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+          border: `1px solid ${theme.color.borderSubtle}`,
+          borderRadius: theme.radius.lg,
+          fontFamily: theme.font.body,
+          fontSize: theme.font.size.md,
+          outline: "none",
+          background: theme.color.surfaceContainerHigh,
+          color: theme.color.text,
+          transition: "border-color 0.15s",
+          ...style,
+        }}
+        {...props}
+      />
+    </div>
+  );
+}

package/src/components/Select.tsx

@@ -0,0 +1,41 @@
+import { type SelectHTMLAttributes } from "react";
+import { useTheme } from "./ThemeContext";
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  options: SelectOption[];
+}
+
+export function Select({ options, style, ...props }: SelectProps) {
+  const { theme } = useTheme();
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: theme.spacing.xs }}>
+      <select
+        style={{
+          padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+          border: `1px solid ${theme.color.borderSubtle}`,
+          borderRadius: theme.radius.lg,
+          fontFamily: theme.font.body,
+          fontSize: theme.font.size.sm,
+          background: theme.color.surfaceContainerHigh,
+          color: theme.color.text,
+          cursor: "pointer",
+          transition: "border-color 0.15s",
+          ...style,
+        }}
+        {...props}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/src/components/Stack.tsx

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from "react";
+import { type Theme } from "./theme";
+import { useTheme } from "./ThemeContext";
+
+interface StackProps extends HTMLAttributes<HTMLDivElement> {
+  direction?: "row" | "column";
+  gap?: keyof Theme["spacing"];
+  align?: React.CSSProperties["alignItems"];
+  justify?: React.CSSProperties["justifyContent"];
+  wrap?: boolean;
+}
+
+export function Stack({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap,
+  style,
+  ...props
+}: StackProps) {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: direction,
+        gap: theme.spacing[gap],
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap ? "wrap" : undefined,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/ThemeContext.tsx

@@ -0,0 +1,53 @@
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import { type Theme, defaultThemeName, themes } from "./theme";
+
+const STORAGE_KEY = "pm-theme";
+
+interface ThemeContextValue {
+  theme: Theme;
+  themeName: string;
+  setTheme: (name: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function loadSavedTheme(): string {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved && saved in themes) return saved;
+  } catch {}
+  return defaultThemeName;
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [themeName, setThemeName] = useState(loadSavedTheme);
+
+  const setTheme = useCallback((name: string) => {
+    if (name in themes) {
+      setThemeName(name);
+      localStorage.setItem(STORAGE_KEY, name);
+    }
+  }, []);
+
+  const t = themes[themeName]!;
+
+  useEffect(() => {
+    const s = document.body.style;
+    s.backgroundColor = t.color.surface;
+    s.color = t.color.text;
+    s.fontFamily = t.font.body;
+    s.margin = "0";
+  }, [t]);
+
+  return (
+    <ThemeContext.Provider value={{ theme: t, themeName, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
+  return ctx;
+}

package/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,49 @@
+import { themes } from "./theme";
+import { useTheme } from "./ThemeContext";
+
+export function ThemeSwitcher() {
+  const { theme, themeName, setTheme } = useTheme();
+
+  return (
+    <div style={{ display: "flex", gap: theme.spacing.sm, alignItems: "center" }}>
+      {Object.values(themes).map((t) => {
+        const active = themeName === t.name;
+        return (
+          <button
+            key={t.name}
+            onClick={() => setTheme(t.name)}
+            title={t.label}
+            style={{
+              width: 28,
+              height: 28,
+              borderRadius: theme.radius.full,
+              border: active
+                ? `2px solid ${theme.color.text}`
+                : `2px solid ${theme.color.border}`,
+              background: t.color.surfaceContainer,
+              cursor: "pointer",
+              padding: 0,
+              boxShadow: active ? `0 0 0 2px ${t.color.primary}` : "none",
+              position: "relative",
+              transition: "box-shadow 0.15s, border-color 0.15s",
+            }}
+            aria-label={`Switch to ${t.label} theme`}
+          >
+            <span
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 12,
+                height: 12,
+                borderRadius: theme.radius.full,
+                background: t.color.primary,
+              }}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TopBar.tsx

@@ -0,0 +1,38 @@
+import { useTheme } from "./ThemeContext";
+import { ThemeSwitcher } from "./ThemeSwitcher";
+
+export function TopBar() {
+  const { theme } = useTheme();
+
+  return (
+    <header
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 40,
+        display: "flex",
+        justifyContent: "center",
+        background: `${theme.color.surfaceContainer}cc`,
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        boxShadow: theme.shadow.sm,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          alignItems: "center",
+          width: "100%",
+          maxWidth: 1400,
+          padding: `${theme.spacing.md} ${theme.spacing["2xl"]}`,
+          boxSizing: "border-box",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { Button } from "./Button";
+export { Input } from "./Input";
+export { Select } from "./Select";
+export { Card } from "./Card";
+export { Stack } from "./Stack";
+export { Icon } from "./Icon";
+export { IconButton } from "./IconButton";
+export { Badge } from "./Badge";
+export { TopBar } from "./TopBar";
+export { ThemeProvider, useTheme } from "./ThemeContext";
+export { themes } from "./theme";
+export type { Theme } from "./theme";

package/src/components/theme.ts

@@ -0,0 +1,185 @@
+export interface Theme {
+  name: string;
+  label: string;
+  color: {
+    // Text hierarchy
+    text: string;
+    textMuted: string;
+    textFaint: string;
+    // Surface layers (MD3-style tonal depth)
+    surface: string;
+    surfaceContainer: string;
+    surfaceContainerLow: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    // Borders
+    border: string;
+    borderSubtle: string;
+    // Primary
+    primary: string;
+    primaryContainer: string;
+    onPrimary: string;
+    onPrimaryContainer: string;
+    // Tertiary accent
+    tertiary: string;
+    // Danger / error
+    danger: string;
+    // Semantic
+    success: string;
+  };
+  shadow: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+  };
+  spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+  };
+  font: {
+    headline: string;
+    body: string;
+    size: {
+      xs: string;
+      sm: string;
+      md: string;
+      lg: string;
+      xl: string;
+      "2xl": string;
+    };
+  };
+}
+
+const shared: Pick<Theme, "radius" | "spacing" | "font"> = {
+  radius: { sm: 2, md: 4, lg: 8, xl: 12, full: 9999 },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "2.5rem",
+  },
+  font: {
+    headline: "'Manrope', system-ui, sans-serif",
+    body: "'Inter', system-ui, sans-serif",
+    size: {
+      xs: "0.75rem",
+      sm: "0.8125rem",
+      md: "0.875rem",
+      lg: "1rem",
+      xl: "1.25rem",
+      "2xl": "2.25rem",
+    },
+  },
+};
+
+export const themes: Record<string, Theme> = {
+  // Dark teal — derived from the Stitch MD3 palette, inverted to dark
+  deepTeal: {
+    name: "deepTeal",
+    label: "Deep Teal",
+    ...shared,
+    color: {
+      text: "#d4e5ea",
+      textMuted: "#8ba8b2",
+      textFaint: "#5a7580",
+      surface: "#0d1b1f",
+      surfaceContainer: "#12252a",
+      surfaceContainerLow: "#0f2025",
+      surfaceContainerHigh: "#172e34",
+      surfaceContainerHighest: "#1e383f",
+      border: "#1e383f",
+      borderSubtle: "#162d33",
+      primary: "#8bd1e8",
+      primaryContainer: "#005f73",
+      onPrimary: "#003642",
+      onPrimaryContainer: "#b2ebff",
+      tertiary: "#fcb97b",
+      danger: "#ffb4ab",
+      success: "#6dd58c",
+    },
+    shadow: {
+      sm: "0 1px 3px rgba(0,0,0,0.4)",
+      md: "0 4px 20px rgba(0,0,0,0.3)",
+      lg: "0 8px 40px rgba(0,0,0,0.4)",
+    },
+  },
+
+  // Warm ember — dark amber/orange
+  ember: {
+    name: "ember",
+    label: "Ember",
+    ...shared,
+    color: {
+      text: "#ede0d4",
+      textMuted: "#a89280",
+      textFaint: "#6e5e50",
+      surface: "#141010",
+      surfaceContainer: "#1e1816",
+      surfaceContainerLow: "#1a1412",
+      surfaceContainerHigh: "#261e1a",
+      surfaceContainerHighest: "#2e2520",
+      border: "#2e2520",
+      borderSubtle: "#241c18",
+      primary: "#e87040",
+      primaryContainer: "#6e3518",
+      onPrimary: "#2d1600",
+      onPrimaryContainer: "#ffdcc0",
+      tertiary: "#d4bfff",
+      danger: "#ffb4ab",
+      success: "#a8d5a2",
+    },
+    shadow: {
+      sm: "0 1px 3px rgba(0,0,0,0.5)",
+      md: "0 4px 20px rgba(0,0,0,0.35)",
+      lg: "0 8px 40px rgba(0,0,0,0.45)",
+    },
+  },
+
+  // Cool nord — arctic dark
+  nord: {
+    name: "nord",
+    label: "Nord",
+    ...shared,
+    color: {
+      text: "#d8dee9",
+      textMuted: "#8892a4",
+      textFaint: "#5c6478",
+      surface: "#242933",
+      surfaceContainer: "#2e3440",
+      surfaceContainerLow: "#292e39",
+      surfaceContainerHigh: "#353c4a",
+      surfaceContainerHighest: "#3d4556",
+      border: "#3d4556",
+      borderSubtle: "#353c4a",
+      primary: "#88c0d0",
+      primaryContainer: "#2e5a66",
+      onPrimary: "#1a3640",
+      onPrimaryContainer: "#b8e8f5",
+      tertiary: "#ebcb8b",
+      danger: "#bf616a",
+      success: "#a3be8c",
+    },
+    shadow: {
+      sm: "0 1px 3px rgba(0,0,0,0.3)",
+      md: "0 4px 20px rgba(0,0,0,0.25)",
+      lg: "0 8px 40px rgba(0,0,0,0.35)",
+    },
+  },
+};
+
+export const defaultThemeName = "deepTeal";