@undefineds.co/xpod 0.4.19 → 0.4.20

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/IdpViews.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatCopy, resolvePodSignInCopy } from './copy.js';
+import { IdpChrome } from './IdpChrome.js';
+import { ActionButton, CheckboxRow, ScreenLayout, Disclosure, Field, fieldClass, outlineButtonClass, primaryButtonClass, textButtonClass, } from './parts.js';
+import { Input } from '../input.js';
+import { cn } from '../utils.js';
+function resolveIdpCopy({ locale, copy }) {
+    return resolvePodSignInCopy(locale, copy);
+}
+export function IdpFrameHeader({ serviceName = 'Xpod', serviceHost, serviceIcon, locale, copy }) {
+    return (_jsx(IdpChrome, { serviceName: serviceName, serviceHost: serviceHost, icon: serviceIcon, locale: locale, serviceLabel: copy?.serviceLabel }));
+}
+const inputClass = fieldClass;
+/** A 36px text action: a real link when the host navigates to a page, otherwise a button. */
+function TextAction({ href, onClick, disabled, className, children }) {
+    const classes = cn(textButtonClass, 'inline-flex items-center text-primary hover:underline', className);
+    return href && !disabled
+        ? _jsx("a", { href: href, className: classes, children: children })
+        : _jsx("button", { type: "button", className: classes, disabled: disabled, onClick: onClick, children: children });
+}
+/** B1: sign in to the sign-in service. Email and password only ever appear here. */
+export function IdpSignInView(props) {
+    const { serviceName, returnToAppName, error, fieldErrors, pending = false, remember, defaultEmail = '', defaultPassword = '', onFieldChange, onRememberChange, onSubmit, onForgot, forgotHref, onRegister, registerHref, onUseOtherSolid, } = props;
+    const copy = resolveIdpCopy(props);
+    const [email, setEmail] = useState(defaultEmail);
+    const [password, setPassword] = useState(defaultPassword);
+    const submit = (event) => {
+        event.preventDefault();
+        if (!pending)
+            onSubmit({ email: email.trim(), password });
+    };
+    return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": "idp-sign-in", chrome: _jsx(IdpFrameHeader, { ...props }), onSubmit: submit, actions: (_jsxs(_Fragment, { children: [error ? _jsx("p", { role: "alert", className: "text-[13px] text-destructive", children: error }) : null, _jsx(ActionButton, { type: "submit", className: primaryButtonClass, busy: pending, children: copy.signIn }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [onRegister || registerHref ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: copy.noAccount }), _jsx(TextAction, { href: registerHref, disabled: pending, onClick: onRegister, children: copy.registerLink })] })) : _jsx("span", {}), onUseOtherSolid ? (_jsx("button", { type: "button", className: cn(textButtonClass, 'text-primary hover:underline'), disabled: pending, onClick: onUseOtherSolid, children: copy.useOtherSolid })) : null] })] })), children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: formatCopy(copy.signInTitle, { service: serviceName }) }), returnToAppName ? (_jsx("p", { className: "text-sm text-muted-foreground", children: formatCopy(copy.returnToApp, { app: returnToAppName }) })) : null] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { label: copy.email, error: fieldErrors?.email, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "email", type: "email", autoComplete: "username", autoCapitalize: "none", spellCheck: false, className: inputClass, value: email, disabled: pending, onChange: (event) => {
+                                setEmail(event.target.value);
+                                onFieldChange?.('email', event.target.value);
+                            } })) }), _jsx(Field, { label: copy.password, error: fieldErrors?.password, labelAside: onForgot || forgotHref ? (_jsx(TextAction, { className: "h-7 text-[13px]", href: forgotHref, onClick: onForgot, children: copy.forgotPassword })) : undefined, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "password", type: "password", autoComplete: "current-password", className: inputClass, value: password, disabled: pending, onChange: (event) => {
+                                setPassword(event.target.value);
+                                onFieldChange?.('password', event.target.value);
+                            } })) }), onRememberChange ? (_jsx(CheckboxRow, { checked: remember, onChange: onRememberChange, label: copy.rememberDevice, disabled: pending })) : null] })] }));
+}
+/** B2: register. The explicit form is what makes creating a WebID and Pod not implicit. */
+export function IdpRegisterView(props) {
+    const { serviceName, returnToAppName, usernamePreview, requireUsername, fieldErrors, error, pending = false, defaultEmail = '', defaultPassword = '', defaultUsername = '', onFieldChange, onSubmit, onSignIn, } = props;
+    const copy = resolveIdpCopy(props);
+    const [username, setUsername] = useState(defaultUsername);
+    const [email, setEmail] = useState(defaultEmail);
+    const [password, setPassword] = useState(defaultPassword);
+    const submit = (event) => {
+        event.preventDefault();
+        if (pending)
+            return;
+        onSubmit({
+            ...(requireUsername ? { username: username.trim() } : {}),
+            email: email.trim(),
+            password,
+        });
+    };
+    return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": "idp-register", chrome: _jsx(IdpFrameHeader, { ...props }), onSubmit: submit, actions: (_jsxs(_Fragment, { children: [error ? _jsx("p", { role: "alert", className: "text-[13px] text-destructive", children: error }) : null, _jsx(ActionButton, { type: "submit", className: primaryButtonClass, busy: pending, children: copy.registerSubmit }), onSignIn ? (_jsx("button", { type: "button", className: cn(textButtonClass, 'self-center text-primary hover:underline'), disabled: pending, onClick: onSignIn, children: copy.haveAccount })) : null] })), children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: formatCopy(copy.registerTitle, { service: serviceName }) }), returnToAppName ? (_jsx("p", { className: "text-sm text-muted-foreground", children: formatCopy(copy.returnToApp, { app: returnToAppName }) })) : null] }), _jsxs("div", { className: "flex flex-col gap-4", children: [requireUsername ? (_jsx(Field, { label: copy.username, error: fieldErrors?.username, hint: usernamePreview ? _jsx("span", { role: "status", className: "font-mono text-xs", children: usernamePreview }) : undefined, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "username", type: "text", autoComplete: "username", autoCapitalize: "none", spellCheck: false, className: inputClass, value: username, disabled: pending, onChange: (event) => {
+                                setUsername(event.target.value);
+                                onFieldChange?.('username', event.target.value);
+                            } })) })) : null, _jsx(Field, { label: copy.email, error: fieldErrors?.email, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "email", type: "email", autoComplete: "email", autoCapitalize: "none", spellCheck: false, className: inputClass, value: email, disabled: pending, onChange: (event) => {
+                                setEmail(event.target.value);
+                                onFieldChange?.('email', event.target.value);
+                            } })) }), _jsx(Field, { label: copy.password, error: fieldErrors?.password, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "password", type: "password", autoComplete: "new-password", className: inputClass, value: password, disabled: pending, onChange: (event) => {
+                                setPassword(event.target.value);
+                                onFieldChange?.('password', event.target.value);
+                            } })) }), _jsx(Disclosure, { summary: copy.podElsewhereSummary, children: copy.podElsewhereBody })] })] }));
+}
+/** B3: the account has no WebID. Create one here, or leave for the account page to store it elsewhere. */
+export function IdpNoWebIdView(props) {
+    const { appName, defaultName, nameHint, error, pending = false, onNameChange, onCreate, onChooseOtherLocation } = props;
+    const copy = resolveIdpCopy(props);
+    const [name, setName] = useState(defaultName ?? '');
+    const hasNameField = defaultName !== undefined;
+    const trimmed = name.trim();
+    const canSubmit = !hasNameField || (Boolean(trimmed) && nameHint?.tone !== 'error');
+    const submit = (event) => {
+        event.preventDefault();
+        if (!pending && canSubmit)
+            onCreate(trimmed);
+    };
+    return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": "idp-no-webid", chrome: _jsx(IdpFrameHeader, { ...props }), onSubmit: submit, actions: (_jsxs(_Fragment, { children: [error ? _jsx("p", { role: "alert", className: "text-[13px] text-destructive", children: error }) : null, _jsx(ActionButton, { type: "submit", className: primaryButtonClass, busy: pending, disabled: !canSubmit, children: copy.createAndContinue }), onChooseOtherLocation ? (_jsx(ActionButton, { type: "button", variant: "outline", className: outlineButtonClass, disabled: pending, onClick: onChooseOtherLocation, children: copy.chooseOtherLocation })) : null] })), children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: copy.noWebIdTitle }), _jsx("p", { className: "text-sm leading-[22px] text-muted-foreground", children: formatCopy(copy.noWebIdLead, { app: appName }) })] }), _jsx("div", { className: "flex flex-col gap-4", children: hasNameField ? (_jsx(Field, { label: copy.webIdName, error: nameHint?.tone === 'error' ? nameHint.text : undefined, hint: nameHint && nameHint.tone !== 'error'
+                        ? _jsx("span", { role: "status", children: nameHint.text })
+                        : _jsx("span", { children: copy.noWebIdLocation }), children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "webIdName", type: "text", autoComplete: "off", autoCapitalize: "none", spellCheck: false, className: inputClass, value: name, disabled: pending, onChange: (event) => {
+                            setName(event.target.value);
+                            onNameChange?.(event.target.value);
+                        } })) })) : null })] }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/NetworkPanel.d.ts

@@ -0,0 +1,46 @@
+import { type PodSignInCopy, type PodSignInLocale } from './copy';
+export type ProbeState = 'idle' | 'checking' | 'ok' | 'failed';
+/** This computer, the local network, and other networks (the public entry). */
+export interface NetworkChecks {
+    local: ProbeState;
+    lan: ProbeState;
+    wan: ProbeState;
+}
+export interface TunnelFieldDescriptor {
+    key: string;
+    label: string;
+    /** Rendered as a password input. */
+    secret?: boolean;
+}
+/**
+ * One tunnel option, generated from the provider catalog (`TunnelProviderCatalog`:
+ * `id`, `label`, `parameterFields`, plus the credential field). The panel renders
+ * fields from this description and never branches on the provider.
+ */
+export interface TunnelOption {
+    id: string;
+    label: string;
+    parameterFields: readonly TunnelFieldDescriptor[];
+    credentialField?: TunnelFieldDescriptor;
+}
+export interface NetworkPanelProps {
+    checks: NetworkChecks;
+    tunnels: readonly TunnelOption[];
+    selectedTunnelId?: string;
+    /** Field values keyed by `TunnelFieldDescriptor.key`. */
+    fieldValues: Record<string, string>;
+    /** Label of the tunnel that makes the public entry reachable, once it does. */
+    activeTunnelLabel?: string;
+    busy?: boolean;
+    onSelectTunnel(id: string): void;
+    onFieldChange(key: string, value: string): void;
+    /** "Enable and recheck". */
+    onEnable(): void;
+    onRecheck(): void;
+    /** When given (inside "add device"), the actions become "Skip, set up later" / "Enable and check". */
+    onSkip?(): void;
+    locale?: PodSignInLocale;
+    copy?: Partial<PodSignInCopy>;
+}
+/** Network access of one device: three checks, and four tunnels when the public entry fails. */
+export declare function NetworkPanel({ checks, tunnels, selectedTunnelId, fieldValues, activeTunnelLabel, busy, onSelectTunnel, onFieldChange, onEnable, onRecheck, onSkip, locale, copy: overrides, }: NetworkPanelProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/NetworkPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Minus, X } from 'lucide-react';
+import { useId } from 'react';
+import { cn } from '../utils.js';
+import { formatCopy, resolvePodSignInCopy } from './copy.js';
+import { ActionButton, Field, Spinner, fieldClass, outlineButtonClass, primaryButtonClass } from './parts.js';
+function probeLabel(state, copy) {
+    switch (state) {
+        case 'idle': return copy.probeIdle;
+        case 'checking': return copy.probeChecking;
+        case 'ok': return copy.probeOk;
+        case 'failed': return copy.probeFailed;
+    }
+}
+function ProbeIcon({ state }) {
+    if (state === 'checking')
+        return _jsx(Spinner, {});
+    if (state === 'ok')
+        return _jsx(Check, { "aria-hidden": "true", className: "h-4 w-4 text-success" });
+    if (state === 'failed')
+        return _jsx(X, { "aria-hidden": "true", className: "h-4 w-4 text-warning" });
+    return _jsx(Minus, { "aria-hidden": "true", className: "h-4 w-4 text-muted-foreground" });
+}
+/** Network access of one device: three checks, and four tunnels when the public entry fails. */
+export function NetworkPanel({ checks, tunnels, selectedTunnelId, fieldValues, activeTunnelLabel, busy = false, onSelectTunnel, onFieldChange, onEnable, onRecheck, onSkip, locale, copy: overrides, }) {
+    const copy = resolvePodSignInCopy(locale, overrides);
+    const titleId = useId();
+    const tunnelLabelId = useId();
+    const selected = tunnels.find((tunnel) => tunnel.id === selectedTunnelId);
+    const fields = selected ? [...selected.parameterFields, ...(selected.credentialField ? [selected.credentialField] : [])] : [];
+    const rows = [
+        ['local', copy.probeLocal],
+        ['lan', copy.probeLan],
+        ['wan', copy.probeWan],
+    ];
+    const checking = Object.values(checks).includes('checking');
+    const showTunnels = checks.wan === 'failed';
+    return (_jsxs("section", { "aria-labelledby": titleId, "data-pod-sign-in": "network-panel", className: "pod-sign-in flex flex-col gap-4 rounded-lg bg-muted p-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-semibold text-foreground", children: copy.networkTitle }), _jsx("ul", { className: "grid grid-cols-3 gap-2", "aria-busy": checking || undefined, children: rows.map(([key, label]) => (_jsxs("li", { "data-probe": key, "data-state": checks[key], className: "flex flex-col gap-1 rounded-lg border border-border bg-card p-2 text-[13px]", children: [_jsx("span", { className: "text-foreground", children: label }), _jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [_jsx(ProbeIcon, { state: checks[key] }), probeLabel(checks[key], copy)] })] }, key))) }), checks.wan === 'ok' && activeTunnelLabel ? (_jsx("p", { role: "status", className: "text-[13px] text-success", children: formatCopy(copy.reachableVia, { tunnel: activeTunnelLabel }) })) : null, showTunnels ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { id: tunnelLabelId, className: "text-[13px] font-medium text-foreground", children: copy.tunnelTitle }), _jsx("div", { role: "radiogroup", "aria-labelledby": tunnelLabelId, className: "grid grid-cols-2 gap-2", children: tunnels.map((tunnel) => {
+                            const isSelected = tunnel.id === selectedTunnelId;
+                            return (_jsxs("label", { className: cn('flex min-h-11 cursor-pointer items-center justify-center rounded-lg border px-2 text-center text-sm focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring', isSelected ? 'border-primary bg-accent text-foreground' : 'border-border bg-card text-foreground'), children: [_jsx("input", { type: "radio", name: "tunnel-provider", className: "sr-only", value: tunnel.id, checked: isSelected, disabled: busy, onChange: () => onSelectTunnel(tunnel.id) }), tunnel.label] }, tunnel.id));
+                        }) }), fields.map((field) => (_jsx(Field, { label: field.label, children: (fieldProps) => (_jsx("input", { ...fieldProps, name: field.key, type: field.secret ? 'password' : 'text', autoComplete: "off", spellCheck: false, className: fieldClass, value: fieldValues[field.key] ?? '', disabled: busy, onChange: (event) => onFieldChange(field.key, event.target.value) })) }, field.key)))] })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [showTunnels ? (_jsx(ActionButton, { className: primaryButtonClass, busy: busy, disabled: !selected, onClick: onEnable, children: onSkip ? copy.enableAndCheck : copy.enableAndRecheck })) : null, onSkip ? (_jsx(ActionButton, { variant: "outline", className: outlineButtonClass, disabled: busy, onClick: onSkip, children: copy.skipForNow })) : (_jsx(ActionButton, { variant: "outline", className: outlineButtonClass, disabled: busy || checking, onClick: onRecheck, children: copy.recheck }))] }), _jsx("p", { className: "text-[13px] text-muted-foreground", children: copy.networkFootnote })] }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/PodSignIn.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import { type PodSignInCopy, type PodSignInLocale } from './copy';
+import type { AppIdentity, StorageLocation } from './types';
+export interface RememberedIdentity {
+    displayName: string;
+    avatarUrl?: string;
+    /** Drives the avatar corner badge. */
+    storage?: StorageLocation;
+}
+export type PodSignInState = {
+    kind: 'restoring';
+    identity?: RememberedIdentity;
+} | {
+    kind: 'remembered';
+    identity: RememberedIdentity;
+    busy?: boolean;
+} | {
+    kind: 'expired';
+    identity: RememberedIdentity;
+    busy?: boolean;
+} | {
+    kind: 'choose-service';
+    customOpen?: boolean;
+    customError?: string;
+    busy?: boolean;
+};
+/** C group: one line above the primary action, plus a replaced primary label. */
+export interface PodSignInNotice {
+    /** neutral = grey text (e.g. "login cancelled"); warning = with an icon. */
+    tone: 'neutral' | 'warning';
+    text: string;
+    /** Replaces the primary button text, e.g. "Retry" or "Start Xpod and enter". */
+    primaryLabel?: string;
+    /** Only expandable in developer mode. */
+    developerDetail?: string;
+}
+export interface PodSignInProps {
+    app: AppIdentity;
+    state: PodSignInState;
+    notice?: PodSignInNotice;
+    locale?: PodSignInLocale;
+    copy?: Partial<PodSignInCopy>;
+    developerMode?: boolean;
+    /** Icon on the A3 primary button. Defaults to the Xpod mark; pass `null` for none. */
+    primaryIcon?: ReactNode;
+    capabilities?: {
+        customService?: boolean;
+        register?: boolean;
+    };
+    /** A1 enter / A2 sign in again / A3 sign in with Xpod / the action a notice relabelled. */
+    onPrimary(): void;
+    /** A1/A2 "use another account". */
+    onUseAnother?(): void;
+    onCustomService?(input: string): void;
+    onRegister?(): void;
+    onToggleCustom?(open: boolean): void;
+}
+/**
+ * Application-side sign-in body (A and C groups). One column: source mark,
+ * one h1, main content, actions. It renders no request, redirect or storage
+ * access; the host's controller maps its state to `state` and `notice`.
+ */
+export declare function PodSignIn({ app, state, notice, locale, copy: copyOverrides, developerMode, primaryIcon, capabilities, onPrimary, onUseAnother, onCustomService, onRegister, onToggleCustom, }: PodSignInProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/PodSignIn.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+import { useState } from 'react';
+import { Input } from '../input.js';
+import { formatCopy, resolvePodSignInCopy } from './copy.js';
+import { ActionButton, Disclosure, Field, PodAvatar, ScreenLayout, SourceMark, Spinner, outlineButtonClass, primaryButtonClass, textButtonClass, usePastDelay, } from './parts.js';
+import { XpodMark } from './XpodMark.js';
+import { cn } from '../utils.js';
+const RESTORE_REVEAL_DELAY_MS = 300;
+function NoticeLine({ notice, developerMode, copy, }) {
+    const [copied, setCopied] = useState(false);
+    const line = (_jsxs("span", { className: "inline-flex items-start gap-1.5", children: [notice.tone === 'warning' ? _jsx(TriangleAlert, { "aria-hidden": "true", className: "mt-0.5 h-3.5 w-3.5 shrink-0" }) : null, _jsx("span", { children: notice.text })] }));
+    const tone = notice.tone === 'warning' ? 'text-warning' : 'text-muted-foreground';
+    const role = notice.tone === 'warning' ? 'alert' : 'status';
+    const detail = developerMode ? notice.developerDetail : undefined;
+    return (_jsx("div", { role: role, "data-pod-sign-in": "notice", "data-tone": notice.tone, className: cn('text-[13px] leading-5', tone), children: detail ? (_jsxs("details", { children: [_jsx("summary", { title: copy.noticeDetailsToggle, className: "cursor-pointer rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: line }), _jsxs("div", { className: "mt-1 rounded-lg bg-muted p-2 text-foreground", children: [_jsx("pre", { className: "whitespace-pre-wrap break-all font-mono text-xs", children: detail }), _jsx("button", { type: "button", className: "mt-1 h-9 rounded-lg px-2 text-[13px] font-medium text-primary hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring", onClick: () => {
+                                void navigator.clipboard?.writeText(detail).then(() => setCopied(true), () => undefined);
+                            }, children: copied ? copy.noticeCopied : copy.noticeCopy })] })] })) : line }));
+}
+function CustomServiceForm({ copy, error, busy, onSubmit, }) {
+    const [value, setValue] = useState('');
+    const submit = (event) => {
+        event.preventDefault();
+        const input = value.trim();
+        if (input && onSubmit)
+            onSubmit(input);
+    };
+    return (_jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3", "data-pod-sign-in": "custom-service", children: [_jsx(Field, { label: copy.customLabel, error: error, children: (fieldProps) => (_jsx(Input, { ...fieldProps, name: "service", type: "text", inputMode: "url", autoComplete: "url", autoCapitalize: "none", spellCheck: false, placeholder: copy.customPlaceholder, value: value, disabled: busy, className: "h-11 rounded-lg bg-card text-sm", onChange: (event) => setValue(event.target.value) })) }), _jsx(ActionButton, { type: "submit", variant: "outline", className: outlineButtonClass, busy: busy, disabled: !value.trim(), children: copy.customSubmit })] }));
+}
+/**
+ * Application-side sign-in body (A and C groups). One column: source mark,
+ * one h1, main content, actions. It renders no request, redirect or storage
+ * access; the host's controller maps its state to `state` and `notice`.
+ */
+export function PodSignIn({ app, state, notice, locale = 'zh-CN', copy: copyOverrides, developerMode = false, primaryIcon, capabilities, onPrimary, onUseAnother, onCustomService, onRegister, onToggleCustom, }) {
+    const copy = resolvePodSignInCopy(locale, copyOverrides);
+    const pastRestoreDelay = usePastDelay(RESTORE_REVEAL_DELAY_MS);
+    const [localCustomOpen, setLocalCustomOpen] = useState(false);
+    const source = _jsx(SourceMark, { icon: app.icon, name: app.name });
+    if (state.kind === 'restoring') {
+        const identity = pastRestoreDelay ? state.identity : undefined;
+        return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": "restoring", children: [source, _jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-center", children: [identity ? (_jsxs(_Fragment, { children: [_jsx(PodAvatar, { name: identity.displayName, avatarUrl: identity.avatarUrl, storage: identity.storage }), _jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: identity.displayName })] })) : (_jsx("h1", { className: "sr-only", children: app.name })), _jsx("div", { role: "status", "aria-live": "polite", children: pastRestoreDelay ? (_jsxs("p", { className: "flex items-center gap-2 text-[13px] text-muted-foreground", children: [_jsx(Spinner, {}), copy.restoring] })) : null })] })] }));
+    }
+    const busy = state.busy === true;
+    const primaryLabel = notice?.primaryLabel
+        ?? (state.kind === 'remembered'
+            ? formatCopy(copy.enterApp, { app: app.name })
+            : state.kind === 'expired'
+                ? copy.reauthenticate
+                : copy.useXpod);
+    const noticeNode = notice ? _jsx(NoticeLine, { notice: notice, developerMode: developerMode, copy: copy }) : null;
+    if (state.kind === 'remembered' || state.kind === 'expired') {
+        return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": state.kind, actions: (_jsxs(_Fragment, { children: [noticeNode, _jsx(ActionButton, { className: primaryButtonClass, busy: busy, "data-pod-sign-in-primary": "true", onClick: onPrimary, children: primaryLabel }), onUseAnother ? (_jsx(ActionButton, { variant: "ghost", className: cn(textButtonClass, 'w-full'), disabled: busy, onClick: onUseAnother, children: copy.useAnother })) : null] })), children: [source, _jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 text-center", children: [_jsx(PodAvatar, { name: state.identity.displayName, avatarUrl: state.identity.avatarUrl, storage: state.identity.storage }), _jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: state.identity.displayName }), state.kind === 'expired' ? _jsx("p", { className: "text-sm text-muted-foreground", children: copy.expiredLine }) : null] })] }));
+    }
+    // choose-service (A3)
+    const allowCustom = capabilities?.customService !== false;
+    const allowRegister = capabilities?.register !== false && Boolean(onRegister);
+    const customOpen = allowCustom && (state.customOpen ?? localCustomOpen);
+    const toggleCustom = () => {
+        const next = !customOpen;
+        setLocalCustomOpen(next);
+        onToggleCustom?.(next);
+    };
+    return (_jsxs(ScreenLayout, { "data-pod-sign-in-state": "choose-service", actions: (_jsxs(_Fragment, { children: [noticeNode, _jsxs(ActionButton, { className: primaryButtonClass, busy: busy, "data-pod-sign-in-primary": "true", onClick: onPrimary, children: [!notice?.primaryLabel && primaryIcon !== null ? _jsx("span", { "aria-hidden": "true", className: "mr-2 flex", children: primaryIcon ?? _jsx(XpodMark, { size: 20 }) }) : null, primaryLabel] }), allowCustom ? (_jsxs(_Fragment, { children: [_jsx(ActionButton, { variant: "outline", className: outlineButtonClass, disabled: busy, "aria-expanded": customOpen, onClick: toggleCustom, children: copy.useOtherSolid }), customOpen ? (_jsx(CustomServiceForm, { copy: copy, error: state.customError, busy: busy, onSubmit: onCustomService })) : null] })) : null, allowRegister ? (_jsxs("p", { className: "text-center text-[13px] text-muted-foreground", children: [copy.noAccount, _jsx("button", { type: "button", className: "ml-1 h-9 rounded px-1 font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring", disabled: busy, onClick: onRegister, children: copy.register })] })) : null] })), children: [source, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h1", { className: "text-[17px] font-semibold text-foreground", children: copy.chooseTitle }), _jsx("p", { className: "text-sm leading-[22px] text-muted-foreground", children: copy.chooseLead }), _jsxs("div", { className: "flex flex-col", children: [_jsx(Disclosure, { summary: copy.whatIsWebId, children: copy.whatIsWebIdBody }), _jsx(Disclosure, { summary: copy.whatIsPod, children: copy.whatIsPodBody })] })] })] }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/PodSignInFrame.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import type { SignInPresentation } from './types';
+export interface PodSignInFrameProps {
+    presentation: SignInPresentation;
+    ariaLabel: string;
+    /**
+     * `page` only: the left introduction column. The host supplies it (the
+     * application/service adapter), so the shared frame never hardcodes a
+     * service name.
+     */
+    appIntro?: ReactNode;
+    /** The 360px wide body. */
+    children: ReactNode;
+    /**
+     * `dialog` only. `true` (default) draws a modal layer over the document;
+     * `false` draws the same card inline, without modal semantics.
+     */
+    modal?: boolean;
+    /** Escape closes a modal dialog when the host provides this. */
+    onClose?: () => void;
+    /** With `onClose`, draws a close button in the corner of a modal dialog. */
+    closeLabel?: string;
+    /** `data-*` attributes placed on the frame element that carries the region / dialog role. */
+    dataAttributes?: Record<`data-${string}`, string | undefined>;
+}
+/**
+ * Outer frame of every sign-in surface. `window` fills the host window,
+ * `dialog` is a 400px layer, `page` is two columns. All three share the same
+ * 360px body, so a state looks the same wherever the host places it.
+ */
+export declare function PodSignInFrame({ presentation, ariaLabel, appIntro, children, modal, onClose, closeLabel, dataAttributes, }: PodSignInFrameProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/PodSignInFrame.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cn } from '../utils.js';
+const FOCUSABLE = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'summary',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+/** Marks the screen's single primary action so the first Tab can reach it. */
+const PRIMARY_SELECTOR = '[data-pod-sign-in-primary]';
+/**
+ * A candidate only counts if a user can actually reach it: hidden, disabled,
+ * unrendered and collapsed-detail content must be skipped, or `focus()` on it
+ * silently fails and the Tab index never advances (keyboard dead end).
+ */
+function isReachable(el) {
+    if (el.hidden || el.closest('[hidden]'))
+        return false;
+    if (el.matches(':disabled'))
+        return false;
+    const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+    if (style && (style.display === 'none' || style.visibility === 'hidden'))
+        return false;
+    for (let node = el.parentElement; node; node = node.parentElement) {
+        if (node.tagName !== 'DETAILS' || node.open)
+            continue;
+        const summary = Array.from(node.children).find((child) => child.tagName === 'SUMMARY');
+        if (!summary || !(summary === el || summary.contains(el)))
+            return false;
+    }
+    return true;
+}
+/**
+ * Focus lands on the dialog itself when it opens (one Tab reaches the primary
+ * action), Tab is kept inside, Escape closes, and focus returns to the opener.
+ */
+function useModalFocus(active, onClose) {
+    const ref = useRef(null);
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    useEffect(() => {
+        if (!active)
+            return undefined;
+        const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        ref.current?.focus();
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape' && onCloseRef.current) {
+                event.preventDefault();
+                onCloseRef.current();
+                return;
+            }
+            if (event.key !== 'Tab')
+                return;
+            const root = ref.current;
+            if (!root)
+                return;
+            const items = Array.from(root.querySelectorAll(FOCUSABLE)).filter(isReachable);
+            if (items.length === 0) {
+                event.preventDefault();
+                root.focus();
+                return;
+            }
+            const index = items.indexOf(document.activeElement);
+            // Spec §5.1: focus starts on the dialog itself, so the first forward Tab
+            // goes to the screen's primary action instead of whatever happens to be
+            // first in DOM order (the close button, or a disclosure summary).
+            if (!event.shiftKey && document.activeElement === root) {
+                const primary = items.find((item) => item.matches(PRIMARY_SELECTOR));
+                if (primary) {
+                    event.preventDefault();
+                    primary.focus();
+                    return;
+                }
+            }
+            const next = event.shiftKey
+                ? (index <= 0 ? items.length - 1 : index - 1)
+                : (index === items.length - 1 ? 0 : index + 1);
+            event.preventDefault();
+            items[next]?.focus();
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+            opener?.focus();
+        };
+    }, [active]);
+    return ref;
+}
+const bodyClass = 'flex min-h-0 w-full max-w-[360px] flex-1 flex-col';
+/**
+ * Outer frame of every sign-in surface. `window` fills the host window,
+ * `dialog` is a 400px layer, `page` is two columns. All three share the same
+ * 360px body, so a state looks the same wherever the host places it.
+ */
+export function PodSignInFrame({ presentation, ariaLabel, appIntro, children, modal = true, onClose, closeLabel, dataAttributes, }) {
+    const isModal = presentation === 'dialog' && modal;
+    const dialogRef = useModalFocus(isModal, onClose);
+    const intro = appIntro;
+    if (presentation === 'window') {
+        return (_jsx("div", { role: "region", "aria-label": ariaLabel, "data-pod-sign-in-frame": "window", ...dataAttributes, className: "pod-sign-in flex h-full min-h-[480px] w-full min-w-[320px] justify-center overflow-hidden bg-background text-foreground", children: _jsx("div", { className: bodyClass, children: children }) }));
+    }
+    if (presentation === 'page') {
+        return (_jsxs("div", { role: "region", "aria-label": ariaLabel, "data-pod-sign-in-frame": "page", ...dataAttributes, className: "pod-sign-in grid min-h-[100dvh] w-full bg-background text-foreground md:grid-cols-2", children: [intro ? (_jsx("aside", { "data-pod-sign-in": "intro", className: "hidden flex-col justify-center gap-6 bg-[hsl(var(--sunken))] px-12 py-10 md:flex", children: intro })) : null, _jsx("div", { className: cn('flex min-w-0 items-center justify-center px-4 py-8', intro ? '' : 'md:col-span-2'), children: _jsx("div", { className: bodyClass, children: children }) })] }));
+    }
+    const card = (_jsxs("div", { ref: dialogRef, role: isModal ? 'dialog' : 'region', "aria-modal": isModal ? true : undefined, "aria-label": ariaLabel, tabIndex: -1, "data-pod-sign-in-frame": "dialog", ...dataAttributes, className: cn('pod-sign-in relative flex max-h-[90dvh] w-[min(400px,calc(100vw-2rem))] flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-lg focus:outline-none motion-safe:animate-in motion-safe:fade-in-0'), children: [isModal && onClose && closeLabel ? (_jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-2 top-2 flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent", onClick: onClose, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })) : null, _jsx("div", { className: cn(bodyClass, 'mx-auto'), children: children })] }));
+    return isModal ? (_jsx("div", { className: "fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center bg-background/80 p-4", children: card })) : (_jsx("div", { className: "flex w-full items-center justify-center p-4", children: card }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/StorageBadge.d.ts

@@ -0,0 +1,8 @@
+import type { StorageLocationKind } from './types';
+export interface StorageBadgeProps {
+    kind: StorageLocationKind;
+    /** Announced by screen readers and shown on hover. */
+    label: string;
+}
+/** Avatar corner badge: neutral icon for where the data lives (cloud or edge). */
+export declare function StorageBadge({ kind, label }: StorageBadgeProps): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/StorageBadge.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Cloud, Laptop } from 'lucide-react';
+/** Avatar corner badge: neutral icon for where the data lives (cloud or edge). */
+export function StorageBadge({ kind, label }) {
+    const Icon = kind === 'cloud' ? Cloud : Laptop;
+    return (_jsx("span", { role: "img", "aria-label": label, title: label, "data-storage-kind": kind, className: "flex h-[18px] w-[18px] items-center justify-center rounded-full border border-background bg-card text-foreground", children: _jsx(Icon, { "aria-hidden": "true", className: "h-3 w-3" }) }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/XpodMark.d.ts

@@ -0,0 +1,8 @@
+import type { SVGProps } from 'react';
+/**
+ * Xpod product mark (brand asset `xpod-app.svg`). It is the default icon of the
+ * sign-in service side; application icons always come from the host.
+ */
+export declare function XpodMark({ size, ...props }: {
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, 'width' | 'height'>): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/XpodMark.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Xpod product mark (brand asset `xpod-app.svg`). It is the default icon of the
+ * sign-in service side; application icons always come from the host.
+ */
+export function XpodMark({ size = 24, ...props }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", width: size, height: size, "aria-hidden": "true", focusable: "false", ...props, children: [_jsx("rect", { x: "10", y: "10", width: "80", height: "80", rx: "18", fill: "#563E84" }), _jsxs("g", { fill: "#F7F4ED", children: [_jsx("path", { d: "M31 24H52V45H73V73Q73 76 70 76H31Q28 76 28 73V27Q28 24 31 24Z" }), _jsx("path", { d: "M58 24L76 39H58Z" })] })] }));
+}

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/account-parts.d.ts

@@ -0,0 +1,37 @@
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { PodSignInCopy } from './copy';
+import type { StorageLocationKind } from './types';
+/** ok = healthy; unreachable = other devices cannot reach it; stopped = device online, Xpod not running. */
+export type DeviceStatus = 'ok' | 'unreachable' | 'stopped' | 'offline';
+/** One place a Pod can live: Xpod Cloud, or an edge device. Presentation data only. */
+export interface DeviceSummary {
+    id: string;
+    name: string;
+    kind: StorageLocationKind;
+    /** e.g. `node-7f3a.undefineds.co` */
+    address?: string;
+    podCount?: number;
+    status: DeviceStatus;
+    /** Overrides the default cloud / computer icon. */
+    icon?: ReactNode;
+}
+export declare function deviceStatusLabel(status: DeviceStatus, copy: PodSignInCopy): string;
+export declare function deviceKindLabel(kind: StorageLocationKind, copy: PodSignInCopy): string;
+/** Icon, name, kind, address and a status dot with its word (never colour alone). */
+export declare function DeviceIdentity({ device, copy, showStatus }: {
+    device: DeviceSummary;
+    copy: PodSignInCopy;
+    showStatus?: boolean;
+}): import("react").JSX.Element;
+export declare const sectionClass = "pod-sign-in flex flex-col gap-3 text-foreground";
+export declare const listRowClass = "flex min-h-14 items-center gap-3 rounded-lg border border-border bg-card px-3 py-2";
+export declare const sectionTitleClass = "text-[17px] font-semibold text-foreground";
+/** Section title row: an 18px icon, the title, and one sentence saying what the section is for. */
+export declare function SectionHeader({ id, icon: Icon, title, hint, actions }: {
+    id: string;
+    icon: LucideIcon;
+    title: string;
+    hint: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;

package/node_modules/@undefineds.co/shared-ui/dist/pod-sign-in/account-parts.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cloud, Laptop } from 'lucide-react';
+import { cn } from '../utils.js';
+import { Hostname } from './parts.js';
+const statusDotClass = {
+    ok: 'bg-success',
+    unreachable: 'bg-warning',
+    stopped: 'bg-muted-foreground',
+    offline: 'bg-border',
+};
+export function deviceStatusLabel(status, copy) {
+    switch (status) {
+        case 'ok': return copy.deviceStatusOk;
+        case 'unreachable': return copy.deviceStatusUnreachable;
+        case 'stopped': return copy.deviceStatusStopped;
+        case 'offline': return copy.deviceStatusOffline;
+    }
+}
+export function deviceKindLabel(kind, copy) {
+    return kind === 'cloud' ? copy.deviceCloud : copy.deviceEdge;
+}
+/** Icon, name, kind, address and a status dot with its word (never colour alone). */
+export function DeviceIdentity({ device, copy, showStatus = true }) {
+    const Icon = device.kind === 'cloud' ? Cloud : Laptop;
+    return (_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-3 text-left", "data-device-id": device.id, children: [_jsx("span", { "aria-hidden": "true", className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground", children: device.icon ?? _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: device.name }), _jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 text-xs text-muted-foreground", children: deviceKindLabel(device.kind, copy) })] }), _jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 text-xs text-muted-foreground", children: [device.address ? _jsx(Hostname, { className: "truncate", children: device.address }) : null, device.podCount !== undefined ? _jsx("span", { children: copy.podCount.replace('{count}', String(device.podCount)) }) : null, showStatus ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("span", { "aria-hidden": "true", className: cn('h-2 w-2 rounded-full', statusDotClass[device.status]) }), deviceStatusLabel(device.status, copy)] })) : null] })] })] }));
+}
+export const sectionClass = 'pod-sign-in flex flex-col gap-3 text-foreground';
+export const listRowClass = 'flex min-h-14 items-center gap-3 rounded-lg border border-border bg-card px-3 py-2';
+export const sectionTitleClass = 'text-[17px] font-semibold text-foreground';
+/** Section title row: an 18px icon, the title, and one sentence saying what the section is for. */
+export function SectionHeader({ id, icon: Icon, title, hint, actions }) {
+    return (_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(Icon, { "aria-hidden": "true", className: "mt-0.5 h-[18px] w-[18px] shrink-0 text-primary" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: id, className: sectionTitleClass, children: title }), _jsx("p", { className: "text-[13px] text-muted-foreground", children: hint })] })] }), actions] }));
+}