create-fedi-app 0.1.0

package/dist/templates/base/.env.example

@@ -0,0 +1,5 @@
+# App
+NEXT_PUBLIC_APP_NAME="{{PROJECT_NAME}}"
+
+# Add module-specific variables below
+# (populated by CLI based on selected modules)

package/dist/templates/base/app/demo/page.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export default function DemoPage() {
+  return (
+    <main
+      className="mx-auto min-h-dvh w-full max-w-[390px] px-4 pt-6 pb-20"
+      style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+    >
+      <Link
+        href="/"
+        className="mb-6 inline-block text-xs text-[var(--color-text-muted)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+      >
+        ← back
+      </Link>
+      <div className="space-y-4">
+        <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold leading-tight text-[var(--color-text)]">
+          Demos
+        </h1>
+        <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+          Module demos appear here after selection during project creation.
+        </p>
+      </div>
+    </main>
+  );
+}

package/dist/templates/base/app/globals.css

@@ -0,0 +1,95 @@
+@import "tailwindcss";
+@import "@tailwindcss/typography";
+
+@theme {
+  /* Fedi palette */
+  --color-bg: #0a0a0a;
+  --color-surface: #141414;
+  --color-surface-2: #1c1c1c;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-accent: #ff6b35;
+  --color-accent-dim: rgba(255, 107, 53, 0.15);
+  --color-text: #f0eee9;
+  --color-text-muted: #8a8880;
+  --color-text-subtle: #4a4845;
+  --color-success: #3d8b5f;
+  --color-destructive: #dc2626;
+
+  /* shadcn semantic aliases → Fedi tokens */
+  --color-background: var(--color-bg);
+  --color-foreground: var(--color-text);
+  --color-primary: var(--color-accent);
+  --color-primary-foreground: var(--color-text);
+  --color-secondary: var(--color-surface-2);
+  --color-secondary-foreground: var(--color-text);
+  --color-muted: var(--color-surface);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-input: var(--color-border);
+  --color-ring: var(--color-accent);
+  --color-card: var(--color-surface);
+  --color-card-foreground: var(--color-text);
+  --color-popover: var(--color-surface);
+  --color-popover-foreground: var(--color-text);
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius: 8px;
+}
+
+@theme inline {
+  --font-display: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
+  --font-body: var(--font-body, 'DM Sans', system-ui, sans-serif);
+  --font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-body);
+    font-size: 16px;
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    color: var(--color-text);
+    line-height: 1.25;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
+@keyframes fedi-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@utility animate-fedi-spin {
+  animation: fedi-spin 0.75s linear infinite;
+}

package/dist/templates/base/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next';
+import { Bricolage_Grotesque, DM_Sans, JetBrains_Mono } from 'next/font/google';
+import { Providers } from '../components/providers';
+import { FediDevToolbar } from '../components/FediDevToolbar/FediDevToolbar';
+import './globals.css';
+
+const display = Bricolage_Grotesque({
+  subsets: ['latin'],
+  variable: '--font-display',
+  display: 'swap',
+});
+const body = DM_Sans({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+});
+const mono = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'A Fedi Mini App',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${display.variable} ${body.variable} ${mono.variable}`}>
+      <body className={`${body.className} antialiased`}>
+        <Providers>
+          {children}
+          {process.env.NODE_ENV === 'development' && <FediDevToolbar />}
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/dist/templates/base/app/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import Link from 'next/link';
+import { useWebLN } from '../lib/webln';
+import { useNostr } from '../lib/nostr';
+import { cn } from '../lib/utils';
+
+function ConnectionStatus() {
+  const { provider: weblnProvider, isLoading: weblnLoading } = useWebLN();
+  const { provider: nostrProvider, isLoading: nostrLoading } = useNostr();
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <StatusPill label="WebLN" active={!!weblnProvider} loading={weblnLoading} />
+      <StatusPill label="Nostr" active={!!nostrProvider} loading={nostrLoading} />
+    </div>
+  );
+}
+
+function StatusPill({
+  label,
+  active,
+  loading,
+}: {
+  label: string;
+  active: boolean;
+  loading: boolean;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs font-mono',
+        loading
+          ? 'bg-[var(--color-surface-2)] text-[var(--color-text-subtle)]'
+          : active
+            ? 'bg-[var(--color-accent-dim)] text-[var(--color-accent)]'
+            : 'bg-[var(--color-surface-2)] text-[var(--color-text-subtle)]',
+      )}
+    >
+      <span
+        className={cn(
+          'size-1.5 rounded-full',
+          loading
+            ? 'bg-current opacity-40'
+            : active
+              ? 'bg-[var(--color-accent)]'
+              : 'bg-[var(--color-text-subtle)]',
+        )}
+      />
+      {label}
+    </span>
+  );
+}
+
+export default function HomePage() {
+  return (
+    <main
+      className="mx-auto min-h-dvh w-full max-w-[390px] px-4 pt-6 pb-20"
+      style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+    >
+      <div className="flex flex-col gap-6">
+        <div className="space-y-2">
+          <h1 className="font-[family-name:var(--font-display)] text-3xl font-bold leading-tight text-[var(--color-text)]">
+            {{PROJECT_NAME}}
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            Your mini app is running. Explore the demo pages to see WebLN payments and Nostr
+            identity in action.
+          </p>
+        </div>
+
+        <ConnectionStatus />
+
+        <Link
+          href="/demo"
+          className="inline-flex h-10 items-center justify-center rounded-md bg-[var(--color-accent)] px-5 text-sm font-semibold text-[var(--color-text)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-90 active:opacity-80"
+        >
+          Explore demos →
+        </Link>
+      </div>
+    </main>
+  );
+}

package/dist/templates/base/components/FediDevToolbar/FediDevToolbar.tsx

@@ -0,0 +1,170 @@
+'use client';
+import { useContext, useState } from 'react';
+import { FediDevContext } from '../providers';
+
+export function FediDevToolbar() {
+  const [expanded, setExpanded] = useState(false);
+  const dev = useContext(FediDevContext);
+
+  if (!dev) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        zIndex: 9999,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: '8px',
+      }}
+    >
+      {expanded && (
+        <div
+          style={{
+            background: 'var(--color-surface)',
+            border: '1px solid var(--color-border)',
+            borderRadius: 'var(--radius-lg)',
+            padding: '12px',
+            minWidth: '200px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+          }}
+        >
+          <Toggle
+            label="Mock WebLN"
+            value={dev.mockWebLNEnabled}
+            onChange={dev.setMockWebLNEnabled}
+          />
+          <Toggle
+            label="Mock Nostr"
+            value={dev.mockNostrEnabled}
+            onChange={dev.setMockNostrEnabled}
+          />
+          <button
+            onClick={() => dev.setPaymentShouldFail(!dev.paymentShouldFail)}
+            style={{
+              background: dev.paymentShouldFail ? 'var(--color-accent)' : 'var(--color-surface-2)',
+              color: dev.paymentShouldFail ? 'var(--color-primary-foreground)' : 'var(--color-text-muted)',
+              border: '1px solid var(--color-border)',
+              borderRadius: 'var(--radius-sm)',
+              padding: '4px 8px',
+              fontSize: '11px',
+              fontFamily: 'var(--font-mono)',
+              cursor: 'pointer',
+              textAlign: 'left',
+            }}
+          >
+            {dev.paymentShouldFail ? '⚡ fail: ON' : '⚡ fail: OFF'}
+          </button>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            <label style={{ fontSize: '10px', color: 'var(--color-text-subtle)', fontFamily: 'var(--font-mono)' }}>
+              mock npub
+            </label>
+            <input
+              type="text"
+              placeholder="npub1..."
+              value={dev.mockNpub}
+              onChange={(e) => dev.setMockNpub(e.target.value)}
+              style={{
+                background: 'var(--color-surface-2)',
+                border: '1px solid var(--color-border)',
+                borderRadius: 'var(--radius-sm)',
+                padding: '4px 6px',
+                fontSize: '11px',
+                fontFamily: 'var(--font-mono)',
+                color: 'var(--color-text)',
+                width: '100%',
+                outline: 'none',
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        title="Fedi Dev"
+        style={{
+          background: expanded ? 'var(--color-accent)' : 'var(--color-surface)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-md)',
+          padding: '6px 10px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+      >
+        <span style={{ fontSize: '14px' }}>⚙</span>
+        <span
+          style={{
+            fontSize: '10px',
+            fontFamily: 'var(--font-mono)',
+            color: expanded ? 'var(--color-primary-foreground)' : 'var(--color-text-muted)',
+            letterSpacing: '0.05em',
+          }}
+        >
+          Fedi Dev
+        </span>
+      </button>
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: '8px',
+      }}
+    >
+      <span style={{ fontSize: '11px', fontFamily: 'var(--font-mono)', color: 'var(--color-text-muted)' }}>
+        {label}
+      </span>
+      <button
+        onClick={() => onChange(!value)}
+        style={{
+          background: value ? 'var(--color-accent)' : 'var(--color-surface-2)',
+          border: '1px solid var(--color-border)',
+          borderRadius: '999px',
+          width: '32px',
+          height: '18px',
+          cursor: 'pointer',
+          position: 'relative',
+          transition: 'background 0.15s',
+          flexShrink: 0,
+        }}
+        aria-checked={value}
+        role="switch"
+      >
+        <span
+          style={{
+            position: 'absolute',
+            top: '2px',
+            left: value ? '14px' : '2px',
+            width: '12px',
+            height: '12px',
+            background: 'var(--color-text)',
+            borderRadius: '50%',
+            transition: 'left 0.15s',
+          }}
+        />
+      </button>
+    </div>
+  );
+}

package/dist/templates/base/components/providers.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';
+import { WebLNProvider, MockWebLNProvider } from '../lib/webln';
+import { NostrProvider, MockNostrProvider } from '../lib/nostr';
+
+interface FediDevState {
+  mockWebLNEnabled: boolean;
+  setMockWebLNEnabled: (v: boolean) => void;
+  mockNostrEnabled: boolean;
+  setMockNostrEnabled: (v: boolean) => void;
+  paymentShouldFail: boolean;
+  setPaymentShouldFail: (v: boolean) => void;
+  mockNpub: string;
+  setMockNpub: (v: string) => void;
+}
+
+export const FediDevContext = createContext<FediDevState | null>(null);
+
+export function useFediDev(): FediDevState {
+  const ctx = useContext(FediDevContext);
+  if (!ctx) throw new Error('useFediDev must be used within <Providers>');
+  return ctx;
+}
+
+export function Providers({ children }: { children: ReactNode }) {
+  const isDev = process.env.NODE_ENV === 'development';
+
+  const [mockWebLNEnabled, setMockWebLNEnabled] = useState(true);
+  const [mockNostrEnabled, setMockNostrEnabled] = useState(true);
+  const [paymentShouldFail, setPaymentShouldFail] = useState(false);
+  const [mockNpub, setMockNpub] = useState('');
+
+  const mockWebLN = useMemo(() => {
+    if (!isDev || !mockWebLNEnabled) return undefined;
+    return new MockWebLNProvider({ shouldFail: paymentShouldFail });
+  }, [isDev, mockWebLNEnabled, paymentShouldFail]);
+
+  const mockNostr = useMemo(() => {
+    if (!isDev || !mockNostrEnabled) return undefined;
+    const provider = new MockNostrProvider();
+    if (mockNpub) {
+      provider.getPublicKey = async () => mockNpub;
+    }
+    return provider;
+  }, [isDev, mockNostrEnabled, mockNpub]);
+
+  const devState: FediDevState = {
+    mockWebLNEnabled, setMockWebLNEnabled,
+    mockNostrEnabled, setMockNostrEnabled,
+    paymentShouldFail, setPaymentShouldFail,
+    mockNpub, setMockNpub,
+  };
+
+  return (
+    <FediDevContext.Provider value={devState}>
+      <WebLNProvider mockProvider={mockWebLN}>
+        <NostrProvider mockProvider={mockNostr}>
+          {children}
+        </NostrProvider>
+      </WebLNProvider>
+    </FediDevContext.Provider>
+  );
+}

package/dist/templates/base/env.ts

@@ -0,0 +1,10 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+export const env = createEnv({
+  server: { NODE_ENV: z.enum(['development', 'production', 'test']) },
+  client: { NEXT_PUBLIC_APP_NAME: z.string().default('My Fedi App') },
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME,
+  },
+});

package/dist/templates/base/hooks/useFediInternal.ts

@@ -0,0 +1,41 @@
+'use client';
+import { useEffect, useState } from 'react';
+import type { FediInternal } from '../lib/fedi-types';
+
+type V2 = Extract<FediInternal, { version: 2 }>;
+
+interface FediInternalHook {
+  isAvailable: boolean;
+  version: 0 | 1 | 2 | null;
+  getInstalledMiniApps: V2['getInstalledMiniApps'] | null;
+  installMiniApp: V2['installMiniApp'] | null;
+}
+
+const NULL_STATE: FediInternalHook = {
+  isAvailable: false,
+  version: null,
+  getInstalledMiniApps: null,
+  installMiniApp: null,
+};
+
+export function useFediInternal(): FediInternalHook {
+  const [state, setState] = useState<FediInternalHook>(NULL_STATE);
+
+  useEffect(() => {
+    const fi = window.fediInternal;
+    if (!fi) return;
+
+    if (fi.version === 2) {
+      setState({
+        isAvailable: true,
+        version: 2,
+        getInstalledMiniApps: fi.getInstalledMiniApps.bind(fi),
+        installMiniApp: fi.installMiniApp.bind(fi),
+      });
+    } else {
+      setState({ isAvailable: true, version: fi.version, getInstalledMiniApps: null, installMiniApp: null });
+    }
+  }, []);
+
+  return state;
+}

package/dist/templates/base/lib/fedi-types.ts

@@ -0,0 +1,96 @@
+// WebLN types
+export interface RequestInvoiceArgs {
+  amount?: string | number;
+  defaultAmount?: string | number;
+  minimumAmount?: string | number;
+  maximumAmount?: string | number;
+  defaultMemo?: string;
+}
+
+export interface RequestInvoiceResponse {
+  paymentRequest: string;
+}
+
+export interface SendPaymentResponse {
+  preimage: string;
+}
+
+export interface KeysendArgs {
+  destination: string;
+  amount: string | number;
+  customRecords?: Record<string, string>;
+}
+
+export interface SignMessageResponse {
+  message: string;
+  signature: string;
+}
+
+export interface GetInfoResponse {
+  node: {
+    alias: string;
+    pubkey: string;
+    color: string;
+  };
+  methods: string[];
+}
+
+export interface WebLNProvider {
+  enable(): Promise<void>;
+  getInfo(): Promise<GetInfoResponse>;
+  sendPayment(paymentRequest: string): Promise<SendPaymentResponse>;
+  makeInvoice(args: RequestInvoiceArgs | string | number): Promise<RequestInvoiceResponse>;
+  signMessage(message: string): Promise<SignMessageResponse>;
+  verifyMessage(signature: string, message: string): Promise<void>;
+  sendKeysend(args: KeysendArgs): Promise<SendPaymentResponse>;
+}
+
+// Nostr types
+export interface NostrEvent {
+  id: string;
+  pubkey: string;
+  created_at: number;
+  kind: number;
+  tags: string[][];
+  content: string;
+  sig: string;
+}
+
+export type UnsignedNostrEvent = Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>;
+
+export interface Nip04 {
+  encrypt(pubkey: string, plaintext: string): Promise<string>;
+  decrypt(pubkey: string, ciphertext: string): Promise<string>;
+}
+
+export interface NostrProvider {
+  getPublicKey(): Promise<string>;
+  signEvent(event: UnsignedNostrEvent): Promise<NostrEvent>;
+  getRelays(): Promise<Record<string, { read: boolean; write: boolean }>>;
+  nip04: Nip04;
+}
+
+// Fedi internal types
+type FediInternalV0 = { version: 0 };
+type FediInternalV1 = { version: 1 };
+type FediInternalV2 = {
+  version: 2;
+  getInstalledMiniApps(): Promise<Array<{ url: string }>>;
+  installMiniApp(miniApp: {
+    id: string;
+    title: string;
+    url: string;
+    imageUrl?: string | null;
+    description?: string;
+  }): Promise<void>;
+};
+
+export type FediInternal = FediInternalV0 | FediInternalV1 | FediInternalV2;
+
+declare global {
+  interface Window {
+    webln?: WebLNProvider;
+    nostr?: NostrProvider;
+    fediInternal?: FediInternal;
+  }
+}

package/dist/templates/base/lib/fedi.ts

@@ -0,0 +1,18 @@
+export function isInFedi(): boolean {
+  return typeof window !== 'undefined' && typeof window.webln !== 'undefined';
+}
+
+export function getFediInternalVersion(): 0 | 1 | 2 | null {
+  if (typeof window === 'undefined' || !window.fediInternal) return null;
+  return window.fediInternal.version as 0 | 1 | 2;
+}
+
+export function formatSats(sats: number): string {
+  if (sats >= 100_000) return `${(sats / 100_000_000).toFixed(6)} BTC`;
+  return `${sats.toLocaleString()} sats`;
+}
+
+export function shortenNpub(npub: string): string {
+  if (npub.length < 16) return npub;
+  return `${npub.slice(0, 8)}...${npub.slice(-4)}`;
+}