@ima-jin/ui 1.0.0

package/src/MoneyInput.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import type { Money } from '@imajin/fair';
+
+interface MoneyInputProps {
+  value?: Money;
+  onChange: (value: Money | undefined) => void;
+  readOnly?: boolean;
+  className?: string;
+  currencies?: string[];
+}
+
+const DEFAULT_CURRENCIES = ['USD', 'EUR', 'GBP', 'CAD', 'MJNX'];
+
+const CURRENCY_SYMBOLS: Record<string, string> = {
+  USD: '$',
+  EUR: '€',
+  GBP: '£',
+  CAD: 'C$',
+  MJNX: 'Ⓜ',
+};
+
+function formatCents(cents: number): string {
+  return (cents / 100).toFixed(2);
+}
+
+function parseDecimalInput(raw: string): number | null {
+  const cleaned = raw.replace(/,/g, '');
+  const parsed = parseFloat(cleaned);
+  if (Number.isNaN(parsed) || parsed < 0) return null;
+  return Math.round(parsed * 100);
+}
+
+export function MoneyInput({
+  value,
+  onChange,
+  readOnly = false,
+  className = '',
+  currencies = DEFAULT_CURRENCIES,
+}: MoneyInputProps) {
+  const symbol = value ? (CURRENCY_SYMBOLS[value.currency] ?? value.currency) : '$';
+
+  const formattedPreview = useMemo(() => {
+    if (!value) return '';
+    const amt = (value.amount / 100).toFixed(2);
+    return `${symbol}${amt} ${value.currency}`;
+  }, [value, symbol]);
+
+  return (
+    <div className={`space-y-1 ${className}`}>
+      <div className="flex items-center gap-2">
+        <div className="relative flex-1">
+          <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-500 pointer-events-none">
+            {symbol}
+          </span>
+          <input
+            type="text"
+            inputMode="decimal"
+            value={value ? formatCents(value.amount) : ''}
+            onChange={(e) => {
+              const cents = parseDecimalInput(e.target.value);
+              if (cents === null) {
+                onChange(undefined);
+                return;
+              }
+              onChange({
+                amount: cents,
+                currency: value?.currency ?? currencies[0],
+              });
+            }}
+            placeholder="0.00"
+            readOnly={readOnly}
+            className="w-full bg-[#1a1a1a] border border-gray-700 rounded pl-6 pr-2 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-orange-500 read-only:opacity-60"
+          />
+        </div>
+        <select
+          value={value?.currency ?? currencies[0]}
+          onChange={(e) => {
+            const currency = e.target.value;
+            const amount = value?.amount ?? 0;
+            if (amount === 0 && !value) {
+              onChange(undefined);
+            } else {
+              onChange({ amount, currency });
+            }
+          }}
+          disabled={readOnly}
+          className="bg-[#1a1a1a] border border-gray-700 rounded px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-orange-500 disabled:opacity-60"
+        >
+          {currencies.map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+      </div>
+      {value && value.amount > 0 && (
+        <p className="text-[10px] text-gray-500">{formattedPreview}</p>
+      )}
+    </div>
+  );
+}

package/src/PayoutSetupBanner.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface PayoutSetupBannerProps {
+  /** DID whose payout status is being checked (e.g. event creator) */
+  did: string;
+  /** Pay service base URL */
+  payUrl: string;
+  /** Optional override for the message shown to the DID owner */
+  message?: string;
+  /** Currently signed-in user's DID. If provided and != did, banner switches
+   *  to third-person copy ("Event creator @handle needs to connect Stripe")
+   *  and hides the "Set up payouts →" CTA, since the viewer can't fix it. */
+  viewerDid?: string;
+  /** Display handle for the DID owner (used in third-person copy) */
+  ownerHandle?: string | null;
+  /** Display name for the DID owner (fallback when no handle) */
+  ownerName?: string | null;
+  /** Label for what the owner is responsible for in third-person copy */
+  ownerRole?: string;
+}
+
+/**
+ * Reusable banner nudging users to connect their bank for payouts.
+ * Works cross-service — pass the pay service URL explicitly.
+ *
+ * Checks GET {payUrl}/api/connect/status?did=xxx
+ * If not connected or incomplete → shows dismissible banner
+ * If connected or on error → renders nothing
+ *
+ * If `viewerDid` differs from `did`, the banner becomes informational (no CTA).
+ */
+export function PayoutSetupBanner({
+  did,
+  payUrl,
+  message = 'Set up payouts to receive funds from events, tips, and sales',
+  viewerDid,
+  ownerHandle,
+  ownerName,
+  ownerRole = 'Event creator',
+}: PayoutSetupBannerProps) {
+  const [shouldShow, setShouldShow] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const isThirdParty = !!viewerDid && viewerDid !== did;
+  const ownerLabel = ownerHandle ? `@${ownerHandle}` : ownerName || 'they';
+
+  useEffect(() => {
+    const dismissedKey = `payout-banner-dismissed-${did}`;
+    if (typeof window !== 'undefined' && localStorage.getItem(dismissedKey) === 'true') {
+      setLoading(false);
+      return;
+    }
+
+    const check = async () => {
+      try {
+        const res = await fetch(`${payUrl}/api/connect/status?did=${encodeURIComponent(did)}`, {
+          credentials: 'include',
+        });
+
+        if (res.status === 404 || res.status === 403) {
+          setShouldShow(true);
+        } else if (res.ok) {
+          const data = await res.json();
+          setShouldShow(!data.onboardingComplete);
+        }
+      } catch {
+        // Network error / endpoint doesn't exist yet — stay hidden
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (did) check();
+    else setLoading(false);
+  }, [did, payUrl]);
+
+  const handleDismiss = () => {
+    localStorage.setItem(`payout-banner-dismissed-${did}`, 'true');
+    setShouldShow(false);
+  };
+
+  if (loading || !shouldShow) return null;
+
+  const displayMessage = isThirdParty
+    ? `${ownerRole} ${ownerLabel} needs to connect Stripe before tickets can be sold.`
+    : message;
+
+  return (
+    <div className="bg-orange-900/20 border border-orange-800/50 rounded-xl p-4 mb-6">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse shrink-0" />
+          <p className="text-sm text-orange-200">{displayMessage}</p>
+        </div>
+        <div className="flex items-center gap-3 shrink-0">
+          {!isThirdParty && (
+            <a
+              href={`${payUrl}/payouts`}
+              className="text-sm text-orange-400 hover:text-orange-300 font-medium transition-colors whitespace-nowrap"
+            >
+              Set up payouts →
+            </a>
+          )}
+          <button
+            onClick={handleDismiss}
+            className="text-orange-400/60 hover:text-orange-400 text-lg leading-none transition-colors"
+            aria-label="Dismiss"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/acting-as.ts

@@ -0,0 +1,21 @@
+export function getActingAs(): string | null {
+  if (typeof window === 'undefined') return null;
+  return localStorage.getItem('imajin:acting-as');
+}
+
+export function setActingAs(did: string | null): void {
+  if (typeof window === 'undefined') return;
+  if (did) {
+    localStorage.setItem('imajin:acting-as', did);
+    document.cookie = `x-acting-as=${did}; path=/; max-age=31536000; SameSite=Lax`;
+  } else {
+    localStorage.removeItem('imajin:acting-as');
+    document.cookie = 'x-acting-as=; path=/; max-age=0';
+  }
+  window.dispatchEvent(new CustomEvent('imajin:acting-as-changed', { detail: { did } }));
+}
+
+export function getActingAsHeaders(): Record<string, string> {
+  const did = getActingAs();
+  return did ? { 'X-Acting-As': did } : {};
+}

package/src/action-sheet.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useEffect } from 'react';
+
+interface ActionSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}
+
+interface ReactionsProps {
+  emojis: string[];
+  onSelect: (emoji: string) => void;
+}
+
+interface ActionsProps {
+  children: React.ReactNode;
+}
+
+interface ActionProps {
+  icon?: string;
+  label: string;
+  onPress: () => void;
+  variant?: 'default' | 'danger';
+}
+
+function Reactions({ emojis, onSelect }: ReactionsProps) {
+  return (
+    <div className="flex justify-around px-4 py-3 border-b border-gray-700">
+      {emojis.map((emoji) => (
+        <button
+          key={emoji}
+          onClick={() => onSelect(emoji)}
+          className="w-11 h-11 flex items-center justify-center text-2xl hover:bg-gray-700 rounded-full transition"
+          aria-label={emoji}
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function Actions({ children }: ActionsProps) {
+  return (
+    <div className="border-b border-gray-700 last:border-b-0">
+      {children}
+    </div>
+  );
+}
+
+function Action({ icon, label, onPress, variant = 'default' }: ActionProps) {
+  return (
+    <button
+      onClick={onPress}
+      className={`w-full flex items-center gap-3 px-5 py-3.5 text-left text-sm transition hover:bg-gray-800 ${
+        variant === 'danger' ? 'text-red-400' : 'text-white'
+      }`}
+    >
+      {icon && <span className="text-lg w-6 text-center">{icon}</span>}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+export function ActionSheet({ open, onClose, title, children }: ActionSheetProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9998] flex items-end">
+      <style>{`
+        @keyframes actionSheetSlideUp {
+          from { transform: translateY(100%); }
+          to { transform: translateY(0); }
+        }
+      `}</style>
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      {/* Sheet */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title ?? 'Actions'}
+        className="relative w-full bg-gray-900 rounded-t-2xl border-t border-gray-700 max-h-[70vh] overflow-y-auto"
+        style={{ animation: 'actionSheetSlideUp 0.25s ease-out' }}
+      >
+        {/* Drag handle */}
+        <div className="flex justify-center pt-3 pb-1">
+          <div className="w-10 h-1 rounded-full bg-gray-600" />
+        </div>
+        {title && (
+          <div className="px-5 py-2 border-b border-gray-700">
+            <p className="text-sm font-medium text-gray-400 text-center">{title}</p>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+ActionSheet.Reactions = Reactions;
+ActionSheet.Actions = Actions;
+ActionSheet.Action = Action;

package/src/app-launcher.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useIdentities } from './use-identities';
+
+export interface LauncherService {
+  name: string;
+  description: string;
+  icon: string;
+  label: string;
+  visibility: 'public' | 'authenticated' | 'creator' | 'internal';
+  category: 'kernel' | 'core' | 'creator' | 'developer' | 'infrastructure' | 'meta';
+  url: string;
+  externalUrl?: string;
+}
+
+export interface AppLauncherProps {
+  registryUrl: string;
+  currentService?: string;
+  tier?: 'anonymous' | 'soft' | 'hard' | 'creator';
+  /** Render inline (for mobile menu) instead of as a flyout */
+  inline?: boolean;
+  /** Layout variant: 'list' (default) or 'grid' (4-column icon grid) */
+  variant?: 'list' | 'grid';
+  /** Auth service URL — enables identity switcher when provided */
+  authUrl?: string;
+  /** If set, only show services in this list (from active identity config) */
+  enabledServices?: string[];
+}
+
+function filterByTier(services: LauncherService[], tier: string): LauncherService[] {
+  const hasProfile = tier === 'hard' || tier === 'creator';
+  return services.filter((s) => {
+    if (s.visibility === 'internal') return false;
+    if (s.visibility === 'public') return true;
+    if (s.visibility === 'authenticated') return hasProfile;
+    if (s.visibility === 'creator') return hasProfile;
+    return false;
+  });
+}
+
+function groupByCategory(services: LauncherService[]): { kernel: LauncherService[]; core: LauncherService[]; creator: LauncherService[]; developer: LauncherService[]; meta: LauncherService[] } {
+  return {
+    kernel: services.filter((s) => s.category === 'kernel'),
+    core: services.filter((s) => s.category === 'core'),
+    creator: services.filter((s) => s.category === 'creator'),
+    developer: services.filter((s) => s.category === 'developer'),
+    meta: services.filter((s) => s.category === 'meta'),
+  };
+}
+
+function scopeIcon(scope: string): string {
+  if (scope === 'community') return '🏛️';
+  if (scope === 'org') return '🏢';
+  if (scope === 'family') return '👨‍👩‍👦';
+  if (scope === 'node') return '🖥️';
+  if (scope === 'agent') return '🤖';
+  if (scope === 'device') return '📱';
+  return '👤';
+}
+
+export function AppLauncher({ registryUrl, currentService, tier = 'anonymous', inline = false, variant = 'list', authUrl, enabledServices }: AppLauncherProps) {
+  const [services, setServices] = useState<LauncherService[]>([]);
+  const [showPanel, setShowPanel] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const showIdentities = tier === 'hard' || tier === 'creator';
+  // profileUrl=null: AppLauncher doesn't use identity config (enabledServices passed from parent)
+  const { identities, activeIdentity, setActiveIdentity } = useIdentities(showIdentities && authUrl ? authUrl : null, null);
+
+  useEffect(() => {
+    fetch(`${registryUrl}/api/specs`)
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => {
+        if (data?.services) setServices(data.services);
+      })
+      .catch(() => {});
+  }, [registryUrl]);
+
+  useEffect(() => {
+    if (!showPanel) return;
+    function handleClickOutside(event: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        setShowPanel(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showPanel]);
+
+  let visible = filterByTier(services, tier);
+  if (enabledServices && enabledServices.length > 0) {
+    visible = visible.filter((s) => enabledServices.includes(s.name));
+  }
+  const { kernel, core, creator, developer, meta } = groupByCategory(visible);
+
+  const wwwUrl = services.find((s) => s.name === 'kernel')?.url || services.find((s) => s.name === 'www')?.url || '#';
+
+  function renderTile(service: LauncherService) {
+    const isCurrent = service.name === currentService;
+    const isExternal = !!service.externalUrl;
+    return (
+      <a
+        key={service.name}
+        href={service.url}
+        {...(isExternal && { target: '_blank', rel: 'noopener noreferrer' })}
+        className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition no-underline ${
+          isCurrent
+            ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 font-medium'
+            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+        }`}
+      >
+        <span className="text-lg flex-shrink-0">{service.icon}</span>
+        <span>{service.label}</span>
+      </a>
+    );
+  }
+
+  function renderGridTile(service: LauncherService) {
+    const isCurrent = service.name === currentService;
+    return (
+      <a
+        key={service.name}
+        href={service.url}
+        className={`flex flex-col items-center justify-center w-16 h-16 rounded-lg text-center transition no-underline ${
+          isCurrent
+            ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400'
+            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+        }`}
+      >
+        <span className="text-2xl">{service.icon}</span>
+        <span className="text-[10px] mt-0.5 leading-tight">{service.label}</span>
+      </a>
+    );
+  }
+
+  const identitiesSection = showIdentities && (identities.length > 0 || authUrl) ? (
+    <div className="border-t border-gray-200 dark:border-gray-800 mt-1 pt-1">
+      <div className="px-3 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+        Switch To
+      </div>
+      {identities.map((ident) => {
+        const isActive = ident.groupDid === activeIdentity;
+        return (
+          <button
+            key={ident.groupDid}
+            onClick={() => { setActiveIdentity(isActive ? null : ident.groupDid); setShowPanel(false); }}
+            className={`w-full text-left flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition ${
+              isActive
+                ? 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 font-medium'
+                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+            }`}
+          >
+            <span className="text-lg flex-shrink-0">{scopeIcon(ident.scope)}</span>
+            <span>{ident.name || ident.handle || ident.groupDid.slice(0, 12)}</span>
+            {isActive && <span className="ml-auto text-amber-600 dark:text-amber-400 font-bold text-xs">✓</span>}
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  const footer = (
+    <div className="border-t border-gray-200 dark:border-gray-800 mt-1 pt-1">
+      <a
+        href={`${wwwUrl}/`}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition no-underline"
+      >
+        See all apps →
+      </a>
+    </div>
+  );
+
+  const content = variant === 'grid' ? (
+    <>
+      {kernel.length > 0 && (
+        <div>
+          <div className="col-span-4 px-3 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Kernel Services
+          </div>
+          <div className="grid grid-cols-4 gap-1 px-2">
+            {kernel.map(renderGridTile)}
+          </div>
+        </div>
+      )}
+      {core.length > 0 && (
+        <div className="grid grid-cols-4 gap-1 px-2">
+          {core.map(renderGridTile)}
+        </div>
+      )}
+      {creator.length > 0 && (
+        <div>
+          <div className="col-span-4 px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Creator Tools
+          </div>
+          <div className="grid grid-cols-4 gap-1 px-2">
+            {creator.map(renderGridTile)}
+          </div>
+        </div>
+      )}
+      {developer.length > 0 && (
+        <div>
+          <div className="col-span-4 px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Developers
+          </div>
+          <div className="grid grid-cols-4 gap-1 px-2">
+            {developer.map(renderGridTile)}
+          </div>
+        </div>
+      )}
+      {identitiesSection}
+      {footer}
+    </>
+  ) : (
+    <>
+      {kernel.length > 0 && (
+        <div>
+          <div className="px-3 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Kernel Services
+          </div>
+          {kernel.map(renderTile)}
+        </div>
+      )}
+      {core.length > 0 && (
+        <div>
+          {core.map(renderTile)}
+        </div>
+      )}
+      {creator.length > 0 && (
+        <div>
+          <div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Creator Tools
+          </div>
+          {creator.map(renderTile)}
+        </div>
+      )}
+      {developer.length > 0 && (
+        <div>
+          <div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Developers
+          </div>
+          {developer.map(renderTile)}
+        </div>
+      )}
+      {meta.length > 0 && (
+        <div>
+          <div className="px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            Project
+          </div>
+          {meta.map(renderTile)}
+        </div>
+      )}
+      {identitiesSection}
+      {footer}
+    </>
+  );
+
+  // Inline mode for mobile menu
+  if (inline) {
+    return <div className="space-y-0.5">{content}</div>;
+  }
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={() => setShowPanel(!showPanel)}
+        className={`px-3 py-1.5 rounded-lg text-sm transition flex items-center gap-1.5 ${
+          showPanel
+            ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400'
+            : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+        }`}
+      >
+        {variant === 'grid' ? (
+          <span className="grid grid-cols-2 gap-0.5 w-4 h-4">
+            <span className="w-1.5 h-1.5 rounded-sm bg-current" />
+            <span className="w-1.5 h-1.5 rounded-sm bg-current" />
+            <span className="w-1.5 h-1.5 rounded-sm bg-current" />
+            <span className="w-1.5 h-1.5 rounded-sm bg-current" />
+          </span>
+        ) : (
+          <>
+            <span>🚀</span>
+            <span className="hidden sm:inline">Launcher</span>
+          </>
+        )}
+      </button>
+      {showPanel && (
+        <div className={`absolute left-0 mt-2 ${variant === 'grid' ? 'w-72' : 'w-56'} bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl py-2 z-50`}>
+          {visible.length === 0 ? (
+            <div className="px-4 py-3 text-sm text-gray-400">Loading...</div>
+          ) : (
+            content
+          )}
+        </div>
+      )}
+    </div>
+  );
+}