@rangka/client 0.0.1

package/src/api/client.ts

@@ -0,0 +1,26 @@
+import { getToken, clearToken } from './token.js';
+
+const BASE_URL = '';
+
+export async function apiClient(path: string, options: RequestInit = {}): Promise<Response> {
+  const token = getToken();
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string>),
+  };
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+
+  const response = await fetch(`${BASE_URL}${path}`, {
+    ...options,
+    headers,
+  });
+
+  if (response.status === 401) {
+    clearToken();
+    window.dispatchEvent(new CustomEvent('rangka:session-expired'));
+  }
+
+  return response;
+}

package/src/api/paths.ts

@@ -0,0 +1,3 @@
+export function modelToPath(model: string): string {
+  return '/api/' + model.replace(/\./g, '/');
+}

package/src/api/token.ts

@@ -0,0 +1,13 @@
+const TOKEN_KEY = 'rangka:token';
+
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+}

package/src/auth/LoginForm.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+
+export interface LoginFormProps {
+  onLogin: (credentials: { email: string; password: string }) => void | Promise<void>;
+  error?: string;
+  loading?: boolean;
+  className?: string;
+}
+
+export function LoginForm({ onLogin, error, loading, className }: LoginFormProps) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onLogin({ email, password });
+  };
+
+  return (
+    <div className={cn('flex min-h-screen items-center justify-center bg-background', className)}>
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Sign in</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  required
+                  autoFocus
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </Field>
+              {error && <FieldError>{error}</FieldError>}
+              <Field>
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? 'Signing in...' : 'Sign in'}
+                </Button>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/auth/SessionExpired.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+
+export interface SessionExpiredProps {
+  onReLogin: () => void;
+}
+
+export function SessionExpired({ onReLogin }: SessionExpiredProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <Card className="w-full max-w-sm text-center">
+        <CardHeader>
+          <CardTitle>Session Expired</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-4">
+          <p className="text-sm text-muted-foreground">
+            Your session has expired. Please sign in again to continue.
+          </p>
+          <Button onClick={onReLogin}>Sign in</Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/auth/SetupForm.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+
+export interface SetupFormProps {
+  onSetup: (data: { name: string; email: string; password: string }) => void | Promise<void>;
+  error?: string;
+  loading?: boolean;
+}
+
+export function SetupForm({ onSetup, error, loading }: SetupFormProps) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSetup({ name, email, password });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <Card className="w-full max-w-sm">
+        <CardHeader>
+          <CardTitle>Setup</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="name">Name</FieldLabel>
+                <Input
+                  id="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Your name"
+                  required
+                  autoFocus
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  required
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor="password">Password</FieldLabel>
+                <Input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </Field>
+              {error && <FieldError>{error}</FieldError>}
+              <Field>
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? 'Setting up...' : 'Complete setup'}
+                </Button>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/boot/BootGate.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { useBootContext } from './BootProvider.js';
+import { LoginForm } from '../auth/LoginForm.js';
+import { SessionExpired } from '../auth/SessionExpired.js';
+import { SetupForm } from '../auth/SetupForm.js';
+
+export function BootGate({ children }: { children: ReactNode }) {
+  const { state, handleLogin, handleSetup, handleSessionExpired, retry } = useBootContext();
+
+  switch (state.status) {
+    case 'checking':
+    case 'loading':
+      return (
+        <div role="status" aria-label="Loading">
+          Loading…
+        </div>
+      );
+    case 'setup':
+      return <SetupForm onSetup={handleSetup} />;
+    case 'login':
+      if (state.sessionExpired) {
+        return <SessionExpired onReLogin={handleSessionExpired} />;
+      }
+      return <LoginForm onLogin={handleLogin} />;
+    case 'error':
+      return (
+        <div role="alert">
+          <p>Something went wrong. Unable to load the application.</p>
+          <button onClick={retry}>Retry</button>
+        </div>
+      );
+    case 'ready':
+      return <>{children}</>;
+  }
+}

package/src/boot/BootProvider.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { LoginCredentials, SetupCredentials } from '../api/auth.js';
+import type { BootState } from './types.js';
+import { useBoot } from './useBoot.js';
+
+interface BootContextValue {
+  state: BootState;
+  handleLogin: (credentials: LoginCredentials) => Promise<void>;
+  handleSetup: (credentials: SetupCredentials) => Promise<void>;
+  handleSessionExpired: () => void;
+  handleLogout: () => void;
+  retry: () => void;
+}
+
+const BootContext = createContext<BootContextValue | null>(null);
+
+export function BootProvider({ children }: { children: ReactNode }) {
+  const boot = useBoot();
+  return <BootContext.Provider value={boot}>{children}</BootContext.Provider>;
+}
+
+export function useBootContext(): BootContextValue {
+  const ctx = useContext(BootContext);
+  if (!ctx) {
+    throw new Error('useBootContext must be used within a BootProvider');
+  }
+  return ctx;
+}

package/src/boot/types.ts

@@ -0,0 +1,9 @@
+import type { BootResponse } from '@rangka/shared';
+
+export type BootState =
+  | { status: 'checking' }
+  | { status: 'setup' }
+  | { status: 'login'; sessionExpired?: boolean }
+  | { status: 'loading' }
+  | { status: 'ready'; data: BootResponse }
+  | { status: 'error'; error: unknown };

package/src/boot/useBoot.ts

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import type { BootResponse } from '@rangka/shared';
+import { fetchBoot } from '../api/boot.js';
+import { login, setup, type LoginCredentials, type SetupCredentials } from '../api/auth.js';
+import { getToken, clearToken } from '../api/token.js';
+import type { BootState } from './types.js';
+
+type BootAction =
+  | { type: 'SETUP_REQUIRED' }
+  | { type: 'AUTH_REQUIRED'; sessionExpired?: boolean }
+  | { type: 'LOADING' }
+  | { type: 'READY'; data: BootResponse }
+  | { type: 'ERROR'; error: unknown }
+  | { type: 'RESET' };
+
+function bootReducer(_state: BootState, action: BootAction): BootState {
+  switch (action.type) {
+    case 'SETUP_REQUIRED':
+      return { status: 'setup' };
+    case 'AUTH_REQUIRED':
+      return { status: 'login', sessionExpired: action.sessionExpired };
+    case 'LOADING':
+      return { status: 'loading' };
+    case 'READY':
+      return { status: 'ready', data: action.data };
+    case 'ERROR':
+      return { status: 'error', error: action.error };
+    case 'RESET':
+      return { status: 'login' };
+  }
+}
+
+export interface UseBootResult {
+  state: BootState;
+  handleLogin: (credentials: LoginCredentials) => Promise<void>;
+  handleSetup: (credentials: SetupCredentials) => Promise<void>;
+  handleSessionExpired: () => void;
+  handleLogout: () => void;
+  retry: () => void;
+}
+
+export function useBoot(): UseBootResult {
+  const [state, dispatch] = useReducer(bootReducer, { status: 'checking' });
+
+  const performBoot = useCallback(async () => {
+    dispatch({ type: 'LOADING' });
+    try {
+      const data = await fetchBoot();
+      dispatch({ type: 'READY', data });
+    } catch (err: unknown) {
+      const status = (err as { status?: number }).status;
+      if (status === 503) {
+        dispatch({ type: 'SETUP_REQUIRED' });
+      } else if (status === 401 || !getToken()) {
+        dispatch({ type: 'AUTH_REQUIRED' });
+      } else {
+        dispatch({ type: 'ERROR', error: err });
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    performBoot();
+  }, [performBoot]);
+
+  useEffect(() => {
+    const onSessionExpired = () => {
+      dispatch({ type: 'AUTH_REQUIRED', sessionExpired: true });
+    };
+    window.addEventListener('rangka:session-expired', onSessionExpired);
+    return () => window.removeEventListener('rangka:session-expired', onSessionExpired);
+  }, []);
+
+  const handleLogin = useCallback(
+    async (credentials: LoginCredentials) => {
+      const response = await login(credentials);
+      if (!response.ok) {
+        throw response;
+      }
+      await performBoot();
+    },
+    [performBoot],
+  );
+
+  const handleSetup = useCallback(
+    async (credentials: SetupCredentials) => {
+      const response = await setup(credentials);
+      if (!response.ok) {
+        const body = await response.json().catch(() => ({}));
+        throw new Error(body.message ?? 'Setup failed');
+      }
+      await performBoot();
+    },
+    [performBoot],
+  );
+
+  const handleSessionExpired = useCallback(() => {
+    dispatch({ type: 'AUTH_REQUIRED', sessionExpired: true });
+  }, []);
+
+  const handleLogout = useCallback(() => {
+    clearToken();
+    dispatch({ type: 'RESET' });
+  }, []);
+
+  const retry = useCallback(() => {
+    performBoot();
+  }, [performBoot]);
+
+  return { state, handleLogin, handleSetup, handleSessionExpired, handleLogout, retry };
+}

package/src/components/Icon.tsx

@@ -0,0 +1,17 @@
+import { icons, type LucideProps } from 'lucide-react';
+
+export interface IconProps extends Omit<LucideProps, 'ref'> {
+  name: string;
+}
+
+export function Icon({ name, size = 14, ...props }: IconProps) {
+  const pascalName = name
+    .split('-')
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+
+  const LucideIcon = icons[pascalName as keyof typeof icons];
+  if (!LucideIcon) return null;
+
+  return <LucideIcon size={size} {...props} />;
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+function Accordion({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('not-last:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-xs data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};