shiny-url-input-box 1.0.0

package/README.md

@@ -0,0 +1,64 @@
+# ShinyURL Input Box
+
+A reusable React component for generating ShinyURLs.
+
+## Installation
+
+```bash
+npm install shiny-url-input-box
+```
+
+Or use as a local package:
+
+```json
+{
+  "dependencies": {
+    "shiny-url-input-box": "file:../package"
+  }
+}
+```
+
+## Usage
+
+```javascript
+import { ShinyUrlInput } from 'shiny-url-input-box';
+
+function App() {
+  const handleSuccess = (data) => {
+    console.log('Short URL created:', data);
+  };
+
+  const handleError = (error) => {
+    console.error('Error:', error);
+  };
+
+  // With explicit API URL
+  return (
+    <ShinyUrlInput
+      apiBaseUrl="http://localhost:5000"
+      onSuccess={handleSuccess}
+      onError={handleError}
+      label="Enter URL to shorten"
+      buttonText="Shorten URL"
+    />
+  );
+
+  // Or without apiBaseUrl (uses same origin automatically)
+  return (
+    <ShinyUrlInput
+      onSuccess={handleSuccess}
+      onError={handleError}
+    />
+  );
+}
+```
+
+## Props
+
+- `apiBaseUrl` (string, optional) - Base URL of the backend API. If not provided, defaults to `window.location.origin` (same origin as the frontend)
+- `onSuccess` (function, optional) - Callback called when URL is successfully shortened
+- `onError` (function, optional) - Callback called when an error occurs
+- `label` (string, optional) - Label text above input (default: "Enter URL to shorten")
+- `buttonText` (string, optional) - Submit button text (default: "Shorten URL")
+- `className` (string, optional) - Additional CSS class for the wrapper
+

package/dist/ShinyUrlInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './TinyUrlInput.css';
+export interface ShinyUrlInputProps {
+    apiKey: string;
+    apiBaseUrl?: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+    label?: string;
+    buttonText?: string;
+    className?: string;
+    installationPageUrl?: string;
+}
+declare const ShinyUrlInput: React.FC<ShinyUrlInputProps>;
+export default ShinyUrlInput;
+//# sourceMappingURL=ShinyUrlInput.d.ts.map

package/dist/ShinyUrlInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShinyUrlInput.d.ts","sourceRoot":"","sources":["../src/ShinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAqCD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+O/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ShinyUrlInput.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from 'react';
+import './TinyUrlInput.css';
+// Security: Validate and sanitize URL
+const isValidUrl = (string) => {
+    try {
+        const url = new URL(string);
+        // Only allow http and https protocols
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_) {
+        return false;
+    }
+};
+// Security: Sanitize input to prevent XSS
+const sanitizeInput = (input) => {
+    return input.trim().replace(/[<>]/g, '');
+};
+// Get default API base URL (same origin or localhost:5000)
+const getDefaultApiBaseUrl = () => {
+    if (typeof window !== 'undefined') {
+        // Use same origin if available
+        return window.location.origin;
+    }
+    return 'http://localhost:5000';
+};
+const ShinyUrlInput = ({ apiKey, apiBaseUrl, onSuccess, onError, label = 'Enter URL to shorten', buttonText = 'Shorten URL', className = '', installationPageUrl }) => {
+    const [url, setUrl] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [shortUrl, setShortUrl] = useState('');
+    const [copied, setCopied] = useState(false);
+    const [keyValid, setKeyValid] = useState(null);
+    const [keyError, setKeyError] = useState('');
+    const [validatingKey, setValidatingKey] = useState(true);
+    // Use provided apiBaseUrl or fallback to default
+    const baseUrl = useMemo(() => {
+        return apiBaseUrl || getDefaultApiBaseUrl();
+    }, [apiBaseUrl]);
+    // Validate API key on mount
+    useEffect(() => {
+        const validateApiKey = async () => {
+            if (!apiKey) {
+                setKeyValid(false);
+                setKeyError('API key is required');
+                setValidatingKey(false);
+                return;
+            }
+            try {
+                const response = await fetch(`${baseUrl}/api/users/api-keys/validate`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ apiKey }),
+                });
+                const data = await response.json();
+                if (data.success && data.valid) {
+                    setKeyValid(true);
+                    setKeyError('');
+                }
+                else {
+                    setKeyValid(false);
+                    setKeyError(data.message || 'Invalid or expired API key');
+                }
+            }
+            catch (err) {
+                setKeyValid(false);
+                setKeyError('Failed to validate API key. Please check your connection.');
+            }
+            finally {
+                setValidatingKey(false);
+            }
+        };
+        validateApiKey();
+    }, [apiKey, baseUrl]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // Sanitize input
+        const sanitizedUrl = sanitizeInput(url);
+        if (!sanitizedUrl) {
+            setError('Please enter a URL');
+            return;
+        }
+        // Security: Validate URL format
+        if (!isValidUrl(sanitizedUrl)) {
+            setError('Please enter a valid URL (must start with http:// or https://)');
+            return;
+        }
+        setLoading(true);
+        setError('');
+        setShortUrl('');
+        setCopied(false);
+        try {
+            // Security: Use baseUrl which is validated
+            const response = await fetch(`${baseUrl}/api/shorten`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-API-Key': apiKey,
+                },
+                body: JSON.stringify({ originalUrl: sanitizedUrl }),
+            });
+            if (!response.ok) {
+                // Try to get error message from response
+                let errorMessage = 'Failed to shorten URL';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.message || errorMessage;
+                }
+                catch (e) {
+                    errorMessage = `Server error: ${response.status} ${response.statusText}`;
+                }
+                throw new Error(errorMessage);
+            }
+            const data = await response.json();
+            if (!data.success || !data.data) {
+                throw new Error(data.message || 'Failed to shorten URL');
+            }
+            setShortUrl(data.data.shortUrl);
+            if (onSuccess) {
+                onSuccess(data);
+            }
+        }
+        catch (err) {
+            let errorMessage = 'An error occurred';
+            if (err instanceof Error) {
+                errorMessage = err.message;
+            }
+            // Handle network errors
+            if (err instanceof TypeError && err.message.includes('fetch')) {
+                errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+            }
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage);
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(shortUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    // Show loading state while validating key (but still show input)
+    // Show error if API key is invalid (but still show input with warning)
+    return (_jsxs("div", { className: `tiny-url-input-wrapper ${className}`, children: [validatingKey && (_jsx("div", { className: "tiny-url-loading", style: { marginBottom: '10px', fontSize: '14px' }, children: "Validating API key..." })), keyValid === false && !validatingKey && (_jsxs("div", { className: "tiny-url-error", style: { marginBottom: '15px', padding: '10px', fontSize: '14px' }, children: [_jsx("strong", { children: "\u26A0\uFE0F Warning:" }), " ", keyError || 'API key validation failed', ". The component may not work correctly.", installationPageUrl && (_jsx("div", { style: { marginTop: '5px' }, children: _jsx("a", { href: installationPageUrl, target: "_blank", rel: "noopener noreferrer", style: {
+                                color: '#0066cc',
+                                textDecoration: 'underline',
+                                fontSize: '12px'
+                            }, children: "Learn how to get your API key \u2192" }) }))] })), _jsxs("form", { onSubmit: handleSubmit, className: "tiny-url-form", children: [_jsx("label", { htmlFor: "url-input", className: "tiny-url-label", children: label }), _jsxs("div", { className: "tiny-url-input-group", children: [_jsx("input", { id: "url-input", type: "text", value: url, onChange: (e) => {
+                                    // Basic input sanitization
+                                    const value = e.target.value;
+                                    setUrl(value);
+                                }, placeholder: "https://example.com/very/long/url", className: "tiny-url-input", disabled: loading }), _jsx("button", { type: "submit", className: "tiny-url-button", disabled: loading, children: loading ? 'Shortening...' : buttonText })] })] }), error && (_jsx("div", { className: "tiny-url-error", children: error })), shortUrl && (_jsxs("div", { className: "tiny-url-result", children: [_jsx("div", { className: "tiny-url-result-label", children: "Short URL:" }), _jsxs("div", { className: "tiny-url-result-content", children: [_jsx("a", { href: shortUrl, target: "_blank", rel: "noopener noreferrer", className: "tiny-url-link", children: shortUrl }), _jsx("button", { onClick: handleCopy, className: "tiny-url-copy-button", children: copied ? 'Copied!' : 'Copy' })] })] }))] }));
+};
+export default ShinyUrlInput;

package/dist/TinyUrlInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './TinyUrlInput.css';
+export interface TinyUrlInputProps {
+    apiBaseUrl?: string;
+    onSuccess?: (data: any) => void;
+    onError?: (error: string) => void;
+    label?: string;
+    buttonText?: string;
+    className?: string;
+}
+declare const TinyUrlInput: React.FC<TinyUrlInputProps>;
+export default TinyUrlInput;
+//# sourceMappingURL=TinyUrlInput.d.ts.map

package/dist/TinyUrlInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TinyUrlInput.d.ts","sourceRoot":"","sources":["../src/TinyUrlInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqCD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqK7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/TinyUrlInput.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import './TinyUrlInput.css';
+// Security: Validate and sanitize URL
+const isValidUrl = (string) => {
+    try {
+        const url = new URL(string);
+        // Only allow http and https protocols
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_) {
+        return false;
+    }
+};
+// Security: Sanitize input to prevent XSS
+const sanitizeInput = (input) => {
+    return input.trim().replace(/[<>]/g, '');
+};
+// Get default API base URL (same origin or localhost:5000)
+const getDefaultApiBaseUrl = () => {
+    if (typeof window !== 'undefined') {
+        // Use same origin if available
+        return window.location.origin;
+    }
+    return 'http://localhost:5000';
+};
+const TinyUrlInput = ({ apiBaseUrl, onSuccess, onError, label = 'Enter URL to shorten', buttonText = 'Shorten URL', className = '' }) => {
+    const [url, setUrl] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [shortUrl, setShortUrl] = useState('');
+    const [copied, setCopied] = useState(false);
+    // Use provided apiBaseUrl or fallback to default
+    const baseUrl = useMemo(() => {
+        return apiBaseUrl || getDefaultApiBaseUrl();
+    }, [apiBaseUrl]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        // Sanitize input
+        const sanitizedUrl = sanitizeInput(url);
+        if (!sanitizedUrl) {
+            setError('Please enter a URL');
+            return;
+        }
+        // Security: Validate URL format
+        if (!isValidUrl(sanitizedUrl)) {
+            setError('Please enter a valid URL (must start with http:// or https://)');
+            return;
+        }
+        setLoading(true);
+        setError('');
+        setShortUrl('');
+        setCopied(false);
+        try {
+            // Security: Use baseUrl which is validated
+            const response = await fetch(`${baseUrl}/api/shorten`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ originalUrl: sanitizedUrl }),
+            });
+            if (!response.ok) {
+                // Try to get error message from response
+                let errorMessage = 'Failed to shorten URL';
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.message || errorMessage;
+                }
+                catch (e) {
+                    errorMessage = `Server error: ${response.status} ${response.statusText}`;
+                }
+                throw new Error(errorMessage);
+            }
+            const data = await response.json();
+            if (!data.success || !data.data) {
+                throw new Error(data.message || 'Failed to shorten URL');
+            }
+            setShortUrl(data.data.shortUrl);
+            if (onSuccess) {
+                onSuccess(data);
+            }
+        }
+        catch (err) {
+            let errorMessage = 'An error occurred';
+            if (err instanceof Error) {
+                errorMessage = err.message;
+            }
+            // Handle network errors
+            if (err instanceof TypeError && err.message.includes('fetch')) {
+                errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+            }
+            setError(errorMessage);
+            if (onError) {
+                onError(errorMessage);
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(shortUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy:', err);
+        }
+    };
+    return (_jsxs("div", { className: `tiny-url-input-wrapper ${className}`, children: [_jsxs("form", { onSubmit: handleSubmit, className: "tiny-url-form", children: [_jsx("label", { htmlFor: "url-input", className: "tiny-url-label", children: label }), _jsxs("div", { className: "tiny-url-input-group", children: [_jsx("input", { id: "url-input", type: "text", value: url, onChange: (e) => {
+                                    // Basic input sanitization
+                                    const value = e.target.value;
+                                    setUrl(value);
+                                }, placeholder: "https://example.com/very/long/url", className: "tiny-url-input", disabled: loading }), _jsx("button", { type: "submit", className: "tiny-url-button", disabled: loading, children: loading ? 'Shortening...' : buttonText })] })] }), error && (_jsx("div", { className: "tiny-url-error", children: error })), shortUrl && (_jsxs("div", { className: "tiny-url-result", children: [_jsx("div", { className: "tiny-url-result-label", children: "Short URL:" }), _jsxs("div", { className: "tiny-url-result-content", children: [_jsx("a", { href: shortUrl, target: "_blank", rel: "noopener noreferrer", className: "tiny-url-link", children: shortUrl }), _jsx("button", { onClick: handleCopy, className: "tiny-url-copy-button", children: copied ? 'Copied!' : 'Copy' })] })] }))] }));
+};
+export default TinyUrlInput;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ShinyUrlInput } from './ShinyUrlInput';
+export type { ShinyUrlInputProps } from './ShinyUrlInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as ShinyUrlInput } from './ShinyUrlInput';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "shiny-url-input-box",
+  "version": "1.0.0",
+  "description": "A reusable React component for generating ShinyURLs",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "shiny-url",
+    "url-shortener"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  }
+}
+

package/src/ShinyUrlInput.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import React, { useState, useMemo, useEffect } from 'react';
+import './TinyUrlInput.css';
+
+export interface ShinyUrlInputProps {
+  apiKey: string;
+  apiBaseUrl?: string;
+  onSuccess?: (data: any) => void;
+  onError?: (error: string) => void;
+  label?: string;
+  buttonText?: string;
+  className?: string;
+  installationPageUrl?: string;
+}
+
+interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+
+// Security: Validate and sanitize URL
+const isValidUrl = (string: string): boolean => {
+  try {
+    const url = new URL(string);
+    // Only allow http and https protocols
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+};
+
+// Security: Sanitize input to prevent XSS
+const sanitizeInput = (input: string): string => {
+  return input.trim().replace(/[<>]/g, '');
+};
+
+// Get default API base URL (same origin or localhost:5000)
+const getDefaultApiBaseUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    // Use same origin if available
+    return window.location.origin;
+  }
+  return 'http://localhost:5000';
+};
+
+const ShinyUrlInput: React.FC<ShinyUrlInputProps> = ({
+  apiKey,
+  apiBaseUrl,
+  onSuccess,
+  onError,
+  label = 'Enter URL to shorten',
+  buttonText = 'Shorten URL',
+  className = '',
+  installationPageUrl
+}) => {
+  const [url, setUrl] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const [shortUrl, setShortUrl] = useState<string>('');
+  const [copied, setCopied] = useState<boolean>(false);
+  const [keyValid, setKeyValid] = useState<boolean | null>(null);
+  const [keyError, setKeyError] = useState<string>('');
+  const [validatingKey, setValidatingKey] = useState<boolean>(true);
+
+  // Use provided apiBaseUrl or fallback to default
+  const baseUrl = useMemo(() => {
+    return apiBaseUrl || getDefaultApiBaseUrl();
+  }, [apiBaseUrl]);
+
+  // Validate API key on mount
+  useEffect(() => {
+    const validateApiKey = async () => {
+      if (!apiKey) {
+        setKeyValid(false);
+        setKeyError('API key is required');
+        setValidatingKey(false);
+        return;
+      }
+
+      try {
+        const response = await fetch(`${baseUrl}/api/users/api-keys/validate`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ apiKey }),
+        });
+
+        const data = await response.json();
+
+        if (data.success && data.valid) {
+          setKeyValid(true);
+          setKeyError('');
+        } else {
+          setKeyValid(false);
+          setKeyError(data.message || 'Invalid or expired API key');
+        }
+      } catch (err) {
+        setKeyValid(false);
+        setKeyError('Failed to validate API key. Please check your connection.');
+      } finally {
+        setValidatingKey(false);
+      }
+    };
+
+    validateApiKey();
+  }, [apiKey, baseUrl]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Sanitize input
+    const sanitizedUrl = sanitizeInput(url);
+    
+    if (!sanitizedUrl) {
+      setError('Please enter a URL');
+      return;
+    }
+
+    // Security: Validate URL format
+    if (!isValidUrl(sanitizedUrl)) {
+      setError('Please enter a valid URL (must start with http:// or https://)');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setShortUrl('');
+    setCopied(false);
+
+    try {
+      // Security: Use baseUrl which is validated
+      const response = await fetch(`${baseUrl}/api/shorten`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-Key': apiKey,
+        },
+        body: JSON.stringify({ originalUrl: sanitizedUrl }),
+      });
+
+      if (!response.ok) {
+        // Try to get error message from response
+        let errorMessage = 'Failed to shorten URL';
+        try {
+          const errorData: ShortenResponse = await response.json();
+          errorMessage = errorData.message || errorMessage;
+        } catch (e) {
+          errorMessage = `Server error: ${response.status} ${response.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const data: ShortenResponse = await response.json();
+
+      if (!data.success || !data.data) {
+        throw new Error(data.message || 'Failed to shorten URL');
+      }
+
+      setShortUrl(data.data.shortUrl);
+      
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    } catch (err) {
+      let errorMessage = 'An error occurred';
+      
+      if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      
+      // Handle network errors
+      if (err instanceof TypeError && err.message.includes('fetch')) {
+        errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+      }
+      
+      setError(errorMessage);
+      
+      if (onError) {
+        onError(errorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(shortUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // Show loading state while validating key (but still show input)
+  // Show error if API key is invalid (but still show input with warning)
+
+  return (
+    <div className={`tiny-url-input-wrapper ${className}`}>
+      {validatingKey && (
+        <div className="tiny-url-loading" style={{ marginBottom: '10px', fontSize: '14px' }}>
+          Validating API key...
+        </div>
+      )}
+      {keyValid === false && !validatingKey && (
+        <div className="tiny-url-error" style={{ marginBottom: '15px', padding: '10px', fontSize: '14px' }}>
+          <strong>⚠️ Warning:</strong> {keyError || 'API key validation failed'}. The component may not work correctly.
+          {installationPageUrl && (
+            <div style={{ marginTop: '5px' }}>
+              <a
+                href={installationPageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  color: '#0066cc',
+                  textDecoration: 'underline',
+                  fontSize: '12px'
+                }}
+              >
+                Learn how to get your API key →
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="tiny-url-form">
+        <label htmlFor="url-input" className="tiny-url-label">
+          {label}
+        </label>
+        <div className="tiny-url-input-group">
+          <input
+            id="url-input"
+            type="text"
+            value={url}
+            onChange={(e) => {
+              // Basic input sanitization
+              const value = e.target.value;
+              setUrl(value);
+            }}
+            placeholder="https://example.com/very/long/url"
+            className="tiny-url-input"
+            disabled={loading}
+          />
+          <button
+            type="submit"
+            className="tiny-url-button"
+            disabled={loading}
+          >
+            {loading ? 'Shortening...' : buttonText}
+          </button>
+        </div>
+      </form>
+
+      {error && (
+        <div className="tiny-url-error">
+          {error}
+        </div>
+      )}
+
+      {shortUrl && (
+        <div className="tiny-url-result">
+          <div className="tiny-url-result-label">Short URL:</div>
+          <div className="tiny-url-result-content">
+            <a
+              href={shortUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="tiny-url-link"
+            >
+              {shortUrl}
+            </a>
+            <button
+              onClick={handleCopy}
+              className="tiny-url-copy-button"
+            >
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShinyUrlInput;
+

package/src/TinyUrlInput.css

@@ -0,0 +1,127 @@
+.tiny-url-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.tiny-url-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tiny-url-label {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.tiny-url-input-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.tiny-url-input {
+  flex: 1;
+  min-width: 200px;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.tiny-url-input:focus {
+  border-color: #4a90e2;
+}
+
+.tiny-url-input:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.tiny-url-button {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: white;
+  background-color: #4a90e2;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.tiny-url-button:hover:not(:disabled) {
+  background-color: #357abd;
+}
+
+.tiny-url-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.tiny-url-error {
+  padding: 0.75rem 1rem;
+  background-color: #fee;
+  color: #c33;
+  border: 1px solid #fcc;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.tiny-url-result {
+  padding: 1rem;
+  background-color: #f0f8ff;
+  border: 1px solid #b0d4f1;
+  border-radius: 6px;
+}
+
+.tiny-url-result-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 0.5rem;
+}
+
+.tiny-url-result-content {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.tiny-url-link {
+  flex: 1;
+  min-width: 200px;
+  color: #4a90e2;
+  text-decoration: none;
+  word-break: break-all;
+  font-size: 0.95rem;
+}
+
+.tiny-url-link:hover {
+  text-decoration: underline;
+}
+
+.tiny-url-copy-button {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  color: white;
+  background-color: #28a745;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.tiny-url-copy-button:hover {
+  background-color: #218838;
+}
+

package/src/TinyUrlInput.jsx

@@ -0,0 +1,193 @@
+import React, { useState, useMemo } from 'react';
+import './TinyUrlInput.css';
+
+// Security: Validate and sanitize URL
+const isValidUrl = (string) => {
+  try {
+    const url = new URL(string);
+    // Only allow http and https protocols
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+};
+
+// Security: Sanitize input to prevent XSS
+const sanitizeInput = (input) => {
+  return input.trim().replace(/[<>]/g, '');
+};
+
+// Get default API base URL (same origin or localhost:5000)
+const getDefaultApiBaseUrl = () => {
+  if (typeof window !== 'undefined') {
+    // Use same origin if available
+    return window.location.origin;
+  }
+  return 'http://localhost:5000';
+};
+
+const TinyUrlInput = ({
+  apiBaseUrl,
+  onSuccess,
+  onError,
+  label = 'Enter URL to shorten',
+  buttonText = 'Shorten URL',
+  className = ''
+}) => {
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [shortUrl, setShortUrl] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  // Use provided apiBaseUrl or fallback to default
+  const baseUrl = useMemo(() => {
+    return apiBaseUrl || getDefaultApiBaseUrl();
+  }, [apiBaseUrl]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Sanitize input
+    const sanitizedUrl = sanitizeInput(url);
+    
+    if (!sanitizedUrl) {
+      setError('Please enter a URL');
+      return;
+    }
+
+    // Security: Validate URL format
+    if (!isValidUrl(sanitizedUrl)) {
+      setError('Please enter a valid URL (must start with http:// or https://)');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setShortUrl('');
+    setCopied(false);
+
+    try {
+      // Security: Use baseUrl which is validated
+      const response = await fetch(`${baseUrl}/api/shorten`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ originalUrl: url.trim() }),
+      });
+
+      if (!response.ok) {
+        // Try to get error message from response
+        let errorMessage = 'Failed to shorten URL';
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.message || errorMessage;
+        } catch (e) {
+          errorMessage = `Server error: ${response.status} ${response.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.message || 'Failed to shorten URL');
+      }
+
+      setShortUrl(data.data.shortUrl);
+      
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    } catch (err) {
+      let errorMessage = err.message || 'An error occurred';
+      
+      // Handle network errors
+      if (err.name === 'TypeError' && err.message.includes('fetch')) {
+        errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+      }
+      
+      setError(errorMessage);
+      
+      if (onError) {
+        onError(errorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(shortUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className={`tiny-url-input-wrapper ${className}`}>
+      <form onSubmit={handleSubmit} className="tiny-url-form">
+        <label htmlFor="url-input" className="tiny-url-label">
+          {label}
+        </label>
+        <div className="tiny-url-input-group">
+          <input
+            id="url-input"
+            type="text"
+            value={url}
+            onChange={(e) => {
+              // Basic input sanitization
+              const value = e.target.value;
+              setUrl(value);
+            }}
+            placeholder="https://example.com/very/long/url"
+            className="tiny-url-input"
+            disabled={loading}
+          />
+          <button
+            type="submit"
+            className="tiny-url-button"
+            disabled={loading}
+          >
+            {loading ? 'Shortening...' : buttonText}
+          </button>
+        </div>
+      </form>
+
+      {error && (
+        <div className="tiny-url-error">
+          {error}
+        </div>
+      )}
+
+      {shortUrl && (
+        <div className="tiny-url-result">
+          <div className="tiny-url-result-label">Short URL:</div>
+          <div className="tiny-url-result-content">
+            <a
+              href={shortUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="tiny-url-link"
+            >
+              {shortUrl}
+            </a>
+            <button
+              onClick={handleCopy}
+              className="tiny-url-copy-button"
+            >
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TinyUrlInput;
+

package/src/TinyUrlInput.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import React, { useState, useMemo } from 'react';
+import './TinyUrlInput.css';
+
+export interface TinyUrlInputProps {
+  apiBaseUrl?: string;
+  onSuccess?: (data: any) => void;
+  onError?: (error: string) => void;
+  label?: string;
+  buttonText?: string;
+  className?: string;
+}
+
+interface ShortenResponse {
+  success: boolean;
+  data?: {
+    originalUrl: string;
+    shortUrl: string;
+    shortCode: string;
+  };
+  message?: string;
+}
+
+// Security: Validate and sanitize URL
+const isValidUrl = (string: string): boolean => {
+  try {
+    const url = new URL(string);
+    // Only allow http and https protocols
+    return url.protocol === 'http:' || url.protocol === 'https:';
+  } catch (_) {
+    return false;
+  }
+};
+
+// Security: Sanitize input to prevent XSS
+const sanitizeInput = (input: string): string => {
+  return input.trim().replace(/[<>]/g, '');
+};
+
+// Get default API base URL (same origin or localhost:5000)
+const getDefaultApiBaseUrl = (): string => {
+  if (typeof window !== 'undefined') {
+    // Use same origin if available
+    return window.location.origin;
+  }
+  return 'http://localhost:5000';
+};
+
+const TinyUrlInput: React.FC<TinyUrlInputProps> = ({
+  apiBaseUrl,
+  onSuccess,
+  onError,
+  label = 'Enter URL to shorten',
+  buttonText = 'Shorten URL',
+  className = ''
+}) => {
+  const [url, setUrl] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const [shortUrl, setShortUrl] = useState<string>('');
+  const [copied, setCopied] = useState<boolean>(false);
+
+  // Use provided apiBaseUrl or fallback to default
+  const baseUrl = useMemo(() => {
+    return apiBaseUrl || getDefaultApiBaseUrl();
+  }, [apiBaseUrl]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Sanitize input
+    const sanitizedUrl = sanitizeInput(url);
+    
+    if (!sanitizedUrl) {
+      setError('Please enter a URL');
+      return;
+    }
+
+    // Security: Validate URL format
+    if (!isValidUrl(sanitizedUrl)) {
+      setError('Please enter a valid URL (must start with http:// or https://)');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    setShortUrl('');
+    setCopied(false);
+
+    try {
+      // Security: Use baseUrl which is validated
+      const response = await fetch(`${baseUrl}/api/shorten`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ originalUrl: sanitizedUrl }),
+      });
+
+      if (!response.ok) {
+        // Try to get error message from response
+        let errorMessage = 'Failed to shorten URL';
+        try {
+          const errorData: ShortenResponse = await response.json();
+          errorMessage = errorData.message || errorMessage;
+        } catch (e) {
+          errorMessage = `Server error: ${response.status} ${response.statusText}`;
+        }
+        throw new Error(errorMessage);
+      }
+
+      const data: ShortenResponse = await response.json();
+
+      if (!data.success || !data.data) {
+        throw new Error(data.message || 'Failed to shorten URL');
+      }
+
+      setShortUrl(data.data.shortUrl);
+      
+      if (onSuccess) {
+        onSuccess(data);
+      }
+    } catch (err) {
+      let errorMessage = 'An error occurred';
+      
+      if (err instanceof Error) {
+        errorMessage = err.message;
+      }
+      
+      // Handle network errors
+      if (err instanceof TypeError && err.message.includes('fetch')) {
+        errorMessage = 'Cannot connect to server. Make sure the backend is running on ' + baseUrl;
+      }
+      
+      setError(errorMessage);
+      
+      if (onError) {
+        onError(errorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(shortUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className={`tiny-url-input-wrapper ${className}`}>
+      <form onSubmit={handleSubmit} className="tiny-url-form">
+        <label htmlFor="url-input" className="tiny-url-label">
+          {label}
+        </label>
+        <div className="tiny-url-input-group">
+          <input
+            id="url-input"
+            type="text"
+            value={url}
+            onChange={(e) => {
+              // Basic input sanitization
+              const value = e.target.value;
+              setUrl(value);
+            }}
+            placeholder="https://example.com/very/long/url"
+            className="tiny-url-input"
+            disabled={loading}
+          />
+          <button
+            type="submit"
+            className="tiny-url-button"
+            disabled={loading}
+          >
+            {loading ? 'Shortening...' : buttonText}
+          </button>
+        </div>
+      </form>
+
+      {error && (
+        <div className="tiny-url-error">
+          {error}
+        </div>
+      )}
+
+      {shortUrl && (
+        <div className="tiny-url-result">
+          <div className="tiny-url-result-label">Short URL:</div>
+          <div className="tiny-url-result-content">
+            <a
+              href={shortUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="tiny-url-link"
+            >
+              {shortUrl}
+            </a>
+            <button
+              onClick={handleCopy}
+              className="tiny-url-copy-button"
+            >
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TinyUrlInput;
+

package/src/index.js

@@ -0,0 +1,2 @@
+export { default as TinyUrlInput } from './TinyUrlInput.jsx';
+

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as ShinyUrlInput } from './ShinyUrlInput';
+export type { ShinyUrlInputProps } from './ShinyUrlInput';
+

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+