@gunjo/ui 0.0.1-alpha.0

package/src/components/organisms/RightRail.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface RightRailProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: string
+}
+
+const RightRail = React.forwardRef<HTMLDivElement, RightRailProps>(
+    ({ className, width = "w-64", children, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex flex-col w-[256px] h-[360px] h-full border border-l border-border bg-background z-30 flex-shrink-0",
+                    width,
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+RightRail.displayName = "RightRail"
+
+export { RightRail }

package/src/components/organisms/ShareModal.tsx

@@ -0,0 +1,182 @@
+"use client"
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Copy, Globe, Lock, Check, ExternalLink } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface ShareData {
+    isPublic: boolean;
+    token?: string;
+    accessCount?: number;
+    createdAt?: string;
+}
+
+export interface ShareableItem {
+    id: string;
+    share?: ShareData;
+    [key: string]: any;
+}
+
+interface ShareModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    item: ShareableItem;
+    onUpdate: (id: string, updates: Partial<ShareableItem>) => void;
+    apiEndpoint?: string; // Allow customizing API endpoint
+}
+
+export const ShareModal = ({ isOpen, onClose, item, onUpdate, apiEndpoint = '/api/share' }: ShareModalProps) => {
+    const [isPublic, setIsPublic] = useState(item.share?.isPublic || false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [shareData, setShareData] = useState<ShareData | undefined>(item.share);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        setIsPublic(item.share?.isPublic || false);
+        setShareData(item.share);
+    }, [item.id, item.share]);
+
+    if (!isOpen || !mounted) return null;
+
+    const handleToggleShare = async () => {
+        setIsLoading(true);
+        try {
+            const res = await fetch(apiEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: item.id,
+                    enable: !isPublic
+                })
+            });
+
+            if (res.ok) {
+                const json = await res.json();
+                setIsPublic(!isPublic);
+                setShareData(json.share);
+                // Optimistic update for parent
+                onUpdate(item.id, { share: json.share });
+            }
+        } catch (error) {
+            console.error('Failed to toggle share', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const shareUrl = shareData?.token
+        ? `${window.location.origin}/share/${shareData.token}`
+        : '';
+
+    const handleCopy = () => {
+        if (shareUrl) {
+            navigator.clipboard.writeText(shareUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    };
+
+    return createPortal(
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-overlay/50 backdrop-blur-sm animate-in fade-in duration-200" onClick={(e) => { e.stopPropagation(); onClose(); }}>
+            <div className="bg-background border border-border rounded-xl shadow-2xl w-[448px] w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200" onClick={e => e.stopPropagation()}>
+                {/* Header */}
+                <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50">
+                    <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+                        <Globe size={16} className="text-primary" />
+                        Share Image
+                    </h3>
+                    <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors">
+                        <X size={18} />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6 space-y-6">
+
+                    {/* Toggle Switch */}
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-1">
+                            <div className="text-sm font-medium text-foreground">Public Link</div>
+                            <div className="text-xs text-muted-foreground">
+                                {isPublic
+                                    ? "Anyone with the link can view this image."
+                                    : "Only you can view this image."}
+                            </div>
+                        </div>
+
+                        <button
+                            onClick={handleToggleShare}
+                            disabled={isLoading}
+                            className={cn(
+                                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
+                                isPublic ? "bg-primary" : "bg-muted",
+                                isLoading && "opacity-50 cursor-not-allowed"
+                            )}
+                        >
+                            <span
+                                className={cn(
+                                    "inline-block h-4 w-4 transform rounded-full bg-background transition-transform",
+                                    isPublic ? "translate-x-6" : "translate-x-1"
+                                )}
+                            />
+                        </button>
+                    </div>
+
+                    {/* URL Display */}
+                    {isPublic && shareData && (
+                        <div className="space-y-2 animate-in slide-in-from-top-2 duration-200">
+                            <label className="text-xs font-medium text-muted-foreground">Public URL</label>
+                            <div className="flex items-center gap-2">
+                                <div className="flex-1 bg-muted border border-border rounded-md px-3 py-2 text-xs text-muted-foreground font-mono truncate select-all">
+                                    {shareUrl}
+                                </div>
+                                <button
+                                    onClick={handleCopy}
+                                    className="p-2 bg-background hover:bg-muted text-muted-foreground rounded-md transition-colors border border-border"
+                                    title="Copy to clipboard"
+                                >
+                                    {copied ? <Check size={16} className="text-primary" /> : <Copy size={16} />}
+                                </button>
+                                <a
+                                    href={shareUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="p-2 bg-background hover:bg-muted text-muted-foreground rounded-md transition-colors border border-border"
+                                    title="Open in new tab"
+                                >
+                                    <ExternalLink size={16} />
+                                </a>
+                            </div>
+
+                            {/* Stats */}
+                            <div className="flex items-center gap-4 pt-2">
+                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                    <Globe size={12} />
+                                    <span>Access Count: <span className="text-foreground font-mono">{shareData.accessCount || 0}</span></span>
+                                </div>
+                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                                    <Lock size={12} />
+                                    <span>Token: <span className="text-foreground font-mono">{shareData.token?.slice(0, 8)}...</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {!isPublic && (
+                        <div className="flex flex-col items-center justify-center py-4 text-muted-foreground space-y-2 border-2 border-dashed border-border rounded-lg bg-muted/50">
+                            <Lock size={24} />
+                            <span className="text-xs">Sharing is disabled</span>
+                        </div>
+                    )}
+
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};

package/src/components/organisms/SpatialCanvas.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+interface SpatialCanvasProps {
+    children: React.ReactNode;
+    className?: string;
+    gridSize?: number;
+}
+
+export const SpatialCanvas: React.FC<SpatialCanvasProps> = ({
+    children,
+    className,
+    gridSize = 20
+}) => {
+    return (
+        <div
+            className={cn(
+                "relative flex flex-col w-[640px] h-[360px] w-full h-full overflow-hidden bg-muted/50 select-none",
+                className
+            )}
+            style={{
+                backgroundImage: `radial-gradient(circle, hsl(var(--foreground) / 0.08) 1px, transparent 1px)`,
+                backgroundSize: `${gridSize}px ${gridSize}px`
+            }}
+        >
+            <div className="absolute inset-0 pointer-events-none dark:opacity-20 opacity-5"
+                style={{
+                    backgroundImage: `linear-gradient(to right, hsl(var(--foreground) / 0.07) 1px, transparent 1px),
+                                    linear-gradient(to bottom, hsl(var(--foreground) / 0.07) 1px, transparent 1px)`,
+                    backgroundSize: `${gridSize * 5}px ${gridSize * 5}px`
+                }}
+            />
+            {children}
+        </div>
+    );
+};

package/src/components/organisms/ToastProvider.tsx

@@ -0,0 +1,49 @@
+"use client"
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { Toast, ToastType } from '../molecules/Toast';
+
+interface ToastContextType {
+    showToast: (message: string, type: ToastType, duration?: number) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+    const [toasts, setToasts] = useState<{ id: number, message: string, type: ToastType, duration: number, isVisible: boolean }[]>([]);
+
+    const showToast = useCallback((message: string, type: ToastType, duration = 3000) => {
+        const id = Date.now();
+        setToasts(prev => [...prev, { id, message, type, duration, isVisible: true }]);
+    }, []);
+
+    const closeToast = useCallback((id: number) => {
+        setToasts(prev => prev.map(t => t.id === id ? { ...t, isVisible: false } : t));
+        setTimeout(() => {
+            setToasts(prev => prev.filter(t => t.id !== id));
+        }, 300);
+    }, []);
+
+    return (
+        <ToastContext.Provider value={{ showToast }}>
+            {children}
+            <div className="fixed top-6 right-6 z-[100] flex flex-col items-center w-[320px] gap-2 pointer-events-none">
+                {toasts.map(toast => (
+                    <Toast
+                        key={toast.id}
+                        message={toast.message}
+                        type={toast.type}
+                        isVisible={toast.isVisible}
+                        onClose={() => closeToast(toast.id)}
+                        duration={toast.duration}
+                    />
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+};
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context) throw new Error('useToast must be used within a ToastProvider');
+    return context;
+};

package/src/components/templates/AuthTemplate.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface AuthTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    logo?: React.ReactNode
+    quote?: string
+    quoteAuthor?: string
+    children: React.ReactNode // The form
+}
+
+export function AuthTemplate({
+    children,
+    logo,
+    quote,
+    quoteAuthor,
+    className,
+    ...props
+}: AuthTemplateProps) {
+    return (
+        <div className={cn("container relative w-[1280px] h-[720px] h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0", className)} {...props}>
+            <div className="relative hidden h-full flex-col bg-muted p-10 text-background dark:border-r lg:flex">
+                <div className="absolute inset-0 bg-foreground" />
+                <div className="relative z-20 flex items-center text-lg font-medium">
+                    {logo || (
+                        <>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="mr-2 h-6 w-6"
+                            >
+                                <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+                            </svg>
+                            Acme Inc
+                        </>
+                    )}
+                </div>
+                <div className="relative z-20 mt-auto">
+                    <blockquote className="space-y-2">
+                        <p className="text-lg">
+                            &ldquo;{quote || "This library has saved me infinite hours. I can build rich apps faster than ever before."}&rdquo;
+                        </p>
+                        <footer className="text-sm">{quoteAuthor || "Sofia Davis"}</footer>
+                    </blockquote>
+                </div>
+            </div>
+            <div className="lg:p-8 flex items-center justify-center h-full">
+                <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/templates/BannalyzeTemplate.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface BannalyzeTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode
+    sidebar?: React.ReactNode
+    inspector?: React.ReactNode
+    children: React.ReactNode
+}
+
+export function BannalyzeTemplate({
+    children,
+    header,
+    sidebar,
+    inspector,
+    className,
+    ...props
+}: BannalyzeTemplateProps) {
+    return (
+        <div className={cn("flex flex-col w-[1280px] h-[720px] h-screen w-full overflow-hidden bg-background", className)} {...props}>
+            {/* Header */}
+            {header && (
+                <div className="flex-shrink-0 z-20 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+                    <div className="flex h-14 items-center px-4">
+                        {header}
+                    </div>
+                </div>
+            )}
+
+            {/* Main Content Area */}
+            <div className="flex flex-1 overflow-hidden relative">
+                {/* Left Sidebar */}
+                {sidebar && (
+                    <aside className="group flex-shrink-0 w-64 border-r bg-muted/10 hidden md:block overflow-y-auto">
+                        {sidebar}
+                    </aside>
+                )}
+
+                {/* Canvas / Center Area */}
+                <main className="flex-1 relative overflow-hidden flex flex-col items-center justify-center bg-muted/20">
+                    <div className="w-full h-full p-4 overflow-auto flex items-center justify-center">
+                        {children}
+                    </div>
+                </main>
+
+                {/* Right Inspector Panel */}
+                {inspector && (
+                    <aside className="flex-shrink-0 w-80 border-l bg-background hidden lg:block overflow-y-auto">
+                        {inspector}
+                    </aside>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/templates/ChatTemplate.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface ChatTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    sidebarList?: React.ReactNode // Channel/User list
+    sidebarDetail?: React.ReactNode // User profile / Thread details
+    header?: React.ReactNode
+    children: React.ReactNode // Message stream
+    composer?: React.ReactNode // Input area
+}
+
+export function ChatTemplate({
+    sidebarList,
+    sidebarDetail,
+    header,
+    children,
+    composer,
+    className,
+    ...props
+}: ChatTemplateProps) {
+    return (
+        <div className={cn("flex w-[1280px] h-[720px] h-screen w-full overflow-hidden bg-background", className)} {...props}>
+            {/* Left Sidebar (Channels) */}
+            {sidebarList && (
+                <aside className="hidden w-[280px] flex-col border-r bg-muted/30 md:flex flex-shrink-0">
+                    {sidebarList}
+                </aside>
+            )}
+
+            {/* Main Chat Area */}
+            <div className="flex flex-col flex-1 min-w-0">
+                {header && (
+                    <header className="flex h-14 items-center border-b px-4 lg:h-[60px]">
+                        {header}
+                    </header>
+                )}
+                <main className="flex-1 overflow-y-auto p-4 flex flex-col">
+                    {children}
+                </main>
+                {composer && (
+                    <div className="p-4 border-t bg-background">
+                        {composer}
+                    </div>
+                )}
+            </div>
+
+            {/* Right Sidebar (Details) - Optional */}
+            {sidebarDetail && (
+                <aside className="hidden w-[300px] border-l bg-muted/30 xl:block flex-shrink-0">
+                    {sidebarDetail}
+                </aside>
+            )}
+        </div>
+    )
+}

package/src/components/templates/DashboardTemplate.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface DashboardTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode
+    sidebar?: React.ReactNode
+    children: React.ReactNode
+}
+
+export function DashboardTemplate({
+    children,
+    header,
+    sidebar,
+    className,
+    ...props
+}: DashboardTemplateProps) {
+    return (
+        <div className={cn("flex flex-col w-[1280px] h-[720px] min-h-screen w-full", className)} {...props}>
+            {header && <div className="border-b">{header}</div>}
+            <div className="flex flex-1">
+                {sidebar && (
+                    <aside className="hidden border-r w-64 md:block flex-shrink-0">
+                        {sidebar}
+                    </aside>
+                )}
+                <main className="flex-1 overflow-auto bg-muted/50">
+                    <div className="container mx-auto py-6 space-y-8 px-4 md:px-6">
+                        {children}
+                    </div>
+                </main>
+            </div>
+        </div>
+    )
+}

package/src/components/templates/EditorTemplate.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface EditorTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    topBar?: React.ReactNode
+    leftPanel?: React.ReactNode
+    rightPanel?: React.ReactNode
+    children: React.ReactNode // The canvas area
+}
+
+export function EditorTemplate({
+    children,
+    topBar,
+    leftPanel,
+    rightPanel,
+    className,
+    ...props
+}: EditorTemplateProps) {
+    return (
+        <div className={cn("flex flex-col w-[1280px] h-[720px] h-screen w-full overflow-hidden", className)} {...props}>
+            {topBar && (
+                <div className="flex-shrink-0 border-b h-14 flex items-center bg-background z-10">
+                    {topBar}
+                </div>
+            )}
+            <div className="flex flex-1 overflow-hidden relative">
+                {leftPanel && (
+                    <aside className="flex-shrink-0 border-r w-64 bg-background z-10 hidden md:block">
+                        {leftPanel}
+                    </aside>
+                )}
+
+                <main className="flex-1 relative bg-muted/50 overflow-hidden">
+                    {/* Canvas Area */}
+                    {children}
+                </main>
+
+                {rightPanel && (
+                    <aside className="flex-shrink-0 border-l w-72 bg-background z-10 hidden lg:block">
+                        {rightPanel}
+                    </aside>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/templates/KanbanTemplate.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface KanbanTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    sidebar?: React.ReactNode
+    header?: React.ReactNode
+    children: React.ReactNode // The columns
+}
+
+export function KanbanTemplate({
+    sidebar,
+    header,
+    children,
+    className,
+    ...props
+}: KanbanTemplateProps) {
+    return (
+        <div className={cn("flex w-[1280px] h-[720px] h-screen w-full overflow-hidden", className)} {...props}>
+            {sidebar && (
+                <aside className="hidden w-64 border-r bg-muted/40 md:block flex-shrink-0">
+                    {sidebar}
+                </aside>
+            )}
+            <div className="flex flex-col flex-1 h-full min-w-0">
+                {header && (
+                    <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-6 lg:h-[60px]">
+                        {header}
+                    </header>
+                )}
+                <main className="flex-1 overflow-x-auto overflow-y-hidden p-6">
+                    <div className="flex h-full gap-6">
+                        {children}
+                    </div>
+                </main>
+            </div>
+        </div>
+    )
+}

package/src/components/templates/LandingTemplate.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface LandingTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode
+    hero: React.ReactNode
+    features?: React.ReactNode
+    testimonials?: React.ReactNode
+    pricing?: React.ReactNode
+    cta?: React.ReactNode
+    footer?: React.ReactNode
+}
+
+export function LandingTemplate({
+    header,
+    hero,
+    features,
+    testimonials,
+    pricing,
+    cta,
+    footer,
+    className,
+    ...props
+}: LandingTemplateProps) {
+    return (
+        <div className={cn("flex flex-col w-[1280px] h-[720px] min-h-screen w-full", className)} {...props}>
+            {/* Sticky Header */}
+            {header && (
+                <div className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+                    <div className="container flex h-14 items-center">
+                        {header}
+                    </div>
+                </div>
+            )}
+
+            <main className="flex-1">
+                {hero}
+                {features && <section className="container py-12 md:py-24 lg:py-32">{features}</section>}
+                {testimonials && <section className="bg-muted/50 py-12 md:py-24 lg:py-32">{testimonials}</section>}
+                {pricing && <section className="container py-12 md:py-24 lg:py-32">{pricing}</section>}
+                {cta}
+            </main>
+
+            {footer && (
+                <footer className="border-t py-6 md:py-0">
+                    <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+                        {footer}
+                    </div>
+                </footer>
+            )}
+        </div>
+    )
+}