@ploykit/ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,41 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @ploykit/ui
+
+React 前端壳：登录/工作区/计费的 Headless Hook + 默认页面。
+
+## 快速使用
+
+```tsx
+import { PloykitProvider, useAuth, useLogin, LoginPage } from '@ploykit/ui'
+
+// App 根部
+<PloykitProvider>
+  <App />
+</PloykitProvider>
+
+// 任意组件中
+const { user, workspaces, loading } = useAuth()
+const { sendCode, submit } = useLogin()
+
+// 或直接用默认登录页
+<LoginPage />
+```
+
+## 核心 API
+
+| 导出 | 说明 |
+|---|---|
+| `PloykitProvider` | 根 Provider（App 根部包裹一次） |
+| `useAuth()` | `{ user, workspaces, loading, refresh, logout }` |
+| `useLogin()` | `{ sendCode, submit, loading, error }` |
+| `useWorkspace()` | `{ current, switchTo, clear }` |
+| `useWorkspaceSwitch()` | `{ current, list, switchTo, create, creating }` |
+| `useBilling()` | `{ subscription, plans, checkout, loading }` |
+| `PlanGate` | 付费门 `<PlanGate plan="pro" denied={<Upgrade/>}>` |
+| `useApi()` | `{ get, post, put, delete }` 带认证 + 工作区上下文 |
+| `LoginPage` | 默认登录页（可拷贝自定义，Hook 不变） |
+
+## 自定义三个层级
+
+1. **换皮**：CSS/Tailwind 覆盖样式
+2. **换壳**：拷贝 `LoginPage.tsx` 到产品 `src/pages/`，改 JSX，Hook 调用不变
+3. **纯逻辑**：只 `import { useLogin } from '@ploykit/ui'`，完全自己画 UI

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+interface ConfirmOptions {
+    title: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    danger?: boolean;
+}
+export declare function ConfirmProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useConfirm(): (opts: ConfirmOptions) => Promise<boolean>;
+export {};

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState } from 'react';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, } from './ui/alert-dialog';
+const ConfirmContext = createContext(async () => false);
+export function ConfirmProvider({ children }) {
+    const [state, setState] = useState(null);
+    const confirm = useCallback((opts) => {
+        return new Promise((resolve) => {
+            let settled = false;
+            setState({
+                ...opts,
+                resolve: (v) => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    resolve(v);
+                },
+            });
+        });
+    }, []);
+    const handleClose = (result) => {
+        state?.resolve(result);
+        setState(null);
+    };
+    return (_jsxs(ConfirmContext.Provider, { value: confirm, children: [children, _jsx(AlertDialog, { open: !!state, onOpenChange: (open) => !open && handleClose(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: state?.title }), state?.description && _jsx(AlertDialogDescription, { children: state.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: () => handleClose(false), children: state?.cancelText ?? '取消' }), _jsx(AlertDialogAction, { variant: state?.danger ? 'destructive' : 'default', onClick: () => handleClose(true), children: state?.confirmText ?? '确认' })] })] }) })] }));
+}
+export function useConfirm() {
+    return useContext(ConfirmContext);
+}

package/dist/components/CronInput.d.ts

@@ -0,0 +1,15 @@
+export interface CronValue {
+    cron: string;
+    timezone: string;
+}
+export interface CronInputProps {
+    value: CronValue;
+    onChange: (v: CronValue) => void;
+    idPrefix?: string;
+    previewCount?: number;
+    disabled?: boolean;
+}
+export declare const FALLBACK_TIMEZONES: string[];
+export declare function timezoneOptions(): string[];
+export declare function describeCron(expr: string): string;
+export declare function CronInput({ value, onChange, idPrefix, previewCount, disabled, }: CronInputProps): import("react").JSX.Element;

package/dist/components/CronInput.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { api } from '@ploykit/client';
+import { apiErrorMessage } from '../lib/api-error';
+import { Button } from './ui/Button';
+import { Input } from './ui/Input';
+export const FALLBACK_TIMEZONES = [
+    'UTC',
+    'Asia/Shanghai',
+    'Asia/Hong_Kong',
+    'Asia/Singapore',
+    'Asia/Tokyo',
+    'Europe/London',
+    'Europe/Berlin',
+    'Europe/Paris',
+    'America/New_York',
+    'America/Chicago',
+    'America/Los_Angeles',
+    'Australia/Sydney',
+];
+export function timezoneOptions() {
+    let zones = [];
+    try {
+        const i = Intl;
+        if (typeof i.supportedValuesOf === 'function') {
+            zones = i.supportedValuesOf('timeZone');
+        }
+    }
+    catch {
+        // fall through 到内置列表
+    }
+    if (zones.length === 0)
+        return FALLBACK_TIMEZONES;
+    return Array.from(new Set(['UTC', ...zones]));
+}
+const DOW_LABEL = {
+    '0': '周日', '1': '周一', '2': '周二', '3': '周三', '4': '周四', '5': '周五', '6': '周六', '7': '周日',
+};
+export function describeCron(expr) {
+    const fields = expr.trim().split(/\s+/);
+    if (fields.length !== 5)
+        return expr;
+    const [min, hour, dom, mon, dow] = fields;
+    if (mon !== '*')
+        return expr;
+    const intIn = (s, lo, hi) => /^\d+$/.test(s) && Number(s) >= lo && Number(s) <= hi;
+    if (min !== '*' && !intIn(min, 0, 59))
+        return expr;
+    if (hour !== '*' && !intIn(hour, 0, 23))
+        return expr;
+    if (dow !== '*' && !intIn(dow, 0, 7))
+        return expr;
+    const hhmm = `${hour.padStart(2, '0')}:${min.padStart(2, '0')}`;
+    if (min === '*' && hour === '*' && dom === '*' && dow === '*')
+        return '每分钟';
+    if (hour === '*' && dom === '*' && dow === '*')
+        return `每小时（第 ${min.padStart(2, '0')} 分）`;
+    if (dom === '*' && dow === '*')
+        return `每天 ${hhmm}`;
+    if (dom === '*' && hour !== '*' && min !== '*')
+        return `每${DOW_LABEL[dow] ?? dow} ${hhmm}`;
+    return expr;
+}
+function formatPreviewTime(iso, tz) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    try {
+        return new Intl.DateTimeFormat('zh-CN', {
+            timeZone: tz, dateStyle: 'medium', timeStyle: 'short',
+        }).format(d);
+    }
+    catch {
+        return d.toISOString();
+    }
+}
+export function CronInput({ value, onChange, idPrefix = 'cron', previewCount = 3, disabled, }) {
+    const [preview, setPreview] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    useEffect(() => {
+        setPreview(null);
+    }, [value.cron, value.timezone]);
+    const runPreview = async () => {
+        const reqCron = value.cron.trim();
+        const reqTz = value.timezone;
+        setLoading(true);
+        setError(null);
+        setPreview(null);
+        const stillCurrent = () => valueRef.current.cron.trim() === reqCron && valueRef.current.timezone === reqTz;
+        try {
+            const d = await api.post('/api/schedules/preview', {
+                cron_expr: reqCron,
+                timezone: reqTz,
+                count: previewCount,
+            });
+            if (stillCurrent())
+                setPreview(d?.items ?? []);
+        }
+        catch (e) {
+            if (stillCurrent())
+                setError(apiErrorMessage(e, '预览失败，请检查表达式后重试'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const zones = timezoneOptions();
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx("label", { htmlFor: `${idPrefix}-expr`, className: "text-sm font-medium", children: "Cron \u8868\u8FBE\u5F0F" }), _jsx(Input, { id: `${idPrefix}-expr`, placeholder: "0 9 * * *", className: "font-mono", value: value.cron, disabled: disabled, onChange: (e) => onChange({ ...value, cron: e.target.value }) }), _jsx("p", { className: "text-xs text-muted-foreground", "data-testid": "cron-hint", children: value.cron.trim() ? describeCron(value.cron) : '五字段：分 时 日 月 周' })] }), _jsxs("div", { className: "w-48 shrink-0 space-y-1", children: [_jsx("label", { htmlFor: `${idPrefix}-tz`, className: "text-sm font-medium", children: "\u65F6\u533A" }), _jsx("select", { id: `${idPrefix}-tz`, className: "h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", value: value.timezone, disabled: disabled, onChange: (e) => onChange({ ...value, timezone: e.target.value }), children: zones.map((tz) => (_jsx("option", { value: tz, children: tz }, tz))) })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: disabled || loading || !value.cron.trim(), onClick: () => void runPreview(), children: loading ? '预览中…' : `预览下次 ${previewCount} 次` }), error && (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: error })), preview && preview.length > 0 && (_jsx("ul", { "data-testid": "cron-preview", className: "list-inside list-disc text-xs text-muted-foreground", children: preview.map((t, i) => (_jsx("li", { children: formatPreviewTime(t, value.timezone) }, i))) }))] })] }));
+}

package/dist/components/DataTable.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface Column<T> {
+    key: string;
+    header: ReactNode;
+    render?: (row: T) => ReactNode;
+    className?: string;
+}
+export interface DataTablePagination {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+}
+export interface DataTableProps<T> {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    loading?: boolean;
+    empty?: ReactNode;
+    pagination?: DataTablePagination;
+}
+export declare function DataTable<T>({ columns, rows, rowKey, loading, empty, pagination }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/DataTable.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { PageEmpty } from './Page';
+import { Skeleton } from './ui/skeleton';
+import { Button } from './ui/Button';
+export function DataTable({ columns, rows, rowKey, loading = false, empty, pagination }) {
+    const stalePage = !!pagination && !loading && rows.length === 0 && (pagination.total > 0 || pagination.page > 1);
+    if (!loading && rows.length === 0 && !stalePage) {
+        return _jsx(_Fragment, { children: empty ?? _jsx(PageEmpty, {}) });
+    }
+    const lastPage = pagination ? Math.max(1, Math.ceil(pagination.total / Math.max(1, pagination.pageSize))) : 1;
+    return (_jsxs("div", { className: "bg-card rounded-lg border overflow-hidden", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b bg-muted/50 text-left text-muted-foreground", children: columns.map((col) => (_jsx("th", { className: cn('px-4 py-3 font-medium whitespace-nowrap', col.className), children: col.header }, col.key))) }) }), _jsx("tbody", { children: loading ? (_jsx("tr", { className: "border-b last:border-0", children: columns.map((col) => (_jsx("td", { className: cn('px-4 py-3', col.className), children: _jsx(Skeleton, { className: "h-4 w-full" }) }, col.key))) })) : stalePage ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-sm text-muted-foreground", children: "\u672C\u9875\u6CA1\u6709\u6570\u636E\uFF0C\u53EF\u8FD4\u56DE\u4E0A\u4E00\u9875" }) })) : (rows.map((row) => (_jsx("tr", { className: "border-b last:border-0 hover:bg-muted/30", children: columns.map((col) => (_jsx("td", { className: cn('px-4 py-3', col.className), children: col.render ? col.render(row) : String(row[col.key] ?? '') }, col.key))) }, rowKey(row))))) })] }) }), pagination && (_jsxs("div", { "data-slot": "data-table-pagination", "aria-busy": loading || undefined, className: "flex items-center justify-between border-t px-4 py-3 text-sm text-muted-foreground", children: [loading ? (_jsx("span", { children: "\u52A0\u8F7D\u4E2D\u2026" })) : (_jsxs("span", { children: ["\u5171 ", _jsx("span", { className: "font-medium text-foreground", children: pagination.total }), " \u6761 \u00B7 \u7B2C", ' ', _jsxs("span", { className: "font-medium text-foreground", children: [pagination.page, "/", lastPage] }), ' ', "\u9875"] })), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: loading || pagination.page <= 1, onClick: () => pagination.onPageChange(pagination.page - 1), children: "\u4E0A\u4E00\u9875" }), _jsx(Button, { size: "sm", variant: "outline", disabled: loading || pagination.page >= lastPage, onClick: () => pagination.onPageChange(pagination.page + 1), children: "\u4E0B\u4E00\u9875" })] })] }))] }));
+}

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ReactNode } from 'react';
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error) {
+        console.error('[ErrorBoundary] 子树渲染出错:', error);
+    }
+    reset = () => {
+        this.setState({ error: null });
+    };
+    render() {
+        const { error } = this.state;
+        if (error === null)
+            return this.props.children;
+        const { fallback } = this.props;
+        if (fallback !== undefined) {
+            return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;
+        }
+        return (_jsxs("div", { role: "alert", className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "text-4xl mb-3", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-red-600", children: "\u51FA\u9519\u4E86" }), error.message && _jsx("p", { className: "mt-1 text-xs text-gray-400", children: error.message }), _jsx("button", { onClick: this.reset, className: "mt-4 px-4 py-2 text-sm border rounded-md hover:bg-gray-50", children: "\u91CD\u8BD5" })] }));
+    }
+}

package/dist/components/FormField.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export interface FormFieldProps {
+    label: string;
+    error?: string;
+    description?: string;
+    required?: boolean;
+    children: ReactNode;
+    htmlFor?: string;
+}
+export declare function FormField({ label, error, description, required, children, htmlFor }: FormFieldProps): import("react").JSX.Element;

package/dist/components/FormField.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { Field, FieldLabel, FieldError, FieldDescription } from './ui/field';
+function mergeDescribedBy(props, extra) {
+    const existing = typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : '';
+    return { 'aria-describedby': [existing, extra].filter(Boolean).join(' ') };
+}
+export function FormField({ label, error, description, required, children, htmlFor }) {
+    const errorId = htmlFor && error ? `${htmlFor}-error` : undefined;
+    const descId = htmlFor && description ? `${htmlFor}-desc` : undefined;
+    const describedBy = [descId, errorId].filter(Boolean).join(' ') || undefined;
+    const control = describedBy || error || required
+        ? isValidElement(children)
+            ? cloneElement(children, {
+                ...(describedBy ? mergeDescribedBy(children.props, describedBy) : {}),
+                ...(error ? { 'aria-invalid': true } : {}),
+                ...(required ? { 'aria-required': true } : {}),
+            })
+            : children
+        : children;
+    return (_jsxs(Field, { "data-invalid": !!error, children: [_jsxs(FieldLabel, { htmlFor: htmlFor, children: [label, required && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" }))] }), control, description && _jsx(FieldDescription, { id: descId, children: description }), _jsx(FieldError, { id: errorId, children: error })] }));
+}

package/dist/components/ImpersonationBanner.d.ts

@@ -0,0 +1,3 @@
+export declare function ImpersonationBanner({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/ImpersonationBanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+import { useAuth } from '../hooks/useAuth';
+import { cn } from '../lib/utils';
+export function ImpersonationBanner({ className }) {
+    const { user } = useAuth();
+    if (!user?.impersonated_by)
+        return null;
+    return (_jsxs("div", { role: "status", "data-slot": "impersonation-banner", className: cn('flex w-full items-center justify-center gap-2 border-b px-4 py-2 text-sm font-medium', 'border-destructive/30 bg-destructive/10 text-destructive', className), children: [_jsx(TriangleAlert, { className: "size-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "\u60A8\u6B63\u5904\u4E8E\u7BA1\u7406\u5458\u6A21\u62DF\u4F1A\u8BDD" })] }));
+}

package/dist/components/NotificationBell.d.ts

@@ -0,0 +1,3 @@
+export declare function NotificationBell({ onNavigate }: {
+    onNavigate?: (link: string) => void;
+}): import("react").JSX.Element;

package/dist/components/NotificationBell.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '@ploykit/client';
+import { queryKeys } from '../provider/PloykitProvider';
+import { cn, formatDateTime } from '../lib/utils';
+export function NotificationBell({ onNavigate }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const qc = useQueryClient();
+    const badgeQ = useQuery({
+        queryKey: [queryKeys.notifications, 'badge'],
+        queryFn: () => api.get('/api/notifications/badge'),
+        refetchInterval: 60_000,
+    });
+    const unread = badgeQ.data?.count ?? 0;
+    const listQ = useQuery({
+        queryKey: [queryKeys.notifications, 'list'],
+        queryFn: () => api.get('/api/notifications?limit=8'),
+        staleTime: 30_000,
+        enabled: open,
+    });
+    const notifications = Array.isArray(listQ.data) ? listQ.data : [];
+    const invalidate = () => {
+        void qc.invalidateQueries({ queryKey: [queryKeys.notifications] });
+    };
+    const markAllReadM = useMutation({
+        mutationFn: () => api.post('/api/notifications/read-all'),
+        onSuccess: invalidate,
+    });
+    const markReadM = useMutation({
+        mutationFn: (id) => api.post(`/api/notifications/${id}/read`),
+        onSuccess: invalidate,
+    });
+    useEffect(() => {
+        const onClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onClickOutside);
+        return () => document.removeEventListener('mousedown', onClickOutside);
+    }, []);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(!open), className: "relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md\r\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-label": "\u901A\u77E5", "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unread > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]\r\n            px-1 text-xs font-bold text-white bg-red-500 rounded-full", children: unread > 99 ? '99+' : unread }))] }), open && (_jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50", role: "dialog", "aria-label": "\u901A\u77E5\u5217\u8868", onKeyDown: (e) => { if (e.key === 'Escape')
+                    setOpen(false); }, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("span", { className: "text-sm font-semibold", children: "\u901A\u77E5" }), unread > 0 && (_jsx("button", { onClick: () => markAllReadM.mutate(), disabled: markAllReadM.isPending, className: "text-xs text-blue-600 hover:underline disabled:opacity-50\r\n                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u5168\u90E8\u5DF2\u8BFB" }))] }), _jsx("ul", { className: "max-h-80 overflow-y-auto list-none p-0 m-0", "data-slot": "notification-list", children: listQ.isPending ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", "aria-live": "polite", children: "\u52A0\u8F7D\u4E2D\u2026" })) : notifications.length === 0 ? (_jsx("li", { className: "py-8 text-center text-sm text-gray-400", children: "\u6682\u65E0\u901A\u77E5" })) : notifications.map((n) => (_jsx("li", { className: "border-b last:border-0", children: _jsxs("button", { type: "button", onClick: () => { if (n.link)
+                                    onNavigate?.(n.link); markReadM.mutate(n.id); setOpen(false); }, className: cn('w-full text-left px-4 py-3 cursor-pointer hover:bg-gray-50 ' +
+                                    'focus-visible:outline-none focus-visible:bg-gray-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', !n.read_at && 'bg-blue-50/50'), children: [_jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: n.title }), n.count > 1 && (_jsxs("span", { className: "text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full shrink-0", children: ["\u00D7", n.count] }))] }), n.body && _jsx("span", { className: "block mt-0.5 text-xs text-gray-500 line-clamp-2", children: n.body }), _jsx("span", { className: "block mt-1 text-[10px] text-gray-400", children: formatDateTime(n.created_at) })] }) }, n.id))) })] }))] }));
+}

package/dist/components/OnboardingChecklist.d.ts

@@ -0,0 +1,12 @@
+export interface OnboardingItem {
+    key: string;
+    label: string;
+    done: boolean;
+    onClick?: () => void;
+}
+export interface OnboardingChecklistProps {
+    items?: OnboardingItem[];
+    storageKey?: string;
+    title?: string;
+}
+export declare function OnboardingChecklist({ items, storageKey, title, }?: OnboardingChecklistProps): import("react").JSX.Element | null;

package/dist/components/OnboardingChecklist.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Progress, ProgressLabel, ProgressValue } from './ui/progress';
+import { Button } from './ui/Button';
+import { useAuth } from '../hooks/useAuth';
+const DISMISS_KEY = 'pk_onboarding_dismissed';
+function defaultItems(hasWorkspaces) {
+    return [
+        { key: 'create-workspace', label: '创建第一个工作区', done: hasWorkspaces },
+    ];
+}
+export function OnboardingChecklist({ items, storageKey = DISMISS_KEY, title = '开始使用', } = {}) {
+    const { user, workspaces } = useAuth();
+    const [dismissed, setDismissed] = useState(false);
+    useEffect(() => {
+        try {
+            setDismissed(localStorage.getItem(storageKey) === '1');
+        }
+        catch {
+            /* localStorage 不可用（隐私模式等）按未关闭处理——effect 期兜底，非渲染期吞异常 */
+        }
+    }, [storageKey]);
+    const list = items ?? (user ? defaultItems(workspaces.length > 0) : []);
+    if (!user || dismissed || list.length === 0)
+        return null;
+    const doneCount = list.filter((i) => i.done).length;
+    const pct = Math.round((doneCount / list.length) * 100);
+    const allDone = doneCount === list.length;
+    const dismiss = () => {
+        try {
+            localStorage.setItem(storageKey, '1');
+        }
+        catch {
+            /* 隐私模式等场景忽略持久化失败 */
+        }
+        setDismissed(true);
+    };
+    return (_jsxs("section", { className: "w-full rounded-xl border bg-card p-4 shadow-xs", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: title }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: allDone ? '全部完成，开始你的旅程吧！' : `已完成 ${doneCount}/${list.length} 项` })] }), _jsx(Button, { variant: "ghost", size: "iconSm", "aria-label": "\u5173\u95ED\u5F15\u5BFC\u6E05\u5355", onClick: dismiss, children: _jsx(X, {}) })] }), _jsxs(Progress, { value: pct, className: "mt-3", children: [_jsx(ProgressLabel, { children: allDone ? '完成' : '进度' }), _jsx(ProgressValue, {})] }), _jsx("ul", { className: "mt-4 space-y-2", children: list.map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: item.done ? undefined : item.onClick, disabled: item.done, className: cn('flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left text-sm transition-colors', item.done
+                            ? 'border-transparent bg-muted/50 text-muted-foreground'
+                            : 'border-border hover:bg-accent hover:text-accent-foreground', !item.done && !item.onClick && 'cursor-default'), children: [_jsx("span", { "aria-hidden": "true", className: cn('flex size-5 shrink-0 items-center justify-center rounded-full border text-xs', item.done ? 'border-primary bg-primary text-primary-foreground' : 'border-input'), children: item.done ? '✓' : '' }), _jsx("span", { className: cn(item.done && 'line-through'), children: item.label })] }) }, item.key))) })] }));
+}

package/dist/components/Page.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export declare function PageHeader({ title, description, actions }: {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PageLoading({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function PageEmpty({ label, hint }: {
+    label?: string;
+    hint?: string;
+}): import("react").JSX.Element;
+export declare function PageError({ message, onRetry }: {
+    message: string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;

package/dist/components/Page.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox, TriangleAlert } from 'lucide-react';
+import { Button } from './ui/Button';
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, } from './ui/empty';
+export function PageHeader({ title, description, actions }) {
+    return (_jsxs("div", { className: "mb-6 flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: title }), description && _jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 gap-2", children: actions })] }));
+}
+export function PageLoading({ label = '加载中…' }) {
+    return (_jsxs("div", { className: "flex items-center justify-center py-12", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary" }), _jsx("span", { className: "ml-3 text-sm text-muted-foreground", children: label })] }));
+}
+export function PageEmpty({ label = '暂无数据', hint }) {
+    return (_jsx(Empty, { className: "py-8", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(Inbox, { "aria-hidden": "true" }) }), _jsx(EmptyTitle, { children: label }), hint && _jsx(EmptyDescription, { children: hint })] }) }));
+}
+export function PageError({ message, onRetry }) {
+    return (_jsx(Empty, { className: "py-8", role: "alert", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", className: "bg-destructive/10 text-destructive", children: _jsx(TriangleAlert, { "aria-hidden": "true" }) }), _jsx(EmptyTitle, { className: "text-destructive", children: message }), onRetry && (_jsx(EmptyContent, { children: _jsx(Button, { variant: "outline", onClick: onRetry, children: "\u91CD\u8BD5" }) }))] }) }));
+}

package/dist/components/SecretModal.d.ts

@@ -0,0 +1,16 @@
+export declare function SecretModal({ open, onOpenChange, secretName, secretValue, title }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    secretName: string;
+    secretValue: string;
+    title?: string;
+}): import("react").JSX.Element;
+export declare function ImpactConfirmation({ open, onConfirm, onOpenChange, title, impacts, confirmText, danger }: {
+    open: boolean;
+    onConfirm: () => void;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    impacts: string[];
+    confirmText?: string;
+    danger?: boolean;
+}): import("react").JSX.Element;

package/dist/components/SecretModal.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from './ui/dialog';
+import { Button } from './ui/Button';
+export function SecretModal({ open, onOpenChange, secretName, secretValue, title }) {
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const [confirmed, setConfirmed] = useState(false);
+    const copyTimer = useRef(null);
+    useEffect(() => {
+        setCopied(false);
+        setCopyFailed(false);
+        setConfirmed(false);
+        if (copyTimer.current) {
+            clearTimeout(copyTimer.current);
+            copyTimer.current = null;
+        }
+    }, [open, secretValue]);
+    useEffect(() => () => {
+        if (copyTimer.current)
+            clearTimeout(copyTimer.current);
+    }, []);
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(secretValue);
+            setCopied(true);
+            setCopyFailed(false);
+        }
+        catch {
+            setCopied(false);
+            setCopyFailed(true);
+        }
+        if (copyTimer.current)
+            clearTimeout(copyTimer.current);
+        copyTimer.current = setTimeout(() => {
+            setCopied(false);
+            setCopyFailed(false);
+        }, 2000);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => confirmed && onOpenChange(o), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title ?? `${secretName} 创建成功` }), _jsx(DialogDescription, { children: "\u6B64\u5BC6\u94A5\u53EA\u663E\u793A\u4E00\u6B21\uFF0C\u5173\u95ED\u540E\u65E0\u6CD5\u518D\u6B21\u67E5\u770B\u3002\u8BF7\u7ACB\u5373\u4FDD\u5B58\u5230\u5B89\u5168\u7684\u5730\u65B9\u3002" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 px-3 py-2 bg-foreground/5 rounded font-mono text-sm break-all", children: secretValue }), _jsx(Button, { variant: "outline", size: "sm", onClick: copy, children: copied ? '已复制' : copyFailed ? '复制失败，请手动复制' : '复制' })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked), className: "rounded border-input" }), "\u6211\u5DF2\u5C06\u5BC6\u94A5\u4FDD\u5B58\u5230\u5B89\u5168\u7684\u5730\u65B9"] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: () => onOpenChange(false), disabled: !confirmed, children: confirmed ? '我已保存' : '请先确认已保存' }) })] }) }));
+}
+export function ImpactConfirmation({ open, onConfirm, onOpenChange, title, impacts, confirmText, danger }) {
+    const [checked, setChecked] = useState(false);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: "\u6B64\u64CD\u4F5C\u5C06\u4EA7\u751F\u4EE5\u4E0B\u5F71\u54CD\uFF1A" })] }), _jsx("ul", { className: "space-y-1.5", children: impacts.map((impact) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [_jsx("span", { className: "text-destructive mt-0.5", children: "\u2022" }), " ", impact] }, impact))) }), _jsxs("label", { className: "flex items-center gap-2 text-sm text-muted-foreground pt-2 border-t", children: [_jsx("input", { type: "checkbox", checked: checked, onChange: (e) => setChecked(e.target.checked), className: "rounded border-input" }), "\u6211\u7406\u89E3\u5E76\u63A5\u53D7\u4EE5\u4E0A\u5F71\u54CD"] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "\u53D6\u6D88" }), _jsx(Button, { variant: danger ? 'destructive' : 'default', disabled: !checked, onClick: () => { onConfirm(); onOpenChange(false); }, children: confirmText ?? '确认执行' })] })] }) }));
+}

package/dist/components/SettingsCard.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface SettingsCardProps {
+    title: ReactNode;
+    description?: ReactNode;
+    cta?: ReactNode;
+    danger?: boolean;
+    bodyClassName?: string;
+    children: ReactNode;
+}
+export declare function SettingsCard({ title, description, cta, danger, bodyClassName, children, }: SettingsCardProps): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils';
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, } from './ui/card';
+export function SettingsCard({ title, description, cta, danger, bodyClassName, children, }) {
+    return (_jsxs(Card, { className: "my-4 w-full max-w-4xl text-left", size: "sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { as: "h2", className: cn(danger && 'text-destructive'), children: title }), description && (_jsx(CardDescription, { className: cn(danger && 'text-destructive/80'), children: description })), cta && _jsx(CardAction, { children: cta })] }), _jsx(CardContent, { className: cn('text-left', bodyClassName), children: children })] }));
+}

package/dist/components/SiteBanner.d.ts

@@ -0,0 +1,6 @@
+export interface SiteBannerProps {
+    text?: string;
+    kind?: 'info' | 'warn';
+    className?: string;
+}
+export declare function SiteBanner({ text, kind, className }: SiteBannerProps): import("react").JSX.Element | null;

package/dist/components/SiteBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from 'lucide-react';
+import { cn } from '../lib/utils';
+export function SiteBanner({ text, kind = 'info', className }) {
+    if (!text || !text.trim())
+        return null;
+    const warn = kind === 'warn';
+    return (_jsxs("div", { role: "status", "data-slot": "site-banner", className: cn('flex w-full items-center justify-center gap-2 border-b px-4 py-2 text-sm', warn
+            ? 'border-destructive/30 bg-destructive/10 text-destructive'
+            : 'border-primary/25 bg-primary/10 text-primary', className), children: [warn && _jsx(TriangleAlert, { className: "size-4 shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0 whitespace-pre-wrap text-balance", children: text })] }));
+}

package/dist/components/SiteBannerLayer.d.ts

@@ -0,0 +1,4 @@
+export interface SiteBannerLayerProps {
+    maintenanceText?: string;
+}
+export declare function SiteBannerLayer({ maintenanceText, }?: SiteBannerLayerProps): import("react").JSX.Element | null;