@ima-jin/ui 1.0.0

package/src/app-shell.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+
+/**
+ * AppShell — viewport-clamped layout primitive
+ *
+ * Clamp contract:
+ *   - Header / Footer: shrink-0  (they stay pinned, never squish)
+ *   - Body:            flex-1 min-h-0 overflow-auto  (fills remaining space, scrolls)
+ *
+ * This prevents headers (e.g. nav + search bar) from pushing content off-screen
+ * on small viewports. Each pane in a Split should repeat the same Header/Body/Footer
+ * pattern for per-pane clamping.
+ */
+
+/* ------------------------------------------------------------------ */
+/* AppShell root                                                       */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(
+  function AppShell({ className = '', children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={`h-dvh flex flex-col overflow-hidden ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+/* ------------------------------------------------------------------ */
+/* Header                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const AppShellHeader = React.forwardRef<HTMLDivElement, AppShellHeaderProps>(
+  function AppShellHeader({ className = '', children, ...props }, ref) {
+    return (
+      <div ref={ref} className={`shrink-0 ${className}`} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+/* ------------------------------------------------------------------ */
+/* Body (scrollable content area)                                      */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const AppShellBody = React.forwardRef<HTMLDivElement, AppShellBodyProps>(
+  function AppShellBody({ className = '', children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={`flex-1 min-h-0 overflow-auto ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+/* ------------------------------------------------------------------ */
+/* Footer                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const AppShellFooter = React.forwardRef<HTMLDivElement, AppShellFooterProps>(
+  function AppShellFooter({ className = '', children, ...props }, ref) {
+    return (
+      <div ref={ref} className={`shrink-0 ${className}`} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+/* ------------------------------------------------------------------ */
+/* Split (horizontal panes)                                            */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellSplitProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const AppShellSplit = React.forwardRef<HTMLDivElement, AppShellSplitProps>(
+  function AppShellSplit({ className = '', children, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={`flex-1 min-h-0 flex flex-row overflow-hidden ${className}`}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+/* ------------------------------------------------------------------ */
+/* Split.Pane                                                          */
+/* ------------------------------------------------------------------ */
+
+export interface AppShellPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string | number;
+  children?: React.ReactNode;
+}
+
+export const AppShellPane = React.forwardRef<HTMLDivElement, AppShellPaneProps>(
+  function AppShellPane({ width, className = '', style, children, ...props }, ref) {
+    const widthStyle = width != null ? { width, ...style } : style;
+    return (
+      <div
+        ref={ref}
+        className={`flex flex-col min-h-0 overflow-hidden ${className}`}
+        style={widthStyle}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+AppShell.displayName = 'AppShell';
+AppShellHeader.displayName = 'AppShell.Header';
+AppShellBody.displayName = 'AppShell.Body';
+AppShellFooter.displayName = 'AppShell.Footer';
+AppShellSplit.displayName = 'AppShell.Split';
+AppShellPane.displayName = 'AppShell.Split.Pane';
+
+/* Attach subcomponents as static properties for compound API */
+(AppShell as unknown as Record<string, unknown>).Header = AppShellHeader;
+(AppShell as unknown as Record<string, unknown>).Body = AppShellBody;
+(AppShell as unknown as Record<string, unknown>).Footer = AppShellFooter;
+(AppShell as unknown as Record<string, unknown>).Split = AppShellSplit;
+AppShellSplit.Pane = AppShellPane;

package/src/balance-badge.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+export interface BalanceBadgeProps {
+  /** DID of the user whose balance to show */
+  did?: string | null;
+  /** Pay service URL (e.g., https://pay.imajin.ai) */
+  payUrl: string;
+  /** Auth token for API requests */
+  authToken?: string | null;
+  /** Custom className for styling */
+  className?: string;
+}
+
+interface BalanceData {
+  did: string;
+  amount: number;
+  currency: string;
+  updatedAt: string;
+}
+
+/**
+ * Balance Badge Component
+ *
+ * Displays user's balance from the pay service.
+ * - Only shows if user is logged in (has DID and token)
+ * - Only shows if balance > 0
+ * - Fetches balance from pay service
+ */
+export function BalanceBadge({ did, payUrl, authToken, className = '' }: BalanceBadgeProps) {
+  const [balance, setBalance] = useState<BalanceData | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!did || !authToken) {
+      setBalance(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchBalance() {
+      setLoading(true);
+      try {
+        const res = await fetch(`${payUrl}/api/balance/${did}`, {
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+          },
+          credentials: 'include',
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          if (!cancelled) {
+            setBalance(data);
+          }
+        } else {
+          if (!cancelled) {
+            setBalance(null);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to fetch balance:', error);
+        if (!cancelled) {
+          setBalance(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    fetchBalance();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [did, authToken, payUrl]);
+
+  // Don't show if not logged in
+  if (!did || !authToken) {
+    return null;
+  }
+
+  // Don't show while loading
+  if (loading) {
+    return null;
+  }
+
+  // Don't show if balance is 0 or null
+  if (!balance || balance.amount <= 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-gradient-to-r from-orange-500/10 to-amber-500/10 border border-orange-500/20 ${className}`}
+    >
+      <span className="text-sm font-medium text-green-600 dark:text-green-400">
+        ${balance.amount.toFixed(2)}
+      </span>
+    </div>
+  );
+}

package/src/brand.ts

@@ -0,0 +1,26 @@
+/**
+ * Imajin brand constants
+ * 
+ * Single source of truth for taglines, copy, and brand text.
+ * Import from @imajin/ui in any app.
+ */
+
+export const BRAND = {
+  name: 'Imajin',
+  nameJp: '今人',
+  pronunciation: 'eema-gin',
+  
+  /** Primary tagline — used on homepage hero */
+  tagline: 'The internet that pays you back',
+  
+  /** Footer line — used across all services */
+  footer: 'Part of the Imajin sovereign network',
+  
+  /** Short sovereign message — used in emails, receipts */
+  sovereign: 'No platform. No middleman. Yours.',
+  
+  /** Links */
+  url: 'https://imajin.ai',
+  community: 'https://app.dfos.com/j/c3rff6e96e4ca9hncc43en',
+  github: 'https://github.com/ima-jin/imajin-ai',
+} as const;

package/src/button.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+export function Button({ variant = 'primary', className = '', ...props }: ButtonProps) {
+  const base = 'px-4 py-2 rounded font-medium transition-colors';
+  const variants = {
+    primary: 'bg-orange-500 text-white hover:bg-orange-600',
+    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
+  };
+  return <button className={`${base} ${variants[variant]} ${className}`} {...props} />;
+}

package/src/connection-picker.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Connection {
+  did: string;
+  name: string | null;
+  handle: string | null;
+  avatar: string | null;
+}
+
+export interface ConnectionPickerProps {
+  connectionsUrl: string;
+  excludeDids?: string[];
+  onSelect: (connection: Connection) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function ConnectionPicker({
+  connectionsUrl,
+  excludeDids = [],
+  onSelect,
+  placeholder = 'Search connections...',
+  disabled = false,
+}: ConnectionPickerProps) {
+  const [connections, setConnections] = useState<Connection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    fetch(connectionsUrl)
+      .then(r => r.json())
+      .then(data => {
+        setConnections(data.connections || []);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Failed to load connections');
+        setLoading(false);
+      });
+  }, [connectionsUrl]);
+
+  const excludeSet = new Set(excludeDids);
+  const available = connections.filter(c => !excludeSet.has(c.did));
+  const filtered = search
+    ? available.filter(c =>
+        (c.handle || '').toLowerCase().includes(search.toLowerCase()) ||
+        (c.name || '').toLowerCase().includes(search.toLowerCase())
+      )
+    : available;
+
+  return (
+    <div className="space-y-2">
+      <input
+        type="text"
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled || loading}
+        className="w-full px-3 py-2 text-sm border border-gray-600 rounded-lg bg-gray-900 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
+      />
+      {loading ? (
+        <p className="text-sm text-gray-500 px-1">Loading connections...</p>
+      ) : error ? (
+        <p className="text-sm text-red-400 px-1">{error}</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-gray-500 px-1">
+          {available.length === 0 ? 'No connections available.' : 'No matching connections.'}
+        </p>
+      ) : (
+        <div className="space-y-0 max-h-48 overflow-y-auto rounded-lg border border-gray-700 bg-gray-900">
+          {filtered.map(conn => (
+            <button
+              key={conn.did}
+              onClick={() => { onSelect(conn); setSearch(''); }}
+              disabled={disabled}
+              className="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-800 transition text-left disabled:opacity-50"
+            >
+              {conn.avatar ? (
+                <img
+                  src={conn.avatar}
+                  alt={conn.name || conn.handle || conn.did}
+                  className="w-8 h-8 rounded-full object-cover flex-shrink-0"
+                />
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 text-sm font-semibold flex-shrink-0">
+                  {(conn.name || conn.handle || conn.did).charAt(0).toUpperCase()}
+                </div>
+              )}
+              <div className="min-w-0">
+                <div className="text-sm font-medium text-white truncate">
+                  {conn.name || (conn.handle ? `@${conn.handle}` : conn.did.slice(0, 20) + '...')}
+                </div>
+                {conn.handle && conn.name && (
+                  <div className="text-xs text-gray-400 truncate">@{conn.handle}</div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/footer.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { BuildInfo } from './BuildInfo';
+
+function getServiceFromPathname(pathname: string): string {
+  const segment = pathname.split('/').filter(Boolean)[0];
+  if (!segment) return 'landing';
+  return segment;
+}
+
+export function ImajinFooter({ className }: { className?: string }) {
+  const [subscribeHref, setSubscribeHref] = useState('/subscribe');
+
+  useEffect(() => {
+    const service = getServiceFromPathname(window.location.pathname);
+    setSubscribeHref(`/subscribe?from=${service}`);
+  }, []);
+
+  return (
+    <div className={`flex flex-col items-center gap-2 ${className || ""}`}>
+      <p className="text-center text-sm text-gray-500">
+        Part of the{" "}
+        <a href="https://imajin.ai" className="text-orange-500 hover:underline">Imajin</a>
+        {" "}sovereign network
+      </p>
+      <p className="text-center text-sm text-gray-500">
+        <a href="https://app.dfos.com/j/c3rff6e96e4ca9hncc43en" className="hover:underline">Community</a>
+        {" · "}
+        <a href="https://github.com/ima-jin/imajin-ai" className="hover:underline">GitHub</a>
+        {" · "}
+        <a href="/privacy" className="hover:underline">Privacy</a>
+        {" · "}
+        <a href={subscribeHref} className="hover:underline">Subscribe</a>
+      </p>
+      <BuildInfo />
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,44 @@
+export { NavBar } from './nav-bar';
+export type { NavBarProps, NavIdentity, ServiceUrls } from './nav-bar';
+export { AppLauncher } from './app-launcher';
+export type { AppLauncherProps, LauncherService } from './app-launcher';
+export { Button } from './button';
+export { BalanceBadge } from './balance-badge';
+export type { BalanceBadgeProps } from './balance-badge';
+export { ImajinFooter } from './footer';
+export { BuildInfo } from './BuildInfo';
+export { BRAND } from './brand';
+export { MarkdownEditor } from './MarkdownEditor';
+export type { MarkdownEditorProps } from './MarkdownEditor';
+export { MarkdownContent } from './MarkdownContent';
+export type { MarkdownContentProps } from './MarkdownContent';
+export { ConnectionPicker } from './connection-picker';
+export type { ConnectionPickerProps } from './connection-picker';
+
+export { PayoutSetupBanner } from './PayoutSetupBanner';
+
+export { ToastProvider, useToast } from './toast';
+export type { ToastType } from './toast';
+
+export { NotificationProvider, useNotifications } from './notification-provider';
+export type { Notification, NotificationContextValue } from './notification-provider';
+export { NotificationBell } from './notification-bell';
+
+export { ActionSheet } from './action-sheet';
+export { AppShell } from './app-shell';
+export { DidShareListEditor } from './DidShareListEditor';
+export { MoneyInput } from './MoneyInput';
+export type {
+  AppShellProps,
+  AppShellHeaderProps,
+  AppShellBodyProps,
+  AppShellFooterProps,
+  AppShellSplitProps,
+  AppShellPaneProps,
+} from './app-shell';
+
+export { themeInitScript } from './theme-init';
+
+export { getActingAs, setActingAs, getActingAsHeaders } from './acting-as';
+export { useIdentities } from './use-identities';
+export type { GroupIdentity } from './use-identities';