@undefineds.co/xpod 0.4.18 → 0.4.20

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogTitle } from '../dialog.js';
+import { cn } from '../utils.js';
+import { DeviceIdentity } from './account-parts.js';
+import { resolvePodSignInCopy } from './copy.js';
+import { NetworkPanel } from './NetworkPanel.js';
+import { ActionButton, outlineButtonClass, primaryButtonClass } from './parts.js';
+const dialogClass = 'pod-sign-in max-h-[90dvh] w-[min(400px,calc(100vw-2rem))] max-w-[400px] gap-4 overflow-y-auto rounded-xl bg-card p-5';
+/** "Choose where to store": pick a row, like choosing a delivery address. Offline devices are greyed out. */
+export function DevicePickerDialog({ open, onOpenChange, devices, selectedDeviceId, onSelect, onAddDevice, locale, copy: overrides, }) {
+    const copy = resolvePodSignInCopy(locale, overrides);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: dialogClass, "aria-describedby": undefined, children: [_jsx(DialogTitle, { className: "text-[17px] leading-6", children: copy.devicePickerTitle }), _jsx("div", { role: "radiogroup", "aria-label": copy.devicePickerTitle, className: "flex flex-col gap-2", children: devices.map((device) => {
+                        const selectable = device.status !== 'offline';
+                        const selected = device.id === selectedDeviceId;
+                        return (_jsx("button", { type: "button", role: "radio", "aria-checked": selected, disabled: !selectable, className: cn('flex min-h-14 w-full items-center rounded-lg border px-3 py-2 text-left', selected ? 'border-primary bg-accent' : 'border-border bg-card', selectable ? 'hover:bg-accent' : 'cursor-not-allowed opacity-50'), onClick: () => {
+                                onSelect(device.id);
+                                onOpenChange(false);
+                            }, children: _jsx(DeviceIdentity, { device: device, copy: copy }) }, device.id));
+                    }) }), _jsx(ActionButton, { variant: "outline", className: outlineButtonClass, onClick: onAddDevice, children: copy.addDevice })] }) }));
+}
+/** Add a device in three steps: install and sign in, check the network, done. */
+export function AddDeviceDialog({ open, onOpenChange, step, canJoinThisComputer = false, joining = false, onJoinThisComputer, device, network, onNetworkDone, origin, onFinish, locale, copy: overrides, }) {
+    const copy = resolvePodSignInCopy(locale, overrides);
+    const steps = [copy.stepInstall, copy.stepNetwork, copy.stepDone];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: dialogClass, "aria-describedby": undefined, children: [_jsx(DialogTitle, { className: "text-[17px] leading-6", children: copy.addDeviceTitle }), _jsx("ol", { className: "flex items-center gap-2 text-[13px]", "aria-label": copy.addDeviceTitle, children: steps.map((label, index) => {
+                        const number = index + 1;
+                        const state = number === step ? 'current' : number < step ? 'done' : 'todo';
+                        return (_jsxs("li", { "aria-current": state === 'current' ? 'step' : undefined, "data-step-state": state, className: cn('flex min-w-0 items-center gap-1', state === 'current' ? 'font-semibold text-foreground' : 'text-muted-foreground'), children: [_jsx("span", { "aria-hidden": "true", className: cn('flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-xs', state === 'todo' ? 'bg-muted' : 'bg-primary text-primary-foreground'), children: number }), _jsx("span", { className: "truncate", children: label })] }, label));
+                    }) }), step === 1 ? (_jsxs("div", { className: "flex flex-col gap-4", children: [canJoinThisComputer ? (_jsx(ActionButton, { className: primaryButtonClass, busy: joining, onClick: onJoinThisComputer, children: copy.joinThisComputer })) : null, _jsx("p", { className: "text-sm text-foreground", children: copy.installOnOther }), _jsx("p", { role: "status", "aria-live": "polite", className: "text-[13px] text-muted-foreground", children: copy.waitingForDevice })] })) : null, step === 2 ? (_jsxs("div", { className: "flex flex-col gap-4", children: [device ? _jsx(DeviceOnlineCard, { device: device, copy: copy }) : null, network.checks.wan === 'failed' ? (_jsx(NetworkPanel, { ...network, locale: locale, copy: overrides, onSkip: onNetworkDone })) : (_jsxs(_Fragment, { children: [_jsx(NetworkPanel, { ...network, locale: locale, copy: overrides }), _jsx(ActionButton, { className: primaryButtonClass, disabled: network.checks.wan === 'checking', onClick: onNetworkDone, children: copy.customSubmit })] }))] })) : null, step === 3 ? (_jsxs("div", { className: "flex flex-col gap-4", children: [device ? _jsx(DeviceOnlineCard, { device: device, copy: copy }) : null, _jsx(ActionButton, { className: primaryButtonClass, onClick: onFinish, children: origin === 'picker' ? copy.useThisDevice : copy.finish })] })) : null] }) }));
+}
+function DeviceOnlineCard({ device, copy }) {
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card p-3", "data-pod-sign-in": "new-device", children: [_jsx(DeviceIdentity, { device: device, copy: copy, showStatus: false }), _jsx("span", { role: "status", className: "shrink-0 text-[13px] text-success", children: copy.deviceOnline })] }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type PodSignInLocale } from './copy';
+export interface IdpChromeProps {
+    /** The sign-in service, e.g. "Xpod". */
+    serviceName: string;
+    /** Shown in monospace; this row is what tells a user which service's page this is. */
+    serviceHost?: string;
+    /** Defaults to the Xpod mark. */
+    icon?: ReactNode;
+    /** Word after the name (default "账号服务" / "Sign-in service"). */
+    serviceLabel?: string;
+    locale?: PodSignInLocale;
+}
+/** 44px tinted bar at the top of every sign-in-service page (B group). */
+export declare function IdpChrome({ serviceName, serviceHost, icon, serviceLabel, locale }: IdpChromeProps): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolvePodSignInCopy } from './copy.js';
+import { XpodMark } from './XpodMark.js';
+/** 44px tinted bar at the top of every sign-in-service page (B group). */
+export function IdpChrome({ serviceName, serviceHost, icon, serviceLabel, locale }) {
+    const label = serviceLabel ?? resolvePodSignInCopy(locale).serviceLabel;
+    return (_jsxs("div", { "data-pod-sign-in": "idp-chrome", className: "flex h-11 shrink-0 items-center gap-2 border-b border-border bg-[hsl(var(--sunken))] px-4 text-[13px] text-foreground", children: [_jsx("span", { "aria-hidden": "true", className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-md", children: icon ?? _jsx(XpodMark, { size: 24 }) }), _jsxs("span", { className: "min-w-0 truncate font-medium", children: [serviceName, " \u00B7 ", label] }), serviceHost ? _jsx("span", { className: "ml-auto truncate font-mono text-xs text-muted-foreground", children: serviceHost }) : null] }));
+}

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

@@ -0,0 +1,93 @@
+import { type ReactNode } from 'react';
+import { type PodSignInCopy, type PodSignInLocale } from './copy';
+/** Shared by every B-group view: which service's page this is, and the wording. */
+export interface IdpViewCommonProps {
+    /** Shown in the tinted top bar together with `serviceHost`. */
+    serviceName?: string;
+    serviceHost?: string;
+    serviceIcon?: ReactNode;
+    locale?: PodSignInLocale;
+    copy?: Partial<PodSignInCopy>;
+}
+export declare function IdpFrameHeader({ serviceName, serviceHost, serviceIcon, locale, copy }: IdpViewCommonProps): import("react").JSX.Element;
+export interface IdpSignInViewProps extends IdpViewCommonProps {
+    serviceName: string;
+    returnToAppName?: string;
+    /** Form-level failure, announced assertively. */
+    error?: string;
+    fieldErrors?: {
+        email?: string;
+        password?: string;
+    };
+    pending?: boolean;
+    remember: boolean;
+    /** Uncontrolled initial values (a previously used email, for instance). */
+    defaultEmail?: string;
+    defaultPassword?: string;
+    /** Fires on every edit so a host can clear its own error state. */
+    onFieldChange?(field: 'email' | 'password', value: string): void;
+    /** Shown only when the host offers a remember choice; omit to hide the checkbox. */
+    onRememberChange?(value: boolean): void;
+    onSubmit(values: {
+        email: string;
+        password: string;
+    }): void;
+    /** Hidden when omitted. `forgotHref` renders a real link instead, for hosts that navigate to a page. */
+    onForgot?(): void;
+    forgotHref?: string;
+    /** Hidden when omitted. `registerHref` renders a real link instead. */
+    onRegister?(): void;
+    registerHref?: string;
+    onUseOtherSolid?(): void;
+}
+/** B1: sign in to the sign-in service. Email and password only ever appear here. */
+export declare function IdpSignInView(props: IdpSignInViewProps): import("react").JSX.Element;
+export interface IdpRegisterViewProps extends IdpViewCommonProps {
+    serviceName: string;
+    returnToAppName?: string;
+    /** e.g. "将创建你的 WebID 和 Pod：pod.undefineds.co/xiaolin/" */
+    usernamePreview?: string;
+    /** Decided by the service's CSS controls. */
+    requireUsername: boolean;
+    fieldErrors?: Partial<Record<'username' | 'email' | 'password', string | undefined>>;
+    /** Form-level failure, announced assertively. */
+    error?: string;
+    pending?: boolean;
+    defaultEmail?: string;
+    defaultPassword?: string;
+    defaultUsername?: string;
+    /** Fires on every edit so a host can check the name and clear its own errors. */
+    onFieldChange?(field: 'username' | 'email' | 'password', value: string): void;
+    onSubmit(values: {
+        username?: string;
+        email: string;
+        password: string;
+    }): void;
+    /** Hidden when omitted. */
+    onSignIn?(): void;
+}
+/** B2: register. The explicit form is what makes creating a WebID and Pod not implicit. */
+export declare function IdpRegisterView(props: IdpRegisterViewProps): import("react").JSX.Element;
+export interface IdpNoWebIdViewProps extends IdpViewCommonProps {
+    appName: string;
+    /**
+     * The name prefilled in the field. Omit it when the host cannot create a WebID
+     * here: the name field is then not shown, and the primary action just calls `onCreate('')`.
+     */
+    defaultName?: string;
+    /** Live availability of the name; ok is announced politely, error assertively. */
+    nameHint?: {
+        tone: 'ok' | 'muted' | 'error';
+        text: string;
+    };
+    /** Form-level failure (e.g. a creation request failed), assertive and not blocking a retry. */
+    error?: string;
+    pending?: boolean;
+    /** Fired on every edit so the host can check availability live. */
+    onNameChange?(name: string): void;
+    onCreate(name: string): void;
+    /** Hidden when omitted. */
+    onChooseOtherLocation?(): void;
+}
+/** B3: the account has no WebID. Create one here, or leave for the account page to store it elsewhere. */
+export declare function IdpNoWebIdView(props: IdpNoWebIdViewProps): import("react").JSX.Element;

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 }));
+}