@freeappstore/sdk 0.15.9 → 0.16.0

package/README.md

@@ -282,3 +282,19 @@ https://freeappstore.online/skills.md
 ## License
 
 MIT.
+
+## Tailwind styling (SDK 0.16+)
+
+React UI requires Tailwind 4. SDK styles are compiled by your app; they are no
+longer injected at runtime. In `web/src/index.css`, after the Tailwind import, add:
+
+```css
+@source "../node_modules/@freeappstore/sdk/dist";
+@source "../../node_modules/@freeappstore/sdk/dist";
+```
+
+Paths are relative to the stylesheet and cover web-local and root-hoisted installs.
+Also add the token `@theme inline` mapping and animation keyframes from
+[the styling guide](https://github.com/freeappstore-online/platform/blob/main/docs/ui.md#styling).
+Both official templates include the complete setup. Floating UI uses opaque
+`--popover` (default `var(--paper)`); `--panel` is opaque and glass is opt-in.

package/dist/logger.d.ts

@@ -35,7 +35,7 @@ export interface BuildMeta {
     viewport: string;
     theme?: string | undefined;
 }
-export declare const SDK_VERSION = "0.15.8";
+export declare const SDK_VERSION = "0.16.0";
 export declare class Logger {
     private readonly appId;
     private readonly apiBase;

package/dist/logger.js

@@ -1,6 +1,6 @@
 // Must track package.json version — bumped on release. Guarded by version.test.ts
 // so a forgotten bump fails CI instead of silently misattributing telemetry.
-export const SDK_VERSION = '0.15.8';
+export const SDK_VERSION = '0.16.0';
 const MEMORY_LIMIT = 200;
 const STORAGE_LIMIT = 500;
 const STORAGE_KEY_PREFIX = 'fas_logs:';

package/dist/ui/components.d.ts

@@ -9,15 +9,17 @@ export interface BadgeProps {
     children: ReactNode;
     variant?: 'default' | 'accent' | 'success' | 'warning' | 'danger';
     style?: CSSProperties;
+    className?: string;
 }
-export declare function Badge({ children, variant, style: extraStyle }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ children, variant, style: extraStyle, className }: BadgeProps): import("react").JSX.Element;
 export interface CardProps {
     children: ReactNode;
     onClick?: () => void;
     padding?: string;
     style?: CSSProperties;
+    className?: string;
 }
-export declare function Card({ children, onClick, padding, style: extraStyle }: CardProps): import("react").JSX.Element;
+export declare function Card({ children, onClick, padding, style: extraStyle, className, }: CardProps): import("react").JSX.Element;
 export interface TabsProps {
     tabs: Array<{
         key: string;
@@ -26,8 +28,9 @@ export interface TabsProps {
     active: string;
     onChange: (key: string) => void;
     style?: CSSProperties;
+    className?: string;
 }
-export declare function Tabs({ tabs, active, onChange, style: extraStyle }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, active, onChange, style: extraStyle, className }: TabsProps): import("react").JSX.Element;
 export interface ModalProps {
     open: boolean;
     onClose: () => void;
@@ -81,8 +84,9 @@ export interface SearchInputProps {
     onChange: (value: string) => void;
     placeholder?: string;
     style?: CSSProperties;
+    className?: string;
 }
-export declare function SearchInput({ value, onChange, placeholder, style: extraStyle, }: SearchInputProps): import("react").JSX.Element;
+export declare function SearchInput({ value, onChange, placeholder, style: extraStyle, className, }: SearchInputProps): import("react").JSX.Element;
 export interface ListRowProps {
     icon?: ReactNode;
     title: string;

package/dist/ui/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/ui/components.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/ui/components.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components.js

@@ -1,104 +1,87 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Component, useEffect, useId, useRef, useState, } from 'react';
-// Inject keyframes once
-if (typeof document !== 'undefined' && !document.getElementById('fas-ui-keyframes')) {
-    const style = document.createElement('style');
-    style.id = 'fas-ui-keyframes';
-    style.textContent =
-        '@keyframes fas-spin{to{transform:rotate(360deg)}}@keyframes fas-fade-in{from{opacity:0}to{opacity:1}}@keyframes fas-slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}';
-    document.head.appendChild(style);
-}
 export function Spinner({ size = 24, color = 'var(--accent)' }) {
-    return (_jsx("div", { style: {
-            width: size,
-            height: size,
-            border: '2px solid var(--line)',
-            borderTopColor: color,
-            borderRadius: '50%',
-            animation: 'fas-spin 0.6s linear infinite',
-        } }));
+    return (_jsx("div", { className: "border-2 border-line rounded-full motion-safe:animate-spin", 
+        // Dynamic: Spinner size and color come from caller props.
+        style: { width: size, height: size, borderTopColor: color } }));
 }
-const badgeColors = {
-    default: {
-        bg: 'var(--panel)',
-        color: 'var(--muted)',
-        border: 'var(--line)',
-    },
-    accent: {
-        bg: 'var(--accent-soft)',
-        color: 'var(--accent)',
-        border: 'var(--accent)',
-    },
-    success: {
-        bg: 'var(--success-soft, #f0fdf4)',
-        color: 'var(--success, #16a34a)',
-        border: '#86efac',
-    },
-    warning: {
-        bg: 'var(--warning-soft, #fefce8)',
-        color: 'var(--warning, #ca8a04)',
-        border: '#fde047',
-    },
-    danger: { bg: 'var(--danger-soft, #fef2f2)', color: 'var(--danger, #dc2626)', border: '#fecaca' },
+const badgeClasses = {
+    default: 'bg-panel text-muted border-line',
+    accent: 'bg-accent-soft text-accent border-accent',
+    success: 'bg-success-soft text-success border-success',
+    warning: 'bg-warning-soft text-warning border-warning',
+    danger: 'bg-danger-soft text-danger border-danger',
 };
-export function Badge({ children, variant = 'default', style: extraStyle }) {
-    const c = badgeColors[variant] ?? badgeColors.default;
-    return (_jsx("span", { style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '0.25rem',
-            padding: '0.15rem 0.5rem',
-            borderRadius: '9999px',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-            lineHeight: 1.4,
-            background: c.bg,
-            color: c.color,
-            border: `1px solid ${c.border}`,
-            ...extraStyle,
-        }, children: children }));
+export function Badge({ children, variant = 'default', style: extraStyle, className }) {
+    const palette = badgeClasses[variant];
+    return (_jsx("span", { className: [
+            'inline-flex',
+            'items-center',
+            'gap-1',
+            'p-[0.15rem_0.5rem]',
+            'rounded-full',
+            'text-[0.75rem]',
+            'font-semibold',
+            'leading-[1.4]',
+            'border',
+            palette,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), 
+        // Dynamic: Caller-supplied appearance remains supported for compatibility; prefer className.
+        style: { ...extraStyle }, children: children }));
 }
-export function Card({ children, onClick, padding = '1rem', style: extraStyle }) {
+export function Card({ children, onClick, padding = '1rem', style: extraStyle, className, }) {
     const interactive = !!onClick;
     const Tag = interactive ? 'button' : 'div';
-    return (_jsx(Tag, { onClick: onClick, style: {
-            display: 'block',
-            width: '100%',
-            textAlign: 'left',
-            padding,
-            borderRadius: 'var(--radius, 0.75rem)',
-            border: '1px solid var(--line)',
-            background: 'var(--panel)',
-            cursor: interactive ? 'pointer' : undefined,
-            fontFamily: 'inherit',
-            fontSize: 'inherit',
-            color: 'inherit',
-            transition: 'border-color 0.15s',
-            ...(interactive ? { outline: 'none' } : {}),
-            ...extraStyle,
-        }, children: children }));
+    return (_jsx(Tag, { onClick: onClick, className: [
+            'block',
+            'w-full',
+            'text-left',
+            'rounded',
+            'border border-line',
+            'bg-panel',
+            interactive ? 'cursor-pointer' : '',
+            'font-[inherit]',
+            'text-[inherit]',
+            'text-inherit',
+            'transition-colors duration-150',
+            'focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), 
+        // Dynamic: Card padding and appearance come from caller props.
+        style: { padding: padding, ...extraStyle }, children: children }));
 }
-export function Tabs({ tabs, active, onChange, style: extraStyle }) {
-    return (_jsx("div", { style: {
-            display: 'inline-flex',
-            gap: '0.25rem',
-            padding: '0.25rem',
-            borderRadius: '9999px',
-            border: '1px solid var(--line)',
-            background: 'var(--panel)',
-            ...extraStyle,
-        }, children: tabs.map((tab) => (_jsx("button", { onClick: () => onChange(tab.key), style: {
-                padding: '0.35rem 0.85rem',
-                borderRadius: '9999px',
-                border: 'none',
-                fontSize: '0.8rem',
-                fontWeight: 600,
-                cursor: 'pointer',
-                fontFamily: 'inherit',
-                transition: 'all 0.15s',
-                background: active === tab.key ? 'var(--ink)' : 'transparent',
-                color: active === tab.key ? 'var(--panel)' : 'var(--muted)',
-            }, children: tab.label }, tab.key))) }));
+export function Tabs({ tabs, active, onChange, style: extraStyle, className }) {
+    return (_jsx("div", { className: [
+            'inline-flex',
+            'gap-1',
+            'p-1',
+            'rounded-full',
+            'border border-line',
+            'bg-panel',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), 
+        // Dynamic: Caller-supplied appearance remains supported for compatibility; prefer className.
+        style: { ...extraStyle }, children: tabs.map((tab) => (_jsx("button", { onClick: () => onChange(tab.key), className: [
+                'p-[0.35rem_0.85rem]',
+                'rounded-full',
+                'border-0',
+                'text-[0.8rem]',
+                'font-semibold',
+                'cursor-pointer',
+                'font-[inherit]',
+                'transition-all duration-150',
+                active === tab.key ? 'bg-ink' : 'bg-transparent',
+                active === tab.key ? 'text-panel' : 'text-muted',
+            ]
+                .filter(Boolean)
+                .join(' '), children: tab.label }, tab.key))) }));
 }
 const FOCUSABLE = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), iframe, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 /** Focusable elements inside `root`, in tab order, skipping hidden ones. */
@@ -199,153 +182,62 @@ export function Modal({ open, onClose, children, title, ariaLabel, closeOnEscape
     }, [open]);
     if (!open)
         return null;
-    return (_jsx("div", { onClick: onClose, style: {
-            position: 'fixed',
-            inset: 0,
-            zIndex: 999,
-            background: 'rgba(0,0,0,0.5)',
-            backdropFilter: 'blur(4px)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '1rem',
-            animation: 'fas-fade-in 0.15s',
-        }, children: _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, tabIndex: -1, onClick: (e) => e.stopPropagation(), style: {
-                outline: 'none',
-                background: 'var(--panel)',
-                border: '1px solid var(--line)',
-                borderRadius: 'var(--radius-lg, var(--radius, 0.75rem))',
-                maxWidth,
-                width: '100%',
-                maxHeight: '85dvh',
-                overflow: 'auto',
-                animation: 'fas-slide-up 0.2s',
-            }, children: [title && (_jsxs("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        padding: '1rem 1.25rem',
-                        borderBottom: '1px solid var(--line)',
-                    }, children: [_jsx("h2", { id: titleId, style: { margin: 0, fontSize: '1rem', fontWeight: 700, color: 'var(--ink)' }, children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", style: {
-                                background: 'none',
-                                border: 'none',
-                                cursor: 'pointer',
-                                padding: '0.25rem',
-                                color: 'var(--muted)',
-                                fontSize: '1.25rem',
-                                lineHeight: 1,
-                                fontFamily: 'inherit',
-                            }, children: "\u00D7" })] })), _jsx("div", { ref: contentRef, style: { padding: '1.25rem' }, children: children })] }) }));
+    return (_jsx("div", { onClick: onClose, className: "fixed inset-0 z-[999] bg-scrim backdrop-blur-[4px] flex items-center justify-center p-4 motion-safe:animate-sdk-fade-in", children: _jsxs("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : ariaLabel, tabIndex: -1, onClick: (e) => e.stopPropagation(), className: "outline-none bg-popover border border-line rounded-lg w-full max-h-[85dvh] overflow-auto motion-safe:animate-sdk-slide-up", 
+            // Dynamic: Dialog maximum width comes from the caller prop.
+            style: { maxWidth: maxWidth }, children: [title && (_jsxs("div", { className: "flex items-center justify-between p-[1rem_1.25rem] border-b border-line", children: [_jsx("h2", { id: titleId, className: "m-0 text-[1rem] font-bold text-ink", children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "bg-transparent border-0 cursor-pointer p-1 text-muted text-[1.25rem] leading-[1] font-[inherit]", children: "\u00D7" })] })), _jsx("div", { ref: contentRef, className: "p-5", children: children })] }) }));
 }
 export function ConfirmDialog({ open, onConfirm, onCancel, title, message, confirmLabel = 'Confirm', variant = 'default', closeOnEscape = true, }) {
     const isDanger = variant === 'danger';
     return (
     // Focus starts on Cancel (the first button), the safe choice for a destructive confirm.
-    _jsxs(Modal, { open: open, onClose: onCancel, title: title, maxWidth: 400, closeOnEscape: closeOnEscape, children: [_jsx("p", { style: { fontSize: '0.9rem', color: 'var(--muted)', margin: '0 0 1.25rem' }, children: message }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", onClick: onCancel, style: {
-                            padding: '0.5rem 1rem',
-                            borderRadius: 'var(--radius-sm, 0.5rem)',
-                            border: '1px solid var(--line)',
-                            background: 'transparent',
-                            color: 'var(--ink)',
-                            fontSize: '0.85rem',
-                            fontWeight: 600,
-                            cursor: 'pointer',
-                            fontFamily: 'inherit',
-                        }, children: "Cancel" }), _jsx("button", { type: "button", onClick: onConfirm, style: {
-                            padding: '0.5rem 1rem',
-                            borderRadius: 'var(--radius-sm, 0.5rem)',
-                            border: 'none',
-                            fontSize: '0.85rem',
-                            fontWeight: 600,
-                            cursor: 'pointer',
-                            fontFamily: 'inherit',
-                            background: isDanger ? 'var(--danger, #dc2626)' : 'var(--accent)',
-                            color: '#fff',
-                        }, children: confirmLabel })] })] }));
+    _jsxs(Modal, { open: open, onClose: onCancel, title: title, maxWidth: 400, closeOnEscape: closeOnEscape, children: [_jsx("p", { className: "text-[0.9rem] text-muted m-[0_0_1.25rem]", children: message }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx("button", { type: "button", onClick: onCancel, className: "p-[0.5rem_1rem] rounded-sm border border-line bg-transparent text-ink text-[0.85rem] font-semibold cursor-pointer font-[inherit]", children: "Cancel" }), _jsx("button", { type: "button", onClick: onConfirm, className: [
+                            'p-[0.5rem_1rem]',
+                            'rounded-sm',
+                            'border-0',
+                            'text-[0.85rem]',
+                            'font-semibold',
+                            'cursor-pointer',
+                            'font-[inherit]',
+                            isDanger ? 'bg-danger' : 'bg-accent',
+                            'text-white',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), children: confirmLabel })] })] }));
 }
 export function EmptyState({ icon, title, message, action }) {
-    return (_jsxs("div", { style: { textAlign: 'center', padding: '3rem 1.5rem' }, children: [icon && (_jsx("div", { style: { marginBottom: '0.75rem', color: 'var(--muted)', fontSize: '2rem' }, children: icon })), title && (_jsx("div", { style: {
-                    fontSize: '1rem',
-                    fontWeight: 700,
-                    color: 'var(--ink)',
-                    marginBottom: '0.35rem',
-                }, children: title })), _jsx("p", { style: {
-                    fontSize: '0.85rem',
-                    color: 'var(--muted)',
-                    margin: '0 0 1rem',
-                    maxWidth: 320,
-                    marginInline: 'auto',
-                }, children: message }), action] }));
+    return (_jsxs("div", { className: "text-center p-[3rem_1.5rem]", children: [icon && _jsx("div", { className: "mb-3 text-muted text-[2rem]", children: icon }), title && _jsx("div", { className: "text-[1rem] font-bold text-ink mb-[0.35rem]", children: title }), _jsx("p", { className: "text-[0.85rem] text-muted m-[0_0_1rem] max-w-80 [margin-inline:auto]", children: message }), action] }));
 }
 export function ProgressBar({ value, max = 100, color = 'var(--accent)', height = 8, label, }) {
     const pct = Math.min(100, Math.max(0, (value / max) * 100));
-    return (_jsxs("div", { children: [label && (_jsx("div", { style: {
-                    fontSize: '0.75rem',
-                    fontWeight: 600,
-                    color: 'var(--muted)',
-                    marginBottom: '0.35rem',
-                }, children: label })), _jsx("div", { style: {
-                    width: '100%',
-                    height,
-                    borderRadius: height,
-                    background: 'var(--line)',
-                    overflow: 'hidden',
-                }, children: _jsx("div", { style: {
-                        width: `${pct}%`,
-                        height: '100%',
-                        borderRadius: height,
-                        background: color,
-                        transition: 'width 0.3s',
-                    } }) })] }));
+    return (_jsxs("div", { children: [label && _jsx("div", { className: "text-[0.75rem] font-semibold text-muted mb-[0.35rem]", children: label }), _jsx("div", { className: "w-full bg-line overflow-hidden", 
+                // Dynamic: Track height and corner radius follow the caller height prop.
+                style: { height: height, borderRadius: height }, children: _jsx("div", { className: "h-full transition-[width] duration-300", 
+                    // Dynamic: Progress width is calculated from value/max; radius and color come from props.
+                    style: { width: `${pct}%`, borderRadius: height, background: color } }) })] }));
 }
-export function SearchInput({ value, onChange, placeholder = 'Search...', style: extraStyle, }) {
-    return (_jsxs("div", { style: { position: 'relative', ...extraStyle }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--muted)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: {
-                    position: 'absolute',
-                    left: 12,
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    pointerEvents: 'none',
-                }, children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.currentTarget.value), placeholder: placeholder, style: {
-                    width: '100%',
-                    padding: '0.5rem 0.75rem 0.5rem 2.25rem',
-                    borderRadius: '9999px',
-                    border: '1px solid var(--line)',
-                    background: 'var(--panel)',
-                    color: 'var(--ink)',
-                    fontSize: '0.85rem',
-                    fontFamily: 'inherit',
-                    outline: 'none',
-                } })] }));
+export function SearchInput({ value, onChange, placeholder = 'Search...', style: extraStyle, className, }) {
+    return (_jsxs("div", { className: ['relative', className].filter(Boolean).join(' '), 
+        // Dynamic: Caller-supplied appearance remains supported for compatibility; prefer className.
+        style: { ...extraStyle }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--muted)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "absolute left-3 top-[50%] [transform:translateY(-50%)] [pointer-events:none]", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.currentTarget.value), placeholder: placeholder, className: "w-full p-[0.5rem_0.75rem_0.5rem_2.25rem] rounded-full border border-line bg-panel text-ink text-[0.85rem] font-[inherit] outline-none" })] }));
 }
 export function ListRow({ icon, title, subtitle, trailing, onClick }) {
     const Tag = onClick ? 'button' : 'div';
-    return (_jsxs(Tag, { onClick: onClick, style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.75rem',
-            width: '100%',
-            padding: '0.65rem 0.75rem',
-            background: 'none',
-            border: 'none',
-            borderBottom: '1px solid var(--line)',
-            textAlign: 'left',
-            cursor: onClick ? 'pointer' : undefined,
-            fontFamily: 'inherit',
-            color: 'inherit',
-        }, children: [icon && _jsx("div", { style: { flexShrink: 0, color: 'var(--muted)' }, children: icon }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: {
-                            fontSize: '0.9rem',
-                            fontWeight: 600,
-                            color: 'var(--ink)',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: title }), subtitle && (_jsx("div", { style: {
-                            fontSize: '0.75rem',
-                            color: 'var(--muted)',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: subtitle }))] }), trailing && _jsx("div", { style: { flexShrink: 0 }, children: trailing })] }));
+    return (_jsxs(Tag, { onClick: onClick, className: [
+            'flex',
+            'items-center',
+            'gap-3',
+            'w-full',
+            'p-[0.65rem_0.75rem]',
+            'bg-transparent',
+            'border-0',
+            'border-b border-line',
+            'text-left',
+            onClick ? 'cursor-pointer' : '',
+            'font-[inherit]',
+            'text-inherit',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [icon && _jsx("div", { className: "shrink-0 text-muted", children: icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[0.9rem] font-semibold text-ink overflow-hidden [text-overflow:ellipsis] whitespace-nowrap", children: title }), subtitle && (_jsx("div", { className: "text-[0.75rem] text-muted overflow-hidden [text-overflow:ellipsis] whitespace-nowrap", children: subtitle }))] }), trailing && _jsx("div", { className: "shrink-0", children: trailing })] }));
 }
 export class ErrorBoundary extends Component {
     state = { error: null };
@@ -354,7 +246,7 @@ export class ErrorBoundary extends Component {
     }
     render() {
         if (this.state.error) {
-            return (this.props.fallback ?? (_jsxs("div", { style: { padding: '2rem', textAlign: 'center' }, children: [_jsx("p", { style: { color: 'var(--danger, #dc2626)', fontWeight: 700, marginBottom: '0.5rem' }, children: "Something went wrong" }), _jsx("p", { style: { color: 'var(--muted)', fontSize: '0.85rem' }, children: this.state.error.message })] })));
+            return (this.props.fallback ?? (_jsxs("div", { className: "p-8 text-center", children: [_jsx("p", { className: "text-danger font-bold mb-2", children: "Something went wrong" }), _jsx("p", { className: "text-muted text-[0.85rem]", children: this.state.error.message })] })));
         }
         return this.props.children;
     }
@@ -398,32 +290,8 @@ export function BuildInfo({ version, commit, buildDate, extra }) {
     };
     if (!v && !sha && !date)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: handleClick, style: {
-                    position: 'fixed',
-                    bottom: 8,
-                    right: 8,
-                    width: 24,
-                    height: 24,
-                    zIndex: 9999,
-                    cursor: 'default',
-                    opacity: 0,
-                }, "aria-hidden": "true" }), visible && (_jsxs("div", { onClick: () => setVisible(false), style: {
-                    position: 'fixed',
-                    bottom: 8,
-                    right: 8,
-                    zIndex: 9999,
-                    background: 'rgba(0,0,0,0.85)',
-                    color: '#e5e5e5',
-                    padding: '0.5rem 0.75rem',
-                    borderRadius: '0.5rem',
-                    fontSize: '0.7rem',
-                    fontFamily: 'monospace',
-                    lineHeight: 1.6,
-                    maxWidth: 280,
-                    cursor: 'pointer',
-                    animation: 'fas-fade-in 0.15s',
-                }, children: [v && (_jsxs("div", { children: [_jsx("span", { style: { color: '#94a3b8' }, children: "version " }), v] })), sha && (_jsxs("div", { children: [_jsx("span", { style: { color: '#94a3b8' }, children: "commit " }), sha.slice(0, 7)] })), date && (_jsxs("div", { children: [_jsx("span", { style: { color: '#94a3b8' }, children: "built " }), new Date(date).toLocaleString()] })), extra &&
-                        Object.entries(extra).map(([k, val]) => (_jsxs("div", { children: [_jsx("span", { style: { color: '#94a3b8' }, children: k.padEnd(8) }), val] }, k))), _jsx("div", { style: { color: 'var(--muted)', marginTop: '0.25rem', fontSize: '0.6rem' }, children: "tap to dismiss" })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: handleClick, className: "fixed bottom-2 right-2 w-6 h-6 z-[9999] cursor-default opacity-[0]", "aria-hidden": "true" }), visible && (_jsxs("div", { onClick: () => setVisible(false), className: "fixed bottom-2 right-2 z-[9999] bg-popover text-ink border border-line shadow-lg p-[0.5rem_0.75rem] rounded-[0.5rem] text-[0.7rem] font-mono leading-[1.6] max-w-70 cursor-pointer motion-safe:animate-sdk-fade-in", children: [v && (_jsxs("div", { children: [_jsx("span", { className: "text-muted", children: "version " }), v] })), sha && (_jsxs("div", { children: [_jsx("span", { className: "text-muted", children: "commit " }), sha.slice(0, 7)] })), date && (_jsxs("div", { children: [_jsx("span", { className: "text-muted", children: "built " }), new Date(date).toLocaleString()] })), extra &&
+                        Object.entries(extra).map(([k, val]) => (_jsxs("div", { children: [_jsx("span", { className: "text-muted", children: k.padEnd(8) }), val] }, k))), _jsx("div", { className: "text-muted mt-1 text-[0.6rem]", children: "tap to dismiss" })] }))] }));
 }
 /**
  * Fixed bottom footer for PWA standalone mode. Shows "Part of FreeAppStore"
@@ -453,27 +321,7 @@ export function Footer({ text }) {
     }, []);
     if (!isStandalone)
         return null;
-    return (_jsx("footer", { style: {
-            position: 'fixed',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 900,
-            textAlign: 'center',
-            background: 'var(--panel)',
-            borderTop: '1px solid var(--line)',
-            paddingTop: '0.5rem',
-            paddingBottom: 'calc(0.5rem + env(safe-area-inset-bottom, 0px))',
-            backdropFilter: 'blur(20px)',
-            WebkitBackdropFilter: 'blur(20px)',
-        }, children: _jsx("a", { href: "https://freeappstore.online", target: "_blank", rel: "noopener noreferrer", style: {
-                fontSize: '0.65rem',
-                fontWeight: 600,
-                letterSpacing: '0.05em',
-                textTransform: 'uppercase',
-                color: 'var(--muted)',
-                textDecoration: 'none',
-            }, children: text ?? 'Part of FreeAppStore' }) }));
+    return (_jsx("footer", { className: "fixed left-0 right-0 bottom-0 z-[900] text-center bg-panel border-t border-line pt-2 pb-[calc(0.5rem_+_env(safe-area-inset-bottom,_0px))] backdrop-blur-[20px]", children: _jsx("a", { href: "https://freeappstore.online", target: "_blank", rel: "noopener noreferrer", className: "text-[0.65rem] font-semibold tracking-[0.05em] uppercase text-muted no-underline", children: text ?? 'Part of FreeAppStore' }) }));
 }
 /**
  * Returns true when the app is running in PWA standalone mode (installed
@@ -499,34 +347,6 @@ export function KeyPrompt({ app, provider, providerName, message }) {
     const name = providerName ?? provider;
     const msg = message ??
         `This app uses ${name} and needs your API key. Your key is stored securely on the FreeAppStore platform and is never visible to the app.`;
-    return (_jsxs("div", { style: {
-            background: 'var(--panel)',
-            border: '1px solid var(--line)',
-            borderRadius: 'var(--radius, 0.75rem)',
-            padding: '1.5rem',
-            maxWidth: 420,
-            margin: '2rem auto',
-            textAlign: 'center',
-        }, children: [_jsx("div", { style: { fontSize: '1.5rem', marginBottom: '0.5rem' }, children: _jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "var(--muted)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { display: 'inline-block', verticalAlign: 'middle' }, children: _jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }) }) }), _jsxs("div", { style: {
-                    fontSize: '1rem',
-                    fontWeight: 700,
-                    color: 'var(--ink)',
-                    marginBottom: '0.5rem',
-                }, children: [name, " API key required"] }), _jsx("p", { style: {
-                    fontSize: '0.85rem',
-                    color: 'var(--muted)',
-                    margin: '0 0 1rem',
-                    lineHeight: 1.5,
-                }, children: msg }), _jsxs("button", { onClick: () => app.keys.manage(provider), style: {
-                    background: 'var(--accent)',
-                    color: '#fff',
-                    border: 'none',
-                    padding: '0.6rem 1.5rem',
-                    borderRadius: 'var(--radius, 0.75rem)',
-                    fontSize: '0.9rem',
-                    fontWeight: 700,
-                    cursor: 'pointer',
-                    fontFamily: 'inherit',
-                }, children: ["Configure ", name, " key"] })] }));
+    return (_jsxs("div", { className: "bg-panel border border-line rounded p-6 max-w-105 m-[2rem_auto] text-center", children: [_jsx("div", { className: "text-[1.5rem] mb-2", children: _jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "var(--muted)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "inline-block align-middle", children: _jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }) }) }), _jsxs("div", { className: "text-[1rem] font-bold text-ink mb-2", children: [name, " API key required"] }), _jsx("p", { className: "text-[0.85rem] text-muted m-[0_0_1rem] leading-[1.5]", children: msg }), _jsxs("button", { onClick: () => app.keys.manage(provider), className: "bg-accent text-white border-0 p-[0.6rem_1.5rem] rounded text-[0.9rem] font-bold cursor-pointer font-[inherit]", children: ["Configure ", name, " key"] })] }));
 }
 //# sourceMappingURL=components.js.map