@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/layout/DeviceFrame.tsx

@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { IconLock as Lock, IconDeviceDesktop as Monitor, IconDeviceMobile as Smartphone, IconDeviceTablet as Tablet } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+import { deviceFrameDefaultVariantKey } from "./generated/default-variant-keys"
+import type { DeviceFrameVariantKey } from "./generated/variant-keys"
+import { TooltipButton } from "../inputs/TooltipButton"
+
+export type MarqueeViewport = "desktop" | "tablet" | "mobile"
+
+export interface DeviceFrameLabels {
+    url?: string
+    desktop?: string
+    tablet?: string
+    mobile?: string
+}
+
+export interface DeviceFrameProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fake host shown in the URL bar, without a trailing slash. */
+    host: string
+    /** Current path inside the fake host. */
+    path: string
+    /** Path used when the URL bar is submitted as `/`. */
+    defaultPath?: string
+    /** Optional tab title shown beside the URL on tablet and desktop frames. */
+    tabTitle?: string
+    viewport: MarqueeViewport
+    variant?: DeviceFrameVariantKey
+    onViewportChange: (next: MarqueeViewport) => void
+    /** Optional whitelist for URL-bar navigation. */
+    navigablePaths?: string[]
+    /** Called with the normalized path after a valid URL-bar submit. */
+    onPathChange?: (path: string) => void
+    labels?: DeviceFrameLabels
+    children: React.ReactNode
+}
+
+const VIEWPORTS: {
+    key: MarqueeViewport
+    Icon: typeof Monitor
+    labelKey: keyof DeviceFrameLabels
+    fallback: string
+}[] = [
+    { key: "desktop", Icon: Monitor, labelKey: "desktop", fallback: "Desktop" },
+    { key: "tablet", Icon: Tablet, labelKey: "tablet", fallback: "Tablet" },
+    { key: "mobile", Icon: Smartphone, labelKey: "mobile", fallback: "Mobile" },
+]
+
+interface DeviceFrameClassNames {
+    root: string
+    shell: string
+    chrome: string
+    url: string
+    viewportActive: string
+    viewportIdle: string
+}
+
+const variantClasses: Record<DeviceFrameVariantKey, DeviceFrameClassNames> = {
+    default: {
+        root: "p-0",
+        shell: "overflow-hidden rounded-xl border border-border/60 bg-background shadow-2xl",
+        chrome: "border-b border-border/60 bg-muted/40",
+        url: "border-border/40 bg-background/60 focus-within:border-primary focus-within:ring-primary-border",
+        viewportActive: "bg-foreground/10 text-foreground",
+        viewportIdle: "text-muted-foreground hover:bg-foreground/5 hover:text-foreground",
+    },
+    windows11: {
+        root: "p-0",
+        shell: "overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+        chrome: "border-b border-border bg-background",
+        url: "border-border/70 bg-muted/50 focus-within:border-primary focus-within:ring-primary-border",
+        viewportActive: "bg-primary-subtle text-primary-subtle-foreground",
+        viewportIdle: "text-muted-foreground hover:bg-muted hover:text-foreground",
+    },
+}
+
+function normalizeFramePath(value: string, host: string, defaultPath: string) {
+    let candidate = value
+        .trim()
+        .replace(/^https?:\/\//, "")
+        .replace(new RegExp(`^${host.replace(/\./g, "\\.")}`), "")
+
+    if (!candidate.startsWith("/")) candidate = `/${candidate}`
+    return candidate === "/" ? defaultPath : candidate
+}
+
+const DeviceFrame = React.forwardRef<HTMLDivElement, DeviceFrameProps>(
+    (
+        {
+            host,
+            path,
+            defaultPath = "/",
+            tabTitle,
+            viewport,
+            variant = deviceFrameDefaultVariantKey,
+            onViewportChange,
+            navigablePaths,
+            onPathChange,
+            labels,
+            children,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const classes = variantClasses[variant]
+        const [draftUrl, setDraftUrl] = React.useState(`${host}${path}`)
+        const [editing, setEditing] = React.useState(false)
+        const inputRef = React.useRef<HTMLInputElement | null>(null)
+
+        React.useEffect(() => {
+            if (!editing) setDraftUrl(`${host}${path}`)
+        }, [host, path, editing])
+
+        const commitDraftUrl = () => {
+            const candidate = normalizeFramePath(draftUrl, host, defaultPath)
+            if (!navigablePaths || navigablePaths.includes(candidate)) {
+                inputRef.current?.blur()
+                onPathChange?.(candidate)
+                return
+            }
+            setDraftUrl(`${host}${path}`)
+            inputRef.current?.blur()
+        }
+
+        const isCompact = viewport === "mobile"
+        const chromeOuter = cn(
+            isCompact
+                ? "flex items-center gap-2 px-2 py-2.5"
+                : "flex items-center gap-3 px-4 py-2.5",
+            classes.chrome
+        )
+        const urlBoxClass = cn(
+            isCompact
+                ? "flex min-w-0 w-full items-center gap-1.5 rounded-md border px-2 py-1 text-xs focus-within:ring-1"
+                : "flex min-w-0 w-full max-w-md items-center gap-2 rounded-md border px-3 py-1 text-xs focus-within:ring-1",
+            classes.url
+        )
+        const isWindows11 = variant === "windows11"
+
+        return (
+            <div ref={ref} className={cn("w-full", classes.root, className)} {...props}>
+                <div className={classes.shell}>
+                    <div className={chromeOuter}>
+                        {!isCompact && !isWindows11 ? (
+                            <div className="flex items-center gap-1.5" aria-hidden="true">
+                                <span className="h-3 w-3 rounded-full bg-destructive" />
+                                <span className="h-3 w-3 rounded-full bg-warning" />
+                                <span className="h-3 w-3 rounded-full bg-success" />
+                            </div>
+                        ) : null}
+                        <form
+                            onSubmit={(event) => {
+                                event.preventDefault()
+                                commitDraftUrl()
+                            }}
+                            className="flex min-w-0 flex-1 items-center justify-center"
+                        >
+                            <div className={urlBoxClass}>
+                                <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-hidden="true" />
+                                {tabTitle && !isCompact ? (
+                                    <span className="shrink-0 font-medium text-foreground">
+                                        {tabTitle}
+                                    </span>
+                                ) : null}
+                                <input
+                                    ref={inputRef}
+                                    type="text"
+                                    value={draftUrl}
+                                    onChange={(event) => setDraftUrl(event.currentTarget.value)}
+                                    onKeyDown={(event) => {
+                                        if (event.key === "Enter") {
+                                            event.preventDefault()
+                                            commitDraftUrl()
+                                        }
+                                    }}
+                                    onFocus={() => setEditing(true)}
+                                    onBlur={() => setEditing(false)}
+                                    className="min-w-0 flex-1 truncate bg-transparent font-mono text-xs text-muted-foreground outline-none placeholder:text-muted-foreground/60"
+                                    spellCheck={false}
+                                    aria-label={labels?.url ?? "URL"}
+                                />
+                            </div>
+                        </form>
+                        <div className="flex shrink-0 items-center gap-0.5">
+                            {VIEWPORTS.map(({ key, Icon, labelKey, fallback }) => {
+                                const label = labels?.[labelKey] ?? fallback
+                                return (
+                                    <TooltipButton
+                                        key={key}
+                                        type="button"
+                                        onClick={() => onViewportChange(key)}
+                                        aria-label={label}
+                                        aria-pressed={viewport === key}
+                                        tooltip={label}
+                                        tooltipSide="bottom"
+                                        variant="ghost"
+                                        size="icon"
+                                        className={cn(
+                                            "h-7 w-7 rounded-md p-1.5",
+                                            viewport === key ? classes.viewportActive : classes.viewportIdle
+                                        )}
+                                    >
+                                        <Icon className="h-3.5 w-3.5" />
+                                    </TooltipButton>
+                                )
+                            })}
+                        </div>
+                        {!isCompact && isWindows11 ? (
+                            <div className="ml-1 flex h-6 shrink-0 items-center overflow-hidden rounded-md border border-border/60 text-muted-foreground" aria-hidden="true">
+                                <span className="flex h-6 w-8 items-center justify-center text-xs leading-none">-</span>
+                                <span className="flex h-6 w-8 items-center justify-center text-[10px] leading-none">□</span>
+                                <span className="flex h-6 w-8 items-center justify-center text-xs leading-none">×</span>
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className="bg-background">{children}</div>
+                </div>
+            </div>
+        )
+    }
+)
+DeviceFrame.displayName = "DeviceFrame"
+
+export { DeviceFrame }

package/src/components/layout/Grid.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const GAP_MAP = {
+    0: "gap-0",
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6",
+    8: "gap-8",
+} as const
+
+const COLS_MAP = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    12: "grid-cols-12",
+} as const
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed number of columns. Mutually exclusive with `minItemWidth`. */
+    cols?: keyof typeof COLS_MAP
+    /**
+     * If set, uses CSS grid auto-fit with this minimum item width (px).
+     * Items wrap and fill available space responsively.
+     */
+    minItemWidth?: number
+    gap?: keyof typeof GAP_MAP
+}
+
+const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+    ({ className, cols, minItemWidth, gap = 4, style, ...props }, ref) => {
+        const useAutoFit = minItemWidth !== undefined
+        const computedStyle = useAutoFit
+            ? {
+                  ...style,
+                  gridTemplateColumns: `repeat(auto-fit, minmax(${minItemWidth}px, 1fr))`,
+              }
+            : style
+
+        return (
+            <div
+                ref={ref}
+                style={computedStyle}
+                className={cn(
+                    "grid",
+                    !useAutoFit && cols !== undefined && COLS_MAP[cols],
+                    !useAutoFit && cols === undefined && "grid-cols-3",
+                    GAP_MAP[gap],
+                    className
+                )}
+                {...props}
+            />
+        )
+    }
+)
+Grid.displayName = "Grid"
+
+export { Grid }

package/src/components/layout/HStack.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const GAP_MAP = {
+    0: "gap-0",
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6",
+    8: "gap-8",
+    10: "gap-10",
+    12: "gap-12",
+} as const
+
+const ALIGN_MAP = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    baseline: "items-baseline",
+    stretch: "items-stretch",
+} as const
+
+const JUSTIFY_MAP = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+} as const
+
+export interface HStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: keyof typeof GAP_MAP
+    align?: keyof typeof ALIGN_MAP
+    justify?: keyof typeof JUSTIFY_MAP
+    wrap?: boolean
+    inline?: boolean
+}
+
+const HStack = React.forwardRef<HTMLDivElement, HStackProps>(
+    (
+        {
+            className,
+            gap = 2,
+            align = "center",
+            justify = "start",
+            wrap = false,
+            inline = false,
+            ...props
+        },
+        ref
+    ) => (
+        <div
+            ref={ref}
+            className={cn(
+                inline ? "inline-flex" : "flex",
+                "flex-row",
+                wrap && "flex-wrap",
+                GAP_MAP[gap],
+                ALIGN_MAP[align],
+                JUSTIFY_MAP[justify],
+                className
+            )}
+            {...props}
+        />
+    )
+)
+HStack.displayName = "HStack"
+
+export { HStack }

package/src/components/{organisms → layout}/InspectorPanel.tsx

@@ -5,25 +5,26 @@ import { cn } from "../../lib/utils"
 
 export interface InspectorPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string
+    header?: React.ReactNode
     footer?: React.ReactNode
 }
 
 export const InspectorPanel = React.forwardRef<HTMLDivElement, InspectorPanelProps>(
-    ({ className, title, children, footer, ...props }, ref) => {
+    ({ className, title, header, children, footer, ...props }, ref) => {
         return (
             <div
                 ref={ref}
                 className={cn(
-                    "flex flex-col w-[320px] h-[420px] w-full h-full bg-background border-l border-border",
+                    "flex h-full w-full flex-col border-l border-border bg-background w-[320px] h-[420px]",
                     className
                 )}
                 {...props}
             >
-                {title && (
+                {header ?? (title && (
                     <div className="flex items-center h-12 px-4 border-b border-border bg-muted/30">
                         <h3 className="text-sm font-semibold text-foreground">{title}</h3>
                     </div>
-                )}
+                ))}
                 <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
                     {children}
                 </div>
@@ -57,7 +58,7 @@ export const InspectorField = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & { label: string }
 >(({ className, label, children, ...props }, ref) => (
-    <div ref={ref} className={cn("grid gap-1.5", className)} {...props}>
+    <div ref={ref} className={cn("grid min-w-0 gap-1.5", className)} {...props}>
         <label className="text-xs font-medium text-foreground">{label}</label>
         {children}
     </div>

package/src/components/layout/MarqueeFrame.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { DeviceFrame, type DeviceFrameLabels, type MarqueeViewport } from "./DeviceFrame"
+import { marqueeFrameDefaultVariantKey } from "./generated/default-variant-keys"
+import type { MarqueeFrameVariantKey } from "./generated/variant-keys"
+
+export type { MarqueeViewport } from "./DeviceFrame"
+
+export const MARQUEE_VIEWPORT_SIZES: Record<
+    MarqueeViewport,
+    { width: number; height: number }
+> = {
+    desktop: { width: 1280, height: 720 },
+    tablet: { width: 768, height: 1024 },
+    mobile: { width: 375, height: 667 },
+}
+
+export interface MarqueeFrameProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    host?: string
+    path: string
+    defaultPath?: string
+    tabTitle?: string
+    navigablePaths?: string[]
+    onPathChange?: (path: string) => void
+    storageKey?: string
+    initialViewport?: MarqueeViewport
+    variant?: MarqueeFrameVariantKey
+    viewportSizes?: Record<MarqueeViewport, { width: number; height: number }>
+    maxCanvasHeight?: number
+    labels?: DeviceFrameLabels
+    children: (viewport: MarqueeViewport) => React.ReactNode
+}
+
+const VIEWPORTS: MarqueeViewport[] = ["desktop", "tablet", "mobile"]
+
+const variantClasses: Record<MarqueeFrameVariantKey, { root: string }> = {
+    default: { root: "" },
+    desktop: { root: "" },
+    tablet: { root: "" },
+    mobile: { root: "" },
+}
+
+const MarqueeFrame = React.forwardRef<HTMLDivElement, MarqueeFrameProps>(
+    (
+        {
+            host = "gunjo.example",
+            path,
+            defaultPath = "/",
+            tabTitle = "GunjoUI",
+            navigablePaths,
+            onPathChange,
+            storageKey,
+            initialViewport = "desktop",
+            variant = marqueeFrameDefaultVariantKey,
+            viewportSizes = MARQUEE_VIEWPORT_SIZES,
+            maxCanvasHeight = 720,
+            labels,
+            children,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const classes = variantClasses[variant]
+        const containerRef = React.useRef<HTMLDivElement | null>(null)
+        const [viewport, setViewport] = React.useState<MarqueeViewport>(initialViewport)
+        const [scale, setScale] = React.useState(1)
+
+        React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)
+
+        React.useEffect(() => {
+            if (!storageKey) return
+            const stored = window.sessionStorage.getItem(storageKey)
+            if (VIEWPORTS.includes(stored as MarqueeViewport)) {
+                setViewport(stored as MarqueeViewport)
+            }
+        }, [storageKey])
+
+        const { width: viewportWidth, height: viewportHeight } = viewportSizes[viewport]
+
+        React.useLayoutEffect(() => {
+            const node = containerRef.current
+            if (!node) return
+            const updateScale = (available: number) => {
+                const widthRatio = Math.max(0, available - 8) / viewportWidth
+                const heightRatio = maxCanvasHeight / viewportHeight
+                const next = Math.min(1, widthRatio, heightRatio)
+                const stableNext = Math.round((next > 0 ? next : 1) * 1000) / 1000
+                setScale((current) => (Math.abs(current - stableNext) < 0.001 ? current : stableNext))
+            }
+            updateScale(node.clientWidth)
+            const resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0]
+                updateScale(entry?.contentRect.width ?? node.clientWidth)
+            })
+            resizeObserver.observe(node)
+            return () => resizeObserver.disconnect()
+        }, [maxCanvasHeight, viewportHeight, viewportWidth])
+
+        const handleViewportChange = (next: MarqueeViewport) => {
+            setViewport(next)
+            if (storageKey) window.sessionStorage.setItem(storageKey, next)
+        }
+
+        return (
+            <div
+                className={cn("w-full bg-muted/40 p-0 px-4 py-8 sm:px-8 lg:py-12", classes.root, className)}
+                data-slot="marquee-frame"
+                {...props}
+            >
+                <div ref={containerRef} className="mx-auto w-full" data-slot="marquee-frame-scale-container">
+                    <div
+                        className="mx-auto"
+                        data-slot="marquee-frame-scaled-box"
+                        style={{
+                            height: viewportHeight * scale + 56,
+                            width: viewportWidth * scale,
+                        }}
+                    >
+                        <div
+                            data-slot="marquee-frame-transform"
+                            style={{
+                                transform: `scale(${scale})`,
+                                transformOrigin: "top left",
+                                width: viewportWidth,
+                            }}
+                        >
+                            <DeviceFrame
+                                host={host}
+                                path={path}
+                                defaultPath={defaultPath}
+                                tabTitle={tabTitle}
+                                viewport={viewport}
+                                onViewportChange={handleViewportChange}
+                                navigablePaths={navigablePaths}
+                                onPathChange={onPathChange}
+                                labels={labels}
+                            >
+                                <div
+                                    className="overflow-hidden bg-background"
+                                    style={{ width: viewportWidth, height: viewportHeight }}
+                                >
+                                    {children(viewport)}
+                                </div>
+                            </DeviceFrame>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+)
+MarqueeFrame.displayName = "MarqueeFrame"
+
+export { MarqueeFrame }

package/src/components/layout/Resizable.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { IconGripVertical as GripVertical } from "@tabler/icons-react";
+import { Panel, Group as PanelGroup, Separator as PanelResizeHandle, type GroupImperativeHandle, type GroupProps } from "react-resizable-panels"
+
+import { cn } from "../../lib/utils"
+
+type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+    direction: "vertical" | "horizontal"
+}
+
+const ResizablePanelGroupResetContext = React.createContext<(() => void) | null>(null)
+
+const ResizablePanelGroup = ({
+    className,
+    direction,
+    defaultLayout,
+    groupRef,
+    ...props
+}: ResizablePanelGroupProps) => {
+    const internalGroupRef = React.useRef<GroupImperativeHandle | null>(null)
+    const setGroupRef = React.useCallback((node: GroupImperativeHandle | null) => {
+        internalGroupRef.current = node
+
+        if (typeof groupRef === "function") {
+            groupRef(node)
+            return
+        }
+
+        if (groupRef) {
+            (groupRef as React.MutableRefObject<GroupImperativeHandle | null>).current = node
+        }
+    }, [groupRef])
+    const resetLayout = React.useCallback(() => {
+        if (defaultLayout) {
+            internalGroupRef.current?.setLayout(defaultLayout)
+        }
+    }, [defaultLayout])
+
+    return (
+        <ResizablePanelGroupResetContext.Provider value={defaultLayout ? resetLayout : null}>
+            <PanelGroup
+                groupRef={setGroupRef}
+                defaultLayout={defaultLayout}
+                orientation={direction}
+                className={cn(
+                    "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+                    className
+                )}
+                {...props}
+            />
+        </ResizablePanelGroupResetContext.Provider>
+    )
+}
+
+const ResizablePanel = Panel
+
+const ResizableHandle = ({
+    withHandle,
+    className,
+    onDoubleClick,
+    ...props
+}: React.ComponentProps<typeof PanelResizeHandle> & {
+    withHandle?: boolean
+}) => {
+    const resetLayout = React.useContext(ResizablePanelGroupResetContext)
+    const handleDoubleClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        onDoubleClick?.(event)
+
+        if (!event.defaultPrevented) {
+            resetLayout?.()
+        }
+    }, [onDoubleClick, resetLayout])
+
+    return (
+        <PanelResizeHandle
+            className={cn(
+                "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[aria-orientation=horizontal]]:h-px [&[aria-orientation=horizontal]]:w-full [&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:top-1/2 [&[aria-orientation=horizontal]]:after:h-1 [&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-y-1/2 [&[aria-orientation=horizontal]]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
+                className
+            )}
+            onDoubleClick={handleDoubleClick}
+            {...props}
+        >
+            {withHandle && (
+                <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+                    <GripVertical className="h-2.5 w-2.5" />
+                </div>
+            )}
+        </PanelResizeHandle>
+    )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }